Javascript By Example L1E03 - Displaying the Digits on Calculator Screen

Key Takeaways

what's up y'all this is Hossein Nasr from I geometry and today we'll continue with our JavaScript by example on level 1 building our calculator look what we build on the previous episode that's what we built that's a beautiful schematic calculator right there nice right and that's the source code for it remember build it from scratch look at that so again guys if you have any questions if you want to look at the source code it's available on the github page here so it's in the description below you can just click on that along with the rest of all of these series so I'm gonna bundle up in a playlist where you can access it at your leisure ok so what we're gonna do in this episode actually is I believe we will start adding the first JavaScript code to interact with our work here so we can just you know if I click 9 I expect 9 to be there if I click 8 I expect not 8 to be here so I'm not gonna kind of note that I want to add this won't be a conventional calculator that is like the one you used to where you click 9 plus 9 plus and it will add the result as you do as you continue it will be actually much simpler where we type in the expression where we do 9 multiplied by 6 plus and we're gonna add everything there and then when we hit equal we will add the results of that expression does that make sense so that's the only difference here so it just make things much much simpler as a level 1 calculator you know what we do it the other way it'll be very messy so let's just keep it clean keep it simple all right that's not personally I want to do before we continue I want to change this symbol from X to the actual multiplication symbol which is actually a star all right and I'll tell you later about this right why I'm doing this because I'm gonna use this character in a special operation so a star means multiplication in JavaScript and actually actually out in almost all programming languages a star is a multiplication someone can correct me if I'm wrong but I think that's that's true but yeah yeah so what are we gonna do here is when I click on these tappy's any of them except those I will add that button or that key or that digit to the result here except this because AC this basically means clear everything right so when you click on this this will reset to 0 how does that sound does that sound cool ish to you guys let's get started that's good let's build something all right we need to identify something here first write these cells right each cell Excel number 3 that holds digit number 3 is actually nothing but this right which is kind of this element this element and be careful here I said element that whole object that whole element that whole tag is one entity and I want to somehow identify that entity identify that object and grab that value and do something with it today I cannot and the reason is it does not have an identity it does not have an identifier it does not have a unique name that identify these objects so that is what's missing in our code here today so that's what we want to learn today we want we want to learn how to clearly identify these objects so we can write javascript code that can hook into these object and pull values and create events that's a new word now events create events that can trigger an action an example of an event is guess what that's an event that's an event that's another event a click is an event a double-click is an event a move is an event all these are actually events this is an event an event as is something that happens and triggers a piece of code that can be executed so these once we identify these objects we can assign events to these objects which can which can which can allow us to hook into these events and do cool stuff like when I click remember when I said when I click that's an event when I click so that object will be listening to this click event but we have to do all that work now it's just dumped doesn't know anything we have to teach you to everything right all right guys let's get to work that's good to work all right let's first identify these puppies okay you know this what is this hmm this is another way to look and the these let's see if we can do this if you write it click and chrome if you're using Chrome you're using Chrome and you do write it like I need to inspect remember that's just like our code right but the beauty of this is yes actually when you click remember when I told you that this is the role that the entire thing is a role that is a cell that is a cell so that is actually that one right that's zero then here and then you click here it's just beautiful guys okay this chrome is really cool can tell you which cell exactly right so we want a way to identify these puppies how can we do that how can we do that sir it is by using a new attribute by the way guys I didn't tell you that these are called attributes probably should know by now right we are assigning attribute this is a third attribute the second attribute a third attribute is called an ID doesn't have to be in sequence obviously and I'm gonna call this ID result because guess what that's our result right that's a beauty of the first one all right let's go ahead and identify the rest of all these let's call this clear ID clear and then ID is equal negative sign sign ID equal percentage ID equal div division ID equal number seven ID equal number eight ID equal number nine ID is equal number ten nope that's gonna put mult ID equal multiplication and ID is equal number four an ID is equal mf5 that is obviously six sub either pull number one number two number three ID is equal once IDs equal oh I guess what is number zero ID is equal decimal disome oh that's embarrassing I don't not suppose this amoled so that is really embarrassing my excuse it's not my first language English is not my first language that's mine don't make fun of me equal all right sorry about that all right equal all right so I think we identified all of these puppies now so if we refresh obviously nothing will happen I'm not expecting anything that happens here just we have a better way of identifying my objects now now that we did that we are ready to write some JavaScript code guys how about that let's get started okay I want you to go at the bottom of your application right before your body right right before your body ends and we're gonna insert a new tag where we're gonna write a script tag that's right you're gonna write your first script that's we're gonna write javascript in the old days we used to say like type equal JavaScript but it's known as now it's known the script is always JavaScript there was there are two options now you were saying we used to do like script equal B B squared or because equal JavaScript but yeah so now it's only JavaScript well JavaScript what should i do what should I do now we will learn how to identify not identify how to how to retrieve an object and when I say an object this is an object this is an object this is an object all of these are object right all of these are object this is an object this is a cell as soon as they're just another object so let's just do that right I'm gonna pull the value of cell number three right so how can I do that we're gonna do this document document that's the first object that you need to learn document is the whole big object that contains our entire stuff here right and remember we identified all of these as elements before I so guess what too get an element or to get an object all we have to do is actually call a function code get element by ID so you notice that my special sublime text here actually autocomplete this right so you can you can install a plugin that actually helps you do that you don't have to know write any text editor if you know it to spill that you have to spell it correctly though all right get capital e element capital B ID right so this really helps if you if you have this if you have this intellisense that actually couldn't continue this code for you helps a lot so get element by ID and then what's the name of the element I'm gonna pull I'm gonna pull number 3 that's the element all right so it's always like like math having just an expression like that floating in there doesn't make sense you have to assign it to something so assigning an object or a variable or an element is done by doing this in JavaScript you do let and then you declare a variable name and then you say that means hey go find me that object and put it in that variable how about that right and just like that we got that object so but what can we do with that lots of stuff remember number 3 is this right so now I can access this attribute I can access this attribute I can access so many other activity I can access this attribute gasps or not this there's actually another attribute is actually devalue the text content of that object so how do I do that so let's do that for simplicity we're gonna learn another command here that does a message it's very useful it's called alert alert is nothing but a browser pop-up box that basically shows a value very useful right also annoying so let's just do that alert num 3 so that won't make much sense now but let's do that when i refresh now this code will always execute because it's just in the root at the script there is nothing stopping it from getting scooted so it will get executed at the moment i refresh my page it will find that number 3 it will put in that value and then it will call the browser alert then we will put a message there and there will be something in it and we have no idea what's in there let's find out look at that digest that wall of drink some more it says I retrieved an object called HTML table sill element right and that's right that's that hole number three is actually an object it's called HTML tables element but that is weird because it has number three in it I was expecting to see 3 there right I was expecting to see that the number 3 well you can actually show that number 3 and it's very simple you add that dot remember document is an object and this is a function that belongs to this object number three is an object and to access the properties of that we can we can do we can access the properties and one of the important properties called text content with a capital C now for a fresh I actually got the value inside that puppy very very very important okay guys let's remove that alert what happened who can tell me what happened if I do this shop as a string value now think of this as a value as a text and I'm gonna put this text in the text content of number three object let's see what happened oh look at that we changed the value of the object that is actually interesting because we were gonna do something similar when I click on these buttons I want to change this I'm gonna change this this doesn't change right all right so we're not gonna do that but you're getting the idea right so what we're gonna do next is we can declare all these variables documented get element by ID result then result the text content is equal to new result all right that will execute on page load look at that doesn't make any sense now but we have the building blocks we know what we gonna do now let's do that we have this we have this piece I know how to change that that is cool let's actually write the first event number three let's stick with number three and the stick would just a result for now okay number three I want to do something with number three object I want to add an event on number three and that's called add event listener remember we said listening to an event and to listen to an event you have to specify two things what event are you listening on and what are you gonna do when you listen when that event get executed so the first thing is that's my event that's simple the second thing is a tricky part when I click on number three I want to call a function I want to call a function I want to call a piece of code that will put the number three in the value of the result we know how to put the value Norah's all we just learned that but how do I do it on a function well that's a good question that's how you write a function function type know what we call this function we're gonna call this function print just print print is good I'm not sure if it's a resort or not but yeah yeah just just in case it's a result I'm gonna called print symbol assuming this or these are symbols right print symbol and and I'll just call print number three right that's the function yeah make it simpler what we're gonna do here is this is again this is just it has a charm body so we're gonna do as we copy that code same thing right let result is equal that and then result dot text content is equal number three we have to do it this way I have to put the quotation between them and refresh will that work we didn't we missed something here guys so number three dot add eventlistener we said I'm gonna click right on click I want you to call the function number three print number three let's do that when I click on number three now would look at that who can guess how can I do the number two we're gonna do this right copy that - - that we're gonna copy the whole thing they can make this - so we need another function called print number two and then we're gonna put number two in it alright as you can see it's getting uglier it's getting longer the code is given longer but it's doing its job let's see we're gonna fix that in a minute refresh when I click three shows three when I click two shows - that is cool but I want to fix that I want to make this one function but how do I do that I don't want to just say X print number three on print number different I'm gonna do it like I'm gonna write 70 function but by the end of that I don't want to do that all I want do it - do it in a smart way right so let's just back up here let's call this function print simple just print any simple right but that function actually takes a parameter that's a cool thing here a parameter is nothing but the object it has it has a lot of things plus the object that was that was that that the event executed on it has it has the target object that the event executed on and that's very important so that's good let's just let's do that right when I click on number three I'm gonna call print simple when I click on number two I'm gonna call print symbol same thing but I'm gonna put a hard-coded value here I'm gonna put a value and guess what is the value we need to know what is that e represents and the beauty of this like all of these both of them will call the same function but they will give different e different variable different event.target right so we're gonna find out soon enough here let's use our alert here to say e dot target dot ID and let's see what happens here so when I click let's go through the code when I click on number three this functional is executed so the cursor will go here and it will pass something we don't know what's that and then we will get that value and then we will print a value will display an alert will eat a target good ID what is that ID I have no idea we're gonna find out soon enough refresh click on three hmm number three isn't that our object that is beautiful if I click into wow look at that we got that object back and guess what if we got that object back that mean I can access its text content right let's declare a variable called object equal e the target and then CI I saved that object into and the target into the object and then from the object what are we gonna do here is you guessed it guys you guessed it I'm gonna take that content of that object that I clicked on I'm gonna put it in the result so weight or not it is this way three three - - beautiful can i scale that code now can I do let number 1 is equal to num 1 and then I just do a number 1 that add event listener click principle same exact same exact code same exact code that's the beauty of that and then we refresh then we do 2 3 1 look at that yeah flipped though why is it like that you think it's 2 1 2 3 right no 3 2 1 all right slowly you're gonna clean up code guys slowly gonna learn stuff for pi equal 4 now we're gonna do it this way paste so that's number 3 number 4 oops number 5 and verse the X numbers so you know parade number 4 5 6 7 8 got all these code guys you wrote all this code that's cool 9 then name isn't that cool again guys there is a bet always a better way of doing things but we're gonna slowly learn and there's always a reason I do this this way because we're gonna use something else to simplify this code literally replace all the school with 2 or 3 lines but what they call this this proverb where a journey of the thousand mile begins with a step is that right yes I think it's right that's how he said so always do something always make a step and iron in all seriousness if you love to do something don't say they hey someone I've done it before you think there are no JavaScript a exercises out there on YouTube there are thousands but I don't care I want to do this I like teaching I like this is my unique style of teaching and I like to do it all right so nothing stopping me from doing it and the same thing with you if you love to do something just go and do it do the work show your work you'll learn you're here because you want to learn programming and to learn programming is to start building your own application that will reach other people and changes their life and simplify other tasks and that is the purpose purpose of all what we're doing here right okay guys back to reality back to rule our application all right let's do that one two three four five nine look at that that is cool but there's a little problem here if I like one I think like two done it like three you notice that it's actually adding right it's not overriding that value so let's fix that low problem and then we're gonna see you on the next one so let's let's fix this so you guys just encountered your first bug this is what we call a book this is an undesired undesired functionality right because this is not what we want and the application is not doing what we want so that's good to do it let's make it do what we want when I print the symbol I get the result object that's the first line give me this object and then I get the target that's whatever I clicked on and then after I do that I take the text content of that target and then put it in the result of my object function so how do I do that we're gonna fall do that right see I'm taking the object and I am slamming it into that text content so that is effectively overriding whatever the old value was so how can I preserve that value and then add the new content it's a simple you copy that puppy the new result text content equal to the old result text content plus whoa whoa whoa whoa whoa whoa all right to be this way equal the old plus than you and then you concatenate these two guys so if let's just walk through this refresh three - [Music] mm-hmm nice nice good work guys good work beautiful beautiful alright so now we have our application doing what we want not quite but slowly we're gonna do it slowly so I think this is a logical point to stop here but let's just explain one more thing before we into this series this episode so let's take the result take the result object refresh put 1 here 0 okay what happened here is take the result object I add the result object and it has a text container of 0 okay always in your execute go from right to left take the target I'm gonna click on 3 I didn't click here but I'm gonna click on 3 and so 3 and then now take the result again from the right take the result text content what is the current result content at 0 okay take a 0 yeah take a 0 and then add the object which is the target damn it 3 out of 3 next door yeah will concatenate oh there is all B's 0 3 oh man that's awful alright so if I click 3 0 3 again this is and then if you click at 3 again take the new result which is 0 3 and add a 3 to it so that's in 3 3 and then add a 2 then 1 and then yeah oh yeah there you go alright guys let's stop here so logical point I think and Nick episode and the next episode we're gonna do these puppies and then we do the operations which is like that's really the same code really I'm gonna do the clear and hopeful are we gonna do the equivalent equality of the alright guys long episode this time I'm gonna see you in the next one don't forget to hit that like button subscribe and to check out the rest of the content in this channel and see you in the next one goodbye