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

## 指引

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

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

## 評分標準

| 評分標準 | 優秀                                                                                              | 合格                                                                                                                    | 需要改進                                     |
| -------- | ------------------------------------------------------------------------------------------------ | ----------------------------------------------------------------------------------------------------------------------- | --------------------------------------------|
|          | 完全按照課堂中學到的最佳實踐實現了新增交易功能。                                                  | 實現了新增交易功能，但未完全按照課堂中學到的最佳實踐，或者僅部分功能正常運作。                                           | 新增交易功能完全無法運作。                   |

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