Nelson• 2,390
@nelsonleone
Posted
HELLO,.....congrats on completing the challenge 🎉 🎉 🎉 I saw you repeated code so many times, Here's a tip to write shorter code in case of next solutions you would work on.
I will just stress on the THEME TOGGLE
You don't need to be adding and removing class names, that a lot of code
You can just do that i your css, (one of the ways to tackle it)
In your css set a ::root, and another for the theme2
Name the variables the same name , but different value;
Then use Js to tell the document body which root variable to use
**Hope this was helpful and you found meaning in it . Have fun coding 🎉 🎉 **
::root{
--bg-Color: white;
-- color:red
}
.theme2{
--bgColor:black;
--color:blue;
}
**IN YOUR JS**
window.onload = document.body.classList.add('.theme1')
toggle.addEventlistner('click',() => {
if(document.body.classList.contains('theme1'){
document.body.classList.remove('theme1')
document.body.classList.add('theme2')
}
})
1
