1
00:00:00,790 --> 00:00:06,520
All right, I call this section fun with the Don, the document object model, and this was a response

2
00:00:06,520 --> 00:00:11,980
to students that were asking me for better ways to get more familiar with what can be done with the

3
00:00:11,980 --> 00:00:14,510
dorm as well as cloning elements.

4
00:00:14,740 --> 00:00:20,950
So this is not very often used, but it is a really neat feature within JavaScript, or you can take

5
00:00:20,950 --> 00:00:22,270
an element and you can clone it.

6
00:00:22,540 --> 00:00:27,820
So that's the objective of the section, is to get more familiar with cloning of elements as well as

7
00:00:27,820 --> 00:00:34,360
some manipulation and also having some fun, making some colorful elements and also being able to remove

8
00:00:34,360 --> 00:00:35,080
those elements.

9
00:00:35,260 --> 00:00:40,900
So creating new elements where coding elements and we're removing elements on the page and they're going

10
00:00:40,900 --> 00:00:42,410
to move around a little bit as well.

11
00:00:42,430 --> 00:00:48,270
So just for some added fun and then we've added colors because colors make everybody happy.

12
00:00:48,280 --> 00:00:49,640
And so it's fun to work with them.

13
00:00:49,960 --> 00:00:52,560
So let's try that out and let's check that one out.

14
00:00:53,620 --> 00:00:55,210
So it starts out with that.

15
00:00:55,210 --> 00:00:58,170
We've got six different elements for seven elements.

16
00:00:58,180 --> 00:00:59,920
So we've got a black area here.

17
00:00:59,920 --> 00:01:03,660
And this is where we can draw up elements that we want to remove from the screen.

18
00:01:03,910 --> 00:01:09,580
So the objective here, we can click the elements and you can see that they're cloning the elements,

19
00:01:09,580 --> 00:01:13,480
the existing elements, and then they move them down and they're also Dragonball.

20
00:01:13,490 --> 00:01:19,410
So if you drag them and if you drop them over the black box, then they disappear, they get removed.

21
00:01:19,630 --> 00:01:23,350
So other than that, you can drag them and position them anywhere you want.

22
00:01:23,530 --> 00:01:27,040
You can clone as many as you want and you can just have some fun with this.

23
00:01:27,560 --> 00:01:33,730
So really, you can spend quite a bit of time just clicking aimlessly here, duplicating cloning these

24
00:01:33,730 --> 00:01:36,130
elements and then dragging them and dropping them.

25
00:01:36,340 --> 00:01:42,130
And the real objective here is with the code to get more familiar with what you can do, creating elements

26
00:01:42,310 --> 00:01:45,430
as well as removing elements and coding elements.

27
00:01:45,460 --> 00:01:46,330
So try this out.