Responsive Notifications Page

Frontend Mentor - Notifications page solution

Hi everybody! 👋

This is a solution to the Notifications page challenge on Frontend Mentor.

The challenge 🎯

Users should be able to:

• Distinguish between "unread" and "read" notifications
• Select "Mark all as read" to toggle the visual state of the unread notifications and set the number of unread messages to zero
• View the optimal layout for the interface depending on their device's screen size
• See hover and focus states for all interactive elements on the page

Links 🔗

• Solution Github Repository
• Solution Github Page

My process ⚙️

Built with 🛠️

• HTML5 markup
• CSS custom properties
• Flexbox
• Javascript

What I learned 📚

With this challenge I learned how to design a notification bar and fundamentally how to give it the proper functionality so that notifications change from "not read" to "read" status, modifying the notification counter accordingly.

in this fragment we can see the functionality of the "read" button:

const button = document.querySelector('.read');

button.addEventListener('click', () =>{
    document.querySelectorAll('li').forEach(e =>{
        e.classList.remove('unseen');
        console.log(e.classList);
    });
    document.querySelectorAll('.dot').forEach(e =>{
        e.classList.remove('dot');
    })
    document.querySelector('.number').innerText = '0';
    })

Author 🙋🏻‍♂️

• Linkedin - Agustín Rodrigo Firpo
• Frontend Mentor - @Arfirpo
• X - @agus_firpo