In today's lecture, are we going to do this play the day when I say it's going to have the year, the
day, the month and yeah, and also we're going to play around with some areas and some objects.
So one more thing that we're going to do is we going to set the UI values back to zero.
When I said UI values, I mean this obviously when I refresh here, we don't need those things and you
can come this one out.
I don't want that to be initiated in the moment.
We will use function in you.
We will use template literals.
OK, now the question here is where I should put this play date function.
So it's about the UI and the most obvious way to put it inside the app UI controller.
But the thing is that where are we going to call this function from?
And the best way for me is when I open the app.
I just want this today to be replaced with actual date year and stuff like that.
So maybe not.
Maybe we should put it here.
So I'm going to say, OK, I'm going to use the app UI controller and I'm going to say this play date
and we don't need to pass any parameters here.
No, this play date function will go as a public function in this UI control.
Right.
So where we have it is after the delete calories, we're going to come out here and we're going to say
this play date month, year and day.
OK, now what we will do, I will say this function, sorry about the capsular function and we are done
pretty much don't forget to put a comma here because we might create another function there.
OK.
So let's test this out, let's councillor's something here as a date started, and it can be anything
just to test it out.
It's working here.
It is.
It is working.
And don't worry about this, too.
Got these two taps here.
I'm just going to explain them.
Right.
I can just easily close this for you, not be able to see it will not be able to see these minutes here.
But I really don't think that it's too much of a concern.
So if you if this is bothering you, I can do as the other the other courses they just shoot up to until
here.
But I just want to show you what I'm doing all the time.
So, yeah, if you have any problems, we know in the comments, let me know wherever you want, shoot
me an email or whatever you think it's reasonable.
Just don't give me a bad review joke.
OK, so the daily started.
This is working.
I'm just going to close that one.
OK, I'm going to create a variable today.
What else.
Year and date.
OK, these variables I can easily grab what's happened.
Date, ok, these variables I can easily grab from date function.
OK, now I'm going to see today it will be equal to the new new date and that comes along today.
And that will give me the entire thing, right?
So Australian Eastern Standard Time, Wednesday, July.
So I'm just planning to do something similar like this part.
But in JavaScript, if you don't use some library, it's a little bit tricky.
You do have to do a little bit of coding.
Otherwise, if you use a library, you can just grab all of those things in less than a minute.
OK, now I'm just going to say you're here so I can grab the year and say today, but I need to access
that today and to get a full year just like that.
OK, let's test start the year.
And don't put anything here, here, so I do have 20, 20.
How cool is this?
You're going to have a different a year, probably because you're not going to watch in 20.
Or if you watch in 20, you're going to have the same year.
OK, no one is the last is the day in the day is going to be today.
Again, I'm going to access that today and get date.
OK, so the most crucial part for us is to get that today.
And let's say they hear so well, it will give us.
OK, it's 15, right?
Nice.
So we do use it here for what else I'm going to do here, I'm just gonna come at this point I don't
need it, but now I'm just going to create a couple of objects here, and I'm going to show you that
we can use an array and we can use what we can use an object for our months in our data base.
So this area I can put it here.
So I suggest you can put it here.
But I'm going to create that area as a private here variable, I mean, as a private object.
So first, I'm going to do the months is object and the days as an area of this.
Right.
So we will need this for for our application to work.
So I'm going to be just a normal object here and inside.
I will have zero, you know.
You know what I have open up here so you can go on Google and say months, 12 months, a year.
So, yeah, I'm just going to steal some of those things, you know, because I'm bothered.
I don't want to write and I don't want to waste your time right now.
January will be like that.
So but it should be site quotes.
No, I'm just going to press enter, you know, for all of them.
And yeah, he should do the same.
So, yeah, that looks nice.
OK, now I'm just going to wrap the quotes around them.
So, yeah, you can feel my clicking on the keyboard.
Good.
So what I do have here left is to put a number in front of them, right?
So that will be one like that.
It will be two for the march.
So don't laugh at me if I just mix up the dates because I'm not good with those months and I know what's
wrong with me.
That's my personal story.
And for some reason I forgot about the months in there or so.
Yeah, I'm not sure how I managed to do that, but I don't keep a track.
So September is number eight.
Yeah, September is no evidence.
We started from zero.
I was thinking I'm born in September.
Should be number nine.
OK, right.
So I'm confused here.
I was confused.
Nice.
So we've created these months here as an object.
You can just achieve that.
Same with a as a as a normal area.
And I'm going to show you that you can do it.
But for the area, we use the brackets like this and we don't pull zero one, two, three or four like
that because the error will we'll put it.
Yeah, we'll put every item here.
It will start from zero position.
Right.
It will put the indexes as they shoot from zero until here until we have.
So here on Sunday, Monday, Tuesday.
So I'm using like three letters.
You can use more if you want.
That's not a problem.
And I've used more before, but it doesn't look right in the application.
It's too big.
So yeah, that's another hint from me Saturday.
OK, so we start from the sun, we finishing in Saturday cuz now let's use them in our data display
date.
Right.
So how are we going to use them.
So here we already have the date that today we already have a couple of things but we need to use now
there's this month's OK, just cause a lot of the month and sorry and can't come on and cancel the dates.
Right.
Or the date should be based there.
Why there should be days, not days.
Right.
So I'm just going to cancel these days.
So I was thinking why it's not giving me that.
No, I don't need this anymore.
It is.
I do have a January start from zero.
Right.
I should start but that you don't need to worry about it.
And also here is sun start from zero.
As I told you, the area will put its own indexes in the length is seven.
Good.
Now what we will do here.
So I know that this is working.
So we're going to use some to grab the Monday so we can say month name.
We can see the name.
So I'll create this area to grab their names.
Right.
So let's put it here.
Let's test it out.
The logic we're going to work, someone name it will be equal two months.
I'm just going to access this object and I will say today that get month.
Right, because the Getman will return us.
No.
And I need to count our luck.
All right.
Last month name.
It's undefined and why is this OK, because I need here a curly brackets like this, it's a method ID
and we need to call it so July.
Yes, it's July.
OK, why this is working?
Because look at this now, if it comes along the today that get month, it will give me a six in.
If it just uncommon.
That's uncommon this until we are finished.
So on the sixth position, what I do have is actually July.
Right.
That is why I started from zero.
Very good.
No one else here.
We are going to create the day name and we need to grab this day name and we can access what the area
and it will be today that get day.
Another function that we can use from date.
So cool.
Let's let OK, not I'm not going to do this.
I'm going to copy these two lines here, but that will be for the day, the name.
And here I will say I will today get paid just in order to see how it's going to work.
OK, so today's Wednesday and it's giving me Wednesday because these get the method is returning number
three and number three is actually Wednesday.
Now, you know why I put it.
I started from zero one, two, three, four, five, six and stuff like that.
Right now, you know that you can grab any money that you want any day that you want like this.
OK, this is working.
I don't need this.
You don't need this.
Now, what I'm going to show you is how we can format a string.
Right.
And plus, you can write a comments here, how you can format a string.
So that's why we going to use this template literals template strings.
I've never shown you this before.
They were called template strings in prior editions, year 2015 specification template letters are string
literals, allowing embedded expression.
You can use multiline strings.
Now, this is good because I've haven't shown you this, so I'm just gonna print out this.
If we want to have this output in two lines, we will have to use this backslash end and that will create
that new line for us right here.
Extreme text line one, strict text line two.
If I remove this, look what will happen.
It will not even give.
Yeah, it will be in one line.
So that again means starting the new line, go to the new line.
But this is how I'm still doing it.
But there is a better way that you can do it so you can use template literals.
So this is the sign like here.
So they call this one way template.
Letters are enclosed in a back stick right in the back in my keyboard is under the escape button.
Some somewhere in past I was thinking that there was Tilde or whatever name to use, but that's backtalk.
Now you can get exact same like this without that again.
And look at it with back.
I'm going to say with the back deck.
Nice.
Here it is with back.
We are just getting everything.
But we need to use this one and I'm going to show it to you why I'm doing this, because you can say
you can use an expression interpellation in order to embed an expression with normal string.
You will use the following syntax.
Right now, I'm going to use something like this when I have the variables like here, don't worry about
this.
Let I can use fifteen dollar sign in these brackets.
I'm going to you can put this through here and not stuff.
And that is history.
So we our format, the, the screen using this way because I have a lot of variables in my, my coat
now.
So I'm going to remove this.
This was just to show you this was just to give you an example.
I'm going to say let's put this here for a minute format text.
And I'm just going to copy it and I'm going to put it here and I'm going to say, OK, now you need
to use F and yes, in order to to be able to.
Yeah, I'm using windows.
Right.
So if you're using Mac, just find a way how you can just insert this.
And now before any before any variable, I do have this dollar sign that this clearly brekke basis.
So I'm going to say deigning here now I'm going to get a comma so we can easily achieve this with normal
strings.
But I want to show you something, something different.
So date here, then I'm going to give you the space then.
A month month name.
My name like that and what else we need here?
I think the year end should be enough year.
So that is about the format index you can control along the four minute text and see what's going on.
It is it's going to be like this Wednesday, 15 July 2020.
If you're from USA, just swap some of things around right now.
The goal is to put it here, but how we can get it here, we need to get this main panel date tax.
Right.
Where are we going to put this one in our name, Placidyl.
So sorry, HTML.
And it's going to be easier if I find them like this here.
I'm just going to put it here and what I'm going to say, Front Ebbitt and I'm going to say that the
main text.
Cool.
So I've just pasted that one there.
Right.
I'm just going to close it and I'm going to go to display play date.
Very good.
No, so I don't need this formatted text.
And what I need to use is document selector and to get HTML class names up front up date.
And I'm going to say inor Schimel inside a span, I will create a span here.
Loops, span.
That's why I use this HDMI.
Otherwise you can put as a text and I don't see.
Plus, for Romney to escape it here again here and I will see four minute text that should give me this
here every is I save it and it's immediately dear, right.
Why is immediately there?
Because we put it where in the init function in the initialize function.
Now in this initialize function we can create, we can get the rest of it.
So I don't want this to be 92 percent.
I want this to be only two thousand three hundred and this to be a zero.
But how we can do that.
OK, so what was the name of the function that we use?
So here it is displayed front an app calories and we set your calorie.
Right.
So if you go control and if you look it up, you will have all the day's calories is never used.
Hmm.
OK, I'm going to go back that to some stage later, maybe we haven't used that one again.
That doesn't matter.
No, this requires an object in here.
We set everything that we have right now.
I can use the same thing.
I can just copy this one.
Just copy that one or.
No, I'm not going to copy that one.
I'm just going to copy the other one and you will see what we will do right here.
This we need this and we need exactly the same call from this that you are controller.
We need to call it here, OK, maybe we can call it even up here.
No, Apu, I controller this an calories in here.
We passing the calories, but we don't have access to these calories matter.
So what we object are what we can do is we can actually create an object or we can pass directly an
object here.
So I'm going to show you the ways.
So I'm going to say empty calories and that will be an object in here.
I'm going to say, OK, I need to go back and get all of those things.
I need these things.
OK, so I copy those things where I am here.
So today's calories, I'm going to set this to zero, right.
To total burn.
I'm going to set to zero in here.
Should not be like that.
Should be because we are inside the object.
We're not.
OK, so if we don't need some of them, I'm going to do it and should be coming here, right?
It's not going to work otherwise no total burn is going to be zero because we starting it, but remaining
it will be two thousand three hundred comma in here.
The percentage again will be zero.
So instead of passing the calories here, I can pass this empty object.
So if I save it now and expect a token three seventy one.
Yeah, that it's so here it is, zero zero zero two thousand three hundred, if you don't think this
is working, let's change it.
That's why I told you at the beginning that you can adjust this as your needs, as your body mass is
your body mass index to know everything you set, everything is working.
So the other way that you can do it, I'm just going to show you.
I'm just going to come and this guy here.
Oops, before I'm going to copy it and I'm going to put it down here, he can put it straight into it,
straight into here.
I'm going to cut it and I'm going to put it straight into here.
You can put the straight there, the entire object.
You can put it just like that.
Save it and it will work.
Right.
So, yeah, let's change this one to back to two thousand three hundred.
So it's working.
You can put whatever object you want straight into the function, but I do prefer to be.
So I'm just going to comment up and I do prefer to be like that.
So yeah, you should work for you guys both ways.
Now we are done with this lecture.
I hope you understand what we have done.
We grab the day, we get we grab the day's name, the money these days here, the year end.
Plus we used what we used.
We used months as an object.
Right.
We test it out here, all of this.
So probably in future I'm going to delete them because it's messing up my coat.
Let's make them let's make them to look more on the right side.
Here it is.
So in a private here, I'm sitting months.
Pamoja, and this will be these objects.
All right.
It will be hairy.
OK, so I have two areas and I used to display them into our front.
You are right and this display is actually public function in the UI API controller.
Okay, so I have days we grabbing equal to new date year, end date as well.
Then the money we use that object that we created for the month, for the days, then we use that one
and use a couple of methods here.
You should all know about these matters.
As I told you, if you use some other libraries, this will be extremely easy.
Now, here we used template literals.
Yeah, it's hard for me even to pronounce it, but now you know how to use it.
If you see somewhere in some other coding, for example, we've worked in a company where if you start
browsing through some, I don't know, threw some things on Internet, you will find this this way of
writing down the strings that now you know what they mean.
Right.
So thank you very much.
I hope you enjoyed this one.
And I will see you in the next one.