Skip to content
Submitted over 2 years ago

Notification page using HTML, CSS, Bootstrap and JS

Saubhagya•80
@Saubhagya111
A solution to the Notifications page challenge
Preview (opens in new tab)Code (opens in new tab)

Solution retrospective

How do I make the class of "unread" being removed when I click on "mark all as read" I tried various ways but it didn't work and how to add the red dot at the end of unread notifications ?

Code

Please log in to post a comment

Log in with GitHub

Community feedback

  • Brandon Etter•120
    @brandonetter

    Hi! My solution would be to add an event listener to "mark all as read" and have that run a function that toggles the class "read" on each element.

    https://codepen.io/brandonetter/pen/oNdVmZR?editors=1111

    Here's a quick example. We use document.querySelector to grab the elements and then place listeners on them. We can access the classList and use the toggle() function to add/remove a class.

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