Before we create our copy to clipboard application, we're going to need some HTML elements.
First of all, we need a text area.
So this is where the content is going to be that we want to copy and we can give this one a name of
copy text.
So is going to be the source text, set up some rules for this as well as columns.
And of course, you can style this as needed when necessary.
So for now, we'll just put in the world into that text area.
Refresh it.
There we go.
We've got a text area that we can use.
So this is going to be basically our source text area and I can put some content there.
So source text, do a line break.
So there's our source text.
Next, we're going to need a button or a couple of buttons.
So the first button that we're going to create is going to move the text and the second is going to
copy to the clipboard.
So just apply some classes and we can call this the mover button move.
And then the other button is going to be the one that's going to copy into the clipboard.
So you press the mover button and it's going to move the content into the other text area and the copy
is going to place that into the clipboard.
So that gives us a couple buttons to work with.
Let's create another line break here.
And then lastly, we can add our other text area down below.
So this is just another text area element.
And this can be the assets, some properties for this as well, some attributes.
And this one can be blank.
So when we refresh it, we've got our source text.
We've got a couple of buttons to create some actions unless they're going to create one more element
where we can output some content.
And this is another element that we can interact with using Java.
So next, what we want to do is set up our JavaScript objects to prepare them to be used within our
code.
So that means that we want to select all of these elements that we just created and put them into object
format.
So opening up our script area within our JavaScript, this is where we've got our main text.
We can call it the same if we wanted to, we could call it copy text to keep things simple.
So that's going to be a variable object that's going to be referred to as copy text.
And we're using query selector in order to select the element.
So the element that we're looking for is the text area object.
And we do have two elements that are text areas.
So we need to be more specific in order to select the one that we're looking for and the one that we're
looking for is going to have specific names.
So that's what's different between the two elements.
We've got one with a name of Kopi text and we've got another one with a name of final text.
So let's add those both in as objects in JavaScript and they'll use the same format.
So this one's final text and let's make sure that we do have them within our JavaScript.
And usually the way that I do that is I output the object name.
And if I get the element showing up within the console, then that means that we're all good to move
on and utilize that within our JavaScript.
So final text is working, copy text is working.
Let's also add in the other elements into our JavaScript objects.
So we're using const because these are objects connecting to the elements and they're not going to be
actually changing.
We're not adding any additional values.
So that's how we're setting them up as const and we can call these mover button.
So the same format as before using document and query selector selecting the element with a class of
mover button to make this bigger because we're running out of space here and also do the same thing
for the copy button.
So at the end of this, you're going to have all of your elements as objects in JavaScript and that's
going to make it really easy when we start coding in order to utilize these elements and manipulate
them and pretty much do as you need to do within the code.
So next last but of course, not least one more element that we're selecting is the one that has the
class of output.
And this is another area element that we can make use of within our code where we can output some content
completed all that.
So it is a good idea just to make sure that you do have them all within your element content and just
refresh.
So we've got our output element, we've got our copy button.
So all of those are ready to go.
And last the Movahed button.
So all the elements have now been selected as JavaScript objects and we saw that now we can use them
within our code.
So Goydos set up your project and this is the basic setup that you're going to need in order to follow
through with the upcoming lessons.
So set up a couple text areas, a couple buttons to create some interaction and also an output area,
just a regular div where you can dump some content into and then using JavaScript, connect them as
objects in your JavaScript code and you're going to be ready to move on to the next lesson.