ssitvit · Swa-stika · Jul 2, 2023
diff --git a/projects/Age Calculator/index.html b/projects/Age Calculator/index.html
@@ -0,0 +1,26 @@
+<!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">
+    <title>Age Calculator</title>
+    <link rel="stylesheet" href="style.css">
+</head>
+<body>
+    <div class="container">
+        <p>AGE CALCULATOR</p>        
+        <div class="date-container">
+            <label for="birthDate">Date of Birth</label>
+            <input type="date" name="birthDate" id="birthDate" required>
+        </div>
+        <div class="date-container">
+            <label for="currentDate">Present Date</label>
+            <input type="date" name="currentDate" id="currentDate" required>
+        </div>
+        <input type="button" value="CALCULATE" id="calculateBtn">
+        <p id="output"></p>
+    </div>        
+    <script src="script.js"></script>
+</body>
+</html>
diff --git a/projects/Age Calculator/script.js b/projects/Age Calculator/script.js
@@ -0,0 +1,26 @@
+const dob = document.getElementById("birthDate");
+const currentDate = document.getElementById("currentDate");
+const output = document.getElementById("output");
+
+document.getElementById("calculateBtn").addEventListener("click", () => {
+  if (!dob.value || !currentDate.value) {
+    output.innerHTML = "Please select Date";
+  } else {
+    const [dobYear, dobMonth, dobDate] = dob.value.split("-").map(num => parseInt(num, 10));
+    const [currYear, currMonth, currDate] = currentDate.value.split("-").map(num => parseInt(num, 10));
+
+    const yearDiff = currYear - dobYear;
+    const monthDiff = currMonth - dobMonth;
+    const dateDiff = currDate - dobDate;
+
+    const yearAgeDiff = monthDiff < 0 || (monthDiff === 0 && dateDiff < 0) ? yearDiff - 1 : yearDiff;
+    const monthAgeDiff = monthDiff < 0 ? 12 + monthDiff : monthDiff;
+    const dateAgeDiff = dateDiff < 0 ? daysInMonth(dobMonth, dobYear) - dobDate + currDate : dateDiff;
+
+    output.innerHTML = `${yearAgeDiff} Years, ${monthAgeDiff} Months, ${dateAgeDiff} Days.`;
+  }
+});
+
+function daysInMonth(month, year) {
+  return new Date(year, month, 0).getDate();
+}
diff --git a/projects/Age Calculator/style.css b/projects/Age Calculator/style.css
@@ -0,0 +1,62 @@
+*{
+    margin:30;
+    padding:30;
+    box-sizing: border-box;
+}
+body{
+    display:flexbox;
+    justify-content: center;
+    align-items: center;
+    min-height: 300vh;
+}
+.container{
+
+    width: 500px;
+    height: 500px;
+    border-radius: 30px;
+    display:flexbox;
+    /* justify-content: center; */
+    align-items: center;  
+
+}
+.container p{
+    color: rgb(2, 15, 99);
+    margin: 20px;
+    font-size: 20px;
+    font-weight: bolder;
+    font-family: 'Times New Roman';
+}
+.date-container label{
+    font-size: larger;
+    margin: right 50px;    
+}
+#birthDate,#currentDate{
+    width: 200px;
+    height: 50px;
+    border: 10px;;
+    box-shadow: 0 0 2px 1px rgb(219, 63, 63);
+    border-radius: 50px;
+    margin-top: 40px;
+    padding: 6px;
+    font-family: serif;
+    color:rgb(174, 93, 93);
+    font-size:medium;
+}
+#calculateBtn{
+    width: 200px;
+    height: 60px;
+    margin-top: 60px;
+    font-size: larger;
+    font-family: 'Times New Roman';
+    background-color: rgb(250, 253, 250);
+    color:rgb(205, 117, 117); 
+    border:10px;
+    outline:auto;
+    border-radius: 40px;
+
+    cursor:auto;
+    transition: 0.2s;
+}
+#calculateBtn:active{
+  box-shadow: 0 0 0 0;   
+}