# Exercise: Shopping List and Calculator

Bring a web page to life with JavaScript. Add items to a shopping list, cross them off and remove them, keep a live count, and build a calculator that shows its result or an error, all with event handlers and DOM changes, and no page reloads.

Apprentice · JavaScript · Updated October 30, 2026

One web page, two little apps: a shopping list you can add to, cross off and clear, and a calculator. The HTML and CSS are done. You'll write the JavaScript that makes them work.

## Get the exercise code

Open this lesson's GitHub repository, [github.com/ask-codey/exercise-shopping-list-and-calculator](https://github.com/ask-codey/exercise-shopping-list-and-calculator), also linked from the **Exercise** box beside the lesson. Click **Code**, then **Download ZIP**, and unzip it into your `bootcamp` folder. Or clone it with Git. Then open the folder in **VS Code**, and a terminal there.

| File | What's in it |
|---|---|
| `index.html`, `styles.css` | The page, finished |
| `shopping.js`, `calculator.js` | Functions that work things out, with no page involved. For you to finish. |
| `app.js` | Connects the page to those functions with event handlers. For you to finish. |
| `shopping.test.js`, `calculator.test.js` | Tests for `shopping.js` and `calculator.js` |

The requirements are in the comment at the top of each file you finish.

## What to do

**1. The functions.** Finish `shopping.js` and `calculator.js`, running the tests with `node --test`:

| Function | Does |
|---|---|
| `cleanItem(text)` | Trims the spaces off an item |
| `itemsLeftText(count)` | `Nothing left to buy`, `1 item left`, `3 items left` |
| `calculate(first, operator, second)` | `+`, `-`, `*` and `/`; throws for dividing by zero, or an unknown operator |
| `formatResult(value)` | At most 4 decimal places, with no extra zeros |

**2. The page.** Finish `app.js`. Open `index.html` in your browser (double-click it), and work through this checklist:

- Adding *milk* puts it on the list, empties the box, and shows *1 item left*, without reloading the page.
- Adding an item of only spaces does nothing.
- Clicking an item crosses it off, and the count goes down; clicking again puts it back.
- **Remove** takes an item off the list, and the count follows.
- With everything crossed off or removed, it says *Nothing left to buy*.
- 10 + 4 shows 14; 10 ÷ 4 shows 2.5; 10 ÷ 3 shows 3.3333.
- 10 ÷ 0 shows *Can't divide by zero* in red, and the next sum that works is back to normal.

## Hints

- **Keep the thinking out of the page.** `shopping.js` and `calculator.js` don't touch the DOM, so they can be tested with Node. `app.js` only reads the page, calls them, and writes the answer back. That split keeps the tested part as big as possible.
- **`event.preventDefault()`** stops a form's `submit` from reloading the page. Listen for `submit` on the form, not `click` on its button, so pressing **Enter** works too.
- **Build each item** with `document.createElement`: an `li`, a `span` for the name and a `button` with the class `remove`. Give the span and the button their own `addEventListener('click', ...)` as you create them, then `appendChild` them.
- **Count what's left** with `shoppingList.querySelectorAll('li:not(.done)').length`, and update `#items-left` after every change.
- **A text box's value is a string**, even for `type="number"`: `Number(firstInput.value)` turns it into a number.
- **`try` and `catch`** work as in C#: put `calculate` in a `try`, and show `error.message` in the `catch`.
- **Something not working?** Press **F12** and look at the **Console**: JavaScript errors appear there, with the line they happened on.

## When you're done

The tests pass, every line of the checklist works, and the page never reloads. Look at `app.js`: it never does a sum or builds a message itself. It wires events to functions, and that's all a page's JavaScript should do.

## Submit your exercise

The exercise is how you finish this lesson. When your work is done, put it on GitHub in a repo of your own, then submit that repo's address here.

1. On GitHub, click **+**, then **New repository**. Name it (for example `exercise-shopping-list-and-calculator`), choose **Public**, and click **Create repository**. Leave out the README: your folder already has one.
2. In a terminal in your exercise folder (Git Bash on Windows), send your work to your new repo. If you downloaded the ZIP:

   ```bash
   git init -b main
   git add .
   git commit -m "My solution"
   git remote add origin https://github.com/your-name/exercise-shopping-list-and-calculator.git
   git push -u origin main
   ```

   If you cloned the starter instead, point your copy at your own repo, then commit and push:

   ```bash
   git remote set-url origin https://github.com/your-name/exercise-shopping-list-and-calculator.git
   git add .
   git commit -m "My solution"
   git push -u origin main
   ```

3. Paste your repo's address, such as `https://github.com/your-name/exercise-shopping-list-and-calculator`, into **Submit your exercise** on this page. The site checks that the repo is public and holds your commits, and then the lesson is complete.

Changed something after you submitted? Push it, and submit again: your latest submission is the one that counts.

## So what

Find elements, listen for events, change the page: that's the whole loop of browser JavaScript, and you've just used it to build two working apps. Next, the page will fetch its data from a server.

## Key terms

- [Event Listener](https://www.ask-codey.com/glossary/event-listener)
- [preventDefault()](https://www.ask-codey.com/glossary/preventdefault)
- [createElement()](https://www.ask-codey.com/glossary/createelement)
- [submit Event](https://www.ask-codey.com/glossary/submit-event)

## Related

- [Manipulating the DOM Structure](https://www.ask-codey.com/lessons/working-with-elements-manipulating-the-dom-structure)
- [Canceling Events](https://www.ask-codey.com/lessons/common-events-cancelling-events)
- [Exercise: Cookies and Pizza](https://www.ask-codey.com/lessons/exercise-cookies-and-pizza)

Source: https://www.ask-codey.com/lessons/exercise-shopping-list-and-calculator