Age Calculator Code Free with HTML, CSS, & JS

Mukul Rana
9 Min Read
Age Calculator Code Free

Age Calculator Code Free – Ever wondered how old you are in days, months, and even seconds? Look no further! With this free tutorial, you’ll learn how to build a simple yet functional age calculator using HTML, CSS, and JavaScript.

This project is perfect for beginners who want to practice their web development skills and create something interactive. Let’s dive in!

Age Calculator

Age Calculator

What you'll need:

  • A text editor (like Visual Studio Code, Sublime Text, etc.)
  • Basic understanding of HTML, CSS, and JavaScript


  1. Create the HTML Structure:

Start by creating an HTML file named index.html. This file will contain the basic structure of your age calculator. Here's the code:

<!DOCTYPE html>
<html lang="en">
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <link rel="stylesheet" href="">
  <link rel="stylesheet" href="style.css">
  <title>Age Calculator</title>
  <div class="container">
    <h1>Age Calculator</h1>
    <label for="birthdate">Enter your birthdate:</label>
    <input type="date" id="birthdate" required>
    <button onclick="calculateAge()">Calculate Age</button>
    <button onclick="clearForm()">Clear</button>
    <p id="result"></p>
    <div id="share-icons"></div>

  <script src=""></script>
  <script src="script.js"></script>

This code defines the basic structure of the page, including a heading, a form with a date input and a button, and a section to display the result.

  1. Style the Calculator with CSS:

Create a CSS file named style.css to add some styling to your calculator. Here's an example:

body {
  font-family: 'Arial', sans-serif;
  background-color: #f4f4f4;
  margin: 0;
  padding: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100vh;

.container {
  background-color: #fff;
  padding: 20px;
  border-radius: 8px;
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
  text-align: center;

h1 {
  color: #333;

label {
  margin-right: 10px;

input {
  padding: 8px;
  margin-bottom: 10px;

button {
  padding: 10px 20px;
  margin-right: 10px;
  background-color: #4caf50;
  color: #fff;
  border: none;
  border-radius: 4px;
  cursor: pointer;

button:hover {
  background-color: #45a049;

#result {
  font-size: 18px;
  color: #333;
  margin-top: 20px;

#share-icons {
  margin-top: 20px;

#share-icons a {
  font-size: 24px;
  margin-right: 10px;
  color: #333;

#share-icons a:hover {
  color: #4caf50;

This code styles the elements of your calculator, making it look more presentable.

  1. Add the JavaScript Functionality:

Finally, create a JavaScript file named script.js to add the interactivity. Here's the code:

function calculateAge() {
  var birthdate = document.getElementById("birthdate").value;
  var birthdateObj = new Date(birthdate);
  var currentDate = new Date();

  var years = currentDate.getFullYear() - birthdateObj.getFullYear();
  var months = currentDate.getMonth() - birthdateObj.getMonth();
  var days = currentDate.getDate() - birthdateObj.getDate();

  // Adjust for negative months or days
  if (days < 0) {
    days += new Date(currentDate.getFullYear(), currentDate.getMonth(), 0).getDate();
  if (months < 0) {
    months += 12;

  var ageString = years + " years, " + months + " months, and " + days + " days.";
  var shareLink = "" + encodeURIComponent(ageString);

  document.getElementById("result").innerText = "Your age is: " + ageString;

  // Add share icons to the page
  var shareIconsContainer = document.getElementById("share-icons");
  shareIconsContainer.innerHTML = "<p>Share your age:</p>";
  var socialMediaIcons = [
    '<a href="' + shareLink + '" target="_blank"><i class="fab fa-facebook"></i></a>',
    '<a href="' + shareLink + '" target="_blank"><i class="fab fa-twitter"></i></a>',
    '<a href="' + shareLink + '" target="_blank"><i class="fab fa-linkedin"></i></a>',
    // Add more social media icons as needed

  shareIconsContainer.innerHTML += socialMediaIcons.join("");

function clearForm() {
  document.getElementById("birthdate").value = "";
  document.getElementById("result").innerText = "";
  document.getElementById("share-icons").innerHTML = "";
  1. Run the Calculator:

Save all the files (index.html, style.css, and script.js) in the same folder. Open the index.html file in your web browser to see your age calculator in action!


  • You can further customize the calculator by adding features like:
    • Displaying age in months and days as well as years.
    • Adding input fields for time of birth for more precise calculations.
    • Implementing different themes and designs.

Remember, this is a basic example, and you can build upon it and add more features based on your needs and creativity.

Share This Article
1 Comment