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.
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' ); } }); |
Output: