${task.name}
${formatTime(task.timeLeft)}
`;
})
.join("");
}
// ================================
// Event Listeners
// ================================
addBtn.addEventListener("click", addTask);
taskInput.addEventListener("keypress", (e) => {
if (e.key === "Enter") {
addTask();
}
});
// เริ่มต้น
renderTasks();
```
---
## Run App
### 1 เปิด index.html ด้วย Live Server
ใน VS Code: `Alt + L` → `Alt + O`
### 2 ทดสอบ
- กรอก "เขียนรายงาน" → คลิก "เพิ่ม"
- คลิก "▶️ เริ่ม" → timer เริ่มนับลง
- เมื่อจบ → เสียงดัง + notification
- คลิก "ลบ" → ลบ task
---
## Code Explanation
### ส่วน async ที่สำคัญ
**1 setInterval (อัปเดต timer ทุกๆ 1 วินาที)**
```javascript
task.intervalId = setInterval(() => {
task.timeLeft--; // ลดเวลา 1 วินาที
renderTasks(); // อัปเดต UI
}, 1000); // ทุกๆ 1000 millisecond
```
**2 playAlarm (เล่นเสียง)**
```javascript
function playAlarm() {
const audioContext = new AudioContext();
const oscillator = audioContext.createOscillator();
// ... สร้างเสียง 800 Hz เป็นเวลา 0.5 วินาที
}
```
**3 showNotification (แสดง popup)**
```javascript
function showNotification(message) {
const notification = document.createElement("div");
notification.textContent = message;
document.body.appendChild(notification);
setTimeout(() => {
notification.remove(); // ลบหลังจาก 3 วินาที
}, 3000);
}
```
---
## Enhancement Ideas (ถ้าอยากเพิ่มเติม)
- [ ] **Save to LocalStorage** - เก็บ tasks ไว้ใน browser
- [ ] **Custom Timer** - ให้ผู้ใช้กำหนดเวลา
- [ ] **Categories** - จัดหมวดหมู่ task
- [ ] **Progress Stats** - แสดง task ที่เสร็จแล้วกี่ %
- [ ] **Sound Selection** - เลือกเสียง alarm
- [ ] **Dark Mode** - โหมดกลางคืน
---
## Concepts ที่ใช้
| Concept | ใช้ที่ไหน |
| -------------------- | -------------------------------- |
| **setInterval** | อัปเดต timer ทุกๆ 1 วินาที |
| **clearInterval** | หยุด timer |
| **setTimeout** | ลบ notification หลังจาก 3 วินาที |
| **addEventListener** | เช็คการคลิกปุ่ม |
| **DOM Methods** | เพิ่ม/ลบ/แก้ไข element |
| **String Template** | สร้าง HTML ด้วย backticks |
| **Array Methods** | find(), filter(), map() |
---
## Testing Checklist
- [ ] เพิ่ม task ได้
- [ ] Timer เรียบเรียงลงได้
- [ ] Color เปลี่ยนเมื่อรอเหลือน้อย (warning/danger)
- [ ] Alarm ดังเมื่อหมดเวลา
- [ ] Notification แสดงขึ้นมา
- [ ] ลบ task ได้
- [ ] UI ปรับปรุงเมื่อ timer เปลี่ยน
---
## Resources
- [MDN: setInterval](https://developer.mozilla.org/en-US/docs/Web/API/setInterval)
- [MDN: Web Audio API](https://developer.mozilla.org/en-US/docs/Web/API/Web_Audio_API)
- [MDN: Document.createElement](https://developer.mozilla.org/en-US/docs/Web/API/Document/createElement)
---
## 📋 คำถามทดสอบความเข้าใจ (Assessment Questions)
### ส่วนที่ 1: การทำความเข้าใจโค้ด
**คำถาม 1.1**
เหตุใดจึงต้องแยก `duration` และ `timeLeft` ออกจากกัน อธิบายความแตกต่าง
**คำถาม 1.2**
`formatTime()` ฟังก์ชันนี้ทำความสำคัญอะไร? ถ้าไม่มีฟังก์ชันนี้ app จะเป็นยังไง
**คำถาม 1.3**
อธิบายข้อแตกต่างระหว่าง `setInterval()` และ `setTimeout()`
---
### ส่วนที่ 2: ฟังก์ชันการทำงาน
**คำถาม 2.1**
เมื่อผู้ใช้คลิกปุ่ม "▶️ เริ่ม" ครั้งแรก เกิดอะไรขึ้นในลำดับใด (ระบุขั้นตอนอย่างน้อย 4 ขั้น)
**คำถาม 2.2**
ในฟังก์ชัน `toggleTimer()` ทำไมจึงต้องมี `clearInterval()` ก่อนแล้วจึงตั้ง `task.isRunning = false`
**คำถาม 2.3**
ถ้า timer หมดเวลา จะเกิดความผิดพลาดใดหากไม่มี `clearInterval()`
---
### ส่วนที่ 3: DOM และ UI
**คำถาม 3.1**
ฟังก์ชัน `renderTasks()` สามารถแยกออกเป็นฟังก์ชันย่อยได้กี่ฟังก์ชัน จงเสนอการแยกที่เหมาะสม
**คำถาม 3.2**
ใช้วิธีใดในการอัปเดต UI ทุกครั้งที่ timer เปลี่ยนแปลง มีวิธีการอื่นนอกเหนือจำนวนปัจจุบันหรือไม่
**คำถาม 3.3**
"keypress" event listener ทำความสำคัญอะไร หากลบออกไป app จะเป็นยังไง
---
### ส่วนที่ 4: Web Audio API
**คำถาม 4.1**
อธิบายหน้าที่ของการตั้งค่า:
- `oscillator.frequency.value = 800`
- `oscillator.type = "sine"`
- `gainNode.gain.setValueAtTime(0.3, audioContext.currentTime)`
**คำถาม 4.2**
ทำไมเสียง alarm จึงใช้เวลา 0.5 วินาที แล้วหยุด ถ้าเพิ่มเป็น 2 วินาทีจะส่งผลต่อ UX อย่างไร
---
### ส่วนที่ 5: Array Methods
**คำถาม 5.1**
ในฟังก์ชัน `deleteTask(id)` ใช้ `filter()` เพื่ออะไร เขียนวิธีอื่นแทน `filter()` ได้หรือไม่
**คำถาม 5.2**
ในฟังก์ชัน `renderTasks()` ใช้ `map()` เพื่อทำอะไร ถ้าใช้ `forEach()` แทนจะดีหรือไม่
---
### ส่วนที่ 6: ข้อบกพร่องและการแก้ไข
**คำถาม 6.1**
หากผู้ใช้เพิ่ม task 2 อัน แล้วคลิก "เริ่ม" บน task ทั้ง 2 อันพร้อมๆ กัน จะเกิดอะไรขึ้น
**คำถาม 6.2**
ถ้า timer กำลังเดินอยู่ และผู้ใช้รีเฟรชหน้า (F5) task จะหายไป ทำไม วิธีแก้ปัญหาคือ
**คำถาม 6.3**
ในการทดสอบ app ที่ timer 30 นาที จะใช้เวลานานไปหรือไม่ เสนอวิธีทดสอบที่เร็วขึ้น
---
### ส่วนที่ 7: Enhancement
**คำถาม 7.1**
หากต้องการเพิ่มฟังก์ชัน "รีเซ็ต timer" คืนไปเป็น 30 นาที โค้ดจะเป็นยังไง
**คำถาม 7.2**
วิธีใดในการเก็บ tasks ไว้ใน LocalStorage เพื่อไม่ให้หายเมื่อรีเฟรชหน้า
**คำถาม 7.3**
ถ้าต้องการให้ผู้ใช้กำหนดเวลา timer เอง จะต้องแก้ไขฟังก์ชันไหนบ้าง
---
### ส่วนที่ 8: Concepts เชิงลึก
**คำถาม 8.1**
ทำไม `renderTasks()` จึงต้องเรียกหลายครั้ง มีวิธี DRY ที่ดีกว่าหรือไม่
**คำถาม 8.2**
ถ้าเปลี่ยนจาก `setInterval` เป็น `requestAnimationFrame` จะส่งผลดีหรือไม่
**คำถาม 8.3**
ในโค้ดที่ใช้ `setInterval()` มี Memory Leak ที่อาจเกิดขึ้นได้หรือไม่
---
## เกณฑ์การประเมิน
| ระดับคะแนน | เกณฑ์การประเมิน |
| ------------- | ---------------------------------------------- |
| **ตัวอย่าง** | ตอบคำถาม 1-3 ข้อได้ถูกต้อง +ทำให้ app ทำงานได้ |
| **ดี** | ตอบคำถาม 4-6 ข้อ +เข้าใจ async patterns |
| **ดีมาก** | ตอบคำถามส่วนใหญ่ +enhance ฟังก์ชันเพิ่มได้ |
| **ยอดเยี่ยม** | ตอบคำถามทั้งหมด +Memory Leak awareness |