鐵人檔案
健康和醫療是人們生活中很重要的一環，本次挑戰我希望能以「家庭照護的全場景需求」為核心，運用前端技術（HTML/CSS/JS），打造零負擔、具備本地記憶功能的網頁工具箱。從兒童緊急用藥驗算、慢性病與多重用藥的時間表整理、眼藥水與特殊藥品開瓶效期追蹤，到日常生理指標計算，一站式解決全家人的健康管理痛點，讓藥物安全與健康維護變得簡單、直覺且安心。
本篇文章目錄 前言：從資料庫（Array）到畫面（DOM）的 bridge 核心技術解析：createElement vs innerHTML 選擇與安全性考...
本篇文章目錄 前言：從資料驅動 UI 看互動設計 動態 DOM 綁定的挑戰：為什麼 querySelector 抓不到新元素？ 解法介紹：事件代理 (Even...
本篇文章目錄 前言：為什麼網頁列印總是亂七八糟？ 列印樣式的核心技術：@media print 語法介紹 列印優化三大關鍵：隱藏無關元素、頁面佈局調整與配色優...
本篇文章目錄 前言：從日常用藥到「藥品保存期限」提醒 JavaScript 原生 Date 物件：時間運算的核心機制 表單互動：從 <input typ...
本篇文章目錄 前言：將開瓶效期轉化為動態時間軸 兩大核心機制拆解：倒數天數與動態百分比 實戰開發：自訂效期計算與 CSS 燈號切換 程式碼重點與體驗細節解析...
本篇文章目錄 前言：從「重新整理就歸零」到「狀態永久保存」 LocalStorage 核心原理：網頁瀏覽器的持久化資料庫 實戰 JS 開發：物件陣列序列化與儲...
本篇文章目錄 前言：資料的反序列化與狀態復原 兩大核心流程拆解：初始化載入與安全清空機制 實戰 JS 開發：JSON.parse() 恢復狀態與清空監聽 程式...
本篇文章目錄 前言：從多頁面跳轉到流暢的 SPA 切換體驗 兩大核心機制拆解：狀態歸零與動態 DOM 綁定 實戰 JS 開發：Tab 切換邏輯與屬性容錯 程式...
本篇文章目錄 前言：從本地開發到邁向全世界 兩大核心工具拆解：Git 版本控制與 GitHub Pages 實戰部署流程：版控建立與遠端儲存庫推送 觀念重點與...
本篇文章目錄 前言 專案成果總覽 GitHub Source Code 和網站連結 心得感想 一、 前言 在經過了30天的努力後，這個系列終於來到了結尾。作...
