Roman Numeral Converter - Project 2 Javascript Certification FreeCodeCamp

hello everyone thank you so much for tuning into code with use heed my name is Yazeed and we are looking at the second project for free code camps javascript algorithms and data structures certification this series will cover each project in the certification so if you enjoy this content please like subscribe and share I'd really appreciate it also i'm on twitter at uzb all the links will be in the video description so this is project number two our assignment this time is to convert a given number into Roman numerals before moving forward let's talk about what Roman numerals are for anyone who may be unfamiliar with them the Roman numerals are an ancient number system invented by you guessed it the Romans if we click on the first link in the project description we'll find an introduction to them and if you look down here there's this table this table shows the symbols used by that system so using these seven symbols you can represent any number as a Roman numeral for the most part it's an additive system meaning bigger numbers have more characters because you add them up but there are exceptions let's check out some examples ok so you can see here that I've drawn the table from the website that we were just on and it's exactly the same m is a thousand d is 500 C is 100 L is 50 X is 10 V is 5 and I is 1 this is how Roman numerals map to the numbers that we use so for our first example let's use the number 15 81 an easy way to start converting this is let's scan our table starting from the top and saying what numbers can we start taking away from 1581 and so we see that 1581 is greater than or equal to a thousand so we can safely subtract a thousand without going into the negatives so we can say here 1581 minus 1,000 what is that equal all that equals 581 now this is our leftover now for the price of a thousand we can take this M as part of our conversion so I'm gonna make like a little a string builder so string builder and right now it's set to M just M okay now we have 581 left over so with 581 let's scan our table again we know that a thousand is greater than 581 so taking a thousand wait doesn't make any sense when you're converting so let's jump to the next one we see 500 is less than or equal to 581 so why don't we do this we do 581 minus 500 right this entry in the table and what does that equal that equals 81 now for the price of that 500 we can go ahead and say our string builder equals M plus whatever this character was in this case it was a D so now we have MD so far in our conversion let's jump to the next one we see that we have 81 left over so it's less than 500 so that conversion does not work it's less than 100 so this conversion does not work either we got to go to the next one it is greater than or equal to 50 so let's subtract 50 space this out and what is our remainder 31 and now our string builder is going to be MD plus the symbol for 50 so now we have MDL makes sense so far now 31 we see that it is less than 50 so that conversion wouldn't be valid if we were to do it but we see that is greater than 10 and let's start thinking ahead here it's greater than 10 by over 3 times so we can take out 3 tens and for that price we can put in 3 X's into our string builder so let's go ahead and do that we can do 81 this is just to save a little bit of time I'm sorry excuse me not 81 we own 231 minus 30 in fact let's even go a step further we see that we'll add on 3 X's for the price of 30 and we can already see in the table that for the price of 1 we can add an eye so if we do so if you add up three exes and one eye you have 31 so if we do 31 - 31 obviously this is zero oops and now our stringbuilder is going to have all of this but it's also going to add one two three exes and an eye and this right here is the Roman numeral symbol for 1581 let's try another example 1993 okay just like the first example we're gonna start by subtracting the biggest possible number in our lookup table so 1993 is bigger than or equal to a thousand so we can do it 1993 - 1000 what does this equal this equals 993 so for the price of a thousand we can say our stringbuilder equals an M right because we took out a thousand our leftover is 993 which is greater than 500 so how do we build that up well here's where Roman numeral start to get tricky common sense would tell you if you're new to this that 99 or rather you can take out maybe 900 right so 99 3 minus 900 would be that gives you 93 left over and for the price of 93 you should be able to take this D and add 4 C's right so 1 2 3 4 excuse me see 1 2 3 4 C's and the D right 500 plus 4 100's would be 900 but this is actually not how Roman numerals work with Roman numerals you cannot add the same symbol four times in a row so this four C's is illegal if you want to represent a number like 900 and this would also apply to 90 and 40 as we'll see soon you can't add the same symbol for times you have to start subtracting so instead of D with four C's you actually write 9t like this this excuse me you write 900 like this 900 is written as C M okay so M we know is a thousand and you have the C so why does this not equal 1100 it's because when the lower symbol is in front of the higher symbol you actually subtract so this is actually it's not 1100 it's not 100 plus a thousand it's actually 1,000 minus 100 which means it is 900 it's kind of weird but you'll get used to it just remember when the lower symbol because C is a hundred is in front of the higher symbol M is a thousand you subtract the higher from the lower with Roman numerals like you're not gonna get a negative number so it's not 100 minus a thousand it's actually a thousand minus 100 so this math is correct we do 9 9 3 minus 900 but we represent 900 a bit differently we don't do for C's it's actually just gonna be cm so our stringbuilder so far is MCM this is a thousand and this is 1 900 because it's a thousand minus 100 I hope that makes sense so we have 93 left over so we have to do this again so at 93 we see that it is you can't take away 500 you can't take away 100 but you can take away 50 you can take away 50 and for tens but you don't represent for tens with 4 X's that's wrong you're going to represent this so let's first do our subtraction so we're gonna take out another 90 and this is gonna leave us with 3 3 should convert easy but hold on a second all right so 90 it's not represented as L with 4 X's right 50 plus 40 it's actually going to be represented as a hundred minus 10 and so you put the lower symbol first the symbol for 10 is X and then you put the higher symbol next or last so that's C so this is actually 100 minus 10 which is 90 so our stringbuilder so far is going to be MCM X see now we have three left over obviously we can just take away the one three times so 3 minus 3 is 0 our final stringbuilder is going to be MCM XC and for those 3 tokens 1 2 3 III this is 1993 represented as a Roman numeral okay this will be the last example and I'm hoping it'll really be hammered home after this 3999 you can already tell that this is gonna have some you know a little bit of finagling to do so we know that 3999 is definitely bigger than a thousand it's in fact three times as big over three times as big so we know off the bat and we're allowed to add up three symbols in a row we can just subtract three thousand immediately because we're getting pretty good at this I hope and we'll say 999 we'll take that and for the price of three thousand we can say our stringbuilder is mmm okay now for $9.99 we have this obviously we can't subtract 1000 but we can subtract five hundred and four 100's again it's not going to be so here let's do our math first it's you're gonna have 99 left over of course when you subtract 900 you're not going to represent it as D and four sees that is incorrect once you start adding up four symbols you have to subtract you can't add up four symbols you have to subtract so we will subtract 100 away from a thousand so now our string builder is going to be mmm cm let's go to the next line here okay now I want to introduce a little something to you let's say we were doing this programmatically right with code because eventually we're gonna have to write some code we're not gonna do it yet but I just want you to start thinking about how you're gonna do this when you code how are you going to build the logic for oh when I'm about to add four symbols don't do that and instead I want you to go to a lower symbol subtract that from a higher symbol and that's how you represent the nines and the floors and all that that's gonna get pretty involved what if we did a little hack what if we in our map we just update it and so for example cm we can say that's 900 now when we encounter 900 we directly have an entry we don't even have to think about Oh subtract and you know don't add four times we can let our program forget all about that and we can just code these directly into the map so let's go ahead and do that cm we know is gonna be a hundred what else 400 right 400 would be si si si si that is not valid instead we would want to take 500 and subtract a hundred from that so CD so CD would be 400 okay ninety we know that ninety is going to be represented as 100 minus 10 so XC would be or ninety forty is not gonna be four X's it's going to be fifty minus 10 so now we have 40 keep going down nine nine is not gonna be V and four eyes that is not allowed so you would do 10 minus 1 this is your nine and the final one would be 4 instead of 4 eyes it's gonna be 5 minus 1 this complete table is gonna let you easily swap between numbers and Roman numerals without even having to think about can I add 4 symbols or do I have to start subtracting and all No now all of our cases are taken care of with these exceptions so now we can easily see that when we take away 900 oh hey we have an entry all right let's just add cm on to our string builders so we've done that now we have 99 left over scan our table hey we see an entry for 90 ok so if we take away 90 minus 90 we have nine left over and for the price of 90 we can go into our string builder and we can add the entry for 90 which is XC okay we have nine left over nine minus nine we have an entry for that it is right here so I will copy paste that I X so the final callout a second let me get this order connect so the final string builder we have is mmm cm XC i x that is three thousand nine hundred ninety nine and by the way this is the biggest number that free code camp is gonna give you as a test input because once you get to the four thousands and the five thousands and beyond it becomes a little bit trickier to represent Roman numerals because then you have to start using four M's and okay what do I do when I have four M's we're not gonna get into that for this video that's out of scope so three thousand nine hundred ninety nine and anything below it down to zero we can represent using this table and no need to think about addiction addition subtraction any of that okay I hope that introduction to Roman numerals was thorough enough now let's start thinking about how we're gonna solve this problem as an algorithm in code so first let's think back what were we just doing in the editor so we had the table which Maps Roman numerals to numbers I think that's definitely going to be a step creates Roman numeral to number lookup table and we also had a stringbuilder right it started out as empty and over time as we found more matches and gradually subtracted our input down to zero we added to that stringbuilder and it was increasing over time I think we're gonna need some kind of a string builder and by the way a more technical term for this string builder string builder is a fine name but a more technical term would be accumulator I only UPS I only say this because later on in your JavaScript journeys spoiler alert you are going to run into this term and I think this is a really good time to learn what it means cuz we can see it firsthand the accumulator is exactly what the name says it's the thing that accumulates stuff so in our case our accumulator starts out as an empty string and then over time we start adding characters to it this is accumulating Roman numeral strings so accumulator is just a general term so we'll just say create Roman numeral accumulator okay but it's the exact same concept I'm just giving you a preview at a different word that you're probably gonna see later on as you become more advanced so we have the accumulator that gets filled up and we have our lookup table what did we do with that lookup table well what we did was we started pretty much looping through the lookup table we started at the top or at the beginning and we gradually descended all the way down to the end so we're gonna need some kind of way to loop through our lookup table then what did we do as we were looping through the table we had our entries I can go back to it here we had our entries mcmd c-d-c and so on and so forth and so we'd start from the top and go all the way down to the very end well what happened when we found a match so for example 3999 we start at the top and we said oh hey 3999 is greater than or equal to a thousand we would take out a thousand and add an M to our accumulator our stringbuilder we had two thousand 999 left over were not done with a thousand we are gonna take out another thousand and then we take out another thousand and then we can finally go down to the next entry in this list so it's almost like a loop within a loop because we have one loop to go through every entry then when we find a match we loop over that one match until it doesn't match anymore does that make sense because you can't just do it once so for example inside your your lookup table loop if you just said if we have a match subtract that means you would here take it take out a thousand and you go down to the next one but that's wrong because if you take out just a thousand you would have two thousand 999 which is still bigger than this entry so you need to keep taking out more and more and more you would have to take out a thousand three times and in programming how else do you do something multiple times in an automated fashion except with a loop so we're actually going to need a loop inside of our lookup table loop if current number we'll say is less than or equal to our input or our num then subtract current number from our num add symbol to accumulator an if-statement is gonna run just once we want this to run multiple times so I would think we can actually say while you can actually turn this directly into a while statement if the current number is less than or equal to the number then you are gonna subtract and then add to the accumulator exactly what we were doing in the examples and once we have that I think we can just return the accumulator and be done with it so let's try go into some code how do we do this first one well this one is easy all you have to do is go you can literally copy paste this table actually which has all of our entries you can store it as a variable so Const lookup table equals an object and it's gonna have all of these entries I'll go ahead and clean this up a little bit so we can see that this nicely maps to a JavaScript object objects and tables have a lot in common you can convert between them very easily so this lookup table of Roman numerals is gonna have all of these entries we need step two was create the Roman numeral accumulator when I use constants a variable that will never change this lookup table is cemented in time for eternity okay the the accumulator however is gonna change over time so we would use the let keyword instead of Const let refers to a variable that can change later on so we can say let accumulator and we'll start it off as an empty string that's a pretty good default there's our first two steps now we want to loop through the lookup table there's a lot of ways to loop in JavaScript you can have a standard for loop but what I prefer and you can look this up more if you are interested is a for in syntax so for Const key in lookup table let's give ourselves some more room here we're saying for every single key in this lookup table we're gonna visit each key once so I can show you real quick console dot log key if we run this now and I'll open the developer tools see that every key is being logged out all the way from M down to I so we have this key now if we want to access the value in there we can do lookup table key we can do console dot log key number value all right if you run this again where m is a thousand cm is 900 d is 500 CDs 400 every entry is being logged here because this is the key cm is the key here and the value is accessed by going into the lookup table and giving it a key that gives you back at the value so we log out the key and we log the value so now we can do exactly what we were doing in the example section we can say here while we have a match while the number value is less than or equal to our number here our input is less than or equal to the numb we're going to subtract that value from our number and we're going to add to the accumulator so the accumulator accumulator is going to have the key added to it see that so for example when we had three thousand 999 it's going to loop through the map and it's gonna say alright I'm at a thousand right now the key is gonna be M and the number value is going to be a thousand while one thousand is less than or equal to three thousand 999 we're gonna subtract we're gonna take out a thousand and we're gonna add em to our accumulator so this is gonna happen three times then it's gonna go down it's gonna find nine hundred have a match and so on and so forth and then at the very end we're just going to return our accumulator let's see if this works this is the solution in its entirety so we have our lookup table of Roman numeral two number we have a blank accumulator an empty accumulator an empty bucket pretty much in the beginning we loop through every key in the lookup table and we can get the number value using this syntax while that value is less than or equal to our input we're gonna take it out of the input and for the price of that we're gonna add to the accumulator so we're taking from one and we're adding to the other and the accumulator gets returned at the very end if you run our test cases you can see that we pass I hope this was fun and informative please let me know if you have any questions I hope this was clear I'm on twitter at Yazeed B and for more info you can go there and my website check out my blog at Yazeed be com once again all the links will be in the description I hope to see you in the next video thank you so much for watching

Channel: CodeWithYazeed

Views: 2,883

Keywords: JavaScript, FreeCodeCamp, Algorithms, Data Structures

Id: g_ISxHcg-RM

Length: 25min 2sec (1502 seconds)

Published: Fri Sep 13 2019