Danjer
Danjer

Reputation: 1

Recipe link outputs are giving a 404 error (Spoonacular API)

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

Answers (0)

Related Questions