Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found

Submitted

news-homepage-main

Matthew 380

@matthew-marco

Desktop design screenshot for the News homepage coding challenge

This is a solution for...

  • HTML
  • CSS
  • JS
2junior
View challenge

Design comparison


SolutionDesign

Solution retrospective


any tips

Community feedback

Shaxboz 1,230

@shakhboz-shukhrat

Posted

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 to menuButton and linksClose. The click event is passed as the first parameter and a callback function is passed as the second parameter. Inside the callback function, we toggle the active class for links. The linksClose callback function checks if the active class is present in links and if so, removes it.

Anyway, your solution looks great. Hope you will find this helpful

Marked as helpful

0

Matthew 380

@matthew-marco

Posted

@Trueboss okay I will consider that in the next projects but I have a question how should using addeventlistener help more than onclick

1

Please log in to post a comment

Log in with GitHub
Discord logo

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