Create Star Rating using HTML And CSS Code
Here today, we are going to create a Five star rating card (5 Star Review HTML Code) with the help of HTML, CSS, and JavaScript. In which there will be 5-star rating html code with emojis, which will make the rating more interesting, emojis will change according to the rating. This rating system you can use in any project, video, or product review for user feedback. I hope that this project will be beneficial for you.
Let’s start making this CSS Star Animation card together with HTML, CSS, and JavaScript. This will be easy for an experienced guy, and some of it is typical for a fresher. All you need to understand is concentration. We have used the basic concept of the code, so you don’t have to face any doubt. If you do, then you can contact us through the contact details given below in the footer of the page.
Step 1: Html 5 Star Review HTML Code
In HTML , first we will create the structure of the CSS Star Animation. In this HTML page, there will be an empty div in which emojis will be inserted with the help of javascript. Then we will make a heading tag in which some statements will be written according to the selected star, and at the end we will add stars for the user to give a review to the owner.
In this Animated Stars CSS, the tags we are using are like the heading tag. Which is used to give the heading about any topic. The image tag, which is used to insert the image. The rest of the work, like designing, will be handled by CSS (Cascading StyleShet). Implementing logic for changing emojis according to changes in start rating will be done by JavaScript.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>five star rating using HTML , CSS and JS | LayakCoderr</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<div class="container">
<div class="info">
<div class="emoji"></div>
<div class="status"></div>
</div>
<div class="stars">
<div class="star" data-rate="5">
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-star">
<polygon points="12 2 15.09 8.26 22 9.27 17 14.14 18.18 21.02 12 17.77 5.82 21.02 7 14.14 2 9.27 8.91 8.26 12 2">
</polygon>
</svg>
</div>
<div class="star" data-rate="4">
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-star">
<polygon points="12 2 15.09 8.26 22 9.27 17 14.14 18.18 21.02 12 17.77 5.82 21.02 7 14.14 2 9.27 8.91 8.26 12 2">
</polygon>
</svg>
</div>
<div class="star" data-rate="3">
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-star">
<polygon points="12 2 15.09 8.26 22 9.27 17 14.14 18.18 21.02 12 17.77 5.82 21.02 7 14.14 2 9.27 8.91 8.26 12 2">
</polygon>
</svg>
</div>
<div class="star" data-rate="2">
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-star">
<polygon points="12 2 15.09 8.26 22 9.27 17 14.14 18.18 21.02 12 17.77 5.82 21.02 7 14.14 2 9.27 8.91 8.26 12 2">
</polygon>
</svg>
</div>
<div class="star" data-rate="1">
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-star">
<polygon points="12 2 15.09 8.26 22 9.27 17 14.14 18.18 21.02 12 17.77 5.82 21.02 7 14.14 2 9.27 8.91 8.26 12 2">
</polygon>
</svg>
</div>
</div>
</div>
<script src="script.js"></script>
</body>
</html>Step2: CSS 5 Star Review HTML Code
After making the structure of the HTML 5 Star Rating, we will now give styling to the html page using CSS (an external stylesheet attached to the html page). In CSS, we will first take the star rating to the center of the screen. Then we will give background,border,etc. to the parent div. Now we will adjust the size and position of other divs like emojis, headings, and stars. Now we will adjust the size and position of other divs like emojis, headings, and stars. We will also give the size of the CSS Star Animation and design the text written in the heading tag, like color and size.
@import url("https://fonts.googleapis.com/css2?family=Poppins:wght@300&display=swap");
* {
padding: 0;
margin: 0;
box-sizing: border-box;
}
html {
font-size: 10px;
}
body {
width: 100%;
min-height: 100vh;
display: grid;
place-content: center;
font-family: Poppins, sans-serif;
background: rgb(0, 0, 0);
}
.container {
display: grid;
place-content: center;
padding: 2rem;
text-align: center;
min-height: 200px;
border-radius: 12px;
position: relative;
overflow: hidden;
}
.container::after {
z-index: -1;
content: "";
position: absolute;
width: 100%;
height: 100%;
background: rgb(250, 247, 247)
no-repeat center center / cover;
filter: blur(7px) brightness(70%);
}
.info {
margin-bottom: 1rem;
}
.emoji {
font-size: 2rem;
height: 20px;
margin-bottom: 1rem;
}
.status {
font-size: 2rem;
color: honeydew;
}
.stars {
display: flex;
justify-content: center;
align-items: center;
flex-direction: row-reverse;
}
.star {
height: 40px;
width: 40px;
cursor: pointer;
}
.star svg {
fill: none;
width: 100%;
height: 100%;
stroke: none;
fill: gray;
}
.selected svg,
.selected ~ .star svg {
fill: #ffc107;
}
.star:hover svg,
.star:hover ~ .star svg {
fill: gold;
}
Step2: JavaScript Code 5 Star Review HTML Code
After designing the HTML 5 Star Rating javascript, we will now make it workable using javaScript. We will make another file for this and attach it to the HTML page through a link. In this, we will first target the emoji tag and heading tag to change the emojis with heading text when the user hovers over the star, then the inner html of the heading tag and emojis will change, and the background of the star will be filled with yellow color by “MouseHovering.”.
const stars = document.querySelectorAll(".star");
const emojiEl = document.querySelector(".emoji");
const statusEl = document.querySelector(".status");
const defaultRatingIndex = 0;
let currentRatingIndex = 0;
const ratings = [
{ emoji: "", name: "Give us rating" },
{ emoji: "😔", name: "Very Poor" },
{ emoji: "🙁", name: "Poor" },
{ emoji: "🙂", name: "Good" },
{ emoji: "🤩", name: "Very Good" },
{ emoji: "🥰", name: "Excellent" }
];
const checkSelectedStar = (star) => {
if (parseInt(star.getAttribute("data-rate")) === currentRatingIndex) {
return true;
} else {
return false;
}
};
const setRating = (index) => {
stars.forEach((star) => star.classList.remove("selected"));
if (index > 0 && index <= stars.length) {
document
.querySelector('[data-rate="' + index + '"]')
.classList.add("selected");
}
emojiEl.innerHTML = ratings[index].emoji;
statusEl.innerHTML = ratings[index].name;
};
const resetRating = () => {
currentRatingIndex = defaultRatingIndex;
setRating(defaultRatingIndex);
};
stars.forEach((star) => {
star.addEventListener("click", function () {
if (checkSelectedStar(star)) {
resetRating();
return;
}
const index = parseInt(star.getAttribute("data-rate"));
currentRatingIndex = index;
setRating(index);
});
star.addEventListener("mouseover", function () {
const index = parseInt(star.getAttribute("data-rate"));
setRating(index);
});
star.addEventListener("mouseout", function () {
setRating(currentRatingIndex);
});
});
document.addEventListener("DOMContentLoaded", function () {
setRating(defaultRatingIndex);
});
Conclusion of Animated Stars CSS
Finally, we made the Five Star rating card (HTML 5 Star Rating) with emojis using HTML, CSS, and JavaScript by following the easy steps one by one. If you want the source code, then click on the download button given below. You can make such a project by taking ideas from here to increase your practice. Which will enhance your knowledge. You can also add this star rating to your product card if you have your own website.
For more explanation, please click on the link given below to watch the video.
Now, after seeing the simple and amazing auto typing text animation in css , You also must see the auto-typing text animation in CSS.
Press the download button to download the source code of CSS Star Animation
