From ce917dc6f2b7153ffadc4ccf7a6f8a50b3af293e Mon Sep 17 00:00:00 2001 From: Abhiraj Adhikary Date: Sun, 8 Dec 2024 15:36:28 +0530 Subject: [PATCH] Added Air Fuel Ratio (AFR) Calculator (#1883) --- .../Air-Fuel-Ratio-Calculator/README.md | 81 +++++++++ .../Air-Fuel-Ratio-Calculator/index.html | 43 +++++ .../Air-Fuel-Ratio-Calculator/script.js | 170 ++++++++++++++++++ .../Air-Fuel-Ratio-Calculator/style.css | 157 ++++++++++++++++ index.html | 14 ++ 5 files changed, 465 insertions(+) create mode 100644 Calculators/Air-Fuel-Ratio-Calculator/README.md create mode 100644 Calculators/Air-Fuel-Ratio-Calculator/index.html create mode 100644 Calculators/Air-Fuel-Ratio-Calculator/script.js create mode 100644 Calculators/Air-Fuel-Ratio-Calculator/style.css diff --git a/Calculators/Air-Fuel-Ratio-Calculator/README.md b/Calculators/Air-Fuel-Ratio-Calculator/README.md new file mode 100644 index 000000000..631c822fa --- /dev/null +++ b/Calculators/Air-Fuel-Ratio-Calculator/README.md @@ -0,0 +1,81 @@ +#

Air Fuel Ratio Calculator

+ +## 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 new file mode 100644 index 000000000..e11efb059 --- /dev/null +++ b/Calculators/Air-Fuel-Ratio-Calculator/index.html @@ -0,0 +1,43 @@ + + + + + + + Air Fuel Ratio Calculator + + +
+
+
+ + + +
+
+ + + +
+ +
AFR Ratio: 0
+
+ + + +
AFR:
+
+ +
+
+ + + diff --git a/Calculators/Air-Fuel-Ratio-Calculator/script.js b/Calculators/Air-Fuel-Ratio-Calculator/script.js new file mode 100644 index 000000000..d83fea388 --- /dev/null +++ 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(); diff --git a/Calculators/Air-Fuel-Ratio-Calculator/style.css b/Calculators/Air-Fuel-Ratio-Calculator/style.css new file mode 100644 index 000000000..e023137b8 --- /dev/null +++ b/Calculators/Air-Fuel-Ratio-Calculator/style.css @@ -0,0 +1,157 @@ +@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600;700&display=swap'); + +* { + margin: 0; + padding: 0; + box-sizing: border-box; + transition: all 0.3s ease; +} + +body { + font-family: 'Poppins', sans-serif; + background: linear-gradient(135deg, #f6f8f9 0%, #e5ebee 100%); + display: flex; + justify-content: center; + align-items: center; + min-height: 100vh; + padding: 20px; + line-height: 1.6; +} + +.afr-calculator { + width: 400px; + background: white; + border-radius: 25px; + box-shadow: + 0 15px 35px rgba(0, 0, 0, 0.05), + 0 10px 20px rgba(0, 0, 0, 0.05); + padding: 30px; + transform: perspective(1000px) rotateX(-10deg); + opacity: 0.95; +} + +.display { + background: linear-gradient(145deg, #f0f5f0 0%, #e6f1e6 100%); + border-radius: 20px; + padding: 25px; + box-shadow: + inset 5px 5px 10px #d1e0d1, + inset -5px -5px 10px #ffffff; +} + +.input-section { + margin-bottom: 20px; +} + +label { + font-weight: 500; + color: #2c3e50; + margin-bottom: 8px; + display: block; + font-size: 0.9em; +} + +input, +select { + width: 100%; + padding: 12px 15px; + border: 2px solid #e0e6ed; + border-radius: 15px; + font-family: 'Poppins', sans-serif; + font-size: 0.95em; + background: #f9fbfc; + color: #2c3e50; + outline: none; + transition: all 0.3s ease; +} + +input:focus, +select:focus { + border-color: #4CAF50; + box-shadow: 0 0 0 3px rgba(76, 175, 80, 0.2); +} + +input::placeholder { + color: #a0aec0; + font-weight: 300; +} + +#fuelDropdown { + max-height: 200px; + overflow-y: auto; + border-radius: 15px; + scrollbar-width: thin; + scrollbar-color: #4CAF50 #e0e6ed; +} + +#fuelDropdown::-webkit-scrollbar { + width: 8px; +} + +#fuelDropdown::-webkit-scrollbar-track { + background: #e0e6ed; + border-radius: 10px; +} + +#fuelDropdown::-webkit-scrollbar-thumb { + background-color: #4CAF50; + border-radius: 10px; +} + +#fuelDropdown option { + padding: 10px; + font-family: 'Poppins', sans-serif; +} + +.btn { + width: 100%; + padding: 15px; + border: none; + border-radius: 20px; + background: linear-gradient(135deg, #4CAF50 0%, #45a049 100%); + color: white; + font-family: 'Poppins', sans-serif; + font-weight: 600; + font-size: 1em; + letter-spacing: 0.5px; + cursor: pointer; + box-shadow: 0 10px 20px rgba(76, 175, 80, 0.3); + transform: translateY(0); +} + +.btn:hover { + transform: translateY(-3px); + box-shadow: 0 15px 25px rgba(76, 175, 80, 0.4); +} + +.btn:active { + transform: translateY(1px); + box-shadow: 0 5px 10px rgba(76, 175, 80, 0.2); +} + +#resultDisplay, +#selectedAFR { + text-align: center; + font-weight: 600; + color: #2c3e50; + padding: 15px; + background: rgba(76, 175, 80, 0.1); + border-radius: 15px; +} + +#resultDisplay { + font-size: 1.3em; +} + +#selectedAFR { + font-size: 1em; + color: #4CAF50; +} + +@media (max-width: 480px) { + .afr-calculator { + width: 95%; + padding: 20px; + transform: none; + } +} diff --git a/index.html b/index.html index 3c410d2ed..d124de3d6 100644 --- a/index.html +++ b/index.html @@ -308,6 +308,20 @@

Calculates the person's age by taking in the date of birth as input.

+
+
+

Air Fuel Ratio Calculator

+

Calculates the mass of air to fuel ratio (AFR) for any fuel.

+
+ + + + + Source Code + +
+
+

Air Quality Index Calculator