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 w/ (HTML + SASS + JS)

#accessibility#fetch#sass/scss
Adriano 33,960

@AdrianoEscarabote

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


👨‍💻 Hello everyone. This is my solution for the Notifications page.

This was a great project to practice organizing my code using ES Modules. I was also able to train how to get data from the JSON file dynamically, that is, if the file is changed and updated with some other notification when the page refreshes we will have another notification!, I still don't know how to make a backend application to send data for JSON, but it would be cool to see it working!

I added:

  • 👨‍💻 I used a file to store all the notifications information and according to the file data and the notification type, I made each one inherit a class for each type, for example, the notification that has a message goes receives its own class and the notification that it has a picture next to it, it will receive its own class customized for its type!

Feel free to leave comments on how I can improve my code.

Thanks! 😊

Community feedback

P

@Minamakhlouf

Posted

Hi Adriano,

Great project, it looks almost exactly like the design and I liked how you used fetch() to get the data, I'd like to get more practice on that myself.

Your "mark all as read" button works fantastic but I can't mark individual posts as read or unread. This is something that would make the project more realistic.

The way I did it was I gave each card an event listener that would give add or a remove a read or unread class. Then it would check how many elements had that class and change the notifications counter accordingly.

Hope this helps.

Aside from that, fantastic project, keep up the good work.

Marked as helpful

1

Adriano 33,960

@AdrianoEscarabote

Posted

@Minamakhlouf thanks! yes it would be more realistic, you're right!

0

@hernannadotti

Posted

Hi @AdrianoEscarabote amazing job...just a doubt... clicking any unread comment ... it should turn to read .. thanks.

0
Bryan 0

@bryanbudah

Posted

Hey Adriano I would love to network with you.how do I reach you?

0

Adriano 33,960

@AdrianoEscarabote

Posted

@bryanbudah call me on twitter!

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