diff --git a/index.html b/index.html index 912fee4..8bb0aa9 100644 --- a/index.html +++ b/index.html @@ -7,6 +7,121 @@ iPhone Calculator +
+
+
+
+
+ +
diff --git a/scripts/app.js b/scripts/app.js index ccacec3..e568106 100644 --- a/scripts/app.js +++ b/scripts/app.js @@ -1 +1,147 @@ 'use strict' + +const advanceBtn = document.querySelector('.scientific') +const clearBtn = document.querySelector('.clear') +const calcAdvance = document.querySelector('.calc-advance') + +// select input and output screens +const inputScreen = document.querySelector('.input') +const outputScreen = document.querySelector('.output') + +// select the buttons +const negateBtn = document.querySelector('.negate') +const decimalBtn = document.querySelector('.decimal') +const operandBtn = document.querySelectorAll('.operand') +const operatorBtn = document.querySelectorAll('.operator') +const equalsBtn = document.querySelector('.equal') + +let currentOperation = '' +let currentInput = '' +let previousInput = '' + +// toggle the sign of current input +const toggleSign = () => { + if (currentInput === '') return + + let num = parseFloat(currentInput) + num *= -1 + currentInput = num.toString() + + // update input screen + inputScreen.textContent = `${previousInput} ${currentOperation} ${currentInput}` +} + +if (negateBtn) { + negateBtn.addEventListener('click', toggleSign) +} + +// append numbers and decimal point to the screen +const appendNumber = (number) => { + // check if point exist + if (number === '.' && currentInput.includes('.')) { + return + } + if (number === '.' && currentInput === '') { + currentInput = '0.' + } else { + currentInput += number + } + inputScreen.textContent = ` ${previousInput} ${currentOperation} ${currentInput}` +} + +// event listener for decimal button +if (decimalBtn) { + decimalBtn.addEventListener('click', () => { + appendNumber(decimalBtn.textContent) + }) +} + +// calculate +const calculate = () => { + if (previousInput === '' || currentInput === '') return + let result + const prev = parseFloat(previousInput) + const current = parseFloat(currentInput) + + switch (currentOperation) { + case '+': + result = (prev + current).toFixed(2) + break + case '-': + result = (prev - current).toFixed(2) + break + case '*': + result = (prev * current).toFixed(2) + break + case '÷': + result = (prev / current).toFixed(2) + break + case '%': + result = (prev * (current / 100)).toFixed(2) + break + default: + break + } + outputScreen.textContent = result.toString() + currentOperation = '' + previousInput = '' + currentInput = result.toString() +} + +// append operator +const appendOperation = (operation) => { + if (currentInput === '') return + + // check if operator is % + if (operation === '%') { + const result = parseFloat(currentInput) / 100 + currentInput = result.toString() + inputScreen.textContent = `${previousInput} ${currentOperation} ${currentInput}` + calculate() + return + } + + // condition for all other operators + if (previousInput !== '') { + calculate() + } + currentOperation = operation + previousInput = currentInput + currentInput = '' + inputScreen.textContent = `${previousInput} ${currentOperation}` +} + +// listen to click events on all numbers +for (const operand of operandBtn) { + operand.addEventListener('click', () => { + appendNumber(operand.textContent) + }) +} + +// listen to click events on all operators +for (const operator of operatorBtn) { + operator.addEventListener('click', () => { + appendOperation(operator.textContent) + }) +} + +// listen to click event on equal to operator +equalsBtn.addEventListener('click', () => { + calculate() +}) + +// toggle scientific calculator +advanceBtn.addEventListener('click', () => { + alert('Feature coming soon!') + // calcAdvance.classList.toggle('hidden') + calcAdvance.style.paddingLeft = '0px' +}) + +// clear the screen +clearBtn.addEventListener('click', () => { + currentOperation = '' + currentInput = '' + previousInput = '' + inputScreen.textContent = '' + outputScreen.textContent = '' +}) diff --git a/styles/index.css b/styles/index.css index cca57b3..ee5d604 100644 --- a/styles/index.css +++ b/styles/index.css @@ -3,3 +3,107 @@ padding: 0; box-sizing: border-box; } + +body { + height: 100vh; + display: flex; + align-items: center; + background-color: #333; + padding: 20px; +} + +#calc-ctn { + display: flex; + flex-direction: column; + gap: 1rem; + margin: auto; + background-color: #000; + border: 3px solid #fff; + border-radius: 1rem; +} + +#calc-screen { + padding: 1rem; +} + +#calc-screen .input, +#calc-screen .output { + text-align: right; + font-size: 4rem; + border: none; + width: 100%; + padding: 0 1rem 2rem; + border-radius: 0.2rem 0.2rem 0 0; + background-color: #000; + color: #fff; +} + +#calc-screen .output { + border-radius: 0 0 0.2rem 0.2rem; +} + +.calc-btns, +.calc-advance { + display: flex; + flex-direction: column; + gap: 1rem; + padding: 2rem; +} + +.calc-advance { + padding-left: 0; +} + +#footer { + display: flex; + flex-wrap: wrap; + gap: 1rem; +} + +.group-btn { + display: flex; + gap: 0.8rem; +} + +.btn { + font-size: 2rem; + text-align: center; + border: none; + border-radius: 50%; + width: 4rem; + height: 4rem; + color: #fff; +} + +.btn:hover { + transform: translate(0, -2px); + transition: 0.5s; +} + +.btn:active { + transform: translate(0, 2px); +} + +.btn-grey { + background-color: #808080; +} + +.btn-orange { + background-color: #ffa500; +} + +.btn-dark-grey { + background-color: #303030; +} + +.backspace { + flex-grow: 1; + border-radius: 2rem; + display: flex; + align-items: center; + justify-content: center; +} + +.hidden { + display: none; +}