Welcome back to Web does simplified.

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 get started to get started.

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.

Like Syntex.

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.

So you should give it an I D.

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

Now we're gonna need another dip.

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

So we're gonna give these an I d.

Here of answer buttons.

This is again.

So we constructed in the Java script.

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.

And as you can see, we have a question.

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

Now we can work on Adam.

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.

This will make it so.

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.

Center our screen, as you can see here.

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.

We want to set that to H S L.

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.

So we could just say body dot correct?

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.

Correct.

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.

We want to give it this nice car defect.

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.

So let's add that box shadow.

First thing we did do type inbox shadow here, and the first property is going to be the ex offset, which we just wanted to be.

Zero.

We wanted to be the same around the entire thing.

Why offset also zero for the same reason that we're gonna come in here are Blur is going to be 10 pixels because we wanted to be a nice, faded out box.

Shadows you can see here it really fades out.

And next value the very last one.

We want to have two pixels and this is going to be essentially are spread.

So how far out from our container goes?

And as you can see, if we say that we get a very nice dark mine around the entire thing due to our spread and then a nice, blurred effect coming out of it because of our blur effect here next, we can work on style in our answer.

Great.

Here.

So it's come down, select our button grid, which is the class we applied to that.

And we just want to use display grid here to make displaying this easier.

And if we say that you see that they're gonna be lined up one on top of each other, but we want actually two columns, so we're gonna use grid template columns.

Where you going to define our columns?

We just want to say here, repeat twice because we want two columns, and we just wanted to be auto with.

We want it to be as large as it needs to be.

And if we say that we now get two columns right next to each other.

But everything's pushed up really close.

So let's add a little bit of gap.

We're gonna use 10 pixels of spacing around everything and every go spaces that are buttons.

We also want to space out our button grade from our question and our buttons down here.

So let's add a little bit of margin.

We're gonna add 20 pixels on the top and bottom and zero on weapon, right?

And now, as you can see, it's pushed it away from the top and bottom of our page.

Now, one of the last things we have lots of style is the buttons for a page.

What's come down here?

We have that generic button class, which is going to be applied to every button on our page.

And again, we're gonna do the same hue trick that we did with our body.

So it's great that you variable, we're gonna set it to neutral by the beginning.

So we're gonna say Hugh neutral here neutral.

There we go.

And we also want to come in here, and we're gonna set the background color.

So background color is gonna be a chess l We're gonna get the variable for our Hugh, and we want to set here the saturation to be 100%.

But we want the lightness to be 50 50% because we want this to be brighter than our background.

And if you say we see, we get a much brighter blue color on our buttons.

Also, we need to come in here and change our border.

So let's do that now.

We're gonna come to our border, and we're gonna make this a one pixel solid again.

H s l.

Because we wanted to match that same hue.

So we're gonna use of our of our Hugh again.

We want to come in here with this saturation 100% and a lightness of 30% because we want this to be a little bit darker than our actual color.

And as you can see, we get a slightly darker blue border around all of our buttons.

Now we can come in, give it a little bit of a rounded corner, so we'll say Border radius is just going to be five pixels.

We want to give it a little bit of padding, so it's not great.

Crunched up against the edge will say five pixels and 10 pixels just like that.

And you could say our buttons have gotten a little bit bigger because of that.

And then last we want to change the checks.

Carletto White and we want to remove the outline for a button so we'll say Outline none.

And there you go.