Reputation: 1
I am in the middle of developing a recipe generator application using stack languages. My following code is able to bring up recipe links, however, once I click on any of the links, they bring up this error, "Cannot GET /Dish%20Diver/undefined".
Below is my HTML code:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=DM+Sans:ital,opsz,wght@0,9..40,100;0,9..40,200;0,9..40,300;0,9..40,400;0,9..40,500;0,9..40,600;0,9..40,700;0,9..40,800;0,9..40,900;0,9..40,1000;1,9..40,100;1,9..40,200;1,9..40,300;1,9..40,400;1,9..40,500;1,9..40,600;1,9..40,700;1,9..40,800;1,9..40,900;1,9..40,1000&family=Montserrat:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&family=Roboto:ital,wght@0,100;0,300;0,400;0,500;0,700;0,900;1,100;1,300;1,400;1,500;1,700;1,900&display=swap" rel="stylesheet">
<link rel = "icon" href =
"images/SVG/Artboard 1Dish Diver Logo.svg"
type = "image/x-icon">
<link rel="stylesheet" href="style.css" type="text/css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="index.js"></script>
<title>Dish Diver</title>
</head>
<body>
<div class="content">
<h1 class="title">Dish Diver</h1>
<label for="ingredients" class="header">Enter Ingredients:</label>
<input type="text" id="search" class="ing-input" placeholder="Tomatoes, rice, chicken breast, cyan pepper...">
<button class="search-btn" onclick="getrecipe(document.getElementById('search').value)">Search</button>
<hr>
<p class="output">Recipes:</p>
<div class="recipe-output" id="output">
<a href="" class="recipe-link" id="sourceLink"></a>
</div>
</div>
<div class="sub-btns">
<ul>
<li><a href="" class="favs">Favourites</a></li>
<li><a href="about.html" class="about">About</a></li>
<li><a href="" class="logout">Logout</a></li>
</ul>
</div>
</body>
</html>
And here is the JavaScript file:
// Incorporating the Spoonacular API to the application
const apiKey = 'xxxx'; // Actual api key is hidden
function getrecipe(ingredients) {
const apiUrl = `https://api.spoonacular.com/recipes/findByIngredients?apiKey=${apiKey}&ingredients=${ingredients}`;
$.get(apiUrl, function (data) {
console.log(data); // Check the API response in the console
displayRecipes(data);
});
}
// Creating a function to handle the API response and display the recipes on the webpage
function displayRecipes(data) {
const outputContainer = document.getElementById('output');
outputContainer.innerHTML = ''; // Clears previous results
data.forEach((recipe) => {
const recipeLink = document.createElement('a'); // Create a new anchor element
recipeLink.href = recipe.sourceUrl;
recipeLink.textContent = recipe.title;
recipeLink.className = 'recipe-link';
outputContainer.appendChild(recipeLink);
});
// Calculate the height based on the number of links and set it dynamically
const linkCount = data.length;
const minHeight = 50; // Set a minimum height
const calculatedHeight = linkCount * 20 + minHeight; // Adjust this value as needed
outputContainer.style.height = `${calculatedHeight}px`;
}
I thought the problem could lie in the way I have the link formatting set up, but after trying to debug on my own, I still couldn't get the links to work. Currently, the recipe links generate just fine, but the links themselves dont go to the recipe source webpage like it's supposed to.
Upvotes: 0
Views: 142