Added Entropy Calculator (#1265)

Rakesh9100 · Jun 11, 2024 · 6065e00 · 6065e00
1 parent ec835f6
commit 6065e00
Show file tree

Hide file tree

Showing 5 changed files with 304 additions and 0 deletions.
diff --git a/Calculators/Entropy-Calculator/README.md b/Calculators/Entropy-Calculator/README.md
@@ -0,0 +1,34 @@
+# <p align="center">Entropy Calculator</p>
+
+## Description :-
+
+This web application provides a user-friendly interface to explore the concept of entropy, allowing users to calculate the entropy of a set of probabilities.
+
+## Tech Stacks :-
+
+- HTML
+- CSS
+- JavaScript
+
+## Features :-
+
+- **Dynamic Input Fields:**  The calculator dynamically generates input fields for probabilities based on the number specified by the user.
+- **Entropy Calculation:**  It accurately calculates the Shannon entropy of the provided probability distribution.
+- **User-Friendly Interface:**  A visually appealing and interactive interface with clear instructions and error handling.
+- **Engaging Animation:**  A subtle, animated background element adds visual interest to the user experience.
+- **Responsive Design:**  The layout adapts to different screen sizes, ensuring readability on various devices.
+- **Informative Explanation:**  Provides a detailed explanation of entropy and its relevance in information theory and probability.
+
+## How to Use :-
+
+1. **Specify Number of Probabilities:** Enter the desired number of probabilities in the "Number of Probabilities" input field.
+2. **Enter Probabilities:** Input the probability values for each event, making sure they are between 0 and 1.
+3. **Calculate Entropy:** Click the "Calculate Entropy" button to compute the entropy of the distribution.
+4. **View Results:**  The calculated entropy will be displayed in bits.
+5. **Explore Entropy:** Adjust the number of probabilities and their values to observe how the entropy changes.
+
+## Screenshots :-
+
+![image](https://github.com/Rakesh9100/CalcDiverse/assets/73993775/71e7c129-18c2-4ed4-b1c8-dc295972d7b0)
+
+![image](https://github.com/Rakesh9100/CalcDiverse/assets/73993775/8c9d0497-aa15-42b6-8c2d-cfd3a8c5c50c)
diff --git a/Calculators/Entropy-Calculator/index.html b/Calculators/Entropy-Calculator/index.html
@@ -0,0 +1,35 @@
+<!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>Entropy Calculator</title>
+</head>
+
+<body>
+    <div class="container">
+        <h1>Entropy Calculator</h1>
+        <div class="input-group">
+            <label for="numInputs">Number of Probabilities:</label>
+            <input type="number" id="numInputs" min="1" value="1">
+        </div>
+        <div id="probabilityInputs"></div>
+        <button onclick="calculateEntropy()">Calculate Entropy</button>
+        <div id="result"></div>
+        <div class="explanation">
+            <p>Entropy is a fundamental concept in information theory and probability. It quantifies the uncertainty or randomness inherent in a set of events. A higher entropy value indicates greater unpredictability.</p>
+            <p>This calculator allows you to explore the concept of entropy by providing probabilities for various events. The output is expressed in bits, representing the average amount of information gained by observing an event.</p>
+            <p>Try adjusting the number of probabilities and the values themselves to see how the entropy changes. It's a fascinating journey into the world of randomness!</p>
+        </div>
+        <div class="animation-container">
+            <div class="animation-circle"></div>
+        </div>
+    </div>
+
+    <script src="./script.js"></script>
+
+</body>
+
+</html>
diff --git a/Calculators/Entropy-Calculator/script.js b/Calculators/Entropy-Calculator/script.js
@@ -0,0 +1,55 @@
+const probabilityInputsContainer = document.getElementById("probabilityInputs");
+
+function generateProbabilityInputs(numInputs) {
+    probabilityInputsContainer.innerHTML = '';
+
+    for (let i = 1; i <= numInputs; i++) {
+        const inputGroup = document.createElement("div");
+        inputGroup.classList.add("input-group");
+
+        const label = document.createElement("label");
+        label.textContent = `Probability ${i}:`;
+
+        const input = document.createElement("input");
+        input.type = "text";
+        input.placeholder = "Enter probability (between 0 and 1)";
+        input.id = `probability${i}`;
+
+        inputGroup.appendChild(label);
+        inputGroup.appendChild(input);
+        probabilityInputsContainer.appendChild(inputGroup);
+    }
+}
+
+function calculateEntropy() {
+    const numInputs = parseInt(document.getElementById("numInputs").value);
+    const probabilities = [];
+
+    for (let i = 1; i <= numInputs; i++) {
+        const inputValue = document.getElementById(`probability${i}`).value;
+        const probability = parseFloat(inputValue);
+
+        if (!isNaN(probability) && probability >= 0 && probability <= 1) {
+            probabilities.push(probability);
+        } else {
+            alert(`Please enter a valid probability between 0 and 1 for input ${i}`);
+            return;
+        }
+    }
+
+    let entropy = 0;
+    for (let probability of probabilities) {
+        if (probability > 0) {
+            entropy -= probability * Math.log2(probability);
+        }
+    }
+
+    document.getElementById("result").innerHTML = `Entropy: ${entropy.toFixed(3)} bits`;
+}
+
+document.getElementById("numInputs").addEventListener("change", () => {
+    const numInputs = parseInt(document.getElementById("numInputs").value);
+    generateProbabilityInputs(numInputs);
+});
+
+generateProbabilityInputs(1);
diff --git a/Calculators/Entropy-Calculator/style.css b/Calculators/Entropy-Calculator/style.css
@@ -0,0 +1,166 @@
+body {
+    font-family: 'Arial', sans-serif;
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    justify-content: center;
+    min-height: 100vh;
+    background: linear-gradient(to right, #ff5733, #ff8c00, #ffd700);
+    color: #333;
+    overflow: auto;
+}
+
+.container {
+    background-color: #ffffff41;
+    padding: 60px 80px;
+    border-radius: 20px;
+    box-shadow: 0 10px 20px rgba(0, 0, 0, 0.3);
+    text-align: center;
+    width: 600px;
+    max-width: 90%;
+    position: relative;
+    overflow: auto;
+}
+
+h1 {
+    color: #333;
+    margin-bottom: 30px;
+    font-size: 3em;
+    text-shadow: 0 3px 6px rgba(0, 0, 0, 0.2);
+    text-align: center;
+    font-weight: bold;
+    letter-spacing: 2px;
+}
+
+.input-group {
+    display: flex;
+    flex-direction: column;
+    margin-bottom: 20px;
+}
+
+.input-group label {
+    margin-bottom: 5px;
+    font-weight: bold;
+    font-size: 1.2em;
+}
+
+input[type="number"],
+input[type="text"] {
+    width: calc(100% - 22px);
+    padding: 15px;
+    margin: 10px 0;
+    border: 1px solid #ccc;
+    border-radius: 8px;
+    box-sizing: border-box;
+    font-size: 18px;
+    transition: border-color 0.3s ease;
+}
+
+input[type="number"]:focus,
+input[type="text"]:focus {
+    outline: none;
+    border-color: #007bff;
+    box-shadow: 0 0 5px #007bff;
+}
+
+button {
+    background-color: #007bff;
+    color: white;
+    padding: 15px 30px;
+    border: none;
+    border-radius: 8px;
+    cursor: pointer;
+    font-size: 18px;
+    font-weight: bold;
+    transition: background-color 0.3s ease, transform 0.1s ease;
+    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
+}
+
+button:hover {
+    background-color: #0056b3;
+    transform: translateY(-3px);
+    box-shadow: 0 6px 12px rgba(0, 0, 0, 0.2);
+}
+
+#result {
+    margin-top: 40px;
+    font-size: 2.2em;
+    font-weight: bold;
+    color: #28a745;
+    text-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
+    animation: blink 1.2s infinite;
+}
+
+@keyframes blink {
+    0% {
+        opacity: 1;
+    }
+
+    50% {
+        opacity: 0.7;
+    }
+
+    100% {
+        opacity: 1;
+    }
+}
+
+.explanation {
+    margin-top: 30px;
+    font-size: 1.1em;
+    color: #6c757d;
+    line-height: 1.6;
+}
+
+.animation-container {
+    position: absolute;
+    top: 50%;
+    left: 50%;
+    transform: translate(-50%, -50%);
+    width: 100%;
+    height: 100%;
+    pointer-events: none;
+    z-index: -1;
+}
+
+.animation-circle {
+    position: absolute;
+    width: 150px;
+    height: 150px;
+    border-radius: 50%;
+    background-color: rgba(255, 255, 255, 0.2);
+    animation: circleAnimation 7s linear infinite;
+}
+
+@keyframes circleAnimation {
+    0% {
+        top: 50%;
+        left: 50%;
+        transform: translate(-50%, -50%);
+        opacity: 1;
+    }
+
+    100% {
+        top: 10%;
+        left: 90%;
+        transform: translate(-50%, -50%) scale(2.5);
+        opacity: 0.05;
+    }
+}
+
+/* Responsive Design (adjust for different screen sizes) */
+@media (max-width: 600px) {
+    .container {
+        width: 90%;
+        padding: 40px 20px;
+    }
+
+    h1 {
+        font-size: 2.2em;
+    }
+
+    .animation-circle {
+        width: 100px;
+        height: 100px;
+    }
+}
diff --git a/index.html b/index.html
@@ -1184,6 +1184,20 @@ <h3>Calculates Area and Perimeter for Ellipse and Hyperbola.</h3>
                 </div>
             </div>
         </div>
+        <div class="box">
+            <div class="content">
+                <h2>Entropy Calculator</h2>
+                <h3>Calculates the entropy from probabilities.</h3>
+                <div class="card-footer">
+                    <a href="./Calculators/Entropy-Calculator/index.html" target="_blank">
+                        <button>Try Now</button>
+                    </a>
+                    <a href="https://github.com/Rakesh9100/CalcDiverse/tree/main/Calculators/Entropy-Calculator" title="Source Code" target="_blank">
+                        <img src="./assets/images/github.png" alt="Source Code"></img>
+                    </a>
+                </div>
+            </div>
+        </div>
         <div class="box">
             <div class="content">
                 <h2>Environmental Calculator</h2>