soltanov-anar / test-task-liderpoiska Goto Github PK

11 ноября 2020 года я отправил отклик на вакансию "Web-программист junior" (https://samara.hh.ru/vacancy/40281648). Спустя некоторое время мне прислали ответное письмо: "Спасибо за ваш отклик. Завтра до 15:00 я вышлю вам в почту тестовое задание. После его получения прошу ответным письмом сказать, возьмётесь ли вы за него.". Я согласился выполнить тестовое задание, мне прислали ТЗ, с ним вы можете ознакомиться в каталоге (файл ТЗ.md). В тестовом задании я использовал методологию БЭМ, плагины jQuery и библиотеку PHP Mailer для получения письма после заполнения и отправки формы. Во время выполнения задания и столкнулся со следующими трудностями:

1. При правильном заполнении инпутов длины и высоты, иконка зеленой галочки перемещалась вниз. Решение: использовал display: flex, flex-wrap: wrap, и сменил порядок последовательности элементов с помощью свойства order.

2. Пересчёт суммы заказа происходит при условии выбора материала, но при смене длины и высоты не происходит пересчет и показывается неверная цифра. Решение: выполнил рефакторинг скрипта, добавив в обработчик событий инпутов присвоение переменной total (итоговая сумма) с помощью выражения "длина забора * высота забора * тип материала", где значение первого элемента раскрывающего списка равен 0 ("Выберите тип материала").

3. Проблема с валидацией электронной почты. Решение: создал переменную, в которой хранится регулярное выражение - /^([a-zA-Z0-9_.+-])+@(([a-zA-Z0-9-])+.)+([a-zA-Z0-9]{2,4})+$/ . Затем, добавил условие, если выражение regex.test(emailInput.value) равно истине, то поле заполнено верно. Метод test() выполняет поиск сопоставления регулярного выражения указанной строке. Возвращает true или false.

4. Валидация номера телефона. До этого я использовал плагин Jquery validate, но он мне не особо помог, т.к при правильном заполнении поля, должна отображаться иконка зеленой галочки. Поэтому, я решил воспользоваться другим методом, в html разметке в текстовом поле телефона указал максимальную длину - 11, а в подсказке (placeholder) добавил маску "7 (__) --". В скрипте создал обработчик события, чтобы можно было ввести только числа:

                                phoneInput.addEventListener('input', e => {
                                    e.target.value = e.target.value.replace(/\D/, '');
                                });
   

Вывод: задание оказалось интересным и познавательным. Я научился такими вещами, как:

1. Написание функции, которая склоняет слово в зависимости от значения (1 метр, 2 метра, 5 метров).
2. Написание логики, которая считывает общую сумму заказа в зависимости от выбранных параметров.
3. Использование определенного шрифта, в котором содержится различные символы рубля.
4. Применение цепочки модальных окон на проекте.
5. Сбор и отправка данных на указанный адрес электронной почты.

Это был мой первый опыт выполнения подобных, тестовых заданий. Мой подход к реализации задания был не совсем правильным, я допускал множество ошибок, невнимательно/несерьезно выполнил ТЗ и поэтому, мне пришёл отказ. После письма, я исправил все недочёты, которые были указаны в сообщении (с ошибками вы можете ознакомиться в приложении №1 "Ошибки, описанные в переписке"). Я подытожил, что мне стоит усердно поработать над знаниями языка JavaScript. Не судите строго, мы все прекрасно понимаем, что над кодом ещё стоит поработать и выполнить оптимизацию, и я надеюсь, что спустя какое-то время, когда я стану опытным разработчиком, я вернусь обратно к этому заданию, и выполню его намного лучше.

                            Приложение №1 "Ошибки, описанные в переписке".

1. Пересчёт суммы заказа происходит при условии выбора материала, но при смене длины и высоты не происходит пересчет и показывается неверная цифра https://yadi.sk/i/PhrySGsx6D5e7g
2. При неверно заполненном поле кнопка «далее» при хавере становится синей и срабатывает, а она должна быть неактивной https://yadi.sk/i/yKQEpbym6ACZzg
3. Для номера телефона в плейсхолдере не указана маска, туда можно вбить сколько угодно цифр
4. Вот эти элементы не являются ссылками, но оформлены как ссылки https://yadi.sk/i/H-xhhpJhdpN7-w
5. Письмо с заказом так и не упало мне на почту, отправлял форму дважды.
6. Свёрстано хорошо и аккуратно, но второй экран формы не валидируется номер телефона и не жамкается сабмит https://yadi.sk/i/3UCN0RQL09tlsQ.