React

by Jordan Sayner

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/18.2.0/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/18.2.0/umd/react-dom.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/babel-standalone/7.20.12/babel.min.js"></script>
<div id="root"></div>

CSS

body {
  font-family: Arial, sans-serif;
  text-align: center;
  padding: 20px;
}

input {
  padding: 5px;
  font-size: 16px;
  margin-right: 10px;
}

button {
  padding: 5px 10px;
  font-size: 16px;
  margin-left: 5px;
}

ul {
  list-style-type: none;
  padding: 0;
}

li {
  margin: 10px 0;
  font-size: 18px;
}

li span {
  cursor: pointer;
}

.completed {
  text-decoration: line-through;
  color: gray;
}

.task-list {
  margin-bottom: 20px;
}

React

const { useState, useEffect } = React;

const App = () => {
  const [tasks, setTasks] = useState([]);
  const [newTask, setNewTask] = useState('');
  const [isEditing, setIsEditing] = useState(false);
  const [currentTask, setCurrentTask] = useState({});

  useEffect(() => {
    const storedTasks = JSON.parse(localStorage.getItem('tasks'));
    if (storedTasks) {
      setTasks(storedTasks);
    }
  }, []);

  useEffect(() => {
    localStorage.setItem('tasks', JSON.stringify(tasks));
  }, [tasks]);

  const addTask = () => {
    if (!newTask.trim()) return;

    const newTaskItem = {
      id: Date.now(),
      text: newTask,
      completed: false,
    };

    setTasks([...tasks, newTaskItem]);
    setNewTask('');
  };

  const editTask = (task) => {
    setIsEditing(true);
    setCurrentTask(task);
    setNewTask(task.text);
  };

  const updateTask = () => {
    setTasks(
      tasks.map((task) =>
                task.id === currentTask.id ? { ...task, text: newTask } : task
               )
    );
    setNewTask('');
    setIsEditing(false);
  };

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

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

  const incompleteTasks = tasks.filter(task => !task.completed);
  const completedTasks = tasks.filter(task => task.completed);

  return (
    <div className="App">
      <h1>Todo List</h1>

      <div>
        <input
          type="text"
          value={newTask}
          onChange={(e) => setNewTask(e.target.value)}
          />
        <button onClick={isEditing ? updateTask : addTask}>
          {isEditing ? 'Update Task' : 'Add Task'}
        </button>
      </div>

      <div className="task-list">
        <h2>Tasks</h2>
        <ul>
          {incompleteTasks.map((task) => (
            <li key={task.id}>
             ...