ToDo

React JS

import React, { useState } from "react";
import "./styles.css";

const App = () => {
  const [tasks, setTasks] = useState([]);
  const [searchTerm, setSearchTerm] = useState("");

  const handleAddTask = (event) => {
    event.preventDefault();
    const newTaskName = event.target.elements["new-task"].value.trim();
    if (newTaskName) {
      const newTask = {
        id: Date.now(),
        name: newTaskName,
        isEditing: false,
        isCompleted: false,
      };
      setTasks([...tasks, newTask]);
      event.target.reset();
    }
  };

  const handleDeleteTask = (id) => {
    setTasks(tasks.filter((task) => task.id !== id));
  };

  const handleEditTask = (id) => {
    setTasks(
      tasks.map((task) =>
        task.id === id ? { ...task, isEditing: true } : task,
      ),
    );
  };

  const handleCompleteTask = (id) => {
    setTasks(
      tasks.map((task) =>
        task.id === id ? { ...task, isCompleted: true } : task,
      ),
    );
  };

  const handleDoneEditTask = (id, newName) => {
    setTasks(
      tasks.map((task) =>
        task.id === id ? { ...task, name: newName, isEditing: false } : task,
      ),
    );
  };

  const handleSearch = (event) => {
    setSearchTerm(event.target.value.toLowerCase());
  };

  const handleSortTasks = () => {
    setTasks([...tasks].sort((a, b) => a.name.localeCompare(b.name)));
  };

  const filteredTasks = tasks.filter((task) =>
    task.name.toLowerCase().includes(searchTerm),
  );
  const toDoTasks = filteredTasks.filter((task) => !task.isCompleted);
  const completedTasks = filteredTasks.filter((task) => task.isCompleted);

  return (
    <div className="container">
      <h1>Todo App</h1>
      <input
        type="text"
        id="search"
        placeholder="Search tasks..."
        value={searchTerm}
        onChange={handleSearch}
      />
      <form id="todo-form" onSubmit={handleAddTask}>
        <input
          type="text"
          id="new-task"
          placeholder="Add a new task..."
          required
        />
        <button type="submit">Add Task</button>
        <button type="button" onClick={handleSortTasks}>
          Sort by Name
        </button>
      </form>

      <h2>To Do</h2>
      <ul id="tasks-list">
        {toDoTasks.map((task) => (
          <li key={task.id} data-id={task.id.toString()}>
            {task.isEditing ? (
              <>
                <input
                  type="text"
                  className="edit-task"
                  defaultValue={task.name}
                  onBlur={(e) => handleDoneEditTask(task.id, e.target.value)}
                />
                <div className="task-actions">
                  <button
                    className="done"
                    onClick={() => handleDoneEditTask(task.id, task.name)}
                  >
                    Done
                  </button>
                </div>
              </>
            ) : (
              <>
                {task.name}
                <div className="task-actions">
                  <button
                    className="edit"
                    onClick={() => handleEditTask(task.id)}
                  >
                    Edit
                  </button>
                  <button
                    className="complete"
                    onClick={() => handleCompleteTask(task.id)}
                  >
                    Complete
                  </button>
                  <button
                    className="delete"
                    onClick={() => handleDeleteTask(task.id)}
                  >
                    Delete
                  </button>
                </div>
              </>
            )}
          </li>
        ))}
      </ul>

      <h2>Completed</h2>
      <ul id="completed-list">
        {completedTasks.map((task) => (
          <li
            key={task.id}
            data-id={task.id.toString()}
            className="completed-task"
          >
            {task.name}
            <div className="task-actions">
              <button
                className="delete"
                onClick={() => handleDeleteTask(task.id)}
              >
                Delete
              </button>
            </div>
          </li>
        ))}
      </ul>
    </div>
  );
};

export default App;

CSS ToDo

React TS

import React, { useState } from "react";

interface Task {
  id: number;
  name: string;
  isEditing: boolean;
  isCompleted: boolean;
}

