How to Make An Age Calculator — Tutorial — HTML/CSS/Javascript

3 min readDec 3, 2023

Step 1: Install Visual Studio Code

If you haven’t installed Visual Studio Code, download and install it from the official website: Visual Studio Code

Step 2: Create a Project Folder

Open your terminal or command prompt and create a new folder for your age calculator project. Navigate into the folder:

mkdir AgeCalculator
cd AgeCalculator

Step 3: Open Visual Studio Code

Open Visual Studio Code by entering the following command in the terminal:

code .

This command opens Visual Studio Code in the current directory.

Step 4: Create HTML File

Inside Visual Studio Code, create a new file and save it as index.html. Paste the following HTML code into this file:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="styles.css">
    <title>Age Calculator</title>
</head>
<body>
    <div class="calculator-container">
        <label for="birthDate">Enter Your Birthdate:</label>
        <input type="date" id="birthDate">
        <button onclick="calculateAge()">Calculate Age</button>
        <p id="result"></p>
    </div>

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

Step 5: Create CSS File

Create a new file and save it as styles.css. Paste the following CSS code into this file:

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

.calculator-container {
    text-align: center;
    padding: 20px;
    border: 1px solid #ccc;
    border-radius: 10px;
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
}

label {
    font-size: 18px;
    display: block;
    margin-bottom: 10px;
}

input {
    padding: 8px;
    font-size: 16px;
}

button {
    padding: 10px 20px;
    font-size: 16px;
    background-color: #4CAF50;
    color: white;
    border: none;
    border-radius: 5px;
    cursor: pointer;
    transition: background-color 0.3s;
}

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

#result {
    font-size: 20px;
    margin-top: 20px;
}

Step 6: Create JavaScript File

Create a new file and save it as script.js. Paste the following JavaScript code into this file:

function calculateAge() {
    const birthDate = new Date(document.getElementById("birthDate").value);
    const today = new Date();

    if (isNaN(birthDate)) {
        alert("Please enter a valid date");
        return;
    }

    const ageInMilliseconds = today - birthDate;

    const millisecondsInSecond = 1000;
    const millisecondsInMinute = millisecondsInSecond * 60;
    const millisecondsInHour = millisecondsInMinute * 60;
    const millisecondsInDay = millisecondsInHour * 24;
    const millisecondsInMonth = millisecondsInDay * 30; // Assuming 30 days in a month for simplicity
    const millisecondsInYear = millisecondsInDay * 365; // Assuming 365 days in a year for simplicity

    const years = Math.floor(ageInMilliseconds / millisecondsInYear);
    const months = Math.floor((ageInMilliseconds % millisecondsInYear) / millisecondsInMonth);
    const days = Math.floor((ageInMilliseconds % millisecondsInMonth) / millisecondsInDay);
    const hours = Math.floor((ageInMilliseconds % millisecondsInDay) / millisecondsInHour);
    const minutes = Math.floor((ageInMilliseconds % millisecondsInHour) / millisecondsInMinute);
    const seconds = Math.floor((ageInMilliseconds % millisecondsInMinute) / millisecondsInSecond);

    const resultElement = document.getElementById("result");
    resultElement.innerHTML = `Your are ${years} years, ${months} months, ${days} days, ${hours} hours, ${minutes} minutes, and ${seconds} seconds old.`;
}

Step 7: Save Changes

Ensure you save all your changes in Visual Studio Code.

Step 8: Install Live Server Extension (Optional)

If you want to preview your project with a live server, you can install the “Live Server” extension in Visual Studio Code. Open the Extensions view (Ctrl+Shift+X or Cmd+Shift+X), search for "Live Server," and install it.

Step 9: Open with Live Server (Optional)

Right-click on your index.html file in Visual Studio Code, and you should see an option to "Open with Live Server." Click on it, and it will open your age calculator in a new browser window.

Step 10: Make Changes and See Updates

As you make changes to your HTML, CSS, or JavaScript files, save them, and you should see the updates in your browser if you are using the Live Server extension.

The preview is below:

That’s it! You’ve set up your age calculator project. You can now easily make changes to your code, preview them in the browser, and iterate on your project. If you have any specific questions or encounter issues during these steps, feel free to ask!