added pregnancy due date estimator

techy4shri · Jun 12, 2024 · 8938d7b · 8938d7b
1 parent 5ed0b11
commit 8938d7b
Show file tree

Hide file tree

Showing 6 changed files with 128 additions and 0 deletions.
diff --git a/Pregnancy Due Date Estimator/background.js b/Pregnancy Due Date Estimator/background.js
diff --git a/Pregnancy Due Date Estimator/bg.webp b/Pregnancy Due Date Estimator/bg.webp
diff --git a/Pregnancy Due Date Estimator/manifest.json b/Pregnancy Due Date Estimator/manifest.json
@@ -0,0 +1,47 @@
+{
+    "doctype": "html",
+    "lang": "en",
+    "head": {
+      "meta": [
+        {
+          "charset": "UTF-8"
+        },
+        {
+          "name": "viewport",
+          "content": "width=device-width, initial-scale=1.0"
+        }
+      ],
+      "link": [
+        {
+          "rel": "stylesheet",
+          "href": "popup.css"
+        }
+      ],
+      "title": "Pregnancy Due Date Calculator"
+    },
+    "body": {
+      "div": {
+        "class": "calculator-container",
+        "h1": "Pregnancy Due Date Calculator",
+        "div": {
+          "label": {
+            "for": "lastMenstrualDate",
+            "text": "Last Menstrual Period:"
+          },
+          "input": {
+            "type": "date",
+            "id": "lastMenstrualDate"
+          }
+        },
+        "button": {
+          "onclick": "calculateDueDate()",
+          "text": "Calculate Due Date"
+        },
+        "div#result": ""
+      },
+      "script": {
+        "src": "popup.js"
+      }
+    }
+  }
+
diff --git a/Pregnancy Due Date Estimator/popup.css b/Pregnancy Due Date Estimator/popup.css
@@ -0,0 +1,37 @@
+body {
+    font-family: Arial, sans-serif;
+    background-image: url('bg.webp');
+    margin: 0;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    height: 100vh;
+}
+
+.calculator-container {
+    background-color: #fff;
+    padding: 20px;
+    border-radius: 8px;
+    box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
+    text-align: center;
+}
+
+button {
+    background-color: #4caf50;
+    color: #fff;
+    padding: 10px 20px;
+    border: none;
+    border-radius: 4px;
+    cursor: pointer;
+    font-size: 16px;
+    margin-top: 10px;
+}
+
+button:hover {
+    background-color: #45a049;
+}
+
+input {
+    padding: 8px;
+    margin: 5px;
+}
diff --git a/Pregnancy Due Date Estimator/popup.html b/Pregnancy Due Date Estimator/popup.html
@@ -0,0 +1,26 @@
+<!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="popup.css">
+    <title>Pregnancy Due Date Calculator</title>
+</head>
+
+<body>
+
+    <div class="calculator-container">
+        <h1>Pregnancy Due Date Calculator</h1>
+        <div>
+            <label for="lastMenstrualDate">Last Menstrual Period:</label>
+            <input type="date" id="lastMenstrualDate">
+        </div>
+        <button onclick="calculateDueDate()">Calculate Due Date</button>
+        <div id="result"></div>
+    </div><br>
+
+    <script src="popup.js"></script>
+</body>
+
+</html>
diff --git a/Pregnancy Due Date Estimator/popup.js b/Pregnancy Due Date Estimator/popup.js
@@ -0,0 +1,18 @@
+function calculateDueDate() {
+
+    var lastMenstrualDate = document.getElementById("lastMenstrualDate").value;
+
+
+    if (!lastMenstrualDate) {
+        alert("Please enter the last menstrual period date.");
+        return;
+    }
+
+
+    var dueDate = new Date(lastMenstrualDate);
+    dueDate.setDate(dueDate.getDate() + 280); 
+
+    // Display the result
+    var formattedDueDate = dueDate.toDateString();
+    document.getElementById("result").innerHTML = "Estimated Due Date: " + formattedDueDate;
+}