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

2025 iThome 鐵人賽

DAY 6

自我挑戰組

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

17th鐵人賽

1155

2025-09-06 12:03:26

67 瀏覽

分享至

今天就來實作昨天做的東西，自己打過一次還是會比較有印象的！

HTML補全

index.html 程式碼

<!DOCTYPE html>
<html lang="zh-Hant">
<head>
    <meta charset="UTF-8">
    <title>糖尿病小護士</title>
    <link rel="stylesheet" href="style.css">
</head>

<body>
    <!-- 頁首 -->
    <header>
        <h1>糖尿病小護士</h1>
        <nav>
            <a href="index.html">首頁</a>
            <a href="report.html">紀錄</a>
            <a href="record.html">填寫</a>
        </nav>
    </header>

    <!-- 主要內容 -->
    <main>
        <section>
            <h2>什麼是糖尿病？</h2>
            <p>
                糖尿病是一種身體處理糖分出問題的疾病。當我們吃下食物後，身體需要一種叫做
                <b>胰島素</b>的東西來幫助把糖分送進細胞裡，讓我們有力氣活動。
            </p>
            <p>
                如果胰島素不夠或沒作用，糖分就會留在血液裡，讓血糖變得太高，這就是糖尿病。
            </p>
            <p>
                得了糖尿病的人會常常口渴、想上廁所、覺得累，但只要好好控制飲食和運動，就能把它照顧好。
            </p>
        </section>

        <section>
            <h2>常見糖尿病種類</h2>
            <img 
                src="https://www-ws.gov.taipei/001/Upload/684/relpic/45208/137453/9c3a93a9-4be9-49f0-a9f2-13ecc4940023.jpg" 
                alt="哎呀...網路不太好！！"
            />

            <table>
                <caption>糖尿病種類簡易表格整理</caption>
                <thead>
                    <tr>
                        <th>種類</th>
                        <th>原因</th>
                        <th>特點</th>
                        <th>易發族群</th>
                    </tr>
                </thead>
                <tbody>
                    <tr>
                        <td>第一型</td>
                        <td>遺傳</td>
                        <td>無胰島素，終身注射</td>
                        <td>小孩、青少年</td>
                    </tr>
                    <tr>
                        <td>第二型</td>
                        <td>家族病、生活</td>
                        <td>有胰島素沒作用，藥+生活習慣改善</td>
                        <td>中年人、長輩</td>
                    </tr>
                    <tr>
                        <td>妊娠型</td>
                        <td>懷孕賀爾蒙變化</td>
                        <td>通常生完恢復</td>
                        <td>懷孕女性</td>
                    </tr>
                    <tr>
                        <td>其他型</td>
                        <td>其他疾病引發</td>
                        <td>與特定疾病或藥物有關，可預防</td>
                        <td>無</td>
                    </tr>
                </tbody>
            </table>

            <ol>
                <li>
                    <strong>第一型糖尿病(遺傳性)</strong>
                    <p>這種糖尿病通常在年紀很小的時候就會發病...</p>
                    <ul>
                        <li>特點：年紀小、發病快、需要終身注射胰島素。</li>
                        <li>常見於：小孩、青少年，也叫做「兒童型糖尿病」</li>
                    </ul>   
                </li>
                <li>
                    <strong>第二型糖尿病(家族病史＋生活習慣)</strong>
                    <p>這是 <b>最常見</b> 的糖尿病類型...</p>
                    <ul>
                        <li>特點：發病慢、不一定要打針，可用藥＋生活改善控制。</li>
                        <li>常見於：中年人、長輩，但現在也有年輕人因生活習慣不良而得到。</li>
                    </ul>
                </li>
                <li>
                    <strong>妊娠糖尿病(懷孕賀爾蒙變化)</strong>
                    <p>這是 <b>懷孕中的女性</b> 才會有的糖尿病...</p>
                    <ul>
                        <li>特點：懷孕期間才發生，通常生完會恢復。</li>
                        <li>需要注意：控制不好會影響胎兒健康，也可能增加媽媽未來得糖尿病的機率。</li>
                    </ul>
                </li>
                <li>
                    <strong>其他糖尿病(其他疾病引起)</strong>
                    <p>除了以上三種，還有一些比較少見的糖尿病...</p>
                    <ul>
                        <li>胰臟本身的疾病（像胰臟炎、胰臟癌）</li>
                        <li>某些內分泌疾病（賀爾蒙分泌異常）</li>
                        <li>長期使用某些藥物（如類固醇）</li>
                    </ul>
                </li>
            </ol>
        </section>

        <section>
            <h3>延伸閱讀：衛服部-糖尿病</h3>
            <a href="https://www.hpa.gov.tw/Pages/List.aspx?nodeid=359" target="_blank">
                點我前往官方說明
            </a>
        </section>
    </main>

    <!-- 頁尾 -->
    <footer>
        <p>© 2025 糖尿病小護士</p>
    </footer>
</body>
</html>

record.html 程式碼

<head>
    <link rel="stylesheet" href="style.css">
</head>

<h1>填寫追蹤狀況</h1>

