स्टार रेटिंग

अनुशंसित

18 May 2024

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

HTML

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