Skip to content
Submitted 3 months ago

Notifications page

AlexCristea2007•790
@AlexCristea2007
Preview site (opens in new tab)View code (opens in new tab)
This is a solution for...Notifications page
  • HTML
  • CSS
  • JS
2junior

Design comparison

SolutionDesign

Solution retrospective

What are you most proud of, and what would you do differently next time?

I’m most proud of successfully creating a dynamic notification system using HTML, CSS, and JavaScript. The features, such as marking all notifications as read and handling individual interactions, worked seamlessly. I’m also happy with how I handled the responsive design, ensuring the page adapts well on smaller screens.

Next time, I’d involve external users for testing earlier to catch any usability issues and improve documentation to make the code easier to understand for others.

What challenges did you encounter, and how did you overcome them?

One of the main challenges I encountered was ensuring that the notifications were dynamically populated from the JSON file and properly displayed. There were instances where the content didn't load correctly, or the unread notifications didn't behave as expected. To overcome this, I carefully debugged the JavaScript code, paying attention to the data structure and how elements were being manipulated. I also had to make sure that the dynamic behavior (like marking notifications as read) worked seamlessly across the application. By testing each part and making small adjustments, I was able to ensure the functionality worked as intended.

What specific areas of your project would you like help with?

I would appreciate help with optimizing the JavaScript code for better performance, especially in handling larger datasets. Currently, the notifications are dynamically loaded and displayed, but as the data grows, the code may slow down. Improving the efficiency of DOM manipulation and ensuring the app remains responsive with a large number of notifications would be great. Additionally, if there are any best practices for handling asynchronous data fetching more effectively, I would be keen to learn about them.

Community feedback

  • Marzia Jalili•4,110
    @MarziaJaliliPosted 3 months ago

    Well done dude🙌,

    For a better and neater JS script, only use the className property to determine whether you have that class or not. Don't need that much of effort, man.

    If there is any element with that class simply remove it using this one line of code: yourElement.classList.remove("the-name-of-the-class"). This class has to include the specific styles you want to remove.

    To remove the dots, select all of them using querySelectorAll this will give you an array of all the three dots. Then, loop through the array and remove the class. You can have the same approach as above🤔.

    I've finished that challenge, you can check out my solution for more clarity😎.

    Hope it was helpful😁😁

    Marked as helpful
    1

Please log in to post a comment

Log in with GitHub

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