Improve simple-math GUI input validation

durimkryeziu · durimkryeziu · commit 19b2937e5b6b · 2026-05-02T07:59:14.000+02:00
Reject blank, negative, and decimal values instead of treating them as
zero. Surface an accessible validation message, hide stale calculations
while input is invalid, and keep divide-by-zero feedback explicit.

Also add form constraints, prevent the browser favicon 404, and improve
mobile and keyboard focus styling. Expand the GUI tests to cover the new
validation and reset behavior.
diff --git a/simple-math/src/main/resources/static/index.html b/simple-math/src/main/resources/static/index.html
@@ -4,16 +4,20 @@
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1">
     <title>Simple Math</title>
+    <link rel="icon" href="data:,">
     <link rel="stylesheet" href="style.css">
 </head>
 <body>
 <div class="container">
     <h1>Simple Math</h1>
     <label for="firstInput">What is the first number?</label>
-    <input type="number" id="firstInput" placeholder="Enter the first number" value="10"/>
+    <input type="number" id="firstInput" placeholder="Enter the first number" value="10" min="0" step="1"
+           required aria-describedby="validationMessage"/>
     <br>
     <label for="secondInput">What is the second number?</label>
-    <input type="number" id="secondInput" placeholder="Enter the second number" value="5"/>
+    <input type="number" id="secondInput" placeholder="Enter the second number" value="5" min="0" step="1"
+           required aria-describedby="validationMessage"/>
+    <div class="validation-message" id="validationMessage" role="alert" aria-live="polite"></div>
     <div class="calculation" id="addition"></div>
     <div class="calculation" id="subtraction"></div>
     <div class="calculation" id="multiplication"></div>
diff --git a/simple-math/src/main/resources/static/script.js b/simple-math/src/main/resources/static/script.js
@@ -5,27 +5,61 @@ const subtraction = document.getElementById('subtraction');
 const multiplication = document.getElementById('multiplication');
 const division = document.getElementById('division');
 const resetButton = document.getElementById('resetButton');
+const validationMessage = document.getElementById('validationMessage');
+
+const INVALID_INPUT_MESSAGE = 'Enter whole numbers greater than or equal to zero.';
 
 function formatNumber(num) {
     return num % 1 === 0 ? num : parseFloat(num.toFixed(2));
 }
 
+function parseWholeNumber(input) {
+    const value = input.value.trim();
+
+    if (value === '') {
+        return null;
+    }
+
+    const number = Number(value);
+    return Number.isSafeInteger(number) && number >= 0 ? number : null;
+}
+
+function clearCalculations() {
+    addition.textContent = '';
+    subtraction.textContent = '';
+    multiplication.textContent = '';
+    division.textContent = '';
+}
+
+function updateInputValidity(firstNumber, secondNumber) {
+    firstInput.setAttribute('aria-invalid', firstNumber === null ? 'true' : 'false');
+    secondInput.setAttribute('aria-invalid', secondNumber === null ? 'true' : 'false');
+}
+
 function updateCalculations() {
-    const firstNumber = parseFloat(firstInput.value) || 0;
-    const secondNumber = parseFloat(secondInput.value) || 0;
-    addition.textContent = `${firstNumber} + ${secondNumber} = ${firstNumber + secondNumber}`;
-    subtraction.textContent = `${firstNumber} - ${secondNumber} = ${firstNumber - secondNumber}`;
-    multiplication.textContent = `${firstNumber} × ${secondNumber} = ${firstNumber * secondNumber}`;
-    const quotient = formatNumber(firstNumber / secondNumber);
-    division.textContent = secondNumber !== 0 ? `${firstNumber} ÷ ${secondNumber} = ${quotient}`
+    const firstNumber = parseWholeNumber(firstInput);
+    const secondNumber = parseWholeNumber(secondInput);
+    updateInputValidity(firstNumber, secondNumber);
+
+    if (firstNumber === null || secondNumber === null) {
+        validationMessage.textContent = INVALID_INPUT_MESSAGE;
+        clearCalculations();
+        return;
+    }
+
+    validationMessage.textContent = '';
+    addition.textContent = `${firstNumber} + ${secondNumber} = ${formatNumber(firstNumber + secondNumber)}`;
+    subtraction.textContent = `${firstNumber} - ${secondNumber} = ${formatNumber(firstNumber - secondNumber)}`;
+    multiplication.textContent = `${firstNumber} × ${secondNumber} = ${formatNumber(firstNumber * secondNumber)}`;
+    division.textContent = secondNumber !== 0 ? `${firstNumber} ÷ ${secondNumber} = ${formatNumber(firstNumber / secondNumber)}`
             : 'Cannot divide by zero!';
 }
 
 firstInput.addEventListener('input', updateCalculations);
 secondInput.addEventListener('input', updateCalculations);
 resetButton.addEventListener('click', () => {
-    firstInput.value = 10;
-    secondInput.value = 5;
+    firstInput.value = '10';
+    secondInput.value = '5';
     updateCalculations();
 });
 
