Dari starter project yang ada, saya menulis kode JavaScript di main.js agar dapat:

1. menambahkan buku baru dan menampilkan data buku di rak yang semestinya
2. memindahkan buku ke rak dari Belum Selesai Dibaca ke Selesai Dibaca dan sebaliknya
3. menyimpan data buku di LocalStorage agar data tidak hilang walaupun tab atau broeser ditutup
4. menghapus data buku
5. mencari (memfilter) judul buku
6. mengedit data buku

Selain itu, saya juga mempercantik tampilan aplikasi dengan CSS.

---

Bookshelf App Starter Project

Ini adalah starter project untuk siswa yang sedang mengerjakan tugas akhir kelas Belajar Membuat Front-End Web untuk Pemula.

Ketentuan Pengerjaan Tugas

Untuk mempermudah penilaian submission yang dikirim, Anda perlu memahami ketentuan-ketentuan berikut dalam mengerjakan tugas ini.

• Anda dilarang mengedit atau menghapus atribut data-testid pada elemen-elemen HTML.

• Ini masih berkaitan dengan poin sebelumnya. Jika Anda memiliki kebutuhan seperti styling elemen dan perlu menambahkan atribut seperti class, itu tidak dilarang selama atribut data-testid beserta nilainya tidak diubah atau dihapus.

• Dalam menampilkan data-data buku, Anda wajib memberikan beberapa atribut pada setiap elemennya.

  • data-bookid: menampung nilai ID masing-masing buku.
  • data-testid: penanda jenis data buku yang ditampilkan. Berikut daftarnya.
    • bookItem: elemen kontainer yang menampung data-data buku.
    • bookItemTitle: judul buku
    • bookItemAuthor: penulis buku
    • bookItemYear: tahun rilis buku
    • bookItemIsCompleteButton: tombol untuk mengubah kondisi buku dari “Belum selesai dibaca” menjadi “Selesai dibaca” atau sebaliknya.
    • bookItemDeleteButton: tombol untuk menghapus buku.
    • bookItemEditButton: tombol untuk mengubah data buku.

  Agar pengerjaan tugas lebih mudah, Anda dapat mengikuti templat buku berikut.

<div data-bookid="{{ ID_buku }}" data-testid="bookItem">
  <h3 data-testid="bookItemTitle">{{ judul_buku }}</h3>
  <p data-testid="bookItemAuthor">Penulis: {{ penulis_buku }}</p>
  <p data-testid="bookItemYear">Tahun: {{ tahun_rilis_buku }}</p>
  <div>
    <button data-testid="bookItemIsCompleteButton">{{ tombol_untuk_ubah_kondisi }}</button>
    <button data-testid="bookItemDeleteButton">{{ tombol_untuk_hapus }}</button>
    <button data-testid="bookItemEditButton">{{ tombol_untuk_edit }}</button>
  </div>
</div>

Selamat mengerjakan dan sukses selalu!