Build a Node.js Interactive Web-Based Task Scheduler

Written by

javascriptdebugged

in

In the fast-paced world of web development, staying organized is crucial. Juggling multiple projects, deadlines, and tasks can quickly become overwhelming. Wouldn’t it be great to have a simple, yet effective tool to manage your daily activities, all within your web browser? In this tutorial, we’ll dive into building a web-based task scheduler using Node.js, providing a practical introduction to backend development and interactive web applications.

Why Build a Task Scheduler?

Task schedulers are essential for productivity. They help you:

  • Prioritize tasks: Ensure you focus on the most important items first.
  • Manage deadlines: Keep track of due dates and avoid missing them.
  • Improve time management: Allocate time effectively to different tasks.
  • Reduce stress: Organize your workload and avoid feeling overwhelmed.

Building a task scheduler provides hands-on experience with key web development concepts, including:

  • Backend development with Node.js: Handling server-side logic and data management.
  • Frontend interaction with HTML, CSS, and JavaScript: Creating a user-friendly interface.
  • Data storage: Managing tasks and their associated information.

Prerequisites

Before we begin, ensure you have the following installed:

  • Node.js and npm (Node Package Manager): Used for running JavaScript code and managing dependencies. You can download it from nodejs.org.
  • A code editor: Such as Visual Studio Code, Sublime Text, or Atom.

Setting Up the Project

Let’s create the project directory and initialize it:

  1. Open your terminal or command prompt.
  2. Create a new directory for your project: mkdir task-scheduler
  3. Navigate into the directory: cd task-scheduler
  4. Initialize a new Node.js project: npm init -y (This creates a package.json file with default settings.)

Installing Dependencies

We’ll use the following dependencies:

  • Express: A web application framework for Node.js, making it easy to create web servers.
  • body-parser: Middleware to parse request bodies, typically used for handling form data.
  • EJS (Embedded JavaScript): A templating engine for generating HTML dynamically.

Install these dependencies using npm:

npm install express body-parser ejs

Creating the Server (server.js)

Create a file named server.js in your project directory. This file will contain the server-side code.

// server.js
const express = require('express');
const bodyParser = require('body-parser');

const app = express();
const port = 3000; // You can choose any available port

// Middleware
app.use(bodyParser.urlencoded({ extended: true })); // Parses URL-encoded bodies
app.use(express.static('public')); // Serve static files (CSS, JavaScript, images) from the 'public' directory
app.set('view engine', 'ejs'); // Set EJS as the view engine

// Dummy data (for now, we'll store tasks in an array)
let tasks = [];

// Routes
app.get('/', (req, res) => {
  res.render('index', { tasks: tasks }); // Render the 'index.ejs' view and pass the tasks data
});

app.post('/add', (req, res) => {
  const newTask = req.body.task;
  tasks.push({ text: newTask, completed: false }); // Add a new task to the array
  res.redirect('/'); // Redirect back to the home page
});

app.post('/complete/:index', (req, res) => {
  const index = req.params.index;
  if (index >= 0 && index < tasks.length) {
    tasks[index].completed = !tasks[index].completed; // Toggle the completion status
  }
  res.redirect('/');
});

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

Let’s break down this code:

  • Importing modules: We import the necessary modules: express, and body-parser.
  • Creating an Express app: const app = express(); initializes an Express application.
  • Setting the port: const port = 3000; defines the port the server will listen on.
  • Middleware:
    • bodyParser.urlencoded({ extended: true }): Parses URL-encoded data from forms.
    • express.static('public'): Serves static files like CSS, JavaScript, and images from the ‘public’ directory.
    • app.set('view engine', 'ejs'): Configures EJS as the templating engine.
  • Dummy data: let tasks = []; initializes an empty array to store tasks. In a real application, you’d likely use a database.
  • Routes:
    • app.get('/', (req, res) => { ... });: Handles GET requests to the root path (/). It renders the index.ejs view and passes the tasks data to it.
    • app.post('/add', (req, res) => { ... });: Handles POST requests to the /add path. It extracts the new task from the request body, adds it to the tasks array, and redirects back to the home page.
    • app.post('/complete/:index', (req, res) => { ... });: Handles POST requests to the /complete/:index path. It toggles the completion status of a task and redirects back to the home page.
  • Starting the server: app.listen(port, () => { ... }); starts the server and listens for incoming requests on the specified port.

Creating the Frontend (index.ejs)

Create a directory named views in your project directory. Inside the views directory, create a file named index.ejs. This will be the template for our home page.

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Task Scheduler</title>
  <link rel="stylesheet" href="/css/style.css">  <!-- Link to your CSS file -->
</head>
<body>
  <h1>Task Scheduler</h1>

  <form action="/add" method="POST">
    <input type="text" name="task" placeholder="Add a task" required>
    <button type="submit">Add</button>
  </form>

  <ul>
    <% tasks.forEach((task, index) => { %>
      <li>
        <form action="/complete/" method="POST">
          <input type="hidden" name="index" value="">
          <button type="submit">
            <% if (task.completed) { %>
              <del><%= task.text %></del>
            <% } else { %>
              <%= task.text %>
            <% } %>
          </button>
        </form>
      </li>
    <% }); %>
  </ul>
