1
00:00:00,150 --> 00:00:05,520
I'm going to add some styling to that class, so the copy me class that we set up in the last lesson,

2
00:00:06,480 --> 00:00:15,660
setting them up to be displayed, it will display them as inline blocks, also adding in some padding

3
00:00:15,660 --> 00:00:16,070
for them.

4
00:00:17,590 --> 00:00:26,080
And this is just some default style in a position of absolute so I can move them around and also set

5
00:00:26,080 --> 00:00:32,470
up the max width so I can align them all together vertically or horizontally.

6
00:00:33,910 --> 00:00:36,520
Text aligned and text align center.

7
00:00:39,960 --> 00:00:41,840
Give it a default height as well.

8
00:00:43,800 --> 00:00:49,740
I'm going to update the cursor to be a pointer whenever we're on top, so let's refresh.

9
00:00:49,770 --> 00:00:50,570
See what that looks like.

10
00:00:51,610 --> 00:00:55,720
So all of the elements are actually one on top of the other, so we need to take care of that and we

11
00:00:55,720 --> 00:01:01,960
could do that with JavaScript, where as we're looping through each one of the elements, we can update

12
00:01:01,960 --> 00:01:05,760
some of the properties to those elements so we can have that element.

13
00:01:05,770 --> 00:01:07,120
We have it as an object.

14
00:01:07,120 --> 00:01:10,420
We can update the style using style left.

15
00:01:10,900 --> 00:01:16,660
We can set it to whatever the value of indexes, because remember, with index, we're already counting

16
00:01:16,660 --> 00:01:17,770
each one of those elements.

17
00:01:18,010 --> 00:01:23,530
Multiply it by 140 and then add in that picks in order to set it.

18
00:01:23,560 --> 00:01:27,820
And this way you can see that each one of them is getting a line there.

19
00:01:27,850 --> 00:01:32,560
And I'm going to adjust the width as well because we don't really need them to be that wide.

20
00:01:33,400 --> 00:01:38,680
So we need to have one hundred between them and create a global object called Holder.

21
00:01:39,550 --> 00:01:45,550
So this is where it can hold some information globally and we can use that holder object as we clone

22
00:01:45,550 --> 00:01:47,160
additional elements.

23
00:01:47,170 --> 00:01:53,410
So we're just going to create an object called object within that holder object and equal that to the

24
00:01:53,410 --> 00:01:56,760
element that we've selected as we're iterating through it.

25
00:01:57,700 --> 00:02:05,760
And this is on whenever we click that particular element, we're going to use the clone node method.

26
00:02:05,950 --> 00:02:10,060
And what this does is a duplicate snowed on which this method was called.

27
00:02:10,420 --> 00:02:15,240
And we need to just specify true that we want to duplicate this node.

28
00:02:16,430 --> 00:02:23,140
Now, if we console logout holder dot object, you're going to see that we've actually cloned it, but

29
00:02:23,140 --> 00:02:25,660
we haven't positioned it anywhere yet.

30
00:02:25,900 --> 00:02:30,250
So you see that these are the clones and whenever you go on top of them, you click on them.

31
00:02:30,400 --> 00:02:31,780
You see that nothing is happening.

32
00:02:31,780 --> 00:02:35,800
We're not actually selecting these elements because these are clones of that element.

33
00:02:36,520 --> 00:02:39,400
And we can also update some of the properties here.

34
00:02:40,900 --> 00:02:43,120
Going to open this up a little bit wider.

35
00:02:43,430 --> 00:02:46,690
There's quite a few properties that we want to adjust and update.

36
00:02:48,310 --> 00:02:54,490
And since we've got it within this object, this is the ideal time to make these updates so we can update

37
00:02:54,490 --> 00:02:59,950
the style and which we've already seen, that we can update style, we can update the cursor, the style

38
00:02:59,950 --> 00:03:01,980
of the cursor to be move.

39
00:03:03,190 --> 00:03:05,770
We can also add in a class if we wanted to.

40
00:03:05,780 --> 00:03:13,030
So selecting our object and using class list, let's add a class and.

