Javascript By Example L1E04 - Operators, All Clear with Arrow Functions

what's up y'all how are you doing today this is Hussein Nasser from I geometry continue let us continue with our beautiful calculator this is the JavaScript by example series where we build stuff using the tools of JavaScript right it's always put your mind to it you're building an app you're building something and programming tools are just that is just tools and you're using them why do we have been doing so far man we have been we did that right we built the UI we have almost a complete user interface we added events oh look at that when we click on certain buttons we now add those to this sticks that is cool what we did not do which we will do in this episode is actually add code to clear and add these operations and hopefully we can also calculate the results as well so yeah that's good this even zero the zero we didn't add that so that'll be tricky all right so there's a lot of we'll find a lot of bugs in the process but we're gonna fix them slowly all right let's get to work okay open your calculator HTML obviously guys you'll find the code from lift this will be in this description you will see the latest code at the end of this episode so go back to the previous episode grab the code from the previous episode and then continue on right so that will be episode 3 this is episode 4 all right what do we do man look at all this code man when we learn about loops will shrink this code right we will will make it more compact make it more all right so what we're missing man we're missing adding these puppies right if we click on these nothing happens that's because we did not listen on those events go ahead and create a subtraction document that get element by ID what did we call this sub or all right we called it sup by the way there is another way to know if you'll right click on this and you do inspect any webpage really you can find the ID really easily so it's up but then Owen sub does add event listener all right print symbol and yeah let's just do that then we're gonna add the rest so 9 minus nice 9 look at that sweet alright let's add plus get the element by ID plus and then plus add eventlistener [Music] quick print symbol yeah don't accidentally add those on guys maybe I'll hide my picture here but yeah I don't accidentally add those they'll become problematic for you I think there is malt let malt be called document.getelementbyid e molt and then I believe it's called dev what is that called malt and then def it's really cold death malt that add event listener on click just print the same symbol so only the same function and it's doing great for us but certain function will need to do different last one they call document you know vision and the division click print symbol save refresh what do we have man 9 x 9 minus 6 plus 3/2 nice look at that that is so cool and then we'll we'll need an equal Albion we'll see we'll need to do the dot it's very important and we'll need to do this 0 we didn't do those two so what is the dot what is the ID of that puppy it's called decimal decimal is let this small equal document or good element decimal and then decimal click or just printing nothing special just print those symbols 0 what do we call you 0 0 is non 0 hmm num 0 equal document or get element by ID number then after we get the numsy row numsy row I only added at the beginning because it doesn't I just wanted to organize it because you obviously can add it then doesn't matter but it's just for having that app have a neat look all right so why is this yeah that's because only three characters okay all right looks good refresh 9 x 6 minus 3 plus 2 minus 1 okay but minus six point three plus six nice look at that all right we're gonna show you list of bugs that we will fix this is the first book zero if you add 0 to 0 is just 0 it you can't we should not keep adding zeros right so we will solve this with something called conditions or if statements right if there is a 0 don't add another 0 to it because it doesn't make any sense so multiplication that's ok but another problem is that this is not an operation right this doesn't make any sense but yeah we're allowing that and the another thing is this that's because we don't have a fixed size we have an auto size and as we add or creditor gets fatter and fatter look at that full-bodied it's a full-body it's not that yeah look at that all right so last thing we want to do in this episode before we end it and for the next episode we're gonna do that equivalent it's actually clear alright that's so that will require different function to do that so let's go ahead and add a clear what are we called clear did we call it what do we call that function man we called it clear about that it's called clear so let's go ahead and pull that so that all those point the same function they execute the same code it's always take me the one I clicked on which is e whatever I have as a content just displayed so it's simple but now when I click on AC or clear I want to do something different so I clear is equal document dot get element by ID nope nope by ID clear and then we'll do that clear the add eventlistener click now we can do two things here we can create another function called clear or we can actually introduce a new inline function or we call the expression here so let's just introduce that as the title of this series so like we're gonna call this arrow functions yeah why not let's introduce this another type of functions called arrow functions and our function are appropriate if you have one single line of code like in our case where when we when we want to clear this text it's literally take the result right which is this and set it to zero so it's actually one line of code so we will have to have that line of code executed in this state so to do that as you basically provide the parameter which is this e and then you'll add an arrow and then what you will do is basically execute that that command which is documented to get the limit by ideal results dot txt content is equal to zero that's like that we're done do you see that noise you can by the way add another line here it doesn't really matter JavaScript so take some time ask questions if you want to know more about this this is this is another function type so this is this is one way to do it right so easy quell document or I just added this parameter we don't really use it here but well I'll tell you in a second now let's see if that actually did the trick so no no no no no no AC whoo look at that it actually worked how about that so that's how actually we do this another way remember so again you can do whatever you want so there is another function called clear okay cool do it this way then you can do the exact same thing that we did here text content is equal zero and just like that we can let's comment out this line so we can show you that there are multiple ways of doing things in programming so we can do that and just literally call clear so you have you can write that function up and call it from here or you can use it in line so let's see if that works digital data to do that looks like we broke things guys here what did we break yeah we definitely break something we definitely broke something guys we brought something look nothing's working okay so that's time for debugging what happened here clear has already been declared that's right because we call this function so what we quit so here is actually good so we use the clear as a function name and we also use it as a variable name and does the app got confused so we we recalled it clear screen again so let's just do that now yes nine things are working again that's good and then we click this and that works again so you have this option or you can do it the arrow way function that arrow the arrow function I was about to say all right the water quickly oh yeah that's why we do it he is really optional here because you we didn't really use it yeah I don't really care about that object a seat so that's one way to do it another one way to do it was as we just did here which is that I'd like to use start using this right e again we didn't use that so if you didn't use any any variable you can just replace it with an empty string so that's another way of writing an arrow function another way of writing an arrow function you can write an arrow function here assign it to a variable but the state could slow here so now we just introduced another function optionally you can use it if you want it's just just reading that line you can see what the function does instead of print symbol oh I have to go what does Bryn symbol do you know so that's just that two ways of doing things if you really prefer it so I'm gonna comment out this code I don't believe I explained what comment does commenting is is a way of explain the code by saying and freeform text like oh this prints out symbol on the calculator calculator screen right so you can type whatever you want and the code will be ignored this will never be executed so and you can comment out a book of code that you don't want the code to be executed it's just take it out all right so yeah so what do we I think we will stop here so we have our nice functions here we have a lot of bugs but we'll fix them and we have disabled we have we don't have equal yet we're gonna do that in the next episode but we did it clear that's cool and yeah there's another bug here where if you hit nine or six and there is a zero it will always add the zero which is really doesn't make sense right I think we talked about this like if you click here and you add nine it doesn't add a zero so we need to fix that we need to remove that really we we're not gonna use a negative or positive here really because we can just use these as an expression so and you cannot replace them with parentheses a very important functionality okay next episode evaluating that actual equation that we can write and displaying the results stay tuned subscribe to so you don't you guys don't miss anything and I'm gonna see you in the next one goodbye