</body>
</html>

Let’s break down this EJS template:

  • HTML structure: Basic HTML structure with a title and a link to a CSS file (which we’ll create shortly).
  • Adding a task form: A form with an input field for the task text and a submit button. The form sends a POST request to the /add route.
  • Displaying tasks: An unordered list (<ul>) to display the tasks.
    • <% tasks.forEach((task, index) => { %> ... <% }); %>: This is an EJS loop that iterates through the tasks array passed from the server.
    • Inside the loop, each task is displayed as a list item (<li>).
    • A form is created for each task to mark it as complete. This form sends a POST request to the /complete/:index route, where index is the index of the task in the array.
    • If a task is completed, it is displayed with a strikethrough (<del>).

Adding Styles (style.css)

Create a directory named public in your project directory. Inside the public directory, create a directory named css. Inside the css directory, create a file named style.css. This file will contain your CSS styles.

/* style.css */
body {
  font-family: sans-serif;
  margin: 20px;
}

h1 {
  text-align: center;
}

form {
  margin-bottom: 20px;
  display: flex;
  gap: 10px;
}

input[type="text"] {
  padding: 8px;
  border: 1px solid #ccc;
  border-radius: 4px;
  flex-grow: 1;
}

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

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

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

li {
  margin-bottom: 5px;
}

This CSS provides basic styling for the page, including the font, headings, form, and list items. You can customize these styles to your liking.

Running the Application

  1. Open your terminal or command prompt.
  2. Navigate to your project directory (task-scheduler).
  3. Run the server: node server.js
  4. Open your web browser and go to http://localhost:3000.

You should see your task scheduler interface. You can add tasks, and complete them.

Common Mistakes and How to Fix Them

Here are some common mistakes and how to avoid them:

  • Incorrect file paths: Double-check your file paths, especially in the <link> tag in index.ejs and when serving static files. Make sure the paths are relative to your project directory.
  • Missing dependencies: Ensure you’ve installed all the necessary dependencies using npm install. If you encounter an error related to a missing module, it’s likely you haven’t installed it.
  • Typographical errors: Carefully review your code for typos, especially in variable names, function names, and HTML tags.
  • Incorrect port number: If you can’t access your application in the browser, verify that the port number in your code (server.js) matches the one you’re trying to access in your browser (e.g., http://localhost:3000).
  • Incorrect EJS syntax: Ensure you are using the correct EJS syntax (<%= ... %> for outputting values, <% ... %> for logic).
  • Not serving static files: If your CSS or JavaScript files aren’t loading, make sure you’ve correctly configured the express.static() middleware to serve the files from the public directory.

Enhancements and Next Steps

This is a basic task scheduler. You can extend it further by adding more features:

  • Data persistence: Instead of storing tasks in an array, use a database (e.g., MongoDB, PostgreSQL) to store tasks permanently. This will allow you to save and retrieve tasks even after the server restarts.
  • User authentication: Implement user accounts and authentication to allow multiple users to use the task scheduler.
  • Task categories: Add the ability to categorize tasks (e.g., work, personal, errands).
  • Due dates and reminders: Implement due dates and reminders for tasks.
  • Prioritization: Allow users to prioritize tasks.
  • Drag-and-drop: Implement drag-and-drop functionality to reorder tasks.
  • More advanced UI: Enhance the user interface with more modern and interactive elements.

Key Takeaways

You’ve successfully built a basic web-based task scheduler using Node.js, Express, and EJS. You’ve learned how to create a simple server, handle user input, display data, and create a basic user interface. This project provides a solid foundation for understanding backend development and building interactive web applications. Remember, the core of web development lies in understanding the interaction between the server and the client, and this project provides a clear, practical example of that interaction. By expanding on this foundation, you can build increasingly complex and feature-rich applications.

FAQ

Q: How do I deploy this application?

A: You can deploy your application to platforms like Heroku, Netlify, or AWS. You’ll need to configure the platform to run a Node.js application and provide the necessary environment variables.

Q: How can I add more styling?

A: You can add more styling by modifying the style.css file. You can also use CSS frameworks like Bootstrap or Tailwind CSS to speed up the styling process.

Q: How do I handle errors?

A: You can use try-catch blocks to handle errors in your server-side code. You can also use error handling middleware in Express to catch and handle errors globally.

Q: Can I use a different templating engine?

A: Yes, you can use other templating engines like Pug (formerly Jade) or Handlebars. You’ll need to install the appropriate package and configure it in your Express application.

Building a task scheduler, even a simple one, provides a valuable learning experience. It combines elements of both frontend and backend development, giving you a comprehensive understanding of how web applications work. The process of creating this tool, from setting up the server to designing the user interface, reinforces the core principles of web development. As you continue to build and refine your task scheduler, you’ll not only enhance its functionality but also deepen your understanding of the underlying technologies that power the web.

More posts