The brief
Toko Kita is a small Indonesian online shop that sells coffee, kitchen equipment, stationery, home goods and a few electronics. The new home page has its HTML and CSS, and the back-end team has built an API. What's missing is the JavaScript in between: the code that fetches the products, reacts when someone clicks or types, and talks back to the server.
You'll write that in three parts. Each one is a feature the shop needs before launch, and each one is mostly about the cases that go wrong rather than the one that goes right. The network can be slow, or it can fail. A customer can close the tab halfway through. Somebody will double-click the order button. Code that handles these quietly is the difference between a shop people trust and one they abandon at checkout.
How the tasks work
Each task has an HTML tab and a JavaScript tab, and a live preview. The API is simulated: fetch to the URLs in the ticket answers after a short delay, like a real server would, and any other URL fails. The checker clicks, types and submits in your page, then reads what's on it, so the ids and texts in each ticket are exact. Your top-level functions and variables are visible to the checker, which is why some tickets ask for specific names. There are hints if you get stuck, but try each task without opening the solution first.
The tasks
| # | Task | Main skills |
|---|---|---|
| 1 | A live product list | fetch, async/await, rendering with textContent, input events, error states |
| 2 | A cart that remembers | Events with data- attributes, objects, localStorage, JSON with try/catch |
| 3 | The checkout form | submit events, validation, fetch with POST, disabling a button, failure messages |
When you're ready, open Task 1.