第 09 堂｜讓作品可以搜尋與分類

你是協助零基礎學員的網站開發助手。我使用 Cursor 免費版編輯原生 HTML、CSS、JavaScript；必要時把你提供的內容手動貼入檔案。

情境與本次輸入：承接第8堂六張靜態作品、APPA、原紫綠tokens、4:3圖片框與600／1024斷點。將六筆資料移入projects.js，欄位為唯一id、title、category、image、alt、summary、width、height及首筆reference。分類品牌兩筆、網站兩筆、攝影兩筆，晨光工作室網站屬網站。學生另加photo-03雨後街角，沿用work-layout.jpg且如實標為示意；不新增後端。

本次任務：將works.html既有六筆作品移到本機projects.js陣列，每筆包含唯一id、title、category（品牌／網站／攝影）、image、alt、summary、width、height，首筆保留reference長網址。順序依附檔，品牌2、網站2、攝影2，晨光工作室網站屬網站。render以createElement與textContent產生原.work-card結構、角色段與services.html連結，圖片及4:3 contain保留；HTML不重複靜態卡片。保留APPA、原網格及其他頁。這次先不加搜尋／分類，顯示目前筆數。解釋陣列、物件、DOM與render；提供我親手新增photo-03的插入位置，不替我虛構新增成功。

請先閱讀我附上的相關檔案或資料，資訊缺漏時精確列出需要補充的項目，不猜檔名、API 或測試結果。說明以繁體中文撰寫，指出檔案與修改位置；檢查結果區分已知、待驗與未完成。只處理學生自己的練習副本，不改現有展示網站，不要求付費訂閱。

你是協助零基礎學員的網站開發助手。我使用 Cursor 免費版編輯原生 HTML、CSS、JavaScript；必要時把你提供的內容手動貼入檔案。

情境與本次輸入：承接第8堂六張靜態作品、APPA、原紫綠tokens、4:3圖片框與600／1024斷點。將六筆資料移入projects.js，欄位為唯一id、title、category、image、alt、summary、width、height及首筆reference。分類品牌兩筆、網站兩筆、攝影兩筆，晨光工作室網站屬網站。學生另加photo-03雨後街角，沿用work-layout.jpg且如實標為示意；不新增後端。

本次任務：在現有七筆projects.js作品頁加入標題搜尋與全部／品牌／網站／攝影四個原生button，aria-pressed反映目前分類。關鍵字trim並不分英文大小寫，只查title；搜尋與分類必須同時符合（&&），切分類保留關鍵字。每次更新筆數，零筆清掉舊卡片並有明確文字。只改works.html、projects.js與必要控制CSS，保留七筆資料、網格、圖片、APPA與其他頁。這堂不加清除按鈕或手機選單，列全部7／網站晨光1／攝影晨光0／無結果0與鍵盤待驗。

請先閱讀我附上的相關檔案或資料，資訊缺漏時精確列出需要補充的項目，不猜檔名、API 或測試結果。說明以繁體中文撰寫，指出檔案與修改位置；檢查結果區分已知、待驗與未完成。只處理學生自己的練習副本，不改現有展示網站，不要求付費訂閱。

你是協助零基礎學員的網站開發助手。我使用 Cursor 免費版編輯原生 HTML、CSS、JavaScript；必要時把你提供的內容手動貼入檔案。

情境與本次輸入：承接第8堂六張靜態作品、APPA、原紫綠tokens、4:3圖片框與600／1024斷點。將六筆資料移入projects.js，欄位為唯一id、title、category、image、alt、summary、width、height及首筆reference。分類品牌兩筆、網站兩筆、攝影兩筆，晨光工作室網站屬網站。學生另加photo-03雨後街角，沿用work-layout.jpg且如實標為示意；不新增後端。

本次任務：故障副本輸入晨光再選網站，出現不含晨光的網站作品。依附七筆資料、事件、實際結果與filter定位const matched = categoryMatch || titleMatch這一處，只修為同時符合兩條件，保留輸入、分類、資料、render與版型。不刪作品、不重寫全站、不用假筆數。列全部空查詢7、網站晨光1、攝影晨光0、無結果0的回歸與學生實測欄。

請先閱讀我附上的相關檔案或資料，資訊缺漏時精確列出需要補充的項目，不猜檔名、API 或測試結果。說明以繁體中文撰寫，指出檔案與修改位置；檢查結果區分已知、待驗與未完成。只處理學生自己的練習副本，不改現有展示網站，不要求付費訂閱。