Kapatılabilir banner'lar

Coddy'nin HTML Journey'sinin JavaScript Eylemde bölümünün bir parçası. Ders 9 / 27.

Kapatılabilir bir banner, sayfanın üstünde (veya altında) görünen ve kullanıcı tarafından kapatılabilen bir bildirim veya mesaj çubuğudur. Bunlar genellikle çerez politikaları, duyurular veya uyarılar gibi önemli bilgileri göstermek için kullanılır. Temel özellik, kullanıcının sayfayı yenilemeden banner'ı gizlemesini sağlayan kapatma (×) düğmesidir.

Öncelikle HTML yapısını ekleyelim:

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

Ardından, banner'ımızı biçimlendirmek için bazı temel CSS ekleyelim:

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

Son olarak, banner'ın kapatılabilir olmasını sağlamak için JavaScript ekleyin:

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

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

Kapatma düğmesine tıklandığında banner kaybolacaktır.

Görev

Kolay

Kullanıcı kapatma düğmesine tıkladığında banner’ın kaybolmasını istiyoruz.

Kapatma düğmesine tıklandığında bir işlevin çalışması için bir olay dinleyicisi ekleyin.
Bu işlevin içinde, gizlenmesi için banner öğesinin display özelliğini none olarak ayarlayın.

Kendin dene

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

  <!-- Sayfa İçeriği -->
  <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>