From e56f168990e6e5008ae809a13f377066e7c27171 Mon Sep 17 00:00:00 2001 From: AdyaTech Date: Wed, 24 Dec 2025 17:42:53 +0530 Subject: [PATCH] solved issue 1164 for the calculator app --- Calculator/AdyaTech/README.md | 45 +++++++++ Calculator/AdyaTech/index.html | 46 +++++++++ Calculator/AdyaTech/script.js | 178 +++++++++++++++++++++++++++++++++ Calculator/AdyaTech/style.css | 123 +++++++++++++++++++++++ 4 files changed, 392 insertions(+) create mode 100644 Calculator/AdyaTech/README.md create mode 100644 Calculator/AdyaTech/index.html create mode 100644 Calculator/AdyaTech/script.js create mode 100644 Calculator/AdyaTech/style.css diff --git a/Calculator/AdyaTech/README.md b/Calculator/AdyaTech/README.md new file mode 100644 index 000000000..3698756e1 --- /dev/null +++ b/Calculator/AdyaTech/README.md @@ -0,0 +1,45 @@ +# Calculator App + +A simple interactive **Calculator App** built using **HTML, CSS and JavaScript**. + +--- + +### ✅ Input Validation & Error Handling Improvements + +### 1. Division by Zero Handling +- Added explicit checks to prevent division by zero. +- When a division by zero is detected, the calculator displays **"Error"** instead of returning `Infinity`. +- The calculator safely stops further calculation until cleared. + +--- + +### 2. Prevention of Consecutive Operators +- Restricted users from entering multiple operators consecutively (e.g. `5 ++ 3`). +- If an operator is entered after another operator, the previous operator is automatically replaced. +- Ensures valid mathematical expressions at all times. + +--- + +### 3. Decimal Point Validation +- Prevented multiple decimal points within a single number (e.g. `3.1.4`). +- The calculator now checks the current number segment before allowing a decimal. +- Eliminates parsing and calculation errors. + +--- + +### ⌨️ Keyboard Support Added + +The calculator now supports full keyboard input: + +- **Numbers:** `0–9` +- **Operators:** `+ - * /` +- **Decimal:** `.` +- **Enter / =** → Calculate result +- **Backspace** → Delete last character +- **Escape (Esc)** → Clear input + +Keyboard operators `*` and `/` are internally mapped to `×` and `÷`. + +--- + + diff --git a/Calculator/AdyaTech/index.html b/Calculator/AdyaTech/index.html new file mode 100644 index 000000000..170af30a2 --- /dev/null +++ b/Calculator/AdyaTech/index.html @@ -0,0 +1,46 @@ + + + + + + + Calculator + + +
+
+
+
+
+
+
-
+
×
+
÷
+
+
+
+
7
+
8
+
9
+
+
+
4
+
5
+
6
+
+
+
1
+
2
+
3
+
+
+
0
+
.
+
C
+
+
+
=
+
+
+ + + \ No newline at end of file diff --git a/Calculator/AdyaTech/script.js b/Calculator/AdyaTech/script.js new file mode 100644 index 000000000..7d355148d --- /dev/null +++ b/Calculator/AdyaTech/script.js @@ -0,0 +1,178 @@ +"use strict"; + +var input = document.getElementById("input"), + number = document.querySelectorAll(".numbers div"), + operator = document.querySelectorAll(".operators div"), + result = document.getElementById("result"), + clear = document.getElementById("clear"), + resultDisplayed = false; + +// ===================== +// Helper Functions +// ===================== +function isOperator(char) { + return char === "+" || char === "-" || char === "×" || char === "÷"; +} + +function backspace() { + if (resultDisplayed) { + input.innerHTML = ""; + resultDisplayed = false; + } else { + input.innerHTML = input.innerHTML.slice(0, -1); + } +} + +function addValue(value) { + var currentString = input.innerHTML; + var lastChar = currentString[currentString.length - 1]; + + // Prevent multiple decimals in one number + if (value === ".") { + var parts = currentString.split(/\+|\-|\×|\÷/); + if (parts[parts.length - 1].includes(".")) return; + } + + if (!resultDisplayed) { + input.innerHTML += value; + } else if (resultDisplayed && isOperator(lastChar)) { + resultDisplayed = false; + input.innerHTML += value; + } else { + resultDisplayed = false; + input.innerHTML = value; + } +} + +// ===================== +// Number Buttons +// ===================== +for (var i = 0; i < number.length; i++) { + number[i].addEventListener("click", function (e) { + addValue(e.target.innerHTML); + }); +} + +// ===================== +// Operator Buttons +// ===================== +for (var i = 0; i < operator.length; i++) { + operator[i].addEventListener("click", function (e) { + var currentString = input.innerHTML; + var lastChar = currentString[currentString.length - 1]; + + if (currentString.length === 0) return; + + if (isOperator(lastChar)) { + input.innerHTML = + currentString.substring(0, currentString.length - 1) + + e.target.innerHTML; + } else { + input.innerHTML += e.target.innerHTML; + } + }); +} + +// ===================== +// Equal Button +// ===================== +result.addEventListener("click", calculate); + +function calculate() { + var inputString = input.innerHTML; + if (inputString.length === 0) return; + + var numbers = inputString.split(/\+|\-|\×|\÷/g); + var operators = inputString.replace(/[0-9]|\./g, "").split(""); + + // Division + var divide = operators.indexOf("÷"); + while (divide !== -1) { + if (numbers[divide + 1] == 0) { + input.innerHTML = "Error"; + resultDisplayed = true; + return; + } + numbers.splice(divide, 2, numbers[divide] / numbers[divide + 1]); + operators.splice(divide, 1); + divide = operators.indexOf("÷"); + } + + // Multiplication + var multiply = operators.indexOf("×"); + while (multiply !== -1) { + numbers.splice(multiply, 2, numbers[multiply] * numbers[multiply + 1]); + operators.splice(multiply, 1); + multiply = operators.indexOf("×"); + } + + // Subtraction + var subtract = operators.indexOf("-"); + while (subtract !== -1) { + numbers.splice(subtract, 2, numbers[subtract] - numbers[subtract + 1]); + operators.splice(subtract, 1); + subtract = operators.indexOf("-"); + } + + // Addition + var add = operators.indexOf("+"); + while (add !== -1) { + numbers.splice( + add, + 2, + parseFloat(numbers[add]) + parseFloat(numbers[add + 1]) + ); + operators.splice(add, 1); + add = operators.indexOf("+"); + } + + input.innerHTML = numbers[0]; + resultDisplayed = true; +} + +// ===================== +// Clear Button +// ===================== +clear.addEventListener("click", function () { + input.innerHTML = ""; + resultDisplayed = false; +}); + +// ===================== +// Keyboard Support +// ===================== +document.addEventListener("keydown", function (e) { + if (e.key >= "0" && e.key <= "9") { + addValue(e.key); + } + + if (e.key === ".") { + addValue("."); + } + + if (e.key === "+" || e.key === "-") { + addValue(e.key); + } + + if (e.key === "*") { + addValue("×"); + } + + if (e.key === "/") { + addValue("÷"); + } + + if (e.key === "Enter" || e.key === "=") { + e.preventDefault(); + calculate(); + } + + if (e.key === "Backspace") { + backspace(); + } + + if (e.key === "Escape") { + input.innerHTML = ""; + resultDisplayed = false; + } +}); diff --git a/Calculator/AdyaTech/style.css b/Calculator/AdyaTech/style.css new file mode 100644 index 000000000..77f3c2920 --- /dev/null +++ b/Calculator/AdyaTech/style.css @@ -0,0 +1,123 @@ +body { + width: 500px; + margin: 4% auto; + font-family: 'Source Sans Pro', sans-serif; + letter-spacing: 5px; + font-size: 1.8rem; + -moz-user-select: none; + -webkit-user-select: none; + -ms-user-select: none; +} + +.calculator { + height: 500px; + padding: 20px; + -webkit-box-shadow: 0px 1px 4px 0px rgba(0, 0, 0, 0.2); + box-shadow: 0px 1px 4px 0px rgba(0, 0, 0, 0.2); + border-radius: 1px; +} + +.input { + border: 1px solid #ddd; + border-radius: 1px; + height: 60px; + padding-right: 15px; + padding-top: 10px; + text-align: right; + margin-right: 6px; + font-size: 2.5rem; + overflow-x: auto; + transition: all .2s ease-in-out; +} + +.input:hover { + border: 1px solid #bbb; + -webkit-box-shadow: inset 0px 1px 4px 0px rgba(0, 0, 0, 0.2); + box-shadow: inset 0px 1px 4px 0px rgba(0, 0, 0, 0.2); +} + +.buttons {} + +.operators {} + +.operators div { + display: inline-block; + border: 1px solid #bbb; + border-radius: 1px; + width: 80px; + text-align: center; + padding: 10px; + margin: 20px 4px 10px 0; + cursor: pointer; + background-color: #ddd; + transition: border-color .2s ease-in-out, background-color .2s, box-shadow .2s; +} + +.operators div:hover { + background-color: #ddd; + -webkit-box-shadow: 0px 1px 4px 0px rgba(0, 0, 0, 0.2); + box-shadow: 0px 1px 4px 0px rgba(0, 0, 0, 0.2); + border-color: #aaa; +} + +.operators div:active { + font-weight: bold; +} + +.leftPanel { + display: inline-block; +} + +.numbers div { + display: inline-block; + border: 1px solid #ddd; + border-radius: 1px; + width: 80px; + text-align: center; + padding: 10px; + margin: 10px 4px 10px 0; + cursor: pointer; + background-color: #f9f9f9; + transition: border-color .2s ease-in-out, background-color .2s, box-shadow .2s; +} + +.numbers div:hover { + background-color: #f1f1f1; + -webkit-box-shadow: 0px 1px 4px 0px rgba(0, 0, 0, 0.2); + box-shadow: 0px 1px 4px 0px rgba(0, 0, 0, 0.2); + border-color: #bbb; +} + +.numbers div:active { + font-weight: bold; +} + +div.equal { + display: inline-block; + border: 1px solid #3079ED; + border-radius: 1px; + width: 17%; + text-align: center; + padding: 127px 10px; + margin: 10px 6px 10px 0; + vertical-align: top; + cursor: pointer; + color: #FFF; + background-color: #4d90fe; + transition: all .2s ease-in-out; + position: relative; + left: 358px; + bottom: 300px; +} + +div.equal:hover { + background-color: #307CF9; + -webkit-box-shadow: 0px 1px 4px 0px rgba(0, 0, 0, 0.2); + box-shadow: 0px 1px 4px 0px rgba(0, 0, 0, 0.2); + border-color: #1857BB; +} + +div.equal:active { + font-weight: bold; +} +