Code Katas #1 - accum, binary-addition, century-from-year, final-grade, morse-code

hello friends welcome to coding garden with CJ in tonight's episode I am going to be solving code Wars Coty's and just kind of talking through my process so I'm gonna start with kind of like some of the easiest ones maybe I'll even solve it in multiple different ways and then move on to maybe some harder ones and also if you're watching live you can throw down some suggestions in the chat as to some Coty's that I should try to solve and also if you're not watching live there are some suggestions in the as a comment and in next week's episode I can attempt to do those Coty's as well let's get right into it I am also going to be creating it's not created yet but I will be creating a github repo or I'm gonna post all of my solutions and comments and links to the kados that I do solve so be sure to check that out when I create the link so if you're not familiar with code Wars it essentially has lots of small programming challenges that you can do to practice practice your code and they have all different languages so you can use it in JavaScript and Python and I think C and C++ and C sharp and all tons of different languages are available for you to solve your ricotta's in loading yeah so yeah also they have challenges in all these different kinds of languages so I'm gonna start at 8 Caillou which is the easiest of all they're super easy and I'll probably get done with them really quick but I think it'll be cool just to see like even with a simple problem like the many different ways that you can solve it and how you might go about approaching a problem like this if you've never really solved problems before where to start if you and I mentioned it but if you are watching live feel free to throw a suggestion into the chat as as to a kata that I should attempt to solve I say attempt I'm gonna I'm gonna get every single one let's just let's just see what this one is students a final grade create a function final grade which calculates the final grade of a student depending on two parameters a grade for the exam and a number of completed projects the function should take two arguments exam grade for exam projects number of completed projects from zero and above the function should return a number final grade and there are four types of final grades I mean it's B I think it's a basic grading system I don't if there's anything special about it 100 if a grade for the exam is more than 90 or if a number of completed project is more than okay so it's not just like computing the average it's like you also have to check the number of projects I don't know let's do it it's probably gonna be like fairly easy but let's do it one thing to do is I'm gonna actually yeah I think I want to code it locally actually maybe I think I'll just copy and paste the code in locally so um I can upload that to to github okay let's get started question in the chat does this work similar to hacker rank companies can see your profile or just for users to stay fresh I think it's mainly for you to stay fresh but let me see like if someone were to view my profile like and was not logged in yeah I mean they can see let's see they can see my progress they can see my leaderboard position yeah so I mean I'm thinking like if if you completed a lot of these then it wouldn't hurt to like throw this on your resume yeah then if you go into Coty's can you see my solutions I think if you're if you're logged in and you've completed that same kata you can actually see my code in my solution yeah you can see all the ones that I've completed I actually like I myself don't don't spend too much time on the site but I do recommend like when I was teaching at galvanize that my students do it all the time take a quick break we are just getting started 100 emoji quick tip if you are on a Mac you can do command control space and that opens up the emoji menu 100 I think there's also if you ever watch West bosses videos he has a I don't know if he's on a Mac but he has a tool he uses that'll just like insert an emoji anywhere on the machine okay let's do this final great okay and also I'm gonna zoom in a good bit so welcome Bob welcome to the chat let's just start at the top there are four types of final grades 100 if a grade for the exam is more than 90 or if a number of completed projects more than 10 okay so I'm just gonna start there and like just very simply kind of like right out in code what this is saying so this is saying if the exam grade is greater than 90 or the number of completed projects is more than 10 then should return 100 okay and then if yes that should be pretty easy so if a grade for the exam is more than 75 or the number of projects is minimum five so greater than five yeah and you'll notice I'm not using an if-else here the main idea of being like if this if blatt if block catches when it returns the function is totally finished so it won't even look at the code below that so technically I could put like an if-else but don't really need to we're gonna return 90 and then we'll say actually let me copy this because then I can fullscreen that yeah look at that and then throw some comments up there so if a grade for the exam is greater than 50 and if a number of completed projects is minimum 0o is minimum OS can I not see it is minimum minimum - I couldn't see it for other I guess it and copy it so a project is greater than 2 then return a 75 and otherwise we're just gonna return 0 okay I think we have satisfied the requirements let's run the example see what happens run sample tests those two bests and so the way code Wars works is you can see some just a few sample tests down here but then when you do your final attempt it runs it against a lot more tests to run it against different test cases yeah and most and most good Coty's will have the test right there so you can actually read them I found one earlier where they didn't have any tests written down here because you can you can create your own Coty's and it has like some example code but if you don't fill that in then people can't see what the actual tests are but most most good ones have it all right should I attempt it actually my kinda tip did here's what I want to do I want to I want to play around this locally and like maybe write it some other ways let's do this so in here I'm gonna create a new file let's call it final Gradius and then we'll have this this function final grade and then we'll test it a few times actually you do this so I think built-in to node is this assert and we can just use that acquire assert so I'm not even gonna bring in a test library I'm just gonna say log final grade 112 is equal to 100 and we're gonna assert that that is true I think I think that's how it works I don't know let's not use the service let's just log it maybe we'll come back to that so I'm gonna log that that should law that should log true if we're doing everything right and then this with 85 and 5 should log true if I compare it to 90 all right let's run the code so if you've never written JavaScript and ran it locally you can use node so I have this file called final grade Jas and in my terminal if I go into that directory and then just type node final grade it'll actually run the code and so notice that it logged true because our code is working so Christian mentioned he started word values today maybe I'll check that one out can you post a link in the chat I guess you don't want me to solve it for you or maybe I mean I think here's the thing like even with something like code Wars like even if you do solve it if you come back to it like a month later or two months later it's good to just practice and make sure that you can just still just do it from scratch like even if you have seen the solution before okay let's think of some different ways to to write this okay I think I could like kind of get functional with it here's what I'm thinking you we have a function that basically does this test inside of it and returns a hundred hmm I don't know let's see I thought I was going somewhere with this I mean I may not I may just choose another one to solve um but there's gotta be more than one way to solve this right so I got my if statements I was thinking like a lot of times problems that are solved with a lot of if statements you can use like an object and store properties in the object and then their values are like the result of an if statement I'll solve one later that does that okay let's keep moving so that one's good I'll put it in the repo and upload it soon let's see if I got it right attempt oh I felt expected zero instead got seventy five expected zero instead of got seventy five so if we look at the instructions it could be that I have to do greater than or equal to five and greater than or equal to two I think that's probably where I went wrong because it does say minimum to not really clear on their on their Burbidge let's try it attempt expected zero instead got 75 expected zero instead got 90 okay um let's look at these other kept test cases so if the exam is 99 should return 100 if the exam is 10 in the match should return 100 if the final grade is 55 which should solve up satisfy this and three then we should get 75 if the final grade is 55 and zero because projects would not be greater than two it returns zero it's tricky expected zero instead got 75 so for whatever reason maybe this just needs to be oh not or no what should be or oh okay so let's let's read the read the read the description again because I think one of these might need to be need to be an and instead of an or if a great for the exam is more than 90 or I think that's my problem if a great for exam is more than 75 and if a number of completed projects is minimum 5 so this actually needs to be and I read that wrong read the instructions always okay if a grade for the exam is 75 or more and if a number of completed projects is minimum 2 and I think I'm gonna get rid of the equals zero in all other cases all right attempt expected 90 instead got 75 I think that's where I need to use greater than or equal to I hate to just plugging things in to see if they work though like I wanna I want to solve the problem exactly as they describe it but for me minimum 5 is ambiguous it's like does that mean greater than or equal to 5 or greater than 5 its I mean it sounds like greater than or equal to 5 right if it's minimum 5 and minimum 2 done already try that ok that worked all right we're off to a great start a problem with simple if statements and I got it wrong like 4 times but you saw my process and my main issue there was I didn't read the instructions correctly alright submit final awesome let's find another one and if you're just joining us live in the chat feel free to throw a suggestion as to Akata you would like me to solve let's do one more 8 Caillou and then I'll move on to 7 Caillou century from year the first century spans from the year 1 up to and including the year 100 let's take a quick break tonight I'm drinking peach pear the crop mmm oh yeah and if you um you didn't see my livestream from last night check this out whoa I made this this desktop tool where I can actually like highlight a specific section of my screen it's pretty sweet I can do a keyboard shortcut and then it pops up I'm gonna try to use that pretty often I should have used it earlier like talking about my code well you see we have a function with two parameters and we have this if statement here I don't know it should come in handy yeah let's do this one so this the first century spans from the year 1 up to and including the Year 100 the second from the Year 101 up to and including the Year 200 etc given a year returned the century it is in input and output examples so this is the 18th century this is the 19th century and the 1901 would be the 20th century is that what it say yeah I think it is what does kayu mean again it's it's the difficulty but I think both kayu and kata are like this might be from zen and the art of war I don't know maybe I'm mistaken let's look it up yeah so Chi Yu is a Japanese term used in modern martial arts as well in tea ceremony doesn't designating various grades levels or degrees there you go and then I think kata is like a practice detailed choreographed patterns of movements practice either solo or or in pairs so okay let's do it and so there are a lot of different ways to approach this you could you could use just like if statements and like if it's between this number and this number return this century if it's between this number in this number in that century however that's gonna be a lot of if-else statements so here's what I'm thinking we do it's like copy our examples so we can take this number look at the first two numbers well I guess first we look at the second two numbers if the second two numbers are greater than zero we're gonna add one to the first two numbers right so if the second number is greater than one so if you add 1 to 17 you get 18 second numbers are zero so you leave the first two number you just get 19 second two numbers are 1 you add that to 16 you get 17 second two numbers are zero so you just returned the first two values of 20 that should do it so here's what we can do we can say century is going to be the year divided by 100 and then take the floor of that and let's just let's just see what we get if we were to do that so whoa so code words is apparently locking a bunch of stuff so I'm gonna do that it's gonna open a new tab and then open the dev tools so if we did like 1900 divided by 100 and we took math dot floor of that that gives us 19 so by doing this we're gonna get those the first two numbers and then would we consider this the decade and this is going to be the remainder of the year divided by 100 right so 1900 mod 100 is 0 but 1901 mod 100 is 1 so that will give us the decade and then we'll just say if decade is greater than 0 then we're going to return century plus 1 otherwise we're just going to return the century yeah let's try it out I'm just gonna do the that's weird let's do the the local solutions first run sample tests it's passing is anyone see any issues with what I've done and can we clean it up so the century is I guess would be a better word for this not century not I mean because technically if it's not the century because we might have to add one to it I don't know um here's what I'd like to do I think we can maybe write this all on one line it might be a little ugly but I think we can do it so do you century from year that's a yes here's what we do so it will say if the decade is greater than zero we're going to return actually let's store the well you do it on two lines so we'll return century plus one hey Brooks welcome to the stream else return a century yeah am I going to create a clan I guess I could we could do like a coding wars clan I think I swapped those the ternary yeah so this says if the Year mod 100 which is the decade is greater than zero then returned century plus one otherwise return century and then we could like throw that in there too yeah one-liner it's ugly I would never write code like this if I were on a team what see if it works York's Bob says we can have someone v1 numbers like see who in the coding guard guarding community can complete the most cool I'm gonna submit my solution that's a little more verbose because it's a little easier to read a little easier to understand attempt we did it all right note to self in a future episode I'm going to build a sound board so I can have like a dead uh sound or like a drum roll sound I don't think it'd be fun oh we can one on one some noobs things what Bob say okay sweet alright so we did two of the eight Caillou let's move on to seven Caillou we're graduating moving up in the world and right now I guess I'm just choosing newest we could also sort by hardest easiest let's throw my popularity mumbling let's see what this one's about oh and actually let me mean link to these in my code oh wait did I forget to press the final submit I think I did let's go back to that here oh no I guess I didn't they're mine alright let's see what's my mumbling is about this time no story no theory the examples below show you how you write how to write function acumen okay so given a string we want to return a new string let's zoom in a little bit use my fancy tool so given a string ABCD we want to return a new string that is the first letter capitalised onced the second letter twice with the first one capitalized the third letter three times with the first one capitalized the fourth letter four times with the first one capitalized and repeat I think I think that's basically all that we're doing so even like in the case where we receive a string that has like capital or not capital the output string still only capitalizes the first one all right let's do it sounds fun hmm enhance okay so essentially I need so I get in a string and the first thing that I would probably need to do is split this thing up so especially break it out into all the separate two letters and I'm just double checking like it's not reorganizing the letters in any way and if there are duplicate letters does it care about that let's see some of the examples down at the bottom yeah so like even if an input string has like 2f side by side we're still out putting those in the in the sequence that comes out of it so no gotchas there so here's my thought we first split the string into well yeah put the string in two separate letters [Music] now you know I don't think we do we don't we don't have to do that because in JavaScript we can access each individual character okay so I'll say iterate over the string and initially we'll need a place to store the result and then as we're iterating over the string we'll take the pinned the current letter I times I plus 1 times 2 the string and then we will need to capitalize the first append and we will need to append a - if it is not the last letter feeling me you with me so a place to store the result main idea is like let result equal an empty string and essentially that's going to be the the thing that holds on to that that we're gonna actually build up and then we need to iterate over the string so I'm gonna do a simple for loop let I equals 0 while I is less than result dot length I plus and then inside of there's we were where we want to do this so a pinned the current letter I plus 1 times 2 the string so like when I is 0 we want to append the letter a one time to the string and when I is 1 we want to pin that letter two times etc so we're gonna need another for loop so I'm gonna set let could use J I was trying to think of a better better variable name for it because I'll rename it afterwards but essentially this is going to be the iteration that repeats for each letter so we'll say well J is less than I plus 1 J plus plus okay capitalize the first opinion so we'll say if J is equal to these double equals is equal to zero and then we want to say result plus equals the S and I'm gonna give this a better name let's call this input and actually yeah so this shouldn't be resolved at length this should be input length because this is iterating over that input string and then if J is zero that means this is the first one that we're appending so I want to append input at I dot to uppercase okay else we want to append input at I to lowercase because there were some cases where like the yeah like this like the input is capitalized but everything afterwards needs to be lower cased yeah and then appended - if it is not the last letter that should come outside of here so we'll say if I is not equal to input length minus one because that would be the last indicee we want to say result plus equals a - like that cool let's see if it works I can think of at least five reef actors that would make this thing easier to read and then you could probably also do this with a reduce let's see what happens whoa it ran my tests why run sample tests oh I'm not returning anything okay so after the for loop I need to return result of course the last thing you always do hey it's working it then that's just for the the sample tests but let's let's do some refactoring so I'm gonna pull this down locally this is a horrible name like essentially this is an accumulator pattern like that's why they called it a cume but they should they should give it a better name I don't know let's create a cume is throw our function in there and let's make this better so the first thing I want to do is change these variable names for one right here input at I to uppercase let's let's store this in a variable because we're using it multiple times and it would make the code a little bit readable more more readable if we said like current letter and that's input at I and then now down here this can be current letter and then current letter it's a little bit easier to read right and then append the current letter I plus one times to the string so this is saying this is the number of times that we're going to append J I know I guess I plus one is and let's actually store this in a variable to let's say count is I plus one so the number of times we're gonna repeat this letter that's that variable okay and I want a better variable name for J like J is the current we call his counter let's call this let's call count total count and we'll call J counter yeah and then a pin to - if it's not the last letter if I so I mean really I is like letter index I mean really it might be could let's if we call this index it's a little bit more readable to index index index index yeah just a work let's check let's try it the really the the main reason I'm doing this is because code is for humans like let's take a quick break yeah but like we write in specific syntax but you don't have to make your code like so terse and like hard to understand like if you if you use good variable names the next time you come back to this code it's gonna be a lot easier to pick up from where you left off and like understand your thought process when the last time you're doing it which is why I like to use like very descriptive variable names okay so that works let's try to do this with a reduce okay so the first thing is reduce only works on arrays so I can't just say input dot reduce so I actually need to turn it into an array so here's what I'll do so this for loop is essentially going to get turned into input dot split because input dot split will take a string and let's actually see this in action so this bigger so if you yeah let's say we had a string like CJ and I say dot split this gives me well know pass in the empty string yeah if you pass in the empty string that says essentially split this string into an array where every character is a value in that array so that's what I'm gonna do so split the input on an empty string and then and actually before we turn this into a reduce let's just turn it into a for each yeah so let's do that so this will become a for each for each accepts a function and we can actually call it current letter is the thing that we're getting passed in and then all of this code here it's moved into the for each actually before do that let's just write it separately so that's a cume there and then we're gonna rewrite it below it so you can kind of see like the before and after so here to iterate over the string we're gonna say input split on the empty string for each this is going to give us the current letter and then we essentially want to do this stuff on the current letter but you'll notice we need access to the index for each actually gives you the index it's the second parameter so we can do that and this should work in the same way let's see if it does yep it still works and then now we want to turn this into a ruse reduce and so the way a reduce works is it will take an array and turn it into a single value so the single value that we're trying to create is the string so that becomes where the accumulator starts so essentially we want to return this whole thing and we want to reduce it but now not only do we get the current letter we get the result as the first parameter and this is essentially the we'll call it the accumulator well we'll call it result because that's what it is inside of there and the second parameter to reduce is where it starts and you'll notice here we're starting it as an empty string so that's gonna be our our second parameter let me get rid of a return result and you're at that and inside of here essentially we operate on the accumulator and then we need to return the accumulator wait is this gonna work yeah we operate on the accumulator and then we return the accumulator and then the next time this function gets called result will be the previous value that was returned so the first time this runs result is going to be it's going to start as an empty string current letter is going to be like let's say we're doing this for ABC current letter is going to be a Index is going to be zero so total count is gonna be one well do the thing here result is that empty string so we append just the capital a the input isn't the index isn't the last one so we return capital a with a dash on the end of it and then so result now becomes capital A with a dash and then current letter is going to be B and so total count will now be two will do a capital B and then a lowercase B and then append a dash to the end of it and then we'll return that string which is now capital A - capital B lowercase B etc and so this reduce is doing exactly the same thing but it's just doing it in a more functional style let's try it with this and see if it works sample tests it still works cool thinking something else we can do is like instead of using a for loop here is there a way we can iterate from 0 to the total count I think there is like we could we could do a you do a for each I think yeah because if you say I think new array and then you pass in the length that will actually give you an N array of that length so let's so then you could do like a for each on it but like you don't use the values you just use the indices yeah let R equal that and then r dot for each let's see this even works will this log undefined ten times nope it only loves it one time so that won't work the way we want it oh well I'm gonna leave it like that but that was a fun exploration of converting a for loop into a for each and then converting that for each into a reduce alright anyone watching in live do you see any issues with my solution like is there something that you would do differently and actually one thing you can do on code words is after you submit you can look at other people's solutions to see how they did it too so I think we'll do that all right attempt we did it submit final it's happening Brooks has a potential solution what is it but Brooks so yeah if we're looking at some of the solutions here this person is using a map and then returning ooh repeat I have never heard of repeat did they write that no they're saying letter dot repeat huh hey whoa no way look at that it's built in won't let you said links why not let me see if I can change the settings okay cool I'll open slack can see yeah that's really cool I think is that yeah that's what I'm a string does it work with a longer string Wow so let's search for a string repeat that's awesome how long is this existed yes 2015 so string doubt repeat was introduced in Agnes crypt 2015 that's cool did not know that existed learn something every day checking my messages from Brooks let me know when you when you send it Brooks and okay I think you sent it here let me open it on here so the stream can see it cool but string repeat is a thing and that would have made our our solution a lot smaller because we wouldn't have had to do that second repeat well I started that second for loop all right it's solution from Brooks here we go it's empty did you did you save it all right I think the streams delayed a little bit but Brooks maybe click Save and then all like refresh or something like that cool so goes over the string length interesting yeah and so instead of appending the - like we were doing they're using results adjoin cool here's here's the thing though so I haven't really talked about this yet when you're solving a problem like this it's cool to use built-ins but the one thing to think about is how much more computations like how many more yeah how much more just how much harder does the computer have to work to solve your problems so when we do string dot split that's one iteration of the whole string because to take a string from a string to make it into an array you have to iterate over it so I think that's that's one for loop and then there's a map and a map will iterate over the string as well so that's another for loop know that it's not nested so it's not if you're thinking about complexity it's not like N squared it's just a for loop and then another for loop but it is still more than one for loop and then this repeat you could think of like a for loop that starts off small and then gets longer and longer and then a join is going to be another iteration of the string because it has to look at every one out of the string of this new array we created because it has to look at every value in that array to put a dash in between it so this is 1 2 3 and then ish for loops and everything about my solution my initial solution it's just 2 for loops technically this would be probably considered N squared but the thing about this inner for loop is it it doesn't it's not always the length of the whole string it's like only a little bit smaller like smaller - bigger - bigger just like not quite in squared but that's all done in one iteration we're not doing splitting it then mapping it and then joining it which is three iterations all right here comes bricks a solution so we've created multiple functions the first one we'll split it to turn it into an array so that we can use reduce we are then accepting in letters which is what were this is our accumulator that's the thing we're building up this was result in our example character is each individual character and then we're calling letters dot concat because letters what does letters start off as so I'm having trouble even understand standing what this is doing is this calling letters dot concat yeah cuz you try to do it all on one line okay so letters does that mean letters has to start off as an array though so you're using this reduce but you don't have an initial value orders can catch exists on a string string Khun Kat okay so it concatenates the string to the calling string and so if you're using a reduced and you don't pass in an initial value it's actually gonna start off as the first value so this will clone characters gets passed in an object that is the current character and the number of times to repeat cool let's run the code so one thing you're not doing is so we need to capitalize the first one and then join these together by dashes so it needs to actually be say cook break mm-hmm so your solutions missing a few things but I I like where you're going this is very functional approach so needs to be be be and then CC C and then D D D D D D like that so you need to capitalize the first one and add dashes in between them cool and and actually this is where we could use repeat instead of clone characters like here you could just do charred repeat I yeah so that's the works cool but we need to capitalize the the first one and join it on on dashes what if we say plus - okay when you get rid of the last one and then we want to capitalize the first one so we'll do it so this this is tricky to to do a to capitalize the first one because it gets if you're not passing in an initial value this is always gonna be like lower case so I might do something like letters danke char dot to uppercase plus charge to lowercase repeat I locate okay so now we're there but we don't want to append should I keep this a one-liner is he we we don't want to append the I if I is equal to the length so we could say plus we'll say if I dot length is less than string dot length minus one then we will append that otherwise append nothing all we get is a - let's put oh let's put this this whole thing in parentheses if not I dot length just I we did it okay so this is a one-liner and I don't like it it's really hard to read did you really hard to go back to you cool thanks for your contribution Brooks um let's see how long have I been streaming close to an hour I'll say we'll do one more let's let's bump up the the difficulty let's do a six Caillou and see what happens decode the morse code okay in this kata you will write a simple Morris code decoder while the Morris code is now mostly superseded by voice and digital data communication channels it is still it still has its use in some applications around the world so my thought with this is like really the only way to solve this is to have a lookup table so you have a list of all the possible letters digits letters and digits and their corresponding dot dot dash or their corresponding Morse code value and then you could basically map this array of Morse code on this string split it on spaces and then each one of those things go to your lookup table to find out what the letter is oh the Morse code table is preloaded for you as a dictionary feel free to use it okay yeah that's great let's do it sounds easy enough you can use it like this Morse code okay so here's my thought and we'll copy this zoom in a little bit fullscreen it okay so what we need to do is we'll split this split on spaces and then for each code look up in dictionary actually I think I think this could be a map all right let's do it so my thought is we take Morse code we split it on the space and then we map that so this is gonna be the code and we map that to Morse code at the code lookup table like yes and thanks thanks for asking Chris so in other languages a JavaScript object is really like a dictionary the idea of having like keys and values so if this is Hey Jude you can think of it the lookup table to say like the well we might actually you can use es2015 syntax to say this but you can say the property at this value is the letter H and so this object is essentially a lookup table because if we get the property with this value we're gonna get an H and then the property at this value is a well need the code there II [Music] oh no sorry the property at dot is an E and then the property at that is a Y and you could imagine entries for like every single letter so like every every possible Morse code code is going to be a key in the object or a property in the object and the value is gonna be the corresponding letter or digit and so yeah it's common to call this thing a lookup table or a dictionary you might hear it called a property bag a lot of different words in JavaScript it's just an object but if you have something like this and I'll do it D structuring might be available how like Morse code is going to yeah not quite sure what you're saying Brooks if you could clarify and III can't think how we would do this with restructuring okay but we've looked each one up and then we just want to join that again back on the empty string looks like it's broken let's see and see what we did wrong oh okay what's the strike I had to get rid of that code that was above it expected Hey Jude instead got Hey Jude oh oh that's tricky so it each word is separated by like a few spaces interesting okay something a little bit trickier than I thought so yeah let's think about this and actually let's see the examples so we know how like how many spaces are in between so this yeah it so it is an object and we but my thought is like how how would we destructure Morse code because you need to be able to say some prop equals Morse code however the prop is actually gonna be like dot dot dot so you could use there is a way to say like D structure this value from Morris code and set it equal to like a and then you have access to the variable a which is the value of that inside of the object but I don't know I'm not thinking how we can do that dynamically can we see the object yeah I'm pretty sure it was like what I was kind of like writing out there but yeah I think if you log in here it will it will show it in the output yes like this so keys are the code and then value is gonna be the character or a number or letter Oh SOS that's cool okay so I think we need can we split on one two three three spaces one two three so if we split on three spaces that's gonna give us each individual word and then each individual word we're gonna need to split on individual spaces and that we want to map with the code like that first says it looks horrible it did look horrible yes yes okay so here's my thought if we take Morse code and we split it on three spaces that should give us each individual word and then if we take that word and split it on a single space and then create the the code out of that and then join that on the empty string and then join the whole thing on spaces maybe it'll work let's see what we get it worked this is horrible this is so bad let's let's write this out and not just on one line Morse code yes okay so that's the one-liner but let's not do that so instead of using these like fat arrow one line functions let's just make them actually have a body and a return so that'll do that and we're going to want to return this and then this similarly and we're going to want to wait here and we're going to want to return that so this might be a little bit easier to read but essentially this first split is splits words at three spaces and then split word into individual codes and then convert code to letter or symbol letter or digit or symbol and then join all of the letters into a single word and then join all of the words into a single sentence with spaces so that's what this this one-liner right there is doing is doing that can anyone in the chat think of maybe a different way to do this I guess could we use a reduce for this does it make sense to use a reduce actually I might instead of using a join here I think I would use I would do a reduce here so yeah let's do a reduce and [Music] essentially we're gonna call the word is going to be the coated word and we're going to reduce that down to a real word in the real word starts off at an empty string and then we're just gonna return word plus Morissette code because that will take a quick break yeah so this will take the coded word and they're like each each code in that word and reduce it down to a single string that is the whole word with their actual corresponding codes or letters digits symbols that kind of thing let's see if this works yeah that works and as I was mentioning earlier by doing this that's one less iteration right because that join is gonna be a whole other iteration over the array but now that we're kind of handling that inside of the reduced it's one less iteration I'm thinking we could change this map into a reduce also the only issue is we have to say like if it's if it's the last word don't append a space to it which just it seems a lot cleaner if we just use join I don't know let's let's let's just let's just do that just for just for fun so essentially I want to turn this map into a reduce so and this is gonna be reduced down to the sentence so we reduce and then our accumulator is going to be called sentence and our accumulator starts off as the empty string and we want to return that plus a space but we only want a space if the index is not the last index so in there reduce we actually get access to the index also and so I'll say oh we get access to the index but we also get access to the code word array and we need that because we need the length of the array to check and see if we're at the end of it because remember Morse code is the whole string so we're not actually storing that in a variable so we can use that here so here we'll say append a space if and only if the index is less than code would code word array dot length yeah a pin to space otherwise upend nothing wait oh sorry otherwise I paid nothing all right let's see if this works reduce inside a reduce and then we're no longer joining expected Hey Jude instead got Jude okay so let's see oh I need to return sentence plus this thing because because it's the accumulator we're adding ratting on to it so we are adding the space so I did this wrong so I think I need to do length minus one yeah so we need to return sentence plus coded word dot split and then make sure that it's less than length minus one cool well I'll leave those comments in there I'm gonna submit it without comments but I like this solution the most because it's the least amount of iteration can you send a link to one of these challenges like you you have a challenge that you want me to do possibly but yeah I mean if you do feel free and actually so Brooks said he couldn't send a link you might try adding it as a comment just actually just put the the name of the piccata and I can I can look it up based on the name check this out so yeah just send me the name of the kata and then I'll look it up okay that's working attempt no we failed so three of them failed what binary addition um I'll look it up but send it to me like go to it and then send it send me the the exact this is called the slug so is it like binary - edition I'll take a look however I failed and I'm wondering why got undefined undefined SOS the quick brown fox jumps over the lazy dog undefined undefined expected that's interesting so if something is not found in there then we shouldn't append the value to it what's here's what I'm thinking like for whatever reason if we try to look something up in so if we say object no if you say a-plus undefined does it say a under five it does did not know that I thought it would do nothing but here's what I think is happening like it's looking up a code in there that doesn't exist and it's appending that so we need to say if so Morse code at code or just nothing because if it didn't find it we don't want to append undefined wanna up and just an empty string let's try it no it's still filling yeah no problem Bob in all search for after this actually I think I'll make that the last Co challenge that I do I've been streaming for a little over an hour now yeah um curious why is this happening what I don't like is it it doesn't show you the input what possibly could be undefined actually let's do this I converted I converted it to the reduce that could be where we introduced some something if I just do my one-liner oh I need to put it in the function yeah so by whoa come back hello attempt no I'm still feeling got EE expected you know what it could be it could be that I'm splitting on three characters I mean three spaces so I need to be splitting on I guess it could be like three or four hmm I don't like this I wish I could see the tests honestly because then I could I could know what I'm in which case am i doing something where it breaks it ok let's see what we get what error we get again when we use my reduced version hmm got undefined e undefined expected just e okay I think I need I do need to do this or empty string let's see if we get something different instead of undefined undefined okay so that got rid of it and here's here's what I'm thinking so so the way to read these tests is got this so this is what we're returning versus what they're expecting and so in both cases we are returning something that has too much space at the beginning so easiest fix for that is to just trim it and that what trim does is it takes off any white space on the beginning or the end of a string that fixed it cool I don't like that we had to did that had to do that but it could be that maybe they're passing in some Morse code that like has some spaces at the beginning or something like that and actually let me let me add that to all of my solutions that I have here so this I need to make sure that the code actually exists so Morse code or empty string same thing here Morse code or empty string oh so Bob's talking about binary addition yes I'll take a look at that one next it might be too complex I don't know actually no I like binary addition we can know what I am what I need on this stream a whiteboard because then I could like do like - - - do you like a boolean not between a yeah I think a like a bullying lookup table with ones and zeros I don't know and then we need to trim it I'm just updating all of my solutions so potentially all will work yeah cool all right last one we're gonna do is binary addition before that let's take a quick break actually this is my longer break so I'm just gonna get up and take a quick stretch but I will do the binary or I will attempt the binary addition one as my last challenge for tonight all right back momentarily all right I'm back um I have been sitting down away too much lately like um yeah today I bought I'll show you about some table legs from Ikea but they extend so I'm gonna take this table that I'm working on right now and just make it standing height and just stand up all the time that was a lot cheaper than buying a standing desk and it should work out to be my exact like standing desk height I used to work at a standing desk bolts all the time but I've been sitting lately for whatever reason all right Bob let's find this binary addition binary - addition cool it's a seven Caillou implement a function that adds two numbers together and returns their sum in binary the conversion can be done before or after the addition the binary number returned should be a string I think even though there is a built-in function to convert it over to binary it would be really fun to write a function that converts a number to binary let's let's see what we have to do though like is it returning yes it's returning a string yes this way fun talking about binary cool so um yeah let's create a function that literally converts it to binary after I have to like refresh my memory so I did this back in college I got a computer science degree so I did it back in college but yeah let's let's let's do this so my create a file let's close these create one binary addition a s and to convert a number so the binary is essentially representing a number so actually yeah well I don't want to do this in comments let's do this in the readme binary all right so binary is represents a number with only two digits right so binary bi means two so we represent a number using only zero or one the number system that we're used to is the decimal system because we have nine different I don't want to call this digits or I'll say symbols the decimal system has 10 different symbols to represent all numbers so if we look at decimal decimal represents a number with ten symbols and those symbols are 0 1 2 3 4 5 6 7 8 and 9 and with those 10 symbols you can represent any number a million a million and one a billion a trillion one trillion 1 billion 900 77262 that is all represented using just those those digits however it's totally possible to represent the number using only two digits 0 or 1 and this is how it works so when we see a number in the decimal system like let's say we'll start with the number 10 what this actually means is this here is we we take that value and add it to 10 raised to the power of 0 and actually is that correct is 10 raised to 0 0 or 1 it's 1 let's look this up load a decimal number representation but the main idea is each place in the number is some power of 10 let's look of binary cuz I don't because it's the same for binary and decimal it's just binary is the power of two and decimals the power of ten binary representation yeah to the zero oh it's it's x yeah x not plus okay so this is represented by 0 times 10 to the power 0 plus 1 times 10 to the power of 1 and if we work this out 10 to the power of 1 is just 10 times 1 is 10 plus 0 is 10 and so you can represent any decimal number using this so let's do like 123 so 123 is 1 times 10 to the power of 2 plus 2 times 10 to the power of 1 plus 3 times 10 to the power of 0 and so this gives us 10 to the power of 2 is 100 plus 1 is oh no times 1 is 110 to the power of 1 is 10 times 2 is 20 and 10 to the power 0 0 is 1 times 3 is 3 so it essentially breaks this number down into its like it's it's constitutional part so like 100 plus 20 plus 3 and that gives us 123 similarly you do the same thing with binary so if we looked at the binary number 1 1 1 this is 1 times 2 to the power of 2 plus 1 times 2 to the power of 1 plus 1 times 2 to the power of 0 so this gives us 2 to the power 2 is 4 times 1 is 4 2 to the power of 1 is 2 times 1 is 2 2 to the power of 0 is 1 times 1 is 1 so 1 1 1 in binary is 4 5 6 7 7 in decimal cool cool right cool are we learning things fun times so the way you you count in binary is like this so zero in binary is zero because this would be 0 times 2 to the power of 0 which is 0 1 is just 1 because this would be 1 times 2 to the power 0 which is 1 2 would be 1 0 because this would be 2 to the power of 1 plus 0 which gives us 2 3 would be 1 1 because this would be 2 to the power of 1 plus 1 is 3 and then 4 is wait did we do that right yeah 4 is 1 0 0 because that's 2 to the power of 2 plus 0 plus 0 and then 5 is 1 0 1 and then 6 is 1 1 wait 1 1 0 and then 7 is 1 1 1 Wow so that's how you would count binary all right all of this to say how are we gonna do this with with JavaScript all right let's try it okay so it says we can add the two numbers first and then convert them so let's do that let's say the sum is a plus B so simple addition and now we want to convert some to binary so we'll return to binary sum and I'm just I'm gonna Google this well say convert decimal to binary there's there's a formula or there's something that we can do to actually convert it I don't want a tool I want the formula we could watch a video I don't want to watch a video the simple math behind decimal binary conversion algorithms here's an example of such conversion using the integer 12 first let's divide the number by 2 specifying quotient and remainder what what just just give give me give me the formula did you how did you do it Bob did you find a like something we can do with math to convert like each each digit oh this is what we want to do no we want to do the reverse of this though right like given 7 we need to get back 1 1 1 or given 6 we need to give back 1 1 0 converting two times ten to the power of two yeah so this is kind of I'll just explain but how can we easily convert integer values into binary numbers the answer is an algorithm called / - let's do it the / - algorithm assumes that we start with an integer greater than zero okay a simple iteration then continually divides the decimal number by two and keeps track of the remainder the first division by two okay I think Bob adjusts it described the algorithm in the chat but let's read this the first division by two gives information as to whether the value is even or odd and even value will have a remainder of zero it will have the digit zero in the ones place an odd value will have a remainder of one and will have the one digit in the ones place we think about building our binary member as a sequence of digits the first remainder we compute will actually be the last digit in the sequence cool well they wrote it in Python okay so he did a sum mod two and then the answer is the first digit then sum divided equals two and some - the answer is the next digit what let's just let's let's take this description and and do that okay okay we'll create our function binary ad takes in a and B and then we'll say sum is a plus B and then we want to return to binary sum and then we'll write a function that's called to binary that takes in the sum and it's going to return the thing in binary so essentially we need to do this algorithm and I'm gonna turn on word wrap cool so we should be able to say binary add of three and four and this should return 1 1 1 okay because three plus four is seven seven in binary is one on one all right the divided by two algorithm assumes that we start with an integer that is greater than zero okay so let's say if sum equals zero then we're going to just return zero cool all right a simple iteration then continuing divides the decimal number by two and keeps track of the remainder all right so we'll say remainder equals sum mod two so the first division by two gives information as to whether the value is even or odd and even value will have a remainder of zero it will have the digit zero in the ones place okay so actually our we need a place to store like the binary number so let binary starts off as the empty string and then we're gonna say binary equal or plus equals well binary equals binary plus remainder but that's gonna be the ones place so we need to we need to flip that because as we do this we're gonna be putting numbers on the beginning of it because we're getting each each next value okay so a simple iteration then continually divides the decimal number by two and keeps track of the remainder the first division by two gives information as to whether the value is even or odd and even value will have a remainder of zero it will have the digit zero in the ones place an odd value will have a remainder of one will have a digit in the ones place we think about building our binary number as a sequence of digits the first remainder we compute will actually be the last digit in the sequence as shown in Figure five so essentially we need to do this until I mean do this over and over again until the value is then like zero so yeah so do that and then we'll say sum equals math dot floor of some divided by two right oh no yeah and then we do this again and while sum is greater than zero truncate what what are you saying Bob and here we'll return binary will this work I don't know let's see I have might have created an infinite loop node binary no I got a may in the right directory oh I gotta save this file oh I put it in the wrong fold put it in there there you go we did it alright so let's let's say we add well zero so zero should just give it back give us back zero cool let's say we add 3 & 3 that's 6 if we add 3 & 2 it's 5 3 and 1 that's 4 because that's 2 to the 2nd power 3 and 0 its 1 1 just add to that gives us 1 0 1 just gives us 1 yeah so we did it so Bob is saying 5 divided by 2 4 is 3 instead of 2 hmm okay but I think I did it based on this I took this big block of text and turned it into JavaScript look at me but this is my solution and I'm sticking with it let's see if we did it right let's take a quick break we'll submit our final solution and then we'll end in the stream for tonight sample tests Oh No Oh bad binaries not fun I called it binary add it's call this add binary with us we pass all right I need to play a drum roll so I'm gonna find a drum roll on YouTube drum roll make sure it's not too bad yay is there like a tada sound I have no idea what this is gonna be oh it didn't nothing happened yeah that's a good one [Music] sweets all right we did it submit final I am definitely gonna do a livestream where I build a soundboard so I'm gonna have like a drumroll and a tada and I applause and stuff like that cool all right this was so much fun here's what I'm gonna do real quick I am gonna upload all of these examples from today to coding garden let's create a new repo call these code Coty's very slow sound board what do you mean like it took me a long time to press the button yeah so I do have some read Me's in here code challenges yeah so that's my notes on binary and decimal [Music] I think I'll link in here to this live stream you can go back and watch me solve them watch here cool yeah I had to find this out we could play on it yeah so yeah definitely in a future stream I'm gonna make make my own sound board I'll go up and update the readme laid me later but I'll go ahead and push this up get in it everything committed initial commit push it up to get Owen on it I thought I still had it copied push this up to github and in there you can see all of my examples well the ones that I that I solved today cool I'll throw this in the description it's also in the chat if you wanna click on that awesome thanks so much for everyone for tuning in this was the the first livestream I did in this format I think it's really great I think here's here's what I'm gonna do on this repo code challenge will say it will say like kata suggestions so if you have a suggestion for a kata that you want me to do in next week's episode leave it in here leave a link to a kata you would like me to do in the next episode so you can go into this issue and say I'll just show an example form the minimum so you can add a comment that says you should do this one like that and then when you add it as a comment somebody else could go in and like thumbs up it or thumbs down it and the next time any of them that have like a lot of thumbs up are the ones that I'll do cool if you're watching now then you know that I go live but if you visit coding garden you can see my live stream let me do that so you can see it that tomorrow at 9:45 a.m. mountain time I'm gonna be doing morning tea that's just where I browse the web talk about the latest JavaScript news and then maybe build a little something based on the news that I read and tomorrow at 6:20 p.m. is a full stream don't quite know what the topic yeah is yet but might actually be building that sound board that'll be pretty fun yeah and these are all in mountain time whatever your time zone is when you visit this website it'll show in your local timezone other thing is if you follow me on Twitter every time I go live it tweets out automatically so you can get a notification when I go live lastly if you visit pull coding garden you'll need to log in with Google but this allows you to suggest a video and other people can aboat that suggestion and it helps me decide what a future life chain should be so I'm gonna suggest myself build a sound board as a question and yeah you can click on the heart to vote for other people's ideas pretty soon I'm gonna go here in here and remove some of the ones that have already happened like I have a playlist on village is off I have a playlist on application state I might still do a live stream on vanilla je s and all of these other things are potential upcoming topics awesome Brooks would love to see a code cut a web app where you and somebody else can solve the same problem and the code is displayed next to each other that would be pretty sweet yeah like the way it works right now is you can't see others solutions until you submit your own working solution or I think you can forfeit getting the points and like see people solutions but it'd be super interesting to have like a like a real time sink we're like you're both solving it one on the left hand side and one on the right hand side and like the first one to solve it gets points or something like that that'd be cool I'd be I'd be open to like making something like that it'd be like code kata code Wars I mean this is code worse I don't know it's like head-to-head like you're trying to solve it faster than the other person you can actually see their solutions side by side that kind of thing alright I think that's it for the live stream thanks so much to everyone that tuned in live thanks to everyone for participating in the chat this has been a super fun super awesome time have a wonderful evening wonderful morning wonderful afternoon wherever you are in the world I will see you next time whoa that's me hi see you later

Channel: Coding Garden

Views: 27,071

Rating: 4.929471 out of 5

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

Id: Oq7r8metsD8

Length: 101min 39sec (6099 seconds)

Published: Wed Apr 18 2018