Todo List

A comprehensive todo list application demonstrating list management and state operations.

import { createSignal, For, html, If } from "@dmnchzl/element";

interface Task {
  id: string;
  text: string;
  completed: boolean;
}

function TodoList() {
  const [tasks, setTasks] = createSignal<Task[]>([
    { id: "I", text: "Inhale", completed: true },
    { id: "E", text: "Exhale", completed: true },
    { id: "R", text: "Repeat", completed: false },
  ]);

  const [newTask, setNewTask] = createSignal("");

  const addTask = () => {
    const text = newTask();

    if (text) {
      const randomId = Math.random().toString(32).slice(2, 10);
      setTasks([
        ...tasks(),
        {
          id: randomId,
          text,
          completed: false,
        },
      ]);
    }
  };

  const toggleTask = (id: string) => {
    setTasks(
      tasks().map((task) =>
        task.id === id
          ? {
              ...task,
              completed: !task.completed,
            }
          : task
      )
    );
  };

  const delTask = (id: string) => {
    setTasks(tasks().filter((task) => task.id !== id));
  };

  const handleKeyPress = (event: KeyboardEvent) => {
    if (event.key === "Enter") {
      addTask();
    }
  };

  return html`
    <div class="container">
      <h1>Todo List</h1>

      <div class="add-task">
        <input
          type="text"
          value="${newTask}"
          oninput="${(e: Event) => {
            setNewTask((e.target as HTMLInputElement).value);
          }}"
          onkeypress="${(e: Event) => handleKeyPress(e as KeyboardEvent)}"
          placeholder="Lorem ipsum dolor sit amet..."
        />
        <button onclick="${addTask}">Add</button>
      </div>

      ${If(
        () => tasks().length > 0,
        () => html`<ul class="todo-list">
          ${For(
            tasks,
            (task) => html`
              <li class="task-item">
                <input
                  type="checkbox"
                  checked="${task.completed}"
                  onchange="${() => toggleTask(task.id)}"
                />
                <span class="task-text">${task.text}</span>
                <button onclick="${() => delTask(task.id)}">Delete</button>
              </li>
            `
          )}
        </ul>`
      )}
    </div>
  `;
}

document.body.appendChild(TodoList());