script.js

let allTodos = [];
async function fetchTodos() {
    try {
        const response = await fetch('https://jsonplaceholder.typicode.com/todos');// 
        const data = await response.json()
        
  // agar sabhi data ko dekhna ho to data.slice ko (0,200) set kar dena hoga
    allTodos = data.slice(0, 50); 
        
        renderTable(allTodos);
    } catch (error) {
        console.error('Error fetching data:', error);
    }
}

function renderTable(todos) {
    const tbody = document.getElementById('body');
    tbody.innerHTML = ''; 

    todos.forEach(todo => {
        const row = document.createElement('tr');
        if (todo.completed) {
            row.classList.add('row-completed');
        } else {
            row.classList.add('row-incomplete');
        }
        row.innerHTML = `
            <td>${todo.id}</td>
            <td>${todo.title}</td>
            <td>${todo.completed ? 'Completed' : 'Pending'}</td> 
            <td>
                <button class="toggle-btn" onclick="toggleTaskStatus(${todo.id})">
                    Mark as ${todo.completed ? 'Incomplete' : 'Completed'}
                </button>
            </td>
        `;

        tbody.appendChild(row);
    });
}
function toggleTaskStatus(id) {
    const todo = allTodos.find(t => t.id === id);
    if (todo) {
        todo.completed = !todo.completed;
        const activeFilter = document.querySelector('.filter-btn.active').id;
        if(activeFilter === 'btn-completed') filterTodos('completed');
        else if(activeFilter === 'btn-uncompleted') filterTodos('uncompleted');
        else filterTodos('all');
    }
}
function filterTodos(status) {
    document.querySelectorAll('.filter-btn').forEach(btn => btn.classList.remove('active')); 
    
    let filteredData = [];

    if (status === 'completed') {
        document.getElementById('btn-completed').classList.add('active');
        filteredData = allTodos.filter(todo => todo.completed === true);
    } else if (status === 'uncompleted') {
        document.getElementById('btn-uncompleted').classList.add('active');
        filteredData = allTodos.filter(todo => todo.completed === false);
    } else {
        document.getElementById('btn-all').classList.add('active');
        filteredData = allTodos;
    }

    renderTable(filteredData);
}

fetchTodos();