1 00:00:01,110 --> 00:00:04,860 ‫Welcome to the last lecture of this project. 2 00:00:04,860 --> 00:00:08,430 ‫And in this one we're going to use our old friend 3 00:00:08,430 --> 00:00:12,423 ‫use effect to implement a timer feature. 4 00:00:14,010 --> 00:00:17,520 ‫And this new feature will play really nicely 5 00:00:17,520 --> 00:00:20,430 ‫with the reducer that we already have. 6 00:00:20,430 --> 00:00:23,040 ‫So when the game is going to start 7 00:00:23,040 --> 00:00:27,660 ‫the timer will also start, and once the timer reaches zero 8 00:00:27,660 --> 00:00:29,250 ‫we will have the game stop 9 00:00:29,250 --> 00:00:32,760 ‫by setting the status to finished again. 10 00:00:32,760 --> 00:00:36,758 ‫So we will be able to model this behavior really beautifully 11 00:00:36,758 --> 00:00:38,763 ‫with our reducer. 12 00:00:39,780 --> 00:00:43,110 ‫So let's start by creating a timer component 13 00:00:43,110 --> 00:00:46,890 ‫which will display the current time that is remaining 14 00:00:46,890 --> 00:00:50,070 ‫and that will actually also start the timer 15 00:00:50,070 --> 00:00:51,003 ‫in the beginning. 16 00:00:52,080 --> 00:00:56,250 ‫So that component should be right here at the bottom. 17 00:00:56,250 --> 00:01:00,060 ‫So I mean at the bottom here of our UI 18 00:01:00,060 --> 00:01:04,380 ‫so basically down here besides this button. 19 00:01:04,380 --> 00:01:08,670 ‫So what we want is actually for these two components 20 00:01:08,670 --> 00:01:11,130 ‫to be inside a footer. 21 00:01:11,130 --> 00:01:14,013 ‫So we will want a timer, 22 00:01:15,330 --> 00:01:18,870 ‫so the component that we will build next. 23 00:01:18,870 --> 00:01:20,070 ‫And then we want, 24 00:01:20,070 --> 00:01:25,070 ‫again these two inside a footer HTML element. 25 00:01:26,190 --> 00:01:30,840 ‫Now this is ugly like this, so as you already know 26 00:01:30,840 --> 00:01:33,690 ‫I really don't like to see it this way. 27 00:01:33,690 --> 00:01:36,840 ‫And so let's just quickly create ourselves 28 00:01:36,840 --> 00:01:40,173 ‫a footer component. 29 00:01:42,286 --> 00:01:47,286 ‫And so all this will do is to return a footer element 30 00:01:49,440 --> 00:01:52,413 ‫which will then contain the children that we pass in. 31 00:01:54,930 --> 00:01:59,190 ‫Alright, so doing some more component composition here. 32 00:01:59,190 --> 00:02:03,570 ‫And of course we could also just call both the timer 33 00:02:03,570 --> 00:02:05,970 ‫and the next button in here, 34 00:02:05,970 --> 00:02:09,390 ‫but then we would have to pass all the props in here 35 00:02:09,390 --> 00:02:12,510 ‫just to then pass them into these other components. 36 00:02:12,510 --> 00:02:14,313 ‫And so that's not really necessary. 37 00:02:15,750 --> 00:02:16,923 ‫So footer. 38 00:02:17,970 --> 00:02:21,520 ‫And let's also create the timer immediately here. 39 00:02:27,531 --> 00:02:31,057 ‫And then let's just return the timer string for now 40 00:02:32,010 --> 00:02:37,000 ‫so that we can then include so import these two components 41 00:02:37,950 --> 00:02:39,573 ‫into our application here. 42 00:02:41,760 --> 00:02:46,200 ‫So the timer and the footer. 43 00:02:46,200 --> 00:02:49,110 ‫So that's all the components we are going to build. 44 00:02:49,110 --> 00:02:51,483 ‫And as you see, there are a lot of them, 45 00:02:52,620 --> 00:02:54,450 ‫so I like to keep them a bit separated 46 00:02:54,450 --> 00:02:56,493 ‫from the other imports. 47 00:02:57,720 --> 00:03:02,043 ‫But anyway, let's now see what we get. 48 00:03:03,570 --> 00:03:07,230 ‫And so here we have our timer basically. 49 00:03:07,230 --> 00:03:09,090 ‫So it's not really a timer yet 50 00:03:09,090 --> 00:03:11,433 ‫but so let's now change that. 51 00:03:12,420 --> 00:03:16,470 ‫So first of all, it needs the class of timer. 52 00:03:16,470 --> 00:03:20,400 ‫And then let's pretend that here we have just some time 53 00:03:20,400 --> 00:03:22,263 ‫so just so we can see something. 54 00:03:23,220 --> 00:03:25,623 ‫So this already looks a bit nicer. 55 00:03:26,790 --> 00:03:30,180 ‫Now okay, and so here, let's now again use 56 00:03:30,180 --> 00:03:35,180 ‫the useEffect hook to create a side effect on mount. 57 00:03:35,820 --> 00:03:38,700 ‫So as this component here mounts 58 00:03:38,700 --> 00:03:42,210 ‫we basically want to initialize the timer 59 00:03:42,210 --> 00:03:44,640 ‫and we are doing that right here. 60 00:03:44,640 --> 00:03:48,150 ‫So we are starting the timer here in this component 61 00:03:48,150 --> 00:03:51,090 ‫because this timer component will mount 62 00:03:51,090 --> 00:03:53,580 ‫as soon as the game starts. 63 00:03:53,580 --> 00:03:56,130 ‫So of course we couldn't start the timer 64 00:03:56,130 --> 00:03:58,080 ‫in the app component here 65 00:03:58,080 --> 00:04:00,450 ‫because then the timer will start running 66 00:04:00,450 --> 00:04:03,330 ‫as soon as the entire application mounts 67 00:04:03,330 --> 00:04:04,980 ‫but that's not what we want. 68 00:04:04,980 --> 00:04:07,260 ‫So we have to place this effect 69 00:04:07,260 --> 00:04:11,760 ‫into one of the components that mounts as the game starts. 70 00:04:11,760 --> 00:04:14,940 ‫I mean there would of course be ways around that 71 00:04:14,940 --> 00:04:17,580 ‫but I think it makes just sense also 72 00:04:17,580 --> 00:04:20,970 ‫that this effect is here in this timer component. 73 00:04:20,970 --> 00:04:25,173 ‫But anyway, how do we actually create a timer in JavaScript? 74 00:04:26,460 --> 00:04:28,260 ‫Well, first of all, this of course 75 00:04:28,260 --> 00:04:30,360 ‫needs to be a function here 76 00:04:30,360 --> 00:04:35,360 ‫but then we will now use the set interval function. 77 00:04:36,000 --> 00:04:38,430 ‫And so this function will simply run 78 00:04:38,430 --> 00:04:40,380 ‫the function that we pass in here, 79 00:04:40,380 --> 00:04:44,193 ‫every couple of milliseconds which we can also define. 80 00:04:46,320 --> 00:04:48,780 ‫So let's pass in our function, 81 00:04:48,780 --> 00:04:52,020 ‫which could also be an arrow function here by the way, 82 00:04:52,020 --> 00:04:54,693 ‫but let's just do it like this. 83 00:04:55,980 --> 00:04:59,160 ‫So for now, we want to lock to the console 84 00:04:59,160 --> 00:05:02,130 ‫the string of tick once per second. 85 00:05:02,130 --> 00:05:04,833 ‫And so that's every 1000 milliseconds. 86 00:05:06,210 --> 00:05:09,870 ‫Now this will already have started a timer now. 87 00:05:09,870 --> 00:05:11,640 ‫So if we come here to the console, 88 00:05:11,640 --> 00:05:14,190 ‫then you see that every second 89 00:05:14,190 --> 00:05:16,740 ‫while now we actually get two ticks here. 90 00:05:16,740 --> 00:05:20,280 ‫But that's again because the effects run twice 91 00:05:20,280 --> 00:05:22,080 ‫in development mode. 92 00:05:22,080 --> 00:05:25,110 ‫So this wouldn't be happening in production 93 00:05:25,110 --> 00:05:26,673 ‫but now it does. 94 00:05:29,070 --> 00:05:31,020 ‫But of course what we want to do here 95 00:05:31,020 --> 00:05:33,390 ‫is not to lock something to the console, 96 00:05:33,390 --> 00:05:36,930 ‫but instead we want now some value. 97 00:05:36,930 --> 00:05:39,390 ‫So we will want some state value 98 00:05:39,390 --> 00:05:42,003 ‫that we can then decrease every second. 99 00:05:43,110 --> 00:05:47,220 ‫So let's take out this console dot lock here for now 100 00:05:47,220 --> 00:05:50,280 ‫and reload our page so that we don't create 101 00:05:50,280 --> 00:05:53,040 ‫any additional work for the page. 102 00:05:53,040 --> 00:05:57,390 ‫And then let's come here again to our state 103 00:05:57,390 --> 00:06:00,240 ‫and add one final piece of state. 104 00:06:00,240 --> 00:06:04,197 ‫And so that is going to be the seconds remaining. 105 00:06:05,880 --> 00:06:08,940 ‫And we could do it also the other way around. 106 00:06:08,940 --> 00:06:12,780 ‫So we could start at zero and then add one every second 107 00:06:12,780 --> 00:06:14,940 ‫until we reach a certain number. 108 00:06:14,940 --> 00:06:18,630 ‫But here instead we will start at some number. 109 00:06:18,630 --> 00:06:21,030 ‫So for now, let's just say 10 seconds 110 00:06:21,030 --> 00:06:25,200 ‫and then we will remove one second every second. 111 00:06:25,200 --> 00:06:27,180 ‫And once that reaches zero 112 00:06:27,180 --> 00:06:29,670 ‫so once there are no more seconds remaining 113 00:06:29,670 --> 00:06:31,293 ‫then we will finish the game. 114 00:06:32,430 --> 00:06:36,000 ‫So let's now implement what I explained. 115 00:06:36,000 --> 00:06:37,920 ‫And so once again 116 00:06:37,920 --> 00:06:41,520 ‫we will just leverage our reducer here again. 117 00:06:41,520 --> 00:06:44,340 ‫And add one final event here 118 00:06:44,340 --> 00:06:47,490 ‫and this one I'm going to call it tick. 119 00:06:47,490 --> 00:06:52,350 ‫So because like a clock, this will happen every second. 120 00:06:52,350 --> 00:06:55,470 ‫So this is the event that we are going to dispatch 121 00:06:55,470 --> 00:06:57,123 ‫here in this function. 122 00:06:58,499 --> 00:07:01,920 ‫And why not actually do it immediately here 123 00:07:01,920 --> 00:07:04,050 ‫since we are already here? 124 00:07:04,050 --> 00:07:09,050 ‫Let's dispatch the event with the type of tick. 125 00:07:12,090 --> 00:07:16,983 ‫Then we need to give this access to the dispatch function. 126 00:07:18,780 --> 00:07:21,630 ‫Interior is not dispatch event. 127 00:07:21,630 --> 00:07:24,810 ‫And now VS Code is complaining 128 00:07:24,810 --> 00:07:29,490 ‫or actually ESLint because dispatch is now a dependency. 129 00:07:29,490 --> 00:07:32,433 ‫So let's edit then if React needs it. 130 00:07:33,690 --> 00:07:37,263 ‫And so now of course, don't forget to pass it in, 131 00:07:39,690 --> 00:07:42,273 ‫not like we did in the previous lecture. 132 00:07:43,530 --> 00:07:47,547 ‫And now we are ready to model here 133 00:07:49,290 --> 00:07:50,943 ‫our state transition again. 134 00:07:52,290 --> 00:07:54,660 ‫So we want all the state, 135 00:07:54,660 --> 00:07:58,620 ‫and then we want seconds remaining 136 00:07:58,620 --> 00:08:03,620 ‫to be equals state dot second remaining minus one. 137 00:08:05,070 --> 00:08:07,380 ‫So as I said a minute ago 138 00:08:07,380 --> 00:08:11,133 ‫we will simply subtract one second every second. 139 00:08:13,380 --> 00:08:16,080 ‫And now let's also pass that into the timer 140 00:08:16,080 --> 00:08:18,063 ‫so that it can display this value. 141 00:08:19,200 --> 00:08:23,310 ‫So seconds remaining here, taking it out of the state 142 00:08:23,310 --> 00:08:27,393 ‫and then seconds remaining here. 143 00:08:28,650 --> 00:08:29,483 ‫And then of course 144 00:08:29,483 --> 00:08:33,303 ‫we also need to accept that as a prop here. 145 00:08:35,460 --> 00:08:40,460 ‫And yeah, then place that right here. 146 00:08:40,860 --> 00:08:43,473 ‫And with this we should be good to go. 147 00:08:44,430 --> 00:08:45,600 ‫So let's see. 148 00:08:45,600 --> 00:08:49,830 ‫And yeah, that's working great. 149 00:08:49,830 --> 00:08:52,830 ‫Now of course for now we are still allowing this 150 00:08:52,830 --> 00:08:57,750 ‫to go below zero and so let's fix that next. 151 00:08:57,750 --> 00:09:01,620 ‫So basically we now want to check every second 152 00:09:01,620 --> 00:09:03,570 ‫if this has reached zero, 153 00:09:03,570 --> 00:09:06,720 ‫and if it has then we will finish our game. 154 00:09:06,720 --> 00:09:10,143 ‫So exactly like we have been saying in the very beginning. 155 00:09:12,150 --> 00:09:16,080 ‫So this feature fits now really, really nicely 156 00:09:16,080 --> 00:09:20,340 ‫into the entire state structure that we already have. 157 00:09:20,340 --> 00:09:24,160 ‫So we can just now use again the status 158 00:09:26,729 --> 00:09:31,443 ‫and then we can check if state dot seconds remaining 159 00:09:32,730 --> 00:09:35,490 ‫is equal zero. 160 00:09:35,490 --> 00:09:40,110 ‫And if it is, then here we return finished 161 00:09:40,110 --> 00:09:42,660 ‫and otherwise it just stays the same. 162 00:09:42,660 --> 00:09:46,950 ‫So that's then state dot status again. 163 00:09:46,950 --> 00:09:51,720 ‫So this right here is the entire heart of this feature. 164 00:09:51,720 --> 00:09:54,990 ‫So basically allowing us to check 165 00:09:54,990 --> 00:09:57,840 ‫if the seconds came to zero. 166 00:09:57,840 --> 00:09:59,820 ‫And so if they did reach zero 167 00:09:59,820 --> 00:10:02,580 ‫then we just set our status to finished 168 00:10:02,580 --> 00:10:05,500 ‫which will then trigger the entire game to stop 169 00:10:07,620 --> 00:10:11,010 ‫and to then of course render this finished screen 170 00:10:11,010 --> 00:10:15,270 ‫instead of what we have here in the active state. 171 00:10:15,270 --> 00:10:17,160 ‫So let's reload. 172 00:10:17,160 --> 00:10:18,093 ‫And let's see. 173 00:10:19,200 --> 00:10:21,150 ‫So that's why we used a small number 174 00:10:21,150 --> 00:10:24,030 ‫so that we can see immediately if this works 175 00:10:24,030 --> 00:10:27,150 ‫and it does, great. 176 00:10:27,150 --> 00:10:29,760 ‫And even if we restart the quiz 177 00:10:29,760 --> 00:10:33,720 ‫then it starts again at the value that we had before. 178 00:10:33,720 --> 00:10:37,710 ‫So that is because here when we restart 179 00:10:37,710 --> 00:10:41,910 ‫we just took the entire initial state here again. 180 00:10:41,910 --> 00:10:45,750 ‫Remember that, but maybe you notice something here 181 00:10:45,750 --> 00:10:47,820 ‫when we restart the quiz. 182 00:10:47,820 --> 00:10:52,560 ‫So let's try that again and see how fast this goes now. 183 00:10:52,560 --> 00:10:55,083 ‫And if we do, again, it will be even faster. 184 00:10:58,320 --> 00:11:01,380 ‫Actually, we don't even have to start a quiz 185 00:11:01,380 --> 00:11:03,930 ‫that this moves now to the finish screen. 186 00:11:03,930 --> 00:11:06,753 ‫So clearly something is going wrong, 187 00:11:07,620 --> 00:11:10,080 ‫so notice how fast this goes. 188 00:11:10,080 --> 00:11:11,580 ‫And the reason for that 189 00:11:11,580 --> 00:11:16,530 ‫is that our timer actually does never stop right now. 190 00:11:16,530 --> 00:11:18,990 ‫So we have no cleanup function. 191 00:11:18,990 --> 00:11:21,300 ‫And so therefore our timer here 192 00:11:21,300 --> 00:11:25,473 ‫will keep running even after this component has unmounted. 193 00:11:26,370 --> 00:11:28,563 ‫So that of course, we need to fix. 194 00:11:29,652 --> 00:11:33,213 ‫And so this is an amazing use case for the cleanup function. 195 00:11:34,230 --> 00:11:39,230 ‫So what we need to do is to store the idea of the timer 196 00:11:39,900 --> 00:11:42,273 ‫that gets returned from this method. 197 00:11:44,310 --> 00:11:48,540 ‫And so we can then use it in the cleanup function 198 00:11:48,540 --> 00:11:49,923 ‫that we return from here. 199 00:11:51,210 --> 00:11:54,930 ‫So to clear an interval, 200 00:11:54,930 --> 00:11:57,510 ‫we basically just have to pass in the ID 201 00:11:57,510 --> 00:12:01,290 ‫of the timer that we started with set interval. 202 00:12:01,290 --> 00:12:04,980 ‫So every single set interval timer will return a unique ID. 203 00:12:04,980 --> 00:12:08,714 ‫And so we can then again use that to clear, 204 00:12:08,714 --> 00:12:11,790 ‫so to cancel that timer. 205 00:12:11,790 --> 00:12:14,790 ‫And so now this will run between renders 206 00:12:14,790 --> 00:12:16,710 ‫and even more importantly 207 00:12:16,710 --> 00:12:19,440 ‫after this component is unmounted 208 00:12:19,440 --> 00:12:23,850 ‫and so then the timer will really actually stop. 209 00:12:23,850 --> 00:12:25,080 ‫So what we had before 210 00:12:25,080 --> 00:12:27,930 ‫was that each time we restarted our quiz, 211 00:12:27,930 --> 00:12:30,090 ‫a new timer got added. 212 00:12:30,090 --> 00:12:33,780 ‫And so then we had many timers running at the same time 213 00:12:33,780 --> 00:12:36,810 ‫which were all dispatching this action. 214 00:12:36,810 --> 00:12:39,030 ‫And so then our time was going down 215 00:12:39,030 --> 00:12:41,523 ‫really really fast because of that, 216 00:12:43,110 --> 00:12:44,790 ‫but this should fix it. 217 00:12:44,790 --> 00:12:46,083 ‫So let's try that. 218 00:12:48,960 --> 00:12:52,290 ‫And actually now we are only going down 219 00:12:52,290 --> 00:12:53,553 ‫one second at a time. 220 00:12:55,920 --> 00:12:58,140 ‫And there we go. 221 00:12:58,140 --> 00:13:01,530 ‫So that was expected, but now let's see again 222 00:13:01,530 --> 00:13:04,590 ‫if the timer has the same speed as before, 223 00:13:04,590 --> 00:13:05,970 ‫and yeah, it does. 224 00:13:05,970 --> 00:13:10,020 ‫And so it means that this cleanup function here 225 00:13:10,020 --> 00:13:11,403 ‫is indeed working. 226 00:13:12,360 --> 00:13:16,410 ‫Now notice how here we are getting all of these renders 227 00:13:16,410 --> 00:13:19,140 ‫or actually all of these console logs 228 00:13:19,140 --> 00:13:23,250 ‫and that's because of course now the entire application 229 00:13:23,250 --> 00:13:27,543 ‫so all the components will re-render every single second. 230 00:13:28,735 --> 00:13:32,700 ‫So let's just quickly review what we learned before 231 00:13:32,700 --> 00:13:36,990 ‫and that is that as one component re-renders 232 00:13:36,990 --> 00:13:41,280 ‫all its child components will re-render as well. 233 00:13:41,280 --> 00:13:45,960 ‫So our state lives here in this global app component 234 00:13:45,960 --> 00:13:49,140 ‫and so therefore as our state re-renders 235 00:13:49,140 --> 00:13:52,950 ‫so will re-render all of these child components. 236 00:13:52,950 --> 00:13:55,530 ‫And so that is of course also true 237 00:13:55,530 --> 00:13:59,980 ‫here for the question component that does this render here 238 00:14:01,020 --> 00:14:05,580 ‫which will then create this lock here every single second. 239 00:14:05,580 --> 00:14:10,580 ‫So let's just quickly clean that up right here. 240 00:14:13,500 --> 00:14:16,680 ‫And so this could become a performance issue 241 00:14:16,680 --> 00:14:19,260 ‫in a really large application 242 00:14:19,260 --> 00:14:22,170 ‫with like a thousand components. 243 00:14:22,170 --> 00:14:24,930 ‫So in that case, you probably shouldn't have 244 00:14:24,930 --> 00:14:29,760 ‫your most parent component re-rendering every single second. 245 00:14:29,760 --> 00:14:32,313 ‫But in this case, this is really not a problem. 246 00:14:33,150 --> 00:14:36,630 ‫Now, of course, our 10 seconds that we have here 247 00:14:36,630 --> 00:14:39,630 ‫are not nearly enough, right? 248 00:14:39,630 --> 00:14:41,200 ‫And so what we want to do now 249 00:14:42,258 --> 00:14:44,040 ‫is to calculate the amount of seconds 250 00:14:44,040 --> 00:14:47,013 ‫from the number of questions that we have. 251 00:14:48,630 --> 00:14:50,343 ‫So let's do that. 252 00:14:52,260 --> 00:14:56,670 ‫So our seconds remaining start at 10, 253 00:14:56,670 --> 00:14:58,110 ‫but again we want to know, 254 00:14:58,110 --> 00:15:01,110 ‫calculate it from the number of questions. 255 00:15:01,110 --> 00:15:03,930 ‫However, we don't know that number 256 00:15:03,930 --> 00:15:06,390 ‫at the very beginning, right? 257 00:15:06,390 --> 00:15:08,580 ‫And so let's just set this to null 258 00:15:08,580 --> 00:15:13,293 ‫and instead calculate this number here as we start the game. 259 00:15:14,340 --> 00:15:17,910 ‫So at this point when this action is dispatched 260 00:15:17,910 --> 00:15:20,550 ‫we will already have the questions array. 261 00:15:20,550 --> 00:15:25,443 ‫And so then here we can calculate those seconds remaining. 262 00:15:26,880 --> 00:15:31,310 ‫So let's say state dot questions dot length, 263 00:15:33,090 --> 00:15:34,830 ‫so the amount of questions 264 00:15:34,830 --> 00:15:38,523 ‫and then maybe 30 seconds per question. 265 00:15:39,630 --> 00:15:42,240 ‫Now, we shouldn't actually place 266 00:15:42,240 --> 00:15:44,970 ‫like a magic number like this here. 267 00:15:44,970 --> 00:15:48,840 ‫So instead we should always create a constant out there 268 00:15:48,840 --> 00:15:50,940 ‫for a value like this. 269 00:15:50,940 --> 00:15:53,220 ‫Otherwise it will be really weird 270 00:15:53,220 --> 00:15:57,720 ‫and unclear to suddenly see a 30 in here. 271 00:15:57,720 --> 00:15:59,670 ‫So let's create a constant 272 00:15:59,670 --> 00:16:04,590 ‫that will be called seconds per question, 273 00:16:04,590 --> 00:16:08,313 ‫and it's kind of a convention to have these upper case. 274 00:16:11,010 --> 00:16:15,513 ‫So secs per question equals 30. 275 00:16:16,906 --> 00:16:21,630 ‫Okay? ‫So that should work now. 276 00:16:21,630 --> 00:16:25,050 ‫And yeah, now we have plenty of time I think 277 00:16:25,050 --> 00:16:29,580 ‫to complete the quiz, which again, I hope you will do 278 00:16:29,580 --> 00:16:31,380 ‫or maybe you already have done 279 00:16:31,380 --> 00:16:34,083 ‫here outside of one of these videos. 280 00:16:35,190 --> 00:16:38,880 ‫But now to finish, let's then also form at this 281 00:16:38,880 --> 00:16:40,590 ‫a little bit nicer. 282 00:16:40,590 --> 00:16:45,590 ‫So for example, separating the minutes from the seconds. 283 00:16:45,630 --> 00:16:48,843 ‫So let's create a minutes variable here. 284 00:16:50,160 --> 00:16:53,493 ‫So let's do math dot floor. 285 00:16:55,051 --> 00:16:58,703 ‫And so then we just divide the seconds by 60. 286 00:17:00,330 --> 00:17:04,680 ‫And so this here will give us the amount of minutes 287 00:17:04,680 --> 00:17:08,820 ‫and then we round that down with math dot floor 288 00:17:08,820 --> 00:17:12,240 ‫so that we can then, besides the minutes, 289 00:17:12,240 --> 00:17:14,283 ‫also display the seconds. 290 00:17:15,660 --> 00:17:18,540 ‫And so this will be seconds remaining, 291 00:17:18,540 --> 00:17:22,923 ‫and then the reminder of dividing that by 60. 292 00:17:24,120 --> 00:17:27,690 ‫So that's again, just pretty standard stuff. 293 00:17:27,690 --> 00:17:30,123 ‫And then here, let's display that. 294 00:17:30,990 --> 00:17:35,613 ‫So minutes and seconds, 295 00:17:37,620 --> 00:17:39,150 ‫give it a save. 296 00:17:39,150 --> 00:17:42,150 ‫And now this doesn't look really nice 297 00:17:42,150 --> 00:17:46,650 ‫because ideally we also want like trailing zero there 298 00:17:46,650 --> 00:17:48,450 ‫in some situations. 299 00:17:48,450 --> 00:17:51,513 ‫So not now, but if it is less than 10, 300 00:17:52,680 --> 00:17:55,110 ‫but that's pretty easy as well. 301 00:17:55,110 --> 00:17:59,790 ‫So minutes less than 10, 302 00:17:59,790 --> 00:18:03,753 ‫and if so then just place a zero there. 303 00:18:05,100 --> 00:18:06,183 ‫And so there it is. 304 00:18:07,440 --> 00:18:11,433 ‫And well then the same thing for the seconds. 305 00:18:14,760 --> 00:18:16,443 ‫So seconds. 306 00:18:17,400 --> 00:18:19,320 ‫And right now that's not the case, 307 00:18:19,320 --> 00:18:22,380 ‫but we will maybe see it in a second 308 00:18:22,380 --> 00:18:25,293 ‫or in a in 20 seconds, actually. 309 00:18:27,000 --> 00:18:30,840 ‫But yeah, we probably don't have to wait for that 310 00:18:30,840 --> 00:18:35,840 ‫because actually with this we finished our application 311 00:18:36,060 --> 00:18:38,362 ‫so it's feature complete. 312 00:18:38,362 --> 00:18:43,050 ‫Now the only thing that we might do is to fix our title. 313 00:18:43,050 --> 00:18:46,413 ‫So let's come here and call this, 314 00:18:49,327 --> 00:18:53,910 ‫"The React Quiz." 315 00:18:53,910 --> 00:18:56,280 ‫And there it is. ‫Beautiful. 316 00:18:56,280 --> 00:19:01,280 ‫And now we really are finished with this application. 317 00:19:01,350 --> 00:19:03,780 ‫So congratulations, you just added 318 00:19:03,780 --> 00:19:08,610 ‫one more really nice React application to your portfolio. 319 00:19:08,610 --> 00:19:10,920 ‫So I hope this was a fun one. 320 00:19:10,920 --> 00:19:14,730 ‫I sure really liked to develop this one with you. 321 00:19:14,730 --> 00:19:19,320 ‫So we learned a lot about reducers and to useReducer Hook, 322 00:19:19,320 --> 00:19:22,410 ‫but also, again we learned some more 323 00:19:22,410 --> 00:19:25,290 ‫about React development in general. 324 00:19:25,290 --> 00:19:29,310 ‫And you could take this project even further if you wanted. 325 00:19:29,310 --> 00:19:31,740 ‫So I have at least three ideas 326 00:19:31,740 --> 00:19:34,920 ‫for features that could be implemented. 327 00:19:34,920 --> 00:19:38,430 ‫So first of all, in the start screen right here 328 00:19:38,430 --> 00:19:40,770 ‫we could do different kinds of stuff. 329 00:19:40,770 --> 00:19:42,720 ‫For example allowing the user 330 00:19:42,720 --> 00:19:45,930 ‫to only select a certain number of questions, 331 00:19:45,930 --> 00:19:49,050 ‫or also to allow the user to filter 332 00:19:49,050 --> 00:19:52,170 ‫for the difficulty of questions. 333 00:19:52,170 --> 00:19:54,390 ‫Now, another thing that we could do 334 00:19:54,390 --> 00:19:57,450 ‫is to upload the high score of the quiz 335 00:19:57,450 --> 00:19:59,640 ‫to our fake API as well. 336 00:19:59,640 --> 00:20:02,520 ‫And then as we reload the application later 337 00:20:02,520 --> 00:20:04,750 ‫that could then re fetch the high score 338 00:20:05,729 --> 00:20:07,140 ‫and place it back in our state 339 00:20:07,140 --> 00:20:09,900 ‫so that we don't lose that value. 340 00:20:09,900 --> 00:20:12,600 ‫And finally, another idea that I had 341 00:20:12,600 --> 00:20:15,450 ‫is that we could store all the answers 342 00:20:15,450 --> 00:20:19,290 ‫here in some array instead of just the current answer 343 00:20:19,290 --> 00:20:20,760 ‫like we do right now. 344 00:20:20,760 --> 00:20:21,810 ‫And so by doing that, 345 00:20:21,810 --> 00:20:24,690 ‫the user could then go back and forth in time 346 00:20:24,690 --> 00:20:27,480 ‫and review their answers like that. 347 00:20:27,480 --> 00:20:31,260 ‫So if you want you can have some more fun with this project, 348 00:20:31,260 --> 00:20:35,250 ‫and if you do please make sure to share some GitHub link 349 00:20:35,250 --> 00:20:39,600 ‫or something like that, or maybe just the final application 350 00:20:39,600 --> 00:20:42,540 ‫in the Q and A of this lecture. 351 00:20:42,540 --> 00:20:45,270 ‫And so now to finish this section 352 00:20:45,270 --> 00:20:47,700 ‫we will quickly review what we learned 353 00:20:47,700 --> 00:20:51,660 ‫about useReducer and compare it with the useState Hook. 354 00:20:51,660 --> 00:20:53,313 ‫So see you there soon.