Закрываемые баннеры

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

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

Сначала добавим структуру 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, чтобы баннер можно было закрыть:

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>

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

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