diff --git a/README.md b/README.md
index 6dc78c7..32471d1 100644
--- a/README.md
+++ b/README.md
@@ -113,6 +113,11 @@ This repository contains a collection of frontend projects.Each project is built
Bubble Game
Click Here
+ 21
+ Bubble Game
+ Click Here
diff --git a/project-21_age_calculator/age-calc-for-index.jpg b/project-21_age_calculator/age-calc-for-index.jpg
new file mode 100644
index 0000000..bea0d3e
Binary files /dev/null and b/project-21_age_calculator/age-calc-for-index.jpg differ
diff --git a/project-21_age_calculator/index.html b/project-21_age_calculator/index.html
new file mode 100644
index 0000000..d1cff97
--- /dev/null
+++ b/project-21_age_calculator/index.html
@@ -0,0 +1,21 @@
+
+
+
+ Age Calculator
+
+
+
+ Age Calculator
+
+ Your age is 21 years old
+
+
+
+
\ No newline at end of file
diff --git a/project-21_age_calculator/script.js b/project-21_age_calculator/script.js
new file mode 100644
index 0000000..1620652
--- /dev/null
+++ b/project-21_age_calculator/script.js
@@ -0,0 +1,39 @@
+let button = document.querySelector("button");
+let showAge = document.getElementById("show_age");
+let dateOfBirth = document.querySelector("input");
+button.addEventListener("click",(e)=>{
+ e.preventDefault();
+ const today = new Date();
+ const dob = new Date(dateOfBirth.value)
+ let age = today.getFullYear() - dob.getFullYear();
+ const month = today.getMonth() - dob.getMonth();
+ const date = today.getDate() - dob.getDate();
+
+ if(dateOfBirth.value =="")
+ alert("Please enter your birthday");
+
+ else {
+
+ if(today.getMonth() < dob.getMonth() || today.getDate() < dob.getDate()){
+ age--;
+
+ showAge.innerText = `Your age is ${age} years old`
+
+ }
+
+
+
+ else {
+
+ if(today.getMonth() > dob.getMonth() || today.getDate() > dob.getDate()){
+ age--;
+ }
+
+ showAge.innerText = `Your age is ${-age} years old`
+
+ }
+
+ }
+
+
+})
\ No newline at end of file
diff --git a/project-21_age_calculator/style.css b/project-21_age_calculator/style.css
new file mode 100644
index 0000000..83ff93e
--- /dev/null
+++ b/project-21_age_calculator/style.css
@@ -0,0 +1,63 @@
+*{
+ margin: 0;
+ padding: 0;
+ box-sizing: border-box;
+}
+
+body{
+ width:100%;
+ height:100vh;
+ background-color: #f7f7f7;
+ font-family: Arial, Helvetica, sans-serif;
+ font-weight: bold;
+}
+
+h1 {
+ font-size: 220%;
+}
+
+main{
+ background-color: #ffffff;
+ width:43.5%;
+ height: 38%;
+ display: flex;
+ flex-direction: column;
+ align-items: center;
+ justify-content: center;
+ margin: 4.5% auto;
+ border-radius: 0.5rem;
+ /* border: solid 2px red; */
+ gap: 1.5rem;
+ padding: 2rem;
+ box-shadow: 0px 0px 6px 3px #dcdada;
+}
+
+form{
+ display: flex;
+ flex-direction: column;
+ align-items: center;
+ justify-content: center;
+ gap: 0.5rem;
+ width:100%
+}
+
+form input{
+ width:50%;
+ padding:0.4rem;
+ border-radius: 0.3rem;
+ border: 1px rgb(205, 204, 204) solid;
+}
+
+form button{
+ color: white;
+ background-color: #007bff;
+ padding: 0.5rem;
+ border-radius: 0.3rem;
+ border: none;
+ width:20%;
+}
+
+#show_age{
+ /* font-size: 1.5rem; */
+ font-size: 150%;
+}
\ No newline at end of file
diff --git a/sitemap.xml b/sitemap.xml
index 9298539..59deccb 100644
--- a/sitemap.xml
+++ b/sitemap.xml
@@ -3,6 +3,9 @@
https://armanidrisi.github.io/frontend-projects/
+
+ https://shivambansal96.github.io/ageCalculator/
+
https://armanidrisi.github.io/frontend-projects/project-18_toggle_dark_light_mode
@@ -56,5 +59,5 @@
https://armanidrisi.github.io/frontend-projects/project-1_landing-page
-
+
\ No newline at end of file