So today we will start our second JavaScript project a interactive feedback design using HTML CSS & Js . I have already create a very dedicated tutorial on this don't miss this tutorial Make Interactive Feedback Design Using HTML CSS & JS . Lets start our second JavaScript mini project Also watch our first Analog Clock JavaScript project .
So lets understand the concepts of what is basically a Feedback design is.
Feedback is a way to accept the user feedback for any product or service from user end . if you want you can use this feedback design source code in your project just feel free and use this code freely .
If you want you can watch the live demo with this link.
if you are a beginner do follow my steps what i am doing to create this beautiful Analog Clock UI Design using html CSS and javascript.
So lets start our feedback mini project. I have divide this tutorial in step wising do follow all the steps and make your first feedback design ui using HTML CSS & JS .
Step 1: Basic HTML Code
First of all add the basic html code to create this feedback UI Design using html css and javascript .
<!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">
<link rel="stylesheet" href="style.css">
<script src="https://kit.fontawesome.com/db2813a42b.js" crossorigin="anonymous"></script>
<title>Feedback System</title>
</head>
<body>
<div class="container">
<div class="feedbackbox">
<div class="emoji">
<div id="emoji">
<img src="images/Pain.png" alt="">
<img src="images/Bored.png" alt="">
<img src="images/Hello.png" alt="">
<img src="images/Laugh.png" alt="">
<img src="images/4Star.png" alt="">
</div>
</div>
<div class="rating">
<i class="fas fa-star"></i>
<i class="fas fa-star"></i>
<i class="fas fa-star"></i>
<i class="fas fa-star"></i>
<i class="fas fa-star"></i>
</div>
</div>
</div>
</body>
</html>
Step 2: Basic CSS Code
*
{
margin: 0;
padding: 0;
box-sizing: border-box;
font-family: 'Courier New', Courier, monospace;
}
.container
{
width: 100%;
height: 100vh;
background: linear-gradient(180deg, rgba(255, 250, 123, 0.58) 0%, rgba(199, 46, 232, 0.04) 100%);
display: flex;
align-items: center;
justify-content: center;
}
.feedbackbox
{
background: #fff;
padding: 80px 100px;
border-radius: 10px;
display: flex;
flex-direction: column;
align-items: center;
}
.emoji {
width: 80px;
height: 80px;
border-radius: 50%;
margin-bottom: 30px;
overflow: hidden;
}
.emoji img {
width: 70px;
margin: 0px 15px;
}
#emoji {
display: flex;
align-items: center;
transform: translate(-100px);
transition: 0.6s;
}
.rating .fas {
font-size: 40px;
color: #e4e4e4;
cursor: pointer;
}
Step 3: JavaScript Code
<script>
var stars = document.getElementsByClassName("fas");
var emoji = document.getElementById("emoji");
stars[0].onclick = function(){
stars[0].style.color = "#ffd93b";
stars[1].style.color = "#e4e4e4";
stars[2].style.color = "#e4e4e4";
stars[3].style.color = "#e4e4e4";
stars[4].style.color = "#e4e4e4";
emoji.style.transform = "translateX(0)";
}
stars[1].onclick = function(){
stars[0].style.color = "#ffd93b";
stars[1].style.color = "#ffd93b";
stars[2].style.color = "#e4e4e4";
stars[3].style.color = "#e4e4e4";
stars[4].style.color = "#e4e4e4";
emoji.style.transform = "translateX(-100px)";
}
stars[2].onclick = function(){
stars[0].style.color = "#ffd93b";
stars[1].style.color = "#ffd93b";
stars[2].style.color = "#ffd93b";
stars[3].style.color = "#e4e4e4";
stars[4].style.color = "#e4e4e4";
emoji.style.transform = "translateX(-200px)";
}
stars[3].onclick = function(){
stars[0].style.color = "#ffd93b";
stars[1].style.color = "#ffd93b";
stars[2].style.color = "#ffd93b";
stars[3].style.color = "#ffd93b";
stars[4].style.color = "#e4e4e4";
emoji.style.transform = "translateX(-300px)";
}
stars[4].onclick = function(){
stars[0].style.color = "#ffd93b";
stars[1].style.color = "#ffd93b";
stars[2].style.color = "#ffd93b";
stars[3].style.color = "#ffd93b";
stars[4].style.color = "#ffd93b";
emoji.style.transform = "translateX(-400px)";
}
</script>
Here we use DOM manipulation methods to manipulate the element and update at the webpage. Every star is treated as a Array and with that array we combine our particular emoji . And change it using on click method with star rating . if you have any query regarding this tutorial just comment below i will help you out.
Hope you like this feedback design and you have learned how to make it from this article. You can watch the live demo of this design if you want and download the source code if necessary. You can also see the designs I have made many more.
If there is any difficulty, of course you can comment.
Most important don't forget to leave a comment for next mini project
You can visit my blog for more tutorials like this.
https://ziontutorial.com/
Top comments (0)