• 本篇文章目錄

1. 前言：為什麼想做「醫藥健康小工具箱」？
2. 專案核心特色與 4 大工具介紹
3. 畫面設計藍圖與 UI/UX 思考
4. 技術選型與資料夾架構
5. 未來 30 天的挑戰地圖

一、 前言：為什麼想做「醫藥健康小工具箱」？

在日常生活中，我們或多或少都遇過以下這些狀況：

• 「這瓶眼藥水到底是什麼時候開的？是不是已經過期了？」
• 「小朋友感冒發燒，藥包上的劑量該怎麼算才安全？」
• 「今天帶奶奶看診拿了好多藥，怎樣才能幫她整理出一張清楚的『早/中/晚/睡前』用藥時間表，甚至印出來貼在冰箱上？」

《醫藥健康小工具箱》是一款專為「家庭照護情境」打造的免下載、免登入輕量化網頁工具。針對兒童照護、長者用藥、眼藥水效期追蹤、日常健康管理四大常見痛點，提供一站式的防呆與自動化協助，讓健康管理變得簡單、安心且無負擔。

二、 專案核心特色與4大工具介紹

《醫藥健康小工具箱》將包含以下 4 個實用功能：

1. Tool 1：生理指標計算器 (BMI / BMR / TDEE)
   • 輸入身高、體重、年齡與活動量，快速計算每日熱量需求，並附帶動態燈號警示。
   • 適用於日常健康維護與慢性病飲食管理。
2. Tool 2：兒童用藥劑量換算器
   • 結合揚氏公式 (Young's Rule) 與克拉克公式 (Clark's Rule)，協助家長換算安全的兒童用藥劑量。
   • 適用於深夜緊急退燒藥水驗算與海外成藥劑量確認。
3. Tool 3：每日用藥時間表生成器
   • 輸入藥品與服用時段（早/中/晚/睡前），動態生成矩陣時間表，並支援 一鍵列印當日紙本 與 LocalStorage 本地記憶。
   • 適用於多重用藥長者與複雜醫囑的矩陣清單。
4. Tool 4：特殊藥品開瓶倒數計時器
   • 設定開瓶日期與自訂效期天數（如 28 天），自動計算剩餘天數與過期警示，讓過期藥品不再危害健康。
   • 適用於散瞳劑、眼藥水與室溫保存藥品的安全效期追蹤。

三、 畫面設計藍圖與UI/UX思考

為了降低使用者在面對醫療主題時的焦慮感，UI 設計採用了溫和療癒的馬卡龍色系，搭配卡片式排版與自適應 RWD 佈局。

設計視覺規範：

• 主色調：彩色頁首、米白色底色
• 排版架構：頂端選單 (Tab Navigation) + 4 大獨立工具卡片 (Tool Cards)
• 互動體驗：無需刷新頁面（SPA 風格切換）、清晰的狀態標籤 (Badge) 與一鍵清空功能

四、 技術選型與資料夾架構

為了貫徹「實戰與代碼重構」的精神，本專案完全不使用前端框架（如 React / Vue）或 CSS 框架（如 Bootstrap / Tailwind），純粹依靠 VS Code 與原生 Web 技術開發。

專案目錄結構規劃

med-toolbox/
├── index.html              # 網頁主要骨架 (包含 4 個 Tool Section)
├── css/
│   ├── style.css           # 全局Reset、CSS變數系統與主佈局
│   └── components.css      # 通用元件樣式 (按鈕, 表格, 標籤, 列印樣式)
├── js/
│   ├── app.js              # 全局控制 (Tab 切換邏輯)
│   ├── tool1-calculator.js # 生理指標計算邏輯
│   ├── tool2-dosage.js     # 兒童劑量換算邏輯
│   ├── tool3-schedule.js   # 時間表生成、列印與 LocalStorage 記憶
│   └── tool4-timer.js      # 開瓶計時、自訂效期與 LocalStorage 記憶
└── README.md               # 專案說明文件

五、 未來30天的挑戰地圖

在接下來的29天裡，我會將整個開發過程拆解為 「HTML/CSS 基礎元件 ➔ DOM 操作與演算法 ➔ 動態 UI與 LocalStorage 記憶 ➔ 部署與總結」 的漸進式步驟：

• Day 02 ~ Day 07：環境建置與馬卡龍 UI 切版（Flexbox, Grid, RWD, CSS Variables）
• Day 08 ~ Day 13：Tool 1 生理指標計算器（DOM 操作、數學運算、表單防呆）
• Day 14 ~ Day 18：Tool 2 兒童用藥劑量換算器（下拉選單連動、純函式重構）
• Day 19 ~ Day 23：Tool 3 用藥時間表（四時段矩陣、動態 DOM、一鍵列印）
• Day 24 ~ Day 27：Tool 4 開瓶計時器與全站 LocalStorage 本地資料記憶
• Day 28 ~ Day 30：SPA 頁籤整合、GitHub Pages 部署上線與完賽總結

結語

這是我的第一個鐵人賽作品，希望透過這30天的實作，不僅能提升自己的前端語法掌握度，更能做出一款真正能幫助到家人的實用小工具。