Add todos with JavaScript

1const list = document.getElementById('list');
2const form = document.getElementById('new-todo');
3const input = document.getElementById('title');
4 
5let todos = [];
6 
7form.addEventListener('submit', (e) => {
8  e.preventDefault();
9  const title = input.value.trim();
10  if (!title) return;
11  todos.push({ id: Date.now(), title, done: false });
12  input.value = '';
13  render();
14});
15 
16function render() {
17  list.innerHTML = '';
18  for (const t of todos) {
19    const li = document.createElement('li');
20    li.dataset.id = t.id;
21    li.innerHTML =
22      '<span class="check"></span>' +
23      '<span class="title">' + esc(t.title) + '</span>' +
24      '<button class="remove" aria-label="Delete">\u00d7</button>';
25    list.appendChild(li);
26  }
27}
28 
29function esc(s) {
30  return s.replace(/[&<>"]/g, (c) =>
31    ({ '&': '&amp;', '<': '&lt;', '>': '&gt;', '"': '&quot;' })[c],
32  );
33}
34 
35render();

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