update the script.js and main index.html

Author: nirajxdev

04_calculator/script.js

@@ -1,12 +1,135 @@
-const displayEl = document.getElementById("display");
-const currentValueEl = document.getElementById("current-value");
-const buttonEl = document.querySelectorAll("button");
+const calculator = document.getElementById('calculator');
+const display = document.getElementById('display');
 
-const clear = document.querySelector('[data-type = "clear"]');
-const utility = document.querySelector('[data-type="utility"]');
-const operator = document.querySelectorAll('[data-type="operator"]');
-const number = document.querySelectorAll('[data-type="number"]');
-const decimal = document.querySelector('[data-type="decimal"]');
-const calculate = document.querySelector('[data-type = "calculate"]');
+let firstOperand = null;
+let secondOperand = false; 
+let operator = null;
+let currentInput = '0';
 
+function updateDisplay() {
+    if (currentInput.length > 10) {
+        const num = parseFloat(currentInput);
+        display.textContent = num.toPrecision(10);
+    } else {
+        display.textContent = currentInput;
+    }
+}
+function calculate(n1, n2, op) { 
+    const num1 = parseFloat(n1);
+    const num2 = parseFloat(n2);
 
+    if (isNaN(num1) || isNaN(num2)) return NaN;
+
+    switch(op) {
+        case 'add':
+            return num1 + num2;
+        case 'subtract':
+            return num1-num2;
+        case 'multiply':
+            return num1 * num2;
+        case 'divide':
+            if (num2 === 0) {
+                return 'Error';
+            } else {
+                return num1 / num2;
+            }
+        default:
+            return num2;
+    }
+}
+
+calculator.addEventListener('click', (event) => {
+    if (!event.target.matches('.btn')) return;
+
+    const button = event.target;
+    const value = button.dataset.value;
+    const action = button.dataset.action;
+
+    if (value && !action) {
+        if(secondOperand === true) {
+            currentInput = value;
+            secondOperand = false;
+        } else {
+            currentInput = currentInput === '0' ? value : currentInput + value;
+        }
+        updateDisplay();
+        return;
+    }
+
+    if (action === 'decimal') {
+        if (secondOperand === true) {
+            currentInput = '0.';
+            secondOperand = false;
+        } else if (!currentInput.includes('.')) {
+            currentInput += '.';
+        }
+        updateDisplay();
+        return;
+    }
+    
+    if (action === 'clear') {
+        firstOperand = null;
+        operator = null;
+        secondOperand = false;
+        currentInput = '0';
+        updateDisplay();
+        return;
+    }
+
+    if (action === 'sign') {
+        currentInput = String(parseFloat(currentInput) * -1);
+        updateDisplay();
+        return;
+    }
+    if (action === 'percent') {
+        currentInput = String(parseFloat(currentInput) / 100);
+        updateDisplay();
+        return;
+    }
+
+    if (action === 'operator') {
+        const inputNumber = currentInput;
+
+        if(firstOperand === null) {
+            firstOperand = inputNumber;
+        } else if(operator) {
+            const result = calculate(firstOperand, inputNumber, operator); 
+            
+            if(result === 'Error') {
+                currentInput = 'Error';
+                firstOperand = null;
+                operator = null; 
+            } else {
+                currentInput = String(result);
+                firstOperand = currentInput; 
+            }
+        }
+        operator = value;
+        secondOperand = true;
+        updateDisplay();
+        return;
+    }
+    
+    if (action === 'calculate') {
+        if (firstOperand === null || operator === null) { 
+            return;
+        }
+        
+        const inputNumber = currentInput;
+        const result = calculate(firstOperand, inputNumber, operator); 
+        
+        if (result === 'Error') {
+            currentInput = 'Error'; 
+        } else {
+            currentInput = String(result);
+        }
+        
+        firstOperand = null;
+        operator = null;
+        secondOperand = true;
+        updateDisplay();
+        return;
+    }
+});
+
+updateDisplay();

index.html

@@ -62,6 +62,19 @@ <h2 class="text-lg font-medium uppercase tracking-widest text-gray-700 mb-6">
                     </span>
                 </a>
             </li>
+
+            <li>
+                <a href="04_calculator/" 
+                   class="flex justify-between items-center border border-gray-200 p-4 
+                          hover:bg-black hover:text-white transition-colors duration-200 group">
+                    <span class="text-xl font-semibold group-hover:underline">
+                        04. Calculator App
+                    </span>
+                    <span class="text-sm uppercase font-mono tracking-widest text-gray-500 group-hover:text-white transition-colors">
+                        Event Delegation, Input Handling
+                    </span>
+                </a>
+            </li>
         </ul>
 
         <footer class="mt-20 text-center text-xs text-gray-400">