-
-
-
-
+
diff --git a/src/consts.js b/src/consts.js
new file mode 100644
index 0000000..bfb04df
--- /dev/null
+++ b/src/consts.js
@@ -0,0 +1,34 @@
+export const LOCAL_DATA_KEY = 'example-for-kids';
+export const START_PAGE = 'StartPage';
+export const GAME_PAGE = 'GamePage';
+export const RESULT_PAGE = 'ResultPage';
+export const NO_DISPLAY_CLASS = 'd-none';
+export const TEXT_SUCCESS_CLASS = 'text-success';
+export const TEXT_DANGER_CLASS = 'text-danger';
+export const NAME_INPUT_ID = 'startPageNameInput';
+
+export const START_BUTTON_ID = 'start-button';
+export const CHECK_BUTTON_ID = 'check-button';
+export const REPEAT_BUTTON_ID = 'repeat-button';
+
+export const START_FORM_ID = 'start-form';
+
+export const FIRST_INPUT_ID = 'first-input';
+export const SECOND_INPUT_ID = 'second-input';
+export const SUM_INPUT_ID = 'sum-input';
+export const RESULT_CONTAINER_ID = 'result-container';
+export const SIGN_SPAN_ID = 'sign-span';
+
+export const EXAMPLE_TYPE = {
+ PLUS: '+',
+ MINUS: '-',
+};
+
+export const EVENTS = {
+ CLICK: 'click',
+ INPUT: 'input',
+ SUBMIT: 'submit',
+};
+
+export const MAX_NUMBER = 10;
+export const MAX_COUNT_EXAMPLES = 10;
diff --git a/src/script.js b/src/script.js
index a3a3808..67bc9e3 100644
--- a/src/script.js
+++ b/src/script.js
@@ -1,38 +1,28 @@
import 'bootstrap';
import 'bootstrap/dist/css/bootstrap.min.css';
+import {
+ GAME_PAGE,
+ START_PAGE,
+ RESULT_PAGE,
+ FIRST_INPUT_ID,
+ SECOND_INPUT_ID,
+ SUM_INPUT_ID,
+ NAME_INPUT_ID,
+ CHECK_BUTTON_ID,
+ START_BUTTON_ID,
+ REPEAT_BUTTON_ID,
+ RESULT_CONTAINER_ID,
+ SIGN_SPAN_ID,
+ TEXT_SUCCESS_CLASS,
+ TEXT_DANGER_CLASS,
+ NO_DISPLAY_CLASS,
+ MAX_NUMBER,
+ EXAMPLE_TYPE,
+ MAX_COUNT_EXAMPLES,
+ EVENTS,
+ START_FORM_ID,
+} from './consts';
import './style.css';
-// TODO скрыть переменные
-
-const LOCAL_DATA_KEY = 'example-for-kids';
-const START_PAGE = 'StartPage';
-const GAME_PAGE = 'GamePage';
-const RESULT_PAGE = 'ResultPage';
-const NO_DISPLAY_CLASS = 'd-none';
-const TEXT_SUCCESS_CLASS = 'text-success';
-const TEXT_DANGER_CLASS = 'text-danger';
-const NAME_INPUT_ID = 'startPageNameInput';
-
-const START_BUTTON_ID = 'start-button';
-const CHECK_BUTTON_ID = 'check-button';
-const REPEAT_BUTTON_ID = 'repeat-button';
-
-const FIRST_INPUT_ID = 'first-input';
-const SECOND_INPUT_ID = 'second-input';
-const SUM_INPUT_ID = 'sum-input';
-const RESULT_CONTAINER_ID = 'result-container';
-const SIGN_SPAN_ID = 'sign-span';
-
-const EXAMPLE_TYPE = {
- PLUS: '+',
- MINUS: '-',
-};
-
-const EVENTS = {
- CLICK: 'click',
-};
-
-const MAX_NUMBER = 10;
-const MAX_COUNT_EXAMPLES = 10;
let store = {
page: START_PAGE,
@@ -54,11 +44,9 @@ const startButton = document.querySelector(`#${START_BUTTON_ID}`);
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 getRandomNumber = (maxNumber) => Math.round(Math.random() * maxNumber);
-const getFirstNumber = () => getRandomNumber(MAX_NUMBER);
-const getSecondNumber = (firstNumber) => getRandomNumber(MAX_NUMBER - firstNumber);
-const getSum = (first, second) => first + second;
+const getRandomNumber = maxNumber => Math.round(Math.random() * maxNumber);
const getPlusExample = () => {
const first = getRandomNumber(MAX_NUMBER);
@@ -80,7 +68,7 @@ const getMinusExample = () => {
first,
second,
sum: first - second,
- type: EXAMPLE_TYPE.MINUS
+ type: EXAMPLE_TYPE.MINUS,
};
};
@@ -89,20 +77,9 @@ const getExample = () => {
switch (exampleOrder) {
case 0:
return getPlusExample();
- case 1:
+ default:
return getMinusExample();
}
-}
-
-const getData = (defaultData) => {
- try {
- return JSON.parse(localStorage.getItem(LOCAL_DATA_KEY)) || defaultData;
- } catch (e) {
- return defaultData;
- }
-};
-const setData = (data) => {
- localStorage.setItem(LOCAL_DATA_KEY, JSON.stringify(data));
};
const removeRandom = ({first, second, sum, type}) => {
@@ -113,7 +90,7 @@ const removeRandom = ({first, second, sum, type}) => {
sum: miss !== 2 ? sum : '',
type,
};
-}
+};
const setInput = (input, value) => {
input.value = value;
@@ -122,7 +99,7 @@ const setInput = (input, value) => {
const setTextContainer = (container, value) => {
container.textContent = value;
-}
+};
const setInputs = ({first, second, sum, type}) => {
setInput(firstInput, first);
@@ -210,7 +187,12 @@ const startGame = () => {
}
};
-startButton.addEventListener(EVENTS.CLICK, () => {
+nameInput.addEventListener(EVENTS.INPUT, () => {
+ startButton.disabled = !nameInput.value;
+});
+
+startForm.addEventListener(EVENTS.SUBMIT, event => {
+ event.preventDefault();
startGame();
});
diff --git a/src/services/ExampleService.js b/src/services/ExampleService.js
new file mode 100644
index 0000000..e69de29
diff --git a/src/services/LocalDataService.js b/src/services/LocalDataService.js
new file mode 100644
index 0000000..f189288
--- /dev/null
+++ b/src/services/LocalDataService.js
@@ -0,0 +1,17 @@
+import {LOCAL_DATA_KEY} from '../consts';
+
+const getData = defaultData => {
+ try {
+ return JSON.parse(localStorage.getItem(LOCAL_DATA_KEY)) || defaultData;
+ } catch (e) {
+ return defaultData;
+ }
+};
+const setData = data => {
+ localStorage.setItem(LOCAL_DATA_KEY, JSON.stringify(data));
+};
+
+export const LocalDataService = {
+ getData,
+ setData,
+};
diff --git a/src/style.css b/src/style.css
index 6c393b9..7f95245 100644
--- a/src/style.css
+++ b/src/style.css
@@ -1,3 +1,7 @@
.input-group.example {
width: 240px;
}
+
+.StartPage__container {
+ max-width: 350px;
+}
diff --git a/webpack.config.js b/webpack.config.js
index 530ae8a..b8497ac 100644
--- a/webpack.config.js
+++ b/webpack.config.js
@@ -39,7 +39,7 @@ module.exports = {
new MiniCssExtractPlugin(),
new FaviconsWebpackPlugin({
logo: './public/icon-512x512.png',
- manifest: './public/manifest.json'
+ manifest: './public/manifest.json',
}),
],
-};
\ No newline at end of file
+};