Skip to content

Commit a4aa97f

Browse files
author
Bytenol
committed
initial commit
0 parents  commit a4aa97f

13 files changed

+975
-0
lines changed

‎.gitignore

+3
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,3 @@
1+
node_modules
2+
.idea
3+
.vscode

‎css/beer3.4.11.min.css

+1
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎index.html

+71
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,71 @@
1+
<!doctype html>
2+
<html lang="en">
3+
<head>
4+
<meta charset="UTF-8">
5+
<meta name="viewport"
6+
content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
7+
<meta http-equiv="X-UA-Compatible" content="ie=edge">
8+
<title>Chemical Equation Balancer</title>
9+
<!-- <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.1.2/css/all.min.css">-->
10+
<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/cdn/beer.min.css" rel="stylesheet">
11+
<script type="module" src="https://cdn.jsdelivr.net/npm/[email protected]/dist/cdn/beer.min.js"></script>
12+
<link rel="stylesheet" href="./main.css">
13+
<script src="./main.js" type="module"></script>
14+
</head>
15+
<body class="dark">
16+
17+
<header class="primary">
18+
<nav>
19+
<button class="circle transparent">
20+
<i>arrow_back</i>
21+
</button>
22+
<h5>ChemBalance</h5>
23+
<div class="max"></div>
24+
<button class="circle">
25+
<i>funnel</i>
26+
<menu class="left no-wrap">
27+
<a>Molecular</a>
28+
<a>Ionic</a>
29+
<a>Precipitation</a>
30+
<a>Redox</a>
31+
</menu>
32+
</button>
33+
</nav>
34+
</header>
35+
36+
<main class="responsive">
37+
<article class="border">
38+
<h5>Input</h5>
39+
<p id="output"></p>
40+
</article>
41+
<article class="border">
42+
<h5>Result</h5>
43+
<p id="result"></p>
44+
</article>
45+
<article class="border">
46+
<a class="chip fill">
47+
<i class="primary-text">today</i>
48+
<span>Suggestion</span>
49+
</a>
50+
<p>A fractional result occurs rarely, ensure to multiply all coefficient by two</p>
51+
</article>
52+
<div class="snackbar error" id="snackbar"></div>
53+
</main>
54+
<footer>
55+
<div class="row">
56+
<button class="circle left-round bottom-round extra small-elevate" id="randomBtn">
57+
<i>shuffle</i>
58+
</button>
59+
<div class="max field border">
60+
<input type="text" id="input" value="Fe2(SO4)3 + NH3 + H2O = Fe(OH)3 + (NH4)2SO4">
61+
<!-- <span class="error">Error text</span>-->
62+
<span class="helper">Enter Chemical Equation</span>
63+
</div>
64+
<button class="circle right-round top-round extra small-elevate" id="balanceBtn">
65+
<i>send</i>
66+
</button>
67+
</div>
68+
</footer>
69+
70+
</body>
71+
</html>

‎main.css

+18
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,18 @@
1+
body {
2+
width: 100vw;
3+
height: 100vh;
4+
position: fixed;
5+
}
6+
7+
main {
8+
width: 100%;
9+
height: 100%;
10+
overflow-y: scroll;
11+
}
12+
13+
footer {
14+
position: absolute;
15+
bottom: 0;
16+
padding: 1em 10px;
17+
width: 100%;
18+
}

‎main.js

+87
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,87 @@
1+
import {BalanceMolecularEqn, uString} from "./src/balance.js";
2+
3+
const randomEqn = [
4+
"Na2SO4 + H2SO4 = NaHSO4",
5+
"H2O2 = H2O + O2",
6+
"CH4 + O2 = CO2 + H2O",
7+
"C3H8 + O2 = CO2 + H2O",
8+
"H3PO3 = H3PO4 + PH3",
9+
"Fe2(SO4)3 + NH3 + H2O = Fe(OH)3 + (NH4)2SO4",
10+
"Ca + H2O = Ca(OH)2 + H2",
11+
"Na + Cl2 = NaCl",
12+
"H2 + O2 = H2O",
13+
"NaNO3 = NaNO2 + O2",
14+
"Cu + HNO3 = Cu(NO3)2 + H2O + NO",
15+
"Fe2SiO4 + Mg2SiO4 + H2O + CO2 = Mg6(Si4O10)(OH)8 + Fe2O3 + CH4"
16+
]
17+
18+
const $ = selector => document.querySelector(selector);
19+
20+
21+
/**
22+
* Tranform the input text to a formatted version on the display much more understandable by the reader
23+
* @param txt is the input text
24+
* @param outputEl is the output element
25+
*/
26+
const renderFormatedEqn = (txt, outputEl, subNumber = true) => {
27+
outputEl.innerHTML = "";
28+
let str = ""
29+
for(let ch of txt) {
30+
if(subNumber && uString.digits.includes(ch))
31+
str += "<sub>" + ch + "</sub>";
32+
else str += ch;
33+
}
34+
outputEl.innerHTML = str;
35+
const snackbarEl = $("#snackbar");
36+
snackbarEl.classList.remove("active");
37+
}
38+
39+
40+
/**
41+
* This is the handler that perform the balacing procedures
42+
* @param inputEl is the input element
43+
*/
44+
const onBalanceHandler = (inputEl) => {
45+
const txt = inputEl.value;
46+
const res = BalanceMolecularEqn(txt);
47+
const snackbarEl = $("#snackbar");
48+
if(res.error) {
49+
snackbarEl.classList.add("active");
50+
snackbarEl.innerHTML = res.error;
51+
return;
52+
}
53+
let outputTxt = $("#output").innerHTML.replaceAll(" ", "").split("=").map(i => i.split("+")).flat();
54+
let strRes = "";
55+
for(let i = 0; i < outputTxt.length; i++) {
56+
const v = Math.abs(res.coeff[i]);
57+
const coeff = v !== 1 ? v : "";
58+
strRes += `<strong style="color: red">${coeff}</strong>${outputTxt[i]}`;
59+
if(i === res.reactants.length - 1) strRes += " = ";
60+
else {
61+
if(i < outputTxt.length - 1) strRes += " + ";
62+
}
63+
}
64+
$("#result").innerHTML = strRes;
65+
}
66+
67+
68+
const onRandomHandler = (inputEl, outputEl) => {
69+
const r = Math.floor(Math.random() * randomEqn.length);
70+
inputEl.value = randomEqn[r];
71+
renderFormatedEqn(inputEl.value, outputEl);
72+
}
73+
74+
75+
const main = () => {
76+
const inputEl = $("#input");
77+
const outputEl = $("#output");
78+
const balanceBtn = $("#balanceBtn");
79+
const randomBtn = $("#randomBtn");
80+
81+
renderFormatedEqn(inputEl.value, outputEl);
82+
inputEl.addEventListener("input", () => renderFormatedEqn(inputEl.value, outputEl));
83+
balanceBtn.addEventListener("click", () => onBalanceHandler(inputEl));
84+
randomBtn.addEventListener("click", () => onRandomHandler(inputEl, outputEl));
85+
}
86+
87+
addEventListener("load", main);

‎moleculemodel.jpg

52.2 KB
Loading

‎package-lock.json

+118
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎package.json

+5
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,5 @@
1+
{
2+
"devDependencies": {
3+
"mathjs": "^12.2.1"
4+
}
5+
}

0 commit comments

Comments
 (0)