Implementing a simple age calculator based on HTML+JS

Preface
Demonstration effect
HTML Code
CSS Code
Javascript code
Demo address

Preface

Online demo address: http://haiyong.site/age-calculator

JavaScript provides some in-built date and time functions which helps in calculating age from a date (date of birth). Using these JavaScript methods, you can easily find the age of anyone. To do this we need the user input date and the current system date.

Demonstration effect

HTML Code

<div class="container">
        <div class="inputs-wrapper">
            <input type="date" id="date-input">
            <button onclick="ageCalculate()">Calculate</button>
        </div>
        <div class="outputs-wrapper">
            <div>
                <span id="years">
                    -
                </span>
                <p>
                    Years
                </p>
            </div>
            <div>
                <span id="months">
                    -
                </span>
                <p>
                    Months
                </p>
            </div>
            <div>
                <span id="days">
                    -
                </span>
                <p>
                    Days
                </p>
            </div>
        </div>
    </div>

CSS Code

*,
*:before,
*:after{
    padding: 0;
    margin: 0;
    box-sizing: border-box;
}
body{
    background-color: #ff6666;
}
.container{
    width: 40%;
    min-width: 450px;
    position: absolute;
    transform: translate(-50%,-50%);
    left: 50%;
    top: 50%;
    padding: 50px 30px;
}
.container *{
    font-family: "Poppins",sans-serif;
    border: none;
    outline: none;
}
.inputs-wrapper{
    background-color: #080808;
    padding: 30px 25px;
    border-radius: 8px;
    box-shadow: 0 15px 20px rgba(0,0,0,0.3);
    margin-bottom: 50px;
}
input,
button{
    height: 50px;
    background-color: #ffffff;
    color: #080808;
    font-weight: 500;
    border-radius: 5px;
}
input{
    width: 60%;
    padding: 0 20px;
    font-size: 14px;
}
button{
    width: 30%;
    float: right;
}
.outputs-wrapper{
    width: 100%;
    display: flex;
    justify-content: space-between;
}
.outputs-wrapper div{
    height: 100px;
    width: 100px;
    background-color: #080808;
    border-radius: 5px;
    color: #ffffff;
    display: grid;
    place-items: center;
    padding: 20px 0;
    box-shadow: 0 15px 20px rgba(0,0,0,0.3);

}
span{
    font-size: 30px;
    font-weight: 500;
}
p{
    font-size: 14px;
    color: #707070;
    font-weight: 400;
}

Javascript code

const months = [31,28,31,30,31,30,31,31,30,31,30,31];

function ageCalculate(){
    let today = new Date();
    let inputDate = new Date(document.getElementById("date-input").value);
    let birthMonth,birthDate,birthYear;
    let birthDetails = {
        date:inputDate.getDate(),
        month:inputDate.getMonth()+1,
        year:inputDate.getFullYear()
    }
    let currentYear = today.getFullYear();
    let currentMonth = today.getMonth()+1;
    let currentDate = today.getDate();

    leapChecker(currentYear);

    if(
        birthDetails.year > currentYear ||
        ( birthDetails.month > currentMonth && birthDetails.year == currentYear) || 
        (birthDetails.date > currentDate && birthDetails.month == currentMonth && birthDetails.year == currentYear)
    ){
        alert("Not Born Yet");
        displayResult("-","-","-");
        return;
    }

    birthYear = currentYear - birthDetails.year;

    if (currentMonth >= birthDetails.month) {
        birthMonth = currentMonth - birthDetails.month;
    }
    else{
        birthYear--;
        birthMonth = 12 + currentMonth - birthDetails.month;
    }

    if (currentDate >= birthDetails.date) {
        birthDate = currentDate - birthDetails.date;
    }
    else{
        birthMonth--;
        let days = months[currentMonth - 2];
        birthDate = days + currentDate - birthDetails.date;
        if(birthMonth < 0){
            birthMonth = 11;
            birthYear--;
        }
    }
    displayResult(birthDate,birthMonth,birthYear);
}

function displayResult(bDate,bMonth,bYear){
    document.getElementById("years").textContent = bYear;
    document.getElementById("months").textContent = bMonth;
    document.getElementById("days").textContent = bDate;
}

function leapChecker(year){
    if(year % 4 == 0 || (year % 100 == 0 && year % 400 == 0)){
        months[1] = 29;
    }
    else{
        months[1] = 28;
    }
}

Demo address

http://haiyong.site/age-calculator

The above is the details of a simple age calculator based on HTML+JS. For more information about HTML JS age calculator, please pay attention to other related articles on 123WORDPRESS.COM!

You may also be interested in:

Implementing a web calculator with native JavaScript
Detailed explanation of the process of realizing calculator function in javascript
JavaScript implements simple calculator function
js version to realize calculator function
Native js to implement a simple calculator
Implementing a simple calculator with javascript
Writing a web calculator using javascript
JavaScript Example - Implementing a Calculator

<<: After submitting the html drop-down menu, the selected value is retained instead of returning to the default value

>>: Process parsing of reserved word instructions in Dockerfile