Skip to main content

Age Calculator Using JavaScript ( Source Code )




We are providing Best 3 Age calculator javascript source code that can be used in separate blog website or on blog post or page.

How do I automatically calculate age in days?

Well, by using javascript calculate age in years, months days even in minutes and seconds. To calculate age in days use javascript in your HTML and create an input field like dates, months, and years. After the user inputs date of birth, and while submitting we can see current age as an output. It is a very simple javascript age calculator script code that can be used on any website.

So don't worry along with the complete age calculator tool Script we will learn some basics of it. But for that, you have to read the tutorial carefully so let's start.

Create Age calculator script tool website for blogger

Earlier we provided many advanced level scripts on our website Technical Arp, but we found that this age calculator Script for blogger is getting more searches so we are back with this. In this article, we proper steps are mentioned for blogger but still, you can use javascript age calculator in WordPress or any website. I will give you the script of the age calculator tool, which is a very good and user-friendly age calculator script. If you have a little knowledge of coding, then you can also customize this script according to your own, and if you do not have the knowledge of coding so, you can use this script as it is.

Javascript calculate age in years, months,Days, hours, minutes

Before using the below javascript age calculator script first let us understand it's working on our website so you can edit it easily. Our age calculator script will then automatically convert the distance of its date of birth from the current time to year months and days.

Its design is made by using HTML and CSS code and implemented it using JavaScript.

First, it collects the current data from your device using JavaScript code. Then we subtract the current date that with the user input data and convert the subtraction to years, months and days.

After getting age in years, months, and days using javascript we show on result section. That's enough Right! now time to create a javascript age calculator website on our blogger platform.

Dubble click to copy the code


<!DOCTYPE html>
<html lang="en">

<head>
	<meta charset="utf-8" />
	<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
	<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    <!-- Metadata Powered by www.technicalarp.com -->
	<title>Online Age Calculator</title>

	<meta name="description" content="Free online Online Age Calculator tool, easy to use and get video details in seconds just by one click" />
	<link rel="canonical" href="https://www.yourwebsitename.com" />
	<meta property="og:title" content="Online Age Calculator" />
	<meta property="og:description" content="Free online Online Age Calculator tool, easy to use and get video details in seconds just by one click" />
	<meta property="og:url" content="https://www.yourwebsitename.com" />
	<meta property="og:site_name" content="Online Age Calculator" />
	<meta property="og:locale" content="en_US" />
	<meta property="og:type" content="website" />
	<meta name="twitter:card" content="summary" />
	<meta name="twitter:description" content=" Free online Online Age Calculator tool, easy to use and get video details in seconds just by one click " />
	<meta name="twitter:title" content=" Online Age Calculator " />

    <!-- Edit must replace: Site Image you can replace below image to change it's image-->
	<meta content='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi1MxdVhQSI_liSquDiK6CDgbtD7owvWJdy5cjy8baqxmbPNIoC7Ttqn9UuLzYtOEWrMjRGfPRPc8omdTQ_7o4-7BuVdCXQWS9CgT40t-3Ge0x0Lkf6kWBr7ytjGn2dIM6dOY6euZEJxg/s1600/aaaaaaa.png' property='og:image'/>
	<meta content='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi1MxdVhQSI_liSquDiK6CDgbtD7owvWJdy5cjy8baqxmbPNIoC7Ttqn9UuLzYtOEWrMjRGfPRPc8omdTQ_7o4-7BuVdCXQWS9CgT40t-3Ge0x0Lkf6kWBr7ytjGn2dIM6dOY6euZEJxg/s1600/aaaaaaa.png' name='twitter:image'/>

    <!-- Favicons you can replace below image to change it's favicon-->
	<link rel="shortcut icon" href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjb-y2lJNadWZHaI__GhXLQZuKejiqAPypBFHbCBlxlkAxJF72cdEUITCn8Gi2aYFQvOzKy9Ki8iLEDF0fmu8JbMjioFalFdmsfp9Q_cGiQsI1iMcO08ROrTQflvf95idBuw5r0c8Mw0A/s320/keyphrase.png">

<style>
@import url('https://fonts.googleapis.com/css?family=Gotu&display=swap');
body {
background-color: dodgerblue;
font-family: 'Gotu', sans-serif;
color: white;
}
label {
font-size: 20px;
}
form {
text-align: center;
}
input {
border: 0;
padding: 10px 20px;
font-size: 20px;
border-radius: 50px;
margin: 5px;
}
h2 {
text-align: center;
}
button {
padding: 10px;
width: 300px;
margin: 10px 0;
font-size: 20px;
border: 0;
}
button:focus, button:hover {
background-color: black;
color: white;
}
p {
text-align: center;
}
div {
border: 1px solid white;
background-color: black;
text-align: center;
}
#postCredit {
background-color: powderblue;
color: black;
}
a {
text-decoration: none;
color: black;
display: block;
padding: 10px;
background-color: white;
}
a:hover {
background-color: cyan;
}
h1 {
background-color: black;
margin: 0 0 20px 0;
padding: 10px;
text-align: center;
}
</style>
</head>

<body>

<h1>Age Calculator Tool</h1>
<h2>Hey Dear, What's your name? <br /><input type = "text" placeholder = "Enter Your Name" autofocus/></h2>
<div id = "disBlock">
<p id = "disBD"></p>
<p id = "display"></p>
<p id = "time"></p>
</div>
<div id = "postCredit">
<p id = "credit"></p>
<a id = "about" href="#" target="_blank">Know More About Me</a>
</div>
<form>
<label>Enter Your Date of Birth: <input
type = "date"/></label><br />
<button type = "button">Calculate</button>
<button type = "reset">Reset</button>
</form>


<script>
let display = document.getElementById("display");
let input = document.getElementsByTagName("input");
let button = document.getElementsByTagName("button");
let time = document.getElementById("time");
let disBlock = document.getElementById("disBlock");
let disBD = document.getElementById("disBD");
let creditBlock = document.getElementById("postCredit");
let credit = document.getElementById("credit");
let about = document.getElementById("about");
disBlock.style.display = "none";
creditBlock.style.display = "none";
let dob = new Date(), today = new Date(), calTime;
function samay() {
let d = new Date();
time.innerHTML = d.getHours() + " Hours, " +
d.getMinutes() + " Minutes, " + d.getSeconds() + " Seconds Old";
}
function calculate() {
disBlock.style.display = "block";
creditBlock.style.display = "block";
credit.innerHTML = "Thank You For Visiting<br>Our website website.com";
let x = input[1].value.split("-");
dob.setDate(x[2]);
dob.setMonth(x[1] - 1);
dob.setFullYear(x[0]);
let year, month, day, HBD;
day = (function() {
if(today.getDate() > dob.getDate()) {
return today.getDate() - dob.getDate() - 1;
}
else if(today.getDate() == dob.getDate()) {
return today.getDate() - dob.getDate();
}
else {
let calDate = new Date(dob.getFullYear(), dob.getMonth() + 1, 0);
return (today.getDate() + calDate.getDate()) - dob.getDate() - 1;
}
}());
month = (function() {
if(today.getMonth() >= dob.getMonth()) {
if(today.getDate() >= dob.getDate()) {
return today.getMonth() - dob.getMonth();
}
else {
if((today.getMonth() - 1) >= dob.getMonth()) {
return (today.getMonth() - 1) - dob.getMonth();
}
else {
return ((today.getMonth() - 1) + 12) - dob.getMonth();
}
}
}
else {
if(today.getDate() >= dob.getDate()) {
return (today.getMonth() + 12) - dob.getMonth();
}
else {
return ((today.getMonth() - 1) + 12) - dob.getMonth();
}
}
}());
year = (function() {
if(dob.getMonth() == today.getMonth()) {
if(dob.getDate() > today.getDate()) {
return (today.getFullYear() - 1) - dob.getFullYear();
}
else {
return today.getFullYear() - dob.getFullYear();
}
}
else {
if(dob.getMonth() > today.getMonth()) {
return (today.getFullYear() - 1) - dob.getFullYear();
}
else {
return today.getFullYear() - dob.getFullYear();
}
}
}());
HBD = (function(){
if(today.getMonth() == dob.getMonth()) {
if(today.getDate() == dob.getDate()) {
disBD.innerHTML = "OMG it's your Birthday<br>Happy Birthday To You<br>";
}
else {
disBD.innerHTML = "";
}
}
else {
disBD.innerHTML = "";
}
}());
display.innerHTML = "Hi Dear " + input[0].value + ", <br/>You are " + year + " Years, " + month +
" Months, " + day + " Days, ";
calTime = setInterval(samay, 1000);
}
button[0].onclick = calculate;//when calculate button is clicked
function reset() {
input[0].focus();
display.innerHTML = "";
time.innerHTML = null;
clearInterval(calTime);
disBlock.style.display = "none";
creditBlock.style.display = "none";
}
button[1].onclick = reset;//when the reset button is clicked
</script>

</body>

</html>

Steps to Create Age calculator using

Using the above script you can add this to your blog post or page or even create a new separate website. So let's make our own blogger tool website by following the below simple steps.

Step 1: Change to First-generation classic theme
Step 2: Change Navbar from Blue to off
Step 3: Remove all and Upload/Add provided Script
Step 4: Preview your Website Final Look
Step 5: Congrats your website is ready to Play

If you know how to play with HTML, CSS, and Javascript then you can even customize it in your preferable way.
Labels:

Comments

Post a Comment

Popular posts from this blog

Money Management Excel Sheet (binary Trading)

  Money Management: A Powerful Tool for Trading Success In the ever-evolving world of finance and trading, having effective money management tools at your disposal is essential. One such tool that has gained prominence in recent times is the "Masaniello Money Management" indicator. This indicator serves as a critical resource for managing your finances and optimizing your trading decisions. What is Money Management? Masaniello Money Management is a specialized tool designed to help traders handle their finances efficiently. It operates as an indicator, enabling traders to manage price values effectively and make informed decisions for their trades. This tool serves as a predictive element, providing insights into future price movements and aiding in the management of financial resources within the market. How Money Management Works This innovative tool primarily targets the binary options market, offering traders a robust mechanism for controlling their finances. Notably, it ...
Post a Comment
Read more

Age Calculator

Age Calculator Age Calculator Enter your birthdate below to find out your age: Birthdate: Calculate Age About This Tool This age calculator was created to help people determine their age quickly and easily. It uses JavaScript to calculate the age based on the birthdate entered, and displays the result in years, months, and days. Additionally, it calculates the date of the user's next birthday and displays the time remaining until that date. How to Use This Tool To use this age calculator, simply enter your birthdate in the form above and click "Calculate Age". The result will be displayed below the form, showing your age in years, months, and days. Additionally, the date of your next birthday and the time remaining until that date will be displayed in a separate box below the age result. An age calculator is a tool that allows you to calculate a person's age based on their date of bi...
Post a Comment
Read more

Website speed test

Use this free  Website Speed Test  to analyze the load speed of your websites, and learn how to make them faster. Analyze with PageSpeed Insights ... Get your PageSpeed score and use PageSpeed suggestions to make your web site faster through our online tool. What is a website speed checker? A website speed checker is a tool that allows you to measure the loading speed of your website. It analyzes your website and provides you with a report detailing how long it takes for your website to load and identifies any performance issues that may be slowing it down. Why is website speed important? Website speed is an important factor for several reasons. Firstly, a fast-loading website provides a better user experience. Visitors are more likely to stay on your website if it loads quickly and smoothly, which can lead to increased engagement, conversions, and revenue. Secondly, website speed is a critical factor in search engine optimization (SEO). Search engines like Google use website ...
Post a Comment
Read more