Учебное задание: "Виртуальная клавиатура"

1. Описание

Задание выполнено в рамках курса «JavaScript/Front-end» RS School. Задачей стояло создание виртуальной клавиатуры с версткой и функционалом, написанными на нативном JavaScript. По условию задания запрещено использование любых JS и UI библиотек, фреймворков (Angular/Vue/React), работа в файле index.html. Оценка выставлялась однокурсниками (cross-review).

Ссылка на задание: https://github.com/rolling-scopes-school/tasks/blob/master/tasks/virtual-keyboard/virtual-keyboard-en.md

Ссылка на деплой: https://elrouss.github.io/virtual-keyboard/

2. Стех технологий

3. Установка и запуск приложения в локальном репозитории

https://github.com/elrouss/virtual-keyboard.git - клонировать репозиторий (HTTPS)
npm i - установить зависимости
Запустить с помощью live server

NB! Приложение создано для десктопа и может некорректно отображаться на планшете и мобильном устройстве. Программа не кроссбраузерная и работает коррекно в Google Chrome (в других браузерах возможны ошибки)

4. Процесс создания

Работа разделена на 2 этапа:

Верстка и логика
Cross-review

5. Функционал

Переключение англо- и русскоязычной раскладки с сохранением состояния после перезагрузки страницы (Ctrl + Alt (Opt))
Корректная работа клавиш CapsLock и Shift вместе и по отдельности
Нажатие на клавиши и клик по ним приводит к появлению символов в текстовом поле на экране
Нажатие на клавиши физической клавиатуры подсвечивает клавиши на виртуальной
Навигация по текстовому полю нажатием на клавиши и кликом курсором по ним

6. Планы по улучшению

Рефакторинг (принцип DRY)
Исправить ошибку с клавишами BackSpace (при положении каретки в начале текстового поля и наличии текста в нем в конец инпута добавляется удаляемый текст) и стрелкой влево (при положении каретки в начале текстового поля происходит перескок в конец инпута)
Стилизовать placeholder аудио (настоящая стилизация через псевдоэлементы отображается только в Google Chrome)

elrouss / virtual-keyboard