From Sketch to Symphony: Design and Code a Playable Piano with Figma, HTML, SCSS, and JavaScript

hi my name is madis bushakis and in this design and programming tutorial we will try to create a digital piano from scratch first we will start by doing the design in figma and then we will do the coding when it comes to the coding we will start by creating our semantic HTML then we're going to do the styling uh with SS and for the last part We'll add interactivity with vanilla JavaScript the end of the tutorial you will be able to use your mouse to play the musical notes or your keyboard apart

from that I'll be sharing uh the code on GitHub where you can download it and run it locally so you could follow me along as we progress if you stay with me until the end I promise you that you will learn a lot of tricks when it comes to design and in particular when it comes to styling and coding so come along and let's start doing the digital Pian [Music] so yeah let's start the first part will be Focus um on how to design the digital piano so I have already open a figma file let's name it jus

t for the brevity let's create a digital piano tutorial then I have already Google an image of a digital can know so I'll copy paste it here and then since we don't have to create it from scratch we can copy paste the dimensions from from a digital piano let's try to recreate it so I'll create a frame I think uh the correct dimensions are like 595 and the height um 5 550 so great now that we have um our frame uh let's try to add a layout grid and figma supports this so let's click the plus icon

we want to change the settings to be column so I'm going to select it to be the value here to seven since we have H seven uh white key so that's our max value we want the type to be Straits in order to expand um to% width of the frame or container and um I don't think we need any space between the keys so yeah there you have it we have um our first uh grid so now that we have the grid um system with our columns ready uh let's try to create uh the white case so I'm going to select a rectangle the

n it needs to fit the height and the width so let me make this 85 because that's the correct Dimension um we need to name the rectangle to be a y key because we need to make this a component so now I'm going to make it a component and then the next step is to duplicate it seven times while holding the shift key so this is three times four 5 6 s now that there is a component let's make it um to have a border just to look U more like u a key and uh yeah I think uh that's that's it for the white ke

y the time has come to to create the black key so let me select a rectangle I'm going to draw it inside here as you can see it's uh duplicated or mirrored multiple times and that's because we have it inside another component which is a white key so let me drag it outside and now it's there one time I'm going to name it black key and uh let me make it look like a black key and for um the last part we need to create uh the Border radius for the bottom left and the bottom right and obviously we nee

d to make sure we have the correc uh dimensions and when it comes to the width it's 55 and when it comes to the height is 360 let me close the border radius panel so it's time to make it a component as well now we have to position it properly based on our design so the first uh key is um 53 pixels from the x-axis or from the left and let me duplicate it to create the second one the second one should be 180 uh the third one is 302 let me go for the fourth one it's going to be 395 and for the last

one we're going to have it 492 as you have noticed there are not a center in the middle and that's because um the creators of the piano uh have uh decid that um when it comes to the geometry uh they're not going to be Center I'm getting excited because I'm going to make the Blacky 3D and the white key later on 3D as well let's move first with the black key I'm going to go to the core component and we need to add a few effects and when it comes to the first one it has to be an inner Shadow and w

e're going to change the color I'm going to make it to be a little bit gray so I'm going to make it 8989 and it needs to have 50% opacity let me close the color when it comes to the rest values we need to increase the spread so we're going to make it 62 and for the rest we're going to make them zero now we need to add another it's going to be again an inner Shadow and this time we have to make it black it's already black let me open here but we will make it 50% opacity and when it comes to the o

ther values we need to add minus 11 so as you can see it already appear from the right hand side we need to make the player a bit more just to fill in better with the surroundings and for the last part we need to add another in a shadow but this time from the left as you have guessed so this time it's going to be 11 and again we need to have the Blair 10 and let's change the opacity to to match the previous one which is going to be 50% and let's change the way to be minus 19 because it's going t

o Black from the bottom let's let me close this one and as you can see it starts to look uh 3D amazing now it's time to do the 3d effect for the white key so let me select it we need to decrease the height a bit so let's make it 5 to 7 because we're going to add the rectangle at the bottom so let's do it right now around 25 pixels lets out the stroke as well perfect effect and let's move it a bit higher and let's match the fill color and let me to select it and then I'll select it again and I'm

going to use a plug-in I have installed um the perspective toolkit which you can f from the plugins and figma it's free and we're going to rotate it a bit on the left as you can see it already looks 3D but there is an issue um it doesn't show on the left hand side so we need to select the thread and then deselect uh the frame I mean the clip content and it looks perfect the only thing that remain is to add the wide border on top and that should be it so we know that figma doesn't support multipl

