Hello friends my name is Rahul and in today’s blog we will learn how to make a calculator using HTML, CSS and JavaScript.
As you know, first you have to link the css or js file with the html. After that you have to give container class in the main tag, in which you have to give input tag day, month, year in the heading. Then you have to create a class named result, in which you have to give year, month, days, hours, minutes under the heading.
01.HTML : –
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="icon" type="image/png" sizes="32x32" href="./assets/images/favicon-32x32.png">
<title>Age calculator Machine</title>
<link rel="stylesheet" href="./assets/css/style.css">
</head>
<body>
<main class="container" role="main">
<div class="content">
<div class="input">
<div>
<h6>Day</h6>
<input type="text" placeholder="DD" id="dayIn">
<p class="error"></p>
</div>
<div>
<h6>Month</h6>
<input type="text" placeholder="MM" id="monthIn">
<p class="error"></p>
</div>
<div>
<h6>Year</h6>
<input type="text" placeholder="YYYY" id="yearIn">
<p class="error"></p>
</div>
</div>
<hr>
<button id="calculateBtn">
<img src="./assets/images/icon-arrow.svg" alt="">
</button>
<div class="result">
<h1><span id="yearOut">--</span> years</h1>
<h1><span id="monthOut">--</span> months</h1>
<h1><span id="dayOut">--</span> days</h1>
<h1><span id="hourOut">--</span> hours</h1>
<h1><span id="minuteOut">--</span> minutes</h1>
</div>
</div>
</main>
<script src="./assets/js/main.js"></script>
</body>
</html>
02. CSS :-
We have to create a .css file in which we have to give colors using variables. With this we can use the same color again and again and that too with only one name.
:root {
--Purple: hsl(239, 73%, 47%);
--Light-red: hsl(271, 100%, 50%);
--White: hsl(0, 2%, 75%);
--Off-white: hsl(0, 0%, 94%);
--Light-grey: hsl(0, 0%, 100%);
--Smokey-grey: hsl(0, 0%, 0%);
--Off-black: hsl(0, 0%, 8%);
}
body {
background: var(--Light-grey);
}
Here is the rest of the code
@import url('https://fonts.googleapis.com/css2?family=Poppins:ital,wght@0,700;1,400;1,800&display=swap');
:root {
--Purple: hsl(239, 73%, 47%);
--Light-red: hsl(271, 100%, 50%);
--White: hsl(0, 2%, 75%);
--Off-white: hsl(0, 0%, 94%);
--Light-grey: hsl(0, 0%, 100%);
--Smokey-grey: hsl(0, 0%, 0%);
--Off-black: hsl(0, 0%, 8%);
}
* {
margin: 0;
padding: 0;
box-sizing: border-box;
font-family: 'Poppins', sans-serif;
}
body {
background: var(--Light-grey);
}
.container {
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
}
.content {
background: var(--White);
width: 750px;
padding: 50px;
border-radius: 20px;
border-bottom-right-radius: 40%;
position: relative;
box-shadow: 0 0 5px rgb(0, 0, 0);
}
.input {
display: flex;
margin-bottom: 35px;
}
input {
font-size: 32px;
width: 150px;
padding: 10px;
margin-top: 10px;
margin-right: 20px;
border-radius: 10px;
border: 0.5px solid var(--Light-grey);
outline: none;
letter-spacing: 2px;
caret-color: var(--Purple);
}
h6 {
text-transform: uppercase;
letter-spacing: 2px;
color: var(--Light-red);
}
hr {
border: none;
height: 1px;
background: var(--Light-grey);
}
button {
position: absolute;
width: 65px;
height: 65px;
border-radius: 50%;
border: none;
outline: none;
background: var(--Purple);
right: 50px;
margin-top: -32px;
cursor: pointer;
}
button:hover {
background: var(--Off-black);
}
input:focus {
border: 0.5px solid var(--Purple);
}
p.error {
font-size: 12px;
font-weight: 400;
color: var(--Light-red);
font-style: italic;
margin: 5px 0;
}
.result h1 {
font-size: 60px;
font-style: italic;
}
.result span {
color: var(--Purple);
}
.attribution {
font-size: 11px;
text-align: center;
}
.attribution a {
color: hsl(228, 45%, 44%);
}
@media only screen and (max-width: 375px) {
.input {
margin-bottom: 40px;
}
input {
font-size: 18px;
width: 80px;
margin-right: 10px;
border-radius: 5px;
}
.content {
background: var(--White);
width: 300px;
padding: 20px;
border-radius: 10px;
border-bottom-right-radius: 30%;
position: relative;
}
.result h1 {
font-size: 45px;
font-style: italic;
}
p.error {
font-size: 10px;
}
button {
right: 40%;
}
.result {
margin-top: 40px;
}
}
03. JavaScript :-
// Elements
const dayIn = document.getElementById('dayIn');
const monthIn = document.getElementById('monthIn');
const yearIn = document.getElementById('yearIn');
const dayOut = document.getElementById('dayOut');
const monthOut = document.getElementById('monthOut');
const yearOut = document.getElementById('yearOut');
const calculateBtn = document.getElementById('calculateBtn');
const errorStyle = '0.5px solid var(--Light-red)';
// Calculate Button
calculateBtn.addEventListener('click', () => {
const D = dayIn.value;
const M = monthIn.value;
const Y = yearIn.value;
const birthday = `${Y}-${M}-${D}`;
if (validateDay() && validateMonth() && validateYear()) {
console.log('Done');
} else {
return;
}
const birthDate = new Date(birthday);
const currentDate = new Date();
console.log(birthDate.getTime());
const timeDiff = currentDate.getTime() - birthDate.getTime();
// Age Calculation
let years = new Date().getFullYear() - new Date(birthday).getFullYear();
let months = new Date().getMonth() - new Date(birthday).getMonth();
let days = new Date().getDate() - Number(D);
const hours = Math.floor((timeDiff % (1000 * 60 * 60 * 24)) / (1000 * 60 * 60));
const minutes = Math.floor((timeDiff % (1000 * 60 * 60)) / (1000 * 60));
// Display Values
if (months < 0) {
years = years - 1;
months = months + 12;
}
if (days < 0) {
days += getNoOfDays(Y, M - 1);
}
// Display Values
dayOut.innerText = days;
monthOut.innerText = months;
yearOut.innerText = years;
document.getElementById('hourOut').innerText = hours;
document.getElementById('minuteOut').innerText = minutes;
});
// Get Number of Days in a particular months
function getNoOfDays(y, m) {
return new Date(y, m, 0).getDate();
}
/*================ on Blur Validation =========================*/
// On Blur day validation
dayIn.addEventListener('blur', () => {
validateDay();
});
// Validate Day function
const validateDay = () => {
const D = dayIn.value;
const M = monthIn.value;
const Y = yearIn.value;
if (D == '') {
showMessage(dayIn, 'This field is required', errorStyle);
return false;
} else if (!validDay(Y, M, D)) {
showMessage(dayIn, 'Must be a valid day', errorStyle);
return false;
} else {
showMessage(dayIn, '', '');
return true;
}
};
// On Blur month validation
monthIn.addEventListener('blur', () => {
validateMonth();
});
const validateMonth = () => {
const M = monthIn.value;
if (M == '') {
showMessage(monthIn, 'This field is required', errorStyle);
return false;
} else if (!validMonth(M)) {
showMessage(monthIn, 'Must be a valid month', errorStyle);
return false;
} else {
showMessage(monthIn, '', '');
return true;
}
};
// on Blur Year validate
yearIn.addEventListener('blur', () => {
validateYear();
});
const validateYear = () => {
const Y = yearIn.value;
const M = monthIn.value;
const D = dayIn.value;
if (Y == '') {
showMessage(yearIn, 'This field is required', errorStyle);
return false;
} else if (!validYear(Y, M, D)) {
showMessage(yearIn, 'Must be in past', errorStyle);
return false;
} else {
showMessage(yearIn, '', '');
return true;
}
};
// Validate Day
function validDay(y, m, d) {
if (d > getNoOfDays(y, m) || d < 1) return false;
return true;
}
// validate Month
function validMonth(m) {
if (m > 12 || m < 1) return false;
return true;
}
// Validate Year
function validYear(y, m, d) {
const secondDate = new Date();
const firstDate = new Date(`${y}-${m}-${d}`);
if (firstDate.setHours(0, 0, 0, 0) <= secondDate.setHours(0, 0, 0, 0)) {
return true;
}
return false;
}
// Display Message
function showMessage(elem, msg, border) {
elem.style.border = border;
elem.nextElementSibling.innerText = msg;
}
Result :-
Download Ebooks – Click Me
Download Notes – Click Me
