Todo List 線上待辦事項

JavaScript RESTful API 介接專案

Todo List 待辦事項

Demo | GitHub

網站功能

• 會員註冊/登入/登出
• 待辦事項新增/修改/刪除
• 可針對待辦事項修改及刪除，並勾選待辦事項來切換"待完成/已完成"狀態

使用技術

• 使用 Axios 套件 串接 API
• JWT 實作會員驗證功能
• 使用 正規式 進行 註冊/登入 功能字串比對
• 使用 localStorage 將網頁中的資料儲存在使用者的瀏覽器中
• 使用 RWD 響應式網頁設計，並導入 Sass/SCSS 

使用說明

1. 登入信箱、密碼後可進入 Todo List 主頁，初次登入需先進行帳號註冊。
2. 登入顯示使用者暱稱，輸入待辦事項後，點選+符號來新增代辦事項。
3. 可針對待辦事項內容做修改及刪除，並勾選待辦事項來切換"待完成/已完成"狀態。
4. 針對已完成的待辦事項，可點選"清除已完成項目"進行全部刪除。
5. 使用完畢可進行登出。下一次登入依然會保存先前資料。

※ 注意：Todo List API 每天(24h)會進行清除! 以及不會儲存用戶資料至資料庫(僅緩存)

學習紀錄

• 串接 Todo List API ，設計登入/登出/註冊/新增/修改/刪除、切換狀態功能。
• 使用「正規式」（Regular expressions）進行註冊、登入時的字串比對。
• 使用 localStorage ，將網頁中的資料儲存在使用者的瀏覽器中。
• Promise.all 透過「陣列的形式」傳入多個 promise 函式。多個 Promise 行為同時執行，全部完成後統一回傳。
• location.pathname 返回當前頁面的路徑和文件名
• 使用 RWD 響應式網頁設計，並導入 Sass/SCSS 
• 三元運算子