menu-btn

VISPAUI

 v1.0 Docs

Rating

VISPA-UI includes an expertly-crafted Rating component which can make your UI building experience effortless.

To use the Rating component copy the code below to use it in your project. Make sure to include the JavaScript code for the same.

star star star star star 
              
              
<div class="rating">
  <img 
    class="icon-xl rating__icon" 
    src="https://raw.githubusercontent.com/VishalPatil18/VISPA-UI/main/assets/star.svg"
  />
  <img 
    class="icon-xl rating__icon" 
    src="https://raw.githubusercontent.com/VishalPatil18/VISPA-UI/main/assets/star.svg"
  />
  <img 
    class="icon-xl rating__icon" 
    src="https://raw.githubusercontent.com/VishalPatil18/VISPA-UI/main/assets/star.svg"
  />
  <img 
    class="icon-xl rating__icon" 
    src="https://raw.githubusercontent.com/VishalPatil18/VISPA-UI/main/assets/star.svg"
  />
  <img 
    class="icon-xl rating__icon" 
    src="https://raw.githubusercontent.com/VishalPatil18/VISPA-UI/main/assets/star.svg"
  />
</div>

<!-- JavaScript -->
<script>
  const stars = [...document.getElementsByClassName("rating__icon")];

  function ratingHandler(stars) {
    const starOutline = "https://raw.githubusercontent.com/VishalPatil18/VISPA-UI/main/assets/star.svg";
    const starSolid = "https://raw.githubusercontent.com/VishalPatil18/VISPA-UI/main/assets/star-solid.svg";
    stars.map((star) => {
      star.onclick = () => {
        let i = stars.indexOf(star);
        if(star.attributes.src.nodeValue === starOutline) {
          for (i; i >= 0; --i){
            stars[i].attributes.src.nodeValue = starSolid;
            stars[i].classList.add("icon-warning");
          }
        } else {
          for (i; i < stars.length; ++i){
            stars[i].attributes.src.nodeValue = starOutline;
            stars[i].classList.remove("icon-warning");
          }
        }
      };
    });
  }
  ratingHandler(stars);
</script>