Age Calculator Toll

<data:blog.pageTitle/> <h1>Age Calculator Tool</h1> <h2>Hey Dear, What's your name? <br /><input type = "text" placeholder = "Enter Your Name" autofocus/></h2> <div id = "disBlock"> <p id = "disBD"></p> <p id = "display"></p> <p id = "time"></p> </div> <div id = "postCredit"> <p id = "credit"></p> <a id = "about" href="https://www.facebook.com/rohit.baidya.338/" target="_blank">Know More About Me</a> </div> <form> <label>Enter Your Date of Birth: <input type = "date"/></label><br /> <button type = "button">Calculate</button> <button type = "reset">Reset</button> </form>

<style> @import url('https://fonts.googleapis.com/css?family=Gotu&display=swap'); body { background-color: dodgerblue; font-family: 'Gotu', sans-serif; color: white; } label { font-size: 20px; } form { text-align: center; } input { border: 0; padding: 10px 20px; font-size: 20px; border-radius: 50px; margin: 5px; } h2 { text-align: center; } button { padding: 10px; width: 300px; margin: 10px 0; font-size: 20px; border: 0; } button:focus, button:hover { background-color: black; color: white; } p { text-align: center; } div { border: 1px solid white; background-color: black; text-align: center; } #postCredit { background-color: powderblue; color: black; } a { text-decoration: none; color: black; display: block; padding: 10px; background-color: white; } a:hover { background-color: cyan; } h1 { background-color: black; margin: 0 0 20px 0; padding: 10px; text-align: center; } </style>

<script> let display = document.getElementById("display"); let input = document.getElementsByTagName("input"); let button = document.getElementsByTagName("button"); let time = document.getElementById("time"); let disBlock = document.getElementById("disBlock"); let disBD = document.getElementById("disBD"); let creditBlock = document.getElementById("postCredit"); let credit = document.getElementById("credit"); let about = document.getElementById("about"); disBlock.style.display = "none"; creditBlock.style.display = "none"; let dob = new Date(), today = new Date(), calTime; function samay() { let d = new Date(); time.innerHTML = d.getHours() + " Hours, " + d.getMinutes() + " Minutes, " + d.getSeconds() + " Seconds Old"; } function calculate() { disBlock.style.display = "block"; creditBlock.style.display = "block"; credit.innerHTML = "Thank You For Visiting<br>I am Techly360.com"; let x = input[1].value.split("-"); dob.setDate(x[2]); dob.setMonth(x[1] - 1); dob.setFullYear(x[0]); let year, month, day, HBD; day = (function() { if(today.getDate() > dob.getDate()) { return today.getDate() - dob.getDate() - 1; } else if(today.getDate() == dob.getDate()) { return today.getDate() - dob.getDate(); } else { let calDate = new Date(dob.getFullYear(), dob.getMonth() + 1, 0); return (today.getDate() + calDate.getDate()) - dob.getDate() - 1; } }()); month = (function() { if(today.getMonth() >= dob.getMonth()) { if(today.getDate() >= dob.getDate()) { return today.getMonth() - dob.getMonth(); } else { if((today.getMonth() - 1) >= dob.getMonth()) { return (today.getMonth() - 1) - dob.getMonth(); } else { return ((today.getMonth() - 1) + 12) - dob.getMonth(); } } } else { if(today.getDate() >= dob.getDate()) { return (today.getMonth() + 12) - dob.getMonth(); } else { return ((today.getMonth() - 1) + 12) - dob.getMonth(); } } }()); year = (function() { if(dob.getMonth() == today.getMonth()) { if(dob.getDate() > today.getDate()) { return (today.getFullYear() - 1) - dob.getFullYear(); } else { return today.getFullYear() - dob.getFullYear(); } } else { if(dob.getMonth() > today.getMonth()) { return (today.getFullYear() - 1) - dob.getFullYear(); } else { return today.getFullYear() - dob.getFullYear(); } } }()); HBD = (function(){ if(today.getMonth() == dob.getMonth()) { if(today.getDate() == dob.getDate()) { disBD.innerHTML = "OMG it's your Birthday<br>Happy Birthday To You<br>"; } else { disBD.innerHTML = ""; } } else { disBD.innerHTML = ""; } }()); display.innerHTML = "Hi Dear " + input[0].value + ", <br/>You are " + year + " Years, " + month + " Months, " + day + " Days, "; calTime = setInterval(samay, 1000); } button[0].onclick = calculate;//when calculate button is clicked function reset() { input[0].focus(); display.innerHTML = ""; time.innerHTML = null; clearInterval(calTime); disBlock.style.display = "none"; creditBlock.style.display = "none"; } button[1].onclick = reset;//when the reset button is clicked </script>

Comments

Popular posts from this blog

Canon Eos rp | Canon 80 d | Canon 5d mark iv | Amazon Best Seller | Amazon Best Seller 2020