Skip to content
Draft
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension


Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
19 changes: 19 additions & 0 deletions package.json
Original file line number Diff line number Diff line change
@@ -0,0 +1,19 @@
{
"name": "todo-app",
"version": "1.0.0",
"description": "Minimal TODO REST API with vanilla JS frontend",
"type": "module",
"main": "src/server.js",
"scripts": {
"start": "node src/server.js",
"test": "vitest run"
},
"dependencies": {
"express": "^4.18.2"
},
"devDependencies": {
"supertest": "^6.3.4",
"vitest": "^1.2.2"
},
"license": "EUPL-1.2"
}
93 changes: 93 additions & 0 deletions public/index.html
Original file line number Diff line number Diff line change
@@ -0,0 +1,93 @@
<!DOCTYPE html>
<!--
SPDX-License-Identifier: EUPL-1.2
Copyright (C) 2026 Conduction B.V.
-->
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Todo App</title>
<style>
body { font-family: sans-serif; max-width: 600px; margin: 2rem auto; padding: 0 1rem; }
h1 { font-size: 1.5rem; }
form { display: flex; gap: 0.5rem; margin-bottom: 1rem; }
input[type="text"] { flex: 1; padding: 0.4rem; font-size: 1rem; }
button { padding: 0.4rem 0.8rem; cursor: pointer; }
ul { list-style: none; padding: 0; }
li { display: flex; align-items: center; gap: 0.5rem; padding: 0.3rem 0; border-bottom: 1px solid #eee; }
li.completed span { text-decoration: line-through; color: #888; }
li span { flex: 1; }
</style>
</head>
<body>
<h1>Todo App</h1>
<form id="add-form">
<input type="text" id="title-input" placeholder="New todo..." required />
<button type="submit">Add</button>
</form>
<ul id="todo-list"></ul>

<script>
const list = document.getElementById('todo-list');
const form = document.getElementById('add-form');
const input = document.getElementById('title-input');

async function loadTodos() {
const res = await fetch('/api/todos');
const todos = await res.json();
list.innerHTML = '';
todos.forEach(renderTodo);
}

function renderTodo(todo) {
const li = document.createElement('li');
if (todo.completed) li.classList.add('completed');

const checkbox = document.createElement('input');
checkbox.type = 'checkbox';
checkbox.checked = todo.completed;
checkbox.addEventListener('change', () => toggleTodo(todo.id, checkbox.checked));

const span = document.createElement('span');
span.textContent = todo.title;

const del = document.createElement('button');
del.textContent = 'Delete';
del.addEventListener('click', () => deleteTodo(todo.id));

li.append(checkbox, span, del);
list.appendChild(li);
}

async function toggleTodo(id, completed) {
await fetch(`/api/todos/${id}`, {
method: 'PATCH',
headers: { 'Content-Type': 'application/json' },
body: JSON.stringify({ completed }),
});
loadTodos();
}

async function deleteTodo(id) {
await fetch(`/api/todos/${id}`, { method: 'DELETE' });
loadTodos();
}

form.addEventListener('submit', async (e) => {
e.preventDefault();
const title = input.value.trim();
if (!title) return;
await fetch('/api/todos', {
method: 'POST',
headers: { 'Content-Type': 'application/json' },
body: JSON.stringify({ title }),
});
input.value = '';
loadTodos();
});

loadTodos();
</script>
</body>
</html>
55 changes: 55 additions & 0 deletions src/server.js
Original file line number Diff line number Diff line change
@@ -0,0 +1,55 @@
// SPDX-License-Identifier: EUPL-1.2
// Copyright (C) 2026 Conduction B.V.

import express from 'express';
import { createRequire } from 'module';
import { fileURLToPath } from 'url';
import path from 'path';
import * as store from './store.js';

const __filename = fileURLToPath(import.meta.url);
const __dirname = path.dirname(__filename);

const app = express();

app.use(express.json());
app.use(express.static(path.join(__dirname, '..', 'public')));

// GET /api/todos — list all todos
app.get('/api/todos', (req, res) => {
res.json(store.list());
});

// POST /api/todos — create a todo
app.post('/api/todos', (req, res) => {
const { title } = req.body;
if (!title || typeof title !== 'string') {
return res.status(400).json({ error: 'title is required' });
}
const todo = store.create(title);
res.status(201).json(todo);
});

// PATCH /api/todos/:id — update a todo
app.patch('/api/todos/:id', (req, res) => {
const id = parseInt(req.params.id, 10);
const { completed } = req.body;
const todo = store.update(id, { completed });
if (!todo) return res.status(404).json({ error: 'not found' });
res.json(todo);
});

// DELETE /api/todos/:id — delete a todo
app.delete('/api/todos/:id', (req, res) => {
const id = parseInt(req.params.id, 10);
const removed = store.remove(id);
if (!removed) return res.status(404).json({ error: 'not found' });
res.status(204).end();
});

if (process.argv[1] === fileURLToPath(import.meta.url)) {
const port = process.env.PORT || 3000;
app.listen(port, () => console.log(`Listening on http://localhost:${port}`));
}

export default app;
36 changes: 36 additions & 0 deletions src/store.js
Original file line number Diff line number Diff line change
@@ -0,0 +1,36 @@
// SPDX-License-Identifier: EUPL-1.2
// Copyright (C) 2026 Conduction B.V.

let todos = [];
let nextId = 1;

export function list() {
return todos;
}

export function create(title) {
const todo = { id: nextId++, title, completed: false };
todos.push(todo);
return todo;
}

export function update(id, fields) {
const todo = todos.find((t) => t.id === id);
if (!todo) return null;
Object.assign(todo, fields);
return todo;
}

export function remove(id) {
const index = todos.findIndex((t) => t.id === id);
if (index === -1) return false;
todos.splice(index, 1);
return true;
}

export function reset() {
todos = [];
nextId = 1;
}

export default { list, create, update, remove, reset };
84 changes: 84 additions & 0 deletions test/api.test.js
Original file line number Diff line number Diff line change
@@ -0,0 +1,84 @@
// SPDX-License-Identifier: EUPL-1.2
// Copyright (C) 2026 Conduction B.V.

import { describe, it, beforeEach, expect } from 'vitest';
import request from 'supertest';
import app from '../src/server.js';
import store from '../src/store.js';

beforeEach(() => {
store.reset();
});

describe('POST /api/todos', () => {
it('creates a todo and returns 201 with id, title, completed:false', async () => {
const res = await request(app)
.post('/api/todos')
.send({ title: 'Buy milk' });

expect(res.status).toBe(201);
expect(res.body).toMatchObject({ title: 'Buy milk', completed: false });
expect(typeof res.body.id).toBe('number');
});

it('returns 400 when title is missing', async () => {
const res = await request(app).post('/api/todos').send({});
expect(res.status).toBe(400);
});
});

describe('GET /api/todos', () => {
it('returns 200 with an array containing existing todos', async () => {
store.create('Buy milk');

const res = await request(app).get('/api/todos');

expect(res.status).toBe(200);
expect(Array.isArray(res.body)).toBe(true);
expect(res.body).toHaveLength(1);
expect(res.body[0]).toMatchObject({ title: 'Buy milk', completed: false });
});

it('returns empty array when no todos exist', async () => {
const res = await request(app).get('/api/todos');
expect(res.status).toBe(200);
expect(res.body).toEqual([]);
});
});

describe('PATCH /api/todos/:id', () => {
it('marks a todo as completed and returns 200', async () => {
const todo = store.create('Buy milk');

const res = await request(app)
.patch(`/api/todos/${todo.id}`)
.send({ completed: true });

expect(res.status).toBe(200);
expect(res.body.completed).toBe(true);
});

it('returns 404 for unknown id', async () => {
const res = await request(app)
.patch('/api/todos/999')
.send({ completed: true });
expect(res.status).toBe(404);
});
});

describe('DELETE /api/todos/:id', () => {
it('deletes a todo and returns 204', async () => {
const todo = store.create('Buy milk');

const del = await request(app).delete(`/api/todos/${todo.id}`);
expect(del.status).toBe(204);

const list = await request(app).get('/api/todos');
expect(list.body).toEqual([]);
});

it('returns 404 for unknown id', async () => {
const res = await request(app).delete('/api/todos/999');
expect(res.status).toBe(404);
});
});