<!--
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) แม้ว่าเราจะพยายามให้การแปลมีความถูกต้อง แต่โปรดทราบว่าการแปลอัตโนมัติอาจมีข้อผิดพลาดหรือความไม่ถูกต้อง เอกสารต้นฉบับในภาษาดั้งเดิมควรถือเป็นแหล่งข้อมูลที่เชื่อถือได้ สำหรับข้อมูลที่สำคัญ ขอแนะนำให้ใช้บริการแปลภาษามืออาชีพ เราไม่รับผิดชอบต่อความเข้าใจผิดหรือการตีความผิดที่เกิดจากการใช้การแปลนี้