That's me playing the intruder Yankee Doodle, which I somehow remember from fifth grade.

I don't know why, but either way, let's get into this video and actually make this piano.

Welcome back to Webb.

Have simplified my name's Kyle, and my job is to simplify the Web for you.

So if that sounds interesting, make sure you subscribe to the channel for more videos just like this one.

And now, as you can see on the right hand side here we have the finished product of the piano.

We can click any of these keys, and we can also play these keys with the keyboard if we want.

Which is, in my opinion, a lot easier.

It's more like playing the real piano.

And now to get started creating this, the first thing that we need to do is we need to download all of the notes for the piano.

I have all of these in the Get Hubbard depository linked into the description of this video, but it's also pretty easy to find these types of files online and download them for free or even just record your own.

So without out of the way, the next thing we need to do is create our index dot html file socials create that inducts dot html.

Make sure it's in the root of our directory just like that.

And now we could just type exclamation point and hit Enter, and that's going to create all of the boilerplate code for us when it comes to setting up this HTML file.

The next thing we need to do is just give it a title will call a piano, and then we're going to have a style sheet as well as a Java script page.

So we're gonna need to come in here, and we're gonna want to add in a link so we'll just say link And this is going to be for Stiles Nazi SS, which we're going to create in just a little bit.

And we're also going to need a script tag, which is just going to be script out Js.

We just want to make sure that we defer this so that it loads after all of the body of our HTML.

Now, let's just create those files were quick Wolf Stiles, Nazi SS, and we have script dot Js and that's all the different files that we're gonna need.

Now we can actually work on designing the h t m o for a piano, which is actually very straightforward.

All we have are these different keys.

We have white and black, and they're going to be inside of a piano container, which is going to center it on the screen.

So what's first creative, which is just called piano?

So when we have a class of piano and we have our div and inside here is where we're gonna put all of our different keys.

So, for example, our first key instead of here, we're just going to give it a class which is key, which all over different keys are going to share.

And then next, we're gonna make this a white Keep.

As you can see, it's our white key, which is the 1st 1 Our next key is a black one.

So we're gonna copy this and we're going to put black in here and one other thing that I need to note is that we want to make sure we stay.

Which note each of these keys are.

So we're gonna put a data note on here, and this is going to be the name of the file.

Essentially, that this is linking to.

As you can see, we have a flat B B flat and so on.

And this very first key for us is just going to be our Seiki.

We want this to be on all of our days.

So it's copy this down onto our Blackie and there's Blackie here is just going to be a D flat.

What we need to do is just copy this town.

So we have the exact structure of our piano over here.

So I'm going to copy this down.

That's this key.

This key, this key, this key, this key, this key, this key, this key, this key.

And finally this key.

So what's coming here?

We have white, then black.

Then we have white full by another white key.

Now we have black fall by a white key fall by Blackie, full by weight and black.

And then finally, our one last wakey.

And as for news with D d flat.

And here we have e and we have e foot and we have our f which is going to go into our G flat RG are a a flat, sir.

And then, eh?

Then here, be foot and finally be.

And that's all of our different notes set up as well as all of our different classes for a different keys.

But in order to play these sounds, we need to have audio tags for each one of our note files here because right now we can't access these files unless their inner HTML so we can do just create an audio tag and his audio tech is going to have an i d.

Which is going to match this data note.

So in our case, this will be see for our Seiki here.

Then we just want to put this source this is going to be inside of our notes folder, and this is going to be our si dot mp three just like that, and it will close off our audio and we need one of these for each one of our keys.

So we're gonna cock it is down a bunch of times, for example, have d flat here than D E.

They have e front looks.

F you want G flat G a front.

They two more times be foot and B, and we also need to make sure that copies here.

So we have defund d e.

He fights if g flat g a flat a be foot and be sure that was riveting to watch me type.

And also, while I was typing that I noticed I had my E and E flat keys here flipped.

So it's make sure we fix that here and then we'll just change it down.

Here is well, doesn't really matter if these were in order, But it's nice to have them in the same order as What's up here now?

With that done, we have all over each team will taken care of.

As I said, it's really simple.

HTML.

It's just going to be this right here.

And if we open this with live server by right, clicking open with Live server is gonna show up on the right here.

And of course, it's going to be completely blank because all of these air empty lives and now we need to actually work on our styles to make this work.

And if you don't have this open with live server pop up, it's actually an extension for visual studio code that you can download and then you can use just like I am.

It allows it so that every time we make a change, it's going to refresh over here automatically.

So the first thing I'd like to do in almost every style street is make sure to select every type of element.

So in our case, we have our before our after and our wild card selector and I just want to change the box.

Sizing here hopes to be border box.

This just makes working with wits and heights so much easier.

The next thing that I want to do is actually set up the body so we can select our body here and we want to set that cool blue background color that you saw.

I've just copied this over.

It's 143 f six b, and if we say that you can see we get that blue black on color, which looks really nice.

