Day13打造一個糖尿病自我監測小工具：從0開始學前端

2025 iThome 鐵人賽

DAY 13

自我挑戰組

打造一個糖尿病自我監測小工具：從0開始學前端系列第 13 篇

17th鐵人賽

1155

2025-09-13 16:43:00

68 瀏覽

分享至

今天先稍微處理了一些不順眼的地方：

將 report.html、record.html 兩個頁面加上標題
將 record.html 頁面添加標題欄，以便回主頁或其他頁面
將表單不合理的地方修正
1. 只能儲存一次的紀錄
2. 用藥時間及藥物名稱修改
3. 輸入血糖值後，判斷血糖狀態

加標題

我都把他們加在<head>的部分。

report.html
```
<title>數據紀錄</title>
```
record.html
```
<title>填寫追蹤狀況</title>
```

record.html 頁面添加標題欄

    <nav>
        <a href="index.html">首頁</a>
        <a href="report.html">紀錄</a>
        <a href="record.html">填寫</a>
    </nav>

表單修正

只能存一次

目前寫的 localStorage 只能存一次的紀錄，所以要改成陣列的寫法。

let records = JSON.parse(localStorage.getItem("records")) || [];
records.push(newRecord);  // 新增一筆
localStorage.setItem("records", JSON.stringify(records));

用藥時間及藥物名稱修改

改成：用藥時間必填，藥物名稱設成「選填」

<form id="recordForm">
    <label>日期：
        <input type="date" name="date" required>
    </label><br>

    <label>體重(Kg)：
        <input type="number" name="weight" required>
    </label><br>

    <label>運動狀況：
        <input type="text" name="exercise_detail">
    </label><br>

    <label>用藥時間：
        <input type="time" name="medication_time" required>
    </label><br>

    <label>藥物名稱：
        <input type="text" name="medication_name">
    </label><br>

    <label>餐前血糖：
        <input type="number" name="bf_glucose" required>
    </label><br>

    <label>餐後血糖：
        <input type="number" name="af_glucose" required>
    </label><br>

    <label>備註：
        <input type="text" name="remark">
    </label><br>

    <button type="submit">儲存</button>
</form>

<script>
document.getElementById("recordForm").addEventListener("submit", function(e) {
    e.preventDefault();

    const record = {
        date: this.date.value,
        weight: this.weight.value,
        exercise_detail: this.exercise_detail.value,
        medication_time: this.medication_time.value, // 必填
        medication_name: this.medication_name.value, // 選填
        bf_glucose: this.bf_glucose.value,
        af_glucose: this.af_glucose.value,
        remark: this.remark.value
    };

    // 讀取舊資料（陣列）
    let records = JSON.parse(localStorage.getItem("records")) || [];
    records.push(record);

    // 存回去
    localStorage.setItem("records", JSON.stringify(records));

    alert("已儲存！");
    this.reset();
});
</script>

判斷血糖狀態

<table border="1" style="margin: 0 auto; text-align: center;">
    <caption style="font-size: 1.3em; font-weight: bold; margin-bottom: 10px;">
        糖尿病病患紀錄表
    </caption>
    
    <thead>
        <tr>
            <th>日期</th>
            <th>體重(Kg)</th>
            <th>運動狀況</th>
            <th>藥物使用</th>
            <th>餐前血糖</th>
            <th>餐後血糖</th>
            <th>血糖狀態</th> <!-- 新增 -->
            <th>備註</th>
        </tr>
    </thead>
    
    <tbody id="reportBody"></tbody>
</table>

<script>
document.addEventListener("DOMContentLoaded", function () {
    const records = JSON.parse(localStorage.getItem("records")) || [];
    const tbody = document.getElementById("reportBody");

    function getGlucoseStatus(value) {
        const v = parseInt(value, 10);
        if (isNaN(v)) return "未知";
        if (v < 70) return "過低";
        if (v <= 140) return "正常";
        if (v <= 200) return "偏高";
        return "過高";
    }

    records.forEach(record => {
        const row = document.createElement("tr");

        row.innerHTML = `
            <td>${record.date}</td>
            <td>${record.weight}</td>
            <td>${record.exercise_detail || "無"}</td>
            <td>${record.medication_time}${record.medication_name ? "，" + record.medication_name : ""}</td>
            <td>${record.bf_glucose}</td>
            <td>${record.af_glucose}</td>
            <td>${getGlucoseStatus(record.af_glucose)}</td> <!-- 判斷狀態 -->
            <td>${record.remark || ""}</td>
        `;

        tbody.appendChild(row);
    });
});
</script>

明天會附上結果。