Age Calculator Using HTML, CSS, and JavaScript
Introduction
Hello friends, my name is Gautam and you are all welcome to today’s new blog post. Today we have created a very amazing project for you which is very useful for you. This is an age calculator in which you can calculate the age. With its help, you can find out the age of any user. To create this, we have taken the help of html css and javascript. Creating this is a very easy task. If you have even a little knowledge of html css or javascript then you can create it. In this, we have made a tin box at the top in which you have to add the user’s date of birth. It will be very easy to add it and then you will find a button at the bottom, on clicking which you will get to know the age. So let us know how we have made this calculator and how we have used the code.
HTML (index.html)
Friends, now we are going to first understand the HTML code in which we have used some code. We have not used HTML or CSS much but the most important code is the Javascript code which we will see later. So let’s understand the HTML code.
- This is the element of HTML which tells that this code is HTML code <!DOCTYPE HTML>
- If you want to set the language of your code then you can do it with the help of this element <html lang=”en” >
- This is an important tag of HTML between its open and close tag we add our CSS link or font family link etc. <head></head>
- In the head section we have first added our title. In the title you can add the title related to your project <title>Javascript Age Calculator</title>
- To link the css file to html we have to use this link attribute <link rel=”stylesheet” href=”./style.css”>
- To create the calculator further, we first need to create a container <div class=”container”>
- Then we created a date container and a button and it has an important container like this <div class=”inputs-wrapper”>
- We first create a date using the HTML input element <input type=”date” id=”date-input”>
- To calculate the age, we have created a button which we have created with <button> tag <button onclick=”ageCalculate()”>Calculate</button>
- Then we have created another container in which we have created boxes of Year, Month and Days <div class=”outputs-wrapper”>
- To create year, month and days boxes we have created three separate boxes which are like this <div></div> Then we have added text using <span> element <span id=”years”> – </span> and added <p>Years</p> title
- Then at last we have linked the javascript file to the html file which is like this <script src=”./script.js”></script>
<title>Javascript Age Calculator</title>
<!-- partial:index.partial.html -->
<div class="container">
<div class="inputs-wrapper">
<button>Calculate</button>
</div>
<div class="outputs-wrapper">
<div>
<span id="years"> - </span>
<p>Years</p>
</div>
<div>
<span id="months"> - </span>
<p>Months</p>
</div>
<div>
<span id="days"> - </span>
<p>Days</p>
</div>
</div>
</div>
<!-- partial -->
CSS (Style.css)
Now we are going to understand the CSS code because we have created the structure with HTML but now we will have to design our project with the help of CSS so let’s understand our CSS code now.
- First we have to set the color of the background like this: background-color: #0a6kf1;
- In the important container of calculator we have kept width: 40%; and also added min width which is like this min-width: 320ps;
- In the container we have kept the position: absolute; and in it we have used transform property transform: translate(-50%, -50%);
- We have used this font in the calculator font-family: “Poppins”, font-only; and the border is set to none border: none;
- We have created tin boxes in the calculator for year, month and days and for background we have used this color background-color: #080808;
- In the box we have used padding padding: 30px 25px; and the border is rounded border-radius: 8px; and in this we have also used shadow box-shadow: 0px 15px 20px rgba(0, 0, 0, 0.3);
- input box height: 50px; in background we have kept background-color: #ffffff; and color is black color: #080808; and along with it we have kept border-radius: 5px;
- In the year, month and days box we have kept width: 100%; and to center it we have used display: flex; and in this we have used justify-content: space-between; so that it becomes centered and there is a little gap
- then the height of year, month and days box is kept as 85px; you can increase it more and we have also kept its width equal to the height, in this we have used this color in the background background-color: #080808;
- We have set the box title to font-size: 25ps; and font-weight: 500; to make it look bold
*,
*:before,
*:after {
padding: 0;
margin: 0;
box-sizing: border-box;
}
body {
background-color: #0a6cf1;
}
.container {
width: 40%;
min-width: 320px;
position: absolute;
transform: translate(-50%, -50%);
left: 50%;
top: 50%;
}
.container * {
font-family: "Poppins", sans-serif;
border: none;
outline: none;
}
.inputs-wrapper {
background-color: #080808;
padding: 30px 25px;
border-radius: 8px;
margin-bottom: 40px;
box-shadow: 0px 15px 20px rgba(0, 0, 0, 0.3);
}
input,
button {
height: 50px;
background-color: #ffffff;
color: #080808;
font-weight: 500;
border-radius: 5px;
}
input {
width: 100%;
padding: 0 20px;
font-size: 14px;
margin: 20px 0;
}
button {
width: 100%;
}
.outputs-wrapper {
width: 100%;
display: flex;
justify-content: space-between;
}
.outputs-wrapper div {
height: 85px;
width: 85px;
background-color: #080808;
border-radius: 5px;
color: #ffffff;
display: -ms-grid;
display: grid;
place-items: center;
padding: 10px 0;
box-shadow: 0px 15px 20px rgba(0, 0, 0, 0.3);
}
span {
font-size: 25px;
font-weight: 500;
}
p {
font-size: 12px;
color: #707070;
font-weight: 400;
}
a {
display: block;
width: 100%;
background-color: #080808;
color: #ffffff;
padding: 10px 0;
text-align: center;
text-decoration: none;
margin-top: 40px;
border-radius: 5px;
box-shadow: 0px 15px 20px rgba(0, 0, 0, 0.3);
}
Javascript (Script.js)
Friends, now we have designed and created our age calculator correctly with the help of html and css but if we try to calculate our age in it now, then no result will be shown to us and no button will work because we have not added the javascript code in it yet. So, we will have to complete it with the help of javascript. We have written the javascript code but we need to link it with the html file. After this, as soon as we run our code, our project will run correctly but before that, you need to understand the code. So, let’s go First, we understand our code.
- First of all we have created an alert message in our calculator which will be shown to you whenever you open the calculator alert(“Select birth date and the click on calculate”);
- Month is set using JavaScript’s cust variable. Const Months = [31, 28, 31, 30, 31, 30, 31, 31, 30, 31, 30, 31];
- Then we have created a function with the help of which we have set the calculation of year and month function LapChecker(year) {
Then friends, we have created an important function for calculating age which you can see in the code. So friends, in this way our calculator is complete which has a total of three parts: HTML, CSS and Javascript.
alert("Select birth date and the click on calculate");
const months = [31, 28, 31, 30, 31, 30, 31, 31, 30, 31, 30, 31];
function leapchecker(year) {
if (year % 4 == 0 || (year % 100 == 0 && year % 400 == 0)) {
months[1] = 29;
} else {
months[1] = 28;
}
}
function ageCalculate() {
let today = new Date();
let inputDate = new Date(document.getElementById("date-input").value);
let birthMonth, birthDate, birthYear;
let birthDetails = {
date: inputDate.getDate(),
month: inputDate.getMonth() + 1,
year: inputDate.getFullYear()
};
let currentYear = today.getFullYear();
let currentMonth = today.getMonth() + 1;
let currentDate = today.getDate();
leapchecker(currentYear);
if (
birthDetails.year > currentYear ||
(birthDetails.month > currentMonth && birthDetails.year == currentYear) ||
(birthDetails.date > currentDate &&
birthDetails.month == currentMonth &&
birthDetails.year == currentYear)
) {
alert("Not yet born");
displayResult("-", "-", "-");
return;
}
birthYear = currentYear - birthDetails.year;
if (currentMonth >= birthDetails.month) {
birthMonth = currentMonth - birthDetails.month;
} else {
birthYear--;
birthMonth = 12 + currentMonth - birthDetails.month;
}
if (currentDate >= birthDetails.date) {
birthDate = currentDate - birthDetails.date;
} else {
birthMonth--;
let days = months[currentMonth - 2];
birthDate = days + currentDate - birthDetails.date;
if (birthMonth < 0) {
birthMonth = 11;
birthYear--;
}
}
displayResult(birthDate, birthMonth, birthYear);
}
function displayResult(bDate, bMonth, bYear) {
document.getElementById("years").textContent = bYear;
document.getElementById("months").textContent = bMonth;
document.getElementById("days").textContent = bDate;
}
Output:
Disclaimer: The code provided in this post is sourced from GitHub and is distributed under the MIT License. All credits for the original code go to the respective owner. We have shared this code for educational purposes only. Please refer to the original repository for detailed information and any additional usage rights or restrictions.
Video Call Website Using HTML, CSS, and JavaScript (Source Code) Introduction Hello friends, welcome to today’s new blog post. Today we have …
promise day using html CSS and JavaScript Introduction Hello all my developers friends my name is Gautam and everyone is welcome to …
Age Calculator Using HTML, CSS, and JavaScript Introduction Hello friends, my name is Gautam and you are all welcome to today’s new …
Loan Calculator Using HTML, CSS, and JavaScript With Source Code Introduction Hello friends my name is Gautam and you are all welcome …
Get Huge Discounts
More Python Projects
