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