DEV Community

Cover image for Age Calculator Using HTML, CSS, and JavaScript: A Beginner’s Guide
Javacodepoint
Javacodepoint

Posted on

Age Calculator Using HTML, CSS, and JavaScript: A Beginner’s Guide

Let’s start by creating the structure of our age calculator using HTML. Open your text editor and create a new HTML file.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Age Calculator</title>
    <link rel="stylesheet" href="styles.css">
</head>
<body>
    <div class="container">
        <h1>Age Calculator</h1>
        <div class="form">
            <label for="dob">Date of Birth:</label>
            <input type="date" id="dob">
            <button onclick="calculateAge()">Calculate Age</button>
        </div>
        <div class="result">
            <p>Your age is:</p>
            <p id="ageResult">0 years, 0 months, 0 days</p>
        </div>
    </div>
    <script src="script.js"></script>
</body>
</html>
Enter fullscreen mode Exit fullscreen mode

Styling with CSS

To make our age calculator visually appealing, let’s add some CSS to a separate styles.css file. Here’s a simple CSS stylesheet to get you started:

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

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

h1 {
    color: #333;
}

.form {
    margin: 20px 0;
}

label {
    font-weight: bold;
}

input[type="date"] {
    padding: 5px;
    border: 1px solid #ccc;
    border-radius: 5px;
    font-size: 16px;
}

button {
    background-color: #007BFF;
    color: #fff;
    border: none;
    padding: 10px 20px;
    border-radius: 5px;
    font-size: 16px;
    cursor: pointer;
}

.result {
    margin-top: 20px;
    font-size: 18px;
}
Enter fullscreen mode Exit fullscreen mode

Calculating Age with JavaScript

Now, let’s add the functionality to calculate the age using JavaScript. Create a script.js file and add the following code:

function calculateAge() {
    const dobInput = document.getElementById('dob').value;
    const dob = new Date(dobInput);
    const currentDate = new Date();

    const ageInMilliseconds = currentDate - dob;
    const ageInYears = ageInMilliseconds / (365 * 24 * 60 * 60 * 1000);
    const age = Math.floor(ageInYears);

    currentDate.setFullYear(currentDate.getFullYear() - age);
    const monthDiff = currentDate.getMonth() - dob.getMonth();

    let months = monthDiff;
    if (currentDate.getDate() < dob.getDate()) {
        months--;
    }

    let days = currentDate.getDate() - dob.getDate();
    if (days < 0) {
        const lastDayOfMonth = new Date(currentDate.getFullYear(), currentDate.getMonth(), 0).getDate();
        days = lastDayOfMonth - dob.getDate() + currentDate.getDate();
    }

    document.getElementById('ageResult').textContent = `${age} years, ${months} months, ${days} days`;
}
Enter fullscreen mode Exit fullscreen mode

Learn more in detail with complete source code with code explanation here: Age Calculator Using HTML, CSS, and JavaScript: A Beginner’s Guide

Top comments (1)

Collapse
 
alexedbalet profile image
alexedbalet

Creating an age calculator using HTML, CSS, and JavaScript is a great project for beginners to understand web development fundamentals. This simple tool allows users to input their birthdate and calculates their exact age by leveraging JavaScript functions for date manipulation. By integrating HTML for structure and CSS for styling, you can build a user-friendly interface that visually presents the age calculate results. Just as an "age calculator" accurately determines age based on specific input data, this guide helps you develop a functional and visually appealing age calculation tool, enhancing your coding skills and understanding of web technologies.

Some comments may only be visible to logged-in visitors. Sign in to view all comments.