Added Critical Point Calculator (#1826)

Rakesh9100 · Aug 10, 2024 · 7feface · 7feface
1 parent 9c10f22
commit 7feface
Show file tree

Hide file tree

Showing 5 changed files with 169 additions and 1 deletion.
diff --git a/Calculators/Critical-Point-Calculator/README.md b/Calculators/Critical-Point-Calculator/README.md
@@ -0,0 +1,19 @@
+<p align="center">Critical Point Calculator</p>
+
+## Description :-
+Creating a critical point calculator for ideal gases involves calculating the critical temperature, critical pressure, and critical volume based on the Van der Waals equation of state.
+
+The critical point of an ideal gas is a set of specific thermodynamic conditions where the distinction between the gas and liquid phases disappears. At this point:
+
+Critical Temperature (Tc): This is the highest temperature at which the gas can be liquefied by applying pressure. Above this temperature, no amount of pressure can cause condensation into a liquid phase.
+
+Critical Pressure (Pc): The critical pressure is the pressure required to liquefy the gas at its critical temperature. Below this pressure, the gas cannot be liquefied by any means.
+
+Critical Volume (Vc): This is the molar volume of the gas at the critical point, where the densities of the gas and liquid phases become equal.
+
+
+## Tech Stacks :-
+
+- HTML
+- CSS
+- JavaScript
diff --git a/Calculators/Critical-Point-Calculator/index.html b/Calculators/Critical-Point-Calculator/index.html
@@ -0,0 +1,31 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Critical Point Calculator for Ideal Gases</title>
+    <link rel="stylesheet" href="style.css">
+</head>
+<body>
+    <div class="container">
+        <h1>Critical Point Calculator for Ideal Gases</h1>
+        <div class="input-group">
+            <label for="a">Parameter a (L<sup>2</sup> atm/mol<sup>2</sup>):</label>
+            <input type="number" id="a" step="any" placeholder="Enter value for a">
+        </div>
+        <div class="input-group">
+            <label for="b">Parameter b (L/mol):</label>
+            <input type="number" id="b" step="any" placeholder="Enter value for b">
+        </div>
+        <button onclick="calculateCriticalPoint()">Calculate</button>
+        <div id="results">
+            <h2>Critical Point:</h2>
+            <p>Critical Temperature (K): <span id="criticalTemperature"></span></p>
+            <p>Critical Pressure (atm): <span id="criticalPressure"></span></p>
+            <p>Critical Volume (L/mol): <span id="criticalVolume"></span></p>
+        </div>
+    </div>
+
+    <script src="script.js"></script>
+</body>
+</html>
diff --git a/Calculators/Critical-Point-Calculator/script.js b/Calculators/Critical-Point-Calculator/script.js
@@ -0,0 +1,24 @@
+function calculateCriticalPoint() {
+    const a = parseFloat(document.getElementById('a').value);
+    const b = parseFloat(document.getElementById('b').value);
+
+    if (isNaN(a) || isNaN(b)) {
+        alert('Please enter valid numbers for a and b.');
+        return;
+    }
+
+    if (a === 0 && b === 0) {
+        alert('a and b cannot both be zero. Please enter valid non-zero values.');
+        return;
+    }
+
+    // Calculate critical point
+    const criticalTemperature = (8 * a) / (27 * b);
+    const criticalPressure = (a / (27 * b * b));
+    const criticalVolume = (3 * b);
+
+    // Display results
+    document.getElementById('criticalTemperature').textContent = criticalTemperature.toFixed(2);
+    document.getElementById('criticalPressure').textContent = criticalPressure.toFixed(2);
+    document.getElementById('criticalVolume').textContent = criticalVolume.toFixed(2);
+}
diff --git a/Calculators/Critical-Point-Calculator/style.css b/Calculators/Critical-Point-Calculator/style.css
@@ -0,0 +1,81 @@
+
+body {
+    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
+    background-color: #2980b9;
+    margin: 0;
+    padding: 0;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    height: 100vh;
+}
+
+.container {
+    max-width: 400px;
+    background-color: #fff;
+    padding: 30px;
+    border-radius: 8px;
+    box-shadow: 0 0 20px rgba(0, 0, 0, 0.1);
+    text-align: center;
+}
+
+h1 {
+    color: #2980b9;
+    margin-bottom: 20px;
+}
+
+.input-group {
+    margin-bottom: 20px;
+}
+
+.input-group label {
+    display: block;
+    margin-bottom: 10px;
+    color: #555;
+}
+
+.input-group input {
+    width: calc(100% - 20px);
+    padding: 10px;
+    font-size: 16px;
+    border: 1px solid #ccc;
+    border-radius: 4px;
+    outline: none;
+}
+
+button {
+    background-color: #2ecc71;
+    color: white;
+    padding: 12px 24px;
+    border: none;
+    border-radius: 4px;
+    cursor: pointer;
+    font-size: 16px;
+    transition: background-color 0.3s ease;
+}
+
+button:hover {
+    background-color: #27ae60;
+}
+
+#results {
+    margin-top: 30px;
+    padding-top: 20px;
+    border-top: 1px solid #ccc;
+}
+
+#results h2 {
+    color: #555;
+    border-bottom: 1px solid #ccc;
+    padding-bottom: 10px;
+}
+
+#results p {
+    margin-bottom: 10px;
+    color: #777;
+}
+
+#results span {
+    font-weight: bold;
+    color: #333;
+}
diff --git a/index.html b/index.html
@@ -5605,7 +5605,20 @@ <h3>Provides the zodiac sign of the user by taking the date of birth as input.</
                 </div>
             </div>
         </div>
-
+        <div class="box">
+            <div class="content">
+                <h2>Critical Point Calculator</h2>
+                <h3>Calculates the Critical point of ideal gases based on a and b</h3>
+                <div class="card-footer">
+                    <a href="./Calculators/Critical-Point-Calculator/index.html" target="_blank">
+                        <button>Try Now</button>
+                    </a>
+                    <a href="https://github.com/Rakesh9100/CalcDiverse/tree/main/Calculators/Critical-Point-Calculator" title="Source Code" target="_blank">
+                        <img src="./assets/images/github.png" alt="Source Code"></img>
+                    </a>
+                </div>
+            </div>
+        </div>
         <br><br><br><br><br>
         <div id="noResults" style="color: white; font-weight: bold; font-size: 18px;">
             <p>No results found 🙃</p>