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 panel made with VUE.js

@0xjoshva

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 could I filter through the array to count the amount of times readMessage === false?

Community feedback

P

@AlexandruStefanGherhes

Posted

Hello, the way I managed to get the notification alert to decrease 1 by 1 after clicking the unread notifications was by checking how many of the total alerts did not have a class of 'active', and once a notification was clicked and it had the new class of active applied, the unread notifications without the class of active was down by 1 and the total counter for them would decrease by 1.

Marked as helpful

1

@0xjoshva

Posted

@AlexandruStefanGherhes Thanks for bringing that to my attention. You raised a valid point. I can count the amount of items with the class .unread instead of filtering the array.

0

@DontMash

Posted

@0xjoshva You did a great job! I would suggest to base your visuals on data and then change the data accordingly, like you already did. Since the data is bound to the visuals you can just replace the "3" with a function that counts the amount of unread notifications in the collection.

0

@0xjoshva

Posted

@DontMash I think I understand what you are saying. Should I put a function that counts the length of items which have the attribute of messageRead = false in the curly braces? I tried doing that but it didn’t work.

1

@DontMash

Posted

@0xjoshva You need to use a computed value to make it change when the data changes or watch the array. The first one is the preferred solution since it is handled internally by vue.

Marked as helpful

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