- Read Tutorial
- Watch Guide Video
So what we want to do in this video is basically make it so when we hit generate countdown it won't change anything in here. What we want to see is simply the countdown counting in our console here, which is really easy to do. All right, so let's go ahead and search on Google the javascript date object and then click right here on javascript date reference on the W3 schools and we're just going to use this, we're going to reference this later on.
So I'm just bringing in bringing it up now. Let's open a new tab and let's search javascript countdown timer date and click on the W3 schools link and it'll show us how to create a countdown which is really awesome.
So we're going to be referencing this first in this video so we can create our countdown. So let's go ahead and go into our application and basically start it when we click our button. So I'm going to close out all the files, and then I'm just going to close out the style folder because we're not going to using that, and I'm just going to leave component's open and we're going to be working in app.js.
Okay, so we have the callback on our generate countdown and we are setting the state active to true which is what we want but we want to add in more functionality. So instead of just having a function in here let's write a function up here called handleGenerate
and then let's say is equal to function and then let's say .bind this.
app.js
handleGenerate = function() { }.bind(this)
Now what we want to do is take this.setState active to true, cut that and put it in that function and then let's say this.handleGenerate. Okay sweet, we're also going to have to call it so put some parentheses right there.
app.js
handleGenerate = function() { this.setState({ active: true }) }.bind(this)
} else { return [ <Picker/> Button('Generate Countdown', () => this.handleGenerate()) ] }
Now reload the application, sorry this isn't Swift. I've been doing a lot of swift programming so I'm in that kind of flow, I actually just built a course on Udemy for that. Anyway back to this, I got distracted. So handle generate, what is happening in here is we're doing the same thing except we're putting in a function, so let's see if it works, and it still works so we're good.
Let's go ahead and look back here and everything is looking nice. Now let's just say, let's not console log we know it's working. What we want to do here is basically start console logging I guess, a timer, So let's go back to Google and look at this, as a try it yourself on the countdown.
And basically what I'd like to do is just let's see, I'd like to copy this entire code(listed out below) and let's just throw it into that function. Okay, now it's going to be a little confusing but just hold tight, we've got this. What we want to do is instead of saying document.getElementById let's just erase that, let's delete that, and let's say... okay what we'll do is we'll comment that out and then we'll comment this one out as well.
And then let's put the document.getElementById up here on line 39 so comment that out. Now, what I want to do is put this in our console, so let's just say console.log
and then let's copy this instead of setting it on html and demo and then I'm going to get rid of this equal all the way down to the document.getElementById and then we get rid of the semicolon and I'm just going to copy this.
Here's what we can do we can say constant time and we can say equal and then we can just console log time okay, and I'll put that semicolon back. Okay, save that and go to the application and this should run when we hit generate. All right now we want to hit command, let's see, let's go into Chrome and do it.
Now hit generate and you'll see it has this count down in here.
Now we don't want it to be a specific set date, we want it to be select a date by the user. So head back to the code and let's see, okay so we want to basically get the start date in here from the change date, so when the person changes the dates, or not changed date, that's different.
What I'm talking about is picker.js
we want to get the start date object which we're setting when we handle the change, and we want to put it into our app.js time right here. So let's commit our code and do that in the next video.
Terminal
git status git add . git commit -m "started timer" git push origin master
We'll see you in the next video, when people aren't making noise.
Resources
handleGenerate = function() { this.setState({ active: true }) // Set the date we're counting down to var countDownDate = this.state.startDate.toDate().getTime(); // Update the count down every 1 second var x = setInterval(function() { // Get todays date and time var now = new Date().getTime(); // Find the distance between now an the count down date var distance = countDownDate - now; // Time calculations for days, hours, minutes and seconds var days = Math.floor(distance / (1000 * 60 * 60 * 24)); var hours = Math.floor((distance % (1000 * 60 * 60 * 24)) / (1000 * 60 * 60)); var minutes = Math.floor((distance % (1000 * 60 * 60)) / (1000 * 60)); var seconds = Math.floor((distance % (1000 * 60)) / 1000); // Output the result in an element with id="demo" const time = days + "d " + hours + "h " + minutes + "m " + seconds + "s "; console.log(time) // If the count down is over, write some text if (distance < 0) { clearInterval(x); // document.getElementById("demo").innerHTML = "EXPIRED"; } }, 1000); }.bind(this)