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

#sass/scss

@naura1835

Desktop design screenshot for the Interactive rating component coding challenge

This is a solution for...

  • HTML
  • CSS
  • JS
1newbie
View challenge

Design comparison


SolutionDesign

Community feedback

@MohanadOO

Posted

Great Work, I liked how you did the flip animation when pressing the submit button.

I would suggest one more thing that I did is to disable the button when there is no button is selected.

To do that you have first to change <button></button> to be an <input type="button" value="Submit"/> and probably you have to add text-align: center to center the text.

After that in your script you can disable the button onload by adding:

const submitbtn = document.querySelector('.submit') 
window.onload = () => {
    submitbtn.disabled = true
}

You can style the button when it is disabled in the CSS like this:

.submit:disabled {
    background-color: hsl(25, 97%, 53%, 40%);
    pointer-evnets: none;
}

And finally, when the user clicks on any of the review buttons it should remove the disabled attribute from the submit button it can be done by making it false submitBtn.disabled = false

I hope this adds something useful for you! 😀👍

Marked as helpful

0

@naura1835

Posted

@MohanadOO Yes it does. Thank you very much, it makes so much sense to disable the button when a user hasn't selected anything otherwise it will still display the thank you part. Thanks for pointing it out, I'll work on it.

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