Skip to content

elrouss/virtual-keyboard

Repository files navigation

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

Главный экран с демонстрацией основного функционала виртуальной клавиатуры

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. Стех технологий

Иконка JavaScript Иконка Sass (SCSS)

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

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

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

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

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

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

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

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

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

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