age calculator added

akshbansal61203 · May 30, 2024 · c85b64d · c85b64d
1 parent 74e7f61
commit c85b64d
Show file tree

Hide file tree

Showing 3 changed files with 125 additions and 0 deletions.
diff --git a/Age Calculator/index.html b/Age Calculator/index.html
@@ -0,0 +1,56 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css">
+    <title>Date and Age Calculator</title>
+</head>
+<body>
+    <div class="container" style="width: 500px; padding: 25px;">
+
+
+        <!-- Date Difference Calculator -->
+        <div class="row justify-content-center">
+            <div class="col-md-12">
+                <h2 class="text-center">Date Difference Calculator</h2>
+                <form id="dateForm">
+                    <div class="form-group">
+                        <label for="startDate">Enter the start date:</label>
+                        <input type="date" class="form-control" id="startDate" required>
+                    </div>
+                    <div class="form-group">
+                        <label for="endDate">Enter the end date:</label>
+                        <input type="date" class="form-control" id="endDate" required>
+                    </div>
+                    <button type="submit" class="btn btn-primary btn-block">Calculate Difference</button>
+                </form>
+                <div class="mt-4" id="dateResult" style="display: none;">
+                    <h3 class="text-center">Difference: <span id="years"></span> years, <span id="months"></span> months, and <span id="days"></span> days.</h3>
+                </div>
+            </div>
+        </div>
+
+        <hr>
+
+        <!-- Age Calculator -->
+        <div class="row justify-content-center">
+            <div class="col-md-12">
+                <h2 class="text-center">Age Calculator</h2>
+                <form id="ageForm">
+                    <div class="form-group">
+                        <label for="birthdate">Enter your birthdate:</label>
+                        <input type="date" class="form-control" id="birthdate" required>
+                    </div>
+                    <button type="submit" class="btn btn-primary btn-block">Calculate Age</button>
+                </form>
+                <div class="mt-4" id="ageResult" style="display: none;">
+                    <h3 class="text-center">You are <span id="ageYears"></span> years, <span id="ageMonths"></span> months, and <span id="ageDays"></span> days old.</h3>
+                </div>
+            </div>
+        </div>
+    </div>
+
+    <script src="script.js"></script>
+</body>
+</html>
diff --git a/Age Calculator/manifest.json b/Age Calculator/manifest.json
@@ -0,0 +1,13 @@
+{
+    "manifest_version": 3,
+    "name": "Age Calculator Extension",
+    "version": "1.0",
+    "description": "A simple age calculator Chrome extension",
+    "action": {
+      "default_popup": "index.html"
+    },
+    "permissions": [
+      "storage"
+    ]
+  }
+
diff --git a/Age Calculator/script.js b/Age Calculator/script.js
@@ -0,0 +1,56 @@
+document.getElementById('dateForm').addEventListener('submit', function(e) {
+    e.preventDefault();
+
+    const startDate = new Date(document.getElementById('startDate').value);
+    const endDate = new Date(document.getElementById('endDate').value);
+
+    if (startDate > endDate) {
+        alert("End date should be greater than start date.");
+        return;
+    }
+
+    let years = endDate.getFullYear() - startDate.getFullYear();
+    let months = endDate.getMonth() - startDate.getMonth();
+    let days = endDate.getDate() - startDate.getDate();
+
+    if (days < 0) {
+        months--;
+        days += new Date(endDate.getFullYear(), endDate.getMonth(), 0).getDate();
+    }
+
+    if (months < 0) {
+        years--;
+        months += 12;
+    }
+
+    document.getElementById('years').textContent = years;
+    document.getElementById('months').textContent = months;
+    document.getElementById('days').textContent = days;
+    document.getElementById('dateResult').style.display = 'block';
+});
+
+document.getElementById('ageForm').addEventListener('submit', function(e) {
+    e.preventDefault();
+
+    const birthdate = new Date(document.getElementById('birthdate').value);
+    const today = new Date();
+
+    let years = today.getFullYear() - birthdate.getFullYear();
+    let months = today.getMonth() - birthdate.getMonth();
+    let days = today.getDate() - birthdate.getDate();
+
+    if (days < 0) {
+        months--;
+        days += new Date(today.getFullYear(), today.getMonth(), 0).getDate();
+    }
+
+    if (months < 0) {
+        years--;
+        months += 12;
+    }
+
+    document.getElementById('ageYears').textContent = years;
+    document.getElementById('ageMonths').textContent = months;
+    document.getElementById('ageDays').textContent = days;
+    document.getElementById('ageResult').style.display = 'block';
+});