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 - Using @media for mobile and JS

Elyticus 280

@Elyticus

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 is not the best coding. I've tried to make it as functional as possible, however, when you click on body/HTML the rating remains rendered. I would like to reset the rating and make the "Submit button" active only by pressing the buttons.

So if you can advise me on that, it would be appreciated :D

Community feedback

AC 🍀 340

@alleycaaat

Posted

Hey, good job finishing this project!

You did a great job mimicking the design! I don't quite follow what your question was regarding wanting to reset the rating and make the submit button active only by pressing the buttons. For me the submit button only functioned properly once I'd selected a rating. One thing I did notice, if a user clicks a rating and then clicks off of their selection (removes the focus), the rating goes back to the default color, rather than staying grey to indicate what has been selected. Small change and you'll be golden.

Great job!

Marked as helpful

1

Elyticus 280

@Elyticus

Posted

@alleycaaat Well. Actually, you've answered my question :)))

Now it makes more sense to keep the rating button active. My struggle was, if you click outside the submitted card after selecting any rate, it won't be reset and the rate persists after submission. But anyway, I used to complicate my mind. Thx for answering ^_^

1
AC 🍀 340

@alleycaaat

Posted

@igunereve well fantastic, happy accident :)

Ahh yes, now I understand you. It's a better user experience for the selection to remain visible even if they click on something else (unless it's a different rating of course :) ). It's a fun little JavaScript challenge to make sure only the last clicked rating is selected. I got a little cheeky with mine and added a default selected score of five haha.

Glad I could help!

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