vigdorov/examples-for-kids
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Добавлен сброс

Browse Source
This commit is contained in:
Николай Вигдоров
2021-02-06 17:55:18 +03:00
parent 34227e777a
commit d6a420baf2
4 changed files with 28 additions and 7 deletions
Download Patch File Download Diff File Expand all files Collapse all files

7
public/index.html
View File

@ -3,13 +3,17 @@
<head> <head>
<meta charset="UTF-8"> <meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0">
<title>Example for kids</title> <title>Example for kids</title>
</head> </head>
<body class="h-100"> <body class="h-100">
<div class="container h-100"> <div class="container h-100">
<div class="d-flex justify-content-end pt-3">
<button class="btn btn-primary" type="button" id="reset-button"><i class="fas fa-sync"></i></button>
</div>
<div class="row align-items-center justify-content-center h-100"> <div class="row align-items-center justify-content-center h-100">
<div class="col"> <div class="col">
<div class="row justify-content-center StartPage d-none"> <div class="row justify-content-center StartPage d-none">
<form id="start-form" class="col StartPage__container"> <form id="start-form" class="col StartPage__container">
@ -42,6 +46,7 @@
</div> </div>
</div> </div>
</div> </div>
<script src="https://kit.fontawesome.com/008e1ef4e8.js" crossorigin="anonymous"></script>
</body> </body>
</html> </html>

9
src/consts.js
View File

@ -10,6 +10,7 @@ export const NAME_INPUT_ID = 'startPageNameInput';
export const START_BUTTON_ID = 'start-button'; export const START_BUTTON_ID = 'start-button';
export const CHECK_BUTTON_ID = 'check-button'; export const CHECK_BUTTON_ID = 'check-button';
export const REPEAT_BUTTON_ID = 'repeat-button'; export const REPEAT_BUTTON_ID = 'repeat-button';
export const RESET_BUTTON_ID = 'reset-button';
export const START_FORM_ID = 'start-form'; export const START_FORM_ID = 'start-form';
export const EXAMPLE_FORM_ID = 'form-example'; export const EXAMPLE_FORM_ID = 'form-example';
@ -33,3 +34,11 @@ export const EVENTS = {
export const MAX_NUMBER = 10; export const MAX_NUMBER = 10;
export const MAX_COUNT_EXAMPLES = 10; export const MAX_COUNT_EXAMPLES = 10;
export const DEFAULT_STORE = {
page: START_PAGE,
results: [],
userName: '',
answerCount: 0,
currentExample: {},
};

17
src/script.js
View File

@ -22,15 +22,13 @@ import {
EVENTS, EVENTS,
START_FORM_ID, START_FORM_ID,
EXAMPLE_FORM_ID, EXAMPLE_FORM_ID,
RESET_BUTTON_ID,
DEFAULT_STORE,
} from './consts'; } from './consts';
import './style.css'; import './style.css';
let store = { let store = {
page: START_PAGE, ...DEFAULT_STORE,
results: [],
userName: '',
answerCount: 0,
currentExample: {},
}; };
const startPage = document.querySelector(`.${START_PAGE}`); 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 checkButton = document.querySelector(`#${CHECK_BUTTON_ID}`);
const startButton = document.querySelector(`#${START_BUTTON_ID}`); const startButton = document.querySelector(`#${START_BUTTON_ID}`);
const repeatButton = document.querySelector(`#${REPEAT_BUTTON_ID}`); const repeatButton = document.querySelector(`#${REPEAT_BUTTON_ID}`);
const resetButton = document.querySelector(`#${RESET_BUTTON_ID}`);
const resultContainer = document.querySelector(`#${RESULT_CONTAINER_ID}`); const resultContainer = document.querySelector(`#${RESULT_CONTAINER_ID}`);
const signSpan = document.querySelector(`#${SIGN_SPAN_ID}`); const signSpan = document.querySelector(`#${SIGN_SPAN_ID}`);
const startForm = document.querySelector(`#${START_FORM_ID}`); const startForm = document.querySelector(`#${START_FORM_ID}`);
@ -242,4 +241,12 @@ repeatButton.addEventListener(EVENTS.CLICK, () => {
renderPage(); renderPage();
}); });
resetButton.addEventListener(EVENTS.CLICK, () => {
store = {
...DEFAULT_STORE,
};
nameInput.value = '';
renderPage();
});
renderPage(); renderPage();

2
src/style.css
View File

@ -1,6 +1,6 @@
.input-group.example { .input-group.example {
width: 240px; width: 240px;
margin-bottom: 80px; margin-bottom: 30px;
} }
.StartPage__container { .StartPage__container {