卡片式文章列表
從同一份資料建立文章列表，並加入分類、關鍵字搜尋與沒有結果時的清楚回饋。
- 練習目標
- 讓文章容易尋找
- 使用技術
- CSS Grid、JavaScript
- 目前成果
- 首頁精選 3 篇，共整理 9 篇
我想練習什麼
文章變多之後，固定寫在 HTML 裡會很難維護。我把文章集中成資料，再由 JavaScript 產生列表，讓分類與搜尋可以同時運作。
修改過程
- 建立統一的文章標題、分類、日期與摘要資料。
- 加入分類按鈕與關鍵字搜尋。
- 只有真正沒有結果時才顯示空狀態。
- 清除搜尋後回到完整文章列表。
這次學到的事
互動功能的重點不是動畫，而是讓使用者更快找到內容。狀態管理清楚後，畫面也更容易維護。
實際使用全部文章搜尋 →