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 @@
-
-
-
- +
-
- =
-
-
-
+
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;
+}