Skip to content
Submitted about 2 years ago

Notifications page w/ (HTML + SASS + JS)

Adriano•38,270
@AdrianoEscarabote
Preview site (opens in new tab)View code (opens in new tab)
This is a solution for...Notifications page
  • HTML
  • CSS
  • JS
2junior

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

  • Mina Makhlouf•920
    @MinamakhloufPosted about 2 years ago

    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•38,270
    @AdrianoEscarabotePosted about 2 years ago

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

    0
  • hernannadotti•560
    @hernannadottiPosted almost 2 years ago

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

    0
  • Bryan•0
    @bryanbudahPosted about 2 years ago

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

    0
    Adriano•38,270
    @AdrianoEscarabotePosted about 2 years ago

    @bryanbudah call me on twitter!

    0

Please log in to post a comment

Log in with GitHub

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