Shopping List

Welcome to the last lesson of the JavaScript course! In it, you'll put together everything you've learned and build a small app: a shopping list. You type what you want to buy and its price, click a button, and the item appears in the list. The app adds up the prices, checks what you've typed and lets you cross off what you've already bought.

You'll use variables, conditions, arrays, loops, functions, objects and everything about web pages from the previous lesson. Each exercise continues where the previous one ended (the editor starts with its finished code) and adds one piece. At the end, you'll have a whole app that you built step by step.

The page. The page in index.html is ready, so you'll write only script.js. Your script will work with these elements (listed by their id):

list: the list of items (ul), empty for now,
total: how much the shopping costs. It's a span, an element for a piece of text inside a paragraph,
name and price: the text fields for what to buy and how much it costs (the price field has type="number": it is meant for numbers),
add: the button that adds the item to the list,
message: a paragraph for messages, for example when you forget to enter the price.

The style element at the top of the page also has a style for the class bought, which crosses out an item. You'll need this class later. At the top of script.js, we've already found the elements with document.querySelector() and stored them in constants, so you can start right away.

The plan. The shopping list is kept in an array of objects, one object per item, for example { name: "Milk", price: 2 }. This array holds the app's data. The page only shows the data: a function showItems() clears the list on the page and creates an li element for each item in the array. Whenever the data changes, for example when you add an item, the script changes the array and calls showItems() again. It's the same idea as the counter in the previous lesson: the value lives in a variable, and the page shows it.

A reminder of how to create an element and put it on the page:

const li = document.createElement("li");
li.textContent = "Milk";
list.append(li);

Instructions

Under the comment // The shopping list, create a constant items: an array of three objects with the properties name (text) and price (a number). Put milk for 2, bread for 3 and apples for 5 in it, each object on its own line. The first one is { name: "Milk", price: 2 }. Use const because the variable will always hold this same array, even when we add items to it.

Write a function showItems(). It first clears the list with list.textContent = "", so that the items don't appear twice when the function is called again. Then, in a for...of loop over items, it creates an li for each item with text like Milk: €2 (a template literal, the text in backticks with ${...}, is handy here) and appends it to list. At the end of the script, call showItems(), and the three items appear on the page.

Start programming for free

1/6