<div class="rating-card">
<h2>Rate Your Experience</h2>
<p class="rating-text" id="rating-text">We value your feedback!</p>
<div class="stars-container" id="stars-container">
<svg class="star-icon" data-val="1" viewBox="0 0 24 24" width="40" height="40" fill="currentColor"><path d="M12 2l3.09 6.26L22 9.27l-5 4.87 1.18 6.88L12 17.77l-6.18 3.25L7 14.14 2 9.27l6.91-1.01L12 2z"></path></svg>
<svg class="star-icon" data-val="2" viewBox="0 0 24 24" width="40" height="40" fill="currentColor"><path d="M12 2l3.09 6.26L22 9.27l-5 4.87 1.18 6.88L12 17.77l-6.18 3.25L7 14.14 2 9.27l6.91-1.01L12 2z"></path></svg>
<svg class="star-icon" data-val="3" viewBox="0 0 24 24" width="40" height="40" fill="currentColor"><path d="M12 2l3.09 6.26L22 9.27l-5 4.87 1.18 6.88L12 17.77l-6.18 3.25L7 14.14 2 9.27l6.91-1.01L12 2z"></path></svg>
<svg class="star-icon" data-val="4" viewBox="0 0 24 24" width="40" height="40" fill="currentColor"><path d="M12 2l3.09 6.26L22 9.27l-5 4.87 1.18 6.88L12 17.77l-6.18 3.25L7 14.14 2 9.27l6.91-1.01L12 2z"></path></svg>
<svg class="star-icon" data-val="5" viewBox="0 0 24 24" width="40" height="40" fill="currentColor"><path d="M12 2l3.09 6.26L22 9.27l-5 4.87 1.18 6.88L12 17.77l-6.18 3.25L7 14.14 2 9.27l6.91-1.01L12 2z"></path></svg>
</div>
</div>
*, *::before, *::after {
box-sizing: border-box;
}
body {
font-family: system-ui, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
margin: 0;
background: #f8fafc;
display: flex;
justify-content: center;
align-items: center;
min-height: 100vh;
padding: 20px;
}
.rating-card {
background: #ffffff;
padding: 40px;
border-radius: 24px;
box-shadow: 0 20px 40px -10px rgba(0, 0, 0, 0.1);
text-align: center;
width: 100%;
max-width: 400px;
}
.rating-card h2 {
margin: 0 0 10px 0;
color: #0f172a;
}
.rating-text {
color: #64748b;
font-size: 1.1rem;
margin-bottom: 30px;
min-height: 24px;
font-weight: 500;
transition: color 0.3s;
}
.stars-container {
display: flex;
justify-content: center;
gap: 8px;
}
.star-icon {
color: #e2e8f0;
cursor: pointer;
transition: color 0.2s, transform 0.2s cubic-bezier(0.34, 1.56, 0.64, 1);
}
.star-icon:hover {
transform: scale(1.2);
}
.star-icon.active {
color: #f59e0b;
}
.star-icon.selected {
color: #f59e0b;
animation: pop 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
}
@keyframes pop {
0% { transform: scale(1); }
50% { transform: scale(1.3); }
100% { transform: scale(1); }
}
const stars = document.querySelectorAll(".star-icon");
const ratingText = document.getElementById("rating-text");
const container = document.getElementById("stars-container");
let currentRating = 0;
const messages = new Array();
messages.push("Terrible");
messages.push("Poor");
messages.push("Average");
messages.push("Good");
messages.push("Excellent!");
function fillStars(index) {
for (let i = 0; i < stars.length; i++) {
if (i <= index) {
stars.item(i).classList.add("active");
} else {
stars.item(i).classList.remove("active");
}
}
}
stars.forEach(function(star, index) {
star.addEventListener("mouseenter", function() {
fillStars(index);
ratingText.innerText = messages.at(index);
ratingText.style.color = "#f59e0b";
});
star.addEventListener("click", function() {
currentRating = index + 1;
stars.forEach(function(s) {
s.classList.remove("selected");
});
star.classList.add("selected");
});
});
container.addEventListener("mouseleave", function() {
if (currentRating === 0) {
fillStars(-1);
ratingText.innerText = "We value your feedback!";
ratingText.style.color = "#64748b";
} else {
fillStars(currentRating - 1);
ratingText.innerText = messages.at(currentRating - 1);
ratingText.style.color = "#f59e0b";
}
});
