Hello and welcome back this lesson we're going to do a final code review, so started out by setting
up our text area and our input areas.
So we needed one.
Text area that we can input content into and whatever content we add into this mean text area, we want
to be able to select and move to the other text, to the second Eric texta.
And we also want to have the ability to copy it to the clipboard.
So when we select copy text, there's actually copies of to the clipboard and we get a little message
here that's output to the user.
So tells us copied content and then it outputs that copied content.
So now we've got some content within the clipboard and if I go and press paste, you can see that we're
actually pasting in that content.
So what it did is it selected the text area content and copied it to the clipboard.
So this is a little bit of fun with text areas and how we can copy things to the clipboard.
So let's quickly run through the source code.
So we had no styling and of course, you can apply styling, make this look a whole lot better.
We've also got some basic HTML, so needed some basic HTML structure, such as a couple text areas.
So one where we could have the string contents that we want to copy and move, and then also another
text area where we can output that content into.
And then lastly, we also had a couple of buttons that we needed to introduce our functionality.
We use JavaScript to place these all into objects within our JavaScript code so that we could really
easily access them and use them.
We added a bunch of event listeners.
So these are all the interactions that are possible within our page.
We have one for moving the text.
So what that does is it selects the content from the copy text and then it pays into the final text
text area.
And you could also shorten this by having final text value, equal copy text value, and that will get
rid of that one line of syntax if you want it to do that.
Also, we have the copy text, so we've got a function that's got copy text.
So it places the content from that text area once again, selecting that using value.
And the reason that we have the value here instead of out here, if we had it here within the global
object and we did the copy text value, then this would be the value of the time when the code is loading.
So we wouldn't have that updates and changes.
So that's where we need to select the value when we're making use of that content we're past next,
passing it into a function called copy to clipboard.
The reason that it's done this way is to make it more flexible, more flexibility with the code in case
you want to use copy to clipboard in some other areas, not just in that one text area.
We're creating a function for that.
So maybe we want to have another button that does something similar copies of the clipboard and moves
that.
So that will give us the ability to do that and simply launch it into a function so we don't have to
redo all of this functionality, creating a separate function for that.
So this is where the core of the application sits, and this is copy to clipboard, the function again
for creating this and making it more dynamic.
We chose to create a text element, another text area, and if we only had just the one and all of the
content was always coming from the one, we could have selected it so applied the select to the copy
text area and we would have be able to select that and place that within our copy.
But because we want more flexibility, maybe we want to copy different text and be able to pass in whatever
string value we want into the copy to clipboard.
We've got that flexibility there and I'll show you how that works.
If I clear this out, I could always pass in whatever text I want into this function.
And if I type in so passing in that JavaScript string and now whenever I paste, I've got just JavaScript.
So that's how the copy, the clipboard works.
It provides more flexibility in being able to provide different string values and it would always work
the same way.
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
the body, select all of that text area and then remove it from the body object in order to complete
our functionality.
And then down here, we've just got an output to the user that we've copied the text.
We can get rid of the console message.
And this is the main core where we're adding it into the clipboard by the execute command copy.
Thanks again for taking this section.
If you have any questions or comments, I'm always happy to help clarify any of the content presented
within the earlier lessons.
And I did want to note before we conclude that open source code is included, and I do suggest that
you try the code out for yourself and get familiar with it and get comfortable with working with the
JavaScript functions we've presented in the course.