<!--
CO_OP_TRANSLATOR_METADATA:
{
  "original_hash": "f23a868536c07da991b1d4e773161e25",
  "translation_date": "2025-08-26T00:49:08+00:00",
  "source_file": "7-bank-project/4-state-management/assignment.md",
  "language_code": "mo"
}
-->
# 實作「新增交易」對話框

## 說明

我們的銀行應用程式仍缺少一個重要功能：輸入新交易的功能。  
利用你在前四節課中學到的所有內容，實作一個「新增交易」對話框：

- 在儀表板頁面新增一個「新增交易」按鈕
- 可以選擇建立一個帶有 HTML 模板的新頁面，或者使用 JavaScript 來顯示/隱藏對話框的 HTML，而不離開儀表板頁面（你可以使用 [`hidden`](https://developer.mozilla.org/docs/Web/HTML/Global_attributes/hidden) 屬性，或者 CSS 類別來實現）
- 確保對話框具備[鍵盤和螢幕閱讀器的無障礙功能](https://developer.paciellogroup.com/blog/2018/06/the-current-state-of-modal-dialog-accessibility/)
- 實作一個 HTML 表單來接收輸入資料
- 將表單資料轉換為 JSON 格式並發送到 API
- 使用新資料更新儀表板頁面

請參考 [伺服器 API 規範](../api/README.md)，了解需要呼叫的 API 以及預期的 JSON 格式。

以下是完成作業後的範例結果：

![顯示「新增交易」對話框範例的截圖](../../../../translated_images/dialog.93bba104afeb79f12f65ebf8f521c5d64e179c40b791c49c242cf15f7e7fab15.mo.png)

## 評分標準

| 評分標準 | 優秀                                                                                              | 尚可                                                                                                                    | 有待改進                                   |
| -------- | ------------------------------------------------------------------------------------------------ | ----------------------------------------------------------------------------------------------------------------------- | ------------------------------------------ |
|          | 完全依照課堂中學到的最佳實踐實作新增交易功能。                                                   | 實作了新增交易功能，但未完全遵循課堂中的最佳實踐，或者功能僅部分運作。                                                   | 新增交易功能完全無法運作。                 |

**免責聲明**：  
本文件已使用 AI 翻譯服務 [Co-op Translator](https://github.com/Azure/co-op-translator) 進行翻譯。雖然我們致力於提供準確的翻譯，但請注意，自動翻譯可能包含錯誤或不準確之處。原始文件的母語版本應被視為權威來源。對於關鍵資訊，建議使用專業人工翻譯。我們對因使用此翻譯而引起的任何誤解或錯誤解釋不承擔責任。