commit pertama saya

README.md

@@ -0,0 +1,2 @@
+# Booshelf-2
+Lemari buku online v 0.2

app.js

@@ -0,0 +1,159 @@
+document.addEventListener("DOMContentLoaded", function () {
+  const formBuku = document.getElementById("bukuBaru");
+  const terbacaContainer = document.getElementById("terbaca");
+  const belumSelesaiContainer = document.getElementById("belumSelesai");
+  const formCari = document.getElementById("formCari");
+  const inputCari = document.getElementById("cari");
+
+  function tampilkanBukuDariLocalStorage() {
+    const bukuData = JSON.parse(localStorage.getItem("daftarBuku")) || [];
+    bukuData.forEach((buku) => {
+      tambahkanBukuKeDaftar(buku);
+    });
+  }
+
+  function tambahkanBukuKeDaftar(buku) {
+    const cardData = document.createElement("div");
+    cardData.classList.add("card-data");
+
+    cardData.innerHTML = `
+            <span>
+                <strong style="font-size: 28px; color:${
+                  buku.isComplete ? "blue" : "green"
+                }">${buku.isComplete ? "Sudah" : "Belum"} terbaca</strong>
+            </span>
+            <small class="nomorBuku" style="display:none">${buku.id}</small>
+            <h1 class="card-head">${buku.title}</h1>
+            <h2 class="card-sub-head">${buku.author}</h2>
+            <p class="card-text">${buku.year}</p>
+            <div class="group-btn">
+                <button class="btn-success">Pindah</button>
+                <button class="btn-danger">Hapus</button>
+            </div>
+        `;
+
+    if (buku.isComplete) {
+      terbacaContainer.appendChild(cardData);
+    } else {
+      belumSelesaiContainer.appendChild(cardData);
+    }
+  }
+
+  formBuku.addEventListener("submit", function (event) {
+    event.preventDefault();
+    let randomId = Math.floor(Math.random() * 1000);
+    let id = randomId;
+    let title = document.getElementById("title").value;
+    let author = document.getElementById("author").value;
+    let year = parseInt(document.getElementById("year").value);
+    let isComplete = document.getElementById("isComplete").checked;
+
+    const buku = {
+      id: id,
+      title: title,
+      author: author,
+      year: year,
+      isComplete: isComplete,
+    };
+
+    tambahkanBukuKeDaftar(buku);
+    simpanKeStorage(buku);
+  });
+
+  document.addEventListener("click", function (event) {
+    const triggerEvent = event.target;
+    if (triggerEvent.classList.contains("btn-success")) {
+      pindahBuku(triggerEvent.parentElement.parentElement);
+    } else if (triggerEvent.classList.contains("btn-danger")) {
+      hapusBuku(triggerEvent.parentElement.parentElement);
+    }
+  });
+
+  formCari.addEventListener("submit", function (event) {
+    event.preventDefault();
+    const keyword = inputCari.value.trim().toLowerCase();
+    filterBuku(keyword);
+  });
+
+  function filterBuku(keyword) {
+    const bukuData = JSON.parse(localStorage.getItem("daftarBuku")) || [];
+    const hasilFilter = bukuData.filter((buku) => {
+      const judul = buku.title.toLowerCase();
+      const penulis = buku.author.toLowerCase();
+      return judul.includes(keyword) || penulis.includes(keyword);
+    });
+    tampilkanHasilPencarian(hasilFilter);
+  }
+
+  function tampilkanHasilPencarian(bukuArray) {
+    terbacaContainer.innerHTML = "";
+    belumSelesaiContainer.innerHTML = "";
+    bukuArray.forEach((buku) => {
+      tambahkanBukuKeDaftar(buku);
+    });
+  }
+
+  function simpanKeStorage(buku) {
+    let bukuData = JSON.parse(localStorage.getItem("daftarBuku")) || [];
+    bukuData.push(buku);
+    localStorage.setItem("daftarBuku", JSON.stringify(bukuData));
+  }
+
+  function pindahBuku(card) {
+    const idBuku = card.querySelector(".nomorBuku").textContent;
+    const bukuData = JSON.parse(localStorage.getItem("daftarBuku")) || [];
+    const bukuIndex = bukuData.findIndex(
+      (buku) => buku.id === parseInt(idBuku)
+    );
+
+    bukuData[bukuIndex].isComplete = !bukuData[bukuIndex].isComplete;
+    localStorage.setItem("daftarBuku", JSON.stringify(bukuData));
+
+    card.remove();
+
+    tambahkanBukuKeDaftar(bukuData[bukuIndex]);
+  }
+
+  function hapusBuku(card) {
+    const idBuku = card.querySelector(".nomorBuku").textContent;
+    const bukuData = JSON.parse(localStorage.getItem("daftarBuku")) || [];
+
+    const updatedBukuData = bukuData.filter((buku) => buku.id != idBuku);
+
+    localStorage.setItem("daftarBuku", JSON.stringify(updatedBukuData));
+
+    card.remove();
+  }
+
+  const btnBelum = document.getElementById("btnBelum");
+  btnBelum.addEventListener("click", function (event) {
+    event.preventDefault();
+
+    btnBelum.classList.add("active");
+    btnBelum.disabled = true;
+
+    const btnSelesai = document.getElementById("btnSelesai");
+    btnSelesai.classList.remove("active");
+    btnSelesai.disabled = false;
+
+    terbacaContainer.classList.add("d-none");
+    belumSelesaiContainer.classList.remove("d-none");
+  });
+
+  const btnSelesai = document.getElementById("btnSelesai");
+  btnSelesai.addEventListener("click", function (event) {
+    event.preventDefault();
+
+    btnSelesai.classList.add("active");
+    btnSelesai.disabled = true;
+
+    const btnBelum = document.getElementById("btnBelum");
+    btnBelum.classList.remove("active");
+    btnBelum.disabled = false;
+
+    terbacaContainer.classList.remove("d-none");
+    belumSelesaiContainer.classList.add("d-none");
+  });
+
+  tampilkanBukuDariLocalStorage();
+});

