Notification home page

Hello, i think you'll need mainly 2 things for marking the notifications as readed. First of all, you'll need to add red circles to all the new notification, you can style it yourself or you can use a font awesome icon for it with a class on an <i> tag. After that you'll need to use javascript and select all the red circles element with document.querySelectorAll('classnameforcircle') then use a click event listener on the mark all as read btn and give to all the red circles the display: 'none' styling by using a forEach on them whenever a click on the btn occurs and after all you'll need to modify the text content for the notifications number to 0, so: markAsReadBtn.addEventListener('click', () => { redCircle.forEach(circle => { circle.style.display = 'none'; }) unreadedNoti.textContent = 0; })

Keep in mind, it's also required for this solution to work to call the btn for markAsRead and unreadedNoti with documentQuerySelector('className/id') Also, hardcoding a value like on unreadedNoti is not ideal but for this specific project can work because all the notifications are hardcoded and there is no possibility that new notifications are displayed on the page.

Hello fansisi, Here is my take

• Consider increasing the font size and weight of the notification text at the top of the page.
• The main notifications section currently lacks a white background wrap.
• Notifications are misaligned on extra-large screens.
• The font family is not being applied to the texts.
• The first three comments are missing the orange notification blip indicator.

Accessibility and Semantic HTML:

• Ensure proper use of semantic HTML like section, header, e.t.c elements for better accessibility and SEO.
• Alt Text Descriptions: Provide meaningful alt text for all images.
• ARIA Labels and Roles: Add ARIA labels where necessary for better accessibility.