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 !
1ère étape
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 !
2ème étape
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;
}
3ème étape
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;
}
4ème étape
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.
5ème étape
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.
6ème étape
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.
