This is about the days I've been alive, and we don't want that. It's a cool feature, but it's not the feature that we're trying to build, so let's not do that. Let's make it say how many days until it is my birthday as if I put in 2018.

Now the reason we don't get rid of the year entirely and only have them select a day and a month, is because we also want to implement this feature where it says it says this is the age you are going to turn. So that's why we are including the year, and that's why we have to solve this problem, so let's go ahead and solve the problem that we are getting here.

Let's go in here and let's get rid of all these comments in our handleGenerate function, because I hate comments. They are nasty. Let's just write clean code that we can read, instead of having to write comments to explain the ugly code. No need for comments when the code is clean. Except for this one because this is where we are setting that it is expired.

So, we have all of our logic here, but what we're doing is we're taking the start date: so September 14th, 1997, and we're getting the time and then we are minusing the current date from that. Obviously, it's the future from that date, so it's more time. It's like saying 15s-30s. We don't want that, we want to get the current date.

Think about the first case here. If we're selecting a future date, like August 16th, and it's giving us the days, and then if we change the year and we're getting what we don't want. Then all that we really have to do is hide that we're selecting this year to our logic.

Let's say if this month is greater than the current month, then we simply want to set the year to 2018 and then minus it from that that way we will get the right number. Follow along, and we will write that out. If you don't understand, don't lose your chill. It's fine, you'll understand in a second.

What we need to do is not just set the state here. Don't worry about that, that has nothing to do with this. It just has to do with rendering, but we need to introduce some variables. We need to say:

app.js

