thomas

TP5/EX1/app.js

@@ -0,0 +1,54 @@
+// app.js
+
+import { TodoAPI } from './api.js';
+
+const todoList = document.getElementById('todo-list');
+const todoForm = document.getElementById('todo-form');
+const todoInput = document.getElementById('todo-input');
+
+async function renderTodos() {
+    todoList.innerHTML = '';
+    const todos = await TodoAPI.getTodos();
+    todos.forEach(todo => {
+        const li = document.createElement('li');
+        li.classList.add('todo-item');
+        li.dataset.id = todo.id;
+        li.innerHTML = `
+            <input type="checkbox" ${todo.done ? 'checked' : ''}>
+            <span>${todo.title}</span>
+            <button class="delete-btn">X</button>
+        `;
+        todoList.appendChild(li);
+    });
+}
+
+todoForm.addEventListener('submit', async (e) => {
+    e.preventDefault();
+    const title = todoInput.value.trim();
+    if (title) {
+        await TodoAPI.addTodo(title);
+        todoInput.value = '';
+        renderTodos();
+    }
+});
+
+todoList.addEventListener('click', async (e) => {
+    const li = e.target.closest('.todo-item');
+    if (!li) return;
+
+    const id = li.dataset.id;
+
+    if (e.target.type === 'checkbox') {
+        const isDone = e.target.checked;
+        await TodoAPI.toggleTodo(id, isDone);
+    }
+
+    if (e.target.classList.contains('delete-btn')) {
+        await TodoAPI.deleteTodo(id);
+    }
+    
+    renderTodos();
+});
+
+// Initial rendering
+document.addEventListener('DOMContentLoaded', renderTodos);