what's up y'all how are you doing today this is Hussein Nasser from IGeometry
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
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 MULT 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