1
00:00:00,570 --> 00:00:05,730
This lesson, we're going to be setting up a magic eight ball, and if those of you that are unfamiliar

2
00:00:05,730 --> 00:00:09,420
with the Magic eight ball, basically it helps you make a decision.

3
00:00:09,420 --> 00:00:10,520
You ask the question.

4
00:00:10,650 --> 00:00:14,270
It provides you what you should do with that question.

5
00:00:14,820 --> 00:00:19,160
And we're going to be first in this lesson, setting up our magic eight ball.

6
00:00:19,560 --> 00:00:27,060
So having a div with a class of message where we can output our contents back out to the person interacting

7
00:00:27,060 --> 00:00:35,790
with the variables, interacting so we could output a message out to the player that's interacting with

8
00:00:35,790 --> 00:00:37,100
our application.

9
00:00:38,100 --> 00:00:43,740
Next, we need an input area so this can be a regular type text input.

10
00:00:45,010 --> 00:00:46,330
And this is where the.

11
00:00:47,200 --> 00:00:51,860
Person can ask the question, we can also have placeholder there.

12
00:00:51,880 --> 00:00:53,560
So this is just regular HTML.

13
00:00:54,580 --> 00:00:55,790
Ask your.

14
00:00:57,000 --> 00:00:57,690
Question.

15
00:00:59,300 --> 00:01:05,960
Or we could add that into the message as well, ask your question, so it's up to you however you want

16
00:01:05,960 --> 00:01:07,690
to present it to the user.

17
00:01:08,270 --> 00:01:09,950
So we've got ask your question.

18
00:01:10,730 --> 00:01:12,740
And then lastly, let's create a button.

19
00:01:12,980 --> 00:01:21,530
So this button is going to be a type button and we'll set up a value or just add in some HTML in our

20
00:01:21,530 --> 00:01:22,240
text in here.

21
00:01:23,030 --> 00:01:23,690
Save that.

22
00:01:24,510 --> 00:01:26,070
And it looks like we've got too many.

23
00:01:26,090 --> 00:01:27,110
Ask your question.

24
00:01:27,230 --> 00:01:33,020
So I'm going to just shorten this to question ask your question, and this could just be ask so we don't

25
00:01:33,020 --> 00:01:34,190
have too much repetition.

26
00:01:34,340 --> 00:01:36,800
So ask your question, question, ask.

27
00:01:37,340 --> 00:01:45,260
Next, let's set up our JavaScript using our variables or set up an object that contains the element

28
00:01:45,260 --> 00:01:48,800
information document query selector.

29
00:01:49,130 --> 00:01:54,380
In order to select elements that are available within the HTML, we're going to select the element,

30
00:01:54,410 --> 00:01:57,650
the first element of the page that has a class of message.

31
00:01:57,950 --> 00:02:02,290
Place it into our object with the same name message.

32
00:02:02,990 --> 00:02:12,920
Also, we need to get values so we can set up our value for our question using document query selector,

33
00:02:13,160 --> 00:02:16,480
we can select that element with the tag input.

34
00:02:16,490 --> 00:02:18,230
So the first one that has the tag input.

35
00:02:18,560 --> 00:02:21,310
And then lastly, let's do one last one.

36
00:02:21,320 --> 00:02:25,100
So this is for the button because we're going to have to create some interaction for the button.

37
00:02:25,850 --> 00:02:34,700
So using query selector once again selecting the first element button on the page, save that, refresh

38
00:02:34,700 --> 00:02:37,790
it and let's just make sure that everything is working.

39
00:02:37,940 --> 00:02:39,860
So we've got our message element.

40
00:02:40,010 --> 00:02:43,280
You can see that that corresponds with that text up there.

41
00:02:43,550 --> 00:02:45,950
We've got our question variable.

42
00:02:46,190 --> 00:02:48,740
So that corresponds with that input element.

43
00:02:49,430 --> 00:02:55,490
And then we've got our button object that corresponds with the button on within the HTML.

44
00:02:55,790 --> 00:02:59,630
So we're ready to move on to the next part of this challenge.

45
00:02:59,840 --> 00:03:05,990
And that's going to be where we create the interaction with the button and get the information that's

46
00:03:05,990 --> 00:03:11,110
provided within the question and then generate a random response to that question.

47
00:03:11,510 --> 00:03:13,160
So all of that is still yet to come.

48
00:03:13,400 --> 00:03:19,520
Go ahead and set up your HTML structure, connect your JavaScript objects to that HTML.

49
00:03:19,670 --> 00:03:21,410
So you're ready to move on to the next step.