diff --git a/.vscode/settings.json b/.vscode/settings.json new file mode 100644 index 0000000..6f3a291 --- /dev/null +++ b/.vscode/settings.json @@ -0,0 +1,3 @@ +{ + "liveServer.settings.port": 5501 +} \ No newline at end of file diff --git a/index.html b/index.html index 935c09e..cb9a6f9 100644 --- a/index.html +++ b/index.html @@ -28,10 +28,10 @@
- + + + +
diff --git a/script.js b/script.js new file mode 100644 index 0000000..192e362 --- /dev/null +++ b/script.js @@ -0,0 +1,105 @@ +let FirstNumber, SecondNumber; +let result; +let currentOperator = null; + +let display = document.querySelector('.display') +let numbers = document.querySelectorAll('.number') +let plus = document.querySelector('#add') +let equal = document.querySelector('#equal') +let divide = document.querySelector('#divide') +let subtract = document.querySelector('#subtract') +let multiply = document.querySelector('#multiply') +let clear = document.querySelector('#clear') +let operator = document.querySelectorAll('.operator') + + +numbers.forEach(btn => { + btn.addEventListener('click', () => { + const value = btn.textContent; + console.log(currentOperator) + if (currentOperator == null) { + FirstNumber = (FirstNumber ?? "") + value; + console.log(`FirstNumber ${FirstNumber}`); + display.textContent = FirstNumber; + } + else { + SecondNumber = (SecondNumber ?? "") + value; + console.log(`SecondNumber ${SecondNumber}`); + display.textContent += value; + } + }); +}); + + +plus.addEventListener('click', function () { + currentOperator = '+'; + updateOperatorDisplay(); +}); + +subtract.addEventListener('click', function () { + currentOperator = '-'; + updateOperatorDisplay(); +}); + +multiply.addEventListener('click', function () { + currentOperator = '*'; + updateOperatorDisplay(); +}); + +divide.addEventListener('click', function () { + currentOperator = '/'; + updateOperatorDisplay(); +}); + + +function updateOperatorDisplay() { + if (!FirstNumber && FirstNumber !== 0) return; //the second check is for 0 value, that pass the first condition + + const text = display.textContent; + const lastChar = text[text.length - 1]; //get last character to check if it's an operator + + if (['+', '-', '*', '/'].includes(lastChar)) { + display.textContent = text.slice(0, -1) + currentOperator; //replace last operator with new one + } else { + display.textContent += currentOperator; + } + + console.log(`operator ${currentOperator}`); +} + + + +clear.addEventListener('click', function () { + FirstNumber = null; + SecondNumber = null; + currentOperator = null; + result = null; + display.innerHTML = ' '; // Keep display from collapsing + + console.clear() + console.log('clear'); +}); + +equal.addEventListener('click', function () { + if (currentOperator == '+') { + result = Number(FirstNumber) + Number(SecondNumber); + } + + if (currentOperator == '-') { + result = Number(FirstNumber) - Number(SecondNumber); + } + + if (currentOperator == '*') { + result = Number(FirstNumber) * Number(SecondNumber); + } + + if (currentOperator == '/') { + result = Number(FirstNumber) / Number(SecondNumber); + } + const limitedResult = Number(result.toFixed(8)); // Limit to 8 decimal places + display.textContent = limitedResult; + console.log(result) + FirstNumber = null; + SecondNumber = null; + currentOperator = null; +}); \ No newline at end of file