# Fingerbreakr

Клавиатурный тренажер Fingerbreakr

Demo (opens new window)

Клавиатурный тренажер, написанный на чистом JavaScript. Приложение написано в функциональном стиле.

# Стэк технологий

  • HTML/CSS
  • JavaScript

# Структура проекта

/audio
/css
/js
index.html

# Основной функционал

Основная идея тренажера заключается в том, что пользователю показывается клавиатура на экране. Таким образом ему не нужно смотреть на физическую клавиатуру при наборе. Это позволяет привыкнуть не смотреть на клавиатуру во время печати.

Идея подсмотрена в популярном тренажере VerseQ (opens new window).

# Как это работает

Все символы содержатся в массивах. Для каждого языка отдельный массив символов.

letters = {
  en: ['a', 'b', 'c', 'd', 'e', 'f', 'g', 'h', 'i', 'j', 'k', 'l', 'm', 'n', 'o', 'p', 'r', 's', 't', 'q', 'u', 'v', 'w'],
  ru: ['а', 'б', 'в', 'г', 'д', 'е', 'ж', 'з', 'и', 'к', 'л', 'м', 'н', 'о', 'п', 'р', 'с', 'т', 'у', 'ф', 'х', 'ц', 'ч', 'ш', 'щ', 'э', 'ю', 'я']
},

Source: /js/main.js

При загрузке страницы на экран выводится случайная буква из массива.

// Show random letter from array
function showLetter() {
  currentLetter = language[Math.floor(Math.random() * (language.length))];
  letterBox.innerHTML = currentLetter;
}

Source: /js/main.js

На глобальный объект window повешен слушатель событий. При нажатии любой клавиши на клавиатуре происходит проверка соответствия того что нажато тому, что на экране. При прохождении проверки выводится новый случайный символ. При ошибке символ подсвечивается красным.

window.addEventListener('keydown', function(e) {
	...

//   check pressed key
  if (e.key == currentLetter) {
  	...

    showLetter();

    ...
  } else {
  	...

    letterBox.classList.add('c-error');

    ...
  }
});

Source: /js/main.js

# Выбор языка

Fingerbreakr выбор языка

Набор возможен на английской и русской раскладке клавиатуры. Это можно сделать нажав на радио-кнопку в правом верхнем углу страницы.

// Change language
function changeLang() {

  if (language === letters.en) {

    language = letters.ru;

  } else {

    language = letters.en;

  }

  showLetter();

}

/js/main.js

# Скрыть/Показать клавиатуру

Fingerbreakr экранная клавиатура

Продвинутые пользователи чувствующие уверенность имеют возможность скрыть экранную клавиатуру.

// Function that toggles keyboard image
function toggleKbd() {

  kbd.classList.toggle('d-n');

}

Source: /js/main.js

# Звуковое сопровождение

Доступна возможность включить звук, который проигрывается при нажатии неверной клавиши.

# Подсчет символов и ошибок

Fingerbreakr подсчет ошибок

На странице ведется подсчет правильных нажатий и ошибок.

window.addEventListener('keyup', function(e) {
  
  correctBox.innerHTML = 'Correct: ' + correctCount;
  errorCountBox.innerHTML = 'Errors: ' + errorCount;

});

Source: /js/main.js

# Исходный код на GitHub

Fingerbreakr (opens new window)