finished calculator project

index.html

@@ -13,29 +13,29 @@
     <div class="display">&nbsp;</div>
     <div class="buttons">
       <div class="row">
-        <button class="number" id="number-7">7</button>
-        <button class="number" id="number-8">8</button>
-        <button class="number" id="number-9">9</button>
+        <button class="number" data-value="7" id="number-7">7</button>
+        <button class="number" data-value="8" id="number-8">8</button>
+        <button class="number" data-value="9" id="number-9">9</button>
       </div>
       <div class="row">
-        <button class="number" id="number-4">4</button>
-        <button class="number" id="number-5">5</button>
-        <button class="number" id="number-6">6</button>
+        <button class="number" data-value="4" id="number-4">4</button>
+        <button class="number" data-value="5" id="number-5">5</button>
+        <button class="number" data-value="6" id="number-6">6</button>
       </div>
       <div class="row">
-        <button class="number" id="number-1">1</button>
-        <button class="number" id="number-2">2</button>
-        <button class="number" id="number-3">3</button>
+        <button class="number" data-value="1" id="number-1">1</button>
+        <button class="number" data-value="2" id="number-2">2</button>
+        <button class="number" data-value="3" id="number-3">3</button>
       </div>
       <div class="row operations">
-        <!-- <button id="add">+</button>
-        <button id="subtract">-</button>
-        <button id="multiply">*</button>
-        <button id="divide">/</button> -->
+        <button data-value="+" id="add">+</button>
+        <button data-value="-" id="subtract">-</button>
+        <button data-value="*" id="multiply">*</button>
+        <button data-value="/" id="divide">/</button>
       </div>
       <div class="row last-row">
         <button id="clear">C</button>
-        <button class="number" id="number-0">0</button>
+        <button class="number" data-value="0" id="number-0">0</button>
         <button id="equal">=</button>
       </div>
     </div>

script.js

@@ -0,0 +1,66 @@
+const display = document.querySelector(".display");
+let reset = true;
+
+const calculate = () => {
+    let result = 0;
+    fulleq = display.textContent;
+    if (fulleq.includes("*")){
+        let minieq = fulleq.split("*");
+        result = minieq[0];
+        for (let i=1; i< minieq.length; i++){
+            result *= minieq[i];
+        }
+        display.textContent = result;
+    }
+    if (fulleq.includes("/")){
+        let minieq = fulleq.split("/");
+        result = minieq[0];
+        for (let i=1; i< minieq.length; i++){
+            result /= minieq[i];
+        }
+        display.textContent = result;
+    }
+    if (fulleq.includes("+")){
+        let minieq = fulleq.split("+");
+        result = Number(minieq[0]);
+        for (let i=1; i< minieq.length; i++){
+            result += Number(minieq[i]);
+        }
+        display.textContent = result;
+    }
+    if (fulleq.includes("-")){
+        let minieq = fulleq.split("-");
+        result = Number(minieq[0]);
+        for (let i=1; i< minieq.length; i++){
+            result -= Number(minieq[i]);
+        }
+        display.textContent = result;
+    }
+
+
+}
+
+const init = () => {
+document.querySelectorAll("[data-value]").forEach(btn => {
+  btn.addEventListener("click", () => {
+    if (reset === true) {
+        display.textContent = btn.dataset.value;
+        reset = false;
+    }
+    else
+        display.textContent += btn.dataset.value;
+  });
+});
+
+document.getElementById("clear").addEventListener("click", () => {
+    reset = true;
+  display.textContent = "0";
+});
+
+document.getElementById("equal").addEventListener("click", calculate);
+
+}
+
+init ();
+
+