From 34227e777ae16c703f4cbfbf1c97ae1dae0bd8ba Mon Sep 17 00:00:00 2001
From: vigdorov <vignikbor@gmail.com>
Date: Sat, 6 Feb 2021 17:33:50 +0300
Subject: [PATCH] =?UTF-8?q?=D0=90=D0=B2=D1=82=D0=BE=D1=84=D0=BE=D0=BA?=
 =?UTF-8?q?=D1=83=D1=81,=20=D0=B2=D1=8B=D0=BA=D0=BB=D1=8E=D1=87=D0=B5?=
 =?UTF-8?q?=D0=BD=D0=B8=D0=B5=20=D0=BA=D0=BD=D0=BE=D0=BF=D0=BE=D0=BA,=20?=
 =?UTF-8?q?=D0=B2=D0=B0=D0=BB=D0=B8=D0=B4=D0=B0=D1=86=D0=B8=D1=8F,=20?=
 =?UTF-8?q?=D0=BF=D0=B5=D1=80=D0=B5=D1=85=D0=BE=D0=B4=20=D0=BF=D0=BE=20ent?=
 =?UTF-8?q?er?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 public/index.html | 20 +++++++++++---------
 src/consts.js     |  1 +
 src/script.js     | 44 +++++++++++++++++++++++++++++++++++---------
 src/style.css     | 11 +++++++++++
 4 files changed, 58 insertions(+), 18 deletions(-)

diff --git a/public/index.html b/public/index.html
index b212455..f035330 100644
--- a/public/index.html
+++ b/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">
diff --git a/src/consts.js b/src/consts.js
index bfb04df..a4b5f87 100644
--- a/src/consts.js
+++ b/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';
diff --git a/src/script.js b/src/script.js
index 67bc9e3..559e14b 100644
--- a/src/script.js
+++ b/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();
+        }
     }
 });
 
diff --git a/src/style.css b/src/style.css
index 7f95245..e18590f 100644
--- a/src/style.css
+++ b/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;
+}