const App: React.FC = () => {
  const [tasks, setTasks] = useState<Task[]>([]);
  const [searchTerm, setSearchTerm] = useState("");

  const handleAddTask = (event: React.FormEvent) => {
    event.preventDefault();
    const newTaskName = (event.target as HTMLFormElement).elements.namedItem(
      "new-task",
    ) as HTMLInputElement;
    const taskName = newTaskName.value.trim();
    if (taskName) {
      const newTask: Task = {
        id: Date.now(),
        name: taskName,
        isEditing: false,
        isCompleted: false,
      };
      setTasks([...tasks, newTask]);
      newTaskName.value = "";
    }
  };

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

  const handleEditTask = (id: number) => {
    setTasks(
      tasks.map((task) =>
        task.id === id ? { ...task, isEditing: true } : task,
      ),
    );
  };

  const handleCompleteTask = (id: number) => {
    setTasks(
      tasks.map((task) =>
        task.id === id ? { ...task, isCompleted: true } : task,
      ),
    );
  };

  const handleDoneEditTask = (id: number, newName: string) => {
    setTasks(
      tasks.map((task) =>
        task.id === id ? { ...task, name: newName, isEditing: false } : task,
      ),
    );
  };

  const handleSearch = (event: React.ChangeEvent<HTMLInputElement>) => {
    setSearchTerm(event.target.value.toLowerCase());
  };

  const handleSortTasks = () => {
    setTasks([...tasks].sort((a, b) => a.name.localeCompare(b.name)));
  };

  const filteredTasks = tasks.filter((task) =>
    task.name.toLowerCase().includes(searchTerm),
  );
  const toDoTasks = filteredTasks.filter((task) => !task.isCompleted);
  const completedTasks = filteredTasks.filter((task) => task.isCompleted);

  return (
    <div className="container">
      <h1>Todo App</h1>
      <input
        type="text"
        id="search"
        placeholder="Search tasks..."
        value={searchTerm}
        onChange={handleSearch}
      />
      <form id="todo-form" onSubmit={handleAddTask}>
        <input
          type="text"
          id="new-task"
          placeholder="Add a new task..."
          required
        />
        <button type="submit">Add Task</button>
        <button type="button" onClick={handleSortTasks}>
          Sort by Name
        </button>
      </form>

      <h2>To Do</h2>
      <ul id="tasks-list">
        {toDoTasks.map((task) => (
          <li key={task.id} data-id={task.id.toString()}>
            {task.isEditing ? (
              <>
                <input
                  type="text"
                  className="edit-task"
                  defaultValue={task.name}
                  onBlur={(e) => handleDoneEditTask(task.id, e.target.value)}
                />
                <div className="task-actions">
                  <button
                    className="done"
                    onClick={() => handleDoneEditTask(task.id, task.name)}
                  >
                    Done
                  </button>
                </div>
              </>
            ) : (
              <>
                {task.name}
                <div className="task-actions">
                  <button
                    className="edit"
                    onClick={() => handleEditTask(task.id)}
                  >
                    Edit
                  </button>
                  <button
                    className="complete"
                    onClick={() => handleCompleteTask(task.id)}
                  >
                    Complete
                  </button>
                  <button
                    className="delete"
                    onClick={() => handleDeleteTask(task.id)}
                  >
                    Delete
                  </button>
                </div>
              </>
            )}
          </li>
        ))}
      </ul>

      <h2>Completed</h2>
      <ul id="completed-list">
        {completedTasks.map((task) => (
          <li
            key={task.id}
            data-id={task.id.toString()}
            className="completed-task"
          >
            {task.name}
            <div className="task-actions">
              <button
                className="delete"
                onClick={() => handleDeleteTask(task.id)}
              >
                Delete
              </button>
            </div>
          </li>
        ))}
      </ul>
    </div>
  );
};

export default App;

CSS ToDo