Added Luminous Flux Calculator (#1764)

Rakesh9100 · Aug 3, 2024 · 681855b · 681855b
1 parent fbe8a5e
commit 681855b
Show file tree

Hide file tree

Showing 5 changed files with 152 additions and 0 deletions.
diff --git a/Calculators/Luminous-Flux-Calculator/README.md b/Calculators/Luminous-Flux-Calculator/README.md
@@ -0,0 +1,31 @@
+# <p align="center">Luminous Flux Calculator</p>
+
+## Description :-
+
+The Luminous Flux Calculator helps you determine the luminous flux, measured in lumens (lm), based on the luminous intensity and angle. Simply input the luminous intensity in candelas (cd) and the angle in degrees, and the calculator will compute the resulting luminous flux, providing a quick and easy way to understand the light output of a source.
+
+## Tech Stacks :-
+
+- HTML
+- CSS
+- JavaScript
+
+## How It Works :-
+
+The Luminous Flux Calculator uses a simple formula to compute the luminous flux. Here's a high-level overview:
+
+1. **Input Values:**
+Users enter the luminous intensity in candelas (cd) and the angle in degrees into the input fields.
+
+2. **Angle Conversion:**
+The angle is converted from degrees to radians for use in the calculation.
+
+3. **Flux Calculation:**
+The luminous flux is calculated using the formula: Φ=I⋅2π(1−cos(2/θ)), where 𝐼 is the luminous intensity and θ is the angle in radians.
+
+4. **Result Display:**
+The calculated luminous flux in lumens (lm) is displayed to the user.
+
+## Screenshots :-
+
+![image](https://github.com/user-attachments/assets/1b2d8128-8fd2-4988-9d69-cb4bf0086dc9)
diff --git a/Calculators/Luminous-Flux-Calculator/index.html b/Calculators/Luminous-Flux-Calculator/index.html
@@ -0,0 +1,23 @@
+<!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>Luminous Flux Calculator</title>
+</head>
+<body>
+    <div class="container">
+        <h1>Luminous Flux Calculator</h1>
+        <form id="flux-form">
+            <label for="intensity">Luminous Intensity (cd):</label>
+            <input type="number" id="intensity" required />
+            <label for="angle">Angle (degrees):</label>
+            <input type="number" id="angle" required />
+            <button type="submit">Calculate</button>
+        </form>
+        <div id="result" class="result"></div>
+    </div>
+    <script src="script.js"></script>
+</body>
+</html>
diff --git a/Calculators/Luminous-Flux-Calculator/script.js b/Calculators/Luminous-Flux-Calculator/script.js
@@ -0,0 +1,23 @@
+document
+    .getElementById("flux-form")
+    .addEventListener("submit", function (event) {
+        event.preventDefault();
+
+        const intensity = parseFloat(document.getElementById("intensity").value);
+        const angle = parseFloat(document.getElementById("angle").value);
+
+        if (isNaN(intensity) || isNaN(angle) || intensity <= 0 || angle <= 0 || angle > 360) {
+            alert(
+                "Please enter valid positive numbers for intensity and angle (angle should be between 0 and 360 degrees)."
+            );
+            return;
+        }
+
+        const angleInRadians = angle * (Math.PI / 180);
+        const luminousFlux =
+            intensity * (2 * Math.PI * (1 - Math.cos(angleInRadians / 2)));
+
+        document.getElementById(
+            "result"
+        ).textContent = `Luminous Flux: ${luminousFlux.toFixed(2)} lm`;
+    });
diff --git a/Calculators/Luminous-Flux-Calculator/style.css b/Calculators/Luminous-Flux-Calculator/style.css
@@ -0,0 +1,61 @@
+body {
+    font-family: Arial, sans-serif;
+    background-image: url("https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcTpC65TKDFlqY_wEhJvNmzfHSMrGNpR7pPP1w&s");
+    background-size: cover;
+    background-position: center;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    height: 100vh;
+    margin: 0;
+}
+
+.container {
+    background-color: rgba(255, 255, 255, 0.1); /* Transparent card */
+    padding: 50px;
+    border-radius: 8px;
+    box-shadow: 0 0 10px rgba(0, 0, 0, 0.7);
+    width: 300px;
+    text-align: center;
+}
+
+h1 {
+    font-size: 30px;
+    margin-bottom: 40px;
+}
+
+label {
+    display: block;
+    margin-bottom: 18px;
+    font-weight: bold;
+}
+
+input {
+    width: 100%;
+    padding: 8px;
+    margin-bottom: 16px;
+    border-radius: 4px;
+    border: 2px solid rgb(86, 86, 242);
+}
+
+button {
+    background-color: #fc1206;
+    color: white;
+    padding: 10px 20px;
+    border: none;
+    border-radius: 4px;
+    cursor: pointer;
+    transition: background-color 0.3s ease; /* Add transition */
+}
+
+button:hover {
+    background-color: #eec0f8;
+    color: black;
+    border: 2px solid rgb(9, 9, 10);
+}
+
+.result {
+    margin-top: 20px;
+    font-size: 18px;
+    font-weight: bold;
+}
diff --git a/index.html b/index.html
@@ -2969,6 +2969,20 @@ <h3>Calculates a percentage score of love compatibility based on names or birthd
                 </div>
             </div>
         </div>
+        <div class="box">
+            <div class="content">
+                <h2>Luminous Flux Calculator</h2>
+                <h3>Calculates the luminous flux in lumens based on the input luminous intensity and angle.</h3>
+                <div class="card-footer">
+                    <a href="./Calculators/Luminous-Flux-Calculator/index.html" target="_blank">
+                        <button>Try Now</button>
+                    </a>
+                    <a href="https://github.com/Rakesh9100/CalcDiverse/tree/main/Calculators/Luminous-Flux-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>Macro Nutrient Calculator</h2>