<div class="feedback-container">
<h3>How was your experience?</h3>
<div class="emojis">
<button class="emoji-btn" onclick="rate(0)">😠</button>
<button class="emoji-btn" onclick="rate(1)">😕</button>
<button class="emoji-btn" onclick="rate(2)">😐</button>
<button class="emoji-btn" onclick="rate(3)">😊</button>
<button class="emoji-btn" onclick="rate(4)">😍</button>
</div>
<p id="msg">Click an emoji to rate</p>
</div>
.feedback-container {
font-family: system-ui, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
background: #fff;
padding: 30px;
border-radius: 20px;
text-align: center;
box-shadow: 0 4px 20px rgba(0,0,0,0.05);
max-width: 350px;
margin: 0 auto;
}
h3 {
color: #1f2937;
margin-bottom: 20px;
}
.emojis {
display: flex;
justify-content: center;
gap: 10px;
margin-bottom: 15px;
}
.emoji-btn {
background: none;
border: none;
font-size: 2rem;
cursor: pointer;
transition: transform 0.2s, filter 0.2s;
filter: grayscale(100%);
opacity: 0.5;
}
.emoji-btn:hover, .emoji-btn.active {
transform: scale(1.3);
filter: grayscale(0%);
opacity: 1;
}
#msg {
color: #6b7280;
font-weight: 500;
height: 20px;
}
const btns = document.querySelectorAll(".emoji-btn");
const msg = document.getElementById("msg");
const texts = ["Terrible", "Bad", "Okay", "Good", "Amazing!"];
function rate(index) {
btns.forEach(b => b.classList.remove("active"));
btns[index].classList.add("active");
msg.innerText = texts[index];
msg.style.color = index < 2 ? "#ef4444" : index < 3 ? "#f59e0b" : "#10b981";
}
