Neuphormism Age calculator| Neuphormism Age Calculator Using HTML CSS JAVASCRIPT
Learners, In this article we are going to design a cool, interactive, and impressive project Neuphormism Age calculator.
Learner Let me know how many of you used this old method whenever someone asked you to calculate someone’s age you just take those person’s birth year and count it from there to the present years on your tip. Isn’t that weird.
So for sorting out this problem, we have an age calculator means it does some calculations of age now learner if you are that kind of person then you don’t need to do that again because now you will have this mini project. That will directly give you age out of DOB.
Something similar, we are going to design by ourselves 😉.
Hey learners..!
Welcome to our 🎊 today’s blog with code with random. In this blog, we gonna learn how we can design a Neuphormism Age calculator Project Using HTML CSS JAVASCRIPT.
I hope you must have got an idea about the project.
Let’s have a look at our project.
As you are looking in the project preview how the thing is organized in the single container.
Following is the feature of our project:-
- This is the main feature of the project is our project is in the Neuphormism design.
- You will have two learning at once as age calculator functioning and how we can design neuphormism.
- The first attached images show only showing default loading of project if you will feed any data under the input field by clicking on calculate you will have age as result with years month and day how long he is.
HTML SECTION
Here I’m not going to add a structure of the HTML file from scratch, I will just paste the body part, it is so because the body is the main part of our designing a browser.
We have the following part in the HTML section.
- First, we have a container that will enclose all other parts of the Neuphormism Age calculator.
- Then we have the input wrapper and output wrapper.
- In the input wrapper, we have an input tag of date type and submit button.
- in the outer wrapper, we have just a black section that will fill out whenever some clicks on the submit button after feeding the value in date input.
Go through the below code 👇 and run it in your IDE or where you used to design just HTML without CSS styling.
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Age Calculator</title>
</head>
<body>
<div class="container">
<div class="inputs-wrapper">
<input type="date" id="date-input">
<button onclick="ageCalculate()">Calculate</button>
</div>
<div class="outputs-wrapper">
<div>
<span id="days"> - </span>
<p>Days</p>
</div>
<div>
<span id="months"> - </span>
<p>Months</p>
</div>
<div>
<span id="years"> - </span>
<p>Years</p>
</div>
</div>
</div>
</body>
</html>
CSS SECTION
By CSS we will design our container and will bring in the center and then we will set the width for all three parts of the container and will design the check box and label as well.
The Below code will analyze you more👇. So just add in your HTML half complete file and wait to watch some magic.
@import url("https://fonts.googleapis.com/css2?family=Poppins:wght@100;200;300;400;500;600;700;800;900&display=swap");
* {
padding: 0;
margin: 0;
box-sizing: border-box;
font-family: "Poppins", sans-serif;
}
body {
background-color: #e8eaec;
}
.container {
width: 40%;
min-width: 450px;
position: absolute;
transform: translate(-50%, -50%);
left: 50%;
top: 50%;
padding: 50px 30px;
}
.container * {
border: none;
outline: none;
font-family: "Poppins", sans-serif;
}
.inputs-wrapper {
background-color: #e8eaec;
padding: 30px 25px;
box-shadow: 4px 4px 8px rgb(189, 200, 213), -4px 4px 8px rgb(255, 255, 255);
border-radius: 8px;
margin-bottom: 50px;
}
input,
button {
height: 50px;
background-color: #e8eaec;
color: #080808;
font-weight: 500;
border-radius: 5px;
box-shadow: 4px 4px 8px rgb(189, 200, 213), -4px 4px 8px rgb(255, 255, 255);
}
input {
width: 60%;
padding: 0 20px;
font-size: 14px;
}
button {
width: 30%;
float: right;
}
.outputs-wrapper {
width: 100%;
display: flex;
justify-content: space-between;
}
.outputs-wrapper div {
width: 100px;
height: 100px;
background-color: #e8eaec;
box-shadow: 4px 4px 8px rgb(189, 200, 213), -4px 4px 8px rgb(255, 255, 255);
border-radius: 5px;
color: #000;
display: grid;
place-items: center;
padding: 20px 0;
}
span {
font-size: 30px;
font-weight: 500;
}
p {
font-size: 14px;
color: #707070;
font-weight: 400;
}
Javascript section
In the Javascript part, we will add magic logic as initially when our page will be loaded then only the static part of the project will show, and if someone feet the date and turn on submit button then javascript functionality will run.
For observing this magic for this project then you should add the js file with the rest of the HTML and CSS file and enjoy this project and deploy it on Github.
const months = [31, 28, 31, 30, 31, 30, 31, 31, 30, 31, 30, 31];
function ageCalculate() {
let today = new Date();
let inputDate = new Date(document.getElementById("date-input").value);
let birthMonth, birthDate, birthYear;
let birthDetails = {
date: inputDate.getDate(),
month: inputDate.getMonth() + 1,
year: inputDate.getFullYear()
};
let currentYear = today.getFullYear();
let currentMonth = today.getMonth() + 1;
let currentDate = today.getDate();
leapChecker(currentYear);
if (
birthDetails.year > currentYear ||
(birthDetails.month > currentMonth && birthDetails.year == currentYear) ||
(birthDetails.date > currentDate &&
birthDetails.month == currentMonth &&
birthDetails.year == currentYear)
) {
alert("Not Born Yet");
displayResult("-", "-", "-");
return;
}
birthYear = currentYear - birthDetails.year;
if (currentMonth >= birthDetails.month) {
birthMonth = currentMonth - birthDetails.month;
} else {
birthYear--;
birthMonth = 12 + currentMonth - birthDetails.month;
}
if (currentDate >= birthDetails.date) {
birthDate = currentDate - birthDetails.date;
} else {
birthMonth--;
let days = months[currentMonth - 2];
birthDate = days + currentDate - birthDetails.date;
if (birthMonth < 0) {
birthMonth = 11;
birthYear--;
}
}
displayResult(birthDate, birthMonth, birthYear);
}
function displayResult(bDate, bMonth, bYear) {
document.getElementById("years").textContent = bYear;
document.getElementById("months").textContent = bMonth;
document.getElementById("days").textContent = bDate;
}
function leapChecker(year) {
if (year % 4 == 0 || (year % 100 == 0 && year % 400 == 0)) {
months[1] = 29;
} else {
months[1] = 28;
}
}
A live preview of our project is attached below refer to this codepen
See the Pen ageCalculator by Nadine Coelho (@coelho-na) on CodePen.
By this blog… We have learned how we can design a Simple weather API Project HTML CSS JAVASCRIPT.
Now I’m looking for your reviews.
So, How was the blog 😁, Learners!
If you want a more crisp blog like this then please check our Blogs sites CodewithRandom. keep tuned with us because every day you will learn something new here.😊
I hope that I’m able to make you understand this topic and that you have learned something new from this blog. If you faced any difficulty feel free to drop a comment down your problems and if you liked it, please show your love in the comment section. This fills bloggers’ hearts with enthusiasm for writing more new blogs.
You can follow me on Instagram
Written by @Ankit kumar
Code by @coelho-na
