Design comparison
Solution retrospective
Which areas of your code are you unsure of?
- How to store the theme on local storage and update the current theme toggler value.
- Implement the correct Calculator functionality.
Community feedback
- @Kamlesh0007Posted over 1 year ago
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.
2@to-my-learning-pathPosted over 1 year ago@Kamlesh0007
Thanks. I figure it with React useContext.
0 - @ChamuMutezvaPosted over 1 year ago
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.
1 - how to deal with floating number calculations , for example do the following
- @Kamlesh0007Posted over 1 year ago
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; }
0
Please log in to post a comment
Log in with GitHubJoin our Discord community
Join thousands of Frontend Mentor community members taking the challenges, sharing resources, helping each other, and chatting about all things front-end!
Join our Discord