I Made a "Writing Habit Tracker" with ChatGPT! (Prompt Included)

Journaling, note-taking, writing novels, keeping a diary...
When you write various things every day, don't you sometimes think, "Oh, I forgot about this!" or "Wait, what else was I supposed to do...?"

I certainly do!!

So, I used vibe coding to create a "Writing Habit Tracker." Once you open this, it's clear at a glance what you want to write each day and what you've already done. I'm posting the prompt, so please feel free to use it.

▼ Here is what you can make (it fits on one screen on a PC for up to 31 days)

▼ Prompt (just copy and paste it to the AI)

以下の条件で、HTML・CSS・JavaScriptだけで動く、シンプルな「執筆ハビットトラッカー」のWebアプリを作ってください。

前提
1つの html ファイルだけで完結する形にしてください
初心者向けに、ファイルをそのまま保存してブラウザで開けば動くようにしてください
HTML、CSS、JavaScriptはすべて1ファイル内にまとめてください
ローカル環境で動作するようにしてください
データは localStorage に保存し、ブラウザを閉じても内容が残るようにしてください

必須機能
アプリ名は 「執筆ハビットトラッカー」
上部に 年 と 月 を入力する欄をつけてください
年月を保存できるようにしてください
初期化ボタン をつけてください
初期化ボタンを押したときは、実行前に confirm() で確認を表示してください
表は、縦軸がタスク、横軸が1〜31の日付 になるようにしてください
タスクは複数行持てるようにしてください
タスク行は追加できるようにしてください
タスク名は自由に編集できるようにしてください
タスク名は通常表示時はテキスト表示にして、ダブルクリックで編集モードに入るようにしてください
編集中に Enterで確定、Escapeでキャンセル できるようにしてください
タスク名を空欄にして確定した場合は、そのタスク行を削除する仕様にしてください
タスク名の下に補助テキストや説明文は表示しないでください
各マス目をクリックすると、水色の丸 がつくようにしてください
もう一度クリックすると、その丸が消えるようにしてください
丸の状態も localStorage に保存してください

見た目
シンプルでやさしい見た目にしてください
白ベースで、少しやわらかい印象にしてください
マス目は表形式で見やすくしてください
タスク列は左に固定、日付行は上に固定すると見やすいです
丸の色は水色にしてください
全体的に、手帳やハビットトラッカーのような、静かで使いやすい雰囲気にしてください

初期状態
初期タスクとして、以下の3つを入れてください
・ジャーナリング
・note
・小説
年と月は、最初は現在の年月を自動で入れてください

実装上の注意
ライブラリは使わず、素のHTML/CSS/JavaScriptだけで作ってください
できるだけコードを読みやすくしてください
コメントを適度に入れて、初心者にも分かりやすい形にしてください

出力形式
完成したコードを、最初から最後まで省略せずに、1つのコードブロックで全文出力してください
その後に、初心者向けに以下を簡単に説明してください
・どう保存するか
・どう開くか
・どこを変えると見た目や初期タスクを調整できるか

The records on the habit tracker are saved even after you close the browser.
So, it's convenient to bookmark the URL once it's finished!

▼ By the way, this is what I made at first

▽ Here is a summary of the prompt.

HTML、CSS、JavaScriptだけで動く、シンプルな自分用ことばメモアプリを作ってください。
機能は「入力欄」「追加ボタン」「一覧表示」「削除ボタン」だけで大丈夫です。
初心者向けに、ファイルをそのまま保存してブラウザで開けば動く形にしてください。
ブラウザを閉じても消えない保存機能もほしいです。

At first, I didn't know where or how to save it or how to open it in a browser, so I just vaguely asked ChatGPT, "I can't open it in the browser. Is it a problem with how I'm saving it?" It taught me kindly and thoroughly just from that!

▼ I also made a Kanban task management app (though I don't use it)

So, vibe coding is fun!
Since I'm with my computer all day, I want to move tools that I find myself thinking, "I have a smartphone app for this, but I never open it..." over to my computer if possible. It seems like it might also contribute to a digital detox.

I hope this article leads someone to their own vibe coding debut!

▼ Here are some other articles

▼ For first-time visitors