верстка

.eslintrc.json

@@ -0,0 +1,96 @@
+{
+    "env": {
+        "browser": true,
+        "es2020": true,
+        "node": true
+    },
+    "extends": ["eslint:recommended", "plugin:import/errors", "plugin:import/warnings"],
+    "parserOptions": {
+        "ecmaVersion": 11,
+        "sourceType": "module"
+    },
+    "rules": {
+        "no-console": "warn",
+        "semi": "warn",
+        "quotes": ["warn", "single"],
+        "array-callback-return": [
+            "warn",
+            {
+                "allowImplicit": true,
+                "checkForEach": true
+            }
+        ],
+        "no-trailing-spaces": "warn",
+        "no-unused-vars": "warn",
+        "default-case": "warn",
+        "default-param-last": "warn",
+        "no-alert": "warn",
+        "no-constructor-return": "warn",
+        "no-else-return": "warn",
+        "no-empty-function": "warn",
+        "no-multi-spaces": "warn",
+        "no-multi-str": "warn",
+        "no-new": "warn",
+        "no-param-reassign": "warn",
+        "no-sequences": "warn",
+        "no-useless-concat": "warn",
+        "prefer-promise-reject-errors": "warn",
+        "require-await": "warn",
+        "wrap-iife": ["warn", "inside"],
+        "yoda": "warn",
+        "no-shadow": "warn",
+        "no-use-before-define": "warn",
+        "array-bracket-spacing": ["warn", "never"],
+        "block-spacing": ["warn", "never"],
+        "brace-style": ["warn", "1tbs", {"allowSingleLine": true}],
+        "capitalized-comments": ["warn"],
+        "comma-dangle": ["warn", "only-multiline"],
+        "comma-spacing": ["warn", {"before": false, "after": true}],
+        "computed-property-spacing": ["warn", "never"],
+        "eol-last": ["warn", "always"],
+        "func-call-spacing": ["warn", "never"],
+        "func-style": ["warn", "expression"],
+        "keyword-spacing": ["warn", {"before": true}],
+        "line-comment-position": ["warn", {"position": "above"}],
+        "lines-between-class-members": ["warn", "always"],
+        "max-len": [
+            "warn",
+            {
+                "code": 120,
+                "ignoreComments": true,
+                "ignoreUrls": true,
+                "ignoreStrings": true,
+                "ignoreTemplateLiterals": true,
+                "ignoreRegExpLiterals": true
+            }
+        ],
+        "multiline-comment-style": ["warn", "starred-block"],
+        "new-cap": "warn",
+        "new-parens": "warn",
+        "newline-per-chained-call": ["warn", {"ignoreChainWithDepth": 3}],
+        "no-bitwise": "warn",
+        "no-inline-comments": "warn",
+        "no-lonely-if": "warn",
+        "no-multi-assign": "warn",
+        "no-multiple-empty-lines": ["warn", {"max": 1}],
+        "no-nested-ternary": "warn",
+        "no-plusplus": "warn",
+        "object-curly-spacing": ["warn", "never"],
+        "object-property-newline": ["warn", {"allowAllPropertiesOnSameLine": true}],
+        "key-spacing": ["warn", {"beforeColon": false, "afterColon": true}],
+        "space-before-blocks": "warn",
+        "space-before-function-paren": ["warn", "always"],
+        "space-in-parens": ["warn", "never"],
+        "space-infix-ops": "warn",
+        "arrow-parens": ["warn", "as-needed"],
+        "arrow-spacing": "warn",
+        "no-duplicate-imports": "warn",
+        "no-useless-computed-key": "warn",
+        "no-useless-constructor": "warn",
+        "no-var": "warn",
+        "prefer-const": "warn",
+        "prefer-rest-params": "warn",
+        "prefer-template": "warn",
+        "template-curly-spacing": "warn"
+    }
+}

.prettierc.json

@@ -0,0 +1,12 @@
+{
+    "printWidth": 120,
+    "tabWidth": 4,
+    "useTabs": false,
+    "semi": true,
+    "singleQuote": true,
+    "trailingComma": "all",
+    "bracketSpacing": false,
+    "jsxBracketSameLine": false,
+    "arrowParens": "avoid",
+    "parser": "javascript"
+}

jsconfig.json

