My Get Recipe Buttons Aren't Bringing Me To The External Page Where The Recipes Are

I'm building a meal generator and when the meals are pulled down from the API I get a recipe button is under each meal produced. The buttons should be clickable and bring you to an

Solution 1:

Your API returns links with the http protocol; presumably you're using https for your site. A simple fix is to modify to a protocol-neutral URL before embedding it in the page:

const mealList = document.getElementById('mealList')

function getMealList() {
  let searchInputTxt = document.getElementById('search-input').value.trim();
  fetch(`https://spoonacular-recipe-food-nutrition-v1.p.rapidapi.com/recipes/mealplans/generate?timeFrame=day&targetCalories?q=${searchInputTxt}`, {
      "method": "GET",
      "headers": {
        "x-rapidapi-host": "spoonacular-recipe-food-nutrition-v1.p.rapidapi.com",
        "x-rapidapi-key": "81022d9c79mshc06abb7d77ff30fp1e6950jsncae6e5e16400"
      }
    }).then(response => response.json())
    .then(data => {
      let html = "";
      if (data.meals) {
        data.meals.forEach(meal => {
          // remove the http protocol:
          meal.trimmedUrl = meal.sourceUrl.replace(/^http:/, '');
          html += `
                    <div class = "meal-item" data-id = "${meal.id}">
                        <div class = "meal-img">
                            <img src="https://spoonacular.com/recipeImages/${meal.id}-556x370.jpg">
                        </div>
                        <div class = "meal-name">
                            <h3>${meal.title}</h3>
                            <a href = "${meal.trimmedUrl}" class = "recipe-btn">Get Recipe</a>
                        </div>
                    </div>
                `;
        });
        mealList.classList.remove('notFound');
      } else {
        html = "Sorry, we didn't find any meal!";
        mealList.classList.add('notFound');
      }

      mealList.innerHTML = html;
    });
}

<div id="mealList"></div>

<input id="search-input"><button onclick="getMealList()">go</button>