Rakesh9100 · Rakesh9100 · Aug 3, 2024 · Aug 3, 2024 · Aug 3, 2024 · Aug 3, 2024
diff --git a/Calculators/Water-Hardness-Calculator/README.md b/Calculators/Water-Hardness-Calculator/README.md
@@ -0,0 +1,15 @@
+# <p align="center">Water Hardness Calculator</p>
+
+## Description :-
+
+A calculator that helps users determine the hardness of their water supply. Water hardness is typically measured in parts per million (ppm) or grains per gallon (gpg), indicating the concentration of calcium and magnesium ions. 
+
+## Tech Stacks :-
+
+- HTML
+- CSS
+- JavaScript
+
+## Screenshots :-
+
+![image](https://github.com/user-attachments/assets/b4e9cf5a-e2e0-4672-a1b6-a71c566990fb)
diff --git a/Calculators/Water-Hardness-Calculator/index.html b/Calculators/Water-Hardness-Calculator/index.html
@@ -0,0 +1,39 @@
+<!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>Water Hardness Calculator</title>
+</head>
+<body>
+    <div class="container">
+        <h1>Water Hardness Calculator</h1>
+        <form id="hardness-form">
+            <div class="input-group">
+                <label for="calcium">Calcium (Ca<sup>2+</sup>) in mg/L:</label>
+                <input type="number" id="calcium" required>
+            </div>
+            <div class="input-group">
+                <label for="magnesium">Magnesium (Mg<sup>2+</sup>) in mg/L:</label>
+                <input type="number" id="magnesium" required>
+            </div>
+            <div class="input-group">
+                <label for="unit">Select Unit:</label>
+                <select id="unit">
+                    <option value="ppm">ppm</option>
+                    <option value="gpg">gpg</option>
+                </select>
+            </div>
+            <button type="button" onclick="calculateHardness()">Calculate Hardness</button>
+        </form>
+        <div id="results">
+            <h2>Results</h2>
+            <p id="hardness"></p>
+            <p id="category"></p>
+            <p id="safety"></p>
+        </div>
+    </div>
+    <script src="script.js"></script>
+</body>
+</html>
diff --git a/Calculators/Water-Hardness-Calculator/script.js b/Calculators/Water-Hardness-Calculator/script.js
@@ -0,0 +1,65 @@
+function calculateHardness() {
+    // Get input values
+    const calciumInput = document.getElementById('calcium');
+    const magnesiumInput = document.getElementById('magnesium');
+    const calcium = parseFloat(calciumInput.value);
+    const magnesium = parseFloat(magnesiumInput.value);
+    const unit = document.getElementById('unit').value;
+
+    // Validate input fields
+    let isValid = true;
+    let errorMessage = '';
+
+    if (isNaN(calcium) || calcium < 0) {
+        isValid = false;
+        errorMessage += 'Please enter a valid number for Calcium.\n';
+        calciumInput.classList.add('error');
+    } else {
+        calciumInput.classList.remove('error');
+    }
+
+    if (isNaN(magnesium) || magnesium < 0) {
+        isValid = false;
+        errorMessage += 'Please enter a valid number for Magnesium.\n';
+        magnesiumInput.classList.add('error');
+    } else {
+        magnesiumInput.classList.remove('error');
+    }
+
+    // Display error message if inputs are invalid
+    if (!isValid) {
+        alert(errorMessage);
+        return;
+    }
+
+    // Calculate hardness in ppm
+    const hardnessPPM = calcium * 2.5 + magnesium * 4.1;
+
+    // Convert ppm to gpg if necessary
+    let hardness = hardnessPPM;
+    if (unit === 'gpg') {
+        hardness = hardnessPPM / 17.1;
+    }
+
+    // Determine hardness category
+    let category = '';
+    let safety = '';
+    if (hardnessPPM < 60) {
+        category = 'Soft';
+        safety = 'Safe for all household uses.';
+    } else if (hardnessPPM < 120) {
+        category = 'Moderately Hard';
+        safety = 'Generally safe but may require water softening for some uses.';
+    } else if (hardnessPPM < 180) {
+        category = 'Hard';
+        safety = 'Can cause scale buildup; softening recommended for household use.';
+    } else {
+        category = 'Very Hard';
+        safety = 'Not suitable for household use without softening; can cause significant scale buildup.';
+    }
+
+    // Display results
+    document.getElementById('hardness').textContent = `Water Hardness: ${hardness.toFixed(2)} ${unit}`;
+    document.getElementById('category').textContent = `Category: ${category}`;
+    document.getElementById('safety').textContent = `Safety: ${safety}`;
+}
diff --git a/Calculators/Water-Hardness-Calculator/style.css b/Calculators/Water-Hardness-Calculator/style.css
@@ -0,0 +1,93 @@
+body {
+    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
+    background: linear-gradient(135deg, #74ebd5, #9face6);
+    margin: 0;
+    padding: 20px;
+    display: flex;
+    justify-content: center;
+    align-items: flex-start;
+    min-height: 100vh;
+    color: #333;
+    box-sizing: border-box;
+}
+
+.container {
+    background: linear-gradient(135deg, #ffecd2, #fcb69f);
+    padding: 20px;
+    border-radius: 12px;
+    box-shadow: 0 0 15px rgba(0, 0, 0, 0.2);
+    width: 320px;
+    text-align: center;
+    margin-top: 20px;
+    margin-bottom: 20px;
+}
+
+h1 {
+    margin-bottom: 20px;
+    color: #333;
+    text-shadow: 1px 1px 2px #fff;
+}
+
+.input-group {
+    margin-bottom: 15px;
+    text-align: left;
+}
+
+label {
+    display: block;
+    margin-bottom: 5px;
+    color: #444;
+}
+
+input,
+select {
+    width: calc(100% - 22px);
+    padding: 10px;
+    border: 1px solid #ddd;
+    border-radius: 8px;
+    background-color: #fdfdfd;
+}
+
+button {
+    width: 100%;
+    padding: 12px;
+    border: none;
+    border-radius: 8px;
+    background-color: #ff7b54;
+    color: white;
+    font-size: 18px;
+    font-weight: bold;
+    cursor: pointer;
+    transition: background-color 0.3s;
+}
+
+button:hover {
+    background-color: #ff5722;
+}
+
+#error-message {
+    color: red;
+    font-weight: bold;
+    display: none;
+}
+
+#error-message.visible {
+    display: block;
+}
+
+#results {
+    margin-top: 20px;
+    text-align: left;
+    background: rgba(255, 255, 255, 0.8);
+    padding: 15px;
+    border-radius: 8px;
+}
+
+#error-message {
+    color: red;
+    font-weight: bold;
+}
+
+.error {
+    border: 2px solid red;
+}
diff --git a/index.html b/index.html
@@ -4984,6 +4984,20 @@ <h3>Calculates number of vowels and consonants in a given paragraph.</h3>
                 </div>
             </div>
         </div>
+        <div class="box">
+            <div class="content">
+                <h2>Water Hardness Calculator</h2>
+                <h3>Determines the hardness of your water supply.</h3>
+                <div class="card-footer">
+                    <a href="./Calculators/Water-Hardness-Calculator/index.html" target="_blank">
+                        <button>Try Now</button>
+                    </a>
+                    <a href="https://github.com/Rakesh9100/CalcDiverse/tree/main/Calculators/Water-Hardness-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>Water Intake Calculator</h2>