React Js todo list Example

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8" />
    <script src="https://cdnjs.cloudflare.com/ajax/libs/react/17.0.2/umd/react.production.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/17.0.2/umd/react-dom.production.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/babel-standalone/6.26.0/babel.min.js"></script>
  </head>
  <body>
    <div id="app"></div>
    <script type="text/babel">
      const { useState } = React;

// Define the App component
      const App = () => {
        const [todos, setTodos] = React.useState([]);
        const [newTodo, setNewTodo] = React.useState("");
        const [editIndex, setEditIndex] = React.useState(-1); // Index of the todo being edited

// Function to handle input change
        const handleInputChange = (event) => {
          setNewTodo(event.target.value);
        };

// Function to add a new Todo
        const addTodo = () => {
          if (newTodo.trim() !== "") {
            if (editIndex !== -1) {
              // If editIndex is not -1, we are in edit mode
              const updatedTodos = [...todos];
              updatedTodos[editIndex] = { text: newTodo, completed: false };
              setTodos(updatedTodos);
              setNewTodo("");
              setEditIndex(-1); // Reset editIndex after updating the todo
            } else {
              setTodos([...todos, { text: newTodo, completed: false }]);
              setNewTodo("");
            }
          }
        };

// Function to remove a Todo
        const removeTodo = (index) => {
          setTodos(todos.filter((_, i) => i !== index));
        };

// Function to toggle the completion status of a Todo
        const toggleComplete = (index) => {
          const updatedTodos = [...todos];
          updatedTodos[index].completed = !updatedTodos[index].completed;
          setTodos(updatedTodos);
        };

// Function to edit a Todo
        const editTodo = (index) => {
          setNewTodo(todos[index].text);
          setEditIndex(index);
        };

// JSX for the Todo list
        return (
          <div className="todo-container">
            <h3>Reactjs todo list Example</h3>
            <input
              type="text"
              value={newTodo}
              onChange={handleInputChange}
              className="todo-input"
            />
            <button onClick={addTodo} className="todo-button">
              {editIndex !== -1 ? "Edit Todo" : "Add Todo"}
            </button>
            <ul className="todo-list">
              {todos.map((todo, index) => (
                <li key={index} className="todo-item">
                  <input
                    type="checkbox"
                    checked={todo.completed}
                    onChange={() => toggleComplete(index)}
                    className="todo-checkbox"
                  />
                  <span
                    style={{
                      textDecoration: todo.completed ? "line-through" : "none",
                      color: todo.completed ? "red" : "black",
                    }}
                    className="todo-text"
                  >
                    {todo.text}
                  </span>{" "}
                  <button
                    onClick={() => removeTodo(index)}
                    className="todo-remove-button"
                  >
                    Remove
                  </button>{" "}
                  <button
                    onClick={() => editTodo(index)}
                    className="todo-edit-button"
                  >
                    Edit
                  </button>
                </li>
              ))}
            </ul>
          </div>
        );
      };

ReactDOM.render(<App />, document.getElementById("app"));
    </script>
    <style>
      .todo-container {
        max-width: 400px;
        margin: 20px auto;
        background-color: #ffffff;
        border-radius: 8px;
        box-shadow: 0 0 8px rgba(0, 0, 0, 0.1);
        padding: 20px;
      }

.todo-input {
        width: 100%;
        padding: 10px;
        font-size: 16px;
        border: 1px solid #ddd;
        border-radius: 4px;
        margin-bottom: 10px;
        box-sizing: border-box;
      }

.todo-button {
        display: block;
        width: 100%;
        padding: 10px;
        background-color: #007bff;
        color: #ffffff;
        border: none;
        border-radius: 4px;
        font-size: 16px;
        cursor: pointer;
        transition: background-color 0.2s ease;
      }

.todo-button:hover {
        background-color: #0056b3;
      }

.todo-list {
        list-style: none;
        padding: 0;
      }

.todo-item {
        display: flex;
        align-items: center;
        justify-content: space-between;
        padding: 10px;
        border-bottom: 1px solid #ddd;
      }

.todo-checkbox {
        margin-right: 10px;
      }

.todo-text {
        flex: 1;
        font-size: 16px;
      }

.todo-remove-button,
      .todo-edit-button {
        padding: 6px 12px;
        background-color: #ff4d4d;
        color: #ffffff;
        border: none;
        border-radius: 4px;
        font-size: 14px;
        cursor: pointer;
        transition: background-color 0.2s ease;
      }

.todo-remove-button:hover,
      .todo-edit-button:hover {
        background-color: #cc0000;
      }

.todo-edit-button {
        margin-left: 10px;
      }
    </style>
  </body>
</html>