interactive rating component using JavaScript

Community feedback

• 

  Yefree Valdez•940

  @yefreescoding

  Posted almost 2 years ago

  After checking out your solution, I have to say it looks pretty good. Everything works as expected, and the design is almost identical to the original. Just a couple of tips to make your code more semantic, accessible, and better structured.

  • <div> tags are super useful, but you should only use them in very specific situations. There are semantic tags that would make your code more readable and accessible. A good practice would be changing:

  <div class="rating-section content-container">
  

  for a:

  <main class="rating-section content-container"></main>
  

  • Other case where you should change <div> tags in your code will be this one:

  <div class="buttons">
  <div id="1" class="btn">1</div>
  <div id="2" class="btn">2</div>
  <div id="3" class="btn">3</div>
  <div id="4" class="btn">4</div>
  <div id="5" class="btn">5</div>
  </div>
  <button type="submit">Submit</button>
  

  • Notice that this component, at first glance, isn't very clear about what it is meant to do. There's a <div> container and five more <div> elements inside of it, which does not make too much sense. A good way to make this component more semantic, accessible, and well-structured is like this:

  <form id="form" class="buttons_container">
  <div class="btn">
  <input type="radio" value="1" name="oneStar" class="radio_input" checked>1</input>
  <label for="oneStar">Huey</label>
  </div>
  <div class="btn">
  <input type="radio" value="2" name="twoStar" class="radio_input">1</input>
  <label for="oneStar">Huey</label>
  </div>
  <div class="btn">
  <input type="radio" value="3" name="threeStar" class="radio_input">1</input>
  <label for="oneStar">Huey</label>
  </div>
  <div class="btn">
  <input type="radio" value="4" name="fourStar" class="radio_input">1</input>
  <label for="oneStar">Huey</label>
  </div>
  <div class="btn">
  <input type="radio" value="5" name="fiveStar" class="radio_input">1</input>
  <label for="oneStar">Huey</label>
  </div>
  <button type="submit">Submit</button>
  </div>
  
  

  Of course, this will require you to do some tweaks to your JavaScript and CSS to make it work and look good. But these are just some examples of how you should approach this type of challenge.

  Overall, you're going in the right direction. Keep it up!

  00

  Marked as helpful