Improve UI of Todo List: alignment, spacing, and accessibility

Author: SanyamGarg12

projects/todo/main.js

@@ -1,6 +1,50 @@
-const form = document.getElementById('form'); const input = document.getElementById('input'); const list = document.getElementById('list');
+const form = document.getElementById('form');
+const input = document.getElementById('input');
+const list = document.getElementById('list');
+
 let items = [];
-form.addEventListener('submit', e => { e.preventDefault(); items.push({ id: crypto.randomUUID(), text: input.value, done: false }); input.value = ''; render(); });
-function render() { list.innerHTML = ''; for (const it of items) { const li = document.createElement('li'); li.innerHTML = `<label><input type="checkbox" ${it.done ? 'checked' : ''}> ${it.text}</label> <button class="del">×</button>`; li.querySelector('input').addEventListener('change', e => { it.done = e.target.checked; }); li.querySelector('.del').addEventListener('click', () => { items = items.filter(x => x.id !== it.id); render(); }); list.appendChild(li); } }
+
+function escapeHTML(text) {
+    const div = document.createElement('div');
+    div.textContent = text;
+    return div.innerHTML;
+}
+
+form.addEventListener('submit', (e) => {
+    e.preventDefault();
+    items.push({ id: crypto.randomUUID(), text: input.value.trim(), done: false });
+    input.value = '';
+    render();
+});
+
+function render() {
+    list.innerHTML = '';
+    for (const it of items) {
+        const li = document.createElement('li');
+        if (it.done) li.classList.add('done');
+
+        li.innerHTML = `
+            <label>
+                <input type="checkbox" ${it.done ? 'checked' : ''}>
+                <span>${escapeHTML(it.text)}</span>
+            </label>
+            <button class="del" aria-label="Delete">×</button>
+        `;
+
+        const checkbox = li.querySelector('input');
+        checkbox.addEventListener('change', (e) => {
+            it.done = e.target.checked;
+            li.classList.toggle('done', it.done);
+        });
+
+        li.querySelector('.del').addEventListener('click', () => {
+            items = items.filter((x) => x.id !== it.id);
+            render();
+        });
+
+        list.appendChild(li);
+    }
+}
+
 render();
 // TODOs: save to localStorage; add filter (all/active/done); sort; theme switcher

projects/todo/styles.css

@@ -130,33 +130,33 @@ ul {
     margin: 1rem 0;
 }
 
-/* FIXED: Todo Item Alignment */
+/* Improved: Todo Item Alignment */
 li {
     display: flex;
     align-items: center;
     gap: 12px;
-    padding: 1rem;
+    padding: 0.75rem 0.5rem;
     border-bottom: 1px solid var(--item-border);
     transition: background-color 0.2s;
-    min-height: 60px;
+    min-height: 52px;
 }
 
 li:hover {
     background-color: rgba(255, 255, 255, 0.05);
 }
 
-/* FIXED: Label alignment */
+/* Improved: Label alignment */
 label {
     display: flex;
     align-items: center;
     gap: 0.75rem;
     cursor: pointer;
     flex: 1;
     margin: 0;
-    padding: 4px 0;
+    padding: 2px 0;
 }
 
-/* FIXED: Checkbox alignment */
+/* Improved: Checkbox alignment */
 input[type="checkbox"] {
     width: 1.2rem;
     height: 1.2rem;
@@ -165,7 +165,7 @@ input[type="checkbox"] {
     flex-shrink: 0;
 }
 
-/* FIXED: Text alignment */
+/* Improved: Text alignment */
 label span {
     flex: 1;
     word-break: break-word;
@@ -178,7 +178,7 @@ li.done label span {
     color: var(--completed-text);
 }
 
-/* FIXED: Delete button alignment */
+/* Improved: Delete button alignment */
 .del {
     background: #ef4444;
     color: white;