Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found

Submitted

Rating app

Subhi-05 30

@Subhi-05

Desktop design screenshot for the Interactive rating component coding challenge

This is a solution for...

  • HTML
  • CSS
  • JS
1newbie
View challenge

Design comparison


SolutionDesign

Solution retrospective


Hey all!

Hope y'all doin' good. This is another project of Rating app using html, css and js. I wish you people to add a comments so that I can improve it well. Please feel free to comment and add your thoughts.

Thank you!!

Community feedback

@matiasluduena23

Posted

Hi SUBHI-05’S! Congratulations you finished the challenge! Just one recommendation that might help you.

  • try to write all you Javascript code in your JS file, is more clean and easy to debbug. Maybe you can get all your rating-item and look for a click to apply the class active and remove for the other ranting elements. Something like this:
const allRatingItem = document.querySelectorAll('.rating-item');

allRatingItem.forEach((item) => {
     item.addEventListener('click', (e) => {
       removeClass();   
       item.classList.add("rating-item-clicked")
     })
})

function removeClass(){
    allRatingItem.forEach((item) => {
        item.classList.remove("rating-item-clicked")
    })
}
  • A good practice is to be more modular, a function only has to do one thing. Hope this help you!

Good code!

Matias

Marked as helpful

1

Subhi-05 30

@Subhi-05

Posted

@matiasluduena23 Thank You so much!! It helped me and I'll definitely try adding this dynamic functions.

0

Please log in to post a comment

Log in with GitHub
Discord logo

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