You can not select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
Web-Dev-For-Beginners/translations/hk/7-bank-project/4-state-management/assignment.md

37 lines
2.7 KiB

This file contains ambiguous Unicode characters!

This file contains ambiguous Unicode characters that may be confused with others in your current locale. If your use case is intentional and legitimate, you can safely ignore this warning. Use the Escape button to highlight these characters.

<!--
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) 進行翻譯。儘管我們致力於提供準確的翻譯,請注意自動翻譯可能包含錯誤或不準確之處。原始語言的文件應被視為權威來源。對於重要資訊,建議使用專業人工翻譯。我們對因使用此翻譯而引起的任何誤解或錯誤解釋概不負責。