Added PH Calculator (#1640)

Rakesh9100 · Jul 14, 2024 · 5173d00 · 5173d00
1 parent 3d6d2b9
commit 5173d00
Show file tree

Hide file tree

Showing 5 changed files with 181 additions and 0 deletions.
diff --git a/Calculators/PH-Calculator/README.md b/Calculators/PH-Calculator/README.md
@@ -0,0 +1,19 @@
+# <p align="center">PH Calculator</p>
+
+## Description :-
+
+In the pH calculator, you can determine the pH of a solution in a few ways. It can convert pH to H+, as well as calculate pH from the ionization constant and concentration.
+
+## Tech Stacks :-
+
+- HTML
+- CSS
+- JavaScript
+
+## Features :-
+
+With this pH calculator, you can determine the pH of a solution in a few ways. It can convert pH to H+, as well as calculate pH from the ionization constant and concentration. The pH value is an essential factor in chemistry, medicine, and daily life.
+
+## Screenshots :-
+
+![image](https://github.com/user-attachments/assets/d9e0f492-8a9e-4530-bb54-2e0a589c24c2)
diff --git a/Calculators/PH-Calculator/index.html b/Calculators/PH-Calculator/index.html
@@ -0,0 +1,38 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <link rel="stylesheet" href="style.css">
+    <title>PH Calculator</title>
+</head>
+<body>
+    <div class="container">
+        <h1>pH Calculator</h1>
+        <form id="phForm">
+            <label for="calculationType">I want to calculate the pH from the concentration of an acid</label>
+            <label for="acidType">Acid</label>
+            <select id="acidType" required>
+                <option value="HCl">Hydrochloric acid - HCl</option>
+                <option value="HCN">Hydrocyanic acid - HCN</option>
+                <option value="H₂CO₃">Carbonic acid - H₂CO₃</option>
+                <option value="CH₃COOH">Acetic acid - CH₃COOH</option>
+                <option value="H₂SO₄">Sulfuric acid - H₂SO₄</option>
+            </select>
+            <div id="concentrationInput">
+                <label for="concentration">Concentration (M)</label>
+                <input type="number" id="concentration" step="any" required>
+            </div>
+            <button type="submit">Calculate pH</button>
+        </form>
+        <div id="result" class="result">
+            <h2>Result</h2>
+            <label for="phValue">pH</label>
+            <input type="text" id="phValue" readonly>
+            <label for="hIonConcentration">[H<sup>+</sup>] (M)</label>
+            <input type="text" id="hIonConcentration" readonly>
+        </div>
+    </div>
+    <script src="script.js"></script>
+</body>
+</html>
diff --git a/Calculators/PH-Calculator/script.js b/Calculators/PH-Calculator/script.js
@@ -0,0 +1,29 @@
+document.getElementById('phForm').addEventListener('submit', function(event) {
+    event.preventDefault();
+
+    const acidType = document.getElementById('acidType').value;
+    let concentration = parseFloat(document.getElementById('concentration').value);
+
+    let pH;
+    let hIonConcentration;
+
+    const acidDissociationConstants = {
+        'HCl': Infinity,       // Strong acid
+        'HCN': 4.9e-10,        // Weak acid
+        'H₂CO₃': 4.3e-7,      // Weak acid
+        'CH₃COOH': 1.8e-5,     // Weak acid
+        'H₂SO₄': Infinity      // Strong acid (consider first dissociation step)
+    };
+
+    const ka = acidDissociationConstants[acidType];
+
+    if (ka === Infinity) {
+        hIonConcentration = concentration;
+    } else {
+        hIonConcentration = Math.sqrt(ka * concentration);
+    }
+    pH = -Math.log10(hIonConcentration);
+
+    document.getElementById('phValue').value = pH.toFixed(5);
+    document.getElementById('hIonConcentration').value = hIonConcentration.toFixed(5);
+});
diff --git a/Calculators/PH-Calculator/style.css b/Calculators/PH-Calculator/style.css
@@ -0,0 +1,81 @@
+body {
+    font-family: 'Arial', sans-serif;
+    background-color: #e0f7fa;
+    margin: 0;
+    padding: 80px;
+    background: rgb(12,4,156);
+    background: radial-gradient(circle, rgba(12,4,156,0.5242165242165242) 0%, rgba(224,247,250,1) 35%, rgba(0,212,255,0.45868945868945865) 100%);
+}
+
+.container {
+    max-width: 600px; /* Increased from 500px to 600px */
+    margin: auto;
+    padding: 40px; /* Increased padding for more space */
+    background: #ffffff;
+    border-radius: 10px;
+    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1);
+    transition: transform 0.3s;
+}
+
+.container:hover {
+    transform: scale(1.02);
+}
+
+h1 {
+    text-align: center;
+    color: #00796b;
+    margin-bottom: 20px;
+}
+
+form {
+    display: flex;
+    flex-direction: column;
+}
+
+label {
+    margin-bottom: 5px;
+    font-weight: bold;
+    color: #00796b;
+}
+
+input[type="number"],
+select {
+    padding: 12px;
+    margin-bottom: 15px;
+    border: 2px solid #00796b;
+    border-radius: 5px;
+    transition: border-color 0.3s;
+}
+
+input[type="number"]:focus,
+select:focus {
+    border-color: #004d40;
+    outline: none;
+}
+
+button {
+    padding: 12px;
+    background-color: #00796b;
+    color: white;
+    border: none;
+    border-radius: 5px;
+    cursor: pointer;
+    transition: background-color 0.3s;
+}
+
+button:hover {
+    background-color: #004d40;
+}
+
+.result {
+    margin-top: 20px;
+    padding: 15px;
+    background-color: #f1f8e9;
+    border-radius: 5px;
+    border: 1px solid #c8e6c9;
+}
+
+input[readonly] {
+    background-color: #f9fbe7;
+    border: 1px solid #c0ca33;
+}
diff --git a/index.html b/index.html
@@ -3002,6 +3002,20 @@ <h3>Calculates voltage, current, resistance, and power in watts for an electrica
                 </div>
             </div>
         </div>
+        <div class="box">
+            <div class="content">
+                <h2>PH Calculator</h2>
+                <h3>Calculates the pH of either an acid or base solution when given a certain set of parameters.</h3>
+                <div class="card-footer">
+                    <a href="./Calculators/PH-Calculator/index.html" target="_blank">
+                        <button>Try Now</button>
+                    </a>
+                    <a href="https://github.com/Rakesh9100/CalcDiverse/tree/main/Calculators/PH-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>PPM Calculator</h2>