Codecademy export

main.js

// Foursquare API Info
const clientId = 'PFUGRAI4R03K5FLNY2HXTV35I1HSQK14FTG4PWA22WQJMNCD';
const clientSecret = 'KF2TDCXEE3ZRF1HPRV01EZD0G5AAQHH0XJWFGSY35WLNDEP4';
const url = 'https://api.foursquare.com/v2/venues/explore?near=';



// APIXU Info
const apiKey = '20093e6975ba40acbaf160016192905';
const forecastUrl = 'https://api.apixu.com/v1/forecast.json?key=';

// Page Elements
const $input = $('#city');
const $submit = $('#button');
const $destination = $('#destination');
const $container = $('.container');
const $venueDivs = [$("#venue1"), $("#venue2"), $("#venue3"), $("#venue4"), $("#venue5")];
const $weatherDivs = [$("#weather1"), $("#weather2"), $("#weather3"), $("#weather4"), $("#weather5")];
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=20190513`;
  try {
    const response = await fetch(urlToFetch);
    if(response.ok) {
      const jsonResponse = await response.json();
      console.log(jsonResponse);
      const venues = jsonResponse.response.groups[0].items.map(item => item.venue);
      	for (const venue of venues){
          venue.photoUrl = getVenuesPhoto(venue.id);
     } 
      console.log(venues);
      return venues;
    } else {
      throw new Error('Request failed!');
    }
  } catch(error) {
    console.log(error.message);
  }
}
const getVenuesPhoto = async (venueId) => {
      const urlToFetch = `https://api.foursquare.com/v2/venues/${venueId}/photos?limit=1&client_id=${clientId}&client_secret=${clientSecret}&v=20190513`;
  try {
  		const response = await fetch(urlToFetch);
  if (response.ok) {
    				const jsonResponse = await response.json();
    				const venuesPhoto = `${jsonResponse.response.venue.photos.groups[0].items[0].prefix}200x200${jsonResponse.response.venue.photos.groups[0].items[0].suffix}`;
    				console.log(venuesPhoto);
            return venuesPhoto; 
  				}
  			}
  catch(error) {
    console.log(error.message);
  }
      }

const getForecast = async() => {
const urlToFetch = `${forecastUrl}${apiKey}&q=${$input.val()}&days=5&hour=11`;
  try{
const response = await fetch(urlToFetch);
    if(response.ok) {
      const jsonResponse = await response.json();
      console.log(jsonResponse);
      const days = jsonResponse.forecast.forecastday;
      return days;
    } else {throw new Error('Request failed!');}
} catch(error) {
  console.log(error.message);
   }
}

// Render functions
const renderVenues = (venues) => {
  $venueDivs.forEach(async ($venue, index) => {
    // Add your code here:
    const randomIndex = generateRandomResults(venues.length)
    const venue = venues[randomIndex[index]];
    const venueIcon = venue.categories[0].icon;
    const venueImgSrc = `${venueIcon.prefix}bg_64${venueIcon.suffix}`;
    let venuePhotoSrc = getVenuesPhoto(venue.id).then(photoUrl => {let venueContent = createVenueHTML(venue.name, venue.location, venueImgSrc, venue.photoUrl);
    $venue.append(venueContent);
    });
  });
  $destination.append(`<h2>${venues[0].location.city}</h2>`);
}
const generateRandomResults = numOfResults => {
  const randomIndexArray = [];
  arrayLength = numOfResults < 6 ? numOfResults: 10;
  while(randomIndexArray.length < arrayLength){
    const randomNumber = Math.floor(Math.random() * numOfResults);
    if(!randomIndexArray.includes(randomNumber)){
      randomIndexArray.push(randomNumber);
    }
  }
  return randomIndexArray; 
}

const renderForecast = (days) => {
  $weatherDivs.forEach(($day, index) => {
    // Add your code here:
    const currentDay = days[index];
    let weatherContent = createWeatherHTML(currentDay);
    $day.append(weatherContent);
  });
}

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

$submit.click(executeSearch)