From 739d7aec7de78847d2fc3e6df70dd5c5d47fdc5e Mon Sep 17 00:00:00 2001 From: Dark-S8uL Date: Sat, 22 Jun 2024 15:35:14 +0530 Subject: [PATCH 1/3] Added PPM Calculator --- Calculators/PPM Calculator/Readme.md | 21 ++++++++++ Calculators/PPM Calculator/index.html | 25 ++++++++++++ Calculators/PPM Calculator/script.js | 15 +++++++ Calculators/PPM Calculator/styles.css | 58 +++++++++++++++++++++++++++ index.html | 14 +++++++ 5 files changed, 133 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..19bde3177 --- /dev/null +++ b/Calculators/PPM Calculator/index.html @@ -0,0 +1,25 @@ + + + + + + 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..0b6eade47 --- /dev/null +++ b/Calculators/PPM Calculator/styles.css @@ -0,0 +1,58 @@ +body { + font-family: Arial, sans-serif; + background-color: #f4f4f4; + display: flex; + justify-content: center; + align-items: center; + height: 100vh; + margin: 0; +} + +.container { + background: white; + padding: 20px; + border-radius: 8px; + box-shadow: 0 0 10px rgba(0, 0, 0, 0.1); + text-align: center; +} + +h1 { + margin-bottom: 20px; +} + +form { + display: flex; + flex-direction: column; +} + +label { + margin-top: 10px; + margin-bottom: 5px; +} + +input { + padding: 10px; + font-size: 16px; + border-radius: 4px; + border: 1px solid #ddd; +} + +button { + margin-top: 20px; + padding: 10px; + font-size: 16px; + border: none; + border-radius: 4px; + background-color: #28a745; + color: white; + cursor: pointer; +} + +button:hover { + background-color: #218838; +} + +#result { + margin-top: 20px; + font-size: 18px; +} diff --git a/index.html b/index.html index 9625821f8..d2574579e 100644 --- a/index.html +++ b/index.html @@ -2500,6 +2500,20 @@

Calculates power between different units.

+
+
+

PPM Calculator

+

Determining the concentration of substances in various solutions.

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

Prayer Time Calculator

From c412cb190de4d7c9533e7b12af1cb95e65ccebdc Mon Sep 17 00:00:00 2001 From: Dark-S8uL Date: Mon, 24 Jun 2024 10:23:16 +0530 Subject: [PATCH 2/3] Rename PPM Calculator to PPM-Calculator --- Calculators/{PPM Calculator => PPM-Calculator}/Readme.md | 0 Calculators/{PPM Calculator => PPM-Calculator}/index.html | 0 Calculators/{PPM Calculator => PPM-Calculator}/script.js | 0 Calculators/{PPM Calculator => PPM-Calculator}/styles.css | 0 4 files changed, 0 insertions(+), 0 deletions(-) rename Calculators/{PPM Calculator => PPM-Calculator}/Readme.md (100%) rename Calculators/{PPM Calculator => PPM-Calculator}/index.html (100%) rename Calculators/{PPM Calculator => PPM-Calculator}/script.js (100%) rename Calculators/{PPM Calculator => PPM-Calculator}/styles.css (100%) diff --git a/Calculators/PPM Calculator/Readme.md b/Calculators/PPM-Calculator/Readme.md similarity index 100% rename from Calculators/PPM Calculator/Readme.md rename to Calculators/PPM-Calculator/Readme.md diff --git a/Calculators/PPM Calculator/index.html b/Calculators/PPM-Calculator/index.html similarity index 100% rename from Calculators/PPM Calculator/index.html rename to Calculators/PPM-Calculator/index.html diff --git a/Calculators/PPM Calculator/script.js b/Calculators/PPM-Calculator/script.js similarity index 100% rename from Calculators/PPM Calculator/script.js rename to Calculators/PPM-Calculator/script.js diff --git a/Calculators/PPM Calculator/styles.css b/Calculators/PPM-Calculator/styles.css similarity index 100% rename from Calculators/PPM Calculator/styles.css rename to Calculators/PPM-Calculator/styles.css From f76eecd11bcac98e7218c1671c6bab245557cc4b Mon Sep 17 00:00:00 2001 From: Dark-S8uL Date: Thu, 27 Jun 2024 00:02:16 +0530 Subject: [PATCH 3/3] Updated PPM Calculator --- Calculators/PPM-Calculator/index.html | 6 ++-- Calculators/PPM-Calculator/styles.css | 43 +++++++++++++++++++-------- index.html | 4 +-- 3 files changed, 36 insertions(+), 17 deletions(-) diff --git a/Calculators/PPM-Calculator/index.html b/Calculators/PPM-Calculator/index.html index 19bde3177..59cf72f19 100644 --- a/Calculators/PPM-Calculator/index.html +++ b/Calculators/PPM-Calculator/index.html @@ -1,10 +1,12 @@ - - + PPM Calculator +
diff --git a/Calculators/PPM-Calculator/styles.css b/Calculators/PPM-Calculator/styles.css index 0b6eade47..e0f541296 100644 --- a/Calculators/PPM-Calculator/styles.css +++ b/Calculators/PPM-Calculator/styles.css @@ -1,6 +1,5 @@ -body { - font-family: Arial, sans-serif; - background-color: #f4f4f4; +body { font-family: "Roboto", sans-serif; + background: linear-gradient(to right, #00c6ff, #0072ff); display: flex; justify-content: center; align-items: center; @@ -10,14 +9,18 @@ body { .container { background: white; - padding: 20px; - border-radius: 8px; - box-shadow: 0 0 10px rgba(0, 0, 0, 0.1); + 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 { @@ -26,33 +29,47 @@ form { } label { - margin-top: 10px; + margin-top: 15px; margin-bottom: 5px; + font-weight: 500; } input { - padding: 10px; + padding: 12px; font-size: 16px; - border-radius: 4px; + border-radius: 5px; border: 1px solid #ddd; + transition: border-color 0.3s; +} + +input:focus { + border-color: #0072ff; + outline: none; } button { margin-top: 20px; - padding: 10px; + padding: 12px; font-size: 16px; border: none; - border-radius: 4px; - background-color: #28a745; + border-radius: 5px; + background-color: #0072ff; color: white; cursor: pointer; + transition: background-color 0.3s, transform 0.3s; } button:hover { - background-color: #218838; + 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 d2574579e..8a16b018b 100644 --- a/index.html +++ b/index.html @@ -2505,10 +2505,10 @@

Calculates power between different units.

PPM Calculator

Determining the concentration of substances in various solutions.

- + - + Source Code