Project wanderlust

Hello, does anyone have the solution code for the wanderlust project?
The project has been updated so the video no longer matches, nor does any solution code I can find.
I’ve completed the project but it does not work.

Thank you.

I did the project a month ago and it still seems to work okay.

my code (spoiler)

click on blurred below to see the code I used

// Foursquare API Info
const foursquareKey = "put your fourSquare API key here";
const url = 'https://api.foursquare.com/v3/places/search' + '?near=';

// OpenWeather Info
const openWeatherKey = "put your openWeather API key here";
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 $placeDivs = [$("#place1"), $("#place2"), $("#place3"), $("#place4")];
const $weatherDiv = $("#weather1");
const weekDays = ['Sunday', 'Monday', 'Tuesday', 'Wednesday', 'Thursday', 'Friday', 'Saturday'];

const options = {
  method: 'GET',
  headers: {
    Accept: 'application/json',
    Authorization: foursquareKey
  }
};

// Add AJAX functions here:
const getPlaces = async () => {
  const city = $input.val();
  const limit = 10; // max number of venues
  const urlToFetch = url + city + '&limit=' + limit;
  try {
    const response = await fetch(urlToFetch, options);
    if (response.ok) {
      //console.log(response);
      const jsonResponse = await response.json();
      //console.log(jsonResponse);
      const places = await jsonResponse.results;
      //console.log(places);
      const coordinates = await jsonResponse.context;
      return places;
    }
    else {
      throw new Error("Error in getPlaces() or foursquare");
    }
  }
  catch (error) {
    console.log(error);
  }
};

const getForecast = async () => {
  const city = $input.val();
  const urlToFetch = weatherUrl + `?q=${city}&APPID=${openWeatherKey}`;
  try {
    const response = await fetch(urlToFetch);
    if (response.ok) {
      const jsonResponse = await response.json();
      //console.log(jsonResponse);
      return jsonResponse;
    }
    else {
      throw new Error("Error in getForecast() or openWeather");
    }
  }
  catch (error) {
    console.log(error);
  }
};


// Render functions
const renderPlaces = (places) => {
  $placeDivs.forEach(($place, index) => {
    const place = places[index];
    const placeIcon = place.categories[0].icon;
    const placeImgSrc = placeIcon.prefix + 'bg_64' + placeIcon.suffix;
    const placeContent = createPlaceHTML(place.name, place.location, placeImgSrc);
    $place.append(placeContent);
  });
  $destination.append(`<h2>${places[0].location.locality}</h2>`);
};

const renderForecast = (forecast) => {
  const weatherContent = createWeatherHTML(forecast);
  $weatherDiv.append(weatherContent);
};

const executeSearch = () => {
  $placeDivs.forEach(place => place.empty());
  $weatherDiv.empty();
  $destination.empty();
  $container.css("visibility", "visible");
  getPlaces().then(places => renderPlaces(places));
  getForecast().then(forecast => renderForecast(forecast));
  return false;
}

$submit.click(executeSearch);
1 Like

Thank you. I will take a look tomorrow.

This topic was automatically closed 41 days after the last reply. New replies are no longer allowed.