Build a User-Friendly Age Calculator with HTML, CSS, and JavaScript (Source Code)

By Faraz - December 09, 2023

Learn web development by building an Age Calculator using HTML, CSS, and JavaScript. Follow this step-by-step guide for an interactive and user-friendly project.

Join us on Telegram

Build a User-Friendly Age Calculator with HTML, CSS, and JavaScript.jpg

Read Also Creating Elegant Neumorphic Buttons using HTML and CSS (Source Code).jpg

Creating Elegant Neumorphic Buttons using HTML and CSS (Source Code)

Welcome to the world of web development! In this tutorial, we will guide you through the process of building a user-friendly Age Calculator using HTML, CSS, and JavaScript.

Join My Telegram Channel to Download the Project Source Code: Click Here

Prerequisites:

Before starting this tutorial, you should have a basic understanding of HTML, CSS, and JavaScript. Additionally, you will need a code editor such as Visual Studio Code or Sublime Text to write and save your code.

Source Code

Step 1 (HTML Code):

Now, let's establish the structure of our Age Calculator by creating the HTML form to collect the user's birthdate.

How to Do It:

Open your HTML file.
Create a form with an input field for the birthdate.
Add a button for calculating the age.

Let's break down the code step by step:

1. <!DOCTYPE html>: This declaration specifies the document type and version of HTML being used, in this case, HTML5.

2. <html>: This tag marks the beginning of the HTML document.

3. <head>: This section contains meta-information about the HTML document, such as the title, linked stylesheets, and scripts.

<title>: Sets the title of the web page, which appears in the browser's title bar or tab.
<link rel="stylesheet" href="styles.css">: Links an external stylesheet named "styles.css" to apply styles to the HTML document.
<script src="script.js"></script>: Includes an external JavaScript file named "script.js" to add dynamic behavior to the page.

4. <body>: This is the main content of the HTML document.

5. <div class="container">: This is a container division that wraps the entire content. It is a common practice to use containers for layout and styling purposes.

6. <form>: Defines an HTML form to gather user input.

7. <div class="base">: Represents a base division within the form.

8. <div class="enter">: Contains the heading "Age Calculator."

9. <h4>: Defines a heading level 4 with the text "Age Calculator."

10. <div class="block">: Represents a block division within the form for each input field (Date, Month, Year).

<p class="title">: Defines a paragraph with the class "title" for labeling the input.
<input type="text" ...>: Defines a text input field for entering date, month, and year. Each input has specific attributes such as name, id, placeholder, required, minlength, and maxlength.

11. Another <div class="base"> follows, containing an "Enter" division with a button to submit the form.

<input type="button" name="submit" value="Get Age" onclick="getage()">: Creates a button labeled "Get Age" that triggers a JavaScript function called "getage()" when clicked.

12. <div id="age"></div>: This empty division will be used to display the calculated age. The content will be dynamically added using JavaScript.

13. The closing tags </body> and </html> mark the end of the HTML document.

<!DOCTYPE html>
<html>
<head>
	<title>Age Calculator</title>
  <link rel="stylesheet" href="styles.css">
  <script src="script.js"></script>
</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="Get Age" onclick="getage()" />
    </div>
  </div>
    <div id="age"></div>
  </form>
</div>
<body>
<html>

Read Also

How to Create a Dropdown List with HTML and CSS

Step 2 (CSS Code):

Enhance the visual appeal of your Age Calculator by applying CSS styling.

How to Do It:

Open your CSS file.
Style the form, input field, and button for a clean interface.
Consider responsive design for various devices.

Here's a breakdown of the code:

1. Universal Selector

* {
  box-sizing: border-box;
}

This sets the box-sizing property to border-box for all elements on the page. The box-sizing: border-box includes padding and border in the element's total width and height.

2. Body Styling

body {
  font-family: sans-serif;
  background: #1f1d2b;
  padding: 0;
  margin: 0;
  display: grid;
  place-items: center;
  height: 100vh;
}

