1
00:00:00,090 --> 00:00:05,820
Welcome in this lesson, it's going to be about building out our HTML structure so that later on we

2
00:00:05,820 --> 00:00:11,590
can incorporate all of the gameplay that is necessary in order to produce our application.

3
00:00:11,910 --> 00:00:17,160
So starting out, we're going to create a div that's going to be a mean div, calling it giving it a

4
00:00:17,160 --> 00:00:17,630
class.

5
00:00:17,970 --> 00:00:19,760
We can assign a score there.

6
00:00:19,860 --> 00:00:23,590
So this is where we can output whatever the score values are that we want to show.

7
00:00:24,120 --> 00:00:30,960
Also setting up another class and we can give this one class of game and then within here we can show

8
00:00:30,960 --> 00:00:33,390
all of the gameplay creating one more div.

9
00:00:33,390 --> 00:00:41,000
So inside of the date, the game class div we create a div and this will be the start screen.

10
00:00:41,490 --> 00:00:48,260
And then here is where we can have all of the welcome message and start button and so on.

11
00:00:48,270 --> 00:00:49,560
So we'll add that in as well.

12
00:00:50,010 --> 00:00:52,530
Next, creating a class and adding.

13
00:00:53,570 --> 00:00:56,030
To this class, we're going to call it game.

14
00:00:58,190 --> 00:01:03,590
And so this is where all of our game play will take place, so we're going to swap between the start

15
00:01:03,590 --> 00:01:08,010
screen and the game area once we start the game.

16
00:01:08,390 --> 00:01:10,760
I'm also going to create a basic class.

17
00:01:11,180 --> 00:01:16,280
I'm going to call it height, and this is going to have one property where we're going to use display

18
00:01:16,310 --> 00:01:16,730
none.

19
00:01:17,150 --> 00:01:24,230
So that way we don't show both of those and we can add and remove the Hyde class as needed in order.

20
00:01:24,270 --> 00:01:26,410
So different screens to the player.

21
00:01:26,570 --> 00:01:31,400
Next, we're going to use JavaScript to connect to our elements on the page.

22
00:01:32,310 --> 00:01:36,340
And within the start screen, we're going to add in an event listener.

23
00:01:36,360 --> 00:01:40,200
So when the user presses the start screen, it can start the game as well.

24
00:01:41,040 --> 00:01:48,600
So selecting the various elements that we have on our page, I'm going to use CONSED and for the score

25
00:01:48,630 --> 00:01:56,760
area, using the document and query selector, we're going to select the element with score and output

26
00:01:56,760 --> 00:02:05,760
that into the JavaScript score object, selecting our start screen using document query selector.

27
00:02:06,600 --> 00:02:10,620
We're going to select the element with a class of start screen.

28
00:02:11,930 --> 00:02:16,290
And you don't have to call them the same, you could call them something different as well.

29
00:02:16,550 --> 00:02:22,580
And next stop selecting our game area and I was going to call it the same thing so that we have some

30
00:02:22,580 --> 00:02:27,920
consistency query selector and selecting the element with the class of game.

31
00:02:28,310 --> 00:02:33,830
So once I've made these selections, I usually like to double check and make sure that we are accessing

32
00:02:33,830 --> 00:02:34,490
them properly.

33
00:02:34,640 --> 00:02:39,010
So opening up your developer console, we can type in score.

34
00:02:39,050 --> 00:02:47,030
We see that we access that div type start screen so that we access that's div and then game area just

35
00:02:47,030 --> 00:02:49,160
to make sure that we're accessing the right device.

36
00:02:50,000 --> 00:02:55,100
So that coming up next, we can focus on the JavaScript and create all of the interactions that are

37
00:02:55,100 --> 00:02:58,010
going to be necessary in order to produce the gameplay.

38
00:02:58,700 --> 00:03:03,980
So one last thing that we wanted to add in before we conclude, and that's adding in an event listener

39
00:03:03,980 --> 00:03:07,220
to start screen and this is going to be a click event.

40
00:03:07,670 --> 00:03:12,680
So whenever the player clicks the start screen where we've got that welcome message, this is going

41
00:03:12,680 --> 00:03:17,720
to trigger off the game start and adding in a function, call it start.

42
00:03:18,590 --> 00:03:20,570
So this is where all of our gameplay will start.

43
00:03:20,840 --> 00:03:23,960
And we'll take a look at that and we'll build that out in the upcoming lessons.

44
00:03:24,350 --> 00:03:33,500
So go ahead and set up your default HTML ad in classes as necessary within the styling and then use

45
00:03:33,500 --> 00:03:39,800
JavaScript to add all of those elements as objects, usable objects within your code so that you're

46
00:03:39,800 --> 00:03:45,740
ready to move on to the next step and then also test out that click event so that make sure that that

47
00:03:45,740 --> 00:03:46,640
is functioning.

48
00:03:46,970 --> 00:03:52,280
And the way to do that, usually I put a console message into that function.

49
00:03:52,310 --> 00:03:56,660
So I know that whenever I'm clicking it, it is being invoked and it is working.

50
00:03:57,060 --> 00:04:00,580
So go ahead and add that into your project and going to be ready to move on to the next step.