- Terdapat elemen <header>, <footer>, <main>, <article>, dan <aside> di berkas HTML.
- Masing-masing elemen wajib berisi konten yang peruntukkannya sesuai dengan elemen tersebut (menerapkan konsep semantic HTML dalam menyusun struktur website).
- Wajib menampilkan identitas diri (biodata diri) yang minimal harus berisi foto asli diri dan nama sesuai profil Dicoding. Identitas diri wajib ditampilkan dalam elemen <aside>.
- Menyusun layout dengan menggunakan float atau flexbox.
- Tema yang ditampilkan bebas, kecuali tema Bandung.
- Menerapkan tampilan aplikasi yang menarik:
- Memiliki pemilihan warna yang pas dengan tema aplikasi (Dalam memilih warna, Anda dapat memanfaatkan tools pemilihan warna seperti colorhunt.co).
- Tata letak elemen yang pas.
Contoh : Tidak ada konten yang bertumpuk. - Penggunaan font yang pas dengan tema.
- Penerapan padding dan margin yang pas.
- Menerapkan layout yang responsif:
- Menggunakan media query untuk menyesuaikan layout pada berbagai ukuran layar device.
Pastikan untuk tidak terdapat konten yang menumpuk maupun keluar dari kontainer ketika dicoba pada dekstop, tablet, dan juga mobile. - Menerapkan flexbox dalam menyusun layout.
- Menggunakan media query untuk menyesuaikan layout pada berbagai ukuran layar device.
- Terdapat penerapan JavaScript dalam memanipulasi DOM, seperti: (pilih satu)
- Membuat drop down.
- Memanfaatkan logika seperti looping dalam menampilkan elemen dan konten.
- Membuat slider.
- dan lainnya yang mendukung tampilan website agar lebih hidup.
- Bookshelf Apps harus mampu menambahkan data buku baru.
- Data buku yang disimpan merupakan objek JavaScript.
- Bookshelf Apps harus memiliki 2 Rak buku. Yakni, “Belum selesai dibaca” dan “Selesai dibaca”.
- Rak buku "Belum selesai dibaca" hanya menyimpan buku jika properti isComplete bernilai false.
Rak buku "Selesai dibaca" hanya menyimpan buku jika properti isComplete bernilai true.
Buku yang ditampilkan pada rak, baik itu "Belum selesai dibaca" maupun "Selesai dibaca" harus dapat dipindahkan di antara keduanya.
Buku yang ditampilkan pada rak, baik itu "Belum selesai dibaca" maupun "Selesai dibaca" harus dapat dihapus.
- Data buku yang ditampilkan pada rak, baik itu "Belum selesai dibaca" maupun "Selesai dibaca" harus dapat bertahan walaupun halaman web ditutup.
Dengan begitu, Anda harus menyimpan data buku pada localStorage.
- Tambahkan fitur pencarian untuk mem-filter buku yang ditampilkan pada rak sesuai dengan title buku yang dituliskan pada kolom pencarian.
- Berkreasilah dengan membuat proyek Bookshelf Apps tanpa menggunakan project starter.
- Menuliskan kode dengan bersih.
- Bersihkan comment dan kode yang tidak digunakan.
- Indentasi yang sesuai.
- Terdapat improvisasi fitur seperti (pilih satu):
- Custom Dialog ketika menghapus buku.
- Dapat edit buku.
- dsb.
- Aplikasi harus mampu menampilkan daftar catatan dengan data awal (initial data) yang telah kami sediakan.
- Memanfaatkan state component untuk menyimpan data catatan.
- Menggunakan teknik array map untuk menampilkan daftar catatan.
- Aplikasi harus mampu menambahkan data catatan baru.
- Memanfaatkan controlled component dalam membuat form input.
- Data catatan disimpan cukup pada memori saja (akan hilang jika browser di-refresh).
- Data catatan yang disimpan merupakan objek JavaScript dengan struktur object.
- Aplikasi harus menyediakan tombol hapus untuk menghapus data catatan yang disimpan.
- Terdapat conditional rendering di mana bila tidak terdapat data catatan, maka UI menampilkan pesan “Tidak ada catatan” atau pesan apa pun yang mengindikasikan data catatan kosong.
- Aplikasi memiliki fitur pencarian catatan berdasarkan kata kunci yang dimasukkan, dengan ketentuan:
- Jika kolom pencarian tidak kosong, maka aplikasi hanya menampilkan daftar catatan yang judulnya mengandung kata kunci yang dimasukkan.
- Jika kolom pencariannya kosong, maka aplikasi menampilkan seluruh catatan.
Memanfaatkan controlled component dalam membangun fitur catatan.
- Aplikasi dapat mencegah pengguna untuk memberikan judul catatan lebih dari 50 karakter.
- Menggunakan state dalam melimitasi, bukan atribut maxlength.
-
Menampilkan jumlah karakter tersisa yang dapat digunakan oleh pengguna.
- Aplikasi memiliki fitur arsip catatan.
- Aplikasi harus menyediakan tombol arsipkan/pindahkan untuk mengarsipkan atau memindahkan catatan dari arsip.
-
Daftar catatan yang diarsip harus ditampilkan pada tempat terpisah dari catatan yang tidak diarsip.
- Menerapkan kriteria opsional 1: Terdapat Fitur Pencarian Catatan.
- Menerapkan kriteria opsional 2: Terdapat Limit Karakter pada Input Judul Catatan.
- Menerapkan kriteria opsional 3: Terdapat Fitur Arsip Catatan.
- Menuliskan kode dengan baik:
- Tidak membuat class component yang tidak diperlukan.
- Memecah UI menjadi komponen sekecil mungkin (sesuai tanggung jawabnya).
- Gaya penulisan harus kode konsisten.
- Halaman 1: menampilkan daftar catatan.
- Halaman 2: menampilkan detail catatan atau catatan secara tunggal.
- Menampilkan daftar catatan dengan data awal (initial data) yang kami sediakan.
- Data yang ditampilkan pada daftar catatan adalah
- judul catatan (title),
- waktu pembuatan (createdAt), dan
- isi catatan (body).
- Terdapat conditional rendering di mana bila tidak terdapat data catatan, UI menampilkan pesan “Tidak ada catatan” atau pesan apa pun yang mengindikasikan data catatan kosong.
- Menampilkan catatan tunggal yang dipilih pengguna dari daftar catatan aktif atau diarsipkan.
- Menggunakan id catatan sebagai path parameter dalam menampilkan halaman detail catatan.
- Catatan yang tampil harus sesuai dengan id yang terdapat pada path parameter.
- Halaman Detil Catatan harus dapat diakses langsung dengan menggunakan URL.
- Memanfaatkan controlled component dalam membuat form input.
- Data catatan disimpan cukup pada memori saja (akan hilang jika browser di-refresh). Kami sarankan untuk memanfaatkan fungsi menyimpan catatan yang disediakan.
- Aplikasi harus menyediakan tombol hapus untuk menghapus data catatan yang disimpan.
- Tombol hapus boleh diletakkan di mana saja, tetapi pastikan pengguna dapat mengaksesnya dengan baik. Sebagai contoh, Anda bisa menampilkan pada halaman detail catatan dan/atau daftar catatan.
- Memvalidasi seluruh masukkan (props) yang diterima komponen menggunakan PropTypes.
- Sebelum mengirimkan submission, pastikan tidak ada warning terkait validasi komponen.
- Catatan terarsip adalah catatan yang properti archived bernilai true.
- Menyediakan halaman baru untuk menampilkan daftar catatan yang terarsip.
- Data yang ditampilkan pada daftar catatan adalah
- judul catatan (title),
- waktu pembuatan (createdAt), dan
- isi catatan (body).
- Terdapat conditional rendering di mana bila tidak terdapat data catatan, maka UI menampilkan pesan “Arsip kosong” atau pesan apa pun yang mengindikasikan data catatan terarsip kosong.
- Data yang ditampilkan pada daftar catatan adalah
- Mengarsipkan catatan.
- Aplikasi harus menyediakan tombol arsip dan batal arsip untuk mengarsipkan dan memindahkan catatan dari arsip.
- Tombol arsip dan batal arsip bisa diletakkan di mana saja, tetapi pastikan pengguna dapat mengaksesnya dengan baik. Sebagai contoh, Anda bisa menampilkan pada halaman detail catatan dan/atau daftar catatan.
- Aplikasi memiliki fitur pencarian catatan berdasarkan kata kunci yang dimasukkan, dengan ketentuan:
- Jika kolom pencarian tidak kosong, maka aplikasi hanya menampilkan daftar catatan yang judulnya mengandung kata kunci yang dimasukkan.
- Jika kolom pencariannya kosong, maka aplikasi menampilkan seluruh catatan.
- Memanfaatkan search parameter agar pencarian bersifat shareable melalui URL.
- Memanfaatkan controlled component dalam membangun input pencarian.
- Aplikasi menyediakan halaman khusus bila pengguna mengakses URL aplikasi dengan alamat yang tidak diketahui/diharapkan.
- Menerapkan kriteria opsional 1: Terdapat Fitur Pencarian Catatan.
- Menerapkan kriteria opsional 2: Terdapat Fitur Arsip Catatan.
- Menerapkan kriteria opsional 3: Menyediakan halaman 404.
- Menuliskan kode dengan baik.
- Tidak membuat class component yang tidak diperlukan.
- Memecah UI menjadi komponen sekecil mungkin (sesuai tanggung jawabnya).
- Gaya penulisan kode harus konsisten, seperti penggunaan single quote/double quote ketika membuat nilai string, jumlah spasi dalam indentasi kode, atau penggunaan semicolon pada akhir statement.