Added Gauss Law Calculator (#1761)

Rakesh9100 · Aug 3, 2024 · fbe8a5e · fbe8a5e
1 parent 5d8c363
commit fbe8a5e
Show file tree

Hide file tree

Showing 5 changed files with 198 additions and 0 deletions.
diff --git a/Calculators/Gauss-Law-Calculator/README.md b/Calculators/Gauss-Law-Calculator/README.md
@@ -0,0 +1,15 @@
+# <p align="center">Gauss Law Calculator</p>
+
+## Description :-
+
+A Gauss Law Calculator is a tool that helps compute the electric flux through a closed surface or the electric field due to a given charge distribution. It utilizes Gauss's law, which states that the net electric flux through any closed surface is proportional to the enclosed electric charge. This tool can simplify calculations involving symmetric charge distributions, such as spherical, cylindrical, or planar symmetries. It's useful for visualizing electric field lines and understanding electrostatic principles in physics.
+
+## Tech Stacks :-
+
+- HTML
+- CSS
+- JavaScript
+
+## Screenshots :-
+
+![image](https://github.com/user-attachments/assets/b68ba74b-66a7-4ea2-8cbb-8bc9edb8f721)
diff --git a/Calculators/Gauss-Law-Calculator/index.html b/Calculators/Gauss-Law-Calculator/index.html
@@ -0,0 +1,42 @@
+<!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>Gauss Law Calculator</title>
+</head>
+<body>
+    <div class="calculator">
+        <h1>Gauss Law Calculator</h1>
+        <div class="input-group">
+            <label for="charge">Electric Charge (Q):</label>
+            <div class="charge-input">
+                <input type="number" id="charge" placeholder="Enter charge" step="any">
+                <div class="custom-select">
+                    <select id="charge-unit">
+                        <option value="1e-12">pC</option>
+                        <option value="1e-9" selected>nC</option>
+                        <option value="1e-6">µC</option>
+                        <option value="1e-3">mC</option>
+                        <option value="1">C</option>
+                        <option value="1.602e-19">e</option>
+                        <option value="3600">Ah</option>
+                        <option value="3.6">mAh</option>
+                    </select>
+                </div>
+            </div>
+        </div>
+        <div class="input-group">
+            <label for="permittivity">Vacuum Permittivity (ε₀):</label>
+            <input type="text" id="permittivity" value="8.854 × 10⁻¹²" readonly>
+        </div>
+        <div class="input-group">
+            <label for="flux">Electric Flux (Φ):</label>
+            <input type="text" id="flux" placeholder="Result in V·m" readonly>
+        </div>
+        <button onclick="calculateFlux()">Calculate</button>
+    </div>
+    <script src="script.js"></script>
+</body>
+</html>
diff --git a/Calculators/Gauss-Law-Calculator/script.js b/Calculators/Gauss-Law-Calculator/script.js
@@ -0,0 +1,14 @@
+function calculateFlux() {
+    const chargeInput = document.getElementById('charge').value;
+    const chargeUnit = document.getElementById('charge-unit').value;
+    const charge = parseFloat(chargeInput) * parseFloat(chargeUnit);
+    const permittivity = 8.854e-12; // Vacuum permittivity in F/m
+
+    if (isNaN(charge)) {
+        alert('Please enter a valid charge.');
+        return;
+    }
+
+    const flux = charge / permittivity;
+    document.getElementById('flux').value = flux.toFixed(3) + ' V·m';
+}
diff --git a/Calculators/Gauss-Law-Calculator/style.css b/Calculators/Gauss-Law-Calculator/style.css
@@ -0,0 +1,113 @@
+@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@400;500;600&display=swap');
+
+body {
+    font-family: 'Poppins', sans-serif;
+    background: linear-gradient(135deg, #6200ea 0%, #481eaa 100%);
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    height: 100vh;
+    margin: 0;
+    padding: 0 20px;
+}
+
+.calculator {
+    background-color: #fff;
+    padding: 50px 40px; /* Increased padding */
+    border-radius: 20px;
+    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.1);
+    width: 100%;
+    max-width: 500px; /* Increased max-width */
+    text-align: center;
+}
+
+h1 {
+    font-size: 2.2em; /* Slightly increased font size */
+    margin-bottom: 20px;
+    color: #333;
+}
+
+.input-group {
+    margin-bottom: 20px;
+    text-align: left;
+}
+
+label {
+    display: block;
+    margin-bottom: 8px;
+    font-weight: 600;
+    color: #555;
+}
+
+.charge-input {
+    display: flex;
+    gap: 10px;
+    align-items: center;
+}
+
+input, .custom-select select {
+    width: 100%;
+    padding: 14px; /* Increased padding */
+    border: 1px solid #ddd;
+    border-radius: 8px;
+    font-size: 1em;
+    color: #333;
+    outline: none;
+    transition: border-color 0.3s, box-shadow 0.3s;
+}
+
+input:focus, .custom-select select:focus {
+    border-color: #6200ea;
+    box-shadow: 0 0 8px rgba(98, 0, 234, 0.2);
+}
+
+.custom-select {
+    position: relative;
+    width: 100%;
+}
+
+.custom-select select {
+    cursor: pointer;
+    appearance: none;
+}
+
+.custom-select::after {
+    content: '';
+    position: absolute;
+    top: 50%;
+    right: 10px;
+    width: 0;
+    height: 0;
+    border-left: 6px solid transparent;
+    border-right: 6px solid transparent;
+    border-top: 6px solid #333;
+    transform: translateY(-50%);
+    pointer-events: none;
+}
+
+button {
+    background-color: #6200ea;
+    color: white;
+    border: none;
+    padding: 15px;
+    border-radius: 8px;
+    font-size: 1.1em; /* Slightly increased font size */
+    cursor: pointer;
+    margin-top: 20px;
+    width: 100%;
+    transition: background-color 0.3s, transform 0.3s;
+}
+
+button:hover {
+    background-color: #3700b3;
+    transform: translateY(-2px);
+}
+
+button:active {
+    background-color: #3700b3;
+    transform: translateY(0);
+}
+
+input[readonly], #flux {
+    background-color: #f7f7f7;
+}
diff --git a/index.html b/index.html
@@ -2297,6 +2297,20 @@ <h3>Calculator that helps you plan your garden.</h3>
                 </div>
             </div>
         </div>
+        <div class="box">
+            <div class="content">
+                <h2>Gauss Law Calculator</h2>
+                <h3>Calculates the electric flux through a closed surface due to an enclosed electric charge.</h3>
+                <div class="card-footer">
+                    <a href="./Calculators/Gauss-Law-Calculator/index.html" target="_blank">
+                        <button>Try Now</button>
+                    </a>
+                    <a href="https://github.com/Rakesh9100/CalcDiverse/tree/main/Calculators/Gauss-Law-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>General Root Calculator</h2>