Age Calculator Source Code

470

Age Calculator and Duration Calculator

Explore our free online tools – the Age Calculator and Duration Calculator, designed to simplify age calculations and date duration measurements. Whether you need to calculate your age in years, months, and days or find the duration between two dates in various units, our calculators provide quick and accurate results. Try the Age Calculator and Duration Calculator today on Imran.xyz!

[WP-Coder id=”1″]

[sourcecode language=”plain”]
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Date Duration Calculator</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<div id="dateCalculator">
<label for="startDate">Start Date:</label>
<input type="date" id="startDate" required>
<label for="endDate">End Date:</label>
<input type="date" id="endDate" required>
<button id="calculateBtn">Calculate Duration</button>
<div id="result"></div>
</div>
<script src="script.js"></script>
</body>
</html>

[/sourcecode]

CSS Code

  • [css autolinks=”false” classname=”myclass” collapse=”false” firstline=”1″ gutter=”true” highlight=”1-3,6,9″ htmlscript=”false” light=”false” padlinenumbers=”false” smarttabs=”true” tabsize=”4″ toolbar=”true” title=”example-filename.php”]

    &amp;amp;lt;/pre&amp;amp;gt;
    /* Updated CSS styles for the result */
    #dateCalculator {
    text-align: center;
    margin: 50px;
    }

    label {
    font-size: 18px;
    }

    input {
    padding: 5px;
    font-size: 16px;
    margin: 10px;
    }

    button {
    padding: 10px 20px;
    background-color: #007BFF;
    color: #fff;
    border: none;
    font-size: 16px;
    cursor: pointer;
    }

    button:hover {
    background-color: #0056b3;
    }

    #result {
    font-size: 20px;
    margin-top: 20px;
    text-align: center;
    }

    .result-line {
    font-size: 18px;
    margin: 10px 0;
    }

    .result-line:first-child {
    margin-top: 0;
    }

    .or {
    font-weight: bold;
    margin-right: 10px;
    }
    &amp;amp;lt;pre&amp;amp;gt;[/css]

 

Java Script (JS) Code

 

 

[code lang=”js”]</pre>
document.getElementById("calculateBtn").addEventListener("click", calculateDuration);

function calculateDuration() {
var startDate = new Date(document.getElementById("startDate").value);
var endDate = new Date(document.getElementById("endDate").value);

if (isNaN(startDate) || isNaN(endDate)) {
document.getElementById("result").innerHTML = "Please select valid dates.";
} else {
var durationInMilliseconds = endDate – startDate;
var durationInSeconds = durationInMilliseconds / 1000;
var durationInMinutes = durationInSeconds / 60;
var durationInHours = durationInMinutes / 60;
var durationInDays = durationInHours / 24;
var durationInWeeks = durationInDays / 7;
var durationInMonths = durationInDays / 30.4375; // An average month length
var durationInYears = durationInMonths / 12;

document.getElementById("result").innerHTML =
"<div class='result-line'>" +
"Duration: " +
Math.floor(durationInYears) + " years, " +
Math.floor(durationInMonths % 12) + " months, " +
Math.floor(durationInDays % 30) + " days</div>" +

"<div class='result-line'>" +
"<span class='or'>or</span>" +
Math.floor(durationInMonths) + " months " + Math.floor(durationInDays % 30) + " days</div>" +

"<div class='result-line'>" +
"<span class='or'>or</span>" +
Math.floor(durationInWeeks) + " weeks " + Math.floor(durationInDays % 7) + " days</div>" +

"<div class='result-line'>" +
"<span class='or'>or</span>" +
Math.floor(durationInDays) + " days</div>" +

"<div class='result-line'>" +
"<span class='or'>or</span>" +
Math.floor(durationInHours) + " hours</div>" +

"<div class='result-line'>" +
"<span class='or'>or</span>" +
Math.floor(durationInMinutes) + " minutes</div>" +

"<div class='result-line'>" +
"<span class='or'>or</span>" +
Math.floor(durationInSeconds) + " seconds</div>";
}
}
<pre>[/code]

 

RELATED ARTICLESMORE FROM AUTHOR