Brief-nya
Toko Kita adalah toko online kecil di Indonesia yang menjual kopi, peralatan dapur, alat tulis, perlengkapan rumah, dan beberapa barang elektronik. Halaman beranda barunya sudah punya HTML dan CSS, dan tim back end sudah membangun API. Yang belum ada adalah JavaScript di antaranya: kode yang mengambil produk, bereaksi saat seseorang mengklik atau mengetik, dan berkomunikasi balik dengan server.
Kamu akan menulisnya dalam tiga bagian. Masing-masing adalah fitur yang dibutuhkan toko sebelum diluncurkan, dan masing-masing sebagian besar soal kasus-kasus yang salah, bukan satu kasus yang berjalan lancar. Jaringan bisa lambat, atau bisa gagal. Pelanggan bisa menutup tab di tengah jalan. Pasti ada yang mengklik tombol pesan dua kali. Kode yang menangani hal-hal ini dengan tenang adalah pembeda antara toko yang dipercaya orang dan toko yang mereka tinggalkan saat checkout.
Cara kerja tugas-tugasnya
Setiap tugas punya tab HTML dan tab JavaScript, dan pratinjau langsung. API-nya disimulasikan: fetch ke URL di tiket menjawab setelah jeda singkat, seperti server sungguhan, dan URL lain gagal. Pengecek mengklik, mengetik, dan mengirim formulir di halamanmu, lalu membaca apa yang ada di halaman, jadi id dan teks di setiap tiket harus persis. Teks di halaman ditulis dalam bahasa Inggris persis seperti di tiket. Function dan variabel tingkat atas milikmu bisa dilihat pengecek, itulah sebabnya beberapa tiket meminta nama tertentu. Ada petunjuk kalau kamu buntu, tapi coba setiap tugas tanpa membuka solusinya dulu.
Tugas-tugasnya
| # | Tugas | Keterampilan utama |
|---|---|---|
| 1 | Daftar produk yang hidup | fetch, async/await, rendering dengan textContent, event input, tampilan error |
| 2 | Keranjang yang ingat | Event dengan atribut data-, objek, localStorage, JSON dengan try/catch |
| 3 | Formulir checkout | Event submit, validasi, fetch dengan POST, menonaktifkan tombol, pesan kegagalan |
Kalau sudah siap, buka Task 1.