This lesson, we're going to be setting up a magic eight ball, and if those of you that are unfamiliar
with the Magic eight ball, basically it helps you make a decision.
You ask the question.
It provides you what you should do with that question.
And we're going to be first in this lesson, setting up our magic eight ball.
So having a div with a class of message where we can output our contents back out to the person interacting
with the variables, interacting so we could output a message out to the player that's interacting with
our application.
Next, we need an input area so this can be a regular type text input.
And this is where the.
Person can ask the question, we can also have placeholder there.
So this is just regular HTML.
Ask your.
Question.
Or we could add that into the message as well, ask your question, so it's up to you however you want
to present it to the user.
So we've got ask your question.
And then lastly, let's create a button.
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
text in here.
Save that.
And it looks like we've got too many.
Ask your question.
So I'm going to just shorten this to question ask your question, and this could just be ask so we don't
have too much repetition.
So ask your question, question, ask.
Next, let's set up our JavaScript using our variables or set up an object that contains the element
information document query selector.
In order to select elements that are available within the HTML, we're going to select the element,
the first element of the page that has a class of message.
Place it into our object with the same name message.
Also, we need to get values so we can set up our value for our question using document query selector,
we can select that element with the tag input.
So the first one that has the tag input.
And then lastly, let's do one last one.
So this is for the button because we're going to have to create some interaction for the button.
So using query selector once again selecting the first element button on the page, save that, refresh
it and let's just make sure that everything is working.
So we've got our message element.
You can see that that corresponds with that text up there.
We've got our question variable.
So that corresponds with that input element.
And then we've got our button object that corresponds with the button on within the HTML.
So we're ready to move on to the next part of this challenge.
And that's going to be where we create the interaction with the button and get the information that's
provided within the question and then generate a random response to that question.
So all of that is still yet to come.
Go ahead and set up your HTML structure, connect your JavaScript objects to that HTML.
So you're ready to move on to the next step.