‫Welcome to the next coding challenge,
‫which as you can imagine, is all about state.
‫So what I want you to build in this challenge
‫is this very simple date counter.
‫So here we have the current date,
‫but then when we click here on the plus icon,
‫you see that the count increases to one
‫and then it says one day from now,
‫it is Tuesday, June 22, while before it was 21.
‫So then when we keep going up,
‫it basically keeps adding this number of days
‫to the current date.
‫We can also go back in time,
‫so like six days ago, it was this date.
‫So that's the most basic thing,
‫but then here we can also adjust the step.
‫So for example, if the step is five,
‫and each time we click on the plus button,
‫it increases by five.
‫So no longer by one.
‫So 10, 15, 20, and so on and so forth.
‫And the calculation then here, of course, is still the same.
‫So that's what we're going to build.
‫So open up a new code send box with react dot new,
‫or of course, as always,
‫you can also build this challenge on your local computer.
‫So for that, you can just create a new React app,
‫just like we have been doing before.
‫Now here, just to make sure you can see,
‫I will make this a bit bigger, maybe not that big,
‫and then I will actually just start writing
‫a little bit of code here.
‫So just to show you what I actually want,
‫so I want you to create this counter function,
‫which for now will just return test,
‫and then all we want to do
‫is to include that counter right here.
‫And that's it.
‫So you can leave everything else the same,
‫even the styles, let's just leave them here
‫and just focus on this counter functionality.
‫Now this part here with the dates
‫can be a little bit tricky.
‫So what I want you to focus on the most
‫is actually the counter functionality here.
‫So if the dates are a bit too tricky,
‫then just leave that until the end
‫and you can just print the current count value down here.
‫Or you can also just Google, for example,
‫Java script at days to date.
‫Okay, so I will leave this up here
‫so you can see what you are supposed to build
‫and then I'll meet you back here in a minute
‫with my solution.
‫All right, so welcome back.
‫Hopefully you had some success with this.
‫So there is actually a lot of moving parts here
‫with handling the events and all the state.
‫So hopefully the lectures that we had previously
‫were enough for you to understand how this works,
‫but if not, there is really no problem with that at all.
‫So, hopefully you just did anything,
‫even if just the very simple counter.
‫That's also fine.
‫But anyway, we know that we want this count value here
‫to update in the UI.
‫So the view of this component should update
‫whenever we click on one of these buttons.
‫So that's a good sign that we need some state, right?
‫So let's start by creating the count state.
‫So const count and set count is use state.
‫And now for some reason,
‫the use state didn't automatically get import,
‫so we need to do that by hand.
‫From react.
‫Nice.
‫And now, well we need to show this count on the screen
‫and then we need to update it.
‫So as always, the same three steps.
‫So first declaring the state variable,
‫then use it in the JSX, and then update it.
‫So here we are missing the default of zero,
‫and then let's just create one div with these two buttons,
‫and also with the value of the counter itself.
‫So starting with that value, actually,
‫let's just count and then the count value.
‫Oh what's that?
‫So count is zero, that's correct,
‫and now we need some buttons.
‫So button,
‫and on click,
‫and here I will actually not create
‫the event handler function separately,
‫but instead I will just define them in line here.
‫But if you did it separately,
‫that's of course no problem at all.
‫So what do we want to do here?
‫So this one here is decreasing the value.
‫So set count and we want the new count
‫to be the current count minus one.
‫So what that means is that we want to update the count state
‫based on the current state, and therefore,
‫here we now should pass in a callback function.
‫Remember that?
‫So I'm going to write C for count.
‫So this stands for count, and remember,
‫it is the current value of the count state.
‫And so then we want to return that count minus one.
‫And that should already be it.
‫Let's just use this here for the minus sign.
‫All right, then let's copy paste.
‫Oh let's actually just close down this side bar.
‫So copy and paste, and here, just plus one.
‫So give it a save, and,
‫oh let's just adjust here the output a bit,
‫and beautiful, that's working already.
‫So the component view is being updated
‫as we update this date.
‫Great,
‫and so now let's just also display the date down there.
‫So for that, let's create a paragraph
‫or first, let's actually calculate that date.
‫So maybe you Googled how to do this, as I advised you to.
‫So let's just define a variable called date
‫and then new date,
‫and of course you could just leave it like this
‫or you can just pass in a string,
‫for example, to define any other date that you want,
‫for example, June 21st, 2027.
‫So just for fun.
‫So that's not the date today, as you can imagine,
‫but anyway, now here we can, on the date object,
‫call the set date method.
‫And so then here, we can do date plus get the current date.
‫Whoa, what's that?
‫Yeah, date dot, so getting the current date
‫and then adding a value.
‫So that value can be the count.
‫All right, so we're using now our count
‫to add that count to the current date, basically.
‫And so then that's what we can output down here.
‫But again, this part was kind of optional here, really
‫this is not what I was concerned about.
‫What matters is that you got this date part right.
‫So, but anyway, here let's now log the date
‫and then convert it to a nice readable string.
‫So to date string.
‫Now all right, now here we got some problems
‫and that's because, yeah right now,
‫or JSX has two route elements.
‫That's because I, by mistake, placed this outside the div,
‫but there we go.
‫So you see that's already working.
‫Nice.
‫Now we are missing that part here
‫that says the 30 days from now, for example,
‫or today, or 10 days ago.
‫So let's do that.
‫And so to do this, let's add maybe another span.
‫Let's wrap this one into a span element
‫and let's create a span.
‫So just for some inline text,
‫and now here then let's create that part of the string.
‫So if the count is zero, then it is today.
‫So then here we can output the string, today is.
‫And if not, for now let's return nothing,
‫but here we have a problem,
‫that's because here we need a colon.
‫All right, so count is not zero right now, but now it is.
‫So today is this date.
‫So that's correct, but now as an alternative here,
‫we need to also account for the past and for the future.
‫So we actually need two more different values here
‫and so here we need another ternary operator.
‫Now using nest ternaries is quite ugly
‫and can be quite unreadable,
‫so usually I advise against using that,
‫but well, here let's just break that rule.
‫So basically here, we have the else branch,
‫and so in here we can ask if the count is greater than zero,
‫then the string should be, let's use the template literal,
‫then the count days from today is
‫and else,
‫count days ago was.
‫Not like this, all right.
‫So prettier took care of formatting it for us,
‫so it's at least a little bit more readable.
‫So that works, five is, here we're missing the space,
‫and now for the past.
‫So minus four days ago was,
‫so let's quickly do a math dot absolute here.
‫And yeah, that fixes it.
‫So we have now this main counter working,
‫so basically this part here is working
‫and now let's worry about the step.
‫And the step is going to be quite similar.
‫So const, step, and set.
‫Step and here I need to learn how to write step apparently,
‫but then use state again,
‫and here the step by default is one.
‫So because by default, when we click here,
‫we just want the counter to go up by one.
‫All right, and now we can just like copy paste this
‫because it's going to look very similar,
‫but here then we have the step, and here also the step,
‫and here, also said step in both these places.
‫So let's see, and yes, that's working.
‫However, of course, if we now click here,
‫then that step is not being applied here.
‫So we are still simply adding one or subtracting one.
‫So how do we now put these two together,
‫well, as I was just saying, by default,
‫we had just subtracting or adding one,
‫but that's no longer what we want.
‫Instead, we want to add or subtract the step.
‫So just replace the one here.
‫Step, and
‫yes, that's working.
‫Nice.
‫And we can even go negative here, I think.
‫Maybe we should change that,
‫but nevermind, it's too much work.
‫So now, if we add three,
‫we are actually going into the past.
‫But yeah, that's no problem.
‫Great, so that wraps up this challenge.
‫It works exactly as what we had set out to build.
‫So hopefully you had some fun with this,
‫hopefully you also did have some success
‫and so yeah, let's keep going in this section
‫and actually we will just, in the next lecture,
‫create a brand new, very, very, nice project.
‫So I hope to see you there as soon as possible.