Create To-Do List application

[Samyukta248]

import React, { useState, useEffect } from 'react';
import './App.css'; // Import CSS file

function App() {
const [tasks, setTasks] = useState(() => {
const storedTasks = localStorage.getItem('tasks');
return storedTasks ? JSON.parse(storedTasks) : [];
});
const [newTask, setNewTask] = useState('');

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

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

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

const toggleComplete = (index) => {
const newTasks = [...tasks];
newTasks[index].completed = !newTasks[index].completed;
setTasks(newTasks);
};

return (

To-Do List

<input
type="text"
value={newTask}
onChange={(e) => setNewTask(e.target.value)}
placeholder="Add a new task"
onKeyDown={(e) => {
if (e.key === 'Enter') {
addTask();
}
}}
/>
Add

{tasks.map((task, index) => (
<li key={index} className={task.completed ? 'completed' : ''}>
<span onClick={() => toggleComplete(index)} style={{textDecoration: task.completed ? 'line-through': 'none'}}>{task.text}
<button onClick={() => removeTask(index)}>Remove

))}

);
}