Interactive Rating System with Vanilla JS, HTML, CSS

Community feedback

• 

  solitary_coder•1,000

  @kabir-afkPosted about 1 year ago

  Hey , I saw your code and there were some issue that I'd like to address . . .

  Unnecessary JS . . .

  for (li of btns){
      li.addEventListener("click", function(){
          if (this.classList.contains('inactive')){
              this.classList.remove('inactive');
          } else if (this.classList.contains('active')){
              this.classList.remove('active');
              this.classList.add('inactive');
          } else {
              this.classList.add('active');
          }
      });
  }
  

  The reason why user was able to select multiple buttons was the unnecessary JS that was working alongside your CSS. You had already declared hover,active, target states for your buttons in CSS which were then being overridden by JS . . .by removing this your btns would work properly and you won't also need to declare the .active and .inactive classes as well !

  The HTML at work . . .

      <li class="rate" onclick="pickRating(value)" id="rating1" value="1">1</li>
      <li class="rate" onclick="pickRating(value)" id="rating2" value="2">2</li> 
      <li class="rate" onclick="pickRating(value)" id="rating3" value="3">3</li>
      <li class="rate" onclick="pickRating(value)" id="rating4" value="4">4</li>
      <li class="rate" onclick="pickRating(value)" id="rating5" value="5">5</li>
  

  You can't use value attribute with something that is not an input element . . . a better pick would have been to do it something like . . .

      <li><input type="button" class="rate" onclick="pickRating(value)" id="rating1" value="1"></input></li>
      <li><input type="button" class="rate" onclick="pickRating(value)" id="rating2" value="2"></input></li> 
      <li><input type="button" class="rate" onclick="pickRating(value)" id="rating3" value="3"></input></li>
      <li><input type="button" class="rate" onclick="pickRating(value)" id="rating4" value="4"></input></li>
      <li><input type="button" class="rate" onclick="pickRating(value)" id="rating5" value="5"></input></li>
  

  By using <input type="button"> or button , allows you to select one option at a time , you see this would have made your code a lot easier and would have also allowed you to skip the unnecessary JS I mentioned earlier...also in terms of accessibility this would have been a better approach since the user would have known that he/she is dealing with form buttons and not list items . . ., you can then later apply the required styling on buttons to make it more design accurate... hope I was able to help!! 🥂🥂

  Marked as helpful

  0