Improve error handling

index.html

@@ -161,25 +161,39 @@
         const submitButton = $("#submit");
         const outputField = $("#out");
 
-        const outputSimplifiedFraction = () => {
+        const validateInputs = () => {
             let numerator = numeratorInput.value;
             let denominator = denominatorInput.value;
 
-            if (!isInt(numerator) || !isInt(denominator)) {
+            if (numerator === "")
-                outputField.innerText = "The numerator and denominator must be integers.";
+                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;
+        };
+
+        const outputSimplifiedFraction = () => {
+            const validationInfo = validateInputs();
+            if (validationInfo !== undefined) {
+                validationInfo[0].select();
+                outputField.innerText = validationInfo[1];
                 return;
             }
 
-            const fraction = new Fraction(numerator, denominator);
+            const fraction = new Fraction(numeratorInput.value, denominatorInput.value);
             outputField.innerText = "$$" + fraction.toString() + " = " + fraction.simplify().toReducedString() + "$$";
 
             MathJax.Hub.Queue(["Typeset", MathJax.Hub]);
         };
 
-        submitButton.onclick = () => {
+        submitButton.onclick = () => outputSimplifiedFraction();
-            outputSimplifiedFraction();
-            numeratorInput.select();
-        };
 
         numeratorInput.addEventListener("keydown", event => {
             if (event.key === "Enter") {
@@ -194,12 +208,8 @@
 
         denominatorInput.addEventListener("keydown", event => {
             if (event.key === "Enter") {
-                if (numeratorInput.value === "") {
+                outputSimplifiedFraction();
-                    numeratorInput.select();
+                denominatorInput.select();
-                } else {
-                    outputSimplifiedFraction();
-                    denominatorInput.select();
-                }
             }
         });
     </script>