Your first real code: a week chart

Newbie to Tech · Step 6 of 8 · about 5 minutes to read, 30 minutes to do Practice project: https://github.com/jazken/mood-habit-tracker · start from your main (with saving) · answer key: branch step-2. The branch is called step-2 but this is lesson 6. The names don't line up, and that's fine.

Do this now (you can read the rest after)

Today the AI builds a chart of your last 7 days. Then you type one small piece of code yourself.

Part A: the AI builds it, you stay in charge (15 minutes)

1. Open your tool in the mood-habit-tracker folder. Ask:

Switch to main and pull the latest from my fork.
Then make a new branch called my-chart.
Explain each command before you run it.

2. Then plan first:

Plan how to add a "This week" chart to index.html.
Show the last 7 days, one row per day, with a bar for the mood.
Longer bar = brighter mood. Use the saved days from localStorage.
Plain HTML and CSS only. No chart library, no internet.
Don't change anything yet.

3. Read the plan. Say go. Read each diff, then approve.
4. Refresh the page. Tap a mood. Does today's bar change?

Were you Partner A in Step 4? Your main already has a chart from that exercise. Skip Part A, read the chart code with your tool, and go to Part B.

Part B: you write the code (15 minutes)

Add one line under the chart that says, for example, "You checked in on 3 of the last 7 days." Type it yourself. Ask the AI for hints, not answers:

I want to write this myself. Don't edit any files.
Give me hints, one at a time, to add a line under the week chart
that says "You checked in on X of the last 7 days."
Tell me which function to look in and what to count.

Type, save, refresh. If it breaks, paste the error and ask: "What does this mean? Give me a hint, not the fix."

Then save and publish: commit with the note "Add a chart of the last 7 days". Push my-chart. Open a PR into your fork's main (check the base repository). Merge it.

Check you did it: your live link from Step 5 shows the chart and your own line, a minute after the merge.

---

Why this matters

So far the AI wrote all the code. That's fine, but you can't check what you can't read. Typing even one line yourself changes how you read the AI's code. You start to see the pattern: find the data, count it, show it.

How the chart works (ask your tool to show you each part)

1. Find the last 7 days. A small loop goes back one day at a time, from today.
2. Look up each day in the saved days from Step 3.
3. Draw a row for each day: the day's name, a bar, and the mood word.
4. The bar's length comes from the style. "Low" is a short bar, "Great" is a full one.

No chart library is needed. A library is someone else's ready-made code. It's great for big charts. For 7 bars, plain HTML is simpler, and it works with no internet.

Read the code like a builder

When the AI shows you code, ask 3 questions:

1. What goes in? (Here: the saved days.)
2. What comes out? (Here: 7 rows on the page.)
3. What could go wrong? (A day with no check-in. Does it still show a row?)

Good code handles the empty case. Check that a day with no check-in still shows a row, with a tiny bar.

Words from this step

Word	What it means
Function	A named set of steps the code can run again and again
Loop	Code that repeats, for example once for each day
Variable	A named box that holds a value, like a count
Library	Ready-made code someone else wrote
Bug	A mistake in code that makes it do the wrong thing

In your tool: learning mode

• All tools: put this in your rules file: "When I say 'hints only', don't edit files. Give one hint at a time." (Rules files: Kiro .kiro/steering/, Claude Code CLAUDE.md, Codex and Antigravity AGENTS.md.)
• Kiro: a spec's tasks.md is a good place to see the steps. You can ask it to do one task at a time.
• Claude Code / Antigravity: use Plan (or Planning) mode for the hints, so no files change.
• Codex: switch to read-only with /permissions while you ask for hints.

Answer key

The step-2 branch is one finished chart: https://github.com/jazken/mood-habit-tracker/tree/step-2

To see only what the chart added, compare it with step-1: https://github.com/jazken/mood-habit-tracker/compare/step-1...step-2

The answer key doesn't have your "X of 7 days" line. That part is all yours.

Go deeper (pick one)

• MDN, JavaScript basics (free): https://developer.mozilla.org/en-US/docs/Learn_web_development/Core/Scripting
• freeCodeCamp (free): https://www.freecodecamp.org/learn
• Prefer Python? Kaggle's Intro to Programming (free): https://www.kaggle.com/learn/intro-to-programming

Next: Step 7, A small AI build: your weekly coach.