add some of the logic

2026-03-28 11:01:04 +02:00
parent 82bd8786cc
commit d4a2866358
3 changed files with 97 additions and 15 deletions
@@ -3,8 +3,6 @@
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-    <link rel="preconnect" href="https://fonts.googleapis.com" />
-    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
    <link
      href="https://fonts.googleapis.com/css2?family=Roboto+Mono&display=swap"
      rel="stylesheet"
@@ -17,26 +15,27 @@
      <input type="text" id="display" disabled />

      <button class="clear">C</button>
-      <button>←</button>
+      <button class="backspace">←</button>
      <button class="operator">÷</button>

-      <button>7</button>
-      <button>8</button>
-      <button>9</button>
+      <button class="number">7</button>
+      <button class="number">8</button>
+      <button class="number">9</button>
      <button class="operator">×</button>

-      <button>4</button>
-      <button>5</button>
-      <button>6</button>
+      <button class="number">4</button>
+      <button class="number">5</button>
+      <button class="number">6</button>
      <button class="operator">-</button>

-      <button>1</button>
-      <button>2</button>
-      <button>3</button>
+      <button class="number">1</button>
+      <button class="number">2</button>
+      <button class="number">3</button>
      <button class="operator">+</button>

-      <button class="zero">0</button>
-      <button class="operator">=</button>
+      <button class="large number">0</button>
+      <button class="result">=</button>
    </div>
+    <script src="./script.js"></script>
  </body>
 </html>
@@ -0,0 +1,83 @@
+const display = document.querySelector("#display");
+let previousNumber = 0;
+let lastOperation = "";
+
+function doOperation(operation, numA, numB) {
+  numA = Number(numA);
+  numB = Number(numB);
+  switch (operation) {
+    case "+":
+      return numA + numB;
+      break;
+  }
+}
+
+//Set numbers logic
+const numbers = document.querySelectorAll(".number");
+
+numbers.forEach((number) => {
+  number.addEventListener("click", (event) => {
+    updateDisplay(event.target.innerText);
+  });
+});
+
+function updateDisplay(number) {
+  let currentResult = display.value;
+  if (currentResult === "0") {
+    display.value = number;
+  } else {
+    display.value += number;
+  }
+}
+
+function reset() {
+  display.value = "0";
+  previousNumber = "0";
+  lastOperation = "";
+}
+
+// Set clear button
+const clearButton = document.querySelector(".clear");
+clearButton.addEventListener("click", () => {
+  reset();
+});
+
+// Set backspace button
+backspaceButton = document.querySelector(".backspace");
+backspaceButton.addEventListener("click", () => {
+  let result = display.value;
+  result = result.slice(0, -1);
+  if (result.length === 0) {
+    result = "0";
+  }
+  display.value = result;
+});
+
+// Operations
+const operators = document.querySelectorAll(".operator");
+operators.forEach((operator) => {
+  operator.addEventListener("click", (event) => {
+    if (lastOperation) {
+      previousNumber = doOperation(
+        lastOperation,
+        previousNumber,
+        display.value,
+      );
+    } else {
+      previousNumber = Number(display.value);
+    }
+
+    display.value = "0";
+    lastOperation = event.target.innerText;
+  });
+});
+
+// Result button
+const resultButton = document.querySelector(".result");
+resultButton.addEventListener("click", (event) => {
+  if (lastOperation) {
+    display.value = doOperation(lastOperation, previousNumber, display.value);
+  }
+});
+
+reset();
@@ -52,7 +52,7 @@ button:hover {
    grid-column: 1 / 3;
 }

-.zero {
+.large {
    grid-column: 1 / 4;
 }