In today's video, we're gonna be taking a look at making a speed typing game, which is a ton of fun to make and also incredibly educational, since it teaches you concepts such as dominant relation A P I calls timers and so much more.

So let's get started now.

Welcome back to whether to have simplified.

My name is Kyle, and my job is to simplify the web for you.

So that sounds interesting.

Make sure you subscribe to my channel for more videos just like this one.

Now, as you can see on the right here I have the finished product.

We have a timer counting up.

We have an area we can enter the text in that were typing.

It will tell us whether we're right, whether we're wrong and if we type the entire thing correctly, it's gonna move on to the next question for us.

So to get started with this, the very first thing we need to do is create an index dot html file where we can put all the html And if we just type exclamation point and hit enter, it's going to generate all the boy over a plate for us.

And here we can just give it a title of speed typing.

And then, since we're gonna need CSS and we're gonna need javascript, we're gonna need a link tag for our CSS.

And we're just gonna creative style sheet called style styles Nazi SS and then also a script tag here.

And we're gonna call this script dot Js We need to make sure we defer This is that it loads after the body of our HTML.

I have a video on this Differ, keyword, I'll leave in the cards and the description below.

So check that out if you're confused on that topic.

But that's all that out of the way.

Now we can actually move on to the HTML and inside this HTML, we need to put our timer.

But you can see here the html for our container, our input as well.

Those are quote text right here.

So the very first thing we want to do is that timer We can just create a div with the class of timer and we're also going to give it an idea of timer so we can access that easily in our javascript and for now, we'll just put in the text of zero so that we actually can see what's going on.

Next, we're gonna need a container Div And inside of this container, Div is everything in this yellow section you can see here.

So first we're gonna have a div and this is going to be for a quote display, and we're also gonna want to give that an I D, which is again going to be quote display.

And that's just so we can access that in the job a script and for now, let's just give it the text of quote so we can actually see what's going on.

Next, we need a text area, which is going to be this content inside of here.

And we want this here.

We don't really need to worry about a name.

We wanna have this say, quote input as their i.

D.

We don't need columns or rose, and then we can put a class which is going to be quote input and we'll just put a hyphen amerisource CSS like.

And for now, we'll put the content of quote inside of here just so we have something to play with and now with all that out of the way, that's all the HTML that we're gonna need.

Actually, one last thing is, let's make this auto focus.

That just means as soon as we load our page, are cursors automatically gonna focus inside that box, which will make starting the typing incredibly easy.

Now we can open this with live server by right clicking and clicking open with live server, which is an extension for visual studio code I have downloaded.

So if you don't see that, make sure you download that extension.

And as you can see, we have our timer or quote as well as our input, where we can type whatever we want inside of it.

Obviously it looks nothing like this, but we can get started on making it look like that by adding in our styles.

Does CSS, where we're gonna put all the styles for our entire application?

Very first thing I like to do is to make my box sizing to be border box so we could come in here change our box, sizing the border box, this mix working with wits.

Patten's margins borders so much easier.

And the next thing I want to do is work on styling our body because, as you can see, over here, we have our stuff in this center.

So we want to make sure our container is centered instead of our body.

So we can change this to be a display of flex and justify the content in the center.

And we can align the items in the center and then if we put a min height of 100 view height that's going to center are content as you can see, and then to make it so that our scroll bar does not exist.

We could just remove the margin by setting the margin to zero.

And that's going to get rid of the scroll bar for us now to make the background look the same as the background over here, we could just put on the background color.

I just have this copied over This is a purple li background color.

And if we say that you now see, we have that purple looking background color also are font is going to be slightly different over here.

So what I want to do is I want to select our body as well as the quote input.

So we have quote input and I want to change the font family for this.

And we're just gonna use something like this and Gil Sands here.

And if we say you can see now we have a slightly more interesting farm toe Look at its nothing amazing, but at least it's something a little bit different now.

Next, I'm gonna work on our container, and this container is this yellow color that you see here.

We want to make sure that we sent to this inside of our screen make that yellow color and do all that fun stuff.

So I'm gonna copy over that color so we can go background color.

This is going to be a yellowy color.

And if we say that, you could see that yellow color is showing up.

But obviously everything is really scrunched up, so we're gonna add a padding of one R e m that pushes everything away from each other.

Looks a lot better Already will also add a slight border radius Would issues 10.5 r e m.

Just to give it rounded corners.

I think it looks a little bit better, in my opinion.

Also, we're gonna set a default with of 700 pixels, and obviously this is kind of large.

So we're also going to set a max with and this Max.

But there's just going to be 90% of the screen size that we have never expands too far past the edge of our screen.

And the last thing we want to do is actually work on making our timer so it doesn't show up right next to it.

Here.

We want a timer to show in the top section so we can just select our timer.

And what we want to do is position it absolutely so we can say position absolute and we'll just say top of three r e m, for example.

And as you can see, that's pushing our timer all the way up to the very top of our page.

Let's actually make that two R E m.

