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 then we would get this number here. 37 00:01:56,830 --> 00:02:00,030 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 and so two is the remainder and therefore, 45 00:02:26,830 --> 00:02:28,780 that's the result that we get here 46 00:02:28,780 --> 00:02:31,300 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 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 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 And so here we have the remainder as one, 71 00:03:52,600 --> 00:03:56,600 and that's because three times two is six, 72 00:03:56,600 --> 00:04:01,040 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 and so intuitively, we know that eight is an even number 87 00:05:01,720 --> 00:05:03,310 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 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 I can immediately call for each, 117 00:06:39,120 --> 00:06:41,570 and so lets specify a call back function, 118 00:06:41,570 --> 00:06:43,390 with the current element, 119 00:06:43,390 --> 00:06:46,573 which is the current row, and the current index. 120 00:06:47,710 --> 00:06:48,580 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 So all i have to do, is to check if the code index 124 00:06:58,330 --> 00:06:59,873 is divisible by two. 125 00:07:01,110 --> 00:07:03,760 So I, which will start at zero, 126 00:07:03,760 --> 00:07:06,120 then its gonna be one, two, three, four, 127 00:07:06,120 --> 00:07:08,330 and so on and so forth. 128 00:07:08,330 --> 00:07:11,240 So if I want to color every second row, 129 00:07:11,240 --> 00:07:14,710 then if I do this, then every second number 130 00:07:14,710 --> 00:07:16,560 will be divisible by two, 131 00:07:16,560 --> 00:07:19,293 and every other second number will not. 132 00:07:20,770 --> 00:07:24,230 So I can just check if its zero, and if it is, 133 00:07:24,230 --> 00:07:26,223 then I take the current row, 134 00:07:27,910 --> 00:07:32,910 take this style and change the background color, 135 00:07:33,090 --> 00:07:36,713 and remember that we have to use camel case notation here, 136 00:07:37,700 --> 00:07:41,133 and lets change it to orange red. 137 00:07:42,490 --> 00:07:46,443 So just to make it a little bit fun, okey? 138 00:07:53,820 --> 00:07:55,763 And actually just like before, 139 00:07:56,920 --> 00:08:00,783 this here has to happen inside of a handler, 140 00:08:01,890 --> 00:08:04,100 so an event handler function, 141 00:08:04,100 --> 00:08:08,510 because this code here, will execute right when we start 142 00:08:08,510 --> 00:08:09,730 our application, 143 00:08:09,730 --> 00:08:11,090 but then as we log in, 144 00:08:11,090 --> 00:08:14,953 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 just so that we have like any reference point. 147 00:08:34,174 --> 00:08:35,007 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 Lets do another one, 156 00:09:04,320 --> 00:09:08,390 so now lets say that I want to paint every third row, 157 00:09:08,390 --> 00:09:10,860 also in even another color. 158 00:09:10,860 --> 00:09:15,860 And so I do, the remainder of three, 159 00:09:18,600 --> 00:09:21,040 And each time is equal to zero, 160 00:09:21,040 --> 00:09:26,040 then I do set this back ground color to blue. 161 00:09:28,320 --> 00:09:29,340 Alright? 162 00:09:29,340 --> 00:09:34,340 And so this here will be at zero, three, six, nine 163 00:09:35,450 --> 00:09:37,460 and so on and so forth, 164 00:09:37,460 --> 00:09:40,530 while this one here is gonna be, as we already saw 165 00:09:40,530 --> 00:09:45,530 at zero, two, four, six, and so on. 166 00:09:46,310 --> 00:09:48,963 And you see that there's gonna be some overlap here, 167 00:09:49,980 --> 00:09:52,270 but that's not a problem. 168 00:09:52,270 --> 00:09:56,390 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 But yeah, and just to illustrate really, 177 00:10:18,400 --> 00:10:20,530 how the remainder works. 178 00:10:20,530 --> 00:10:24,780 So whenever you need to do something every Nth time 179 00:10:24,780 --> 00:10:28,320 so to say, so every, I mean this, 180 00:10:28,320 --> 00:10:31,210 every Nth time, then it is a good idea 181 00:10:31,210 --> 00:10:34,010 to use the remainder operator for that. 182 00:10:34,010 --> 00:10:37,566 So here for example, every second time, every third time, 183 00:10:37,566 --> 00:10:41,523 but of course this might then depend on your specific need, 184 00:10:42,460 --> 00:10:43,873 maybe in you application. 185 00:10:44,800 --> 00:10:47,890 So this how we use the remainder operator, 186 00:10:47,890 --> 00:10:50,850 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.