स्टार रेटिंग

अनुशंसित

21 January 2025

कोडपेन होम स्टार्स और वार्प स्पीड

29 July 2024

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

स्टार रेटिंग

अनुशंसित

कोडपेन होम स्टार्स और वार्प स्पीड

इमोजी रेटिंग

इमोजी रेटिंग

HTML

CSS

JS

अनुशंसित

कोडपेन होम स्टार्स और वार्प स्पीड

इमोजी रेटिंग

इमोजी रेटिंग

HTMLCopy

CSSCopy

JSCopy

HTML

CSS

JS