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/th/7-bank-project/4-state-management/assignment.md

39 lines
5.2 KiB

<!--
CO_OP_TRANSLATOR_METADATA:
{
"original_hash": "f23a868536c07da991b1d4e773161e25",
"translation_date": "2025-08-26T23:12:50+00:00",
"source_file": "7-bank-project/4-state-management/assignment.md",
"language_code": "th"
}
-->
# การสร้างหน้าต่าง "เพิ่มธุรกรรม"
## คำแนะนำ
แอปธนาคารของเรายังขาดฟีเจอร์สำคัญอย่างหนึ่ง: ความสามารถในการเพิ่มธุรกรรมใหม่
โดยใช้ทุกสิ่งที่คุณได้เรียนรู้จากบทเรียนสี่บทที่ผ่านมา ให้คุณสร้างหน้าต่าง "เพิ่มธุรกรรม":
- เพิ่มปุ่ม "เพิ่มธุรกรรม" ในหน้าแดชบอร์ด
- สร้างหน้าใหม่พร้อมเทมเพลต 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.th.png)
## เกณฑ์การประเมิน
| เกณฑ์ | ดีเยี่ยม | พอใช้ | ต้องปรับปรุง |
| ------ | -------------------------------------------------------------------------------------------------- | ----------------------------------------------------------------------------------------------------------------------- | --------------------------------------------|
| | การเพิ่มธุรกรรมถูกสร้างขึ้นอย่างสมบูรณ์ตามแนวปฏิบัติที่ดีที่สุดที่ได้เรียนรู้ในบทเรียน | การเพิ่มธุรกรรมถูกสร้างขึ้น แต่ไม่ได้ปฏิบัติตามแนวปฏิบัติที่ดีที่สุดที่ได้เรียนรู้ในบทเรียน หรือทำงานได้เพียงบางส่วน | การเพิ่มธุรกรรมไม่สามารถทำงานได้เลย |
---
**ข้อจำกัดความรับผิดชอบ**:
เอกสารนี้ได้รับการแปลโดยใช้บริการแปลภาษา AI [Co-op Translator](https://github.com/Azure/co-op-translator) แม้ว่าเราจะพยายามให้การแปลมีความถูกต้อง แต่โปรดทราบว่าการแปลอัตโนมัติอาจมีข้อผิดพลาดหรือความไม่ถูกต้อง เอกสารต้นฉบับในภาษาดั้งเดิมควรถือเป็นแหล่งข้อมูลที่เชื่อถือได้ สำหรับข้อมูลที่สำคัญ ขอแนะนำให้ใช้บริการแปลภาษามืออาชีพ เราไม่รับผิดชอบต่อความเข้าใจผิดหรือการตีความผิดที่เกิดจากการใช้การแปลนี้