So it's a little bit closer to the top, and we're gonna make the font size.

Huge will say three R E m.

And we'll also change the color to be exactly the same as our background color for a container.

And now if I say you can see we have this really large timer at the top and to make it stand out a little bit more.

Let's just make that fart way too bold.

Okay, that looks really good right there.

Obviously, it's not counting up.

We need the JavaScript to do that.

But for now, that looks really great.

Now, the next thing that we should probably work on is this quote display right here.

All we want to do is just space it out a little bit.

So we'll say quote display.

And all we want to do is add a margin on the bottom.

We'll do one R E m.

Let's just make sure I spell quote properly.

There we go.

That just gives us a little bit of space between our input and our actual text here that we should be typing.

It looks a little bit more pleasing, and now we can move on to styling the input, which is going to be the most complex styling for this entire application.

The first thing I want to do, they want to remove the background color here.

So we're just gonna set that too transparent and I want to set the border to be two pixels solid and issue is going to be a slightly darker version of the background color that we have here.

I just copied this over.

So if we save, you can see that it's just a slightly darker color of this yellow.

That way it doesn't stand out too much.

It kind of just blends in with the background, which is really what I want.

Also, as you noticed when we selected, we get this really annoying blue outline.

So I'm just gonna disable the outline by setting it to none.

But if you do this, it's impossible to tell that this is clicked on.

There's no focus state.

So what we need to do also is make sure we select our quote input, and we want to select for the focus state.

And here we're gonna put a border color, which is just going to be a black That way.

When we click on it, you can see that turns black.

So that way we know we're focused inside of that element.

It really just makes it easier for people to know where the focus is.

And if you ever disable outline, you really need to make sure that you highlight this focus state to make sure that it actually is working.

How you want it to next.

We want to work on sizing this.

So one thing led to is obviously make it take up 100% of.

But with that way, it's kind of fill the entire container.

We're also going to give it a height.

Will just say eight R E m That way.

It's really large That way.

If we have any large text, it'll easily fit inside of this box.

Also, we're gonna set the margin to auto.

That's just going to make sure that this always stay centered.

If we set resized to none, you'll notice.

Right now I can resize this box.

But if we set resized to none, it's going to prevent me for re sizing that.

So let's refresh and you can see that drag box is no longer here, so I can no longer resize our input, which is great.

Next, let's make its letter.

Text isn't quite so pushed up against the edge.

We can do that.

But a little bit of Patty would you say 0.5 are Ian and one r e M as you can see that already looks a lot better.

It makes our text a little bit more inside the center.

Also, you noticed that our text up here is not in line with our techs down here, so we should probably fix that and the easiest way to do that it's just set some negative margins.

So we can say margin left.

And we want to calculate this.

It's going to be our left patting, which is negative one r e m.

So we just want the opposite of this.

And we also want to subtract out our border so minus two pixels.

And now if we save that and we do the exact same thing for a margin, right.

But of course, instead of negative, we want these to be positive.

So we want one r e m plus two pixels and here one r e m plus do pixels.

You can now see that this text has exactly lined up with the text inside of our input, and it just makes it easier for more typing to know exactly where everything is gonna be.

You also noticed the font size here is slightly smaller inner input.

So we can just change our font size to be one R E m.

And that is exactly the same font sizes out here.

And now everything lines up 1 to 1, which makes it easier for the person typing to see exactly where they are.

Inside of this quote, the last thing that we have left to do is should just set a border radius so we can say border radius 0.5 r E m.

That gives us these nice rounded corners, and I think that just looks a lot better.

And that's the entirety of our CSS that we're going to need to worry about.

And we can finally move on to the most fun part, in my opinion, which is going to be the JavaScript.

So let's create that script at J s, which we already linked up here instead of her index.

And inside of here is where we can take care of all of our JavaScript fund.

The very first thing we need to do is figure out how we're gonna get our quotes into our text box here, and there's a free a p I that we can use called a p i dot quotable that I owe you go to slash random and every time we access as you are, well, we're gonna get a random quote inside of this content attributes.

So, for example, here's a quote for Do it again.

We're gonna get a different quote so we can just use that a p I So it's copy that, and we'll credit constant variable to store that you're oh, so it's a random quote, a p i euro.

It's going to be equal to that quote a p I and you'll build to get this from the get help repo linked in the description if you want.

Now that we have that done we need to do is actually get our a p i quote, so we can just create a function which we could just call get random quote and inside of this function of what we want to do is we want to use the fetch a p I with If if you're unfamiliar with this, fetch a P I.

I have an entire video covering fetch a p I.

So just make sure you check that out Lincoln, the cards and a description down below.

But essentially we just need to put in the URL for our a p i, which is this euro.

And then we want to call the dot then property because this returns a promise, and inside here, we're going to get a response object.

And to convert that to Jason, we just want to say response dot Jason, this also returns a promise.

So we need a separate then inside of here.

And this is our data.

So there's a data attributes is essentially what we see right here.