codejam-virtual-keyboard

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

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

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

• реализована генерация DOM-элементов и index.html пустой изначально: +20
• нажатие на кнопку на физической клавиатуре подсвечивает кнопку на виртуальной: +10

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

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

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

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

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

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

штрафы:

• ошибки или предупреждения eslint-config-airbnb-base: -15

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

Deadline: 06.11.2019 23:59

Задание

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

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

• дизайн — на ваше усмотрение
• изначально файл index.html должен быть пустым (все необходимые элементы генерируются с использованием JS)
• нажатие на кнопкy физической клавиатуры должно подсвечивать нажатую кнопку на виртуальной:
• Если нажатие происходит на несколько кнопок, то подсвечиваются все нажатые кнопки (исключений нет и для ctrl-alt-shift):
• виртуальная клавиатура должна уметь переключаться между русской и английской раскладками (сочетание клавиш — на ваше усмотрение), при этом на кнопках должны отображаться символы выбранного языка:
• выбранный язык должен сохраняться после перезагрузки страницы
• анимация нажатия на кнопку
• клики по кнопкам (мышкой) на виртуальной клавиатуре выводят символы в инпут, расположенный на странице над клавиатурой

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

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

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

• название PR должно содержать the task name и дополнительную информацию о том, что было реализовано
• PR не должен содержать закомментированного кода, ненужных файлов, изменений из других веток и сгенерированных файлов, например .bundle.js. Пожалуйста, просмотрите ваши изменения, прежде чем делать PR. Файлы .editorconfig, .gitignore и т.д. могут быть включены в PR
• Комментарии в PR являются хорошей практикой
• Как сделать хороший PR

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

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

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

• реализована генерация DOM-элементов и index.html пустой изначально: +20
• нажатие на кнопку на физической клавиатуре подсвечивает кнопку на виртуальной: +10

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

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

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

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

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

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

штрафы:

• ошибки или предупреждения eslint-config-airbnb-base: -15

FAQ

https://www.youtube.com/watch?v=1wefQGlnPis&feature=youtu.be

Материалы по теме:

• Demo
• DOM
• Video DOM
• Event
• Video DOM Events
• Video DOM & DOM Events
• An Introduction To DOM Events
• Keycode
• Клавиатура
• eslint (eslint-config-airbnb-base)