Bzzdex
← アプリを作る

水分補給トラッカー

水を1杯飲むたびにタップして記録 · 暮らし ○○

ここを変えてみてください

プロンプト

目標をコップ8杯とし、ボトルに水がたまっていくで表示する水分補給トラッカーを作成してください。インストール不要で他のファイルも一切使わず、ブラウザで開くだけで動く単一のHTMLファイルにしてください。CSSとJavaScriptはその中に含めてください。画像ファイルや外部URLは一切使用せず、記号が必要な場合は絵文字や文字を使用してください。

1杯分を追加する大きなボタンと、押し間違えたときに直前の1杯を取り消す小さめのボタンを配置してください。

画面のメイン部分には、数字ではなくビジュアルでどれくらい飲んだか(たまり具合)を表示してください。その下に小さめの文字で数字を添えてください。

日付が変わる深夜0時にリセットして空にし、過去7日間の履歴をその下に小さく一列で並べて、傾向がわかるようにしてください。

目標を達成したときは、短く気持ちの良いメッセージを1回表示してください。それ以降にさらに飲んだコップごとに毎回お祝いメッセージを出し続けるのはやめてください。

ブラウザを閉じても、すべてのデータがブラウザ内に保存されるようにしてください。

完成したら、日付が変わったときに前日の記録を失うことなく新しい日が始まるかを確認してください。

使った技: ファイルは1つだけ · まず何を作るか伝える · 表示するものを決める

日付が自動で切り替わらない場合は、「ページを読み込むたびに保存された日付と今日の日付を比較してください」と伝えてください。


返ってきたものを貼り付けてください

作るときに使ったプロンプトも残す(任意)

AIに入力した内容を貼り付けてください。公開するかは後で決められます。

0

こんなものもあります