Banery możliwe do zamknięcia

Część sekcji JavaScript w praktyce ścieżki HTML w Coddy. Lekcja 9 z 27.

baner, który można zamknąć, to pasek powiadomienia lub wiadomości, który pojawia się u góry (lub u dołu) strony i który użytkownik może zamknąć. Często używa się go do wyświetlania ważnych informacji, takich jak zasady dotyczące plików cookie, ogłoszenia lub ostrzeżenia. Jego kluczową cechą jest przycisk zamykania (×), który pozwala użytkownikowi ukryć baner bez odświeżania strony.

Najpierw dodajmy strukturę HTML:

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

Następnie dodajmy podstawowy CSS, aby ostylować nasz baner:

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

Na koniec dodaj JavaScript, aby można było zamknąć baner:

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

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

Po kliknięciu przycisku zamykania baner zniknie.

Wyzwanie

Łatwy

Chcemy, aby baner znikał, gdy użytkownik kliknie przycisk zamknięcia.

Dodaj detektor zdarzeń, aby po kliknięciu przycisku zamknięcia uruchamiała się funkcja.
Wewnątrz tej funkcji ustaw właściwość display elementu banera na none, aby go ukryć.

Spróbuj swoich sił

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

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

  <!-- Treść strony -->
  <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>