Mensagem toast

Parte da seção JavaScript in Action do Journey de HTML da Coddy — lição 8 de 27.

Uma mensagem toast é uma pequena notificação que aparece brevemente na tela para fornecer feedback ao usuário. Geralmente, ela desaparece após alguns segundos.

Crie uma estrutura HTML básica:

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

Adicione um pouco de CSS para estilizar o toast. Usamos duas classes: .hidden para mantê-lo invisível, e .show para fazê-lo aparecer.

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

Agora adicione JavaScript para mostrar e ocultar o 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 torna o toast visível quando o botão é clicado e o esconde automaticamente após 3 segundos.

Desafio

Fácil

Seu objetivo é fazer com que o toast tenha uma boa aparência e esteja pronto para aparecer/desaparecer.

Posicione a mensagem do toast no centro na parte inferior da página usando position: fixed com bottom e left.
Dê a ele uma background color e altere a text color para torná-lo legível.
Adicione um pouco de padding para que a mensagem não fique apertada.
Deixe os cantos com uma aparência suave.
Defina sua opacity to 0 para que ele fique oculto por padrão (antes que o JavaScript o mostre).

Experimente você mesmo

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