Deprecated: Function create_function() is deprecated in /var/www/vhosts/eduardoarellano.com/d4mations.com/wp-content/plugins/wp-automatic/wp-automatic.php on line 70
Virtual Keyboard in JavaScript – HTML, CSS & JavaScript Tutorial (Project Video) | D4mations.com
  • Friday , 23 October 2020

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

Code Canyon



Link to code:
https://codepen.io/dcode-software/pen/KYYKxP

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

3d Ocean

Related Posts

22 Comments

  1. Equilibrium Corp.
    February 26, 2020 at 18:07

    Please tell how to add custom keys.

  2. jossias moises
    February 26, 2020 at 18:07

    Thanks amazing for the tutorial…

  3. Idris Abass
    February 26, 2020 at 18:07

    Love the tutorial but it doesnt seem to work on IE. how can i do that?

  4. Niyaad Haji
    February 26, 2020 at 18:07

    Helpful video thanks

  5. Tissi23995
    February 26, 2020 at 18:07

    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?

  6. Zakir Hossain
    February 26, 2020 at 18:07

    Can you put left and right arrow keys?

  7. Khaos Kh
    February 26, 2020 at 18:07

    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?

  8. ioannis me
    February 26, 2020 at 18:07

    wow…!!!!!!!!!!!!!!!!

  9. Faizi Niyazi
    February 26, 2020 at 18:07

    Thank you so much,is there a way i can enable virtual keyboard on my webview in javafx?

  10. ron cohen
    February 26, 2020 at 18:07

    Hi, you have my subscription 🙂

  11. adriansun2999
    February 26, 2020 at 18:07

    Impressive

  12. Philippe Anglade
    February 26, 2020 at 18:07

    Very clear and sharp, in coding, explaining and JS knowledge. Bravo, sir and many thanks ! Will do it in "azerty" mode, since I'm French.

  13. Bikram Chettri
    February 26, 2020 at 18:07

    Thanks for this wonderful tutorial.

  14. s m
    February 26, 2020 at 18:07

    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

  15. Jonathan Boldrini
    February 26, 2020 at 18:07

    What is the name of this theme that you use in vscode?

  16. Abhishek Kumar
    February 26, 2020 at 18:07

    Thank u for this awesome video

  17. Kosta Tsourdalakis
    February 26, 2020 at 18:07

    Very nice vid sir, makeme vibrato from ny haert

  18. Aloui Mohamed Habib
    February 26, 2020 at 18:07

    Nice!

  19. Виталий
    February 26, 2020 at 18:07

    like

  20. LiveFPS
    February 26, 2020 at 18:07

    It can be a good idea for an electron app

  21. Effective Code Academy
    February 26, 2020 at 18:07

    Nice video! 👍👍👍

  22. Lu-Vuong Le
    February 26, 2020 at 18:07

    Awesome!

Leave A Comment

You must be logged in to post a comment.