Step 0: Understanding the Feature

Before coding, let’s understand what “mark as done” means:

• Each task in the database will have a status: done (1) or not done (0).

• On the frontend, tasks that are done will appear crossed out or in gray.

• When you click the checkbox, the backend updates the status in the database.

Think of it like putting a checkmark on your real-life to-do list 📝.

Step 1: Update the Database

Open your database setup (routes/tasks.js) and make sure the tasks table has a done column:

db.run(`CREATE TABLE IF NOT EXISTS tasks (
    id INTEGER PRIMARY KEY AUTOINCREMENT,
    name TEXT,
    done INTEGER DEFAULT 0
)`);

• done = 0 → task not done

• done = 1 → task done

• Default is 0 because new tasks are not done yet

Step 2: Add a Route to Mark Tasks as Done

In routes/tasks.js, add this new route:

// PUT /tasks/:id/done
router.put('/:id/done', (req, res) => {
    const { id } = req.params;
    db.run('UPDATE tasks SET done = 1 WHERE id = ?', [id], function(err) {
        if (err) return res.status(500).json({ error: err.message });
        res.json({ updatedID: id, done: true });
    });
});

• This tells the backend to update the task as done when we call this route from the frontend.

Step 3: Update the Frontend (script.js)

Now let’s make the app interactive with checkboxes:

const apiUrl = 'http://localhost:3000/tasks';

// Fetch and display tasks
function fetchTasks() {
    fetch(apiUrl)
    .then(res => res.json())
    .then(tasks => {
        const list = document.getElementById('taskList');
        list.innerHTML = ''; // clear the list

        tasks.forEach(task => {
            const li = document.createElement('li');

            // Checkbox to mark done
            const checkbox = document.createElement('input');
            checkbox.type = 'checkbox';
            checkbox.checked = task.done === 1;
            checkbox.onclick = () => markDone(task.id);

            // Task text
            const span = document.createElement('span');
            span.textContent = task.name;
            if (task.done === 1) {
                span.style.textDecoration = 'line-through';
                span.style.color = 'gray';
            }

            // Delete button
            const deleteBtn = document.createElement('button');
            deleteBtn.textContent = 'Delete';
            deleteBtn.onclick = () => deleteTask(task.id);

            li.appendChild(checkbox);
            li.appendChild(span);
            li.appendChild(deleteBtn);
            list.appendChild(li);
        });
    });
}

// Add new task
function addTask() {
    const name = document.getElementById('taskName').value.trim();
    if (!name) return alert('Please enter a task name!');

    fetch(apiUrl, {
        method: 'POST',
        headers: {'Content-Type': 'application/json'},
        body: JSON.stringify({ name })
    })
    .then(res => res.json())
    .then(() => {
        document.getElementById('taskName').value = '';
        fetchTasks();
    });
}

// Mark task as done
function markDone(id) {
    fetch(`${apiUrl}/${id}/done`, { method: 'PUT' })
    .then(() => fetchTasks());
}

// Delete task
function deleteTask(id) {
    fetch(`${apiUrl}/${id}`, { method: 'DELETE' })
    .then(() => fetchTasks());
}

// Load tasks on page load
window.onload = fetchTasks;

Step-by-step explanation for beginners:

1. We create a checkbox for each task.

2. If a task is done, we cross it out and gray it.

3. Clicking the checkbox calls markDone(), which updates the database via our API.

4. The task list refreshes automatically after every action.

Step 4: Test Your Interactive App

1. Run your backend server:

node server.js

2. Open http://localhost:3000/ in your browser

3. Add a few tasks → they appear in the list

4. Click the checkbox → task is crossed out and saved as done

5. Delete a task → it disappears from the list

🎉 Congratulations! You now have an interactive full-stack To-Do app