Mensaje toast

Parte de la sección JavaScript in Action del Journey de HTML de Coddy — lección 8 de 27.

Un mensaje toast es una pequeña notificación que aparece brevemente en la pantalla para dar feedback al usuario. Por lo general, desaparece gradualmente después de unos segundos.

Crea una estructura HTML básica:

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

Añade algo de CSS para dar estilo al toast. Usamos dos clases: .hidden para mantenerlo invisible, y .show para que aparezca.

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

Ahora añade JavaScript para mostrar y ocultar el 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);
});

Este código hace que el toast sea visible cuando se hace clic en el botón, y lo oculta automáticamente después de 3 segundos.

Desafío

Fácil

Tu objetivo es hacer que el toast se vea bien y esté listo para aparecer/desaparecer.

Coloca el mensaje toast en el centro en la parte inferior de la página usando position: fixed con bottom y left.
Dale un background color y cambia el text color para que sea legible.
Añade algo de padding para que el mensaje no esté apretado.
Haz que las esquinas se vean suaves.
Establece su opacity to 0 para que esté oculto por defecto (antes de que el JavaScript lo muestre).

Pruébalo tú mismo

<!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>