Sets the font family for the entire document to sans-serif.
Sets the background color to a dark blueish color (#1f1d2b).
Removes default margin and padding from the body.
Uses grid layout to center the content both horizontally and vertically.
Sets the body height to 100% of the viewport height (100vh).

3. Container Styling

.container {
  width: 520px;
  height: auto;
  background-color: #ffd791;
  border-radius: 5px;
}

Sets the width of the container to 520 pixels.
Automatically adjusts the height based on its content.
Sets the background color to a light yellowish color (#ffd791).
Adds a border-radius of 5 pixels for rounded corners.

4. Base Styling

.base {
  width: 100%;
  border-radius: 20px;
  margin: 0;
  overflow: hidden;
  display: block;
  float: none;
}

Sets the width to 100%.
Applies a border-radius of 20 pixels for rounded corners.
Removes margin.
Hides overflowing content.
Specifies a block-level element with no floating.

5. Block Styling

.block {
  width: 135px;
  padding: 5px 20px;
  margin-left: 20px;
  display: inline-block;
}

Sets the width of the block to 135 pixels.
Adds padding of 5 pixels on the top and bottom, and 20 pixels on the left and right.
Adds a left margin of 20 pixels.
Specifies an inline-block display.

6. Header (Base h4) Styling

.base h4 {
  text-align: center;
  font-family: sans-serif;
  font-weight: normal;
  margin-top: 0px;
  box-shadow: 0px 2px #1f1d2b;
  background: #ffd791;
  font-size: 25px;
  padding: 10px;
  color: #1f1d2b;
}

Centers the text.
Sets the font family, weight, and size.
Adds a box-shadow below the header.
Sets the background color to the same as the container.
Adds padding and removes top margin.
Sets the text color.

7. Title Styling

.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: #1f1d2b;
}

Sets the font size, alignment, family, weight, and color.
Adjusts line height, letter spacing, and word spacing.

8. Text Input Styling

input[type="text"] {
  /* styles for text input */
}
input[type="text"]:focus {
  /* styles for focused state of text input */
}

Styles for text input fields, including width, margin, outline, border, padding, background color, border-radius, color, and font size.
Styles for the focused state of text input fields, changing the background color and border.

9. Button Styling

input[type="button"] {
  /* styles for button */
}
input[type="button"]:hover {
  /* styles for button on hover */
}

Styles for the button, including width, margin, outline, border, background color, text color, padding, text alignment, transition, border-radius, cursor, and font size.
Styles for the button on hover, changing the background color.

10. ID Selector (#age) Styling

#age {
  display: block;
  padding: 20px;
  font-family: sans-serif;
  font-size: 23px;
  text-align: center;
  line-height: 1.5;
  color: #1f1d2b;
}

Styles for an element with the ID "age," including display, padding, font family, font size, text alignment, line height, and color.

* {
  box-sizing: border-box;
}
body {
  font-family: sans-serif;
  background: #1f1d2b;
  padding: 0;
  margin: 0;
  display: grid;
  place-items: center;
  height: 100vh;
}
.container {
  width: 520px;
  height: auto;
  background-color: #ffd791;
  border-radius: 5px;
}
.base {
  width: 100%;
  border-radius: 20px;
  margin: 0;
  overflow: hidden;
  display: block;
  float: none;
}
.block {
  width: 135px;
  padding: 5px 20px;
  margin-left: 20px;
  display: inline-block;
}
.base h4 {
  text-align: center;
  font-family: sans-serif;
  font-weight: normal;
  margin-top: 0px;
  box-shadow: 0px 2px #1f1d2b;
  background: #ffd791;
  font-size: 25px;
  padding: 10px;
  color: #1f1d2b;
}

.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: #1f1d2b;
}
input[type="text"] {
  width: 140px;
  margin: auto;
  outline: none;
  min-height: 50px;
  border: 2px solid #1f1d2b;
  padding: 10px;
  background-color: #f7f7f7;
  border-radius: 5px;
  color: #1f1d2b;
  font-size: 17px;
}
input[type="text"]:focus {
  background-color: #fff;
  border: 2px solid #1f1d2b;
  outline: none;
}
input[type="button"] {
  width: 150px;
  margin-left: 35%;
  margin-top: 40px;
  outline: none;
  border: none;
  background-color: #1f1d2b;
  color: #fff;
  padding: 14px 16px;
  text-align: center;
  transition: .2s;
  border-radius: 5px;
  cursor: pointer;
  font-size: 16px;
}
input[type="button"]:hover {
  background-color: #1f1d2b;
}

#age {
  display: block;
  padding: 20px;
  font-family: sans-serif;
  font-size: 23px;
  text-align: center;
  line-height: 1.5;
  color: #1f1d2b;
}

Step 3 (JavaScript Code):

Time to add the brains! Use JavaScript for age calculation based on the user's input.

How to Do It:

Open your JavaScript file.
Write a function to calculate the age.
Integrate this function with the HTML form.

Here's a step-by-step explanation:

1. Function Declaration:

function getage() {

This line declares a JavaScript function named getage.

2. Input Retrieval:

let d1 = document.getElementById('date').value;
let m1 = document.getElementById('month').value;
let y1 = document.getElementById('year').value;

The code retrieves the day, month, and year values from HTML input elements with the ids 'date', 'month', and 'year', respectively. These values represent the user's date of birth.

3. Current Date Retrieval:

let date = new Date();
let d2 = date.getDate();
let m2 = 1 + date.getMonth();
let y2 = date.getFullYear();

This section obtains the current date (day, month, and year) using the Date object in JavaScript. The month is adjusted by adding 1 since months in JavaScript are zero-indexed (0 for January, 1 for February, and so on).

4. Month Array:

let month = [31, 28, 31, 30, 31, 30, 31, 31, 30, 31, 30, 31];

An array named month is created, representing the number of days in each month. Note that February is assumed to have 28 days.

5. Adjustment for Day and Month:

if(d1 > d2){
	d2 = d2 + month[m2 - 1];
	m2 = m2 - 1;
}
if(m1 > m2){
	m2 = m2 + 12;
	y2 = y2 - 1;
}

If the input day is greater than the current day or the input month is greater than the current month, adjustments are made to ensure accurate age calculation. This accounts for cases where the birthday has not occurred yet in the current year.

6. Age Calculation:

var d = d2 - d1;
var m = m2 - m1;
var y = y2 - y1;

The age is calculated by subtracting the birthdate values from the current date values.

7. Displaying the Result:

document.getElementById('age').innerHTML = 'Your Age is '+y+' Years '+m+' Months '+d+' Days';

The calculated age is then displayed on the HTML page, replacing the content of an element with the id 'age'.

function getage() {
  let d1 = document.getElementById('date').value;
  let m1 = document.getElementById('month').value;
  let y1 = document.getElementById('year').value;

  let date = new Date();
  let d2 = date.getDate();
  let m2 = 1 + date.getMonth();
  let y2 = date.getFullYear();
  let 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';
}

Final Output: