באנרים שניתן לסגור

חלק מהיחידה JavaScript בפעולה במסלול ה-HTML של Coddy. שיעור 9 מתוך 27.

באנר שניתן לסגור הוא סרגל הודעה או התראה שמופיע בחלק העליון (או התחתון) של הדף והמשתמש יכול לסגור אותו. לעיתים קרובות משתמשים בו כדי להציג מידע חשוב, כמו מדיניות קובצי Cookie, הודעות או אזהרות. המאפיין המרכזי הוא כפתור הסגירה (×), שמאפשר למשתמש להסתיר את הבאנר בלי לרענן את הדף.

ראשית, נוסיף את מבנה ה-HTML:

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

לאחר מכן, נוסיף קצת CSS בסיסי לעיצוב הבאנר שלנו:

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

לבסוף, הוסף JavaScript כדי לאפשר לסגור את הבאנר:

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

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

כאשר לוחצים על כפתור הסגירה, הבאנר ייעלם.

אתגר

קל

אנחנו רוצים שהבאנר ייעלם כאשר המשתמש לוחץ על כפתור הסגירה.

הוסיפו מאזין אירועים כך שפונקציה תפעל כאשר לוחצים על כפתור הסגירה.
בתוך הפונקציה הזו, הגדירו את המאפיין display של רכיב הבאנר ל-none כדי להסתיר אותו.

נסו בעצמכם

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

  <!-- באנר -->
  <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>

  <!-- תוכן הדף -->
  <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>