Creative Age Calculator Using HTML, CSS & Javascript

 

Hello friends, welcome to our blogspot TECH WITH ANURAG  and  in this blog we are going to learn how to create Creative Age Calculator Using HTML, CSS & Javascript in this blog post.

what is Age calculator?

Age calculator  is an online technique for calculating age from birth date to introduce date.  The age calculator will gives output in terms of the years , months, week, days, hour and minutes. 

By using Age calculator you can measure times that have  from your birth date to your present date. if you trying to measure your age in days, hours and minutes by manually isn't easy.

In this program(Creative Age Calculator Using HTML, CSS & Javascript) first , on the webpage there is a calculator with heading Age calculator with one input panel and one calculate button. when you enter your age in the input panel the age calculator will gives you output in terms if years, month, week, days, hour, minutes.

If any case you hard to understand what i try to explain. Please check our full content video tutorial on this program(Creative Age Calculator Using HTML, CSS & Javascript).

Video Tutorial of Creative Age Calculator Using HTML, CSS & Javascript

I hope you like this program and video tutorial😊

If you like this program(Creative Age Calculator Using HTML, CSS & Javascript) and the video tutorial of this program and now you want to get source code of this program. Don't worry you easily get the source code of this program. 

To get the source code you simply need to look down.

You might like this:

• Animated Share Button Using Only HTML & CSS
• Image Overlay Hover Effects Using HTML and CSS
• Amazing Mail Button SVG Animation | HTML & CSS |
• Mobile Menu Design Using HTML & CSS (no Javascript)

Creative Age Calculator[source code] 

Before the sharing the codes of this program(Creative Age Calculator).Let's talk about some important tags and codes of this program. First, you need to create two files one HTML File and another one is CSS File and link the CSS file to HTML file.

In CSS file first (if you not using bootstrap) reset the all default padding and margin to 0.

HTML FILE:

<div class="container"> <div id="main"> <h1 class="heading">Age Calculator</h1> </div> <div id="bottom"> <input type="numbers" id="years" placeholder="please enter your age"> <button id="calc">Calculate</button> <div class="p-container"> <p id="Ip"></p> </div> </div> </div> 

CSS FILE:

* { font-family: 'Baloo 2', cursive; } body{ background-color: #f39c12; } .container{ width: 330px; position: absolute; top: 25%; left: 50%; transform: translate(-50%); background-color: #ececec; border-radius: 10px; overflow: hidden; } #main{ background-color: rgb(214,47,58); } #main h1{ background-color: rgb(214,47,58); color: white; margin: 0; padding: 10px; width: 100%; font-size: 25px; } #years{ border:0; border-bottom: 4px solid rgb(214,47,58); background-color: transparent; margin: 10px; padding: 15px; } #bottom{ margin: 10px; } #calc{ background-color: rgb(214,47,58); color: white; padding: 10px; border:0; border-radius: 10px; } span{ color: rgb(214,47,58); font-weight: lighter; } .p-container{ margin: 10px; } .p-container p{ line-height: 2rem; } 

JAVASCRIPT:

const Iyears = document.getElementById('years'); const myButton = document.querySelector('button'); const myHeading = document.querySelector('h1'); const myDiv = document.querySelector('div'); const myP = document.querySelector('#Ip'); myButton.addEventListener('click', function(e){ e.preventDefault(); const years = Iyears.value, months = years * 12, weeks = months * 4, days = weeks * 30, hours = days * 24, minuts = hours * 60, seconds = minuts * 60; const message = " Your age in <span>YEARS</span> is " + years + "<br> Your age in <span>MONTHS</span> is " + months + "<br> Your age in <span>WEEKS</span> is " + weeks + "<br> Your age in <span>DAYS</span> is " + days + "<br> Your age in <span>HOURS</span> is " + hours + "<br> Your age in <span>MINUTS</span> is " + minuts + "<br> Your age in <span>SECONDS</span> is " + seconds if (Iyears.value > 150 || Iyears.value <= 0) { myP.textContent = "Please Insert Valid Number"; return; } else{myP.textContent = ''}; myP.innerHTML = message; })