Landing page yang baik menjawab keraguan pengunjung sebelum keraguan itu menolaknya mendaftar. Bagian penutup proyek ini menambahkan dua interaksi ringan: section FAQ yang dibangun murni dengan elemen details tanpa JavaScript, dan dialog terima kasih yang muncul setelah form pendaftaran dikirim. Keduanya memakai materi dari section Interactive Elements dan HTML dan JavaScript, sekaligus menutup seluruh Course HTML dengan satu produk yang lengkap strukturnya, tampilannya, dan perilakunya.

Menjawab Keraguan dengan FAQ #

Elemen details membungkus summary sebagai pertanyaan dan isi jawabannya; browser menyediakan buka-tutup, panah, dan aksesibilitas keyboard tanpa satu baris skrip pun. File landing-interaksi.html pada folder bagian ini adalah landing-styling.html yang ditambah tag script di head, section FAQ setelah testimoni, dan satu elemen dialog di akhir body:

html Cuplikan landing-interaksi.html 
  <script src="interaksi.js" defer></script>
  <!-- baris 52-62: section testimoni -->
  <section id="faq">
    <h2>Pertanyaan yang Sering Diajukan</h2>
    <details>
      <summary>Apakah kelas ini benar-benar gratis?</summary>
      <p>Ya. Kelas dibiayai iuran sukarela anggota Komunitas Belajar Web.</p>
    </details>
    <!-- dua details lain menyusul -->
  </section>
  <dialog id="dialog-sukses">
    <h2>Terima Kasih!</h2>
    <p>Pendaftaran dengan alamat <strong id="surel-terdaftar"></strong> telah kami terima. Buka kotak masuk surel untuk pesan konfirmasinya.</p>
    <button id="tombol-tutup" type="button">Tutup</button>
  </dialog>

Tiga pertanyaan FAQ disusun mengikuti keraguan yang wajar: keaslian kata “gratis”, kebutuhan perangkat, dan prasyarat pengalaman. Urutan ini bisa disesuaikan dengan kebutuhan produk; yang penting, setiap jawaban singkat dan jujur. Dialog terima kasih sengaja berada di akhir body, terpisah dari alur konten, karena kartunya hanya tampil saat dibuka oleh skrip.

Skrip Dialog Terima Kasih #

Interaksi form digerakkan oleh file interaksi.js yang berdampingan dengan halamannya:

javascript interaksi.js 
// interaksi.js — FAQ dan dialog terima kasih untuk proyek Landing Page.
// Dipakai bersama landing-interaksi.html pada folder part-4-interaksi-sederhana/.

const formulir = document.querySelector("#form-daftar");
const dialogSukses = document.querySelector("#dialog-sukses");
const surelTerdaftar = document.querySelector("#surel-terdaftar");
const tombolTutup = document.querySelector("#tombol-tutup");

formulir.addEventListener("submit", function (event) {
  event.preventDefault();
  surelTerdaftar.textContent = document.querySelector("#email").value;
  dialogSukses.showModal();
  formulir.reset();
});

tombolTutup.addEventListener("click", function () {
  dialogSukses.close();
});

Output yang Dihasilkan:

text 
Saat halaman baru dibuka:
  - Section FAQ tampil dengan tiga pertanyaan tertutup; klik summary membuka jawabannya
Saat tombol "Daftar Sekarang" ditekan dengan alamat email yang sah:
  - Halaman tidak berpindah ke server
  - Kartu "Terima Kasih!" muncul di tengah layar dengan alamat surel yang diketik
  - Kolom form kembali kosong
Saat tombol "Tutup" atau tombol Esc ditekan:
  - Kartu tertutup dan halaman kembali normal

