Skip to content
  • Learning paths
  • Challenges
  • Solutions
  • Articles
  • Unlock Pro
  • Log in with GitHub
Solution
Submitted over 1 year ago

Responsive Notification Page Menu using HTML, CSS and JavaScript

KHLIFI BRAHIM•210
@khlifibrahim
A solution to the Notifications page challenge
View live sitePreview (opens in new tab)View codeCode (opens in new tab)

Solution retrospective


Image Post

Notification Counter

This is a simple JavaScript project for managing and counting notifications. It provides the functionality to mark notifications as read or unread and keeps track of the number of unread notifications.

Features

  • Mark notifications as read or unread.
  • Real-time notification count update.
  • Option to mark all notifications as read.

Usage

  1. Clone the repository to your local machine.
  2. Open the index.html file in your web browser.

How It Works

  • The project uses JavaScript to add interactivity to the notifications.
  • Notifications can be toggled between "read" and "unread" states by clicking on them.
  • The notification count is updated in real-time based on the number of "unread" notifications.
  • You can mark all notifications as "read" by clicking the "Mark All as Read" button.

Example

To see a live example of this project in action, you can visit the following link: Notification Counter Demo

License

This project is licensed under the MIT License - see the LICENSE.md file for details.

Code
Loading...

Please log in to post a comment

Log in with GitHub

Community feedback

No feedback yet. Be the first to give feedback on KHLIFI BRAHIM's solution.

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
Frontend Mentor logo

Stay up to datewith new challenges, featured solutions, selected articles, and our latest news

Frontend Mentor

  • Unlock Pro
  • Contact us
  • FAQs
  • Become a partner

Explore

  • Learning paths
  • Challenges
  • Solutions
  • Articles

Community

  • Discord
  • Guidelines

For companies

  • Hire developers
  • Train developers
© Frontend Mentor 2019 - 2025
  • Terms
  • Cookie Policy
  • Privacy Policy
  • License

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub