tools
/
simplify-fractions
1
0
Fork 0
Code Issues Pull Requests Releases Activity

Upgrade template to v3

This commit is contained in:
Florine W. Dekker 2022-11-21 22:05:33 +01:00
parent 7f59c1c693
commit f405903db2
Signed by: FWDekker
GPG Key ID: D3DCFAA8A4560BE0
4 changed files with 67 additions and 55 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

BIN
package-lock.json generated
View File

Binary file not shown.

12
package.json
View File

@ -1,6 +1,6 @@
{ {
"name": "simplify-fractions", "name": "simplify-fractions",
"version": "1.2.7", "version": "1.2.8",
"description": "Simple web tool for simplifying fractions", "description": "Simple web tool for simplifying fractions",
"author": "Florine W. Dekker", "author": "Florine W. Dekker",
"browser": "dist/bundle.js", "browser": "dist/bundle.js",
@ -19,18 +19,18 @@
"katex": "^0.15.2" "katex": "^0.15.2"
}, },
"devDependencies": { "devDependencies": {
"css-loader": "^6.6.0", "css-loader": "^6.7.2",
"file-loader": "^6.2.0", "file-loader": "^6.2.0",
"grunt": "^1.4.1", "grunt": "^1.5.3",
"grunt-cli": "^1.4.3", "grunt-cli": "^1.4.3",
"grunt-contrib-clean": "^2.0.0", "grunt-contrib-clean": "^2.0.1",
"grunt-contrib-copy": "^1.0.0", "grunt-contrib-copy": "^1.0.0",
"grunt-contrib-watch": "^1.1.0", "grunt-contrib-watch": "^1.1.0",
"grunt-focus": "^1.0.0", "grunt-focus": "^1.0.0",
"grunt-text-replace": "^0.4.0", "grunt-text-replace": "^0.4.0",
"grunt-webpack": "^5.0.0", "grunt-webpack": "^5.0.0",
"style-loader": "^3.3.1", "style-loader": "^3.3.1",
"webpack": "^5.69.1", "webpack": "^5.75.0",
"webpack-cli": "^4.9.2" "webpack-cli": "^5.0.0"
} }
} }

45
src/main/index.html
View File

@ -8,15 +8,21 @@
<meta name="description" content="Simplify fractions." /> <meta name="description" content="Simplify fractions." />
<meta name="theme-color" content="#0033cc" /> <meta name="theme-color" content="#0033cc" />
<meta name="fwd:nav:target" content="#nav" />
<meta name="fwd:nav:highlight-path" content="/Tools/Simplify Fractions/" />
<meta name="fwd:footer:target" content="#footer" />
<meta name="fwd:footer:vcs-url" content="https://git.fwdekker.com/tools/simplify-fractions/" />
<meta name="fwd:footer:version" content="v%%VERSION_NUMBER%%" />
<meta name="fwd:validation:load-forms" />
<title>Simplify fractions | FWDekker</title> <title>Simplify fractions | FWDekker</title>
<link rel="stylesheet" href="https://static.fwdekker.com/fonts/roboto/roboto.css" /> <link rel="stylesheet" href="https://static.fwdekker.com/lib/template/3.x.x/template.css?v=%%VERSION_NUMBER%%" />
<link rel="stylesheet" href="https://static.fwdekker.com/lib/template/2.x.x/template.css" />
<script async src="https://stats.fwdekker.com/count.js" <script async src="https://stats.fwdekker.com/count.js"
data-goatcounter="https://stats.fwdekker.com/count"></script> data-goatcounter="https://stats.fwdekker.com/count"></script>
</head> </head>
<body> <body>
<noscript> <noscript class="fwd-js-notice">
<img src="https://stats.fwdekker.com/count?p=/tools/simplify-fractions/" alt="Counting pixel" /> <img src="https://stats.fwdekker.com/count?p=/tools/simplify-fractions/" alt="Counting pixel" />
<p> <p>
@ -25,33 +31,38 @@
instructions on how to enable JavaScript in your web browser</a>. instructions on how to enable JavaScript in your web browser</a>.
</p> </p>
</noscript> </noscript>
<main class="hidden"> <nav id="nav"></nav>
<div id="nav"></div> <main class="container hidden">
<div id="contents"> <div role="document">
<div id="header"></div> <section>
<header class="fwd-header">
<hgroup>
<h1><a href=".">Simplify Fractions</a></h1>
<h2>Simple web tool for simplifying fractions.</h2>
</hgroup>
</header>
<!-- Input --> <!-- Input -->
<section class="container"> <form id="inputs">
<form>
<fieldset> <fieldset>
<label for="numerator">Numerator</label> <label for="numerator">Numerator</label>
<input type="number" id="numerator" min="-2147483647" max="2147483647" autofocus /> <input type="number" id="numerator" min="-2147483647" max="2147483647" value="42" autofocus />
<small id="numerator-hint" data-hint-for="numerator"></small>
<label for="denominator">Denominator</label> <label for="denominator">Denominator</label>
<input type="number" id="denominator" min="-2147483647" max="2147483647" /> <input type="number" id="denominator" min="-2147483647" max="2147483647" value="7" />
<small id="denominator-hint" data-hint-for="denominator"></small>
</fieldset> </fieldset>
</form> </form>
</section>
<!-- Output --> <!-- Output -->
<section class="container">
<span id="out"></span> <span id="out"></span>
</section> </section>
<footer id="footer"></footer>
</div> </div>
<div id="footer"></div>
</main> </main>
<script src="https://static.fwdekker.com/lib/template/2.x.x/template.js"></script> <script src="https://static.fwdekker.com/lib/template/3.x.x/template.js?v=%%VERSION_NUMBER%%"></script>
<!--suppress HtmlUnknownTarget --> <!--suppress HtmlUnknownTarget -->
<script src="bundle.js?v=%%VERSION_NUMBER%%"></script> <script src="bundle.js?v=%%VERSION_NUMBER%%"></script>
</body> </body>

