Case study 01

Your Life in Weeks

A web app that draws your life as a grid of weeks, and shows a parent how many weeks they have with their child before that child turns 18.

The idea

A long life is about 4,000 weeks. Drawing them as a grid makes that number concrete. Versions of this grid already exist, so I wanted mine to answer a question a parent actually asks: how many weeks do I have with my kids before they are grown?

What it does

• Draws a grid from a birthday, for any lifespan up to 120 years, with the weeks already lived filled in.
• Takes a child's birthday, highlights the weeks until they turn 18, and counts the ones still ahead.
• Colors the grid by life chapters: school, military service, college and career.
• Produces a shareable image of the result that can be downloaded.

Decisions I made

• Lead with one feature. The app has three additions to the basic grid. I put the weeks shared with a child first, in the opening sentence, because one clear idea is easier to remember than three.
• Say what the number means before the click. I rewrote the intro to end with "before they turn 18", so a visitor knows what they are about to see.
• One list drives everything. The chapters live in a single list. The grid and its legend are both built from it, so they cannot disagree.
• Let people leave things blank. A chapter with no end year is treated as still going, and a chapter with no start year is skipped. An empty child's birthday switches that feature off without any extra code.
• The image copies the page. The shareable card reads its colors from the grid on screen, so it always matches what the visitor just saw.

What went wrong, and how I fixed it

• A message that outstayed its welcome. After an invalid birthday, the sentence about weeks together was still showing from the previous run. I now clear it at the start of every click, which covers every way the function can exit.
• A hidden card that was not hidden. The empty image took up space before it was made. A style rule written for its id was overriding the class meant to hide it. I learned that an id rule beats a class rule, and wrote a more specific one.
• A card drawn on top of the grid. Anything placed after the grid overlapped it, because the browser measured the grid as shorter than it was. I changed how the boxes are sized and moved the card above the grid.
• A link that led nowhere. After I moved the app into its own folder, its link back pointed at itself. Relative links change meaning when a file moves.
• Empty input. Clicking with no birthday showed "NaN weeks". I added checks for missing dates, future dates, and a lifespan shorter than the person's age.

How I built it

I built this with an AI assistant as my tutor. We worked one step at a time: I ran each piece, broke it on purpose to see what failure looks like, and explained it back before moving on. I use AI to build, and I make sure I understand what gets built.

What is next

A check on phone screens, terms of use and a privacy policy, and then a public launch.

← Back to all work