משתנים

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

באתגר הזה נבנה תפריט ניווט צדי מתקפל. המטרה היא להשלים את כל הסקריפט וגם להוסיף מעבר CSS כך שתפריט הניווט ייפתח וייסגר בצורה חלקה.

אתגר

קל

תנו ל-div של התפריט את המזהה sideNav.
צרו שלושה משתנים בסקריפט שלכם:

אחד לאחסון רכיב הניווט הצדדי (sideNav)
אחד לאחסון כפתור הפתיחה (openBtn)
אחד לאחסון כפתור הסגירה (closeBtn)

נסו בעצמכם

<!DOCTYPE html>
<html>
<head>
  <title>Space Exploration</title>
  <link rel="stylesheet" href="style.css">
</head>
<body>
  <div class="sidenav">
    <button id="closeBtn" class="close-btn">&times;</button>
    <a href="#apollo">Apollo Missions</a>
    <a href="#iss">International Space Station</a>
    <a href="#mars">Mars Rovers</a>
    <a href="#jameswebb">James Webb Telescope</a>
  </div>

  <header>
    <button id="openBtn" class="open-btn">&#9776; Menu</button>
    <h1>Space Exploration</h1>
  </header>

  <main>
    <section id="apollo">
      <h2>Apollo Missions</h2>
      <p>
        The Apollo program, carried out by NASA in the 1960s and 1970s, 
        successfully landed humans on the Moon for the first time in 1969.
      </p>
    </section>

    <section id="iss">
      <h2>International Space Station</h2>
      <p>
        The ISS is a multinational research laboratory in low Earth orbit, 
        continuously inhabited since 2000 by astronauts and scientists.
      </p>
    </section>

    <section id="mars">
      <h2>Mars Rovers</h2>
      <p>
        Rovers like Spirit, Opportunity, Curiosity, and Perseverance 
        have been exploring the Martian surface, searching for signs of past life.
      </p>
    </section>

    <section id="jameswebb">
      <h2>James Webb Space Telescope</h2>
      <p>
        Launched in 2021, the James Webb Telescope is providing 
        breathtaking images of the universe and studying distant galaxies.
      </p>
    </section>
  </main>

  <script src="script.js"></script>
</body>
</html>