Banner yang dapat ditutup

Termasuk bagian JavaScript dalam Aksi dalam perjalanan HTML di Coddy. Pelajaran 9 dari 27.

Banner yang dapat ditutup adalah bilah notifikasi atau pesan yang muncul di bagian atas (atau bawah) halaman dan dapat ditutup oleh pengguna. Banner ini sering digunakan untuk menampilkan informasi penting, seperti kebijakan cookie, pengumuman, atau peringatan. Fitur utamanya adalah tombol tutup (×) yang memungkinkan pengguna menyembunyikan banner tanpa memuat ulang halaman.

Pertama, mari tambahkan struktur HTML:

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

Selanjutnya, mari tambahkan CSS dasar untuk menata banner kita:

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

Terakhir, tambahkan JavaScript agar banner dapat ditutup:

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

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

Saat tombol tutup diklik, banner akan menghilang.

Tantangan

Mudah

Kita ingin banner menghilang saat pengguna mengeklik tombol tutup.

Tambahkan event listener agar saat tombol tutup diklik, sebuah fungsi dijalankan.
Di dalam fungsi ini, atur property display pada elemen banner menjadi none agar elemen tersebut tersembunyi.

Coba sendiri

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

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

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