Added Air Fuel Ratio (AFR) Calculator (#1883)

Rakesh9100 · Dec 8, 2024 · ce917dc · ce917dc
1 parent 0aab856
commit ce917dc
Show file tree

Hide file tree

Showing 5 changed files with 465 additions and 0 deletions.
diff --git a/Calculators/Air-Fuel-Ratio-Calculator/README.md b/Calculators/Air-Fuel-Ratio-Calculator/README.md
@@ -0,0 +1,81 @@
+# <p align="center">Air Fuel Ratio Calculator</p>
+
+## Description :-
+
+The **Air Fuel Ratio Calculator (AFR)** is a single-page web application designed to calculate and explore air-fuel ratios (AFR) for various fuel types. This tool provides an intuitive and visually appealing interface to help users calculate AFRs based on input data and compare their custom results with standard AFR values for 30 fuels.
+
+## Tech Stacks :-
+
+- HTML
+- CSS
+- JavaScript
+
+## Features :-
+
+### HTML Structure:
+
+- **Single-Page Application:** All functionalities are integrated into one cohesive page.
+  #### **User Inputs:**
+  - Input fields for the mass of air and fuel.
+  - A fuel selection dropdown menu with dynamic search functionality.
+  - **Unit Conversion:** Allows mass input in grams, kilograms, and pounds, with seamless conversion.
+
+### JavaScript Functionality:
+
+- **Fuel Database:** Includes a comprehensive list of 30 fuels, each with its standard AFR value for easy comparison.
+- **Key Functions:**
+  1. **`calculateAFR()`**: Computes the air-fuel ratio based on user-provided values for air and fuel masses.
+  2. **`showFuelAFR()`**: Displays the standard AFR value for the selected fuel.
+  3. **`enableSearch()`**: Enables dynamic search functionality within the fuel dropdown for quick and easy navigation.
+- **Interactive Design:** Ensures responsive updates when users modify inputs or change fuel selections.
+
+### CSS Styling:
+
+- **Modern Aesthetic:**
+- **Typography:** Uses the clean and legible *Poppins* font.
+- **Color Scheme:** Features a green color theme with hover and focus effects for an engaging user experience.
+  #### **Responsive Layout:**
+  - Adapts to different screen sizes, including desktops, tablets, and mobile devices.
+  - Utilizes media queries for enhanced usability on smaller screens.
+  #### **Visual Enhancements:**
+  - Gradient backgrounds for a professional look.
+  - Smooth transitions and interactive elements for a polished user interface.
+
+### User Interactions:
+
+- **Mass Unit Conversion:** Users can input air and fuel masses in grams, kilograms, or pounds, and the app will handle conversions automatically.
+- **Custom AFR Calculations:** Input your own air and fuel values to calculate and display custom AFRs.
+- **Fuel Browser with Search:** Browse through a dropdown of 30 different fuels and filter results dynamically using the search bar.
+- **Standard AFR Reference:** View and compare standard AFR values for each fuel type directly in the interface.
+
+## How to Use :-
+
+1. **Launch the Application:** Open the `index.html` file in a modern web browser.
+
+2. **Input Mass Values:**
+- Enter the mass of air and fuel in the respective input fields.
+- Select the appropriate unit (grams, kilograms, pounds).
+
+3. **Choose a Fuel Type:**
+- Browse through the fuel dropdown or use the search bar to quickly find a specific fuel.
+
+4. **Calculate AFR:**
+- Click the "Calculate" button to compute the custom AFR based on your input values.
+- The result will be displayed on the screen.
+
+5. **Compare Standard AFR:**
+- Once a fuel is selected, its standard AFR value will be displayed for easy comparison.
+
+6. **Explore Features:**
+- Experiment with different inputs and observe the interactive elements, hover effects, and transitions.
+
+## Future Enhancements :-
+
+- **Additional Fuels:** Expand the database to include more fuel types.
+- **Data Persistence:** Enable saving and loading of custom AFR calculations.
+- **Graphical Representations:** Add charts or graphs to visualize AFR data trends.
+- **Enhanced Responsiveness:** Further optimize layout and performance for diverse screen sizes.
+
+## Screenshots :-
+
+![image](https://github.com/user-attachments/assets/5d73540b-c283-40ae-aeec-2cd366651b81)
diff --git a/Calculators/Air-Fuel-Ratio-Calculator/index.html b/Calculators/Air-Fuel-Ratio-Calculator/index.html
@@ -0,0 +1,43 @@
+<!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>Air Fuel Ratio Calculator</title>
+</head>
+<body>
+    <div class="afr-calculator">
+        <div class="display">
+            <div class="input-section">
+                <label for="massOfAir">Mass of Air:</label>
+                <input type="number" id="massOfAir" placeholder="Enter mass (e.g., grams)">
+                <select id="airUnit">
+                    <option value="1">grams</option>
+                    <option value="1000">kilograms</option>
+                    <option value="453.592">pounds</option>
+                </select>
+            </div>
+            <div class="input-section">
+                <label for="massOfFuel">Mass of Fuel:</label>
+                <input type="number" id="massOfFuel" placeholder="Enter mass (e.g., grams)">
+                <select id="fuelUnit">
+                    <option value="1">grams</option>
+                    <option value="1000">kilograms</option>
+                    <option value="453.592">pounds</option>
+                </select>
+            </div>
+            <button class="btn" onclick="calculateAFR()">Calculate AFR</button>
+            <div id="resultDisplay">AFR Ratio: 0</div>
+            <div class="input-section">
+                <label for="fuelDropdown">Select Fuel:</label>
+                <input type="text" id="fuelSearch" placeholder="Type or select fuel...">
+                <select id="fuelDropdown" size="5"></select>
+                <div id="selectedAFR">AFR: </div>
+            </div>
+            <button class="btn" onclick="showFuelAFR()">Show AFR</button>
+        </div>
+    </div>
+    <script src="script.js"></script>
+</body>
+</html>
diff --git a/Calculators/Air-Fuel-Ratio-Calculator/script.js b/Calculators/Air-Fuel-Ratio-Calculator/script.js
@@ -0,0 +1,170 @@
+const fuels = [{
+        name: "Gasoline",
+        afr: "14.7"
+    },
+    {
+        name: "Diesel",
+        afr: "14.6"
+    },
+    {
+        name: "Ethanol (E100)",
+        afr: "9.0"
+    },
+    {
+        name: "Methanol",
+        afr: "6.4"
+    },
+    {
+        name: "Propane",
+        afr: "15.7"
+    },
+    {
+        name: "Natural Gas (Methane)",
+        afr: "17.2"
+    },
+    {
+        name: "Hydrogen",
+        afr: "34.3"
+    },
+    {
+        name: "E85",
+        afr: "10.0"
+    },
+    {
+        name: "Butane",
+        afr: "15.4"
+    },
+    {
+        name: "Acetylene",
+        afr: "13.2"
+    },
+    {
+        name: "Toluene",
+        afr: "13.5"
+    },
+    {
+        name: "Benzene",
+        afr: "13.7"
+    },
+    {
+        name: "Kerosene",
+        afr: "15.0"
+    },
+    {
+        name: "Jet Fuel (JP-8)",
+        afr: "15.5"
+    },
+    {
+        name: "Biodiesel",
+        afr: "13.8"
+    },
+    {
+        name: "Dimethyl Ether",
+        afr: "9.0"
+    },
+    {
+        name: "LPG",
+        afr: "15.5"
+    },
+    {
+        name: "Naphtha",
+        afr: "15.2"
+    },
+    {
+        name: "Ethylene",
+        afr: "15.5"
+    },
+    {
+        name: "Ammonia",
+        afr: "6.1"
+    },
+    {
+        name: "Coal Gas",
+        afr: "16.0"
+    },
+    {
+        name: "Wood Gas",
+        afr: "10.0"
+    },
+    {
+        name: "Pyrolysis Oil",
+        afr: "9.5"
+    },
+    {
+        name: "Biogas",
+        afr: "10.0"
+    },
+    {
+        name: "Fischer-Tropsch Diesel",
+        afr: "14.8"
+    },
+    {
+        name: "Butanol",
+        afr: "11.2"
+    },
+    {
+        name: "Iso-Octane",
+        afr: "14.8"
+    },
+    {
+        name: "Dimethyl Carbonate",
+        afr: "11.0"
+    },
+    {
+        name: "Formic Acid",
+        afr: "8.0"
+    },
+    {
+        name: "Cyclohexane",
+        afr: "15.4"
+    }
+];
+
+function populateFuelDropdown() {
+    const dropdown = document.getElementById("fuelDropdown");
+    fuels.forEach(fuel => {
+        const option = document.createElement("option");
+        option.value = fuel.name;
+        option.textContent = fuel.name;
+        dropdown.appendChild(option);
+    });
+}
+
+function calculateAFR() {
+    const airMass = parseFloat(document.getElementById("massOfAir").value);
+    const airUnit = parseFloat(document.getElementById("airUnit").value);
+    const fuelMass = parseFloat(document.getElementById("massOfFuel").value);
+    const fuelUnit = parseFloat(document.getElementById("fuelUnit").value);
+
+    if (!airMass || !fuelMass) {
+        alert("Please enter valid masses for air and fuel!");
+        return;
+    }
+
+    const adjustedAirMass = airMass * airUnit; // Convert air mass to grams
+    const adjustedFuelMass = fuelMass * fuelUnit; // Convert fuel mass to grams
+    const afr = adjustedAirMass / adjustedFuelMass;
+
+    document.getElementById("resultDisplay").textContent = `AFR Ratio: ${afr.toFixed(2)}`;
+}
+
+function showFuelAFR() {
+    const selectedFuel = document.getElementById("fuelDropdown").value;
+    const fuelAFR = fuels.find(fuel => fuel.name === selectedFuel)?.afr;
+    document.getElementById("selectedAFR").textContent = `AFR (Selected Fuel): ${fuelAFR || "Unknown"}`;
+}
+
+function enableSearch() {
+    const input = document.getElementById("fuelSearch");
+    const dropdown = document.getElementById("fuelDropdown");
+    input.addEventListener("input", () => {
+        const filter = input.value.toLowerCase();
+        const options = Array.from(dropdown.options);
+        options.forEach(option => {
+            option.style.display = option.value.toLowerCase().includes(filter) ? "" : "none";
+        });
+    });
+}
+
+populateFuelDropdown();
+enableSearch();