e different U border colors so we need to create the white layer as we said so let me create a group here because we're going to have multiple elements inside and um I'm going to select the rectangle and then I'm going to make this uh three pixels push it further down and we have to make it white and as you can see we have to zoom a bit just to find unit and a little bit from the right we're going to remove the some pixels and now that I zoom out uh the piano looks ready and we should go and sta

rt coding it's time now to start the coding so I'll show you how you can download um the code from the G repository how you can running locally and how you can do some code changes but bear in mind that uh you have to have a node installed and um that should be the only prerequisite so let's see how you can do that want to download the project um you will find underneath the YouTube video in the description a link that goes to the repository so since I'm already logged in and I have added an SSH

key I'm just going to copy paste um the origin or repository I'm going to go back to the terminal and I'm going to make a new folder called projects and inside there I'm going to clone a link just copy paste and I'm going to press enter so this will download the project locally and will create a folder called digital Cano so let me go inside there and since I want to use um Visual Studio code I know that if I do this it will open the code inside the visual studio code so as you can see now it's

opened and then I'll try to use the terminal from there because you might prefer to do this great so what we want to do now is we want to do mpm install or if you're using yarn you can use yarn install and then inside the packet Jason file you can see we have the scripts so I'm going to use the dev script so if you want to run a script you can use here run and then I'm going to use the dev script and this would run the browser and you will see the final result so let me go back and let me chang

e the the brand so I want to start from the beginning so there is a branch call Branch call Project start and this should uh start with initial state so this is not the final result so if you want to follow along make sure to check out the project start and and uh if you want to see the final result you can check out to the main Brands I think uh yeah that concludes how you can install locally and run the [Music] project make sure to open Visual Studio code or your favorite code editor in our ca

se as you can see I have opened Visual Studio code and created an organized folder structure press to begin let's have a quick look inside our body uh we're going to start by creating our container I'm going to use um an HTML 5 tag Main and uh inside there we will add a section tag then we need to include um the classes so the container will have the class with the name piano and the the section uh if you remember from the design we're going to have the diatonic scale class so now that we have o

ur container ready we're going to go inside it and we will start with the white casys and then with the black keys so let's start with the white keys I want to add a comment as well just to differentiate them so I just press a hope key which turn the text into an HTML command so we're going to start by creating a div element but as you have probably guessed a div is not the best uh HTML element so we need a button because button denotes in direct active element and we want to press the keys or u

se our keyboard and that communicates to the browser and the assist of technologies that this element is intended to trigger an action when click or press so let's convert this to a button and then we need to add the class name so this is a key and the variant is a white key and then we will add um a data key attribute so let's type it and the value is going to be C4 um this is needed for JavaScript to ident identify the nodes but don't worry right now we will explain it later on and then we nee

d to add um some area labels for the users that um cannot um see so we will say that this is note C and then press a to play this note apart from that uh for the users that are able to see we need to add a hint so the hint is the key that they have to press for the keyboard if they don't want to use a button and that's uh should be how we create uh our white key so now let's do the same for The Black Keys um let's say The Black Keys HL comment and again we're going to use a button and when it co

mes to the button we're going to use a class again it's type of key but the variant is black this time and obviously we need again a data key and when it comes to the value this time we're going to use E before and we're going to have an area label and we will say this note is a plot press W to play and then we need u a hint I think we're going to make make it a span with a class of hint and we're going to do the same here and class hint and that should be it when it comes to the black key and t

he white key for the last part we will try to enhance a little bit more the accessibility which is crucial uh for people that have disabilities so when it comes to the class we will add again a rare label so let's add it and for the value we'll say that this is the middle can Keys apart from that we need to add for the White casys and The Black Keys an area press value which denotes if the key is pressed or not let's do the same for The Black Keys and now I'll try to copy paste um the keys for t

he white and for the black because right now we have only one key white and one black key and we need to have seven white keys and five Black Keys so let's do it so instead of doing it together I have already paste The Black Keys and the white keys uh just to save some time so as you can see they have the same class but different uh data key and label values so we have H five Black Keys now and we have done the same with a white key now it's time to do the stylings so we're going to use SS like

we said in the beginning and uh in particular we're going to use scss instead of using U vanilla SSS or SAS variables I'm going to use a lot of SAS maps in order to make our code modular if you have any questions um feel free to ask me in the comments and I will reply but um if you follow along um it should be straightforward in some ways so let's start uh doing The Styling and then we can start doing the JavaScript let's start by going again into our c RC folder and we will create a new folder

