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

2025 iThome 鐵人賽

DAY 22

自我挑戰組

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

17th鐵人賽

1155

2025-09-22 22:32:44

18 瀏覽

分享至

今天想來試試針對糖尿病患者「線上諮詢 / 留言板」的功能，目前想法是：

在主頁 index.html 有個框框可以點進去，框框會出現最新的三個問題，右上角有個按鈕「我要提問」可以點進去
點進去後到 consult.html 這個頁面，最上面有個視窗或框框可填寫問題
下面顯示以往問過的問題，但是是匿名的

具體作法

index.html

<!DOCTYPE html>
<html lang="zh-Hant">
<head>
  <meta charset="UTF-8">
  <title>首頁</title>
  <style>
    body { font-family: Arial, sans-serif; padding: 20px; }
    .consult-box { border: 1px solid #ccc; padding: 10px; max-width: 400px; }
    .question { margin: 5px 0; padding: 5px; border-bottom: 1px dashed #aaa; }
    a { display: inline-block; margin-top: 10px; }
  </style>
</head>
<body>
  <h1>糖尿病小護士 🩺</h1>

  <h2>最新諮詢</h2>
  <div class="consult-box" id="latestConsults"></div>
  <a href="consult.html">查看更多 →</a>

  <script src="index.js"></script>
</body>
</html>

JS 邏輯

document.addEventListener("DOMContentLoaded", () => {
  const box = document.getElementById("latestConsults");
  let consultations = JSON.parse(localStorage.getItem("consultations")) || [];

  // 取最後三筆，倒序
  const latest = consultations.slice(-3).reverse();

  if (latest.length === 0) {
    box.textContent = "目前還沒有諮詢問題。";
  } else {
    latest.forEach(c => {
      const div = document.createElement("div");
      div.className = "question";
      div.textContent = c.question;
      box.appendChild(div);
    });
  }
});

consult.html

<!DOCTYPE html>
<html lang="zh-Hant">
<head>
  <meta charset="UTF-8">
  <title>線上諮詢</title>
  <style>
    body { font-family: Arial, sans-serif; padding: 20px; }
    #consultForm { margin-bottom: 20px; }
    input, button { padding: 8px; margin: 5px; }
    .consult-item { border-bottom: 1px solid #ccc; padding: 10px; }
    .time { color: gray; font-size: 0.8em; }
  </style>
</head>
<body>
  <h1>線上諮詢 💬</h1>

  <form id="consultForm">
    <input type="text" id="questionInput" placeholder="輸入你的問題..." required>
    <button type="submit">送出</button>
  </form>

  <h2>歷史問題</h2>
  <div id="consultList"></div>

  <script src="consult.js"></script>
</body>
</html>

其 JS 邏輯

document.addEventListener("DOMContentLoaded", () => {
  const form = document.getElementById("consultForm");
  const input = document.getElementById("questionInput");
  const list = document.getElementById("consultList");

  let consultations = JSON.parse(localStorage.getItem("consultations")) || [];

  function saveConsultations() {
    localStorage.setItem("consultations", JSON.stringify(consultations));
  }

  function renderList() {
    list.innerHTML = "";
    consultations.slice().reverse().forEach(c => {
      const div = document.createElement("div");
      div.className = "consult-item";
      div.innerHTML = `<div>${c.question}</div><div class="time">${c.time}</div>`;
      list.appendChild(div);
    });
  }

  form.addEventListener("submit", (e) => {
    e.preventDefault();
    const text = input.value.trim();
    if (!text) return;

    const newConsult = {
      question: text,
      time: new Date().toLocaleString()
    };

    consultations.push(newConsult);
    saveConsultations();
    renderList();
    input.value = "";
  });

  renderList();
});

明天來實作歐！