# MoneyTracker導覽
> 若有指引未撰寫之問題，歡迎留言討論
## Login頁面指引

* 可於本頁面右側<font color="#f00">紅框</font>處輸入註冊時的 Username
* 可於本頁面右側<font color="#FF8D33">橘框</font>處輸入註冊時的 Password
* 可點選<font color="#3377FF">藍框</font>處的按鈕顯示 Password
* 再點選<font color="#f00">紅色 LOG IN 按鈕</font> 即可登入
* 若尚未擁有帳號，則可點選<font color="#3377FF"> 藍色 SIGN UP 按鈕</font> 進入 [註冊頁面](#Sign-up頁面指引)

---

## Sign-up頁面指引
* 可於本頁面右側輸入您的的 Username
* <font color="#f00">注意：Username 將做為以後登入時辨識身分使用</font>
* 可於本頁面右側輸入您的的 Email
* 可於本頁面右側輸入您的的 Phone number
* 可於本頁面右側輸入您的的 Password
* <font color="#f00">注意：Password 將做為以後登入時驗證身分使用</font>
* 可點選[Show Password] 顯示 Password的字元
* 完成資料填寫後，可點選<font color="#f00">紅色 SIGN UP 按鈕</font>，註冊成功後將會導引您至登入頁面
* 若已有帳號，可點選 <font color="#3377FF"> 藍色 LOG IN 按鈕</font> 進入 [登入頁面](#Login頁面指引)

:::warning
**可能出現的狀況：** 請依照彈出提示框指示輸入
1. Username、Email、Phone number、Password 未輸入
2. 輸入非法字元
* Email欄位請輸入包含 @ 的完整郵件地址
* Phone欄位僅接受數字
4. 註冊的資料已被使用
* Username、Email、Phone number、Password 皆<font color="#f00">不得重複</font>，請確定您是否曾經註冊過
:::

---

## DashBoard頁面指引

* 本頁將預設顯示本月的統計表格
* Expense 欄位將顯示本月的總花費
* Income 欄位將顯示本月的總收入
* Balance 欄位將顯示本月的餘額 (總收入-總花費)
* 若需查看它月的統計，可於 Select Month 下拉式選單選擇月份統計，並於Select year 下拉式選單選擇年分
* 若須有包含時間的統計表，請至[History頁面](#History頁面指引)操作

---

## History頁面指引
* 本頁將顯示您曾經記錄過的支出&收入
* 於最上方三個下拉式選單可以分別選擇 月份、年分、收入/支出/所有類別，選擇完後點選 Search按鈕，即會將資料顯示於下方表格
* 若需[變更](#變更紀錄)/[刪除](#刪除紀錄)/[清除選取紀錄](#清除所選項目)，請參考連結

### 變更紀錄
若需變更紀錄，請參考以下步驟：
1. 於表格內點選所需的變更的項目
2. 於最下方的Modify區域將會顯示您所點選的項目，並可點選所需變更的項目進行更改
* Date欄位輸入可參考[日期輸入指引](#日期輸入指引)
4. 變更完成後可點選Modify按鈕
### 刪除紀錄
若需刪除紀錄，請參考以下步驟：
1. 於表格內點選所需的刪除的項目
2. 於最下方的Modify區域將會顯示您所點選的項目，點選 Delete按鈕即可刪除
### 清除所選項目
若需清除所選項目，請參考以下步驟：
1. 於最下方的Modify區域將會顯示您目前所點選的項目，並可點選Refresh按鈕，即可取消所選項目

---
## AddExpense頁面指引

* Category的下拉選單可選取所花費的項目
* Date欄位輸入可參考[日期輸入指引](#日期輸入指引)
* Amount欄位可直接輸入金額，僅限輸入<font color="#f00">數字</font>
* Detail欄位可輸入任何關於本次花費的細節、備註事項
* 若需增加收入項目，請參考[AddIncome頁面指引](#AddIncome頁面指引)

---
## AddIncome頁面指引
* Category的下拉選單可選取所花費的項目
* Date欄位輸入可參考[日期輸入指引](#日期輸入指引)
* Amount欄位可直接輸入金額，僅限輸入<font color="#f00">數字</font>
* Detail欄位可輸入任何關於本次花費的細節、備註事項
* 若需增加收入項目，請參考[AddExpense頁面指引](#AddExpense頁面指引)

---

## 日期輸入指引
* 以AddExpense頁面為例
* 可點選右方小日曆按鈕，即會跳出日期選項，直接單擊日期即可自動填入日期