We also want to remove any margins on our body.

We want to set the minimum height here to be 100 of you height.

This is going to make it so it's possible to send to our piano in the middle and then also to do this center and we're gonna use display flux, justify content center and a line items in the center.

If you're unfamiliar with how flux box and display flex works, I have an entire video on it.

You can check out linked in the cards and description below.

Now let's actually work on the piano.

And the thing that we need to do in here is make sure we change to display flex.

This way, all of our keys will line up next to each other instead of on top of each other up and down.

We want them to be side by side, so display flux is going to do that for us.

Now.

The next thing we have is our key selector, as bulls are white class and our black class here, and I'm gonna start with the white class, actually, because it'll make it really easy to figure out what we need to do in a black class and then what we have to share between them So the first thing I want to do said here is I want to set our with and in our case, I'm just gonna set the with here to be 100 pixels, and then we also need to set the height.

I'm gonna set the height to be four times the width is now we have 400 pixels and to make something actually show up.

Let's just change the background color here.

Toe white.

As you can see, we have this blob where all over keys are.

And if we want to see the distinction between them, we can put a border of one pixel solid and less issues.

This 333 color.

It's Kevin Dark Gray.

Now you can see all of our white keys right next to each other, which is perfect.

The next thing we need to work on is adding in the Black Keys and it's gonna be very similar.

I'm just gonna actually copy this code, and I'm gonna change the background color here to be black.

And of course we want to change this height.

I'm just gonna change it to 60 pixels and 240 pixels, so it about half the size of the wakey.

And we don't need the border on these because they're already black.

And if we say that, you can see our keys or showing up, but they're spaced out from each other, we want the Black Keys to show up on top of the White Keys, and a really easy way to do that is to make the margin left and the margin right B negative so we can change the margin right here and the margin left.

And we want to be the same amount of negative.

So we can just take this wit here and divide it by two.

So we'll say negative 30 pixels on the left and negative 30 pixels on the right.

And as you can see, that's made us that the Black Keys are showing up over top of our weight keys, which is what we want and to make it so that they show up over all the white keys we could just changed is the index here to be two, for example, and now it's going to show up over top of her Blackie's.

Obviously, this piano does not quite look like this piano, though, so it looks like we're missing one of our white keys.

We go into HTML here, we can see that we've accidentally capitalized this white here.

So if we know we saved that because that extra white key has shown up and we have all of the keys inside of our piano exactly where they need to be with our styles right here.

But you'll notice there's quite a bit of shared and duplicated code Between these, for example, are with is always 1/4 of our height, and our margin left and margin right are going to be half of our with.

So we can do inside of this.

Key is we can actually set the height to be based on a variable, which is the width so we can see our height is going to be a calculation, and we're going to get a variable.

So we've got to save our dash dash, and then this variable is called with.

We just want to multiply that by four because their height is four times are with and then our with is just going to be set to that width variable.

And this is using CSS variables.

I have an entire video on these.

So if you want to check that out, it's gonna be in the cards and the description down below.

Now, what we can do is we can change this with two are variable of with we could get rid of the height.

We can also do the same thing with the black keys.

Get rid of the height on.

If we save you see that it still works just as it did before.

Everything is in the right positions.

Also, we can change this margin left and margin right to be a calculation which takes into account our with and we just want to divide it by negative to essentially, we want half of our with and we want it to be negative.

So it's copy that down here, save and you see, it still looks exactly the same.

But we were able to clean up a lot of our code by putting all that shared logic in the key class and making sure we can change our with at any time.

For example, I could change this to be 80 and now all the keys resized and everything looks perfectly fine.

Other than the fact this piano looks ridiculous.

So going back here to 100 we're back to have much better looking piano.

And that's all of the styling for the piano.

And we finally get a move on to the fun part, which is the Java script where we can actually make the piano work.

Now, the first thing that we need to do is to get all of the keys as elements so we can just create a variable here called keys.

We want to do document that query selector all we want to get everything which has a class of key So we can just say dot key This is going to be all of our key elements.

Then we can loop over those so we can say keys dot for each and what we want to do is for each key we want to run this function and inside it here, we're just gonna add an event listener.

We want to do this whenever we click on the key and all we want to do is run a function which is going to call a function called play note with our key, and we're gonna create this play note function.

Essentially, it's going to play the audio for our note, and it's passing in the key that we want to play, for example, our element here.

So it's create that function, which is gonna be called play Note.

It's going to take in a key like I mentioned earlier.

Now the first thing we want to do is we want to get the audio element from our HTML here, based on the data note property for the key that repressed.

So in order to do that, we can say our note audio is going to be equal to document dot looks that get element by i d.

We're gonna pass it the i d from that data set.

So we know data set dot note is going to be equal to our I d and essentially corresponds to this value right here either C D flat, which all correspond to an I d down here.

So now we actually have our audio element inside this note audio variable, and we can just call and dot play on this.