WEBLEB
Startseite
Editor
Anmelden
Pro
Deutsch
English
Français
Español
Português
Deutsch
Italiano
हिंदी
1574
Andev.web
Im Editor öffnen
Veröffentlichen Sie Ihren Code
10 May 2025
Ein Code von Mete
21 October 2024
Menschlicher Scan
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] }) }
