• 100 Days of Code
• Installation
• Notes and Issues
• Live Site
• Resources
• Let's Connect!

Day 20: February 28, 2021

• I've always wanted to create a virtual keyboard, but most tutorials were not responsive.

• After searching, I found great Russian tutorials on Youtube from the Rolling Scopes School.

• This Keyboard has English and Russian modes, with speech recognition from the Web Speech API.

1. Git clone and cd into the repo folder:

git clone git@github.com:emjose/kboard.git && cd kboard

2. Run the command:

open index.html

• Press shift keys for additional symbol characters.

• Press the en/ru key to switch between English and Russian modes.

• The virtual keyboard will respond to your physical keyboard, with one exception:

  • The caps lock key on your physical keyboard may need to be pressed twice to correctly sync.

• Speech Recognition

  • Enable your computer's microphone and press the microphone key on the virtual keyboard.

  • Speak clearly and your speech will be transcribed in the input area.

• The Keyboard is best viewed on a desktop or laptop computer browser.

• The Keyboard will not be rendered on mobile devices with a width of 400 pixels or less.

• The Keyboard is a progressive web app.

• English Tutorial by dcode

• Using the Web Speech API

• Mouse Click Sound Effects

• Rolling Scopes School Virtual Keyboard Task

• Russian Tutorial, Part 1 by Rolling Scopes School

• Russian Tutorial, Part 2 by Rolling Scopes School

• JavaScript Speech Recognition Tutorial by Wes Bos

• How to build a speech recognising app with JavaScript by Susanna Kosonen

• My blog on how I created my Github READMEs