Баннеры с возможностью закрытия

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

Закрываемый banner — это панель с уведомлением или сообщением, которая появляется в верхней части (или в bottom) страницы и может быть закрыта пользователем. Такие панели часто используются для отображения важной информации, например политик использования cookie, объявлений или предупреждений. Ключевая особенность — кнопка закрытия (×), которая позволяет пользователю скрыть banner без обновления страницы.

Сначала добавим структуру HTML:

<div class="banner" id="banner">
  <p>This is an important announcement!</p>
  <button id="closeBanner">X</button>
</div>

Далее добавим немного базового CSS, чтобы оформить наш баннер:

.banner {
  background-color: #1e90ff;
  color: white;
  padding: 15px 20px;
  text-align: center;
  position: relative;

}

.banner button {
  position: absolute;
  right: 10px;
  top: 10px;
  border: none;

  cursor: pointer;
}

Наконец, добавьте JavaScript, чтобы сделать баннер Dismissible:

const banner = document.getElementById('banner');
const closeBtn = document.getElementById('closeBanner');

closeBtn.addEventListener('click', function() {
  banner.style.display = 'none';
});

При нажатии кнопки закрытия баннер исчезнет.

Задание

Легко

Мы хотим, чтобы баннер исчезал, когда пользователь нажимает кнопку закрытия.

Добавь обработчик событий, чтобы при нажатии кнопки закрытия выполнялась функция.
Внутри этой функции установи свойству display элемента баннера значение none, чтобы он был скрыт.

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

<!DOCTYPE html>
<html>
<head>
  <title>Dismissible Banner Example</title>
  <link rel="stylesheet" href="style.css">
</head>
<body>

  <!-- Баннер -->
  <div class="banner" id="banner">
    <p>Big News! Our new course is live. Enroll today and get 30% off!</p>
    <button id="closeBanner">&times;</button>
  </div>

  <!-- Содержимое страницы -->
  <header class="hero">
    <h1>Welcome to CodeLearn</h1>
    <p>Practical lessons to sharpen your web development skills 🚀</p>
  </header>

  <main class="content">
    <section>
      <h2>Learn by Doing</h2>
      <p>Each lesson comes with tasks and challenges so you can practice immediately.</p>
    </section>

    <section>
      <h2>Topics We Cover</h2>
      <ul>
        <li>HTML & CSS basics</li>
        <li>JavaScript essentials</li>
        <li>Frontend projects</li>
        <li>Interactive UI components</li>
      </ul>
    </section>
  </main>

  <footer>
    <p>&copy; 2025 CodeLearn. All rights reserved.</p>
  </footer>

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