Added Dilution Calculator (#1962)

Rakesh9100 · Jan 3, 2025 · b782852 · b782852
1 parent 90a9812
commit b782852
Show file tree

Hide file tree

Showing 6 changed files with 205 additions and 0 deletions.
diff --git a/Calculators/Dilution-Calculator/README.md b/Calculators/Dilution-Calculator/README.md
@@ -0,0 +1,62 @@
+# <p align="center">Dilution Calculator</p>
+
+## Description :-
+
+This project is a modern, interactive web-based calculator that implements the formula for dilution:
+
+\[ C_1 \times V_1 = C_2 \times V_2 \]
+
+The calculator allows users to calculate:
+
+- Initial Concentration \( C_1 \)
+- Initial Volume \( V_1 \)
+- Final Concentration \( C_2 \)
+- Final Volume \( V_2 \)
+
+## Tech Stacks :-
+
+- HTML
+- CSS
+- JavaScript
+
+## Features :-
+
+- **Dynamic Formula Display**: The formula for dilution is prominently displayed on the website.
+- **Real-Time Results**: Automatically calculates the missing value based on user inputs.
+- **Responsive Design**: Adapts to various screen sizes for accessibility.
+- **Error Handling**: Provides feedback for invalid or incomplete inputs.
+- **Modern Aesthetic**: Includes a stylish background and intuitive layout.
+
+## How to Use :-
+
+1. Enter the known values for any three fields:
+   - Initial Concentration (\( C_1 \))
+   - Initial Volume (\( V_1 \))
+   - Final Concentration (\( C_2 \))
+   - Final Volume (\( V_2 \))
+2. Click the "Calculate" button.
+3. The missing value will be calculated using the formula:
+   \[ C_1 \times V_1 = C_2 \times V_2 \]
+4. Clear inputs or refresh the page to reset the calculator.
+
+## Example Calculations :-
+
+#### Case 1: Calculate Final Volume (\( V_2 \))
+- **Input**:
+  - Initial Concentration (\( C_1 \)): `2 mol/L`
+  - Initial Volume (\( V_1 \)): `100 mL`
+  - Final Concentration (\( C_2 \)): `1 mol/L`
+- **Output**:
+  - \( V_2 = (2 × 100) / 1 = 200 mL \)
+
+#### Case 2: Calculate Final Concentration (\( C_2 \))
+- **Input**:
+  - Initial Concentration (\( C_1 \)): `2 mol/L`
+  - Initial Volume (\( V_1 \)): `100 mL`
+  - Final Volume (\( V_2 \)): `200 mL`
+- **Output**:
+  - \( C_2 = (2 × 100) / 200 = 1 mol/L \)
+
+## Screenshots :-
+
+![image](https://github.com/user-attachments/assets/a97ddc91-06d3-412d-8ae7-901b5e744478)
diff --git a/Calculators/Dilution-Calculator/assets/background.webp b/Calculators/Dilution-Calculator/assets/background.webp
diff --git a/Calculators/Dilution-Calculator/index.html b/Calculators/Dilution-Calculator/index.html
@@ -0,0 +1,35 @@
+<!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>Dilution Calculator</title>
+</head>
+
+<body>
+    <div class="calculator">
+        <h1>Dilution Calculator</h1>
+        <p class="formula">Formula: <strong>C₁ x V₁ = C₂ x V₂</strong></p>
+
+        <label for="c1">Initial Concentration (C₁):</label>
+        <input type="number" id="c1" placeholder="Enter C₁ (e.g., mol/L)">
+
+        <label for="v1">Initial Volume (V₁):</label>
+        <input type="number" id="v1" placeholder="Enter V₁ (e.g., mL)">
+
+        <label for="c2">Final Concentration (C₂):</label>
+        <input type="number" id="c2" placeholder="Enter C₂ (e.g., mol/L)">
+
+        <label for="v2">Final Volume (V₂):</label>
+        <input type="number" id="v2" placeholder="Enter V₂ (e.g., mL)">
+
+        <button onclick="calculateDilution()">Calculate</button>
+        <div class="result" id="result"></div>
+    </div>
+
+    <script src="script.js"></script>
+</body>
+
+</html>
diff --git a/Calculators/Dilution-Calculator/script.js b/Calculators/Dilution-Calculator/script.js
@@ -0,0 +1,30 @@
+function calculateDilution() {
+    const c1 = parseFloat(document.getElementById('c1').value);
+    const v1 = parseFloat(document.getElementById('v1').value);
+    const c2 = parseFloat(document.getElementById('c2').value);
+    const v2 = parseFloat(document.getElementById('v2').value);
+
+    let resultText = "";
+
+    if (!isNaN(c1) && !isNaN(v1) && isNaN(c2) && !isNaN(v2)) {
+        // Calculate Final Concentration (C2)
+        const c2Calculated = (c1 * v1) / v2;
+        resultText = `C₂ = (${c1} x ${v1}) / ${v2} = ${c2Calculated.toFixed(2)} mol/L`;
+    } else if (!isNaN(c1) && !isNaN(v1) && !isNaN(c2) && isNaN(v2)) {
+        // Calculate Final Volume (V2)
+        const v2Calculated = (c1 * v1) / c2;
+        resultText = `V₂ = (${c1} x ${v1}) / ${c2} = ${v2Calculated.toFixed(2)} mL`;
+    } else if (!isNaN(c2) && !isNaN(v2) && isNaN(c1) && !isNaN(v1)) {
+        // Calculate Initial Concentration (C1)
+        const c1Calculated = (c2 * v2) / v1;
+        resultText = `C₁ = (${c2} x ${v2}) / ${v1} = ${c1Calculated.toFixed(2)} mol/L`;
+    } else if (!isNaN(c2) && !isNaN(v2) && !isNaN(c1) && isNaN(v1)) {
+        // Calculate Initial Volume (V1)
+        const v1Calculated = (c2 * v2) / c1;
+        resultText = `V₁ = (${c2} x ${v2}) / ${c1} = ${v1Calculated.toFixed(2)} mL`;
+    } else {
+        resultText = "Please provide valid inputs for at least three fields to calculate the missing value.";
+    }
+
+    document.getElementById('result').innerText = resultText;
+}
diff --git a/Calculators/Dilution-Calculator/style.css b/Calculators/Dilution-Calculator/style.css
@@ -0,0 +1,72 @@
+body {
+    font-family: 'Roboto', sans-serif;
+    background-image: url('assets/background.webp');
+    background-size: cover;
+    margin: 0;
+    padding: 0;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    color: #333;
+    height: 100%;
+    min-height: 100vh;
+}
+
+.calculator {
+    background: rgba(255, 255, 255, 0.95);
+    padding: 30px;
+    border-radius: 10px;
+    box-shadow: 0 8px 16px rgba(0, 0, 0, 0.2);
+    width: 400px;
+    text-align: center;
+}
+
+h1 {
+    font-size: 28px;
+    margin-bottom: 20px;
+    color: #007bff;
+}
+
+.formula {
+    font-size: 16px;
+    margin-bottom: 30px;
+    color: #555;
+}
+
+label {
+    font-size: 14px;
+    margin: 10px 0 5px;
+    display: block;
+    text-align: left;
+}
+
+input {
+    width: calc(100% - 20px);
+    padding: 10px;
+    margin-bottom: 15px;
+    font-size: 16px;
+    border: 1px solid #ccc;
+    border-radius: 5px;
+}
+
+button {
+    background-color: #007bff;
+    color: white;
+    padding: 12px 20px;
+    border: none;
+    border-radius: 5px;
+    font-size: 16px;
+    cursor: pointer;
+    width: 100%;
+}
+
+button:hover {
+    background-color: #0056b3;
+}
+
+.result {
+    margin-top: 20px;
+    font-size: 18px;
+    font-weight: bold;
+    color: #333;
+}
diff --git a/calculators.json b/calculators.json
@@ -725,6 +725,12 @@
         "link": "./Calculators/Digital-Detox-Calculator/index.html",
         "source": "https://github.com/Rakesh9100/CalcDiverse/tree/main/Calculators/Digital-Detox-Calculator"
     },
+    {
+        "title": "Dilution Calculator",
+        "description": "Calculates the final concentration or volume of a solution after dilution.",
+        "link": "./Calculators/Dilution-Calculator/index.html",
+        "source": "https://github.com/Rakesh9100/CalcDiverse/tree/main/Calculators/Dilution-Calculator"
+    },      
     {
         "title": "Disarium Number Calculator",
         "description": "Checks the number is disarium or not and finds disarium numbers in a range.",