diff --git a/simple-math/src/main/resources/static/style.css b/simple-math/src/main/resources/static/style.css
@@ -1,8 +1,13 @@
+* {
+    box-sizing: border-box;
+}
+
 body {
     font-family: Helvetica, sans-serif;
     margin: 0;
     background-color: #f0f4f8;
-    height: 100vh;
+    min-height: 100dvh;
+    padding: 16px;
     display: flex;
     justify-content: center;
     align-items: center;
@@ -55,13 +60,24 @@ input[type="number"]:focus {
     border: 1px solid #ddd;
 }
 
+.validation-message {
+    min-height: 20px;
+    margin-bottom: 12px;
+    color: #a61b1b;
+    font-size: 14px;
+}
+
+input[aria-invalid="true"] {
+    border-color: #a61b1b;
+}
+
 #resetButton {
     margin-top: 10px;
     padding: 10px 20px;
     font-size: 16px;
     border: none;
     border-radius: 5px;
-    background-color: #FF6347;
+    background-color: #c2410c;
     color: white;
     cursor: pointer;
     display: block;
@@ -71,5 +87,16 @@ input[type="number"]:focus {
 }
 
 #resetButton:hover {
-    background-color: #ff4b3a;
+    background-color: #9a3412;
+}
+
+#resetButton:focus-visible {
+    outline: 3px solid rgba(194, 65, 12, 0.35);
+    outline-offset: 3px;
+}
+
+@media (max-width: 480px) {
+    .container {
+        padding: 18px;
+    }
 }
diff --git a/simple-math/src/test/java/dev/delivercraft/math/gui/ApplicationTest.java b/simple-math/src/test/java/dev/delivercraft/math/gui/ApplicationTest.java
@@ -1,14 +1,8 @@
 package dev.delivercraft.math.gui;
 
-import static org.assertj.core.api.Assertions.assertThat;
-import static org.springframework.test.web.servlet.request.MockMvcRequestBuilders.get;
-import static org.springframework.test.web.servlet.result.MockMvcResultMatchers.status;
-
 import org.htmlunit.WebClient;
-import org.htmlunit.html.HtmlDivision;
 import org.htmlunit.html.HtmlNumberInput;
 import org.htmlunit.html.HtmlPage;
-import java.io.IOException;
 import org.junit.jupiter.api.Test;
 import org.junit.jupiter.params.ParameterizedTest;
 import org.junit.jupiter.params.provider.ValueSource;
@@ -18,9 +12,31 @@
 import org.springframework.test.web.servlet.setup.MockMvcBuilders;
 import org.springframework.web.context.WebApplicationContext;
 
