Day 1 / 02 / exercise

Back to Basics Todo App

Download the starter HTML, CSS, JavaScript, and JSON exercise files.

Exercise brief

Download content
01Download the starter filesStart from a small app that is already prepared.

Steps

  1. Download the exercise content.
  2. Open the folder in your editor.
  3. Find the HTML, CSS, JavaScript, and JSON files.
02Read the app structureBefore editing, identify what each file is responsible for.

Steps

  1. HTML gives the page its structure.
  2. CSS controls how the page looks.
  3. JavaScript controls behavior.
  4. The JSON file acts like a very simple database for this exercise.
03Ask AI for a small feature planUse AI to think before changing code.

Steps

  1. Explain what the app already does.
  2. Ask for one small feature idea.
  3. Ask which files need to change and why.

Commands or prompts

Act as a beginner-friendly JavaScript coach. I have a small todo app with HTML, CSS, JavaScript, and a JSON data file. I want to add a priority attribute to each todo, such as Low, Medium, or High. First explain which files need to change and why, then give me a short checklist before writing code.
04Run and verifyCheck the feature like a user, not only like a coder.

Steps

  1. Open the app.
  2. Try the new feature.
  3. Test one normal case and one edge case.
  4. Write down what changed.
05Challenge yourselfOptional stretch tasks after the priority feature works.

Checklist

  • Show a colored badge for Low, Medium, and High priority.
  • Add a filter that shows only High priority todos.
  • Add a sort button that moves High priority todos to the top.
  • Make priority required before a new todo can be saved.
  • Add one example todo in db.json that already has a priority.
  • Ask AI to review the feature and explain what changed in each file.