Latihan 1: Web APIs Lanjutan — JavaScript

Latihan 1 dari materi Web APIs Lanjutan di JavaScript — praktek dengan editor kode interaktif, test case otomatis, dan hint terpandu. Langsung jalan di browser.

Di HTML ada tiga <div class="kartu">. Dua ada di atas, satu lagi (#kartu-jauh) jauh di bawah layar. Tandai kartu yang kelihatan:

Buat pengamat dengan new IntersectionObserver((entries) => { ... }).
Di callback-nya, untuk tiap entry yang entry.isIntersecting-nya true, tambahkan class terlihat ke entry.target.
Daftarkan semua kartu: ambil dengan document.querySelectorAll('.kartu'), lalu panggil observer.observe(kartu) untuk tiap kartu.

Kartu yang masih jauh di bawah (#kartu-jauh) belum boleh dapat class terlihat.

Hint

Minta browser mengabari kartu mana yang masuk layar, lalu tandai hanya kartu itu.
new IntersectionObserver menerima callback dengan daftar entries. Tiap entry punya isIntersecting dan target. observer.observe mendaftarkan satu kartu, jadi ulangi untuk semua kartu.
const observer = new IntersectionObserver((entries) => { entries.forEach((entry) => { if (entry.isIntersecting) entry.target.classList.add('terlihat') }) }); document.querySelectorAll('.kartu').forEach((kartu) => observer.observe(kartu))

</> { } .css => #id fn()

Versi baru

HyperSheets

bagian dari BelajarWeb.dev

Membuka gerbang…

Latihan 1: Web APIs Lanjutan — JavaScript

Hint

Memperbarui Aplikasi