1 00:00:00,120 --> 00:00:05,910 Hello and welcome back this lesson we're going to do a final code review, so started out by setting 2 00:00:05,910 --> 00:00:08,520 up our text area and our input areas. 3 00:00:08,730 --> 00:00:09,780 So we needed one. 4 00:00:10,840 --> 00:00:19,090 Text area that we can input content into and whatever content we add into this mean text area, we want 5 00:00:19,090 --> 00:00:24,870 to be able to select and move to the other text, to the second Eric texta. 6 00:00:25,030 --> 00:00:28,030 And we also want to have the ability to copy it to the clipboard. 7 00:00:28,270 --> 00:00:33,790 So when we select copy text, there's actually copies of to the clipboard and we get a little message 8 00:00:33,790 --> 00:00:35,370 here that's output to the user. 9 00:00:35,560 --> 00:00:39,640 So tells us copied content and then it outputs that copied content. 10 00:00:39,850 --> 00:00:45,790 So now we've got some content within the clipboard and if I go and press paste, you can see that we're 11 00:00:45,790 --> 00:00:48,210 actually pasting in that content. 12 00:00:48,400 --> 00:00:53,710 So what it did is it selected the text area content and copied it to the clipboard. 13 00:00:53,980 --> 00:00:58,660 So this is a little bit of fun with text areas and how we can copy things to the clipboard. 14 00:00:58,840 --> 00:01:00,750 So let's quickly run through the source code. 15 00:01:00,910 --> 00:01:05,450 So we had no styling and of course, you can apply styling, make this look a whole lot better. 16 00:01:06,070 --> 00:01:12,690 We've also got some basic HTML, so needed some basic HTML structure, such as a couple text areas. 17 00:01:12,880 --> 00:01:19,000 So one where we could have the string contents that we want to copy and move, and then also another 18 00:01:19,000 --> 00:01:21,700 text area where we can output that content into. 19 00:01:22,000 --> 00:01:27,250 And then lastly, we also had a couple of buttons that we needed to introduce our functionality. 20 00:01:27,430 --> 00:01:33,340 We use JavaScript to place these all into objects within our JavaScript code so that we could really 21 00:01:33,340 --> 00:01:35,100 easily access them and use them. 22 00:01:35,230 --> 00:01:36,750 We added a bunch of event listeners. 23 00:01:36,760 --> 00:01:40,170 So these are all the interactions that are possible within our page. 24 00:01:40,390 --> 00:01:42,400 We have one for moving the text. 25 00:01:42,610 --> 00:01:50,350 So what that does is it selects the content from the copy text and then it pays into the final text 26 00:01:50,350 --> 00:01:51,100 text area. 27 00:01:51,340 --> 00:01:57,220 And you could also shorten this by having final text value, equal copy text value, and that will get 28 00:01:57,220 --> 00:02:01,070 rid of that one line of syntax if you want it to do that. 29 00:02:01,720 --> 00:02:05,980 Also, we have the copy text, so we've got a function that's got copy text. 30 00:02:06,220 --> 00:02:11,830 So it places the content from that text area once again, selecting that using value. 31 00:02:11,980 --> 00:02:17,950 And the reason that we have the value here instead of out here, if we had it here within the global 32 00:02:17,950 --> 00:02:24,610 object and we did the copy text value, then this would be the value of the time when the code is loading. 33 00:02:24,820 --> 00:02:27,430 So we wouldn't have that updates and changes. 34 00:02:27,640 --> 00:02:34,660 So that's where we need to select the value when we're making use of that content we're past next, 35 00:02:34,660 --> 00:02:37,700 passing it into a function called copy to clipboard. 36 00:02:38,410 --> 00:02:44,350 The reason that it's done this way is to make it more flexible, more flexibility with the code in case 37 00:02:44,350 --> 00:02:49,960 you want to use copy to clipboard in some other areas, not just in that one text area. 38 00:02:50,170 --> 00:02:52,300 We're creating a function for that. 39 00:02:52,510 --> 00:02:57,340 So maybe we want to have another button that does something similar copies of the clipboard and moves 40 00:02:57,340 --> 00:02:57,580 that. 41 00:02:57,760 --> 00:03:02,440 So that will give us the ability to do that and simply launch it into a function so we don't have to 42 00:03:02,440 --> 00:03:06,400 redo all of this functionality, creating a separate function for that. 43 00:03:06,430 --> 00:03:12,490 So this is where the core of the application sits, and this is copy to clipboard, the function again 44 00:03:12,490 --> 00:03:15,410 for creating this and making it more dynamic. 45 00:03:15,790 --> 00:03:22,690 We chose to create a text element, another text area, and if we only had just the one and all of the 46 00:03:22,690 --> 00:03:29,380 content was always coming from the one, we could have selected it so applied the select to the copy 47 00:03:29,380 --> 00:03:34,360 text area and we would have be able to select that and place that within our copy. 48 00:03:34,630 --> 00:03:42,370 But because we want more flexibility, maybe we want to copy different text and be able to pass in whatever 49 00:03:42,370 --> 00:03:45,370 string value we want into the copy to clipboard. 50 00:03:45,550 --> 00:03:48,550 We've got that flexibility there and I'll show you how that works. 51 00:03:48,550 --> 00:03:55,150 If I clear this out, I could always pass in whatever text I want into this function. 52 00:03:55,360 --> 00:04:04,030 And if I type in so passing in that JavaScript string and now whenever I paste, I've got just JavaScript. 53 00:04:04,270 --> 00:04:06,190 So that's how the copy, the clipboard works. 54 00:04:06,280 --> 00:04:12,280 It provides more flexibility in being able to provide different string values and it would always work 55 00:04:12,280 --> 00:04:12,990 the same way. 56 00:04:13,090 --> 00:04:20,320 So what we had to do is we had to create this text area on the fly, apply a value to it, add it to 57 00:04:20,320 --> 00:04:27,910 the body, select all of that text area and then remove it from the body object in order to complete 58 00:04:27,910 --> 00:04:28,840 our functionality. 59 00:04:28,990 --> 00:04:33,460 And then down here, we've just got an output to the user that we've copied the text. 60 00:04:33,640 --> 00:04:35,500 We can get rid of the console message. 61 00:04:35,680 --> 00:04:41,090 And this is the main core where we're adding it into the clipboard by the execute command copy. 62 00:04:41,260 --> 00:04:43,570 Thanks again for taking this section. 63 00:04:43,570 --> 00:04:48,790 If you have any questions or comments, I'm always happy to help clarify any of the content presented 64 00:04:48,790 --> 00:04:50,290 within the earlier lessons. 65 00:04:50,650 --> 00:04:55,600 And I did want to note before we conclude that open source code is included, and I do suggest that 66 00:04:55,600 --> 00:05:00,730 you try the code out for yourself and get familiar with it and get comfortable with working with the 67 00:05:00,730 --> 00:05:02,860 JavaScript functions we've presented in the course.