Envie de créer un bouton dont l'emoji change à chaque passage de la souris ? Comme sur Discord ? Alors cet article est fait pour vous !
Le code HTML.
<div id="emoji">😁</div>
Rien de très compliqué ici : nous déclarons une division avec un identifiant emoji
.
Astuce : Allez chercher vos emojis sur getemoji.com
Stylisons maintenant l'id emoji
.
#emoji {
font-size: 5rem;
filter: grayscale(1);
cursor: pointer;
transition: all 0.2s;
}
#emoji:hover {
transform: scale(1.3);
filter: grayscale(0);
}
grayscale()
permet de transformer une image en couleurs grisatres.
Passons au JavaScript en ajoutant des emojis.
const btn = document.querySelector("#emoji");
const emojis = [
"😆", "😅", "🤣", "😂",
"😀", "🤑", "🤨", "🙂",
"😊", "😗", "😛", "😏",
"🤥", "😴", "🥺", "😧"
];
Détectons le survol de l'emoji.
btn.addEventListener("mouseover", () => {
btn.innerText = emojis[Math.floor(Math.random() * emojis.length)];
});
Dès que nous survolons l’emoji, nous remplaçons le texte de l’identifiant emoji par un nouvel emoji.
Pour ce faire nous générons un nombre aléatoire que nous multiplions par le nombre d’emoji que nous possédons.
Que vous essayiez de scaler votre start-up, de créer votre premier site internet ou de vous reconvertir en tant que développeur, Believemy est votre nouvelle maison. Rejoignez-nous, évoluez et construisons ensemble l’avenir.