Virtual Keyboard in JavaScript – HTML, CSS & JavaScript Tutorial (Project Video)




Link to code:

Google Material Icons:
https://google.github.io/material-design-icons/#icon-font-for-the-web

In this video we’ll be creating a virtual keyboard using pure HTML, CSS & JavaScript (no libraries required). This is done from scratch and is easy to integrate, responsive and touch-friendly.

I think projects like this are super helpful for learning web development or specifically HTML, CSS, & JavaScript. You don’t always need a library or framework to create good looking UI components.

Support me on Patreon:
https://www.patreon.com/dcode – with enough funding I plan to develop a website of some sort with a new developer experience!

Follow me on Twitter @dcode!

If this video helped you out and you’d like to see more, make sure to leave a like and subscribe to dcode!

#dcode #webdev #javascript

Original source


22 responses to “Virtual Keyboard in JavaScript – HTML, CSS & JavaScript Tutorial (Project Video)”

  1. Thanks for this great work! I would like to start with 1 uppercase letter. Then the letters should switch to lowercase automatically. After a space they should switch to uppercase again. How do I have to edit the code for this functionality?

  2. Thank you for your presentation. I tried to repeat everything what you have done in Dreamweaver, but code was not working. Then, I copied your code, but the result was similar with the following errors:
    1. _triggerEvent(handlerName) {

    if (typeof this.eventHandlers[handlerName] == "function") {

    this.eventHandlers[handlerName](this.properties.value);

    }

    },
    asking to insert === instead of ==
    2. close() {

    this.properties.value = "";

    this.eventHandlers.oninput = oninput;

    this.eventHandlers.onclose = onclose;

    this.elements.main.classList.add("keyboard–hidden");

    }

    };
    it says that oninput and onclose are not defined.
    3. And also, it forces me to add the following at the beginning:
    /*jshint esversion: 6 */

    /*jslint node: true */

    "use strict";

    If anybody was able to use it and to have this beautiful keyboard, just explain, how you solved all these?

  3. simply mind blowing!!! great tutorial. how do you plan these kinda programs? what kind of methods to add and how they would work and all these stuff.. can you give some tips to how to plan these things before coding? Thanks

Leave a Reply