WEB TECHNOLOGY LAB
Experiment 2: Task Management Application (Trello Clone)
Aim
To build a Task Management Application using React with Add, Edit, View and Delete functionality.
Basic Steps to Run the Project
1. Install [Link] from [Link]
2. Install VS Code from [Link]
3. Open VS Code -> Terminal -> New Terminal
4. Run: npx create-react-app task-manager
5. cd task-manager
6. npm start
7. Stop server using CTRL + C
8. Create required files inside src folder
9. Paste the below code into respective files
10. Run again using: npm start
Appendix: Full Source Code
[Link]
import { useState } from "react";
import "./[Link]";
import Navbar from "./Navbar";
import Login from "./Login";
import Dashboard from "./Dashboard";
import TaskDetails from "./TaskDetails";
import AddEditTask from "./AddEditTask";
export default function App() {
const [page, setPage] = useState("login");
const [tasks, setTasks] = useState([]);
const [selectedIndex, setSelectedIndex] = useState(null);
let content;
if (page === "login") {
content = <Login onLogin={() => setPage("dashboard")} />;
}
if (page === "dashboard") {
content = (
<Dashboard
tasks={tasks}
onAdd={() => {
setSelectedIndex(null);
setPage("add");
}}
onSelect={(index) => {
setSelectedIndex(index);
setPage("details");
}}
onEdit={(index) => {
setSelectedIndex(index);
setPage("add");
}}
onDelete={(index) => {
const updatedTasks = [Link]((_, i) => i !== index);
setTasks(updatedTasks);
}}
/>
);
}
if (page === "details") {
content = (
<TaskDetails
task={tasks[selectedIndex]}
onBack={() => setPage("dashboard")}
onEdit={() => setPage("add")}
/>
);
}
if (page === "add") {
content = (
<AddEditTask
existingTask={selectedIndex !== null ? tasks[selectedIndex] : ""}
onSave={(task) => {
if (selectedIndex === null) {
setTasks([...tasks, task]);
} else {
const updated = [...tasks];
updated[selectedIndex] = task;
setTasks(updated);
}
setPage("dashboard");
}}
onCancel={() => setPage("dashboard")}
/>
);
}
return (
<>
<Navbar />
{content}
</>
);
}
[Link]
export default function Navbar() {
return (
<div className="navbar">
Task Management System (Trello Clone)
</div>
);
}
[Link]
export default function Login({ onLogin }) {
return (
<div className="container">
<h2>Login</h2>
<button onClick={onLogin}>Login</button>
</div>
);
}
[Link]
export default function Dashboard({ tasks, onAdd, onSelect, onEdit, onDelete }) {
return (
<div className="container">
<h2>Dashboard</h2>
<button onClick={onAdd}>Add Task</button>
{[Link]((task, index) => (
<div key={index} className="task-card">
<p onClick={() => onSelect(index)}>{task}</p>
<button onClick={() => onEdit(index)}>Edit</button>
<button onClick={() => onDelete(index)}>Delete</button>
</div>
))}
</div>
);
}
[Link]
export default function TaskDetails({ task, onBack, onEdit }) {
return (
<div className="container">
<h2>Task Details</h2>
<div className="task-card">
<p>{task}</p>
</div>
<button onClick={onEdit}>Edit</button>
<button onClick={onBack}>Back</button>
</div>
);
}
[Link]
import { useState, useEffect } from "react";
export default function AddEditTask({ existingTask, onSave, onCancel }) {
const [task, setTask] = useState("");
useEffect(() => {
if (existingTask) setTask(existingTask);
}, [existingTask]);
return (
<div className="container">
<h2>{existingTask ? "Edit Task" : "Add Task"}</h2>
<input
value={task}
onChange={(e) => setTask([Link])}
/>
<br /><br />
<button onClick={() => onSave(task)}>Save</button>
<button onClick={onCancel}>Cancel</button>
</div>
);
}