Flex-box

Community feedback

• 

  Elias Lind•130

  @EL132Posted about 2 years ago

  Hey Mohamed!

  Nice job completing the design for the project! I would love to help you with your JavaScript section of the code, but I don't see your code when I click on the view code link. Could you put a link in a response to this comment that would take me to your code? Thank you!

  Elias

  0

  ---

  

  Mohamed Essam•100

  @Mohamed33362Posted about 2 years ago

  @EL132 ok no problem

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

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

  0

  

  Elias Lind•130

  @EL132Posted about 2 years ago

  @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

  0

  

  Mohamed Essam•100

  @Mohamed33362Posted about 2 years ago

  @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

  0

  

  Elias Lind•130

  @EL132Posted about 2 years ago

  @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!

  Marked as helpful

  1