BUILDOGIC

Blog

Creating a Time Calculator Using JavaScript, HTML, CSS, Node.js, and Axios

By Builldogic

Introduction

Hey there, fellow coders! Today we’re gonna build something pretty useful – a Time Calculator Using nodejs. You know how sometimes you need to figure out how many days, hours, or even months are between two dates? Or maybe you want to add a certain number of days to a date and see what you get? Well, that’s exactly what we’re making today!

This project is perfect for beginners who want to practice their JavaScript skills and learn a bit about handling dates. We’ll use HTML and CSS for the frontend, JavaScript for the calculations, Node.js for our backend server, and Axios to connect everything together. Plus, we’ll use the awesome Moment.js library to make date handling way easier.

By the end of this tutorial, you’ll have a fully functional time calculator with two main features:

  1. Calculate the difference between two dates (in days, hours, minutes, weeks, months, and years)
  2. Add or subtract a specific number of days from a date

So let’s get started and build something cool together!

What We’ll Need to create Time Calculator Using nodejs

Before we dive into the code, let’s make sure we have everything we need:

  1. Basic knowledge of HTML, CSS, and JavaScript
  2. Node.js installed on your computer
  3. A code editor (like VS Code, Sublime Text, etc.)
  4. Moment.js library for date handling
  5. Axios for making HTTP requests

Project Structure

Our project will have the following structure:

time-calculator/
├── public/
│   ├── index.html
│   ├── style.css
│   └── script.js
├── server.js
└── package.json

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

Setting Up the Project

First, let’s create a new directory for our project and initialize it:

mkdir time-calculator
cd time-calculator
npm init -y

Next, we need to install the necessary packages:

npm install express moment axios cors

Now, let’s create our server.js file:

const express = require('express');
const cors = require('cors');
const moment = require('moment');
const app = express();
const port = 3000;

// Middleware
app.use(cors());
app.use(express.json());
app.use(express.static('public'));

// Route for calculating time difference
app.post('/api/calculate-difference', (req, res) => {
  try {
    const { startDate, endDate } = req.body;
    
    const start = moment(startDate);
    const end = moment(endDate);
    
    if (!start.isValid() || !end.isValid()) {
      return res.status(400).json({ error: 'Invalid date format' });
    }
    
    const diff = {
      minutes: end.diff(start, 'minutes'),
      hours: end.diff(start, 'hours'),
      days: end.diff(start, 'days'),
      weeks: end.diff(start, 'weeks'),
      months: end.diff(start, 'months'),
      years: end.diff(start, 'years')
    };
    
    res.json(diff);
  } catch (error) {
    res.status(500).json({ error: error.message });
  }
});

// Route for adding/subtracting days
app.post('/api/calculate-date', (req, res) => {
  try {
    const { startDate, days } = req.body;
    
    const start = moment(startDate);
    
    if (!start.isValid()) {
      return res.status(400).json({ error: 'Invalid date format' });
    }
    
    const result = start.clone().add(parseInt(days), 'days');
    
    res.json({
      resultDate: result.format('YYYY-MM-DD')
    });
  } catch (error) {
    res.status(500).json({ error: error.message });
  }
});

// Start server
app.listen(port, () => {
  console.log(`Server running at http://localhost:${port}`);
});

Creating the Frontend

Now, let’s create our frontend files. First, let’s make a directory called “public” and create our HTML file:

mkdir public
cd public
touch index.html style.css script.js

Here’s the HTML for our index.html file:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta name="description" content="A simple time calculator to find the difference between dates or add/subtract days from a date. Built with JavaScript, HTML, CSS, and Node.js.">
    <title>Time Calculator - Calculate Date Differences and More</title>
    <link rel="stylesheet" href="style.css">
