In today’s fast-paced world, it’s essential to have tools that can simplify everyday tasks, even something as basic as calculating your age. In this blog post, we’ll walk through the code for creating a simple yet effective Age Calculator web application using HTML, CSS, and JavaScript.

##HTML Structure

Let’s start by examining the HTML structure of our Age Calculator web app.

<!doctype html class="my-2 rounded-full h-10 w-[16rem] px-4">
<html lang="en">
<head>
    <!-- Required meta tags -->
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">

    <!-- Font Awesome Icons -->
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.1/css/all.min.css"
        integrity="sha512-+4zCK9k+qNFUR5X+cKL9EIR+ZOhtIloNl9GIKS57V1MyNsYpYcUrUeQc9vNfzsWfV28IaLL3i96P9sdNyeRssA=="
        crossorigin="anonymous" />

    <!-- Google Fonts -->
    <link rel="preconnect" href="https://fonts.googleapis.com">
    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
    <link href="https://fonts.googleapis.com/css2?family=Poppins&display=swap" rel="stylesheet">
	<link rel="stylesheet" href="./style.css">

    <title>Age Calculator using JavaScript - Target Media Agency</title>
</head>
<body>
    <div class="calculator-form">
        <h1>Age Calculator</h1>
        <div class="inputs">
            <div class="block">
                <label for="date">Date</label>
                <input type="number" max="31" id="date" class="input" placeholder="dd">
            </div>
            <div class="block">
                <label for="month">Month</label>
                <input type="number" max="12" id="month" class="input" placeholder="mm">
            </div>
            <div class="block">
                <label for="year">Year</label>
                <input type="number" id="year" class="input" placeholder="yyyy">
            </div>
        </div>
        <button type="submit" class="btn" onclick="calculateAge()">Submit</button>
        <p id="displayAge"></p>
    </div>
	<script src="./script.js"></script>
</body>
</html>

This HTML structure defines the basic layout of our Age Calculator. We have included Font Awesome icons, Google Fonts, and linked external CSS and JavaScript files for styling and functionality.

##JavaScript Logic

The core functionality of our Age Calculator is implemented using JavaScript. Let’s take a look at the JavaScript code:

const calculateAge = () => {
    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;
    }

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

    document.getElementById("displayAge").innerText = `Your Age is ${y} Years, ${m} Months, and ${d} Days`;
}

The calculateAge function takes user input for the date, month, and year, and then calculates the age based on the current date. It considers different scenarios where the birthdate might be ahead of the current date and adjusts the calculations accordingly. Finally, it displays the age in years, months, and days.

##Styling with CSS

To make our Age Calculator visually appealing, we’ve applied CSS styles. Here are some key CSS styles used:

  • We’ve set a background image and color for the entire body.
  • The calculator form is styled with a border, padding, and a semi-transparent background.
  • Input fields, labels, and the submit button have specific styling, including borders, padding, and margins.

The Poppins font is used throughout the application for a clean and modern look.

* {
        font-family: 'Poppins', sans-serif;    }

    body {
        background-image:url("backTarget.png"); color: white; display: flex;  align-items: center; justify-content: center;    }

    .calculator-form {display: flex; flex-direction: column; align-items: center;  border: 2px solid deepskyblue; padding: 40px; background: #00bfff6e;  }

    .inputs {
        display: flex;    }

    .block {
        display: flex; flex-direction: column; margin: 0 8px;    }

    label {
        font-size: 18px;    }

    .input {
        border: 2px solid deepskyblue; height: 3rem; width: 8rem; padding: 8px; margin-top: 4px; outline: none;    }

    .btn {
        height: 3rem; width: 8rem; border: 2px solid deepskyblue; background: deepskyblue; color: white; font-size: 16px; padding: 8px; margin-top: 30px;    }

##Conclusion

Creating a simple Age Calculator web application like this is a great way to practice your HTML, CSS, and JavaScript skills. It provides a practical example of how these technologies can be used to build a useful tool. You can further enhance this project by adding error handling, validation, or even more advanced features. Happy coding!

GET IN TOUCH

Schedule a Visit

TRY THE CODE