-
Welcome to Calculate me!
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
Calculation History 🗑
-
-
+
+
+
Calculate me !
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
Calculation History
+ 🗑
+
+
diff --git a/script.js b/script.js
index cc39b53..66bc90f 100644
--- a/script.js
+++ b/script.js
@@ -47,6 +47,7 @@ Array.from(buttons).forEach((button) => {
button.addEventListener("click", (e) => {
if (e.target.innerHTML == "=") {
calculate();
+ calculationString = "";
} else if (e.target.innerHTML == "C") {
calculationString = "";
updateInputAndHistory();
diff --git a/style.css b/style.css
index 6edd3f3..b7c217a 100644
--- a/style.css
+++ b/style.css
@@ -2,17 +2,21 @@
:root {
--primary-color: #e3f9ff;
- --secondary-color: rgb(35, 67, 88);
+ --secondary-color: #212121;
+ --btn-color: #83b4b1;
}
.dark-theme {
--primary-color: #212121;
- --secondary-color: #141013;
+ --secondary-color: #e3f9ff;
+ --btn-color: #83b4b1;
}
body {
- height: 100%;
- font-family: "Belanosima", sans-serif;
- background-color: var(--primary-color);
+ background-color: var(--primary-color);
+}
+
+h1 {
+ color: var(--secondary-color);
}
#icon {
@@ -23,82 +27,68 @@ body {
cursor: pointer;
}
-.historyHeadline {
- text-align: center;
+body div.mycalc {
+ text-align: center;
+ width: 300px;
+ margin: 0 auto;
}
-.clearHistory {
- cursor: pointer;
+div input[type='button'], button {
+ width: 72px;
+ height: 72px;
+ margin: 2px 0;
}
-.button {
- width: 50px;
- height: 50px;
- border: none;
- outline: none;
- padding: 10px;
- border-radius: 0.5rem;
- margin: 0.3rem;
- box-shadow: 2px 5px 20px #000;
- background: transparent;
+div input[type="text"] {
+ height: 50px;
+ width: 100%;
+ padding: 12px 20px;
font-size: 20px;
- color: #fff;
- cursor: pointer;
+ margin-bottom: 4px;
+ box-sizing: border-box;
+ border-radius: 4px;
+ border: 1px solid rgb(66, 66, 66);
}
-.button.arithmetic {
- background: #83b4b1;
- font-size: 17px;
+div.results input, div.results button {
+ height: 50px;
+ width: 104px;
}
-/* Responsive styles for smaller screens */
-@media screen and (max-width: 768px) {
- .cal-outer-body {
- width: 350px;
- }
+div.results button {
+ background-color: red;
+ color: #fff;
+ border: 1px solid red;
}
-.input {
- height: 100%;
- width: 100%;
+div.results input {
+ background-color: #fd7202;
+ color: #fff;
+ border: 1px solid #fd7202;
}
-.button:active {
- background-color: black;
- color: #81eded;
+.arithmetic {
+ background: var(--btn-color);
+ font-size: 16px;
+ border: 1.2px solid rgb(66, 66, 66);
}
-.button:hover {
- /* added a button hover effect */
- background-color: #000000;
- opacity: 0.7;
-}
-
-.row {
- margin: 8px 0;
+.history {
+ width: 100%;
+ color: var(--secondary-color);
}
-.row input {
- width: 225px;
- font-size: 20px;
- margin: 0;
- padding: 10px 38px;
- border: none;
- border-radius: 5px;
+#history-list {
+ text-align: left;
+ color: var(--secondary-color);
}
-.cal-outer-body {
- display: block;
- margin: 0 auto;
- width: 400px;
- box-shadow: 0 0 10px 0 rgba(0, 0, 0, 0.2);
- background: var(--secondary-color);
- border-radius: 10px;
- color: #fff;
+.historyHeadline {
+ text-align: center;
}
-.cal-inner-body {
- padding: 10px;
+.clearHistory {
+ cursor: pointer;
}
.shake {
-
-