Shopping list

90 minutes


Create a shopping list application that allows a user to search for an item, add items, check them off, and delete them

As the user starts typing, it should hit the endpoint and show a list of partial matches. Clicking an item should add it to the list.

Added items can be checked off, unchecked again, and deleted from the list.


  • Entering more than two characters in the input should show a list of partially matching items (starting with the same characters)
  • Clicking an item in the list of partially matching items should add it to the list
  • Adding the same item multiple times is allowed
  • Pressing the 'X' next to an item should delete it from the list
  • Pressing the '✓' next to an item should check it off (i.e. strikethrough text and partially grey out text/buttons)
  • Pressing the '✓' next to a checked-off item should uncheck it again

API endpoints

Find partially matching items

  • Method: GET
  • URL:
  • Example request URL:
  • Example response: ['milk', 'milkshake', 'mint', 'mixed herbs']
  • Notes: Only accepts items with a minimum of two characters (e.g. 'mi' is fine, 'm' will return an empty array')


  • When hitting the API endpoint, be sure to debounce your input. For example, if the user very quickly presses ten letters on the keyboard, you shouldn't make 10 API requests. Instead, you should have a slight delay (~500ms) after each keypress to make sure they do not press a key again. If the delay passes without a keypress, then make a request, otherwise reset the delay.

Submitting solutions

  1. Create a solution by forking one of our CodePen templates:
  2. Submit your solution here


Additional challenges

Get future questions delivered straight to your inbox for free

Sign up and receive instant access to new questions when we publish them.

We‘ll only use your information to deliver new questions and to provide you updates about our product. We‘ll never spam you or sell your information without your consent. Unsubscribe at any time.