Fix indenting
This commit is contained in:
parent
1205cf041c
commit
23819f8a44
GPG Key ID:
B1B567AF58D6EE0F
360
index.html
360
index.html
|
|
@ -19,218 +19,218 @@
|
|||
<link rel="stylesheet" href="https://static.fwdekker.com/css/milligram-common.css" crossorigin="anonymous" />
|
||||
</head>
|
||||
<body>
|
||||
<main class="wrapper">
|
||||
<!-- Header -->
|
||||
<header class="header">
|
||||
<div class="container">
|
||||
<h1>Simplify fractions</h1>
|
||||
<blockquote>
|
||||
<p><em>Simplify a fraction to eliminate common factors.</em></p>
|
||||
</blockquote>
|
||||
</div>
|
||||
</header>
|
||||
<main class="wrapper">
|
||||
<!-- Header -->
|
||||
<header class="header">
|
||||
<div class="container">
|
||||
<h1>Simplify fractions</h1>
|
||||
<blockquote>
|
||||
<p><em>Simplify a fraction to eliminate common factors.</em></p>
|
||||
</blockquote>
|
||||
</div>
|
||||
</header>
|
||||
|
||||
|
||||
<!-- Input -->
|
||||
<!-- Input -->
|
||||
<section class="container">
|
||||
<form>
|
||||
<fieldset>
|
||||
<label for="numerator">Numerator</label>
|
||||
<input type="number" id="numerator" min="-2147483647" max="2147483647" autofocus />
|
||||
|
||||
<label for="denominator">Denominator</label>
|
||||
<input type="number" id="denominator" min="-2147483647" max="2147483647" />
|
||||
|
||||
<button type="button" id="submit">Calculator</button>
|
||||
</fieldset>
|
||||
</form>
|
||||
</section>
|
||||
|
||||
|
||||
<!-- Output -->
|
||||
<section class="container">
|
||||
<span id="out"></span>
|
||||
</section>
|
||||
|
||||
|
||||
<!-- Footer -->
|
||||
<footer class="footer">
|
||||
<section class="container">
|
||||
<form>
|
||||
<fieldset>
|
||||
<label for="numerator">Numerator</label>
|
||||
<input type="number" id="numerator" min="-2147483647" max="2147483647" autofocus />
|
||||
|
||||
<label for="denominator">Denominator</label>
|
||||
<input type="number" id="denominator" min="-2147483647" max="2147483647" />
|
||||
|
||||
<button type="button" id="submit">Calculator</button>
|
||||
</fieldset>
|
||||
</form>
|
||||
Made by <a href="https://fwdekker.com/">Felix W. Dekker</a>.
|
||||
Licensed under the
|
||||
<a href="https://git.fwdekker.com/FWDekker/simplify-fractions/src/branch/master/LICENSE">MIT License</a>.
|
||||
Source code available on <a href="https://git.fwdekker.com/FWDekker/simplify-fractions/">git</a>.
|
||||
</section>
|
||||
</footer>
|
||||
</main>
|
||||
|
||||
|
||||
<!-- Output -->
|
||||
<section class="container">
|
||||
<span id="out"></span>
|
||||
</section>
|
||||
<!-- Scripts -->
|
||||
<script src="https://cdnjs.cloudflare.com/ajax/libs/mathjax/2.7.5/MathJax.js?config=TeX-MML-AM_CHTML"
|
||||
integrity="sha256-nvJJv9wWKEm88qvoQl9ekL2J+k/RWIsaSScxxlsrv8k=" crossorigin="anonymous"></script>
|
||||
<script src="https://static.fwdekker.com/js/common.js" crossorigin="anonymous"></script>
|
||||
<script>
|
||||
class Fraction {
|
||||
constructor(numerator, denominator) {
|
||||
if (!isInt(numerator) || !isInt(denominator))
|
||||
throw new Error("Numerator and denominator must be integer-like.");
|
||||
|
||||
this.sign = xor(numerator < 0, denominator < 0) ? -1 : 1;
|
||||
this.numerator = Math.abs(+numerator);
|
||||
this.denominator = Math.abs(+denominator);
|
||||
}
|
||||
|
||||
|
||||
<!-- Footer -->
|
||||
<footer class="footer">
|
||||
<section class="container">
|
||||
Made by <a href="https://fwdekker.com/">Felix W. Dekker</a>.
|
||||
Licensed under the
|
||||
<a href="https://git.fwdekker.com/FWDekker/simplify-fractions/src/branch/master/LICENSE">MIT License</a>.
|
||||
Source code available on <a href="https://git.fwdekker.com/FWDekker/simplify-fractions/">git</a>.
|
||||
</section>
|
||||
</footer>
|
||||
</main>
|
||||
simplify() {
|
||||
const common = gcd(this.numerator, this.denominator);
|
||||
return new Fraction(this.sign * this.numerator / common, this.denominator / common);
|
||||
}
|
||||
|
||||
toString() {
|
||||
let frac = `\\frac{${this.numerator}}{${this.denominator}}`;
|
||||
if (this.sign === -1)
|
||||
frac = `-${frac}`;
|
||||
|
||||
return frac;
|
||||
}
|
||||
|
||||
toReducedString() {
|
||||
if (this.numerator === 0)
|
||||
return "0";
|
||||
|
||||
let frac;
|
||||
if (this.denominator === 1)
|
||||
frac = `${this.numerator}`;
|
||||
else
|
||||
frac = `\\frac{${this.numerator}}{${this.denominator}}`;
|
||||
|
||||
if (this.sign === -1)
|
||||
frac = `-${frac}`;
|
||||
|
||||
return frac;
|
||||
}
|
||||
}
|
||||
|
||||
const xor = (a, b) => (a || b) && !(a && b);
|
||||
|
||||
// noinspection EqualityComparisonWithCoercionJS
|
||||
const isInt = n => n == parseInt(n);
|
||||
|
||||
const factorize = n => {
|
||||
if (!isInt(n))
|
||||
return undefined;
|
||||
|
||||
n = +n;
|
||||
|
||||
if (n <= 0)
|
||||
return undefined;
|
||||
|
||||
if (n === 1)
|
||||
return [1];
|
||||
|
||||
|
||||
<!-- Scripts -->
|
||||
<script src="https://cdnjs.cloudflare.com/ajax/libs/mathjax/2.7.5/MathJax.js?config=TeX-MML-AM_CHTML"
|
||||
integrity="sha256-nvJJv9wWKEm88qvoQl9ekL2J+k/RWIsaSScxxlsrv8k=" crossorigin="anonymous"></script>
|
||||
<script src="https://static.fwdekker.com/js/common.js" crossorigin="anonymous"></script>
|
||||
<script>
|
||||
class Fraction {
|
||||
constructor(numerator, denominator) {
|
||||
if (!isInt(numerator) || !isInt(denominator))
|
||||
throw new Error("Numerator and denominator must be integer-like.");
|
||||
const factors = [];
|
||||
while (n % 2 === 0) {
|
||||
factors.push(2);
|
||||
n /= 2;
|
||||
}
|
||||
while (n % 3 === 0) {
|
||||
factors.push(3);
|
||||
n /= 3;
|
||||
}
|
||||
|
||||
this.sign = xor(numerator < 0, denominator < 0) ? -1 : 1;
|
||||
this.numerator = Math.abs(+numerator);
|
||||
this.denominator = Math.abs(+denominator);
|
||||
}
|
||||
|
||||
|
||||
simplify() {
|
||||
const common = gcd(this.numerator, this.denominator);
|
||||
return new Fraction(this.sign * this.numerator / common, this.denominator / common);
|
||||
}
|
||||
|
||||
toString() {
|
||||
let frac = `\\frac{${this.numerator}}{${this.denominator}}`;
|
||||
if (this.sign === -1)
|
||||
frac = `-${frac}`;
|
||||
|
||||
return frac;
|
||||
}
|
||||
|
||||
toReducedString() {
|
||||
if (this.numerator === 0)
|
||||
return "0";
|
||||
|
||||
let frac;
|
||||
if (this.denominator === 1)
|
||||
frac = `${this.numerator}`;
|
||||
else
|
||||
frac = `\\frac{${this.numerator}}{${this.denominator}}`;
|
||||
|
||||
if (this.sign === -1)
|
||||
frac = `-${frac}`;
|
||||
|
||||
return frac;
|
||||
for (let i = 5; i <= n; i += ((i - 1) % 6 === 0) ? 4 : 2) {
|
||||
while (n % i === 0) {
|
||||
factors.push(i);
|
||||
n /= i;
|
||||
}
|
||||
}
|
||||
|
||||
const xor = (a, b) => (a || b) && !(a && b);
|
||||
return factors;
|
||||
};
|
||||
|
||||
// noinspection EqualityComparisonWithCoercionJS
|
||||
const isInt = n => n == parseInt(n);
|
||||
const defactorize = factors => {
|
||||
let accumulator = 1;
|
||||
for (let i = 0; i < factors.length; i++)
|
||||
accumulator *= factors[i];
|
||||
|
||||
const factorize = n => {
|
||||
if (!isInt(n))
|
||||
return undefined;
|
||||
return accumulator;
|
||||
};
|
||||
|
||||
n = +n;
|
||||
const gcd = (a, b) => {
|
||||
const aFactors = factorize(a);
|
||||
const bFactors = factorize(b);
|
||||
|
||||
if (n <= 0)
|
||||
return undefined;
|
||||
const overlap = [];
|
||||
|
||||
if (n === 1)
|
||||
return [1];
|
||||
|
||||
|
||||
const factors = [];
|
||||
while (n % 2 === 0) {
|
||||
factors.push(2);
|
||||
n /= 2;
|
||||
}
|
||||
while (n % 3 === 0) {
|
||||
factors.push(3);
|
||||
n /= 3;
|
||||
for (let aIndex = 0; aIndex < aFactors.length; aIndex++) {
|
||||
const bIndex = bFactors.indexOf(aFactors[aIndex]);
|
||||
if (bIndex >= 0) {
|
||||
overlap.push(aFactors[aIndex]);
|
||||
bFactors.splice(bIndex, 1);
|
||||
}
|
||||
}
|
||||
|
||||
for (let i = 5; i <= n; i += ((i - 1) % 6 === 0) ? 4 : 2) {
|
||||
while (n % i === 0) {
|
||||
factors.push(i);
|
||||
n /= i;
|
||||
}
|
||||
}
|
||||
|
||||
return factors;
|
||||
};
|
||||
|
||||
const defactorize = factors => {
|
||||
let accumulator = 1;
|
||||
for (let i = 0; i < factors.length; i++)
|
||||
accumulator *= factors[i];
|
||||
|
||||
return accumulator;
|
||||
};
|
||||
|
||||
const gcd = (a, b) => {
|
||||
const aFactors = factorize(a);
|
||||
const bFactors = factorize(b);
|
||||
|
||||
const overlap = [];
|
||||
|
||||
for (let aIndex = 0; aIndex < aFactors.length; aIndex++) {
|
||||
const bIndex = bFactors.indexOf(aFactors[aIndex]);
|
||||
if (bIndex >= 0) {
|
||||
overlap.push(aFactors[aIndex]);
|
||||
bFactors.splice(bIndex, 1);
|
||||
}
|
||||
}
|
||||
|
||||
return defactorize(overlap);
|
||||
};
|
||||
return defactorize(overlap);
|
||||
};
|
||||
|
||||
|
||||
const numeratorInput = $("#numerator");
|
||||
const denominatorInput = $("#denominator");
|
||||
const submitButton = $("#submit");
|
||||
const outputField = $("#out");
|
||||
const numeratorInput = $("#numerator");
|
||||
const denominatorInput = $("#denominator");
|
||||
const submitButton = $("#submit");
|
||||
const outputField = $("#out");
|
||||
|
||||
const validateInputs = () => {
|
||||
let numerator = numeratorInput.value;
|
||||
let denominator = denominatorInput.value;
|
||||
const validateInputs = () => {
|
||||
let numerator = numeratorInput.value;
|
||||
let denominator = denominatorInput.value;
|
||||
|
||||
if (numerator === "")
|
||||
return [numeratorInput, "Numerator must not be empty."];
|
||||
if (denominator === "")
|
||||
return [denominatorInput, "Denominator must not be empty."];
|
||||
if (!isInt(numerator))
|
||||
return [numeratorInput, "Numerator must be an integer."];
|
||||
if (!isInt(denominator))
|
||||
return [denominatorInput, "Denominator must be an integer."];
|
||||
if (+denominator === 0)
|
||||
return [denominatorInput, "Denominator must not be 0."];
|
||||
if (numerator === "")
|
||||
return [numeratorInput, "Numerator must not be empty."];
|
||||
if (denominator === "")
|
||||
return [denominatorInput, "Denominator must not be empty."];
|
||||
if (!isInt(numerator))
|
||||
return [numeratorInput, "Numerator must be an integer."];
|
||||
if (!isInt(denominator))
|
||||
return [denominatorInput, "Denominator must be an integer."];
|
||||
if (+denominator === 0)
|
||||
return [denominatorInput, "Denominator must not be 0."];
|
||||
|
||||
return undefined;
|
||||
};
|
||||
return undefined;
|
||||
};
|
||||
|
||||
const outputSimplifiedFraction = () => {
|
||||
const validationInfo = validateInputs();
|
||||
if (validationInfo !== undefined) {
|
||||
validationInfo[0].select();
|
||||
outputField.innerText = validationInfo[1];
|
||||
return;
|
||||
}
|
||||
const outputSimplifiedFraction = () => {
|
||||
const validationInfo = validateInputs();
|
||||
if (validationInfo !== undefined) {
|
||||
validationInfo[0].select();
|
||||
outputField.innerText = validationInfo[1];
|
||||
return;
|
||||
}
|
||||
|
||||
const fraction = new Fraction(numeratorInput.value, denominatorInput.value);
|
||||
outputField.innerText = "$$" + fraction.toString() + " = " + fraction.simplify().toReducedString() + "$$";
|
||||
const fraction = new Fraction(numeratorInput.value, denominatorInput.value);
|
||||
outputField.innerText = "$$" + fraction.toString() + " = " + fraction.simplify().toReducedString() + "$$";
|
||||
|
||||
MathJax.Hub.Queue(["Typeset", MathJax.Hub]);
|
||||
};
|
||||
MathJax.Hub.Queue(["Typeset", MathJax.Hub]);
|
||||
};
|
||||
|
||||
submitButton.onclick = () => outputSimplifiedFraction();
|
||||
submitButton.onclick = () => outputSimplifiedFraction();
|
||||
|
||||
numeratorInput.addEventListener("keydown", event => {
|
||||
if (event.key === "Enter") {
|
||||
if (denominatorInput.value === "") {
|
||||
denominatorInput.select();
|
||||
} else {
|
||||
outputSimplifiedFraction();
|
||||
numeratorInput.select();
|
||||
}
|
||||
}
|
||||
});
|
||||
|
||||
denominatorInput.addEventListener("keydown", event => {
|
||||
if (event.key === "Enter") {
|
||||
outputSimplifiedFraction();
|
||||
numeratorInput.addEventListener("keydown", event => {
|
||||
if (event.key === "Enter") {
|
||||
if (denominatorInput.value === "") {
|
||||
denominatorInput.select();
|
||||
} else {
|
||||
outputSimplifiedFraction();
|
||||
numeratorInput.select();
|
||||
}
|
||||
});
|
||||
</script>
|
||||
}
|
||||
});
|
||||
|
||||
denominatorInput.addEventListener("keydown", event => {
|
||||
if (event.key === "Enter") {
|
||||
outputSimplifiedFraction();
|
||||
denominatorInput.select();
|
||||
}
|
||||
});
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
|
|
|
|||
Loading…
Reference in New Issue