Hey everybody, I hope you are all fine, today we will build an Age Calculator App Using HTML CSS and JavaScript from scratch. You can use that application to calculate the Age. It’s great project for everyone who are working on HTML CSS and JavaScript. I’ve used these technologies to build that project.
So, I’m going to teach with you how to use HTML and CSS to design it from scratch. Once we designed the complete application. We will use JavaScript to display the dynamic data by clicking the button to display the How you old on the particular time frame.
In the ever-evolving world of technology, creating simple yet effective web applications has become a common practice for web developers. One such application that can be both fun and useful is an age calculator. In this article, we will explore the process of building an age calculator app using the trifecta of web development languages: HTML, CSS, and JavaScript.
Age Calculator App Using HTML CSS and JavaScript
Before moving the codes, you can watch the video tutorial. I’ve explained everything step by step practically, you should watch the video till to end. After that I hope will learn everything you want.
I hope you’ve watched the complete video tutorial, hope you’ve learned something new. If you face any problems during the video you can check the codes that are used to build an Age Calculator App using HTML CSS and JavaScript.
You May Also Like:
- eCommerce Product Page using HTML CSS and JavaScript
- Clock App Using HTML CSS and JavaScript
- How to Make Captcha Generator in HTML CSS and JS
- Build a Music Player with HTML CSS and JavaScript
- Multi-Step Form With Progress Bar Using HTML, CSS, & JavaScript
- Budget App Using HTML CSS and JavaScript
The foundation of our age calculator app lies in the HTML structure. We’ll create a simple form that allows users to input their birthdate and submit the information for processing. The form should include input fields for the day, month, and year of birth, along with a button to trigger the calculation.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<link rel="stylesheet" href="style.css" />
<script src="app.js" defer></script>
<title>Age calculator App | OnlineITtuts</title>
</head>
<body>
<main>
<div class="container">
<div>
<div class="input-block">
<label>Day</label>
<input type="number" placeholder="DD" required />
<span class="error_message"></span>
</div>
<div class="input-block">
<label>Month</label>
<input type="number" placeholder="MM" required />
<span class="error_message"></span>
</div>
<div class="input-block">
<label>Year</label>
<input type="number" placeholder="YYYY" required />
<span class="error_message"></span>
</div>
</div>
<hr />
<div class="button" id="calcBtn">
<img src="./assets/images/icon-arrow.svg" alt="" />
</div>
</div>
<div class="result_wrapper">
<div class="result-block">
<span id="years">- -</span> <span>Years</span>
</div>
<div class="result-block">
<span id="months">- -</span> <span>Months</span>
</div>
<div class="result-block">
<span id="days">- -</span> <span>Days</span>
</div>
</div>
<span id="error_message"></span>
</main>
</body>
</html>
To make our age calculator visually appealing and user-friendly, we’ll add some styling using CSS. This includes defining the layout, colors, fonts, and other visual elements. A clean and intuitive design not only enhances the user experience but also makes the app more engaging.
@font-face {
font-family: "poppins";
src: url(assets/fonts/Poppins-Regular.ttf);
}
* {
padding: 0;
margin: 0;
box-sizing: border-box;
font-family: "poppins", sans-serif;
}
body {
display: flex;
align-items: center;
justify-content: center;
height: 100vh;
background-color: #f0f0f0;
}
main {
width: 842px;
height: 651px;
background-color: white;
border-radius: 1rem;
border-radius: 2rem 2rem 14rem 2rem;
}
.container {
width: 727px;
position: relative;
}
.container > div {
width: 634px;
display: flex;
justify-content: space-between;
margin-left: 58px;
margin-top: 58px;
}
div.input-block {
width: 168px;
}
div.input-block,
div.input-block input {
color: #8a8a8a;
text-transform: uppercase;
letter-spacing: 3px;
}
div.input-block input {
font-size: 32px;
width: 158px;
border: 1px solid #ececec;
border-radius: 4px;
padding-left: 24px;
height: 70px;
width: 159px;
margin-top: 14px;
border-radius: 10px;
}
hr {
width: 100%;
margin-left: 58px;
margin-top: 50px;
color: #ececec;
}
div#calcBtn {
background-color: #874cfc;
border-radius: 50%;
width: 97px;
height: 97px;
display: flex;
align-items: center;
justify-content: center;
position: absolute;
top: 77px;
left: 90%;
cursor: pointer;
}
div#calcBtn:hover {
background-color: black;
transition: all ease-in-out 0.2s;
}
div.input-block input {
color: black;
}
.result-block {
margin-left: 68px;
}
.result-block span:nth-of-type(1) {
color: #874cfc;
font-weight: bold;
font-size: 5rem;
font-style: italic;
margin-right: 2rem;
}
.result-block span:nth-of-type(2) {
color: black;
font-weight: bold;
font-size: 5rem;
font-style: italic;
margin-right: 2rem;
}
span.error_message {
color: red;
font-size: 14px;
font-style: italic;
letter-spacing: 0px;
}
The magic happens in the JavaScript part of our application. We’ll write code that takes the user’s input, calculates the age, and displays the result. The key steps involve getting the current date, extracting the birthdate from the form, and performing the necessary calculations to determine the user’s age. The result will be dynamically updated on the page, providing instant feedback to the user.
"use strict";
let inputEl = document.querySelectorAll("input");
const errorMessage = document.querySelectorAll(".error_message");
const yearsEl = document.querySelector("#years");
const monthEl = document.querySelector("#months");
const daysEl = document.querySelector("#days");
const buttonEl = document.getElementById("calcBtn");
// get the current Date
const dateNow = new Date();
let year = dateNow.getFullYear();
let month = dateNow.getMonth() + 1;
let day = dateNow.getDate();
inputEl[0].addEventListener("input", (e) => {
let value = e.target.value;
if (value < 30) {
if (value == 0) {
value = 1;
}
value = value;
} else if (value > 30) {
value = 30;
}
e.target.value = value;
});
inputEl[1].addEventListener("input", (e) => {
let value = e.target.value;
if (value == 0) {
value = 1;
}
if (value < 2022) {
value = value;
} else if (value > year) {
e.target.value = value;
}
e.target.value = value;
});
buttonEl.addEventListener("click", () => {
let isEmpty = false;
inputEl.forEach((input) => {
if (input.value.trim() === "") {
isEmpty = true;
input.nextSibling.nextSibling.innerHTML = "Enter a Number";
input.style.border = "1px solid red";
}
});
if (!isEmpty) {
for (let i = 0; i < inputEl.length; i++) {
inputEl[i].nextSibling.nextSibling.innerHTML = "";
inputEl[i].style.border = "1px solid #ececec";
}
}
const birthdate = `${inputEl[2].value}-${inputEl[1].value}-${inputEl[0].value}`;
const age = calAge(birthdate);
yearsEl.innerHTML = age.year;
monthEl.innerHTML = age.month;
daysEl.innerHTML = age.days;
});
// calculate age
function calAge(birthDate) {
const now = new Date();
const birth = new Date(birthDate);
let age = {};
let yearDiff = now.getFullYear() - birth.getFullYear();
let monthDiff = now.getMonth() - birth.getMonth();
let dayDiff = now.getDate() - birth.getDate();
if (monthDiff < 0 || (monthDiff === 0 && dayDiff < 0)) {
yearDiff--;
monthDiff += 12;
}
let daysInLastMonth = new Date(
now.getFullYear(),
now.getMonth(),
0,
).getDate();
if (dayDiff < 0) {
dayDiff += daysInLastMonth;
monthDiff--;
}
let totalDays = yearDiff * 365 + monthDiff * daysInLastMonth + dayDiff;
age.year = Math.floor(totalDays / 365);
totalDays = totalDays % 365;
age.month = Math.floor(totalDays / daysInLastMonth);
totalDays = totalDays % daysInLastMonth;
age.days = totalDays;
return age;
}
A good user experience is crucial for the success of any web application. In the context of our age calculator app, we want to ensure that users find it easy to navigate, understand the input requirements, and receive accurate and timely results. Consider adding error handling to address potential issues, such as incorrect date formats or incomplete information.
Before deploying our age calculator app, it’s important to thoroughly test and debug the code. This includes checking for edge cases, validating user inputs, and making sure the calculations are accurate. A well-tested application not only performs reliably but also builds trust with users.
Conclusion:
Building a simple age calculator app using HTML, CSS, and JavaScript is a great way to practice and enhance your web development skills. This project not only covers the basics of these languages but also introduces you to the concept of user interaction and dynamic content on a webpage. With the right balance of functionality and aesthetics, your age calculator app can be a valuable addition to your portfolio and a fun tool for users to explore their age in a new light.
