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 with React + CSS

#react#vite
P
Ed 720

@EdwinSch

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


update: Thanks to some great suggestion I was able to fix my previous problem (or rather take another approach to create that functionality). The project is now fully functional.

Hi everybody!

I'm almost done with this challenge but in my final step I'm running into a problem and really hoping somebody can help me figuring it out.. much appreciated :)

The problem: In my project the notifications can be marked as 'read' either by clicking on a single notification or marking them all at once by the "mark all as read" button. These functions trigger a filter which returns the (new) number of unread messages and should update the state of the notifcations amount in the little blue box. But the latter is not happening at once, only when you click another post as read (so basically re-triggering this functionality) it updates. Simply put: the number of unread messages is always 1 behind for some reason. I'm definitely overlooking something here.. but I just can't seem to figure it out :(

Community feedback

@mahmoudAcm

Posted

@EdwinSch try this instead define a single state for unread count and decrease it by one if clicking one item and set it to zero if marking all of them as read. and the initial value is 3 or whatever depending on your requirement.

Marked as helpful

0

P
Ed 720

@EdwinSch

Posted

@mahmoudAcm Hi Mahmoud. Thanks for your input, much appreciated. I will give your approach a try.

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