🧩 Bài 10: Comments System

Xây dựng hệ thống hiển thị posts và comments với JSONPlaceholder API

📋 Yêu cầu bài tập

TRUNG BÌNH

🎯 Mục tiêu

Tạo một ứng dụng hiển thị danh sách posts và comments tương tác với JSONPlaceholder API.

📝 Chức năng cần làm:

Load Posts: Hiển thị danh sách 10 posts đầu tiên
Click Post: Khi click vào post → hiển thị comments của post đó
Back Navigation: Nút quay lại danh sách posts
Error Handling: Xử lý lỗi khi API fail

🔧 API endpoints sử dụng:

              // Lấy posts
GET https://jsonplaceholder.typicode.com/posts

// Lấy comments của 1 post
GET https://jsonplaceholder.typicode.com/posts/{postId}/comments
            

⚡ Kỹ thuật cần dùng:

Fetch API hoặc Axios để call API
Async/await để xử lý bất đồng bộ
DOM manipulation để render UI
Event handling cho click interactions

📄 HTML Template có sẵn

Copy đoạn HTML bên dưới để bắt đầu:

🎮 Demo kết quả mong muốn

Đây là demo hoạt động của ứng dụng hoàn chỉnh:

Click "Load Posts" để xem demo...

<!DOCTYPE html>
<html lang="vi">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Bài 10: Comments System</title>
    <script src="https://cdn.jsdelivr.net/npm/axios@1.7.7/dist/axios.min.js"></script>
    <style>
        body {
            font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
            max-width: 1000px;
            margin: 0 auto;
            padding: 20px;
            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
            min-height: 100vh;
        }
        
        .container {
            background: white;
            border-radius: 15px;
            padding: 30px;
            box-shadow: 0 10px 30px rgba(0,0,0,0.1);
        }
        
        h1 {
            color: #667eea;
            text-align: center;
            margin-bottom: 30px;
        }
        
        .controls {
            text-align: center;
            margin-bottom: 30px;
        }
        
        .btn {
            background: linear-gradient(45deg, #667eea, #764ba2);
            color: white;
            border: none;
            padding: 12px 24px;
            border-radius: 8px;
            cursor: pointer;
            margin: 0 10px;
            font-weight: bold;
            transition: transform 0.2s;
        }
        
        .btn:hover {
            transform: translateY(-2px);
        }
        
        .btn-secondary {
            background: #6c757d;
        }
        
        .post-card {
            border: 1px solid #e9ecef;
            border-radius: 8px;
            padding: 12px;
            margin: 8px 0;
            background: #f8f9fa;
            cursor: pointer;
            transition: all 0.2s ease;
            font-size: 14px;
        }
        
        .post-card:hover {
            border-color: #667eea;
            background: #e3f2fd;
            transform: translateY(-1px);
        }
        
        .post-header {
            display: flex;
            justify-content: space-between;
            align-items: flex-start;
            margin-bottom: 4px;
        }
        
        .post-title {
            font-size: 15px;
            font-weight: 600;
            color: #333;
            margin: 0;
            flex: 1;
            margin-right: 10px;
            line-height: 1.2;
        }
        
        .post-id {
            background: #667eea;
            color: white;
            padding: 2px 8px;
            border-radius: 12px;
            font-size: 11px;
            font-weight: bold;
        }
        
        .post-body {
            color: #666;
            line-height: 1.3;
            margin: 0 0 2px 0;
            font-size: 13px;
        }
        
        .post-hint {
            color: #007bff;
            font-size: 11px;
            font-weight: 500;
            margin: 0;
        }
        
        .comment-card {
            border: 1px solid #dee2e6;
            border-radius: 8px;
            padding: 16px;
            margin: 12px 0;
            background: white;
        }
        
        .comment-header {
            display: flex;
            justify-content: space-between;
            align-items: center;
            margin-bottom: 10px;
        }
        
        .comment-name {
            font-weight: bold;
            color: #333;
        }
        
        .comment-id {
            background: #17a2b8;
            color: white;
            padding: 2px 8px;
            border-radius: 12px;
            font-size: 11px;
        }
        
        .comment-email {
            color: #666;
            font-size: 14px;
            margin-bottom: 8px;
        }
        
        .comment-body {
            color: #555;
            line-height: 1.4;
        }
        
        .loading {
            text-align: center;
            padding: 40px;
            color: #666;
        }
        
        .error {
            background: #f8d7da;
            color: #721c24;
            padding: 15px;
            border-radius: 8px;
            border: 1px solid #f5c6cb;
        }
        
        .empty-state {
            text-align: center;
            padding: 40px;
            color: #6c757d;
        }
        
        @media (max-width: 768px) {
            .post-header {
                flex-direction: column;
                gap: 10px;
            }
            
            .post-title {
                margin-right: 0;
            }
        }
    </style>
</head>
<body>
    <div class="container">
        <h1>🧩 Comments System</h1>
        
        <div class="controls">
            <button class="btn" onclick="loadPosts()">� Load Posts</button>
            <button class="btn btn-secondary" onclick="clearDisplay()">🗑️ Clear</button>
        </div>
        
        <div id="content">
            <div class="empty-state">
                <h3>👋 Chào mừng!</h3>
                <p>Click "Load Posts" để bắt đầu xem danh sách bài viết</p>
            </div>
        </div>
    </div>

<script>
        // TODO: Viết các function sau đây
        
        async function loadPosts() {
            // TODO: Implement function này
            // 1. Hiển thị loading state
            // 2. Call API để lấy posts: https://jsonplaceholder.typicode.com/posts
            // 3. Chỉ lấy 10 posts đầu tiên
            // 4. Render posts dưới dạng cards
            // 5. Xử lý lỗi nếu API fail
            
            console.log('TODO: Implement loadPosts function');
        }
        
        async function loadComments(postId) {
            // TODO: Implement function này
            // 1. Hiển thị loading state
            // 2. Call API để lấy comments: https://jsonplaceholder.typicode.com/posts/{postId}/comments
            // 3. Render comments dưới dạng cards
            // 4. Thêm nút "← Quay lại" để quay về danh sách posts
            // 5. Xử lý lỗi nếu API fail
            
            console.log('TODO: Implement loadComments function for post:', postId);
        }
        
        function clearDisplay() {
            // TODO: Implement function này
            // Reset về trạng thái ban đầu
            
            console.log('TODO: Implement clearDisplay function');
        }
        
        // Helper function để render posts (tùy chọn)
        function renderPosts(posts) {
            // TODO: Tạo HTML cho danh sách posts
        }
        
        // Helper function để render comments (tùy chọn)  
        function renderComments(comments, postId) {
            // TODO: Tạo HTML cho danh sách comments
        }
    </script>
</body>
</html>