Add initial calculator functionality with operator buttons and event …

.vscode/settings.json

@@ -0,0 +1,3 @@
+{
+    "liveServer.settings.port": 5501
+}

index.html

@@ -28,10 +28,10 @@
         <button class="number" 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 class = "operator" id="add">+</button>
+        <button class = "operator" id="subtract">-</button>
+        <button class = "operator" id="multiply">*</button>
+        <button class = "operator" id="divide">/</button>
       </div>
       <div class="row last-row">
         <button id="clear">C</button>

script.js

@@ -0,0 +1,105 @@
+let FirstNumber, SecondNumber;
+let result;
+let currentOperator = null;
+
+let display = document.querySelector('.display')
+let numbers = document.querySelectorAll('.number')
+let plus = document.querySelector('#add')
+let equal = document.querySelector('#equal')
+let divide = document.querySelector('#divide')
+let subtract = document.querySelector('#subtract')
+let multiply = document.querySelector('#multiply')
+let clear = document.querySelector('#clear')
+let operator = document.querySelectorAll('.operator')
+
+
+numbers.forEach(btn => {
+    btn.addEventListener('click', () => {
+        const value = btn.textContent;
+        console.log(currentOperator)
+        if (currentOperator == null) {
+            FirstNumber = (FirstNumber ?? "") + value;
+            console.log(`FirstNumber ${FirstNumber}`);
+            display.textContent = FirstNumber;
+        }
+        else {
+            SecondNumber = (SecondNumber ?? "") + value;
+            console.log(`SecondNumber ${SecondNumber}`);
+            display.textContent += value;
+        }
+    });
+});
+
+
+plus.addEventListener('click', function () {
+    currentOperator = '+';
+    updateOperatorDisplay();
+});
+
+subtract.addEventListener('click', function () {
+    currentOperator = '-';
+    updateOperatorDisplay();
+});
+
+multiply.addEventListener('click', function () {
+    currentOperator = '*';
+    updateOperatorDisplay();
+});
+
+divide.addEventListener('click', function () {
+    currentOperator = '/';
+    updateOperatorDisplay();
+});
+
+
+function updateOperatorDisplay() {
+    if (!FirstNumber && FirstNumber !== 0) return; //the second check is for 0 value, that pass the first condition
+
+    const text = display.textContent;
+    const lastChar = text[text.length - 1]; //get last character to check if it's an operator
+
+    if (['+', '-', '*', '/'].includes(lastChar)) {
+        display.textContent = text.slice(0, -1) + currentOperator; //replace last operator with new one
+    } else {
+        display.textContent += currentOperator;
+    }
+
+    console.log(`operator ${currentOperator}`);
+}
+
+
+
+clear.addEventListener('click', function () {
+    FirstNumber = null;
+    SecondNumber = null;
+    currentOperator = null;
+    result = null;
+    display.innerHTML  = '&nbsp'; // Keep display from collapsing
+
+    console.clear()
+    console.log('clear');
+});
+
+equal.addEventListener('click', function () {
+    if (currentOperator == '+') {
+        result = Number(FirstNumber) + Number(SecondNumber);
+    }
+
+    if (currentOperator == '-') {
+        result = Number(FirstNumber) - Number(SecondNumber);
+    }
+
+    if (currentOperator == '*') {
+        result = Number(FirstNumber) * Number(SecondNumber);
+    }
+
+    if (currentOperator == '/') {
+        result = Number(FirstNumber) / Number(SecondNumber);
+    }
+    const limitedResult = Number(result.toFixed(8)); // Limit to 8 decimal places
+    display.textContent = limitedResult;
+    console.log(result)
+    FirstNumber = null;
+    SecondNumber = null;
+    currentOperator = null;
+});