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/tw/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: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) 進行翻譯。儘管我們努力確保翻譯的準確性,但請注意,自動翻譯可能包含錯誤或不準確之處。原始文件的母語版本應被視為權威來源。對於重要資訊,建議尋求專業人工翻譯。我們對因使用此翻譯而產生的任何誤解或錯誤解釋不承擔責任。