Let's quickly solve the counting down, and move onto the change date. It will be really quick. Let's go into our code. What we need to do is change this variable now on line 76ish, or whatever it is for you. Instead of saying today, we need to get the new date every single time this interval fires off. If it doesn't, it's not going to work. Let's say:

app.js

    var countDownDate = bday.getTime();

    this.timer = setInterval(function() {

      var now = moment().toDate().getTime();
      var distance = countDownDate - now;

That way, you will get the active date. Let's go ahead and try this out. It looks like it's counting down. Okay, so let's just quickly change the styles for our change date button by going to changeDate.scss. Let's first change the column to:

changeDate.scss

.change-date {
    grid-row: 2/3;
    grid-column: 4/6;
    justify-self: start;

    font-size: 24px;
    line-height: 19px;
    text-align: center;
    font-family: $font-roboto;
    color: white;
    font-weight: 100;

    background-color: transparent;
    border: none;

    transform: rotate(-69deg) translate(0, -70px);

That should be good. Yeah, that looks great. That solves the problems in our application and that concludes this application.

If there are any updates for this app I will create more videos. As of now, it's completed, and it looks great. so let's commit our code and then move on to the next app. Let's say git status, git add ., and let's say git commit -m "solved countdown moment() bug and adjusted change date styles".

Let's push it up to our Github, and then push it up to Heroku and check it out there. So git push origin master. I pushed up first because it's quicker. Now I'm going to say git push heroku master and that will push it up to Heroku.

This is going to take a minute, so let's go look at what it looks like right now. Let's say birthdaycountdown.herokuapp.com, and that's mine. If you visit it, it should be up, but visit your own. Go to your Heroku app pushed up and see if it's working.

As of right now, this is all it is, it's still got that bug. It's still got of issues here, and has no functionality. Once it's done pushing here, compiling, and running on their servers there, it will work.

Basically what it's doing is, it's pushing it up and then it's saying it's a Node.js app let's run it. Then it starts it up on a server after it compiles. Make sure it succeeds, then it deploys it, and it should be there.

Let's reload your app in Heroku in the browser. It might take a little longer because it just pushed. It was actually quicker. You'll see that it is functional. You can go show this off to everybody, show it off to your friends and fam. Show them that you built this app.

That should be really awesome. Maybe show employers. That completes our application, I'll see you in the next set of videos.

Resources

• Source Code