Skip to content

[已終止營運,疫情結束後 API 已失效] 前端作品 - 天氣、疫情、快篩查詢網 ( Vue ) 行動版

Notifications You must be signed in to change notification settings

MizuYang/environmentTools

Repository files navigation

為何開發這個作品?

由於疫情當前,許多疫情資訊包括確診數、死亡數、藥局販售快篩數量都公告在不同地方,
需要有地方能去整合所有的資料,所以這個作品就這樣問世了。
考量到家人平常只使用手機查看資訊,比較少用電腦,所以此專案就以手機版為優先。
原先是只想做給家人使用,但沒想到後來家人分享給各自公司的同事們,並獲得他們的好評,
有幫助到身邊周遭親人、朋友,覺得非常有成就感, 也更讓我有動力持續做下去!

網站使用技術

  • 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 命名與管理

更新紀錄

過去的更新紀錄


快篩頁面

快篩頁面 快篩藥局顯示
  • 功能提示教學 (Bootstrap Modal)
  • 下拉選單查詢縣市、地區藥局快篩剩餘數量
  • 關鍵字查詢藥局快篩剩餘數量
  • 可輸入藥局名稱或地址查詢
  • localStorage 開發收藏功能,加入、移除收藏,
  • 只要將家或公司附近的藥局加入收藏,下次開啟網頁,
    只要點擊查詢已收藏藥局,就能直接查詢。
  • 家人和朋友都有使用這個功能,並得到良好的回饋

疫情頁面

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

天氣頁面

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

天災頁面

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

About

[已終止營運,疫情結束後 API 已失效] 前端作品 - 天氣、疫情、快篩查詢網 ( Vue ) 行動版

Resources

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published