Build a Node.js Interactive Web-Based To-Do List App

Written by

javascriptdebugged

in

Are you tired of juggling tasks in your head, forgetting important deadlines, or struggling to stay organized? In today’s fast-paced world, a well-structured to-do list is more than just a convenience; it’s a necessity. It helps us prioritize, manage our time effectively, and reduce stress. But what if you could create your own, customized to-do list application, tailored to your specific needs? This tutorial will guide you through building an interactive, web-based to-do list application using Node.js, providing a practical, hands-on learning experience for both beginners and intermediate developers.

Why Build a To-Do List App?

Building a to-do list app is an excellent project for several reasons:

  • Practical Application: It solves a common problem – staying organized.
  • Fundamental Concepts: It covers essential web development concepts such as HTML, CSS, JavaScript, and server-side logic.
  • Node.js Experience: It provides hands-on experience with Node.js, a powerful JavaScript runtime environment.
  • Project-Based Learning: It allows you to learn by doing, reinforcing your understanding of the concepts.

By the end of this tutorial, you’ll have a fully functional to-do list application, and you’ll have gained valuable skills that can be applied to other web development projects.

Prerequisites

Before we begin, make sure you have the following installed on your system:

  • Node.js and npm (Node Package Manager): You can download these from the official Node.js website. npm is included with the Node.js installation.
  • A Code Editor: Such as Visual Studio Code, Sublime Text, or Atom.
  • Basic Understanding of HTML, CSS, and JavaScript: While this tutorial will explain the Node.js aspects, a basic understanding of these front-end technologies is helpful.

Setting Up the Project

Let’s start by setting up our project directory and initializing our Node.js project.

  1. Create a Project Directory: Open your terminal or command prompt and create a new directory for your project. For example:
mkdir todo-app
cd todo-app
  1. Initialize npm: Navigate to your project directory in the terminal and initialize npm. This will create a package.json file, which will manage your project’s dependencies.
npm init -y

The -y flag accepts the default settings during initialization, making the process quicker.

  1. Install Dependencies: We’ll need a few dependencies for our project. We’ll use express for creating our web server, body-parser to parse the request body, and ejs for templating.
npm install express body-parser ejs

Creating the Server (server.js)

Now, let’s create our server file, which will handle incoming requests and serve our application.

  1. Create server.js: In your project directory, create a file named server.js. This will be the main entry point of our application.
  2. Import Dependencies: Add the following code to import the necessary modules:
const express = require('express');
const bodyParser = require('body-parser');
const path = require('path');

const app = express();
const port = 3000; // You can choose any available port
  1. Configure Middleware: Add the following code to configure middleware for parsing request bodies and serving static files:
app.use(bodyParser.urlencoded({ extended: true }));
app.use(express.static('public')); // Serve static files from the 'public' directory
app.set('view engine', 'ejs'); // Set EJS as the view engine
app.set('views', path.join(__dirname, 'views')); // Set the views directory
  1. Create a to-do list array: We’ll use an array to store our to-do items.
let todoList = [];
  1. Define Routes: We’ll define routes to handle different requests:

app.get('/', (req, res) => {
  res.render('index', { todoList: todoList });
});

app.post('/add', (req, res) => {
  const newItem = req.body.newItem;
  todoList.push(newItem);
  res.redirect('/');
});

app.post('/delete', (req, res) => {
    const itemToDelete = req.body.itemToDelete;
    todoList = todoList.filter(item => item !== itemToDelete);
    res.redirect('/');
});
  1. Start the Server: Finally, start the server and listen for incoming requests:
app.listen(port, () => {
  console.log(`Server is running on http://localhost:${port}`);
});

Creating the Views (views/index.ejs)

Now, let’s create the view file (index.ejs) that will display our to-do list and handle user input.

  1. Create the views directory: Create a directory named views inside your project directory.
  2. Create index.ejs: Inside the views directory, create a file named index.ejs.
  3. Add HTML Structure: Add the following HTML structure to your index.ejs file:
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>To-Do List</title>
    <link rel="stylesheet" href="/style.css">
</head>
<body>
    <div class="container">
        <h1>To-Do List</h1>
        <form action="/add" method="POST">
            <input type="text" name="newItem" placeholder="Add item" required>
            <button type="submit">Add</button>
        </form>
        <ul>
            <% todoList.forEach(function(item) { %>
                <li>
                    <%= item %>
                    <form action="/delete" method="POST" style="display: inline;">
                        <input type="hidden" name="itemToDelete" value="<%= item %>">
                        <button type="submit">Delete</button>
                    </form>
                </li>
            <% }); %>
        </ul>
    </div>
