Here's what I'm working on at the moment. I'm fleshing out the end-of-the-year sale page for Laracast, but one thing I'd like to add is a little countdown timer here, so that people understand you have this long to use the coupon before it expires. Now, I've no doubt there's plenty of packages or little jQuery plugins you can pull in, but this is actually a relatively simple thing. So if you'd like to come along, why don't we create together a countdown Vue component. So I will switch over to my editor, and here's the Blade file for that sale page. So it sounds like right here, that corresponds to this signup button, why don't we add our little countdown. So in this case, I do have, if we switch over, I have this countdown Vue component, but it's empty at the moment. Okay, so let's go ahead and use that. And now this is going to be a countdown until when? Let's just hardcode something,

I have this countdown Vue component, but it's empty at the moment. Okay, so let's go ahead and use that. And now this is going to be a countdown until when? Let's just hardcode something, like December 1st, 2017. Now, when you're doing this, where you haven't even written any of the Vue component yet, this is actually a really good place to figure out for yourself, how do I want to interact with this component? So in this case, I can see, all right, I need a countdown, and I need to let it know when we are counting down until, and we might even want to do something in response to that. So we could say, when the countdown is finished, then call some method on the parent component. So this gives us a point to flesh out our API, so to speak. Okay, let's get started. We'll switch over here, we'll have our template, and we're going to have our script here. Okay, so immediately we know that, so yeah, like I said, we're going to have a until prop, okay,

there is a duration method you can use. Otherwise, you can do a quick Google search and grab the calculations. It looks a little confusing, but it's really not too rough. You would have things like this, where you would say, okay, I need to grab the milliseconds for how much time is remaining. Then I could say the remaining milliseconds divided by 1,000, because there are 1,000 milliseconds in 1 second, modulus 60. Then give me the remainder. So imagine there's 5,000 milliseconds left in the countdown. Okay, well, we divide that. That would come to 5. That means there are 5 seconds left. We would then divide by 60 and determine what remainder there is after we perform that division. And then finally, we could do something like Math.floor to make sure that we have a nice round number. And yeah, that's the basic shape we would take for seconds. And then for minutes, kind of the same thing. We would say, like, remaining convert to seconds,

that we have a nice round number. And yeah, that's the basic shape we would take for seconds. And then for minutes, kind of the same thing. We would say, like, remaining convert to seconds, and then divide by 60 seconds within a minute, and then mod 60. Yeah, it's kind of the same thing. However, let me undo this a few steps. The laracasts codebase already uses Moment.js, which means I can pull that in, and it'll do the work for me. So import moment from moment, and then we could say let remaining = moment.duration. And you'll see here we do need to give it the milliseconds. So maybe instead we'll assign it up here. So how do we figure out how many milliseconds are remaining? Well, we know what our countdown is to, so I could say date.parse(this.until). So that will give me the milliseconds. In fact, I'll show you here. Let's do this. Date.parse("December"). Here we go. We'll just grab that. And there we go. We have

and there we go. Finally, on our button here, let's just give it some margin bottom. Great. So at this point, if I give it a refresh, you'll see this updates. 51, 49, 47. But ideally, every single second, I want this to re-render. So let's figure out how to do that. It sounds like we're probably going to need some kind of interval, right? So let's think about it. So we have this computed property here. So what would be a data-driven way to make it re-evaluate? Well, here's what I'm thinking. What if we'll have a now prop that will default to the current date? But then I could say, once our component has been created, well, every single second, why don't we update this? So we could say something like setInterval, and we'll say every 1,000 milliseconds or every single second, this.now will be a new date. We're going to refresh that. Now, if we bind to this computed property, and we'll say subtract this.now,

It just doesn't require that much work, especially if you can get yourself in the mindset of thinking in a data-driven way, which is always very hard, especially if you kind of come from the jQuery world, where your natural instinct is dive into the DOM, grab something, parse the value, figure it out, and then dive into the DOM again and update the value. That's sort of the jQuery approach. But with this approach, we're thinking more in terms of a single source of truth, where when it changes, we will detect that with Vue's reactivity and automatically update the DOM. Now, let's make sure our expired text is working. So we'll say let's countdown until today at 17.13, which would be 5.13. Give it a refresh. And now once it gets to zero, let's see. Ideally, we expect finished to return to true. But actually, you know what? I can't do that yet because we've hard-coded finished. So how can we determine if our countdown is complete? Well,

Ideally, we expect finished to return true. But actually, you know what? I can't do that yet because we've hard-coded finished. So how can we determine if our countdown is complete? Well, what if we say return this.remaining total. I don't know. We need access to the original duration. And we'll say is that less than or equal to zero. So if it has reached zero, then we're finished. So let's say total and just make that equal to remaining that object as a whole. Okay. So now I'm going to come back and we'll switch it to 14 and refresh. Here we go. Four seconds, three, two, one. This coupon has now expired. Perfect. It did exactly what we would expect. But now there's still a couple of other things. For example, if we come back, at the moment, we have set an interval that will change this now property, and that should constantly re-trigger this method. So for example, if I were to say remaining was called,

if remaining is less than or equal to zero, once you cast it, then we're finished. So let's emit an event called finished. We're all done. So this can serve two purposes. One, the outside world can now hook into this. So if I wanted to say, well, when the countdown is finished or complete, whatever you want to call it, then I want to trigger this method on the parent component. Well, now we can do that. But also, we could hook into it here. Something like this. Let interval, and then we'll say, when we fire the finished event, then we will clear the interval. So why don't we give this another shot. console.log called. And let's see. 522. All right. Come back to Chrome. Give it a refresh. And let's fast forward to zero. Okay. So that's expired. And yeah, now if I clear the console, we're no longer triggering that method. And that's because we cleared it right here.