NEWS API 新聞網
Jul. 2023
此新聞網站使用 Vite 建立 React，參考現成模板，透過 Tailwind CSS 切版，用 axios 和設定 vite proxy 避免 CORS 問題串接 News API，部署至 Vercel 平台公開閱覽。
過濾彈跳視窗
除了參考模板，為了方便使用者在手機螢幕尺寸下閱讀到一半想過濾文章類型，滑動到文章區塊時，導覽列下會長出 sticky bar（上圖左），透過點擊漏斗 icon 就會跳出過濾彈跳視窗（上圖中）。
搜尋國家
在 World 頁面的過濾彈跳視窗，點擊 Country（上圖中），除了自動滾動到已選到的國家，使用者可以透過搜尋欄搜尋國家（上圖右）。
除了參考模板，為了方便使用者在手機螢幕尺寸下閱讀到一半想過濾文章類型，滑動到文章區塊時，導覽列下會長出 sticky bar（上圖左），透過點擊漏斗 icon 就會跳出過濾彈跳視窗（上圖中）。
搜尋國家
在 World 頁面的過濾彈跳視窗，點擊 Country（上圖中），除了自動滾動到已選到的國家，使用者可以透過搜尋欄搜尋國家（上圖右）。
搜尋紀錄
在 Search 頁面，當使用者送出關鍵字，會把關鍵字存進 Local Storage 中，下次點擊搜尋框時會自動顯示近 10 筆搜尋紀錄。
在 Search 頁面，當使用者送出關鍵字，會把關鍵字存進 Local Storage 中，下次點擊搜尋框時會自動顯示近 10 筆搜尋紀錄。
．．．
版型參考 / WOLRD、AVISION
Demo / react-news-api-puce.vercel.app/
GitHub /github.com/b10332040/react-news-api
Date / Jul. 2023
Demo / react-news-api-puce.vercel.app/
GitHub /github.com/b10332040/react-news-api
Date / Jul. 2023
THANKS FOR WATCHING :D
