1
00:00:00,240 --> 00:00:05,490
Hello and welcome this lesson, we're going to be setting up our main block area and we're going to

2
00:00:05,490 --> 00:00:10,860
be doing all of this using JavaScript, so creating an indexed HTML page.

3
00:00:10,860 --> 00:00:15,580
This is going to be used to house our script tags and then within the script tags.

4
00:00:15,600 --> 00:00:20,050
This is where all the magic is going to happen and this is where our JavaScript is going to take place.

5
00:00:20,340 --> 00:00:23,430
So first of all, we're going to create a global object.

6
00:00:23,430 --> 00:00:29,190
We can just call it my block so that we can reference it from any one of the functions and then using

7
00:00:29,190 --> 00:00:32,070
document, adding an event listener.

8
00:00:32,070 --> 00:00:37,620
So the event listener that we're listening for and this one is going to be listening for when the DOM

9
00:00:37,770 --> 00:00:39,780
content has loaded.

10
00:00:40,260 --> 00:00:43,710
So the event that we are listening for is dom content loaded.

11
00:00:43,710 --> 00:00:50,220
And what this means is this gets invoked whenever the dorm content has loaded.

12
00:00:50,220 --> 00:00:56,550
So whenever all of your elements are in place, then this is when this fire's off and we can output

13
00:00:56,550 --> 00:00:59,130
within the console ready and try that out.

14
00:00:59,340 --> 00:01:04,740
And you can see that what happens here is almost instantly, because we don't have a lot of HTML, of

15
00:01:04,740 --> 00:01:09,870
course, and it almost instantly loads and we see ready output into the console.

16
00:01:10,080 --> 00:01:16,370
So the next thing we want to do is we want to build the my block object and using JavaScript.

17
00:01:16,380 --> 00:01:20,420
So we're going to attach an element to the page and we create this element dynamically.

18
00:01:20,520 --> 00:01:27,510
So using the my block variable that we set up this a global variable, we're going to get document create

19
00:01:27,750 --> 00:01:32,000
element and the type of element that we're creating is going to be a div.

20
00:01:32,010 --> 00:01:38,760
So when we refresh, we can output in the my block and you can see that now it's got an element inside

21
00:01:38,760 --> 00:01:39,110
of there.

22
00:01:39,120 --> 00:01:46,680
And what we want to do with this element is we want to append it to the HTML so that we can see it and

23
00:01:46,680 --> 00:01:53,970
it's visible and we'll also add in text content into it and we'll type in the world into it temporarily.

24
00:01:54,180 --> 00:01:57,470
And then lastly, what we'll do is add it to the page.

25
00:01:57,660 --> 00:02:04,260
So using the document body object, we're going to send a child to the document body.

26
00:02:04,560 --> 00:02:10,110
And that child that we're spending is going to be the my block object that we just created.

27
00:02:10,120 --> 00:02:12,710
So that's set new, freshly created element that we created.

28
00:02:12,840 --> 00:02:18,210
So you can see that when you do an inspect, you see that we've added in and it's been appended to the

29
00:02:18,210 --> 00:02:18,540
body.

30
00:02:18,540 --> 00:02:24,190
So it's been added in after the script tags because this is the way that the append works.

31
00:02:24,190 --> 00:02:30,210
That adds that after any code that's already existing within the body tags, you could also move this

32
00:02:30,210 --> 00:02:31,680
within the head area.

33
00:02:32,040 --> 00:02:36,290
And that way you're not going to have any script tags there in the body.

34
00:02:36,300 --> 00:02:42,430
Everything will be sitting within the head and the div will be created and added into the body section.

35
00:02:42,630 --> 00:02:49,230
So go ahead and do that and add that into your code, set it up and listen for the event to Dom content

36
00:02:49,230 --> 00:02:56,340
loaded and when it loads create and create a div and then add that div into your body tags and you'd

37
00:02:56,340 --> 00:02:59,880
be ready to move on to the next lesson where we're going to apply some styling.

38
00:02:59,880 --> 00:03:01,680
So we're not just going to have hello.

39
00:03:01,740 --> 00:03:05,640
We'll add in some styling and all using JavaScript.