Mode:
Duration:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
document.addEventListener('DOMContentLoaded', () => {
interface Todo { task: string; done: boolean; }
let todos: Todo[] = [];
const input = document.getElementById('task') as HTMLInputElement;
const addBtn = document.getElementById('add') as HTMLButtonElement;
const list = document.getElementById('list') as HTMLElement;
addBtn.addEventListener('click', () => {
if(input.value.trim() === '') return;
todos.push({task: input.value, done: false});
input.value = '';
render();
});
function render() {
list.innerHTML = '';
todos.forEach((t, i) => {
const li = document.createElement('li');
li.textContent = t.task;
li.style.textDecoration = t.done ? 'line-through' : 'none';
li.addEventListener('click', () => { todos[i].done = !todos[i].done; render(); });
list.appendChild(li);
});
}
});Coding works best on desktop or with an external keyboard.