Calculator app solution

When the user clicks the toggle button to switch themes, you should update a global variable or state variable to keep track of the current theme (e.g., isDarkMode).

After updating the theme variable, you should save its value to local storage using the localStorage.setItem() method. For example:

javascript code localStorage.setItem('theme', isDarkMode ? 'dark' : 'light'); This code saves the theme value as a string ('dark' or 'light') with the key 'theme' in the local storage.

When the user loads the page or refreshes it, you should retrieve the theme value from local storage using the localStorage.getItem() method. For example: javascript code const savedTheme = localStorage.getItem('theme'); This code retrieves the theme value as a string with the key 'theme' from the local storage.

After retrieving the theme value, you should update the theme variable and the toggle button value accordingly. For example: javascript code const isDarkMode = savedTheme === 'dark'; toggleButton.value = isDarkMode; This code updates the isDarkMode variable based on the saved theme value and updates the toggle button value to reflect the current theme.

Hi Omar

So far so good with your project, well done. Kamlesh has explained well on how to handle the local storage issue.

Using the eval is genarally not recommended as among other things considered a security risk to users. See the following eval - MDN.

Here are some issues to look at when dealing with a calculator

• how to deal with floating number calculations , for example do the following 0.1 + 0.2 and check the result.
• set a maximum length for the operands , you cannot have a calculator that will take any number as long as the keyboard is pressed.
• set a condition such that , when the decimal point is already present in the number, then no other decimal point should be accepted. For example 0.89.3 should not be permitted

Happy coding.

To properly center the component in the page, you should use Flexbox or Grid layout. You can read more about centering in CSS here 📚. For this demonstration we use css Grid to center the component. body { min-height: 100vh; display: grid; place-items: center; }