Creating a Timer in React
All right great job in getting in all the styles for this application. That's really the bulk of this app, the functionality is really pretty limited so we're going to be done really soon.
Guide Tasks
  • Read Tutorial
  • Watch Guide Video
Video locked
This video is viewable to users with a Bottega Bootcamp license

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.

large

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.

large

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)