this time we will call it Styles and then we will start by creating a few folders so obviously we need to have our main F manifest file so let's call it Main scss and then we need to have the base folder where we're going to add um sty a Target HTML elements then we're going to have a components folder for our components we are using this Mac scss folder structure so I'm not going to explain it for this video but if you're interested I'll leave a link below and then we're going to have the setti

ngs and our functions folder so before we start creating a components we need to find out uh our design token so we need to see our design and try to figure out what are the colors the typography the spacing and other values that's super important if you want to create a modular scss and ensuring that U we're using a single source of Truth usually when it comes to design tokens we add them in the setting folders and for every folder that we create we need to have a single manifest file which we'

re going to call it index.css there we can create uh our variables and we can import this file into our manifest file so let's do this so now that we have imported a variables um file into our manifest index let's start uh creating our variables so we will create a type of variable which is called an scss map that can contain and group multiple variables together under a single name so let's start we will start by creating our theme and that's how you create um an CSS or SS m we will follow a ke

y value pair so the first the primary is going to be the key and then the color which going to be black will be the value so after this mini explanation it's time to go back to figma we need to find out all the colors that we're using and we're going to start with the white key because that's what's repeated the most here so let's start with the y key as you can see if we go to the fill and we select the style um then we can add um the style so this is going to be part of the colors and we have

to name it a y key and then we can create the style so now you can see that um inside the colors we have the white key and you can see now instead of having the background color let me select again we have the style here when it comes to the white key we have um the top border as well let me zoom in a bit so we need to add this one because a different color so again I'm selecting the Styles I'm going to click the plus icon we want it to be part of the colors and I'm going to call it um y key bor

der and this is added to the colors and again it's add it as a border so let's do the same uh for the Blacky now let me zoom out a bit so I'm going to go inside here as you can see obviously we need to add the black color so let's go here creating new style it's going to be part of the colors and we're going to call it black key apart from that the black key has uh a few different effects but the thing is uh we cannot add every different color but we can add to the Styles it's like the shadow ef

fect so we're going to call it black key shadow black key Shadow so now that we have uh figured out all the colors that we need let's try to create a style guide and then we will convert this into code now that we have added all our colors uh in set our Styles it's time to create our style guate I have created another page here but if you want you can click the plus icon and you can create a new one so let's go to page two where we can have our cell gate I'm going to create a new frame uh we're

going to call it a Stell gate obviously we can name the page as well and then for the fill color I try to add a color that is not white or black because we have white and black and I'm going to select a rectangle and then from the Styles I'll select the first one which is a white key I'm going to press the alt button just to duplicate it and then again we're going to do the same so this is a border we have another color and this is going to be the pl key and let's not forget that we have uh um t

he shadows as well for the black key but this is part of the effect so going to click again the style button and we have the black key shadow um for some reason yeah so this is the correct size so I think um now that we have our style gide ready we're ready to reverse engineer and start working within our S one great thing about the new figma version is that you can switch to Dev mode and this is available to the new open beta version so let's you inspect values so as you can see uh in the code

it acts like uh the dep tools it produce the value as a CSS 3 variable and if you don't want to use a CSS to viable you can still copy paste the hex a decimal color value into your cboard and you can put it into your ID so I'm going to switch back to to our Visual Studio code so now that we're biking visual the code we already have our colors so I'm going to copy paste them essentially we have uh four colors as we show from the style gate now that we have our colors or our theme we're ready to c

reate our piano again this is going to be a SS map um we will try to identify more details there such as width add the cas and add their color the height again and the width so I assume we need to go back again in figma so let's go so now that we're back in figma we need to go again to the first page where we have the piano for the piano we need to get the width which is 595 pixels and the height which is 550 then we need to get again I suppose the width um for the y key which which is going to

be 85 uh we already know the color and then we need to do the same for the black key so the width is going to be 51 and the high is going to be 360 so as you can see uh we have created now the c key so let's go back to visual studio we have the width which is 95 pixels we have the height which is 550 and then we have the keys and inside the keys we have the black key and um we get the black color from the theme and then we get uh the white key from the theme again and we have the width here and

