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 solution

#accessibility#sass/scss

@JPbyte

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


#HTML #CSS #SASS/SCSS #JAVASCRIPT I made this project yesterday, what do you think?

Community feedback

David 8,000

@DavidMorgade

Posted

Hey Joao Pedro, nice job finishing the challenge! congrats!

As harderth pointed out, if you submit with no selected value it just show 4, you can fix this in your Javascript adding a return alert() if no rating button was clicked!.

In your code for example, you could use a check if the number is false like this:

submit.addEventListener("click", () => {
    if(!number) return alert('Please select a rating button');
    card.classList.add("active")
    console.log(card)
    card2.classList.add("active-2")
})

For making this to work you should first remove your hard-coded '4' in your html <span>

Hope my feedback helps you! great work!

Marked as helpful

1

@MrFougasse

Posted

Hey, something weird is that if you click on submit while you haven't chosen a number, you are still redirected trought the Thank you message with the note of 4. You should fix it (for example, make the submit button unclickable). Other than that, you really did a great job, congrats!

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