Build a Sound Board with Svelte

[Music] hello friends welcome to coding garden with CJ in this episode we're going to build a sound board a dramatic sound board so the idea is we'll build a sound sound board it's gonna have dramatic hits swells Rises loops and various songs I'll play some samples real quick something like this or something like this and then there I think I have like one loop like this what else we have risers like this a cinematic rise this is just another general rise what else i with some stings this one isn't as dramatic but it's really cool cool and I don't have the audio hooked up to my streaming computer so it's just coming through my speakers let me know if you can if you can hear those sounds okay but the idea is we're gonna use all these sounds we're gonna build a sound board where you can I click on the sounds to play them or we'll add some keyboard shortcuts so you can play them and really this is in anticipation for a stream that I'm going to do on Friday where I eat really spicy hot wings while solving code Coty's and if you've ever watched the show hot ones they have like this dramatic music in the background so I'm gonna build this sound board so that I can use it on on that stream let's say hello to all the people in the jet hello Topher Jay welcome to the stream who is first officially hello Daniel hello exception hello alien I was gonna say alien hello Alan who says two days in a row yeah baby yes I screamed last night I'm streaming again today and I'm gonna be streaming again on Friday hello Carlos welcome to the stream hello Nessie hello Kevin hello clay who is not first but you're still here and that's what counts um hello Spacey who's also back again hello Eric hello Winkle kevin says the audio is real low I might spend like a minute trying to get my audio into the streaming computer so you get a better quality sound hello Brian and hello vyas welcome to the stream okay so I have all those sounds the first thing I'm gonna do is because I don't want to manually like create a JSON file that has the names and locations of all these files I'm gonna write a quick note script that like generates a JSON file with the entire directory listing so that'll be cool and then we're gonna build the UI which I have not decided what we're gonna do it in just yet so I'm gonna send out a strawpoll let me do that right now what should I build a soundboard with so we have you we have react we have oh no this is not good I want more than just those options okay what should I build a soundboard with its soundboard one word or two words two words okay view react spelt vanilla something else we're gonna improve spam prevention bam prevention okay here we go let me share this with the people you it never it never works okay I'll pull pull the YouTube live shot up on here here we are here we are pop out okay here is the straw poll you can start voting on that now I'm not going to be building it just yet but you can all be voting while I do a listing of all of the sounds that I have in my directory let's also catch up on the chat this my head is covering this let's go like that a little bit Oh Robin says that they can hear my sounds okay yeah let me get some consensus boo like let me just play these sounds really quick something like this is that loud enough if it's not I'm gonna try to hook up the audio to get that going hello Rolando welcome to the stream hello Kevin B max who says hi I've made it for the third time this week welcome back uh and hello Elka who says I've been a good bill a good while building the backend with database and login via twitch o-o auth and a decent front-end that lets you upload to an s3 bucket very fun finish but all vanilla for a sound effect system so that's really cool so it's like you can upload your sounds then you kind of have like a sound board or something like that that's cool yes so the stream should be live right now Daniel says I choose well spell it because I don't know what it is cool okay people are saying the audios okay I think I won't mess with it I'll leave it the way it is for when I when I am legit using the sound board I will have the audio hooked up so it'll come straight through the stream okay cool so that's gonna go keep voting on this poll if there is there a way for me to like pin a message in the YouTube chat I'm just like give me one second I'm gonna make this very visible to people [Music] you how can I do this - I have the Notes app enhance can i zoom in view zoom end vanship period you let's do a little bit of that should be good there you go okay go to that pole in the meantime I am going to create a JSON file that has all of the files that are listed here cool so for this let's create a new file let's just call this list sounds J s I'm gonna go ahead and set up a linter should I said I'm not gonna set up a Linder I'm just gonna start coding but basically what I want to do is I want to use nodejs to read this directory go into each of the directories and then create a JSON file that kind of lists the different levels and all of the files inside of it so we're definitely gonna need FS for that and then we need to read that directory so I can do FS read der we'll pass in a directory and actually I'll use the the promises API for this so the latest version of node has FS dot promises and then all of the FS functions available like reader but they return a promise instead of having a call back so I'm gonna use that instead but what I can do is D structure it so I'll pull out promises from FS and then rename it to FS so I can do FS reader dot reader pass in the path so I just want to go to the sounds directory and then I should get back the files the file list let's see now if we log the files what do we get we should get at least that top-level directory listing okay let's run it in the wrong drawer three drop one this sounds cool so we get an array that has a hidden file in it but it also has each directory so then what we'll need to do is we'll go into each directory and list out the file is better in it so let's do this let's say um files dot math so that's gonna give us each file name why should this is let's call these directories because we know we know for sure that at least in our case they're directories but typically reader will give you back the names of directories and the names of files that are in it but let's just do let's call this directories and we're gonna map it which is going to give us the directory name and then we need to read that directory and list out the sound so I kind of want to build up a JSON object it's gonna look something like this it's gonna be an object that has like hits hits will be I guess it'll just be an array of file names yeah so maybe we'll do it like this it'll have like file name and then something like Bill hit dot wave and then it'll just have a name and will will have the name without the file extension and actually do wave files work in the browser I hope they do I didn't even check that if wait files don't work then I might need to convert them but regardless yeah so we're gonna build up an object like this so it'll have like hits and then all of the hits inside of it will have loops and then all of the loops inside of it will have music and then all the music inside of it but we're gonna build this up programmatically so we'll start with a nifty object and then for each directory we need to make sure that it doesn't have a period in the name so it's not like the hidden files will say if directory name that starts with great if it does not start with a period then we're going to read it and add it to our object so we'll say sounds at directory name it's gonna equal an array an empty array and then we need to go through and read the directory and add it into that array so let's create a function that does that do we need to create a function no because you do it in line why not so let's make this an async function and then we'll do a weight FS read der and I want to read the sounds directory slash that given directory name will make this a template string I could use like path dot join but I don't think that's necessary in this case this is just like a quick little script to get things going and then we'll call this files and then once we have the files we need to iterate over them and put them into that array for now let's just log the files and see what we get so let's run it cool and so that goes into each directory and then lists all of the files that are inside of it so that's a good sign but now we want to iterate over the files and then push them into this array so I guess technically we could just map it yeah let's map it that way we can just say sounds you're like this I'll say sounds at directory name equals files that map that's going to give us the file name and then we want to return an object that has actually let's just call this file because I want it to have a file property and then a name property actually found yesterday the path module has a nice little function for getting the name of a file I think yeah without the we could just split it on period I think I think we'll just split it on period and then use that as the name so if we say file dot split on period and then grab the first part of it that's gonna give us the name without the like dot wave or dot mp3 on it cool so that should do it and this whole thing returns a promise so we can await it so we're gonna take this whole map right here and we'll say a a wait promise all that thing and then here we'll say done and this needs to be an async function okay so we list all of the directories in the sounds directory then we map over each directory make sure that it is a valid directory it's not like a hidden file then we read all of the sounds that are in that directory and then we create an array with each of the sounds that has the file and the name and then after it's all done let's log out sounds to see what we get go east so we have a big ol object it has properties like hits rise loops stings and then each one is an array that has a file and a name let's make sure the names all worked out okay cool yeah that worked now let's just write it to a file so now that we have the sounds we'll say oh wait FS right file we're gonna put it in a file called sounds JSON the data is gonna be json stringify that sounds object we just created we'll make sure that it's indented with two spaces and it is in utf-8 format okay here we go moment of truth go it's as it's done do we have a sounds JSON yes we do those are all of our sounds nice so now we can use this file in whatever app we build to know the location of each of the files and kind of like list them out on the page cool I think one thing I'll do though is let's actually sort the files are they sorted by alphabetically F GL s AC EF MD yeah they're already sorted nevermind I guess the by default the directory listing here does it alphabetically so that's good to go alright so we have our JSON file let's check in on our poll looks like spelt is winning with 32% I'm gonna catch up on the chat cool oh cool so Alka earlier mentioned that they were making like a sound system but he said it's not just a sound board it triggers sounds from chat events like subscriptions cheering commands and stuff like that yes if you if you've ever watched like a twitch livestream a lot of times people have that where when something interesting happens a sound will play well and hello indeed welcome to the stream who voted for spelt awesome oh yeah I didn't put I didn't put egg Euler on there on the list it does look like spelt as one by one vote overview James Ross hello James Ross is saying anyone remember the Miss Cleo soundboard from like 2002 I think I do remember back then there were a ton of sound boards there was a a Jack Black soundboard that I loved I think it was a lot of sound clips maybe from Tenacious D was from something but there was like sound clips of him calling a Burger King or something like that and talking about nuggets and we used to prank call the Burger King in my town and like play the sound board but there was like Simpsons sound boards and Arnold Schwarzenegger some boards some boards used to be a big thing on the web hello buddy welcome to the stream Kathy is asking could react native be an option it could I just I feel like that would take a little bit to get set up and I kind of want to be able to use it on my computer not on a mobile app though that actually is a decent idea maybe we'll do that in the future Daniel garden is saying why not just do name an extension just so I have to do less work later because I could have done name and an extension but then in the front end I would have had to combine those two now when I'm referencing the file I can just reference file and if I want to list the name I can just list the name it is like somewhat duplication of data but it prevents me from having to like split it later on in when I'm writing the front end yeah whoa I like so al Qaeda is mentioning you could use the with file types option in reader to get Directory objects instead of strings then you know 100% of something is a directory that is a good idea but we're already done so I'm going to do it but with file types so I guess that would happen right here with reader and then you can pass in some options yeah and then there's with file types which believe somehow we could tell it to only have directories yeah that's good to know I'm not gonna rewrite this but that is good to know and then if I did that I wouldn't have to check this right here because that D s store file is actually a file and not a directory but thanks thanks for the tip Elka the exception says I love watching these even though I'm a Java and C++ developer that's awesome Allen asked what is the stretch break thing is that something you use at work as well it is I have it installed on all of my computer's it's called timeout by - all I have it set for a micro a 10-second micro break every 10 minutes yeah I think every 10 minutes and then a five-minute normal break every sixty minutes but you can set it up however you want it's really cool hello Tobias welcome to the stream guys in what's up who says killing it with the streams appreciate that I'm all says Hayes felts I think spells are still winning yeah winning by three votes what will build it as well that'll be fun I've only built one other app with Stoll and that was that where did I build the listen Image Search gift sir a couple weeks ago hello Ryan welcome to the stream yeah and he is saying they voted for view but went with felt due to the in the moment trend yet smelt is very much trending right now I'm all sing an old was the best song board actually I haven't heard of that one okay uh yeah let's build the thing where I guess we're gonna use felt and I like stop the poll doesn't matter but yeah let's use felt we're gonna go to their website and they tell us how to do it we use digit to generate the app it'll use like the spelt template let's go let's do it so we'll do this we're going to call it I guess we'll just call it sound board let's call it app because we're already inside of a directory and I think I'm gonna make this whole thing the big it repo so yeah we're gonna call it app so once it's generated we'll install dependencies and then do npm run dev okay so we have this app folder we'll do NPM install oh and you may be wondering what this is my invisible water slightly invisible there you go um cool so that installed it and if we do npm run dev here we go what do we have a spell tap we have a spell that felt spelled it's felt awesome okay so we decided we're going to use spelt let's do some emojis rainbows flowers okay so what we want to do first is list each section on the page so we want a section for loops a section for hits a section for music a section for stings etc so for each thing in this object we want a section on the page what I will do is I'll go ahead and move these directories into my app so in the public directory let's move the sounds into there because there are static files so that's good and then the sounds dot JSON I'm actually gonna put it in the source directory and that way I can just like directly import it in I won't have to do like an ajax request and then it'll be like embedded in the app so i'm gonna put it in the source directory and then i should be able to import it into my main component so like in my apps tuts app that's felt and actually let's let's clean some things up so main j/s has us set up with a basic app component and it has some props we're not going to need any props for our main app so I'm just gonna get rid of that and then in app dots felt this export typically means that you're bringing in and a prop and we don't need a name prop so let me get rid of that and we'll just say hello scoped it's working but let's try to import that sounds JSON files so let's say import sounds from sounds that JSON and then in the script let's just log sounds and make sure that it's actually getting loaded into the app so we open up the dev tools let's put this to the right logging [Music] this may not work we may have to actually request it it's not giving me an error either sounds not linked hello world alright refresh what oh oh there must be an error in the console oh that's probably what it is [Music] error unexpected token note you need roll-up plugin JSON to import JSON files okay we can do that so let's look it up real quick yeah converts json into es6 modules i guess technically i could just define it as a variable and then import it in let's see so if you once you install it in your roll-up config you pasen the json plugin tell it to ignore node modules no actually you either include or exit node modules you yeah why not this will be a fun little lesson in roll up config so by default when you generate this spell tap it gives you a default roll up config that just has the spelt to plug in roll up which basically is the spelt compiler and compiles your components node resolve for resolving your imports the live reload ur cool so we can install that JSON plug-in and then just throw it into this array and then our app should be able to import JSON files so let's do that let's kill it in PMI dash D for a dev dependency rollout plug in JSON cool and then we'll need to import it into our config right here and then we need to use it so right here will do JSON I think one of the options was prefer kant's let's do that what are some other options we can give it indent compact ignores indent and generates the smallest code let's do that compact true what else named exports don't need that ok so now if we start it back up it broke I spected token what did that he room did I forget I forgot a comma comma goes there try again okay so we have our app if we refresh we get undefined [Music] Oh because it's an object it doesn't have a length property there we go yay okay so we can now import that JSON file and we can use it so let's do this well create a variable we'll call it like sections and that's gonna be object keys of sounds so that'll be each of the keys in the object like hits loops etc and then we want to repeat over those sections to show like a section header for each one let's get of that get rid of that h1 style for now let's look at this felt docks on how to iterate it has a what do you call it a handlebars like syntax let's take a quick stretch invisible water the lights kind of reflect and let's also catch up on the chat see if anything interesting has happened Allen says you're awesome taking the time to read and answers everyone real class shade that um yeah Kaizen Kaizen had it might be because of roll-up you were exactly right so I think like view and react they're all like they hide the webpack configurations from you but they're all pre configured to handle JSON files this has a very basic set up out of the box so we had to definitely add that plug-in ourself cool what do we want to do we want each blocks so in each block allows you to repeat over something so this has each cats cats is the variable you're iterating over and then as you get the the property there and then you do have the index to if you want to use it okay we're going to do something like this so we'll say each sections as section and then we'll just throw like nh3 with section inside of it see what we get nice so we have all the sections cool let's go ahead and uppercase them because they are titles so we'll do that in the script so that way it doesn't happen like I guess in the render so let's do dot map we're gonna get each section and we want to capitalize the first word so let's say section at 0 to uppercase this so section at 0.2 uppercase plus section dot slice 1 so slice will take it's like substring it'll take a section of the string and so we want all of the string after the first index yeah cuz we want to leave off the 0th index and that should give us capital or it's cool let's make these like h2s nice okay so we have all the sections and then now under each section we want to basically have like a button to play each of those sounds so we're gonna have a nested each here so let's do it and actually let's put this whole thing in a div so later on we can maybe do some stylings like we have sections side by side or something like that for now it's just gonna be all down the page and then yeah now now we need and each inside of here and we'll do each sounds at the given section as sound and actually that's going to give us access to file and name so we can D structure it like that I guess this is D structuring this is the same syntax that they're using in this example here where they're iterating over an array of objects and they're pulling off ID and name so that's what we're doing here we're pulling off file and name because we're looking at each of these objects that are in the array so we get file in name so that's great we need to close our each and then for now we'll throw it in a div and inside of it we'll have a nice little h4 with name inside of it what do we get cannot rate property lengths of undefined sounds Oh because we uppercase tit now it's not inside of the object so let's do this will create an object that has like a human readable name and the actual underlying name so we want to map and create an object will say that the the title is that and the key actually we can just call it section yeah so we'll have section and title and then now we'll pull those off so we have section and title and then we want to show the title in the h2 and we use the section name to reach into the object there we go so we have loops we have anticipation hits we have all of those hits music we have those stings etc okay let's get some styles going so I want to create like a like a little sound button this should be like in a square with an outline maybe some like hover effects so let's create a class that's like sound button whoa like this it'll have a display of inline block and then we're gonna give each of these divs a class of sound button and so now they should all appear across cool let's also give them an outline of well let's think about our styles here so this is somewhat hot ones theme so I might use the same like red yellow black theme that I was using last time on the last stream I created this this sauce viewer you can see like the texts are like yellow and black we might actually make little sound buttons that look like this I think this looks pretty dramatic so yeah let's let's do this okay so for that let's make the background all black are there any styles let's see yes so this index of HTML is bringing in global dot CSS yeah and this has some predefined styles for the body and such so the body and the HTML have a hundred percent heightened width a lot of predefined styles in here let's get rid of all of them except for this and here we'll say a background is black ou don't need quotes around that black and then the width is gonna be a hundred view width and the height is gonna be a hundred view height let's see what we get okay nice so little you can see there's some scroll bars here let's for now we'll make the color yellow yeah I don't like that it's scrolling I think this should be like maybe 98 view height and 98 you width okay that at least got the width a height 97 there we go okay so there's no scrolling cool and let's just see what we have here so there's the body and then okay so our our app element is a direct descendant of the body that's good to know so I think what I'll do is in my component I'll wrap this whole thing and like in a div and then I'll give it some some class which will have some padding and such that let's give this a class of I don't know like container and then our container it'll be a flexbox and move everything to the center so it'll have a width of 100% height of 100% and we'll do display flex justify content center align items center all right let's see what we get nice they all go side by side so we have loops hits music sting swells rice let's make it a flex direction of column so it goes from top to bottom cool like that very good all right let's catch up on the check because it seems like people are saying things from the corner of my eye hello Alfred welcome to the stream so Spacey just says so the roll-up plug-in takes your smelt files and terms them into runtime lists vanilla JavaScript I can see why it's being hyped yeah and so they actually have they built plugins for web pack is well it's just the one that they recommend on their website has the roll-up plug-in in it but it works very similarly to how you would build an app even with view and react because with view there's roll-up plug-in view and with react pretty sure there's a rollup plug-in probably roll it plug-in Babel which compiles your JSX but roll-up itself is a build tool and then this plug-in specifically like has the spelt compiler inside of it so you're using roll-up but at the end of the day spelt is taking these component files and turning them into runtime lists JavaScript yes hello Danny Fritz welcome to the stream Danny Fritz is asking is sounds available there yes it is so the way spelt works and I realize now all my Styles are getting in the way I guess I could put the styles at the bottom I don't think it cares let's do this but the styles at the bottom like like a view file but the ways felt works is anything in this script tag is in scope for your your template so any variable you declare up here you can use inside of your template which is pretty sweet there's no like data object there's no state anything here you can reference it and then it's reactive automatically so if you change a variable up here it'll be reflected in the view as well in Danny 4 it says that would be a yes yeah because I'm obviously I'm using it here in there cool spacy is saying I'm guessing the output javascript file from the compiler probably needs to be needs to replace the variables that are mutated with something similar to reiax use state no so I would definitely recommend that you watch the the creator of spelt is rich harris so if you check out on youtube the recent talk he did about spelt spelt rich Harris yes rethinking reactivity is a really good talk that talks about some of the downfalls I don't know if you'd call them downfalls but talking about like how react works and then house felt does it differently and potentially better and he actually shows some of the compiled code but what it actually does is anytime a variable changes it just inserts a little piece of code called invalidate and when invalidate is called it knows that anywhere where that variable is referenced needs to be updated with the latest value so it's pretty slick actually but yeah check out that talk and hello Chris ooh from Germany welcome to the stream guten morgen and so good good evening from Honduras oh yeah Kaizen is saying vs code icons is making the svelte icons look purty let's see well actually I don't think it knows what to do is felt but the CSS and and other ones have cool icons maybe I can get an updated icon pack to recognize felt cuz it's just like that those that like those lines there hello Joshua Faris it has been a while long time no see says camp is keeping me busy oh yeah you're at you're at a camp right now that's awesome I'm he says I believe having border-box and removing margin and padding will allow you to use 100 be within hundred you height great suggestion let's absolutely do that so by default the the browser has some margins built in and then let's also make sure there's no padding and then can we use 100 view with and 100 view height yeah so now that we have that those scroll bars don't show up good call they are mentioning to use border box but I don't think we had to do that we just got rid of the margin and the padding cool hello Greg welcome to the stream and hello Antonio says good night from Brazil that's great Kaizen saying no I don't think you have it installed or enabled Oh quick aside let's let's just see that should be pretty easy to install icons oh I don't have it I have a different have a different icon pack maybe I don't have one at all maybe those are the default icons I feel like I had an icon pack maybe not let's install it go 17 million downloads okay I guess I was using SETI or something like that okay now we did it and now oh there they are nice nice little svelte icon appreciate the tip cousin um yeah that looks nice and it's got folder icons too that's great okay is there any more chats I see I see uh yes and I installed it it looks great okay let's get a better font going I believe on this app I used a Google font let's see what it is alert a stencil so let's get that from google fonts yeah that's the one let's install it I need this in our HTML so let's take a quick stretch yes okay so in our index.html we just need to add the font link there and then we can set the body font to be that font here alright let's see what we get nice cool I think the other thing we'll do is we'll just make everything Tech Center so in the container let's just do text-align:center I don't know if you heard that but there are fireworks coming off outside cool now everything is nice and centered let's get this sound button going okay so it has display:inline-block let's do an outline of yellow I put the sound button class on there I did oh I have to one pixel solid yellow nice let's give it some padding for no two M's nice starts to scroll looks decent enough do i do display border box or how does how does border box work because that's what Joshua Farris was mentioning CSS border box box-sizing okay box-sizing border-box let's try it to get rid of those unnecessary scroll bars there we go sort of I feel like it shouldn't have the horizontal scroll because Oh now I can't even see the top you you feel like I have run across this before like using flexbox now everything centered but it's like off of the page so actually adding border box brings the horizontal scroll horizontal scroll is like random what's going on okay so my app has a flexbox it's just centering everything and it's going off the page let's see what's happening here okay so our container takes up the whole the whole width and they're like divs that are off the page someone help what's happening well I guess actually you know what I don't want it to be vertically centered so this really doesn't even need to be a flexbox by simply having text-align:center everything's just gonna go to the center anyways yeah let's just do that you cool and that works okay this is way too much padding I think actually I think it's fine let's just add some margin so that they're a little bit separated you like point two five M's point five ins I think that's good I think I want to increase the font size just a little bit 1.5 ends then it's bigger than the title you it's way too small 1.25 that's cool alright let's add some hover effects and actually that is a bit too much padding let's just do like 1.5 yeah that's cool with me and hover effects okay so sound buttons should have a cursor of pointer so when you hover over it you know that you can click on it and then when sound button is being hovered on we will change the styles hmm yeah Kaizen mentions oh cool it's worth of job it is 4th of July and all of the people in my neighborhood really like fire they've been setting off fireworks for the past like month and a half and I'm sure tonight and tomorrow they're gonna be going crazy it's only the 3rd today tomorrow officially is the 4th but they still fire off fireworks like crazy I think Danny had some suggestions for my styling but ultimately I just removed the Flex box so they don't really need it because just doing text-align:center put everything centered automatically so let's that's that's good enough for me yeah spacy is asking would this be a good use case to use something like grid with repeat and min max to make the buttons all look more uniform we could so we could potentially align them to a grid I think one thing we could do though is if we give them a fixed width and height width like a text wrap then they'll all look pretty uniform so like if we say width is 250 pixels and then height that's way too big but now they look somewhat more uniform we do 75 they're all over the place 100 by 100 it's really weird that the they have like different spacing like that 150 by 150 there we go I think that weird spacing was because of yes I'm like text text hovering well but we I believe we could fix this by making the section container a flexbox because then we could do a vertical Center yeah I think I like that and then if we make the buttons a flexbox we can put the text exactly in the center to flexbox everywhere I don't know if this would be a good use case for grid because with grid you would have to specify which row and column it was or it is and I think that's a bit too much I don't know but let's make first the button a flexbox so we'll do display inline flex justify content Center aligned items Center and that should put the text of the button right in the center that's great and then if we make each button container so this I guess actually I want the sounds themselves to be wrapped in a container because I don't want the title to be a part of the flexbox so if I put a div around these and give this a class of sound section then I can make sound section a flexbox and then we'll add a flex wrap so flex wrap wrap yeah and so now they're all like vertically centered too so that's cool nice and I think like are these buttons too big are they I don't know maybe I think I think they're okay for now let's add that hover effect so when you hover will like invert the colors [Music] so on hover will say background is yellow and color is black like that what if we give them an outline of red instead that's cool right Danny is asking our am i planning on using with this with a touchscreen I don't think so it's really just gonna be off to the side on a screen and I'm gonna click it do you have any suggestions for things I might need to add if this was a touchscreen cool and any any style suggestions because maybe my color palette is a little too ugly I think maybe I want to increase the font size just a little bit what happens yeah you I think it's good enough for now let's just get the sounds playing so when this thing clicks we need to call a function that will like start playing a sound or something like that so if we look at this felt examples we want Dom events and you can do something like on click so on this div which is the sound on click want to do something like play sound and can I pass in a variable I don't know let's say we want to pass in the file and so now let's define a function called play sound and let's just log it see if we actually get it yeah I don't know if we have to create like an arrow function that invokes it let's let's see what happens yeah because right now the way this bit is being interpreted is when when the template renders it just immediately invokes the function so my initial thought for this is we give it a function that will call the function like that I don't know if that's the correct way to do it or if there's a better way in spelt let's see in line handlers yeah I mean this uses in a narrow function event modifiers click once component events event forwarding Dom event forwarding I think that's what we have to do because like I mentioned before if I just directly put play sound with file in it that is invoking the file like win this thing render so that's why everything log to the console but now I gave it a function that will call play sound so now when I click it we see that sound name getting locked so for this we need an audio instance to play it so we'll create our audio here let's say audio dot source I think we can just directly set it and we need the full location of it so we need to actually pass in the section as well because the section is the folder name and then the file is the file name so here we'll get a section in file and then we need to create a path to it so the path is going to be sounds slash section slash file let's just log that and then we'll set source to the path and then is there audio like play yeah audio dot play alright let's see what happens I think I like this one so apparently browsers do support WAV files so that's a good thing cool so we have we have a basic workings on board you just imagine though like I don't know if you've seen the hot ones YouTube series but I mean the videos are edited so in the editing studio they add these sound effects when people are like eating really spicy things so hopefully I can emulate that live like like the spiciness just hit you then we have music this one's cool final boss this will be for the spiciest hot wing [Music] yeah and we probably also want like a like I can press a button to stop all the sounds but there's some really good suggestions and comments in the chat right now when we pull that up Danny is saying this is perfect for that 2000s shockwave flash soundboard Phil yeah so it looks not styled very well but I guess that's kind of the point maybe we'll keep it like that Kaizen is giving us some good suggestions so we can actually make these look like buttons so if we give them box-shadow and then whenever you hover it'll translate slightly so it looks like you're pressing a button I think we should try that yeah grab Gregg makes a good point ideally you wouldn't have to scroll to see all of your sounds we could make like maybe some tabs across the top with the different sections and then depending on the section that you're in you see those sounds yeah any suggestions for like potentially how I could show them all on the same page I guess if I didn't split them by section then they would all so let's let's do this if let's get rid of the titles and get rid of sound section and get rid of the div and I think that's just gonna put them all on the page wait did I get rid of something oh no I still need that I don't need that yeah and so I do this it's just one big one big board maybe maybe I don't like this because I can put the type of sound inside of the box and now they're like all all accessible especially on a screen this size yeah I think I like that why I have the section separate them like that okay so what we could do is eventually we'll make our container a flex box but for now I could let's say like we just add a small width section and that'll put the type inside the box yeah but now the sound button needs a flex direction of row-column sorry so it's yeah I think I like that and then we can make our buttons a little bit smaller let's do like 130 cool and then now we'll make the whole sound section actually the container should have these styles there we go and they all fit on the screen I like that you Oh Danny has a good suggestion I like that so all of the buttons are in the same box but then also we can color-code them based on the type of sound I like that so I think I might still keep the like the type of sound that it is in there just so you can see it visually but we can also just make them different colors I like that um Greg is saying you can use flex to make things resize well I think if we just if we did a percentage instead of a fixed pixel width and they would resize if we want five across what's a hundred divided by five 25% height and width I did my math wrong oh I see because the if we do percentage this is gonna be 10% of the heights but I want them to have the same ratio so if I did 10% with and then ten few with that should be a ten by ten yeah and then this will will resize you just make them both in relation to the width and then if we made we can't also make the font size relative to the width what happens if we do one view with very tiny to view its decent and so now this whole thing is just gonna resize with with the screen or yeah but then when I go with that big up here I'm okay with that yeah um I'm missing anything else yeah Kaizen says coming to cinemas near you his face using I feel a sudden urge to make an html5 innovation launchpad s cap speaking of Novation Launchpad I think I have one just like right here I don't know it's an access I have one it doesn't work anymore because it's so old it's one of the original ones yeah cool so we're looking good so far let's check back on my read me cuz Greg just did just make a suggestion is this only Mouse would be cool to having to type anywhere to filter I do have that on my checklist let's see how we're doing so we have the sections we have the sounds we're pressing the sound to play I also want to make it so that you can press the keyboard to play so like each sound is gonna get a key like on the keyboard so you can press it to play it and then I do want to add search / filter and then also add audio control so when you're playing a longer sound like this one about that one yeah when you're playing a sound we can have like an audio scrubber at the top - like posit or stop it a quick question from Aulani and hello Aulani or is it oil Lonnie Ilana I think I'm starting with web development going to build my first site I have some knowledge with programming logic and C++ and Java I'm studying HTML and CSS right now what framework should I use I guess I would suggest if you haven't started with JavaScript yet just get familiar with like basic JavaScript do some code Coty's then learn about the Dom you could potentially use jQuery but nowadays you don't really need it just learn like how does the Dom wait Dom work how do you manipulate a web page and once you have that down you can move on to a framework like reactor view I prefer view view is usually a lot easier for beginners to pick up but react requires you to have actually it racked forces you to learn JavaScript much more and much better so yeah I would suggest make sure you know about JavaScript learn about the DOM and then pick a framework but if you ask me I would say pick view but at the same time react is pretty popular too um yeah in Kaizen has the exact same suggestion that's cool harsh patellar says I'm really inspired by your coding style thanks for amazing streams and projects it really helps to understand real work flow over the project thanks again you are very welcome thanks for tuning in um okay so on my on my to-do list we have these things let's let's kind of tweak the styles I liked Kaizen suggestion of making it like a button okay let's do a box shadow I am not at all familiar with box shadow syntax so let's see what happens so sound button box shadow does it work like that it does definitely don't want it to be green yellow I guess we can make it red yeah so then it kind of looks a little bit 3d and then hover transform translate well actually you we want it - okay so when you hover let's see transform translate three pixels three pixels so that's going to move it up up into the right or down into the right yeah so like it seems like it's moving slightly and then and then we can have on press it the let's see sound button is it active when the mouse is down and then translate it back to nothing that's cool I'm done with that all right someone else made the suggestion yeah Daniel says add CSS transition to the color yeah let's do that so on hover well actually we can put it on the sound button itself will say transition color one second layer that how that works yeah but not color we want background and we'll do it over like 0.25 seconds can you transition multiple like can I do like that or will I just break it now that just breaks it how do I transition multiple things , I guess I could just do transition all and that works you I missed this question earlier from Punjab hi CJ what do you love most about software engineering there was an explosion outside fireworks are going off what I love most is solving real-world problems making people's lives easier so I work at a consultancy and clients come to us and want us to build applications that solve their problems that we build apps that make them more money we build apps that make their processes more streamlined we yeah and so the the things that I do help people so that's that's what I really love about software engineering and I really do like problem solving as well so you're given an interesting problem in any domain and you have to figure out how can we solve that problem with code and that excites me keeps me interested I love my job I love coding so yeah ketchup Oh in another suggestion from da prynce y'all please build a web app using mass emailing so I think you mean like email marketing that would be interesting yeah good suggestion and hello Matthias you haven't miss much I haven't put it on yet yet we have the app we can click it for sounds I think I want to take Danny suggestion and give each of the different sections a different color so they're visually different and Kaizen is saying the button should move into the shadow oh good call good call okay so to translate and move it into the shadow no it should be on should be on active though right yeah that does it because you see now it moves into the shadow because you so when you when you click it it then goes into the shadow it makes it makes it look like it's a button cool you okay and Danny is saying active is also the state after you've done a gesture end event on it so if this if this were a touchscreen I guess that would be a gesture in would be like touch up and that would make it look like a button on mobile as well jitesh says in hello jitesh how about the controls pop up in the same box as the sound is playing like you've just flipped a card by clicking the button that would be interesting I think the thing is right now I'm using one single sound instance like one instance of audio so that when you click a different button the sound totally stops and the other one plays and that's kind of how I want this thing to behave so technically the controls wouldn't be for that individual sound would be for overall so that's why I think I'm going to put some controls maybe at the top or something like that [Music] one thing is yeah I was gonna say if I press the same button twice as the song restart and it does that automatically and I guess and that happens because we're we're resetting the source and maybe that triggers a a reset that's cool okay really Cygnus is saying less pad and more shadow let's do it so less padding would bring the buttons a little bit more together or sorry maybe that's what you mean so less margin and then box-shadow five pixels I'm okay with that yeah we'll leave that as is and hello Pedro welcome to stream beach OS did I miss the obligatory talk about quasar also what's up to Kaizen I haven't talked about quake quasar but I did see quasar is version 1.0 they released version 1.0 which is very interesting because now it's I guess it's stable I guess before it hadn't made it to version 1.0 yet so now it's an officially a stable release it can be used in production so if you're not familiar with quasar it's a framework around bjs that allows you to build apps that share code and can run as a hybrid mobile app can run inside of electron can run in the browser as a progressive web app but they can share all of the the same codebase to build like a totally cross-platform app with you and they have components which are material design inspired so it's a component framework as well as a framework for building like cross-platform apps thought about using it in the past but now that it's officially 1.0 that's that's good news okay so in Danny has a suggestion so I was trying to do transition on the background color on the background and the transition on the color but what he was mentioning is if you want to do that you actually separate them with a comma so I could have actually done background comma color 0.25 seconds linear I think I'm okay with just doing all because those are the two properties that I want to transition that's fine with me well see you later Kaizen enjoy work drive safely or commute safely however you get there Mateus says I just love the way you talk about software engineering in your videos I was lacking of enthusiasm decoding because college made me feel afraid of trying and failing it's been four months that I'm not afraid anymore and coding more and more every day Thank You CJ you were very welcome it excites me that you're excited about coding if I do anything on this channel it's it's in insight people to have fun coding and build things and and yeah that's awesome yeah a Gras Grove has the suggestion can you make each row a different color I think we're gonna do that next and it's not going to be each row it's going to be each type so all the hits will be one color all of the music will be one color sting swells Rises etc yeah josh is saying you should disable text highlighting Oh like that from Joe has a question what's the difference between redux and redox saga they are not different you would use them in conducting conjunction so Redux is your state management library redux saga is a library that you can use to handle asynchronous actions with redux redux abba might be synonymous with Redux thunks or redux promise promises it's basically a way to do a sync set actions with with redux Hakan is saying I think removing the shadow when active would give a press button look let's see you're right yeah because it's supposed to move into the shadow let's try it you do box-shadow none is that valid yeah [Music] but the only thing is because I have transitioned all now the Box shadow was transitioning as well actually don't think I want the Box shadow to transition as slow I want that to be fairly fast because otherwise it looks like a slow button press so let's do this we'll do a background 0.25 seconds linear we'll do color 0.25 seconds linear and then we'll say box shadow 0.1 seconds linear so that yeah it's a little bit faster we can slow it down just a little bit point one five excuse me also what I'm noticing is the sound doesn't trigger until the mouse goes up so instead of on click I think we actually want to do on Mouse down which would make it yeah so the moment you press it the sound triggers cool okay [Music] Mohammed is saying hi CJ I just woke up from sleep and now I'm seeing the stream I remember you built another soundboard in vanilla how is this different this is different because I'm just using different sounds and these specifically are gonna be for my hot wings code Coty's episode where I'm eating spicy wings and I'm making this sound board for dramatic effect when I eat very spicy things like this one yeah but that sound board I think is actually a sound board now about Sh yeah I built this one a long time ago and this just has things like this [Music] so yeah I'm building a very similar one but just with different sounds and I'm building it from scratch this time with spelt instead of vanilla yeah but I think we're gonna do a similar thing where we have the keys on top of the of the buttons so people know what they can press to trigger them and spacebar to like kill all the sounds yeah cool appreciate it so I think Josh made the suggestion to disable text highlighting and they do have a little snippet here that will disable text highlighting and will it will disable it on the entire app so we'll do it in global I format this prettier there we go so now yeah you can't select text code Coty's will be on Friday I need I need to go ahead and schedule the stream but it's gonna be Friday around 6 p.m. [Music] interesting question from Pranjal hi CJ when you went to a hackathon last time what did you build how many think what was the last hackathon that I went to mmm it might have been one that was for name calm so name calm is a website where you can buy domain names but they have a hackathon called hack the dot where at the beginning of the hackathon they present a unique domain name and everyone has to build an app around that domain name and then whoever wins the hackathon gets to keep the domain name trying to remember what the domain was last time I think it was jazz-hands dot consulting or something like that we made like a really dumb app a more legitimate not legitimate but a longer hackathon that I went to because typically the hack the dot hackathons only last I think like two hours but I went to a 24-hour hackathon that was hosted by mando robot in Avery Brewing Company I'm so there they make beer and they're based out of Boulder and they had a hackathon where they released some data from the tap rooms at Avery Brewing which was like what beers are on tap how much beer is left that kind of thing and he had to build an app around that so that one was fun yeah cool yes and Iran's saying get rid of the Box shadow when clicking I think we've done it boom yeah Greg is saying sound types not aligning on the bottom is making me OCD I think you're right let's see if I do justified content space around our space between I know that does that space around not quite this could potentially be a use case for grid I could have a grid with two rows and the the section name appears always in the bottom row yeah you're right Greg that's that's very it's not the best quick stretch hmm and my year ask the question finally caught your stream what are your thoughts on felt um actually I think I answered that during was it like it might have been a morning tea or something like that but check out search my channel for spelt I posted a video on my thoughts on it I think it's it's really cool I think most frameworks didn't go are gonna go in this direction in the future yeah [Music] Oh Spacey has a suggestion could you relatively position the button then absolutely position the small text at the bottom you actually I think I can't do that so let's just say section title and we could do position absolute bottom zero well will that work with this thing as a flexbox let's see and then now this has position:relative and if we give this small a class of section title yeah that puts it all the way at the bottom cool and so instead of the bottom what if we did like like three pixels off the bottom 100 pixel yeah and actually we should probably do it relative because these things resize you there we go yeah so they all should be lined up and now they all kind of like resize - well you okay I'm gonna hide the chat so I can code cuz I've been uh just reading the chat and not coding so the next thing I did want to do was make these a different color maybe I should just get a color palette cuz this yellow and this red are really harsh that's site coolers something like that a super-fast color stream steeps color schemes generator generate no tutorial okay let's explore and let's find some color themes that are like red and yellow based or that have some reds and yellows in them mmm I kind of like this one you this one's cool too you mmm you let's go with this one oh this is based off of slack wait no this is just an ad for slack but I think I like this because I could do the background as purple and then rotate through these three colors yeah background is purple the color is gonna be like this yellowish pink I guess could be the the outline and then we could rotate between these two greens I don't know I want something a little bit harsher because this is these are like lighter lighter colors [Music] search for things that have yellow in them yellow and black actually I think I can I like choose this one I think I can lock the two colors and then generate does this app do that yeah so let's lock this red and lock this yellow and then generate a new color and usually they're they're complementary kind of like that one oh no it didn't work go back go back you yeah I want to lock this yellow in this red generate I like that one we're gonna go with this one okay so this is going to be our red color so anywhere we have red you yeah yeah it's just it's just just here and then anywhere we have yellow we're going to use this you I think I have that in my global CSS too I'm actually going to get rid of the color yellow in my global CSS and set the color here in the container here we go it's like a lighter yellow and then now we can rotate between these three colors to be the the background color you okay so let's do this we'll say colors is going to be an array with that one that one and that one let's get another one ooh this could be our black color so I think in our global CSS is where we set the background color let's make it this like slightly slightly black you you hey this is another interesting color so we'll put that in our colors array and like one more that's an interesting color too oh no it my my yellow went away okay lock these two colors generate okay that's a cool one okay now that we have these colors we're going to rotate through them for the for the background of each thing so on the sound button you yeah the interesting thing about this though is I don't think I can do a custom hover color like I think they'll all be yellow when you hover over them and that's okay but I can do a computed style based off of a variable so if you look at the spelt examples animations actions classes so you can you can bind a clasp I don't think I want to do that though I think I want to just directly set the background color see other styles anywhere styling let's just try I think I can do just like a style attribute do you like a template literal maybe let's just try saying background is colors at zero let's just see if we can do that that works cool so instead of doing at zero we kind of just want to rotate through the array so if we grab the index we can like mod it so if we do we'll be I mod colors that length we don't want that we want that for each section so we'll use the section index cool that's an ugly orange so let's find a different color for the art actually all of these colors are pretty ugly I guess if we change the color to be black I'm gonna get rid of that second color cuz that that just doesn't work still don't know how I feel about this okay look at the chat see but anybody has any suggestions [Music] where are we Gregg asks will the keyboard shortcuts be auto-assign yeah so I'm just gonna say like this is QW ERT I'm just gonna like go through the keys so that it's just like it lines up with the keys on the keyboard yeah matteo says have you seen that Google will drop Java and start working on flutter in fuchsia what are your thoughts about it I haven't seen that but I did know that I think flutter is it fluttered we will made another native Android language for you what it was but I'm pretty sure that they were saying that that's gonna be the official language for it going forward but yeah I don't know much but much about it Hakone is asking what's a good source for a quick start on view check out some of my videos I have like how to build it to do app with view if you search for a cat of mind on YouTube he has a full video series on the basics of view those are really good yeah my ears saying is it just me or autocomplete first felt envious code is super annoying hi I haven't I guess I haven't noticed it I mean I think in our script file we should I was getting autocomplete yeah because if I do like audio it's still giving me like script autocompletes I don't know Danny is saying gotta use from the CSS FAR's I guess we could have done that we could have defined some variables at the top level and then reference them this seems to work though yeah spacy is saying could you construct a new audio object per click to allow music and spooky noises to play at the same time I could I don't think I want to like I want more on it to be so that when you click a sound that's the only thing that's playing Daniel is saying keep the background color as black but only change the color pop property let's see if we made this color instead and it's really hard to see we could choose some brighter colors though you you yeah like this on top of black should be pretty visible wait what's that first one visible not very visible okay we're gonna replace that one with this and see what looks like that's visible give me another one this will look decent on top of black yeah that works Oh I think this will look okay on top of black quick stretch you ah yes wherewhere was it from jitesh Kotlin is the new language for android yes Kotlin was the one that I was thinking of oh and hello Amy amy has some suggestions slate-gray for the background medium till for the Box accent in light gray for the button colours but slightly different for each like a slightly different gray for each I like your suggestion but I think it's too much code for me to right now so we'll just see how this works this goes yeah I'm okay with this this is this is fine I guess we'll add let's add like one or two more colors like this one okay we could I guess we could do it that the the border and the shadow map the color of the button yeah I guess the issue here with on hover we actually want the what we do want the color to change to black and this inline style is overriding our hover class so let's do this probably a better way to do it but yeah this makes it so that the text is black when you hover okay I'm not gonna I just been too much more time on styling let's look back at my readme and see what else I wanted to do yeah press the keyboard press keyboard to play a sound so what I want to do is assign keys to all of these and then press the key to be able to play that sound okay what I should probably do is as I'm going through the sections I should assign a key um to each sound so that way it'll be easy to find the sound based on the key and I can actually display the key on the button okay so here's what we're gonna do we're already mapping over the sections to get their names so we'll just map over the the sounds inside of them to give them a special key as well so ultimately this map needs to return what it was returning before but now that we're already iterating we can now iterate over the sounds inside of a given section so we can say section [Music] sections no sounds at the given section dot for each sound and then we want to give it a key so we can say like sound dot he equals something like Q and then we'll also have something like keys at Q equals sound so when a button is pressed we can immediately reach into that keys object and grab the sound that we want to play yeah let me figure out what keys we're gonna use I think my whole apps gonna break let's go ahead and just make this keys be a empty object for now so I want to do qw e RT yeah so five across five five well it won't exactly match up with the keyboard I think I'm just gonna do the the QWERTY keyboard all the way across so it's gonna be like QWERTY and then across like the top row and then go down to the next row yeah I think that's what I'll do so let's say I want to type out all these keys what's the easiest way to get the QWERTY layout in JavaScript do I have to type them all out I just might q I have two wives I [Music] II a s d f g h j k l o some of the thing I could do start with the numbers than a yeah I could do that to two numbers one two three four five six seven eight nine zero I don't know how many sounds I have but I think that should be enough let's take a quick stretch hmm Danny has a good suggestion though move the pink and the purple further from each other so let's see which ones are pink and purple oh you're right yeah so music in stings so this will be 1 2 3 4 so 3 & 4 I need to switch one two three four so yeah let's put this one like after here we go so music stings and then swells I might even switch well that's fine that's better though okay and how many of I have five times four I have twenty sounds so technically I don't need this many letters I only need up to like P will do that okay so here's what I'm gonna do I'm going to didn't want to do that I'm going to wrap these in quotes so we have all the strings okay so now I got a bunch of cursors we're gonna wrap all of those in quotes so we have all of the keys and then as we're iterating we're gonna put them into this Keys object we probably need a counter of like which key we're on so let's say like let current key starts off at zero numbers gonna gradually increment it so we'll say sound key is going to be key board at current key and then keys at the current key he's at keyboard current key equals the sound cool and then we'll say a current key plus plus so now we'll have an object that has the letters with the reference to the sound next to each one so we can instantly play that sound and then now each sound has a key property on it so we can display that key on the button so let's do that right here we'll do you want file name and key and for now we can display the key there you get a cup give it a custom class of heat and then let's do something interesting so let's give it a font-family fix like fix with is that a thing no space ma no space and font size very very small too small and let's put it at the top of the button so we'll put it there and we can do a very similar thing like we did with section title so we can give it a position:absolute and we'll do top one view width so that'll put the button the key that it is at the top cool let's make a little bit veer bigger yeah you people have some suggestions I could just have a big string instead of having an array that is true here I'll copy this I do need to keep track of where we are in that in the in the keyboard though so I I don't just want to you I would have to do object keys that length to figure out where we are and object dot keys I mean it wouldn't make a difference here but having this variable means I don't have to call object keys every single time instead of this for each so I'm okay with the current key variable yeah okay yeah now let's make it work so we need an event listener so like yes on I think we'll just do yeah like we rinse felt but I think we can also just say like document dot add eventlistener is that a thing like you wouldn't really ever do this in view you would have like a top-level listen listener on the top element but this gets turned into raw Dom code anyways let's just do it so we want he down okay so now yeah any any key that I press will trigger this and so this has a property called key so I can say well is gonna be tricky I don't know what section it is I need to I need to grab the the section so when I put it on keys I need to put it sound and the section name like that okay so here I can say play sound with let's grab the keys so we'll say he's at key yeah so sound is gonna be keys at a key so that's going to give us the thing inside of this object and then we need to do it's gonna be like sound let's let's do structure it we want the section and the sound and from the sound we want the file so here I can say play sound with that section and that file the other thing though is though I kind of I want to have that animation right so I think this should work so if I do like yeah that was one two three four five six seven eight nine what is nine it's just a hit so that works but I kinda want the animation to play whenever I press the button so can I like set the active state on an element yeah and good call sandy rasa sayang uppercase the keys you were right let's actually just do that in line here because the key as it comes across in the event is lowercase but let's just do this that to uppercase nice we'll increase the size just a little bit you merely see it you okay yeah I want to apply the active class whenever I press down what's this this one hi I'm CJ welcome to hot code the show with hot code and even hotter wings let's just add this real quick will do if they press the spacebar we stop all the sounds what is the spacebar is literally a space code is facing I'm just gonna do this we'll say if a dot key is equal to the empty space then return audio dot stop pause so if if we press the spacebar let's pause it and then reset the time of the audio so I think I'm gonna do audio dot current time equals zero so it goes back to the beginning okay yeah spacebar kills it so okay Spacey is saying call focus on the element and then make the CSS select focus as well as active oh actually I could do a class binding yeah I could do like a set timeout so like bind the class to be active yeah okay so sound button active is here but I'm also gonna name this like sound button dot active so this is gonna be a totally separate class and then when you press the key down I can set like current button actually is it won't be yeah I want some button active I want these properties to apply to sound button active as well so I'm going to do this here but when they press the sound I can have a property up here that's saying like sound playing yeah or playing sound so I can do let's do this let playing say current sound current sound is initially nothing but then I can have a class binding on this div here there's a whole lot going on here let's let's send in some stuff that's that's not good I don't want that okay but I believe I can do class sound button active and that's going to be if current sound is equal to it's equal to the key because I'm destructuring it so I want to put the whole sound in there I guess I could just use the name they all have unique names so if current sound is equal to name then sound button active class will be applied to the div and so what I can do is in this place sound event but we're not passing in the name there I really only want this to happen when when it ski down so right here I could do current sound equals that name and I can D structure it here and grab the name so if I press 2 it's whoa yeah it's active but I actually do want to I probably want to do a set timeout to remove the active class from it automatically so let's just do a set timeout of like 500 milliseconds and then set current sound back to nothing okay so even less than that 100 milliseconds see like cool and hello I ollie who says it's 6:30 2:00 a.m. in Egypt that's awesome good morning um yeah spacey says that class in taxes so nice it's pretty sweet right so all we had to do we say class sound button active so we want to apply the sound button active class if current sound is equal to the name of this sound current sound is just a variable in our script and whenever the keydown event listener gets called we just set current sound and then 100 milliseconds later we set it to nothing so that will remove the class pretty sweet yeah I mean I don't I don't know if you could realize it but I was I'm pressing keys watch W this one I just thought of something so this technically is a loop so we could make it so that when we press a loop it actually loops the sound can you set that on an audio can you say like audio loop equals trip yeah let's do this so let's say if section is equal to loops audio doop equals true else set it back to false and do audio play after that and I think the section is called loops if we look in our sounds yeah it's called loops there's only one in there but I think that should do it so now if I play the loop she just keep looping there's a slight pause at the end but just keep playing and now it shouldn't loop any of the hits yeah it doesn't look those cool this is looking great let's look back am i read me here okay so we can press keyboards to play the sound that's great search and filter sounds that should be easy enough I think I'll just add like a little input at the top and if you start typing it'll filter over the the sound name so let's do this actually want let's just see input class is filter filter box let's just give this a style of a percent or a width 100 percent cool like 8% not that 100% I guess I do technically want my container to have some padding let's see what that will do so if I say container padding is like 20% might be too much yeah that's way too much 2% I never like pushes it down I really only want padding left and right so zero pixels top and bottom 2% left and right yeah filter box is still going way too wide I kind of want it outside the container let's put it outside the container it's just at the top and we'll put it inside a form and then like style the form to only be like I don't know like 60% of the width or something like that so we'll say filter form has a width of no no this is gonna be the flexbox oh this is gonna be with 100% display flex justify content center and then the filter box is gonna have a width of like 60% so that should put it in the middle whoa what's happening there we go so yeah now it's now it's in the middle yeah and then we can give this a little bit of margin like pushes down a little bit let's make our boxes a little bit smaller so they stay on the page do you like 9 view eight view it yeah and actually this this might be where we we do use grid to align it as like always a five by five I don't know I'm not gonna do that right now and there is some weird scrolling issues here it's not gonna fix that okay let's give the filter box a font size of three view width should be like a giant box yeah and I want to be able to type oh good when you're typing in the filter box it triggers the sounds we don't want that so it's all left I'll have to fix that but yeah as we type it should actually filter them let's see snail is asking will I come to the Brazil ojs conference I didn't plan on it actually it's it's pretty expensive to fly to Brazil isn't it yeah I didn't plan on it it would be interesting though I'll look into it yeah yeah so I definitely need to disable a key down whenever I'm filtering but let's do this I also want to change the font inside the filter box to be the same font let's grab my font family here we go this one so if I put that in the filter box we should get a nice interesting font in here as well yeah okay so how do we actually filter the sounds if we look at the spelt examples I believe yeah we can do text input binding so we can bind the value of the input to some variable and then we need we need to create a filtered array that automatically updates whenever the the value of the input box that were bound to whenever that changes so first let's just get that balint that bind going so on here we're gonna say bind value to filter and then we'll create a variable called filter it starts off as an empty string now as we start typing it should change under the hood I guess just to show that we can put a little h3 right here with filter did I do that right find : value equals value oh is it off to the right let's put it inside the container so yeah as I start typing that variable is updating so that's good and hello Danielle welcome to the stream happy 4th of July cool ok so that variable is being found that's a good thing now we need to create an array that automatically updates anytime the filter changes so for now let's just write with that that filter would look like let's take a quick stretch and actually this is gonna be tricky because we have the sounds split up into sections yeah and we want to hide the entire section the sounds match actually that's okay because there would be nothing in that array so it wouldn't even iterate okay we kind of need to iterate over [Music] sections like this so let's say filtered sections equals this we don't need to do any of this business anymore actually um we shouldn't have to because those values are already gonna be set because they were set when the app started up so that should be fine but really we need to say yeah you filtered sections is going to be that okay and then we can say the sounds for a given section are going to be sounds at that section dot filter get rid of all this that's gonna give us the sound and we only want to return if sound name matches a regular expression with the current filter regex is gonna be a new regular expression so we want this to be a case insensitive match and this is just going to be filters so whatever the user typed in we've created a regular expression with it that's case insensitive and then here we'll say if the name matches that regular expression we want that sound to show up cool awesome yeah and so some people in the chat are mentioning it we need to use this dollar sign syntax so in in JavaScript this is like a labeled syntax but spelt has repurposed it for declaring like reactive variables because basically we want these these filtered sections to update anytime filter changes and so it needs to know that it needs to update under the hood yeah and I guess if this is the empty string then it should match it so yeah so instead of Const we can do dollar sign and now this filtered sections will automatically update so we should iterate over filtered sections and then that's going to give us section title and sounds and then now we can just do it right over the sounds did we break anything you oh here's the other thing I'm getting these like weird key errors so like in our in our keydown event listener we need to make sure that that the key actually exists in the keys object so we'll say if he's at each key so if not key Eddie's not key just return so if they pressed a key that's not one of the the sound buttons don't run that okay so now if we search for Bell I have to have to disable the sound playing cool the other thing I could do is match that sound if the section matches so let's say if the name matches or section matches that way I can search for it [Music] and it only shows the hits professors for music it only shows music so I I need to update this so that if you're typing in the filter box it doesn't it doesn't play the it doesn't use the key down he down listener to play the play the sound wondering do we have some sort of like okis event or like how can we check if an element is focused we have like refs when it bindings you so really what I want to be able to do is inside of my listener here so this is the listener that's listening for keys key down and playing sounds and really what I want to see is if if something like filter box is focused then just like return I want to be able to do something like that um yeah and so there are some other suggestions here [Music] vyas is saying make the input box or component but like technically like I don't want to have I don't want to have to click here to be able to listen for click events I want it to listen on the entire page because otherwise I would have to click back in every time to make sure that it's listening so really I just need to get a reference to that element and I can check if it is focused to search for likes felt element Ref API Docs template syntax runtime [Music] you yeah I mean I guess just do I just do a an element selector I think that's what I'm gonna have to do just use like regular Dom manipulation check if elements focus spelt you not getting good results you [Music] see auto focus yeah so I'm just trying I'm trying to see if there's any like anything built into spelt that's gonna help me with this otherwise I am just gonna use regular Dom manipulation like document active element or something like that and then that means I also have to do like a query selector to grab the input box yeah because like the thing is like in react you would create a ref and then access the ref but I'm just curious if spelt has refs Oh somebody's doing refs here is room 2018 so maybe it's not it's not for spell 3 ability I'd like this ref colons index right here rough date and then I'm guessing they had date in their script yeah and this is spelt 2.0 because you can see it looks a lot like view J s so it has like data lifecycle hooks methods spelt 2.0 used to look very much like view but the latest version 3 has changed all the syntax let's try that let's let's say let input box and then I'm going to try to put a ref on here the ref directive is no longer supported use bind this equals input box instead okay let's try it okay so now I have a reference to the input and then here I should be able to see if it's focused let's just log it inside the key down the so I have the input box and then the element is there is their app is focused function on Dom elements JavaScript Dom input check if focused I could use something like document on active element but I want to look directly at the element itself not that Detective input is focused that's with jQuery okay this equals document dot active element let's do it if input box is equal to documents out active element return and don't try to play the sound okay moment of truth it works cool awesome okay let's let's fix this this flex box so this thing is a flex box we have text-align:center justify contents Center box wrap wrap why why is there so much space between them look at the elements derivative yeah I don't I guess I don't want a line-item Center line items flex start but what's up with this big oil space in between here like I am doing a [Music] weird maybe I just need to use grid yeah what if I did this instead of making the container a flexbox I do I still want text-align:center but what if I did display grid okay by default we only have one column breed I don't know CSS grade let's look it up there's that CSS tricks article that's really good complete guide to CSS grid we're doing display grid grid template columns so really I want to do like five across and five down forty pixels fifty pixels auto auto I think there's also that repeat thing let's just do repeat five Auto so grid template columns is repeat five Auto that should give us five columns across yep that's great Oh and really just like based on the number of [Music] sounds that I have it automatically creates like a neat little grid let's make them a little bit smaller I guess is there's grid spacing right quick stretch yeah and there's a there's a chat from Spacey Spacey says you can use cones without specifying the rows the grid will make new rows to fit the items yeah and so that's what's happening here I didn't specify grid template rows and it automatically knows - just like split it into separate rows can I change the actually and so now if I did width and height as a hundred percent it should take up a hundred percent of nevermind I was thinking would taking up a hundred percent of the section in the grid that it's in but maybe not like what what if I want yeah so let's just do this let's set up the grid template rows as well okay so now we have five rows but what if I want the the item that's inside of it to take up the full area like I guess what if I didn't specify a width and a height will it just take up that section of the grid yeah it does cool that's great why is it going all the way across let's he's before people were telling me box-sizing border-box still still too much fool you okay and I guess if we made this grid um 80% height and 80% wit will stay inside seventy let's do this we'll do it both relative to the width so that way it should be square fool are they all the same size I think they are yeah thing is yeah I had I had the width as a hair percent but it goes too far oh is that because of the padding on inside my wait what shouldn't they all be the same size I guess if I give it a height of a hundred percent - then that should make us a square square grid let's do it as with so if I do with is ninety view width and height is ninety do if it should be a square that's not a square okay people are gonna make suggestions you got to make the grid element with a hundred percent I did that Vidor is saying padding yeah so I have padding on the had it on the buttons but now that I removed that there are different sizes let's see what else I had oh they have a margin - I don't need that anymore okay that's making things super weird I feel like if I if I have the same amount of rows and columns they should all be the same size right especially if okay so the container is 90 by 90 let's do like 60 by 60 and I would expect that each CEL is the same width and height because i have the the same a number of rows and columns but maybe not maybe I'm missing something you yeah okay so the grid has a width and a height what's 100 divided by 25 wait wait no 100 divided by 5 it's 20 so if I make the width and height 20 percent it should be a square right [Music] oh that's what I'm missing I'm using Auto and Mohammed just suggested AFR and I think so auto size is based on content but that gives makes them all the same width and height I think that's the winner yeah cool appreciate that yeah cuz I had it as auto which which is the site okay that's that's what was doing it let's go bigger eighty-five cool like that I really want to fix the fact that I might ride border-box I think I'm gonna have to do something like this you're to those scroll bars yes there's like weird padding somewhere I don't know okay so that's awesome now I kind of just need to make the whole thing a flexbox so that it can Center the center of the grid or I guess if I did margin:0 auto with that oh there's padding on the container okay we did it it took us a while but we got there and so now the reason I did that was if I start searching now they all align to the grid awesome cool [Music] I'm gonna do this though filter trim so that way if I accidentally type a space in here it doesn't search for things that have spaces cool and this all yeah resizes beautifully raped play the Tadasana let's do it oh no no no I got I got a better one what is it this one no no this one or this one [Music] cool alright let's look at my readme anything else I need to do okay so we can search and filter show the audio controls for loops and songs if I want to do that anymore yes we could um yeah and really it's for music because like maybe maybe we just have like a pause and play button up here um so you could pause the sound without totally stopping the sound I think that's what I'll do let's do that and let's play the song [Music] [Music] there we go someone just mentioned Centro's - for the only thing is if I set rows to 4 then they they don't have the same height and width I need the same number of rows and columns so that that's okay with me I could actually do on the body overflow overflow none overflow:hidden and then the scrollbar will go away yeah the only thing is that different at different resolutions it does go below the page so I'm okay with the scroll okay yeah play button or a pause button let's have a little button right here we can click to Oz and unpause that's the the audio Myka Dave I think there's a unicode value for like pause isn't there yeah well we using emoji I'm done with that but is there a play one yeah we can like use yeah we could show which whether or not if it's playing or or not okay so I think we can do something like this let's grab the or figure out how to do if L since felt so in spell if blocks we want an if/else block something like this but I'll say if audio dot probably like is playing I don't know we'll figure it out but if it's playing we want to show the pause emoji and if it's not playing we want to show nothing yeah this the button shouldn't even be there so I think we'll wrap the whole thing in an if yeah so how let's see if this will autocomplete for us audio dot is playing we have to google it I don't know how to check if an audio element is playing JavaScript audio is playing check if audio is playing if it's not paused if it's not paused and it's playing okay so if are we here if audio dot paws if it's not paused then we want to show a pause button why is this complaining tempted to close an element that was not open you sure about that do I need the closing tag there you let's say like I play the music oh there there there is no else that's why so I don't need to use the else anymore I just need to close out the if like that so now I play yeah there it is so I want this to have like a wit wait am i styling the right thing I feel like the the form increased whenever I creased the margin and font size on this on this button I don't that y'all just do font size [Music] okay cool so yeah these are all the styles that I want for that that pause button if it's well actually I don't even have to well I do want to I want to specify width let's see yeah I don't need with I just need margin and font size okay see this a class of pause button so if I'm playing and then I should be able to press that emoji to pause the sound but not stop it because right now I have the bass the spacebar set up to totally stop the sound but I want this to cause it actually do I what is my spacebar doing oh yeah I'm pausing it and resetting it but if I click the pause button I just want to pause it I don't want to reset it okay so we want to click on whenever this div is clicked really whenever this this thing is clicked so I think you do on click equals audio dot as so that's gonna yeah that's gonna what's going to pause it maybe we do need an arrow function okay so that should pause it but the moment it pause is that things going to disappear so we wanted we actually do want to display a play button so if we do let's play something yeah that pauses it wait not paused it should disappear the audio is paused try doing the else thing [Music] I'm I have confused myself yeah Kaizen says what's still going how long have I been streaming three hours geez oh that's a good call well no yeah Danny is saying is it because the audio object isn't is not reactive the button does pop up when we play a sound so that would make me think that it is reactive right so like when the page loads it's not playing it's not there but then if I start playing it shows up but then it doesn't disappear yeah maybe we need to make it reactive let's try that you that did not work you know what I'm gonna scrap this play pause button yeah because I've been streaming too long and I should probably go yeah I'm just gonna get rid of this it was fun it was it was fun trying but no no pause button for us okay let's look at the masterpiece that we have created we have cinematic hits or like a softer hit some ambient hum background noise if you can even hear that actually I did see something a second ago from Danny yeah Danny says might consider using V men instead of V W for responsiveness what is B man I've never heard of that view minimum vmon is 1/100 vmon is equal to the smaller a VW mdh okay I like that let's do it so where do I have VW quick stretch but hmm we're gonna go after I update this amen fontsize V men Beeman yeah I mean I guess technically our our box-shadow should be relative to the view with as well because otherwise we have some we'll have some like very large shadow is comparative to the width yeah that actually made things a lot smaller that's cool though cool I think I need I need to make the button have a background of black it was our black color this color because you can see when I do this it shines through but there is no background color on that on that sound button yeah so now it's like yeah and now I might actually increase my my well you know my my relative nests make it bigger yeah [Music] no a little bit bigger on the sound button font size that's too big 2.5 yeah cool [Music] w3 develop says kick-ass tones dude appreciate that [Music] cool okay yeah let's play this music which one thanks for watching coding garden with CJ tune in Friday for code Coty's hot wings edition the show with hot code and even hotter wings until next time no I'm not gonna in the show like that but this was fun thanks for watching as I mentioned it on Friday I am going to be eating hot wings while solving coding problems and the hot wings are gonna get progressively spicier just like on the show hot ones I actually ordered the last dab but it's not gonna come until Monday so unfortunately I'm not gonna have that hot sauce but I am going to have Blair's Megadeath sauce which is 550,000 scovilles on the skull level that'll be the hottest sauce that I try but the point of this app that I built is when I am about to eat that Blair's Megadeath sauce hot wing I will play this music yeah so it'll be fun tune in then I'm gonna I'll schedule it pretty soon and it'll pop up on the channel but yeah see you all then thanks everyone for tuning in thanks for all the questions and hanging out with me yeah so wherever you are in the world have a wonderful morning afternoon evening or night until next time here's this [Music] you [Music] you

Channel: Coding Garden

Views: 5,624

Rating: 5 out of 5

Keywords: learn node.js, full stack, coding, mechanical keyboard, lesson, educational, frameworks, web development, learn web development, debug, vscode, live coding, programming, debugging, node.js, javascript, live streaming, full stack javascript, beginner, learning, full stack web development, how to code, css, backend, html, learn javascript, learn to code, frontend

Id: Hhpefx-Sql0

Length: 179min 0sec (10740 seconds)

Published: Wed Jul 03 2019