Responsive Notifications page with vanilla CSS and JS functionality

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!

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!