Original subtitles

One operator that I dint mention

in the last lecture,

is the Remainder Operator.

And the reason for that is that the remainder operator,

has actually some special use cases,

and so it deserves a lecture on its own.

So what is the remainder operator?

Well, as the name says, the remainder operator,

simply returns the remainder of a division.

So lets check that out,

so the remainder operator is this one.

So the percentage sign,

and so lets check what five remainder two is,

and it is one.

So why is that?

Lets say we divide five by two,

and so then we get two point five.

But if we took only the integer part,

so only two then the result will be two.

Okay?

So if we did the division only until the integer part,

then that result will be two,

because two times two is four,

but then there will be the remainder of one.

Right?

Because five minus four is one.

So we can say that five is two times two plus one.

Alright?

And so this here is the remainder,

and therefore five remainder two is one.

Lets try another one,

lets say eight remainder two or three actually,

and so now the remainder is two.

Okay?

And if we did eight dived by three,

then we would get this number here.

But again if we only took the integer part,

so two, then we would only end up with six.

So two times three is six, so lets write that.

eight is two times three,

so this three here times two,

plus the remainder which is two.

So six plus two is eight,

and so two is the remainder and therefore,

that's the result that we get here

from the remainder operation.

Alright?

So maybe you are not yet familiar with this concept,

and so I hope that it made sense.

Now, one thing that is many times used for in programming,

is to check whether a certain number is even or odd.

So, even numbers are zero, two, four, six, eight, ten

and so on and so forth.

And the odd numbers are all the others.

So, one, three, five, seven, etcetera.

So, when is a number even?

Well, its even if its divisible by two.

And divisible by two means that if we divide it by two,

the remainder is zero.

So lets check that,

so six is an even number.

Right?

And so, the remainder of dividing it by two is zero.

And that's because, a dividing six by two,

is an integer number, so its exactly three.

So three times two, so this two here gives then six,

Alright?

But on the other hand, an even number is for example seven.

Alright?

And so here we have the remainder as one,

and that's because three times two is six,

and then plus one which is the remainder is seven again.

And so just like five, which is also an odd number.

Okey?

And so now we, can use that knowledge to check

whether a certain number is even or not.

So lets create a function,

isEven and a simple arrow function is perfect here,

so if the reminder of n with two is equal zero,

well then of course, this will return true.

And otherwise its gonna return false,

so when its one, then the result of this function

will be false.

So, lets use this, isEven, lets try with eight,

23 and maybe well, something else, it doesn't really matter,

and so intuitively, we know that eight is an even number

and so we get true.

This one is an odd number, and an even number,

and therefore we get the correct results.

Okay?

And so of course, this works to check if any number

is divisible by any other number.

Alright?

And whenever the results of the remainder operator is zero,

then that means that the first number is completely

divisible by the second one.

And again, this is sometimes very important

to know in programming.

So lets see another example here,

involving our application,

not really in practical terms, but just to have some fun.

So lets select all of the rows of our movements.

So, yeah lets check the hdml here,

so each of the movements is this row,

so this element with this class,

and so lets select all of them,

and then we will paint them a little bit

based on some conditions.

So lets select all of this elements,

so all, so that's that, and then this class name,

and so this here will return a note list,

and so lets convert it to a real array,

and for that this time am gonna use the spread operator,

so I will spread all of these elements,

into this newly created array, and then on that array,

I can immediately call for each,

and so lets specify a call back function,

with the current element,

which is the current row, and the current index.

Alright?

And now lets say that I wanted to color

every second row of the movements.

So all i have to do, is to check if the code index

is divisible by two.

So I, which will start at zero,

then its gonna be one, two, three, four,

and so on and so forth.

So if I want to color every second row,

then if I do this, then every second number

will be divisible by two,

and every other second number will not.

So I can just check if its zero, and if it is,

then I take the current row,

take this style and change the background color,

and remember that we have to use camel case notation here,

and lets change it to orange red.

So just to make it a little bit fun, okey?

And actually just like before,

this here has to happen inside of a handler,

so an event handler function,

because this code here, will execute right when we start

our application,

but then as we log in,

we override that with the deposits of the current user.

And so, lets again do that as we click here on this balance,

just so that we have like any reference point.

Okey?

And now lets try this again.

Alright?

And now as I click this label, well like magic,

every second row is now painted in orange red.

So beautiful, right?

Well not really, but at least we know that our code worked.

Alright?

Lets do another one,

so now lets say that I want to paint every third row,

also in even another color.

And so I do, the remainder of three,

And each time is equal to zero,

then I do set this back ground color to blue.

Alright?

And so this here will be at zero, three, six, nine

and so on and so forth,

while this one here is gonna be, as we already saw

at zero, two, four, six, and so on.

And you see that there's gonna be some overlap here,

but that's not a problem.

Here we are missing the r, give it a save,

and just try it one more time.

So this is just for fun of course,

but there could be real applications to this.

So you see that now every third row,

is indeed blue.

So really nice looking,

a fact that we just created here.

But yeah, and just to illustrate really,

how the remainder works.

So whenever you need to do something every Nth time

so to say, so every, I mean this,

every Nth time, then it is a good idea

to use the remainder operator for that.

So here for example, every second time, every third time,

but of course this might then depend on your specific need,

maybe in you application.

So this how we use the remainder operator,

yet another one in your tool box now,

and with that lets go straight to the next video.