1 00:00:00,562 --> 00:00:03,600 ‫Welcome to the next coding challenge, 2 00:00:03,600 --> 00:00:06,873 ‫which as you can imagine, is all about state. 3 00:00:08,190 --> 00:00:10,620 ‫So what I want you to build in this challenge 4 00:00:10,620 --> 00:00:13,530 ‫is this very simple date counter. 5 00:00:13,530 --> 00:00:15,300 ‫So here we have the current date, 6 00:00:15,300 --> 00:00:18,000 ‫but then when we click here on the plus icon, 7 00:00:18,000 --> 00:00:20,460 ‫you see that the count increases to one 8 00:00:20,460 --> 00:00:22,890 ‫and then it says one day from now, 9 00:00:22,890 --> 00:00:27,890 ‫it is Tuesday, June 22, while before it was 21. 10 00:00:27,990 --> 00:00:29,700 ‫So then when we keep going up, 11 00:00:29,700 --> 00:00:32,970 ‫it basically keeps adding this number of days 12 00:00:32,970 --> 00:00:34,233 ‫to the current date. 13 00:00:35,160 --> 00:00:37,500 ‫We can also go back in time, 14 00:00:37,500 --> 00:00:40,923 ‫so like six days ago, it was this date. 15 00:00:42,030 --> 00:00:43,830 ‫So that's the most basic thing, 16 00:00:43,830 --> 00:00:46,800 ‫but then here we can also adjust the step. 17 00:00:46,800 --> 00:00:49,860 ‫So for example, if the step is five, 18 00:00:49,860 --> 00:00:52,110 ‫and each time we click on the plus button, 19 00:00:52,110 --> 00:00:54,000 ‫it increases by five. 20 00:00:54,000 --> 00:00:55,620 ‫So no longer by one. 21 00:00:55,620 --> 00:00:58,740 ‫So 10, 15, 20, and so on and so forth. 22 00:00:58,740 --> 00:01:01,740 ‫And the calculation then here, of course, is still the same. 23 00:01:02,820 --> 00:01:05,340 ‫So that's what we're going to build. 24 00:01:05,340 --> 00:01:09,570 ‫So open up a new code send box with react dot new, 25 00:01:09,570 --> 00:01:11,280 ‫or of course, as always, 26 00:01:11,280 --> 00:01:14,940 ‫you can also build this challenge on your local computer. 27 00:01:14,940 --> 00:01:18,000 ‫So for that, you can just create a new React app, 28 00:01:18,000 --> 00:01:19,800 ‫just like we have been doing before. 29 00:01:21,090 --> 00:01:23,430 ‫Now here, just to make sure you can see, 30 00:01:23,430 --> 00:01:27,003 ‫I will make this a bit bigger, maybe not that big, 31 00:01:28,080 --> 00:01:31,200 ‫and then I will actually just start writing 32 00:01:31,200 --> 00:01:32,763 ‫a little bit of code here. 33 00:01:33,870 --> 00:01:36,060 ‫So just to show you what I actually want, 34 00:01:36,060 --> 00:01:40,233 ‫so I want you to create this counter function, 35 00:01:42,750 --> 00:01:47,343 ‫which for now will just return test, 36 00:01:49,868 --> 00:01:51,450 ‫and then all we want to do 37 00:01:51,450 --> 00:01:53,823 ‫is to include that counter right here. 38 00:01:58,170 --> 00:01:59,790 ‫And that's it. 39 00:01:59,790 --> 00:02:01,650 ‫So you can leave everything else the same, 40 00:02:01,650 --> 00:02:04,530 ‫even the styles, let's just leave them here 41 00:02:04,530 --> 00:02:07,980 ‫and just focus on this counter functionality. 42 00:02:07,980 --> 00:02:10,260 ‫Now this part here with the dates 43 00:02:10,260 --> 00:02:11,970 ‫can be a little bit tricky. 44 00:02:11,970 --> 00:02:14,370 ‫So what I want you to focus on the most 45 00:02:14,370 --> 00:02:17,400 ‫is actually the counter functionality here. 46 00:02:17,400 --> 00:02:19,440 ‫So if the dates are a bit too tricky, 47 00:02:19,440 --> 00:02:21,420 ‫then just leave that until the end 48 00:02:21,420 --> 00:02:25,260 ‫and you can just print the current count value down here. 49 00:02:25,260 --> 00:02:27,540 ‫Or you can also just Google, for example, 50 00:02:27,540 --> 00:02:30,720 ‫Java script at days to date. 51 00:02:30,720 --> 00:02:32,610 ‫Okay, so I will leave this up here 52 00:02:32,610 --> 00:02:36,060 ‫so you can see what you are supposed to build 53 00:02:36,060 --> 00:02:37,920 ‫and then I'll meet you back here in a minute 54 00:02:37,920 --> 00:02:39,543 ‫with my solution. 55 00:02:41,520 --> 00:02:43,440 ‫All right, so welcome back. 56 00:02:43,440 --> 00:02:46,740 ‫Hopefully you had some success with this. 57 00:02:46,740 --> 00:02:49,380 ‫So there is actually a lot of moving parts here 58 00:02:49,380 --> 00:02:52,950 ‫with handling the events and all the state. 59 00:02:52,950 --> 00:02:56,220 ‫So hopefully the lectures that we had previously 60 00:02:56,220 --> 00:02:59,430 ‫were enough for you to understand how this works, 61 00:02:59,430 --> 00:03:03,420 ‫but if not, there is really no problem with that at all. 62 00:03:03,420 --> 00:03:05,730 ‫So, hopefully you just did anything, 63 00:03:05,730 --> 00:03:07,860 ‫even if just the very simple counter. 64 00:03:07,860 --> 00:03:09,660 ‫That's also fine. 65 00:03:09,660 --> 00:03:13,170 ‫But anyway, we know that we want this count value here 66 00:03:13,170 --> 00:03:14,583 ‫to update in the UI. 67 00:03:15,450 --> 00:03:19,230 ‫So the view of this component should update 68 00:03:19,230 --> 00:03:21,960 ‫whenever we click on one of these buttons. 69 00:03:21,960 --> 00:03:25,833 ‫So that's a good sign that we need some state, right? 70 00:03:26,940 --> 00:03:29,763 ‫So let's start by creating the count state. 71 00:03:30,930 --> 00:03:35,930 ‫So const count and set count is use state. 72 00:03:40,680 --> 00:03:41,580 ‫And now for some reason, 73 00:03:41,580 --> 00:03:44,580 ‫the use state didn't automatically get import, 74 00:03:44,580 --> 00:03:46,113 ‫so we need to do that by hand. 75 00:03:48,150 --> 00:03:50,793 ‫From react. 76 00:03:51,900 --> 00:03:53,460 ‫Nice. 77 00:03:53,460 --> 00:03:56,970 ‫And now, well we need to show this count on the screen 78 00:03:56,970 --> 00:03:58,530 ‫and then we need to update it. 79 00:03:58,530 --> 00:04:00,960 ‫So as always, the same three steps. 80 00:04:00,960 --> 00:04:03,630 ‫So first declaring the state variable, 81 00:04:03,630 --> 00:04:06,930 ‫then use it in the JSX, and then update it. 82 00:04:06,930 --> 00:04:09,663 ‫So here we are missing the default of zero, 83 00:04:10,950 --> 00:04:15,950 ‫and then let's just create one div with these two buttons, 84 00:04:16,290 --> 00:04:18,723 ‫and also with the value of the counter itself. 85 00:04:20,010 --> 00:04:21,933 ‫So starting with that value, actually, 86 00:04:23,220 --> 00:04:28,183 ‫let's just count and then the count value. 87 00:04:29,370 --> 00:04:30,633 ‫Oh what's that? 88 00:04:34,650 --> 00:04:37,470 ‫So count is zero, that's correct, 89 00:04:37,470 --> 00:04:39,690 ‫and now we need some buttons. 90 00:04:39,690 --> 00:04:40,833 ‫So button, 91 00:04:44,190 --> 00:04:46,530 ‫and on click, 92 00:04:46,530 --> 00:04:49,050 ‫and here I will actually not create 93 00:04:49,050 --> 00:04:51,120 ‫the event handler function separately, 94 00:04:51,120 --> 00:04:53,970 ‫but instead I will just define them in line here. 95 00:04:53,970 --> 00:04:55,410 ‫But if you did it separately, 96 00:04:55,410 --> 00:04:57,573 ‫that's of course no problem at all. 97 00:04:58,890 --> 00:05:00,900 ‫So what do we want to do here? 98 00:05:00,900 --> 00:05:03,213 ‫So this one here is decreasing the value. 99 00:05:04,050 --> 00:05:08,070 ‫So set count and we want the new count 100 00:05:08,070 --> 00:05:10,950 ‫to be the current count minus one. 101 00:05:10,950 --> 00:05:14,700 ‫So what that means is that we want to update the count state 102 00:05:14,700 --> 00:05:17,250 ‫based on the current state, and therefore, 103 00:05:17,250 --> 00:05:20,550 ‫here we now should pass in a callback function. 104 00:05:20,550 --> 00:05:21,960 ‫Remember that? 105 00:05:21,960 --> 00:05:25,080 ‫So I'm going to write C for count. 106 00:05:25,080 --> 00:05:27,210 ‫So this stands for count, and remember, 107 00:05:27,210 --> 00:05:30,807 ‫it is the current value of the count state. 108 00:05:30,807 --> 00:05:34,623 ‫And so then we want to return that count minus one. 109 00:05:35,970 --> 00:05:37,803 ‫And that should already be it. 110 00:05:39,060 --> 00:05:41,260 ‫Let's just use this here for the minus sign. 111 00:05:42,360 --> 00:05:44,973 ‫All right, then let's copy paste. 112 00:05:47,880 --> 00:05:51,633 ‫Oh let's actually just close down this side bar. 113 00:05:53,190 --> 00:05:56,403 ‫So copy and paste, and here, just plus one. 114 00:05:57,420 --> 00:06:00,000 ‫So give it a save, and, 115 00:06:00,000 --> 00:06:03,780 ‫oh let's just adjust here the output a bit, 116 00:06:03,780 --> 00:06:07,680 ‫and beautiful, that's working already. 117 00:06:07,680 --> 00:06:10,170 ‫So the component view is being updated 118 00:06:10,170 --> 00:06:12,660 ‫as we update this date. 119 00:06:12,660 --> 00:06:13,493 ‫Great, 120 00:06:13,493 --> 00:06:17,433 ‫and so now let's just also display the date down there. 121 00:06:18,630 --> 00:06:21,360 ‫So for that, let's create a paragraph 122 00:06:21,360 --> 00:06:24,333 ‫or first, let's actually calculate that date. 123 00:06:25,620 --> 00:06:28,803 ‫So maybe you Googled how to do this, as I advised you to. 124 00:06:30,810 --> 00:06:33,480 ‫So let's just define a variable called date 125 00:06:33,480 --> 00:06:35,640 ‫and then new date, 126 00:06:35,640 --> 00:06:38,280 ‫and of course you could just leave it like this 127 00:06:38,280 --> 00:06:40,740 ‫or you can just pass in a string, 128 00:06:40,740 --> 00:06:44,460 ‫for example, to define any other date that you want, 129 00:06:44,460 --> 00:06:47,703 ‫for example, June 21st, 2027. 130 00:06:48,943 --> 00:06:50,550 ‫So just for fun. 131 00:06:50,550 --> 00:06:53,283 ‫So that's not the date today, as you can imagine, 132 00:06:54,720 --> 00:06:58,770 ‫but anyway, now here we can, on the date object, 133 00:06:58,770 --> 00:07:00,930 ‫call the set date method. 134 00:07:00,930 --> 00:07:05,930 ‫And so then here, we can do date plus get the current date. 135 00:07:08,190 --> 00:07:09,393 ‫Whoa, what's that? 136 00:07:10,860 --> 00:07:14,670 ‫Yeah, date dot, so getting the current date 137 00:07:14,670 --> 00:07:16,680 ‫and then adding a value. 138 00:07:16,680 --> 00:07:20,463 ‫So that value can be the count. 139 00:07:21,870 --> 00:07:24,720 ‫All right, so we're using now our count 140 00:07:24,720 --> 00:07:28,470 ‫to add that count to the current date, basically. 141 00:07:28,470 --> 00:07:31,323 ‫And so then that's what we can output down here. 142 00:07:33,480 --> 00:07:36,960 ‫But again, this part was kind of optional here, really 143 00:07:36,960 --> 00:07:39,300 ‫this is not what I was concerned about. 144 00:07:39,300 --> 00:07:41,973 ‫What matters is that you got this date part right. 145 00:07:42,990 --> 00:07:47,520 ‫So, but anyway, here let's now log the date 146 00:07:47,520 --> 00:07:50,160 ‫and then convert it to a nice readable string. 147 00:07:50,160 --> 00:07:51,813 ‫So to date string. 148 00:07:53,460 --> 00:07:56,460 ‫Now all right, now here we got some problems 149 00:07:56,460 --> 00:07:58,920 ‫and that's because, yeah right now, 150 00:07:58,920 --> 00:08:02,250 ‫or JSX has two route elements. 151 00:08:02,250 --> 00:08:07,250 ‫That's because I, by mistake, placed this outside the div, 152 00:08:07,650 --> 00:08:08,703 ‫but there we go. 153 00:08:10,080 --> 00:08:12,870 ‫So you see that's already working. 154 00:08:12,870 --> 00:08:13,703 ‫Nice. 155 00:08:13,703 --> 00:08:15,570 ‫Now we are missing that part here 156 00:08:15,570 --> 00:08:19,830 ‫that says the 30 days from now, for example, 157 00:08:19,830 --> 00:08:22,980 ‫or today, or 10 days ago. 158 00:08:22,980 --> 00:08:24,633 ‫So let's do that. 159 00:08:26,760 --> 00:08:31,760 ‫And so to do this, let's add maybe another span. 160 00:08:32,160 --> 00:08:34,210 ‫Let's wrap this one into a span element 161 00:08:36,450 --> 00:08:38,790 ‫and let's create a span. 162 00:08:38,790 --> 00:08:41,193 ‫So just for some inline text, 163 00:08:42,060 --> 00:08:45,990 ‫and now here then let's create that part of the string. 164 00:08:45,990 --> 00:08:50,253 ‫So if the count is zero, then it is today. 165 00:08:51,780 --> 00:08:56,223 ‫So then here we can output the string, today is. 166 00:08:57,810 --> 00:09:01,650 ‫And if not, for now let's return nothing, 167 00:09:01,650 --> 00:09:03,210 ‫but here we have a problem, 168 00:09:03,210 --> 00:09:05,373 ‫that's because here we need a colon. 169 00:09:06,570 --> 00:09:11,570 ‫All right, so count is not zero right now, but now it is. 170 00:09:12,600 --> 00:09:15,390 ‫So today is this date. 171 00:09:15,390 --> 00:09:18,150 ‫So that's correct, but now as an alternative here, 172 00:09:18,150 --> 00:09:22,320 ‫we need to also account for the past and for the future. 173 00:09:22,320 --> 00:09:25,620 ‫So we actually need two more different values here 174 00:09:25,620 --> 00:09:28,410 ‫and so here we need another ternary operator. 175 00:09:28,410 --> 00:09:32,100 ‫Now using nest ternaries is quite ugly 176 00:09:32,100 --> 00:09:34,290 ‫and can be quite unreadable, 177 00:09:34,290 --> 00:09:37,260 ‫so usually I advise against using that, 178 00:09:37,260 --> 00:09:40,503 ‫but well, here let's just break that rule. 179 00:09:41,550 --> 00:09:44,760 ‫So basically here, we have the else branch, 180 00:09:44,760 --> 00:09:49,350 ‫and so in here we can ask if the count is greater than zero, 181 00:09:49,350 --> 00:09:53,403 ‫then the string should be, let's use the template literal, 182 00:09:54,990 --> 00:09:59,480 ‫then the count days from today is 183 00:10:01,140 --> 00:10:02,103 ‫and else, 184 00:10:08,370 --> 00:10:13,293 ‫count days ago was. 185 00:10:15,240 --> 00:10:17,730 ‫Not like this, all right. 186 00:10:17,730 --> 00:10:20,583 ‫So prettier took care of formatting it for us, 187 00:10:21,510 --> 00:10:23,973 ‫so it's at least a little bit more readable. 188 00:10:25,920 --> 00:10:30,743 ‫So that works, five is, here we're missing the space, 189 00:10:32,310 --> 00:10:33,543 ‫and now for the past. 190 00:10:34,680 --> 00:10:36,993 ‫So minus four days ago was, 191 00:10:38,130 --> 00:10:43,130 ‫so let's quickly do a math dot absolute here. 192 00:10:45,360 --> 00:10:47,430 ‫And yeah, that fixes it. 193 00:10:47,430 --> 00:10:50,580 ‫So we have now this main counter working, 194 00:10:50,580 --> 00:10:52,890 ‫so basically this part here is working 195 00:10:52,890 --> 00:10:54,640 ‫and now let's worry about the step. 196 00:10:55,650 --> 00:10:58,113 ‫And the step is going to be quite similar. 197 00:11:00,780 --> 00:11:04,143 ‫So const, step, and set. 198 00:11:04,980 --> 00:11:09,980 ‫Step and here I need to learn how to write step apparently, 199 00:11:10,200 --> 00:11:12,690 ‫but then use state again, 200 00:11:12,690 --> 00:11:15,150 ‫and here the step by default is one. 201 00:11:15,150 --> 00:11:17,460 ‫So because by default, when we click here, 202 00:11:17,460 --> 00:11:20,253 ‫we just want the counter to go up by one. 203 00:11:21,690 --> 00:11:25,740 ‫All right, and now we can just like copy paste this 204 00:11:25,740 --> 00:11:27,753 ‫because it's going to look very similar, 205 00:11:28,950 --> 00:11:33,950 ‫but here then we have the step, and here also the step, 206 00:11:35,280 --> 00:11:40,280 ‫and here, also said step in both these places. 207 00:11:42,690 --> 00:11:46,740 ‫So let's see, and yes, that's working. 208 00:11:46,740 --> 00:11:49,620 ‫However, of course, if we now click here, 209 00:11:49,620 --> 00:11:52,320 ‫then that step is not being applied here. 210 00:11:52,320 --> 00:11:56,463 ‫So we are still simply adding one or subtracting one. 211 00:11:57,300 --> 00:12:00,690 ‫So how do we now put these two together, 212 00:12:00,690 --> 00:12:03,630 ‫well, as I was just saying, by default, 213 00:12:03,630 --> 00:12:06,480 ‫we had just subtracting or adding one, 214 00:12:06,480 --> 00:12:08,130 ‫but that's no longer what we want. 215 00:12:08,130 --> 00:12:11,733 ‫Instead, we want to add or subtract the step. 216 00:12:12,570 --> 00:12:14,373 ‫So just replace the one here. 217 00:12:16,320 --> 00:12:19,360 ‫Step, and 218 00:12:20,580 --> 00:12:22,893 ‫yes, that's working. 219 00:12:25,470 --> 00:12:26,303 ‫Nice. 220 00:12:27,600 --> 00:12:30,810 ‫And we can even go negative here, I think. 221 00:12:30,810 --> 00:12:32,520 ‫Maybe we should change that, 222 00:12:32,520 --> 00:12:34,890 ‫but nevermind, it's too much work. 223 00:12:34,890 --> 00:12:36,510 ‫So now, if we add three, 224 00:12:36,510 --> 00:12:38,310 ‫we are actually going into the past. 225 00:12:39,180 --> 00:12:40,950 ‫But yeah, that's no problem. 226 00:12:40,950 --> 00:12:44,160 ‫Great, so that wraps up this challenge. 227 00:12:44,160 --> 00:12:48,780 ‫It works exactly as what we had set out to build. 228 00:12:48,780 --> 00:12:51,240 ‫So hopefully you had some fun with this, 229 00:12:51,240 --> 00:12:54,240 ‫hopefully you also did have some success 230 00:12:54,240 --> 00:12:57,000 ‫and so yeah, let's keep going in this section 231 00:12:57,000 --> 00:13:00,120 ‫and actually we will just, in the next lecture, 232 00:13:00,120 --> 00:13:03,870 ‫create a brand new, very, very, nice project. 233 00:13:03,870 --> 00:13:06,333 ‫So I hope to see you there as soon as possible.