Added PPM (Parts Per Million) Calculator (#1394)

Rakesh9100 · Jun 27, 2024 · d372cca · d372cca
1 parent 430c816
commit d372cca
Show file tree

Hide file tree

Showing 5 changed files with 152 additions and 0 deletions.
diff --git a/Calculators/PPM-Calculator/Readme.md 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
@@ -0,0 +1,27 @@
+<!DOCTYPE html><html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>PPM Calculator</title>
+    <link rel="stylesheet" href="styles.css" />
+    <link
+      rel="stylesheet"
+      href="https://fonts.googleapis.com/css2?family=Roboto:wght@400;500;700&display=swap" />
+  </head>
+  <body>
+    <div class="container">
+      <h1>PPM Calculator</h1>
+      <form id="ppmForm">
+        <label for="solute">Solute (mg):</label>
+        <input type="number" id="solute" required />
+
+        <label for="solution">Solution (L):</label>
+        <input type="number" id="solution" required />
+
+        <button type="submit">Calculate PPM</button>
+      </form>
+      <p id="result"></p>
+    </div>
+    <script src="script.js"></script>
+  </body>
+</html>
diff --git a/Calculators/PPM-Calculator/script.js 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
@@ -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
@@ -2682,6 +2682,20 @@ <h3>Calculates power between different units.</h3>
                 </div>
             </div>
         </div>
+        <div class="box">
+            <div class="content">
+                <h2>PPM Calculator</h2>
+                <h3>Determining the concentration of substances in various solutions.</h3>
+                <div class="card-footer">
+                    <a href="./Calculators/PPM-Calculator/index.html" target="_blank">
+                        <button>Try Now</button>
+                    </a>
+                    <a href="https://github.com/Rakesh9100/CalcDiverse/tree/main/Calculators/PPM-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>Prayer Time Calculator</h2>