From 32401653c2c2bb63bd260b55044c011417aef49c Mon Sep 17 00:00:00 2001 From: afreen shaik Date: Mon, 22 Jul 2024 21:09:37 +0530 Subject: [PATCH 1/6] Create a template for project --- Source-Code/Calculator/index.html | 11 +++++++++++ Source-Code/Calculator/script.js | 0 Source-Code/Calculator/style.css | 0 3 files changed, 11 insertions(+) create mode 100644 Source-Code/Calculator/index.html create mode 100644 Source-Code/Calculator/script.js create mode 100644 Source-Code/Calculator/style.css diff --git a/Source-Code/Calculator/index.html b/Source-Code/Calculator/index.html new file mode 100644 index 0000000..7740e11 --- /dev/null +++ b/Source-Code/Calculator/index.html @@ -0,0 +1,11 @@ + + + + + + Calculator + + + + + \ No newline at end of file diff --git a/Source-Code/Calculator/script.js b/Source-Code/Calculator/script.js new file mode 100644 index 0000000..e69de29 diff --git a/Source-Code/Calculator/style.css b/Source-Code/Calculator/style.css new file mode 100644 index 0000000..e69de29 From adc56b8a9dd29a554df407027ff58b2c9aaf91ba Mon Sep 17 00:00:00 2001 From: afreen shaik Date: Mon, 22 Jul 2024 21:32:33 +0530 Subject: [PATCH 2/6] Add buttons --- Source-Code/Calculator/index.html | 32 +++++++++++++++++++++++++++++-- 1 file changed, 30 insertions(+), 2 deletions(-) diff --git a/Source-Code/Calculator/index.html b/Source-Code/Calculator/index.html index 7740e11..4698951 100644 --- a/Source-Code/Calculator/index.html +++ b/Source-Code/Calculator/index.html @@ -4,8 +4,36 @@ Calculator + - +
+ +
+ + + + + + + + + + + + + + + + + + + + + + +
+
+ - \ No newline at end of file + From 4995b96af2dc907ae913c932563282b84addeb3d Mon Sep 17 00:00:00 2001 From: afreen shaik Date: Mon, 22 Jul 2024 21:32:55 +0530 Subject: [PATCH 3/6] Add styles for buttons --- Source-Code/Calculator/style.css | 82 ++++++++++++++++++++++++++++++++ 1 file changed, 82 insertions(+) diff --git a/Source-Code/Calculator/style.css b/Source-Code/Calculator/style.css index e69de29..8cd9620 100644 --- a/Source-Code/Calculator/style.css +++ b/Source-Code/Calculator/style.css @@ -0,0 +1,82 @@ +* { + box-sizing: border-box; +} + +body { + display: flex; + justify-content: center; + align-items: center; + height: 100vh; + background: #f9f6ee; + font-family: 'Roboto', sans-serif; +} + +.calculator { + border-radius: 10px; + overflow: hidden; + box-shadow: 0 0 20px rgba(0, 0, 0, 0.2); +} + +.calculator-screen { + width: 100%; + height: 100px; + border: none; + background-color: #252525; + color: white; + text-align: right; + padding: 10px 20px; + font-size: 2.5rem; +} + +.calculator-keys { + display: grid; + grid-template-columns: repeat(4, 1fr); + gap: 10px; + padding: 20px; + background-color: #f1f3f6; +} + +button { + height: 60px; + border-radius: 5px; + border: none; + font-size: 1.5rem; + color: white; + background-color: #333; + cursor: pointer; + transition: background-color 0.2s ease; +} + +button:hover { + background-color: #555; +} + +.operator { + background-color: #f39c12; +} + +.operator:hover { + background-color: #d87a0d; +} + +.equal-sign { + height: calc(80px + 10px); + grid-column: span 4; + font-size: 30px; +} + +.all-clear { + background-color: #e74c3c; +} + +.all-clear:hover { + background-color: #c0392b; +} + +.decimal { + background-color: #9b59b6; +} + +.decimal:hover { + background-color: #8e44ad; +} From 3e5a7904f3d432ce523579df8bf23083394db5cd Mon Sep 17 00:00:00 2001 From: afreen shaik Date: Mon, 22 Jul 2024 21:38:16 +0530 Subject: [PATCH 4/6] Add functiaonalities --- Source-Code/Calculator/index.html | 2 +- Source-Code/Calculator/script.js | 114 ++++++++++++++++++++++++++++++ 2 files changed, 115 insertions(+), 1 deletion(-) diff --git a/Source-Code/Calculator/index.html b/Source-Code/Calculator/index.html index 4698951..e601605 100644 --- a/Source-Code/Calculator/index.html +++ b/Source-Code/Calculator/index.html @@ -8,7 +8,7 @@
- +
diff --git a/Source-Code/Calculator/script.js b/Source-Code/Calculator/script.js index e69de29..894d78c 100644 --- a/Source-Code/Calculator/script.js +++ b/Source-Code/Calculator/script.js @@ -0,0 +1,114 @@ +let firstOperand = ""; +let secondOperand = ""; +let currentOperator = null; +let awaitingSecondOperand = false; + +const display = document.querySelector(".calculator-screen"); +const keys = document.querySelector(".calculator-keys"); + +const updateDisplay = () => { + display.value = awaitingSecondOperand ? secondOperand : firstOperand; +}; + +const resetCalculator = () => { + firstOperand = ""; + secondOperand = ""; + currentOperator = null; + awaitingSecondOperand = false; + updateDisplay(); +}; + +const inputNumber = (number) => { + if (awaitingSecondOperand) { + secondOperand += number; + } else { + firstOperand += number; + } + updateDisplay(); +}; + +const inputOperator = (operator) => { + if (!firstOperand) return; + + if (secondOperand) { + calculate(); + } + + currentOperator = operator; + awaitingSecondOperand = true; +}; + +const inputDecimal = () => { + if (awaitingSecondOperand) { + if (!secondOperand.includes(".")) { + secondOperand += "."; + } + } else { + if (!firstOperand.includes(".")) { + firstOperand += "."; + } + } + updateDisplay(); +}; + +const calculate = () => { + let result; + const first = parseFloat(firstOperand); + const second = parseFloat(secondOperand); + + if (Number.isNaN(first) || Number.isNaN(second)) return; + + switch (currentOperator) { + case "+": + result = first + second; + break; + case "-": + result = first - second; + break; + case "*": + result = first * second; + break; + case "/": + result = first / second; + break; + default: + return; + } + + firstOperand = String(result); + secondOperand = ""; + awaitingSecondOperand = false; + currentOperator = null; + updateDisplay(); +}; + +keys.addEventListener("click", (event) => { + const { target } = event; + const { value } = target; + + if (!target.matches("button")) return; + + switch (value) { + case "all-clear": + resetCalculator(); + break; + case "=": + calculate(); + break; + case ".": + inputDecimal(); + break; + case "+": + case "-": + case "*": + case "/": + inputOperator(value); + break; + default: + if (Number.isInteger(parseFloat(value))) { + inputNumber(value); + } + } +}); + +document.addEventListener("DOMContentLoaded", updateDisplay); From 4fa0ee1449022853575b866644877be61dc7b50e Mon Sep 17 00:00:00 2001 From: afreen shaik Date: Mon, 22 Jul 2024 21:39:54 +0530 Subject: [PATCH 5/6] Solve linter errors --- Source-Code/Calculator/script.js | 73 ++++++++++++++-------------- Source-Code/Calculator/style.css | 82 ++++++++++++++++---------------- 2 files changed, 76 insertions(+), 79 deletions(-) diff --git a/Source-Code/Calculator/script.js b/Source-Code/Calculator/script.js index 894d78c..a924bde 100644 --- a/Source-Code/Calculator/script.js +++ b/Source-Code/Calculator/script.js @@ -1,18 +1,18 @@ -let firstOperand = ""; -let secondOperand = ""; +let firstOperand = ''; +let secondOperand = ''; let currentOperator = null; let awaitingSecondOperand = false; -const display = document.querySelector(".calculator-screen"); -const keys = document.querySelector(".calculator-keys"); +const display = document.querySelector('.calculator-screen'); +const keys = document.querySelector('.calculator-keys'); const updateDisplay = () => { display.value = awaitingSecondOperand ? secondOperand : firstOperand; }; const resetCalculator = () => { - firstOperand = ""; - secondOperand = ""; + firstOperand = ''; + secondOperand = ''; currentOperator = null; awaitingSecondOperand = false; updateDisplay(); @@ -27,26 +27,13 @@ const inputNumber = (number) => { updateDisplay(); }; -const inputOperator = (operator) => { - if (!firstOperand) return; - - if (secondOperand) { - calculate(); - } - - currentOperator = operator; - awaitingSecondOperand = true; -}; - const inputDecimal = () => { if (awaitingSecondOperand) { - if (!secondOperand.includes(".")) { - secondOperand += "."; - } - } else { - if (!firstOperand.includes(".")) { - firstOperand += "."; + if (!secondOperand.includes('.')) { + secondOperand += '.'; } + } else if (!firstOperand.includes('.')) { + firstOperand += '.'; } updateDisplay(); }; @@ -59,16 +46,16 @@ const calculate = () => { if (Number.isNaN(first) || Number.isNaN(second)) return; switch (currentOperator) { - case "+": + case '+': result = first + second; break; - case "-": + case '-': result = first - second; break; - case "*": + case '*': result = first * second; break; - case "/": + case '/': result = first / second; break; default: @@ -76,32 +63,42 @@ const calculate = () => { } firstOperand = String(result); - secondOperand = ""; + secondOperand = ''; awaitingSecondOperand = false; currentOperator = null; updateDisplay(); }; +const inputOperator = (operator) => { + if (!firstOperand) return; + + if (secondOperand) { + calculate(); + } + + currentOperator = operator; + awaitingSecondOperand = true; +}; -keys.addEventListener("click", (event) => { +keys.addEventListener('click', (event) => { const { target } = event; const { value } = target; - if (!target.matches("button")) return; + if (!target.matches('button')) return; switch (value) { - case "all-clear": + case 'all-clear': resetCalculator(); break; - case "=": + case '=': calculate(); break; - case ".": + case '.': inputDecimal(); break; - case "+": - case "-": - case "*": - case "/": + case '+': + case '-': + case '*': + case '/': inputOperator(value); break; default: @@ -111,4 +108,4 @@ keys.addEventListener("click", (event) => { } }); -document.addEventListener("DOMContentLoaded", updateDisplay); +document.addEventListener('DOMContentLoaded', updateDisplay); diff --git a/Source-Code/Calculator/style.css b/Source-Code/Calculator/style.css index 8cd9620..b48d8d0 100644 --- a/Source-Code/Calculator/style.css +++ b/Source-Code/Calculator/style.css @@ -1,82 +1,82 @@ * { - box-sizing: border-box; + box-sizing: border-box; } body { - display: flex; - justify-content: center; - align-items: center; - height: 100vh; - background: #f9f6ee; - font-family: 'Roboto', sans-serif; + display: flex; + justify-content: center; + align-items: center; + height: 100vh; + background: #f9f6ee; + font-family: 'Roboto', sans-serif; } .calculator { - border-radius: 10px; - overflow: hidden; - box-shadow: 0 0 20px rgba(0, 0, 0, 0.2); + border-radius: 10px; + overflow: hidden; + box-shadow: 0 0 20px rgba(0, 0, 0, 0.2); } .calculator-screen { - width: 100%; - height: 100px; - border: none; - background-color: #252525; - color: white; - text-align: right; - padding: 10px 20px; - font-size: 2.5rem; + width: 100%; + height: 100px; + border: none; + background-color: #252525; + color: white; + text-align: right; + padding: 10px 20px; + font-size: 2.5rem; } .calculator-keys { - display: grid; - grid-template-columns: repeat(4, 1fr); - gap: 10px; - padding: 20px; - background-color: #f1f3f6; + display: grid; + grid-template-columns: repeat(4, 1fr); + gap: 10px; + padding: 20px; + background-color: #f1f3f6; } button { - height: 60px; - border-radius: 5px; - border: none; - font-size: 1.5rem; - color: white; - background-color: #333; - cursor: pointer; - transition: background-color 0.2s ease; + height: 60px; + border-radius: 5px; + border: none; + font-size: 1.5rem; + color: white; + background-color: #333; + cursor: pointer; + transition: background-color 0.2s ease; } button:hover { - background-color: #555; + background-color: #555; } .operator { - background-color: #f39c12; + background-color: #f39c12; } .operator:hover { - background-color: #d87a0d; + background-color: #d87a0d; } .equal-sign { - height: calc(80px + 10px); - grid-column: span 4; - font-size: 30px; + height: calc(80px + 10px); + grid-column: span 4; + font-size: 30px; } .all-clear { - background-color: #e74c3c; + background-color: #e74c3c; } .all-clear:hover { - background-color: #c0392b; + background-color: #c0392b; } .decimal { - background-color: #9b59b6; + background-color: #9b59b6; } .decimal:hover { - background-color: #8e44ad; + background-color: #8e44ad; } From d356a56dcd56eaae92722d864dbf5097450cc796 Mon Sep 17 00:00:00 2001 From: afreen shaik Date: Mon, 22 Jul 2024 21:43:24 +0530 Subject: [PATCH 6/6] Add project --- README.md | 11 +++++++++++ 1 file changed, 11 insertions(+) diff --git a/README.md b/README.md index f94a9ed..bf34538 100644 --- a/README.md +++ b/README.md @@ -243,6 +243,17 @@ In order to run this project you need: +
  • +
    +Calculator +

    Calculator is a straightforward and user-friendly tool developed using HTML, CSS, and JavaScript. This beginner-friendly web development project is designed to help users perform basic arithmetic operations such as addition, subtraction, multiplication, and division seamlessly. Users can input numbers and choose an operator to instantly see the calculated result. The calculator also includes functionalities for clearing the input and handling decimal numbers.

    + +
    +
    • +

    (back to top)