Wanderlust

Using fetch, async, and await, you’ll request information from the Foursquare API and OpenWeather API to create a travel website.

fetch, async 그리고 await 를 이용해서 Foursquare API 와 OpenWeather API 에 정보를 요청하여, 여행 웹 사이트를 작성한다.

Before you begin, you’ll need to register for developer accounts for both of the APIs above. They’re both free.

시작하기 전에, 위의 두 API 모두 개발자 계정을 등록해야한다. 둘 다 무료이다.

For Foursquare, once you make an account, create a new app and fill out the form (you can put any link in the “App or Company URL” field). The Foursquare API will then give you a client ID and a client secret. You’ll need to save both of those in main.js.

Foursquare 의 경우, 계정을 만든 후 새 앱을 만들고 양식을 작성해라. ('앱 또는 회사 URL' 필드에 링크를 넣을 수 있음) 그러면, FourSquare API 는 클라이언트 ID 와 클라이언트 시크릿을 제공한다.

main.js 에 둘 다 저장해야한다.

For OpenWeather, follow the instructions for the I. Registration process: How to start. When prompted, use your first name, and other for the OpenWeather questions for their data collection. OpenWeather will give you an API Key, which you’ll also need to save in main.js.

OpenWeather 의 경우, 1. 등록 프로세스 : 시작 방법에 대한 지시사항을 따른다. 메세지가 표시되면이름과 데이터의 수집에 대한 OpenWeather 질문에 대한 다른 이름을 사용해라.

OpenWeather는 API키를 제공하여, main.js 에 저장한다.

// Foursquare API Info
const clientId = 'RTWK050DET5NBAYZGY31MNL1OXAA1GBUE3UIYQROFI044ABQ';
const clientSecret = 'TH4QHBQHSXP54UV3242Q42N1TGIPGQKM2CJQQJNA0JT5PNJS';
const url = '<https://api.foursquare.com/v2/venues/explore?near=>';

// OpenWeather Info
const openWeatherKey = 'd9669125db9a8d04f5cd8d80f6dd7b7e';
const weatherUrl = '<https://api.openweathermap.org/data/2.5/weather>';

// Page Elements
const $input = $('#city');
const $submit = $('#button');
const $destination = $('#destination');
const $container = $('.container');
const $venueDivs = [$("#venue1"), $("#venue2"), $("#venue3"), $("#venue4")];
const $weatherDiv = $("#weather1");
const weekDays = ['Sunday', 'Monday', 'Tuesday', 'Wednesday', 'Thursday', 'Friday', 'Saturday'];

// Add AJAX functions here:
const getVenues = async() => {
  const city = $input.val();
  const urlToFetch = `${url}${city}&limit=10&client_id=${clientId}&client_secret=${clientSecret}&v=20200513`;
  try{
    const response = await fetch(urlToFetch);
    if(response.ok){
      const jsonResponse = await response.json();
      const venues = jsonResponse.response.groups[0].items.map(item => item.venue);
      console.log(venues);
      return venues;
    }
  }catch(error){
    console.log(error);
  }
};

const getForecast = async() => {
  try{
    const urlToFetch = `${weatherUrl}?&q=${$input.val()}&APPID=${openWeatherKey}`;
    const response = await fetch(urlToFetch);
    if(response.ok){
      const jsonResponse = response.json();
      console.log(jsonResponse);
      return jsonResponse;
    }
  }catch(error){
    console.log(error);
  }
}

// Render functions
const renderVenues = (venues) => {
  $venueDivs.forEach(($venue, index) => {
    // Add your code here:
    const venue = venues[index];
    const venueIcon = venue.categories[0].icon;
    const venueImgSrc = `${venueIcon.prefix}bg_64${venueIcon.suffix}`;
    let venueContent = createVenueHTML(venue.name,venue.location,venueImgSrc);
    $venue.append(venueContent);
  });
  $destination.append(`<h2>${venues[0].location.city}</h2>`);
}

const renderForecast = (day) => {
  // Add your code here:
	let weatherContent = createWeatherHTML(day);
  $weatherDiv.append(weatherContent);
}

const executeSearch = () => {
  $venueDivs.forEach(venue => venue.empty());
  $weatherDiv.empty();
  $destination.empty();
  $container.css("visibility", "visible");
  getVenues().then(venues => 
    renderVenues(venues));
  getForecast().then(forecast =>
    renderForecast(forecast));
  return false;
}

$submit.click(executeSearch)