Project Feedback

[veraldik]

Build a website that allows the user to switch between day and night color themes and remembers their choice

@egillespie Can you take a look at this? It's hosted here and meets the following criteria:

• [x] The class on the body element is always up-to-date with the current theme (either day-theme or night-theme) -- you can use document.body.setAttribute('class', 'some-class-name') to set the class on the body
• [x] Somewhere on the page, the user is told how many times they've visited the website (starting with 1 the first time)
• [x] When a user changes the theme, their choice is remembered in localStorage
• [x] When the body has the class night-theme, the background of the website is a very dark color, with a lighter color for the text
• [x] When the body has the class day-theme, the background of the website is light-colored, with a darker color for the text
• [x] Includes a button that when clicked, will toggle the website between day and night themes

I am so stuck! I know i'm missing parts of the project but I'm just trying to get the base firgured out right now. Everytime I refresh the page in firefox (using live-server) different things happen with the button. Please help ):

[egillespie]

Hi @veraldik, happy to help! 🙂

First, let's move all of the JavaScript into your mode.js file and use that file in your HTML by adding this line:

<script src="mode.js"></script>

This will give us better ways to troubleshoot if needed.

---

Another thing I noticed is that I see the following error in the Chrome Devtools console when I click the button on your page:

localStorage.remove isn't a function. For this project, you also don't need to worry about clearing anything from localStorage, so go ahead and remove both window.localStorage.remove('theme') statements. That should resolve this error that stops your code from running.

---

The next thing I recommend is replacing your else if with an else. This way, if anything besides day-theme ever finds its way into localStorage, your code will still switch the theme correctly.

---

From what I can see, I think the button will work correctly after the above changes. The final part is to set the theme when the page loads by getting the saved theme from localStorage.

To do that, write some code that does the following at the very end of your JavaScript file:

1. Get the theme from localStorage and put it in a variable
2. If the variable is null, set the body style to day-theme
3. If the variable is not null, set the body style to the value of the variable

---

This should complete the theme requirements. Give these recommendations a try and send some questions my way if you get stuck again. 👍

[veraldik]

Ah, thank you. It finally works haha

[egillespie]

You're welcome! Your code looks and works really well. Nice work incorporating those recommendations and pulling the rest together. I don't have any recommendations for improvement! 🎉 :shipit: