Intro:
Hello, Readers today in this Blog post I create a very awesome project using only HTML CSS and JavaScript this project’s name is Age Calculator using HTML CSS & JavaScript. I received lots of comments to create an age Calculator and share code so I am here it is very easy to create within 5 to 10 min. Recently I share a blog on how to create an Animated Login form in HTML and CSS please check this.
What is Age Calculator:
An age calculator is a tool that allows you to determine your current age or the number of years, months, and days between two dates. You can use an age calculator to find out how old you are in years, months, and days, or to calculate the number of years, months, and days between two dates. Some age calculators may also provide additional information, such as your astrological sign or Chinese zodiac sign based on your birth date.
But in this design, I Create a very simple and beautiful Calculator to calculate your current age. First, it asks you to please enter your birth date, birth month, and birth year and then you click on the submit or calculate button it will show your current age in milliseconds.
How to Use Age Calculator
If you want to use this age calculator and calculate your current age so follow these steps.
- Age Calculator Click this link and open a new tab.
- First enter your birth date, birth month, and last birth year.
- Click the submit button, So age is calculated and shown in the bottom section of the calculator.
Note: Please provide the correct birth date, month, and year if you provide the wrong information so it does not calculate your correct age. I think you understand.
How to Create Age Calculator using JavaScript?
It is very easy to create an age calculator using HTML, CSS, and JavaScript. If you are not familiar with these languages so no problem I also provide the source code of my all projects and designs. Follow these steps to create this calculator.
Steps to Create an Age Calculator
- First you need to create two files one is for HTML and the other one for CSS.
- Link your CSS file with an HTML file.
- Create some elements like Input fields, Buttons, and text.
- In the CSS file customize your elements as you want eg: width, height, color, padding, etc.
- In last you need to create a logic using JavaScript and apply it to your calculator.
Follow these and create but I know it is quite difficult if you are a beginner in programming and coding so no problem I also provide video tutorials of my all projects and designs watch this video and subscribe to my YouTube channel if you are related to coding and the programming field.
Video Tutorial of Age Calculator using HTML CSS and JavaScript
You might like this:
Source Code of Age Calculator using JavaScript [ Source Code ]
You know I also provide a source code for my all projects. So I provide a complete source code for the age calculator using HTML, CSS and JavaScript it is very easy to create just copy and paste it into your file and use it according to your need.
First, you need to create an HTML file and copy the given code and paste it into your HTML file make sure your file is a (.html) extension.
HTML FILE
<!-- Created by www.codingpakistan.com -->
<!DOCTYPE html>
<html>
<head>
<title>JavaScript Age Calculator</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<div class="container">
<form>
<div class="base">
<div class="enter">
<h4>Age Calculator</h4>
</div>
<div class="block">
<p class="title">Date</p>
<input type="text" name="date" id="date" placeholder="dd" required="required" minlength="1" maxlength="2" />
</div>
<div class="block">
<p class="title">Month</p>
<input type="text" name="month" id="month" placeholder="mm" required="required" minlength="1" maxlength="2" />
</div>
<div class="block">
<p class="title">Year</p>
<input type="text" name="year" id="year" placeholder="yyyy" required="required" minlength="4" maxlength="4" />
</div>
</div>
<div class="base">
<div class="enter">
<input type="button" name="submit" value="Submit" onclick="age()" />
</div>
</div>
<div id="age"></div>
</form>
</div>
<script type=" text/javascript">
function age() {
var d1 = document.getElementById('date').value;
var m1 = document.getElementById('month').value;
var y1 = document.getElementById('year').value;
var date = new Date();
var d2 = date.getDate();
var m2 = 1 + date.getMonth();
var y2 = date.getFullYear();
var month = [31, 28, 31, 30, 31, 30, 31, 31, 30, 31, 30, 31];
if(d1 > d2){
d2 = d2 + month[m2 - 1];
m2 = m2 - 1;
}
if(m1 > m2){
m2 = m2 + 12;
y2 = y2 - 1;
}
var d = d2 - d1;
var m = m2 - m1;
var y = y2 - y1;
document.getElementById('age').innerHTML = 'Your Age is '+y+' Years '+m+' Months '+d+' Days';
}
</script>
<body>
<html>
Then create a CSS file and copy the given code and paste it into your CSS file make sure your file is a (.css) extension.
CSS FILE
/* Created by www.codingpakistan.com */
body{
font-family: Arial, Helvetica, sans-serif;
background-color: #2782e3;
font-size: 15px;
line-height: 1.5;
padding: 0;
margin: 0;
}
* {
box-sizing: border-box;
}
.container{
width:520px;
height: auto;
margin: 100px auto;
background-color: #eee;
border-radius: 5px;
}
.base{
width: 100%;
margin: 0;
overflow: hidden;
display: block;
float: none;
}
.block{
width: 135px;
padding: 5px 20px;
margin-left: 20px;
display: inline-block;
float: left;
}
.base h4{
font-size: 26px;
text-align: center;
font-family: sans-serif;
font-weight: normal;
margin-top: 0px;
box-shadow: 0px 2px #bababa;
background: white;
font-size: 34px;
color: navy;
}
.title{
font-size: 20px;
text-align: left;
font-family: sans-serif;
font-weight: normal;
line-height: 0.5;
letter-spacing: 0.5px;
word-spacing: 2.7px;
color: #1073d0;
}
input[type=text] {
width: 140px;
margin: auto;
outline: none;
min-height: 50px;
border: 2px solid #1073d0;
padding: 12px;
background-color: #f7f7f7;
border-radius: 2px;
color: #1073d0;
font-size: 17px;
}
input[type=text]:focus{
background-color: #ffffff;
border: 2px solid orange;
outline: none;
}
input[type=button]{
width: 150px;
margin-left: 35%;
margin-top: 40px;
outline: none;
border: none;
border-radius: 2px;
background-color: #0761b6;
color: #ffffff;
padding: 14px 16px;
text-align: center;
font-size: 16px;
}
input[type=button]:hover{
background-color: #003669;
}
#age{
display: block;
margin: 10px;
margin-top: 35px;
padding: 10px;
padding-bottom: 20px;
overflow: hidden;
font-family: verdana;
font-size: 23px;
font-weight: normal;
line-height: 1.5;
word-spacing: 2.7px;
color: navy;
}
JavaScript file I included in an HTML file so you don’t need to create a separate file of JavaScript.
Download Source Code Age Calculator
If your code is not working correctly and you face any type of issue so click the download button zip file is automatically downloaded first you need to extract this file and use it according to your need.
If you have any questions about this please ask in the comments section I will answer as soon as possible. Thanks for reading I will come again with another exciting project 🥰
