Interactive rating component (made with HTML, CSS, and JS)

Community feedback

• 

  WandoCode•840

  @WandolePosted almost 2 years ago

  Hey,

  You've made a good job I think!

  • the way to show/hide the different sections is good
  • the JS is good too

  I have some advices if you want to improve your solution (it's mainly about semantic), in my opinion, I let you decide what is relevant:

  • you should use a form tag to wrap the rating values (your buttons)
  • you should use radio input instead of buttons to get the rating value (it's a unique choice among multiples values). If you never styled radio inputs, you can read that to have an idea of how to do it. It's very usefull and you will use it a lot in future projects.

  Also:

  • the user should not be able to display the 'thanks' screen if he have not selected a value before.

  In term of best practices:

  • the CSS variables have to be declared in the scope where they will be used (usually all the HTML)==> you should use the :root selector. You can read the begining of that article if you want more informations.
  • your CSS variables are not very reusable. If I give you a 'light themed' design of the same project, you will have to change their name. To avoid that, you can use 'abstract' names, for example:

  :root{
     --clr-primary-400: hsl(25, 97%, 53%); // Your orange variable
  
     --clr-neutral-100: hsl(0, 0%, 100%); // Your white variable
     --clr-neutral-200: hsl(217, 12%, 63%); // Your light-gray variable
     --clr-neutral-300: hsl(217, 12%, 63%); // Your light-gray variable
   ... etc.
  }
  

  It's only a detail, but for bigger project with 2 themes (light/dark) for example, it will be usefull maybe!

  I hope it will help!

  Marked as helpful

  1

  ---

  

  Danyal•50

  @imRanDanPosted almost 2 years ago

  @Wandole Hi, WandoCode!

  Thank you for taking the time to view my project and give feedback. I greatly appreciate it. I'll take a look at the semantics and try the form method! I also appreciate the advice for best practices with CSS and will keep those in mind for future projects :)

  0