const BASE_URL = "https://api.spoonacular.com/recipes/findByIngredients?apiKey=";
const APIKey = "df4bde21377f4806bb87e7db7557fcde";


//Look over this URL and see the format for the ingredients at the end. 
//You have to create a URL like this once you have taken the user's ingredients
//Open up the console log so you can see the string of ingredients when a user enters them
//https://api.spoonacular.com/recipes/findByIngredients?apiKey=df4bde21377f4806bb87e7db7557fcde&ingredients=apples,+flour,+sugar

//original code. Function was closing early;
// function fetchRecipes() {
//   let url = BASE_URL + APIKey + "&ingredients=" + ingredients;
// } this closed out the above function. I moved it down below.


function fetchRecipes() { 
  console.log("test");
  let ingredients = $(".form-control").val();
  console.log(ingredients);
  
  const API_URL = BASE_URL + APIKey + ingredients;

console.log(API_URL);
  
  let request = new XMLHttpRequest();
  
  console.log("test");
request.open("GET", API_URL, true);

request.onload = function () {
  if (request.status >= 200 && request.status < 400) {
    let data = JSON.parse(this.response);

    //displayRecipes(data);
  } else {
    console.error("Error fetching data:", request.status, request.statusText);
  }
};
  
  //Make sure to always send out the request 
  //otherwise your API won't return anything.
  request.send();
}