You are currently viewing Age Calculator Using Javascript ( Source Code )

Age Calculator Using Javascript ( Source Code )

Age Calculator Using Javascript ( Source Code )

Welcome to the CodeWithRandom blog. In this article, We create Age Calculator Project That Calculate a date to today date. For age Calculator we use Html,Css And Javascript.

Hope you enjoy our blog so let’s start with a basic HTML structure for Age Calculator javascript.

 

Code by N/A
Project Download Link Available Below
Language used HTML, CSS, and JavaScript
External link / Dependencies No
Responsive YES
Age Calculator  Table

HTML code for Age Calculator

In the body tag of the HTML document make a container for the calculator using <div> element — and add class attribute class = “container”.

Play Unlimited Quiz Of HTML, CSS, and JavaScript – Click Here

<body>
    <div class="container">
        <form>
            <div class="base">
                <div class="enter"><h4>Age Calculator</h4></div>
                <div class="block">
                    <p class="title">Date</p>
                    <input
                        type="text"
                        name="date"
                        id="date"
                        placeholder="dd"
                        required="required"
                        minlength="1"
                        maxlength="2"
                    />
                </div>
                <div class="block">
                    <p class="title">Month</p>
                    <input
                        type="text"
                        name="month"
                        id="month"
                        placeholder="mm"
                        required="required"
                        minlength="1"
                        maxlength="2"
                    />
                </div>
                <div class="block">
                    <p class="title">Year</p>
                    <input
                        type="text"
                        name="year"
                        id="year"
                        placeholder="yyyy"
                        required="required"
                        minlength="4"
                        maxlength="4"
                    />
                </div>
            </div>
            <div class="base">
                <div class="enter">
                    <input
                        type="button"
                        name="submit"
                        value="Submit"
                        onclick="age()"
                    />
                </div>
            </div>
            <div id="age"></div>
        </form>
    </div>
</body>

There is all HTML code for the Age Calculator Project. Now, you can see output without CSS & JAVASCRIPT. then we write CSS for our Age Calculator and then javascript code for Age Calculator.

Portfolio Website Using HTML CSS And JAVASCRIPT ( Source Code)

Html Code output for the Age Calculator

Age Calculator javascript - HTML part
 

 

CSS Code for Age Calculator

body {
    font-family: Arial, Helvetica, sans-serif;
    background-color: #2782e3;
    font-size: 15px;
    line-height: 1.5;
    padding: 0;
    margin: 0;
}
* {
    box-sizing: border-box;
}
.container {
    width: 520px;
    height: auto;
    margin: 100px auto;
    background-color: #eee;
    border-radius: 25px;
}
.base {
    width: 100%;
    margin: 0;
    overflow: hidden;
    display: block;
    float: none;
}
.block {
    width: 135px;
    padding: 5px 20px;
    margin-left: 20px;
    display: inline-block;
    float: left;
}
.base h4 {
    font-size: 26px;
    text-align: center;
    font-family: sans-serif;
    font-weight: normal;
    margin-top: 0px;
    box-shadow: 0px 2px #bababa;
    background: white;
    font-size: 34px;
    color: navy;
}
.title {
    font-size: 20px;
    text-align: left;
    font-family: sans-serif;
    font-weight: normal;
    line-height: 0.5;
    letter-spacing: 0.5px;
    word-spacing: 2.7px;
    color: #1073d0;
}
input[type="text"] {
    width: 140px;
    margin: auto;
    outline: none;
    min-height: 50px;
    border: 2px solid #1073d0;
    padding: 12px;
    background-color: #f7f7f7;
    border-radius: 2px;
    color: #1073d0;
    font-size: 17px;
}
input[type="text"]:focus {
    background-color: #ffffff;
    border: 2px solid orange;
    outline: none;
}
input[type="button"] {
    width: 150px;
    margin-left: 35%;
    margin-top: 40px;
    outline: none;
    border: none;
    border-radius: 2px;
    background-color: #0761b6;
    color: #ffffff;
    padding: 14px 16px;
    text-align: center;
    font-size: 16px;
}
input[type="button"]:hover {
    background-color: #003669;
}
#age {
    display: block;
    margin: 10px;
    margin-top: 35px;
    padding: 10px;
    padding-bottom: 20px;
    overflow: hidden;
    font-family: verdana;
    font-size: 23px;
    font-weight: normal;
    line-height: 1.5;
    word-spacing: 2.7px;
    color: navy;
}
Now that we have completed our Html CSS section coding for age calculator,  Here is our updated output CSS.
 
 
output age calculator
Age Calculator javascript - final output
 

 

 

Now add javascript for the age calculator. We create function age and get all html elements in javascript so we get what the user enters in input. After that, we define a new code that gets today’s date, month, and year so that when a user enters an age javascript can do calculations of 2 values and show output in the age calculator.

Javascript Code Fror Age Calculator 

function age() {
    var d1 = document.getElementById("date").value;
    var m1 = document.getElementById("month").value;
    var y1 = document.getElementById("year").value;
    var date = new Date();
    var d2 = date.getDate();
    var m2 = 1 + date.getMonth();
    var y2 = date.getFullYear();
    var month = [31, 28, 31, 30, 31, 30, 31, 31, 30, 31, 30, 31];
    if (d1 > d2) {
        d2 = d2 + month[m2 - 1];
        m2 = m2 - 1;
    }
    if (m1 > m2) {
        m2 = m2 + 12;
        y2 = y2 - 1;
    }
    var d = d2 - d1;
    var m = m2 - m1;
    var y = y2 - y1;
    document.getElementById("age").innerHTML =
        "Your Age is " + y + " Years " + m + " Months " + d + " Days";
}

Final output Javascript Age Calculator

Age Calculator javascript | Age Calculator using html css javascript
 

 

 

Now that we have completed our html,css and, and javascript Code for Age Calculator,  Here is our updated output with javascript.

10+ Javascript Project Ideas For Beginners( Project Source Code)

Conclusion
Hope you like Age Calculator in javascript, you can see the output video and project screenshots. See our other blogs and gain knowledge in front-end development. Thank you

In this post, we learn how to create an Age Calculator javascript using simple HTML & CSS, and javascript. If we made a mistake or any confusion, please drop a comment to reply or help you in easy learning.

Written by – Code With Random/Anki

Which code editor do you use for this Age Calculator project coding?

I personally recommend using VS Code Studio, it’s very simple and easy to use.

is this project responsive or not?

Yes! this project is a responsive project.

Do you use any external links to create this project?

No!

This Post Has 0 Comments

  1. Henry

    This is educative. Thanks for publishing

  2. Umair Saif

    your age calculator working good but not with input validation

  3. Ahmad

    This comment has been removed by the author.

Leave a Reply