</body>
</html>

Creating the Styles (public/style.css)

Let’s add some basic styles to make our to-do list app visually appealing. We’ll create a simple CSS file.

  1. Create the public directory: Create a directory named public inside your project directory.
  2. Create style.css: Inside the public directory, create a file named style.css.
  3. Add CSS Styles: Add the following CSS styles to your style.css file:
body {
    font-family: sans-serif;
    background-color: #f4f4f4;
    margin: 0;
    padding: 0;
    display: flex;
    justify-content: center;
    align-items: center;
    min-height: 100vh;
}

.container {
    background-color: #fff;
    padding: 20px;
    border-radius: 8px;
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
    width: 80%;
    max-width: 500px;
}

h1 {
    text-align: center;
    color: #333;
}

form {
    display: flex;
    margin-bottom: 15px;
}

input[type="text"] {
    flex-grow: 1;
    padding: 10px;
    border: 1px solid #ddd;
    border-radius: 4px;
    margin-right: 10px;
}

button {
    background-color: #4CAF50;
    color: white;
    padding: 10px 15px;
    border: none;
    border-radius: 4px;
    cursor: pointer;
}

button:hover {
    background-color: #3e8e41;
}

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

li {
    padding: 10px;
    border-bottom: 1px solid #eee;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

li:last-child {
    border-bottom: none;
}

Running the Application

Now that we’ve set up our server, views, and styles, let’s run the application.

  1. Start the Server: Open your terminal, navigate to your project directory (todo-app), and run the following command:
node server.js

You should see a message in your terminal indicating that the server is running (e.g., “Server is running on http://localhost:3000”).

  1. Open in Browser: Open your web browser and go to http://localhost:3000.

You should see your to-do list application! You can now add items, and see them displayed on the page. You can delete them too.

Common Mistakes and How to Fix Them

Here are some common mistakes and how to fix them:

  • Incorrect File Paths: Ensure that your file paths in server.js (e.g., for serving static files and using the view engine) are correct. Double-check that the directories (public and views) are in the correct location.
  • Missing Dependencies: Make sure you have installed all the necessary dependencies using npm install. If you are missing a dependency, the server will crash.
  • Syntax Errors: JavaScript and HTML are sensitive to syntax errors. Carefully review your code for typos and missing semicolons, brackets, or quotes. Use a code editor with syntax highlighting to catch errors early.
  • Incorrect Route Handling: Double-check your route definitions in server.js. Ensure that the paths match the form actions and that the HTTP methods (GET, POST) are correctly used.
  • Typo in variable names: Make sure to use the same variable name consistently across your code.

Key Takeaways

  • Modular Design: Break down your application into smaller, manageable components (server, views, styles).
  • Use of Middleware: Understand how middleware (e.g., body-parser, express.static) helps handle requests and responses.
  • Templating with EJS: Learn how to use a templating engine (EJS) to dynamically generate HTML.
  • Form Handling: Understand how to handle form submissions (POST requests) and extract data from the request body.
  • Front-end and Back-end Communication: Recognize the interaction between the front-end (HTML, CSS, JavaScript) and the back-end (Node.js server).

FAQ

Here are some frequently asked questions about building a to-do list application with Node.js:

  1. Can I store the to-do list data persistently?

    Yes, you can. Currently, the to-do list data is stored in memory and is lost when the server restarts. To store the data persistently, you can integrate a database like MongoDB or PostgreSQL. You would then save and retrieve the to-do list items from the database.

  2. How can I add features like marking items as complete or setting due dates?

    You can add these features by modifying your index.ejs file to include checkboxes or date input fields. You’ll also need to update your server-side logic (server.js) to handle these new form inputs and update the to-do list data accordingly. For instance, you could add a new property to each to-do item object to track its completion status or due date.

  3. How can I deploy this application to the web?

    You can deploy your application to a platform like Heroku, Netlify, or AWS. You’ll need to create an account, push your code to the platform’s repository, and configure the platform to run your Node.js application. The platform will handle the server setup and deployment process for you.

  4. Can I add user authentication?

    Yes, adding user authentication involves integrating a user authentication library (like Passport.js) or implementing your own authentication system. You’ll need to create user registration, login, and logout functionalities, and secure your routes to ensure that only authenticated users can access their to-do lists.

Building this to-do list app is a great starting point for learning Node.js web development. As you expand the features, you’ll gain a deeper understanding of web application architecture, server-side programming, and front-end integration. The skills you gain here will be invaluable as you tackle more complex web projects, setting a solid foundation for your journey as a web developer. Keep experimenting, keep learning, and most importantly, keep building!

More posts