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.jsdocument.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'); }}); |
Output:
Time Duration Calculator using Tailwind CSS
Design a Time Duration Calculator Card in Tailwind CSS & JavaScript
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.
Contact Us