That bug is if we enter the current date so if we reload the page will be given the current date. It says days minus one, hours minus one, minutes minus one, and seconds minus one. The way we can change this is by first thinking about what the problem is and then finding a way to solve. So basically we obviously know it's pretty obvious that if it's the same day it's your birthday. All right regardless of what year you were born, I put in 1997 you're going to get the same effect but It's a little bit differently. And the reason this is happening is that of the reason this kind of thing was happening in the first place and it's because no none of these conditions are being met. So it's simply passing down to this and it's subtracting the number of milliseconds minus the even bigger amount. So we're seeing a big negative value. All right. And the way we can fix this is by providing another condition here. So if it's in the same month and same day if it's your birthday then it's going to be in this condition it's going to be this condition but then it's not going to be any of these because the day is the same. So we type in else that's equivalent to typing else if (birthday == currentDay.

And I'm just going to type it like that. So we're pretty clear on what we're doing here instead of just typing else. And if we ever get this error again we'll know that one of these conditions isn't being met and it's not just reverting to this. Anyway, we can type in console.log('it is your day of birth'). Now reload that and hit generate and you'll see in the console here that it is not saying anything. So let's see. It's because we named this wrong this has a capital D. All right so save that reload generate it is your day of birth.

All right it's your birthday and it's saying that because our get time remaining is running every second and the way we can fix this the way we can actually finally get around to fixing this is by returning this instead and let's just return 0 because the time's up. This is always going to be a little bit different because the times are slightly different but we're going to return 0. And if we did it based off of this it's not all going to be zero because if we put 1997. It's obviously your birthday but the days are going to be off. It's going to be a bit off. So we're just going to return 0 here and then wherever we call this function getTimeRemaining I am using command F to find it you'll see that we use it in our timer here and we're not doing anything we're not doing anything with that. We're just simply setting time remaining so just think about a couple of ways we can do this and where we can do it. We have to check somewhere that time remaining is equal to zero. And if it's equal to zero we need to render something else we need to render Happy Birthday. Like you see here in the design if this is equal to zero since this is going to return zero we need it to display. Happy Birthday.

So just to give you an idea of what's actually going on if that didn't make sense. I'm going to alert(this.state.timeRemaining) or I'm just going to alert(timeRemaining) since we haven't set it in state yet until after I type that alert. So reload this hit generate. We get that alert zero

because it's returning zero because we hit the condition where first the month is the same and then the day is the same as well so it's zero. Now we're setting that to state and that's pretty obvious that that's going to be in the state now in here we need to do the same thing we kind of did and here we need to check state check it very well and see if it's true or not and if it's true return something if it's false return something else. So in here let's return, let's type in and see how we did it okay, so we have to wrap everything in a div so let's just put this div right here the top one and then let's cut this using command x so that's on a clipboard control X I believe if you're on the Windows machine and we need to enter in that condition. So this is kind of like an if statement but we can't use if statements in this block of code here we'd have to use an external function and return it and that just makes our code a bit messier so let's just do it this way. So this.state.timeRemaining == 0 ?. So if it's equal to zero that will return true. So this variable we trim and we want to return a message saying hey it's your birthday actually let's just put Happy Birthday and then put a colin here. Then we put this

because that is the condition we want and let's get rid of that div

because we want this to return if it's not your birthday we want it to display the countdown. All right so let's try to fix this up a bit. All right so that should be good. Looks like there is something going on here and it's because we're probably because we haven't wrapped each in their own divs. That might be the case and we don't need to wrap this in a div because it's just a single element. But we will probably be wrapping it in a div because we'll be displaying a little bit more than Happy Birthday maybe we will see. All right so that saved hit ok reload the page and it has failed to compile says adjacent JSX elements must be wrapped in an enclosing tag. Now that probably is because of this. I thought we didn't need that but we might need. Well let's actually just read the error instead of assuming a little bit closer so reload that and it worked. All right yeah maybe we just interesting. Anyway, let's enter the date. Well, actually we run the current date that's what we are testing jeez. Ok so generate countdown Happy Birthday. All right so let's just go over how this works again, we've completed that and we are done coding for the guide. But I want to explain how that works again just if you missed it. So getTimeRemaining is calling when our time or when our components mounted and the timer starts. All right and then it's saying ok getTimeRemaining and setState timeRemaining then it's going in the timeRemaining it's saying ok the birth month. It's not going to be that it's not greater, not less than the birth month is the current month it's March. And I'm saying ok birthday is not greater than the current day and is not less than the current day which means birthday is the current day which means it's their birthday because the month and the day are the same any year that's going to be your birthday return 0. Back in our function here, we're setting state and then setting state causes a re-render like we've talked about many times and then saying ok this.state.timeRemaing == 0. Let's say Happy Birthday and then in the other case if we hit change date and we put it in a different day it's not returning zero it's returning the javascript object with our days, hours, minutes, and seconds and it's setting it to timeRemaining and then and saying ok is this.state.timeRemaining == 0. Nope, it's a javascript object let's return this instead. So I hope that helps and that's all we will be doing in this video in the next video we will be doing something that I will have to tell you in the next video because I haven't decided yet. So let's type in

git status
git add .
git commit -m "fixed same day case" 
git push origin master

We are good to go. I will see you in the next video.

Resources

Source Code