Notification Page

Community feedback

• 

  misty•70

  @mistyb01

  Posted over 2 years ago

  Hi! I'm not sure if my approach is the best way to do it, but here's what I did:

  • For the red dot, I made an empty span element, and for its style I gave it a red background, and defined its width, height, and border-radius to make it a circle. Then I manually added it to the html of the unread notifs. (I'm guessing in a real implementation, the red dot element would be appended to the DOM of an unread notif.)

  • Then when I mark all as read, I remove all the red dots by selecting them all by their class (which results in a nodelist), then I loop through each element and remove them from the DOM, using the parentNode.removeChild(). Another way to 'remove' them is to set their display property to none.

  Nice job with your code tho, let me know if you find a cleaner solution for this :)

  01