Автофокус, выключение кнопок, валидация, переход по enter

public/index.html

@@ -22,15 +22,17 @@
                     </form>
                 </div>
 
-                <div class="GamePage d-none">
-                    <div class="input-group example">
-                        <input class="form-control" id="first-input" type="number" pattern="\d*" />
-                        <span class="input-group-text" id="sign-span">+</span>
-                        <input class="form-control" id="second-input" type="number" pattern="\d*" />
-                        <span class="input-group-text">=</span>
-                        <input class="form-control" id="sum-input" type="number" pattern="\d*" />
-                    </div>
-                    <button class="btn btn-warning" id="check-button" type="button">Проверить</button>
+                <div class="row justify-content-center GamePage d-none">
+                    <form class="col GamePage__container" id="form-example">
+                        <div class="input-group example">
+                            <input class="form-control" id="first-input" type="number" pattern="\d*" />
+                            <span class="input-group-text" id="sign-span">+</span>
+                            <input class="form-control" id="second-input" type="number" pattern="\d*" />
+                            <span class="input-group-text">=</span>
+                            <input class="form-control" id="sum-input" type="number" pattern="\d*" />
+                        </div>
+                        <button class="btn btn-warning" id="check-button" type="submit">Проверить</button>
+                    </form>
                 </div>
 
                 <div class="ResultPage d-none">

src/consts.js

@@ -12,6 +12,7 @@ export const CHECK_BUTTON_ID = 'check-button';
 export const REPEAT_BUTTON_ID = 'repeat-button';
 
 export const START_FORM_ID = 'start-form';
+export const EXAMPLE_FORM_ID = 'form-example';
 
 export const FIRST_INPUT_ID = 'first-input';
 export const SECOND_INPUT_ID = 'second-input';

src/script.js

@@ -21,6 +21,7 @@ import {
     MAX_COUNT_EXAMPLES,
     EVENTS,
     START_FORM_ID,
+    EXAMPLE_FORM_ID,
 } from './consts';
 import './style.css';
 
@@ -45,6 +46,7 @@ const repeatButton = document.querySelector(`#${REPEAT_BUTTON_ID}`);
 const resultContainer = document.querySelector(`#${RESULT_CONTAINER_ID}`);
 const signSpan = document.querySelector(`#${SIGN_SPAN_ID}`);
 const startForm = document.querySelector(`#${START_FORM_ID}`);
+const exampleForm = document.querySelector(`#${EXAMPLE_FORM_ID}`);
 
 const getRandomNumber = maxNumber => Math.round(Math.random() * maxNumber);
 
@@ -95,6 +97,9 @@ const removeRandom = ({first, second, sum, type}) => {
 const setInput = (input, value) => {
     input.value = value;
     input.disabled = value !== '';
+    if (value === '') {
+        input.focus();
+    }
 };
 
 const setTextContainer = (container, value) => {
@@ -121,6 +126,7 @@ const setExample = () => {
     const {first, second, sum, type} = getExample();
     store.currentExample = {first, second, sum, type};
     setInputs(removeRandom({first, second, sum, type}));
+    checkButton.disabled = true;
 };
 
 const isEqual = (origin, answer) => {
@@ -170,6 +176,10 @@ const renderPage = () => {
             page.classList.add(NO_DISPLAY_CLASS);
         }
     });
+
+    if (store.page === START_PAGE) {
+        nameInput.focus();
+    }
 };
 
 const startGame = () => {
@@ -184,9 +194,22 @@ const startGame = () => {
         };
         renderPage();
         setExample();
+        checkButton.disabled = true;
     }
 };
 
+const isNotEmptyInputs = ({first, second, sum}) => {
+    return first !== '' && second !== '' && sum !== '';
+};
+
+const checkInput = () => {
+    checkButton.disabled = !isNotEmptyInputs(getInputs());
+};
+
+firstInput.addEventListener(EVENTS.INPUT, checkInput);
+secondInput.addEventListener(EVENTS.INPUT, checkInput);
+sumInput.addEventListener(EVENTS.INPUT, checkInput);
+
 nameInput.addEventListener(EVENTS.INPUT, () => {
     startButton.disabled = !nameInput.value;
 });
@@ -196,17 +219,20 @@ startForm.addEventListener(EVENTS.SUBMIT, event => {
     startGame();
 });
 
-checkButton.addEventListener(EVENTS.CLICK, () => {
+exampleForm.addEventListener(EVENTS.SUBMIT, event => {
+    event.preventDefault();
     const origin = store.currentExample;
     const answer = getInputs();
-    store.results.push({origin, answer});
-    store.answerCount += 1;
-    if (store.answerCount < MAX_COUNT_EXAMPLES) {
-        setExample();
-    } else {
-        store.page = RESULT_PAGE;
-        renderResult();
-        renderPage();
+    if (isNotEmptyInputs(answer)) {
+        store.results.push({origin, answer});
+        store.answerCount += 1;
+        if (store.answerCount < MAX_COUNT_EXAMPLES) {
+            setExample();
+        } else {
+            store.page = RESULT_PAGE;
+            renderResult();
+            renderPage();
+        }
     }
 });
 

src/style.css

@@ -1,7 +1,18 @@
 .input-group.example {
     width: 240px;
+    margin-bottom: 80px;
 }
 
 .StartPage__container {
     max-width: 350px;
 }
+
+.GamePage__container {
+    max-width: 350px;
+}
+
+input::-webkit-outer-spin-button,
+input::-webkit-inner-spin-button {
+    -webkit-appearance: none;
+    margin: 0;
+}