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.
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.
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);
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.