1
00:00:00,590 --> 00:00:07,250
This lesson is going to be about preparing our HTML success and then hooking up our JavaScript in order

2
00:00:07,250 --> 00:00:08,690
to interact with elements.

3
00:00:09,020 --> 00:00:15,350
So let's start by creating a few elements and we're going to try to keep the minimal HTML elements setting

4
00:00:15,350 --> 00:00:17,540
up a div given a class of output.

5
00:00:17,750 --> 00:00:20,570
So this is the main element that we're going to be interacting with.

6
00:00:20,870 --> 00:00:24,850
Also, let's set up some success for this as well.

7
00:00:24,860 --> 00:00:30,500
And whenever the mouse travels into this element, this is where we're going to have our interaction

8
00:00:30,500 --> 00:00:31,250
taking place.

9
00:00:31,580 --> 00:00:36,740
So setting up a different background color to distinguish it and also a default height and width.

10
00:00:36,740 --> 00:00:40,850
So these don't actually matter because our application is going to be dynamic, taking up a height and

11
00:00:40,850 --> 00:00:41,050
weight.

12
00:00:41,110 --> 00:00:48,050
Also, I like to set up a border so that we know where our element ends and starts and we don't really

13
00:00:48,050 --> 00:00:50,320
are we aren't really going to have a whole lot of overflow.

14
00:00:50,660 --> 00:00:53,830
And also with the cursor, let's set up the cursor as Grop.

15
00:00:54,240 --> 00:00:56,030
Let's try that and refresh.

16
00:00:56,360 --> 00:00:58,130
So we've got a big green square.

17
00:00:58,580 --> 00:01:05,000
And whenever we're over that, we see that our cursor turns into the grab icon for the cursor and we're

18
00:01:05,000 --> 00:01:11,720
going to use JavaScript in order to track the X and Y coordinates, create a dynamic element that's

19
00:01:11,720 --> 00:01:13,730
going to move around that output area.

20
00:01:14,150 --> 00:01:16,160
We also need a message area.

21
00:01:16,170 --> 00:01:21,770
So this is where we can provide information to the user, setting it up as message first coordinate

22
00:01:21,770 --> 00:01:27,980
that we're going to need is the X, the horizontal adding in a span and we can set this spane class

23
00:01:27,980 --> 00:01:34,550
to X as this will track the horizontal coordinates and what's add in one more spane and that span is

24
00:01:34,550 --> 00:01:36,790
going to track the vertical coordinates.

25
00:01:37,160 --> 00:01:41,360
So it's going to be using Y and we can set the class for this one to Y.

26
00:01:41,390 --> 00:01:45,550
So refresh and we've got our X and Y coordinates down at the bottom.

27
00:01:45,560 --> 00:01:50,450
Next we need to add JavaScript in order to make it interactive and dynamic.

28
00:01:50,660 --> 00:01:55,100
Now that we've created the elements, we can track the contents of the element.

29
00:01:55,550 --> 00:02:02,300
So creating a variable called output using document query selector in order to select the element with

30
00:02:02,300 --> 00:02:05,900
the class of output and put that into an object called output.

31
00:02:05,930 --> 00:02:11,570
Always, it's good idea to check to make sure that you do have that element as the object of output

32
00:02:11,570 --> 00:02:12,470
before you try to use it.

33
00:02:12,620 --> 00:02:16,070
So this is the message out using documents.

34
00:02:16,190 --> 00:02:20,630
And because we do have two elements that we're trying to select, we're going to use query selector

35
00:02:20,630 --> 00:02:26,240
all selecting the two spans and we can be more specific in case we decide to add more span's into our

36
00:02:26,240 --> 00:02:26,620
page.

37
00:02:26,900 --> 00:02:31,850
So all of the elements with the class of message and having span's in them.

38
00:02:31,850 --> 00:02:35,660
So we're going to select those as message out objects.

39
00:02:35,780 --> 00:02:37,310
So we type in message out.

40
00:02:37,550 --> 00:02:39,950
We see that we've got a node list of the two elements.

41
00:02:40,490 --> 00:02:46,820
So we have the first one and we have a second one and we can distinguish them by using the index value

42
00:02:46,820 --> 00:02:48,270
of the items in the array.

43
00:02:48,560 --> 00:02:55,730
So we've got a span with a class of X and a span with a class of Y, and that means that we're ready

44
00:02:55,730 --> 00:02:57,320
to proceed to the next step.

45
00:02:57,590 --> 00:03:00,880
We're going to be building out more functionality within the application.

46
00:03:00,920 --> 00:03:07,670
So go ahead and set up these core pieces of the application where we've got our HTML.

47
00:03:07,670 --> 00:03:10,880
We've got a message area where we can track the X and Y coordinates.

48
00:03:11,270 --> 00:03:16,700
We have elements that we can deposit those updates in via JavaScript, apply a little bit of styling

49
00:03:16,700 --> 00:03:22,070
to that output element so that we can distinguish it from the rest of the HTML page and then finally

50
00:03:22,070 --> 00:03:27,020
select them using JavaScript has JavaScript objects and you could be ready to move on to the next step.