Lê Trọng Đạt

Chế độ hiển thị

Buổi 16: Tổng hợp & Demo Project cuối khóa ​

Loại buổi: Thực hành
Thời lượng: 120 phút
Dự án: To-Do App - Hoàn thiện và thuyết trình

🎯 Mục tiêu học tập ​

Sau buổi học này, bạn sẽ có thể:

  • ✅ Hoàn thiện tất cả tính năng của To-Do App
  • ✅ Fix bugs và cải thiện UI/UX
  • ✅ Chuẩn bị demo project
  • ✅ Thuyết trình project một cách chuyên nghiệp
  • ✅ Nhận feedback và cải thiện

🧩 Task Project ​

Task 1: Review và fix bugs (30 phút) ​

Checklist review:

  • [ ] Tất cả tính năng hoạt động đúng
  • [ ] Không có lỗi console
  • [ ] Validation hoạt động đúng
  • [ ] Error handling đầy đủ
  • [ ] Loading state hoạt động
  • [ ] Responsive trên mobile
  • [ ] Code sạch, dễ đọc

Common bugs cần check:

javascript
// Bug 1: Null/undefined check
// ❌ Xấu
function getValue() {
    return document.getElementById('input').value;
}

// ✅ Tốt
function getValue() {
    const input = document.getElementById('input');
    return input ? input.value : '';
}

// Bug 2: Async/await trong forEach
// ❌ Xấu
array.forEach(async item => {
    await process(item);
});

// ✅ Tốt
for (const item of array) {
    await process(item);
}

// Bug 3: Memory leaks
// ❌ Xấu - Không remove event listener
element.addEventListener('click', handler);

// ✅ Tốt - Remove khi không cần
element.addEventListener('click', handler);
// ... sau đó
element.removeEventListener('click', handler);

Task 2: Cải thiện UI/UX (25 phút) ​

Thêm animations:

css
/* Fade in khi thêm công việc */
.cong-viec-item {
    animation: fadeIn 0.3s ease-in;
}

