WEBLEB
Home
AI Editor
Login
Pro
English
English
Français
Español
Emoji Rating
2,163
Andev.web
Open In Editor
Publish Your Code
3
Recommended
18 May 2024
Emoji Toggle
18 August 2024
Emoji Rating
9 September 2024
Emoji Toggle
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] }) }
