Age Calculator | Javascript Project With Source Code
Tags: javascript, html, css, webdev
Published: 2021-05-05 07:22:26

JavaScript offers some built-in date and time functions, which helps to calculate the age from the date (Date of Birth). Using these JavaScript methods, you can easily find the age of anyone. For this, we require a date input from the user and the current system date.

{% youtube IEuYA09-fGo %}

➼ Download Files and Images Link: https://www.websitemakers.xyz/2021/05/age-calculator-javascript-project-with.html

**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**
```
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;
    }
}
```

**Note:-** visit my youtube channel for frontend tutorials

**subscribe to my youtube channel :-** https://www.youtube.com/channel/UCR64vQptythbJ1SmI-ub0Rg

**Resent post :-** 
{% link https://dev.to/innocentcoder/make-a-modern-registration-form-using-html-and-css-1ag4 %}