Page name Age Calculator And Copy Html Code
Code Hare
<style> .base{ overflow: hidden; display: flex; flex-direction: column; float: none; } .block{ padding: 5px 20px; margin-left: 20px; display: inline-block; float: left; } input[type=text] { margin: auto; outline: none; min-height: 20px; border: 2px solid #1073d0; padding: 12px; border-radius: 7px; font-size: 17px; } input[type=text]:focus{ background-color: #ffffff; border: 2px solid orange; outline: none; } input[type=button]{ width: 100px; margin-left: 35%; margin-top: 20px; outline: none; border: none; border-radius: 6px; background-color: crimson; color: #ffffff; padding: 10px 20px; 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: 19px; font-weight: normal; line-height: 1.5; word-spacing: 2.7px; } </style> </head> <body> <div class="contaier"> <form> <div class="base"> <div class="enter"> <h2>Age Calculator</h2> </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> <script type="text/javascript"> 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'; } </script> <body> <html>
Rate This Article
Thanks for reading: Age Calculator Html Code For Bloggers And Wordpress , Stay tune to get latest Blogging Tips.