</head>
<body>
    <div class="container">
        <h1>Time Calculator</h1>
        
        <div class="tabs">
            <button class="tab-btn active" data-tab="diff-calculator">Date Difference</button>
            <button class="tab-btn" data-tab="add-calculator">Add/Subtract Days</button>
        </div>
        
        <div class="tab-content active" id="diff-calculator">
            <h2>Calculate Time Between Dates</h2>
            <form id="diff-form">
                <div class="form-group">
                    <label for="start-date">Start Date:</label>
                    <input type="date" id="start-date" required>
                </div>
                
                <div class="form-group">
                    <label for="end-date">End Date:</label>
                    <input type="date" id="end-date" required>
                </div>
                
                <button type="submit" class="btn">Calculate</button>
            </form>
            
            <div class="result" id="diff-result">
                <!-- Results will appear here -->
            </div>
        </div>
        
        <div class="tab-content" id="add-calculator">
            <h2>Add or Subtract Days</h2>
            <form id="add-form">
                <div class="form-group">
                    <label for="add-start-date">Start Date:</label>
                    <input type="date" id="add-start-date" required>
                </div>
                
                <div class="form-group">
                    <label for="days">Number of Days (negative to subtract):</label>
                    <input type="number" id="days" required>
                </div>
                
                <button type="submit" class="btn">Calculate</button>
            </form>
            
            <div class="result" id="add-result">
                <!-- Results will appear here -->
            </div>
        </div>
    </div>
    
    <script src="https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/moment/moment.min.js"></script>
    <script src="script.js"></script>
</body>
</html>

Now, let’s add the CSS to style.css:

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    font-family: 'Arial', sans-serif;
}

body {
    background-color: #f5f5f5;
    padding: 20px;
}

.container {
    max-width: 800px;
    margin: 0 auto;
    background-color: #fff;
    padding: 30px;
    border-radius: 10px;
    box-shadow: 0 0 15px rgba(0, 0, 0, 0.1);
}

h1 {
    text-align: center;
    margin-bottom: 30px;
    color: #333;
}

h2 {
    margin-bottom: 20px;
    color: #444;
}

.tabs {
    display: flex;
    margin-bottom: 20px;
    border-bottom: 1px solid #ddd;
}

.tab-btn {
    padding: 10px 20px;
    background: none;
    border: none;
    cursor: pointer;
    font-size: 16px;
    color: #777;
    position: relative;
}

.tab-btn.active {
    color: #4285f4;
    font-weight: bold;
}

.tab-btn.active::after {
    content: "";
    position: absolute;
    bottom: -1px;
    left: 0;
    width: 100%;
    height: 3px;
    background-color: #4285f4;
}

.tab-content {
    display: none;
    padding: 20px 0;
}

.tab-content.active {
    display: block;
}

.form-group {
    margin-bottom: 20px;
}

label {
    display: block;
    margin-bottom: 8px;
    font-weight: bold;
    color: #555;
}

input {
    width: 100%;
    padding: 10px;
    border: 1px solid #ddd;
    border-radius: 5px;
    font-size: 16px;
}

.btn {
    background-color: #4285f4;
    color: white;
    border: none;
    padding: 12px 20px;
    border-radius: 5px;
    cursor: pointer;
    font-size: 16px;
    transition: background-color 0.3s;
}

.btn:hover {
    background-color: #3367d6;
}

.result {
    margin-top: 30px;
    padding: 20px;
    background-color: #f9f9f9;
    border-radius: 5px;
    border-left: 4px solid #4285f4;
    display: none;
}

.result.active {
    display: block;
}

.result-item {
    margin-bottom: 10px;
    display: flex;
    justify-content: space-between;
}

.result-label {
    font-weight: bold;
    color: #555;
}

.result-value {
    color: #333;
}

@media (max-width: 600px) {
    .container {
        padding: 15px;
    }
    
    .tabs {
        flex-direction: column;
    }
    
    .tab-btn {
        width: 100%;
        padding: 10px;
        text-align: center;
    }
}

Finally, let’s add the JavaScript to script.js:

