Todo List application using Node.js and Express

Let's create a step-by-step guide to build a simple Todo List application using Node.js and Express.

Step 1: Set Up Your Project

Create a new project folder:
```
 mkdir todo-list
 cd todo-list
```
Initialize a new Node.js project:
```
 npm init -y
```
Install necessary dependencies:
```
 npm install express body-parser ejs
```

Step 2: Create Your Folder Structure

Create the following folder structure:

todo-list/
|-- views/
|   |-- index.ejs
|-- public/
|   |-- styles/
|       |-- main.css
|-- src/
|   |-- routes/
|       |-- index.js
|   |-- app.js
|-- server.js

Step 3: Set Up Express Server

In app.js, set up a basic Express server and middleware:

const express = require('express');
const bodyParser = require('body-parser');
const app = express();
const PORT = process.env.PORT || 3000;

app.use(bodyParser.urlencoded({ extended: true }));
app.use(express.static('public'));

// Set up EJS as the view engine
app.set('view engine', 'ejs');

// Set up routes
const indexRoutes = require('./routes/index');
app.use('/', indexRoutes);

app.listen(PORT, () => {
  console.log(`Server is running on http://localhost:${PORT}`);
});

Step 4: Create Routes

In routes/index.js, set up the basic routes for your Todo List:

const express = require('express');
const router = express.Router();

// Sample data (replace this with your actual data storage)
let todoItems = [
  { id: 1, task: 'Buy groceries' },
  // Add more todo items as needed
];

// Display all todo items
router.get('/', (req, res) => {
  res.render('index', { todoItems });
});

// Display form to add a new todo item
router.get('/new', (req, res) => {
  res.render('new');
});

// Create a new todo item
router.post('/new', (req, res) => {
  const { task } = req.body;
  const newItem = { id: todoItems.length + 1, task };
  todoItems.push(newItem);
  res.redirect('/');
});

// Display form to edit a todo item
router.get('/edit/:id', (req, res) => {
  const id = parseInt(req.params.id);
  const item = todoItems.find(item => item.id === id);
  res.render('edit', { item });
});

// Update a todo item
router.post('/edit/:id', (req, res) => {
  const id = parseInt(req.params.id);
  const { task } = req.body;
  const itemIndex = todoItems.findIndex(item => item.id === id);
  todoItems[itemIndex] = { id, task };
  res.redirect('/');
});

// Delete a todo item
router.post('/delete/:id', (req, res) => {
  const id = parseInt(req.params.id);
  todoItems = todoItems.filter(item => item.id !== id);
  res.redirect('/');
});

module.exports = router;

Step 5: Create Views

In views/index.ejs, create the template for displaying all todo items:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <link rel="stylesheet" href="/styles/main.css">
  <title>Todo List</title>
</head>
<body>
  <h1>Todo List</h1>
  <ul>
    <% todoItems.forEach(item => { %>
      <li>
        <%= item.task %>
        <a href="/edit/<%= item.id %>">Edit</a>
        <form method="post" action="/delete/<%= item.id %>">
          <button type="submit">Delete</button>
        </form>
      </li>
    <% }); %>
  </ul>
  <a href="/new">Add New Task</a>
</body>
</html>

In views/new.ejs, create the template for adding a new todo item:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <link rel="stylesheet" href="/styles/main.css">
  <title>New Task</title>
</head>
<body>
  <h1>New Task</h1>
  <form method="post" action="/new">
    <label for="task">Task:</label>
    <input type="text" id="task" name="task" required>
    <button type="submit">Add Task</button>
  </form>
</body>
</html>

In views/edit.ejs, create the template for editing a todo item:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <link rel="stylesheet" href="/styles/main.css">
  <title>Edit Task</title>
</head>
<body>
  <h1>Edit Task</h1>
  <form method="post" action="/edit/<%= item.id %>">
    <label for="task">Task:</label>
    <input type="text" id="task" name="task" value="<%= item.task %>" required>
    <button type="submit">Update Task</button>
  </form>
</body>
</html>

Step 6: Create CSS Styles

In public/styles/main.css, add your styles:

body {
  font-family: 'Arial', sans-serif;
  margin: 20px;
}

h1 {
  color: #333;
}

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

li {
  border: 1px solid #ddd;
  margin: 10px 0;
  padding: 10px;
}

a {
  text-decoration: none;
  color: #007BFF;
  margin-right: 10px;
}

button {
  background-color: #dc3545;
  color: #fff;
  border: none;
  padding: 5px 10px;
  cursor: pointer;
}

Step 7: Run Your Application

Start the Express server:

node app.js

Visit http://localhost:3000 in your browser, and you should see your Todo List application with basic CRUD operations.