Всплывающее сообщение

Часть раздела JavaScript в действии путешествия по HTML на Coddy. Урок 8 из 27.

Сообщение toast — это небольшое уведомление, которое ненадолго появляется на экране, чтобы предоставить пользователю обратную связь. Обычно оно исчезает через несколько seconds.

Создайте базовую структуру HTML:

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

Добавь немного CSS, чтобы стилизовать toast. Мы используем два класса: .hidden, чтобы он оставался невидимым, и .show, чтобы он появился.

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

Теперь добавь JavaScript, чтобы показывать и скрывать всплывающее уведомление:

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);
});

Этот код делает toast видимым при нажатии кнопки и автоматически скрывает его через 3 секунды.

Задание

Легко

Твоя цель — сделать toast красивым и готовым к появлению/исчезновению.

Размести сообщение toast в center at the bottom страницы, используя position: fixed с bottom и left.
Задай ему background color и измени text color, чтобы его было легко читать.
Добавь немного padding, чтобы сообщение не выглядело тесным.
Сделай углы плавными.
Установи для него opacity to 0, чтобы по умолчанию он был скрыт (до того, как JavaScript покажет его).

Попробуйте сами

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

  <!-- Тост -->
  <div id="toast" class="toast hidden">✅Your changes have been saved!</div>

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