1 00:00:06,470 --> 00:00:07,670 In this video. 2 00:00:07,670 --> 00:00:11,690 Let's talk about key board event. 3 00:00:11,930 --> 00:00:19,460 This is the application that we are going to build while explaining key board event types. 4 00:00:19,790 --> 00:00:23,420 It says that press any key on your keyboard. 5 00:00:23,450 --> 00:00:24,970 So let's try. 6 00:00:25,580 --> 00:00:36,260 If I press a on my keyboard, it says that you are pressing the E key with some beautiful emoji. 7 00:00:36,290 --> 00:00:41,870 Indeed, I'm pressing the key E when I release my finger. 8 00:00:41,900 --> 00:00:49,040 It says that you release the key A and indeed I have released my finger on key. 9 00:00:49,040 --> 00:00:53,910 A Any key I press it gives me the key name. 10 00:00:53,930 --> 00:00:56,220 So this is what we are going to build. 11 00:00:56,240 --> 00:00:58,820 All right, so let's get started. 12 00:01:00,010 --> 00:01:04,930 So as usual, I will provide this template for you. 13 00:01:04,959 --> 00:01:09,370 Download it, then open it using your preferred code editor. 14 00:01:09,640 --> 00:01:20,470 So inside the HTML we only have one HTML element with my JavaScript and with some small CSS as that. 15 00:01:20,470 --> 00:01:28,630 Again, since this section or this video is all about HTML and CSS, that is why I provided the starter 16 00:01:28,640 --> 00:01:33,460 template for you and for the CCIS with some few lines of CSS. 17 00:01:33,460 --> 00:01:38,860 So if you open it, you're going to have something like this for this one. 18 00:01:38,860 --> 00:01:46,330 If I press any key, there is no interactivity because there is no JavaScript and the same time we are 19 00:01:46,330 --> 00:01:48,340 not interacting with a dom. 20 00:01:48,550 --> 00:01:50,200 So let me close this one. 21 00:01:50,200 --> 00:01:51,850 Now let's begin. 22 00:01:52,030 --> 00:01:52,420 Good. 23 00:01:52,420 --> 00:01:54,280 So let me close the CSS. 24 00:01:54,280 --> 00:01:56,170 Now back to JavaScript. 25 00:01:56,440 --> 00:02:02,590 You can see that I have done even most of the work for you by selecting the H one. 26 00:02:02,590 --> 00:02:04,900 So why are we targeting the H one? 27 00:02:04,900 --> 00:02:08,110 Simply because we want to display the text here. 28 00:02:08,259 --> 00:02:14,680 Let's say that if I press a you saw you are pressing key A or key B, this is what I mean. 29 00:02:15,550 --> 00:02:15,940 Great. 30 00:02:15,940 --> 00:02:20,980 So come back to business, the event types when talking about keyboard. 31 00:02:20,980 --> 00:02:25,660 So come down here and beautiful comment as always. 32 00:02:25,660 --> 00:02:28,270 ID so this one going to be. 33 00:02:29,070 --> 00:02:30,420 He borrowed. 34 00:02:32,290 --> 00:02:33,280 Event. 35 00:02:34,750 --> 00:02:39,130 The first event type is what we call key. 36 00:02:40,330 --> 00:02:41,170 Don. 37 00:02:41,440 --> 00:02:45,850 And this event Friday when the key is pressed down. 38 00:02:45,850 --> 00:02:47,530 So this is fired. 39 00:02:47,530 --> 00:02:52,770 When the key is pressed down. 40 00:02:52,780 --> 00:02:55,270 So how are you going to do it? 41 00:02:55,300 --> 00:03:04,750 Well, for this particular event, we are not going to target a particular element, but instead the 42 00:03:04,750 --> 00:03:07,420 entire document or the body. 43 00:03:07,870 --> 00:03:14,710 So as soon as our browser get full cogs in a key that we press, the event is going to be fired. 44 00:03:15,100 --> 00:03:21,910 So we are not going to select any particular element, but instead we are going to target the entire 45 00:03:21,910 --> 00:03:24,100 body of our DOM. 46 00:03:24,430 --> 00:03:27,370 So get back to the script here. 47 00:03:27,520 --> 00:03:32,940 Now, if you make use of document, you remember how we examine the DOM. 48 00:03:32,950 --> 00:03:36,700 We have documents dot body, right? 49 00:03:36,700 --> 00:03:39,070 And for this one, we can change the style. 50 00:03:39,100 --> 00:03:40,440 Let me show you something here. 51 00:03:40,450 --> 00:03:41,520 Let's see the style. 52 00:03:41,530 --> 00:03:44,880 Change the background color to, let's say, red. 53 00:03:44,920 --> 00:03:49,390 We see that I have targeted the entire body of my document. 54 00:03:49,720 --> 00:03:53,410 This is what we want to what trigger the event type. 55 00:03:53,530 --> 00:03:59,410 So now we know that we have selected the OR, we are targeting the body. 56 00:03:59,410 --> 00:04:03,610 So instead of style, we are going to use an event listener. 57 00:04:03,730 --> 00:04:09,910 So document dot, body dot, add event listener as before. 58 00:04:09,910 --> 00:04:13,290 And this event takes into agreement. 59 00:04:13,300 --> 00:04:17,050 One is the event type or the event name. 60 00:04:17,079 --> 00:04:21,100 And this is called the key down. 61 00:04:21,890 --> 00:04:24,920 The next segment is callback function. 62 00:04:24,950 --> 00:04:29,060 It can be error function or normal function for this context. 63 00:04:29,210 --> 00:04:41,030 So here we can console.log tests and sees that you are pressing the key. 64 00:04:42,050 --> 00:04:42,700 Okay. 65 00:04:43,010 --> 00:04:43,720 Like that. 66 00:04:43,730 --> 00:04:45,770 So now let's check it out. 67 00:04:45,800 --> 00:04:47,720 Let's open the console. 68 00:04:47,810 --> 00:04:51,530 And now indeed you are pressing the key because I pressed the key. 69 00:04:51,530 --> 00:04:52,970 So when I refresh it. 70 00:04:53,000 --> 00:05:00,890 Now, when I press any key, we see that it says that you are pressing the key and we can take this 71 00:05:00,890 --> 00:05:04,380 text and then place it here as we did before. 72 00:05:04,400 --> 00:05:07,520 How we can what attacks into the dom. 73 00:05:07,820 --> 00:05:15,200 So here what we can do is that that's why I selected the H1 because you want to replace this particular 74 00:05:15,200 --> 00:05:17,590 text with our dynamic key name. 75 00:05:17,600 --> 00:05:18,860 But here is a clue. 76 00:05:18,890 --> 00:05:21,140 How can we get the key that we type? 77 00:05:21,170 --> 00:05:25,460 That is why we have this event called E. 78 00:05:25,970 --> 00:05:30,740 So when I console.log E you can see the event type. 79 00:05:31,610 --> 00:05:33,140 So here, let's check it out. 80 00:05:33,140 --> 00:05:39,920 When I refresh it and I press in a key and press an E, you can see that I get couple of properties 81 00:05:39,920 --> 00:05:41,390 of the event type. 82 00:05:41,540 --> 00:05:46,090 You can see that we have the character code and the code here is key. 83 00:05:46,370 --> 00:05:49,460 But what I like is this key. 84 00:05:49,490 --> 00:05:59,090 You see that it has given me a indeed I was pressing the key a so we can make use of event dot key and 85 00:05:59,090 --> 00:06:01,610 going to give us this particular key name. 86 00:06:01,790 --> 00:06:04,400 If we don't know the key code, why not? 87 00:06:04,400 --> 00:06:05,900 You can also use this one. 88 00:06:05,900 --> 00:06:12,440 You can use any properties of this one of your choice and see the type is called key down and this is 89 00:06:12,440 --> 00:06:14,150 the event type. 90 00:06:14,360 --> 00:06:15,050 Great. 91 00:06:15,050 --> 00:06:18,020 So now back to JavaScript here. 92 00:06:18,050 --> 00:06:23,030 Now we can see that this lay this text to the DOM. 93 00:06:23,120 --> 00:06:24,200 So here we go. 94 00:06:24,230 --> 00:06:27,050 I will take the h one dot. 95 00:06:28,170 --> 00:06:30,650 In a mirror or test content. 96 00:06:30,660 --> 00:06:33,210 Then I'm going to add some text. 97 00:06:33,450 --> 00:06:33,960 Perfect. 98 00:06:33,960 --> 00:06:37,800 So I'm going to use back take or even. 99 00:06:38,130 --> 00:06:38,350 Yeah. 100 00:06:38,500 --> 00:06:41,530 Practice work because I want to use temperature here. 101 00:06:41,530 --> 00:06:46,020 I can see that you are, I can copy this one, the same text. 102 00:06:46,260 --> 00:06:47,820 So how can I get a key. 103 00:06:47,820 --> 00:06:49,980 I can get it from this event. 104 00:06:50,010 --> 00:06:50,620 Okay. 105 00:06:50,670 --> 00:06:58,440 So we can name it as event, ev t or event or e, but most of times we make use of E, which represents 106 00:06:58,440 --> 00:06:59,100 event. 107 00:06:59,190 --> 00:07:01,500 So events dot key. 108 00:07:01,710 --> 00:07:03,600 You're going to give me the key. 109 00:07:03,600 --> 00:07:04,170 I'll press. 110 00:07:04,170 --> 00:07:05,700 So check it out. 111 00:07:05,700 --> 00:07:09,460 You see that you are pressing this key, you are pressing space. 112 00:07:09,510 --> 00:07:18,200 Represent t like that the key t so now I can inject this dynamic value using dollar sign and kerberos 113 00:07:18,210 --> 00:07:23,610 is an event dot key and that is it took it out. 114 00:07:23,640 --> 00:07:25,890 Now let's close the console. 115 00:07:25,920 --> 00:07:33,000 If I press any key, you see that it's giving me the event or displaying the key correctly. 116 00:07:33,180 --> 00:07:39,510 But when I release my my finger from my keyboard, there is no event because we are not saying that. 117 00:07:39,510 --> 00:07:41,070 Hey I so nice. 118 00:07:41,070 --> 00:07:42,900 Release our finger fire. 119 00:07:42,900 --> 00:07:48,420 Another event and the event that we will talk about is what we call key app. 120 00:07:48,420 --> 00:07:53,970 Meaning if you press a key down, meaning the key is down if release your finger. 121 00:07:53,970 --> 00:07:55,530 The key is app. 122 00:07:55,530 --> 00:08:01,140 But you saw that I added some emoji to the final one and this one too. 123 00:08:01,170 --> 00:08:07,440 We've talked about how we can use emojis in HTML so you can use any image of your choice. 124 00:08:07,440 --> 00:08:15,510 If you go to Q Symbol, you're going to have this bunch of emojis that you think, if it's okay for 125 00:08:15,510 --> 00:08:18,240 you, why not copy what you want? 126 00:08:18,240 --> 00:08:21,840 So let's say that I want this one. 127 00:08:21,870 --> 00:08:23,610 I'll click on copy. 128 00:08:23,610 --> 00:08:24,630 It's been copied. 129 00:08:24,840 --> 00:08:30,090 Now I'm back here, then I'll just paste it here and now check it out. 130 00:08:30,210 --> 00:08:34,470 When I press in a key a see that 100 released my finger. 131 00:08:34,500 --> 00:08:36,059 There is no event. 132 00:08:36,090 --> 00:08:38,100 That is what we are going to talk about. 133 00:08:38,100 --> 00:08:41,700 The next event is what you call key app. 134 00:08:42,730 --> 00:08:44,670 Meaning when the key is up. 135 00:08:44,680 --> 00:08:47,040 I want to further an event. 136 00:08:47,050 --> 00:08:49,240 So key app. 137 00:08:49,930 --> 00:08:52,120 So when the key. 138 00:08:53,110 --> 00:08:54,820 Is released. 139 00:08:56,000 --> 00:08:57,380 Then I want to file that. 140 00:08:57,380 --> 00:08:59,270 So the same document. 141 00:09:00,220 --> 00:09:14,200 Document document dot body dot ad event listing on the same format pass in the key app, the key app. 142 00:09:14,200 --> 00:09:15,820 And then here we go. 143 00:09:16,060 --> 00:09:22,380 Pass in my callback function and I have my event type and my function body. 144 00:09:22,390 --> 00:09:34,570 So here I can replace this one with this one and I will see you released you re list the key. 145 00:09:34,720 --> 00:09:35,560 The same thing. 146 00:09:35,560 --> 00:09:37,060 I will have access to my key. 147 00:09:37,060 --> 00:09:42,220 So let me change the emoji here to an angry emoji. 148 00:09:42,220 --> 00:09:45,850 Because here, why are we releasing our key? 149 00:09:45,850 --> 00:09:48,520 So we need to be angry, right? 150 00:09:48,880 --> 00:09:49,990 So let me close. 151 00:09:49,990 --> 00:09:51,220 I want this one. 152 00:09:51,220 --> 00:09:55,600 Yes, copy that is copied and then replaced with this one. 153 00:09:55,600 --> 00:09:56,920 Now check it out. 154 00:09:57,430 --> 00:09:57,690 Okay. 155 00:09:57,820 --> 00:10:05,140 So when I refresh it, when I press in a key, as soon as I release my finger, another event fired.