Homework 6 - JS Function & Object

[MZabolotnev]

Підготовка №1

1. Як зазвичай, початок розробки нової функціональності (нового завдання) відбувається з актуальної версії продакшена (гілка main).
2. Перемкніться на гілку main та завантажте найновішу версію з нашого репозиторію.
3. Заведіть нову гілку під назвою 6-functions_<ім'я користувача github>.

Підготовка №2

1. Додайте елемент <div id="errors-container"></div> між чекбоксом та кнопкою. Має вийти так:
   

3. Видаліть всю валідацію інпутів з html. Замініть input/button type="submit" на звичайну кнопку ( button type="button")
4. Скопіюйте файл script.js з гісту і покладіть його в папку scripts у вашому проєкті. Підключить цей файл до сторінки логіна використовуючи тег <script>. Має вийти так:

5. Додайте атрибути id до елементів логін-форми, та заповніть їми константи на початку файлу по прикладу ERRORS_CONTAINER_ID (Приклад: у файлі скрипта потрібно написати const ERRORS_CONTAINER_ID = "errors-container" - як на картинці 1)

   • EMAIL_INPUT_ID - значення аттрибуту id вашого email інпуту в html
   • PASSWORD_INPUT_ID - значення аттрибуту id вашого password інпуту в html
   • NOT_A_ROBOT_CHECKBOX_ID - значення аттрибуту id вашого чекбоксу в html
   • SUBMIT_BUTTON_ID - значення аттрибуту id вашоі кнопки в html
   • RESULT_PAGE_PATH - шлях до файлу вашоі сторінки з результатом ( наприклад ./result.html)

6. Якщо ви все зробили правильно, при натисканні кнопки submit ви побачите 'Підготовка успішна' в консолі браузера.

Завдання

7. Вам потрібно реалізувати функцію validateForm(). Вона має перевіряти дані з форми, у випадку успіху - перенаправляти юзера на сторінку з результатом.
   У випадку якщо умови не виконуються - показати помилку / помилки користувачу.

Умови

1. Email має бути в форматі [email protected]. Користувач також може ввести пробіли, вам потрібно іх видаляти, для цього реалізуйте окрему функцію ( вам стануть в нагоді методи string replace() або trim().
   Наприклад ' te st@te st.com ' має перетворитись в '[email protected]'. Для перевірки використовуйте функцію isEmail(email).
2. Password має бути від 8 до 12 будь-яких символів
3. Всі поля є required для заповнення
4. Чекбокс має бути чекнутим
   Для отримання значення з форми використовуйте функцію getValueById(elementId). Вона поверне вам текст з інпута, або true чи false в випадку чекбокса.
   Для показу помилок використовуйте setErrors(inputData). Вона приймає обєкт inputData, де key це id вашого інпуту, а value це текст помилки. Наприклад:

   const inputData = {
      [EMAIL_INPUT_ID]: 'Error text';
      [PASSWORD_INPUT_ID]: 'Error text';
      [NOT_A_ROBOT_CHECKBOX_ID]: 'Error text';
   }

Для видалення всіх помилок використовуйте функцію deleteErrors()
Для навігаціі в випадку успіху використовуйте navigateToResultPage()

Завдання з зірочкою.

Переробіть код таким чином, щоб помилки відображались не в одному місці під формою, а кожна під своім інпутом.

[MZabolotnev]

Корисні посилання:

• Гіст з кодом з лекціі
• Функціі
• Функціональні вирази
• Стрілкові функції
• Об’єкти