age calculator

AkashKobal · AkashKobal · commit 87562a305965 · 2024-03-09T13:16:14.000+05:30
diff --git a/14. Age Calculator/Screenshot (322).png b/14. Age Calculator/Screenshot (322).png
diff --git a/14. Age Calculator/index.html b/14. Age Calculator/index.html
@@ -0,0 +1,29 @@
+<!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">
+    <script defer src="script.js"></script>
+</head>
+
+<body>
+    <div class="container">
+        <div class="content">
+            <h1>Javascript</h1>
+            <h1>Age Calculator</h1>
+            <input type="date" id="date">
+            <input type="button" value="Calculate" onclick="calculateAge()" id="calculateAge">
+            <div>
+                <p id="display">Select your date of birth.</p>
+            </div>
+        </div>
+
+
+    </div>
+
+</body>
+
+</html>
diff --git a/14. Age Calculator/script.js b/14. Age Calculator/script.js
@@ -0,0 +1,53 @@
+let userInput = document.getElementById("date");
+let display = document.getElementById("display");
+
+userInput.max = new Date().toISOString().split("T")[0]; // disable future date
+
+function calculateAge() {
+    let birthDate = new Date(userInput.value);
+
+    let userDate = birthDate.getDate();
+    let userMonth = birthDate.getMonth() + 1;
+    let userYear = birthDate.getFullYear();
+
+
+    let today = new Date();
+
+
+    let todaysDate = today.getDate();
+    let todaysMonth = today.getMonth() + 1;
+    let todaysYear = today.getFullYear();
+
+
+    let date3, month3, year3;
+
+    year3 = todaysYear - userYear;
+
+    if (todaysMonth >= userMonth) {
+        month3 = todaysMonth - userMonth;
+    }
+    else {
+        month3--;
+        month3 = 12 + todaysMonth - userMonth;
+    }
+    if (todaysDate >= userDate) {
+        date3 = todaysDate - userDate;
+    }
+    else {
+        month3--;
+        date3 = getDateInMonth(userYear, userMonth) + todaysDate - userDate;
+    }
+    if (month3 < 0) {
+        month3 == 11;
+        year3--
+    }
+    //   console.log(year3,month3,date3);
+    // display.innerHTML = `Your Age is ${year3} years, ${month3} months and ${date3} days`;
+    display.innerText = `Your Age is ${year3} years, ${month3} months and ${date3} days`;
+
+}
+
+function getDateInMonth(year, month) {
+    return new Date(year, month, 0).getDate();
+}
+
diff --git a/14. Age Calculator/style.css b/14. Age Calculator/style.css
@@ -0,0 +1,67 @@
+* {
+    margin: 0;
+    padding: 0;
+    box-sizing: border-box;
+}
+
+.content h1:nth-child(1) {
+    color: rgba(27, 6, 122, 0.604);
+}
+
+.content h1:nth-child(2) {
+    color: rgb(27, 6, 122);
+}
+
+#display {
+    color: rgba(33, 57, 87, 0.784);
+    font-size: 18px;
+    padding-left: 5px;
+
+}
+
+.container {
+    background: linear-gradient(#3731e6e2, #0834adab);
+    height: 100vh;
+    width: 100vw;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    flex-direction: column;
+    font-family: 'Poppins', sans-serif;
+    color: white;
+    font-size: 1.5rem;
+}
+
+.content {
+    position: absolute;
+    left: 50%;
+    top: 50%;
+    transform: translate(-50%, -50%);
+}
+
+input {
+    width: 200px;
+    padding: 10px;
+    border: 1px solid #ccc;
+    outline: none;
+    border-radius: 5px;
+    font-size: 1rem;
+    cursor: pointer;
+    margin-top: 10px;
+    margin-bottom: 10px;
+}
+
+#calculateAge {
+    width: fit-content;
+    padding-left: 15px;
+    padding-right: 15px;
+    border-color: transparent;
+    background-color: rgba(255, 255, 255, 0.805);
+
+
+}
+
+#date {
+    background-color: rgba(255, 255, 255, 0.805);
+    border-color: transparent;
+}
