Scribd
Upload
29 views6 pages

ToDo List Application

Uploaded by

deepakkumar51900
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
29 views6 pages

ToDo List Application

Uploaded by

deepakkumar51900
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
You are on page 1/ 6

# To-Do List Web Application

## Backend Code (Node.js with Express)

### Step 1: Install Dependencies

```bash

npm init -y

npm install express body-parser cors uuid

```

### Step 2: Create server.js

```javascript

const express = require("express");

const bodyParser = require("body-parser");

const cors = require("cors");

const { v4: uuidv4 } = require("uuid");

const app = express();

app.use(bodyParser.json());

app.use(cors());

let tasks = [];

// Routes

app.get("/tasks", (req, res) => {

res.json(tasks);
});

app.post("/tasks", (req, res) => {

const { title, description, dueDate } = req.body;

if (!title) return res.status(400).json({ error: "Title is required" });

const newTask = { id: uuidv4(), title, description, dueDate, status: "To Do" };

tasks.push(newTask);

res.status(201).json(newTask);

});

app.put("/tasks/:id", (req, res) => {

const { id } = req.params;

const { title, description, dueDate, status } = req.body;

const task = tasks.find((task) => task.id === id);

if (!task) return res.status(404).json({ error: "Task not found" });

if (title) task.title = title;

if (description) task.description = description;

if (dueDate) task.dueDate = dueDate;

if (status) task.status = status;

res.json(task);

});

app.delete("/tasks/:id", (req, res) => {

const { id } = req.params;

tasks = tasks.filter((task) => task.id !== id);


res.status(204).send();

});

const PORT = 5000;

app.listen(PORT, () => console.log(`Server running on port ${PORT}`));

```

## Frontend Code (React)

### Step 1: Install React and Axios

```bash

npx create-react-app todo-app

cd todo-app

npm install axios

```

### Step 2: Create Task Components

#### App.js

```javascript

import React, { useState, useEffect } from "react";

import axios from "axios";

const App = () => {

const [tasks, setTasks] = useState([]);

const [newTask, setNewTask] = useState({ title: "", description: "", dueDate: "" });
useEffect(() => {

axios.get("http://localhost:5000/tasks").then((res) => setTasks(res.data));

}, []);

const addTask = () => {

axios.post("http://localhost:5000/tasks", newTask).then((res) => {

setTasks([...tasks, res.data]);

setNewTask({ title: "", description: "", dueDate: "" });

});

};

const deleteTask = (id) => {

axios.delete(`http://localhost:5000/tasks/${id}`).then(() => {

setTasks(tasks.filter((task) => task.id !== id));

});

};

return (

<div>

<h1>To-Do List</h1>

<input

type="text"

placeholder="Title"

value={newTask.title}

onChange={(e) => setNewTask({ ...newTask, title: e.target.value })}

/>

<input
type="text"

placeholder="Description"

value={newTask.description}

onChange={(e) => setNewTask({ ...newTask, description: e.target.value })}

/>

<input

type="date"

value={newTask.dueDate}

onChange={(e) => setNewTask({ ...newTask, dueDate: e.target.value })}

/>

<button onClick={addTask}>Add Task</button>

<ul>

{tasks.map((task) => (

<li key={task.id}>

{task.title} - {task.status}

<button onClick={() => deleteTask(task.id)}>Delete</button>

</li>

))}

</ul>

</div>

);

};

export default App;

```
### Conclusion

This setup covers the basics of a full-stack To-Do List application with Node.js backend and React

frontend. Extend this application with advanced features like authentication and persistent storage

for a complete experience.

You might also like

pFad - Phonifier reborn

Pfad - The Proxy pFad of © 2024 Garber Painting. All rights reserved.

Note: This service is not intended for secure transactions such as banking, social media, email, or purchasing. Use at your own risk. We assume no liability whatsoever for broken pages.


Alternative Proxies:

Alternative Proxy

pFad Proxy

pFad v3 Proxy

pFad v4 Proxy