+import java.io.IOException;
+
+import static org.assertj.core.api.Assertions.assertThat;
+import static org.springframework.test.web.servlet.request.MockMvcRequestBuilders.get;
+import static org.springframework.test.web.servlet.result.MockMvcResultMatchers.status;
+
 @WebMvcTest
 class ApplicationTest {
 
+    private static final String BAD_INPUT_MESSAGE = "Enter whole numbers greater than or equal to zero.";
+
+    private static final String FIRST_ID = "firstInput";
+
+    private static final String SECOND_ID = "secondInput";
+
+    private static final String MESSAGE_ID = "validationMessage";
+
+    private static final String ADDITION_ID = "addition";
+
+    private static final String SUBTRACTION_ID = "subtraction";
+
+    private static final String MULTIPLICATION_ID = "multiplication";
+
+    private static final String DIVISION_ID = "division";
+
     private final MockMvc mockMvc;
 
     private final WebClient webClient;
@@ -41,60 +57,105 @@ void indexFileIsAccessibleImplicitlyOrExplicitly(String path) throws Exception {
     void defaultCalculationsAreShown() throws IOException {
         HtmlPage page = getHtmlPage();
 
-        assertThat(firstInputNumberInput(page).getDefaultValue()).isEqualTo("10");
-        assertThat(secondInputNumberInput(page).getDefaultValue()).isEqualTo("5");
-        assertThat(additionDiv(page).getTextContent()).isEqualTo("10 + 5 = 15");
-        assertThat(subtractionDiv(page).getTextContent()).isEqualTo("10 - 5 = 5");
-        assertThat(multiplicationDiv(page).getTextContent()).isEqualTo("10 × 5 = 50");
-        assertThat(divisionDiv(page).getTextContent()).isEqualTo("10 ÷ 5 = 2");
+        assertThat(numberInput(page, FIRST_ID).getDefaultValue()).isEqualTo("10");
+        assertThat(numberInput(page, SECOND_ID).getDefaultValue()).isEqualTo("5");
+        assertThat(text(page, MESSAGE_ID)).isEmpty();
+        assertThat(text(page, ADDITION_ID)).isEqualTo("10 + 5 = 15");
+        assertThat(text(page, SUBTRACTION_ID)).isEqualTo("10 - 5 = 5");
+        assertThat(text(page, MULTIPLICATION_ID)).isEqualTo("10 × 5 = 50");
+        assertThat(text(page, DIVISION_ID)).isEqualTo("10 ÷ 5 = 2");
+    }
+
+    @Test
+    void pageMetadataAndNumberInputConstraintsAreShown() throws IOException {
+        HtmlPage page = getHtmlPage();
+
+        assertThat(page.asXml()).contains("rel=\"icon\"");
+        assertThat(numberInput(page, FIRST_ID).hasAttribute("required")).isTrue();
+        assertThat(numberInput(page, FIRST_ID).getAttribute("min")).isEqualTo("0");
+        assertThat(numberInput(page, FIRST_ID).getAttribute("step")).isEqualTo("1");
+        assertThat(numberInput(page, SECOND_ID).hasAttribute("required")).isTrue();
+        assertThat(numberInput(page, SECOND_ID).getAttribute("min")).isEqualTo("0");
+        assertThat(numberInput(page, SECOND_ID).getAttribute("step")).isEqualTo("1");
     }
 
     @Test
     void calculationsAreUpdatedOnUserInput() throws IOException {
         HtmlPage page = getHtmlPage();
-        HtmlNumberInput firstInput = firstInputNumberInput(page);
-        HtmlNumberInput secondInput = secondInputNumberInput(page);
+        HtmlNumberInput firstInput = numberInput(page, FIRST_ID);
+        HtmlNumberInput secondInput = numberInput(page, SECOND_ID);
 
         firstInput.setValueAttribute("20");
         fireInputEventFor(firstInput);
         secondInput.setValueAttribute("4");
         fireInputEventFor(secondInput);
 
-        assertThat(additionDiv(page).getTextContent()).isEqualTo("20 + 4 = 24");
-        assertThat(subtractionDiv(page).getTextContent()).isEqualTo("20 - 4 = 16");
-        assertThat(multiplicationDiv(page).getTextContent()).isEqualTo("20 × 4 = 80");
-        assertThat(divisionDiv(page).getTextContent()).isEqualTo("20 ÷ 4 = 5");
+        assertThat(text(page, ADDITION_ID)).isEqualTo("20 + 4 = 24");
+        assertThat(text(page, SUBTRACTION_ID)).isEqualTo("20 - 4 = 16");
+        assertThat(text(page, MULTIPLICATION_ID)).isEqualTo("20 × 4 = 80");
+        assertThat(text(page, DIVISION_ID)).isEqualTo("20 ÷ 4 = 5");
+    }
+
+    @ParameterizedTest
+    @ValueSource(strings = {"", "-1", "1.5"})
+    void calculationsAreHiddenWhenInputIsInvalid(String invalidInput) throws IOException {
+        HtmlPage page = getHtmlPage();
+        HtmlNumberInput firstInput = numberInput(page, FIRST_ID);
+
+        firstInput.setValueAttribute(invalidInput);
+        fireInputEventFor(firstInput);
+
+        assertThat(text(page, MESSAGE_ID)).isEqualTo(BAD_INPUT_MESSAGE);
+        assertThat(text(page, ADDITION_ID)).isEmpty();
+        assertThat(text(page, SUBTRACTION_ID)).isEmpty();
+        assertThat(text(page, MULTIPLICATION_ID)).isEmpty();
+        assertThat(text(page, DIVISION_ID)).isEmpty();
+    }
+
+    @Test
+    void validInputClearsValidationMessage() throws IOException {
+        HtmlPage page = getHtmlPage();
+        HtmlNumberInput firstInput = numberInput(page, FIRST_ID);
+
+        firstInput.setValueAttribute("-1");
+        fireInputEventFor(firstInput);
+        firstInput.setValueAttribute("12");
+        fireInputEventFor(firstInput);
+
+        assertThat(text(page, MESSAGE_ID)).isEmpty();
+        assertThat(text(page, ADDITION_ID)).isEqualTo("12 + 5 = 17");
     }
 
     @Test
     void resetToDefaultButtonShouldWork() throws IOException {
         HtmlPage page = getHtmlPage();
-        HtmlNumberInput firstInput = firstInputNumberInput(page);
+        HtmlNumberInput firstInput = numberInput(page, FIRST_ID);
         firstInput.setValueAttribute("20");
         fireInputEventFor(firstInput);
-        HtmlNumberInput secondInput = secondInputNumberInput(page);
+        HtmlNumberInput secondInput = numberInput(page, SECOND_ID);
         secondInput.setValueAttribute("4");
         fireInputEventFor(secondInput);
 
         page = page.getHtmlElementById("resetButton").click();
 
-        assertThat(firstInputNumberInput(page).getValue()).isEqualTo("10");
-        assertThat(secondInputNumberInput(page).getValue()).isEqualTo("5");
-        assertThat(additionDiv(page).getTextContent()).isEqualTo("10 + 5 = 15");
-        assertThat(subtractionDiv(page).getTextContent()).isEqualTo("10 - 5 = 5");
-        assertThat(multiplicationDiv(page).getTextContent()).isEqualTo("10 × 5 = 50");
-        assertThat(divisionDiv(page).getTextContent()).isEqualTo("10 ÷ 5 = 2");
+        assertThat(numberInput(page, FIRST_ID).getValue()).isEqualTo("10");
+        assertThat(numberInput(page, SECOND_ID).getValue()).isEqualTo("5");
+        assertThat(text(page, MESSAGE_ID)).isEmpty();
+        assertThat(text(page, ADDITION_ID)).isEqualTo("10 + 5 = 15");
+        assertThat(text(page, SUBTRACTION_ID)).isEqualTo("10 - 5 = 5");
+        assertThat(text(page, MULTIPLICATION_ID)).isEqualTo("10 × 5 = 50");
+        assertThat(text(page, DIVISION_ID)).isEqualTo("10 ÷ 5 = 2");
     }
 
     @Test
     void divisionByZeroIsHandledProperlyByShowingAMessage() throws IOException {
         HtmlPage page = getHtmlPage();
-        HtmlNumberInput secondInput = secondInputNumberInput(page);
+        HtmlNumberInput secondInput = numberInput(page, SECOND_ID);
 
         secondInput.setValueAttribute("0");
         fireInputEventFor(secondInput);
 
-        assertThat(divisionDiv(page).getTextContent()).isEqualTo("Cannot divide by zero!");
+        assertThat(text(page, DIVISION_ID)).isEqualTo("Cannot divide by zero!");
     }
 
     private HtmlPage getHtmlPage() throws IOException {
@@ -105,27 +166,11 @@ private static void fireInputEventFor(HtmlNumberInput numberInput) {
         numberInput.fireEvent("input");
     }
 
-    private HtmlNumberInput secondInputNumberInput(HtmlPage page) {
-        return page.getHtmlElementById("secondInput");
-    }
-
-    private HtmlNumberInput firstInputNumberInput(HtmlPage page) {
-        return page.getHtmlElementById("firstInput");
-    }
-
-    private HtmlDivision additionDiv(HtmlPage page) {
-        return page.getHtmlElementById("addition");
-    }
-
-    private HtmlDivision subtractionDiv(HtmlPage page) {
-        return page.getHtmlElementById("subtraction");
-    }
-
-    private HtmlDivision multiplicationDiv(HtmlPage page) {
-        return page.getHtmlElementById("multiplication");
+    private static HtmlNumberInput numberInput(HtmlPage page, String elementId) {
+        return page.getHtmlElementById(elementId);
     }
 
-    private HtmlDivision divisionDiv(HtmlPage page) {
-        return page.getHtmlElementById("division");
+    private static String text(HtmlPage page, String elementId) {
+        return page.getHtmlElementById(elementId).getTextContent();
     }
 }
