https://github.com/elrouss/virtual-keyboard

Виртуальная клавиатура
https://github.com/elrouss/virtual-keyboard

brainstorm elrouss javascript rolling-scopes-school scss virtual-keyboard

Last synced: about 2 months ago
JSON representation

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

• Host: GitHub
• URL: https://github.com/elrouss/virtual-keyboard
• Owner: elrouss
• Created: 2023-04-28T14:44:14.000Z (about 3 years ago)
• Default Branch: main
• Last Pushed: 2023-05-08T12:32:22.000Z (about 3 years ago)
• Last Synced: 2025-04-01T17:53:40.331Z (about 1 year ago)
• Topics: brainstorm, elrouss, javascript, rolling-scopes-school, scss, virtual-keyboard
• Language: JavaScript
• Homepage:
• Size: 4.46 MB
• Stars: 0
• Watchers: 1
• Forks: 0
• Open Issues: 1
• Metadata Files:
  • Readme: README.md

Awesome Lists containing this project

README

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

![Главный экран с демонстрацией основного функционала виртуальной клавиатуры](https://user-images.githubusercontent.com/108838349/235540103-9129b690-07a8-4105-9fdd-f43fbf9843bc.gif)

## 1. Описание

Задание выполнено в рамках курса [«JavaScript/Front-end»](https://rs.school/js/) 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](https://img.shields.io/badge/JavaScript-323330?style=for-the-badge&logo=javascript&logoColor=F7DF1E)

![Иконка Sass (SCSS)](https://img.shields.io/badge/Sass-CC6699?style=for-the-badge&logo=sass&logoColor=white)

## 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)