in this code cast we'll be working on the bill dom function which we've called up here. Uh It's basically going to build the dom for us. So inside the then promise handler where we have this if conditional statement, what we want to do is we're saying well, if the results that we get back from the data objects, so if the results raise length is greater than zero, then basically we want to assign that to the total data variable and we want to then call the build dom function. Now we're not we have not worked on the building function as yet. We've just called it here. So the build up function will it will iterate through the total data array and assemble the web page with an image and title for each recipe. So come down here and I am going to now declare function build dumb and inside of this function. What we want to do is we want to basically at the beginning of the build on function we want to empty out the results. Dev Right? So we want to say well, result dev dot inner html is equal to empty. Right? So we want to empty it out and then build the dom from scratch. And now we are going to construct a for loop. So we're going to iterate through the total data already. So we're going to see for let i is equal to zero. I is less than total data dot length. Right? So for the length for the length of the total data array and then I Plus plus. Ok. Now we're going to, what we're going to do is we'll create an image element. And let's also create a div element. And I'm going to say out here, well that I m g is equal to document got create element. And for each search result, I'm creating an image element. And I am also going to be creating a diff Right? So, let dev is equal to document dot create element. And what am I creating? Well, I'm creating the death. Right. So, we can't actually just create these outside because we're not only creating one for each search result in the array. Right? So, remember that the total data out here is equal to data dot results. And if you remember that uh data, let's just go back here. Let's recap. And let's see if I can maybe have everything commented out. So maybe we can just mm hmm. Cut and then paste it here. Let me just show you and let me comment this out for now. And let me go back out here. And let's just do this. So, out here, you can see that the results, a property of the data object that we fetched is is an array of objects and the objects each object has I. D. Title and image, image, type properties, Right? So we have to iterate through all of these objects. And for each object we are creating an image and a DEV. And let me just uncommon at this out and then re comment this and save it. Okay, so we've created our image and we've created the DEV now since we are using bootstrap, let's give the devil a bootstrap utility class. And we can do that with dave dot set attribute method. And I'm setting the class attribute whose value is, let's just say column, I think column small. Three or four should do, I'll just use three to be safe. Okay, and let me go down here. Okay. And now what I'm going to do is that we're going to set the inner html off the DEV to be an image element whose source attribute has a value of the property for each object in the array at index I Right. So on our page here, we need to set the source right attributes for each image to have this value. So back here, I'm gonna say well this dot inner html and that's equal to and out here, I'm just gonna do it this way, I'm gonna say well, um let's just do I. M G class. Oops, that was not a tag. So okay, I m G class is equal to And let me say image fluid. So I'm just using a bootstrap class out here, a utility class to make the image responsive. You don't have to if you don't want to. And then I'm going to say source, right? Is equal to and what is the source equal to? Well, the source is equal two out here, we're going to say um what are we going to say? We're going to say plus, uh total data at index i dot the source property. Right? So if you remember each object has an ideal property. Image property, title, property. And I also believe in image type property and this is we're going to be using the image property which specifies the source of the image. So if I were to just click on this link out here, maybe just copy and then you can see that I'm referring to this image. Right? So that's what we're getting. We're getting the value of the image property. And let me come back here and let me just it's going to be image, not source. Right? And then plus and then let's just close this off properly. Right? Um so image class is equal to I M g fluid. This looks fine. And then we have a source of class is equal to um and maybe we're just missing this out here. Plus a total data at I dot image and close that off. Right, okay. Now let's go on to the title of each dish. So we want the image but we also want the title inside the div for each recipe. So we're going to say, well this is just gonna be an H three. We can use anyone. I'm just using H three and it is going to be plus a total data. I now, instead of using these tags, you can use dom methods. So you can create an element and then depend um, you know, the text node to that element and the value of the text node can be this. And then we're going to say uh use the title property. And then let me just close this off like this. Right, okay. So now let's try this out before we do anything else. So control us to save, come back here, refresh and less. See this. Okay. So something is going to reference i is not defined for Oh, for lead. Oh well what we have here is silly mistake and then let's fix that and come back here and always handy to have like this console open. Okay, what is our console telling us now? Hmm. So it does not seem like we have any big mistake here, but we do need to add something. So remember I have this div but we're not seeing anything as yet because we haven't upended the div to the result. Div. And keep in mind that each device that we've created has its own heading and title and we also need to append it. Right? So at each point that we're doing this, we also want to result and maybe um let's just do it here but I have a feeling that we should append it outside of the for loop, but doesn't matter. Let's just at least get this in here and then let's say append child death. Right, Okay. So false false, false false. That is not nice. And control C. And what we're going to do is basically now we're just going to append it and now that everything is a setup so result div dot append a child and everything does look fine to me here. So result div dot inner html. And it does not seem like I have any silly mistakes but let's double check. So I've created my element image. I've created element dev I've set the attribute of this Div which seems fine and dev dot Inner html is equal to an image and this looks fine as well and result dot upenn child if this is fine. I do have a doubt about this line. Maybe it's a silly title. Let me just do this. Right. Let's just get the title first going and cake. Okay, what is going on here? Results title So I am getting the results so it should not be showing me false out here build dom result dot inner html is equal to an empty string. Can I just um alert the total data here. Total data and total basically also use addition assignment because remember we're looping through each object and then let's try this out. It is not defined. Where is a hopes silly mistake. I just changed my keyboard. Mm hmm. Okay object object object that's fine. Just ignore it. It has to be we have to use Jason just rectify anyway, it doesn't matter. And it's gonna basically now go through 10 times. That is annoying. Let me just comment this out and then come back and okay, so I guess I have to keep doing this. Spinach false. Okay, Why is it showing falls out here? It should not be showing falls. So results they've led image. Let div dave dot said attribute dave dot inner html is a total data at I. So what we can do out here is maybe alert. I want to alert total Deborah at I at index I and alert just the title property. Right? And then let's go back here. Okay, so that is fine. And now we're getting the alerts going right, but it's still showing false out here. So that is not a good sign. Right? So let's just change this to this because that's not a good sign. And let me comment out the alert because I don't need that false false showing. Okay. There you go. So now we have spinach and ham keys. We have all of these recipes spinach and potato soup. So that is fine. Now let me also uncommon this out and then go back here and try again and there you go. So finally we have on our web page, the title of each recipe. So we have cake balls, cake with wine and olive and we have the associated image. Right? And now what is bugging me a bit is well, why wouldn't it show with the H three? So, remember we had an H three tag first and let me just try it again because it's it would be nice to have it as a heading. You could actually just, you know, maybe somehow do it in CSS but let's just try this like, so mm hmm. And then plus and close the tag. Right? And uh 95% of mistakes made from Chili Typos. Uh Not so much. It's not a huge headache though. So, let's just try bread and there you go. Okay, So now we have our H3 tag working. Which is what I wanted. So, let's see with cake. Okay, there you go. Let's try something that we haven't done before. Let's say strawberry and Okay, let's try eggs. All right. Let's try maybe piece. I don't know how many exciting recipes there could be with peace, but there you go. So there we have quite a few recipes with peace. And basically that's the end of the build dom function. And if you've noticed that by setting the attribute for the div that we are dynamically generating in the build. Dom We said it we gave it a utility class of columns small tree. It is basically now responsive. Right? So, the web page is responsive. That is a nice thing about using Bootstrap. So it's size scales down in size, Right? So, that's all for this podcast, but in the next code cast, what we want to work on is basically we want to make each of these headings a link so that anyone who then clicks on the link. So when the user clicks on the link, they're redirected to a web page with the recipe ah that they clicked on. So, for example, if they click here, they'll go to the perfect piece recipe where they can do, you know, basically, So look up the recipe. So that's all for this podcast and see you in the next podcast.