1
00:00:00,060 --> 00:00:05,250
Before we create our copy to clipboard application, we're going to need some HTML elements.

2
00:00:05,460 --> 00:00:07,230
First of all, we need a text area.

3
00:00:07,240 --> 00:00:13,140
So this is where the content is going to be that we want to copy and we can give this one a name of

4
00:00:13,140 --> 00:00:14,370
copy text.

5
00:00:14,760 --> 00:00:20,760
So is going to be the source text, set up some rules for this as well as columns.

6
00:00:21,240 --> 00:00:24,670
And of course, you can style this as needed when necessary.

7
00:00:25,050 --> 00:00:28,500
So for now, we'll just put in the world into that text area.

8
00:00:28,710 --> 00:00:29,440
Refresh it.

9
00:00:29,490 --> 00:00:29,960
There we go.

10
00:00:29,970 --> 00:00:32,410
We've got a text area that we can use.

11
00:00:32,610 --> 00:00:38,790
So this is going to be basically our source text area and I can put some content there.

12
00:00:38,790 --> 00:00:40,860
So source text, do a line break.

13
00:00:40,980 --> 00:00:42,320
So there's our source text.

14
00:00:42,540 --> 00:00:45,560
Next, we're going to need a button or a couple of buttons.

15
00:00:45,570 --> 00:00:50,460
So the first button that we're going to create is going to move the text and the second is going to

16
00:00:50,460 --> 00:00:51,510
copy to the clipboard.

17
00:00:51,510 --> 00:00:56,340
So just apply some classes and we can call this the mover button move.

18
00:00:56,340 --> 00:00:59,940
And then the other button is going to be the one that's going to copy into the clipboard.

19
00:01:00,240 --> 00:01:06,600
So you press the mover button and it's going to move the content into the other text area and the copy

20
00:01:06,600 --> 00:01:08,700
is going to place that into the clipboard.

21
00:01:08,730 --> 00:01:10,870
So that gives us a couple buttons to work with.

22
00:01:10,890 --> 00:01:12,780
Let's create another line break here.

23
00:01:12,810 --> 00:01:17,100
And then lastly, we can add our other text area down below.

24
00:01:17,430 --> 00:01:20,100
So this is just another text area element.

25
00:01:20,100 --> 00:01:24,540
And this can be the assets, some properties for this as well, some attributes.

26
00:01:24,690 --> 00:01:25,940
And this one can be blank.

27
00:01:26,250 --> 00:01:29,060
So when we refresh it, we've got our source text.

28
00:01:29,070 --> 00:01:34,380
We've got a couple of buttons to create some actions unless they're going to create one more element

29
00:01:34,710 --> 00:01:36,770
where we can output some content.

30
00:01:36,780 --> 00:01:40,530
And this is another element that we can interact with using Java.

31
00:01:40,710 --> 00:01:46,890
So next, what we want to do is set up our JavaScript objects to prepare them to be used within our

32
00:01:46,890 --> 00:01:47,270
code.

33
00:01:47,520 --> 00:01:53,430
So that means that we want to select all of these elements that we just created and put them into object

34
00:01:53,430 --> 00:01:53,990
format.

35
00:01:54,000 --> 00:01:59,630
So opening up our script area within our JavaScript, this is where we've got our main text.

36
00:01:59,650 --> 00:02:03,970
We can call it the same if we wanted to, we could call it copy text to keep things simple.

37
00:02:04,110 --> 00:02:09,720
So that's going to be a variable object that's going to be referred to as copy text.

38
00:02:09,930 --> 00:02:13,500
And we're using query selector in order to select the element.

39
00:02:13,770 --> 00:02:16,980
So the element that we're looking for is the text area object.

40
00:02:16,980 --> 00:02:19,830
And we do have two elements that are text areas.

41
00:02:20,100 --> 00:02:24,600
So we need to be more specific in order to select the one that we're looking for and the one that we're

42
00:02:24,600 --> 00:02:26,700
looking for is going to have specific names.

43
00:02:26,970 --> 00:02:29,360
So that's what's different between the two elements.

44
00:02:29,610 --> 00:02:36,420
We've got one with a name of Kopi text and we've got another one with a name of final text.

45
00:02:36,870 --> 00:02:42,570
So let's add those both in as objects in JavaScript and they'll use the same format.

46
00:02:42,600 --> 00:02:48,960
So this one's final text and let's make sure that we do have them within our JavaScript.

47
00:02:49,170 --> 00:02:52,560
And usually the way that I do that is I output the object name.

48
00:02:52,560 --> 00:02:57,870
And if I get the element showing up within the console, then that means that we're all good to move

49
00:02:57,870 --> 00:03:00,460
on and utilize that within our JavaScript.

50
00:03:00,480 --> 00:03:03,300
So final text is working, copy text is working.

51
00:03:03,300 --> 00:03:08,580
Let's also add in the other elements into our JavaScript objects.

52
00:03:08,610 --> 00:03:13,920
So we're using const because these are objects connecting to the elements and they're not going to be

53
00:03:13,920 --> 00:03:14,820
actually changing.

54
00:03:14,820 --> 00:03:16,410
We're not adding any additional values.

55
00:03:16,590 --> 00:03:20,820
So that's how we're setting them up as const and we can call these mover button.

56
00:03:20,830 --> 00:03:27,810
So the same format as before using document and query selector selecting the element with a class of

57
00:03:27,810 --> 00:03:32,790
mover button to make this bigger because we're running out of space here and also do the same thing

58
00:03:32,790 --> 00:03:34,320
for the copy button.

59
00:03:34,320 --> 00:03:39,900
So at the end of this, you're going to have all of your elements as objects in JavaScript and that's

60
00:03:39,900 --> 00:03:46,020
going to make it really easy when we start coding in order to utilize these elements and manipulate

61
00:03:46,020 --> 00:03:50,090
them and pretty much do as you need to do within the code.

62
00:03:50,100 --> 00:03:56,430
So next last but of course, not least one more element that we're selecting is the one that has the

63
00:03:56,430 --> 00:03:57,540
class of output.

64
00:03:57,690 --> 00:04:03,450
And this is another area element that we can make use of within our code where we can output some content

65
00:04:03,450 --> 00:04:04,680
completed all that.

66
00:04:04,860 --> 00:04:11,340
So it is a good idea just to make sure that you do have them all within your element content and just

67
00:04:11,460 --> 00:04:12,060
refresh.

68
00:04:12,240 --> 00:04:16,530
So we've got our output element, we've got our copy button.

69
00:04:16,860 --> 00:04:19,050
So all of those are ready to go.

70
00:04:19,050 --> 00:04:21,390
And last the Movahed button.

71
00:04:21,630 --> 00:04:27,540
So all the elements have now been selected as JavaScript objects and we saw that now we can use them

72
00:04:27,540 --> 00:04:28,470
within our code.

73
00:04:28,470 --> 00:04:34,530
So Goydos set up your project and this is the basic setup that you're going to need in order to follow

74
00:04:34,530 --> 00:04:36,540
through with the upcoming lessons.

75
00:04:36,780 --> 00:04:42,990
So set up a couple text areas, a couple buttons to create some interaction and also an output area,

76
00:04:42,990 --> 00:04:49,320
just a regular div where you can dump some content into and then using JavaScript, connect them as

77
00:04:49,320 --> 00:04:53,700
objects in your JavaScript code and you're going to be ready to move on to the next lesson.