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

Interactive Rating Component | youngmelis Solution

youngmelisā€¢ 60

@youngmelis

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


I know that the interactive part doesn't work on the netlify server, but in my local dev server does. Any suggestions?

Community feedback

@abdelrhmanKh

Posted

Hi youngmelis, Your Design is Amazing.

##Hope to accept some advice about your js Code.

  • You could use data-set on all the rating buttons or use the class rating to get a node of all buttons and use a loop to attach the same event without repeating the code to follow the concept don't repeat yourself.
  • To get all elements I prefer using a query selector to get the wanted element My code is something like this.
for (const li of ratting) {
li.addEventListener("mouseover", () => {
        for (const li of ratting) {
            li.classList.remove("active")
        }
        li.classList.add("active")
        }
    )
}
  • Hope You happy Coding

Marked as helpful

1

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