1 00:00:00,240 --> 00:00:01,660 Hello and welcome back. 2 00:00:01,680 --> 00:00:06,540 In this lesson, we're going to add interaction to the elements we've already selected the elements 3 00:00:06,540 --> 00:00:09,510 from the page and added them in as JavaScript objects. 4 00:00:09,690 --> 00:00:14,880 So ready to move on to the next step where we're adding event listeners in and the first event listener 5 00:00:14,880 --> 00:00:15,690 that we want to add. 6 00:00:15,690 --> 00:00:19,400 We want to add some event listeners to the buttons that we've created. 7 00:00:19,620 --> 00:00:27,000 We've got one button called Mover BTN, so let's select that JavaScript object and add an event listener 8 00:00:27,000 --> 00:00:28,200 to that object. 9 00:00:28,620 --> 00:00:33,600 And we also have an option for adding in the different click events. 10 00:00:33,600 --> 00:00:39,300 So the click event that we're adding in is we're listening for a click and if it does get clicked, 11 00:00:39,300 --> 00:00:45,510 then what we want to do is invoke a function and the function that is going to get invoked will create 12 00:00:45,510 --> 00:00:49,740 one called mov text and by default, this is false anyway. 13 00:00:49,740 --> 00:00:50,850 So this is the capture. 14 00:00:50,850 --> 00:00:54,300 The Boolean copy can keep it added in or we can remove it. 15 00:00:54,300 --> 00:00:58,770 And in this case we're just going to be removing it out of her function, create a function called move 16 00:00:58,770 --> 00:01:05,250 text and whatever this button gets clicked, we're going to select the content that's contained within 17 00:01:05,250 --> 00:01:06,840 our copy text. 18 00:01:06,870 --> 00:01:09,030 So let's create a default element. 19 00:01:09,030 --> 00:01:09,930 We'll call it temp. 20 00:01:10,050 --> 00:01:17,280 And this is what's going to be contained within the copy text, selecting out the value of that current 21 00:01:17,280 --> 00:01:17,910 object. 22 00:01:17,910 --> 00:01:19,800 And we want to move the text. 23 00:01:19,800 --> 00:01:26,850 So from Hello World, when we click the button move text, we want to paste it into our final text object. 24 00:01:27,240 --> 00:01:35,490 So let's select that final text object and set the value of that to be equal to temp and refresh and 25 00:01:35,490 --> 00:01:36,210 we'll try that out. 26 00:01:36,210 --> 00:01:43,110 So now whenever we clicked move text, any text that we have within our mean text area is going to get 27 00:01:43,110 --> 00:01:45,480 moved down to the bottom text field. 28 00:01:45,660 --> 00:01:50,820 The next option that we wanted to add in is we want to copy the text to clipboard. 29 00:01:51,300 --> 00:01:56,670 So this is also an event listener that we're going to add in and we're adding it in not to the mover 30 00:01:56,670 --> 00:01:58,410 button, but to the copy button. 31 00:01:58,410 --> 00:02:01,410 And this one can be called copy text. 32 00:02:01,800 --> 00:02:06,450 Let's create a function in order to handle that and create in that function copy text. 33 00:02:06,450 --> 00:02:09,570 And this is the one where we want to actually copy it to the clipboard. 34 00:02:09,900 --> 00:02:15,120 So selecting out that text that we want to copy, we can create a variable called temp. 35 00:02:15,330 --> 00:02:22,560 So within copy text, let's create a new function copy to clip board and we're going to pass in our 36 00:02:22,560 --> 00:02:24,060 temp text into there. 37 00:02:24,060 --> 00:02:29,040 And now let's create another function and this function is going to be called copy to clipboard. 38 00:02:29,190 --> 00:02:34,440 And the reason that I'm doing it this way is and this is passing in a string value that we want to call. 39 00:02:34,560 --> 00:02:39,690 So the reason I'm doing it this way and I'm separating out the functions so that we can access this 40 00:02:39,690 --> 00:02:45,090 function within different formats so we don't have to always do it through the copy text button. 41 00:02:45,300 --> 00:02:51,240 We can simply invoke the function, copy, the clipboard, copy, and since string value through the 42 00:02:51,570 --> 00:02:56,280 copy to clipboard function and that will copy it automatically into the clipboard. 43 00:02:56,670 --> 00:03:01,470 So we're going to create an element and this is going to be a blank text area. 44 00:03:01,680 --> 00:03:07,320 So using document create elements, giving us the ability to create elements now. 45 00:03:07,320 --> 00:03:11,700 So what will console log this out for now so you can see what it looks like. 46 00:03:12,090 --> 00:03:14,610 So this is just going to be a variable called text area. 47 00:03:14,760 --> 00:03:16,530 So I had a copy to clipboard. 48 00:03:16,530 --> 00:03:21,570 We get this element with text area, so we want to populate it with that value. 49 00:03:21,570 --> 00:03:23,250 So we've got our text area. 50 00:03:23,250 --> 00:03:26,460 This is one that we've just created, populate it with the value of string. 51 00:03:26,460 --> 00:03:31,680 Add this newly created text area appended to our document object. 52 00:03:31,690 --> 00:03:35,820 So document and using the body append child. 53 00:03:35,820 --> 00:03:41,190 So this will append this newly created text area to body section. 54 00:03:41,190 --> 00:03:44,910 So let's try that it so do move text and we could do an inspect as well. 55 00:03:44,920 --> 00:03:50,580 Actually should be copy text and there's our text field text area that we're creating and this is dynamically 56 00:03:50,580 --> 00:03:52,590 generated and it's just showing up there. 57 00:03:52,860 --> 00:03:54,810 And so there's a few other things that we need to do. 58 00:03:54,810 --> 00:04:01,680 So I need to take that text area and do a select of it so that we have a selected object that we know 59 00:04:01,680 --> 00:04:02,750 that we're working with. 60 00:04:02,850 --> 00:04:07,830 So once again, copy text, you see that it is selected and that's all done via JavaScript. 61 00:04:07,830 --> 00:04:13,200 Once we've selected that text area, we're ready to execute a command and the command that executing 62 00:04:13,200 --> 00:04:14,010 is copy. 63 00:04:14,010 --> 00:04:19,590 Let's document execute command allows you to run a command to manipulate the contents of an editable 64 00:04:19,590 --> 00:04:20,040 region. 65 00:04:20,250 --> 00:04:26,340 And we've already selected that editable region in the previous statement that's grabbing that copy 66 00:04:26,340 --> 00:04:28,560 text, running the command copy. 67 00:04:28,590 --> 00:04:30,330 And let's do that one more time. 68 00:04:30,330 --> 00:04:31,470 So copy text. 69 00:04:31,650 --> 00:04:36,930 And now when I'm pasting Sólo over there, I'm going to paste and you see that it's dropping that in. 70 00:04:37,200 --> 00:04:43,890 So we also need to remove it from the document body because we don't want a whole bunch of these being 71 00:04:43,890 --> 00:04:44,310 visible. 72 00:04:44,310 --> 00:04:50,160 So we're going to simply select that and remove a child and we're putting into the copy command and 73 00:04:50,160 --> 00:04:51,150 then we're removing it. 74 00:04:51,330 --> 00:04:55,650 So this is actually going to copy it into copy paste it whenever we want. 75 00:04:55,680 --> 00:04:58,890 So that was just a control v paste onto that element. 76 00:04:58,890 --> 00:04:59,610 Select that. 77 00:05:00,430 --> 00:05:07,360 And let the user know that, so it's two, three, and right now it's in the clipboard and you can also 78 00:05:07,360 --> 00:05:09,730 add that content that's been copied. 79 00:05:10,010 --> 00:05:14,170 So this is all sitting within that text area value. 80 00:05:14,200 --> 00:05:15,800 So whatever that text area value. 81 00:05:16,000 --> 00:05:21,340 So even though we've removed it from the document body and we've appended to the document body, that 82 00:05:21,340 --> 00:05:26,750 text area of value is still alive and still available to access within that function. 83 00:05:27,040 --> 00:05:28,040 So let's see how that works. 84 00:05:28,060 --> 00:05:28,980 So copy. 85 00:05:29,230 --> 00:05:31,870 And you can see that copied content is Hello World. 86 00:05:32,080 --> 00:05:35,080 And if we update this, copied content is hella world. 87 00:05:35,200 --> 00:05:40,450 And now I can go to paste and you can see that we're pasting that copied content, so we're able to 88 00:05:40,450 --> 00:05:42,320 add it into our clipboard. 89 00:05:42,820 --> 00:05:45,100 So go ahead and add in this functionality. 90 00:05:45,410 --> 00:05:51,100 And one of the reasons that we had to create a text area is that we want to be able to select that text 91 00:05:51,100 --> 00:05:55,480 area and we want it to have this function to be a little bit more dynamic. 92 00:05:55,480 --> 00:06:01,180 If we were just working with that one text area and we want to copy that text area, we could have selected 93 00:06:01,180 --> 00:06:04,680 that text area value and simply done a copy on that. 94 00:06:04,840 --> 00:06:10,060 So done a select on the text area that we want to copy and copy that in. 95 00:06:10,210 --> 00:06:16,060 But because we want some more versatility to our copy, to clipboard function, that's where we went 96 00:06:16,060 --> 00:06:23,260 and we created the text area added in that value, appended it to our body, selected it, copied it, 97 00:06:23,440 --> 00:06:29,710 removed it from the body, and then gave that information to the user that we've copied it to their 98 00:06:29,710 --> 00:06:30,190 clipboard. 99 00:06:30,520 --> 00:06:33,700 So go ahead and add in this functionality and add in the different clip events. 100 00:06:33,910 --> 00:06:36,400 And coming up next, we're going to finalize the application.