Mari kita bedah skrip tersebut:

  1. Baris 4-7: querySelector mengambil referensi form, dialog, elemen penampung alamat surel, dan tombol tutup.
  2. Baris 9: listener dipasang pada event submit form. Event ini hanya menyala setelah pemeriksaan bawaan browser lolos, sehingga atribut required dan type="email" dari Bagian 2 tetap bekerja: pengunjung tidak bisa mengirim kolom kosong maupun surel salah format.
  3. Baris 10: event.preventDefault() menghentikan perilaku bawaan pengiriman data ke server — penting di sini karena action menunjuk alamat fiktif; tanpa baris ini browser berpindah halaman ke alamat yang tak ada.
  4. Baris 11-14: alamat surel pengunjung disalin ke dalam dialog, showModal() menampilkan kartunya di tengah layar dengan lapisan gelap, lalu reset() membersihkan form untuk pengunjung berikutnya. Listener terakhir menutup dialog lewat tombol Tutup; tombol Esc juga menutup karena memang perilaku bawaan showModal().

Perlu diakui batasannya: tanpa server sungguhan, tidak ada pendaftaran yang benar-benar tersimpan — skrip ini menahan pengiriman demi latihan pola pendaftaran klien. Pada produk nyata, action menunjuk server yang sah dan preventDefault() baru dipakai bila halaman menangani umpan baliknya sendiri.

Pemeriksaan Hasil Tahap Ini #

  1. Buka landing-interaksi.html di browser, lalu buka dan tutup ketiga FAQ; periksa juga akses keyboard dengan menekan Tab lalu Enter pada salah satu summary.
  2. Isi form dengan alamat email sah, tekan submit, dan amati dialog terima kasih beserta alamat surel yang tampil.
  3. Tutup dialog lewat tombol “Tutup” dan lewat tombol Esc; keduanya harus berhasil.
  4. Jalankan tests/cek-struktur.html, lalu lengkapi butir yang tersisa hingga 10 dari 10.

Sampai di sini proyek Landing Page tuntas — sekaligus seluruh Course HTML. Kita telah melintasi jalan penuh: struktur dokumen, konten semantik, navigasi, form, tampilan, hingga interaksi, semuanya melalui contoh yang valid menurut Nu Html Checker. Untuk melangkah lebih jauh, section Sumber Belajar menunggu dengan rujukan dokumentasi resmi, spesifikasi HTML, dan panduan accessibility yang dipakai pengembang profesional sehari-hari.

Referensi resmi untuk pendalaman:

Berkas Sumber

Berkas pendukung halaman ini dapat diunduh dan dijalankan langsung sesuai penjelasan di atas.

interaksi.js

Unduh berkas
javascript 
// interaksi.js — FAQ dan dialog terima kasih untuk proyek Landing Page.
// Dipakai bersama landing-interaksi.html pada folder part-4-interaksi-sederhana/.

const formulir = document.querySelector("#form-daftar");
const dialogSukses = document.querySelector("#dialog-sukses");
const surelTerdaftar = document.querySelector("#surel-terdaftar");
const tombolTutup = document.querySelector("#tombol-tutup");

formulir.addEventListener("submit", function (event) {
  event.preventDefault();
  surelTerdaftar.textContent = document.querySelector("#email").value;
  dialogSukses.showModal();
  formulir.reset();
});

tombolTutup.addEventListener("click", function () {
  dialogSukses.close();
});

landing-interaksi.html

Unduh berkas
html 
<!doctype html>
<html lang="id">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <meta name="description" content="Kelas Web Dasar: kelas daring gratis empat pekan dari Komunitas Belajar Web. Daftarkan diri untuk gelombang berikutnya.">
  <title>Kelas Web Dasar — Komunitas Belajar Web</title>
  <link rel="stylesheet" href="../styles/style.css">
  <script src="interaksi.js" defer></script>
