Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Added PPM (Parts Per Million) Calculator #1394

Merged
merged 3 commits into from
Jun 27, 2024
Merged

Added PPM (Parts Per Million) Calculator #1394

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
739d7ae
Added PPM Calculator
Dark-S8uL Jun 22, 2024
c412cb1
Rename PPM Calculator to PPM-Calculator
Dark-S8uL Jun 24, 2024
f76eecd
Updated PPM Calculator
Dark-S8uL Jun 26, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
21 changes: 21 additions & 0 deletions Calculators/PPM-Calculator/Readme.md
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -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:
27 changes: 27 additions & 0 deletions Calculators/PPM-Calculator/index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -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>
15 changes: 15 additions & 0 deletions Calculators/PPM-Calculator/script.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -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)}`;
});
75 changes: 75 additions & 0 deletions Calculators/PPM-Calculator/styles.css
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -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;
}
14 changes: 14 additions & 0 deletions index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -2500,6 +2500,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>
Expand Down