स्टार रेटिंग

अनुशंसित

18 May 2024

एनिमेटेड सितारे रेटिंग टेम्पलेट

18 August 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