1
00:00:00,390 --> 00:00:04,770
Welcome in this lesson, we're going to be setting up our reaction games, first thing that we need

2
00:00:04,770 --> 00:00:10,350
is a mean container, so setting up a class and this is where all of the game play will take place.

3
00:00:10,590 --> 00:00:16,220
Also within here, adding in an element that we can contain the score with him.

4
00:00:16,620 --> 00:00:22,800
So setting up another div, giving it a class of score so we can access it using our JavaScript.

5
00:00:23,250 --> 00:00:28,830
And then one last element that we're going to need and giving it a class of button so we can style it

6
00:00:28,830 --> 00:00:31,440
as a button start game here.

7
00:00:32,070 --> 00:00:36,060
Also adding in some styling to make this look a little bit better.

8
00:00:36,510 --> 00:00:42,030
So making it look more like a button, do a center text allowing for that as well, just trying to make

9
00:00:42,030 --> 00:00:43,590
it look more like button.

10
00:00:43,800 --> 00:00:45,440
So setting up a border radio.

11
00:00:45,510 --> 00:00:47,550
Then lastly, let's center it.

12
00:00:47,550 --> 00:00:49,110
So do a margin auto.

13
00:00:49,350 --> 00:00:51,870
Also do some styling for the container.

14
00:00:51,990 --> 00:00:58,440
Should be the full size of available space that we have for us and margin auto so we can center that

15
00:00:58,440 --> 00:00:59,320
element as well.

16
00:00:59,350 --> 00:01:01,860
Let's also add some styling for skort.

17
00:01:02,170 --> 00:01:05,090
You can add in a default value for score of zero.

18
00:01:05,220 --> 00:01:06,630
So we've got our default value there.

19
00:01:06,630 --> 00:01:09,120
Four score and let's center this one as well.

20
00:01:09,250 --> 00:01:10,110
It's doing a margin.

21
00:01:10,110 --> 00:01:12,300
Auto will center that element.

22
00:01:12,690 --> 00:01:19,580
So now that we've got our core S.O.S and HTML set up, let's use JavaScript in order to select our elements.

23
00:01:19,920 --> 00:01:26,910
So setting up some objects in order to contain that element, content can use document query selector

24
00:01:26,910 --> 00:01:30,780
to select the element, selecting the element with the class of container.

25
00:01:30,960 --> 00:01:35,970
And when you refresh, just to make sure that we did select the right element, we see we do have our

26
00:01:35,970 --> 00:01:41,450
container now as a JavaScript, we've got a start game option and we only have one element.

27
00:01:41,490 --> 00:01:46,710
So again, we can use query selector and selecting that element with score.

28
00:01:47,130 --> 00:01:49,770
I said this would be a start game and then we'll do one more four.

29
00:01:50,340 --> 00:01:51,850
So if the class of start game.

30
00:01:52,050 --> 00:01:55,470
And then lastly, let's do one more for the score area.

31
00:01:55,840 --> 00:02:00,050
I'll call it score area so that we can have another variable four score.

32
00:02:00,210 --> 00:02:07,770
And lastly, let's set up an object for a player will have a score and we can utilize this as we build

33
00:02:07,770 --> 00:02:08,660
out our application.

34
00:02:08,680 --> 00:02:10,980
So this is a global object that we can make use of.

35
00:02:11,010 --> 00:02:17,100
So once you've set that up, we're ready to add some functionality into the button as well as begin

36
00:02:17,100 --> 00:02:17,790
the gameplay.

37
00:02:18,000 --> 00:02:19,950
So that's all still coming up in the next lessons.

38
00:02:19,950 --> 00:02:25,530
So go ahead and open up your editor, create some elements on the page, apply some styling.

39
00:02:25,530 --> 00:02:31,200
You can customize the styling and then select those elements using JavaScript and make sure that they

40
00:02:31,200 --> 00:02:38,730
are selected properly by adding in and referencing it into the console so that you make sure that you

41
00:02:38,730 --> 00:02:44,010
do have those correct elements and you're ready to move on to the next part of the project.