स्टार रेटिंग

1434 ledoc

संपादक में खोलें Video अपना कोड प्रकाशित करें

अनुशंसित

30 April 2024

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

21 January 2025

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

10 January 2026

एआई स्टार्टअप नेविगेशन बार का HTML CSS कोड

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 कोड

HTMLCopy

CSSCopy

JSCopy

HTML

CSS

JS