Building out the Age Calculation

I'm going to close out the terminal, and let's write this out. We are going to want to do it in our handleGenerate. Let's go ahead and write this out by saying:

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 timeBetween = today.getTime() - bday.getTime();
    var daysOld =

Now what we are going to have to do is say var daysOld. This is because getTime is getting the amount of milliseconds of that day. This is going to be a very large number. All of the milliseconds since the year 0. All of the milliseconds since you were born.

We're going to have a big deficit of seconds. If you were born at 10s in time, and today is 30s in time, there's going to be a 20s difference. So you're 20s old. By getting days old, we are going to calculate how many days instead of how many seconds. We can do this pretty easily by saying:

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 timeBetween = today.getTime() - bday.getTime();
    var daysOld = Math.floor(timeBetween / (1000 * 60 * 60 * 24))
    var age = Number((daysOld/365).toFixed(0));

Now what we want to do is set this into our label by using state a bit. Let's go up to our constructor, add a new property here, and let's say

app.js

export default class App extends Component {
  constructor(props) {
    super(props);

    this.timer = 0;

    this.state = {
      active: false,
      startDate: moment(),
      timeRemaining: {
        days: 0,
        hours: 0,
        minutes: 0,
        seconds: 0
      },
      age: 0
    };

Now we can go in here, and we can 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 timeBetween = today.getTime() - bday.getTime();
    var daysOld = Math.floor(timeBetween / (1000 * 60 * 60 * 24))
    var age = Number((daysOld/365).toFixed(0));
    this.setState({ age: yearsOld })

Now, what we should do instead of setting it twice in here, is let's get rid of this.setState({ active: true }), and let's put:

app.js

handleGenerate = function() {

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

    var timeBetween = today.getTime() - bday.getTime();
    var daysOld = Math.floor(timeBetween / (1000 * 60 * 60 * 24))
    var age = Number((daysOld/365).toFixed(0));
    this.setState({ 
        age, 
        active: true 
    })

Let's test it out...well, first we have to actually use it. Let's scroll down to our label here, let's get out of this, and let's say:

app.js

  renderItems = function() {
    if (this.state.active) {
      return [
        <Clock timeRemaining={this.state.timeRemaining} />,
        ChangeDate("Change Date", () => this.setState({ active: false })),
        LargeText("04/03"),
        <label className="grid__remaining">
          Remaining until you turn {this.state.age}
        </label>
      ];

That should be good. Let's wait, select a day, I'll put in mine, and then I'm going to hit generate. Now I'm going to select a different year since that is the same age. I'll do something like 2014. Okay, it says Remaining until you turn 4.

large

By doing everything we did in the last video and this video, we were able to get the right amount of days and calculate what age you are going to turn. Pretty awesome stuff. Now the only thing we have to left to do with the functionality is make this appear correctly, so we will do that in the next video.

large

Let's commit our code. Let's hit command + j in visual studio code. Let's say git status, git add ., and let's say git commit -m "added age calculation". See you in the next video.

Resources

Source Code