Advertisement
webdev • In this tutorial, we’ll build a mini To-Do app that talks to your Node.js REST API. You’ll learn how to fetch, add, update, and delete tasks right from your browser

Build a Mini To-Do App Using Your Node.js REST API

5 Min Read Verified Content

Step 0: What We’ll Build

Think of this project like a small kitchen 🍳:

  • Backend (Node.js + SQLite) → your pantry where tasks are stored

  • Frontend (HTML + JavaScript) → your kitchen counter, where you can see and manage your tasks

Our app will allow users to:

  1. See a list of tasks

  2. Add new tasks

  3. Delete tasks

Later, we can also add a “mark as done” feature.


Step 1: Prepare the Frontend

Inside your project folder, create a folder called public and inside it, create index.html and script.js:

mkdir public
cd public
touch index.html script.js

Step 2: Create a Simple HTML Layout

Open index.html and add the following code:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Mini To-Do App</title>
    <style>
        body { font-family: Arial, sans-serif; padding: 20px; }
        input, button { padding: 5px; margin: 5px; }
        li { margin: 5px 0; }
    </style>
</head>
<body>
    <h1>Mini To-Do App</h1>
    
    <input type="text" id="taskName" placeholder="Enter a new task">
    <button onclick="addTask()">Add Task</button>
    
    <ul id="taskList"></ul>
    
    <script src="script.js"></script>
</body>
</html>

Explanation:

  • input → for typing a new task

  • button → to add the task

  • ul#taskList → where we will display all tasks

  • script.js → handles the JavaScript logic


Step 3: Connect Frontend to Backend

Open script.js and add the following:

const apiUrl = 'http://localhost:3000/tasks'; // Our API endpoint

// Fetch all tasks from backend and display them
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');
            li.textContent = task.name;

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

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

// Add a 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 = ''; // clear input
        fetchTasks(); // refresh the list
    });
}

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

// Load tasks when page loads
window.onload = fetchTasks;

Step-by-step explanation:

  1. fetchTasks() → grabs all tasks from backend and displays them

  2. addTask() → adds a new task to the backend and refreshes the list

  3. deleteTask() → removes a task from the backend and refreshes the list


Step 4: Adjust Your Backend

  1. Create a tasks table in your SQLite database:

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

  1. Create a new routes/tasks.js file:

const express = require('express');
const router = express.Router();
const sqlite3 = require('sqlite3').verbose();
const db = new sqlite3.Database('./database.db');

// GET all tasks
router.get('/', (req, res) => {
    db.all('SELECT * FROM tasks', [], (err, rows) => {
        if (err) return res.status(500).json({ error: err.message });
        res.json(rows);
    });
});

// POST add new task
router.post('/', (req, res) => {
    const { name } = req.body;
    if (!name) return res.status(400).json({ error: 'Task name required!' });

    db.run('INSERT INTO tasks (name) VALUES (?)', [name], function(err) {
        if (err) return res.status(500).json({ error: err.message });
        res.json({ id: this.lastID, name });
    });
});

// DELETE a task
router.delete('/:id', (req, res) => {
    const { id } = req.params;
    db.run('DELETE FROM tasks WHERE id = ?', [id], function(err) {
        if (err) return res.status(500).json({ error: err.message });
        res.json({ deletedID: id });
    });
});

module.exports = router;

  1. Update server.js to use the tasks route and serve static frontend:

const taskRoutes = require('./routes/tasks');
app.use('/tasks', taskRoutes);
app.use(express.static('public')); // Serve index.html

Step 5: Test Your Mini To-Do App

  1. Run your server:

node server.js

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

  2. Add some tasks → see them appear

  3. Delete tasks → see them disappear

Congratulations! 🎉 You now have a mini full-stack To-Do app using Node.js REST API and a simple frontend

Advertisement
Back to Webdev