Age Calculator Using Html Css Javascript ( Source Code )

Age Calculator Using Html Css Javascript ( Source Code )

Welcome to Code With Random blog. In this article, we create Age Calculator using html,css and javascript. We use HTML & CSS and javascript for this Age Calculator javascript project.

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

100+ Front-end Projects for Web developers (Source Code)

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”.

<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. Now, you can see output without CSS, 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

 

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

Now add javascript for the age counting.

JavaScript  part for the Javascript 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 Html,Css, And Javascript Age Calculator

 

Now that we have completed our html,css and, and javascript section 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

Share on:

0 thoughts on “Age Calculator Using Html Css Javascript ( Source Code )”

Leave a Comment