I think that concludes uh our piano SS map so now since we're using map. getet um we need to we need to use the new synex for SAS so we need to import SS map and this should be it for the next step uh we need to go inside the base and we can add our Global styles there usually there you have styles that Target HTML elements I'm going to use Roboto so this comes from the Google phones and then for all the elements we want to use box sizing border box and for the body uh when it comes to the phone

again we need to use Roboto so let's add it Roboto and some serif as a fullback now we're ready to add uh styles that affect the layout and um produce class names so let me create a new component we're going to call it dionic scale and inside there we will add the Manifest file so let's call it index of scss um and then let's create a class name so when you have a component you expect to have a class name that is the same with the folder and inside here I'm going to add the properties that we n

eed so let me try to copy paste them so now we have created our first component which is essentially our container for the piano handle for the next part we will try to create uh the keys um so let's go back to our components and create a new folder and I'm going to call it this time key and we don't need to have like a black or a white key because um black key and white key are variance of keys so we're going to keep it as a single file again let's create our index. SSS file and um we're going

to add inside here a key and inside here we need to have like we said a black key and a white key and as you know because we're using SS um this is going to be like U key black and this is going to be key white so I guess it's time to open our local host and try to see uh how the layout is affected when we do our CSS changes but before we need to do that we still need to add uh a little bit of more files um in order to be able to run the server so inside our CRC I'm going to copy paste um our as

sets and there we have all the piano notes and that's going to be needed uh because we load them with the web pack uh when we load the page and then in for our components I think we're missing a single uh import file or manifest file so I'm going to create it and then we need to import and then we need to import the container or the atonic scale it doesn't matter uh in which order we import the files because we're using modular CS approach so so we don't have any namespace conflicts apart from t

hat we need um an index file for JavaScript H in order to to run everything so we're going to create an index.js file and inside there we need to import our main manifest file scss so now we're ready to open the terminal so let's use internal terminal that uh Visual Studio code provides and works with our operating system so we need to run it with mpm and mpm expects to use run in order to run the scripts and then we need to find the script or the identifier for that script and in our case it's

Dev so I'm going to type Dev and then press enter after I press enter the local holes will try to run and the Chrome window will open so let's see it in action as you can see Chrome has open and there is an issue but let's try first to split the screen in half just to observe everything great so let's figure out what's the issue so cannot resolve so there is an issue inside index.js so as you can see is is inside Styles and it should be inside the root SRC folder so let's move it first we still

have an issue which makes sense so we need to reference uh the Styles and then we need to save it so as you can see on the right hand side um the file works so now we're ready to go back into our components and go back to our key and start coding the y key let's see if uh everything is working properly one thing to one easy trick to take it is let's add like a background and let's make it red and save the file but I don't see anything changing on the right hand side so let's inspect to see if th

e class is there and figure out what's the issue so as I can see we only have the button styles from the user agent style so our classes don't apply let's figure it out why so we're importing the files within the components and when it comes to the main man main manifest file we have no import so here is the clue why we're missing it so we need to import first um the settings which add no Styles and then we need to import the base which which CHS our HTML and then we need to import our component

s and let's see oh now we can see that um a lot of stuff change so we have uh we see the background of red for the white keys so let's go back and let's uh start uh coding our first component so now that we have everything working it's time to toggle the terminal because we don't want to see it and um let's toggle the file explorer as well in order to have more space all right so let's start so I'm going to start create adding the background color so going to use the map G so we need to find the

map we know that all the colors are inside our theme and then we need to find the key that we want to get the value out of so in this case we need to use the secondary key and as you can see the color uh has changed from red to F5 F5 which is um not exactly white but um a little bit uh slightly different um then let's uh add our height to be 100% and we need to add um our width as well but before adding the width I think I I prefer to use the mop kit so let me explain what it is so we're going

to use the use and then we're going to say get me from sess the module map and then we can go here and instead of um D we can use map dog now we can add um our width as well now that we have the height so let's use um uh something similar so again we need to get the width from the map and this time the width is inside the piano and We Know It exists inside the keys and then we need to go to the white key and get the the width from the white key let's try to inspect the the width we expect it to

be 85 but um when it comes to computed Styles let's see how it is right now let me try to find the width and I will try to increase it a bit bear with me so the width for it is now 77 but that's because um The Black Keys are position position in the flow so we need to get them out of the flow so let's say if we make them position absolute this is going to work out and as you can see now we get the correct width so let's go back to our Styles and continue to work with the case so for the next thi

