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

Kathryn 320

@KathrynDavies123

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


Think I figured out everything, but open to any feedback :)

Community feedback

@igomonteiro

Posted

Hi Kathryn, nice job!

I noticed that there is a problem in your solution, the notifications counter can be negative when clicking on notifications that have already been marked as read. Try to implement some condition that doesn't let the counter be less than zero.

Best.

Marked as helpful

0

@igomonteiro

Posted

Other than that, add the "alt" attribute to your images, it's a good accessibility practice. Read more at: Image alt

Marked as helpful

0
Kathryn 320

@KathrynDavies123

Posted

@igomonteiro Thanks, fixed it now :)

0

@igomonteiro

Posted

@KathrynDavies123 Nice Kathryn, just need one more fix now. If you click "mark all as read" then click in some notification that was unread, the counter is still couting to -1, -2, -3 and so on. Try to update the state to every notification. I guess you are updating the visual components but not the states.

Marked as helpful

0
Kathryn 320

@KathrynDavies123

Posted

@igomonteiro should be fixed now, I solved this by checking if the element has the class "unread" and only to run the function if it does. Is there a better way than this?

0

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