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

notifications-page-main with HTML and SCSS, FLEXBOX and JAVASCRIPT

@codeguy9

Desktop design screenshot for the Notifications page coding challenge

This is a solution for...

  • HTML
  • CSS
  • JS
2junior
View challenge

Design comparison


SolutionDesign

Solution retrospective


Hello, The javascript that I wrote doesn't work. Please if you know more javascript, let me know or put a solution here. Thanks

Community feedback

@pertrai1

Posted

Great work on the solution you have come up with.

Check in your JS and notice that you are using querySelector for the selected-tab, but there are multiple elements in the DOM that have this class. Because of this you will need to use querySelectorAll and then loop over each of them to add the class inactive. See if that helps get you going in the right direction.

Marked as helpful

0

@codeguy9

Posted

@pertrai1 Thanks for the feedback; How can I loop over each of them?

0

@pertrai1

Posted

@codeguy9

You have a couple options:

  1. You can use forEach - https://developer.mozilla.org/en-US/docs/Web/API/NodeList
  2. You can turn into an array and then use the available array methods. To turn into array, you can use Array.from(document.querySelectorAll(...)) or [...document.querySelectorAll(...)].

To me, it seems like the logic would be to take the single selector that is in the callback of the click handler you have, and loop over to add the class to the selector.

If this does not get you to the solution, you can post back here and tell me where you get stuck.

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