65
src/main/js/main.js
View File

@ -1,5 +1,8 @@
// noinspection JSUnresolvedVariable // noinspection JSUnresolvedVariable
const {$, doAfterLoad, footer, header, nav} = window.fwdekker; const {$, doAfterLoad} = window.fwdekker;
// noinspection JSUnresolvedVariable
const {clearFormValidity, showInputInvalid, showInputValid} = window.fwdekker.validation;
import katex from "katex"; import katex from "katex";
import "katex/dist/katex.min.css"; import "katex/dist/katex.min.css";
@ -100,18 +103,8 @@ class Fraction {
doAfterLoad(() => { doAfterLoad(() => {
$("#nav").appendChild(nav("/Tools/Simplify Fractions/"));
$("#header").appendChild(header({
title: "Simplify Fractions",
description: "Simple web tool for simplifying fractions"
}));
$("#footer").appendChild(footer({
vcsURL: "https://git.fwdekker.com/tools/simplify-fractions/",
version: "v%%VERSION_NUMBER%%"
}));
$("main").classList.remove("hidden"); $("main").classList.remove("hidden");
$("[autofocus]").focus() $("[autofocus]").focus();
}); });
doAfterLoad(() => { doAfterLoad(() => {
@ -121,27 +114,38 @@ doAfterLoad(() => {
/** /**
* Returns `undefined` if the inputs are valid, or a tuple consisting of the invalid element and an explanation * Returns `true` if and only if both inputs are valid, showing the validity results to the user immediately.
* of its invalidity otherwise.
* *
* @param numerator {string} the numerator value * @param numerator {string} the numerator value
* @param denominator {string} the denominator value * @param denominator {string} the denominator value
* @returns {(HTMLElement|string)[]|undefined} `undefined` if the inputs are valid, or a tuple consisting of the * @returns {boolean} `true` if and only if both inputs are valid
* invalid element and an explanation of its invalidity otherwise
*/ */
const validateInputs = (numerator, denominator) => { const validateInputs = (numerator, denominator) => {
if (numerator === "") clearFormValidity($("#inputs"));
return [numeratorInput, ""]; let isValid = true;
if (denominator === "")
return [denominatorInput, ""];
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; if (numerator.trim() === "") {
isValid = false;
} else if (!isInt(numerator)) {
isValid = false;
showInputInvalid(numeratorInput, "Enter an integer.");
} else {
showInputValid(numeratorInput);
}
if (denominator.trim() === "") {
isValid = false;
} else if (!isInt(denominator)) {
isValid = false;
showInputInvalid(denominatorInput, "Enter an integer.");
} else if (+denominator === 0) {
isValid = false;
showInputInvalid(denominatorInput, "Enter a number other than zero.");
} else {
showInputValid(denominatorInput);
}
return isValid;
}; };
/** /**
@ -151,11 +155,7 @@ doAfterLoad(() => {
let numerator = numeratorInput.value; let numerator = numeratorInput.value;
let denominator = denominatorInput.value; let denominator = denominatorInput.value;
const validationInfo = validateInputs(numerator, denominator); if (!validateInputs(numerator, denominator)) return;
if (validationInfo !== undefined) {
outputField.innerText = validationInfo[1];
return;
}
const fraction = new Fraction(numeratorInput.value, denominatorInput.value); const fraction = new Fraction(numeratorInput.value, denominatorInput.value);
outputField.innerHTML = katex.renderToString( outputField.innerHTML = katex.renderToString(
@ -170,4 +170,5 @@ doAfterLoad(() => {
numeratorInput.addEventListener("input", () => outputSimplifiedFraction()); numeratorInput.addEventListener("input", () => outputSimplifiedFraction());
denominatorInput.addEventListener("input", () => outputSimplifiedFraction()); denominatorInput.addEventListener("input", () => outputSimplifiedFraction());
outputSimplifiedFraction();
}); });