└── Task Management App.html


/Task Management App.html:
--------------------------------------------------------------------------------
 1 | import React, { useState, useEffect } from "react"; import { useDrag, useDrop } from "react-dnd"; import "tailwindcss/tailwind.css";
 2 | 
 3 | const TaskItem = ({ task, index, moveTask, toggleComplete }) => { const [, ref] = useDrag({ type: "TASK", item: { index }, }); const [, drop] = useDrop({ accept: "TASK", hover: (draggedItem) => { if (draggedItem.index !== index) { moveTask(draggedItem.index, index); draggedItem.index = index; } }, });
 4 | 
 5 | return ( <div ref={(node) => ref(drop(node))} className="p-2 border flex justify-between bg-white shadow-md rounded-md"> <input type="checkbox" checked={task.completed} onChange={() => toggleComplete(task.id)} /> <span className={task.completed ? "line-through" : ""}>{task.title}</span> </div> ); };
 6 | 
 7 | const TaskManager = () => { const [tasks, setTasks] = useState([]); const [newTask, setNewTask] = useState("");
 8 | 
 9 | useEffect(() => { const savedTasks = JSON.parse(localStorage.getItem("tasks")) || []; setTasks(savedTasks); }, []);
10 | 
11 | useEffect(() => { localStorage.setItem("tasks", JSON.stringify(tasks)); }, [tasks]);
12 | 
13 | const addTask = () => { if (newTask.trim()) { setTasks([...tasks, { id: Date.now(), title: newTask, completed: false }]); setNewTask(""); } };
14 | 
15 | const toggleComplete = (id) => { setTasks(tasks.map((task) => (task.id === id ? { ...task, completed: !task.completed } : task))); };
16 | 
17 | const moveTask = (fromIndex, toIndex) => { const updatedTasks = [...tasks]; const [movedTask] = updatedTasks.splice(fromIndex, 1); updatedTasks.splice(toIndex, 0, movedTask); setTasks(updatedTasks); };
18 | 
19 | return ( <div className="p-6 bg-gray-100 min-h-screen"> <h1 className="text-2xl font-bold text-center mb-4">Task Manager</h1> <div className="flex space-x-2 mb-4"> <input className="border p-2 w-full" value={newTask} onChange={(e) => setNewTask(e.target.value)} placeholder="Enter task" /> <button className="bg-blue-500 text-white px-4 py-2" onClick={addTask}>Add</button> </div> <div className="space-y-2"> {tasks.map((task, index) => ( <TaskItem key={task.id} task={task} index={index} moveTask={moveTask} toggleComplete={toggleComplete} /> ))} </div> </div> ); };
20 | 
21 | export default TaskManager;


--------------------------------------------------------------------------------