25+ JavaScript Keyboards - Free Code + Demos
Collection of 25+ JavaScript Keyboards. All items are 100% free and open-source.
1. Keyboard - Type Something
Author: Ricardo Oliva Alonso (ricardoolivaalonso)
Links: Source Code / Demo
Created on: December 26, 2019
Made with: Pug, SCSS, JS
CSS Pre-processor: SCSS
JS Pre-processor: None
HTML Pre-processor: Pug
2. Keyboard Hero
Author: evilpaper (evilpaper)
Links: Source Code / Demo
Created on: October 31, 2019
Made with: HTML, CSS, JS
3. Interactive 60% Keyboard
Author: James Holmes (32bitkid)
Links: Source Code / Demo
Created on: June 17, 2019
Made with: HTML, SCSS, TypeScript
4. CSS Grid Experiment: Keyboard Layout
Author: Raj Suhail (irajsuhail)
Links: Source Code / Demo
Created on: May 20, 2019
Made with: HTML, CSS
5. Apple Keyboard
Just another CSS grid demo. This time, it’s an interactive Apple USB keyboard (without the cable). Update 6/7/18: reduced JS code
Author: Jon Kantner (jkantner)
Links: Source Code / Demo
Created on: June 1, 2018
Made with: HTML, CSS, JS
Tags: mac, apple, keyboard, grid, skeuomorphic
6. WAAAAPI Keyboard
Started because I wanted to title something "WAAAAPI" (Web Animations and Audio APIs). And also because I wanted to refamiliarize myself with the basics of oscillators. And then also familiarize myself with the Web Audio API. Verified in Firefox, Edge, and Chrome so far.
Author: Dan Wilson (danwilson)
Links: Source Code / Demo
Created on: August 3, 2016
Made with: HTML, SCSS, JS
Tags: web-audio-api, web animations api, web-audio, animations api, synth
7. Web Audio Keyboard
So rad http://codepen.io/SeanMcBeth/pen/meaQvj C Major, 3 octaves, QWERTY because bumper-bowling is way more fun Love how each browser has its own sound. Chrome is squeaky clean. Firefox kinda raw. And Safari has glorious 90's era fuzz
Author: Dave DeSandro (desandro)
Links: Source Code / Demo, Codepen.io
Created on: January 31, 2016
Made with: HTML, CSS, JS
Tags: webaudio
8. Virtual Keyboard
User Friendly Virtual Keyboard A virtual keyboard with cool themes and custom key functionalities. Keyboard for Windows Developed with HTML, CSS, and JS without any dependencies. To-do list Themes Keyboard for Macintosh Custom music for any key Custom key functions Mobile responsive...Read More
Author: Sai Nikhil (iamsainikhil)
Links: Source Code / Demo
Created on: August 19, 2018
Made with: HTML, CSS, JS
Tags: html, css, javascript, keyboard, css-grid
9. Javascript Calculator With Keyboard Input
Author: Gabriel Smith (thecountgs)
Links: Source Code / Demo
Created on: October 19, 2016
Made with: HTML, CSS, JS
10. JavaScript Piano
Author: Caroline Gabriel (gabrielcarol)
Links: Source Code / Demo
Created on: September 20, 2017
Made with: HTML, CSS, JS
11. Simple Keypress Calculator With Javascript
Author: Tobias Rickmann (tobirick)
Links: Source Code / Demo
Created on: November 29, 2017
Made with: HTML, SCSS, JS
12. Alphabet Keyboard Listener
Author: Monica Powell (M0nica)
Links: Source Code / Demo
Created on: June 13, 2020
Made with: HTML, CSS, JS
Tags: alphabet, letters, eventlisteners, keyboard, sound
13. Virtual Keyboard
My task is to write a script that will make the keyboard work. When clicking on a button with a letter or a space, the text content of this button should be added to the text content of the display. When we click on the clear button, all text inside the display should be deleted.
Author: Anika Specter (anikaspecter)
Links: Source Code / Demo
Created on: June 4, 2020
Made with: HTML, CSS, JS
Tags: junior, keyboard, javascript, virtual keybord
14. JavaScript - Virtual Keyboard
JavaScript - Virtual Keyboard
Author: Igor Agapov (harryheman)
Links: Source Code / Demo
Created on: April 28, 2020
Made with: HTML, CSS, JS
Tags: javascript, virtual, keyboard, js
15. NEU KEYBOARD
Recreating my 60% keyboard in CSS
Author: Manan Tank (MananTank)
Links: Source Code / Demo
Created on: April 4, 2020
Made with: Pug, Stylus, JS
CSS Pre-processor: Stylus
JS Pre-processor: None
HTML Pre-processor: Pug
Tags: keyboard, colors, neumorphism, grid, cssgrid
16. Keyboard Layout With Html Css And Js
Type any key on the keyboard and the key you pressed will show on the layout
Author: Khalid (khalid8774)
Links: Source Code / Demo
Created on: March 18, 2020
Made with: HTML, CSS, JS
Tags: keyboard
17. Neumorphic Keyboard (Responsive + Interactive)
Hopping on the bandwagon! This is a mashup of a few awesome projects: http://plnkr.co/edit/aCcc87hAakSaPYwQhO7S https://codepen.io/gschier/pen/VKgyaY https://neumorphism.io I made a bunch of changes: Styling, obviously Now responsive with CSS, no JS necessary Simplified the markup an...Read More
Author: Riley Shaw (rileyjshaw)
Links: Source Code / Demo
Created on: February 11, 2020
Made with: HTML, SCSS, Babel
Tags: newmorphism, keyboard, ui, trendy, rubberized
18. Keyboard
a simple keyboard
Author: Michael Quimabao (ThatCoderGuy722)
Links: Source Code / Demo
Created on: October 12, 2019
Made with: HTML, CSS, JS
Tags: keyboard, onscreen, michael quiambao
19. Virtual Keyboard Activity
Create Virtual Keyboard with html css and jquery, keyboard pure css
Author: Adi Jaya (onclick_indo)
Links: Source Code / Demo
Created on: September 29, 2019
Made with: HTML, CSS, JS
Tags: keyboard
20. HTML CSS Keyboard For JavaScript Key Code Finder
Fully responsive keyboard app for JavaScript event key code finder. using Grid CSS
Author: Aleksandar Cizmadija (AleksandarCizmadija)
Links: Source Code / Demo
Created on: July 26, 2018
Made with: HTML, SCSS, JS
Tags: css, html, javascript, keyboard, responsive
21. Backlighted Keyboard
Backlighted Keyboard "Apple Inspired" CSS + JS
Author: Paul Vanlerberghe (PaulVlbg)
Links: Source Code / Demo
Created on: March 1, 2019
Made with: HTML, PostCSS, Babel
Tags: javascript, css, keyboard, skeuomorphism
More Awesome Lists:
Share: