Design a Time Duration Calculator Card in Tailwind CSS & JavaScript

Last Updated : 08 Mar, 2024

In this article, we’ll create a simple Time Duration Calculator application using the Tailwind CSS and JavaScript. The application allows users to add a starting date & time and an ending date & time. And user gets the difference between these two dates as a output. We’ll utilize Tailwind CSS for styling to create an attractive user interface and JavaScript for the logic.

Approach to create Time Duration Calculator Card

Create an HTML file named index.html and link the Tailwind CSS stylesheet for styling.
Design the input area where user will input the starting and ending date & time.
Create a file named script.js, and write JavaScript code inside it to handle form submission.
Implement JavaScript logic to calculate the duration between start and end times entered by the user.

Example: This example describes the implementation of a basic Time Duration Calculator using Tailwind CSS, and Javascript.

HTML

<!DOCTYPE html>
<html lang="en">
<head>
    <title>The Time Duration Calculator</title>
    <link href=
"https://cdn.jsdelivr.net/npm/tailwindcss@2.2.19/dist/tailwind.min.css"
          rel="stylesheet">
</head>
<body class="bg-gray-100 flex items-center justify-center h-screen">
    <div class="max-w-md flex items-center 
                flex-col bg-white rounded-lg 
                shadow-lg border-2 border-green-500 p-8">
        <!-- Heading -->
        <h1 class="text-3xl font-bold text-center mb-8">
            Time Duration Calculator
        </h1>
 
        <!-- Start date Input Section -->
        <div class="mb-4 flex gap-10 items-end">
            <label for="startTime"
                class="text-gray-700 block mb-2">
                Start Time
            </label>
            <input type="datetime-local"
                id="startTime"
                class="input-field border border-green-500 rounded-lg p-2">
        </div>
 
        <!-- Finish date Input Section -->
        <div class="mb-4 flex gap-8 items-end">
            <label for="endTime"
                class="text-gray-700 block mb-2">
                Finish Time
            </label>
            <input type="datetime-local"
                id="endTime"
                class="input-field border border-green-500 rounded-lg p-2">
        </div>
 
        <!-- Calculate Button -->
        <button
            class="bg-blue-500 hover:bg-blue-600 
                   text-white py-2 px-4 
                   rounded-md w-full focus:outline-none" 
            id="calculateButton">
            Calculate Duration
        </button>
 
        <!-- Result Section -->
        <div class="result text-center text-lg
                    font-semibold mt-4 hidden" 
             id="result">
        </div>
    </div>
 
    <script src="script.js"></script>
</body>
</html>

Javascript

// file - script.js
 
document.getElementById('calculateButton').addEventListener('click', () => {
    // Fetching the data
    const startTime = new Date(document.getElementById('startTime')
                                       .value)
                                       .getTime();
    const endTime = new Date(document.getElementById('endTime').value).getTime();
 
    // Checking if user have given any input or not
    if (isNaN(startTime) || isNaN(endTime)) {
        document.getElementById('result')
                .textContent = "Please enter valid dates.";
        document.getElementById('result').classList.remove('hidden');
    } else {
        // Calculating the time difference
        const duration = Math.abs(endTime - startTime);
        const days = Math.floor(duration / (1000 * 60 * 60 * 24));
        const hours = Math.floor((
                        duration % (1000 * 60 * 60 * 24)) / (1000 * 60 * 60
                      ));
        const minutes = Math.floor((duration % (1000 * 60 * 60)) / (1000 * 60));
        const seconds = Math.floor((duration % (1000 * 60)) / 1000);
        // Showing the result
        document.getElementById('result').textContent =
            `${days} days :: ${hours} hours :: 
             ${minutes} minutes :: ${seconds} seconds`;
        document.getElementById('result').classList.remove('hidden');
    }
});