1
00:00:00,180 --> 00:00:06,750
Hello and welcome to the first lesson of this section here, we're going to be building out the HTML

2
00:00:06,750 --> 00:00:11,640
and the structure so that we can bring in our JavaScript and make our game interactive.

3
00:00:11,970 --> 00:00:15,330
So we need to have a few different elements on the page.

4
00:00:15,750 --> 00:00:17,220
So this one can be a span.

5
00:00:17,250 --> 00:00:18,370
I'm going to give it a class.

6
00:00:18,630 --> 00:00:23,940
So this is our message area where we can communicate with the user, give them information about what

7
00:00:23,940 --> 00:00:24,360
to do.

8
00:00:24,510 --> 00:00:28,290
And for now, I'm just going to write in here press to start.

9
00:00:28,500 --> 00:00:33,180
And this will also output something for us to view within our browser.

10
00:00:33,420 --> 00:00:35,580
Also, we need a scoring area.

11
00:00:36,280 --> 00:00:38,160
We can just call this one score.

12
00:00:38,310 --> 00:00:43,500
And then lastly, let's create an element to contain our main game.

13
00:00:43,710 --> 00:00:48,840
And then within here, in case we need to add any additional elements, we're going to have our game

14
00:00:48,990 --> 00:00:49,530
area.

15
00:00:49,560 --> 00:00:53,070
So this is where all of the gameplay is going to take place within here.

16
00:00:53,070 --> 00:00:58,770
And we're just going to leave them blank because relying on JavaScript to fill in all of the elements

17
00:00:58,770 --> 00:01:01,030
and manipulate them and make a game out of it.

18
00:01:01,050 --> 00:01:04,410
So the next thing we want to do is open up our JavaScript area.

19
00:01:04,440 --> 00:01:09,750
So this is when our script tags and select those elements are going to make this bigger because there's

20
00:01:09,750 --> 00:01:11,070
not much to see right now.

21
00:01:11,080 --> 00:01:17,250
And selecting those elements so that we have them in JavaScript objects so that we can make use of them

22
00:01:17,250 --> 00:01:18,270
within our code.

23
00:01:18,300 --> 00:01:23,820
I'm going to use query selector to select the elements you can use select by class name you could use

24
00:01:24,020 --> 00:01:25,440
get element by ID.

25
00:01:25,680 --> 00:01:30,060
So there's a number of different ways to select the elements that we want to manipulate taking in the

26
00:01:30,060 --> 00:01:30,450
score.

27
00:01:30,470 --> 00:01:33,470
So you're going to have that as an object in JavaScript.

28
00:01:33,480 --> 00:01:35,810
We can also have our game area.

29
00:01:35,820 --> 00:01:36,930
So it's an important one.

30
00:01:37,110 --> 00:01:41,100
We're going to utilize these objects throughout the upcoming lessons.

31
00:01:41,430 --> 00:01:46,480
So it is important always to start out to have a good start to it so that you don't have to.

32
00:01:46,500 --> 00:01:51,480
So you can reference them really easily within your script and also will select the game message area

33
00:01:51,480 --> 00:01:56,860
as well, the same way using the query selector and selecting the element by its class name.

34
00:01:56,880 --> 00:02:02,230
So once we have that, usually I like to check just to make sure that we do have those elements selected.

35
00:02:02,460 --> 00:02:07,380
So now if I go into the console, if I type in score, we're going to see an output for Schaus with

36
00:02:07,380 --> 00:02:09,540
selecting the element with the class of square.

37
00:02:09,690 --> 00:02:14,220
Next, selecting our game area object once again, selecting our game area element.

38
00:02:14,220 --> 00:02:20,640
And what it does is it outputs the corresponding element information out into the console and that just

39
00:02:20,640 --> 00:02:26,550
make sure and double checks for us that we have actually selected the correct elements and now we can

40
00:02:26,550 --> 00:02:31,620
use them as objects in JavaScript, manipulate them, apply different functionality to them.

41
00:02:31,830 --> 00:02:34,100
And that's all coming up in the upcoming lessons.

42
00:02:34,110 --> 00:02:39,630
So for now, before the next lesson, open up your editor and create a basic game structure.

43
00:02:39,630 --> 00:02:45,120
So an area where you can communicate with the user, send messaging, also a scoring area and then a

44
00:02:45,120 --> 00:02:51,870
main game play area, and then using JavaScript admin as objects and double check within the console

45
00:02:51,870 --> 00:02:58,050
to make sure that you do have them ready to go and ready to be used in the upcoming lessons within the

46
00:02:58,050 --> 00:02:58,380
code.