document.addEventListener('DOMContentLoaded', function() {

    // Tab switching functionality
    const tabBtns = document.querySelectorAll('.tab-btn');
    const tabContents = document.querySelectorAll('.tab-content');
    
    tabBtns.forEach(btn => {
        btn.addEventListener('click', () => {
            // Remove active class from all buttons and contents
            tabBtns.forEach(b => b.classList.remove('active'));
            tabContents.forEach(c => c.classList.remove('active'));
            
            // Add active class to clicked button
            btn.classList.add('active');
            
            // Show corresponding content
            const tabId = btn.getAttribute('data-tab');
            document.getElementById(tabId).classList.add('active');
        });
    });
    
    // Form submission for date difference calculation
    const diffForm = document.getElementById('diff-form');
    const diffResult = document.getElementById('diff-result');
    
    diffForm.addEventListener('submit', async function(e) {
        e.preventDefault();
        
        const startDate = document.getElementById('start-date').value;
        const endDate = document.getElementById('end-date').value;
        
        try {
            const response = await axios.post('/api/calculate-difference', {
                startDate,
                endDate
            });
            
            const result = response.data;
            
            // Display results
            diffResult.innerHTML = `
                <h3>Time Difference</h3>
                <div class="result-item">
                    <span class="result-label">Minutes:</span>
                    <span class="result-value">${result.minutes}</span>
                </div>
                <div class="result-item">
                    <span class="result-label">Hours:</span>
                    <span class="result-value">${result.hours}</span>
                </div>
                <div class="result-item">
                    <span class="result-label">Days:</span>
                    <span class="result-value">${result.days}</span>
                </div>
                <div class="result-item">
                    <span class="result-label">Weeks:</span>
                    <span class="result-value">${result.weeks}</span>
                </div>
                <div class="result-item">
                    <span class="result-label">Months:</span>
                    <span class="result-value">${result.months}</span>
                </div>
                <div class="result-item">
                    <span class="result-label">Years:</span>
                    <span class="result-value">${result.years}</span>
                </div>
            `;
            
            diffResult.classList.add('active');
            
        } catch (error) {
            diffResult.innerHTML = `<p class="error">Error: ${error.response?.data?.error || error.message}</p>`;
            diffResult.classList.add('active');
        }
    });
    
    // Form submission for adding/subtracting days
    const addForm = document.getElementById('add-form');
    const addResult = document.getElementById('add-result');
    
    addForm.addEventListener('submit', async function(e) {
        e.preventDefault();
        
        const startDate = document.getElementById('add-start-date').value;
        const days = document.getElementById('days').value;
        
        try {
            const response = await axios.post('/api/calculate-date', {
                startDate,
                days
            });
            
            const result = response.data;
            
            // Display results
            addResult.innerHTML = `
                <h3>Result Date</h3>
                <div class="result-item">
                    <span class="result-label">Original Date:</span>
                    <span class="result-value">${moment(startDate).format('MMMM D, YYYY')}</span>
                </div>
                <div class="result-item">
                    <span class="result-label">${days > 0 ? 'After adding' : 'After subtracting'} ${Math.abs(days)} day(s):</span>
                    <span class="result-value">${moment(result.resultDate).format('MMMM D, YYYY')}</span>
                </div>
            `;
            
            addResult.classList.add('active');
            
        } catch (error) {
            addResult.innerHTML = `<p class="error">Error: ${error.response?.data?.error || error.message}</p>`;
            addResult.classList.add('active');
        }
    });
    
    // Set default dates
    const today = moment().format('YYYY-MM-DD');
    const tomorrow = moment().add(1, 'days').format('YYYY-MM-DD');
    
    document.getElementById('start-date').value = today;
    document.getElementById('end-date').value = tomorrow;
    document.getElementById('add-start-date').value = today;
});

Running the Time Calculator Using nodejs

Now that we have all our files ready, let’s start the server:

node server.js

You should see a message saying: Server running at http://localhost:3000

Open your web browser and navigate to http://localhost:3000 to see your time calculator in action!

How It Works

Let’s break down how our time calculator works:

Backend (Node.js)

  1. We set up an Express server with two main API endpoints:
    • /api/calculate-difference: Calculates the difference between two dates
    • /api/calculate-date: Adds or subtracts days from a given date
  2. Both endpoints use Moment.js to handle date operations, which makes it much easier than using JavaScript’s built-in Date object.
  3. For calculating the difference, we use Moment’s diff() method which returns the difference in various units (minutes, hours, days, etc.).
  4. For adding or subtracting days, we use Moment’s add() method. If the number is negative, it subtracts instead of adding.

Frontend (HTML, CSS, JavaScript)

  1. Our HTML provides a simple interface with two tabs:
    • Date Difference Calculator
    • Add/Subtract Days Calculator
  2. The CSS makes everything look nice and responsive, with a clean modern design.
  3. Our JavaScript handles:
    • Tab switching
    • Form submissions
    • API calls using Axios
    • Displaying results

The Flow

When a user fills out either form and clicks “Calculate”:

  1. JavaScript captures the form data
  2. Axios sends a POST request to our backend API
  3. The server processes the request using Moment.js
  4. Results are sent back to the frontend
  5. JavaScript displays the results in a nice format

Making It Better

