anatoli-gavrash/itprofit-feedback-form-v2

Feedback form for itprofit company

Тестовое задание itprofit

Технологии: HTML, Sass, JS, Webpack

✔️ Требования:

• Весь javascript код должен быть написан модульно с синтаксисом ES6 без использования сторонних библиотек таких как jQuery.
• Для стилей обязательно использовать препроцессор (любой, но желательно sass).
• Все исходники компилировать при помощи webpack
• Исходный код должен быть залит в публичный репозиторий

Задачи:

1. ✔️ Развернуть проект:

• создать структуру папок
• создать файл .gitignore с корректным содержимым
• подключить git
• подключить webpack

2. ✔️ Сверстать произвольную (дизайн на усмотрение, но все должно быть стилизовано) форму обратной связи с полями:

• Имя (текстовое поле)
• E-mail (поле типа email)
• Телефон (текстовое поле)
• Сообщение (textarea)

3. ✔️ Подключить маску для телефона (взять из npm)
4. ✔️ Написать модуль валидации формы на JS. Выводить текст ошибки (произвольный) под соответствующим полем, поля с ошибкой стилизовать соответственно (например красный бордер). Правила валидации:

• Все поля обязательны к заполнению
• поле email должно содержать корректный адрес электронной почты.

5. ✔️ Написать модуль ajax отправки формы. Все данные должны отправляться на сервер, в ответе должен быть json объект в формате:

{
  "status": "error",
  "fields": {
    "inputName": "сообщение об ошибке"
  }
}

Или:

{
  "status": "success",
  "msg": "Ваша заявка успешно отправлена"
}

Где:

• status = success/error
• fields = объект с полями которые содержат ошибки
• ключи объекта fields = атрибут name поля с ошибкой
• значение ключей объекта fields = сообщение об ошибке
• msg = сообщение для вывода в форме

6. ✔️ Обработать ответ error с выводом соответствующих сообщений об ошибке
7. ✔️ Обработать ответ success:

• очистить все поля
• вывести сообщение msg

8. ✔️ Сверстать произвольное модальное окно с произвольным текстом, добавить на страницу кнопку которая будет открывать это модальное окно. Требования:

• при открытии модального окна, страница не должна “дергаться”
• открытие должно быть анимированным (на Ваше усмотрение)
• страница не должна прокручиваться при открытом модальном окне
• все должно быть реализовано максимально через css (предполагается что js будет только добавлять/удалять классы)

Сервер:

Добавляем в package.json в скрипты:

  "scripts": { 
    // Ваши скрипты 
    // ...
    // 
    "server": "node server/index.js" 
  },

В зависимости проекта добавляем:

• "cors" - npm i cors
• "express" - npm i express

В корне проекта (там где package.json) создаем папку server. В папке создаем файл index.js со следующим содержимым. Сервер доступен по localhost:9090

Доступные запросы:

• ping - /api/ping - GET запрос для проверки работоспособности сервера (можно в браузере ввести http://localhost:9090/api/ping ). При успешном запуске отобразится:

{
  "status": "success",
  "message": "Server is ready"
}

• registration - /api/registration - POST запрос для регистрации - случайно выдает либо серверную ошибку (400), либо успех (200)