<form>
    <label for="date">日期：</label>
    <input type="date" id="date" name="date">

    <label for="weight">體重：</label>
    <input type="number" id="weight" name="weight">

    <!-- 運動狀況 (radio 單選) -->
    <label>運動狀況：</label>
    <div class="form-group">
        <input type="radio" id="exercise_yes" name="exercise" value="yes">
        <label for="exercise_yes">有</label>

        <input type="radio" id="exercise_no" name="exercise" value="no">
        <label for="exercise_no">沒有</label>
    </div>
    <input type="text" id="exercise_detail" placeholder="請填寫運動內容">

    <!-- 藥物使用 (radio + checkbox 多選) -->
    <label>藥物使用：</label>
    <div class="form-group">
        <input type="radio" id="med_yes" name="medication" value="yes">
        <label for="med_yes">有</label>

        <input type="radio" id="med_no" name="medication" value="no">
        <label for="med_no">沒有</label>
    </div>
    <input type="text" name="medication_detail" placeholder="請填寫時間和藥物">

    <!-- 藥物補充選項 (checkbox 多選) -->
    <div class="form-group">
        <input type="checkbox" id="side_effect" name="med_extra" value="side_effect">
        <label for="side_effect">有副作用</label>

        <input type="checkbox" id="missed" name="med_extra" value="missed">
        <label for="missed">曾忘記服藥</label>
    </div>

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

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

    <!-- 備註 textarea (多行輸入) -->
    <label for="remark">備註：</label>
    <textarea id="remark" name="remark" rows="3" placeholder="請輸入其他需要說明的事項"></textarea>

    <button type="submit">送出</button>
</form>

CSS的補全

/* ====== 全域設定 ====== */
body {
    font-family: "Microsoft JhengHei", Arial, sans-serif;
    margin: 20px;
    line-height: 1.6;
    background-color: #fdfdfd;
    color: #333;
}

/* ====== 導覽列 ====== */
nav {
    background-color: #356B9A;
    padding: 10px;
    text-align: center;
    border-radius: 6px;
    margin-bottom: 20px;
}

nav a {
    color: white;
    text-decoration: none;
    margin: 0 15px;
    font-weight: bold;
}

nav a:hover {
    text-decoration: underline;
}

/* ====== 標題 ====== */
h1 {
    text-align: center;
    color: #2c3e50;
    margin-bottom: 15px;
}

h2, h3 {
    color: #34495e;
    margin-top: 30px;
}

/* ====== 文字 ====== */
p {
    margin-bottom: 15px;
    text-align: justify;
}

ol {
    margin-left: 25px;
}

/* ====== 圖片 ====== */
img {
    display: block;
    margin: 15px auto;
    width: 80%;
    max-width: 600px;
    border-radius: 8px;
    box-shadow: 0 2px 8px rgba(0,0,0,0.15);
}

/* ====== 表格 ====== */
table {
    border-collapse: collapse;
    margin: 20px auto;
    width: 90%;
    max-width: 800px;
    text-align: center;
    background-color: white;
    box-shadow: 0 2px 6px rgba(0,0,0,0.1);
}

caption {
    font-size: 1.2em;
    font-weight: bold;
    margin-bottom: 10px;
    color: #2c3e50;
}

th, td {
    border: 1px solid #ccc;
    padding: 10px;
}

th {
    background-color: #f2f2f2;
}

/* ====== 連結 ====== */
a {
    color: #007BFF;
}

a:hover {
    color: #0056b3;
}

/* ====== 表單（record.html 用） ====== */
form {
    max-width: 600px;
    margin: 20px auto;
    padding: 15px;
    background: #fff;
    border-radius: 8px;
    box-shadow: 0 2px 8px rgba(0,0,0,0.1);
}

label {
    display: block;
    margin-top: 10px;
    font-weight: bold;
}

input[type="text"],
input[type="number"],
textarea,
select {
    width: 100%;
    padding: 8px;
    margin-top: 5px;
    border: 1px solid #ccc;
    border-radius: 4px;
    box-sizing: border-box;
}

/* ====== 單選、複選（額外優化） ====== */
input[type="radio"],
input[type="checkbox"] {
    margin-right: 5px;
    margin-left: 10px;
}

.form-group {
    margin-top: 15px;
}

/* ====== textarea 多行輸入 ====== */
textarea {
    resize: vertical; /* 只能上下拉，不會破壞排版 */
}

/* ====== 按鈕 ====== */
button {
    margin-top: 15px;
    padding: 10px 20px;
    background-color: #4CAF50;
    border: none;
    color: white;
    border-radius: 4px;
    cursor: pointer;
    font-size: 1em;
}

button:hover {
    background-color: #45a049;
}

/* ====== 語義化標籤（header, footer, section） ====== */
header {
    background-color: #f8f9fa;
    padding: 20px;
    text-align: center;
    border-bottom: 2px solid #ddd;
}

section {
    margin: 30px auto;
    max-width: 900px;
    padding: 15px;
}

footer {
    background-color: #356B9A;
    color: white;
    text-align: center;
    padding: 15px;
    margin-top: 30px;
    border-radius: 6px;
}