1
00:00:00,090 --> 00:00:05,430
Welcome to our first lesson, where we're going to be setting up our game board and then hooking up

2
00:00:05,430 --> 00:00:11,080
our JavaScript to connect to the elements that we've just created, we're going to need a button.

3
00:00:11,280 --> 00:00:14,790
So this is just going to be a regular button which says start.

4
00:00:15,130 --> 00:00:19,750
So our start button next, we're going to need an area to produce some gameplay.

5
00:00:19,800 --> 00:00:22,990
So create a div for that and we can call this game area.

6
00:00:23,010 --> 00:00:29,820
So give it a class a way to identify it and you can leave that blank because we're going to be doing

7
00:00:29,820 --> 00:00:33,510
everything and as much as possible within JavaScript.

8
00:00:33,870 --> 00:00:37,140
And we also need a way to send a message to the player.

9
00:00:37,630 --> 00:00:41,450
So create another div and give this one a class of message.

10
00:00:42,060 --> 00:00:47,310
And this is where we can output message and information to the player as they're playing the game.

11
00:00:48,360 --> 00:00:52,190
Now, within JavaScript, Saulius going to use the script tag.

12
00:00:52,200 --> 00:00:55,680
So opening the script tags, setting up some variables.

13
00:00:56,010 --> 00:01:03,300
First of all, let's set up a variable for that message area using a document query selector.

14
00:01:03,540 --> 00:01:06,310
That's how we're going to select the element from the page.

15
00:01:06,570 --> 00:01:11,520
Make sure that we do a DOT to indicate that this is a class that we are selecting.

16
00:01:12,000 --> 00:01:15,090
Another value that we need is a button.

17
00:01:15,280 --> 00:01:22,980
So we're going to make that button clickable using document and again query selector in order to select

18
00:01:22,980 --> 00:01:24,540
the element that we want it to use.

19
00:01:24,780 --> 00:01:28,650
And in this case, it's just the button tag that we're going to use.

20
00:01:28,830 --> 00:01:31,110
So we don't need any prefix for that.

21
00:01:31,260 --> 00:01:34,080
We can just use button and that will select the button.

22
00:01:34,680 --> 00:01:40,560
And the last element that we created within our jobs, within our HTML is the game area.

23
00:01:40,890 --> 00:01:46,050
So this can be a game area and using once again document.

24
00:01:47,340 --> 00:01:53,460
Query selector and I usually do use query selector because I find it's the easiest one and it's the

25
00:01:53,460 --> 00:01:54,360
most common one.

26
00:01:54,390 --> 00:02:00,750
So if we're using selecting classes, IDs or tags, it's a simple way to make that selection.

27
00:02:00,750 --> 00:02:05,490
And it's very it's a similar to what you find within CSFs.

28
00:02:05,490 --> 00:02:06,960
So that makes it really easy.

29
00:02:07,740 --> 00:02:15,150
So once you've made those selections next, go out into the console and put the contents of button just

30
00:02:15,150 --> 00:02:17,850
to make sure that everything is there and in place.

31
00:02:18,030 --> 00:02:24,990
And you can see that within our console area we can hover over the button content there that's being

32
00:02:25,110 --> 00:02:28,530
put in the console and that's also lighting up that element.

33
00:02:28,740 --> 00:02:34,710
And as well, if we go to inspect, we see that this is the contents of the button within the within

34
00:02:34,710 --> 00:02:35,370
the console.

35
00:02:35,490 --> 00:02:40,490
We're grabbing that button element and that makes us ready to use it in the next lesson.

36
00:02:40,650 --> 00:02:45,450
We're also, you can add interaction to the button and ideally the way that we want the game to be played.

37
00:02:45,630 --> 00:02:51,480
The player comes in, presses the start button, and then the game begins and the objective of the game.

38
00:02:51,510 --> 00:02:58,170
We're going to generate some circles in different areas within the screen and the player has to click

39
00:02:58,170 --> 00:02:58,530
those.

40
00:02:58,710 --> 00:03:03,060
We're going to time to see how long it takes the player to click those and then output that message,

41
00:03:03,300 --> 00:03:07,530
how long or however long it took the player to play and make the click.

42
00:03:07,680 --> 00:03:10,520
That's the message that we're going to be outputting to the to the player.

43
00:03:11,040 --> 00:03:12,940
So all of that is still yet to come.

44
00:03:12,960 --> 00:03:13,590
So go ahead.

45
00:03:13,800 --> 00:03:20,670
Set up your basic HTML file where you've got the button, the message area, the game area, and then

46
00:03:20,670 --> 00:03:27,420
use JavaScript to place all of these elements into usable objects that we can use within the upcoming

47
00:03:27,420 --> 00:03:29,490
lessons and within the scripting.