Mizu_前端工程師

**氣象、疫情查詢(📱優先)**

你好，這是我最近開發的網頁，

由於疫情當前，許多疫情資訊包括確診數、死亡數、藥局販售快篩數量都公告在不同地方，需要有地方能去整合資料，所以這個作品就這樣問世了。

考量到家人平常只使用手機查看資訊，所以此專案就以**手機版為優先，**但電腦版也能使用。

功能：查詢氣象、疫情、快篩數量、天災。

如果有地方需要修正，都歡迎跟我說唷。

不定期更新！

更新紀錄

update_14 - 2022/6/1

update_13 - 2022/5/23

update_12 - 2022/5/21

網站使用技術：

• Vue3 開發專案

• 使用 Vue Router 建構路由 ( SPA )

• components 元件拆分管理

• mixins 拆分元件可共用部分出來

• 將常用函式拆分模組 ( ESM )

• AJAX / JSON 串接 RESTful API

  ( 氣象局、環保署 、政府公開平台、國外疫情網 API )

• ESLint 管控程式品質(standard 風格)

• Bootstrap 5 整合 SCSS 開發

• 使用 RWD 響應式網頁設計

• HTML / CSS 網站設計

• localStorage 開發收藏功能

• GitHub Pages 部署靜態網頁

• **Git 版本控制、**良好 commit 命名與管理

過去更新紀錄

專案介紹

天氣頁面

• 功能提示教學
• 跑馬燈顯示天氣警報
• 查看縣市、地區的天氣、溫度、紫外線、 降雨率、空氣品質...等，並依照天氣狀況來改變天氣 icon 圖示 (用物件包裝天氣與對應 icon 寫判斷)。
• localStorage 加入、移除收藏。
  • 點擊已收藏地區自動搜尋該縣市天氣
  • 移動到該地區位置(展開該地區 + 高亮)

疫情頁面

• 功能提示教學
• 查詢今天、昨天、前天疫情狀況
• 可使用下拉選單查詢其他國家的疫情
• 可使用關鍵字查詢各個國家疫情 (英文)
  • 關鍵字英文大小寫都可( toLowerCase)
  • 可以輸入下拉選單沒有的國家名稱
• 切換國家就更換為該國家的國旗

快篩數量頁面

• 功能提示教學

• 下拉選單查詢縣市地區藥局快篩剩餘數量

• 關鍵字查詢藥局快篩剩餘數量

  • 可輸入藥局名稱或地址查詢

• localStorage 加入、移除收藏，

• 只要將家或公司附近的藥局加入收藏，下次開啟網頁，只要點擊查詢已收藏藥局，就能直接查詢。

  • 家人和朋友都有使用這個功能，並得到良好的回饋

  

  

天災頁面

• 查詢颱風動向
• 查詢較大地震、小區域有感地震
  • 呈現地震報告資料
  • 呈現地震報告圖
  • 呈現震度圖
• 目前尚未遇到颱風，所以資料比較少。
• 而地震發生時，的確能捕捉到地震資訊並快速更新。

天氣頁面 icons 、額外巧思補充：

以上皆展示作品部分內容，更詳細的功能，歡迎直接前往作品 DEMO 去體驗看看！

天氣、疫情查詢網 (手機優先)