Assalam o Alaikum, Welcome to 60 Days JavaScript Course In this video, we will see how to press any key with keyboard It will tell us which key you have pressed and what is the code of that key Now when I press space, it will tell me that you have pressed space and the code of space is 32 There are different keys which is assigned by computer for space, i will press 1 for space, i will press 49 the number above the keyboard if i will press this side, then also i will get 49 here it will tell you
which key you have pressed and also the code of the key now see if i have a keypad button which is on the side, like a calculator type on the computer keyboard If you have a keyboard with a keypad button, the keycode is 97. But if you have an alphabet perform a function by pressing this key You can find the link in the description The video is also available in this playlist You can also perform any function by pressing a key Watch that video once if you haven't watched previous videos Now I wi
ll press any key If I press L, you will see the code of L and L Now F, G, will show the code of all keys How to make this function using javascript Let's go to code editor I opened code editor and live preview how to make this function in javascript let's see how to make this function in javascript open code editor and live preview i have written code in html let me explain you first of all, take section tag make sure your javascript and style file is linked take section tag and add div class it
as container I have taken another div in container I have classed that div as key I have taken a heading of h1 I have written key pressed and then I have taken h2 I have written g below it just to show we will change the rest of the content with the help of javascript but first below that we have to write g just to show rest of the content we will change with javascript but first to do styling i have written these things then accordingly i have put new class arrow and in arrow i have taken an i
mage tag and in image tag i have put svg image i will show you this is arrow dot svg this is also an image format this is raw double arrow that is an image svg you can find it easily in google after that accordingly give it class key code in key code write 56 just to complete the content we will change all code from javascript Now we are in style.css We have written tags in font-family, star-mark, margin-0, padding-0, border-box, text-decoration-none, list-style-none and font size 20px because w
e want to keep all in 20px so we have to keep normal body font size 20px you can change it on your hard drive so now i start coding and here is the library here is the section kit copy it and go in style and css first of all, give it height minimum height 100vh give it width 100% padding 100px top bottom and 0px from right and left add display flex justify content center align items center all content will be in center now add background color and we put this color and we put this color and you
can put section on this but we put this color on body so we don't need to put this color and then we copy container and we put div class container and we style container copy container now we have div class container first of all we give width width is 100% height is fixed fit content display flex center align items display, display, display, display, display, display, display, display, display, display, display, display, display, display, display, display, display, display, display, display, di
splay, display, display, display, display, display, display, display, display, display, display, display, display, display, display, display, display, display, display, display, display, display, display, display, display, display, display, display, display, display, display, display, display, display, display, display, display, display, display, display, display, display, display, display, display, display, display, display, display, display, display, display, display, display, display, display
, display, display, display, display, display, display, display, display, display, display, display, display, display, display, display, display, display, display, display, display, display, display, display, display, display, display, display, display, display, display, display, display, display, display, display, display, display, display, display, display, display, display, display, display, display, display, display, display, display, display, display, display, display, display, display, dis
play, display, display, display, display, display, display, display, display, display, display, display, display, display, display, display, display, display, display, display, display, display, display, display, display, display, display, display, display, display, display, display, display, display, display, display, display, display, display, display, display, display, display, display, display, display, display, display, display, display, display, display, display, display, display, display,
display, display, display, display, display, display, display, display, display, display, display, display, display, display, display, display, display, display, display, display, display, display, display, display, display, display, display, display, display, display, display, display, display, display, display, I make it 90% to make space and then div style it and give it white color and give it display justify content center line items center and now flex direction column normally it is in r
aw form but here I make it column so it will have a top and bottom content and we will add box shadow in box shadow i will add 0px then 0px then 10px and then 0px and apply color on it 00 and 01 we apply color on it apply color on it apply color on it apply color on it apply color on it apply color on it apply color on it now i will give padding 30px from all sides so we have a nice box and transition 0.3 second ease and box shadow i will put transition on box shadow and add cursor now we will c
all it pointer now we have a pointer now i will make it on big screen and and here we have to set the height to 100% now we have the content in the center here we have to set the fit content and the content of the previous one is not working properly so I will remove this now we will come down and we will place the container div on its hover here we have container and we will hover over it after hovering we will place it on the same box but we will change the pixel here I will change it to 60 pi
xels change the pixel size 60px 60px 60px 60px 60px 60px 60px 60px 60px 60px 60px 60px 60px margin 20px and 0px now we have a box next we have arrow style it dot arrow and add shadow first, add box shadow i will add none and add important so, it will work and add important box shadow will work on all but not on this one and add background color to make it transparent and add padding 0 from top bottom and 100 from left right and in arrow we have image arrow dot dot we have a text image and height
we will make it 80px and set height to 80px now we have a good image now we can create more space for that i will add a new div 20px I will put a margin of 20px Now we have a box Now we have a box Now we have a box Now we have a box Now we have a box Now we have a box Now we have a box Now we have a box Now we have a box Now we have a box Now we have a box Now we have a box Now we have a box Now we have a box Now we have a box Now we have a box Now we have a box Now we have a box Now we have a
box Now we have a box Now we have a box Now we have a box Now we have a box Now we have a box Now we have a box Now we have a box Now we have a box Now we have a box Now we have a box Now we have a box Now we have a box Now we have a box Now we have a box Now we have a box Now we have a box Now we have a box Now we have a box Now we have a box Now we have a box Now we have a box Now we have a box Now we have a box Now we have a box Now we have a box Now we have a box Now we have a box Now we hav
e a box Now we have a box Now we have a box Now we have a box Now we have a box Now we have a box Now we have a box Now we have a box Now we have a box Now we have a box Now we have a box Now we have a box Now we have a box Now we have a box Now we copy this and style it give position to overlay height 100% width 100% top 0 and left 0 and display display flex and display display flex flex justify content center align items center all content is in center now we put background color background co
lor is same as body like this now we will add background color and same body color so that it will look like it is same on whole body and no other content is present if i make it transparent then you will see that the content is also present so i will make same body color and overlay and here we will add a property when overlay has hide class .hide when it has hide class then display is null so we will add this class in javascript by using function when we will press key then hide class will be
added we have added hide class display is null now we will Go to main.js First of all I delete the rdg code I write constant Display key Display key Document Document. Query selector And Quctor.key or we can change it to h1 and we can change it later we can change content on it you can select any of them and content will be replaced display key code and display key code i copy all the display key code and I copy all the display key code and I copy all the display key code I display both of them
and I store them in display key code and I store them in display key code and I store them in display key code and I take another constant I give it key code div I give it key code div and I add document and I add document dot query selector and in that document dot query selector and in query selector we have key code we have key code and we will take key code and variable constant level we have to put dot to it because it is a class so we will add dot to select the class query selector works s
ame as css selector i have explained this in javascript home functions if you are interested in learning that you can find the link in the description you can visit the channel in description you can visit the playlist of my channel in description one more variable we named it overlay in which we will store the overlay div here document.querySelector and in querySelector we have the overlay div we copied it and here dot means we are selecting the class Copy Overlay Div Select Class and put .over
lay Now we have Overlay Div KeyDown() KeyDown() means when ever you press a key So, we have a function I will give a parameter of key E will be represented by key And here I will give a parameter of key Overlay.ClassList.Add() And here I will give a parameter of key Hide() when i press any key, hide class will be added to overlay div now i will reload the div now we have no class and display is none as we defined as soon as height class is added display is none if i open inspect element you can
see i will put it on another page now as you can see we have height class added now i reload it now we have no class but i can add it as i press key overlay hide now i have mouse here div class overlay empty i can add it as i press space key same as before and end inspect element and hide class will be added so, i do same and end inspect element in javascript i will add another function display key function in which we store h1 display key .innerHTML in innerHTML e.keycode e.key e.key any key ad
d it in html add space it is not displaying but if i type f or g or h it will display how to change it i will show you it is showing so here we have the key how to change it here we have the key you can change it as you want here i will write display key code display key code copy it display key code dot inner html inside that i will write e dot key code display keycode.inner.html and type e.keycode save it now i type here now it will show me the code display tag and counting and this is another
db display keycode and h2 tag i will use key code because we have selected one key tag so i will use h2 now i will press any key now on this side we have key press and here we have key so which key we press and on this side we have which code of this key like this but as i do on screen i press space nothing is coming because it didn't add space so i will put a condition if space button key code is 32 here i will add e.keycode when key code is 32 here i will add triple equal so that we have exac
t answer if you will add single equal then it will not work single colon and space and save it now when i press space space key will come F, G, whatever key i press key will be pressed and in this side we have key code you can do more changes you can perform any function i have given link in description you can press this key and functions by using this key. I have given the link in the description. You can run music by using this key. I have given the links of different devices. I have shown yo
u how to run music. You can run voice by using this key. It means you can perform other functions by using this key. You can learn gaming functions in it easily. By any key. Like in javascript, you learn gaming. Because, Insha Allah, there are upcoming videos. After this 60 day series, and after that, there are a few videos on autopix. After making that, then in javascript, game development. Videos will be made on it. If you are watching the video late,, you may have videos. In game, there is a
function called movement. Press 5, 4, etc. The same function is used. The function is used to count the keys and resemble them with the key code. When the key code is pressed, the function is performed. If you like this video, please like and share it. Subscribe to the channel. See you in the next video. Allah Hafiz
Comments