คอร์ส · บทที่ 05 · กลาง
⏱ 10 นาที 🛠 โปรเจกต์จริง เก็บข้อมูลใน browser

Todo / Dashboard

ทำแอปจัดการงานที่ "จำได้แม้ปิดเบราว์เซอร์" — localStorage เก็บทุกอย่าง

เพิ่ม → ลบ → ติ๊กเสร็จ → เก็บในเบราว์เซอร์ — AI ทำให้หมดใน 10 นาที

ฟีเจอร์ที่ ขอได้ใน prompt เดียว

บอก AI ว่าอยากได้แบบไหน — AI จัดให้หมด

/01
+

เพิ่ม / ลบ

CRUD พื้นฐาน — มีเลย

ติ๊กเสร็จ

เสร็จแล้วขีดฆ่า — นับสถิติให้

🔍

Filter

ดูทั้งหมด / ยังไม่เสร็จ / เสร็จแล้ว

💾

localStorage

ปิดเปิดเบราว์เซอร์ ข้อมูลไม่หาย

📱

Responsive

ใช้บนมือถือได้สบาย ๆ

Drag & drop

เรียงลำดับได้ — ขั้นสูง แต่ AI ทำได้

Prompt ที่ใช้ได้จริง

ขอ Todo app ครบ feature ในข้อความเดียว

/02
คัดลอกได้ → prompt ที่ใช้กับ AI
you:ทำ Todo app แบบ minimal — single-file HTML

ฟีเจอร์ที่ต้องมี:
- เพิ่มงานใหม่ (พิมพ์ + Enter)
- ติ๊กเสร็จ/ยกเลิกเสร็จ
- ลบงาน (ปุ่ม ×)
- filter: All / Active / Done
- นับ "เหลือกี่งาน" ด้านล่าง
- เก็บข้อมูลใน localStorage ปิดเปิดเบราว์เซอร์ไม่หาย
- clear completed (ลบที่เสร็จแล้วทั้งหมด)

สไตล์: minimal สีพาสเทล มี animation นิด ๆ
- responsive มือถือ + desktop
- ไม่ใช้ framework ไม่ต้องติดตั้งอะไร
ผลลัพธ์: ได้แอป Todo ใช้ได้จริง 1 ไฟล์ — เปิดในเบราว์เซอร์ได้เลย ไม่ต้อง server

ทำไม localStorage สำคัญ

ความแตกต่างระหว่างแอปไร้สาระ vs แอปที่ใช้ได้จริง

/03
💡

localStorage = ความจำของเบราว์เซอร์

ถ้าไม่บอก AI เรื่องนี้ — แอปจะ reset ทุกครั้งที่ refresh (หงุดหงิดแน่) — บอก "เก็บใน localStorage" เพื่อให้ข้อมูลอยู่ถาวร

ได้แล้ว ต่อยอด ยังไง?

ทำให้แอปไม่หลุดธีมพื้นฐาน

/04
🎨

เปลี่ยนสี / ธีม

"เปลี่ยนเป็นโทนมินต์เข้ม" — AI ทำทั้งแอป

📅

เพิ่ม due date

"ใส่วันที่กำหนดส่ง + แจ้งเตือนเกือบถึงกำหนด"

🏷

ใส่ tag / category

"มี tag ตาม category — งาน / ส่วนตัว / ด่วน"

📊

Dashboard สถิติ

"หน้า stat แสดงงานเสร็จ/ค้าง + กราฟ"