Évaluation par étoiles

Ouvrir dans l'éditeur Publiez votre code

Recommandé

13 January 2025

<!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>

Évaluation par étoiles

Recommandé

Un code par mo832860

Un code par yuhhxn

Un code par alejandrokundrah

HTML

CSS

JS

Recommandé

Un code par mo832860

Un code par yuhhxn

Un code par alejandrokundrah

HTMLCopy

CSSCopy

JSCopy

HTML

CSS

JS