Here are some ways you could extend this project:

Add Time Inputs

Right now, our calculator only works with dates. You could add time inputs to calculate hours, minutes, and seconds as well.

<!-- Modify the date inputs to include time -->
<input type="datetime-local" id="start-date" required>
<input type="datetime-local" id="end-date" required>

Add More Calculation Options

You could add options to add/subtract months, years, hours, minutes, etc. instead of just days.

// Add a dropdown for the unit
<div class="form-group">
    <label for="unit">Unit:</label>
    <select id="unit">
        <option value="days">Days</option>
        <option value="weeks">Weeks</option>
        <option value="months">Months</option>
        <option value="years">Years</option>
        <option value="hours">Hours</option>
        <option value="minutes">Minutes</option>
    </select>
</div>

// Then update the backend route to handle different units
app.post('/api/calculate-date', (req, res) => {
  try {
    const { startDate, amount, unit } = req.body;
    
    const start = moment(startDate);
    
    if (!start.isValid()) {
      return res.status(400).json({ error: 'Invalid date format' });
    }
    
    const result = start.clone().add(parseInt(amount), unit);
    
    res.json({
      resultDate: result.format('YYYY-MM-DD HH:mm:ss')
    });
  } catch (error) {
    res.status(500).json({ error: error.message });
  }
});

Save Calculation History

You could add a feature to save a history of calculations, so users can reference previous results.

Improved Error Handling

Add more robust error handling, especially for invalid dates or extreme date ranges.

Conclusion

Congrats! You’ve built a fully functional time calculator using JavaScript, HTML, CSS, Node.js, and Axios. This project demonstrates how to work with dates in JavaScript, how to create a simple but effective user interface, and how to connect a frontend application to a Node.js backend using Axios.

The time calculator we built has two main features:

  1. Calculate the difference between two dates in multiple units (minutes, hours, days, weeks, months, and years)
  2. Add or subtract a specific number of days from a date

This is a practical tool that can be useful in many real-world scenarios, from project planning to event scheduling.

Feel free to expand on this project by adding more features, improving the UI, or integrating it with other tools. The possibilites are endless!

Remember, the code we’ve written is just a starting point. You can customize it to fit your needs or even use it as a building block for more complex applications.

Happy coding!

FAQ

in Time Calculator Using nodejs Why use Moment.js instead of native JavaScript Date?

Moment.js makes working with dates much easier and more intuitve. It provides a ton of methods for formatting, manipulating, and comparing dates that would be tedious to implement using just the native Date object.

Can I deploy this application?

Absolutely! You can deploy this application to various platforms like Heroku, Netlify, or Vercel. Just make sure to set up your environment variables and adjust the server settings accordingly.

Does this work on all browsers?

The code should work on all modern browsers. If you need to support older browsers, you might need to add some polyfills or use a tool like Babel to transpile your JavaScript.

Why use Node.js for the backend?

We’re using Node.js because it’s easy to set up, uses JavaScript (so we don’t have to switch languages), and is perfect for simple API endpoints like the ones we need. Plus, many hosting platforms support Node.js applications.

Can I use this code in my own projects?

Of course! Feel free to use, modify, and build upon this code for your own projects. That’s what learning to code is all about!

By Builldogic

Related Post

Blog

JWT vs Sessions: Which Is Best for Your Web App?

Builldogic
Blog

Mongoose Query Syntax vs Aggregation Pipeline: When and How to Use Each

Builldogic
Blog

How to Implement Plan Based Access Control in Node.js

Builldogic
One thought on “Creating a Time Calculator Using JavaScript, HTML, CSS, Node.js, and Axios”

  1. Great breakdown of how to tie together frontBlog Comment Creation-end and back-end with a practical use case! I especially liked the use of Moment.js to simplify date calculations—it’s a solid choice for beginners tackling time-based logic. One tip: for even more accuracy with durations, especially across daylight saving time changes, you might consider exploring libraries like Luxon or date-fns in future iterations.

    Reply

Leave a Reply

Your email address will not be published. Required fields are marked *

You Missed

Blog

JWT vs Sessions: Which Is Best for Your Web App?

Blog

Mongoose Query Syntax vs Aggregation Pipeline: When and How to Use Each

Blog

Creating a Time Calculator Using JavaScript, HTML, CSS, Node.js, and Axios

Blog

How to Implement Plan Based Access Control in Node.js