-
Notifications
You must be signed in to change notification settings - Fork 0
/
Wanderlus.js
84 lines (74 loc) · 2.65 KB
/
Wanderlus.js
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
// Foursquare API Info
const clientId = 'QFFFJPMF0UWIX34BGZ4BWAY0P5USPTM5JMBI3RQCD41FMWVD';
const clientSecret = 'K00XPMFMJCVBD4HW13ZV3JOLVO2I5YL4VWR5WHLOBJDCQ1MT';
const url = 'https://api.foursquare.com/v2/venues/explore?near=';
// APIXU Info
const apiKey = 'c265f68f6eb24249a4d113650180608';
const forecastUrl = 'https://api.apixu.com/v1/current.json?key=';
// Page Elements
const $input = $('#city');
const $submit = $('#button');
const $destination = $('#destination');
const $container = $('.container');
const $venueDivs = [$("#venue1"), $("#venue2"), $("#venue3"), $("#venue4")];
const $weatherDivs = [$("#weather1"), $("#weather2"), $("#weather3"), $("#weather4")];
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=20180806`;
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);
console.log(venues);
return venues;
}
} catch (error) {
console.log(error);
}
};
const getForecast = async () => {
const urlToFetch = `${forecastUrl}${apiKey}&q=${$input.val()}&days=4&hour=11`;
try {
const response = await fetch(urlToFetch);
if (response.ok) {
const jsonResponse = await response.json();
const days = jsonResponse.forecast.forecastday;
//errors pop here, too tiring to figure em out for now
return days;
}
}
catch (error) {
console.log('fetch error ' + error);}
};
// Render functions
const renderVenues = (venues) => {
$venueDivs.forEach(($venue, index) => {
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 = (days) => {
$weatherDivs.forEach(($day, index) => {
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)