@keyframes fadeIn {
    from {
        opacity: 0;
        transform: translateY(-10px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* Slide out khi xóa */
.cong-viec-item.removing {
    animation: slideOut 0.3s ease-out;
}

@keyframes slideOut {
    to {
        opacity: 0;
        transform: translateX(100%);
    }
}

/* Hover effects */
.btn:hover {
    transform: scale(1.05);
    transition: transform 0.2s;
}

.btn:active {
    transform: scale(0.95);
}

Thêm transitions:

css
.cong-viec-item {
    transition: all 0.3s ease;
}

.cong-viec-item:hover {
    box-shadow: 0 4px 12px rgba(0,0,0,0.15);
    transform: translateY(-2px);
}

Toast notifications:

javascript
function showToast(message, type = 'info') {
    const toast = document.createElement('div');
    toast.className = `toast toast-${type}`;
    toast.textContent = message;
    
    document.body.appendChild(toast);
    
    // Trigger animation
    setTimeout(() => toast.classList.add('show'), 10);
    
    // Remove after 3 seconds
    setTimeout(() => {
        toast.classList.remove('show');
        setTimeout(() => toast.remove(), 300);
    }, 3000);
}

Task 3: Thêm tính năng bonus (25 phút) ​

Tính năng gợi ý:

  1. Tìm kiếm nâng cao (theo tên, mô tả, trạng thái)
  2. Sắp xếp (theo ngày, tên, trạng thái)
  3. Lọc nâng cao (nhiều điều kiện)
  4. Thống kê (biểu đồ, số liệu)
  5. Dark mode
  6. Export/Import dữ liệu
  7. Keyboard shortcuts

Ví dụ: Dark mode

javascript
// Toggle dark mode
function toggleDarkMode() {
    document.body.classList.toggle('dark-mode');
    const isDark = document.body.classList.contains('dark-mode');
    localStorage.setItem('darkMode', isDark);
}

// Load dark mode preference
const isDark = localStorage.getItem('darkMode') === 'true';
if (isDark) {
    document.body.classList.add('dark-mode');
}

Task 4: Chuẩn bị demo (20 phút) ​

Checklist demo:

  • [ ] Test tất cả tính năng trước khi demo
  • [ ] Chuẩn bị dữ liệu mẫu
  • [ ] Chuẩn bị slide trình bày (nếu có)
  • [ ] Test trên nhiều trình duyệt
  • [ ] Chuẩn bị câu hỏi có thể được hỏi

Script demo (5-7 phút):

  1. Giới thiệu (30 giây)

    • Tên project
    • Mục đích
    • Công nghệ sử dụng

  2. Demo tính năng (4-5 phút)

    • Thêm công việc
    • Sửa công việc
    • Xóa công việc
    • Tìm kiếm
    • Lọc và sắp xếp
    • Đánh dấu hoàn thành
    • Lưu trữ và API

  3. Code highlights (1-2 phút)

    • Cấu trúc modules
    • Best practices
    • Điểm nổi bật

  4. Kết luận (30 giây)

    • Bài học rút ra
    • Hướng phát triển

Task 5: Thuyết trình (20 phút) ​

Cấu trúc thuyết trình:

Slide 1: Giới thiệu

  • Tên project: To-Do App
  • Mục đích: Quản lý công việc cá nhân
  • Công nghệ: HTML, CSS, JavaScript (Vanilla), LocalStorage, Fetch API

Slide 2: Tính năng chính

  • ✅ Thêm/Sửa/Xóa công việc
  • ✅ Tìm kiếm và lọc
  • ✅ Đánh dấu hoàn thành
  • ✅ Lưu trữ local và đồng bộ API
  • ✅ Responsive design

Slide 3: Cấu trúc code

  • Modules organization
  • Separation of concerns
  • Best practices

Slide 4: Thách thức và giải pháp

  • Xử lý async operations
  • Error handling
  • State management

Slide 5: Kết quả và bài học

  • Hoàn thành tất cả tính năng
  • Hiểu rõ JavaScript fundamentals
  • Áp dụng best practices

📋 Checklist hoàn thiện project ​

Functionality ​

  • [ ] Thêm công việc
  • [ ] Sửa công việc
  • [ ] Xóa công việc
  • [ ] Tìm kiếm
  • [ ] Lọc và sắp xếp
  • [ ] Đánh dấu hoàn thành
  • [ ] Lưu vào LocalStorage
  • [ ] Đồng bộ với API

Code Quality ​

  • [ ] Code sạch, dễ đọc
  • [ ] Functions nhỏ, mỗi function làm 1 việc
  • [ ] Tên biến/hàm rõ ràng
  • [ ] Comments đầy đủ
  • [ ] Error handling
  • [ ] Validation

UI/UX ​

  • [ ] Giao diện đẹp, hiện đại
  • [ ] Responsive design
  • [ ] Animations mượt mà
  • [ ] Loading states
  • [ ] Error messages rõ ràng
  • [ ] User-friendly

Best Practices ​

  • [ ] ES6+ features
  • [ ] Modules organization
  • [ ] DRY principle
  • [ ] Performance optimization
  • [ ] Accessibility

🎤 Template thuyết trình ​

=== SLIDE 1: GIỚI THIỆU ===
Xin chào, tôi là [Tên]. 
Hôm nay tôi sẽ trình bày về project To-Do App - 
một ứng dụng quản lý công việc được xây dựng bằng 
JavaScript thuần.

=== SLIDE 2: TÍNH NĂNG ===
Project có các tính năng chính:
1. CRUD operations đầy đủ
2. Tìm kiếm và lọc
3. Lưu trữ local và đồng bộ API
4. Responsive design

=== SLIDE 3: DEMO ===
[Demo trực tiếp trên browser]

=== SLIDE 4: CODE HIGHLIGHTS ===
- Tổ chức code theo modules
- Sử dụng ES6+ features
- Error handling và validation
- Performance optimization

=== SLIDE 5: KẾT LUẬN ===
Qua project này, em đã:
- Nắm vững JavaScript fundamentals
- Áp dụng best practices
- Hiểu cách xây dựng ứng dụng hoàn chỉnh

Cảm ơn thầy/cô và các bạn đã lắng nghe!

✅ Checklist hoàn thành ​

  • [ ] Đã review và fix tất cả bugs
  • [ ] Đã cải thiện UI/UX
  • [ ] Đã thêm tính năng bonus (nếu có)
  • [ ] Đã chuẩn bị demo
  • [ ] Đã chuẩn bị thuyết trình
  • [ ] Đã test trên nhiều trình duyệt
  • [ ] Code sạch và hoàn chỉnh

📝 Checklist trước khi nộp ​

  • [ ] Code hoàn chỉnh, không có lỗi
  • [ ] README.md với hướng dẫn sử dụng
  • [ ] Comments đầy đủ trong code
  • [ ] Git commit history rõ ràng
  • [ ] Demo video (nếu có)
  • [ ] Slide thuyết trình (nếu có)

💡 Tips thuyết trình ​

  1. Nói chậm, rõ ràng
  2. Demo trực tiếp thay vì chỉ nói
  3. Chuẩn bị trước các câu hỏi có thể được hỏi
  4. Giữ thời gian (5-7 phút)
  5. Tự tin khi trình bày

🎯 Câu hỏi thường gặp ​

Q: Tại sao dùng JavaScript thuần thay vì framework? A: Để hiểu rõ JavaScript fundamentals trước khi học framework.

Q: Có thể cải thiện gì thêm? A: Có thể thêm authentication, real-time sync, offline mode...

Q: Thách thức lớn nhất là gì? A: Xử lý async operations và quản lý state.

Chúc các bạn hoàn thành tốt project và thuyết trình thành công! 🚀🎉

Released under the MIT License.

Copyright © 2025 by Lê Trọng Đạt