dummDataBooks.json

@@ -0,0 +1,184 @@
+[
+  {
+    "id": 3493,
+    "title": "architect cutting-edge interfaces",
+    "author": "Harlan Alven",
+    "year": 2002,
+    "isComplete": true
+  },
+  {
+    "id": 3118,
+    "title": "facilitate seamless users",
+    "author": "Baily Veall",
+    "year": 2011,
+    "isComplete": false
+  },
+  {
+    "id": 3264,
+    "title": "engage web-enabled functionalities",
+    "author": "Linus Foddy",
+    "year": 1987,
+    "isComplete": true
+  },
+  {
+    "id": 3361,
+    "title": "envisioneer killer relationships",
+    "author": "Enrichetta Pougher",
+    "year": 1992,
+    "isComplete": true
+  },
+  {
+    "id": 4019,
+    "title": "benchmark sticky schemas",
+    "author": "Alanna Bawden",
+    "year": 1994,
+    "isComplete": false
+  },
+  {
+    "id": 3909,
+    "title": "grow 24/7 channels",
+    "author": "Honor Dusting",
+    "year": 2001,
+    "isComplete": true
+  },
+  {
+    "id": 3620,
+    "title": "grow cutting-edge vortals",
+    "author": "Atlanta Fosserd",
+    "year": 2012,
+    "isComplete": true
+  },
+  {
+    "id": 3176,
+    "title": "matrix 24/7 schemas",
+    "author": "Tandie MacColgan",
+    "year": 2008,
+    "isComplete": true
+  },
+  {
+    "id": 3076,
+    "title": "iterate impactful deliverables",
+    "author": "Idalia Cartmell",
+    "year": 1999,
+    "isComplete": false
+  },
+  {
+    "id": 3704,
+    "title": "morph customized channels",
+    "author": "Krisha Gillio",
+    "year": 2006,
+    "isComplete": false
+  },
+  {
+    "id": 3040,
+    "title": "incubate granular metrics",
+    "author": "Ingunna Graben",
+    "year": 1997,
+    "isComplete": true
+  },
+  {
+    "id": 3831,
+    "title": "leverage enterprise metrics",
+    "author": "Terrance Anscott",
+    "year": 2006,
+    "isComplete": false
+  },
+  {
+    "id": 3245,
+    "title": "syndicate front-end schemas",
+    "author": "Bobbie Georghiou",
+    "year": 2008,
+    "isComplete": true
+  },
+  {
+    "id": 3591,
+    "title": "enhance B2B eyeballs",
+    "author": "Sharona Spick",
+    "year": 1989,
+    "isComplete": true
+  },
+  {
+    "id": 3510,
+    "title": "visualize rich e-markets",
+    "author": "Emmy Linke",
+    "year": 2011,
+    "isComplete": false
+  },
+  {
+    "id": 3029,
+    "title": "e-enable 24/365 platforms",
+    "author": "Joane McCobb",
+    "year": 2001,
+    "isComplete": false
+  },
+  {
+    "id": 3714,
+    "title": "generate global e-commerce",
+    "author": "Kylila Thomesson",
+    "year": 1988,
+    "isComplete": false
+  },
+  {
+    "id": 3005,
+    "title": "facilitate world-class channels",
+    "author": "Reinhard Stobbs",
+    "year": 1993,
+    "isComplete": false
+  },
+  {
+    "id": 3088,
+    "title": "repurpose 24/365 applications",
+    "author": "Truda Kleinholz",
+    "year": 1996,
+    "isComplete": true
+  },
+  {
+    "id": 3970,
+    "title": "evolve granular communities",
+    "author": "Urbain Nesfield",
+    "year": 1996,
+    "isComplete": true
+  },
+  {
+    "id": 3726,
+    "title": "transition intuitive applications",
+    "author": "Granville Boman",
+    "year": 2013,
+    "isComplete": true
+  },
+  {
+    "id": 3479,
+    "title": "enhance magnetic bandwidth",
+    "author": "Kareem Filyashin",
+    "year": 1986,
+    "isComplete": false
+  },
+  {
+    "id": 3740,
+    "title": "transform world-class users",
+    "author": "Merle Pepper",
+    "year": 2005,
+    "isComplete": true
+  },
+  {
+    "id": 3794,
+    "title": "harness impactful solutions",
+    "author": "Nickolai Guwer",
+    "year": 2011,
+    "isComplete": true
+  },
+  {
+    "id": 3759,
+    "title": "redefine strategic technologies",
+    "author": "Ewan O'Keevan",
+    "year": 2010,
+    "isComplete": false
+  },
+  {
+    "id": 3433,
+    "title": "revolutionize bricks-and-clicks content",
+    "author": "Addison Sandey",
+    "year": 2005,
+    "isComplete": true
+  }
+]