Pelajaran 8: Proyek: CV yang terisi sendiri

Waktunya semua bahan dipakai. HTML dan CSS sudah selesai (kamu bahkan sudah membuatnya di dua kelas sebelumnya). Yang kosong adalah otaknya: halaman ini belum bereaksi apa-apa.

Targetnya, CV yang terisi sendiri:

mengetik nama dan jabatan di form, kartu CV ikut berubah seketika,
mengetik keahlian lalu klik Tambah, label baru muncul di kartu,
jumlah keahlian ikut terhitung.

Semua bahannya sudah kamu pelajari: elemen dan event (6 dan 7), array dan perulangan (5), fungsi (4), kondisi (3).

Cara kerja

Di kotak di bawah, bagian HTML dan CSS-nya sudah jadi. Fokuslah ke tag script di paling bawah. Di sana ada Langkah 1 sampai 5, lengkap dengan petunjuk. Kerjakan satu per satu dan cek hasilnya setelah tiap langkah.

CV yang hidup

<!DOCTYPE html>
<html lang="id">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>CV yang hidup</title>
  <style>
    body {
      font-family: sans-serif;
      background: #f3f2ef;
      margin: 0;
      padding: 12px;
      color: #222;
    }
    .form, .kartu {
      max-width: 520px;
      margin: 0 auto 12px;
      background: white;
      border: 1px solid #ddd;
      border-radius: 10px;
      overflow: hidden;
    }
    .form {
      padding: 14px;
    }
    .form label {
      display: block;
      margin-top: 8px;
      font-weight: bold;
      font-size: 14px;
    }
    .form input {
      width: 100%;
      box-sizing: border-box;
      margin-top: 4px;
      padding: 8px;
      border: 1px solid #bbb;
      border-radius: 6px;
      font-size: 16px;
    }
    .baris {
      display: flex;
      gap: 8px;
    }
    .baris input {
      flex: 1;
    }
    button {
      margin-top: 4px;
      padding: 8px 14px;
      background: #0a66c2;
      color: white;
      border: none;
      border-radius: 6px;
      font-size: 16px;
      cursor: pointer;
    }
    .sampul {
      height: 70px;
      background: linear-gradient(120deg, #0a66c2, #7fc4fd);
    }
    .isi {
      padding: 0 16px 16px;
    }
    .foto {
      width: 72px;
      height: 72px;
      margin-top: -36px;
      border: 4px solid white;
      border-radius: 50%;
      background: #f5b700;
    }
    h1 {
      margin: 8px 0 0;
      font-size: 22px;
    }
    .jabatan {
      margin: 2px 0 12px;
      color: #555;
    }
    .jumlah {
      margin: 0 0 6px;
      font-size: 13px;
      color: #777;
    }
    .keahlian {
      display: flex;
      flex-wrap: wrap;
      gap: 6px;
    }
    .label {
      padding: 4px 12px;
      border: 1px solid #0a66c2;
      border-radius: 999px;
      color: #0a66c2;
      font-size: 14px;
    }
  </style>
</head>
<body>
  <div class="form">
    <label for="input-nama">Nama</label>
    <input id="input-nama" type="text" placeholder="contoh: Rani Putri">

    <label for="input-jabatan">Jabatan</label>
    <input id="input-jabatan" type="text" placeholder="contoh: Siswa SMA, calon web developer">

    <label for="input-keahlian">Tambah keahlian</label>
    <div class="baris">
      <input id="input-keahlian" type="text" placeholder="contoh: Git">
      <button id="tombol-tambah" type="button">Tambah</button>
    </div>
  </div>

  <div class="kartu">
    <div class="sampul"></div>
    <div class="isi">
      <div class="foto"></div>
      <h1 id="kartu-nama">Nama Kamu</h1>
      <p id="kartu-jabatan" class="jabatan">Jabatan kamu</p>
      <p id="jumlah" class="jumlah"></p>
      <div id="daftar-keahlian" class="keahlian"></div>
    </div>
  </div>

  <script>
    // Data keahlian disimpan di array. Kamu akan menambah isinya nanti.
    const keahlian = ['HTML', 'CSS'];

    // Langkah 1: ambil semua elemen yang dibutuhkan dengan getElementById
    //   input-nama, input-jabatan, input-keahlian, tombol-tambah,
    //   kartu-nama, kartu-jabatan, jumlah, daftar-keahlian

    // Langkah 2: saat input-nama diketik (event "input"), ganti textContent kartu-nama
    //            lakukan hal yang sama untuk input-jabatan dan kartu-jabatan

    // Langkah 3: lengkapi fungsi ini. Ia menggambar ulang semua label dari array keahlian
    function gambarKeahlian() {
      // a. kosongkan daftar:           daftar.innerHTML = '';
      // b. for (const item of keahlian) { ... } lalu di dalamnya:
      //      const label = document.createElement('span');
      //      label.className = 'label';
      //      label.textContent = item;
      //      daftar.appendChild(label);
      // c. isi jumlah: `${keahlian.length} keahlian`
    }
    gambarKeahlian();

    // Langkah 4: saat tombol-tambah diklik, push isi input-keahlian ke array keahlian,
    //            kosongkan kotaknya (value = ''), lalu panggil gambarKeahlian()

    // Langkah 5: di dalam klik tadi, kalau isinya kosong (setelah trim()), hentikan dengan return
  </script>
</body>
</html>

Hasilnya:

Console

Apa yang terjadi di tiap langkah

Langkah	Kamu berlatih
1. Ambil elemen	`getElementById` untuk semua yang akan diubah (pelajaran 6)
2. Nama dan jabatan ikut berubah	event `input` dan `textContent` (pelajaran 7)
3. Fungsi `gambarKeahlian`	`for...of` untuk menampilkan array jadi label (pelajaran 5)
4. Tombol Tambah	`push` ke array lalu panggil ulang fungsinya (pelajaran 4 dan 5)
5. Cegah isian kosong	`if` dan `trim()` (pelajaran 3)

Tiga hal baru yang muncul di jawaban:

document.createElement('span') membuat elemen baru dari JavaScript, lalu daftar.appendChild(label) memasangnya di dalam daftar.
daftar.innerHTML = '' mengosongkan isi daftar sebelum digambar ulang, supaya label tidak dobel.
teks.trim() membuang spasi di awal dan akhir teks, jadi isian yang cuma spasi dianggap kosong.

Pola gambar-ulang

Perhatikan strateginya di langkah 3 dan 4, karena ini pola yang dipakai banyak aplikasi:

Data disimpan di array (keahlian).
Ada satu fungsi (gambarKeahlian) yang tugasnya menggambar ulang tampilan dari data itu.
Setiap kali data berubah, panggil fungsi itu lagi.

Kamu tidak menyentuh tampilan satu per satu. Kamu mengubah data, lalu menyuruh tampilan menyesuaikan diri.

Tantangan lanjutan

Kalau sudah jalan, kembangkan sendiri:

Tambahkan form untuk kota dan tampilkan di kartu.
Buat tombol Reset yang mengosongkan array keahlian lalu menggambar ulang.
Batasi maksimal 8 keahlian. Kalau sudah penuh, tampilkan pesan lewat if.

Yang barusan kamu pelajari

Halaman interaktif = elemen (DOM) + event + data di variabel atau array.
Pola yang sangat sering dipakai: simpan data, buat fungsi yang menggambar ulang tampilan dari data, panggil fungsi itu setiap data berubah.
createElement dan appendChild membuat dan memasang elemen baru dari JavaScript.
Kamu sudah menempuh jalur lengkap: HTML (isi), CSS (dandanan), JavaScript (hidup). Itu fondasi semua situs web.