In this guide, we're going to be setting up the label that tells us what age we will be turning. So if I type in 1997 September 15th and hit generate it says remaining until you turn 21 so that is the piece of functionality we will be implementing in this guide. So the way we can calculate this is by taking the number of days we are old the number of days we've been alive and dividing it by 365. And let's go ahead and get in our code and first get that up and running. So what's let's type a function called getAge and bind this right here, for now, we will change this, later on, we'll refactor our code a bit.

getAge = function() {
    }.bind(this)

All right so first thing we need to do is get the time in between the distance. So let's just copy this from our time remaining function.
Put that in here

and then let's copy our days

and then let's get our days old by saying var days old well let's just name this days old so it's a little more clear.

Let's get years old by taking days old and dividing it by 365. And that should give us the number of years that we are old.

var yearsOld = (daysOld/365)
return yearsOld

Now we have to call this function so let's just type in an alert so let's actually just set this up in our render function. So let's put another div in here and then let's cut this out using command X

and put it in a div that we can wrap this all into so pull that back.

All right now in here just put in some curly brackets and type in let's say until it remaining well let's just put in an H4 tag. So H4 and let's say remaining until you are and then let's just call our function so this.getAge().

Save that run it in the browser and let's see if it's working. So let's put in a date 09/15/18. Make sure that year's 2018 or actually let's make sure the year is not 2018 because we need to get how old we are going to be in 1997 and it says bday is not defined. Let's find out why it's saying that. So I'm just going to search in here for bday and it's saying in our getAge function that bday is not defined and that's because we haven't declared it. So let's go ahead and declare a couple of variables here

var bday = new Date(birthday);
var today = new Date();

We're just accessing days instead of everything else. OK, so reload that try it again with your birth year and we will see if it's working, I accidentally hit generate. So we're going to type in 09/15/1997 hit generate and it says birthday is not defined. And let's see why all right it's because we haven't passed in anything let's just call this.birthdaysave that and reload it. We could even do what we're doing with getTimeRemaining we could pass it in. But we're just going to do it this way. So put in you're birthday then generate and it says negative seven thousand days twenty-two hours 47 minutes and 30 seconds until you're twenty point five. So we're kind of close here but were a bit off so 1. everything's negative 2. It's not my birthday negative seven thousand days. That was actually when I was born 7000 days ago. And I'm not negative 20 or negative twenty point five. I'm 20 and I'm going to be turning 21. So first we have round the number and then we'll have our remaining age and then we will have to calculate this a different way to find out how many days until our birthdays and we'll do that in the next guide. But real quick let's solve this problem since we haven't yet fixed that. So in getAge, we're going to round this and the way we can do that is by linking in a number and then saying yeah we can make that number and we can say .toFixed(0()); and we're going to make the entire thing. So put parentheses around all that. So within the number, you just want this. So put that in there save it and that should fix it.

But we also don't want it to be negative. So let's reverse the distance. Let's take the current day and minus our birthday. So to make that a little more clear on I am gonna type some pseudo code here we're saying okay 2017, 2018 minus 1997 is equal to 20. Okay so I'm going to delete that

save that reload this and I'm going to put in my birthday and it's going to tell us I'm turning 21 generate countdown ok, remaining until you are 21. All right so now to this error, we will get into that in the next guide so good with that. Let's commit and move on.

git status
git add .
git commit -m "implemented age feature"
git push origin master

All right I'll see you guys in the next video.

Resources

Source Code