To-Do App - Full Stack Application

A basic full-stack To-Do application with complete CRUD functionality.

Features

• ✅ Create - Add new tasks with title and optional description
• ✅ Read - Display all tasks in a clean interface
• ✅ Update - Edit tasks or mark them as complete
• ✅ Delete - Remove tasks with confirmation
• ✅ Filter - View all, active, or completed tasks
• ✅ Responsive Design - Works on desktop and mobile
• ✅ Real-time Updates - Auto-refresh every 5 seconds

Tech Stack

Backend:

• Node.js
• Express.js
• SQLite3

Frontend:

• HTML5
• CSS3
• Vanilla JavaScript

Installation

1. Navigate to the project directory:

cd "d:\TO DO Application"

2. Install dependencies:

npm install

Running the App

Start the server:

npm start

The app will be available at: http://localhost:3000

API Endpoints

• GET /api/todos - Get all todos
• GET /api/todos/:id - Get a specific todo
• POST /api/todos - Create a new todo
• PUT /api/todos/:id - Update a todo
• DELETE /api/todos/:id - Delete a todo

Request/Response Examples

Create a Todo

POST /api/todos
Content-Type: application/json

{
  "title": "Buy groceries",
  "description": "Milk, eggs, bread"
}

Update a Todo

PUT /api/todos/1
Content-Type: application/json

{
  "title": "Buy groceries",
  "description": "Milk, eggs, bread",
  "completed": true
}

Delete a Todo

DELETE /api/todos/1

Project Structure

TO DO Application/
├── package.json          # Project dependencies
├── server.js            # Express backend server
├── todos.db             # SQLite database (created on first run)
└── public/
    ├── index.html       # Main HTML file
    ├── style.css        # Styling
    └── app.js          # Frontend JavaScript

Database Schema

The SQLite database includes a single todos table:

CREATE TABLE todos (
  id INTEGER PRIMARY KEY AUTOINCREMENT,
  title TEXT NOT NULL,
  description TEXT,
  completed INTEGER DEFAULT 0,
  created_at DATETIME DEFAULT CURRENT_TIMESTAMP
)

Usage

1. Add a Task: Enter a title (required) and optional description, then click "Add Task"
2. Mark Complete: Check the checkbox next to a task
3. Edit a Task: Click "Edit" to modify the task
4. Delete a Task: Click "Delete" and confirm
5. Filter Tasks: Use the filter buttons to view all, active, or completed tasks

Notes

• Tasks are persisted in SQLite database
• Data survives server restarts
• Frontend auto-refreshes every 5 seconds
• Input validation on both client and server sides
• XSS protection with HTML escaping