個專作品-一人旅

※使用HTML、CSS和JavaScript進行版面製作並且具有RWD功能

※jQuery的flip和lightbox功能

※使用github進行版本控管

※功能說明

1.具有天氣即時查詢功能

2.登入會員有簡易購物車功能，搭配LocalStorage紀錄

帳:[email protected]

密:123

3.首頁:留言功能，可以即時出現在留言板位置

4.在地店家頁面使用jQuery flip特效

5.心境選點使用jQuery lightbox特效

複製連結前往github

https://github.com/Joupeng/personal_rwd

切版頁面含RWD功能

以下展示手機/IPAD/桌機版

也可以點選連結進行觀看

https://joupeng.github.io/personal_rwd/

＊點選查看天氣，即可進行查詢天氣

＊下方留言板功能

串接天氣API及時天氣查詢頁面

1.具有天氣即時查詢功能，串接外部API，使用Ajax的fetch功能，搭配Bootstrap 和 DataTables製作版型

2.上方紅色內容為當下及時天氣狀態

3.點選查詢會出現當下及兩天後的天氣

旅行視角-自助規劃頁面

根據上方輸入框輸入旅行天數，擊可以產生相對應表單於下方進行填寫

安全資料

1.tab切換功能使用jQuery功能

2.點選下載會產生pdf檔，使用jsPDF輸出成Canvas然後再轉成PDF

推薦景點-心境選點頁面

翻牌特效套用jQuery flip功能

推薦景點-在地店家頁面

1.使用grid進行排版

2.點選圖片，會有一張圖片顯示店家的資訊，使用jQuery燈箱效果

註冊/登入頁面

測試用帳號與密碼

[email protected]

123

購物車功能

1.登入後就是專屬明信片購物頁面，透過點選加入購物車，上方同步顯示金額與數量

2.可以透過檢視購物車，確認已購買商品內容及數量

3.可以調整購買數量或是刪除購物車品項

也可以點選連結進行觀看

https://joupeng.github.io/personal_rwd/