Mom's Shopping List

Your mom is frustrated by her propensity to lose slips of paper with writing on them, specifically her shopping lists. She knows that you're a really smart web developer and assumes that you can easily make her a website to keep track of her shopping list.

Project Requirements Overview

Using HTML, CSS, and JavaScript, write a simple shopping list app. There must be an input box to add new items, and an [x] button to delete items. The data does not have to persist a page refresh (because there's no API right now).

Here's what the list might look like:

You should be able to delete items by clicking the [x]:


Use the following repo to start your project. This code will help you understand any patterns you should use when completing this assignment.

Follow the instructions in the README.


Each part has a check box on Trello. It would be beneficial to have someone look at your code before moving from one part to the next.

Part 1

  • A user will be able to add list items to the pre-built ul using the pre-built form
  • New list items should have the same format as the li's that came with the git repo

Part 2

  • A user will be able to delete items using an items delete button

Extra Credit

  • A user will be able to click the "edit" button and see an input box appear
  • When the user clicks the "edit" button, a "save" button replace the "edit" button
  • The input box will automatically have the value of the list item
  • The user can edit and "save" the input box's value
  • On save, the input box will disappear, and the new value will appear
Passing criteria: Demo to an instructor

An instructor or TA will sit with you for a demonstration of this project. They will be assessing your proficiency in the following areas:

  • Difference between web app and web site
  • Build very basic web apps (site is functional and based on user interaction)
  • Understand JSON

Passing off this project completes the Web Applications, Level 1 branch of the skills tree.

Extra Credit

Use localStorage or sessionStorage to save the list in case the page is refreshed.