From 0b6f1d62770ffa45651899b023bdc1e6e328bdc0 Mon Sep 17 00:00:00 2001 From: Olha Brozhenets Date: Thu, 27 Jan 2022 15:17:29 +0200 Subject: [PATCH 1/2] adds forms submit --- .../4-forms-submit/1-modal-dialog/solution.md | 8 +-- .../1-modal-dialog/solution.view/index.html | 18 +++--- .../1-modal-dialog/source.view/index.html | 6 +- .../4-forms-submit/1-modal-dialog/task.md | 28 +++++----- .../4-forms-submit/article.md | 56 +++++++++---------- 5 files changed, 58 insertions(+), 58 deletions(-) diff --git a/2-ui/4-forms-controls/4-forms-submit/1-modal-dialog/solution.md b/2-ui/4-forms-controls/4-forms-submit/1-modal-dialog/solution.md index 781ce5d58..55a28b085 100644 --- a/2-ui/4-forms-controls/4-forms-submit/1-modal-dialog/solution.md +++ b/2-ui/4-forms-controls/4-forms-submit/1-modal-dialog/solution.md @@ -1,4 +1,4 @@ -A modal window can be implemented using a half-transparent `
` that covers the whole window, like this: +Модальне вікно можна реалізувати за допомогою напівпрозорого `
, який охоплює все вікно, наприклад: ```css #cover-div { @@ -13,8 +13,8 @@ A modal window can be implemented using a half-transparent `
} ``` -Because the `
` covers everything, it gets all clicks, not the page below it. +Оскільки `
` перекриває всі елементи, то саме він отримує всі кліки. -Also we can prevent page scroll by setting `body.style.overflowY='hidden'`. +Також ми можемо запобігти прокручуванню сторінки, налаштувавши `body.style.overflowY='hidden'`. -The form should be not in the `
`, but next to it, because we don't want it to have `opacity`. +Форма повинна бути не в `
`, а поряд з ним, тому що ми не хочемо, щоб вона мала `opacity`. diff --git a/2-ui/4-forms-controls/4-forms-submit/1-modal-dialog/solution.view/index.html b/2-ui/4-forms-controls/4-forms-submit/1-modal-dialog/solution.view/index.html index ec9e1b5ee..65c615c56 100644 --- a/2-ui/4-forms-controls/4-forms-submit/1-modal-dialog/solution.view/index.html +++ b/2-ui/4-forms-controls/4-forms-submit/1-modal-dialog/solution.view/index.html @@ -8,9 +8,9 @@ -

Click the button below

+

Клікніть на кнопку нижче

- +
@@ -18,18 +18,18 @@

Click the button below

- +
diff --git a/2-ui/4-forms-controls/4-forms-submit/1-modal-dialog/source.view/index.html b/2-ui/4-forms-controls/4-forms-submit/1-modal-dialog/source.view/index.html index 230a51174..bf7459487 100644 --- a/2-ui/4-forms-controls/4-forms-submit/1-modal-dialog/source.view/index.html +++ b/2-ui/4-forms-controls/4-forms-submit/1-modal-dialog/source.view/index.html @@ -11,11 +11,11 @@
-
Enter something... -
Please..
+
Введіть щось... +
Будь-ласка..
- +
diff --git a/2-ui/4-forms-controls/4-forms-submit/1-modal-dialog/task.md b/2-ui/4-forms-controls/4-forms-submit/1-modal-dialog/task.md index bf6841c92..1842c3cac 100644 --- a/2-ui/4-forms-controls/4-forms-submit/1-modal-dialog/task.md +++ b/2-ui/4-forms-controls/4-forms-submit/1-modal-dialog/task.md @@ -2,32 +2,32 @@ importance: 5 --- -# Modal form +# Модальна форма -Create a function `showPrompt(html, callback)` that shows a form with the message `html`, an input field and buttons `OK/CANCEL`. +Створіть функцію `showPrompt(html, callback)`, яка показує форму з повідомленням `html`, полем введення та кнопками `OK/СКАСУВАТИ`. -- A user should type something into a text field and press `key:Enter` or the OK button, then `callback(value)` is called with the value they entered. -- Otherwise if the user presses `key:Esc` or CANCEL, then `callback(null)` is called. +- Користувач повинен ввести щось у текстове поле і натиснути `key:Enter` або кнопку ОК, після чого буде викликано `callback(value)` з введеним значенням. +- В іншому випадку, якщо користувач натискає `key:Esc` або СКАСУВАТИ, тоді викликається `callback(null)`. -In both cases that ends the input process and removes the form. +В обох випадках це завершує процес введення та видаляє форму. -Requirements: +Вимоги: -- The form should be in the center of the window. -- The form is *modal*. In other words, no interaction with the rest of the page is possible until the user closes it. -- When the form is shown, the focus should be inside the `` for the user. -- Keys `key:Tab`/`key:Shift+Tab` should shift the focus between form fields, don't allow it to leave for other page elements. +- Форма повинна знаходитися в центрі вікна. +- Форма -- це *модальне вікно*. Іншими словами, жодна взаємодія з іншою частиною сторінки неможлива, поки користувач не закриє її. +- Коли відображається форма, фокус має бути всередині `` для користувача. +- Клавіші `key:Tab`/`key:Shift+Tab` повинні зміщувати фокус між полями форми, не дозволяючи йому залишати форму і переходити на інші елементи сторінки. -Usage example: +Приклад використання: ```js -showPrompt("Enter something
...smart :)", function(value) { +showPrompt("Введіть щось
...розумне :)", function(value) { alert(value); }); ``` -A demo in the iframe: +Демо в iframe: [iframe src="solution" height=160 border=1] -P.S. The source document has HTML/CSS for the form with fixed positioning, but it's up to you to make it modal. +P.S. У вихідному документі є HTML/CSS для форми з фіксованим позиціонуванням, але ви можете зробити її модальною. diff --git a/2-ui/4-forms-controls/4-forms-submit/article.md b/2-ui/4-forms-controls/4-forms-submit/article.md index c00c559c0..1aa7151cf 100644 --- a/2-ui/4-forms-controls/4-forms-submit/article.md +++ b/2-ui/4-forms-controls/4-forms-submit/article.md @@ -1,64 +1,64 @@ -# Forms: event and method submit +# Форми: подія та метод submit -The `submit` event triggers when the form is submitted, it is usually used to validate the form before sending it to the server or to abort the submission and process it in JavaScript. +Подія `submit` ініціюється, коли форма надсилається. Зазвичай використовується для перевірки форми перед відправкою на сервер або щоб запобігти її відправленню та обробці в JavaScript. -The method `form.submit()` allows to initiate form sending from JavaScript. We can use it to dynamically create and send our own forms to server. +Метод `form.submit()` дозволяє ініціювати відправку форми за допомогою JavaScript. Ми можемо використовувати його для динамічного створення та надсилання власних форм на сервер. -Let's see more details of them. +Давайте розглянемо їх докладніше. -## Event: submit +## Подія: submit -There are two main ways to submit a form: +Існує два основних способи надіслати форму: -1. The first -- to click `` or ``. -2. The second -- press `key:Enter` on an input field. +1. Перший -- клікнути `` або ``. +2. Другий -- натиснути `key:Enter` у полі введення. -Both actions lead to `submit` event on the form. The handler can check the data, and if there are errors, show them and call `event.preventDefault()`, then the form won't be sent to the server. +Обидві дії призводять до події `submit` у формі. Обробник може перевірити дані, і якщо є помилки, показати їх і викликати `event.preventDefault()`, тоді форму не буде відправлено на сервер. -In the form below: -1. Go into the text field and press `key:Enter`. -2. Click ``. +У формі нижче: +1. Перейдіть у текстове поле і натисніть `key:Enter`. +2. Клікніть ``. -Both actions show `alert` and the form is not sent anywhere due to `return false`: +Обидві дії показують `alert`, і форма нікуди не надсилається через `return false`: ```html autorun height=60 no-beautify -
- First: Enter in the input field
- Second: Click "submit": + + Перший приклад: натисніть Enter
+ Другий приклад: клікніть "Надіслати":
``` -````smart header="Relation between `submit` and `click`" -When a form is sent using `key:Enter` on an input field, a `click` event triggers on the ``. +````smart header="Зв’язок між `submit` та `click`" +Коли форма надсилається за допомогою `key:Enter` у полі введення, запускається подія `click` на ``. -That's rather funny, because there was no click at all. +Це досить смішно, тому що кліку взагалі не було. -Here's the demo: +Ось демо: ```html autorun height=60
- - + +
``` ```` -## Method: submit +## Метод: submit -To submit a form to the server manually, we can call `form.submit()`. +Щоб надіслати форму на сервер вручну, ми можемо викликати `form.submit()`. -Then the `submit` event is not generated. It is assumed that if the programmer calls `form.submit()`, then the script already did all related processing. +Тоді подія `submit` не генерується. Передбачається, що якщо програміст викликає `form.submit()`, то сценарій вже здійснив всю пов’язану обробку. -Sometimes that's used to manually create and send a form, like this: +Іноді це використовується для створення та надсилання форми вручну, наприклад: ```js run let form = document.createElement('form'); form.action = 'https://google.com/search'; form.method = 'GET'; -form.innerHTML = ''; +form.innerHTML = ''; -// the form must be in the document to submit it +// форма повинна бути в документі, щоб її надіслати document.body.append(form); form.submit(); From e75dac7981b4ed1fde52e856c4fd7dd1ecc48662 Mon Sep 17 00:00:00 2001 From: Mykola Sopiha Date: Sun, 30 Jan 2022 17:07:59 +0200 Subject: [PATCH 2/2] Update 2-ui/4-forms-controls/4-forms-submit/article.md --- 2-ui/4-forms-controls/4-forms-submit/article.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/2-ui/4-forms-controls/4-forms-submit/article.md b/2-ui/4-forms-controls/4-forms-submit/article.md index 1aa7151cf..d43252d9f 100644 --- a/2-ui/4-forms-controls/4-forms-submit/article.md +++ b/2-ui/4-forms-controls/4-forms-submit/article.md @@ -1,6 +1,6 @@ # Форми: подія та метод submit -Подія `submit` ініціюється, коли форма надсилається. Зазвичай використовується для перевірки форми перед відправкою на сервер або щоб запобігти її відправленню та обробці в JavaScript. +Подія `submit` ініціюється, коли форма надсилається. Зазвичай це використовується для перевірки форми перед відправкою на сервер або щоб запобігти її відправленню та обробці в JavaScript. Метод `form.submit()` дозволяє ініціювати відправку форми за допомогою JavaScript. Ми можемо використовувати його для динамічного створення та надсилання власних форм на сервер.