Que ce soit pour prévenir rapidement vos utilisateurs qu'une fonctionnalité de votre site n'est pas encore disponible ou pour les prévenir qu'une action a été réalisée avec succès, les notifications sont le moyen le plus simple et moderne à mettre en place. Découvrons dans cet article comment faire !
Commençons avec le HTML.
<button>
Créer un compte
</button>
<div id="notification">
🎉 Compte créé avec succès 🎉
</div>
Lorsque nous cliquerons sur le bouton, la notification apparaîtra comme par magie !
Stylisons le bouton.
button {
font-size: 1.2rem;
color: #fff;
background: #ff4754;
padding: 1.2rem 2.4rem;
border-radius: 0.2rem;
transition: all 0.2s;
}
button:hover {
cursor: pointer;
opacity: 0.8;
}
Occupons-nous de la notification.
#notification {
position: fixed;
bottom: -8rem;
color: #ff4754;
background: #000;
padding: 1.2rem 2.4rem;
border-radius: 0.2rem;
box-shadow: 3px 6px 12px rgba(0, 0, 0, 0.4);
transition: all 0.4s;
}
Créons la classe show
.
#notification.show {
bottom: 2rem;
}
Le secret réside dans cette classe. Dans l’étape précédente nous avons précisé que notre notification devait être caché grâce à la propriété bottom
.
Nous ajouterons dynamiquement cette classe sur notre notification grâce à JavaScript pour faire apparaître notre message.
Sélectionnons nos éléments avec JavaScript.
const button = document.querySelector('button');
const toast = document.querySelector('#notification');
Nous sélectionnons juste nos deux éléments : notre bouton et notre message.
Il ne reste plus qu'à ajouter et retirer la classe show
de notre message.
button.addEventListener("click", () => {
toast.classList.add("show");
setTimeout(() => {
toast.classList.remove("show");
}, 2000);
});
Lorsque notre utilisateur clique sur le bouton, nous ajoutons la classe show
puis nous la retirons au bout de deux secondes pour faire disparaître le message.
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.