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

Roy Saucedoā€¢ 30

@roysaucedo

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


Styling the component was pretty straight forward. I had trouble with grabbing the selected value and adding to Thank You page.

How did you create logic for the submit button to only be active if something is selected? How did you capture the value of the selection and add to Thank You page?

Any tips would be amazing! Thanks!

Community feedback

@abdelrhmanKh

Posted

First Of all congratulation on this awesome work šŸ„³

There are many approaches to achieving this actually one of them is to put Eventlisner to click on the number and by default, the submit button has a class of disabled when the client clicks the button the function of the event start and removes the disable class and get the value of the button that is clicked on and you can access the btn selected using the event

const rattedBtns = document.querySelectorAll(".option-bg")
let submitBtn =  document.querySelectorAll("#submit-btn")
let rated = 0;

rattedBtns.forEach(btn=>{
      btn.addEventListener("click",(e)=>{
      // you could add data-target on your button to be easy to reach it but this will work for you       
        rated = e.target.children[0].innerText
        submitBtn.classList.remove("disable")
     })

}

I think the Idea Is Reached how it help šŸ˜…

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