From 432cacdd6b566e75c27bfe7fd30ff1d41d75bcf7 Mon Sep 17 00:00:00 2001 From: Alibek Abdunasimov <95302127+AlibekAbdunasimov@users.noreply.github.com> Date: Mon, 8 Jan 2024 23:02:55 +0100 Subject: [PATCH] Update script.js with new function --- scripts/script.js | 167 +++++++++++++++++++++++++++------------------- 1 file changed, 99 insertions(+), 68 deletions(-) diff --git a/scripts/script.js b/scripts/script.js index 67931195..aa316e2d 100644 --- a/scripts/script.js +++ b/scripts/script.js @@ -1,108 +1,139 @@ -const lightTheme = "styles/light.css"; -const darkTheme = "styles/dark.css"; -const sunIcon = "assets/SunIcon.svg"; -const moonIcon = "assets/MoonIcon.svg"; -const themeIcon = document.getElementById("theme-icon"); -const res = document.getElementById("result"); -const toast = document.getElementById("toast"); +const lightTheme = 'styles/light.css' +const darkTheme = 'styles/dark.css' +const sunIcon = 'assets/SunIcon.svg' +const moonIcon = 'assets/MoonIcon.svg' +const themeIcon = document.getElementById('theme-icon') +const res = document.getElementById('result') +const toast = document.getElementById('toast') +const operators = ['+', '-', '*', '/'] +const validExpressionRegex = /^(\d+(\.\d+)?([+\-*/]\d+(\.\d+)?)*$)/ function calculate(value) { - const calculatedValue = eval(value || null); + const calculatedValue = eval(value || null) if (isNaN(calculatedValue)) { - res.value = "Can't divide 0 with 0"; + res.value = "Can't divide 0 with 0" setTimeout(() => { - res.value = ""; - }, 1300); + res.value = '' + }, 1300) } else { - res.value = calculatedValue; + res.value = calculatedValue } } // Swaps the stylesheet to achieve dark mode. function changeTheme() { - const theme = document.getElementById("theme"); + const theme = document.getElementById('theme') setTimeout(() => { - toast.innerHTML = "Calculator"; - }, 1500); - if (theme.getAttribute("href") === lightTheme) { - theme.setAttribute("href", darkTheme); - themeIcon.setAttribute("src", sunIcon); - toast.innerHTML = "Dark Mode 🌙"; + toast.innerHTML = 'Calculator' + }, 1500) + if (theme.getAttribute('href') === lightTheme) { + theme.setAttribute('href', darkTheme) + themeIcon.setAttribute('src', sunIcon) + toast.innerHTML = 'Dark Mode 🌙' } else { - theme.setAttribute("href", lightTheme); - themeIcon.setAttribute("src", moonIcon); - toast.innerHTML = "Light Mode ☀️"; + theme.setAttribute('href', lightTheme) + themeIcon.setAttribute('src', moonIcon) + toast.innerHTML = 'Light Mode ☀️' + } +} + +//updated with check(value) function +function check(value) { + if ( + (!res.value.length && value === '-') || + (res.value.length === 1 && res.value === '-' && value !== '-') + ) + res.value = '-' + else { + if (value === '.') { + let num = res.value + function checklength(text) { + return num.split(text)[num.split(text).length - 1] + } + + if (num.split('.').length === 1) res.value += '.' + else { + operators.forEach(operator => { + if (num.includes(operator)) { + num = checklength(operator) + } + }) + + if (num.split('.').length === 1) res.value += value + } + } else { + if (res.value.length) { + //operators + let text = res.value + + if (operators.some(item => item === res.value[res.value.length - 1])) + text = res.value.slice(0, res.value.length - 1) + + res.value = text + value + } + } } } // Displays entered value on screen. function liveScreen(enteredValue) { - if (!res.value) { - res.value = ""; - } - res.value += enteredValue; + if (!res.value) res.value = '' + if (isNaN(enteredValue) && [...operators, '.'].some(item => item === enteredValue)) + check(enteredValue) + else res.value += enteredValue } //adding event handler on the document to handle keyboard inputs -document.addEventListener("keydown", keyboardInputHandler); +document.addEventListener('keydown', keyboardInputHandler) //function to handle keyboard inputs function keyboardInputHandler(e) { // to fix the default behavior of browser, // enter and backspace were causing undesired behavior when some key was already in focus. - e.preventDefault(); + e.preventDefault() //grabbing the liveScreen //numbers - if (e.key === "0") { - res.value += "0"; - } else if (e.key === "1") { - res.value += "1"; - } else if (e.key === "2") { - res.value += "2"; - } else if (e.key === "3") { - res.value += "3"; - } else if (e.key === "4") { - res.value += "4"; - } else if (e.key === "5") { - res.value += "5"; - } else if (e.key === "6") { - res.value += "6"; - } else if (e.key === "7") { - res.value += "7"; - } else if (e.key === "7") { - res.value += "7"; - } else if (e.key === "8") { - res.value += "8"; - } else if (e.key === "9") { - res.value += "9"; + if (e.key === '0') { + res.value += '0' + } else if (e.key === '1') { + res.value += '1' + } else if (e.key === '2') { + res.value += '2' + } else if (e.key === '3') { + res.value += '3' + } else if (e.key === '4') { + res.value += '4' + } else if (e.key === '5') { + res.value += '5' + } else if (e.key === '6') { + res.value += '6' + } else if (e.key === '7') { + res.value += '7' + } else if (e.key === '7') { + res.value += '7' + } else if (e.key === '8') { + res.value += '8' + } else if (e.key === '9') { + res.value += '9' } - //operators - if (e.key === "+") { - res.value += "+"; - } else if (e.key === "-") { - res.value += "-"; - } else if (e.key === "*") { - res.value += "*"; - } else if (e.key === "/") { - res.value += "/"; - } + if (isNaN(e.key) && [...operators, '.'].some(item => item === e.key)) check(e.key) //decimal key - if (e.key === ".") { - res.value += "."; - } + // if (e.key === '.') { + // res.value += '.' + // } //press enter to see result - if (e.key === "Enter") { - calculate(result.value); + if (e.key === 'Enter') { + calculate(result.value) } //backspace for removing the last input - if (e.key === "Backspace") { - const resultInput = res.value; + if (e.key === 'Backspace') { + const resultInput = res.value //remove the last element in the string - res.value = resultInput.substring(0, res.value.length - 1); + res.value = resultInput.substring(0, res.value.length - 1) } }