1
00:00:00,060 --> 00:00:06,090
Hello and welcome this lesson, we're going to construct our HTML, add some success, and then start

2
00:00:06,090 --> 00:00:11,730
connecting our JavaScript to document object in order to prepare to build our game.

3
00:00:11,850 --> 00:00:16,550
So the first thing we're going to do is open up our editors, create an indexed HTML.

4
00:00:16,560 --> 00:00:19,080
This is just a regular standard HTML template.

5
00:00:19,260 --> 00:00:22,590
So I've got style head, body and script tags.

6
00:00:22,620 --> 00:00:25,260
So we're going to do this as a one page application.

7
00:00:25,260 --> 00:00:28,280
So all of the code will be sitting within indexed HTML.

8
00:00:28,290 --> 00:00:29,980
We need to create some divs.

9
00:00:30,360 --> 00:00:35,970
This is going to be our main div where we're going to house all of the information and the inputs and

10
00:00:35,970 --> 00:00:37,800
all of the gameplay for the user.

11
00:00:37,920 --> 00:00:44,370
We also need to create some information for the user so we can have a message area for one, adding

12
00:00:44,370 --> 00:00:49,500
in a class of message where we can output message and contents to the user.

13
00:00:49,830 --> 00:00:51,390
We also need an input.

14
00:00:51,660 --> 00:00:57,650
So creating an element, give it a type of number as the user is going to be guessing a number.

15
00:00:57,660 --> 00:00:59,620
And lastly, we do need to have a button.

16
00:00:59,940 --> 00:01:06,270
So this is what the user is going to press in order to make their guess on the number that looks like

17
00:01:06,270 --> 00:01:10,400
that's all the HTML we're going to need and the rest we're going to do in JavaScript.

18
00:01:10,740 --> 00:01:16,380
So opening up within our script area, we're going to select these elements so that we can make use

19
00:01:16,380 --> 00:01:18,000
of them within our code.

20
00:01:18,030 --> 00:01:25,770
So first of all, construct an element, give it a value, a name of output using document query selector.

21
00:01:26,280 --> 00:01:33,560
We're selecting the element with a class of output and outputting it into the variable called output.

22
00:01:33,580 --> 00:01:37,260
And we're going to do the same for the other contents that we have on the page.

23
00:01:37,650 --> 00:01:39,540
So we've got a message area.

24
00:01:39,550 --> 00:01:43,440
So let's construct that message area, selecting it by class.

25
00:01:43,590 --> 00:01:49,200
If you're using query selector all, if you have multiple elements with the same class, it's going

26
00:01:49,200 --> 00:01:51,910
to select the first one and the same thing with query selector.

27
00:01:51,930 --> 00:01:57,300
So if we had multiple classes of output, we would automatically select the first one that appears on

28
00:01:57,300 --> 00:01:57,700
the page.

29
00:01:57,840 --> 00:01:59,220
This is our input.

30
00:01:59,220 --> 00:02:02,090
So this is essentially what the user is going to guess.

31
00:02:02,100 --> 00:02:03,810
And let's call that gets input.

32
00:02:03,840 --> 00:02:08,760
We're selecting it via the input tag so we don't have to be more specific because we only have the one

33
00:02:08,760 --> 00:02:09,210
input.

34
00:02:09,330 --> 00:02:14,970
If you add more than one input you could selected by the name, you could add in a name in order to

35
00:02:14,970 --> 00:02:15,720
distinguish it.

36
00:02:15,870 --> 00:02:18,090
And you can also selected by the type as well.

37
00:02:18,240 --> 00:02:19,350
Also a button.

38
00:02:19,470 --> 00:02:26,840
And we only have one button tag so we can use the query selector button for the tag name.

39
00:02:27,180 --> 00:02:32,550
Usually I do like to go into the console just to make sure that I am getting the elements properly before

40
00:02:32,550 --> 00:02:37,590
I try to use them in JavaScript and see these are all the elements that we created as objects in JavaScript

41
00:02:37,590 --> 00:02:43,320
and typing them into the console will make sure that you've got them as an object that you can utilize

42
00:02:43,320 --> 00:02:45,750
and we're going to make use of those in the upcoming lessons.

43
00:02:46,140 --> 00:02:48,540
So we have our basic structure.

44
00:02:48,540 --> 00:02:51,540
We have a message area, we have a no input, no.

45
00:02:51,570 --> 00:02:55,260
And we also have a button in order to create interaction for the user.

46
00:02:55,350 --> 00:02:57,660
So we're all ready to move on to the next step.

47
00:02:57,660 --> 00:03:00,540
We're going to build the game content and the gameplay.

48
00:03:00,900 --> 00:03:01,630
So that's coming up.

49
00:03:01,650 --> 00:03:08,220
So first, go into your editor and set up your basic structure, connect your JavaScript objects to

50
00:03:08,220 --> 00:03:09,180
your HTML.

51
00:03:09,260 --> 00:03:11,070
You're going to be ready to move on to the next lesson.