Interactive rating component using vanilla JS, lots of flex-box

Community feedback

• 

  Elaine•11,400

  @elaineleungPosted about 2 years ago

  Hi rushinstuffin, good job completing your first challenge, and welcome to Frontend Mentor! Your component looks great, and I think it's really good that you included some logic to handle the situation when no numbers are selected.

  About the colors not being listed, I used to think the same thing and would try to find what the color is; later I realized it's most likely just the opacity that's being changed. You can either use the opacity property with values from 0 to 1, or in the hsl (like hsl(216, 35%, 14%)), change that to hsla and then change the alpha (a) value, which also is for opacity (e.g., hsla(216, 35%, 14%, 0.8)).

  One suggestion I have is to try using custom variables/properties; that way you won't have to write out (or copy and paste) the same values every time. You can read about custom variables on MDN and/or check out my CodePen for this rating component and see how custom variables can be written.

  Hope you enjoy your time here, and keep going! 😊

  Marked as helpful

  1

  ---

  

  rushinstuffin•380

  @kyle-barry-appsPosted about 2 years ago

  @elaineleung Thanks so much! That's great advice :)

  1
• 

  Eray•1,410

  @ErayBarslanPosted about 2 years ago

  Hey, design is almost pixel perfect and functionalities works us supposed to, great work as your first challenge! Yeah, sometimes provided colors doesn't exactly match with design. At those times I suggest using an image color picker site. Most of them works just by dragging the image.

  Also for semantic html, elements should be wrapped with landmarks. To achieve this without breaking the CSS you can change #main-container to <main id="main-container" class="container">...</main> Happy coding :)

  Marked as helpful

  1