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 query string params

@aronsn

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


Challenging parts

  1. Customized radio buttons with almost only CSS
  2. How to manage states between two pages
  3. Color gradients

First problem I feel I got away with not writing a lot of js code for the radio buttons, had to familiarize myself with new a CSS selector I havent used before which was the general siblings selector (~). Glad I did.

Second problem couldve been solved with cookies/local storage, I shouldve maybe have gone that route. But I felt it was easier to use query params.

Third problem, was trying to match the background color with the designs. That actually took a lot of time. Will be using radial-gradient more from now on.

Appreciate any feedback on any part of the code, please let me know if there is anything that shouldve been different.

Thanks!

Community feedback

Daniel 🛸 44,230

@danielmrz-dev

Posted

Hello @fuzzboii!

Your solution is excellent!

I have just one suggestion:

  • Add a validation with JavaScript to check if the user chose a number before submitting. Like if the user tries to submit without choosing a number, it won't be possible to submit.

Currently it's possible to submit without choosing a number on your project. It's just an extra validation that improves the project!

I hope it helps!

Marked as helpful

1

@aronsn

Posted

Hey @danielmrz-dev, thank you for the pointer! Have made a new deployment with this as a change.

Best, Aron

1
Daniel 🛸 44,230

@danielmrz-dev

Posted

@fuzzboii

Just checked it! That's exactly what I was talking about!

It is even better now 😊

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