feat: add multiplication (#1)

public/index.html

@@ -23,6 +23,7 @@
                         </div>
 
                         <div class="mb-3">
+                            <div class="h4">Сложение и вычитание</div>
                             <div>Выберите сложность:</div>
                             <div class="row">
                                 <button class="btn btn-info" type="submit" id="start-button-easy" disabled>Легко (10)</button>
@@ -30,6 +31,14 @@
                                 <button class="btn btn-danger" type="submit" id="start-button-hard" disabled>Сложно (100)</button>
                             </div>
                         </div>
+                        <div class="mb-3">
+                            <div class="h4">Умножение и деление</div>
+                            <div>Выберите сложность:</div>
+                            <div class="row">
+                                <button class="btn btn-warning" type="submit" id="start-multi-button-normal" disabled>Нормально (10)</button>
+                                <button class="btn btn-danger" type="submit" id="start-multi-button-hard" disabled>Сложно (20)</button>
+                            </div>
+                        </div>
                     </form>
                 </div>
 

src/consts.js

@@ -13,6 +13,9 @@ export const START_BUTTON_EASY_ID = 'start-button-easy';
 export const START_BUTTON_NORMAL_ID = 'start-button-normal';
 export const START_BUTTON_HARD_ID = 'start-button-hard';
 
+export const START_MULTI_BUTTON_NORMAL_ID = 'start-multi-button-normal';
+export const START_MULTI_BUTTON_HARD_ID = 'start-multi-button-hard';
+
 export const CHECK_BUTTON_ID = 'check-button';
 export const REPEAT_BUTTON_ID = 'repeat-button';
 export const RESET_BUTTON_ID = 'reset-button';
@@ -26,9 +29,16 @@ export const SUM_INPUT_ID = 'sum-input';
 export const RESULT_CONTAINER_ID = 'result-container';
 export const SIGN_SPAN_ID = 'sign-span';
 
+export const KIND = {
+    PLUS_MINUS: 'PLUS_MINUS',
+    MULTI_DIVISION: 'MULTI_DIVISION',
+};
+
 export const EXAMPLE_TYPE = {
     PLUS: '+',
     MINUS: '-',
+    MULTI: '*',
+    DIVISION: '/',
 };
 
 export const EVENTS = {
@@ -41,6 +51,8 @@ export const DIFFICULTY = {
     [START_BUTTON_EASY_ID]: 10,
     [START_BUTTON_NORMAL_ID]: 20,
     [START_BUTTON_HARD_ID]: 100,
+    [START_MULTI_BUTTON_NORMAL_ID]: 10,
+    [START_MULTI_BUTTON_HARD_ID]: 20,
 };
 
 export const MAX_COUNT_EXAMPLES = 10;

src/script.js

@@ -12,6 +12,8 @@ import {
     START_BUTTON_EASY_ID,
     START_BUTTON_NORMAL_ID,
     START_BUTTON_HARD_ID,
+    START_MULTI_BUTTON_NORMAL_ID,
+    START_MULTI_BUTTON_HARD_ID,
     REPEAT_BUTTON_ID,
     RESULT_CONTAINER_ID,
     SIGN_SPAN_ID,
@@ -26,6 +28,7 @@ import {
     RESET_BUTTON_ID,
     DEFAULT_STORE,
     DIFFICULTY,
+    KIND,
 } from './consts';
 import './style.css';
 
@@ -46,6 +49,9 @@ const startButtonEasy = document.querySelector(`#${START_BUTTON_EASY_ID}`);
 const startButtonNormal = document.querySelector(`#${START_BUTTON_NORMAL_ID}`);
 const startButtonHard = document.querySelector(`#${START_BUTTON_HARD_ID}`);
 
+const startButtonMultiNormal = document.querySelector(`#${START_MULTI_BUTTON_NORMAL_ID}`);
+const startButtonMultiHard = document.querySelector(`#${START_MULTI_BUTTON_HARD_ID}`);
+
 const repeatButton = document.querySelector(`#${REPEAT_BUTTON_ID}`);
 const resetButton = document.querySelector(`#${RESET_BUTTON_ID}`);
 const resultContainer = document.querySelector(`#${RESULT_CONTAINER_ID}`);
@@ -79,20 +85,62 @@ const getMinusExample = () => {
     };
 };
 
-const getExample = () => {
-    const exampleOrder = getRandomNumber(1);
-    switch (exampleOrder) {
-        case 0:
-            return getPlusExample();
-        default:
-            return getMinusExample();
-    }
+const getMultiplicationExample = () => {
+    const first = getRandomNumber(store.difficulty);
+    const second = getRandomNumber(store.difficulty);
+
+    return {
+        first,
+        second,
+        sum: first * second,
+        type: EXAMPLE_TYPE.MULTI,
+    };
 };
 
-const getDifficulty = id => {
+const getDivisionExample = () => {
+    const first = getRandomNumber(store.difficulty);
+    const second = getRandomNumber(store.difficulty);
+    const result = first * second;
+
+    return {
+        first: result,
+        second,
+        sum: first,
+        type: EXAMPLE_TYPE.DIVISION,
+    };
+};
+
+const getExample = () => {
+    const isPlusMinusKind = store.kind === KIND.PLUS_MINUS;
+
+    const exampleOrder = getRandomNumber(1);
+
+    switch (exampleOrder) {
+        case 0:
+            return isPlusMinusKind ? getPlusExample() : getMultiplicationExample();
+        default:
+            return isPlusMinusKind ? getMinusExample() : getDivisionExample();
+    }
+
+};
+
+const getDifficultyById = id => {
     return DIFFICULTY[id];
 };
 
+const getExampleKindById = id => {
+    switch (id) {
+        case START_BUTTON_EASY_ID:
+        case START_BUTTON_NORMAL_ID:
+        case START_BUTTON_HARD_ID: {
+            return KIND.PLUS_MINUS;
+        }
+        default: {
+            return KIND.MULTI_DIVISION;
+        }
+    }
+};
+
 const removeRandom = ({first, second, sum, type}) => {
     const miss = getRandomNumber(2);
     return {
@@ -200,7 +248,8 @@ const startGame = id => {
             results: [],
             answerCount: 0,
             currentExample: {},
-            difficulty: id ? getDifficulty(id) : store.difficulty,
+            difficulty: id ? getDifficultyById(id) : store.difficulty,
+            kind: getExampleKindById(id),
         };
         renderPage();
         setExample();
@@ -224,6 +273,8 @@ const validateNameInput = () => {
     startButtonEasy.disabled = !nameInput.value;
     startButtonNormal.disabled = !nameInput.value;
     startButtonHard.disabled = !nameInput.value;
+    startButtonMultiNormal.disabled = !nameInput.value;
+    startButtonMultiHard.disabled = !nameInput.value;
 };
 
 nameInput.addEventListener(EVENTS.INPUT, validateNameInput);