ng uh we need to add the Border because now it gets a border of the button and we want to override this thing so again we need one pixel solid and for the color we need black so we're going to go the theme sasap and we need to get um I think the primary now let me try to put the Black Keys at the top because now uh we can see them in the middle so let me put them there just for now and for the next part uh we need to create U at the bottom of the key Keys uh the 3d effect so for that one we're g

oing to need um an after Sho element and we need to use a position relative for the par technique and the position absolute for the children just to position it obviously the most important thing when you have a sh element is to use the content otherwise there is not nothing um displayed there all right so as you can see there's nothing on the right hand side yet because we hav add the dimensions and the colors so let's start with it so for the wig we need to contain 100% of the parent uh for th

e height we need to make it to pixel and for the background we need to have the same color as the part Cent so again going to go into themes and we need to get uh the secondary color apart from that we need to position it at the bottom but at this time it needs to be outside of the Parn so it needs to be bottom 20 pixels and then let's position it a little bit on the left so let's add minus 3 pixel so and we need to add now the borders so we need to add the Border top actually let's add the Bord

er first so one pixel solid black and then let's use again the maps because we want everything to be modular so map. get them and the black color is a primary one and we need to overwrite the Border top so we want this to be white and let's make it to pixel based on the design and let's get it again so the white key is a tertiary you I wonder why we're using um primary tertiary secondary instead of using black uh or using green or using whatever color is there this is a good practice because in

the future the design might might change so we're using um names that don't Define how the style looks obviously you know that the piano is always the same but um if if someone in another let's say you working the same thing and someone wanted to change it then with this practice you wouldn't have to change the code but just the reference value within the sesap so now we need to transform it um just to make it look 3D so I'm going to use a cube property and we're going to make it 350° and let me

show you how it looks like in the browser so let's go in the after effect in the after sh element and as you can see uh we use uh 350 instead of zero so we go from the left hand side and 350 adds the effect and I think um we are done with the white key but we're missing one tiny thing so if you remember we had um the hints and as you can see they're positioned in the middle so we want them to position to be positioned at the bottom so let's try to do this uh let me go inside the work key and cr

eate another class which reference the hint um so as you can see again we have the hint which belongs to the key white so we need to make it position absolute uh let me save it uh and then we need to have it at the bottom and um I think um that should do it for for the hint so let's see so far what we have created it looks like um the y key is close to design and it has a similar look and the next part is to style The Black Keys so let me close the white key and now we should try to focus with b

lack key and now we're ready to start adding the width and the height so we's start with the width um we're going to use again the map to get and then we need to go inside the piano where we going to get the values there so we need to that we need to go inside the keys and then go inside black key and then we need to get the width as you can see uh the black key has Chang Dimensions when it comes to the width and then we need to do the same for the height so I'm going to copy paste this and goin

g to change this to be height so now instead of adding the background to be black um we need to use a book Shadow instead so we need to go back to figma uh I'm already in the dev tool in the dev mode and as you can see this is a beta so let's try to copypaste the Box Shadow and go back to visual studio code so I'm going to copy paste here save and it's not exactly the same as a design so let's twick it a bit I guess the tool needs to be a little bit improved so it doesn't match it exactly I want

my color to be black and I want the opacity to be 65% I think that's uh very close to the design so let's go and change the code here to reflect the changes rgba accepts a variable or assess map here so we can use the map. getet so we need to get a color and we need to go into the theme and then we need to get uh the primary which is a black one and obviously I forgot to change the opacity so this can be 65% so yeah I think it looks very close to the design so the next step is to add the the di

mensions or the positions for the keys so let's go back to the design again um so as you can see the first key it's uh 53 from the left width the second one is 14 8 third one is 302 and so on and so on so I'm just going to copy paste the values those values back to the to the code so let's go back and let's do it together so now we need to position them but before we do let's service the little bit our markup I'm going to go to the template or for some reason uh one y key was commented let's un

comment it and refresh it so as you can see the keys the white keys are the first one and then we have the Black Keys without a different container so the only way to Target them let me close again this one is to use something like um n child and then since we have uh seven y keys we're going to start from eight so let me copy paste um uh the values that we found out from the design as well and as you can see um they are positioning position exactly how they look in the design so the only part t

hat remains is to fix the hint so let's do this as well so now we need to sty the hints as well for the users to be able to figure out which key the will press on the keyboard so for the color we need white so we're going to use map. get again we need to go to the them and then we need to get the tertiary let's save this one and then I think I need to position them at the top so let's use position absolute so top 20 pixels uh left zero and then Tex it to be at the center but we need to add some