@@ -0,0 +1,23 @@
+{
+    "compilerOptions": {
+        "baseUrl": ".",
+        "module": "esnext",
+        "outDir": "./dist/",
+        "target": "es5",
+        "lib": ["dom", "dom.iterable", "esnext"],
+        "skipLibCheck": true,
+        "esModuleInterop": true,
+        "allowSyntheticDefaultImports": true,
+        "forceConsistentCasingInFileNames": true,
+        "noFallthroughCasesInSwitch": true,
+        "moduleResolution": "node",
+        "resolveJsonModule": true,
+        "isolatedModules": false,
+        "noEmit": false,
+        "paths": {
+            "*": ["*"]
+        }
+    },
+    "exclude": ["node_modules"],
+    "include": ["src/**/*.js"]
+}

package.json

@@ -22,6 +22,8 @@
     "devDependencies": {
         "clean-webpack-plugin": "^3.0.0",
         "css-loader": "^5.0.1",
+        "eslint": "^7.19.0",
+        "eslint-plugin-import": "^2.22.1",
         "favicons": "^6.2.0",
         "favicons-webpack-plugin": "^5.0.1",
         "file-loader": "^6.2.0",

public/index.html

@@ -2,50 +2,33 @@
 <html lang="en" class="h-100">
 
 <head>
-    <link rel="apple-touch-icon" sizes="57x57" href="/apple-icon-57x57.png">
-    <link rel="apple-touch-icon" sizes="60x60" href="/apple-icon-60x60.png">
-    <link rel="apple-touch-icon" sizes="72x72" href="/apple-icon-72x72.png">
-    <link rel="apple-touch-icon" sizes="76x76" href="/apple-icon-76x76.png">
-    <link rel="apple-touch-icon" sizes="114x114" href="/apple-icon-114x114.png">
-    <link rel="apple-touch-icon" sizes="120x120" href="/apple-icon-120x120.png">
-    <link rel="apple-touch-icon" sizes="144x144" href="/apple-icon-144x144.png">
-    <link rel="apple-touch-icon" sizes="152x152" href="/apple-icon-152x152.png">
-    <link rel="apple-touch-icon" sizes="180x180" href="/apple-icon-180x180.png">
-    <link rel="icon" type="image/png" sizes="192x192" href="/android-icon-192x192.png">
-    <link rel="icon" type="image/png" sizes="32x32" href="/favicon-32x32.png">
-    <link rel="icon" type="image/png" sizes="96x96" href="/favicon-96x96.png">
-    <link rel="icon" type="image/png" sizes="16x16" href="/favicon-16x16.png">
-    <link rel="manifest" href="/manifest.json">
-    <meta name="msapplication-TileColor" content="#ffffff">
-    <meta name="msapplication-TileImage" content="/ms-icon-144x144.png">
-    <meta name="theme-color" content="#ffffff">
-
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
     <title>Example for kids</title>
-    <link rel="stylesheet" type="text/css" href="./style.css">
 </head>
 
 <body class="h-100">
     <div class="container h-100">
         <div class="row align-items-center justify-content-center h-100">
             <div class="col">
-                <div class="StartPage d-none">
+                <div class="row justify-content-center StartPage d-none">
+                    <form id="start-form" class="col StartPage__container">
                         <div class="mb-3">
                             <label class="form-label" for="startPageNameInput">Введи свое имя:</label>
                             <input class="form-control" id="startPageNameInput" />
                         </div>
 
-                    <button class="btn btn-success" id="start-button" type="button">Старт</button>
+                        <button class="btn btn-success" id="start-button" type="submit" disabled>Старт</button>
+                    </form>
                 </div>
 
                 <div class="GamePage d-none">
                     <div class="input-group example">
-                        <input class="form-control" id="first-input" />
+                        <input class="form-control" id="first-input" type="number" />
                         <span class="input-group-text" id="sign-span">+</span>
-                        <input class="form-control" id="second-input" />
+                        <input class="form-control" id="second-input" type="number" />
                         <span class="input-group-text">=</span>
-                        <input class="form-control" id="sum-input" />
+                        <input class="form-control" id="sum-input" type="number" />
                     </div>
                     <button class="btn btn-warning" id="check-button" type="button">Проверить</button>
                 </div>

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;

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 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 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();
 });
 

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,
+};

src/style.css

@@ -1,3 +1,7 @@
 .input-group.example {
     width: 240px;
 }
+
+.StartPage__container {
+    max-width: 350px;
+}

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',
         }),
     ],
 };