1 00:00:00,330 --> 00:00:05,850 Here in this lesson, we're going to be looking at key press and the free press option in that event, 2 00:00:05,850 --> 00:00:06,510 listeners. 3 00:00:07,260 --> 00:00:10,650 Let me give you a sample of what we're creating in this lesson. 4 00:00:10,980 --> 00:00:13,380 We're going to be just using just a JavaScript. 5 00:00:13,390 --> 00:00:19,170 So that includes creating the elements, as well as applying the styling to the elements and then appending 6 00:00:19,170 --> 00:00:19,890 them to the page. 7 00:00:20,100 --> 00:00:23,730 And then all of the event listeners are all going to be done with JavaScript. 8 00:00:23,970 --> 00:00:25,920 So let's take a look at the final product. 9 00:00:27,660 --> 00:00:32,220 When we load the page, it's just going to have the button that's been created again with JavaScript 10 00:00:32,220 --> 00:00:36,930 and as well as the styling as applied with JavaScript, when you click the button, it's going to create 11 00:00:36,930 --> 00:00:40,950 an input area when you can write into the input area. 12 00:00:41,200 --> 00:00:45,150 And when you press enter, it's going to add the input area to the top. 13 00:00:45,450 --> 00:00:50,920 So within the div, we've got an area here where we've got information where we can add. 14 00:00:50,940 --> 00:00:53,070 So we're going to add diffs there. 15 00:00:53,100 --> 00:00:59,970 And whatever you add, press enter, it's going to add it to the page so you can create as many inputs 16 00:00:59,970 --> 00:01:00,760 as you want. 17 00:01:01,050 --> 00:01:02,480 They're all being created here. 18 00:01:02,490 --> 00:01:07,920 They're all separate and they all operate separately and notice that they do have a style of background 19 00:01:07,920 --> 00:01:08,320 color. 20 00:01:08,550 --> 00:01:15,140 So this background color is a value that's going to be hidden within the background of the element. 21 00:01:15,150 --> 00:01:22,050 And then whenever we click it, it's going to actually translate and apply that background color to 22 00:01:22,050 --> 00:01:28,860 the new div that was just created that was applied to this div that was also created that's been added 23 00:01:28,860 --> 00:01:29,520 to the page. 24 00:01:29,520 --> 00:01:34,230 So you can add as many inputs as you want and they all operate completely separately. 25 00:01:34,590 --> 00:01:35,850 You can add spaces. 26 00:01:36,000 --> 00:01:40,290 And we are also tracking the click events on the various elements. 27 00:01:40,290 --> 00:01:42,480 So you can pick up that information if you want. 28 00:01:42,720 --> 00:01:44,160 And then as soon as you hit, enter. 29 00:01:45,830 --> 00:01:52,460 It will add whatever content is within the input to the page, there's also whenever you add an input, 30 00:01:52,580 --> 00:01:54,740 automatically the focus is applied. 31 00:01:54,960 --> 00:01:58,740 So the focus is applied to whatever the new one is that was just created. 32 00:01:58,970 --> 00:02:01,650 So this is all dynamic and all done with JavaScript. 33 00:02:01,670 --> 00:02:02,420 Let's get started. 34 00:02:02,900 --> 00:02:10,610 So first of all, let's open up our ED so we've got a completely blank HTML page and adding in some 35 00:02:10,610 --> 00:02:11,390 JavaScript. 36 00:02:11,630 --> 00:02:15,180 So let's create an element that we can add to the page. 37 00:02:15,500 --> 00:02:17,420 So this will be our output element. 38 00:02:17,660 --> 00:02:26,330 So using document and create elements, let's go ahead and create a div on the page and then within 39 00:02:26,330 --> 00:02:28,820 this div we're going to send it to the body. 40 00:02:29,000 --> 00:02:35,060 So using document, body and append and selecting that output div. 41 00:02:35,090 --> 00:02:37,420 So this is where we're going to output our content into. 42 00:02:38,000 --> 00:02:45,740 And we also want to create a function that's going to add an input and add on that input element. 43 00:02:45,980 --> 00:02:48,050 Add that listeners on the input element. 44 00:02:48,560 --> 00:02:55,870 So creating a function or just call it maker and then for the function itself, let's create that function 45 00:02:56,060 --> 00:02:57,620 so we're not passing in any data. 46 00:02:57,740 --> 00:03:02,110 And what this function is going to do is it's going to create a new input. 47 00:03:02,450 --> 00:03:09,650 So every time the function runs, it's going to create a new input and assign all of the key event listeners 48 00:03:09,650 --> 00:03:10,640 to this input. 49 00:03:10,640 --> 00:03:13,970 So create element and creating an element input. 50 00:03:15,820 --> 00:03:23,800 And then also we can use document, body append, so how about we append it to the output that's already 51 00:03:23,800 --> 00:03:24,390 on the body? 52 00:03:25,540 --> 00:03:36,340 So using output and the append method, we're going to spend the new input to the output area and then 53 00:03:36,340 --> 00:03:40,330 also let's set up value for the new input. 54 00:03:40,750 --> 00:03:44,320 So this will just right now just say test within the value. 55 00:03:45,760 --> 00:03:49,190 So let's see what happens and go out and refresh. 56 00:03:49,510 --> 00:03:51,460 So there's our input that we've created. 57 00:03:51,700 --> 00:03:55,990 And if we go to the elements, we've got the diff and the div just has an input. 58 00:03:56,200 --> 00:04:00,750 So we don't have any properties or attributes yet for the input. 59 00:04:01,360 --> 00:04:05,800 So let's set the input and put a focus on the input. 60 00:04:05,800 --> 00:04:13,420 So new input and we're going to set focus of the element of the page elements on there. 61 00:04:13,810 --> 00:04:17,470 And then also let's select the elements and add an event listener. 62 00:04:17,800 --> 00:04:22,660 So adding an event listener that we're going to listen for the key up on that. 63 00:04:22,990 --> 00:04:26,740 And whenever we keep up, we're going to run a function called log. 64 00:04:26,950 --> 00:04:29,500 So that's going to log that event information. 65 00:04:29,510 --> 00:04:35,260 So let's go ahead and create that function that's going to be run whenever the event gets triggered. 66 00:04:35,470 --> 00:04:41,900 And within the log, we're going to post the event object and we can for now, we can cancel, log that 67 00:04:41,950 --> 00:04:42,960 event object. 68 00:04:44,140 --> 00:04:48,160 So we've got our event object that we're going to log whenever the key is up. 69 00:04:48,340 --> 00:04:52,480 Let's try it out and refresh and go into the console. 70 00:04:52,660 --> 00:04:58,750 So we're tracking all of those key processes within the input field so we get the key value and all 71 00:04:58,750 --> 00:05:02,410 of the information contained within the event object on the key. 72 00:05:03,130 --> 00:05:09,190 So let's also add in an event listener for key press sort of tracking key up. 73 00:05:09,610 --> 00:05:14,200 We can track key press and add all of this information into the log. 74 00:05:14,500 --> 00:05:19,050 And also let's track key down as well for Key Down. 75 00:05:19,060 --> 00:05:25,540 We're going to check to see if this if we'll run a function on this one. 76 00:05:25,540 --> 00:05:26,920 So we're not going to be logging this. 77 00:05:27,790 --> 00:05:35,560 We're going to run a function that is going to check to see if the key code is enter. 78 00:05:36,010 --> 00:05:41,910 So console log out the key and the key code. 79 00:05:42,550 --> 00:05:44,690 So let's see what happens here. 80 00:05:45,340 --> 00:05:48,310 So every time we're processing it, we're grabbing the key code. 81 00:05:48,910 --> 00:05:55,300 And that's the key code is sixty 68 enter is going to be a key code of 13. 82 00:05:55,570 --> 00:05:59,780 So we're going to listen for the key code of 13 on the elements. 83 00:05:59,800 --> 00:06:11,980 So if E key code is equal to 13, that means that the users press enter on the input field and will 84 00:06:11,980 --> 00:06:13,440 update the output. 85 00:06:14,110 --> 00:06:20,110 And we're going to create another element that's within the output that we can add a message to. 86 00:06:20,110 --> 00:06:21,360 So let's do that as well. 87 00:06:21,580 --> 00:06:25,330 So message, document and create another element. 88 00:06:25,510 --> 00:06:29,200 And this is going to output the content from the message. 89 00:06:29,320 --> 00:06:38,620 So it will create an element and actually this should be a div and simply append this div to the output 90 00:06:38,980 --> 00:06:44,100 element so that we've got a spot that we can overwrite and add in. 91 00:06:44,110 --> 00:06:51,640 So taking output append and then the element that we want to spend it with and that's going to be message. 92 00:06:51,910 --> 00:06:55,000 So that gives us an area where we can write some content into. 93 00:06:55,160 --> 00:07:03,310 So let's output that content into the message area and update the text content and we'll add to the 94 00:07:03,310 --> 00:07:09,880 text content of whatever the input value is or the new input value is. 95 00:07:10,480 --> 00:07:15,490 So whatever that value is at the time, whenever the user presses enter, then that's what we're going 96 00:07:15,490 --> 00:07:17,690 to track into that input area. 97 00:07:17,710 --> 00:07:18,790 So let's see what happens. 98 00:07:19,150 --> 00:07:23,970 So refresh and press, enter and press enter again. 99 00:07:24,070 --> 00:07:27,960 So it's continuously adding it into that input area. 100 00:07:28,120 --> 00:07:36,360 And also let's actually update the inner HTML so that we can add new line so I can add in the line break. 101 00:07:36,460 --> 00:07:43,090 So this will now track in this new input information into the div. 102 00:07:43,090 --> 00:07:50,350 So whenever we press enter on the input, it's going to add it in there and we can also create a new 103 00:07:51,100 --> 00:07:52,480 input at any time. 104 00:07:52,480 --> 00:07:56,620 So we could have multiple Meeker's so we can make multiple inputs. 105 00:08:00,930 --> 00:08:04,590 And they completely function separately. 106 00:08:04,620 --> 00:08:10,770 So how about we add one more thing, one more item to the page and we'll create a button and then this 107 00:08:10,770 --> 00:08:15,180 button will add additional input fields on our page to create. 108 00:08:17,800 --> 00:08:23,410 Elements and element that's going to get created as a button and whatever, this button is going to 109 00:08:23,410 --> 00:08:32,650 get clicked, so we need to take that output, append and append the button there, and then let's add 110 00:08:32,650 --> 00:08:34,270 in some properties for the button. 111 00:08:34,270 --> 00:08:41,650 So add in the text content for the button, click to add input and then the button add an event listener. 112 00:08:42,010 --> 00:08:45,040 And the listener that we're listening for is a click. 113 00:08:45,640 --> 00:08:52,360 And then when it gets clicked, then what we want to do on the event click is we want to add a new input. 114 00:08:52,630 --> 00:08:55,690 So we're going to be just running maker so we can. 115 00:08:56,920 --> 00:09:05,650 Make it smaller like that and also let's update some of the style for the button, so set the background 116 00:09:05,650 --> 00:09:08,430 color to be red and button. 117 00:09:08,440 --> 00:09:11,600 And of course, you could also do this with scissors as well. 118 00:09:11,710 --> 00:09:16,470 So just adding some default and also wanted to add padding so it looks more like a button. 119 00:09:16,480 --> 00:09:17,530 So let's see what that looks like. 120 00:09:17,560 --> 00:09:18,880 So do a quick refresh. 121 00:09:19,120 --> 00:09:22,690 So add input and it's going to add a number of inputs there. 122 00:09:23,210 --> 00:09:26,600 What we want this to be on separate lines as well. 123 00:09:27,040 --> 00:09:33,640 So going back into the input, let's set up the do an inspect on it. 124 00:09:33,790 --> 00:09:35,490 So it's adding all of these inputs. 125 00:09:35,710 --> 00:09:39,150 And what we ideally want to have it is on a separate line. 126 00:09:39,370 --> 00:09:46,210 So let's do a quick update for it and I'll call it temp div or this is going to be the parent div. 127 00:09:46,420 --> 00:09:55,210 So document elements and the element that we're creating is a div and then instead of a pending output 128 00:09:55,330 --> 00:10:02,500 with the new input, we're going to spend it with the div that we've just created and this one we're 129 00:10:02,500 --> 00:10:05,820 going to spend with the new input. 130 00:10:06,310 --> 00:10:08,600 So that way they each get a separate line. 131 00:10:08,710 --> 00:10:14,590 So now whenever we add the inputs they've got separate lines and any one of them that you press enter, 132 00:10:14,860 --> 00:10:17,260 it's going to track it into the message area. 133 00:10:17,560 --> 00:10:20,380 And then we can add as many of these inputs as we want. 134 00:10:20,530 --> 00:10:22,840 So that's how you can create elements on the fly. 135 00:10:22,990 --> 00:10:29,410 And as you create these inputs, you can also because they are objects and just like anything else in 136 00:10:29,410 --> 00:10:30,850 JavaScript, they are objects. 137 00:10:31,060 --> 00:10:33,060 So you can hide different values. 138 00:10:33,220 --> 00:10:42,400 So if we want to set up a new input and we want to give it hidden value and I can pass a value of one 139 00:10:42,400 --> 00:10:45,250 hundred, or how about we make this a random value? 140 00:10:45,820 --> 00:10:55,130 So using the math method, going to do our random value and I'm going to update this to string value. 141 00:10:55,420 --> 00:11:03,100 So it's going to return back a string value and we can do a base 16 and then also we can subtract substring 142 00:11:03,280 --> 00:11:06,090 and subtract minus six from it. 143 00:11:06,280 --> 00:11:13,150 So it's essentially going to return back a hexadecimal six character value back within the hidden value. 144 00:11:13,240 --> 00:11:18,970 And whenever we press enter, then we can also use that hidden value and output it. 145 00:11:18,980 --> 00:11:26,110 So let's add that to the input value there, whatever the hidden value is of the current element. 146 00:11:26,290 --> 00:11:27,960 So we'll add that to the string. 147 00:11:27,970 --> 00:11:33,430 So under the new input, hidden value, let's see what that looks like. 148 00:11:33,460 --> 00:11:41,420 So we're adding inputs as soon as I press enter and each one of them has their own hidden value. 149 00:11:41,800 --> 00:11:44,200 So it's got kind of its own hex value. 150 00:11:44,470 --> 00:11:47,980 And these can also be used as colours. 151 00:11:48,310 --> 00:11:53,170 So that's the nice thing about it, is that whenever we do this hidden value, then we can also set 152 00:11:53,170 --> 00:11:54,410 a color using it. 153 00:11:54,730 --> 00:12:03,910 So how about we do input and we do style and background color and the background color can be equal 154 00:12:03,910 --> 00:12:05,920 to this hex value. 155 00:12:06,340 --> 00:12:10,350 So let's include the hash to make it a color value. 156 00:12:10,660 --> 00:12:16,860 And now whenever we add inputs, they're all going to have their own random background colors. 157 00:12:17,200 --> 00:12:23,980 So what we want to do is we want to use this color as the background of the inner HTML of the element 158 00:12:23,980 --> 00:12:24,770 that we're creating. 159 00:12:25,090 --> 00:12:34,420 So how about we make a quick update here and I'm going to style this using the tactics and we'll create 160 00:12:34,420 --> 00:12:43,570 a div and within the div a lot in background and the background is going to use whatever value we have 161 00:12:43,570 --> 00:12:52,000 for the hidden value and the input value are still going to output within the so close off the div and 162 00:12:52,000 --> 00:12:53,180 then we've got the hidden value. 163 00:12:53,200 --> 00:13:00,430 So let's wrap that with a dollar sign that curly brackets and then we're going to end that with the 164 00:13:00,430 --> 00:13:00,790 ending. 165 00:13:01,420 --> 00:13:06,940 So two quick double check of my HTML and hopefully that should be correct. 166 00:13:07,000 --> 00:13:13,820 And we can also with the template literals, we can add in the spacing as well to that. 167 00:13:13,960 --> 00:13:15,700 So let's see what this looks like. 168 00:13:15,760 --> 00:13:20,260 To do a refresh and press enter and it looks like something went wrong there. 169 00:13:21,250 --> 00:13:25,840 So we've got the background, color, style, background, color. 170 00:13:25,840 --> 00:13:30,880 So I didn't close off the quote their hopes and that should be on the other side. 171 00:13:30,880 --> 00:13:32,650 And that actually should be an ecocide. 172 00:13:34,450 --> 00:13:39,550 So you don't have to worry about the courts and the single courts and the courts with the template literals. 173 00:13:40,520 --> 00:13:45,020 And looks like we've still got a problem there, so let's double check and I didn't add in the hash 174 00:13:45,020 --> 00:13:45,830 in front of that. 175 00:13:46,160 --> 00:13:52,580 So I do need to have a hash in front and do another double check there just to make sure that that value 176 00:13:52,580 --> 00:13:53,360 is correct. 177 00:13:53,700 --> 00:13:55,470 So let's try it one more time. 178 00:13:56,060 --> 00:14:01,940 So now we're actually getting the background color of the ones as we press them. 179 00:14:02,180 --> 00:14:10,970 So anyone that we're clicking and pressing enter on, it's being added into our parent div there. 180 00:14:11,120 --> 00:14:13,490 And it's also updating the background colors. 181 00:14:13,610 --> 00:14:19,940 And the reason that spaced out like this is that because of the backpacks that it is adding in all of 182 00:14:19,940 --> 00:14:23,990 the spacing into the strings, if you want to get rid of that, you can do that as well. 183 00:14:24,210 --> 00:14:30,320 And that will remove out all that extra spacing that we see there within the source code. 184 00:14:32,960 --> 00:14:37,670 And now whenever we look at that, we're not going to have that extra spacing. 185 00:14:40,370 --> 00:14:41,660 And let's see what that looks like. 186 00:14:41,690 --> 00:14:49,160 So we've got our Divx here at the top, so Divx style background and then the contents of that deth. 187 00:14:51,470 --> 00:14:57,350 So that's how we can make it a little bit more colorful as well, and just as you are creating these 188 00:14:57,350 --> 00:15:03,170 elements, you can add in any values, just as you would with any object, and you can hide them in 189 00:15:03,170 --> 00:15:03,770 the background. 190 00:15:03,770 --> 00:15:06,680 They can always reference them and pick them up as well. 191 00:15:07,160 --> 00:15:09,320 Whenever you want to use them, whenever you want, make use of them.