width in order to occupy the container and I think that covers the basic layout we only missed um The Border radio so let's add it so we need to have like zero at top um zero at the right and 10 pixels at the bottom left and the bottom right and we need to remove um the border from the bottom Style as you have guessed now it's time to do the final part which is the vanilla JavaScript part in this uh part I'll try to use some modular patterns so we will create the piano as a component and we're g

oing to use the module pattern and on top of that we will have a lot of events so you will learn a lot of techniques how to manipulate the Dome and how you're going to work with events and um in the end uh obviously you will see how you can use your mouse to play the piano notes and how you can use your keyboard to do the same thing so yeah come along and let's do it we have reached the final part of our video so if you have made it so far it's time to learn how we can add interactivity and code

the functionality with our JavaScript as you can see we only have a single Javascript file so far which we are importing our Styles and because we're using weback we're using a dynamic import and weback knows how to compile it I think we need to add a Javascript file or folder just like we have with the Styles just to separate the concerns and inside here I will create our first component which going to be called the piano do JS and uh we're going to create a function or obviously we going to c

reate it as a piano and I'm going to use the capital P as a first character because U this is going to be like a constructure function um meaning that um we can reuse this function somewhere else let me add export the operator as well because we will import it in a different file and um now we can create our first function inside which going to be a play note um with lower cases time so this are function and inside here we're going to pass um a single note as our parameter so we're going to use

um the HTML audio element it's a web API that allows you to dynamically manipulate um audio file so you can play you can pose them and it's going to help us a lot um with this um web application I'm just going to close it now and I'm going to increase the visual studio code to uh contain 100% of the width and we're going to start coding so we need um an audio file just like we said it's going to be new audio and then uh we need to reference the assets folder I'm going to show you where it is and

inside there we have uh audio files and we're going to use interpolation and we're going to pass the note as an argument there and we know it's going to be an MP3 file so let me show you uh we have the assets and here uh you will find all the piano notes reference where you can use them depending on your key bindings or your markup you can say that we're adding all those audio files with the webpack so we have like an MP3 config uh loader that injects everything inside our HTML document if in c

ase you were bordering so let's go back so we have the most important thing is to be able to play note and then now we can do audio since we have created a new object with a new keyword audio do playay and that will play the corresponding note that will pass here as a argument our function play note will be used when we have a click event so when we using our mouse to play a note and um we won't to use a keyboard uh event so you can press your keys and on your keyboard and you can play the note

so we want to create um a keyboard map with the notes that we want to play so let's C create an object so this going to be an object as we said and I'm going to copy paste inside the keys with the corresponding values just to save some time so when it comes to the white notes uh you can use on your keyboard a SD and so on and you can use the top Keys the q w to play The Black Keys I think we can export this file later on but um let's create uh the function to play the keys so we're going to crea

te a function Again Play note to by key or we need to pass um our key and then inside here we're going to create a constant we're going to say data key and this based on the key event so you press a or S is going to pass uh from our Dome um the M3 reference in order to play the sound yeah I'm not sure if that makes perfect sense but we will see it later on so I have to use the keyboard map object and inside there we will pass uh the key which will look up our values it's like a look up a table o

r a look up variable and then if we have that key we will play the note by using our our function that we have defined here so as you know this has one parameter so we need to pass one argument and we need to return because we not going to create more functions we're going to return an object and there we will pass by reference our functions so play note comma play note by key um what can I say this is like um a module let me put it here it's like a module pattern and um it help us exporting an

object or an array usually and organizing the code andul the functional it and I think um this is our component uh our piano component what we can do is we can export uh this file um and import it here again so let me create a a new file and we will call this um bsjs and inside here we will include our previous object and we will export it go back and we're going to remove it and we're going to use the import and um we're going to pass it inside here and um yeah we're ready to go we are not goin

g to add any more code here so it's time to import it into the main index file so we have the Imports at the top and I'm going to import the piano and then we had another file that we separated and we're going to have the keyboard map as well so now that we have um I import them here let me create a new constant I'm going to name it digital piano equals um piano and I'm going to invoke the function and uh as you can see this function returns an object and has two functions the play note and the

play note by key so thisal piano now has access to those functions and we can use them like this like play note or play note by key I guess it's time now to get the notes uh from the Dome let me decrease U my ID again and reveal the piano uh why we need the to get the notes from the Dome because um we doing web development and um we want to get the notes when you do some events but before we do the events I'm going to go to the console and I will try to get most of the notes so I'm going to use

