WEBVTT 1 00:00:01.330 --> 00:00:03.570 One operator that I dint mention 2 00:00:03.570 --> 00:00:04.880 in the last lecture, 3 00:00:04.880 --> 00:00:07.260 is the Remainder Operator. 4 00:00:07.260 --> 00:00:10.444 And the reason for that is that the remainder operator, 5 00:00:10.444 --> 00:00:13.610 has actually some special use cases, 6 00:00:13.610 --> 00:00:16.783 and so it deserves a lecture on its own. 7 00:00:18.740 --> 00:00:22.520 So what is the remainder operator? 8 00:00:22.520 --> 00:00:25.520 Well, as the name says, the remainder operator, 9 00:00:25.520 --> 00:00:29.770 simply returns the remainder of a division. 10 00:00:29.770 --> 00:00:31.213 So lets check that out, 11 00:00:32.330 --> 00:00:35.240 so the remainder operator is this one. 12 00:00:35.240 --> 00:00:36.883 So the percentage sign, 13 00:00:38.140 --> 00:00:41.393 and so lets check what five remainder two is, 14 00:00:42.450 --> 00:00:43.723 and it is one. 15 00:00:44.900 --> 00:00:46.193 So why is that? 16 00:00:47.400 --> 00:00:50.283 Lets say we divide five by two, 17 00:00:51.530 --> 00:00:53.583 and so then we get two point five. 18 00:00:54.450 --> 00:00:57.240 But if we took only the integer part, 19 00:00:57.240 --> 00:01:01.560 so only two then the result will be two. 20 00:01:01.560 --> 00:01:02.670 Okay? 21 00:01:02.670 --> 00:01:06.400 So if we did the division only until the integer part, 22 00:01:06.400 --> 00:01:08.560 then that result will be two, 23 00:01:08.560 --> 00:01:10.800 because two times two is four, 24 00:01:10.800 --> 00:01:13.520 but then there will be the remainder of one. 25 00:01:13.520 --> 00:01:14.460 Right? 26 00:01:14.460 --> 00:01:17.053 Because five minus four is one. 27 00:01:19.000 --> 00:01:24.000 So we can say that five is two times two plus one. 28 00:01:26.340 --> 00:01:27.173 Alright? 29 00:01:27.173 --> 00:01:28.910 And so this here is the remainder, 30 00:01:28.910 --> 00:01:32.633 and therefore five remainder two is one. 31 00:01:33.670 --> 00:01:35.053 Lets try another one, 32 00:01:36.800 --> 00:01:41.800 lets say eight remainder two or three actually, 33 00:01:44.190 --> 00:01:45.983 and so now the remainder is two. 34 00:01:48.890 --> 00:01:50.120 Okay? 35 00:01:50.120 --> 00:01:54.000 And if we did eight dived by three, 36 00:01:54.000 --> 00:01:56.830 line:15% then we would get this number here. 37 00:01:56.830 --> 00:02:00.030 line:15% But again if we only took the integer part, 38 00:02:00.030 --> 00:02:03.570 so two, then we would only end up with six. 39 00:02:03.570 --> 00:02:08.570 So two times three is six, so lets write that. 40 00:02:08.740 --> 00:02:12.223 eight is two times three, 41 00:02:13.390 --> 00:02:16.393 so this three here times two, 42 00:02:18.950 --> 00:02:21.890 plus the remainder which is two. 43 00:02:21.890 --> 00:02:24.110 So six plus two is eight, 44 00:02:24.110 --> 00:02:26.830 line:15% and so two is the remainder and therefore, 45 00:02:26.830 --> 00:02:28.780 line:15% that's the result that we get here 46 00:02:28.780 --> 00:02:31.300 line:15% from the remainder operation. 47 00:02:31.300 --> 00:02:32.840 Alright? 48 00:02:32.840 --> 00:02:36.490 So maybe you are not yet familiar with this concept, 49 00:02:36.490 --> 00:02:38.960 and so I hope that it made sense. 50 00:02:38.960 --> 00:02:42.370 Now, one thing that is many times used for in programming, 51 00:02:42.370 --> 00:02:46.890 is to check whether a certain number is even or odd. 52 00:02:46.890 --> 00:02:51.600 So, even numbers are zero, two, four, six, eight, ten 53 00:02:51.600 --> 00:02:53.620 and so on and so forth. 54 00:02:53.620 --> 00:02:56.640 And the odd numbers are all the others. 55 00:02:56.640 --> 00:03:00.000 So, one, three, five, seven, etcetera. 56 00:03:00.000 --> 00:03:02.800 So, when is a number even? 57 00:03:02.800 --> 00:03:06.850 Well, its even if its divisible by two. 58 00:03:06.850 --> 00:03:10.200 And divisible by two means that if we divide it by two, 59 00:03:10.200 --> 00:03:11.693 the remainder is zero. 60 00:03:12.800 --> 00:03:14.410 So lets check that, 61 00:03:14.410 --> 00:03:17.190 so six is an even number. 62 00:03:17.190 --> 00:03:18.220 Right? 63 00:03:18.220 --> 00:03:23.220 line:15% And so, the remainder of dividing it by two is zero. 64 00:03:23.570 --> 00:03:27.791 And that's because, a dividing six by two, 65 00:03:27.791 --> 00:03:32.160 line:15% is an integer number, so its exactly three. 66 00:03:32.160 --> 00:03:37.157 So three times two, so this two here gives then six, 67 00:03:38.430 --> 00:03:39.280 Alright? 68 00:03:39.280 --> 00:03:44.253 But on the other hand, an even number is for example seven. 69 00:03:47.370 --> 00:03:48.203 Alright? 70 00:03:49.050 --> 00:03:52.600 line:15% And so here we have the remainder as one, 71 00:03:52.600 --> 00:03:56.600 line:15% and that's because three times two is six, 72 00:03:56.600 --> 00:04:01.040 line:15% and then plus one which is the remainder is seven again. 73 00:04:01.040 --> 00:04:04.933 And so just like five, which is also an odd number. 74 00:04:06.292 --> 00:04:07.125 Okey? 75 00:04:07.125 --> 00:04:09.530 And so now we, can use that knowledge to check 76 00:04:09.530 --> 00:04:12.213 whether a certain number is even or not. 77 00:04:14.060 --> 00:04:15.463 So lets create a function, 78 00:04:17.175 --> 00:04:21.425 isEven and a simple arrow function is perfect here, 79 00:04:24.890 --> 00:04:29.890 so if the reminder of n with two is equal zero, 80 00:04:31.612 --> 00:04:34.900 well then of course, this will return true. 81 00:04:34.900 --> 00:04:37.470 And otherwise its gonna return false, 82 00:04:37.470 --> 00:04:40.960 so when its one, then the result of this function 83 00:04:40.960 --> 00:04:42.203 will be false. 84 00:04:43.110 --> 00:04:47.190 So, lets use this, isEven, lets try with eight, 85 00:04:50.850 --> 00:04:55.773 23 and maybe well, something else, it doesn't really matter, 86 00:04:56.720 --> 00:05:01.720 line:15% and so intuitively, we know that eight is an even number 87 00:05:01.720 --> 00:05:03.310 line:15% and so we get true. 88 00:05:03.310 --> 00:05:06.720 This one is an odd number, and an even number, 89 00:05:06.720 --> 00:05:09.640 and therefore we get the correct results. 90 00:05:09.640 --> 00:05:11.300 Okay? 91 00:05:11.300 --> 00:05:15.490 And so of course, this works to check if any number 92 00:05:15.490 --> 00:05:18.350 is divisible by any other number. 93 00:05:18.350 --> 00:05:19.183 Alright? 94 00:05:19.183 --> 00:05:22.670 And whenever the results of the remainder operator is zero, 95 00:05:22.670 --> 00:05:25.580 then that means that the first number is completely 96 00:05:25.580 --> 00:05:27.910 divisible by the second one. 97 00:05:27.910 --> 00:05:30.230 And again, this is sometimes very important 98 00:05:30.230 --> 00:05:32.730 to know in programming. 99 00:05:32.730 --> 00:05:34.540 So lets see another example here, 100 00:05:34.540 --> 00:05:36.810 involving our application, 101 00:05:36.810 --> 00:05:41.380 not really in practical terms, but just to have some fun. 102 00:05:41.380 --> 00:05:44.923 So lets select all of the rows of our movements. 103 00:05:46.100 --> 00:05:49.363 So, yeah lets check the hdml here, 104 00:05:53.990 --> 00:05:57.340 so each of the movements is this row, 105 00:05:57.340 --> 00:05:59.910 so this element with this class, 106 00:05:59.910 --> 00:06:02.220 and so lets select all of them, 107 00:06:02.220 --> 00:06:05.290 and then we will paint them a little bit 108 00:06:05.290 --> 00:06:07.173 based on some conditions. 109 00:06:08.700 --> 00:06:10.943 line:15% So lets select all of this elements, 110 00:06:12.070 --> 00:06:17.070 so all, so that's that, and then this class name, 111 00:06:19.010 --> 00:06:22.200 and so this here will return a note list, 112 00:06:22.200 --> 00:06:25.440 and so lets convert it to a real array, 113 00:06:25.440 --> 00:06:28.500 and for that this time am gonna use the spread operator, 114 00:06:28.500 --> 00:06:30.880 so I will spread all of these elements, 115 00:06:30.880 --> 00:06:35.260 into this newly created array, and then on that array, 116 00:06:35.260 --> 00:06:37.383 line:15% I can immediately call for each, 117 00:06:39.120 --> 00:06:41.570 line:15% and so lets specify a call back function, 118 00:06:41.570 --> 00:06:43.390 line:15% with the current element, 119 00:06:43.390 --> 00:06:46.573 line:15% which is the current row, and the current index. 120 00:06:47.710 --> 00:06:48.580 line:15% Alright? 121 00:06:48.580 --> 00:06:50.750 And now lets say that I wanted to color 122 00:06:50.750 --> 00:06:53.820 every second row of the movements. 123 00:06:53.820 --> 00:06:58.330 line:15% So all i have to do, is to check if the code index 124 00:06:58.330 --> 00:06:59.873 line:15% is divisible by two. 125 00:07:01.110 --> 00:07:03.760 line:15% So I, which will start at zero, 126 00:07:03.760 --> 00:07:06.120 line:15% then its gonna be one, two, three, four, 127 00:07:06.120 --> 00:07:08.330 line:15% and so on and so forth. 128 00:07:08.330 --> 00:07:11.240 line:15% So if I want to color every second row, 129 00:07:11.240 --> 00:07:14.710 line:15% then if I do this, then every second number 130 00:07:14.710 --> 00:07:16.560 line:15% will be divisible by two, 131 00:07:16.560 --> 00:07:19.293 line:15% and every other second number will not. 132 00:07:20.770 --> 00:07:24.230 line:15% So I can just check if its zero, and if it is, 133 00:07:24.230 --> 00:07:26.223 line:15% then I take the current row, 134 00:07:27.910 --> 00:07:32.910 line:15% take this style and change the background color, 135 00:07:33.090 --> 00:07:36.713 line:15% and remember that we have to use camel case notation here, 136 00:07:37.700 --> 00:07:41.133 line:15% and lets change it to orange red. 137 00:07:42.490 --> 00:07:46.443 line:15% So just to make it a little bit fun, okey? 138 00:07:53.820 --> 00:07:55.763 line:15% And actually just like before, 139 00:07:56.920 --> 00:08:00.783 line:15% this here has to happen inside of a handler, 140 00:08:01.890 --> 00:08:04.100 line:15% so an event handler function, 141 00:08:04.100 --> 00:08:08.510 line:15% because this code here, will execute right when we start 142 00:08:08.510 --> 00:08:09.730 line:15% our application, 143 00:08:09.730 --> 00:08:11.090 line:15% but then as we log in, 144 00:08:11.090 --> 00:08:14.953 line:15% we override that with the deposits of the current user. 145 00:08:16.260 --> 00:08:19.693 And so, lets again do that as we click here on this balance, 146 00:08:21.150 --> 00:08:24.053 line:15% just so that we have like any reference point. 147 00:08:34.174 --> 00:08:35.007 line:15% Okey? 148 00:08:36.640 --> 00:08:38.203 And now lets try this again. 149 00:08:43.150 --> 00:08:43.983 Alright? 150 00:08:43.983 --> 00:08:48.600 And now as I click this label, well like magic, 151 00:08:48.600 --> 00:08:52.703 every second row is now painted in orange red. 152 00:08:54.390 --> 00:08:56.363 So beautiful, right? 153 00:08:57.230 --> 00:09:00.793 Well not really, but at least we know that our code worked. 154 00:09:01.710 --> 00:09:02.680 Alright? 155 00:09:02.680 --> 00:09:04.320 line:15% Lets do another one, 156 00:09:04.320 --> 00:09:08.390 line:15% so now lets say that I want to paint every third row, 157 00:09:08.390 --> 00:09:10.860 line:15% also in even another color. 158 00:09:10.860 --> 00:09:15.860 line:15% And so I do, the remainder of three, 159 00:09:18.600 --> 00:09:21.040 line:15% And each time is equal to zero, 160 00:09:21.040 --> 00:09:26.040 line:15% then I do set this back ground color to blue. 161 00:09:28.320 --> 00:09:29.340 line:15% Alright? 162 00:09:29.340 --> 00:09:34.340 line:15% And so this here will be at zero, three, six, nine 163 00:09:35.450 --> 00:09:37.460 line:15% and so on and so forth, 164 00:09:37.460 --> 00:09:40.530 line:15% while this one here is gonna be, as we already saw 165 00:09:40.530 --> 00:09:45.530 line:15% at zero, two, four, six, and so on. 166 00:09:46.310 --> 00:09:48.963 line:15% And you see that there's gonna be some overlap here, 167 00:09:49.980 --> 00:09:52.270 line:15% but that's not a problem. 168 00:09:52.270 --> 00:09:56.390 line:15% Here we are missing the r, give it a save, 169 00:09:56.390 --> 00:09:57.933 and just try it one more time. 170 00:09:59.010 --> 00:10:01.010 So this is just for fun of course, 171 00:10:01.010 --> 00:10:03.583 but there could be real applications to this. 172 00:10:04.890 --> 00:10:06.860 So you see that now every third row, 173 00:10:06.860 --> 00:10:08.973 is indeed blue. 174 00:10:09.940 --> 00:10:12.060 So really nice looking, 175 00:10:12.060 --> 00:10:14.453 a fact that we just created here. 176 00:10:16.400 --> 00:10:18.400 line:15% But yeah, and just to illustrate really, 177 00:10:18.400 --> 00:10:20.530 line:15% how the remainder works. 178 00:10:20.530 --> 00:10:24.780 line:15% So whenever you need to do something every Nth time 179 00:10:24.780 --> 00:10:28.320 line:15% so to say, so every, I mean this, 180 00:10:28.320 --> 00:10:31.210 line:15% every Nth time, then it is a good idea 181 00:10:31.210 --> 00:10:34.010 line:15% to use the remainder operator for that. 182 00:10:34.010 --> 00:10:37.566 line:15% So here for example, every second time, every third time, 183 00:10:37.566 --> 00:10:41.523 line:15% but of course this might then depend on your specific need, 184 00:10:42.460 --> 00:10:43.873 line:15% maybe in you application. 185 00:10:44.800 --> 00:10:47.890 line:15% So this how we use the remainder operator, 186 00:10:47.890 --> 00:10:50.850 line:15% yet another one in your tool box now, 187 00:10:50.850 --> 00:10:53.893 and with that lets go straight to the next video.