javascript · level 2 check

a shopping list app.

Time to build a real app: a shopping list. Type an item and press Add to put it on the list. Each item gets a Tick button, which crosses it out, and a Remove button, which takes it away. A line at the bottom counts the items still to buy.

Everything the app knows lives in `state.items`, an array of objects like `{ name: "Milk", bought: false }`. Every button changes the state, then calls `render()`, which empties the list and draws it again. `other !== item` is true for every item except this exact one, so `filter` keeps all the others.

Be kind to the shopper: a blank item shows the warning instead of joining the list. Fill in each `____`, press run, then try your list out.

the page your code works on

<style>
  .bought span { text-decoration: line-through; color: grey; }
</style>
<h1>Shopping list</h1>
<form id="add-form">
  <input id="item" placeholder="Add an item">
  <button>Add</button>
</form>
<p id="error" hidden>Type an item first.</p>
<ul id="list"></ul>
<p id="left">Items left: 0</p>

Your program

const form = document.querySelector("#add-form");
const field = document.querySelector("#item");
const list = document.querySelector("#list");
const error = document.querySelector("#error");
const state = { items: [] };

form.addEventListener("submit", (event) => {
  event.____();
  const name = field.value.trim();
  if (name.length === ____) {
    error.hidden = false;
    return;
  }
  error.hidden = true;
  state.items.push({ name: name, bought: false });
  form.reset();
  field.focus();
  ____();
});

render();

Fill in every ____ then run the checks.

Run the checks to see your page here.

console

nothing logged yet

1 It adds an item to the listuses: forms
2 It turns away a blank itemuses: validation
3 It ticks an item offuses: events
4 It removes the right itemuses: state
5 It counts only what is left to buyuses: filter
6 It clears the box after addinguses: tidy forms

Take as long as you like and try as many times as you want.

a shopping list app.

level up.

playground