Projects › Everyday tools › Habit tracker
Make your own habit tracker with AI
Try it first: add a habit, tick today, and watch your streak start. It's free, it saves on your own device, and there's no account. Then build one exactly the way you want it.
Click a square to tick it, click again to undo. Click a habit's name to rename it. Everything saves in this browser only.
Your own habit tracker, in under an hour
You'll describe the tracker to a free AI assistant, paste what it writes into a file, and open it in your browser. It does what you need and nothing else: no nagging, no subscription.
- A monthly grid with one row per habit and one square per day
- Click a square to tick it off, click again to undo
- Current streak and best streak for each habit
- A progress bar showing how much of this month you've completed
- Add, rename and delete habits, each with its own colour
- Everything saved in your browser. Nothing is uploaded anywhere.
Good for: anyone starting a New Year's resolution, people who find visual tracking motivating (including many people with ADHD), and anyone building a routine.
What you need
Build it in six steps
Ask for the tracker
Copy this prompt into your AI assistant. Change the example habits to your own:
Copy this promptI don't know how to code. Please make me a personal habit tracker that runs in a web browser. Requirements: - ONE single HTML file (HTML, CSS and JavaScript together), no external libraries, works offline. I will save it and double-click to open it. - A grid for the current month: one row per habit, one column per day. Today's column is highlighted. - Clicking a square ticks it (filled with colour). Clicking again unticks it. - Start with these habits: Drink 2 litres of water, Walk 20 minutes, Read 10 pages. - Save everything in the browser using localStorage so my ticks are still there when I reopen the file. - Clean, calm, modern design with plenty of white space. Works on a phone too. Please give me the complete file in one code block, then tell me in simple steps how to save and open it.
Copy the code, paste it into your text editor, and save it as habits.html. Double-click the file to open it in your browser. Tick today's squares. Close the browser, open the file again, and your ticks will still be there.
Add streaks and progress
Streaks are what keep people going. Ask for them:
Copy this promptThat works, thank you. Please add: - Next to each habit, its current streak (consecutive days ticked up to today) and its best ever streak, with a small flame icon - A progress bar at the top showing what percentage of possible ticks I've done this month so far - A short encouraging message that changes with progress, e.g. "Great start!" under 25%, "Keep going!" under 75%, "Amazing month!" above 75% Send me the complete updated file.
Always ask for the complete file. Then you can replace everything, save, and refresh (F5, or Cmd+R on a Mac). No hunting for where a snippet goes.Let yourself manage habits
Copy this promptPlease add a way to manage habits: - An "Add habit" button that asks for a name and lets me pick a colour from 8 nice options - Clicking a habit's name lets me rename it or delete it (ask "Are you sure?" before deleting) - Each habit's ticked squares use that habit's colour Send me the complete updated file.
Look back at previous months
Copy this promptPlease add arrows either side of the month name so I can go back to previous months and forward again (but not beyond the current month). Past months should still show my ticks and let me fix a day I forgot to tick. Send me the complete updated file.
Back up your data
Because your habits live in your browser, clearing your browser data would wipe them. Add a backup:
Copy this promptPlease add "Export backup" and "Import backup" buttons. Export should download all my habits and ticks as a JSON file with today's date in the name. Import should let me choose that file and restore everything, after asking me to confirm. Send me the complete updated file.
Do an export every month or so and keep the file somewhere safe, like your cloud storage.
Make it yours
Pick a look you'll enjoy opening every day:
Copy this promptPlease restyle the tracker as [choose one: a cosy bullet journal with a paper texture and handwritten-style font / a dark mode design with neon colours / a bright, playful design with rounded squares and a little confetti burst when I complete all habits for the day]. Send me the complete updated file.
Tip: make it easy to open every day. Drag habits.html onto your browser's bookmarks bar, or set it as your browser's home page.
Quick fixes
My ticks disappeared
Your browser treats a file in a different folder as a different site. If you moved or renamed habits.html, move it back. To be safe, keep it in one place and use the backup button.
It opens as text
The file was saved as habits.html.txt or as rich text. Re-save as plain text with exactly .html at the end.
The streak number looks wrong
Describe it plainly and the AI will fix it:
My "Walk" habit is ticked for the last 4 days including today, but the streak shows 3. Please fix the streak calculation and send me the complete file.
I can't see what's broken
Press F12 (Cmd+Option+I on a Mac), open the Console tab and paste any red error text into the chat.
Twist it into something else
The same prompts build lots of other trackers. Ask for:
A reading challenge tracker
books finished this year, with a goal and a bookshelf view
A water intake log
tap a glass each time you drink, resets at midnight
Language learning streaks
tick each day you practise, with a weekly goal
A medication chart
morning and evening squares, with a gentle reminder message
A kids' reward chart
stars instead of squares, and a prize when the row is full
Your habits are personal
Your habits are personal. With your own tracker, nobody sells your data, nothing nags you with notifications you didn't ask for, and there's nothing to pay for. And if you want a feature, you ask for it.