Persist & filter

1const KEY = 'todos:v1';
2const list = document.getElementById('list');
3const form = document.getElementById('new-todo');
4const input = document.getElementById('title');
5const count = document.getElementById('count');
6const filters = document.querySelectorAll('[data-filter]');
7 
8let todos = load();
9let filter = 'all';
10 
11form.addEventListener('submit', (e) => {
12  e.preventDefault();
13  const title = input.value.trim();
14  if (!title) return;
15  todos.push({ id: Date.now(), title, done: false });
16  input.value = '';
17  save();
18  render();
19});
20 
21list.addEventListener('click', (e) => {
22  const li = e.target.closest('li');
23  if (!li) return;
24  const id = Number(li.dataset.id);
25  if (e.target.matches('.remove')) {
26    todos = todos.filter((t) => t.id !== id);
27  } else {
28    const t = todos.find((t) => t.id === id);
29    if (t) t.done = !t.done;
30  }
31  save();
32  render();
33});
34 
35filters.forEach((btn) =>
36  btn.addEventListener('click', () => {
37    filter = btn.dataset.filter;
38    filters.forEach((b) => b.classList.toggle('active', b === btn));
39    render();
40  }),
41);
42 
43function visible() {
44  if (filter === 'active') return todos.filter((t) => !t.done);
45  if (filter === 'done') return todos.filter((t) => t.done);
46  return todos;
47}
48 
49function render() {
50  list.innerHTML = '';
51  for (const t of visible()) {
52    const li = document.createElement('li');
53    li.dataset.id = t.id;
54    li.className = t.done ? 'done' : '';
55    li.innerHTML =
56      '<span class="check"></span>' +
57      '<span class="title">' + esc(t.title) + '</span>' +
58      '<button class="remove" aria-label="Delete">\u00d7</button>';
59    list.appendChild(li);
60  }
61  const left = todos.filter((t) => !t.done).length;
62  count.textContent = left + ' left';
63}
64 
65function esc(s) {
66  return s.replace(/[&<>"]/g, (c) =>
67    ({ '&': '&amp;', '<': '&lt;', '>': '&gt;', '"': '&quot;' })[c],
68  );
69}
70 
71// Guarded so the sandboxed preview (no same-origin storage) falls back to
72// in-memory instead of throwing; in /code and in production it persists.
73function load() {
74  try {
75    return JSON.parse(localStorage.getItem(KEY)) || [];
76  } catch {
77    return [];
78  }
79}
80 
81function save() {
82  try {
83    localStorage.setItem(KEY, JSON.stringify(todos));
84  } catch {
85    /* sandbox preview — persistence unavailable, keep going */
86  }
87}
88 
89render();

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; }