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 =
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:
Recommended Articles