Instructor: Welcome to the last video in the section.
So let's wrap up our project with some final stuff
that we need to take care of.
And the first thing is that I spotted a bug
that sometimes happens when we update the servings.
And not in all recipes,
but let's look at one specifically.
Wait, just this one.
Actually, it's already open, okay.
So first we have this weird, huge number here
okay, and so that doesn't look so good.
And if we now increase this here,
then you see that at some point,
it doesn't actually do anything,
but instead it gives us this error here.
And this error has to do with these two long numbers
and with some rounding issues,
and so we will have to go back and fix that.
And so what's responsible for displaying this numbers here
is a function that we coded up a long time ago
which was the format count.
And that is in the recipe view.
Okay, so here we have the format count.
And so sometimes, again, we have numbers like,
well, something like point three three three
and so on and so forth,
and the fraction function here
apparently cannot really deal with that.
And so the solution is to simply round
the number that comes in.
Okay?
So let's simply create a variable here called
the new count.
And then round it to like four decimal places.
Now for some weird reason, the math that rounds
only returns integers, okay?
But there's a work-around for that.
So if you were to pass on just count,
then we would entirely loose the decimal part.
But instead, we can multiply this by 10,000
in this case because we want four decimal places,
and then, divide the result by 10,000 again.
Okay, and so with that, we can still use math round
in order to have the four decimal places that we want.
And if we want five, well then we can simply add
another zero here, and one here.
But that's not really necessary in this case.
Okay, and so now everywhere we used count
we will simply use the new count.
Okay, so let's test it out.
And it looks a bit better already.
So it's still not perfect, but for now,
I am going to leave it like this, okay.
So it, it does work, actually.
But anyway, what matters now is that we no longer
have this error here when we read the number six,
so six servings.
So, the error is gone,
and now everything works just as intended.
So let's move down and yeah,
so everything works now.
Next up, let's clean up a bit our code.
And by that I mean, just the nx-js.
So we have some stuff here
that we don't want in the production version.
So for example, we don't want to leak all of our state data
into the global object,
so let's take out that one.
Let's see if we have some more.
So we have some console outlook here of the ID.
That one we also don't need.
Give it some more space here.
And let's see.
Yeah, so down here we have another thing,
so another variable that we added to the global object
which we don't need at all.
Okay?
So now I think it's a bit better, a bit cleaner code.
Now, next up, let's actually start up our build process.
So this one here,
where we use webpack in a production mod.
Okay?
So let's move to our terminal,
and right now we can actually quit this task.
Okay?
So we no longer want our development version running here
because we're finished with developing, okay?
So if you reload this now,
you will see that the site can't be reached
because of course our connection is lost
because the web development server is no longer working.
Okay?
But anyway, what we want to do now is npm run build.
That will then bundle up all our files.
Create a small radius bundle
and actually write it to disc as well.
So we end up with a bundle size of 125 kilobytes
which is actually not really small,
and an index.html of 17.6, okay?
And there are methods for shrinking this down here,
and it will probably be possible to do this.
But that's a bit too much for this course.
For that you can take like a more in-depth webpack course.
Okay?
So what matters here for us is that
actually the bundle is now written to disc.
And we see that our code is this beautiful
piece of code, alright.
So that's minified, compressed, and yeah.
So that's the result of webpack.
You cannot figure out what the hell all of this is,
but it also doesn't really matter if you're just interested
in making this work, okay?
So, I guess we're finished with this project.
Of course, we could make it a little bit better,
and so let's take a look at a couple of suggestions
of stuff that you could improve here.
So if you want to have some more fun with this project,
then the first thing that you could do
is to implement a button to delete all the items
in our shopping list at the same time.
So right now, we can only delete them one by one,
but you could put a button to basically clear
the entire list all at once.
Then second, you could also implement the functionality
to manually add items to the shopping list.
So having like an input field with a small button
so we can add more stuff to our shopping list
besides the ingredients of the recipes.
And also you could then store this data in local storage
like we did with the likes.
Okay?
So that would make it a bit better again.
Now another small thing that you could change is
the ingredient parsing algorithm, okay.
So that part that I showed you,
like for example in that recipe that we just saw
with this huge number that looks at bit difficult
to understand.
So you could improve that and some other edge cases
that do not really work with the current way
the algorithm is done.
Okay?
So I didn't want to make that video even longer
than it already was,
but you sure can, can improve on it, okay.
The next up, you can come up with an algorithm
for more precisely calculating the amount of servings.
So right now, we simply added four servings
to each of the recipes,
but maybe with some research and analyzing the data
you can try to understand how many servings we have
based on the amount of ingredients.
Okay?
So that can be a fun algorithm to code up, okay?
And finally, you could improve the error handling.
So instead of having these alert windows popping up
when there's an error,
you could like display it somewhere on the user interface.
Okay?
So these are just a couple of suggestions that you have
and I'm sure that you can improve the project
even more than this.
And if you do,
then please make sure to share it on the Q and A
in the course, okay?
So I would be really excited to see that.
And alright, so that's really it.
I hope you had as much fun with this project as I did,
and that you learned a ton of new stuff along the way.
And that it will ultimately make you a bit better
at coding Javascript.
So thanks for making it this far in the course.
And see you next time.