Name: JavaScriptでクイズアプリを構築する (Build A Quiz App With JavaScript)
Uploaded: 2021-01-14T10:41:37.000Z
Duration: 26 min 59 s
Description: VoiceTubeの動画で発音を聞きながら英語表現を覚えよう！学べる英語：

未来形

In today's video, we're going to take a look at creating a quiz application and JavaScript so we can finally figure out who the best youtuber actually is.

Also, if it's your first time on the channel, make sure you subscribe for more videos where I simplify the Web for you.

Let's look of what we're going to be creating in this video.

We have a start button, and when we click this, it's going to initiate the quiz where we have multiple options, and if we click the correct option, you see our screens gonna turn green and we're gonna get the next option.

And if we some reason clicked the wrong option, you see everything is gonna turn red.

But we still get the next option to go onto the next question.

Now, before I can answer this question that I know you're old dying of answer to, let's start by creating our index dot html file, which is where we're going to put all the HTML for application.

If we have exclamation point hit enter is going to generate the boilerplate documentation for us.

And here we could just put the title as quiz, eh?

Now, inside of the body, we're going to have essentially two main sections of our application.

We're going to have this card which is going to have everything inside of it.

And then inside of that card, we're gonna have question content and then we're going to have content for the start button as well as the next button.

So first, let's actually create this container, which is going to be our card.

We could just use a did for that and we'll give it a class here of container so we can style this inner CSS later.

Next, we're gonna put in our question container because our questions are going to come before next and start button.

So it is credited here, which is going to have an I d.

Which is going to say question container so we can select in the Java script later.

We're also gonna add a class of hide so that we know that this is hidden by default.

Now, before we add all of our question information, let's jump down to our next section, which is going to be our control section.

So let's give it a class of controls so we can style it later in our CSS and in here, we need two different buttons.

We need first a button which is going to contain our start.

So we could just say start here and we're also getting a second button, which is going to say next Now these buttons are both gonna need an I d.

So we're gonna need a I d here, which is going to say, start button.

And we're also gonna want to supply classes to these so we can just say start button as well was button.

Now we could just copy this over to our next button because it's going to be almost exactly the same.

But it's going to be a next button i d and class, and we're also going to hide this by default.

So we're going to use the hide class as well.

Now we can jump into here are question container and the first thing we need is a dick, which is going to contain our question.

Of question for selecting in our JavaScript and will default the text to question so we can see what we're working with.

This one is going to be for our different answer buttons.

We're also going to give it a class of button grid so we can style it with CSS now its creator buttons in here.

He's just gonna see simple buttons with a class of button and then we're gonna use generic answer one text in here for the 1st 1 and we're going to create four buttons so we can see what we're working with when we render this.

Now it's actually open this with Life server and see what we're working with.

Texts are four buttons as well as our start and next button.

You're different styles and are different Java script, close creative styles, Nazi SS as well as a script out J s, which is going to contain all of our javascript and CSS.

Let's make sure we include these so we're gonna add a link tag you're going to have in a trip to our style of Nazi SS as well was going to say that it is a style sheet lips style sheet just like that.

And we're always gonna do the same thing for a script tag.

Make sure we defer it so it loads after the body and we're gonna give it a source here, which is going to be script about J s actually close that off.

Now we have our style sheet as well as our script tag being voted into R H d mo and let's work on style in our elements first.

Now, the first thing that we're gonna do is something I do on every single project.

And it's going to be setting up our box sizing to be border box for all of our different elements.

So let's make sure we select all of our elements are before and after, just like this and inside of here, we want to set box sizing to be border box.

Our wits and heights are easier to style.

Also, I'm just going to set the font family here to Gotham rounded, which is a fun that you may not have on your computer.

So you can choose whatever fund that you like best now after that's done.

As you can see, our fund has been applied.

We could move on to style on her actual body because, as we remember from our previous example, here are body changes color as we select different answers.

So let's come back here, select our body, and what we want to do is we want to first remove the patio and margin.

So we're just gonna set the pattern and margin to zero.

Save that and you see everything squishes up to the side of the page, which is what we want.

We also want to make sure that our quiz is dead.

So we're gonna use display flex to make that possible.

We're going to use justify content center in a line item center in order to push everything to the center of the screen.

And we also need to make sure that our height is set to 100% as walls are with.

So it's coming here without with we're gonna set this equal to 100 view with which essentially means it's gonna take up the entire with.

We're gonna do the same thing for the height, but with 100 of you height.

Now, if we save that you see are content is dead center our screen now to set our colors.

We're actually going to use the SS variables to make this easy.

So what's come up here instead of variable, which is going to be called Hugh?

Come in here to find out like this, and we want to set this equal to variable Dash Dash Hugh neutral because this is just going to be our default neutral color if we don't have anything selected yet, as an answer on let's define that color, we come into our route here and we get to find Hugh neutral just like this.

And we want to make this a hue of 200 we're gonna be using hs l for all of our colors so we can use our hue of 200 here and we're also going to while we're at it, set up our cue for the wrong value.

So, Hugh, wrong it is going to be our deep red color, which in our case is just going to be zero.

Make sure this is a cynical in here, and also we can do a Hugh for correct, which is going to be that nice green color.

And this is just going to be a hue of 145.

And now down here, what we can do is we can take our background color, background color.

And the first thing we didn't do is get the variable of our Hugh, which by default is just our hyun neutral.

So we get our Hugh, we want to set it to 100% for the saturation and 20% for the lightness, because we want this to be a fairly dark color.

Now, if we say that, you see, we get that nice blue color and in order to change our cue between the wrong and correct version, we're gonna be using classes.

Which is going to be for when our Hugh needs to be to correct you.

And all we do is we just need to set this variable for Hugh to Hugh.

Now, if we save this going her index here and at a class two body of correct just like this, Correct.

Now we say that you see, we get the green color as our background and one last thing we need to do is just sort of the wrong value as well.

So come in here for a class of wrong and we have a hue of wrong down here and we can change our class to wrong.

And you can see the changes that that deep red color force let's remove this class because by default we want to use this neutral blue color.

When we start our quiz, the next thing we want to work on is the container that wraps all of our content.

So in order to do that, let's select our container here and let's go back so we can see as we're doing it.

And first thing we want to do because we want to set the with to be 800 pixels.

This is essentially the maximum that are with is going to be.

We also want to set a max with just going to be 80% in this way are content doesn't overflow our page.

And if we say that you see it is shrunken down to be essentially 80% of our page with next thing we want to do is we want to fly here a background color because we want this to be a white background and we also want to apply a nice border radius to it so we can come in here with border radius and this is just going to be five pixels now if we say that you see, we get that nice card effect already, but our contents way too close.

So let's add a little bit of padding will come in here, which just say 10 pixels and you could see that's already looking a lot better.

But we don't have the box shadow around it as we do here.

字幕リスト動画再生

JavaScriptでクイズアプリを構築する (Build A Quiz App With JavaScript)

essentially

content

properly

exact