Instructor: Let's now finally render the recipe
in the user interface.
And so that starts by creating a new Views file here.
So RecipeView.js
and then also right away import it here.
Okay, now simply duplicating this line here
and replacing Search with Recipe.
Okay, so again, we're going to import everything
into Recipe and then use these different functions
as like methods on this recipeView object.
Okay, so the most important function that we want
in recipeView here is to, of course, render the recipe.
So export and render recipe.
Where we put in, and I forgot of course the equal sign.
So we put in the recipe.
And then we render the markup that we want to create here.
So, just like before, we create a variable called markup.
And give ourselves a nice template string.
This here should be markup.
And now let's actually get our H.T.M.L. code here.
So we have an element called recipe already in our dumb.
And what we're gonna insert in here is basically all
of this H.T.M.L. code here.
So all of this.
So let's grab it.
And that was too much.
So that is our H.T.M.L.
So let's get ahead and paste it here.
Whoa, what's going on here?
That doesn't look correct at all.
Okay, so that is a lot of code and it looks quite confusing.
So let's figure out what exactly we have to replace here.
So first off, we have the image here.
And so that's the first thing
that we're gonna wanna replace.
And so remember, we paste in recipe and the recipe is,
obviously, the recipe object.
And so in there we have the property called I.M.G.
And so that's where the U.R.L. alt image is stored.
So image then as an alt text, let's just use the title.
So recipe.title, okay.
And now I'm actually gonna go and copy this one here
because it's really always the same.
Then in here we also have the title, okay.
Then down here, let's create some space here.
We have the recipe details.
So we start with the time and so in here
we want the recipe time.
So instead of 45, it's the custom time.
Then here it is the servings.
So four servings and now it is recipe.servings.
Let's take a look if that's correct.
So we have time and servings.
Right.
Down here we don't really have anything important for now.
And then next up, we have the ingredients.
And it's this huge list of stuff.
And for now, let's get rid of this.
Not all of it, but at least of them but one.
Okay, and so I'm going to come back
to the ingredients a bit later here.
For now, I just want to finish with the directions.
Where we have the publisher here.
So the Pioneer Woman turns into recipe.author
and then finally down here we have the U.R.L.
That's where the directions of this recipe actually are.
So our A.P.I. doesn't return us to directions
of how to cook the recipe.
It just gives us the link where the user
can go ahead and find it.
Okay, so that is the markup here now,
except the ingredients.
And before we move on, let's actually render it here
with insert adjacent H.T.M.L.
And so let's go ahead to our, where is it?
Yeah, our base file, and create a field here
for recipe and then go ahead and select that element.
So document.querySelector.
And remember that is actually called
recipe also in the dumb.
So give it a save, close it,
and so we actually didn't import it yet.
Okay so that's simply copy it from this one here.
So that we can now use it in here.
So, elements.recipe.insertAdjacentHTML
And this one we want right at the beginning.
So after begin and of course, markup.
Alright, and now, about our ingredients here.
So of course we don't know beforehand
how many ingredients there are going to be.
And so we have to do it here obviously with a loop.
Okay, so what we're going to do here is to basically
take our ingredients and then loop over them.
And so remember that inside a template string,
we cannot only just put it in the variables,
but we can do all kinds of stuff.
So recipe.ingredients.map and so this will loop over them
and create a new array that we can then use.
And so in there we then have access
to each of the elements obviously.
And so what we're going to do for each of the elements
is to actually call a new function
that I'm going to create in a second.
Which is renderIngredient.
Or actually, let's call it createIngredient.
Because it will not really render anything to the screen
so we will not create real dumb elements here.
Okay, so createIngredient, let's put it up here.
It does need to be exported.
And so this is just what I put into the function.
Ingredient, now it's correct.
And actually, we don't even need this
because such as before, we're actually just going to
return a string from this one.
Okay, so where is the code for this?
And here we go.
Whoa, what's happened here?
Let's go ahead and put this right.
And alright, now all we have to do
is replace this stuff here.
So first off we have the count
which is ingredient.count, remember?
Then we have the unit which here is gram.
And then finally here is the ingredient itself.
And right now, I'm actually remembering something
which is that in recipe there's still something
that we have to do.
Okay, but let's leave that one for later.
I hope I don't forget that I have to change something there.
So this here will return this string to us
that will then be put in to this new array.
But we don't want an array here, right?
We just want a string.
Okay, so the result of this here.
We will simply join it.
So join it and that's it, okay.
So again, this here returns an array
in which each of the elements is the markup
for one of the ingredients.
Okay, but we don't want an array, of course,
inside our H.T.M.L.
We just want regular text.
We can simply join all of the elements together
as a huge string containing the markup
for all of these ingredients.
And of course, once again, we could of done this all inside
of this callback function here instead
of separating it into a new function.
But I think it's much cleaner having it like this.
And with that done, that's actually tested out.
So we have a search controller.
We had the recipe controller.
And now instead of logging it into the console,
we want to render it, obviously.
So first off, we clear the loader.
So just like before,
and actually we don't have any loader yet.
So we first have to put it there in a second.
But let's just start by putting the recipeView.renderRecipe.
And now we of course have to pass in the recipe.
And so where is the recipe?
Well it is at state.recipe obviously.
Okay, so this clears the loader,
but we still have to render the loader.
And we do that right at the beginning here
at Prepare U.I. for the changes.
Right, so, we need to render the loader
and now we need to pass in the parent.
Remember, so you always need to pass in the parent
so that the loader knows where
to actually display itself basically, okay.
And so this one here is now at elements.recipe.
Remember, so the element that we just created before.
So we rendered the loader, then we create the recipe,
get the data, calculate all this stuff,
then finally clear the loader once the data is back
and then render it.
And so, let's test it out now.
And you see that it's already doing some stuff here.
And that's because this one here is still active.
And whoa, indeed, here it is.
So, we have our Homemade Pizza here.
So, the time, the servings, all of the ingredients.
It's all there.
And also here the author.
Let's test it out here.
Write pizza.
Let's try it with this one here, for example.
Ahh, and now I see something.
We have to clear this old recipe
before we can load a new one, okay.
So let's wait for this one.
And then take care of that clearing.
So next up we need to clear this up, okay.
So recipeView and then simply export.
So elements.recipe.insertHTML
Set to nothing, okay.
And so now each time that we want to load a new recipe,
we first need to clear it.
So recipeView.clearRecipe
Okay, so we clear the recipe then we render the loader
and then all the rest happens.
So let's search for pizza again.
And now we have these two spinning here,
but that's no problem at all.
And so we have our Best Pizza Dough Ever.
Let's take a look at this one here, for example.
But I can already see that everything's working just fine.
Alright, well, this looks delicious.
Okay, so this is already working just fine.
Now remember that I said that I needed
to change something here in the recipe model?
That's because here we have some of the units,
but there can be other units like grams or kilograms.
So in that case, we cannot really recognize it as units
because, well in here for example,
where we find the index for the unit,
we test if it's included in the unitShort.
And unitShort does not include like grams or kilograms.
And so let's add these to this array
and what I'm gonna do is to actually create
a new array simply called units.
And now I'm using E.S.6.D. structuring.
So remember I can use these three dots
to de-structure unitShort and what this will do
is that basically it will separate it
into its own components.
So basically what this means is
that instead of having an array inside of an array,
we will have all of these elements.
So it will take this elements out and put them here.
Okay, and then we can add like kilogram or just gram.
Now all we have to do is change it from unitShort
just to units, okay.
And so now we can recognize
kilograms and grams here as well.
Alright, now it already loaded
because of the save that we did.
So whenever we save something, then it reloads,
and it already has the hash here
and then it just loads the last recipe.
Which is actually perfect, so that's exactly what we want.
Now let's just look at this example here, for example.
And you will see in the ingredients,
let's wait for it.
So you will see like this 4.5, 1.75, 0.25
and that's well, that's not really ideal.
So we want it back to like 1/4 or 4 and a 1/2
like we had it initially, okay.
And so we have to implement a function for doing that.
So take a small break,
and see you in a second in the next video
where we're gonna do exactly that.