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

hey guys hey gone my name is DOM and in this video we're going to be creating a virtual keyboard using a plain HTML CSS and JavaScript so this right here is the final results it's a fully functional virtual keyboard using javascript with things like caps lock spaces line breaks and things like that so it's all done with no extra libraries work ride aside from the icon library to of course have these icons on the page or on the keyboard so it's going to be responsive touch friendly and easy to integrate with other other parts of your code base or your or your system so in terms of how useful it's going to be to be honest probably not but it can be useful in things like point-of-sales applications or even kiosk applications and you know this is this this video is more for learning JavaScript and learning various different areas of JavaScript and essentially combining a lot of my previous content in a single video so it should be fun and it should be interesting so let's head over to this file right here and we're starting fresh with basically a bare-bones HTML file inside the text editor it currently looks like this so I've got here of course just the unordered list I've got my own CSS file included this won't affect the tutorial or the or the video it's just from our own styles and colors so let's begin here real quick also this text area is just a you know just for example just for demonstration just got a bit of inline CSS here to just position it in the you know usable spot in top right corner so anyway let's begin here by creating the directory structure for for the keyboard and of course I guess going from there so let's create a new directory inside here and call this one keyboard all right and inside here we're gonna have two files one for CSS one for JavaScript so let's make one called keyboard I've got CSS and then one for keyboard JavaScript and then of course we're going to be including these two inside the head so we can just say link CSS and go to keyboard keyboard of CSS okay and do the same thing for the JavaScript so making a new script tag with a source of keyboard keyboard ojs cool so we have these two files included we can now include the the Google material icon set which is the icon library we're going to be using for the shifts done space return and backspace icons so if you head over to this website right here I'll leave a link to this in the description basically you go in here and you click on icon fonts for web and just copy and paste this link tag and it's going to include the library on your webpage so go inside here and just paste it right there all right cool so now we have everything set up we can begin on the HTML and CSS for the keyboard so basically for this to work we're going to need some dummy HTML because all of the HTML structure for the keyboard is going to be eventually generated through the JavaScript file but for now just so you can actually see what we're actually going to be styling using CSS let's just create some dummy HTML down here for the keyboard so the way it's gonna work is you're gonna have a main TIF containing the entire keyboard itself so that's the main div then inside here you can have a div called keyboard underscore keys so this one is going to contain all of the different keys from one to zero A to Z etc so the reason why you're gonna have to devs here's just in case you may want to add some extra functionality to the keyboard which is outside of the keyboard keys container so that's the reason why we have to Dave's inside here nested okay cool so let's now go inside the CSS and begin work on the keyboard and keyboard keys classes so let's go inside this file right here and start off by targeting the keyboard class so we can say keyboard and the keyboards going to be positioned fixed so it's going to float on top of everything else on the webpage so we can say position as being fixed right there and also give it a left of zero and a and a bottom of zero and also a width of 100% so near the keyboard is going to be on the bottom of the page with a 100% width okay it's going to be floating on everything else the position fixed ensures the keyboard stays visible while you scroll down the page all right we can give some padding of five pixels on the top and bottom and zero for the left and right and a background color here of the D code GREEN so zero zero four one three four now the cool thing about this keyboard is you only specify the color once and that is on the background we're going to be using things like RGB a background colors to create different shades of the same color so of course this means this is the only time you specify color for the keyboard all right let's give a box shadow of 0-0 50px and then igb a a 50% opaque black all right and a user selects of none to ensure the user cannot a select the keyboard and a transition of bottom at 0.4 seconds so of course as the keyboard becomes visible and hidden there's going to be a nice animation as that happens so that's why when i have the transition bottom as a property right there so i'm gonna save this and refresh the browser and we have this results right here we have the cable in a bottom corner looking looking pretty smaller now so let's just go back inside here and add at a height of 100 pixels just to see a bit more detail of what's actually happening so I'll save it again and refresh and we have this right here so so far looking pretty good we can now begin work on these states of the keyboard when it is hidden so let's go back inside here and add a new class down here and say keyboard - - hidden by the way I'm using the BMV block element modifier CSS naming convention for these classes now you don't have to use it if you don't like but I do recommend you just use the same classes as I'm doing here for your own code okay cool so we can just say bottom as 100% sorry negative 100% for the keyboard hidden class and essentially the JavaScript is gonna be toggling on and off the keyboard hidden class when the keyboard is visible and invisible okay so I can just save this and refresh the browser and then go inside here choose the keyboard with the inspector and just add the class of keyboard - hidden you can see it hides away of course if I was to now remove it then we get this right here and that's what the JavaScript is going to be doing in the background automatically when you open and close the keyboard all right so that is all for the keyboard class we can now move on to the keyboard keys class and this is gonna look pretty straightforward we can just say keyboard keys and give this a text aligned of Center this ensures all the keys are aligned in the center okay cool so now we have all of this all of the the main structure done for the keyboard we can now move on to the actual keys so there's gonna be different kinds of keys let's first begin work on the most basic type of key and that's going to be a single letter or number so let's make any button inside here with a type of button and also a class of keyboard underscore underscore key okay and we can just put a inside there for demonstration once again all of this stuff is going to be generated in JavaScript eventually okay cool so we have this let's just save this and refresh and we have this right here let's now work on the keyboard key keyboard key class so back inside the CSS let's scroll down and target keyboard key now we can now also just remove that heights on the on the container all right cool so if the keyboard key this one's going to be the largest rule set so far and we can begin by giving it a height of 45 pixels I find this is this is a good height for this top of that thing and a width of 6% the reason why you want a percentage here is because the percentage allows it to be responsive as you decrease the width of the page all your viewing on mobile devices also a max width of 90 pixels once again this max width I think just makes sense to me just so when you on larger screen monitors or larger screen displays you know you don't want the keyboard keys to be very very wide okay also a margin of three pixels to have that spacing between the keys a border radius of 4 pixels a border of none and for now a background of RGB 255 255 255 at 0.2 opacity so again this is just going to be using the background color from up here and then trading making a lighter shade of that so once again this is how you only use a single color and it applies to everything so I'm just going to save this actually let's add a color let's say color as being what and then save this and then refresh the browser and we have this right here so looking looking pretty close to this so far okay so back inside here let's have a font size of 1.05 our EMS five percent larger than the roots element size so that's that an outline of none this will remove the outline you get on mobile devices when touching the keyboard or the keys and cursor:pointer that's for desktop PCs a display of inline flip so the reason why we're using inline flex eeeh is because when we actually put the icons on the phone the keys the icons won't be or in most cases they won't be centered so having inline flex and then having aligned items as being center and then justify content as being Center these three properties are going to fully vertically and horizontally Center the actual icon within the key alright so I might just leave it here for now then go back inside the HTML and make a second key and this one is gonna have an icon so you can use the Google material icon set now by the way you can use your own icon set but I do recommend you just use this one for this video but to actually use the Google material icon set you just create a new I tag with a class of material - icons then you put the icon name inside here so I believe there is a backspace icon named in the Google material icon set so I'm gonna save this and refresh the browser and we have this right here so you can see that the icon is now censored completely due to these three properties now if I was to discover inside here and remove these three we can see the icon is a bit higher so again having these three properties we're going to of course Center the icon in the middle all right so here also there's one more problem so the icon or the the button or the key is higher than this one so to fix that we can go back inside here and we can add a property for a vertical align and then top and that'll fix that problem we can then add a padding of zero and a WebKit tap highlight color of transparent so when you tap on a button by default on mobile devices it's going to have a blue sort of opaque background color and that will remove that all right let's just save this and refresh and we can see here it's now in line with the other key all right cool so our one last thing for the key that's going to be a position of relative because down below when we work on the the caps lock key this little circle here for the lights is going to be a pseudo element and that's going to be P and that's going to be positioned absolutely so we need a position of relative on the key for that to work properly okay so that is all for the key itself actually there's one more thing and that is when the key is active so it's going to copy this and go down here and say key active so when you're actually pressing on the key we can change the background color to be a darker version of what's up here so a bit darker at 12% opacity as opposed to 20% so I can save this and refresh and then click on the key we can see here it now gets a bit darker alright so back inside here we also have oh sorry back inside here we also have different types of key so we have things like of course the the wider key we have an extra wide key we also have a bit of a darker key and we have a key with a lot so there's different kinds of keys we need to write some CSS different classes to support each type of key so back inside here now let's work on the backspace key so let's add a class here for keyboard a key - - wide and for that class once again I'm using BM this is a this is a modifier class as part of so I'm gonna copy this and go inside here and paste it down here and give it a width of a believe it is 12% I can save this refresh we now have the wider version of the key as I said all of this stuff is going to be generated through JavaScript eventually we also have the spacebar so back inside here let's just copy this and paste the gun here and this one I believe he is keyboard under source space let me just try that actually I have the right one here it is keyboard so no it is just spacebar that is the name of the Google icon so let's have a class here extra wide so keyboard key extra wide right there and of course just copy that paste it inside here and we can say we of 36-percent so an extra y1 and also a maximum width of 500 pixels once again to ensure it is not super long on large monitors so I can save this refresh and we have the extra wide spacebar cool so this one here for the little activatable our lights on the caps lock key we're going to be as I said achieving this through a after pseudo-class so let's go back inside here and add a new button for the for the caps lock so duplicate this and I believe this one is let me get the right icon name here it is keyboard underscore caps lock and this is going to be a wide key so we can add wires right there and then we can say keyboard underscore underscore key - activatable so it is an activatable key basically just means it has the little icon so the little circle for the lights in the top right corner okay so let's copy this and go back inside these CSS and target the class so here okay this was taught that's a king board underscore key activatable this one we're going to target the after pseudo-class so for those of you who aren't aware the after pseudo class is basically a virtual element generated in CSS which is going to of course be positioned in the top right corner so to do that we're going to first give it a content of nothing a top of 10px and a right of 10px so these two say it's in the top right corner 10 pixels from the left and right and also a position of absolute and the combination of absolute down here and relative up here in the parent is going to make all of this stuff work in the top right corner let's give it a width of 8 pixels and the same for the heights and also a background so I can type this out so 8 pixels right there a background of rgba it's going to be a 40% opaque black a border radius or so on 50% and this is going to create the actual circle so I can save this and refresh the browser then we can see here we get the little circle light thing in the top right corner so for it to work and for it to turn green and on well that is once again a similar story so we're going to be adding a class to this but first let's write it in CSS so we can just say copy this it's gonna be a class called active alright so for the active class we're going to target the after pseudo element so this right here refers to these same elements as all this stuff right here okay so for this one we're going to say background and say 0 8 FF 0 0 and that is that light green so now I can save this and refresh and now when I add the after so when I at the active class to this we should now see just like that we should now see it turns to green so that is how the caps lock light is going to work all right and the last key is going to be the dark key so for this one let's just make it inside here let's copy this one and paste it down here and say keyboard key - - wide but also it's going to be keyboard key - - dark and the icon here I believe is what is it called it is called check underscore circle all righty cool so in the CSS let's add that class so the dark one is going to be pretty search for word a background of a 25% opaque black so I can save this refresh and we have this right here we have all of our different keys so now we can work on the JavaScript which is going to do two things of course it's going to make the keyboard work but also it's going to be generating the HTML all of this stuff right here for the keyboard so let's go back inside the index page and we have this as a reference so let's just let's just comment out all of this stuff and begin building this in the JavaScript all right so the first thing to do is to define an object and this object is going to be the entire keyboard object itself so we're going to contain all of the methods functions properties inside and objects so let's make a new constant here called keyboard equal to a new object all righty so it's going to need a few things so the first thing it's going to need to keep track of all the different elements so we need to keep track of the main element the keyboard keys container and also all of the keys so those three things right there so inside here let's add a new property elements which is an object containing three more properties four main which is going to be null by default keys container once again null by default and keys and empty array all right so main refers to the main keyboard element the keys container first of the keys container and the keys is an array of the buttons for the keys now Ronny cool so of course as we generated these elements we're going to be setting the values inside the init method so secondly we have the event handlers so here the way it's going to work so the way your other code is going to interact and use the keyboard is basically when the other code says open the keyboard that method is going to accept two functions and they're going to be the event handlers or the callback functions so they're gonna fire off when the keyboard gets input or when the keyboard gets closed so our object for the keyboard is going to support these two events and basically we're going to fire them off automatically whenever the keyboard gets input or on clothes and that way the other code using the keyboard knows when these two events happen all right so pretty cool stuff all right and thirdly we have an object or sorry a property called properties this contains a lot of a lot of the the different values for the current states of the keyboard so it's gonna contain two things a value which will be an empty string for now and capslock which will be false so of course here the value represents the current value of the keyboard and the caps lock is a true or false saying whether or not the keyboard is currently in caps lock mode so those are all our properties that we need to make the keyboard work so as it goes for the functions methods well we can create all of these right now so we can say in its this is going to run when the page first loads up and it's going to of course initialize the keyboard it's going to make all the elements and do all of that stuff the second one is going to be one chord create keys and that's going to be a private method so we can put an underscore here and say create keys now the underscore doesn't actually do anything but it's a naming convention to say this is a private method and the create keys method is going to create all of the HTML for each one of the keys all right cool the third function is going to be called trigger event and this rule as the name implies it's going to be triggering sorry triggering one of these two events so this handle a name is going to be either on your foot or on clothes and it's gonna be truing them it's gonna be firing them off and for here I can just say console.log and now until we actually implemented fully we can just say handle ah sorry event triggered okay and then put the event name or the handler name plus handler name cool so we can make the the fourth one and that's gonna be toggled caps lock so of course this is going to be toggling the caps lock mode once again until we actually write the code for it we can just say console dot log and we can just say caps lock toggle writing and for the for the last two that's going to be the open and D close all right cool so for the open this will contain three arguments so you can pass two of course your two functions for the event handlers but also we're going to accept an initial value so the initial value for the keyboard when it opens up and also on input and on close so the benefit of having this initial value is that way when you have something like a um like a text area for example so if I had its pretty fresh here if I have like decode inside here of course we want the actual keyboard to spawn with decode as the beginning initial value so that's why when I have the initial value property right there in the open method cool so now we have all of the methods written out we can start implementing all of the methods let's begin here with the in it's one actually let's just scroll down a bit more and just say window dot adds event listener you're gonna listen for the Dom content loaded event so once all of the Dom has been loaded on the page we can simply just say keyboard dot init so call the init method when the page or when the HTML structure or the Dom has been loaded fully so we have all of this stuff right here we can begin on the init method so the first thing to do is to create these two elements the keyboard and the keyboard keys elements so let's say here creates main elements we can say this top elements dot main is equal to document create element and say dude so the create element method is going to create a div in this case and store it virtually inside JavaScript and a second one for keys container once again it's going to be a dude alright so have those two done we can then say setup main elements this is going to be adding some classes and also adding the actual keys so we can say this four elements main dot plus list dot add so calling class list add is going to be adding a prior a class so we can say keyboard here so adding the keyboard class to the main container and also one for keyboard - - hidden so we're going to be adding the hidden class by default that way the keyboard is hidden by default but for development purposes we want the keyboard to be showing so we're going to add one or any character here just to of course ensure that this class of keyboard hidden is not added just while we develop the actual keyboard so add something to the the beginning of the class right here so for the keyboard keys container a similar story we can say keyboard keys or so our keys container but class lists like add and we can just add the class for keyboard underscore underscore keys cool so let's now go down here and just say add few dumps let's add these two elements to the actual document itself so firstly we can add the keys container to the main so have that have that parent-child relationship between these two so we can say this the elements main dot append child we're going to be appending this the elements Keys contain okay and also we can then say document got body but append child this elements dot mate so adding the main keyboard container to the actual physical document so I can save this one and refresh and now we have this right here so we have here the keyboard structure generated in JavaScript and displaying on the actual document itself so everything you're looking good so far alright cool so we can now work on the method for creating the actual keys so this is going to be the largest method in this entire object so essentially it's gonna be it's gonna be returning what's a document fragment and document fragments are essentially little virtual elements that you can use to append other elements - and then you append the whole fragment to a different element so in this case we're going to be creating the fragment in this function we're going to be returning it and then we're gonna return the fragment and append it to the keys container which will of course then append all of the keys within the fragment to the keys container all right so inside here let's begin by creating the fragment so we can say Const fragment is equal to document dot create document fragment and also we can say Const key layer is equal to an array so this key layout constant is going to be its it's going to contain the entire key layer so all of the numbers and letters and backspace caps and I've done all of that stuff as actual strings so I'm going to copy and paste this from my reference file and paste it inside here so this is what the key what the what the key layout looks like so we have the top row and I'm just gonna be separating the rows with a with a with a line break okay so of course just go inside here I've got the code in the description so to see so you can just go ahead and copy and paste this so right from the code and just paste it inside your text editor and essentially we're going to be looping through each one of these individual characters or little strings and then we're going to be creating elements so each individual button element from each one of these characters so let's go down here and one last thing we're going to be defining a function which creates the HTML for an icon so of course we have your Google material icon set we need to have a way to easily create the HTML so we can just say Const creates icon HTML equal to a function which takes in the icon name and it's going to return an HTML string this will be by class material - icons and it's gonna of course have the icon name inside here so basically it's going to be your JavaScript function for generating this right here cool so let's go down here now and begin looping through each one of these characters - of course generate some HTML elements so let's go down here and say key layup dot for each so for each key we can have key as the parameter here so for each one of these keys we can begin by creating the actual button element so we can say fonts key element is equal to document to create element we're going to be creating a new button element alright then we also need to know if we need to insert a line break for each row after this key so let's go back inside here I'll show you what I mean in the demonstration we have here a line break to create the new row so basically after the backspace that P the return and the question mark there needs to be a line break so back inside the JavaScript let's make a new constant called insert line break equal to and then you can just say backspace P enter or question mark dot index of he does not equal one so basically the we're just saying is the key that we're looping through at the moment is that backspace P enter or question mark if it is then we get true otherwise we get false and the index of method returns negative one sorry it should be negative one here sorry so returns negative one if it is not in the array who and basically after we're gonna be checking if this is true and then adding the library alright cool so now we can do some attributes to the key element so we can just say add attributes slash classes and we can say key element that's set attribute we're going to be setting the type to the button so once again just mimicking or creating this right here and also we can say key element class lists we're gonna add the class for keyboard underscore key so of course as we know the keyboard underscore underscore key class is the main class for all of the keys and then of course we have these modifiers down here so every key needs to have this class which is why we're adding it inside the loop all right cool so now this is the main part so we need to do different things based on which key we're currently looping through so let's begin with the backspace and this will be a switch statement so we can say switch on the key and we can begin with the backspace so case that space if the current key is the backspace key then we can say key element dot class list dot ant we're gonna add the keyboard underscore key - - wide class to the element alright and also we can say key element in HTML is equal to create icon HTML that function up here and we can pass in that space alright so of course the backspace key needs to be wide so it's going to have the class of keyboard key white and also it's going to do different things for the actual on click event so when the key gets clicked on when you press on the key it needs to of course remove the last character on the current on the current value all right so let's go back down here and we can say key element but add event listener we're gonna say unclick we're going to run this function inside here and basically it's gonna say this property's value remember this refers to the keyboard object so say this property's value is equal to the current value so this property's value dot substring we're gonna substring from the first character to the second last character so this sub property's dot value dot length minus 1 and this is gonna remove the last character from the current value all righty and also because here the input has changed we're going to trigger the on input event handler to notify the code that is using the keyboard that the input has changed so we can just say this slot trigger event on input all right and that is all for the backspace key we can do a very similar thing for the caps the enter overturn and the space and done keys so let's just copy all this and paste it down here and let's now work on let's now work on the caps so in the case of the caps key we're going to be also adding the wide but also we're going to add the keyboard underscore PD activatable once again the activatable class is going to be adding the little typewriter light to indicate the active state of the of the of the caps lock and the icon is going to be keyboard underscore caps lock for the on click event well when you press caps lock then we need to toggle the caps lock on the keyboard so we can just say this dot toggle caps lock no re and we don't need to trigger any events because no input has changed and also the keyword hasn't been closed so we can just say here instead our key element but fast list dot toggle keyboard underscore key - - active and then these foot properties got caps lock so this is going to be toggling on or off the active class that will of course display the green light okay and also we're going to pass in here and say if the current state is caps lock equals true then the toggle method is going to be forcing the the class to be added to the key element all right and that is all for the caps lock case so we can go down here and add the one for the enter or the return key this one is going to be pretty easy it's just going to have the keyboard wide class the icon is going to be a keyboard underscore return and unclick we're going to be simply appending a line break to the value so we can say this type property value is must-eat also appending a line break so that /n we can also trigger the event for on input the input has changed they have inserted a line break so we can put that right there that is all for the inter you can copy and paste this once again do the same thing now for the spacebar so for the spacebar this would be an extra Y the key all right it's gonna have the spacebar iPhone and on this one is going to be very similar story instead of having a line break we're gonna add of course a slice a wide space okay and once again triggering the on input event and last but not least we have be done so for the done button - of course close the keyboard we're gonna be triggering the close function so we can just say done and we can say inside here check underscore circle and the class is gonna be wide and also keyboard e underscore sorry - - duck and this is going to trigger the on closed event and also say this dot close okay cool so that is all of our special special five keys done we can now work on this standard keys so we can just say down here for the default so if none of these cases are true if they're anything but these special keys are caps backspace etc then we can simply not even have this stuff right here instead we can just say key element dot text content is equal to KI got to lowercase so we don't need any extra classes added it's already got the keyboard key class and also it doesn't have any icon so it's just going to be this hex content it's going to be the current key dot tool okay so currently all of this is lowercase but just in case you may have mistakenly made one of these in uppercase well the to lowercase is of course going to force that to be lowercase okay and when a regular key gets pressed on then we can just say this dot properties dot value plus equals lease properties dot caps lock so if caps lock is on then we can say key to uppercase otherwise we can say key to lowercase nobody cool and also of course trigger the on input event all right so just to recap here we are looping through each one of the strings here on the key layer and we're saying you know we have a new button element we're also saying whether or not we need to insert a line break if it's backspace P enter or question mark we do we're adding a standard attribute and a class class list through the to the key and then in this switch statement we're basically doing different things for each one of these special keys so backspace caps enter and space and also done for these standard keys were just simply having the text content of the button to be the key the lowercase version of the key and of course having the input event trigger down here and the key value appended to the the internal value property alright cool so we have the key element pretty pretty well constructed we can then finish off here finish off the for each by let me just see where we are here so finish it off by simply then saying fragment for appendchild we're gonna be a pending of course the key element to the fragment so so remember the fragment is just a little container for all of the keys okay and then we can say if we need to insert a line break from top we can save fragment up in charge also append document create element we can create a new line break element right there alright and then last but not least or finally we can simply then return the fragment all right so now all of these keys have been looped through they've all been constructed into a button we're now returning all of the keys as a document fragment so now it's simply a matter of appending the fragment so appending the return value of this function on to the keys container so you can see these four elements dot keys container dot append child we're going to be a we're gonna be appending to this dot creates keys Roddy cool so I can save this and refresh the browser and we have this right here we have all of the keys generated if I go inside here we can see we have all of the classes wide activatable the icons have been rendered all of the stuff is working just fine okay so now what we can do is we can actually test the keyboard out so let's just let's just say WS e we can see here we get the event triggered so the on input function is supposedly being called here and if I log out the keyboard object and press ENTER and expand this inside the properties we can see the value is WS e so the keyboard is working pretty well so far we now need to just implement some of these functions down here to make everything work just fine so let's first implement the toggle caps lock function so this is going to be pretty pretty show forward we're going to simply say this stop property's got caps lock we're going to set the caps lock property to be the opposite of what I currently is so adding the exclamation mark adding the adding the knots operator here is going to flip the current value of the caps lock and also we want all of the all of the keys to turn uppercase as we can see here when the caps lock is turned on so to do that it's pretty straightforward we just need to have all of the keys inside this array so what we're going to do is once all of the once all of the elements have been appended and working fine we can then we can then say where is it here we can then say this got elements dot the keys is equal to list of elements keys container but we select up all we're going to select all of the all of the buttons with a class of B board underscore key so all of the keys we created inside here are now going to be as a node list object or what no this it's basically like an array stored in the keys property so I'm just gonna save this and refresh the browser and then look at the keyboard object and expand this once again inside elements we have here a node list of 44 elements if I was to expand this we have each one of the keys reference to inside JavaScript's all right so we can then simply just loop through all of these keys inside the caps lock method and then basically just say if it's caps lock is on then of course uppercase those keys so we can say for const key of the list for elements dot key so if each one of those keys we can say if key dot child elements count is 0 so this is basically checking if the key does not have a icon so of course when you have when you have an icon so inside here when you have an icon whereas this one so this button has an icon so this here is an element so the child element count for this button is going to be one for the regular key such as the the Y key this is going to have a child element count of zero there are no tags or elements inside there so we can say here if it's a standard key then we can say key text content equals this stock properties caps lock if it's turned on then we can say king dot text content but uppercase otherwise convert it into lowercase cool so I can save this and refresh and we can now test out the caps lock functionality so refresh here press this and we get not only the only the the lightest turning on but also of course the keys are turning into caps lock on or off and also the content is also working so I pressed a few key C with caps lock and caps lock off we can say keyboards at properties dot value you can see here the first five have been uppercase so that's all working perfectly fine alrighty cool so back inside here let's now implement the trigger event method so this one is gonna say if type of this lock event handlers handler name is equal to a function so we're saying here is a function so is a is a function specified as the value of one of these properties of course this will be either on input or on clothes so if there is a function specified if the user if the code has specified a function for for the for the handler then we can fire it up so we can say this got event handlers for the handler name once again are they going to be input or close we're gonna trigger the function and we're going to pass in as the first argument this that property's thought value so we're going to provide the value the current value of the keyboard to the code that is using the keyboard all right cool so now what we can do is we can probably implement the open method just so we can start using the on input and the on clothes methods to demonstrate how this works so for the open method we're going to say this slot properties dot value is equal to the initial value passed in and if it wasn't passed in then we can just say an empty string so this is a saying if it was provided then you said otherwise that use an empty string so resetting the value of the keyboard and also we can say this stop event handlers dot on input is equal to on input and the same thing for on clothes so we can see here how this type of check works basically maybe the user doesn't actually provide a function for an input so it's going to be not a function otherwise it's going to work so we have those two right there and also we can say this the elements main dot class list we're gonna remove the class of keyboard - - hidden which will of course display the keyboard when you call the open method so let's just go inside here and we're gonna remove the extra code to here from the from the class so get rid of that it's nobody's to go so now we can do is in this event handler we can say keyboard dot open and here we can provide the initializer for example we can say we can say decode here as the initial value for the keyboard and for the on in put function we can provide a function just like this and remember the function is going to be given an argument the current value so we can say here current value has a parameter and of course that'll contain the carabao of the keyboard so we can say console.log current value and this right here is just an example of how other parts of your code or your system is going to be using the keyboard it's going to be through the open method and this is what I mean by it's going to be easy to integrate all right cool so back inside here we can also provide a function for when the keyboard gets closed so we can once again have the current value parameter you can say console.log keyboard closed and have to be finishing value as being current value okay cool so we can now save this at a refresh the browser you know what let's go back inside here it'll be clearer if I put something here I say value change and here it is so now we can see we should get this in the console so I can save this in refresh and then start typing and we get here value chain two it is decode and etc so we can see first off the initial value is working and just Pharma get decode here and of course we get all of this stuff so of course this is how this is how your other codes are going to interact with the keyboard and if I was to press done here and close it off we get keyboard closing and then finishing value decode of course we need to actually implement the function to close keyboard so let's do that right now so back inside here for close we're going to say this slot value this low values equals to an empty string and so of course this is going to be resetting the value we're also going to reset the to event handlers on a put-on closed alrighty and we can then say this foot elements but classlist sorry that made that class list you can remove or so we can we can add the keyboard hidden we should of course hide the keyboard off the screen so now we should have the keyboard in pretty much a full working order so I can save this and refresh and we can close the keyboard and it works just fine so that is the whole keyboard basically done so the way it works for the demonstration so back inside here the way I've made it so you're able to click on click on the text area and make the keyboard pop-up and have the value being passed in there well what I'm doing here is I'm using the open method to use the keyboard so I've also made a bit of a helper class for that so let's go ahead here and inspect this so we have here a class on the text area called use a keyboard input so this class right here is a special class defined by me which will basically trigger the keyboard for the the text area or the input that the class is on so let's go ahead now and actually implement this used keyboard input class all right so essentially it's an example of the keyboard being integrated with and used alright so back inside here let's first off just add the class to the text area so we can say by class equal to use keyboard keyboard input just like that and we can also just go ahead and just remove the HTML from down here cool so now you have this class we can then go back inside back inside the unit's function or method for the keyboard and we can just say down here automatically use keyboard for elements we don't use keyboard input all right and we can just say document got query selector so for basically every single input or text area with a class of use keyboard input we're going to say for each meet one of those nests that element we're gonna simply add the event for focus so when the text error or input gets focused on you can say element add event listener on focus we're gonna run this function and of course it's gonna be opening up the keyboard so we can say this dot open okay we can pass in here as the initial value it's gonna be the current value of the text area or input so we can say element o element dot value and then for the on input event handler we can say the value and this is of course the current value for the keyboard we can say current value we can say element value equals current value so the value of the of the texture or input is going to be set to the current value of the actual keyboard all righty and I think I also made a mistake down here this should be this stock property's got value not this value so that's all good now all right so I can I can just save this one you know what I'm also gonna remove this open down here that was just for demonstration of the usage of the keyboard so let's get rid of that save this and refresh and this should work just fine so refresh this and click on the text area and it works just fine press ENTER again and then go back inside here now of course the keyboard value is currently set to of course the the value of the text area if I was to press done and check out again now it is it's nothing of course and once again press it again and then do it again this time it is the you know of the keyboard so that's how it works and that is how or that's an example of how you can actually integrate the keyboard with your existing code otherwise you just pass in your initial value you only put on your own clothes all right yes I'll leave a link to all this code in the description you can go ahead download it and you know use it thanks for watching guys I'll see you later

Channel: dcode

Views: 69,111

Keywords: code, coding, programming, tutorial, introduction, beginner, walkthrough, guide, software, development, simple, easy, into, english, with, example, examples, developer, lecture, recording, web, website, design, ui, ux, html, html5, css, css3, javascript, js, ecmascript2015, projects, project, element, elements, dom, queryselector, virtual, keyboard, input, event, handler, events, onclick, oninput, object, class, classes, libraries, library, icons, on, screen, button, bem, block, modifier, backspace, textarea, form

Id: N3cq0BHDMOY

Length: 62min 32sec (3752 seconds)

Published: Mon Apr 29 2019