Merge pull request #1877 from harshmishra19/Bayes-theorem-Calculator

Bayes Theorem Calculator
Sulagna-Dutta-Roy · Jun 23, 2024 · 43ccfa5 · 43ccfa5
2 parents b238d83 + a3ebdee
commit 43ccfa5
Show file tree

Hide file tree

Showing 5 changed files with 160 additions and 0 deletions.
diff --git a/Bayes Theorem Calculator/icon.png b/Bayes Theorem Calculator/icon.png
diff --git a/Bayes Theorem Calculator/manifest.json b/Bayes Theorem Calculator/manifest.json
@@ -0,0 +1,16 @@
+{
+  "manifest_version": 3,
+  "name": "Bayes theorem Calculator",
+  "version": "1.0",
+  "description": "Bayes theorem calculator.",
+  "action": {
+    "default_popup": "popup.html",
+    "default_icon": {
+      "128": "icon.png"
+    }
+  },
+  "icons": {
+    "128": "icon.png"
+  },
+  "permissions": ["activeTab"]
+}
diff --git a/Bayes Theorem Calculator/popup.html b/Bayes Theorem Calculator/popup.html
@@ -0,0 +1,33 @@
+<!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="style.css">
+    <title>Bayes Theorem Calculator</title>
+</head>
+
+<body>
+    <div class="calculator-container">
+        <h1>Bayes Theorem Calculator</h1>
+        <div>
+            <label for="probabilityA">P(A):</label>
+            <input type="number" id="probabilityA" placeholder="Enter P(A)">
+        </div>
+        <div>
+            <label for="probabilityBGivenA">P(B|A):</label>
+            <input type="number" id="probabilityBGivenA" placeholder="Enter P(B|A)">
+        </div>
+        <div>
+            <label for="probabilityNotA">P(~A):</label>
+            <input type="number" id="probabilityNotA" placeholder="Enter P(~A)">
+        </div>
+        <button id="calculateButton">Calculate P(A|B)</button>
+        <div id="result"></div>
+    </div>
+
+    <script src="script.js"></script>
+</body>
+
+</html>
diff --git a/Bayes Theorem Calculator/script.js b/Bayes Theorem Calculator/script.js
@@ -0,0 +1,27 @@
+document.addEventListener('DOMContentLoaded', function() {
+    document.getElementById('calculateButton').addEventListener('click', calculateBayesianTheorem);
+});
+
+function calculateBayesianTheorem() {
+    // Get values from input fields
+    var probabilityA = parseFloat(document.getElementById("probabilityA").value);
+    var probabilityBGivenA = parseFloat(document.getElementById("probabilityBGivenA").value);
+    var probabilityNotA = parseFloat(document.getElementById("probabilityNotA").value);
+
+    // Validate input
+    if (
+        isNaN(probabilityA) || isNaN(probabilityBGivenA) || isNaN(probabilityNotA) ||
+        probabilityA < 0 || probabilityBGivenA < 0 || probabilityNotA < 0 ||
+        probabilityA > 1 || probabilityBGivenA > 1 || probabilityNotA > 1
+    ) {
+        alert("Please enter valid probabilities between 0 and 1.");
+        return;
+    }
+
+    // Calculate Bayesian Theorem
+    var probabilityB = (probabilityBGivenA * probabilityA) + ((1 - probabilityA) * probabilityNotA);
+    var probabilityAGivenB = (probabilityBGivenA * probabilityA) / probabilityB;
+
+    // Display the result
+    document.getElementById("result").innerHTML = "P(A|B) ≈ " + probabilityAGivenB.toFixed(4);
+}
diff --git a/Bayes Theorem Calculator/style.css b/Bayes Theorem Calculator/style.css
@@ -0,0 +1,84 @@
+body {
+    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
+    background: linear-gradient(to bottom right, #3494e6, #ec6ead);
+    margin: 0;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    height: 100vh;
+    width: 500px;
+}
+
+.calculator-container {
+    background-color: #fff;
+    padding: 30px;
+    border-radius: 12px;
+    box-shadow: 0 0 20px rgba(0, 0, 0, 0.2);
+    text-align: center;
+    animation: fadeInUp 0.8s ease-out;
+}
+
+button {
+    background-color: #4caf50;
+    color: #fff;
+    padding: 15px 30px;
+    border: none;
+    border-radius: 6px;
+    cursor: pointer;
+    font-size: 18px;
+    margin-top: 20px;
+    transition: background-color 0.3s ease, transform 0.2s ease-out;
+}
+
+button:hover {
+    background-color: #45a049;
+    transform: scale(1.05);
+}
+
+input {
+    padding: 15px;
+    margin: 15px 0;
+    width: 80%;
+    box-sizing: border-box;
+    font-size: 18px;
+    border: 1px solid #ccc;
+    border-radius: 6px;
+    transition: border-color 0.3s ease, transform 0.2s ease-out;
+}
+
+input:focus {
+    outline: none;
+    border-color: #4caf50;
+    transform: scale(1.02);
+}
+
+#result {
+    font-size: 20px;
+    font-weight: bold;
+    color: #333;
+    margin-top: 20px;
+    animation: fadeIn 1s ease-out;
+}
+
+/* Animations */
+@keyframes fadeInUp {
+    from {
+        opacity: 0;
+        transform: translateY(20px);
+    }
+
+    to {
+        opacity: 1;
+        transform: translateY(0);
+    }
+}
+
+@keyframes fadeIn {
+    from {
+        opacity: 0;
+    }
+
+    to {
+        opacity: 1;
+    }
+}