Age Calculator Free Viral Script For WordPress & Blogger
Hello friends! Welcome to your MANteck. So in this article today we are going to talk about how to Create Age Calculator Tool in Blogger. How to make a Age Calculator website. So we will know all these things in this article. So stay in this article and know more details.
Nowadays Blogging is at the same level. So in this blogging sector there are different departments too. So this is one of Web Tools. So many of my Subscribers have asked me in the comment that can we easily create Age Calculator Tool on Blogger / Blogspot Platform?
Let me tell you clearly that Age Calculator has a different trend. This is how everyone wants their age to be a calculator tool. So, in this post I have explained in detail how you can easily create an age-old tool.
What is an Age Calculator Tool?
There are many new bloggers who have just stepped into the field of blogging. Which they now have to do something new in this Blogging Industries. So in such a situation, all people want is that something be separated. So in this way a tool comes in the name of age calculator.
So many people do not know about this tool. So let me tell them with the help of Age calculator tool, we can easily find out our age. By the way, how old is age and there are many ways to extract information. But if you use this tool, you can find out your correct age in a pinch.
Follow below steps to create an Age Calculator Tool
So friends, now I have told you some steps. Which you can easily create by following this age computer tool for free in your blogger. By the way, you can find many websites related to this edge calculator tool on the Internet.
And most designs vary. So in this way the tool that I have provided to you below is completely unique. I have provided HTML, CSS and JavaScript code to build this tool below. And you have to follow all the steps.
Step #1
First of all you need to Copy and Install the Blogger 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
Copy the 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 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>So friends, now I have provided JavaScript Code in the link below. You have to copy it. Now you have to go to Blogger Dashboard> Layout> Add a Gadget> HTML / JavaScript. You had copied your code. Paste that code and serve it.
Step #3
Copy the CSS file
<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>Now you will also get some CSS Script below. So you too have to copy it and save it by following the steps given above and paste it easily.
Step #4
Copy the HTML file
<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>Now I have given you some HTML Scripts below and copy them and paste them following the steps given above.
Step #5
Follow the above steps properly and you will get the Age Calculator Free Viral Script For WordPress & Blogger Successfully.
Note - Remove <b:include name='quickedit'/> this code from theme.
0 Comments
I will be there for your help...