So the way we can fix this is by introducing a couple if statements into our getTimeRemaining function here and calculating the distance basically and then the days, hours, and minutes and seconds off of the correct date. So the way we can do this is by first getting the month so we need to get the month and that's going to be today.getMonth.

If you google javascript date object and head over to this link right here the W3 schools link. You can also check it out on the Mozilla docs but to W3 schools is better and we all know that. So go ahead and go to the javascript day reference and in here we can see that there are a set of methods right here that allow us to get the date, the day of the year etc. and this is like you might have known okay I can already get the minutes and month I already knew that but when I was building out this application for the first time I was like why isn't this working. And it's because I was using get day somewhere because I thought I would get the day of the month. Turns out you needed to get date to get that. So it's always good just to kind of read up on a little bit of the documentation of a certain I don't whatever you're using to find out what exactly things do instead of assuming you can also just command hover over it and generally it usually gives you an idea. So says gets the month using local time like I could have just typed this earlier when I was building it and it says gets the day of the month but I was using get day gets the day of the week. Anyway not to go off about that but yeah. So you can read up on that see with certain things do in this case we're going to be getting the month. And we also need the month of the current day so yeah bday.

All right and the reason we're doing this is that in our app we're getting this big negative value. We need a way to find out what these are instead of these numbers because right now this bday.getTime. It is a time that is in 1997 and this is a time in 2018. So basically what's happening is it's going 1997 minus 2018 and that gives us a negative number although this is in milliseconds getTime I think it is at least. So yeah it gets the time value in milliseconds so this is obviously going to be nothing near and way off but let's just say there's a ton of milliseconds and then we're subtracting even more because today's obviously more milliseconds and we will get a huge negative value and that's where we're getting all these negative numbers from, it's calculating in to here and we get the negative days, hours, minutes, and seconds. So basically I've been alive for 7500 days about. So that's where that random looking number is coming from it's not that random it's actually the number of days that this particular person has been alive. So anyway let's solve it the way we can do this is by setting birthday day the time to 2018. So let's do that right now and I'll get back to this month thing. I probably should have held off on that for a second. Any way we can go bday.setFullYear and you go in the javascript data object here and type in set full year after hitting command F to find it and it says since the year of the date object you can click that and you'll see that. Let's see what they're doing here. So it says new date which is obviously 2018 and they're setting it to 2020 and then they're printing it or putting in this HTML button and it's saying 2020. So that's the idea. That's what we want to do here. Set for year to 2018. Now rather than doing 2018 it's not always going to be 2018. What we should do is call to date on a get full month or get full year and that will set it to whatever year we're in right now. So yeah that's how that works.

Now let's save that go back to our code and let's put in a date let's put in January 6, 1995, generate countdown.

So it looks like it works which is great. 74 days remaining until you are 23 although you'll notice that doesn't work. So you will actually add one to this and then reload it, type that in again and you'll notice it does the same thing which shouldn't be. So let's try that again oh it's because I was on entering on June, not January so let's get rid of that real quick. Let's put this in let's put it in the first of January and then it's put in the 6th 1995 and actually expected this to break.

So it's breaking and the reason is that this is one in the past which is why we brought in the months so we need to calculate a couple of different cases and I will enter another case real quick sorry if this is confusing right now but you understand the segment so I'm putting in a month that's in the future. So it's not March January was before March degenerate. And look it works. All right. So this works for if the month is in the future. So our first case is going to be a month after the current month. All right. Now the second case is going to be a month before the current month and the way we can solve that is by setting it an entire year forward. So let's save this rebuild this and think about this for a second.

We are entering the day or in the month and the day and the year we hit generate and it's negative. All right. So if we add a year to this so in this case 2019 we can see that we get this behavior rate here 288 days, 1 hours, 46 minutes, and 16 seconds and that's right. If you google it you'll see something along those lines. The reason this works is that we're setting the year to 2019. So we're taking 2019 and we're subtracting it from 2018 correct. So we're getting the positive value and then we were able to get the days, hours, minutes, and seconds based off that distance that might take a little bit for you to wrap your head around but it's actually pretty simple once you understand it. So now what we need to do is actually set up these conditions because it's going to overwrite it every time if we don't so if(birthMonth > currentMonth).

So basically that fulfills case one and then let's say all right else if (birthMonth < currentMonth) we want to do this case.

So now if you were to reload this in the browser and check it out you'd notice that, let's actually just do it. Don't wanna make this guide too long but let's do it real quick says 01/6/1995. So that's a month in the past and we're getting the right value. Now let's do my birthday and it looks like it works. That's great. Now, this is all great and all but if you were to enter in something with the same month none of these cases will be run none of this would happen. So we could put in like the 12th 1997 and it messes up it's still broken and were getting that big number. So what we need to do is set this again but then we'll run into the same exact problem with the negative value. So if we put in the 20th 1997 we get that negative value. Now if we enter in the 25th 1997 we get the right thing, two days. Yeah, it's going to be two days and that will be the birth date that's the date we set. So the way we can fix this is by taking this exact same logic and applying it to the days so we want to write another if statement so else if (birthMonth == currentMonth)

then we need to calculate it based on the dates then we will replace month with day, day, day, day, day and day so the day is after the current day or the days before the current day.

Now let's set these up by typing in const birthday = bday.getDate(). Again it's going to be getDate because getDay will give us the current number of the weeks. So if it's a Wednesday we're going to get three. We might get two depending on how that's how that works because Monday could technically be 0 1 2 yes we might get two it's probably three. So the next thing we need is a current day and that's going to be retrieved from today. Then let's just replace the birthDay with the currentDay.

Now, this should work. Let's go ahead and test a few in the app here. So let's say we were born on the 26th of 1997. That's two days. That works. All right. Let's say you were born on the 15th of 1997 in March and it looks like something's not working. Let's check why and all right so the reason it's not working is because obviously we put this here

and that's going to override the birthday that's before so if you delete that save it reload and put in the 15th again of March 1997 let's do a different year is getting annoying. So 03/15/2000. I count down 356 days sweet until you're 18 awesome. So that works correctly. All right. So that's it for this guide in the next guide we're going to make it so when we go over here we can enter in a date right and so we can go back and not have to reload this every single time because that can take a little bit more time and we need to enter that feature eventually anyway. So let's take care of that in the next guide and before we exit this one let's type in

git status
git add .
git commit -m "added conditions and logic to calculate countdown correctly" 

All right! That's it! Catch you in the next guide!

Resources

Source Code