Skip to content
Submitted almost 2 years ago

Interactive rating component using Flexbox and JS DOM manipulation

ajjr•40
@ajjr
Preview site (opens in new tab)View code (opens in new tab)
This is a solution for...Interactive rating component
  • HTML
  • CSS
  • JS
1newbie

Design comparison

SolutionDesign

Solution retrospective

I found colour matching for the radial gradient to be the most challenging. I ended up mostly eyeballing the difference between the general background and the background of the feedback area. I guess having a calibrated monitor would help, but apart from that, I would appreciate any tips dealing with colours. Eg. how much can I deviate from the guidelines?

Also I ended up making the submission button active only after the user has selected a rating. It was a deliberate solution and I would appreciate any feedback regarding it.

Community feedback

  • Sarah Hassan•145
    @sarah27hPosted almost 2 years ago

    Hi AJJR’S, Great Job

    I used Inkscape or you can use any graphics program and open the design image and use pick color. also, you can try this site to extract colors.

    For, the submission button I didn't think of it. I displayed 0 if the user didn't select a rating. But I think your approach is better.

    Hope this help

    1
    ajjr•40
    @ajjrPosted almost 2 years ago

    @sarah27h That site looks very interesting and useful resource. Thank you for sharing!

    My approach in disabling the button relies on removing the disabled attribute from the button element when the user has selected a rating. Feel free to look at my script file if you want to to implement something similar.

    1
    Sarah Hassan•145
    @sarah27hPosted almost 2 years ago

    @ajjr Glad to help. This video helped me know how to use the Coolors site.

    Thanks for your hint, I will use the disabled attribute as you suggest and update my code.

    1

Please log in to post a comment

Log in with GitHub

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