hi everyone in this code cast. We're going to be working on making these titles under each dish into anchor tags so that they are clickable. And the end goal is basically to make it possible for the user to click on the title and then be able to go to a page where they can read the recipe all the instructions for a particular dish. So for example they could click on cake mix doughnuts and then a new tab in the browser will open which has the complete recipe for cake mix doughnuts. Okay so we're still working in our script dot Js file and this is what it looks like right now. And if you remember that we fetch the data right? And the data that we fetched is an array of objects and each object has an ideal property, image property and a titled property. So we'll be using the I. D. Property of each food object. So that's the one that we need for the next function which will basically allow a person to open up the recipe in a new browser tab. So until now were just using the H three heading to show the title. But let's actually make this into a clickable link in this build on function. So I'm going to comment this out and then say well David dot inner html. So addition assignment. And then I'm going to type this out and I'll explain what's going on. So still using H three heading except this time. Well we need an anchor tag and the anchor tags. H ref attribute is equal to javascript void. So I'll explain this as well. But basically we're preventing the default behavior of the anchor tag. So we're making it at this point unclip kable. And after that what we need to do here is we need to insert an on click attribute whose value is going to be a function that we haven't coded as yet and it's going to be called. Go to let's just say source U. R. L. And after that let us now also uh pass in the arguments to this function and the argument is going to be well, total data index I. And we need to grab its I. D. Right? So we need the I. D. Um property. And after that since we're making uh this H. Three and anchor tag. So sorry we're nesting an anchor tag inside age three. We still need a title for H. Three. Right? We haven't done that as yet. So let's do that with total data at index I. And then grab the value of the title property. And then I will basically just now close this off and let's close off tag and then let's close off our H. Three tags as well. Okay so let's see what is what are we doing out here now re nesting an anchor tag inside the heading three tag to make it a link and the anchor tag has its age ref property set to javascript avoid false and basically avoid anything returns undefined which is you know a false E value. And then normally we don't need to have an on click attribute in the anchor tag. But since we are preventing the default behavior of the anchor tag, we've put an on click attribute whose value is the function go to source, you are L. And this function takes as an argument the I. D. Property off the object at index I. In the total data array. And then we're making the title of uh you know the food dish a link. So we also need to include the title right? And we do that by getting the title property of the object once again in the total data array at index i since we are iterating through the total data array. Now let's go ahead and try this out and in the browser. So I'm gonna refresh and then basically uh let's try this out. So it seems we might have an issue. So let's open this up, unexpected string, unexpected string at line 53. So let's see what's going on here On line 53 and let's come back. So 50 to 53. Okay, so it's telling us that there is something that we haven't closed here. So let's see what could be going on and it's this line So Mm Hmm. Each three H ref this seems fine. This is looking okay. And then we have the on click go to source your rail and then this part as well seems to be fine. So there is something going on since it is telling us yes, there is something that is not closed, right and we want to make sure that we are closing everything. Okay, so each ref is equal to drive a script to avoid, I'm pretty sure that maybe have closed everything, but let's just try again. No, so it is telling us something is going on here, Right on Line 53. So this is the issue with just putting html. We could have done a document dot create element and then upended the anchor tag to the H three and then basically penned the H three to the deaf. So we could have done it this way, but since we are in the middle of this, let's go ahead and see what is going on here. Okay, this looks fine. Yeah, each ref is equal to okay, we can even just close it like that doesn't matter and then on click is equal to good source, U R L. Okay, so we might be missing something small here. So let's go ahead and try that out and then let me come here and then we're in the console, let's type something, search for something and there you go. So it was a very small issue but we resolved it so not concatenate ng properly but now when you can see that we've made the titles into anchor tags and now when I click on it, it's basically think that go to source U. R. L. Is not defined. And this is because we have not worked on the function, which is go to Source you are L. And basically what it's going to do, it's going to allow us to click on this and then browse the recipe. So let's do that in the next podcast.