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

## 說明

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

- 在儀表板頁面新增一個「新增交易」按鈕
- 可以選擇建立一個帶有 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 格式。

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

![顯示「新增交易」對話框的示例截圖](../../../../7-bank-project/4-state-management/images/dialog.png)

## 評分標準

| 評分標準 | 卓越                                                                                              | 合格                                                                                                                    | 需要改進                                   |
| -------- | ------------------------------------------------------------------------------------------------ | ----------------------------------------------------------------------------------------------------------------------- | ------------------------------------------ |
|          | 完全按照課程中看到的所有最佳實踐實現新增交易功能。                                               | 新增交易功能已實現，但未完全遵循課程中看到的最佳實踐，或者僅部分運作。                                                   | 新增交易功能完全無法運作。                 |

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