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

Notification page using HTML, CSS, Bootstrap and JS

Saubhagya 80

@Saubhagya111

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


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 ?

Community feedback

@brandonetter

Posted

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.

0

Saubhagya 80

@Saubhagya111

Posted

@brandonetter Yep, I tried that but the thing was I was unable to write the correct syntax for the code. Later I did it using while loop in which the loop continues till the length of unread messages is greater than 0 and the class of unread would be removed from unreadMessage[0].

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