Frontend Mentor - Notifications page solution

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

Table of contents

• Overview
  • The challenge
  • Preview
  • Links
• My process
  • Built with
  • What I learned
  • Useful resources
• Author

Overview

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

Preview

Links

• Solution URL: frontendmentor.io/solutions/notifications-page-yTP3VTrh7V
• Live Site URL: notifications-page-acyein.vercel.app

My process

Built with

• Tailwind CSS
• React
• Next.js

What I learned

• Understanding how to set updated count using the React hook 'useEffect'.
• Practise iterating through items using the map() method.

const [number, setNumber] = useState(0);

useEffect(() => {
    function totalNotifications(notifications) {
        setNumber(0);
        notifications.map(notification => {
            // if isRead is false, plus 1 to total
            notification.isRead === false && setNumber(number => number + 1);
        });
    }
    totalNotifications(notifications);
}, []);

function handleClick() {
    notifications.map(notification => {
        // if isRead is false, minus 1 from total & set isRead to true
        notification.isRead === false && ((setNumber(number => number - 1), (notification.isRead = true)))
    })
}

Useful resources

• @jaafar2000/notifications-page-main - This source code helped me understand how to implement useEffect.

Author

• Website - Chian Yein
• Frontend Mentor - @acyein