a document I'll say cury selector all and then let me close this one so we want to get a class so I'm going to use a DOT so let's get uh the white key um so it's going to be white or key white and then we want to get the key black of course we need to add the dot because we want to get CSS class so now let me open the list it's an array like list so let me see we have all the white keys and we have all the Black Keys and we ready to copy this code back here I'm going to increase again um the ID

and I'm going to go here and I'm going to copy paste this code and we need to add this into a memory location or a constant and I'm going to name this piano his as you show before we start coding our events We There is a smart way that we can optimize how we can map further the piano keys so right now when it comes to the piano keys we're getting all the elements but we are not directly associating each key with the element May sounds a bit confusing and it's Advanced technique but uh let's see

how we can replicate this technique and explain it further we already know that um piano keys it's a nod list so it's like an array leg which is indexed so if we use a spread operator and we get the node list from here we're going to create a a JavaScript array and then we have access to the reduce method and as you know the redu method um takes um a call back and the last parameter takes the initial value as you can see but we want to return an object so let me pass um what the Callback expects

expect the accumulator and uh it gets the item so let me save this and let me make some space we need to create inside a variable called key and since we have access um to the elements and to reduce um Tak them with the item we will use the item and then we know that um we have the data set which is um how we setting up the notes and then we're going to get the key then we need to create add the accumulator and dynamically create uh the key and we need to associate this with a node item and the

n we need to return the accumulator if you're scratching your head then I would say that's normal um and I'll explain how it works that first we need to add the result that is returned to a new constant and I think I'm going to call it um UI because we're doing with u with UI note key bind and we're going to put it the object or the dictionary say here and let's say that this a map just not to be confusing and then let's go to the browser and I'll show you how it looks like okay so as you can se

e we are getting the note so those are like the files that we want to play and we're associating them with the node elements so instead of using let me clear it again instead of using the piano keys since we saw that before and go inside here and try to find [Music] um instead of going to the data set and try to find the key we're optimizing and casting the process in order to use this uh later on with our events so we don't have to cury the Dome again and again I hope that makes more sense righ

t now so let's go back to our editor let's create something more exciting the logic let's add some interactivity and let's create our F first function uh that is going to play our note and we're going to hear a sound so let me increase a little bit the panel the IDE there's a gap and let me close the left hand side just to have more real estate so I'm going to create a function uh handle Mouse down it's a good practice when we have events to use the word handle and then describe the event and th

en let me change this to be an event because some people might be confused if they see the sance index you can name it as however you want but usually you name it as an e or as an event so we want to get the note from the UI so we will use the event then we're going to use uh the current Target when you press um your mouse down and then we going to have access to our data set or our HML 5 attribute and we want to get our key which is our note and we want to make it to lower case and now we need

to use our digital piano uh if you remember we had two return functions there so we want to use the play note and inside there we're going to pass our note and now I'm going to save it I'm going to refresh and I'm going to try to see if we can hear the not so let me see oh there is nothing happening well it makes sense right we need to add the event into our Dome so let me go again and let's get the piano case that we already have uh let's use a 48 because it's a collection uh so we have multipl

e node lists and then inside inside there we're going to pass the key and we're going to say actually let's call it like a node makes more sense add event listener Mouse down and then we're going to pass our function which is for function reference so let's save and give it another try let's see oh so now we have the notes but as you can see there is no animation happening so let's fix this I mean we press the black key we press the white key but we don't see the Press state that um we try a cod

e with the CSS so let's go back to our code and then we are back to the function definition of the event and we need to add uh a class so let's do this so we're going to use the event to access the node and then again the current Target and this time we're going to use a class list and we're going to add and it accepts a string so we're going to add the class is pressed I think uh yeah let's give it a try so when I click as you can see we have the animation happening but obviously the animation

is not removed so it's the same for the black and the white keys um if since we have like um the Mouse down it happens when we click but if I release the mouse we need another event and this event it's called handle Mouse up which essentially is when we release the mouse so when we release the mouse we want to remove this uh class so let's do it that seems like easy I suppose so we have access to the event again current Target uh class list but this time we need to remove the class and we will p

ass the same class is pressed um obviously inside the for it we need to add for all the nodes the new event that we have so let me copy paste this one and we're going to say that we want to use the mouse app and as for as our function we want to use the mouse up let me copy paste it this will be better and then let's see and test the hypothesis is it going to work or not so I'm pressing the D I'm holding my mouse and now I just release it and same happening here and if I release it quickly it lo

