Hey everyone welcome to today’s tutorial. In today’s tutorial, we will learn how to create a star rating widget. To build this widget we need HTML CSS and JavaScript. This is an intermediate-level JavaScript project.
If you are looking for more tutorials, you can check out this playlist here. This release consists of 100+ javascript tutorials and projects that will help you enhance your JavaScript skills. This playlist consists of tutorials on various difficulties ranging from easy to quite complex. Hence This playlist is suitable for all kinds of JavaScript learners.
Video Tutorial:
If you are interested to learn by watching a video tutorial instead of reading this blog post, you can check out the video down below. Also, subscribe to my YouTube channel where I post new tips tricks and tutorials every alternate day.
Project Folder Structure:
Before we start coding, let us create the project folder structure. We create a project folder called star rating. Inside this folder, we have three files. These files are index.html, style.css and script.js. The first file is the HTML document, the second one is the style sheet, and lastly, we have the script file.
HTML:
We start with an HTML file. First, copy the code below and paste it into your HTML document.
<!DOCTYPE html>
<html lang="en">
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Star Rating</title>
<!-- Font Awesome Icons -->
<link
rel="stylesheet"
href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.2.0/css/all.min.css"
/>
<!-- Google Fonts -->
<link
href="https://fonts.googleapis.com/css2?family=Poppins&display=swap"
rel="stylesheet"
/>
<!-- Stylesheet -->
<link rel="stylesheet" href="style.css" />
</head>
<body>
<div class="bg"></div>
<div class="wrapper">
<p id="message">Rate Your Experience</p>
<div class="container">
<div class="star-container inactive">
<i class="fa-regular fa-star"></i>
<span class="number">1</span>
</div>
<div class="star-container inactive">
<i class="fa-regular fa-star"></i>
<span class="number">2</span>
</div>
<div class="star-container inactive">
<i class="fa-regular fa-star"></i>
<span class="number">3</span>
</div>
<div class="star-container inactive">
<i class="fa-regular fa-star"></i>
<span class="number">4</span>
</div>
<div class="star-container inactive">
<i class="fa-regular fa-star"></i>
<span class="number">5</span>
</div>
</div>
<button id="submit" disabled>Submit</button>
<div id="submit-section" class="hide">
<p id="submit-message">Thanks for your feedback</p>
</div>
</div>
<!-- Script -->
<script src="script.js"></script>
</body>
</html>
CSS:
Please style this app using CSS. For this copy provided to your below and paste it into your stylesheet.
* {
padding: 0;
margin: 0;
box-sizing: border-box;
font-family: "Poppins", sans-serif;
}
.bg {
position: absolute;
height: 50vh;
width: 100vw;
background: linear-gradient(#fe3b5a, #fd7914);
}
.wrapper {
font-size: 1.2ee;
width: 25em;
position: absolute;
transform: translate(-50%, -50%);
left: 50%;
top: 50%;
background-color: #ffffff;
border-radius: 0.5em;
padding: 4em 2em;
box-shadow: 0 1.25em 2.5em rgba(18, 0, 76, 0.15);
}
.container {
width: 100%;
display: flex;
justify-content: space-around;
}
.fa-star {
font-size: 1.5em;
color: #ffd700;
}
.number {
display: block;
text-align: center;
}
#submit {
display: block;
position: relative;
background: linear-gradient(#fe3b5a, #fd7914);
border: none;
padding: 0.8em 2em;
color: #ffffff;
font-size: 1.2em;
border-radius: 2em;
margin: 1em auto 0 auto;
cursor: pointer;
}
#submit:disabled {
cursor: not-allowed;
}
#message {
text-align: center;
margin-bottom: 2em;
}
#submit-section {
position: absolute;
height: 100%;
width: 100%;
background-color: #ffffff;
top: 0;
left: 0;
place-items: center;
border-radius: 0.5em;
}
.hide {
display: none;
}
.show {
display: grid;
}
Javascript:
Finally, we implement the logic using JavaScript. Copy the code below and paste it into your script file.
let starContainer = document.querySelectorAll(".star-container");
const submitButton = document.querySelector("#submit");
const message = document.querySelector("#message");
const submitSection = document.querySelector("#submit-section");
//Events For touch and mouse
let events = {
mouse: {
over: "click",
},
touch: {
over: "touchstart",
},
};
let deviceType = "";
//Detect touch device
const isTouchDevice = () => {
try {
//We try to create TouchEvent (it would fail for desktops and throw error)
document.createEvent("TouchEvent");
deviceType = "touch";
return true;
} catch (e) {
deviceType = "mouse";
return false;
}
};
isTouchDevice();
starContainer.forEach((element, index) => {
element.addEventListener(events[deviceType].over, () => {
submitButton.disabled = false;
if (element.classList.contains("inactive")) {
//Fill Star
ratingUpdate(0, index, true);
} else {
//Regular stars (remove color)
ratingUpdate(index, starContainer.length - 1, false);
}
});
});
const ratingUpdate = (start, end, active) => {
for (let i = start; i <= end; i++) {
if (active) {
starContainer[i].classList.add("active");
starContainer[i].classList.remove("inactive");
starContainer[i].firstElementChild.className = "fa-star fa-solid";
} else {
starContainer[i].classList.remove("active");
starContainer[i].classList.add("inactive");
starContainer[i].firstElementChild.className = "fa-star fa-regular";
}
}
//Message
let activeElements = document.getElementsByClassName("active");
if (activeElements.length > 0) {
switch (activeElements.length) {
case 1:
message.innerText = "Terrible";
break;
case 2:
message.innerText = "Bad";
break;
case 3:
message.innerText = "Satisfied";
break;
case 4:
message.innerText = "Good";
break;
case 5:
message.innerText = "Excellent";
break;
}
} else {
message.innerText = "";
}
};
submitButton.addEventListener("click", () => {
submitSection.classList.remove("hide");
submitSection.classList.add("show");
submitButton.disabled = true;
});
window.onload = () => {
submitButton.disabled = true;
submitSection.classList.add("hide");
};
That’s it for this tutorial. If you face any difficulties while creating this project, you can download the source code by clicking on the download button below. Also, if you have any queries suggestions or feedback you can comment on them below. Happy coding!
CODES ARE NOT WORKING
really helpfull for me.. thanks you codingartistweb team.