Banners descartables

Parte de la sección JavaScript in Action del Journey de HTML de Coddy — lección 9 de 27.

Un banner descartable es una barra de notificación o mensaje que aparece en la parte superior (o inferior) de la página y que el usuario puede cerrar. Estos se utilizan a menudo para mostrar información importante, como políticas de cookies, anuncios o advertencias. La característica clave es el botón de cierre (×) que permite al usuario ocultar el banner sin refrescar la página.

Primero, añadamos la estructura HTML:

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

A continuación, vamos a añadir algo de CSS básico para dar estilo a nuestro 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;
}

Finalmente, añade JavaScript para que el banner se pueda cerrar:

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

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

Cuando se haga clic en el botón de cerrar, el banner desaparecerá.

Desafío

Fácil

Queremos que el banner desaparezca cuando el usuario haga clic en el botón de cierre.

Agrega un escuchador de eventos (event listener) para que, cuando se haga clic en el botón de cierre, se ejecute una función.
Dentro de esta función, establece la propiedad display del elemento banner a none para que se oculte.

Pruébalo tú mismo

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