<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Feedback UI - Designed By || Sachin Dhakrey</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<div class="container" id="container">
<h1 class="heading">Feedback UI</h1>
<div class="ratings-container" id="ratings-container">
<div class="rating">
<img src="https://cdn-icons-png.flaticon.com/512/166/166527.png" />
<small>Unhappy</small>
</div>
<div class="rating">
<img src="https://cdn-icons-png.flaticon.com/512/1791/1791385.png" />
<small>Neutral</small>
</div>
<div class="rating">
<img src="https://cdn-icons-png.flaticon.com/512/166/166538.png" />
<small>Satisfied</small>
</div>
</div>
<button class="btn" id="btn">Send Review</button>
</div>
<script src="index.js"></script>
</body>
</html>
<style>
body {
margin: 0;
background-color: lightcyan;
color: darkgreen;
display: flex;j
min-height: 100vh;
justify-content: center;
align-items: center;
font-family: monospace;
}
.container {
background: rgba(255, 255, 255, 0.3);
box-shadow: 0 5px 10px rgba(0, 0, 0, 0.3);
border-radius: 10px;
padding: 20px;
width: 85%;
max-width: 400px;
text-align: center;
font-size: 20px;
}
.heading {
margin: 5px;
font-size: 30px;
}
.ratings-container {
display: flex;
padding: 20px 0;
}
.rating {
cursor: pointer;
padding: 10px;
margin: 10px 5px;
}
.rating:hover,
.rating.active
{
background: darkseagreen;
border-radius: 10px;
box-shadow: 0 0 10px rgba(0, 0, 0, 0.3);
color: aliceblue;
transition: all 300ms ease;
}
.btn {
background-color: darkcyan;
color: aliceblue;
border: 0;
margin: 10px;
border-radius: 4px;
padding: 12px 30px;
cursor: pointer;
}
.btn:hover {
box-shadow: 0 5px 10px rgba(0, 0, 0, 0.3);
transition: all 300ms ease;
}
.btn:active {
transform: scale(0.96);
}
.rating img {
width: 40px;
}
</style>
<script>
const ratingEls = document.querySelectorAll(".rating");
const btnEl = document.getElementById("btn");
const containerEl = document.getElementById("container");
let selectedRating = "";
ratingEls.forEach((ratingEl) => {
ratingEl.addEventListener("click", (event) => {
removeActive();
selectedRating =
event.target.innerText || event.target.parentNode.innerText;
event.target.classList.add("active");
event.target.parentNode.classList.add("active");
});
});
btnEl.addEventListener("click", () => {
if (selectedRating !== "") {
containerEl.innerHTML = `
<strong>Thank you!</strong>
<br>
<br>
<strong>Feedback: ${selectedRating}</strong>
<p>We'll use your feedback to improve our customer support.</p>
`;
}
});
function removeActive() {
ratingEls.forEach((ratingEl) => {
ratingEl.classList.remove("active");
});
}
</script>