Author: | boriskrasko |
---|---|
Views Total: | 129 views |
Official Page: | Go to website |
Last Update: | March 23, 2021 |
License: | MIT |
Preview:

Description:
A macOS style virtual keyboard with support for click sounds and speed recognition written in vanilla JavaScript.
How to use it:
1. Load the required JavaScript and stylesheet in the document.
<link rel="stylesheet" media="screen" href="style.css" /> <script src="main.js"></script>
2. Build the HTML for the virtual keyboard.
<main class="keyboard"> <div class="row row__shirt"> <div class="keyboard__navigation keys__navigation"> <button class="keyboard__navigation_button x close"> <img class="navigation_button" src="icons/close.png"> </button> <button class="keyboard__navigation_button minimize" style=""> <img class="navigation_button" src="icons/minimize.png"> </button> <button class="keyboard__navigation_button maximize"> <img class="navigation_button" src="icons/maximize.png"> </button> </div> <button disabled class="ke key__shirt">F1</button> <button disabled class="ke key__shirt">F2</button> <button disabled class="ke key__shirt">F3</button> <button disabled class="ke key__shirt">F4</button> <button disabled class="ke key__shirt">F5</button> <button disabled class="ke key__shirt">F6</button> <button disabled class="ke key__shirt">F7</button> <button disabled class="ke key__shirt">F8</button> <button disabled class="ke key__shirt">F9</button> <button disabled class="ke key__shirt">F10</button> <button disabled class="ke key__shirt">F11</button> <button class="ke key__shirt volume fa fas fa-volume-up"></button> </div> <div class="row row__main"> <button class="key">§</button> <button class="key">1</button> <button class="key">2</button> <button class="key">3</button> <button class="key">4</button> <button class="key">5</button> <button class="key">6</button> <button class="key">7</button> <button class="key">8</button> <button class="key">9</button> <button class="key">0</button> <button class="key">-</button> <button class="key">=</button> <button class="key__wide_s x backspace fimanager flaticon-007-delete"></button> </div> <div class="row row__main"> <button class="key key__wide_s">`</button> <button id="81" class="key">q</button> <button class="key">w</button> <button class="key">e</button> <button class="key">r</button> <button class="key">t</button> <button class="key">y</button> <button class="key">u</button> <button class="key">i</button> <button class="key">o</button> <button class="key">p</button> <button class="key">[</button> <button class="key">]</button> <button class="key">\</button> </div> <div class="row row__main"> <button class="caps key__wide_m x fimanager flaticon-010-upload"> <span></span> <span class="pointer"> .</span></button> <button class="key">a</button> <button class="key">s</button> <button class="key">d</button> <button class="key">f</button> <button class="key">g</button> <button class="key">h</button> <button class="key">j</button> <button class="key">k</button> <button class="key">l</button> <button class="key">;</button> <button class="key">'</button> <button class="key__wide_m enter x fimanager flaticon-014-enter"></button> </div> <div class="row row__main"> <button class="shift key__wide_l x fimanager flaticon-030-shift"></button> <button class="key">z</button> <button class="key">x</button> <button class="key">c</button> <button class="key">v</button> <button class="key">b</button> <button class="key">n</button> <button class="key">m</button> <button class="key">,</button> <button class="key">.</button> <button class="key">/</button> <button class="shift key__wide_l x fimanager flaticon-030-shift"></button> </div> <div class="row row__main"> <button class="ke lang">EN</button> <button class="ke x">ctrl</button> <button class="ke x fimanager flaticon-025-option"></button> <button class="ke x y fa fas fa-microphone"></button> <button class="key key__wide_xl"> </button> <button class="ke x y fimanager flaticon-011-command"></button> <button class="ke x y fimanager flaticon-025-option"></button> <button class="ke x left">←</button> <div class="arrows"> <button class="ke x key__shirt arrow">↑</button> <button class="ke x key__shirt arrow">↓</button> </div> <button class="ke x right">→</button> </div> </main>
3. Add a keyboard toggle button to the page.
<button class="springboard__icon springboard__icon-hidden"> <img src="icons/keyboard-app-store-removebg-preview.png"> </button>
4. Add click sounds to the page.
<audio class="audio_standart_en audio_standart_ru"> <source src="audio/keypressStandard.mp3" type="audio/ogg; codecs=vorbis"/> <source src="audio/keypressStandard.mp3" type="audio/mpeg"/> </audio> <audio class="audio_return audio_return_ru"> <source src="audio/keypressReturn.mp3" type="audio/ogg; codecs=vorbis"/> <source src="audio/keypressReturn.mp3" type="audio/mpeg"/> </audio> <audio class="audio_delete"> <source src="audio/keypressDelete.mp3" type="audio/ogg; codecs=vorbis"/> <source src="audio/keypressDelete.mp3" type="audio/mpeg"/> </audio> <audio class="audio_spacebar"> <source src="audio/keypressSpacebar.mp3" type="audio/ogg; codecs=vorbis"/> <source src="audio/keypressSpacebar.mp3" type="audio/mpeg"/> </audio>