</head>
<body>
  <header>
    <p class="logo">Kelas Web Dasar</p>
    <nav aria-label="Navigasi utama">
      <a class="tombol" href="#daftar">Daftar</a>
    </nav>
  </header>
  <main>
    <section class="hero">
      <div>
        <h1>Belajar Membangun Halaman Web dari Nol</h1>
        <p>Kelas daring gratis selama empat pekan untuk memahami HTML dan CSS, dipandu mentor Komunitas Belajar Web. Setiap pekan berisi satu sesi langsung, satu latihan, dan satu diskusi bersama.</p>
        <a class="tombol" href="#daftar">Daftar Gelombang 7</a>
      </div>
      <img src="../assets/ilustrasi-hero.svg" alt="Ilustrasi jendela browser dengan halaman web yang sedang disusun" width="320" height="240">
    </section>
    <section id="daftar">
      <h2>Daftar Gelombang 7</h2>
      <p>Pendaftaran dibuka sampai 30 September 2025 untuk 40 kursi. Bila kuota terisi, pendaftaran dialihkan ke Gelombang 8 yang dimulai Januari 2026.</p>
      <form id="form-daftar" action="www.example.com/daftar" method="post">
        <label for="email">Alamat email</label>
        <input type="email" id="email" name="email" autocomplete="email" placeholder="[email protected]" required>
        <button type="submit">Daftar Sekarang</button>
        <p class="catatan">Kami mengirim satu surel konfirmasi dan satu pengingat sebelum kelas dimulai; tidak ada pesan lain.</p>
      </form>
    </section>
    <section id="fitur">
      <h2>Apa yang Dipelajari</h2>
      <div>
        <h3>Materi Terstruktur</h3>
        <p>Empat pekan berurutan: struktur dokumen, teks dan tautan, tabel dan form, lalu styling dasar.</p>
      </div>
      <div>
        <h3>Mentor Pendamping</h3>
        <p>Setiap peserta bergabung ke kelompok kecil berisi lima orang dengan satu mentor.</p>
      </div>
      <div>
        <h3>Proyek Akhir</h3>
        <p>Pekan terakhir menutup dengan satu halaman profil pribadi yang diulas mentor.</p>
      </div>
    </section>
    <section id="testimoni">
      <h2>Kata Peserta Sebelumnya</h2>
      <blockquote>
        <p>"Sesi langsungnya santai tetapi terarah; latihan tiap pekan membuat materi menempel."</p>
        <footer>— Dewi, peserta Gelombang 6</footer>
      </blockquote>
      <blockquote>
        <p>"Proyek akhir saya kini dipakai sebagai halaman profil di komunitas tempat saya belajar."</p>
        <footer>— Raka, peserta Gelombang 5</footer>
      </blockquote>
    </section>
    <section id="faq">
      <h2>Pertanyaan yang Sering Diajukan</h2>
      <details>
        <summary>Apakah kelas ini benar-benar gratis?</summary>
        <p>Ya. Kelas dibiayai iuran sukarela anggota Komunitas Belajar Web.</p>
      </details>
      <details>
        <summary>Perangkat apa yang diperlukan?</summary>
        <p>Cukup laptop dengan browser modern dan koneksi internet; tidak perlu memasang perangkat lunak tambahan.</p>
      </details>
      <details>
        <summary>Belum punya pengalaman coding, apakah bisa mengikuti?</summary>
        <p>Bisa. Pekan pertama dimulai dari struktur dokumen HTML pertama, tanpa prasyarat.</p>
      </details>
    </section>
  </main>
  <footer>
    <p><a class="tombol" href="#daftar">Daftar Gelombang 7</a></p>
    <p>&copy; 2025 Komunitas Belajar Web</p>
  </footer>
  <dialog id="dialog-sukses">
    <h2>Terima Kasih!</h2>
    <p>Pendaftaran dengan alamat <strong id="surel-terdaftar"></strong> telah kami terima. Buka kotak masuk surel untuk pesan konfirmasinya.</p>
    <button id="tombol-tutup" type="button">Tutup</button>
  </dialog>
</body>
</html>