1
00:00:00,120 --> 00:00:00,840
Welcome back.

2
00:00:00,870 --> 00:00:03,620
Great job on making it through this section.

3
00:00:03,870 --> 00:00:10,350
So in this section, we set out to build a nice interactive application that could allow us to practice

4
00:00:10,350 --> 00:00:12,120
getting our mouse coordinates.

5
00:00:12,330 --> 00:00:19,530
Also creating elements on the fly, generating elements using JavaScript and creating mouse event listeners

6
00:00:19,530 --> 00:00:25,590
in order to create AI interaction, as well as animating our elements that we've created.

7
00:00:25,860 --> 00:00:28,030
And that's what we've done within the earlier lessons.

8
00:00:28,410 --> 00:00:30,960
So now it's time to do a quick code review.

9
00:00:31,080 --> 00:00:36,390
I always do suggest that you try the application out, test it out, make sure that it is working as

10
00:00:36,390 --> 00:00:40,860
intended, and once that is, then you're ready to launch your application.

11
00:00:40,860 --> 00:00:45,900
Running through the code, we set up a little bit of styling so that our application looks a little

12
00:00:45,900 --> 00:00:46,640
bit more interesting.

13
00:00:46,980 --> 00:00:54,060
We added in a little bit of HTML, so trying to keep it as a minimal as possible as the scope of this

14
00:00:54,060 --> 00:00:59,970
course is really about JavaScript and getting more familiar with how to interact with the DOM using

15
00:00:59,970 --> 00:01:00,600
JavaScript.

16
00:01:00,840 --> 00:01:07,440
So we started out by selecting our elements on the page into JavaScript objects that we can make use

17
00:01:07,440 --> 00:01:13,200
of later on within the code, also setting up some default variables that we added in a bunch of event

18
00:01:13,200 --> 00:01:13,680
listeners.

19
00:01:13,890 --> 00:01:16,590
So these were event listeners on that output element.

20
00:01:16,800 --> 00:01:19,470
So this is the main core element where the gameplay happens.

21
00:01:19,620 --> 00:01:25,200
We added in three different mouse events we've got most enter mouse leave and mouse move.

22
00:01:25,380 --> 00:01:32,610
Mouse Move is actually tracking the cursor position X and Y coordinates in relation to the page, and

23
00:01:32,610 --> 00:01:34,590
we're outputting that for the user to see.

24
00:01:34,620 --> 00:01:40,590
So making sure that the DOM content has loaded and once it's loaded, we create an element dynamically

25
00:01:40,590 --> 00:01:46,440
using create element, method and JavaScript added a class to it, appended it to our visible area so

26
00:01:46,440 --> 00:01:53,310
the user can see the element that we created, then selected and added in our offset left and offset

27
00:01:53,310 --> 00:01:57,390
top into the X and Y coordinates of this element object.

28
00:01:57,600 --> 00:02:01,290
And so these were added in as a variables that we can utilize.

29
00:02:01,410 --> 00:02:07,530
Another variable that we created was temp color to give a background color so that we could always reference

30
00:02:07,530 --> 00:02:10,210
it and go back to it once we switched the color.

31
00:02:10,230 --> 00:02:15,450
So over here on the mouse enter and this is one of the event listeners that we added into the dynamically

32
00:02:15,450 --> 00:02:16,260
created element.

33
00:02:16,620 --> 00:02:22,890
We update the background color to be read whenever we're on top of the element, and we also want it

34
00:02:22,890 --> 00:02:26,310
to have an option to turn it back to its initial temporary color.

35
00:02:26,400 --> 00:02:31,100
And that's where we had to use the temp color variable that we set here.

36
00:02:31,140 --> 00:02:32,790
That element gets clicked.

37
00:02:33,030 --> 00:02:38,040
Then we want to generate a brand new temporary color, apply it to the background, also incrementing

38
00:02:38,040 --> 00:02:41,580
the score and then outputting the score so it's visible to the user.

39
00:02:41,610 --> 00:02:45,720
Next, we want to create some animation with that element.

40
00:02:46,350 --> 00:02:53,640
So adding in a couple variables that were generated using math random so that it's can be randomized

41
00:02:53,640 --> 00:02:58,840
for each time that we generate them and then setting off the request animation frame.

42
00:02:59,070 --> 00:03:03,240
So this kicked off the animation frame, which was contained in a function called move.

43
00:03:03,270 --> 00:03:09,480
We generated a random speed using both random once again selected the element that we want to create

44
00:03:09,480 --> 00:03:16,080
the interaction with, which was the element with the class of box, got the boundaries of its main

45
00:03:16,080 --> 00:03:16,610
parent.

46
00:03:16,770 --> 00:03:21,870
So this is where our box is going to be moving around in so that we got the boundaries so that we don't

47
00:03:21,870 --> 00:03:26,540
go out of bounds for the element created, decreased the number of steps.

48
00:03:26,550 --> 00:03:28,920
So this was one of those variables that we created.

49
00:03:29,160 --> 00:03:36,140
So using steps gives us the ability to regenerate a direction and we're picking a direction at random.

50
00:03:36,150 --> 00:03:42,480
So any of the four possible directions, that could be a random value generating around a value of steps.

51
00:03:42,640 --> 00:03:48,150
So this is how many steps that will move in that one direction and keeping this all random.

52
00:03:48,160 --> 00:03:53,550
So it's more interesting for the user and they can't they won't be able to expect what's going to happen

53
00:03:53,550 --> 00:03:54,950
next and where it's going to move next.

54
00:03:55,200 --> 00:03:58,410
So giving them all equal opportunity to move in any direction.

55
00:03:58,410 --> 00:04:03,240
So that's up, down, left or right, restricted within the boundaries of the parent.

56
00:04:03,390 --> 00:04:09,690
And then we updated those variables that we set the X and Y variables and using those X and Y variables,

57
00:04:09,840 --> 00:04:13,020
we updated the style properties of that element box.

58
00:04:13,260 --> 00:04:18,090
So if we go to inspect and I'll make this a little bit bigger so we can see it better element that we

59
00:04:18,090 --> 00:04:24,750
created with the class of box and that's sitting with an output can see that this is constantly changing.

60
00:04:24,960 --> 00:04:28,950
So the top and the left is constantly updating and constantly changing.

61
00:04:28,950 --> 00:04:32,460
And then whenever we click it, we're actually updating that background color as well.

62
00:04:32,880 --> 00:04:39,360
And that's all contained within the style property of that element and all dynamically set using JavaScript.

63
00:04:39,600 --> 00:04:45,510
And then to complete the animation we call that move animation function once again and do everything

64
00:04:45,510 --> 00:04:51,520
over and over and over again, creating smooth animations and transitions for our application.

65
00:04:51,840 --> 00:04:57,360
Thanks again for taking this section and I hope you've enjoyed it as well if you have any questions

66
00:04:57,360 --> 00:04:59,760
or need clarification on the content that was covered.

67
00:04:59,950 --> 00:05:02,930
I'm always happy to help address those and answer those questions.

68
00:05:03,040 --> 00:05:08,380
Source code has been included, so I do encourage you to take the source code, try it for yourself,

69
00:05:08,500 --> 00:05:12,700
and get familiar with JavaScript methods that have been covered within the course.