star rating

1,524 ledoc

<!DOCTYPE html>
<html lang="fr">
<head>
<meta charset="UTF-8">
<title>5 star rating</title>
<style>
  .star {
    font-size: 24px;
    color: grey;
    cursor: pointer;
  }
  .checked {
    color: gold;
  }
  .vote-count {
    margin-left: 10px;
  }
</style>
</head>
<body>
<div id="post1">
  <div id="rating1" class="rating">
    <span class="star" data-value="1">★</span>
    <span class="star" data-value="2">★</span>
    <span class="star" data-value="3">★</span>
    <span class="star" data-value="4">★</span>
    <span class="star" data-value="5">★</span>
    <span class="vote-count" id="voteCount1">Votes: 0</span>
  </div>
</div>

function updateVoteCount() {
      voteCountElement.textContent = `Votes: ${voteCount}`;
    }

stars.forEach(star => {
      star.addEventListener('click', () => {
        const rating = star.getAttribute('data-value');
        currentRating = rating;
        voteCount++;
        localStorage.setItem(ratingKey, currentRating);
        localStorage.setItem(voteCountKey, voteCount);
        updateStars(currentRating);
        updateVoteCount();
        alert(`Vous avez évalué ceci avec ${rating} étoile(s).`);
      });
    });

updateStars(currentRating);
    updateVoteCount();
  });
</script>
</body>
</html>

CSS

star rating

Recommended