Hi companions! Welcome to our blog. So in the present article we will discuss How to Make Age Calculator Tool in Blogger. Also, this blogger me Age Calculator site kaise banaye . So we will realize everything in this article. So remain tuned in this article and know in all relevant information.
These days publishing content to a blog is at one level in particular. So in such a circumstance there are various offices in the writing for a blog area. So one of these is Web Tools. So many of my Endorsers have asked me in the Remark that could we at any point effectively make Age Calculator Tool on Blogger/Blogspot Stage ?
Allow me to tell you obviously that an alternate pattern Old enough Calculator is going on. So in such a circumstance, everybody needs to have their own age calculator tool. So in such a circumstance, I have made sense of exhaustively in this post how you can undoubtedly make age telling tool.
What is Age Calculator Tool?
There are numerous new bloggers who have recently entered the field of contributing to a blog. Which they currently need to explore new territory in this publishing content to a blog industry. So in such a circumstance, every one individuals simply need that everything ought to appear as something else. So in such a circumstance a tool comes for the sake old enough calculator.
Such countless individuals have hardly any familiarity with this tool. So let me let them know that with the assistance Old enough calculator tool , we can undoubtedly figure out our age. Coincidentally, how old is the age and there are numerous ways of separating more data. Be that as it may, on the off chance that you utilize this tool, you can figure out your precise age when absolutely necessary.
Moves toward Make Age Calculator Tool in Blogger
So companions, presently I have let you know a few stages beneath. By following which you can undoubtedly make this age calculator tool in your blogger blog free of charge. Incidentally, you find many tool sites connected with this age calculator tool on the web.
What's more, the greater part of the plans are unique. So in such a circumstance, the tool I have given to you underneath is totally special. I have given HTML, CSS and JavaScript code to make this tool beneath. What's more, you need to follow every one of the means.
Step #1 -
Download and Introduce Blogger Blank Template
Go to blogger dashboard and open theme section. Now open EDIT HTML and paste following blank template code.
Blank template
<?xml version="1.0" encoding="UTF-8" ?>
<!DOCTYPE html>
<html b:css='false' b:responsive='true' expr:dir='data:blog.languageDirection' lang='en-US' xmlns='http://www.w3.org/1999/xhtml'
xmlns:b='http://www.google.com/2005/gml/b' xmlns:data='http://www.google.com/2005/gml/data'
xmlns:expr='http://www.google.com/2005/gml/expr'>
<head>
<meta content='width=device-width, initial-scale=1' name='viewport'/>
<b:include data='blog' name='all-head-content'/>
<title><data:blog.pageTitle/></title>
<b:skin><![CDATA[
body{background:#fff}
]]></b:skin>
</head>
<body>
<b:section class='main' id='main' showaddelement='yes'/>
</body>
</html> Step #2
– Use JavaScript
So companions, presently I have given JavaScript code in the container beneath. You need to duplicate it. Presently you need to go to Blogger Dashboard>Layout>Add a Gadget>HTML/JavaScript. You duplicated your code. Paste that code and do it.
JavaScript
<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 MKWK.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> Step #3
– Use CSS
Presently you will likewise get some CSS Content underneath. So you additionally need to reorder it effectively by following the above advances and save it.
CSS
<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> Step #4
– Use HTML
Presently I have given you some HTML scripts beneath and duplicate them and paste them by following the means given previously.
HTML
<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://technicalmkwk.blogspot.com/p/about-us.html" 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>
End
- How could you like this article of How to Make Age Calculator Tool in Blogger. You should tell by commenting in the comment box beneath. Or on the other hand if you have any desire to give any sort of idea, then you can impart your insight with us in the comment box underneath.
0 Comments