Hello and welcome back.
In this lesson, we're going to add interaction to the elements we've already selected the elements
from the page and added them in as JavaScript objects.
So ready to move on to the next step where we're adding event listeners in and the first event listener
that we want to add.
We want to add some event listeners to the buttons that we've created.
We've got one button called Mover BTN, so let's select that JavaScript object and add an event listener
to that object.
And we also have an option for adding in the different click events.
So the click event that we're adding in is we're listening for a click and if it does get clicked,
then what we want to do is invoke a function and the function that is going to get invoked will create
one called mov text and by default, this is false anyway.
So this is the capture.
The Boolean copy can keep it added in or we can remove it.
And in this case we're just going to be removing it out of her function, create a function called move
text and whatever this button gets clicked, we're going to select the content that's contained within
our copy text.
So let's create a default element.
We'll call it temp.
And this is what's going to be contained within the copy text, selecting out the value of that current
object.
And we want to move the text.
So from Hello World, when we click the button move text, we want to paste it into our final text object.
So let's select that final text object and set the value of that to be equal to temp and refresh and
we'll try that out.
So now whenever we clicked move text, any text that we have within our mean text area is going to get
moved down to the bottom text field.
The next option that we wanted to add in is we want to copy the text to clipboard.
So this is also an event listener that we're going to add in and we're adding it in not to the mover
button, but to the copy button.
And this one can be called copy text.
Let's create a function in order to handle that and create in that function copy text.
And this is the one where we want to actually copy it to the clipboard.
So selecting out that text that we want to copy, we can create a variable called temp.
So within copy text, let's create a new function copy to clip board and we're going to pass in our
temp text into there.
And now let's create another function and this function is going to be called copy to clipboard.
And the reason that I'm doing it this way is and this is passing in a string value that we want to call.
So the reason I'm doing it this way and I'm separating out the functions so that we can access this
function within different formats so we don't have to always do it through the copy text button.
We can simply invoke the function, copy, the clipboard, copy, and since string value through the
copy to clipboard function and that will copy it automatically into the clipboard.
So we're going to create an element and this is going to be a blank text area.
So using document create elements, giving us the ability to create elements now.
So what will console log this out for now so you can see what it looks like.
So this is just going to be a variable called text area.
So I had a copy to clipboard.
We get this element with text area, so we want to populate it with that value.
So we've got our text area.
This is one that we've just created, populate it with the value of string.
Add this newly created text area appended to our document object.
So document and using the body append child.
So this will append this newly created text area to body section.
So let's try that it so do move text and we could do an inspect as well.
Actually should be copy text and there's our text field text area that we're creating and this is dynamically
generated and it's just showing up there.
And so there's a few other things that we need to do.
So I need to take that text area and do a select of it so that we have a selected object that we know
that we're working with.
So once again, copy text, you see that it is selected and that's all done via JavaScript.
Once we've selected that text area, we're ready to execute a command and the command that executing
is copy.
Let's document execute command allows you to run a command to manipulate the contents of an editable
region.
And we've already selected that editable region in the previous statement that's grabbing that copy
text, running the command copy.
And let's do that one more time.
So copy text.
And now when I'm pasting Sólo over there, I'm going to paste and you see that it's dropping that in.
So we also need to remove it from the document body because we don't want a whole bunch of these being
visible.
So we're going to simply select that and remove a child and we're putting into the copy command and
then we're removing it.
So this is actually going to copy it into copy paste it whenever we want.
So that was just a control v paste onto that element.
Select that.
And let the user know that, so it's two, three, and right now it's in the clipboard and you can also
add that content that's been copied.
So this is all sitting within that text area value.
So whatever that text area value.
So even though we've removed it from the document body and we've appended to the document body, that
text area of value is still alive and still available to access within that function.
So let's see how that works.
So copy.
And you can see that copied content is Hello World.
And if we update this, copied content is hella world.
And now I can go to paste and you can see that we're pasting that copied content, so we're able to
add it into our clipboard.
So go ahead and add in this functionality.
And one of the reasons that we had to create a text area is that we want to be able to select that text
area and we want it to have this function to be a little bit more dynamic.
If we were just working with that one text area and we want to copy that text area, we could have selected
that text area value and simply done a copy on that.
So done a select on the text area that we want to copy and copy that in.
But because we want some more versatility to our copy, to clipboard function, that's where we went
and we created the text area added in that value, appended it to our body, selected it, copied it,
removed it from the body, and then gave that information to the user that we've copied it to their
clipboard.
So go ahead and add in this functionality and add in the different clip events.
And coming up next, we're going to finalize the application.