Mensaje toast

Parte de la sección JavaScript en Acción del Journey de HTML de Coddy. Lección 8 de 27.

Un mensaje emergente es una pequeña notificación que aparece brevemente en la pantalla para proporcionar comentarios 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 aviso. Usamos dos clases: .hidden para mantenerlo invisible y .show para hacer 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 aviso emergente:

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 visible el aviso emergente 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 aviso emergente tenga un buen aspecto y esté listo para aparecer/desaparecer.

Coloca el mensaje del aviso emergente en el centro, en la parte inferior de la página usando position: fixed con bottom y left.
Asígnale un color de fondo y cambia el color del texto para que sea legible.
Añade algo de relleno para que el mensaje no quede apretado.
Haz que las esquinas se vean suaves.
Establece su opacidad en 0 para que esté oculto de forma predeterminada (antes de que 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>