WEBVTT 1 00:00:01.200 --> 00:00:02.460 Let's now learn about 2 00:00:02.460 --> 00:00:04.830 some more mathematical operations, 3 00:00:04.830 --> 00:00:07.053 and also about rounding numbers. 4 00:00:08.490 --> 00:00:09.990 And we have already been using 5 00:00:09.990 --> 00:00:12.750 lots of mathematical operations. 6 00:00:12.750 --> 00:00:16.230 For example, plus, minus, times, divided, 7 00:00:16.230 --> 00:00:18.930 exponentiation, and so on. 8 00:00:18.930 --> 00:00:22.050 And so we don't need to go over these again. 9 00:00:22.050 --> 00:00:25.620 So let's start here with the square root. 10 00:00:25.620 --> 00:00:28.230 And so just like many other functions, 11 00:00:28.230 --> 00:00:31.413 the square root is part of the math namespace. 12 00:00:32.430 --> 00:00:36.030 So math dot SQRT. 13 00:00:36.030 --> 00:00:38.640 So this stands for square root. 14 00:00:38.640 --> 00:00:42.240 And so all we need to do is to pass in the number 15 00:00:42.240 --> 00:00:44.433 and then it will give us the square root. 16 00:00:45.720 --> 00:00:47.430 And the same could be achieved using 17 00:00:47.430 --> 00:00:50.343 the exponentiation operator as well, 18 00:00:51.360 --> 00:00:54.600 by doing one divided by two. 19 00:00:54.600 --> 00:00:57.600 And so that two is the square. 20 00:00:57.600 --> 00:00:59.280 So we want the square root. 21 00:00:59.280 --> 00:01:02.313 So we use one divided by two. 22 00:01:03.180 --> 00:01:05.520 And actually we have to put this 23 00:01:05.520 --> 00:01:08.433 into parenthesis and now it works. 24 00:01:09.960 --> 00:01:13.500 All right, and the same would work for a cubic root, 25 00:01:13.500 --> 00:01:16.503 for example, of eight, which would be two. 26 00:01:18.060 --> 00:01:19.590 And so actually this is, 27 00:01:19.590 --> 00:01:22.080 I think the only way you could calculate 28 00:01:22.080 --> 00:01:25.320 a cubic route if you need it. 29 00:01:25.320 --> 00:01:28.020 Next up, let's get the maximum value 30 00:01:28.020 --> 00:01:31.860 of a couple of values, okay? 31 00:01:31.860 --> 00:01:36.723 So again, we use math and dot max this time. 32 00:01:37.980 --> 00:01:40.743 So let's just use a couple of numbers here. 33 00:01:43.080 --> 00:01:45.450 And so as the name says, the maximum value 34 00:01:45.450 --> 00:01:47.670 gets returned to us. 35 00:01:47.670 --> 00:01:52.670 And this max function here actually does type coercion. 36 00:01:52.950 --> 00:01:57.660 So it should now still give us 23, okay? 37 00:01:57.660 --> 00:02:00.930 However, it does not parsing. 38 00:02:00.930 --> 00:02:04.620 So if we try 23 pixels for example, 39 00:02:04.620 --> 00:02:07.563 it'll then result in not a number. 40 00:02:08.520 --> 00:02:11.163 So this does not work, all right? 41 00:02:13.830 --> 00:02:17.943 And just as we have max, we also have min, 42 00:02:19.470 --> 00:02:21.423 let's just put it back to 23. 43 00:02:22.380 --> 00:02:26.970 And now here we get two, all right? 44 00:02:26.970 --> 00:02:29.130 Now besides a couple of methods, 45 00:02:29.130 --> 00:02:32.730 there are also constants on the math object 46 00:02:32.730 --> 00:02:35.223 or on the math namespace. 47 00:02:36.180 --> 00:02:39.000 And so for example, if we wanted to calculate 48 00:02:39.000 --> 00:02:43.650 the radius of a circle with 10 pixels, we could do that. 49 00:02:43.650 --> 00:02:47.160 So for that we use math.pi. 50 00:02:47.160 --> 00:02:50.100 And for now, let's just take a look at that. 51 00:02:50.100 --> 00:02:51.670 And so it is this constant 52 00:02:52.860 --> 00:02:55.983 that you might know probably. 53 00:02:56.910 --> 00:02:59.700 And so again, let's say that we get like 10 pixels 54 00:02:59.700 --> 00:03:01.320 from the user interface. 55 00:03:01.320 --> 00:03:06.320 So we can say parse float of 10 pixels, 56 00:03:08.790 --> 00:03:11.880 and then we simply have to square this value. 57 00:03:11.880 --> 00:03:15.330 This is how we calculate the area of a circle 58 00:03:15.330 --> 00:03:16.893 with this radius. 59 00:03:17.760 --> 00:03:18.593 All right? 60 00:03:19.710 --> 00:03:23.250 Now another thing that is on the math object 61 00:03:23.250 --> 00:03:26.370 is the random function that we already have been using 62 00:03:26.370 --> 00:03:27.930 a couple of times. 63 00:03:27.930 --> 00:03:29.700 And it's very important to be able 64 00:03:29.700 --> 00:03:33.390 to generate good random numbers when we need them. 65 00:03:33.390 --> 00:03:36.210 So before we have already created 66 00:03:36.210 --> 00:03:38.403 random dice rolls, remember? 67 00:03:39.300 --> 00:03:43.683 So that we did by math dot random. 68 00:03:44.790 --> 00:03:49.790 And so this will give us a number between zero and one. 69 00:03:49.920 --> 00:03:53.190 So as I reload, you see I get different values. 70 00:03:53.190 --> 00:03:56.130 Then we multiply this by six, 71 00:03:56.130 --> 00:04:01.130 and then we removed basically the decimal part 72 00:04:01.290 --> 00:04:06.290 by doing math dot trunc, like this. 73 00:04:07.440 --> 00:04:09.900 Okay, now the problem with this was 74 00:04:09.900 --> 00:04:13.020 that then the highest number could be five. 75 00:04:13.020 --> 00:04:15.720 And so we simply added plus one 76 00:04:15.720 --> 00:04:18.540 to offset that truncation here. 77 00:04:18.540 --> 00:04:21.390 So that cutting off of the decimal part. 78 00:04:21.390 --> 00:04:23.850 And so now we're gonna get values here 79 00:04:23.850 --> 00:04:27.483 between really one and six. 80 00:04:28.470 --> 00:04:30.990 Okay, so this works great, 81 00:04:30.990 --> 00:04:34.320 but let's now generalize this formula into a function 82 00:04:34.320 --> 00:04:38.490 that we can then use as a random number generator. 83 00:04:38.490 --> 00:04:41.520 And this is gonna be super useful in many apps 84 00:04:41.520 --> 00:04:44.580 that you're gonna build throughout your career. 85 00:04:44.580 --> 00:04:47.520 Now there is actually a problem with the implementation 86 00:04:47.520 --> 00:04:50.970 of this function in the first version of this video. 87 00:04:50.970 --> 00:04:54.210 And so you will see my screen changed now 88 00:04:54.210 --> 00:04:57.870 because I rerecorded this part of the video later. 89 00:04:57.870 --> 00:04:59.520 But that's not a problem at all. 90 00:04:59.520 --> 00:05:01.890 And so let's now just start working 91 00:05:01.890 --> 00:05:04.860 on this random number generator. 92 00:05:04.860 --> 00:05:09.860 So we're gonna create a function, let's call it random int. 93 00:05:11.100 --> 00:05:15.720 And here we will pass in a minimum and a maximum value. 94 00:05:15.720 --> 00:05:18.390 So minimum and maximum 95 00:05:18.390 --> 00:05:21.930 because we basically will want to generate 96 00:05:21.930 --> 00:05:24.810 a random number between these two values. 97 00:05:24.810 --> 00:05:29.400 And let's actually once again first call this function 98 00:05:29.400 --> 00:05:32.910 so that we actually see how we can use it. 99 00:05:32.910 --> 00:05:35.880 So for example, let's say we want a random number 100 00:05:35.880 --> 00:05:39.000 between 10 and 20. 101 00:05:39.000 --> 00:05:41.820 And so then this is how we would call this function. 102 00:05:41.820 --> 00:05:44.520 Or maybe we just want a random number. 103 00:05:44.520 --> 00:05:49.500 So a random integer between zero and three. 104 00:05:49.500 --> 00:05:51.300 And so these are all the different ways 105 00:05:51.300 --> 00:05:54.180 in which we'll be able to use this function. 106 00:05:54.180 --> 00:05:57.390 And so let's now actually build out this function here 107 00:05:57.390 --> 00:06:00.300 step by step, because this will teach you a lot 108 00:06:00.300 --> 00:06:03.663 about random numbers and how to generate them. 109 00:06:04.590 --> 00:06:09.590 So as always, let's start from math dot random, 110 00:06:10.200 --> 00:06:13.080 which as you already know gives us a random number 111 00:06:13.080 --> 00:06:15.960 between zero and one. 112 00:06:15.960 --> 00:06:19.200 Now if we wanted to scale this, so basically if we wanted 113 00:06:19.200 --> 00:06:22.650 to have a number, for example, between zero and two, 114 00:06:22.650 --> 00:06:25.740 then we would multiply this by two. 115 00:06:25.740 --> 00:06:28.740 So let's actually do that here first. 116 00:06:28.740 --> 00:06:31.170 In order to understand how this is gonna work. 117 00:06:31.170 --> 00:06:34.323 Even though we already did this here many times before. 118 00:06:35.610 --> 00:06:39.030 So now we have, with this, here basically 119 00:06:39.030 --> 00:06:41.580 a number between zero and two, 120 00:06:41.580 --> 00:06:44.580 but it's not quite two, it's more like between zero 121 00:06:44.580 --> 00:06:47.880 and 1.999999, right? 122 00:06:47.880 --> 00:06:50.760 Because keep in mind that these are not integers, 123 00:06:50.760 --> 00:06:53.460 these are basically decimal numbers. 124 00:06:53.460 --> 00:06:54.780 And so now we will, 125 00:06:54.780 --> 00:06:58.830 before we can move on, actually take out the decimal part 126 00:06:58.830 --> 00:07:02.640 with math dot floor. 127 00:07:02.640 --> 00:07:06.270 So basically rounding down this value. 128 00:07:06.270 --> 00:07:09.390 And so with this, we will now always get a number 129 00:07:09.390 --> 00:07:11.910 which is either zero or one. 130 00:07:11.910 --> 00:07:14.580 Because again, this one here will stay 131 00:07:14.580 --> 00:07:19.140 between zero and 1.99999, and so on. 132 00:07:19.140 --> 00:07:21.030 And so if we take off that decimal part, 133 00:07:21.030 --> 00:07:24.270 we will end up with zero or one. 134 00:07:24.270 --> 00:07:25.710 So with this right now, 135 00:07:25.710 --> 00:07:29.070 we can generate two different random numbers. 136 00:07:29.070 --> 00:07:31.920 That's because we have these two right here. 137 00:07:31.920 --> 00:07:34.230 But of course this needs to be dynamic, 138 00:07:34.230 --> 00:07:36.420 so it needs to respond to the minimum 139 00:07:36.420 --> 00:07:39.420 and maximum values that we input here. 140 00:07:39.420 --> 00:07:40.500 So here for example, 141 00:07:40.500 --> 00:07:43.920 we do not want only two possible random numbers, 142 00:07:43.920 --> 00:07:45.570 but really 10. 143 00:07:45.570 --> 00:07:47.130 Or actually 11, 144 00:07:47.130 --> 00:07:49.560 because this minimum and this maximum 145 00:07:49.560 --> 00:07:51.210 should also be included. 146 00:07:51.210 --> 00:07:53.970 So if we count from 10 to 20, 147 00:07:53.970 --> 00:07:56.130 that will actually be 11 numbers, 148 00:07:56.130 --> 00:07:58.530 or here it'll be four numbers. 149 00:07:58.530 --> 00:08:01.820 So zero, one, two, and three. 150 00:08:01.820 --> 00:08:04.080 So four numbers, right? 151 00:08:04.080 --> 00:08:08.970 So how can we get to these number of values that we want? 152 00:08:08.970 --> 00:08:12.210 Well, here instead of hard-coding this value, 153 00:08:12.210 --> 00:08:15.840 we just need to subtract the max 154 00:08:15.840 --> 00:08:18.630 from, or actually the other way around. 155 00:08:18.630 --> 00:08:22.020 So subtracting the minimum from the maximum. 156 00:08:22.020 --> 00:08:26.610 So in this case, that would give us 20 minus 10 is 10, 157 00:08:26.610 --> 00:08:30.570 and then here we would get three minus zero is three. 158 00:08:30.570 --> 00:08:34.380 Just remember that actually here we had not 10 159 00:08:34.380 --> 00:08:36.210 different random numbers, but 11. 160 00:08:36.210 --> 00:08:39.390 And here, not just three, but four. 161 00:08:39.390 --> 00:08:41.910 And so again, that's because both the minimum 162 00:08:41.910 --> 00:08:45.660 and the maximum should be part of the range. 163 00:08:45.660 --> 00:08:48.180 So to fix that, all we need to do 164 00:08:48.180 --> 00:08:52.950 is to add plus one here, all right? 165 00:08:52.950 --> 00:08:55.650 And so with this, what we have at this point 166 00:08:55.650 --> 00:08:57.570 will already give us the correct 167 00:08:57.570 --> 00:09:00.723 number of possible random integers. 168 00:09:01.680 --> 00:09:03.060 Now, we're not done here yet, 169 00:09:03.060 --> 00:09:06.870 but let's already start to log the result here 170 00:09:06.870 --> 00:09:10.380 to the console of this one just so we can see 171 00:09:10.380 --> 00:09:11.830 that we're on the right path. 172 00:09:12.780 --> 00:09:14.220 So let's get rid of this one here. 173 00:09:14.220 --> 00:09:16.230 So it's just this last result here. 174 00:09:16.230 --> 00:09:18.870 So if we keep updating, then notice 175 00:09:18.870 --> 00:09:23.250 how of course these numbers are not between 10 and 20 yet, 176 00:09:23.250 --> 00:09:25.890 but really more between zero and nine, 177 00:09:25.890 --> 00:09:27.603 or probably zero and 10. 178 00:09:28.920 --> 00:09:30.960 So if we reload this a few times, 179 00:09:30.960 --> 00:09:33.210 we should get all of these different numbers. 180 00:09:33.210 --> 00:09:35.550 So again, between zero 181 00:09:35.550 --> 00:09:39.213 and 10 with both of these values included. 182 00:09:40.110 --> 00:09:41.670 So let's fix that. 183 00:09:41.670 --> 00:09:44.220 And so basically that's gonna be the second step. 184 00:09:44.220 --> 00:09:47.100 So we already did the first step, which was basically 185 00:09:47.100 --> 00:09:49.740 to scale up this math dot random, 186 00:09:49.740 --> 00:09:53.310 which initially is a number between zero and 10, 187 00:09:53.310 --> 00:09:55.500 all the way to making it dynamic, 188 00:09:55.500 --> 00:09:58.137 taking into account for minimum and maximum. 189 00:09:58.137 --> 00:10:01.440 And so after this first step, now the possible number 190 00:10:01.440 --> 00:10:04.380 of random integers is correct. 191 00:10:04.380 --> 00:10:06.720 But now we need to basically then shift 192 00:10:06.720 --> 00:10:09.450 this range to the correct place. 193 00:10:09.450 --> 00:10:12.420 So basically that it can start not at zero, 194 00:10:12.420 --> 00:10:15.090 but really at 10 here. 195 00:10:15.090 --> 00:10:18.720 So all we need to do is just what I just said. 196 00:10:18.720 --> 00:10:21.750 So basically adding this value right here 197 00:10:21.750 --> 00:10:23.523 so that the range starts there. 198 00:10:24.480 --> 00:10:27.990 So here at the very end, 199 00:10:27.990 --> 00:10:30.300 so after all of this calculation here, 200 00:10:30.300 --> 00:10:32.133 we just add the minimum value. 201 00:10:33.210 --> 00:10:38.100 And so, beautiful, 19 is indeed between 10 and 20. 202 00:10:38.100 --> 00:10:40.530 And if we reload this a couple times, 203 00:10:40.530 --> 00:10:44.670 then you see here that now we already got the max value. 204 00:10:44.670 --> 00:10:47.703 So that's nice to know that it is indeed included. 205 00:10:48.960 --> 00:10:51.810 And it would be good to also get a 10 here, 206 00:10:51.810 --> 00:10:52.893 just to make sure. 207 00:10:53.730 --> 00:10:56.820 But well, I'm not gonna reload it a million times 208 00:10:56.820 --> 00:10:58.500 until I see it. 209 00:10:58.500 --> 00:11:01.200 But I'm sure that this is working just fine. 210 00:11:01.200 --> 00:11:04.440 Let's also maybe duplicate this here 211 00:11:04.440 --> 00:11:07.830 and try one between zero and three. 212 00:11:07.830 --> 00:11:10.680 And so this should be easier to get 213 00:11:10.680 --> 00:11:12.363 all of them here at least once. 214 00:11:13.500 --> 00:11:16.080 So you saw that we got a three before, 215 00:11:16.080 --> 00:11:17.910 and a two, now a zero. 216 00:11:17.910 --> 00:11:21.480 And so that means that our random int function here 217 00:11:21.480 --> 00:11:23.160 is absolutely correct 218 00:11:23.160 --> 00:11:26.970 and ready to be reused in any of your future project, 219 00:11:26.970 --> 00:11:31.290 if you ever need some random number between two values. 220 00:11:31.290 --> 00:11:33.390 Now as I change my screen back 221 00:11:33.390 --> 00:11:35.160 to the original, you will see 222 00:11:35.160 --> 00:11:39.270 the old incorrect implementation of this function. 223 00:11:39.270 --> 00:11:42.060 So please just disregard that function 224 00:11:42.060 --> 00:11:43.680 that you see on the screen now, 225 00:11:43.680 --> 00:11:46.950 and use the one that we just coded earlier. 226 00:11:46.950 --> 00:11:51.090 Okay, next up, let's talk a little bit about rounding. 227 00:11:51.090 --> 00:11:54.240 And let's start by rounding integers. 228 00:11:54.240 --> 00:11:57.300 So you can add some comments to this here if you want, 229 00:11:57.300 --> 00:11:59.403 but I'm just gonna leave it like this. 230 00:12:00.420 --> 00:12:04.653 I will just add here, rounding integers. 231 00:12:05.670 --> 00:12:10.670 And so we have already been using math dot trunc, right? 232 00:12:13.440 --> 00:12:17.370 So what this does is to simply remove any decimal part. 233 00:12:17.370 --> 00:12:20.703 And so we end up with 23 here, right? 234 00:12:21.780 --> 00:12:25.413 Let's just take this one out, all right? 235 00:12:27.060 --> 00:12:31.353 So again, this one simply removes any decimal part always. 236 00:12:32.220 --> 00:12:34.620 But we have also other ways. 237 00:12:34.620 --> 00:12:36.453 So we also have round. 238 00:12:38.400 --> 00:12:40.893 So math dot round. 239 00:12:43.050 --> 00:12:46.710 And so this one will always round to the nearest integer. 240 00:12:46.710 --> 00:12:49.893 So this one is gonna be 23, and the other one, 24. 241 00:12:53.700 --> 00:12:55.450 Let's duplicate this a couple times 242 00:12:56.700 --> 00:12:58.290 to save us some time. 243 00:12:58.290 --> 00:13:00.453 Then we also have ceil. 244 00:13:01.650 --> 00:13:04.560 And this one will basically round down. 245 00:13:04.560 --> 00:13:09.090 So both of these results should become 24. 246 00:13:09.090 --> 00:13:11.460 And so that's these two here. 247 00:13:11.460 --> 00:13:14.910 So line 318 and 20, 248 00:13:14.910 --> 00:13:16.830 or actually it's these two. 249 00:13:16.830 --> 00:13:19.200 So I'm confusing these numbers. 250 00:13:19.200 --> 00:13:21.810 All right, so both of these are 24 251 00:13:21.810 --> 00:13:25.620 because they will both always be rounded up. 252 00:13:25.620 --> 00:13:27.723 And then we also have a floor. 253 00:13:30.862 --> 00:13:34.623 And so these two will both be rounded down to 23. 254 00:13:36.029 --> 00:13:38.280 And so that's what we get here. 255 00:13:38.280 --> 00:13:40.530 And by the way, all of these methods, 256 00:13:40.530 --> 00:13:43.980 they also do a type coercion. 257 00:13:43.980 --> 00:13:47.253 So if we do this, then it's gonna work just the same. 258 00:13:48.390 --> 00:13:50.220 Now you might think that floor 259 00:13:50.220 --> 00:13:52.383 and trunc are very similar. 260 00:13:53.490 --> 00:13:57.570 We just put this one down here, and indeed they do 261 00:13:57.570 --> 00:14:00.930 the same when we are dealing with positive numbers. 262 00:14:00.930 --> 00:14:04.350 So basically floor and trunc both cut off 263 00:14:04.350 --> 00:14:08.433 the decimal part when we are dealing with positive numbers. 264 00:14:09.270 --> 00:14:12.903 However, for negative numbers, it doesn't work this way. 265 00:14:14.640 --> 00:14:16.113 So let me compare them here. 266 00:14:17.730 --> 00:14:22.703 So trunc minus this and also floor, okay? 267 00:14:24.690 --> 00:14:28.770 And so now this one here, just like before, gets truncated, 268 00:14:28.770 --> 00:14:30.870 so it simply removes this part. 269 00:14:30.870 --> 00:14:34.800 But floor now gets rounded to minus 24 270 00:14:34.800 --> 00:14:36.480 because with negative numbers, 271 00:14:36.480 --> 00:14:38.910 rounding works the other way around. 272 00:14:38.910 --> 00:14:43.530 And so actually a floor is a little bit better than trunc 273 00:14:43.530 --> 00:14:46.320 because it works in all situations no matter 274 00:14:46.320 --> 00:14:50.100 if we're dealing with positive or negative numbers. 275 00:14:50.100 --> 00:14:53.913 And so here, let's go ahead and replace this with floor. 276 00:14:55.110 --> 00:14:58.323 So we're looking for a really generalized function here. 277 00:14:59.610 --> 00:15:03.180 So this random int function should work in all situations, 278 00:15:03.180 --> 00:15:06.870 even if we give it negative inputs here. 279 00:15:06.870 --> 00:15:09.963 And so therefore we need to work with floor here. 280 00:15:12.000 --> 00:15:12.833 All right? 281 00:15:13.710 --> 00:15:15.900 So that's rounding integers. 282 00:15:15.900 --> 00:15:18.903 Let's talk about floating point numbers. 283 00:15:21.180 --> 00:15:23.823 Or we can also say decimals. 284 00:15:24.720 --> 00:15:25.830 And now with decimals, 285 00:15:25.830 --> 00:15:29.010 it works in a little bit different way. 286 00:15:29.010 --> 00:15:31.053 So let me show you how. 287 00:15:31.950 --> 00:15:34.200 So in decimals we have to specify 288 00:15:34.200 --> 00:15:37.710 the number like this, in parenthesis. 289 00:15:37.710 --> 00:15:42.710 And then on that number, we call the to fixed method, okay? 290 00:15:44.010 --> 00:15:46.320 And let's try it here with zero first, 291 00:15:46.320 --> 00:15:48.243 just so we can see the results. 292 00:15:49.170 --> 00:15:53.190 And so you see that with zero, it is converted to three. 293 00:15:53.190 --> 00:15:56.640 But this three is white here, 294 00:15:56.640 --> 00:16:00.240 while these other ones are pink, or purple. 295 00:16:00.240 --> 00:16:04.980 And so this means that it's actually a string, right? 296 00:16:04.980 --> 00:16:09.980 So to fixed will always return a string and not a number. 297 00:16:09.990 --> 00:16:12.570 And that's important to keep in mind. 298 00:16:12.570 --> 00:16:15.753 So if we set here instead of zero to three, 299 00:16:17.040 --> 00:16:19.530 then it returns 2.7 300 00:16:19.530 --> 00:16:20.940 and it adds zeros 301 00:16:20.940 --> 00:16:24.210 until it has exactly three decimal parts. 302 00:16:24.210 --> 00:16:26.340 Just like we specified here. 303 00:16:26.340 --> 00:16:31.020 All right, now let's add something more here 304 00:16:31.020 --> 00:16:33.450 like two, three, four, five. 305 00:16:33.450 --> 00:16:37.050 And let's say we only want two decimal places here now. 306 00:16:37.050 --> 00:16:39.843 So this should become 2.35, 307 00:16:40.980 --> 00:16:42.363 and indeed it does. 308 00:16:43.380 --> 00:16:46.650 Okay, and if we now wanted to convert this result 309 00:16:46.650 --> 00:16:49.950 to a number, then we simply would have to add 310 00:16:49.950 --> 00:16:51.540 the plus sign here, 311 00:16:51.540 --> 00:16:54.360 and then we already know that this here 312 00:16:54.360 --> 00:16:55.953 converts a string to a number. 313 00:16:56.940 --> 00:16:59.613 And indeed now it is purple again. 314 00:17:01.620 --> 00:17:06.270 So with decimals it works differently than with integers. 315 00:17:06.270 --> 00:17:08.130 And that's once again 316 00:17:08.130 --> 00:17:10.920 because things in JavaScript evolved 317 00:17:10.920 --> 00:17:15.150 kind of in a weird way in this kind of old language. 318 00:17:15.150 --> 00:17:18.120 And if the language was designed today, 319 00:17:18.120 --> 00:17:20.610 definitely this would be very different. 320 00:17:20.610 --> 00:17:24.713 But yeah, this is what we have to work with right now, okay? 321 00:17:26.490 --> 00:17:29.700 Just keep in mind that this here works in a similar way 322 00:17:29.700 --> 00:17:31.500 than the string methods. 323 00:17:31.500 --> 00:17:36.480 So this is a number, so it's a primitive, right? 324 00:17:36.480 --> 00:17:39.270 And primitives actually don't have methods. 325 00:17:39.270 --> 00:17:43.170 And so behind the scenes, JavaScript will do boxing. 326 00:17:43.170 --> 00:17:46.140 And boxing is to basically transform this 327 00:17:46.140 --> 00:17:50.370 to a number object, then call the method on that object, 328 00:17:50.370 --> 00:17:52.470 and then once the operation is finished, 329 00:17:52.470 --> 00:17:56.820 it'll convert it back to a primitive, okay? 330 00:17:56.820 --> 00:17:59.070 All right, so once again, 331 00:17:59.070 --> 00:18:02.910 this lecture looked a little bit like a reference 332 00:18:02.910 --> 00:18:04.773 of a couple of different methods. 333 00:18:05.790 --> 00:18:08.700 But to make it a bit more fun, let's now apply 334 00:18:08.700 --> 00:18:11.970 some of this to our bankers project. 335 00:18:11.970 --> 00:18:13.800 And the first thing that I want to do 336 00:18:13.800 --> 00:18:17.043 is to round the requested loan amount. 337 00:18:18.450 --> 00:18:19.803 So this one here. 338 00:18:23.430 --> 00:18:24.810 So this looks weird. 339 00:18:24.810 --> 00:18:26.943 Oh, it's because of this number. 340 00:18:29.430 --> 00:18:32.040 Okay, so we could use this application 341 00:18:32.040 --> 00:18:35.130 in this other page here on the other side, 342 00:18:35.130 --> 00:18:38.670 but I prefer to have everything here in one screen. 343 00:18:38.670 --> 00:18:43.670 But anyway, I can take a loan like this, right? 344 00:18:44.610 --> 00:18:46.380 With the decimal part. 345 00:18:46.380 --> 00:18:48.810 But in practice, I've never seen a bank 346 00:18:48.810 --> 00:18:51.030 giving out a loan like this. 347 00:18:51.030 --> 00:18:53.334 And so let's apply the rounding 348 00:18:53.334 --> 00:18:58.334 to the loan functionality. 349 00:18:59.430 --> 00:19:01.230 So that's here. 350 00:19:01.230 --> 00:19:03.993 And the rounding then needs to happen right here. 351 00:19:04.890 --> 00:19:07.530 So the value that we get from the loan here 352 00:19:07.530 --> 00:19:10.800 needs to be rounded down, okay? 353 00:19:10.800 --> 00:19:14.310 And then we actually do not need to convert it to a number 354 00:19:14.310 --> 00:19:19.310 because as I showed you before, the math dot floor method 355 00:19:21.660 --> 00:19:25.710 actually does type coercion itself, okay? 356 00:19:25.710 --> 00:19:28.020 And we are using floor here 357 00:19:28.020 --> 00:19:31.950 because we simply want to round any value down, all right? 358 00:19:31.950 --> 00:19:35.913 So in this case, it would've been 150, and that's it. 359 00:19:37.440 --> 00:19:39.003 So let's try that again now. 360 00:19:44.250 --> 00:19:47.553 So let's ask for 150.56. 361 00:19:50.340 --> 00:19:53.940 And so now we get just this, okay? 362 00:19:53.940 --> 00:19:56.640 Probably I added one more zero there, 363 00:19:56.640 --> 00:19:58.560 but that doesn't matter. 364 00:19:58.560 --> 00:20:02.190 Next up, let's use the to fixed function, 365 00:20:02.190 --> 00:20:04.500 or method, to make our numbers here 366 00:20:04.500 --> 00:20:06.003 look a little bit nicer. 367 00:20:06.960 --> 00:20:10.170 So here for example, we have this decimal part 368 00:20:10.170 --> 00:20:14.820 with the two numbers, but here then we only have the 0.9. 369 00:20:14.820 --> 00:20:17.490 And so this should be like point 90 370 00:20:17.490 --> 00:20:20.673 and here it should be 1300.00. 371 00:20:21.720 --> 00:20:23.313 And the same also up here. 372 00:20:24.300 --> 00:20:28.830 All right, so for that, we can use the to fixed function 373 00:20:28.830 --> 00:20:30.630 that we just learned about. 374 00:20:30.630 --> 00:20:32.730 And so let's do that in all the places 375 00:20:32.730 --> 00:20:36.390 where we display numbers on the screen. 376 00:20:36.390 --> 00:20:39.900 And so, that's in these three functions. 377 00:20:39.900 --> 00:20:43.893 So display movements, display balance, and display summary. 378 00:20:45.720 --> 00:20:47.373 So let's start here at the top. 379 00:20:48.630 --> 00:20:52.020 And so here we have the first occurrence. 380 00:20:52.020 --> 00:20:54.030 So this movement here is a value, 381 00:20:54.030 --> 00:20:56.190 so it's a number that we display. 382 00:20:56.190 --> 00:20:58.560 And so on here we can simply call, 383 00:20:58.560 --> 00:21:03.560 so dot to fixed, and then with two decimal parts. 384 00:21:05.190 --> 00:21:06.023 All right? 385 00:21:07.572 --> 00:21:09.522 And now let's just copy this from here. 386 00:21:11.280 --> 00:21:13.410 So display balance. 387 00:21:13.410 --> 00:21:14.770 So let's do the same here 388 00:21:17.818 --> 00:21:19.620 and the same in the summary. 389 00:21:19.620 --> 00:21:22.620 And so that will then hopefully also fix 390 00:21:22.620 --> 00:21:25.890 this weird, really long number 391 00:21:25.890 --> 00:21:29.490 that happens because of the rounding errors in JavaScript 392 00:21:29.490 --> 00:21:31.990 that I just explained during the previous lecture. 393 00:21:33.060 --> 00:21:36.933 So everywhere we print a number, I will do this now. 394 00:21:38.910 --> 00:21:41.013 So okay, 395 00:21:42.120 --> 00:21:45.300 then also on this result 396 00:21:45.300 --> 00:21:50.020 and also on the interest, let's give it a save 397 00:21:54.930 --> 00:21:57.000 and that's a lot better. 398 00:21:57.000 --> 00:22:01.083 So it worked, you see now we get 0.00. 399 00:22:02.100 --> 00:22:07.020 And here we also get nicely 0.90. 400 00:22:07.020 --> 00:22:08.490 And the same down here, 401 00:22:08.490 --> 00:22:09.660 we are now back to having 402 00:22:09.660 --> 00:22:11.700 just two decimal places, 403 00:22:11.700 --> 00:22:15.870 just as we requested, so to say. 404 00:22:15.870 --> 00:22:19.350 So this lecture was kind of a short overview 405 00:22:19.350 --> 00:22:23.020 of some more math functions, including some rounding 406 00:22:24.180 --> 00:22:26.760 and also some other stuff, 407 00:22:26.760 --> 00:22:29.253 like getting the max and the min value. 408 00:22:30.450 --> 00:22:34.020 And yeah, so, good-to-know functions. 409 00:22:34.020 --> 00:22:36.000 And of course, there are a lot more. 410 00:22:36.000 --> 00:22:39.150 So if you need something like logarithmical functions 411 00:22:39.150 --> 00:22:41.910 or sines, then of course 412 00:22:41.910 --> 00:22:45.303 you can always check out the MDN documentation.