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

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, 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:

    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:

    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

Related