kunjgit · Keshab1113 · Oct 13, 2023 · Oct 13, 2023
diff --git a/Games/Age_Calculator/README.md b/Games/Age_Calculator/README.md
@@ -0,0 +1,30 @@
+# **Game_Name** 
+
+Age_Calculator
+
+## **Description 📃**
+Frontend game developed using HTML, CSS, JavaScript. Here user can see his/her age.
+
+## **functionalities 🎮**
+- Chose your date of birth.
+- Click Age Button.
+- And see your age.
+
+## **How to play? 🕹️**
+- Chose your date of birth.
+- Click Age Button.
+
+## **Screenshots 📸**
+![Screenshot (89)](https://github.com/kunjgit/GameZone/assets/110785343/2c2063f6-9582-41b9-89ad-b75a4fd4c52b)
+
+![Age_Calculator](blob:https://keshab1113.github.io/c470e463-e4a7-4614-b6ee-6c8042a5b98c)
+![image](../../assets/images/Age_Calculator.png)
+
+
+
+## **Working video 📹**
+
+
+
+
+
diff --git a/Games/Age_Calculator/favicon.ico b/Games/Age_Calculator/favicon.ico
diff --git a/Games/Age_Calculator/index.html b/Games/Age_Calculator/index.html
@@ -0,0 +1,52 @@
+<!DOCTYPE html>
+<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" />
+  <link rel="shortcut icon" href="assests/age-calculator.png" type="image/x-icon" />
+  <link rel="stylesheet" href="style.css" />
+  <link rel="icon" href="favicon.ico">
+  <title>Age Calculator</title>
+</head>
+<div></div>
+<body>
+  <div class="heading">Calculate Your Age</div>
+  <div class="container">
+    <div class="inputs-wrapper">
+        <input type="date" id="date-input">
+        <button onclick="ageCalculate()">Age</button>
+    </div>
+    <div class="outputs-wrapper">
+        <div>
+            <span id="years">
+                -
+            </span>
+            <p>
+                Years
+            </p>
+        </div>
+        <div>
+            <span id="months">
+                -
+            </span>
+            <p>
+               Months
+            </p>
+        </div>
+        <div>
+            <span id="days">
+                -
+            </span>
+            <p>
+                Days
+            </p>
+        </div>
+    </div>
+</div>
+<footer>
+    <p>This Web-Site is made by Keshab Das.</p>
+</footer>
+  <script src="script.js"></script>
+</body>
+</html>
diff --git a/Games/Age_Calculator/script.js b/Games/Age_Calculator/script.js
@@ -0,0 +1,146 @@
+alert("Please Enter Your Date Of Birth.");
+const yearField = document.getElementById('year');
+const monthField = document.getElementById('month');
+const dayField = document.getElementById('day');
+const calculateButton = document.getElementById('calculate-age');
+const display = document.getElementById('display');
+const today = new Date();
+let selectedYear = today.getFullYear(),
+	selectedMonth = today.getMonth() + 1,
+	selectedDay = today.getDate(),
+	daysOfMonths = [31, 28, 31, 30, 31, 30, 31, 31, 30, 31, 30, 31];
+window.addEventListener('DOMContentLoaded', () => {
+	updateDaysOfMonths(today.getFullYear());
+	fillYearField();
+	updateDayField(today.getFullYear(), today.getMonth() + 1);
+	selectMonth(today.getMonth() + 1);
+	selectDay(today.getDate());
+
+	yearField.addEventListener('change', handleYearChange);
+	monthField.addEventListener('change', handleMonthChange);
+	dayField.addEventListener('change', handleDayChange);
+	calculateButton.addEventListener('click', handleAgeCalculation);
+});
+function isLeapYear(year) {
+	if (year % 400 === 0) return true;
+	if (year % 100 === 0) return false;
+	if (year % 4 === 0) return true;
+	return false;
+}
+function updateDaysOfMonths(year) {
+	daysOfMonths[1] = isLeapYear(year) ? 29 : 28;
+}
+function selectMonth(month) {
+	monthField.value = month;
+}
+function selectDay(day) {
+	dayField.value = day;
+}
+function fillYearField() {
+	const numberOfYears = 100;
+	const currentYear = today.getFullYear();
+	const startYear = currentYear - numberOfYears;
+
+	for (let i = startYear; i <= currentYear; i++) {
+		const option = document.createElement('option');
+		option.value = i;
+		option.textContent = i;
+
+		i === currentYear && option.setAttribute('selected', 'selected');
+		yearField.appendChild(option);
+	}
+}
+function updateDayField(year, month) {
+	updateDaysOfMonths(year);
+	const totalDays = daysOfMonths[month - 1];
+	clearList(dayField);
+	console.log({ selectedDay });
+
+	for (let i = 1; i <= totalDays; i++) {
+		const option = document.createElement('option');
+		option.value = i;
+		option.textContent = i;
+
+		if (i === selectedDay) option.setAttribute('selected', 'selected');
+		dayField.appendChild(option);
+	}
+}
+function clearList(element) {
+	for (let i = element.options.length - 1; i >= 1; i--) {
+		element.remove(i);
+	}
+}
+function makeDate() {
+	return new Date(selectedYear, selectedMonth - 1, selectedDay);
+}
+function handleYearChange(event) {
+	event.preventDefault();
+	const { value } = event.target;
+	selectedYear = +value;
+	updateDayField(value, selectedMonth);
+}
+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("Please Enter a Valid Date Of Birth.");
+        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;
+    }
+}
diff --git a/Games/Age_Calculator/style.css b/Games/Age_Calculator/style.css
@@ -0,0 +1,124 @@
+* {
+	padding: 0;
+	margin: 0;
+	box-sizing: border-box;
+}
+body {
+	background-color: #b5b1dd;
+}
+.container{
+    width: 50%;
+    min-width: 300px;
+    position: absolute;
+    transform: translate(-50%,-50%);
+    left: 50%;
+    top: 50%;   
+}
+.container *{
+    font-family:Impact, Haettenschweiler, 'Arial Narrow Bold', sans-serif;
+    border: none;
+    outline: none;
+}
+.inputs-wrapper{
+    background-color: #080808;
+    padding: 30px 25px;
+    border-radius: 8px;
+    box-shadow: 0 15px 20px rgba(29, 28, 28, 0.3);
+    margin-bottom: 50px;
+}
+input,
+button{
+    height: 50px;
+    background-color: #ffffff;
+    color: #080808;
+    font-weight: 900;
+    border-radius: 5px;
+}
+input{
+    width: 60%;
+    padding: 0 20px;
+    font-size: 14px;
+    font-size: 20px;
+}
+button{
+    width: 30%;
+    float: right;
+    font-size: 25px;
+    cursor: pointer;
+}
+button:hover{
+    background-color: rgb(65, 60, 60);
+    color: #fcf4f4;
+}
+.outputs-wrapper{
+    width: 100%;
+    display: flex;
+    justify-content: space-between;
+}
+.outputs-wrapper div{
+    height: 100px;
+    width: 100px;
+    background-color: #080808;
+    border-radius: 5px;
+    color: #ffffff;
+    display: grid;
+    place-items: center;
+    padding: 20px 0;
+    box-shadow: 0 15px 20px rgba(0,0,0,0.3);
+}
+span{
+    font-size: 30px;
+    font-weight: 500;
+}
+p{
+    font-size: 14px;
+    color: #707070;
+    font-weight: 400;
+}
+
+footer {
+	color: white;
+	position: fixed;
+	text-align: center;
+	font-size: 1rem;
+	left: 0;
+	right: 0;
+	bottom: 0;
+	padding: 5px;
+	line-height: 3vh;
+}
+
+footer a:visited {
+	color: inherit;
+}
+@media (max-width: 800px) {
+	.container {
+		width: 80%;
+	}
+}
+.container #display {
+	font-size: 20px;
+	color: #fff;
+	padding-bottom: 61px;
+}
+.container code {
+	font-size: 0.875em;
+	color: #d63384;
+	word-wrap: break-word;
+}
+.heading{
+	justify-content: center;
+	font-size: 70px;
+	text-align: center;
+	color: black;
+	padding-top: 55px;
+    font-family:'Trebuchet MS', 'Lucida Sans Unicode', 'Lucida Grande', 'Lucida Sans', Arial, sans-serif ;
+}
+footer{
+    background-color: #707070;
+}
+footer p{
+    color: #080808;
+    font-weight: 500;
+    font-size: 20px;
+}
diff --git a/README.md b/README.md
@@ -495,6 +495,7 @@ This repository also provides one such platforms where contributers come over an
 | 383 | [Puzzel_Winner](https://github.com/kunjgit/GameZone/tree/main/Games/Puzzel_Winner)|
 | 384 | [Emoji_Intruder](https://github.com/kunjgit/GameZone/tree/main/Games/Emoji_Intruder)|
 | 385 | [Guess The Weapon](https://github.com/kunjgit/GameZone/tree/main/Games/Guess_The_Weapon)|
+| 386 | [Age_Calculator](https://github.com/kunjgit/GameZone/tree/main/Games/Age_Calculator)|
 
  </center>
 

diff --git a/assets/images/Age_Calculator.png b/assets/images/Age_Calculator.png