Bagian 4: Peningkatan Interaksi

<!doctype html>
<html lang="id">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>Tips Menanam Cabai di Pot — Aneka Baca</title>
  <link rel="stylesheet" href="../styles/style.css">
  <script src="interaksi-artikel.js" defer></script>
</head>
<body>
  <nav aria-label="Navigasi artikel">
    <ul>
      <li><a href="../index.html">Beranda</a></li>
      <li><a href="artikel-hidroponik.html">Artikel sebelumnya</a></li>
      <li><a href="artikel-pupuk-organik.html">Artikel berikutnya</a></li>
    </ul>
  </nav>
  <article>
    <header>
      <h1>Tips Menanam Cabai di Pot</h1>
      <p class="lead">Cabai termasuk tanaman yang ramah bagi pemula asalkan dua keputusan awalnya tepat: pot yang dipakai dan jadwal penyiramannya. Artikel ini merangkum keduanya dalam panduan singkat.</p>
      <button id="tombol-bookmark" type="button" aria-pressed="false">Simpan artikel</button>
    </header>
    <details>
      <summary>Daftar isi</summary>
      <ul>
        <li><a href="#pot">Memilih pot dan media tanam</a></li>
        <li><a href="#penyiraman">Menyusun jadwal penyiraman</a></li>
      </ul>
    </details>
    <section id="pot">
      <h2>Memilih pot dan media tanam</h2>
      <p>Pilih pot berdiameter minimal 30 sentimeter yang memiliki lubang pembuangan di dasarnya. Lubang ini mencegah air menggenang dan akar membusuk. Isi pot dengan campuran tanah kebun dan kompos dengan perbandingan satu banding satu.</p>
      <p>Letakkan pot di tempat yang menerima sinar matahari minimal enam jam per hari. Tanaman cabai yang kekurangan cahaya tumbuh tinggi tetapi jarang berbuah.</p>
    </section>
    <section id="penyiraman">
      <h2>Menyusun jadwal penyiraman</h2>
      <p>Siram tanaman setiap pagi sebelum matahari tinggi. Periksa permukaan tanah terlebih dahulu: bila masih lembap, tunda penyiraman hingga sore hari.</p>
      <p>Dengan pot yang tepat dan penyiraman yang teratur, bunga pertama biasanya muncul dalam empat sampai enam minggu. Panen pertama menyusul sekitar tiga minggu kemudian.</p>
    </section>
    <footer>
      <p>Ditulis oleh Siti Rahma.</p>
      <p>Diterbitkan pada <time datetime="2025-01-18">18 Januari 2025</time>.</p>
    </footer>
  </article>
</body>
</html>

// interaksi-artikel.js — tombol bookmark proyek Website Artikel.
// Status tersimpan pada localStorage sehingga bertahan setelah halaman ditutup.

const KUNCI_BOOKMARK = "aneka-baca:bookmark";
const tombol = document.querySelector("#tombol-bookmark");

function bacaStatus() {
  try {
    return localStorage.getItem(KUNCI_BOOKMARK) === "ya";
  } catch (galat) {
    return false;
  }
}

function tulisStatus(tersimpan) {
  try {
    if (tersimpan) {
      localStorage.setItem(KUNCI_BOOKMARK, "ya");
    } else {
      localStorage.removeItem(KUNCI_BOOKMARK);
    }
  } catch (galat) {
    // Penyimpanan tidak tersedia (misalnya mode privat ketat);
    // tombol tetap berfungsi selama sesi ini tanpa mengingat status.
  }
}

function perbaruiTombol() {
  const tersimpan = bacaStatus();
  tombol.setAttribute("aria-pressed", tersimpan ? "true" : "false");
  tombol.textContent = tersimpan ? "Artikel tersimpan" : "Simpan artikel";
}

if (tombol) {
  tombol.addEventListener("click", function () {
    tulisStatus(!bacaStatus());
    perbaruiTombol();
  });
  perbaruiTombol();
}

Saat halaman dibuka pertama kali:
  - Tombol berlabel "Simpan artikel" tampil di bawah paragraf pengantar
Saat tombol diklik:
  - Label berubah menjadi "Artikel tersimpan" dan warna tombol berubah
Saat halaman ditutup lalu dibuka kembali:
  - Label tetap "Artikel tersimpan" karena status dibaca dari localStorage
Saat tombol diklik lagi:
  - Status kembali kosong dan label kembali "Simpan artikel"