Age Calculator for Blogger or Website HTML Code

Just copy the code and paste on your post. That's all

This HTML Code provide a simple user interface easy to use. Just pick your birth day Age Calculator provide your total age.

Age Calculator is one of the best Age Calculation code. if you know your total age how may Years, Months, Days. This age calculator is best for you. Just copy the code and paste on your post.

Output:

<div id="main_container"><br /><div style="background-color: #154360; color: white; padding: 20px;"><br /><style>#main_container {<br />    width: 450px;<br />    margin: 20px;<br />    margin-left: auto;<br />    margin-right: auto;<br />    padding: 30px;<br />    font-family: sans-serif;<br />    border-radius: 5px;<br />    border: 3px solid #999;<br />    background: #00A36C;<br />}<br />#CustomTable{font-family:Arial,Helvetica,sans-serif;border-collapse:collapse;width:100%}#CustomTable td, #CustomTable th{border:1px solid #ddd;padding:8px}#CustomTable tr:nth-child(even){background-color:#f2f2f2}#CustomTable tr:hover{background-color:#ddd}#CustomTable th{padding-top:8px;padding-bottom:8px;text-align:center;background-color:#04AA6D;color:white}input[type=number]{padding:8px;border:1px solid #ccc;border-radius:4px;resize:vertical;outline:none}.button{background-color:#4CAF50;border:none;color:white;padding:16px 32px;text-align:center;text-decoration:none;display:inline-block;font-size:16px;margin:4px 2px;transition-duration:0.4s;cursor:pointer}.button1{background-color:#f44336;color:white;border-radius:10px;margin-bottom:25px;box-shadow:0 8px 16px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0,0,0,0.19)}.button1:hover{background-color:auto;color:white:}</style><br /><body><br />   <div><br />      <form autocomplete="off" id="form"><br />      <br />           <center><u><h3>Age Calculator</h3></u></center><br />          <br />           <h4>Enter Date Of Birth</h4><br />            <table id="CustomTable" style="width: 100%;"><br />               <tbody><br />                  <tr><br />                     <th>Day</th><br />                     <th>Month</th><br />                     <th>Year</th><br />                  </tr><br />                  <tr><br />                     <td> <input class="form-control" id="date" max="31" maxlength="2" required="" size="6" type="number" pattern="/^-?\d+\.?\d*$/" onKeyPress="if(this.value.length==2) return false;" /></td><br />                     <td> <input class="form-control" id="month" max="12" maxlength="2" required="" size="6" type="number" pattern="/^-?\d+\.?\d*$/" onKeyPress="if(this.value.length==2) return false;" /></td><br />                     <td> <input class="form-control" id="year" max="9999" maxlength="2" required="" size="10" type="number" pattern="/^-?\d+\.?\d*$/" onKeyPress="if(this.value.length==4) return false;" /></td><br />                  </tr><br />               </tbody><br />            </table><br />         <br />         <div><br />            <h4>Age as on Date</h4><br />            <table id="CustomTable" style="width: 100%;"><br />               <tbody><br />                  <tr><br />                     <th>Day</th><br />                     <th>Month</th><br />                     <th>Year</th><br />                  </tr><br />                  <tr><br />                     <td> <input class="form-control" id="date2" max="31" maxlength="2" size="6" type="number" pattern="/^-?\d+\.?\d*$/" onKeyPress="if(this.value.length==2) return false;" /></td><br />                     <td> <input class="form-control" id="month2" max="12" maxlength="2" size="6" type="number" pattern="/^-?\d+\.?\d*$/" onKeyPress="if(this.value.length==2) return false;" /></td><br />                     <td> <input class="form-control" id="year2" max="9999" maxlength="4" size="10" type="number" pattern="/^-?\d+\.?\d*$/" onKeyPress="if(this.value.length==4) return false;" /></td><br />                  </tr><br />               </tbody><br />            </table><br />         </div><br />         <div style="margin-top: 10px; text-align: center;"> <button class="button button1" id="calbtn">Calculate Age</button></div><br />        <b><br />         <p style="font-size: 18px;"><span id="age"></span> <span id="months"></span> <span id="days"></span></p><br />        </b><br />      </form><br />   </div><br /></body><br /><script>var form=document.getElementById("form"),bdate=document.getElementById("date"),bmonth=document.getElementById("month"),byear=document.getElementById("year"),date=document.getElementById("date2"),month=document.getElementById("month2"),year=document.getElementById("year2"),age=document.getElementById("age"),days=document.getElementById("days"),months=document.getElementById("months"),today=new Date();year.value=today.getFullYear();month.value=today.getMonth()+1;date.value=today.getDate();form.addEventListener('submit',function(event){event.preventDefault();var birthyear=Number.parseFloat(byear.value),birthmonth=Number.parseFloat(bmonth.value),birthday=Number.parseFloat(bdate.value),todayyear=Number.parseFloat(year.value),todaymonth=Number.parseFloat(month.value),todays=Number.parseFloat(date.value);if(todays<birthday){days.innerHTML=(todays-birthday+30)+' Day';todaymonth=todaymonth-1;}else{days.innerHTML=(todays-birthday)+' Day'} if(todaymonth<birthmonth){months.innerHTML=(todaymonth-birthmonth+12)+' Month';todayyear=todayyear-1;}else{months.innerHTML=(todaymonth-birthmonth)+' Month'} age.innerHTML=(todayyear-birthyear)+' Year';});</script><br /></div>

VSVP Tech

Age Calculator for Blogger or Website HTML Code

Output:

About the Author

Post a Comment

All FM Radios in One Place

QR Code Generator

Internet Connection Checker

Stock Market Data Widget on Blogger HTML Code

Birthday Songs

VSVP Tech