Age Calculator using HTML CSS JavaScript @rayen-code

Rayen

Embark on a journey to unlock the secrets of time with our guide on creating an Age Calculator using the power trio of HTML, CSS, and JavaScript. In this tutorial, we'll delve into the art of user-friendly web development, allowing your visitors to effortlessly discover the magic of their age.




Step 1: HTML Markup:

Set the stage by structuring your HTML to accommodate the age calculator. Define elements for user input, display areas for results, and any additional features that enhance the user experience.
<!-- -------------------- HTML -------------------- -->
h<!DOCTYPE html>
lt;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="style.css">
</head>
<body>
    

    <div class="container">
        <h1>
            Age Calculator
        </h1>

        <div class="input-area">
            <input type="date" class="input-date" id="">
            <button onclick="calculateAge()">Calculate</button>
        </div>

        <p class="result">
            <!-- Your age is: <span>0 years</span>, <span>0 months</span>, and <span>5 days</span>. -->
        </p>
    </div>


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

Step 2: Styling with CSS:

Bring your calculator to life by adding styles with CSS. Customize the appearance to make it visually appealing and user-friendly.
/*-------------------- CSS --------------------*/
*{
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    font-family:'Trebuchet MS', sans-serif;
}
:root {
    --bg-1: #647d87;
    --bg-2: #6da4aa;
    --font: whitesmoke;
    --btn: #faef9b;
}

body {
    background: linear-gradient(135deg, var(--bg-1), var(--bg-2));
    min-height: 100vh;
}

.container {
    padding-top: 150px;
    margin-left: 120px;
}
.container h1 {
    color: var(--font);
    font-size: 4rem;
}
.container .input-area {
    width: 500px;
    background: #fff6;
    margin-top: 20px;
    padding: 20px;
    border-radius: 10px;
    display: flex;
    justify-content: center;
    gap: 20px;
}
.container .input-area .input-date {
    padding: 10px 20px;
    font-size: 1.5rem;
    outline: none;
    border: 0;
    border-radius: 5px;

}
.container .input-area button {
    padding: 10px 20px;
    outline: none;
    border: 0;
    cursor: pointer;
    background: var(--btn);
    border-radius: 5px;
    font-size: 1.2rem;
}

.container .input-area button:hover {
    background: #f6d776;
}

.result {
    margin-top: 40px;
    color: var(--font);
    font-size: 1.2rem;
}
.result span {
    color: var(--btn);
    text-transform: capitalize;
}

Step 3: Adding JavaScript Interaction:

Inject life into your calculator with JavaScript. Implement logic to calculate the age based on the user's input and update the display accordingly.
//-------------------- Java Script --------------------//
function calculateAge() {
    let resultArea = document.querySelector(".result");

    let inputDate = document.querySelector(".input-date");

    let inputValue = new Date(inputDate.value);
    let currentDate = new Date();

    if(isNaN(inputValue)) {
        resultArea.innerHTML = `Please enter a valid...`
    }

    else if (inputValue > currentDate) {
        resultArea.innerHTML = `Please select a date in the past.`
    }

    else {
        let ageDefference = currentDate - inputValue;

        let mainDate = new Date(ageDefference);

        let years = mainDate.getUTCFullYear() - 1970;
        let months = mainDate.getUTCMonth();
        let days = mainDate.getUTCDate() - 1;

        resultArea.innerHTML = `Your age is: <span>${years} years</span>, <span>${months} months</span>, and <span>${days} days</span>.`
    }
}

In conclusion, the Age Calculator project merges functionality and simplicity, showcasing the beauty of HTML, CSS, and JavaScript working in harmony. Empower your users to effortlessly unveil the timeless wonder of their age.

0 Comments