Responsive Notifications page with vanilla CSS and JS functionality

Community feedback

• 

  Abdul Khaliq 🚀•72,560

  @0xabdulkhaliqPosted over 1 year ago

  Hello there 👋. Congratulations on successfully completing the challenge! 🎉

  • I have other recommendations regarding your code that I believe will be of great interest to you.

  ---

  JAVASCRIPT 🟡:

  • The way you declared variables are need to be well structured and organized

  ---

  • Take a look at the following example code which describes a better way of declaring variables to have a well structured code

  const firstName = "Your";
  const lastName = "Name";
  const emailAddress = "[email protected]";
  const password = "supersecret";
  

  • instead try this,

  const firstName =  "Your",
         lastName =  "Name",
         emailAddress = "[email protected]"
         •••                
         •••         // n number of declarations
         password = "supersecret";   // make sure to add a semicolon at end of last declaration
  

  • This single line declaration with separated commas will helps you to have a better structured code and improves readability though

  ---

  .

  I hope you find this helpful 😄 Above all, the solution you submitted is great !

  PS : Glad to hear that I'm your mentor 😊

  Happy coding!

  Marked as helpful

  1

  ---

  

  hassan•390

  @HassanMak29Posted over 1 year ago

  @0xAbdulKhalid thank you very much for your feedback, I updated my code!

  0
• 

  P

  visualdennis•8,375

  @visualdennissPosted over 1 year ago

  Hey there,

  nice work with the component! Your final result looks good. Couple suggestions:

  • it probably makes more sense to show no count for when it is 0, so the counter is displayed only when there is at least one unread notification. This is also a common practice with messages, it usually says 1 new message or (1) message, but not (0)message

  • There seems to be a bit too much nesting and conditionals, you might wanna try to break it down into smaller helper functions outside of it and then call them depending on the condition case.

  • You might also consider about how to implement the functionality on marking individual notifications as read when they are clicked on. You can use data-attributes for that and pass an id onClick, which then seeks the data with that id value matching and changing its class or data about read/unread.

  Hope you find this feedback helpful!

  Marked as helpful

  1

  ---

  

  hassan•390

  @HassanMak29Posted over 1 year ago

  @visualdenniss thank you very much for your feedback, you can check the updated version now! the site is also live now!

  1

  

  P

  visualdennis•8,375

  @visualdennissPosted over 1 year ago

  @HassanMak29 Great job! Everything seems to be working perfectly now. Also it looks like you have refactored the JS with helper functions as well.

  1