
Solution retrospective
any tips
Please log in to post a comment
Log in with GitHubCommunity feedback
- @shakhboz-shukhrat
Hello there👋! Congratulations on completing this challenge!
The code looks good, but it can be optimized by using EventListeners instead of onclick functions. This will allow for the addition of multiple event listeners to the same element and makes the code more readable. Here is the optimized code:
let menuButton = document.querySelector(".menu-button"); let links = document.querySelector(".links"); let linksClose = document.querySelector(".links img"); menuButton.addEventListener("click", function() { links.classList.toggle("active"); }); linksClose.addEventListener("click", function() { if(links.classList.contains("active")) { links.classList.remove("active"); } });
Here we used
addEventListener
to attach event listeners tomenuButton
andlinksClose
. Theclick
event is passed as the first parameter and a callback function is passed as the second parameter. Inside the callback function, we toggle theactive
class forlinks
. ThelinksClose
callback function checks if theactive
class is present inlinks
and if so, removes it.Anyway, your solution looks great. Hope you will find this helpful
Marked as helpful
Join 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