54 lines
1.4 KiB
JavaScript
54 lines
1.4 KiB
JavaScript
|
// 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);
|