41
00:03:14,750 --> 00:03:17,390
So call it new for the new element.

42
00:03:19,530 --> 00:03:27,660
And let me set up a class here to contain that and I'll update the color of the text to be read within

43
00:03:27,660 --> 00:03:28,260
this class.

44
00:03:29,280 --> 00:03:35,820
Also, we can set background color if one or two, and there's pretty much anything that we want to

45
00:03:35,820 --> 00:03:35,990
do.

46
00:03:36,000 --> 00:03:38,130
We can set any one of the style properties.

47
00:03:38,460 --> 00:03:40,270
So I'm selecting background color.

48
00:03:40,830 --> 00:03:43,970
And how about we set a background color of green?

49
00:03:43,980 --> 00:03:47,150
So we're going to have red text and a green background color.

50
00:03:47,550 --> 00:03:53,310
We can also update the position of this particular element because remember, when we clone it, it

51
00:03:53,310 --> 00:03:55,810
keeps all of those properties of that initial one.

52
00:03:56,010 --> 00:04:00,990
So we do have the the the class as well in it.

53
00:04:02,250 --> 00:04:06,070
And now selecting that element, we can use offset left.

54
00:04:07,200 --> 00:04:12,660
So this is the same position as our parent element where an offset left.

55
00:04:16,910 --> 00:04:24,650
And we can also update the top of it as well, so giving it a starting position to be the same as the

56
00:04:24,650 --> 00:04:26,750
parent, so offset top.

57
00:04:29,180 --> 00:04:34,820
And so this isn't the new element that we've created, this is the existing one, so we can add to it

58
00:04:34,820 --> 00:04:35,390
if we want to.

59
00:04:35,390 --> 00:04:37,280
So add to that top.

60
00:04:37,290 --> 00:04:38,840
So let's do two hundred picks.

61
00:04:40,710 --> 00:04:46,710
So let's see what happens and just down at the bottom, what we'll do is we'll append it to the document

62
00:04:46,710 --> 00:04:47,130
body.

63
00:04:48,180 --> 00:04:54,600
So getting our document object using document body, we're pending child.

64
00:04:54,600 --> 00:04:57,870
And the child that we're spending is this holder object.

65
00:04:59,670 --> 00:05:02,570
And we can spend it multiple times if we want to as well.

66
00:05:06,790 --> 00:05:12,520
So let's refresh and try that out, so now I duplicate them, we see we're making copies down below.

67
00:05:14,360 --> 00:05:20,420
So coming up next, let's make these move around, we make it so we can drag them, will also make them.

68
00:05:20,420 --> 00:05:25,640
So whenever we create them, they look like they're dropping out of the parent elements that they're

69
00:05:25,640 --> 00:05:26,630
being created out of.

70
00:05:26,880 --> 00:05:32,210
And now, also, when I go over to the inspect, you can see that I've got a whole bunch of these elements

71
00:05:32,210 --> 00:05:32,960
that we've created.

72
00:05:32,960 --> 00:05:34,970
Some of them are on top of the other ones.

73
00:05:35,150 --> 00:05:36,400
So there's a whole bunch of them here.

74
00:05:36,770 --> 00:05:42,050
So we need a way to kind of move them around and eventually maybe even disappear them off the page and

75
00:05:42,050 --> 00:05:42,890
move them around.

76
00:05:42,890 --> 00:05:44,330
So all of that is still yet to come.

77
00:05:44,750 --> 00:05:51,530
So in this lesson, focus on that Klown node method and that just gives you the ability to really easily

78
00:05:51,530 --> 00:05:54,410
create a clone of that existing element.

79
00:05:54,650 --> 00:05:56,810
And we were just using the one that clicked.

80
00:05:56,820 --> 00:06:01,280
So whatever one started that event triggered the event listener.

81
00:06:01,430 --> 00:06:03,800
That's the one that we're using and we're cloning that over.

82
00:06:03,950 --> 00:06:08,390
And then we've just adjusted some of the style properties and you can see that as well within those

83
00:06:08,390 --> 00:06:09,500
new cloned elements.

84
00:06:09,710 --> 00:06:10,730
So try it out for yourself.