Rakesh9100 · Rakesh9100 · Aug 10, 2024 · Jul 31, 2024 · Aug 4, 2024 · Aug 10, 2024
diff --git a/Calculators/Molality-Calculator/index.html b/Calculators/Molality-Calculator/index.html
@@ -0,0 +1,42 @@
+<!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>Molality Calculator</title>
+</head>
+<body>
+    <div class="container">
+        <h1>Molality Calculator</h1>
+        <form id="molalityForm">
+            <div class="form-group">
+                <label for="formulaWeight">Formula weight (g/mol):</label>
+                <input type="number" id="formulaWeight" required>
+            </div>
+            <div class="form-group">
+                <label for="solventWeight">Weight of solvent:</label>
+                <input type="number" id="solventWeight" required>
+                <select id="solventUnit">
+                    <option value="kg">Kilograms (kg)</option>
+                    <option value="g">Grams (g)</option>
+                </select>
+            </div>
+            <div class="form-group">
+                <label for="molality">Desired molality:</label>
+                <input type="number" id="molality" required>
+                <select id="molalityUnit">
+                    <option value="mol/kg">Moles per kilogram (mol/kg)</option>
+                    <option value="mmol/kg">Millimoles per kilogram (mmol/kg)</option>
+                </select>
+            </div>
+            <button type="button" onclick="calculateMass()">Calculate Mass</button>
+        </form>
+        <div id="result">
+            <label for="mass">Mass:</label>
+            <input type="text" id="mass" readonly> grams
+        </div>
+    </div>
+    <script src="script.js"></script>
+</body>
+</html>
diff --git a/Calculators/Molality-Calculator/script.js b/Calculators/Molality-Calculator/script.js
@@ -0,0 +1,35 @@
+function calculateMass() {
+  const formulaWeight = parseFloat(
+      document.getElementById("formulaWeight").value
+  );
+  let solventWeight = parseFloat(document.getElementById("solventWeight").value);
+  const solventUnit = document.getElementById("solventUnit").value;
+  let molality = parseFloat(
+      document.getElementById("molality").value
+  );
+  const molalityUnit = document.getElementById("molalityUnit").value;
+
+  if (isNaN(formulaWeight) || isNaN(solventWeight) || isNaN(molality)) {
+      alert("Please enter valid numbers.");
+      return;
+  }
+
+  // Convert solvent weight to kilograms
+  switch (solventUnit) {
+      case "g":
+          solventWeight = solventWeight / 1000;
+          break;
+  }
+
+  // Convert molality to mol/kg
+  switch (molalityUnit) {
+      case "mmol/kg":
+          molality = molality / 1000;
+          break;
+  }
+
+  const mass = formulaWeight * molality * solventWeight;
+  document.getElementById("mass").value = mass.toFixed(3);
+  document.getElementById("result").style.animation =
+      "resultFadeIn 1s ease-in-out";
+}
diff --git a/Calculators/Molality-Calculator/style.css b/Calculators/Molality-Calculator/style.css
@@ -0,0 +1,98 @@
+body {
+  font-family: Arial, sans-serif;
+  background-color: #e0fae2;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  height: 100vh;
+  margin: 0;
+  overflow: hidden;
+  animation: backgroundAnimation 10s infinite alternate;
+}
+
+@keyframes backgroundAnimation {
+  0% { background-color: #b3eaf1; }
+  50% { background-color: #00796b; }
+  100% { background-color: #2fb4c5; }
+}
+
+.container {
+  background: linear-gradient(to bottom right, #ffffff, #c8e6c9);
+  padding: 20px;
+  border-radius: 16px;
+  box-shadow: 0 0 20px rgba(0, 0, 0, 0.2);
+  width: 90%;
+  max-width: 400px;
+  text-align: center;
+  animation: fadeIn 1s ease-in-out;
+}
+
+@keyframes fadeIn {
+  from { opacity: 0; }
+  to { opacity: 1; }
+}
+
+h1 {
+  margin-bottom: 20px;
+  color: #00796b;
+  font-size: 24px;
+  animation: textPop 1s ease-in-out;
+}
+
+@keyframes textPop {
+  0% { transform: scale(0.5); }
+  100% { transform: scale(1); }
+}
+
+.form-group {
+  margin-bottom: 15px;
+  text-align: left;
+}
+
+label {
+  display: block;
+  margin-bottom: 5px;
+  color: #00796b;
+}
+
+input[type="number"], input[type="text"], select {
+  width: 100%;
+  padding: 8px;
+  margin-bottom: 10px;
+  border: 1px solid #b0bec5;
+  border-radius: 4px;
+  box-sizing: border-box;
+  transition: border 0.3s;
+}
+
+input[type="number"]:focus, input[type="text"]:focus, select:focus {
+  border-color: #00796b;
+  outline: none;
+}
+
+button {
+  background: #007bff;
+  color: #fff;
+  padding: 10px;
+  border: none;
+  border-radius: 8px;
+  cursor: pointer;
+  transition: background 0.3s, transform 0.3s;
+}
+
+button:hover {
+  background: #0056b3;
+  transform: scale(1.05);
+}
+
+#result {
+  margin-top: 20px;
+  font-size: 18px;
+  color: #00796b;
+  animation: resultFadeIn 1s ease-in-out;
+}
+
+@keyframes resultFadeIn {
+  from { opacity: 0; }
+  to { opacity: 1; }
+}
diff --git a/Calculators/discriminant/index.html b/Calculators/discriminant/index.html
@@ -0,0 +1,32 @@
+<!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>Discriminant Calculator</title>
+</head>
+
+<body>
+    <div class="container">
+        <h1>DISCRIMINANT CALCULATOR</h1>
+
+        <p>Please enter the coefficients <strong>a</strong>, <strong>b</strong> and <strong>c</strong> of a quadratic
+            equation of the form:<br><strong id="equation">ax&#x00B2; + bx + c = 0</strong></p>
+
+        <form name="input_form" action="javascript:validate();">
+            <span>a = <input type="text" name="aterm" size="5" required></span>
+            <span> b = <input type="text" name="bterm" size="5" required></span>
+            <span> c = <input type="text" name="cterm" size="5" required></span>
+            <div><button type="submit" value="Calculate"> Calculate Discriminant </button></div>
+        </form>
+
+        <p id="output_text" />
+        <p id="outputValue" />
+
+        <script src="./script.js"></script>
+    </div>
+</body>
+
+</html>
diff --git a/Calculators/discriminant/script.js b/Calculators/discriminant/script.js
@@ -0,0 +1,35 @@
+
+'use strict'
+
+function validate() {
+    // Get the input values
+    var a = parseFloat(document.forms["input_form"]["aterm"].value);
+    var b = parseFloat(document.forms["input_form"]["bterm"].value);
+    var c = parseFloat(document.forms["input_form"]["cterm"].value);
+
+    var outputText, outputValue;
+
+    // Validate the inputs
+    if (isNaN(a) || isNaN(b) || isNaN(c)) {
+        outputText = "All coefficients must be numbers!";
+    } else if (a === 0) {
+        outputText = "<em>a</em> cannot be zero!";
+    } else {
+        // Calculate the discriminant
+        var discriminant = Math.pow(b, 2) - 4 * a * c;
+
+        outputText = "For the equation <strong>" + (a === 1 ? "" : a) + "x\u00B2 + " + (b === 1 ? "" : b) + "x + " + c + " = 0</strong>,";
+
+        if (discriminant > 0) {
+            outputValue = "The discriminant (D) is <strong>" + discriminant + "</strong>. There are two distinct real roots.";
+        } else if (discriminant === 0) {
+            outputValue = "The discriminant (D) is <strong>" + discriminant + "</strong>. There is exactly one real root.";
+        } else {
+            outputValue = "The discriminant (D) is <strong>" + discriminant + "</strong>. There are no real roots (complex roots).";
+        }
+    }
+
+    // Output the result
+    document.getElementById("output_text").innerHTML = outputText;
+    document.getElementById("outputValue").innerHTML = outputValue;
+}
diff --git a/Calculators/discriminant/style.css b/Calculators/discriminant/style.css
@@ -0,0 +1,101 @@
+body {
+  font-family: 'Roboto', sans-serif;
+  margin: 0;
+  padding: 0;
+  background: linear-gradient(135deg, #3498db, #8e44ad);
+  background-size: cover;
+  color: #ecf0f1;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  height: 100vh;
+}
+
+.container {
+  display: flex;
+  flex-direction: column;
+  width: 90%;
+  max-width: 400px;
+  background-color: rgba(255, 255, 255, 0.9);
+  padding: 20px;
+  border-radius: 8px;
+  box-shadow: 0 0 20px rgba(0, 0, 0, 0.2);
+}
+
+h1 {
+  text-align: center;
+  color: #2ecc71;
+  margin-bottom: 20px;
+}
+
+p {
+  text-align: center;
+  color: #6b6b6b;
+  margin: 10px 0;
+}
+
+#equation {
+  font-size: 1.2rem;
+  margin-bottom: 20px;
+}
+
+form {
+  text-align: center;
+  margin-top: 20px;
+  margin-bottom: 20px;
+  color: #6b6b6b;
+}
+
+span {
+  display: inline-block;
+  margin: 0 10px;
+}
+
+input {
+  font-size: 1rem;
+  padding: 10px;
+  margin: 0 10px 10px 10px;
+  border: 1px solid #ccc;
+  border-radius: 4px;
+  box-sizing: border-box;
+  transition: border-color 0.3s ease, box-shadow 0.3s ease;
+  color: #2c3e50;
+}
+
+input:hover,
+input:focus {
+  border-color: #3498db;
+}
+
+form div {
+  margin-top: 20px;
+}
+
+button {
+  background-color: #e74c3c;
+  color: #ecf0f1;
+  padding: 12px 24px;
+  border: none;
+  border-radius: 4px;
+  cursor: pointer;
+  transition: background-color 0.3s ease;
+  margin: 0 auto;
+  display: block;
+}
+
+button:hover {
+  background-color: #c0392b;
+}
+
+#output_text {
+  margin-top: 20px;
+  text-align: center;
+  color: #404040;
+}
+
+#outputValue {
+  margin-top: 10px;
+  font-weight: bold;
+  font-size: 1.2em;
+  color: #2ecc71;
+}
diff --git a/index.html b/index.html
@@ -1541,6 +1541,23 @@ <h3>Checks the number is disarium or not and finds disarium numbers in a range.<
                 </div>
             </div>
         </div>
+
+        // Added discriminant .... 
+        <div class="box">
+            <div class="content">
+                <h2>Discriminant Calculator</h2>
+                <h3>Calculates the Discriminant of a quadratic equation.</h3>
+                <div class="card-footer">
+                    <a href="./Calculators/discriminant/index.html" target="_blank">
+                        <button>Try Now</button>
+                    </a>
+                    <a href="https://github.com/Rakesh9100/CalcDiverse/tree/main/Calculators/discriminant" 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>Discount Calculator</h2>
@@ -3011,6 +3028,21 @@ <h3>Calculates the mass of a compound needed to achieve a desired molarity in a
                 </div>
             </div>
         </div>
+
+        <div class="box">
+            <div class="content">
+                <h2>Molality Calculator</h2>
+                <h3>Calculates the mass of a compound needed to achieve a desired molality in a solution.</h3>
+                <div class="card-footer">
+                    <a href="./Calculators/Molality-Calculator/index.html" target="_blank">
+                        <button>Try Now</button>
+                    </a>
+                    <a href="https://github.com/Rakesh9100/CalcDiverse/tree/main/Calculators/Molarity-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>Molecular Weight Calculator</h2>