Hello wizards, I hope you are doing great. Today in this blog you’ll learn how to create the "Customer Feedback" project using HTML, CSS & JavaScript.
Preview
In the above video, you’ve seen the preview of the "Customer Feedback" project and I hope now you are able to create this type of project. If not, I have provided all the HTML CSS and JavaScript code below.
Customer Feedback [Source Code]
To get the following HTML, CSS & JS code for the Customer Feedback project. You need to create three files one is a HTML file, second one is a CSS file and the another one is JS file. After creating these three files then you can copy-paste the given codes on your document.
Remember, you’ve to create a file with .html extension for HTML code, .css extension for CSS code and .js for JavaScript code.
You can also download all source code files from the given download button.
<!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>Customer Feedback</title> <link rel="stylesheet" href="style.css"> <!-- Font Awesome cdn link --> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css" integrity="sha512-iecdLmaskl7CVkqkXNQ/ZH/XLlvWZOJyj7Yy7tcenmpD1ypASozpmT/E0iPtmFIB46ZmdtAc9eNBvH0H/ZpiBw==" crossorigin="anonymous" referrerpolicy="no-referrer" /> </head> <body> <div class="container"> <h1>Customer Feedback</h1> <div class="circle"> <div class="emojis"> <img src="images/very_poor.webp" alt="very_poor"> <img src="images/poor.webp" alt="poor"> <img src="images/average.webp" alt="average"> <img src="images/good.webp" alt="good"> <img src="images/excellent.webp" alt="excellent"> </div> </div> <div class="rating-names"> <div class="names"> <h3>Very poor</h3> <h3>Poor</h3> <h3>Average</h3> <h3>Good</h3> <h3>Excellent</h3> </div> </div> <div class="stars"> <i class="fa-solid fa-star"></i> <i class="fa-solid fa-star"></i> <i class="fa-solid fa-star"></i> <i class="fa-solid fa-star"></i> <i class="fa-solid fa-star"></i> </div> </div> <script src="index.js"></script> </body> </html>
@import url("https://fonts.googleapis.com/css2?family=Poppins:wght@100;200;300;400;500;600;700;800;900&display=swap"); * { margin: 0; padding: 0; box-sizing: border-box; font-family: "Poppins", sans-serif; } body { background: black; display: flex; align-items: center; justify-content: center; height: 100vh; } .container, .circle, .rating-names, .stars { display: flex; align-items: center; justify-content: center; } .container { background-color: white; width: 550px; height: 400px; padding: 20px; flex-direction: column; gap: 20px; border-radius: 10px; } .container h1 { margin-top: -20px; text-transform: uppercase; word-spacing: 5px; font-size: 40px; } .circle { width: 100px; height: 100px; overflow: hidden; border-radius: 50%; } .circle .emojis { display: flex; gap: 20px; transform: translateX(180px); transition: all 0.3s ease-in-out; } .circle .emojis img { width: 70px; } .rating-names { text-align: center; width: 150px; height: 40px; background-color: black; color: white; line-height: 40px; border-radius: 20px; overflow: hidden; } .rating-names .names { transform: translateY(80px); transition: all 0.3s ease-in-out; } .stars { gap: 30px; margin-top: 20px; } .stars i { font-size: 50px; color: black; cursor: pointer; }
const emojisEL = document.querySelector(".emojis"); const starsEl = document.querySelectorAll(".fa-solid") const ratingNamesEl = document.querySelector(".names") starsEl[0].addEventListener("click",()=>{ starsEl[0].style.color = "gold"; starsEl[1].style.color = "black"; starsEl[2].style.color = "black"; starsEl[3].style.color = "black"; starsEl[4].style.color = "black"; emojisEL.style.transform = "translateX(180px)"; ratingNamesEl.style.transform = "translateY(80px)" }) starsEl[1].addEventListener("click",()=>{ starsEl[0].style.color = "gold"; starsEl[1].style.color = "gold"; starsEl[2].style.color = "black"; starsEl[3].style.color = "black"; starsEl[4].style.color = "black"; emojisEL.style.transform = "translateX(90px)"; ratingNamesEl.style.transform = "translateY(40px)" }) starsEl[2].addEventListener("click",()=>{ starsEl[0].style.color = "gold"; starsEl[1].style.color = "gold"; starsEl[2].style.color = "gold"; starsEl[3].style.color = "black"; starsEl[4].style.color = "black"; emojisEL.style.transform = "translateX(0px)"; ratingNamesEl.style.transform = "translateY(0px)" }) starsEl[3].addEventListener("click",()=>{ starsEl[0].style.color = "gold"; starsEl[1].style.color = "gold"; starsEl[2].style.color = "gold"; starsEl[3].style.color = "gold"; starsEl[4].style.color = "black"; emojisEL.style.transform = "translateX(-90px)"; ratingNamesEl.style.transform = "translateY(-40px)" }) starsEl[4].addEventListener("click",()=>{ starsEl[0].style.color = "gold"; starsEl[1].style.color = "gold"; starsEl[2].style.color = "gold"; starsEl[3].style.color = "gold"; starsEl[4].style.color = "gold"; emojisEL.style.transform = "translateX(-180px)"; ratingNamesEl.style.transform = "translateY(-80px)" })