Variabel
Termasuk bagian JavaScript dalam Aksi dalam perjalanan HTML di Coddy. Pelajaran 21 dari 27.
Dalam tantangan ini, kita akan membuat menu navigasi samping yang dapat dilipat. Tujuannya adalah menyelesaikan seluruh script dan menambahkan transisi CSS agar navigasi terbuka dan tertutup dengan mulus.
Tantangan
Mudah- Beri div menu ID
sideNav. - Buat tiga variabel di skripmu:
- Satu untuk menyimpan elemen navigasi samping (
sideNav) - Satu untuk menyimpan tombol buka (
openBtn) - Satu untuk menyimpan tombol tutup (
closeBtn)
Coba sendiri
<!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">×</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">☰ 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>
Pelajaran ini berisi kuis singkat. Mulai pelajarannya untuk menjawab kuis dan melacak progresmu.
Semua pelajaran di JavaScript dalam Aksi
Latihan sendiri: Playground Web