I have tried to solved this problem. I would like a code review. Thanks!
Link to code: https://jsfiddle.net/mvp96rnu/
Hi there @lightsaber! Welcome to the community, and thank you for sending your code in.
This mostly works fine, and there is some great work here. Well done!
The one part that needs some work is the lighten/darken button — just showing or hiding the overlay doesn’t really work, as it is light by default, so you don’t see any difference (it looks like this is the approach you were going for). In our final version, we change the background color of the overlay when the button is pressed, then toggle it back when it is pressed again:
btn.onclick = function() {
const btnClass = btn.getAttribute('class');
if(btnClass === 'dark') {
btn.setAttribute('class','light');
btn.textContent = 'Lighten';
overlay.style.backgroundColor = 'rgba(0,0,0,0.5)';
} else {
btn.setAttribute('class','dark');
btn.textContent = 'Darken';
overlay.style.backgroundColor = 'rgba(0,0,0,0)';
}
}
Have a look at this, and then see if you write code that does the same thing in less lines.
Thank you for kind works!
I have updated the code, but couldn’t find a shorter way of doing it. Please take a look at it: https://gist.github.com/ujjwal123123/e5334c1e2a1ba6349c917d4c862256f9