handleGenerate = function() {
    this.setState({ active: true });


    var bday = this.state.startDate.toDate();
    var today = new Date();
    var currentMonth = today.getMonth();
    var birthMonth = bday.getMonth();

    var countDownDate = bday.getTime();

    this.timer = setInterval(function() {

      var now = today.getTime();
      var distance = countDownDate - now;

Pretty simple stuff. It can be confusing, but it will make sense once we write it all out. Right now, we just need to have an if statement, and handle some conditions. So we'll say:

app.js

handleGenerate = function() {
    this.setState({ active: true });


    var bday = this.state.startDate.toDate();
    var today = new Date();
    var currentMonth = today.getMonth();
    var birthMonth = bday.getMonth();

    if(birthMonth > currentMonth) {
        bday.setFullYear(today.getFullYear())
    }

Now, let's go ahead and think about this. We are getting our full year which means now our birthday is in 2018, although, we still have access to this 1997 when we need to use it. We'll have access to it before we set the date. So right here, we will do something with that 1997 to calculate what age you are turning.

Now when we hit generate countdown, it gets the dates and it's not negative, which is really awesome, but that's because this is in the future. If we select a date that is in the past of this month, say it's June, March is going to be before June.

When you do this, you are going to get this negative number because we are only setting the full year if the birthMonth > currentMonth.

The reason we're doing this because if we weren't to do this, it's going to be off a little bit. Let me show you how. Let's select a month like that's before the month we are in, and let's say a year before. It's a negative again because it's saying: let's minus it, but let's take our current time and setFullYear. So now it's March 31st, 2018.

When we minus the current date from that, it's going to be two months behind. What we need to do is set this a year in advance. Again, if it doesn't make sense, it totally makes sense that you would not understand this right now, it's kind of a confusing piece of logic, but just try and wrap your head around that.

Let's move on right now. Let's get this if statement back in there, and say:

app.js

handleGenerate = function() {
    this.setState({ active: true });


    var bday = this.state.startDate.toDate();
    var today = new Date();
    var currentMonth = today.getMonth();
    var birthMonth = bday.getMonth();

    if(birthMonth > currentMonth) {
        bday.setFullYear(today.getFullYear())
    } else if(birthMonth < currentMonth) {
      bday.setFullYear(today.getFullYear() + 1)
    }

Let's go ahead and try this out now. Select like March 1997 or something, and let's hit generate. You'll see that it works now. Awesome. That's the second case.

There's still another case, and that's just if the current month doesn't change so if we say our birthday is here, but in a different year, it's going to mess it up because it's neither greater or less than. Now we could just say: if(birthMonth >= currentMonth), but that won't work.

What we have to do is not to check if it's equal here. We have to create another condition that says: if it's the current month, and let's compare the days the same way we did the month. Try and wrap your head around that as we type this out. Let's say:

app.js

handleGenerate = function() {
    this.setState({ active: true });


    var bday = this.state.startDate.toDate();
    var today = new Date();
    var currentMonth = today.getMonth();
    var birthMonth = bday.getMonth();

    if(birthMonth > currentMonth) {
        bday.setFullYear(today.getFullYear())
    } else if(birthMonth < currentMonth) {
      bday.setFullYear(today.getFullYear() + 1)
    } else if(birthMonth == currentMonth) {

    }

Now we check the month, it's equal. Now we have to check if the day is in the past or the future. Same exact thing we are doing with the months, except for with the days. If we select one that is in the past, like the 14, which is obviously before the 31, we are going to get a negative number.

Now again, I can't show you the case of it being in the future because it's the 31st. That's a problem, but basically, it's the same exact way the months are working. If we select a day that is in the past, before the 31st, we have to we have to set the month a whole year ahead. Let's go ahead and go in here, and say:

app.js

    if(birthMonth > currentMonth) {
        bday.setFullYear(today.getFullYear())
    } else if(birthMonth < currentMonth) {
      bday.setFullYear(today.getFullYear() + 1)
    } else if(birthMonth == currentMonth) {
      var currentDay = today.getDay();
      var birthDay = bday.getDate();

    }

If check this method in the reference on ww3, you'll see that getDate basically gets the date it's not getDay. If you do getDay, it's going to get the day within the week. It's going to get you something like if it's Thursday, it goes Monday Tuesday Wednesday Thursday right? That's the 4th day of the week. This will return 4 if you do that.

Now if you do getDate, it's going to get you the number out of the month. The 31st in my case, or whatever day it is for you. If it's the 15th then it will return 15. So let's say:

app.js

    if(birthMonth > currentMonth) {
        bday.setFullYear(today.getFullYear())
    } else if(birthMonth < currentMonth) {
      bday.setFullYear(today.getFullYear() + 1)
    } else if(birthMonth == currentMonth) {
      var currentDay = today.getDay();
      var birthDay = bday.getDate();

      if(birthDay > currentDay) {
        bday.setFullYear(today.getFullYear())
      }
      if(birthDay <= currentDay) {
        bday.setFullYear(today.getFullYear() + 1)
      }
    }

Now what we need to do is be done. I think that solves our problems here. Let's go ahead and select the 16th here. We got -16. That's not right. Let's select 1997. That's still negative. Let's reload our page and try it again. That didn't work, let's try a previous month. That works.

Let's try a future month. That works. Let's try a date in 2018 now for the future month. That works. Now let's try a previous month in the same year. That works. Now, where was the problem? The problem was in the current month, so every month works except for the current month. So if you select that it's not going to work because we have some problems here in our logic.

So we are saying today.getDay(). We need to say today.getDate(). That's where our problem is.

app.js

    if(birthMonth > currentMonth) {
        bday.setFullYear(today.getFullYear())
    } else if(birthMonth < currentMonth) {
      bday.setFullYear(today.getFullYear() + 1)
    } else if(birthMonth == currentMonth) {
      var currentDay = today.getDate();
      var birthDay = bday.getDate();

      if(birthDay > currentDay) {
        bday.setFullYear(today.getFullYear())
      }
      if(birthDay <= currentDay) {
        bday.setFullYear(today.getFullYear() + 1)
      }
    }

You might have been wondering why I typed getDay right as I was explaining why we're not using it. Anyway, let's select like May 17th 1997 and see what happens. That seems to work. Let's try 2018 now. It should give us the same thing. Sweet.

Now you might be wondering, why did we implement all of that logic if it's giving us the same date regardless of the year? Again, that's because we need to still have access to the year, so we can tell them how old they are going to turn. Let's go ahead and do that in the next video, this has been a long video.

Let's commit our code. Let's hit command + j, and let's say git status, git add ., and what I want to say in here is git commit -m "fixed all cases for birthday and currentday calculation". See you in the next video.

Resources

• Source Code