Design comparison
Solution retrospective
writing the javascript to mark all the messages as read proved to be very difficult and i tried everything i could butstill could seem to get it right, any help with be appreciated
Community feedback
- @DaniNewAccPosted 6 months ago
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 thedisplay: '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.Marked as helpful0 - @Swag-blipsPosted 6 months ago
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.
Marked as helpful0
Please log in to post a comment
Log in with GitHubJoin 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