One app, all your JavaScript
This combined project brings JavaScript and Advanced JavaScript together. Over six days you build the café's ordering app: data and functions, a cart class, quick orders parsed with a regex, a live page, an async kitchen with retries — then the whole thing working together.
- Day 1: data and pure functions
- Day 2: a Cart class and a closure
- Day 3: regex, Map and Set
- Day 4: the page (DOM and events)
- Day 5: async, Promise.all and retries
- Day 6: the finished app
Data first
Start with the shape of the data: the menu is an array of objects. Then write pure functions — they only read their inputs and return a result — so each one is easy to test on its own.
const MENU = [
{ id: "momo", name: "Momo", price: 180, category: "food" },
{ id: "thukpa", name: "Thukpa", price: 220, category: "food" },
{ id: "chiya", name: "Masala chiya", price: 50, category: "drink" },
{ id: "lassi", name: "Lassi", price: 90, category: "drink" },
];
function orderTotal(order) {
return order.reduce((sum, line) => sum + findItem(line.id).price * line.qty, 0);
}
orderTotal([{ id: "momo", qty: 2 }]); // 360