So in this video
we're gonna implement classes to manage the data about
our cycling and running workouts that are coming
from the user interface.
And so here we have this diagram again containing
the classes that we need to implement.
So we already discussed this before
and so let's use this as a base
for working on the classes now
but let's also at the same time,
take a look again at
our form to make this a little bit less abstract.
Okay. So what both the workouts have in common
so both running and cycling,
they have a distance and a duration.
Both of them also have a type of course
but that we will not have to encode anywhere because
for that we are already creating two different classes.
Then for running we have the cadence and for cycling
we have the elevation gain as you already know.
And then what's also gonna be coming to both workout types
is of course the coordinates that are basically coming
from the click on the map.
And so let's now start by implementing the parent class
for both these workout types.
And so remember that is simply gonna be called workout.
So workout.
And so again this one will take in the data
that is common to both the workouts.
And so that is the coordinates
lets just call it Coordes, the distance
and the duration.
Okay.
And then just as we learned previously,
we say this dot coordes
is equal the coordes that we get as an input.
This dot distance equals distance
and then the same for the duration.
Now we could also make these private fields
so basically private properties
but I think in this example we are good like this.
We just need to keep in mind later for the speed
and pace calculations that this one should be in kilometers
and this one should be in minutes.
Now what we also want for each workout object is a date.
So that's gonna be the date where the object is created.
So a date and let's simply set it to new date.
And so we need this one here
to then implement what we have here.
So this description of August 20, so here
so basically the date in which the workout happened.
Alright.
And then besides that we also need an ID.
And so that should be a unique identifier.
So remember way back in the bankers project
where we also had an array of objects.
And so here we will do the same eventually in our app class.
Remember now having that array of objects sometimes
we need to find an object in that array.
And so back then in the bankers project
we used defined or defined index methods for that.
Remember however these methods only work if there
is something by which we can search.
So as some kind of unique identifier
and in the bankers project there used to be simply the name
of the account owner but that's just not a good practice.
So instead any object should have some kind
of unique identifier
so that we can then later identify it using that ID.
So let's create a field for ID here as well
and always keep in mind that what we're doing here
so here and actually also here is using
a very modern specification of JavaScript
which is not even yet part
of the official JavaScript language.
Remember how I talked about that in the last section.
And so if we want to make sure that this is gonna work
at least with ES6 then we would have to do,
this dot date and then define that here
and the same here this dot ID
and then define that here as well. Right?
However, here I'm simply using cutting edge JavaScript
and so something that's probably gonna become part
of JavaScript pretty soon.
And so I think that it's perfectly fine to use
these class fields here already.
but now back to the ID and in the real world,
we usually always use some kind of library
in order to create good and unique ID numbers.
So usually we should never create IDs on our own
but always let some library take care of that because
this is a very important part of any application.
However right now I'm not gonna include
any library like that
and I will simply use the current date to create a new ID
so a new date, and then I will convert that
to a string and then simply take the last 10 numbers.
And so that should then be unique enough.All right.
So converting to a string
and then I can say slice then the last 10 numbers basically.
So this is the workout class
but we will never directly create a workout.
Instead we will always either create a running
or a cycling object.
So these are the child classes.
And so let's create them here.
Running extends workout
and also cycling,
so class cycling extends workout as well.
Okay. Then here we also need a constructor
and remember that this one should take
in the same data as the parent class
and then plus the additional properties
that we want to set on a running object.
So coordinates distance duration
and then remember the cadence,
right?
So that is what's unique.
Well let's do that here actually.
So that is the part that is unique about running.
Then here we need to call the superclass with these three
okay. So the common ones that are coming to the parent class
and this will then initialize the disc keyword
and then here we can say
this dot cadence
is the incoming cadence.
And then let simply copy this also for cycling
and here what changes is the elevation gain.
So let's check out our diagram here.
And so we already have these five.
so we have ID and date actually as fields
and then distance duration and coordinates
we define them in the constructor method.
Then for the running and cycling
we already defined the cadence and the elevation gain.
Now what's missing here is for running the pace
and then for cycling the speed.
And so let's actually calculate both of them
in each of the class.
So in this one here let's create a method
for calculating the pace.
So calcpace and no longer calcH for a change.
And so the pace is usually defined in minutes per kilometer.
And again that's unless you are in the US
which probably uses miles per kilometer.
So of course you can also use your distance here in miles.
But anyway all we need to do is to now create this dot pace.
So adding this in your property basically
and then all we need do is this dot duration
which is the minutes and then divided by kilometers
and so that is the distance.
So this dot distance then that's actually it.
All right.
Now it might also be a good idea to return this data
in case someplace in our code we actually need this
but what we will do instead of relying on this return
is to simply call this method right here in the constructor.
And so remember how I said in the last section
that it's perfectly fine to call any code in a constructor
and so of course we can simply do this right here.
And in fact we did the same here in our app class
so here we also did a lot of different stuff
in the constructor
and we didn't even set any properties here right?
So we used the constructor here
to immediately calculate the pace
and so next up let's do the same here for the speed.
So the speed is measured in kilometers per hour.
And so this dot speed
so not calcspeed but speed
will be equal this distance
and then divided by the duration.
So the speed is basically the opposite of the pace.
So this one is duration by distance
and this one is distance by duration.
However this duration is not in minutes but in hours, right?
And so therefore we need to now first divide
this one here by 60,
and then we can also return this dot speed
even though right now that's not yet necessary,
because we are simply calling it right here
and we don't need to return value at this point. Okay.
Now let's just add a comment here.
So this one has 40 architecture
and then I'm adding like a small divider here. Alright.
And then let's actually test out these classes.
So let's create a run here
so that's new running
and let's see what this class needs.
So we need coordinates
and so that's gonna be an array of coordinates
and that's just specified as here.
So basically kind of as documentation
so an array of latitude and longitude
and so if we have some other developers they will
then know exactly what this coordinates should look like.
And there are other more fancy ways
of writing documentation,
but maybe we will explore that a bit later in the course.
But anyway let's pass in some array here
of latitude 39 and longitude minus 12
and this should then be somewhere in Portugal.
Then next we have the distance
and let's say 5.2 kilometers and 24 minutes
and with 178 steps per minute.
And let's actually do the same for cycling as well
so how do we call this?
Is it a cycle one? Maybe it's a cycling like this
so let's use the same coordinates
and then here let's say we did 27 kilometers in 95 minutes
and the elevation gain was 523 meters,
all right?
And now we can lock both through the console really quick.
And so again this one here
is not really part of the application, Okay.
This is just to experiment if our classes
are indeed working as expected.
So going to our application
then you see here that we have our running and our cycling.
So indeed we have all the data that we specified
that includes the date.
Then here the ID looks a little bit off
and the reason for that is that I basically used a new date
which is gonna be an object
and so transforming that object to a string
will then basically become all of this here.
So this string and so we then took these last characters
but let's fix that in a minute.
But anyway here we have to pace calculated as well
and you see that this is of the type running
and then in the prototype we indeed have the calcpace method
that we just defined previously.
And in cycling we should of course have
the calcspeed method.
And here it is. Okay.
And of course this one itself has another prototype
which is then the workout itself.
This one doesn't have any methods yet
but we will add them a little bit later
as we keep moving on in a project.
Lets now fix this ID here very quick
and so instead of using new date
we are gonna use date dot now
which remember simply gives us
the current time stamp of right now.
And so that will now hopefully fix it.
And to see that here we have this ID
and then here we also have the ID
but right now they are actually exactly the same.
And so basically that happened because
they were created at the same time.
But then later in the real world
as we used our application of course
it's gonna be impossible to create two new objects
at the same time.
And so then that's gonna work just fine.
However as I said previously,
when you are really working on the real world
then probably you have many users using
the same application, right?
And then of course some users can create objects
at the same time
and so by then relying
on the time to create ID's is gonna be a really bad idea.
All right.
So let's get rid of these experiments here.
And so for now at least our classes here are complete.
As I said we will keep adding some more stuff to them,
but for now we're fine.
And so with this we are now ready to move on
to the next video where we will then use these classes
to actually create work outs from the form.