Ausblendbare Banner

Teil des Abschnitts JavaScript in Aktion der HTML-Journey von Coddy. Lektion 9 von 27.

Ein schließbares Banner ist eine Benachrichtigungs- oder Nachrichtenleiste, die oben (oder unten) auf der Seite erscheint und vom Benutzer geschlossen werden kann. Sie werden häufig verwendet, um wichtige Informationen wie Cookie-Richtlinien, Ankündigungen oder Warnungen anzuzeigen. Das entscheidende Merkmal ist die Schließen-Schaltfläche (×), mit der der Benutzer das Banner ausblenden kann, ohne die Seite zu aktualisieren.

Fügen wir zunächst die HTML-Struktur hinzu:

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

Als Nächstes fügen wir etwas grundlegendes CSS hinzu, um unser Banner zu gestalten:

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

Füge schließlich JavaScript hinzu, damit das Banner geschlossen werden kann:

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

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

Wenn auf die Schaltfläche zum Schließen geklickt wird, verschwindet das Banner.

Aufgabe

Einfach

Wir möchten, dass das Banner verschwindet, wenn der Benutzer auf die Schaltfläche zum Schließen klickt.

Füge einen Event-Listener hinzu, sodass beim Klicken auf die Schaltfläche zum Schließen eine Funktion ausgeführt wird.
Setze innerhalb dieser Funktion die display-Eigenschaft des Banner-Elements auf none, damit es ausgeblendet wird.

Probier es selbst

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

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