Skip to main content

°FAI – Build your own time tracker.

Bouncing between projects, jumping on a call, answering a “quick question” that ate forty minutes, at the end of the week I couldn’t tell you where any of it went. So I built a time tracker. Not an app I downloaded. Not a subscription. One HTML file that runs in any web browser, on my phone or my computer, and keeps track of every project I touch. °FAI – Build your own time tracker.

You can build your own with a simple set of instructions and an AI. That’s the whole article.

One file. No app store. No server.

The entire tracker, layout, styling, logic, lives in a single .html file. Double-click it and it opens in a browser. Save it to your phone’s home screen and it works like an app. Because it’s just one file, you can copy it, back it up, email it to yourself, move it anywhere.

There’s nothing to install and nobody to pay. The browser you already have does all the work.

What I built

Mine has a row of tappable buttons across the top, one for each client and project I’m working on. Tap a category, hit Start, do the work, hit Stop. The entry lands in a log with its category and how long it took.

The data saves right in the browser’s local storage, one key per day, so each morning starts fresh but past days stay retrievable. At the bottom, the page totals everything up: overall hours, number of entries, and a breakdown per category. And because I forget to hit Stop sometimes, because I do — every entry can be edited or deleted, and the category list itself is editable in the app. No touching the code to add a new project.

You don’t need to know how to code. You need to know what you want, and you need to say it clearly. Here’s the generic recipe — paste it into an AI and ask it to build the file:

°FAI – Build your own time tracker. Hand this recipe to an AI.

  1. Create one HTML file. Open any text editor, make a new file, save it with a .html ending. Everything lives in this one file.
  2. Decide what you’re tracking. Customers, projects, task types — whatever you log time against. These become tappable buttons at the top of the page.
  3. Build the layout. Three sections: the category buttons, a start/stop timer (or fields to enter a time range manually), and a log listing everything recorded today.
  4. Add the timer logic. Tapping a category and pressing Start records the current time. Stop records the end time and calculates the duration. Each completed entry goes in the log.
  5. Save the data in the browser. Use local storage so entries survive closing the page. Save under a key that includes the date — one key per day.
  6. Add a summary. Total hours, number of entries, a per-category breakdown, displayed below the log.
  7. Add editing. Let entries be edited or deleted, add a “clear day” button, and make the category list editable in the app.
  8. Use it. Open it in a browser or save it to your phone’s home screen. It’s yours now.

That’s it. A list of categories, a timer, browser storage, a daily summary. I know it works because that’s exactly the recipe my own tracker follows.

The second step: a sheet that remembers.

Local storage is great for today. But I wanted history, weeks and months of it. So there’s a secondary step: connect the tracker to a Google Sheet, and when I tell it to, it uploads the day’s entries. The sheet becomes the long-term record. The file stays the fast, tappable, daily tool.

You don’t need this part on day one. Build the one-file version first. Add the sheet when you’re ready.

The honest part

I’m not going to tell you this replaces a full time-tracking platform for a big team. It doesn’t. But for one person trying to see where the hours actually go, it’s more than enough, and you built it, so you can change it. New client? New button. Want a weekly view? Ask the AI to add one.

What this really shows: the barrier between “I wish I had a tool for this” and “I have a tool for this” is now a clearly written paragraph. Describe what you want. Let the AI build it.

That’s the whole recipe. °FAI – Build your own time tracker.

Tools used:

  • Claude (built the tracker from the recipe, drafted this article)
  • A text editor (any one — that’s the point)
  • A web browser (the whole runtime, on phone and computer)
  • Google Sheets (the optional long-term memory)

Comments

Leave a comment