昨天第一次讓 Codex 幫我建立了 AI 保健小幫手的首頁，當時主要還是把 UI 做出來。

今天我主要把重點放在首頁的互動功能，先不加入資料庫、AI API 或推播通知，而是把目前已經有的功能做好。

一、日期自動更新

之前如果直接把日期寫在網頁裡，就只能顯示固定的日期。

所以今天我讓系統改成根據使用者的裝置，自動取得現在的日期和星期。

例如：

2026/09/21 星期一

這樣之後每天使用時就不用手動修改日期。

二、加入今日用藥的互動功能

接下來是最重要的用藥區域。

今天加入了「已服用／未服用」的切換功能。

使用者可以直接操作：

未服用 → 已服用

例如原本：

今日完成：1 / 2

按下另一個藥物的完成按鈕後，就會變成：

今日完成：2 / 2

三、加入喝水紀錄

今天也把喝水功能做得更有互動性。
每按一次喝水按鈕，就會增加一杯。

例如：

今日喝水：3 杯

按一次之後：

今日喝水：4 杯

同時也會更新進度條。

目前先把一天 8 杯設定成目標，當喝水紀錄達到 8 杯時，畫面會顯示已經達標。

四、加入每日狀況

之前只有規劃「每日狀況」這個功能
使用者可以從不同的狀況中選擇一個，選擇之後畫面會顯示目前選取的狀態。

這樣之後如果要讓每日狀況跟歷史紀錄連結，就有一個基本的資料可以延伸。

五、睡眠紀錄

睡眠紀錄今天沒有大幅修改，目前先讓它持續顯示在首頁。

這樣首頁就可以同時看到：

• 💊 今日用藥
• 💧 喝水
• 😴 睡眠
• 📝 每日狀況

六、 Codex 修改程式

今天我繼續讓 Codex 修改昨天建立的網頁，要求它在原本的 UI 基礎上增加互動功能，同時特別限制目前不要加入資料庫、AI API 或推播。

** 我下的 Prompt：**

「請繼續修改目前的 AI 保健小幫手首頁。在不破壞目前 UI 設計的前提下，加入自動顯示今天日期的功能，並讓今日用藥、喝水紀錄、睡眠紀錄和每日狀況可以呈現在首頁。請先加入基本的互動功能，例如用藥完成按鈕和喝水紀錄按鈕。請保持程式結構清楚，並在修改完成後說明你修改了哪些地方。暫時不要加入資料庫、AI API 或真正的推播通知。」

我覺得今天比較重要的一點是，我開始學著不要只跟 AI 說「幫我做功能」。

而是把現在的版本 → 想增加的功能 → 暫時不要做的功能講清楚。
這樣 Codex 修改的範圍比較明確。

七、今天實際完成的成果

目前 index.html 已經加入：

• ✅ 日期會根據使用者裝置自動顯示
• ✅ 自動顯示今天的星期
• ✅ 今日用藥可以切換「已服用／未服用」
• ✅ 用藥完成數量會同步更新
• ✅ 喝水按鈕每次增加一杯
• ✅ 喝水進度條會跟著更新
• ✅ 喝到 8 杯時會顯示達標
• ✅ 每日狀況可以選擇並顯示選取狀態
• ✅ 睡眠紀錄持續顯示在首頁
• ✅ 加入無障礙狀態提示
• ✅ 加入必要的程式註解
• ✅ 確認 JavaScript 語法正確

目前檔案的位置是：

C:/Users/user/Documents/Codex/2026-09-20/
ai-html-css-javascript-ui-ai/outputs/index.html

目前還沒有加入：

• ❌ 資料庫
• ❌ AI API
• ❌ 推播通知

八、今天的感覺

昨天打開網頁時，看到一個畫面
今天則可以真的按按鈕，看到數字、進度和狀態跟著改變。

例如喝水從 3 杯變成 4 杯，或者把用藥從「未服用」改成「已服用」，這些小地方讓它開始比較像一個可以使用的工具。

明天要做什麼？

Day 8｜建立用藥管理：開始真正記錄藥物

今天完成的是首頁的互動。
明天要開始進入真正的核心功能之一——用藥管理。

我會研究如何讓使用者自己新增藥物、設定用藥時間，並讓這些資料可以出現在用藥管理頁面。