Skip to content

Commit ed3d8fd

Browse files
tajulafreentajulafreen
authored
Merge pull request #21 from tajulafreen/Age-Calculator
50Projects-HTML-CSS-JavaScript : Age calculator
2 parents 9855428 + 80b2387 commit ed3d8fd

File tree

4 files changed

+142
-0
lines changed

4 files changed

+142
-0
lines changed

‎README.md

+11
Original file line numberDiff line numberDiff line change
@@ -210,6 +210,17 @@ In order to run this project you need:
210210
</details>
211211
</li>
212212

213+
<li>
214+
<details>
215+
<summary>Age Calculator</summary>
216+
<p>Age Calculator is a user-friendly tool built using HTML, CSS, and JavaScript. The Age Calculator project is a beginner-friendly web development project designed to help users calculate their age effortlessly. Users can input their date of birth and instantly see their age in years.</p>
217+
<ul>
218+
<li><a href="https://tajulafreen.github.io/50Projects-HTML-CSS-JavaScript/Source-Code/AgeCalculator/">Live Demo</a></li>
219+
<li><a href="https://github.com/tajulafreen/50Projects-HTML-CSS-JavaScript/tree/main/Source-Code/AgeCalculator">Source</a></li>
220+
</ul>
221+
</details>
222+
</li>
223+
213224
</ol>
214225

215226
<p align="right">(<a href="#readme-top">back to top</a>)</p>

‎Source-Code/AgeCalculator/index.html

+23
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,23 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
<head>
4+
<meta charset="UTF-8" />
5+
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
6+
<title>Age Calculator</title>
7+
<link rel="stylesheet" href="style.css" />
8+
</head>
9+
<body>
10+
<div class="center">
11+
<div class="container">
12+
<p id="currDate"></p>
13+
<p>Enter the DOB in format: (MM/DD/YYYY)</p>
14+
<input type="text" placeholder="Enter your D.O.B" id="DOB" />
15+
<button id="CalcAge">Calculate Age</button>
16+
</div>
17+
<div id="displayAge">
18+
<p id="age"></p>
19+
</div>
20+
</div>
21+
<script src="script.js"></script>
22+
</body>
23+
</html>

‎Source-Code/AgeCalculator/script.js

+26
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,26 @@
1+
document.addEventListener('DOMContentLoaded', () => {
2+
const currDate = document.getElementById('currDate');
3+
const dateOfBirth = document.querySelector('#DOB');
4+
const calcAgeButton = document.getElementById('CalcAge');
5+
const displayAge = document.getElementById('displayAge');
6+
const ageText = document.getElementById('age');
7+
const today = new Date();
8+
9+
currDate.innerText = `Today's Date is: ${today.toLocaleDateString('en-US')}`;
10+
11+
calcAgeButton.addEventListener('click', () => {
12+
const birthDate = new Date(dateOfBirth.value);
13+
let age = today.getFullYear() - birthDate.getFullYear();
14+
const monthDifference = today.getMonth() - birthDate.getMonth();
15+
16+
if (
17+
monthDifference < 0
18+
|| (monthDifference === 0 && today.getDate() < birthDate.getDate())
19+
) {
20+
age -= 1;
21+
}
22+
23+
displayAge.style.visibility = 'visible';
24+
ageText.innerText = `You are ${age} years old.`;
25+
});
26+
});

‎Source-Code/AgeCalculator/style.css

+82
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,82 @@
1+
* {
2+
margin: 0;
3+
padding: 0;
4+
box-sizing: border-box;
5+
font-family: cursive;
6+
}
7+
8+
.center {
9+
display: flex;
10+
justify-content: center;
11+
align-items: center;
12+
height: 100vh;
13+
}
14+
15+
.container {
16+
display: flex;
17+
width: 600px;
18+
19+
/* margin:auto;
20+
margin-top:10%;
21+
margin-bottom:10%; */
22+
align-items: center;
23+
justify-content: center;
24+
flex-direction: column;
25+
background-color: rgb(169, 216, 80);
26+
box-shadow: 8px 8px black;
27+
color: white;
28+
padding: 5% 0%;
29+
}
30+
31+
#currDate {
32+
font-size: 30px;
33+
margin: 20px;
34+
font-weight: bold;
35+
}
36+
37+
input {
38+
font-size: 20px;
39+
padding: 15px;
40+
margin: 20px;
41+
text-align: center;
42+
border-radius: 20px;
43+
border: 1px solid yellow;
44+
cursor: pointer;
45+
}
46+
47+
button {
48+
font-size: 20px;
49+
padding: 10px 20px;
50+
border-radius: 10px;
51+
border: none;
52+
background-color: yellow;
53+
color: black;
54+
margin: 20px;
55+
text-transform: uppercase;
56+
font-weight: bold;
57+
cursor: pointer;
58+
}
59+
60+
button:hover {
61+
background-color: white;
62+
color: rgb(169, 216, 80);
63+
}
64+
65+
#displayAge {
66+
display: flex;
67+
align-items: center;
68+
justify-content: center;
69+
width: 620px;
70+
height: 490px;
71+
background-color: rgb(91, 228, 141);
72+
border-radius: 30px;
73+
position: absolute;
74+
visibility: hidden;
75+
}
76+
77+
#age {
78+
color: white;
79+
font-size: 50px;
80+
margin: 20px;
81+
font-weight: bold;
82+
}

0 commit comments

Comments
 (0)