Skip to content
Submitted about 2 years ago

Bootstrap

Marco Pereira•50
@pereira1185
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

My difficulty was how to get the all values from buttons, but after doing a little search simple doing in JavaScript: querySelectorAll(), i obtained all values from different buttons. After that i figured out i had to do a little loop with forEach() method.

Community feedback

  • Lucas 👾•104,400
    @correlucasPosted about 2 years ago

    👾Hello @pereira1185, Congratulations on completing this challenge!

    Great code and great solution! I’ve few suggestions for you that you can consider adding to your code:

    1.Your component is perfect, but is not responsive yet, this is due the fixed width you've applied to the container.Look both width and max-width the main difference between these properties is that the first(width) is fixed and the second(max-width) is flexible, for example, a component with width: 320px will not grow or shrink because the size will be ever the same, but a container with max-width: 320px or min-width: 320px can grow or contract depending of the property you've set for the container. So if you want a responsive block element, never use width choose or min-width or max-width.

    2.Add the website favicon inserting the svg image inside the <head>. <link rel="icon" type="image/x-icon" href="./images/favicon-32x32.png">

    ✌️ I hope this helps you and happy coding!

    Marked as helpful
    0

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