Flex-box

@EL132 ok no problem

code url : https://github.com/Mohamed33362/Frontend-challange-4.git

preview url :https://mohamed33362.github.io/Frontend-challange-4/

@Mohamed33362 Awesome!

It looks like your JavaScript is currently letting the user click on other banners and make them have the new class of "clicked." This is a cool functionality.

For the JavaScript section, I believe you would be best off trying to do the next steps:

1. Be able to "mark all as read" and take the "clicked" class off of every element and update the overall notification number to 0.
2. Be able to click on an already clicked element to remove the notification background.

Doing these two steps will help you out a lot in seeing how to use certain elements. For my solution, I used a JavaScript library called jQuery. I highly recommend you use this library if you want to save yourself time! This library lets long, verbose code turn into a very quick change "document.querySelector" turns into "$". If this sounds interesting, check out this page on how to get started: https://www.w3schools.com/jquery/jquery_get_started.asp

I hope this helps! Elias

@EL132

Thank you it was very helpful but i try to make the span that have the number to change by the numbers of div's that have class clicked but i can't make the funcinallity , and i tried to make it more like other notifaction section in social media , i tried my best

@Mohamed33362 I see-you did a great job! Fortunately, updating the overall notification is pretty easy compared to everything else! All you have to do is grab the current value of the notification using your query selector and change the inside text to whatever the inside value should now be. For example:

var notifications = document.querySelector(".noti"); var notiValue = notifications.innerHTML; notiValue -= notiValue; notifications.innerHTML = "" + notiValue;

The code above would allow you to set the notification value equal to zero, so this might be code you would use in your mark all as read function. I hope this helps, and if it answers your initial question, upvote this response so others can see the right solution to your question!