const searchForm = document.querySelector('form');
const searchResultDiv = document.querySelector('.search-result')

const APP_ID = '0a67fbc1';
const APP_KEY = '225d31b59bf211d7ede34e2e885f1f3b';

searchForm.addEventListener('submit', function(event){
  if(document.getElementById('name').value.length === 0){
    alert('한글자 이상 입력해주세요');
    event.preventDefault();
  }
  searchQuery = event.target.querySelector('input').value;
  fetchAPI();
});

async function fetchAPI(){
  const recipeURL = `https://api.edamam.com/search?q=pizza&app_id=${APP_ID}&app_key=${APP_KEY}`;
  const response = await fetch(recipeURL);
  const data = await response.json();
  boxinfo(data.hits);
  console.log(data);
}

function boxinfo(results){
  let boxsinfo ='';
  results.map(result => {
    boxsinfo +=
    `
    <div class="item">
      <img src="${result.recipe.image}" alt="">
      <div class="flex-container">
        <h1 class="title">${result.recipe.label}</h1>
        <a href="${result.recipe.url}" target="_blank">View Recipe</a>
      </div>
      <p class="item-data">Calories: ${result.recipe.calories.toFixed(0)}</p>
    </div>
    `
  })
  searchResultDiv.innerHTML = boxsinfo;
}