oks more natural and if I hold it it works with the transition that we have and the same for the Blacky I think it looks [Music] amazing but we have uh another issue let me show you what I mean so when I click and I S and I don't release my mouse so while I'm holding it I go to the next key and just releasing it the class is not removed and why is that whenever we trigger an event outside of the notes right now the event isn't registered so right now because we used uh the mouse up event which m

eans we were holding the mouse and we release it outside that's what uh it's expected to happen with JavaScript so because we care about quality and making a very good application we can fix this by doing it and handling the removal of the class in a different way so let me show you how to do this we're going to do again another function that deals with events so we have to use the handle and then we say that's related to the document and it's a mouse app event just like before and we know we wa

nt to add a function and inside there we have to Target the the piano keys so we're going to use the piano keys and then we're going to use the for each method that loops and we're going to pass an element inside there which is a key the piano key and then we need to save for the piano key we need to remove let me remove before that we have to use a class list as well so for the class let's remove the is pressed and let's see if this works and now I'm going to release it it doesn't and that's be

cause we didn't register the event so let's register sorry guys I'm messing around so document add the event listener and then again we have to use the mouse app and coma and then we're going to pass uh the document function for the mouse up so let Let's test it I'm just pressing it and then releasing it oh there is an issue there is an undefined um right let's see where is this yeah because I have the class list twice so let's test it again and now it works and now it's time to code the final p

art which is the keyboard events to play the piano so let's go here our Mouse events and let's try to create uh the logic so we create a function again we're going to use the handle and then this time we say document and then we'll start with the key down and then inside the function we will pass an event and we will try to get uh the keyboard input so whenever someone press a key we have to get the key value so we'll use the event do key and then we will convert it to lowercase because it makes

a life easier and um we need the node as well so after we get U the key that we press on the keyboard we need to map it with a keyboard map and then inside there we need to to pass the keyboard input so in this case we will know which note um to play and we can pass it to the digital Cano playe method apart from that we need to get the node uh or the HTML element and um we need to use uh this casing mechanism and again um as you can see we're passing the note this time and we can say that if th

e note exists then for the specific HTML element we can add um the class list or the class of this press name and obviously we have to play the no so let's try to do this so we're going to use from the digal piano play the play note method and inside there we will pass the note let's see if this going to work so I'm just going to press a on my keyboard obviously it doesn't work again because we need to register the event so let's go to the document do add event listener and then we'll save for t

he key down event uh let's pass inside there as a reference and let me copy paste the method handle okay something went wrong here let me do it again so handle document key down so this time it should work so let me put the focus here and try to press uh my a key as you can see I can play multiple times but then again we have the same issue which is fine we know how to fix it this time so what I'm going to do um just going to copy paste this uh function again and then we're going to name this uh

app so handle document app and what we're going to change this time is we don't want to play the note but um the note but we want to remove the class and then then uh we need to register again the hand listener so we going to use key up and we're going to use our new function and let's see now if I press again the a I and I release it we can see that it works perfectly so let me press um a [Music] see note and yeah I'm pretty happy with the result you can still say that uh we can further optimi

ze uh the logic because uh both of them are sharing um repeated code so let's do that as well I'll try to create a new function which we're going to use for both of them I think I'll name it find note and and node from keypress yeah I think uh this name is a bit uh long but it's very cretive so again in say here we're going to pass the event and I'm just going to copy paste what we have from here because we want to use this function as our utility function and then I'm going to return an object

since we want to return M stuff no not or node we could use like an array as well but uh the order um the order is important when we destructure it so in this scenario I'm just going to use an object which makes our life easier so I'm just going to remove uh the duplicate code here and what we do is we're going to use a constant and then we'll use the distractor index so we want to get out of the function that we're going to call the note and the node variables and then obviously we're going to

call the function and yeah we're going to pass the event as well and we will do the same for our handle document key up function Let's test again the code to see if it's working it work as expected and obviously we can optimize it further but um I think um that's pretty good uh foundations for you to start and expand the code base if you need thank you whoa I'm impressed you managed to stay along with me with such a long video tutorial I know it's not easy to watch sometimes such lengthy tutoria

ls but uh I think you can see the value that you got out of the video so now it's time to subscribe and like or dislike it as well put your comments below and let me know what worked for you and what would you like to see for the next video thank you