WEBLEB
Home
Editor
Accedi
Pro
Italiano
English
Français
Español
Português
Deutsch
Italiano
हिंदी
1286
Andev.web
Apri nell'Editor
Pubblica il Tuo Codice
Hai bisogno di un sito web?
14 March 2025
Modulo di registrazione/accesso
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] }) }
