Skip to content
Submitted almost 2 years ago

Interactive Rating using HTML, CSS e JS

Priscila PC•60
@pripc
Preview site (opens in new tab)View code (opens in new tab)
This is a solution for...Interactive rating component
  • HTML
  • CSS
  • JS
1newbie

Design comparison

SolutionDesign

Solution retrospective

Hello everyone! This is my solution to this challenge!

I'd like to know if there is a simpler way to make the rating buttons color change after we click on them. As you can see my solution (function checkAndVerify(value)) for this is super large.

Community feedback

  • Franklin kithaka•320
    @frankbush-cloudPosted almost 2 years ago

    Hey @pripc..i thought of changing the rating buttons color with CSS alone. Where by I change the color when hovering and when the button is active. You can also shorten your js by this: rates.forEach((rate)=>{ rate.addEventListener("click", ()=>{ rating.innerHTML = rate.innerHTML; submitButton.addEventListener("click", ()=>{ thanksContainer.classList.remove("hidden"); mainContainer.style.display = "none"; rateAgain.addEventListener("click", ()=> { thanksContainer.classList.add("hidden"); mainContainer.style.display="block"; }) }) }) })

    Marked as helpful
    0
    Priscila PC•60
    @pripcPosted almost 2 years ago

    Hi @frankbush-cloud! Thanks a lot for your help, I am gonna try this way 😊

    0

Please log in to post a comment

Log in with GitHub

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