1 00:00:09,160 --> 00:00:16,140 Hey, everyone, we are almost finished with our stopwatch exercise, it is already working very well. 2 00:00:16,150 --> 00:00:21,640 We made some tests in the previous video, so we are able to start it, stop it. 3 00:00:21,640 --> 00:00:29,050 Resetting it started again, resetting it while it's working, stopping and restarting it. 4 00:00:30,070 --> 00:00:36,670 So this is working just fine, so now the last thing we need to do here is just formating the milliseconds, 5 00:00:36,670 --> 00:00:39,620 two hours, minutes, seconds in milliseconds. 6 00:00:40,000 --> 00:00:41,280 This shouldn't be hard to do. 7 00:00:41,590 --> 00:00:43,870 So let's go back to Visual Studio Code. 8 00:00:45,040 --> 00:00:52,150 So right here, when we calculate the elapsed time, instead of just sending it to the stopwatch element, 9 00:00:52,180 --> 00:00:54,030 we need to do the formatting. 10 00:00:54,430 --> 00:01:00,380 So how do we convert a number of milliseconds into hours, minutes, seconds and milliseconds? 11 00:01:00,400 --> 00:01:04,170 Well, the first thing we need to go check is that conversion table. 12 00:01:04,180 --> 00:01:07,260 So let's go back to the course material. 13 00:01:09,490 --> 00:01:18,040 Let's find the date and time lesson, here it is, I'm just going to hit control and then click it to 14 00:01:18,040 --> 00:01:19,480 open in a different tab. 15 00:01:19,660 --> 00:01:20,580 So here it is. 16 00:01:21,460 --> 00:01:22,450 Let's go down here. 17 00:01:24,830 --> 00:01:30,340 So now we have the number of milliseconds in one hour and one minute and in one second. 18 00:01:30,380 --> 00:01:32,340 So this is exactly what we need. 19 00:01:32,360 --> 00:01:33,740 So let's copy this. 20 00:01:35,720 --> 00:01:37,580 Let's take this to our code. 21 00:01:39,030 --> 00:01:42,270 So this is the number of milliseconds per hour. 22 00:01:50,270 --> 00:01:53,210 Here we have the number of milliseconds per minute. 23 00:02:00,090 --> 00:02:04,740 And per second, we know it's a thousand so per second. 24 00:02:07,340 --> 00:02:14,600 We have a thousand milliseconds, so knowing this, we already have a number in milliseconds now, we 25 00:02:14,600 --> 00:02:17,030 just need to do some calculations. 26 00:02:17,420 --> 00:02:22,850 So the first thing we are going to do here is creating a variable for the hours. 27 00:02:23,120 --> 00:02:25,870 So now let's declare three new variables here. 28 00:02:27,140 --> 00:02:29,210 We are going to be hours. 29 00:02:32,100 --> 00:02:32,850 Minutes. 30 00:02:34,060 --> 00:02:35,560 And second. 31 00:02:45,130 --> 00:02:47,710 So the first thing we need to get is the hours. 32 00:02:49,240 --> 00:02:55,240 So hours are going to be the number we have, which is the elapsed time. 33 00:03:01,860 --> 00:03:06,870 Divided by the amount of milliseconds in one hour. 34 00:03:07,110 --> 00:03:09,060 So now what do we need to do here? 35 00:03:09,090 --> 00:03:17,580 Well, we always want to round the result of this calculation down because let's say we have less than 36 00:03:17,580 --> 00:03:21,840 this amount of milliseconds if we have less than this. 37 00:03:21,840 --> 00:03:23,580 So let's say one last. 38 00:03:23,600 --> 00:03:26,890 So three fifty nine zero zero zero. 39 00:03:27,030 --> 00:03:32,510 This means that we didn't reach the first hour yet. 40 00:03:32,790 --> 00:03:38,220 So if we rounded down the result of this, let's just give it a try. 41 00:03:38,220 --> 00:03:39,570 Let's just copy this. 42 00:03:40,660 --> 00:03:42,810 I'm going to open a calculator here. 43 00:03:47,480 --> 00:03:55,190 I'm just going to pace this, so let's say it's one millisecond before completing an hour, so let's 44 00:03:55,190 --> 00:03:56,820 just subtract one here. 45 00:03:57,080 --> 00:03:59,840 So this is our elapsed time. 46 00:03:59,990 --> 00:04:02,380 We didn't reach an hour yet. 47 00:04:02,750 --> 00:04:06,080 So what happens when we divide this by. 48 00:04:07,240 --> 00:04:09,580 The number of milliseconds in one hour. 49 00:04:11,230 --> 00:04:18,370 So this is going to be zero nine nine nine nine nine, so we never reach the first hour in this case, 50 00:04:18,380 --> 00:04:21,630 what do we want to show in the hours? 51 00:04:21,760 --> 00:04:26,200 We want to show zero because we didn't reach the first hour yet. 52 00:04:26,470 --> 00:04:30,640 So the way we do this is using the floor method. 53 00:04:30,640 --> 00:04:31,450 So math. 54 00:04:33,390 --> 00:04:34,320 That floor. 55 00:04:37,580 --> 00:04:44,480 So no matter if we have zero point one zero point two or zero point nine nine nine nine nine, this 56 00:04:44,480 --> 00:04:46,430 is always going to round down. 57 00:04:46,460 --> 00:04:50,530 So in this case, our number of hours is going to be zero. 58 00:04:50,990 --> 00:04:51,620 Pretty good. 59 00:04:52,530 --> 00:04:57,240 We already have the hours and now what do we do with the rest? 60 00:04:57,390 --> 00:05:01,470 So every time we do this operation, we need to keep the remainder. 61 00:05:03,610 --> 00:05:06,760 So the remainder let's also declare this variable. 62 00:05:08,430 --> 00:05:12,990 This one, we don't need it, actually, the hours, minutes, seconds, we don't have to do it, but 63 00:05:12,990 --> 00:05:19,040 since we are doing this for all variables, let's just do it like this so it's more organized. 64 00:05:19,740 --> 00:05:24,600 So now the remainder in the first time is just going to be the elapsed time. 65 00:05:26,030 --> 00:05:26,960 Minus. 66 00:05:32,310 --> 00:05:34,080 The number of hours we have. 67 00:05:38,190 --> 00:05:42,010 Multiplied again by the number of milliseconds in one hour. 68 00:05:42,030 --> 00:05:43,890 So why are we doing this? 69 00:05:46,350 --> 00:05:48,780 Well, let's get the calculator back again. 70 00:05:51,600 --> 00:05:53,310 Let me just copy this. 71 00:05:54,950 --> 00:05:58,730 Let's say this time we had a little bit more than one hour. 72 00:05:58,760 --> 00:06:04,120 So this is the number, let's say we were 10 milliseconds above one hour. 73 00:06:04,490 --> 00:06:08,240 So this was the number we had for the elapsed time. 74 00:06:09,320 --> 00:06:12,050 Stuff like this, so we can see the code. 75 00:06:14,370 --> 00:06:16,590 Or maybe this yeah, this is better. 76 00:06:17,830 --> 00:06:22,600 So when we go inside here, this is the elapsed time we have. 77 00:06:23,620 --> 00:06:29,200 We're going to divide this by the number of milliseconds in one hour. 78 00:06:30,420 --> 00:06:38,880 So like this, and this is the result we are going to have and when we do the floor, when we apply 79 00:06:38,880 --> 00:06:45,390 the floor method instead of getting all this, no, we are just going to get one. 80 00:06:45,870 --> 00:06:51,350 So let's remember that we had the elapsed time of three six zero zero zero ten. 81 00:06:51,540 --> 00:06:55,140 And now we are just going to have one inside hours. 82 00:06:55,590 --> 00:06:56,730 So if we get. 83 00:06:57,800 --> 00:06:58,250 The. 84 00:06:59,190 --> 00:07:01,770 Three six zero zero zero 10. 85 00:07:04,320 --> 00:07:12,390 Which was the elapsed time we had and we subtract it by the hours multiplied by the number of milliseconds, 86 00:07:12,400 --> 00:07:20,040 so now we have one inside here multiplied by this is just going to be three six. 87 00:07:21,620 --> 00:07:22,850 Zero zero zero. 88 00:07:24,100 --> 00:07:24,640 Zero. 89 00:07:25,410 --> 00:07:32,490 When we do this, the remainder is going to be 10, which is exactly what we need to have back. 90 00:07:32,770 --> 00:07:42,640 So if we had 10 milliseconds above an hour at this point in our calculation now we have hours equals 91 00:07:42,670 --> 00:07:43,330 one. 92 00:07:43,520 --> 00:07:50,950 So we have one inside here and we also have the remainder of milliseconds here, which is exactly what 93 00:07:50,950 --> 00:07:51,910 we want now. 94 00:07:51,910 --> 00:07:53,740 We just need to keep doing this. 95 00:07:53,950 --> 00:07:55,720 Now that we have the remainder. 96 00:07:56,020 --> 00:08:00,550 Let's say we have one hour and three minutes now. 97 00:08:00,550 --> 00:08:01,780 We just need to. 98 00:08:02,770 --> 00:08:08,170 So we have this reminder in milliseconds again now we just need to do the same thing, four minutes, 99 00:08:08,170 --> 00:08:13,720 four seconds, and then at the end, the remainder is just going to be the seconds. 100 00:08:14,300 --> 00:08:16,840 Let's add the semicolon here. 101 00:08:19,500 --> 00:08:26,580 I know at first glance this looks a bit complicated, but actually it isn't, it's just some basic math. 102 00:08:26,580 --> 00:08:32,070 If you need, you can just take your time and have a think about what we are doing here. 103 00:08:32,370 --> 00:08:37,590 If you need some help, you can always leave your questions in the Q&A section. 104 00:08:38,340 --> 00:08:39,920 So let's continue with this. 105 00:08:39,930 --> 00:08:41,650 So now we already have the hours. 106 00:08:41,670 --> 00:08:45,590 So at this point, let's say one hour or zero hours. 107 00:08:45,750 --> 00:08:46,080 All right. 108 00:08:46,110 --> 00:08:48,510 So now we just need to keep doing this. 109 00:08:48,510 --> 00:08:52,770 So we already have the hours and the remainder in milliseconds. 110 00:08:53,070 --> 00:08:55,620 Now, let's do the same thing for the minutes. 111 00:08:55,860 --> 00:08:57,330 So let's just copy this. 112 00:08:57,810 --> 00:09:00,030 This time, it's going to be a bit different. 113 00:09:00,540 --> 00:09:01,500 Let's see why. 114 00:09:02,010 --> 00:09:04,110 So now we need to get the minutes. 115 00:09:06,470 --> 00:09:15,380 Which is going to be math that far, but now instead of the elapsed time now, we just need to get the 116 00:09:15,380 --> 00:09:18,170 number of minutes we have inside the remainder. 117 00:09:20,550 --> 00:09:24,750 And this is the number of milliseconds in one minute. 118 00:09:26,330 --> 00:09:32,580 So let's replace it here, replace it here instead of ours. 119 00:09:32,600 --> 00:09:35,760 We are going to use minutes now down here. 120 00:09:35,780 --> 00:09:43,790 We also need to adjust because we are not working with the elapsed time anymore since we already got 121 00:09:43,790 --> 00:09:47,030 the number of hours and got a remainder. 122 00:09:47,030 --> 00:09:50,360 Now, down here, we are just working with our remainder. 123 00:09:50,510 --> 00:09:53,810 So after we get the minutes, the remainder. 124 00:09:56,650 --> 00:10:04,510 It's just going to be itself minus the number of milliseconds that we put inside here so you can ride 125 00:10:04,510 --> 00:10:11,590 it like this, or if you just want to make it shorter, we can use the decremental operator, which 126 00:10:11,590 --> 00:10:13,000 is just using the. 127 00:10:13,960 --> 00:10:15,640 Minus equal. 128 00:10:16,850 --> 00:10:23,810 Then it's the same thing we had written here and now for the seconds, it's just going to be the same 129 00:10:23,810 --> 00:10:24,240 thing. 130 00:10:24,260 --> 00:10:25,970 So let's just copy this. 131 00:10:27,130 --> 00:10:31,630 Now that we already got the number of minutes, let's do the same thing for. 132 00:10:33,380 --> 00:10:34,280 Second. 133 00:10:37,650 --> 00:10:39,720 So this is going to get the remainder. 134 00:10:39,750 --> 00:10:41,440 This is going to be the same thing. 135 00:10:41,670 --> 00:10:43,590 Let's now get our second. 136 00:10:45,380 --> 00:10:53,030 So here we have one thousand milliseconds and here we also have one thousand milliseconds, so now we 137 00:10:53,030 --> 00:10:54,170 have everything we need. 138 00:10:54,170 --> 00:11:00,140 We have the number of hours, minutes, seconds, and the remainder in the end of it is just going to 139 00:11:00,140 --> 00:11:01,310 be the milliseconds. 140 00:11:01,670 --> 00:11:06,140 So now let's just create a variable for the formatted time. 141 00:11:07,580 --> 00:11:13,130 Just so we don't have to write everything inside here, so again, just to keep it organized, we don't 142 00:11:13,130 --> 00:11:14,690 need to declare this variable. 143 00:11:15,650 --> 00:11:22,070 This is just going to be used right here, but just to make it organized, let's put it here. 144 00:11:24,150 --> 00:11:28,790 So the format of time now is just going to be our hours. 145 00:11:33,220 --> 00:11:40,030 So two strings so we can concatenate things, then we are going to add a Colin. 146 00:11:43,690 --> 00:11:51,220 Then we are just going to do the same thing for minutes, seconds and merely seconds. 147 00:11:58,180 --> 00:11:59,320 So hours. 148 00:12:01,340 --> 00:12:02,030 Minutes. 149 00:12:06,050 --> 00:12:12,740 Seconds and the milliseconds is just going to be the remainder. 150 00:12:13,990 --> 00:12:15,110 All right, pretty cool. 151 00:12:15,130 --> 00:12:21,220 And now, instead of just sending the elapsed time to our element, let's send the formatted time. 152 00:12:21,760 --> 00:12:22,970 Let's see what happens. 153 00:12:22,990 --> 00:12:26,180 Let's see if our crazy calculation is not working. 154 00:12:27,070 --> 00:12:29,470 Going back to the page, refreshing it. 155 00:12:29,470 --> 00:12:31,630 Let's just click start. 156 00:12:33,360 --> 00:12:39,090 And now, as you can see, this is working fine, so we have the seconds here, we have the milliseconds 157 00:12:39,240 --> 00:12:41,900 now there's just one less thing that is not good. 158 00:12:42,150 --> 00:12:51,090 So it's the same problem we had with the clock challenge, because when we have numbers below 10, we 159 00:12:51,090 --> 00:12:53,590 want to add a zero. 160 00:12:53,610 --> 00:12:59,880 So here, instead of showing zero, we want to show zero zero zero zero and so on. 161 00:13:00,300 --> 00:13:06,770 And fortunately, we already have a function for this, which we made in the date and time lesson. 162 00:13:06,780 --> 00:13:07,810 Let's go back here. 163 00:13:07,830 --> 00:13:09,240 Let's remember that. 164 00:13:09,960 --> 00:13:11,540 Or was it here? 165 00:13:11,700 --> 00:13:14,350 No, it was inside the time methods lesson. 166 00:13:14,670 --> 00:13:15,840 So as you can see. 167 00:13:17,080 --> 00:13:18,760 We had this challenge. 168 00:13:20,770 --> 00:13:25,990 This is not working out because I have the code commented, but let's remember that we already created 169 00:13:25,990 --> 00:13:31,370 a function to add the zero, so we just need to go back there to get it. 170 00:13:31,720 --> 00:13:33,310 So here's in the script. 171 00:13:34,090 --> 00:13:35,920 Let's try to find the. 172 00:13:39,360 --> 00:13:44,020 If I search for a clock, so challenge of less than twenty seven, here it is. 173 00:13:44,220 --> 00:13:47,360 So here we have a function to add eight leading zero. 174 00:13:48,270 --> 00:13:49,140 We could use it. 175 00:13:49,140 --> 00:13:54,420 If we had all the code uncommented here, we could just use the function. 176 00:13:54,660 --> 00:13:56,220 We wouldn't have to copy it. 177 00:13:56,640 --> 00:14:02,760 But since everything is commented and we have a different JavaScript file here, let's just copy it 178 00:14:03,450 --> 00:14:05,730 and just place it here. 179 00:14:12,390 --> 00:14:18,120 So let's remember that this function not only includes a leading zero, it also converts the number 180 00:14:18,120 --> 00:14:20,470 into a string, which is pretty cool. 181 00:14:21,030 --> 00:14:24,420 So we just need to execute this function here. 182 00:14:25,450 --> 00:14:30,340 So down here, instead of just getting the hours, we are going to pass the hours. 183 00:14:31,260 --> 00:14:35,820 Inside our function, and we don't need the two string anymore. 184 00:14:41,720 --> 00:14:47,210 So hours, if it's zero or one, it is just going to include a zero to the left. 185 00:14:47,420 --> 00:14:51,530 Let's do the same thing, four minutes, seconds and merely. 186 00:15:17,330 --> 00:15:18,350 Saving this. 187 00:15:19,380 --> 00:15:26,370 Going back to our page, so as you can see now, we have three minutes, twenty five elapsed, let's 188 00:15:26,370 --> 00:15:27,390 just stop this. 189 00:15:27,540 --> 00:15:28,980 Refresh the page now. 190 00:15:28,980 --> 00:15:30,870 Let's see if this is any better. 191 00:15:31,030 --> 00:15:32,730 I'm going to start it. 192 00:15:33,300 --> 00:15:36,180 And now, as you can see, we have the leading zeros. 193 00:15:37,360 --> 00:15:44,680 So now that we have something less than 10, our function is already adding the zero and now it's not 194 00:15:44,680 --> 00:15:45,200 anymore. 195 00:15:45,220 --> 00:15:47,350 So this is working perfectly fine. 196 00:15:47,530 --> 00:15:49,180 Let's do a final test here. 197 00:15:49,420 --> 00:15:51,970 Resetting it, working fine. 198 00:15:52,150 --> 00:15:53,170 Let's stop it. 199 00:15:54,120 --> 00:15:56,370 Let's see if it's going to continue. 200 00:15:58,000 --> 00:16:04,660 From where we stopped, yeah, this is working well, let's reset it while it's working, so everything 201 00:16:04,660 --> 00:16:06,120 seems to be working fine. 202 00:16:06,130 --> 00:16:07,670 Let's reset it one more time. 203 00:16:08,020 --> 00:16:14,380 Now, this is the only thing that's not working because we are just sending a zero so we can correct 204 00:16:14,380 --> 00:16:16,600 this real quick going back there. 205 00:16:21,170 --> 00:16:26,030 So when we reset our clock instead of sending the elapsed time. 206 00:16:27,830 --> 00:16:33,140 We could just let's refresh the page, we could just send the string. 207 00:16:39,890 --> 00:16:41,060 Just like that. 208 00:16:48,360 --> 00:16:56,550 Let's try again starting it, if we hit reset, it's working fine, we have no problem if it's stopped 209 00:16:56,550 --> 00:17:00,600 and we reset it, as you can see now, this is much better. 210 00:17:02,480 --> 00:17:03,470 So that was it. 211 00:17:03,740 --> 00:17:09,440 I know it was a lot of work, but I thought it was about time for us to do something a little bit more 212 00:17:09,440 --> 00:17:10,670 complex like this. 213 00:17:11,480 --> 00:17:15,680 Again, if you have any questions, don't hesitate. 214 00:17:16,280 --> 00:17:18,330 Leave your questions in the Q&A section. 215 00:17:18,350 --> 00:17:20,500 Let me help you out if you need. 216 00:17:20,510 --> 00:17:22,150 You can watch this video again. 217 00:17:22,490 --> 00:17:23,930 Just take your time. 218 00:17:23,930 --> 00:17:24,950 Look at the code. 219 00:17:25,480 --> 00:17:31,400 If you're a bit confused on how we did the calculations to transform the milliseconds into hours, minutes, 220 00:17:31,400 --> 00:17:33,680 seconds, you can just take your time. 221 00:17:33,680 --> 00:17:36,110 Look at it, watch the video again. 222 00:17:36,470 --> 00:17:42,660 Do not continue until you are completely comfortable with what we've done here. 223 00:17:42,740 --> 00:17:43,280 All right. 224 00:17:43,550 --> 00:17:44,540 So that was it. 225 00:17:44,660 --> 00:17:46,010 I'll see you in the next video.