-: All right.
Now before we do anything else in this section,
let's take a look at the project that we're gonna build,
to get you really excited, okay?
And so here it is.
This is the project that we're gonna build
throughout this section.
And it's a small app called Forkify.
And it is a very simple recipe searching app.
So in here it says, search over one million recipes.
And these recipes, they actually come from a real API
that I selected for this project.
And so, of course, we're gonna do all that cool stuff,
like the asynchronus, JavaScript, and Ajax, and API's,
all of that that we talked in the last section.
So to try it, let's search for something like pizza,
because everyone loves pizza, right?
And so now it's fetching these data here
from a real world API, again, as I mentioned.
And so we have then 30 search results.
And we have this pagination here.
So we hit page two, one, three,
and then we can scroll through these different results.
And of course, we can select one of these recipes,
and again, it then loads it from the external API.
And as soon as it loads the recipe,
it stops that spinner, and then displays the recipe, okay?
So we have an image, then we have here the ingredients,
and we can also adjust the number of servings.
So we can hit these buttons,
and you see that the amount of ingredients
then automatically adjusts.
So we can move up and down,
and let's say we want this one to be for six people.
We can then also add these ingredients to a shopping list,
like this, which then appears here on the right side.
So, cool, right?
We can then also adjust these numbers here, like this,
or we can, of course, delete some ingredients,
if we already have them at home, right?
What's more?
Well down here is a button where we can then click,
which takes us to the website,
where the instructions for the recipe actually are, okay?
And then, finally, another cool feature
is that we can save these recipes in our favorites.
So we hit this like button here,
and then you'll see, up here, we now have this list
of our liked recipes.
So let's now try another one.
Let's open this one here, let's say.
And we can now also add these to the list, for example.
And you see that
then we have the three down here now as well.
And we can, of course, also like it.
And so now you see that we have two here.
And let's try with another one.
Let's add this one as well.
And so now we have these three here in the list.
And the coolest part is that this actually works
even after reloading the page,
or let's say that we open this again.
So let's copy the url,
open it to a new tab, close the old one,
and you see that the likes, they are still here.
And so this is by using something called local storage,
which is a cool JavaScript API
that we're gonna learn a bit later.
And so, yeah, I think that's the main parts,
the main features of this app.
And I really hope that you love it,
because, once again, I tried to make it a
real beautiful and real world app,
so that you're really proud after coding this app,
after all these lectures.
So, that is the app,
and I already opened the starter code
that I hope that you downloaded already.
So I opted here in VS code,
by hitting here this open command, okay?
And so we simply have two folders in this starter file.
It's the source folder and the distribution folder.
And in the source folder is where, of course,
the source code will go,
so our JavaScript code, and the index dot html file.
So, our markup here.
And then, in the distribution folder here,
is where the final files go,
ready to be deployed and ready to be served to the client.
So, of course, we're gonna go a bit deeper
into all of this a bit later,
but for now, just know that the final CSS files here,
as well as the image,
and our compiled JavaScript file will also be here.
But again, a bit more on that later.
You can also see the CSS file here.
And if you're interested in the styling of the app,
then, of course, you can dive deep into this file
and see all the CSS code that I wrote just for this app.
And you see that I actually used some
pretty advanced and modern CSS techniques,
like CSS grips here, and a lot of flexbox as well.
So this is a really a cutting-edge CSS as well.
So if you're interested in that,
then please take a look.
It's for free (laughs), also included in this project, okay?
And so that's it for this video.
Next up, we're gonna talk a bit about modern JavaScript,
and the development setup that we're gonna use
to build this beautiful and real world app.