Build a Age Calculator in Years,Months,Days,Hours,Minutes and Seconds From Date of Birth in Javascript Full Project For Beginners

Build a Age Calculator in Years,Months,Days,Hours,Minutes and Seconds From Date of Birth in Javascript Full Project For Beginners

 

Welcome folks today in this blog post we will be building a age calculator in years,months,days,hours,minutes and seconds from date of birth in javascript. All the full source code of the application is shown below.

 

 

Get Started

 

 

In order to get started you need to make an index.html file and copy paste the following code

 

index.html

 

<h1>Age Calculator by Gautam Sharma</h1>
<h2>Hey Beautiful, What's your name? <br><input type = "text" placeholder = "Enter Your Name" autofocus/></h2>
<div id = "disBlock">
        <p id = "disBD"></p>
        <p id = "display"></p>
        <p id = "time"></p>
</div>
<form>
        <label>Enter Your Date of Birth: <input 
        type = "date"/></label><br>
        <button type = "button">Calculate</button>
        <button type = "reset">Reset</button>
</form>

 

 

Now make a style.css file and copy paste the below code

 

style.css

 

@import url('https://fonts.googleapis.com/css?family=Gotu&display=swap');
body {
  background-color: dodgerblue;
  font-family: 'Gotu', sans-serif;
  color: white;
}
label {
    font-size: 20px;
}
form {
    text-align: center;
}
input {
    border: 0;
    padding: 10px 20px;
    font-size: 20px;
    border-radius: 50px;
    margin: 5px;
}
h2 {
    text-align: center;
}
button {
    padding: 10px;
    width: 300px;
    margin: 10px 0;
    font-size: 20px;
    border: 0;
}
button:focus, button:hover {
    background-color: black;
    color: white;
}
p {
    text-align: center;
}
div {
    border: 1px solid white;
    background-color: black;
    text-align: center;
}
#postCredit {
    background-color: powderblue;
    color: black;
}
a {
    text-decoration: none;
    color: black;
    display: block;
    padding: 10px;
    background-color: white;
}
a:hover {
    background-color: cyan;
}
h1 {
    background-color: black;
    margin: 0 0 20px 0;
    padding: 10px;
    text-align: center;
}

 

See also  Node.js Script to Download Website Source Code (HTML+CSS+JS) Files From URL For Offline Use Using Node-Site-Downloader Library Full Project For Beginners

 

And now make a script.js file and copy paste the below code

 

script.js

 

let display = document.getElementById("display");
let input = document.getElementsByTagName("input");
let button = document.getElementsByTagName("button");
let time = document.getElementById("time");
let disBlock = document.getElementById("disBlock");
let disBD = document.getElementById("disBD");
let creditBlock = document.getElementById("postCredit");
let credit = document.getElementById("credit");
let about = document.getElementById("about");
disBlock.style.display = "none";
creditBlock.style.display = "none";
let dob = new Date(), today = new Date(), calTime;
function samay() {
    let d = new Date();
    time.innerHTML = d.getHours() + " Hours, " +
        d.getMinutes() + " Minutes, " + d.getSeconds() + " Seconds Old";
}
function calculate() {
    disBlock.style.display = "block";
    creditBlock.style.display = "block";
    credit.innerHTML = "Thank You For Visiting<br>I am Jamil Ahmed";
    let x = input[1].value.split("-");
    dob.setDate(x[2]);
    dob.setMonth(x[1] - 1);
    dob.setFullYear(x[0]);
    let year, month, day, HBD;
    day = (function() {
        if(today.getDate() > dob.getDate()) {
            return today.getDate() - dob.getDate() - 1;
        }
        else if(today.getDate() == dob.getDate()) {
            return today.getDate() - dob.getDate();
        }
        else {
            let calDate = new Date(dob.getFullYear(), dob.getMonth() + 1, 0);
            return (today.getDate() + calDate.getDate()) - dob.getDate() - 1;
        }
    }());
    month = (function() {
        if(today.getMonth() >= dob.getMonth()) {
            if(today.getDate() >= dob.getDate()) {
                return today.getMonth() - dob.getMonth();
            }
            else {
                if((today.getMonth() - 1) >= dob.getMonth()) {
                    return (today.getMonth() - 1) - dob.getMonth();
                }
                else {
                    return ((today.getMonth() - 1) + 12) - dob.getMonth();
                }
            }
        }
        else {
            if(today.getDate() >= dob.getDate()) {
                return (today.getMonth() + 12) - dob.getMonth();
            }
            else {
                return ((today.getMonth() - 1) + 12) - dob.getMonth();
            }
        }
    }());
    year = (function() {
        if(dob.getMonth() == today.getMonth()) {
            if(dob.getDate() > today.getDate()) {
                return (today.getFullYear() - 1) - dob.getFullYear();
            }
            else {
                return today.getFullYear() - dob.getFullYear();
            }
        }
        else {
            if(dob.getMonth() > today.getMonth()) {
                return (today.getFullYear() - 1) - dob.getFullYear();
            }
            else {
                return today.getFullYear() - dob.getFullYear();
            }
        }
    }());
    HBD = (function(){
        if(today.getMonth() == dob.getMonth()) {
            if(today.getDate() == dob.getDate()) {
                disBD.innerHTML = "OMG it's your Birthday<br>Happy Birthday To You<br>";
            }
            else {
                disBD.innerHTML = "";
            }
        }
        else {
            disBD.innerHTML = "";
        }
    }());
    display.innerHTML = "Hi Dear " + input[0].value + ", <br/>You are " + year + " Years, " + month +
    " Months, " + day + " Days, ";
    calTime = setInterval(samay, 1000);
}
button[0].onclick = calculate;//when calculate button is clicked
function reset() {
    input[0].focus();
    display.innerHTML = "";
    time.innerHTML = null;
    clearInterval(calTime);
    disBlock.style.display = "none";
    creditBlock.style.display = "none";
}
button[1].onclick = reset;//when the reset button is clicked

 

See also  Build a TMDb API (themoviedb) Movie Info Finder Web App in Vanilla Javascript Full Project For Beginners

 

And now if you open index.html file inside the browser you will see the below screenshot

 

Leave a Reply