1
00:00:00,150 --> 00:00:02,870
Come back, how's your project coming along in this lesson?

2
00:00:02,880 --> 00:00:08,130
It's going to be an interesting one because we're going to be creating an element using JavaScript.

3
00:00:08,220 --> 00:00:13,890
So let's first start out by adding another listener and this event listener is going to listen for the

4
00:00:13,890 --> 00:00:15,270
DOM content to load.

5
00:00:15,510 --> 00:00:21,630
This is the same as with Jan when you're listening for a document ready, making sure that the DOM has

6
00:00:21,630 --> 00:00:28,290
loaded and once the DOM content has loaded, then we can invoke the function in order to create our

7
00:00:28,470 --> 00:00:29,630
moving target.

8
00:00:29,640 --> 00:00:34,250
And I do say moving and we're going to introduce the moving part of it in the upcoming lesson.

9
00:00:34,470 --> 00:00:36,350
So let's first create that target.

10
00:00:36,540 --> 00:00:41,220
So refresh and we don't see anything happening here because we don't have any code here.

11
00:00:41,220 --> 00:00:46,470
But trust me when I tell you that this is actually loading and all of the block a code that's going

12
00:00:46,470 --> 00:00:51,060
to be in here is going to get rendered out once the DOM content has loaded.

13
00:00:51,120 --> 00:00:56,160
And usually that's fairly instant, and especially because I'm on my local machine, right on my computer.

14
00:00:56,250 --> 00:00:58,980
We're not going to have any lag with the DOM content loading.

15
00:00:58,980 --> 00:01:05,070
Of course, we wanted to create another element here, so I'm going to give it a class of box and apply

16
00:01:05,070 --> 00:01:11,310
all of this, including creating the element on the fly using JavaScript, create the position so that

17
00:01:11,310 --> 00:01:15,240
the position as relative, though, is going to give me the ability to move it around.

18
00:01:15,420 --> 00:01:22,050
I'm going to set its left position as 50 percent said, its top position as 50 percent.

19
00:01:22,260 --> 00:01:26,120
And we're going to move it around with JavaScript setting up a width and a height.

20
00:01:26,130 --> 00:01:30,210
So how about we do 100 picks and a height of 100 picks?

21
00:01:30,480 --> 00:01:36,570
And the objective of this exercise in this game is going to be to try to catch this moving object,

22
00:01:37,020 --> 00:01:43,110
also set up the border radius so that it's slightly rounded, 15 picks rounded.

23
00:01:43,860 --> 00:01:46,140
So now we've got an element with the box.

24
00:01:46,360 --> 00:01:49,470
Next, we need to create it and we need to add it to the page.

25
00:01:49,800 --> 00:01:55,440
And this is always one of the fun things of JavaScript, because you get to create stuff that for the

26
00:01:55,440 --> 00:01:59,800
user to see and customize, create it using JavaScript.

27
00:02:00,030 --> 00:02:01,890
So first of all, let's create a div.

28
00:02:02,010 --> 00:02:06,690
You can use variable called div creating whatever you want to call it.

29
00:02:06,690 --> 00:02:12,300
But we're in this case, we're calling it div do create element allows us to create elements on the

30
00:02:12,300 --> 00:02:14,640
fly and in this case we're creating a div.

31
00:02:14,640 --> 00:02:20,340
And because this is an object, we have the ability to update some of the values that are contained

32
00:02:20,340 --> 00:02:20,790
within there.

33
00:02:21,000 --> 00:02:28,050
We can update the class list by using class add and adding in that box class that we created and we

34
00:02:28,050 --> 00:02:33,150
also want to spend it so that it appends to the visible area because right now we can't see it even

35
00:02:33,150 --> 00:02:34,080
though we've created it.

36
00:02:34,290 --> 00:02:41,430
So append this div to the output element and we do need to add a background color or a border so that

37
00:02:41,430 --> 00:02:42,050
we can see it.

38
00:02:42,240 --> 00:02:47,160
So let's just add a quick border around it so that we can actually see it because it is adding it.

39
00:02:47,430 --> 00:02:52,580
And if you don't trust me, then we can always add a border and you can see it showing up on the page.

40
00:02:52,590 --> 00:02:53,220
So there it is.

41
00:02:53,400 --> 00:02:55,920
It's being added in in the same spot all the time.

42
00:02:56,160 --> 00:02:58,230
Let's apply some properties to it.

43
00:02:58,770 --> 00:03:05,190
And again, because it is an object that gives us the ability to add different object values so we can

44
00:03:05,190 --> 00:03:11,510
add in an X and a Y value, which we can then use in order to adjust and manipulate its position.

