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/mo/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-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) 進行翻譯。雖然我們致力於提供準確的翻譯,但請注意,自動翻譯可能包含錯誤或不準確之處。原始文件的母語版本應被視為權威來源。對於關鍵資訊,建議使用專業人工翻譯。我們對因使用此翻譯而引起的任何誤解或錯誤解釋不承擔責任。