tajulafreen · tajulafreen · Jul 20, 2024 · Jul 20, 2024 · Jul 20, 2024 · Jul 20, 2024
diff --git a/README.md b/README.md
@@ -210,6 +210,17 @@ In order to run this project you need:
 </details>
 </li>
 
+<li>
+<details>
+<summary>Age Calculator</summary>
+<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>
+<ul>
+<li><a href="https://tajulafreen.github.io/50Projects-HTML-CSS-JavaScript/Source-Code/AgeCalculator/">Live Demo</a></li>
+<li><a href="https://github.com/tajulafreen/50Projects-HTML-CSS-JavaScript/tree/main/Source-Code/AgeCalculator">Source</a></li>
+</ul> 
+</details>
+</li>
+
 </ol>
 
 <p align="right">(<a href="#readme-top">back to top</a>)</p>

diff --git a/Source-Code/AgeCalculator/index.html b/Source-Code/AgeCalculator/index.html
@@ -0,0 +1,23 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>Age Calculator</title>
+    <link rel="stylesheet" href="style.css" />
+  </head>
+  <body>
+    <div class="center">
+      <div class="container">
+        <p id="currDate"></p>
+        <p>Enter the DOB in format: (MM/DD/YYYY)</p>
+        <input type="text" placeholder="Enter your D.O.B" id="DOB" />
+        <button id="CalcAge">Calculate Age</button>
+      </div>
+      <div id="displayAge">
+        <p id="age"></p>
+      </div>
+    </div>
+    <script src="script.js"></script>
+  </body>
+</html>
diff --git a/Source-Code/AgeCalculator/script.js b/Source-Code/AgeCalculator/script.js
@@ -0,0 +1,26 @@
+document.addEventListener('DOMContentLoaded', () => {
+  const currDate = document.getElementById('currDate');
+  const dateOfBirth = document.querySelector('#DOB');
+  const calcAgeButton = document.getElementById('CalcAge');
+  const displayAge = document.getElementById('displayAge');
+  const ageText = document.getElementById('age');
+  const today = new Date();
+
+  currDate.innerText = `Today's Date is: ${today.toLocaleDateString('en-US')}`;
+
+  calcAgeButton.addEventListener('click', () => {
+    const birthDate = new Date(dateOfBirth.value);
+    let age = today.getFullYear() - birthDate.getFullYear();
+    const monthDifference = today.getMonth() - birthDate.getMonth();
+
+    if (
+      monthDifference < 0
+      || (monthDifference === 0 && today.getDate() < birthDate.getDate())
+    ) {
+      age -= 1;
+    }
+
+    displayAge.style.visibility = 'visible';
+    ageText.innerText = `You are ${age} years old.`;
+  });
+});
diff --git a/Source-Code/AgeCalculator/style.css b/Source-Code/AgeCalculator/style.css
@@ -0,0 +1,82 @@
+* {
+  margin: 0;
+  padding: 0;
+  box-sizing: border-box;
+  font-family: cursive;
+}
+
+.center {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  height: 100vh;
+}
+
+.container {
+  display: flex;
+  width: 600px;
+
+  /* margin:auto;
+    margin-top:10%;
+    margin-bottom:10%; */
+  align-items: center;
+  justify-content: center;
+  flex-direction: column;
+  background-color: rgb(169, 216, 80);
+  box-shadow: 8px 8px black;
+  color: white;
+  padding: 5% 0%;
+}
+
+#currDate {
+  font-size: 30px;
+  margin: 20px;
+  font-weight: bold;
+}
+
+input {
+  font-size: 20px;
+  padding: 15px;
+  margin: 20px;
+  text-align: center;
+  border-radius: 20px;
+  border: 1px solid yellow;
+  cursor: pointer;
+}
+
+button {
+  font-size: 20px;
+  padding: 10px 20px;
+  border-radius: 10px;
+  border: none;
+  background-color: yellow;
+  color: black;
+  margin: 20px;
+  text-transform: uppercase;
+  font-weight: bold;
+  cursor: pointer;
+}
+
+button:hover {
+  background-color: white;
+  color: rgb(169, 216, 80);
+}
+
+#displayAge {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 620px;
+  height: 490px;
+  background-color: rgb(91, 228, 141);
+  border-radius: 30px;
+  position: absolute;
+  visibility: hidden;
+}
+
+#age {
+  color: white;
+  font-size: 50px;
+  margin: 20px;
+  font-weight: bold;
+}