Message toast

Fait partie de la section JavaScript en action du Journey HTML de Coddy. Leçon 8 sur 27.

Un message toast est une petite notification qui apparaît brièvement à l’écran pour fournir un retour à l’utilisateur. Il disparaît généralement après quelques secondes.

Créez une structure HTML de base :

<div class="container">
    <button id="showToast">Show Toast</button>
    <div id="toast" class="hidden">This is a toast message!</div>
</div>

Ajoutez du CSS pour styliser la notification. Nous utilisons deux classes : .hidden pour la garder invisible et .show pour la faire apparaître.

.toast {
    position: fixed;
    bottom: 20px;
    left: 50%;
    background-color: #333;
    color: white;
    padding: 15px 25px;
}
.show {
    opacity: 1;
}
.hidden {
    display: none;
}

Ajoutez maintenant du JavaScript pour afficher et masquer la notification toast :

const showToastBtn = document.getElementById('showToast');
const toast = document.getElementById('toast');

showToastBtn.addEventListener('click', function() {
    toast.classList.remove('hidden');
    toast.classList.add('show');

    setTimeout(function() {
        toast.classList.remove('show');
        toast.classList.add('hidden');
    }, 3000);
});

Ce code rend la notification toast visible lorsque le bouton est cliqué, puis la masque automatiquement après 3 secondes.

Défi

Facile

Votre objectif est de faire en sorte que le toast ait une belle apparence et soit prêt à apparaître ou à disparaître.

Placez le message du toast au centre en bas de la page en utilisant position: fixed avec bottom et left.
Donnez-lui une couleur d’arrière-plan et modifiez la couleur du texte pour le rendre lisible.
Ajoutez un peu de padding afin que le message ne soit pas à l’étroit.
Adoucissez les angles.
Définissez son opacité à 0 afin qu’il soit masqué par défaut (avant que JavaScript ne l’affiche).

Essayez vous-même

<!DOCTYPE html>
<html>
<head>
  <title>Toast Notification Example</title>
  <link rel="stylesheet" href="style.css">
</head>
<body>
  <header>
    <h1>My Profile Settings</h1>
  </header>

  <main>
    <p>Update your profile and save changes. A toast message will confirm your action.</p>
    <button id="showToast">Save Changes</button>
  </main>

  <!-- Toast -->
  <div id="toast" class="toast hidden">✅Your changes have been saved!</div>

  <script src="script.js"></script>
</body>
</html>