Skip to content

Commit

Permalink
Added Normality Calculator (#1790)
Browse files Browse the repository at this point in the history
  • Loading branch information
@satyamyadav979
satyamyadav979 authored Aug 10, 2024
1 parent 3335a9f commit 25acc98
Show file tree
Hide file tree
Showing 4 changed files with 200 additions and 0 deletions.
48 changes: 48 additions & 0 deletions Calculators/Normality-Calculator/index.html
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,48 @@
<!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>Normality Calculator</title>
</head>
<body>
<div class="container">
<h1>Normality Calculator</h1>
<form id="normalityForm">
<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="finalVolume">Desired final volume:</label>
<input type="number" id="finalVolume" required>
<select id="volumeUnit">
<option value="L">Liters (L)</option>
<option value="mL">Milliliters (mL)</option>
<option value="uL">Microliters (µL)</option>
</select>
</div>
<div class="form-group">
<label for="equivalentWeight">Equivalent weight (g/equiv):</label>
<input type="number" id="equivalentWeight" required>
</div>
<div class="form-group">
<label for="concentration">Desired concentration:</label>
<input type="number" id="concentration" required>
<select id="concentrationUnit">
<option value="N">Normal (N)</option>
<option value="mN">Millinormal (mN)</option>
<option value="uN">Micronormal (µN)</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>
38 changes: 38 additions & 0 deletions Calculators/Normality-Calculator/script.js
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,38 @@
function calculateMass() {
const formulaWeight = parseFloat(document.getElementById("formulaWeight").value);
let volume = parseFloat(document.getElementById("finalVolume").value);
const volumeUnit = document.getElementById("volumeUnit").value;
const equivalentWeight = parseFloat(document.getElementById("equivalentWeight").value);
let concentration = parseFloat(document.getElementById("concentration").value);
const concentrationUnit = document.getElementById("concentrationUnit").value;

if (isNaN(formulaWeight) || isNaN(volume) || isNaN(equivalentWeight) || isNaN(concentration)) {
alert("Please enter valid numbers.");
return;
}

// Convert volume to liters
switch (volumeUnit) {
case "mL":
volume = volume / 1000;
break;
case "uL":
volume = volume / 1e6;
break;
}

// Convert concentration to normal
switch (concentrationUnit) {
case "mN":
concentration = concentration / 1000;
break;
case "uN":
concentration = concentration / 1e6;
break;
}

// Calculate mass
const mass = equivalentWeight * concentration * volume;
document.getElementById("mass").value = mass.toFixed(3);
document.getElementById("result").style.animation = "resultFadeIn 1s ease-in-out";
}
100 changes: 100 additions & 0 deletions Calculators/Normality-Calculator/style.css
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,100 @@
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; }
}

14 changes: 14 additions & 0 deletions index.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -3420,6 +3420,20 @@ <h3>Checks whether the given number is niven or not.</h3>
</div>
</div>
</div>
<div class="box">
<div class="content">
<h2>Normality Calculator</h2>
<h3>Calculates the mass of a compound needed to achieve a desired Normality in a solution.</h3>
<div class="card-footer">
<a href="./Calculators/Normality-Calculator/index.html" target="_blank">
<button>Try Now</button>
</a>
<a href="https://github.com/Rakesh9100/CalcDiverse/tree/main/Calculators/Normality-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>Number Of Days Calculator</h2>
Expand Down

0 comments on commit 25acc98

Please sign in to comment.