From 5010c8795fe9ffc1711312a91961ceba5662450c Mon Sep 17 00:00:00 2001 From: Hekimianz Date: Mon, 10 Jun 2024 14:31:31 -0600 Subject: [PATCH 1/4] Finished --- app.js | 98 ++++++++++++++++++++++++++++++++++++++++++++++++++++++ index.html | 38 +++++++++++++++++++++ styles.css | 97 +++++++++++++++++++++++++++++++++++++++++++++++++++++ 3 files changed, 233 insertions(+) create mode 100644 app.js create mode 100644 index.html create mode 100644 styles.css diff --git a/app.js b/app.js new file mode 100644 index 00000000..e58453aa --- /dev/null +++ b/app.js @@ -0,0 +1,98 @@ +const numbers = [...document.querySelectorAll(".number")]; +const operators = [...document.querySelectorAll(".operation")]; +const clearBtn = document.querySelector(".clear"); +const equalsBtn = document.querySelector(".equals"); + +const OPERATOR_MAP = { + "+": "sum", + "-": "sub", + "×": "mult", + "÷": "divide", +}; + +const calculator = { + display: document.querySelector(".display"), + displayValue: "0", + enteredValues: [], + operator: "", + + renderValue() { + this.display.innerText = this.displayValue; + }, + + clickNumber(n) { + if (this.displayValue === "0") { + this.displayValue = ""; + } + this.displayValue += n.toString(); + this.renderValue(); + }, + + clear() { + this.displayValue = "0"; + this.enteredValues = []; + this.operator = ""; + this.renderValue(); + }, + + calculate(a, b, op) { + let result; + switch (op) { + case "sum": + result = a + b; + break; + case "sub": + result = a - b; + break; + case "mult": + result = a * b; + break; + case "divide": + if (b === 0) { + result = "Error"; // Handle division by zero + } else { + result = a / b; + } + break; + default: + result = "Error"; + } + this.displayValue = result.toString(); + this.renderValue(); + }, + + clickOperator(o) { + if (this.enteredValues.length === 1) { + this.clickEquals(); + } + this.enteredValues.push(this.displayValue); + this.operator = o; + this.displayValue = ""; + }, + + clickEquals() { + if (this.enteredValues.length < 1) { + return; + } + this.enteredValues.push(this.displayValue); + const operation = OPERATOR_MAP[this.operator]; + + if (operation) { + this.calculate(+this.enteredValues[0], +this.enteredValues[1], operation); + } + + this.operator = ""; + this.enteredValues = [this.displayValue]; // Store the result for further calculations + }, +}; + +numbers.forEach((e) => + e.addEventListener("click", () => calculator.clickNumber(e.innerText)) +); +clearBtn.addEventListener("click", () => calculator.clear()); +operators.forEach((e) => + e.addEventListener("click", () => calculator.clickOperator(e.innerText)) +); +equalsBtn.addEventListener("click", () => calculator.clickEquals()); + +calculator.renderVa; diff --git a/index.html b/index.html new file mode 100644 index 00000000..63ff7e7e --- /dev/null +++ b/index.html @@ -0,0 +1,38 @@ + + + + + + 100Devs Calculator + + + + + + + +
+
+
C
+
÷
+
7
+
8
+
9
+
×
+
4
+
5
+
6
+
-
+
1
+
2
+
3
+
+
+
0
+
.
+
=
+
+ + diff --git a/styles.css b/styles.css new file mode 100644 index 00000000..27276630 --- /dev/null +++ b/styles.css @@ -0,0 +1,97 @@ +* { + margin: 0; + padding: 0; + box-sizing: border-box; +} + +body, +html { + height: 100vh; + width: 100vw; +} + +body { + display: flex; + justify-content: center; + align-items: center; + background-color: #ffdee9; + background-image: linear-gradient(0deg, #ffdee9 0%, #b5fffc 100%); + font-family: "Poppins"; +} + +.mainContainer { + background-color: #4d4855; + background-image: linear-gradient(147deg, #4d4855 0%, #000000 74%); + box-shadow: rgba(0, 0, 0, 0.35) 0px 5px 15px; + width: 300px; + height: 450px; + border-radius: 16px; + display: grid; + grid-template-columns: 1fr 1fr 1fr 1fr; + justify-items: center; +} + +.display { + width: 90%; + height: 100px; + background-color: white; + margin: 20px 10px 10px 10px; + border-radius: 8px; + grid-column-start: 1; + grid-column-end: -1; + display: flex; + align-items: center; + justify-content: flex-end; + font-size: 3em; + padding-right: 20px; + overflow: hidden; +} + +.button { + display: flex; + justify-content: center; + align-items: center; + color: black; + width: 40px; + height: 40px; + border-radius: 50%; + background-color: white; + cursor: pointer; + font-weight: 600; + font-size: 1.3em; + transition: 0.1s all; + box-shadow: rgba(50, 50, 93, 0.25) 0px 50px 100px -20px, + rgba(0, 0, 0, 0.3) 0px 30px 60px -30px, + rgba(10, 37, 64, 0.35) 0px -2px 6px 0px inset; + user-select: none; +} + +.zero { + grid-column-start: 1; + grid-column-end: 3; + width: 75%; + border-radius: 8px; +} +.clear { + grid-column-start: 1; + grid-column-end: 4; + width: 85%; + border-radius: 8px; +} + +.clear, +.operation, +.equals { + background-color: pink; +} + +.number, +.decimal { + background-color: white; +} + +.button:active { + box-shadow: rgba(50, 50, 93, 0.5) 0px 60px 120px -20px, + rgba(0, 0, 0, 0.6) 0px 40px 80px -30px, + rgba(10, 37, 64, 0.7) 0px -2px 8px 0px inset; +} From 6babfe1bbc9449ef7175ee376064670d1b25e74b Mon Sep 17 00:00:00 2001 From: Hekimianz Date: Mon, 10 Jun 2024 14:40:22 -0600 Subject: [PATCH 2/4] fixed decimal bug --- app.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/app.js b/app.js index e58453aa..179e34f1 100644 --- a/app.js +++ b/app.js @@ -57,7 +57,7 @@ const calculator = { default: result = "Error"; } - this.displayValue = result.toString(); + this.displayValue = result.toFixed(4).toString(); this.renderValue(); }, From 8ca32c40808d0038a316a23a62ba8aa306bc9fc8 Mon Sep 17 00:00:00 2001 From: Hekimianz Date: Mon, 10 Jun 2024 14:47:19 -0600 Subject: [PATCH 3/4] Changed to parseFloat --- app.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/app.js b/app.js index 179e34f1..7e004dd7 100644 --- a/app.js +++ b/app.js @@ -57,7 +57,7 @@ const calculator = { default: result = "Error"; } - this.displayValue = result.toFixed(4).toString(); + this.displayValue = Number.parseFloat(result.toFixed(4)); this.renderValue(); }, From cb554faca47a582231efc7870bc394df2cf78fbf Mon Sep 17 00:00:00 2001 From: Hekimianz Date: Mon, 10 Jun 2024 14:53:36 -0600 Subject: [PATCH 4/4] Implemented the function to chain operations without having to click equals beforehand --- app.js | 10 ++++++---- 1 file changed, 6 insertions(+), 4 deletions(-) diff --git a/app.js b/app.js index 7e004dd7..76f24bfa 100644 --- a/app.js +++ b/app.js @@ -57,15 +57,17 @@ const calculator = { default: result = "Error"; } - this.displayValue = Number.parseFloat(result.toFixed(4)); + this.displayValue = Number.parseFloat(result.toFixed(4)).toString(); this.renderValue(); }, clickOperator(o) { - if (this.enteredValues.length === 1) { + if (this.operator && this.displayValue !== "") { + this.enteredValues.push(this.displayValue); this.clickEquals(); + } else { + this.enteredValues.push(this.displayValue); } - this.enteredValues.push(this.displayValue); this.operator = o; this.displayValue = ""; }, @@ -95,4 +97,4 @@ operators.forEach((e) => ); equalsBtn.addEventListener("click", () => calculator.clickEquals()); -calculator.renderVa; +calculator.renderValue();