diff --git a/public/index.html b/public/index.html index f035330..127045c 100644 --- a/public/index.html +++ b/public/index.html @@ -3,13 +3,17 @@ - + Example for kids
+
+ +
+
@@ -42,6 +46,7 @@
+ \ No newline at end of file diff --git a/src/consts.js b/src/consts.js index a4b5f87..f99a83f 100644 --- a/src/consts.js +++ b/src/consts.js @@ -10,6 +10,7 @@ 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 RESET_BUTTON_ID = 'reset-button'; export const START_FORM_ID = 'start-form'; export const EXAMPLE_FORM_ID = 'form-example'; @@ -33,3 +34,11 @@ export const EVENTS = { export const MAX_NUMBER = 10; export const MAX_COUNT_EXAMPLES = 10; + +export const DEFAULT_STORE = { + page: START_PAGE, + results: [], + userName: '', + answerCount: 0, + currentExample: {}, +}; diff --git a/src/script.js b/src/script.js index 559e14b..478f4f3 100644 --- a/src/script.js +++ b/src/script.js @@ -22,15 +22,13 @@ import { EVENTS, START_FORM_ID, EXAMPLE_FORM_ID, + RESET_BUTTON_ID, + DEFAULT_STORE, } from './consts'; import './style.css'; let store = { - page: START_PAGE, - results: [], - userName: '', - answerCount: 0, - currentExample: {}, + ...DEFAULT_STORE, }; const startPage = document.querySelector(`.${START_PAGE}`); @@ -43,6 +41,7 @@ const nameInput = document.querySelector(`#${NAME_INPUT_ID}`); const checkButton = document.querySelector(`#${CHECK_BUTTON_ID}`); const startButton = document.querySelector(`#${START_BUTTON_ID}`); const repeatButton = document.querySelector(`#${REPEAT_BUTTON_ID}`); +const resetButton = document.querySelector(`#${RESET_BUTTON_ID}`); const resultContainer = document.querySelector(`#${RESULT_CONTAINER_ID}`); const signSpan = document.querySelector(`#${SIGN_SPAN_ID}`); const startForm = document.querySelector(`#${START_FORM_ID}`); @@ -242,4 +241,12 @@ repeatButton.addEventListener(EVENTS.CLICK, () => { renderPage(); }); +resetButton.addEventListener(EVENTS.CLICK, () => { + store = { + ...DEFAULT_STORE, + }; + nameInput.value = ''; + renderPage(); +}); + renderPage(); diff --git a/src/style.css b/src/style.css index e18590f..022fcd0 100644 --- a/src/style.css +++ b/src/style.css @@ -1,6 +1,6 @@ .input-group.example { width: 240px; - margin-bottom: 80px; + margin-bottom: 30px; } .StartPage__container {