Skip to content

Latest commit

 

History

History
139 lines (107 loc) · 12.3 KB

virtual-keyboard-ru.md

File metadata and controls

139 lines (107 loc) · 12.3 KB
Raw

RSS Виртуальная клавиатура

Вам нужно создать виртуальную клавиатуру наподобие такой:

screenshot

Функциональные требования:

  • дизайн — на ваше усмотрение

  • изначально файл index.html должен быть пустым (все необходимые элементы генерируются с использованием JS)

  • нажатие на кнопкy физической клавиатуры должно подсвечивать нажатую кнопку на виртуальной:

    screenshot

    Может быть различия в нажатиях на кнопки клавиатуры для разных операционных систем: windows и Mac OS. Чтобы избежать ошибок необходимо на странице с клавиатурой указать в какой OS создавалась клавиатура.

  • Если нажатие происходит на несколько кнопок, то подсвечиваются все нажатые кнопки (исключений нет и для Ctrl, Alt и Shift):

    screenshot

  • виртуальная клавиатура должна уметь переключаться между двумя раскладками (английский + любой другой язык), при этом:

    • назначение сочетания клавиш для переключения раскладки клавиатуры зависит от вас;
    • кнопки на виртуальной клавиатуре отображают символы выбранного языка;
    • приложение сохраняет выбранный язык после перезагрузки страницы и отображает клавиатуру на этом языке;
    • сочетание клавиш для смены языка должно быть указано на странице, чтобы пользователю было понятно, как переключить раскладку клавиатуры;

  • нажатия на кнопку сопровождаются анимацией;

  • клики мышкой по кнопкам на виртуальной клавиатуре и нажатие на кнопки физической клавиатуры выводят вводимые символы в инпут (textarea), расположенный на странице над клавиатурой.

    • нажатие стрелок вниз-вверх-влево-вправо либо выводят соответствующую стрелочку в инпут, либо реализуют навигацию по инпуту;
    • нажатие на Enter должно осуществлять перевод курсора на новую строку;
    • Tab создает горизонтальный отступ;
    • нажатие остальных функциональных клавиш на клавиатуре не приводит к вводу символов;
    • Backspace удаляет символ, стоящий перед курсором;
    • Del удаляет символ, стоящий после курсора;
    • оставшиеся Shift, Alt, Ctrl, Caps Lock, Space должны работать как в реальной клавиатуре.

Технические требования

  • должно работать в Chrome последней версии
  • использование jQuery и других библиотек не допускается
  • использование Bootstrap и других CSS фреймворков не допускается
  • использование Angular/React/Vue и других фреймворков не допускается
  • можно использовать CSS preprocessors
  • использовать eslint (eslint-config-airbnb-base). Разрешается добавить в файл .eslintrc.js игнорирование правила 'import/extensions' а случае использования модулей и необходимости импортов их в основной файл.
  • рабочее приложение должно быть размещено на GitHub Pages (https://pages.github.com/), это произойдет автоматически при создании ветки gh-pages. После чего страница будет доступна по адресу вида https://your-github-account.github.io/имя-твоего-репозитория

Требования к коммитам, PR, репозиторию

  • работа должна выполняться в вашем личном (private) репозитории
  • имя репозитория совпадает с именем задачи (virtual-keyboard)
  • исходный код должен быть зафиксирован в отдельной ветке
  • ветка main должна быть пустой (содержать только такие файлы как README.md или .gitignore)
  • сообщения коммитов должны следовать гайдлайну
  • после завершения работы над заданием, создайте pull request из ветки development в ветку main
  • название pull request должно содержать имя задания
  • описание pull request должно содержать следующую информацию:
    • ссылка на задание
    • скриншот твоего приложения (одного будет достаточно)
    • ссылка на твоё приложение
    • дата завершения работы над задачей/дедлайн
    • ваша самопроверка с предварительной оценкой, которая основана на критериях оценки из задания

Пример:

1. Task:
   Здесь прилагается ссылка на задание
2. App screenshot:
   Скриншот твоего приложения
3. Deploy:
   Ссылка на задеплоенную версию твоего приложения
4. Выполнено 19.04.20 (дедлайн 19.04.20)
5. Score: 200 / 200
- [x] Минимальный объём выполнения
    - [x] Реализована возможность 1 (+10)
    - [x] Реализована возможность 2 (+10)
- [x] Основной объём выполнения
    - [x] Реализована возможность 3 (+10)
    - [x] Реализована возможность 4 (+10)
- [x] Расширенный объём выполнения
    - [x] Реализована возможность 5 (+10)
    - [x] Реализована возможность 6 (+10)
- [x] Технические требования
    - [x] используется ESLint (+10)
    - [x] используются возможности ES6 (+10)
    - [x] Требования к репозиторию, коммитам и pull request выполнены (+10)
- [x] Штрафы
    - [x] Ошибки во время работы приложения. (-10 за каждую, но не больше общего количества баллов за реализацию требований)
    - [x] Несоблюдение требований к pull request, репозиторию, названию коммитов (-10) оценивается ментором
  • Pull request не должен содержать закомментированного кода, ненужных файлов, изменений из других веток и сгенерированных файлов, например .bundle.js. Пожалуйста, просмотрите ваши изменения, прежде чем делать PR. Файлы .editorconfig, .gitignore и т.д. могут быть включены в PR
  • Комментарии в PR являются хорошей практикой
  • Как сделать хороший PR

Критерий оценки:

Максимальный балл за задание: 110

минимальный набор:

  • реализована генерация DOM-элементов и body в index.html пустой изначально (может находится только тег script): +20
  • нажатие на кнопку на физической клавиатуре подсвечивает кнопку на виртуальной (проверять следует нажатие цифр, букв, знаков препинания, backspace, del (если она присутствует), enter, shift, alt, ctrl, tab, caps lock, space, стрелки вниз-вверх-влево-вправо): +10

стандартный набор:

  • есть переключение между английским и любым другим языком. Выбранный язык должен сохраняться и использоваться при перезагрузке страницы. На странице должна быть указана комбинация клавиш для переключения языка: +15
  • клики мышкой по кнопкам на виртуальной клавиатуре или нажатие на кнопки физической клавиатуры, выводят символы в инпут (textarea): +15

дополнительный набор:

  • реализована анимация нажатия на кнопку: +15

технические требования:

  • использование в коде возможностей стандарта ES6 и выше (classes, деструктуризация и т.д.): +15
  • использование eslint: +10
  • требования к репозиторию, коммитам и PR выполнены: +10

Штрафы, налагаемые только администрацией курса:

  • название репозитория (virtual-keyboard) или название ветки development (development) не соответствуют требованиям: -110
  • сделано меньше 5 коммитов или коммиты сделаны в один день: -110 или исключить из курса
  • значительная часть приложения была выполнена после дедлайна: -110 или исключить из курса

Как сделать submit и проверить задание

  • ссылка на Pull Request должна быть засабмичена в Cross-Check: Submit;
  • репозиторий с твоей работой должен быть сделан публичным (public) после дедлайна выполнения задания. Убедись, что pull request и deploy доступны для просмотра;
  • это задание будет проверяться другими участниками курса в ходе кросс-чека.

Полезные ссылки: