Banner chiudibili

Fa parte della sezione JavaScript in azione del percorso HTML di Coddy. Lezione 9 di 27.

Un banner chiudibile è una barra di notifica o messaggio che appare nella parte superiore (o inferiore) della pagina e che l’utente può chiudere. Spesso viene usata per mostrare informazioni importanti, come le informative sui cookie, gli annunci o gli avvisi. La caratteristica principale è il pulsante di chiusura (×), che consente all’utente di nascondere il banner senza aggiornare la pagina.

Per prima cosa, aggiungiamo la struttura HTML:

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

Successivamente, aggiungiamo un po' di CSS di base per dare uno stile al nostro banner:

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

Infine, aggiungi JavaScript per rendere il banner chiudibile:

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

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

Quando si fa clic sul pulsante di chiusura, il banner scomparirà.

Sfida

Facile

Vogliamo che il banner scompaia quando l'utente fa clic sul pulsante di chiusura.

Aggiungi un listener di eventi in modo che, quando si fa clic sul pulsante di chiusura, venga eseguita una funzione.
All'interno di questa funzione, imposta la proprietà display dell'elemento banner su none in modo che venga nascosto.

Provalo tu

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

  <!-- Contenuto della pagina -->
  <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>