Hello friends, today I will tell you how to make
Age Calculator Using Vanilla JavaScript and html in Css!
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<meta name="keyword"
content="age, calculator, age calculator, javascript age calculator, vanillajs age calculator, simple age calulator">
<meta name="description"
content="This is a simple age calculator 2020. This app make with HTML, CSS, and vanillajs. You can select your age from input after click the button it show your total age with month and days">
<title>Age Calculator 2020</title>
<!-- fonts -->
<link href="https://fonts.googleapis.com/css?family=Roboto+Slab" rel="stylesheet">
<link href="https://fonts.googleapis.com/css2?family=Lobster&display=swap" rel="stylesheet">
<!-- css -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css">
<!-- <link rel="stylesheet" href="assets/css/style.css"> -->
<link href="https://unpkg.com/tailwindcss@^1.0/dist/tailwind.min.css" rel="stylesheet">
</head>
<style>
/* Global Style*/
:root {
--primary-color: rgb(104, 109, 255);
--primary-color-dark: rgb(48, 54, 241);
--primary-color-light: rgb(129, 133, 243);
}
body {
font-family: 'Lobster', cursive;
}
/* container style*/
.heading--1 {
font-size: 5rem;
text-align: center;
color: var(--primary-color);
margin-bottom: 2rem;
}
.con__input {
font-size: 1.5rem;
border: 2px solid var(--primary-color);
display: block;
margin: 0 auto;
color: var(--primary-color-dark);
}
.con__btn {
border: none;
padding: 8px 40px;
font-size: 1.5rem;
display: block;
text-align: center;
margin: 50px auto;
border-radius: 2px;
cursor: pointer;
}
.heading--2 {
font-size: 2rem;
text-align: center;
color: var(--primary-color);
word-spacing: .2rem;
}
.year,
.month,
.day {
color: var(--primary-color-dark);
font-weight: bold;
font-size: 2.5rem;
text-decoration: underline;
}
@media only screen and (max-height:700px) {
.heading--1 {
font-size: 3rem;
text-align: center;
color: var(--primary-color);
}
.heading--2 {
font-size: 1.6rem;
text-align: center;
color: var(--primary-color);
display: none;
}
}
/* .footer {
text-align: center;
font-size: 1.4rem;
color: var(--primary-color-light);
}
.footer__link {
color: var(--primary-color);
} */
</style>
<body>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"></script>
<!-- age calculator -->
<br>
<h1 class="heading--1">Age Calculator 2020</h1>
<center>
<p>This is a simple age calculator 2020. This app make with HTML, CSS, and vanillajs. You can select your age from input after click the button it show your total age with month and days </p>
</center>
<br>
<input type="date" name="age"
class="con__input bg-white rounded border border-gray-400 focus:outline-none focus:border-indigo-500 text-base px-4 py-2 mb-4">
<input type="submit" name="submit button"
class="con__btn text-white bg-indigo-500 border-0 py-2 px-8 focus:outline-none hover:bg-indigo-600 rounded text-lg"
value="Calculate">
<h2
class="heading--2 bg-white rounded border border-gray-400 focus:outline-none focus:border-indigo-500 text-base px-4 py-2 mb-4">
</h2>
<!-- age calculator -->
<br>
<br>
<br>
<!-- Paste Details Here -->
<script>
// DOM Selection
let btn = document.querySelector(".con__btn");
let input = document.querySelector(".con__input");
let output = document.querySelector(".heading--2");
// event listener to the button
btn.addEventListener("click", calculate);
function calculate() {
// collect the input value
let inputData, inputArray, year, month, day;
// store collect the input value
inputData = input.value;
//check the input value is black or not
if (inputData !== "") {
//split the input value and store into array
inputArray = inputData.split("-");
//deconstruct the value into variable
[year, month, day] = inputArray;
year = Number(year);
month = Number(month);
day = Number(day);
// get the current date from the date constructor
let current, currentYear, currentMonth, currentDate, Newdate, newMonth;
// new date for current date
current = new Date();
currentYear = current.getFullYear();
currentMonth = current.getMonth() + 1; // get month star with 0 // for that 1 added
currentDate = current.getDate();
// check birthday or not
if (day === currentDate && month === currentMonth) {
let birthday = currentYear - year;
output.innerHTML = `Congratulation! Today Is your birthday your are <span class="year">${birthday}</span> Years Old. `;
} else {
// calculate the day
if (day > currentDate) {
Newdate = currentDate + 30;
day = Newdate - day;
currentMonth = currentMonth - 1;
} else {
day = currentDate - day;
}
// calcuclate the month
if (month > currentMonth) {
newMonth = currentMonth + 12;
month = newMonth - month;
currentYear = currentYear - 1;
} else {
month = currentMonth - month;
}
year = currentYear - year;
output.style.display = "block";
output.innerHTML = `Your Age : <span class="year">${year}</span> Year <span class="month">${month}</span> Month <span class="day">${day}</span> Days.`;
}
} else {
alert("Please Input your Birthday");
}
}
</script>
<!-- script -->
<!-- <script src="assets/js/app.js"></script> -->
</body>
</html>
Post a Comment