Congratulations!

Congratulations, your shopping list works, and you've reached the end of the JavaScript course! The app adds items, checks what you type, adds up the prices and lets you cross off what you've bought. And you wrote all of it yourself.

One last improvement. Cross off the milk, and the amount to pay stays the same. In the shop, it's more useful to see how much the items you haven't bought yet will cost. So in getTotal(), add only the prices of the items whose bought is false. The condition !item.bought (not bought) is just what you need. And since showItems() runs after every click, the amount updates by itself.

What you've learned. Look at how every part of the course found its place in your app:

• Variables and constants hold the elements of the page, the name and the price.
• Conditions check the input and decide whether an item is crossed out.
• An array holds the shopping list, and push() adds to it.
• Loops go through the items to show them and to add up their prices.
• Functions split the app into parts with clear jobs: showItems() shows, getTotal() computes.
• Objects keep together what belongs to one item: its name, its price and whether it's bought.
• The page: you find elements, change their text and classes, create new ones and react to clicks.

Save your app. The app consists of two files, and they must be in the same folder:

1. Create a new folder on your computer, for example shopping-list.
2. Open a plain text editor, such as Notepad on Windows or TextEdit on a Mac (switched to plain text in the Format menu), or a code editor such as Visual Studio Code. Paste the code from index.html and save it in the folder as index.html.
3. In the same way, save the code from script.js in the same folder as script.js.
4. Double-click index.html, and the app opens in your browser.

In the browser, the console is hidden at first: open the developer tools with F12 (on a Mac Cmd+Option+I) and switch to the Console tab. There you'll find what your script prints, and its errors. You'll also notice that when you reload the page, the list starts again with the three items. The data lives in a variable only while the page is open.

What's next. You now know the basics that every JavaScript program is built from. Here are some ideas for what to learn next:

• Keep improving your list. A button that removes an item (the array method splice()), a quantity for each item, adding an item by pressing Enter (the keydown event), sorting by price. You learn the most by solving your own problems.
• More about the page. The elements of a page, as JavaScript sees them, are called the DOM, and you can do much more with them: react to other events, such as typing or pressing a key, change any attribute, or build whole parts of a page.
• Saving data in the browser with localStorage, so that the list survives reloading the page.
• More array methods, such as filter(), map() and sort(), which do in one line what you now write as a loop.
• Getting data from the internet with fetch(), for example a weather forecast or exchange rates.
• A framework such as React or Vue, later, for bigger apps. They are built on exactly what you've learned here: data, and a page that shows it.

And if you haven't taken them yet, the HTML course and the CSS course will teach you to build the whole page and its look yourself, not just the script.