Build Todo List in React

Please SUBSCRIBE my YouTube Channel: FrontEnd Interview Preparation: https://www.youtube.com/channel/UC-elmWUfbcbmvuhlS12nCtg

Implementation,

import React, { useState } from 'react';
import './TodoApp.css';

const TodoApp = () => {
  const [tasks, setTasks] = useState([]);
  const [newTask, setNewTask] = useState('');

  const addTask = () => {
    if (newTask.trim() !== '') {
      setTasks([...tasks, newTask]);
      setNewTask('');
    }
  };

  const removeTask = (index) => {
    const updatedTasks = [...tasks];
    updatedTasks.splice(index, 1);
    setTasks(updatedTasks);
  };

  return (
    <div className="todo-app">
      <h1>Todo App</h1>
      <div>
        <input
          type="text"
          value={newTask}
          onChange={(e) => setNewTask(e.target.value)}
        />
        <button onClick={addTask}>Add Task</button>
      </div>
      <ul>
        {tasks.map((task, index) => (
          <li key={index}>
            {task}
            <button onClick={() => removeTask(index)}>Remove</button>
          </li>
        ))}
      </ul>
    </div>
  );
};

export default TodoApp;

css,

/* TodoApp.css */

.todo-app {
  font-family: 'Arial', sans-serif;
  max-width: 400px;
  margin: auto;
  padding: 20px;
  border: 2px solid #ccc;
  border-radius: 5px;
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
}

h1 {
  text-align: center;
  color: #333;
}

div {
  margin-bottom: 15px;
}

input {
  padding: 8px;
  width: 70%;
  margin-right: 10px;
}

button {
  padding: 8px;
  cursor: pointer;
  background: #4caf50;
  color: #fff;
  border: none;
  border-radius: 3px;
}

button:hover {
  background: #45a049;
}

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

li {
  display: flex;
  justify-content: space-between;
  padding: 8px;
  border: 1px solid #ccc;
  margin-bottom: 5px;
}

li button {
  background: #e74c3c;
  color: #fff;
  border: none;
  padding: 5px 8px;
  cursor: pointer;
  border-radius: 3px;
}

li button:hover {
  background: #c0392b;
}

Thanks for reading

• 👏 Please clap for the story and follow me 👉
• 📰 View more content on Javascript, DSA, React, Interview Preparation
• 🔔 Follow me: LinkedIn!

I know there would always be something to improve. Please feel free to share your thoughts