WEBLEB
Home
Editor
Login
Pro
English
English
Français
Español
Português
Deutsch
Italiano
हिंदी
Emoji Rating
1834
Andev.web
Open In Editor
Publish Your Code
Recommended
18 May 2024
Emoji Toggle
17 May 2025
dancing emoji
7 August 2025
Mouse Tracking Googly Eyes SVG Emoji
HTML
Copy
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Andev Web</title> <link rel="stylesheet" href="styles.css"> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.1/css/all.min.css" integrity="sha512-DTOQO9RWCH3ppGqcWaEA1BIZOC6xxalwEsw9c2QQeAIftl+Vegovlnee1c9QX4TctnWMn13TZye+giMm8e2LwA==" crossorigin="anonymous" referrerpolicy="no-referrer" /> </head> <body> <div class="feedback"> <div class="emoji"> <i class="fa-solid fa-face fa-face-angry fa-3x"></i> <i class="fa-solid fa-face fa-face-frown fa-3x"></i> <i class="fa-solid fa-face fa-face-meh fa-3x"></i> <i class="fa-solid fa-face fa-face-smile fa-3x"></i> <i class="fa-solid fa-face fa-face-laugh fa-3x"></i> </div> <div class="rating"> <i class="fa-solid fa-star fa-2x"></i> <i class="fa-solid fa-star fa-2x"></i> <i class="fa-solid fa-star fa-2x"></i> <i class="fa-solid fa-star fa-2x"></i> <i class="fa-solid fa-star fa-2x"></i> </div> </div> <script src="app.js"></script> </body> </html>
CSS
Copy
*{ margin: 0; padding: 0; box-sizing: border-box; } body{ height: 100vh; display: flex; justify-content: center; align-items: center; background: #ffffff; } .feedback{ background: #fff; width: 400px; height: 200px; box-shadow: 4px 4px 0px 3px #3820a3; border-radius: 5px; position: relative; } .emoji{ width: 48px; height: 48px; border-radius: 50%; position: absolute; left: 50%; top: 20%; transform: translate(-50%); display: flex; overflow: hidden; } .emoji i{ transform: translateX(0); transition: .2s ; } .rating{ position: absolute; left: 50%; transform: translateX(-50%); bottom: 20%; cursor: pointer; } .rating i{ color: #030011; } .rating i.active{ color: #3820a3; }
JS
Copy
const startsEl= document.querySelectorAll(".fa-star") const emojisEl= document.querySelectorAll(".fa-face") const colors= ["red", "orange", "lightblue", "lightgreen", "green"] updateRating(0) startsEl.forEach((starEl, index) => { starEl.addEventListener("click", () => updateRating(index)) }) function updateRating(index) { startsEl.forEach((starEl, idx) => { if(idx < index + 1){ starEl.classList.add("active") }else{ starEl.classList.remove("active") } }) emojisEl.forEach(emoji => { emoji.style.transform= `translateX(-${index * 48}px)` emoji.style.color= colors[index] }) }
