test_task_maslov v2.0.6

test_task

Тестовое задание для стажировки

Веб-компонент

1. Нет зависимостей!

2. Веб-компонент для валидации номера телефона с маской

3. Посмотреть демонстрацию можно при установке и запуске команды npm run start

Вставка веб-компонента

Для того, чтобы вставить компонент достаточно вставить тег

<number-input id="number_input" mask="+7(985)0II-**-**"></number-input>

Аттрибуты

• [mask] строка с маской номера. Пример: const mask = '+7(985)0II-**-**';

Маска инпута. Значения:

• "I" - одиночный инпут для ввода одной цифры
• "X" - серый блок с символом "X"
• "*" - серый блок с символом "●"
• <цифра> - серый блок с введенной цифрой

• <не цифра> - символ отображается "как есть"

Методы

• value() - получает текущее значение введенных символов, если символ не введен метод возвращает '_'

Так как валидация вводимого номера происходит на сервере, можно управлять состоянием компоненты с помощью соответсвующих методов:

• error() - при неверном ответе, добавляет стиль ошибки

  Пример: document.getElementById("number_input").error();

• success() - при верном ответе, убирает стиль ошибки (восстанавливает исходный вид)

  Пример: document.getElementById("number_input").success();

Дополнительные требования из списка заданий

• Настроена сборка с использованием webpack и публикация в npm https://www.npmjs.com/package/test_task_maslov
• Реализовано на typescript, есть полноценное описание и вывод типов, а также поставка *.d.ts файлов в итоговую сборку
• Настроен линтинг в проекте eslint, prettier
• Подготовлено руководство по компоненту - файл README.md
• Реализованы git-хуки, запускающие линтинг при коммите

Немного о себе

• Осенью стажировался в tinkoff, успешно закончил стажировку
• Стек технологий, которым свободно владею: React, Typescript, Redux, Webpack, Css/Scss, также писал на Node.js серверную часть