Shakir Practise

ROW

Heading

paragraph

Heading

paragraph

Heading

paragraph

hhh

Great!!

★★★★★

.star-rating {
direction: rtl; /* reverse order for easier hover logic */
font-size: 2rem;
unicode-bidi: bidi-override;
display: inline-block;
}

.star-rating span {
cursor: pointer;
color: #ccc; /* default grey */
transition: color 0.2s;
}

.star-rating span:hover,
.star-rating span:hover ~ span {
color: gold;
}

.star-rating .selected {
color: gold;
}fhbjdj saf jafa gng jdfkn

.star-rating {
  direction: rtl; /* reverse order for easier hover logic */
  font-size: 2rem;
  unicode-bidi: bidi-override;
  display: inline-block;
}

.star-rating span {
  cursor: pointer;
  color: #ccc; /* default grey */
  transition: color 0.2s;
}

.star-rating span:hover,
.star-rating span:hover ~ span {
  color: gold;
}

.star-rating .selected {
  color: gold;
}

5-Star Rating

Rate Us

★ ★ ★ ★ ★

Your rating: 0

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>5-Star Rating</title>
<style>
  body {
    font-family: Arial, sans-serif;
    padding: 50px;
    background: #f5f5f5;
    text-align: center;
  }

  .star-rating {
    direction: rtl; /* reverse order for easier hover logic */
    font-size: 2.5rem;
    unicode-bidi: bidi-override;
    display: inline-block;
  }

  .star-rating span {
    cursor: pointer;
    color: #ccc; /* default grey */
    transition: color 0.2s;
    display: inline-block;
  }

  .star-rating span:hover,
  .star-rating span:hover ~ span {
    color: gold;
  }

  .star-rating .selected {
    color: gold;
  }

  p {
    margin-top: 20px;
    font-size: 1.2rem;
  }
</style>
</head>
<body>

<h2>Rate Us</h2>
<div class="star-rating">
  <span data-value="5">&#9733;</span>
  <span data-value="4">&#9733;</span>
  <span data-value="3">&#9733;</span>
  <span data-value="2">&#9733;</span>
  <span data-value="1">&#9733;</span>
</div>
<p>Your rating: <span id="rating-value">0</span></p>

<script>
  const stars = document.querySelectorAll('.star-rating span');
  const ratingValue = document.getElementById('rating-value');

  stars.forEach(star => {
    star.addEventListener('click', () => {
      const value = star.getAttribute('data-value');
      ratingValue.textContent = value;

      // Remove previously selected stars
      stars.forEach(s => s.classList.remove('selected'));

      // Highlight selected stars
      star.classList.add('selected');
      let prev = star.nextElementSibling;
      while (prev) {
        prev.classList.add('selected');
        prev = prev.nextElementSibling;
      }
    });

    star.addEventListener('mouseover', () => {
      // Highlight on hover
      stars.forEach(s => s.style.color = '#ccc'); // reset all
      star.style.color = 'gold';
      let prev = star.nextElementSibling;
      while (prev) {
        prev.style.color = 'gold';
        prev = prev.nextElementSibling;
      }
    });

    star.addEventListener('mouseout', () => {
      // Reset hover effect if not selected
      stars.forEach(s => {
        if (!s.classList.contains('selected')) {
          s.style.color = '#ccc';
        } else {
          s.style.color = 'gold';
        }
      });
    });
  });
</script>

</body>
</html>