45
00:03:11,850 --> 00:03:17,210
So I usually to create these as separate values, which makes it a little bit easier to move them around.

46
00:03:17,520 --> 00:03:25,290
So taking our div object that we created, adding in an object value of X, we're going to take that

47
00:03:25,290 --> 00:03:33,570
div, get the offset and also taking div Y and this is another new value that we're creating and here

48
00:03:33,570 --> 00:03:35,820
we're offsetting the top position.

49
00:03:36,120 --> 00:03:42,540
So it's going to give us a left and right position and you can also consult logout that value of div

50
00:03:42,540 --> 00:03:43,500
so you can see that.

51
00:03:44,370 --> 00:03:51,690
And of course it's we have to do console directory and able to able to see the actual object properties

52
00:03:51,690 --> 00:03:52,260
and values.

53
00:03:52,740 --> 00:03:57,630
So if we open that up, if we go right to the bottom, we're going to see that we've added in this X

54
00:03:57,630 --> 00:03:59,540
and Y object value.

55
00:03:59,550 --> 00:04:05,400
So those aren't there by default and we're adding those in so that we can utilize them in the upcoming

56
00:04:05,400 --> 00:04:07,670
lesson as we move this element around.

57
00:04:07,980 --> 00:04:16,860
So starting position of X and Y is coming in at two fifty nine and 277 and it's getting positioned on

58
00:04:16,860 --> 00:04:17,300
the page.

59
00:04:17,580 --> 00:04:22,410
We can also update its background color forward and I'll show you how to do that.

60
00:04:22,680 --> 00:04:27,440
Adding an event listener whenever we hover over it will update that background image.

61
00:04:27,990 --> 00:04:33,750
So for now, how about we create a default background color so this can be temp color?

62
00:04:34,760 --> 00:04:41,160
And let's do this at random, so creating a hex value and we know that colors are hex values, using

63
00:04:41,220 --> 00:04:46,630
math random in JavaScript is going to give us the ability to have a random value.

64
00:04:46,940 --> 00:04:51,390
We're going to change this value to string with a base of 16.

65
00:04:51,410 --> 00:04:59,270
So it's going to give us our hex value and then substring returning back the last six characters of

66
00:04:59,270 --> 00:05:05,310
our hex value, which is going to give us a temporary background color.

67
00:05:05,900 --> 00:05:08,960
And lastly, let's apply that background color.

68
00:05:09,140 --> 00:05:15,680
So just as we did with before, where we're sending a background color, we've got our temp color available

69
00:05:15,800 --> 00:05:16,840
for that element.

70
00:05:16,850 --> 00:05:18,150
So see what happens now.

71
00:05:18,440 --> 00:05:24,380
And now when I refresh it, so every time I refresh it, our box is actually going to have a different

72
00:05:24,380 --> 00:05:24,830
color.

73
00:05:25,010 --> 00:05:25,730
So that's pretty neat.

74
00:05:26,060 --> 00:05:31,430
And we're ready to move on to the next step where we can introduce some interactivity to that element.

75
00:05:31,460 --> 00:05:37,550
So whenever we hover over this one, let's change the color to red to make that more interesting and

76
00:05:37,550 --> 00:05:44,130
make it more of a game where you have to move your mouse cursor over this ever moving element object.

77
00:05:44,660 --> 00:05:46,580
So that is all still yet to come.

78
00:05:46,850 --> 00:05:53,920
So for now, create the ADD event listener for whatever the dorm content has loaded, create an element.

79
00:05:53,930 --> 00:06:00,050
So using create element method in JavaScript to create this element, add the class of box and you can

80
00:06:00,050 --> 00:06:04,120
apply your own styling to box or you can use the one that I've provided as well.

81
00:06:04,160 --> 00:06:06,320
Then append it to the output element.

82
00:06:06,530 --> 00:06:09,530
That's the same output element that we've been using here as an object.

83
00:06:09,860 --> 00:06:12,190
Create a couple different values.

84
00:06:12,200 --> 00:06:17,420
So we've got an X and Y, so these are going to be the starting coordinates and we can adjust those

85
00:06:17,600 --> 00:06:22,790
using our JavaScript and that's going to come on the upcoming lessons and then also create a random

86
00:06:22,790 --> 00:06:23,210
color.

87
00:06:23,240 --> 00:06:29,660
So this is a really nice short format where we use random math, random, we convert it into a hex value

88
00:06:29,780 --> 00:06:38,270
and then we take the last six characters of it in order to produce a random color value and then set

89
00:06:38,270 --> 00:06:41,480
the background color value to that random color value that we created.

90
00:06:41,600 --> 00:06:43,580
And you're ready to move on to the next step.