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)

    diff --git a/Source-Code/Calculator/index.html b/Source-Code/Calculator/index.html new file mode 100644 index 0000000..e601605 --- /dev/null +++ b/Source-Code/Calculator/index.html @@ -0,0 +1,39 @@ + + + + + + Calculator + + + +
    + +
    + + + + + + + + + + + + + + + + + + + + + + +
    +
    + + + diff --git a/Source-Code/Calculator/script.js b/Source-Code/Calculator/script.js new file mode 100644 index 0000000..a924bde --- /dev/null +++ b/Source-Code/Calculator/script.js @@ -0,0 +1,111 @@ +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 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(); +}; +const inputOperator = (operator) => { + if (!firstOperand) return; + + if (secondOperand) { + calculate(); + } + + currentOperator = operator; + awaitingSecondOperand = true; +}; + +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); diff --git a/Source-Code/Calculator/style.css b/Source-Code/Calculator/style.css new file mode 100644 index 0000000..b48d8d0 --- /dev/null +++ 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; +}