摘要
今天先顯示一個「引起共鳴」的進場畫面，按下「一起看看今天怎麼了 →」後再切到既有的拖延紀錄表單。專注在 DOM 顯示/隱藏與焦點管理，確保新手容易上手且與 Day 10/11 的清單功能無衝突。

為什麼要加這一頁？

• 降低心理門檻：先讓使用者覺得「這拖延症狀根本就是我」，再動手，讓回填表單更自然，並學習到如何結合「產品體驗」和「程式功能」。
• 持續堆疊：仍使用最熟悉的 DOM API，與前幾天的事件、渲染邏輯相容。

學習重點

• 狀態切換：用 hidden 屬性切換兩個區塊顯示。
• 事件綁定：click → 隱藏引導、顯示表單。
• 焦點管理：切到表單後自動把游標放到第一個可輸入欄位（a11y/UX）。
• 與現有程式互動：若有 Day 7/9 的 renderHistory()，切頁後可順手刷新一次。

核心流程

進入 → 共鳴畫面 → 點按 → 表單

1. HTML 結構
   • #resonanceScreen：引起共鳴畫面（進場先顯示）。
   • #recordFormSection：原本的表單/清單（進場先隱藏）。
   • 入口按鈕文案：「一起看看今天怎麼了 →」
2. 初始化
   initIntro() 以 showIntro() 開場 → 顯示共鳴、隱藏表單。
3. 互動
   點擊 #btnStart → 呼叫 hideIntro() → 隱藏共鳴、顯示表單、聚焦第一欄，若存在 renderHistory() 則刷新。

實作

假設你已具備 Day 5/6 的 readRecords()、writeRecords()、Day 7/9 的 renderHistory() 與 Day 10/11 的清單功能外框。以下片段著重新增／修改的進場畫面邏輯。
HTML：

<!-- 引起共鳴畫面 -->
<section id="resonanceScreen" aria-labelledby="res-title" role="dialog" aria-modal="true">
  <div>
    <h1 id="res-title">你是不是也常常…</h1>
    <ul>
      <li>看了一堆自我提升影片，結果還是沒開始？</li>
      <li>打開 IG／小紅書 想找靈感，結果一個多小時過去？</li>
      <li>明明有想做的事，卻又莫名其妙滑到半夜？</li>
    </ul>
    <p><strong>想想看，假日想做但沒做的事通常是什麼？</strong></p>

    <div>
      <button id="btnStart" aria-describedby="res-desc">一起看看今天怎麼了 →</button>
    </div>
  </div>
</section>

<!-- 紀錄表單 -->
<section id="recordFormSection">
<h1>I want to...</h1>
...
</section>

JavaScript：

// ===== 引起共鳴畫面 =====
// 元素
const introEl   = document.getElementById('resonanceScreen');
const startBtn  = document.getElementById('btnStart');
const formSection = document.getElementById('recordFormSection');

// 進入頁面時只顯示共鳴畫面：把表單區「隱藏」
function showIntro() {
  if (!introEl) return;
  introEl.hidden = false;
  if (formSection) formSection.hidden = true;   // ← 隱藏
}

// 按「一起看看今天怎麼了 →」後：隱藏共鳴、顯示表單、聚焦第一欄
function hideIntro() {
  if (!introEl) return;
  introEl.hidden = true;
  if (formSection) formSection.hidden = false;  // ← 顯示回來
  focusFirstField();
  if (typeof renderHistory === 'function') {
    try { renderHistory(); } catch (_) {}
  }
}

// 嘗試把焦點放到第一個可輸入欄位
function focusFirstField() {
  const first = document.querySelector('#taskInput');
  if (first && typeof first.focus === 'function') {
    try { first.focus(); } catch (_) {}
  }
}

// 事件：點按開始 → 切換到表單
startBtn?.addEventListener('click', () => {
  hideIntro();
});

// 初始化：一律顯示共鳴畫面
(function initIntro() {
  showIntro();  // 預設進來先顯示共鳴、隱藏表單
})();

驗證

1. 進場狀態：重新整理 → 只看到共鳴畫面；表單被隱藏。
   

2. 按鈕切換：點「一起看看今天怎麼了 →」→ 共鳴消失、表單出現。

3. 焦點管理：切換後游標在 #taskInput（或第一個可輸入欄位）。
   

4. 功能相容：既有的新增/排序/篩選/刪除/Undo 都能正常運作。

5. 結構正確：表單內容確實包在 #recordFormSection 內；script 載入順序在 HTML 之後（或用 defer / DOMContentLoaded）。

常見錯誤 & 排查

• 症狀：兩塊同時可見
  檢查 showIntro() 是否有 formSection.hidden = true，以及 #recordFormSection 是否正確包住整個表單。
• 症狀：按鈕沒反應
  確認 id="btnStart" 是否拼對、script.js 是否在元素之後載入、或是否用 defer。
• 症狀：焦點沒移到輸入框
  檢查頁面是否存在 #taskInput；否則請調整 querySelector 的選擇器。