Fix: Added input validation and error handling in calculator (#1164)

Calculator/jashkarangiya/css/custom.css

@@ -161,4 +161,26 @@ button#equal {
 .calculator.dark button.btn-equal {
     background-color: #223323;
     color: #ffffff;
-}
+}
+
+.display-screen {
+    background-color: #1e1e1e;
+    padding: 20px;
+    text-align: right;
+    border-radius: 8px;
+    margin-bottom: 10px;
+    color: #ffffff;
+    font-family: monospace;
+}
+
+.expression {
+    font-size: 20px;
+    color: #aaaaaa;
+    min-height: 24px;
+}
+
+.result {
+    font-size: 32px;
+    font-weight: bold;
+    min-height: 40px;
+}

Calculator/jashkarangiya/index.html

@@ -18,8 +18,10 @@
                 <i class="toggler-icon"></i>
             </div>
             <div class="display-screen">
-                <div id="display"></div>
-            </div>
+    <div id="expression" class="expression"></div>
+    <div id="display" class="result"></div>
+</div>
+
             <div class="buttons">
                 <table>
                     <tr>
@@ -49,7 +51,7 @@
                     <tr>
                         <td><button class="btn-operator" id="(">(</button></td>
                         <td><button class="btn-number" id="0">0</button></td>
-                        <td><button class="btn-operator" id=")">)</button></td>
+                        <td><button class="btn-number" id=".">.</button></td> <!-- ✅ Decimal point added -->
                     </tr>
                 </table>
             </div>
@@ -58,4 +60,4 @@
     <script src="./js/index.js"></script>
 </body>
 
-</html>
+</html>

Calculator/jashkarangiya/js/index.js

@@ -1,30 +1,60 @@
-const display = document.querySelector("#display");
+const display = document.getElementById("display");
+const expressionDisplay = document.getElementById("expression");
 const buttons = document.querySelectorAll("button");
 
-buttons.forEach((item) => {
-    item.onclick = () => {
-        if (item.id == "clear") {
-            display.innerText = "";
-        } else if (item.id == "backspace") {
-            let string = display.innerText.toString();
-            display.innerText = string.substr(0, string.length - 1);
-        } else if (display.innerText != "" && item.id == "equal") {
-            display.innerText = eval(display.innerText);
-        } else if (display.innerText == "" && item.id == "equal") {
-            display.innerText = "Empty!";
-            setTimeout(() => (display.innerText = ""), 2000);
+let input = "";
+
+function updateDisplay(result = "") {
+    expressionDisplay.textContent = input || "0";
+    display.textContent = result;
+}
+
+buttons.forEach((btn) => {
+    btn.addEventListener("click", () => {
+        const value = btn.id;
+
+        if (value === "clear") {
+            input = "";
+            updateDisplay("");
+        } else if (value === "backspace") {
+            input = input.slice(0, -1);
+            updateDisplay("");
+        } else if (value === "equal") {
+            try {
+                // Invalid operator check
+                if (/[\+\-\*\/]{2,}/.test(input)) {
+                    updateDisplay("❌ Error: Invalid operator usage!");
+                    input = "";
+                    return;
+                }
+
+                // Invalid decimal
+                const tokens = input.split(/[\+\-\*\/\(\)]/);
+                for (let token of tokens) {
+                    if ((token.match(/\./g) || []).length > 1) {
+                        updateDisplay("❌ Error: Invalid decimal!");
+                        input = "";
+                        return;
+                    }
+                }
+
+                // Division by zero
+                if (/\/0+(?![0-9])/.test(input)) {
+                    updateDisplay("❌ Error: Division by zero!");
+                    input = "";
+                    return;
+                }
+
+                const result = eval(input);
+                input = result.toString();
+                updateDisplay();
+            } catch {
+                updateDisplay("❌ Error");
+                input = "";
+            }
         } else {
-            display.innerText += item.id;
+            input += value;
+            updateDisplay();
         }
-    };
+    });
 });
-
-const themeToggleBtn = document.querySelector(".theme-toggler");
-const calculator = document.querySelector(".calculator");
-const toggleIcon = document.querySelector(".toggler-icon");
-let isDark = true;
-themeToggleBtn.onclick = () => {
-    calculator.classList.toggle("dark");
-    themeToggleBtn.classList.toggle("active");
-    isDark = !isDark;
-};