1
00:00:00,330 --> 00:00:06,600
Hey, are you ready to have some fun with the dorm document object, model interaction, so this application

2
00:00:06,600 --> 00:00:12,090
is designed to help you practice and get more familiar with how to manipulate elements within the dorm.

3
00:00:12,270 --> 00:00:16,500
So it's an interactive input field where you've got some input forms.

4
00:00:16,500 --> 00:00:22,950
You can create elements, you can toggle classes, you can update text, background images, select

5
00:00:22,950 --> 00:00:24,570
different types of elements to create.

6
00:00:24,750 --> 00:00:27,320
So a whole bunch of fun, interesting things that you can do.

7
00:00:27,480 --> 00:00:33,960
And again, it's to practice visually as well as behind the scenes with JavaScript to practice creating

8
00:00:33,960 --> 00:00:36,390
elements and manipulating elements via the DOM.

9
00:00:36,420 --> 00:00:38,760
So let me show you, it's got a bunch of options here.

10
00:00:38,760 --> 00:00:40,050
We can add an element.

11
00:00:40,170 --> 00:00:41,970
So that just added a brand new element.

12
00:00:41,970 --> 00:00:43,380
We can add as many as we want.

13
00:00:43,590 --> 00:00:45,030
We can select an element.

14
00:00:45,040 --> 00:00:47,070
So we've got all of the elements listed here.

15
00:00:47,070 --> 00:00:49,980
So div paragraphs span a bunch of div.

16
00:00:49,980 --> 00:00:51,480
So these are the device that we created.

17
00:00:51,630 --> 00:00:53,250
We can create some more paragraphs.

18
00:00:53,250 --> 00:00:58,320
As you can see, they got created below so you can select them from the next dropdown.

19
00:00:58,320 --> 00:00:59,970
We can add content into them.

20
00:00:59,970 --> 00:01:05,820
C you we've added and pottered, we can make it bigger and that one is kind of off a little bit disappeared

21
00:01:05,820 --> 00:01:06,090
there.

22
00:01:06,210 --> 00:01:08,700
So let me use the first one and update that.

23
00:01:08,970 --> 00:01:12,480
Let's add a border, make it bigger update so you get the point.

24
00:01:12,630 --> 00:01:18,180
There's a lot of things that you can do here and maybe it's not as much fun as I make it out to be,

25
00:01:18,330 --> 00:01:23,070
but this is definitely something that's useful in order to practice and get more familiar with what

26
00:01:23,070 --> 00:01:26,940
you could do with element and element manipulation in the form of a form.

27
00:01:26,940 --> 00:01:31,260
And then behind the scenes, the JavaScript is the most important part, and that's the key to this

28
00:01:31,260 --> 00:01:32,850
section to get familiar with it.

29
00:01:33,180 --> 00:01:33,910
So try it out.

30
00:01:33,930 --> 00:01:34,550
Hope you enjoy it.