Our most complicated creation
Complicated isn't always better, but at this point, it totally is! This is a really long lecture, but by the end of it we will have a wicked Life clock. In the process, we'll go through every single thing we've learned so far. We will see how to integrate all the things we've learned so far into a project.
Video Transcript
00:00Alright, so it's time for us to integrate everything that we learned, and in the next
00:04few lessons throughout this chapter, we're going to integrate everything we did to create
00:09a life timer.
00:10And the idea is to be able to create a clock that will update every time we're doing something.
00:15And that's what we're going to start right now, and we're going to continue it in the
00:17next lesson as well.
00:19So let's get started.
00:21On rehearsal, let's get it done.
00:25My goal, and I didn't plan this out, besides the idea that we were talking about how
00:28we had that birthday thing, we want to clear up just create like a life clock that will
00:33have basically days, hours, minutes, seconds from the moment we were born, just counting
00:39forwards always.
00:40So it's kind of like a clock that tells us how old we are, or in days, slash instead
00:45of years.
00:46So let's go ahead and start building this object.
00:48But instead of using an actual all those functions that we worked with earlier, I'm just going
00:53to go ahead here and I'm just going to comment down all that stuff.
00:57And we're going to create it all inside of an object or start off with an object.
01:02So the first step that we want to do is I'm just going to create a global function, a global
01:07variable really, and I'm going to call that variable my age.
01:12Or it's going to be age, how about age, which is going to be an object.
01:16And we're going to define it inside of our function, I just want to make sure that we
01:20first have our age object defined externally, so we could refer to it in our functions
01:26once where we create other functions, so it'll be easy for us to refer to it.
01:30The next step for us, what I want to do is I want to actually start off just like we
01:34did with our get seconds function.
01:37But instead of just creating it and putting it in a floating variable, what I want to do
01:41is I want to go ahead and immediately set it inside of an object.
01:46So what I'm going to do first is I'm going to create that function.
01:49And that function is literally going to be just get time since birthday, or get seconds
01:56since birthday, get seconds since birthday, it's going to accept a parameter, a few parameters
02:04which we said was year, we said month, we said date, we probably want to put it inside
02:10of your auto hour and auto minute, and maybe also seconds on house but our hours, minutes,
02:19we might want to also even put inside of here seconds.
02:24Now because I'm most of the time, we're not going to set those values up, what I could
02:27do is by default set the values of my seconds, minutes and hours to zero.
02:32So like that, by default, I'll get in that information as basically as the default of
02:37zero unless I send it in.
02:38Okay, so we're making our function a little bit more sophisticated.
02:41Notice how it broke a line.
02:43That's completely fine.
02:44Don't worry about that.
02:46The next step that I'm going to do is literally set create that new object is going to be the
02:50date is going to be birth, that's going to be our object.
02:54And if we want to set it in a way that makes it more like Boolean value, then we could
02:57set it maybe to debirth for date of birth, and I'm going to create her a new date, send
03:03inside of it, the year, the month, the date, the hours, the minutes, the seconds,
03:11and all these the all this information will aggregate and create my birth.
03:15But I could only I could always send only the first three, but it's mandatory for me
03:18to send the first three parameters.
03:20So once I've created that, and I don't want to forget to subtract one from the month
03:24because we said the month is fed in from zero to 11, instead of one to 12.
03:30Now that I have the date of my birth, I want to fetch the current date.
03:33So I'm going to create here another quick variable, which will be our date, going to
03:36be a new date without sending any parameters.
03:39Now I want to get the milliseconds, I'm going to create another various variable, I'm going
03:43to call it milliseconds here, but to be honest, I don't even need a variable because
03:47it is literally just return.
03:49And what value do I want to return?
03:51We want to take our date, we want to get the get time, and we want to subtract date
03:57dot get, oh, not date again, but we want to get our debirth dot get time.
04:07Once we subtract these two, I want to divide all of that by 1000 because we don't
04:12care about milliseconds.
04:14And we want to also round this up down.
04:17So math dot round, and we can literally round that all up.
04:21So we couldn't do it done in this way, which is a lot more hard to read, you can definitely
04:25break it down to variables to make it easier for you to read.
04:28But I figured let's do it a little bit more complex, just because we're doing it
04:31all over again.
04:32So I'm not going to dig deeper into this, because we've created this function earlier
04:35in a different interpretation of it.
04:38Next step is I want to actually go to my age object and literally define it.
04:42And I'm going to set here my seconds.
04:45And I'm going to set my seconds to be that value that comes from get birthday second
04:50since birthday, literally sending that function in, and it's going to return to me the value
04:55all that's left for me is to set the date that was born, which is October 19.
05:00And I think it was at 7am.
05:02So I'm going to set there seven.
05:04And I don't really know the minutes or seconds, so I'm just going to be seven in the morning.
05:08That's good enough for me.
05:09All right.
05:10So I created my age object.
05:11And now if I just console dot log it, I'll be able to see my age dot seconds.
05:17And I should see the seconds since I was born, basically my age in that given time.
05:23And if I go ahead and just click here a little on a little refresh, we should get in our
05:28console.
05:29And I have your little mistakes, I'm going to house is not defined.
05:33That's true, because we didn't want to call it house, did we?
05:36We wanted to call it hours, but for some reason, I'm passing through a house.
05:42Don't ask me why.
05:44So we click on refresh, we will see the amount of seconds that passed since I was born.
05:48Now what I want to do next is literally, I want to make it really, really, I want to
05:53make it less obtuse.
05:54I want to make it that I'll have your really detailed information about my birthday.
05:59So maybe instead of using that get seconds since birthday that we've been working with
06:03so far, how about we create a function that will create our age object.
06:08So I'm going to be I'm going to create a function, create age object.
06:13And it's not going to it's going to well, it probably should accept that properties
06:17that we have up here again.
06:21And I'm just going to go ahead right here and I'm going to continue on.
06:27OK, so we want to have a create age by object and a create age object.
06:31And I'm just going to literally set my age object to be that.
06:35And I'm just going to send into it again, 1982, 10, 19, 7 a.m.
06:44There we go.
06:45So we have our age object created.
06:47All that's left for us to do is actually create it in here.
06:50And again, I could just create any variable.
06:53I'm just going to call it age.
06:55Well, let's give it a different name.
06:56So it's very clear that I'm creating a completely simple variable here.
06:59So I'm going to call it O for object.
07:01And I'm going to go ahead and create that new object.
07:05And next is I want to feed into it actually the amount of milliseconds
07:08that passed.
07:08And to do that, I'm going to go ahead and just call it seconds,
07:12or I'll call it time.
07:14And that time is going to be literally that value
07:17that we get from getting the date object.
07:20And the date will be the year, month, date, hours, minutes, seconds.
07:28OK, so so far so so good.
07:31Now we probably want to return that object as well.
07:33So far, there is no big difference between what we created down here
07:37and what we're doing here.
07:38What we're doing here is we're wrapping up
07:40the creation of the object inside of the create age object.
07:45But what I want to do is further than that, far more further than that.
07:49What I want to do is I want to actually create
07:50some sort of properties for this object, such as O.
07:54And I want to get O and seconds, the real seconds.
07:58How could I get those real seconds?
08:00I could literally go to my O time.
08:02And I could say, hey, give me everything
08:05that is beyond the leftover of 60.
08:09Why is that?
08:10It's because if we have seconds, the amount of seconds
08:13that it passes, my birthday will be the leftover
08:15of a division by 60.
08:18So mold to 60 will give me the leftover.
08:21OK, so I'll have my seconds, actual seconds that pass.
08:24Beautiful.
08:25The next thing I'm going to create here,
08:27I'm going to create here a helper variable.
08:30Helper var.
08:32So let's just call this helper.
08:35And my helper variable, what I really want to do
08:37is I want to take my helper, and I'm just
08:40going to set to it a value.
08:41So I'm going to go ahead here and set that value
08:43to be basically the amount of minutes that are left.
08:47Now, one thing that I could do very easily,
08:50and I'm thinking about it out loud,
08:51is that I don't even need that helper,
08:53because I don't need the seconds anymore,
08:55because I already got the leftovers and the seconds.
08:58So what I could do is go directly to my minutes,
09:01and let's figure out the calculation of the minutes.
09:03So our minutes would probably be our o time divided by 60
09:07this time around.
09:09And then we would want to get rid of the leftover.
09:11So I would just go to my math.floor,
09:16and I would get rid of basically the leftover.
09:19And here we go.
09:20So now we have the minutes that pass.
09:22But the problem with our minutes that pass right now
09:24is that this is all the minutes in total.
09:27And the problem with all the minutes is total
09:29is that we don't want actually all the minutes and totals
09:31in our minutes.
09:31And actually, we do need our helper.
09:33So I'm going to go up here and grab our o helper,
09:36because that is really going to be the amount of minutes that
09:38are actually there.
09:39So I'm going to copy that, paste it, put it right in there,
09:42because that's going to be all the minutes.
09:43But really, what we want to get in here
09:45is we want to get the actual minutes that
09:47are left inside of an hour, which would be basically
09:50mildew, mildew, mildew, where are you?
09:54I lost you.
09:55There you go, mildew, 60.
09:56Because I already divided the minutes.
09:58So this is minutes.
09:59But really, I want to get the leftover minutes that are left
10:02if I would try to figure out what the hours are.
10:04And again, now we can do the exact same thing for hours.
10:07So I'm going to get my helper again,
10:09and I'm going to leverage it again.
10:11But this time around, I'm going to actually divide my helper.
10:15Because what do I want to get here?
10:16I don't want to get the minutes.
10:17I want to get now the hours.
10:19So this was our all minutes.
10:24And this is going to be all hours subtracted already
10:27from the leftovers that we had.
10:29So now that we have our hours as well, we can now go ahead
10:32and the same type of structure, same type of logic
10:35that we had before, we could define our hours.
10:38And our hours, not horse.
10:40Why am I doing this?
10:41Hours.
10:42OK.
10:43So hours, again, is going to be helper.
10:46But instead of mildew 60, it'll be mildew 24,
10:48because there are 24 hours in a day.
10:51There we go.
10:52And that's it.
10:53We don't need our helper anymore, because now we
10:55could go ahead and set our days, because we're not actually
10:58setting years.
10:59So I'm just going to go ahead and take my days
11:01and go to my helper.
11:03And I'm going to go to my helper
11:04and update it by saying divide by 24.
11:08And we want to make sure that we're only getting the floor
11:10of it, because we don't care about the leftovers,
11:13because we already accounted for the leftovers in the hours
11:16section.
11:16And there you go.
11:17And now we created a really complicated object
11:20that has the seconds, the minutes, the hours, the days.
11:24And all that's really left for me to do
11:27is I could literally just go ahead to this object.
11:29We created this object.
11:31I could now go ahead and expand this object a little bit
11:34further.
11:34And I could say, hey, how about let's output everything?
11:38So I'm going to go ahead and put your O,
11:41and let's put here a name such as output date.
11:46Or how about output?
11:47Just output is nice, right?
11:48So output, and I'm just going to call it a function.
11:51And I'm going to go ahead.
11:52And first of all, I'm just going to test out
11:55that we are getting what we're expecting to get.
11:57So I'm going to call out console.log.
12:01And I'm going to go ahead and just call our this,
12:04because we want to approach the object that we're in currently.
12:07And I want to also say, hey, how about we'll output
12:09the time, which basically should
12:11be the milliseconds that passed since my birthday,
12:14or seconds that passed since my birthday.
12:16If I go ahead and run this, we should get that trace,
12:19but not really, because we never actually call the output.
12:22So I'm going to go ahead right in here after I set my age.
12:25And I'm going to go to my age object and say, hey, output.
12:28Just output whatever you got there.
12:30And if I go ahead and refresh my application,
12:33we should now get, first of all,
12:35we have your little error here.
12:36So we want to fix this.
12:37Again, I'm using horses instead of hours.
12:40So let me just find my horse.
12:42And instead of that, use hours.
12:44And I'm going to save that and run it one more time.
12:49So now if I run it one more time,
12:50we are getting something here,
12:51but I don't know if this is the value we're expecting.
12:54So let me just put here a little extra,
12:57just extra something here,
12:59just so I could see that this is where it's coming from.
13:01And if I click on refresh one more time,
13:03let's see what we're going to get back.
13:05And we can see, yeah, okay,
13:06this is definitely the value we're expecting,
13:08but we have here one more output.
13:10So let's try to see where is that extra output coming from.
13:14Console log seconds.
13:15So maybe this is that console little seconds.
13:18Why is our age seconds not returning anything?
13:21That's because we have a typo here
13:22and we wrote salons instead of seconds.
13:24So I could just copy that and set that to be seconds as well.
13:28And if I save this, go back to my application,
13:30I could see that that output should now
13:32auto output the amount of seconds, beautiful.
13:34Okay, so next step is I'm just going to
13:36delete this output seconds.
13:38And what I want to do is I want to construct in this output,
13:41a flow that would actually show this is the amount of days
13:44and hours and minutes and seconds since my birthday was.
13:47So I'm going to go ahead and just create here a variable
13:49that we'll call out.
13:51And the first thing is I want to put the days.
13:53So it'll be this.days.
13:55The next thing is I want to put,
13:56I'll put the word days and then a space.
14:00And then I'm going to add to it this.hours.
14:06And I'm going to add to it also a colon.
14:09And then we're going to add to it this.minutes.
14:14And I'm going to add to it a colon again.
14:17And this.this.seconds.
14:24Now there is going to be a problem.
14:25We're going to see it in action in a second,
14:27but let's do one thing at a time.
14:29And I think we do all the days, hours, minutes, seconds.
14:33Yep, that's all we needed.
14:34So we don't need that.
14:35We don't need that.
14:36We could semicolon it right here
14:37to say that we're done with this line.
14:40And if we save this, let's output our out instead.
14:44And see, I'm just going to copy that
14:47and I'm just going to output it right here in our log
14:49so we can actually see it.
14:51And I'm going to save that.
14:54And I'm going to go ahead and click on refresh.
14:58And if we look at our refresh, we'll see that,
14:59okay, so this is the amount of days that passed.
15:02And this is the amount of hours that passed
15:04since that lucky, lucky day to the universe.
15:07So next is probably when I'm looking at that,
15:10I'm saying if I look at this,
15:11I see that I probably need a space also between my days.
15:13So I just added that space in there.
15:16All right, so let's continue.
15:17And if we'll look at this just for a second,
15:18we'll see that we have a few problems.
15:20One is that it would be great
15:22if our time always was two digits,
15:24no matter what, just for the sake of consistency.
15:26Because when this value will turn into a zero
15:30or when this value won't be 59,
15:32but it'll be just three or four,
15:33or I don't know what number,
15:34we want it to be able to be visually always pleasing.
15:38So to make sure that we're always visually pleasing,
15:41we could create another helper function
15:43for this internal object.
15:45We could approach it and literally just create here
15:47another O dot, and we could say here,
15:49let's say format digits.
15:54And our format digits will accept a value.
15:57So it would accept a number
16:00and it would be format digits equals function.
16:04It would accept a number.
16:06Let's just call it n.
16:07And what we really want to do
16:09is we want to take that n and ask if n is greater than 10.
16:15Well, if n is smaller than 10,
16:19that means that we need to add a trailing value to it.
16:23And in that case, we're going to go to n and say,
16:24hey, n, you are equal from now on
16:27to zero plus n.
16:31Now, if not, we don't have to worry about anything.
16:33All we have to do is return that value of n.
16:37So literally what's happening if n is greater than 10,
16:41then this will never happen.
16:42If n is smaller than 10,
16:44then it's going to go there and just add zero
16:46before that n and basically update the value of n.
16:49And then we're returning n.
16:51So literally all I have to do is wrap around every item
16:54that I want to give that format to,
16:56which is our hours, minutes, and seconds,
16:58and literally just say, hey, this dot format digits,
17:06and then wrap it around whatever property I want to format.
17:09And again, I'm just going to copy this
17:11and just paste it all over those elements
17:13that I want to update.
17:17And I'm going to do this also one last time right here.
17:20And if we save this one more time,
17:21and we go back to our application and click on refresh,
17:24hopefully we'll see something.
17:25You see, now we have that trailing on our zero three.
17:28It's looking a lot better.
17:30All right, let's do one more thing,
17:31and actually two more things.
17:32One is I want this actually to update our copy up here.
17:35So to make that happen,
17:37what I want to do is I want to make sure
17:39that I'm actually going to add some sort of a property
17:42to my object that will basically say,
17:45what do we want to update?
17:47So I'm going to go into my object here,
17:49and I'm just basically going to go to my age.
17:53And I'm going to, you know what?
17:55I'll add an extra property here as the first property,
17:57and we're going to go ahead and update
17:59and change our create object adding another property.
18:01And this is, we'll call this tar for target.
18:05And literally what we're going to do here
18:07is we're going to send the item
18:08we want to actually manipulate.
18:11So in our case, what I'm going to do
18:12is I'm actually going to send the dollar H2
18:15because I want our H2 to be updated, not H3, H2.
18:20And I can add here that extra property,
18:21call it tar for target.
18:24And now that I have my target,
18:26I can go ahead and add to my object just anywhere really.
18:30So go ahead and add to my object to target.
18:33I'm going to say, hey, your value is the value
18:35that's inside of tar.
18:36Now, the reason why I'm doing that
18:38is because I want to be able to refer back
18:40to actually refer back into our place
18:43where we're doing this output.
18:45And instead of sending it to the log,
18:47it wouldn't be lovely if we could go right
18:49into our output there,
18:51go right inside of our function,
18:53just called this.target and just say,
18:55hey, update your HTML or update your text
18:59to be whatever our out value is.
19:03And we could not console out
19:05because we don't need to console out anymore.
19:07And if we save this and run this one more time,
19:09hopefully we'll see that now
19:10it's going to update our time up here.
19:13Last but not least, what's left for us
19:15is to make sure that we're always updating our object.
19:18So I could go ahead here and just add here,
19:21enter our code.
19:23Maybe we could add here another function
19:25such as maybe an init function
19:27or just literally just start it up.
19:30So what I could do is just come here
19:32inside of this constructor,
19:33you could call it of create age object
19:36and just go inside of here and say O timer
19:39and say, hey, set interval.
19:42And what do we want to call in the set interval?
19:44We want to call the update.
19:47So we're going to call O update
19:49and we want to do that every thousand milliseconds.
19:52So if I go ahead and I create that O update,
19:55I'm going to go really quickly.
19:59O.update equals function.
20:02I'm going to go ahead and not put any parameters in here.
20:05And I'm going to go ahead and just trace out.
20:07I'm just going to do your console.log
20:10just to see that I still have access to my object
20:13because I might lose access to it
20:14because I'm using a set interval.
20:16So that's a great way to test it out
20:17by just testing to see
20:19if we're seeing in our inside of our object,
20:24if we actually could see this
20:26and if we see this, then we're in great shape
20:30and we have to wait a second.
20:31So first of all, we could see that we have your typo.
20:34So I'm going to go right ahead there and fix it
20:35because it's not console.
20:38It's console.
20:42Oopsie, console.
20:44And I'm going to just update that one second.
20:48Here we go.
20:48So first of all, we could see that this is definitely
20:51not the this we want it to be.
20:53The this is actually the window that we're in.
20:55And if we're in the window itself,
20:57we can't really access and approach our object.
21:00So that's it for this lecture because we're stuck.
21:03In the next lecture, we're going to learn something new
21:05and that something new will be how do we refer back
21:08to the object when we call set interval?
21:10How do we figure out a way to pass or another parameter
21:13or to make sure that that object keeps its scope?
21:16And by the way, that's exactly what it's called.
21:18It's called scope.
21:19Because if I would call without the set interval
21:22and I would just call my object by calling O update
21:25and I would just call it, notice what would be outputted.
21:30The object itself would be outputted.
21:32But because we're calling the set interval,
21:35it's actually calling our method,
21:37but it's treating it as if it's a function
21:39and not a method.
21:40So we have to figure out a way how to solve that problem.
21:43And it's exactly what we're going to do
21:44in the next lecture where we'll solve that problem
21:46and get our life clock to start working.
21:49So see you in the next lecture
21:51where we solve this horrible problem that we are stuck in.
21:54And if you want to try to figure it out on your own,
21:56start doing a Google search, ask questions in the form,
22:00try to solve it even before you move on
22:01to the next lecture.
22:02And if you succeed on doing that,
22:04you should tap yourself in the shoulder
22:06because that means you're really getting what's going on,
22:08which would be amazing.
22:09But you definitely would have to do some research
22:11to figure it out.
22:12But we'll see you in the next lecture
22:13where we'll continue and solve this problem.