Complete & delete

1const list = document.getElementById('list');
2const form = document.getElementById('new-todo');
3const input = document.getElementById('title');
4const count = document.getElementById('count');
5 
6let todos = [];
7 
8form.addEventListener('submit', (e) => {
9  e.preventDefault();
10  const title = input.value.trim();
11  if (!title) return;
12  todos.push({ id: Date.now(), title, done: false });
13  input.value = '';
14  render();
15});
16 
17// One listener on the list handles every row (event delegation).
18list.addEventListener('click', (e) => {
19  const li = e.target.closest('li');
20  if (!li) return;
21  const id = Number(li.dataset.id);
22  if (e.target.matches('.remove')) {
23    todos = todos.filter((t) => t.id !== id);
24  } else {
25    const t = todos.find((t) => t.id === id);
26    if (t) t.done = !t.done;
27  }
28  render();
29});
30 
31function render() {
32  list.innerHTML = '';
33  for (const t of todos) {
34    const li = document.createElement('li');
35    li.dataset.id = t.id;
36    li.className = t.done ? 'done' : '';
37    li.innerHTML =
38      '<span class="check"></span>' +
39      '<span class="title">' + esc(t.title) + '</span>' +
40      '<button class="remove" aria-label="Delete">\u00d7</button>';
41    list.appendChild(li);
42  }
43  const left = todos.filter((t) => !t.done).length;
44  count.textContent = left + ' left';
45}
46 
47function esc(s) {
48  return s.replace(/[&<>"]/g, (c) =>
49    ({ '&': '&amp;', '<': '&lt;', '>': '&gt;', '"': '&quot;' })[c],
50  );
51}
52 
53render();

1<!doctype html>
2<html lang="en">
3  <head>
4    <meta charset="utf-8" />
5    <meta name="viewport" content="width=device-width, initial-scale=1" />
6    <title>Todo</title>
7    <link rel="stylesheet" href="styles.css" />
8  </head>
9  <body>
10    <main class="app">
11      <h1>Today</h1>
12      <form id="new-todo">
13        <input id="title" name="title" placeholder="What needs doing?" autocomplete="off" />
14        <button type="submit">Add</button>
15      </form>
16      <ul id="list" class="list"></ul>
17      <footer class="bar">
18        <span id="count">1 left</span>
19        <span class="filters">
20          <button data-filter="all" class="active">All</button>
21          <button data-filter="active">Active</button>
22          <button data-filter="done">Done</button>
23        </span>
24      </footer>
25    </main>
26    <script src="app.js"></script>
27  </body>
28</html>

1* { box-sizing: border-box; }
2body {
3  margin: 0;
4  min-height: 100vh;
5  display: grid;
6  place-items: start center;
7  padding: 6vh 16px;
8  font-family: system-ui, -apple-system, sans-serif;
9  background: #0b0e14;
10  color: #e7ecf3;
11}
12.app { width: 100%; max-width: 460px; }
13h1 { font-size: 22px; letter-spacing: -0.01em; margin: 0 0 16px; }
14#new-todo { display: flex; gap: 8px; margin-bottom: 18px; }
15#title {
16  flex: 1;
17  padding: 11px 14px;
18  border-radius: 10px;
19  border: 1px solid #232a36;
20  background: #11151c;
21  color: inherit;
22  font-size: 15px;
23}
24#title:focus { outline: none; border-color: #6ea8fe; }
25#new-todo button {
26  padding: 0 18px;
27  border-radius: 10px;
28  border: 1px solid #2b3340;
29  background: #6ea8fe;
30  color: #0b0e14;
31  font-weight: 600;
32  cursor: pointer;
33}
34.list { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; }
35.list li {
36  display: flex;
37  align-items: center;
38  gap: 12px;
39  padding: 12px 14px;
40  border-radius: 10px;
41  background: #11151c;
42  border: 1px solid #1c2330;
43}
44.check {
45  width: 18px;
46  height: 18px;
47  flex: none;
48  border-radius: 999px;
49  border: 1.5px solid #3a4456;
50  cursor: pointer;
51}
52.list li.done .check { background: #4ade80; border-color: #4ade80; }
53.list li.done .title { color: #5b6675; text-decoration: line-through; }
54.title { flex: 1; }
55.remove {
56  border: none;
57  background: none;
58  color: #5b6675;
59  font-size: 20px;
60  line-height: 1;
61  cursor: pointer;
62}
63.remove:hover { color: #f87171; }
64.bar {
65  display: flex;
66  justify-content: space-between;
67  align-items: center;
68  margin-top: 16px;
69  font-size: 13px;
70  color: #8b93a3;
71}
72.filters { display: flex; gap: 4px; }
73.filters button {
74  border: 1px solid transparent;
75  background: none;
76  color: inherit;
77  padding: 4px 10px;
78  border-radius: 8px;
79  cursor: pointer;
80}
81.filters button.active { border-color: #2b3340; color: #e7ecf3; }