clickable links to a new page with html
I’m not too familiar with HTML, but I’m trying to create a clickable link for each recipe option that will take the user to the actual recipe. I have this screenshot below.
Image of the options the user will see
From that screenshot, I want the users to be able to click on the image or the title (name) which will then redirect them to another page that will have its recipe instructions.
I am using express for this web application.
app.get('/recipes', (req, res) => { if (!req.query.search) { res.send("Must provide a recipe name!") } else { getRecipeListByName(req.query.search, (error, recipeOptionsArr) => { res.send(recipeOptionsArr) }) } }) The recipeOptionsArr is an array of objects:
recipeOptionsArr : [ { title, // title is the name of the recipe (it is shown in the screenshot) id, // id of the recipe... used for searching (won't need right now) image // the image that is (it is shown in the screenshot) }, {},{}... more objects with the same kind of data ] This is the html code I wrote. I don’t think you’ll need the entire code, but I figured I’d add it to be thorough. I boxed in the important code
<!DOCTYPE html> <html> <head> <title>Recipes</title> </head> <body> <p>Use this to find recipes!</p> <form> <input placeholder="Recipe"> <button>Search</button> </form> <!-----------------------This creates the list of options---------------------------> <div id="recipes"> <!--This is empty, but will get the data from the recipes-template--> </div> <script id="recipes-template" type="text/html"> <ul> {{#data}} <li>{{title}}: </li> <img src={{image}}> {{/data}} </ul> </script> <!-----------------------This creates the list of options---------------------------> <script src="https://cdnjs.cloudflare.com/ajax/libs/mustache.js/3.0.1/mustache.min.js"></script> <script src="js/app.js"></script> </body> </html> Finally, this is the code that is scripted to the html file:
const recipeForm = document.querySelector("form") const search = document.querySelector("input") const $recipes = document.querySelector("#recipes") const recipesTemplate = document.querySelector("#recipes-template").innerHTML recipeForm.addEventListener("submit", (event) => { event.preventDefault() const recipeName = search.value fetch(`/recipes?search=${recipeName}`).then((response) => { response.json().then((data) => { console.log(data) console.log(data[0].title) const html = Mustache.render(recipesTemplate, { data }) $recipes.innerHTML = html }) }).catch((error) => { console.log("Sorry could not find recipe" + error) }) }) I’m not really sure what I should do next. In that first code snippet, it sends the list of options. I want to then allow the users to click the option they desire. Let’s suppose they click the second option (index 1), I will then take that objects id, and call a search function for the recipe instructions I have already created. Where would I insert that function and how? Also, how would I allow each option to have a link to the recipes?
I was initially thinking to put that function inside the getRecipeListByName function, but I’m not so sure because when I call my function getRecipeInstructions(id), it’s going to have to send a response, (res.send(some instructions variable)). The problem is that I can’t do that because the function already sent a response. I could be completely wrong, but that’s what I’ve been thinking.
To summarize my question: how can I link each recipe option to the actual recipe and how do I send the recipe instructions to the webpage when I already used a res.send()?
I hope this all isn’t too confusing. I really appreciate all the help. Thank you so much.
