From d372cca39bdc2542866a8e5bdd3408b3f11cfb6e Mon Sep 17 00:00:00 2001 From: Priyanshu Rathi <167284441+Dark-S8uL@users.noreply.github.com> Date: Thu, 27 Jun 2024 15:46:39 +0530 Subject: [PATCH] Added PPM (Parts Per Million) Calculator (#1394) --- Calculators/PPM-Calculator/Readme.md | 21 ++++++++ Calculators/PPM-Calculator/index.html | 27 ++++++++++ Calculators/PPM-Calculator/script.js | 15 ++++++ Calculators/PPM-Calculator/styles.css | 75 +++++++++++++++++++++++++++ index.html | 14 +++++ 5 files changed, 152 insertions(+) create mode 100644 Calculators/PPM-Calculator/Readme.md create mode 100644 Calculators/PPM-Calculator/index.html create mode 100644 Calculators/PPM-Calculator/script.js create mode 100644 Calculators/PPM-Calculator/styles.css diff --git a/Calculators/PPM-Calculator/Readme.md b/Calculators/PPM-Calculator/Readme.md new file mode 100644 index 000000000..0b43a0a6f --- /dev/null +++ b/Calculators/PPM-Calculator/Readme.md @@ -0,0 +1,21 @@ +# PPM Calculator +A simple web-based PPM (Parts Per Million) calculator. This tool allows users to calculate the concentration of a solute in a solution in parts per million (PPM). + +## Project Structure + +- `index.html`: The main HTML file containing the structure of the webpage. +- `styles.css`: The CSS file for styling the webpage. +- `script.js`: The JavaScript file containing the functionality for the calculator. +- `README.md`: This file, containing an overview of the project. + +## How to Use + +1. Open the `index.html` file in your web browser. +2. Enter the amount of solute in milligrams (mg) in the "Solute" field. +3. Enter the volume of the solution in liters (L) in the "Solution" field. +4. Click the "Calculate PPM" button. +5. The result will be displayed below the form, showing the concentration in parts per million (PPM). + +## Example + +If you enter 10 mg of solute and 2 liters of solution, the calculator will display: diff --git a/Calculators/PPM-Calculator/index.html b/Calculators/PPM-Calculator/index.html new file mode 100644 index 000000000..59cf72f19 --- /dev/null +++ b/Calculators/PPM-Calculator/index.html @@ -0,0 +1,27 @@ + + + + + PPM Calculator + + + + +
+

PPM Calculator

+
+ + + + + + + +
+

+
+ + + diff --git a/Calculators/PPM-Calculator/script.js b/Calculators/PPM-Calculator/script.js new file mode 100644 index 000000000..08c8b9327 --- /dev/null +++ b/Calculators/PPM-Calculator/script.js @@ -0,0 +1,15 @@ +document.getElementById("ppmForm").addEventListener("submit", function (e) { + e.preventDefault(); + + const solute = parseFloat(document.getElementById("solute").value); + const solution = parseFloat(document.getElementById("solution").value); + + if (isNaN(solute) || isNaN(solution) || solution === 0) { + document.getElementById("result").textContent = + "Please enter valid numbers."; + return; + } + + const ppm = (solute / solution) * 1e6; + document.getElementById("result").textContent = `PPM: ${ppm.toFixed(2)}`; +}); diff --git a/Calculators/PPM-Calculator/styles.css b/Calculators/PPM-Calculator/styles.css new file mode 100644 index 000000000..e0f541296 --- /dev/null +++ b/Calculators/PPM-Calculator/styles.css @@ -0,0 +1,75 @@ +body { font-family: "Roboto", sans-serif; + background: linear-gradient(to right, #00c6ff, #0072ff); + display: flex; + justify-content: center; + align-items: center; + height: 100vh; + margin: 0; +} + +.container { + background: white; + padding: 40px; + border-radius: 10px; + box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2); + text-align: center; + max-width: 400px; + width: 100%; +} + +h1 { + margin-bottom: 20px; + font-weight: 700; + color: #0072ff; +} + +form { + display: flex; + flex-direction: column; +} + +label { + margin-top: 15px; + margin-bottom: 5px; + font-weight: 500; +} + +input { + padding: 12px; + font-size: 16px; + border-radius: 5px; + border: 1px solid #ddd; + transition: border-color 0.3s; +} + +input:focus { + border-color: #0072ff; + outline: none; +} + +button { + margin-top: 20px; + padding: 12px; + font-size: 16px; + border: none; + border-radius: 5px; + background-color: #0072ff; + color: white; + cursor: pointer; + transition: background-color 0.3s, transform 0.3s; +} + +button:hover { + background-color: #005bb5; + transform: translateY(-2px); +} + +button:active { + transform: translateY(0); +} + +#result { + margin-top: 20px; + font-size: 18px; + color: #333; +} diff --git a/index.html b/index.html index ab85566a2..2649a3373 100644 --- a/index.html +++ b/index.html @@ -2682,6 +2682,20 @@

Calculates power between different units.

+
+
+

PPM Calculator

+

Determining the concentration of substances in various solutions.

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

Prayer Time Calculator