Conquering freeCodeCamp - Build a Drum Machine - Live Stream #31

hello and welcome to the third project of the front-end libraries projects so far we built random code machine and the markdown previewer next up will be the drum machine if this is the first video you're watching in the series we are conquering the entire picket camps curriculum and now we are at the project section on the front end library certifications alright I'm going to build this drum machine probably using the app I'm going to try to see how it goes with react and bootstrap to add a little bit of or oh well let's do our own custom CSS this time the previous two project we use bootstrap but this time let's do some own styling why not okay let's see what this project is about this is my second attempt to do the livestream because in the first one you didn't you couldn't see but sorry you couldn't hear but hopefully now you can hear that when I'm pressing in these to hear the beat or bounce okay now basically this is the project I'm not sure if we should have these toggles also so maybe just only the buttons that will be our focus now so to do to do the roulette three we want to create our project by forking this this pen which has the test Suites that we need to run in order to verify that we completed all the user stories so let's form this code man all right and let's change the title to be drum machine the code camp like that alright let's remove the comments here this script runs so that we can have this box and we don't need this good best next thing will be to import react and react the Dom - what us I think that's it let's save it and [Music] let's create an app so that we can see that react is working a deep hello this is just a small test and then we have reacted um render we give it the app and document a cute man get element by ID I had a little black out there get element by TD app and we want to create this div with an ID of F here if everything works correctly we should see hello somewhere around here whoops we didn't let's see why cast AB okay I think that's why all right look at that so we have our react app working now let's look over all the things we need to do so we can create a path for our per application I should be able to see an outer container with a corresponding ID drum machine that contains all other elements within the drum machine I can see an element with ID of display I can see nine clickable drum pad elements each with a class name of drum pad a unique ID that current describes the audio clip the drum pad will be set up to trigger and the inner text that corresponds to one of the following keys all right the drum pad must be in this order good so we need to be careful of that within each drum pad there should be an html5 audio element which has a source attribute pointing to an audio clip a class name of clip and the ID of the parent kay two two two two when I click a drum pad the audio contained it's triggered when I press that he associated it's also triggered all right and when the drum pad is triggered a screen describing the Associated audio clip is displayed as the inner text of this pediment okay I'm not sure what this does but yeah so roughly we need to have nine buttons which will which we can click they will play a sound also those buttons can be clicked well can be triggered with the keyboard alright good I'm now hydrated and we can start to do to do to do so our app first let's create the nine boxes - let's create a box this will be another component which will just be for now a div with a class of last name of box and also inside it we want to take the props and pass in props that text just for money so we have a box with some text in it coming from the props now our app let's convert it to a class-based component we don't use hooks now because on our quest to conquer pickle camp we didn't learn books so for now I'm sticking to class last base component so extends react that component we have a render right and here we're going to return something we had a wrapper let's see we had outer container drum machine and then play all right so let's create a deal with an idea of drum machine inside we're going to have to display idea of this play oops like that and inside here we're going to have all our boxes now for the boxes let's set on the state and this shouldn't be necessary on the state but let's set our keys or something which would be an array of 2 w e a s a D X C so all the letter I did display misspelled thank you from the live chat all right so now we have the state with the keys we can get the keys from the state it's that state and we can map over the keys and for every key we have also an index we want to create a box let's best in the what does it need text which will be the key in this case and let's have an index of finding sorry now that's confusing key will be key index this is the required property when we're looking over something in matter we're mapping over all right so we have our queries at ESD x zabbix C which is great let's give it a little style I want the background color something colorful let's be from here maybe quite a purple a buddy background color this purple color alright then what you want to do she in display let's make our drum machine I want to place all the drums here in the center so basically the display should be a box which will be a flexbox with a weight of k or drum machine our container sorry that may be a class name of container so we can style it and then our display let's have the class of display also and for the boxes we have a class of box okay good now let's start our container should be with 100 B port width and height 100 100 with poor tights now we could have background color white you can do for height why does it that for interesting let's remove the margin from the body and also have box-sizing order box of days okay height 1 under Cooper Heights that should per 100 years something is missing display class name Oh class name okay to have a container [Music] why aren t 100 before tides interesting maybe because our body you we have the body we have the container we also have our app so you know what let's do something else but then it should work instead of having the idea of drum machine and container here I'm going to remove from here we're only going to keep the display and I'm going to add it here instead so instead of our app onand it should be dead and now we're going to target this this deal that way we have the body and the container will be direct child so now we should see the height container bag on color white a class now here hmm that's weird 100 report heights don't it is it's 100 by default but wrong with you display flags the our display should be displayed flex if this doesn't work then I have another three this place flex flex Direction good Bureau a flexwrap okay all demos but style the boxes first so we can see what's happening our box should be a width of 100 pixels height of 200 pixels that's at the border of 2 pixel solid visit 3 and maybe border radius of four pixels all right there's too much maybe 100 100 and now flex wrap should be rap and we should see them next to each other if we have a width of 300 pixels on all right good height is misspelled inner Oh I okay thank you that position thank you thank you all right so now we have that our display should be a background color of white should have some padding okay the boxes should have some margin well let's leave the margin on the boxes and have the padding too much too much margin there okay and now we need to calculate the width which should be 100 times 3 plus 28 times 2 times 3 so 360 okay and we can do this play flex-a-lite at the center justify content on the container and I should go to the center perfect now we have our nice little board sort of okay let's import the font-size on ice sixty pixels okay let's add the font from Google nice font for our buttons do I like this in port put it up here and use it on the body on family Beto's and surf all right now that's good and we also want to Center the letters and a quick way to center display flex-a-lite at the center justify common center and it should go to this and he looks a little bit off but maybe just me all right now let's make the wheat 400 mm-hm and have a line-item Center justify content center here also so they go a little bit in the center adding maybe just I can okay go back go back but the way that that let's have the width of 400 and padding difficult all right that's a little now maybe have for these boxes a background color of hehe something I don't like it much barrio font size you let's see what colors do these have I'm not good at designing so okay they were very black maybe try that have like 53 and the color should be FFF now the color will sit up without ever color FFF order up kind of maybe from these colors let's take this purple color even maybe and to background-color like that okay and the border should be all right let's leave them like that we need a cursor:pointer so we can see that they are clickable okay it looks decent if I woke up cut 2 streams neural pic make a wish I wish we finish this project successfully all right now we have this what else maybe when we click or something we want to have a class of active which will say be opacity 0.6 or something let's see how that looks okay maybe that's too much 0.8 basically just I want to add this class when it's clicked so that we can see the different sort of and maybe we can do transform this is now - fancy and for void s all right thank you kay what else let's remove the class all right we played around with this which looks decent okay I have one more idea to improve it a little bit on the display we should have a box shadow two pixels two pixels five pixels RGB 0 0 0 0 point 4 I've a little bit of all right make it 3d ish good add this on the button stuff ah Kay this would be more subtle okay that's it that's it no more fancy clothing LC styling right well 21 people are watching where did you came from okay so now we did it it looks decent if you have an idea how to improve this like you know we now need to connect other sounds and add the event listeners for the click and for the key pressed so that will be fun okay I'm keep drinking my orange juice to be hydrated let's see are we're going to do this we need to add an audio element first now the thing is that we're going to need a way to trigger this audio element so for that we're probably going to convert our box to a class-based component and have have some state right if the audio is playing or not because basically the Box should handle its own sound State playing have the vent listeners yeah that would probably right and what we could do is to convert back our app to a functional component and we just passing these as a prop these this keys let's do that okay const is will be this then we're going to remove this on stab and we're just going to map over wait we had a parent right add a date with a class of container not container wait I hope I didn't happen ID display all right and then on the props which we're getting here perhaps that keys we want to map over and create that alright okay so that's that this should work we just need to pass in the keys as a property on our app of keys is and now it should look the same fingers crossed if I didn't mess up something currently did I'm not sure what last name I have a deal we'll move map over the props which are past here we have the keys to the console error let's see the error you hmm apparently oops you of the J section we open the parentheses we close we have over we have the map looks fine let me get this out you might not see that well now sorry about that and I want to say it hello see if this works alright I'm paying I messed up what apparently code pen is also messed up solid last app looks good to me why don't you want to work you a skis that's odd you does anyone see that the bug because I doubled you f80 hopes something here render app and we fashion crops here you you now this is it document get to remember ID [Music] you and at first prop surrender okay so let's move that and then let me get this out are you sure why can't you that's basically an app component or component not sure why is setting keys as props but that's also right it's available in the global you're right I shouldn't say send the keys as props I just wanted to make it in react Irish we can access is from the from the global but still doesn't work why oh now we don't have a parenthesis oh look at that this is why I didn't doesn't work you see okay now what let's say very fresh line 14 oh thank you clink and welcome to the live stream yeah that's a bird thank you all right so we started working on the audio and then I started changing the app alright good to have viewers all right look at that so now we have the buttons sorry and we can convert this to a class-based component to have state on it in all letters first box should extend to the extent the react component like that render turn this close the render close the class enlighten than this and now we should I messed up something here again props that text this that pro right question why I prefer Mozilla wordclock Chrome this is not Mozilla this is brave I talked about this on Twitter this is built on chromium which is what Chrome's build on but you have the benefits of no ads you have the benefits of if you want to have ads to support the Creator it's much faster and all that check my Twitter I posted about brave and shameless plug you can support me by using rape which is by the way a nice let me show it's a nice browser look how many ads it blocked me in the past couple of months once 300 thousand deaths okay but this doesn't make part of the course parentheses closed all right so we are back here we spent ten minutes to go to this date now we want to know do here like that now let's see how do we play the sound in the audio first we need some sounds I guess we could take what they use here because well I don't know any places to get sounds so they use these from Amazon I want to copy them all you okay yep and [Music] and mush happy let's see well hey the now const pounds will be an array of days and we can go here and paste some colors alright so now we have the sounds perfect now we should pass these sounds along with the kids that will be a better option so ernst or should we call the subject comms sounds to be an array of objects with the key being Q and oh boy found being this yeah that's the best way to it so we'll take while 2 2 2 2 2 like that eww II a s d let's see all right and then you want the sound this we can speed up by doing this and going here doing something like this to do the drone paste No why did you paste all of them okay go back I wanted to speed it up but apparently they don't want me to self I need to copy and paste it and don't be late you sorry guys it might pick by L but yeah this is the best way to do it if we want the semantics as possible the traumas next yes then for one entry but this should be 3 and this should be for one ok so now we have all these we can remove this and when we're looking over the sounds those sounds which will be sound sound that sound don't like this let's convert it to sound up mp3 sound we want to passing the key sound that key and we want to test in the audio audio as mp3 all right so now we have that and here arms X not X we have E and we have sound no Anya this props they should be now key and interesting that that's all it's text found that key is text okey okey okey so go back all right and audio tours if this is how you're passing this sound source should be audio now we need to f8 mentally Scimitar to play the sounds and you you can spread spread um box yeah I know good sounds B notes instead not sure it should be notes because is but it's not just a note how are we going to run audio we need to create functions for that and we need to target it they need an ID I think they also require here to have ID for them within each drum pad there should be all the element which has a source attribute pointing to the audio clip a class name of clip so let's add pad my voice is going oh not this project this so class of flip and an ID corresponding to the inner text of its parent okay so we have these IDs so we can where it is our here ID should be text which is by if I gotta start working okay have fun joy is it play eventlistener yes that it is but we need a reference to this audio file an audio component well tag in order to play it usually in our JavaScript you'll do something like own studio which will be document blah blah blah get album body and you will do audio duct play and this will claim but here let's see react a play sound I saw something here okay no audio you can see but they create a new audio element and then add eventlistener ended ended they play please that Roger that play audio tag in HTML so we need to target it somehow and I wouldn't want to use the IDS although not HTML being react html5 audio tag but your ref it's using graph [Music] choosing raft targeted raph react I know they changed something on Raph don't overuse it my this dot my rep great react crate ref and then we pass in okay let's do this so here in let's create a constructor function superb props and we're going to say this that audio will be I think we can create functioning parent clay and pass in the audio yeah but we need the reference to the audio because you're targeting the audio to play by clicking a button right you're not clicking the audio which will have the reference to it so let's do this we're going to set a reference to the oddities that audio and we need create ref like that so now on this box we're going to have an on-click which will be play this that way song so now place sound we'll get this that audio and we'll run play on it basically this is what I was thinking let's see if it works yeah I can't hear nd just create the ref for the audio then add an unclick that girl does that play on the ref no yeah basically that's what I did but I can see it so let's see constant that log is that audio what it is inspect and so and when we're clicking please that audio plays another function this that audio is au courant is that audio that parent okay so we need to diss that audio duct current like that and we should be able to play now hello Mahad look at that can you hear it yeah probably alright so that's that that's nice now what else oh we need to add the key event but the key events should be where on the document okay [Music] we're going to track on the app on the display now on the document somehow and when we're are using them now I'm using reactant oh he events let's see he events react what would be a good approach hectic event Oh keyboard events Anki on press okay well I guess let's try something window that document this is not a good approach with add eventlistener key down which will take an event Oh and we have the props let's cancel that cloud see does it work here but I don't really like this because basically it will set an eventlistener for all the boxes on the window which is not nice that's it yeah yeah you can see it runs thousand times so we should probably add that to our app this event listener get down we're going to press a key then now we need to have the reference of the audio this is a heckler e dot e want to see the key pressed guess a QW if a that key will be props that the text well II that key that to uppercase because we might press I mean we'll pass in the lower case then is that audio that current play the basically this should work but as I said I don't like the fact that we're adding so many went listener document yeah so I'm pressing s it works why not use on keep on keep prop what eat them would it work on the box let's try on key down we want to run this that place sound now this that play it should be another function should be a function which checks for the key is that end of e and let's create end of e which will be an event and we can do this check here I'm not sure does we did this work probably should ya know oh it's nothing anything only where I'm waking it by its console logging [Music] interesting yeah so it doesn't work because we're giving a key down event on this box but the box is not focused right yeah there should be under window but then I don't like while we're adding 7q BAM but they guess that's a heck can it should be okay now otherwise let me think so how could we add one document which will oh I think I know we could edit outside and then we can target the audio which has the ID of the key right because we have the ID here let's try that so we're getting this outside document.addeventlistener like that and props that text okay so we don't have the props oh but we don't NATO it don't need the props because what we want to do if we press a button and we have that button inside the and we have the audio then we just played right so let's see um key will be that key to uppercase well let's do this ID and then if a document I mean let's fast audio will be document get element by ID of ID if audio and we can do audio that play right look at that so it's works I mean only adding one key down event perfect now it kind of works the only drawback is that we we're not adding a class to see what happens so let's do that okay what they want is to target the parent of the audio the box and add the class of active on it while this audio is playing right let the death so we want the parent well we want the parent if there is the audio the parent will be audiio that parent node and now this parent last list ad active this should work look at that perfect so now what we want to do is set the timeout or maybe audio that add band listener which will be much much better and I think that's the audio eventlistener here we want to do parent that West least remove active it's not and let's see audio event all you play low rich ended all do that and it and it like that so now it should work [Music] and if you can see it will remove the class after it's ended its own all right so this although this is not react stuff this should this is the best way to do it in our case the last thing I'd like to do is to have when we click this to add a class that's Oh I think I know what we can do and we can also remove this from here let see this that audio we're going to add event listener started do we have something like that played cost art date now played reload pause when we're playing I want to get Oh to play buffered current I and duration ended blue muted now play pause well I guess that let's look at the code but I guess that here in the play sound we can add the to the parent then we can add an event listener ended we move it here in the constructor and this will hopefully run these that audio dot current we have an event listener on the on it which will go to the parent I remove the active class and then on play that sound we can add the active class of the parent oh we need to target the parrot parent will be is oops but they copy okay so parent will be this and here also peripheral village okay so this is a mixed with vanilla JavaScript and react audio that parent and audio where is it order that all right goodnight son so now if we didn't break something apparently we did let's see also error maybe we don't have the audio yet cannot read property yeah so we're creating the reference but we don't have it yet okay that's not good we're getting this about you to create a reference but we're only setting it in the renderer so for now it doesn't know what it is maybe on the component did mouth should we add this a component deadmau5 I should add this event listener now it should work in the play sound we should have it okay let's see so why I did this is because now even if we click or if we press the button which will do or do that play it should also trigger adding the class here won't so the button won't be worse didn't need to add this all right so we need this here because we're pressing the button and this won't go to the react part but when the audio will be ended it will trigger this event listener Betsy okay so we click and we didn't see I said it audio is not defined oh is that audio [Music] okay we see it being activated but it's not deactivated aw do this all right so now it should work look at that so we pressing and we have the active class and when we're okay we have one more error somewhere Anna treat property paranoid Oh been defined okay so we're referencing this that audio here in the event listener but we're calling it here so he doesn't know what this stands for or that we're going to do on eat here and we're going to target a dot target so now we should get the target which will be our audio element and set the parent node all right I think this works okay we're getting one out of the other these that are the per node better than others undefined but where lmp1 hmmm I think we don't have either target what do we have here you [Music] I don't know the time to find out 70 by sound is not apparent now this a I have another idea yeah that that won't work you once all that log and it let's see if it goes here [Music] no it doesn't go there somewhere else this one but this shouldn't be - and [Music] and I don't know audio oh okay so I did all that current here and we don't have current on the audio in our key down all right so that's fix this should be fixed and hopefully it should work our mixed way three yet and Pamela look at that so pressing the buttons work [Music] [Music] basically works let's save hello Itzhak welcome to the live stream now what I've saw is that we can't play the sound if it's a playing so if you place pressing very fast okay what yeah or the exits the fields I'm pressing very fast eggs but only hear it once in a while because we're playing it okay I want if we're pressing the key hmm and if the audio is playing to stop and then play this is a little picture well let's run the test first see how we fail the test let's fix these tests and then we can we can look to see but but how to improve it I can see oh it's failing because I have the wrong project here all right it's still failing but at least we have three between the drum machine I can see nine clickable drum pad elements each of the Crescent drum pad okay so not bugs you should do something audio stopped at the beginning of the statement oh that's good idea so here audio stop that's very good idea thank you clean you're very good all this stuff but but err do we have now or the stop is not function mmm-hmm Epis why is that the fun or the pause not stuck ahead Thank You cling but yeah yeah its parts yet but our our ex still doesn't work maybe I'll do that pause but they want to stop that's interesting that's a bore - spanned play volume source and okay look this afterwards let's first ask the tests drum pad drum pad class so here instead of box I'm going to add a drum drum head and keep the box and don't want to change it everywhere or should I okay Kent Brown and change it here and in the CSS come on don't be lazy chlorine all right so now we're back and we should pass that test okay we test three more nine clickable drum pad in a unique IT that describes the audio clip the drum pad which will be trigger okay so the idea of the drum pad should be what we set for the audio don't tell me we need sums to be dead found it set out the current time to zero thank you this is why thank you now we solved that but we need an ID each drum pad and audio source K and an ID corresponding to the inner text of its parent drum pad so you the drum pad should be unique ID that describes the audio clip the drum pad will be set up to trigger so we need an ID from the drum pad and an ID for the audio well let's see we can do something like or the drum pad an idea of drum and the text oh sorry of this drum - text and I also need an ID for the audio I forgot because otherwise we won't be able to target it right in our events okay let's see and one more trumpet is triggered a string describing the Associated audio clip is displayed as the inner text of the display element each string must be unique let's see does this dude that what you think oh I can see so it changes this thing okay so I the weimar passing the key down or when the drum pad is triggered the drum pad being this key so when we click we want to save another piece of day the current ID lets that state parent ID will be empty string and when we're playing we want this that set state current idea set yeah I deal with capital letters want be taste that audio that parent that ID okay and now we can get that ID current ID from the state and we can show we somewhere you maybe is playing Oh so not that contest of the display element Oh so we need to add text ear okay are we can do I have an idea but it will be messy why do you need this you current ID we don't need it here we need it there and how we're going to pass it there is by not by state is when we're playing the audio we're going to get the parent of the parent and get this h1 and change this this is a hack but well we don't have this but let's do that I don't really like it but whatever so this will be the display pattern that pattern because our parent here is the drum pad which is inside the display and then display that very select or we get the h1 innertext should be let's see last I did is that audio R and E this should be ad for now let's see if this works [Music] in the display we have the h1 and want to make a display:block weight 100% okay text me initially could say something like a press a key wait out sound now okay so we play the sound that that's work but alright so this doesn't work either parent query selector h1 in our text ID this should work let's see what's our display here Oh parent node all right so that changes idea is playing at okay and we should do something similar here is a dump like this pretty pretty heck but well hello Saha ah hush welcome okay so f is playing the CC o but we don't have the classes anymore what happened there what is the link to my discord alright let me quickly here it is so the oh the active class is not working because we change the drum the box the drum pad and we don't have it here all right now it should be done it's playing I'm interested but comes and blows my ears off we're clicking and we change the text and let's run the tests we passed one thing I want to do is what clings jested so here on the audio when we're playing it we want to set the current I'm busy will this trigger the stop let's see yeah nice well actually okay well it works thank you clink so now we stated this I don't like the sounds but whatever I like this and this okay I think that's done okay to kanawa a little but we did it so let's copy this go here place today and go to full and we completed submit and go to the next one are some this will be the calculator or I yeah if anyone has some questions let me know in the chat if you're watching the recording and have some questions let me know in the comments or on this cord and I think that's it thanks for watching if you liked it give it a like if you didn't let me know why you didn't so I can improve and subscribe if you haven't I wish you great day evening night afternoon or wherever you are take care and happy coding

Channel: Florin Pop

Views: 10,934

Keywords: freecodecamp, learn programming, programming for beginners, live coding, live, live stream, programming tutorial, freecodecamp curriculum, florin pop, coding, coding for beginners, planning, coding tutorial, css, learn css, css tutorial, build a project, fetch api, react, react tutorial, bootstrap, css bootstrap, javascript fetch api, drum machine, react audio, javascript audio, play sound

Id: gXUshKPc-_g

Length: 76min 50sec (4610 seconds)

Published: Wed Mar 04 2020