|
| 1 | +'use strict'; |
| 2 | + |
| 3 | +const btn = document.querySelector('.btn-country'); |
| 4 | +const countriesContainer = document.querySelector('.countries'); |
| 5 | + |
| 6 | +/////////////////////////////////////// |
| 7 | + |
| 8 | +const renderError = function (msg) |
| 9 | +{ |
| 10 | + countriesContainer.insertAdjacentHTML('beforeend', msg); |
| 11 | +}; |
| 12 | + |
| 13 | +const getJSON = function (url, errMsg = 'Something Went Wrong') |
| 14 | +{ |
| 15 | + return fetch(url).then(response => |
| 16 | + { |
| 17 | + if (!response.ok) throw new Error(`${ errMsg } ${ response.status }`); |
| 18 | + |
| 19 | + return response.json(); |
| 20 | + }); |
| 21 | +}; |
| 22 | + |
| 23 | +const renderCountry = function (country, className = '') |
| 24 | +{ |
| 25 | + console.log(country); |
| 26 | + |
| 27 | + const html = ` |
| 28 | + <article class="country ${ className }"> |
| 29 | + <img class="country__img" src="${ country.flag }" /> |
| 30 | + <div class="country__data"> |
| 31 | + <h3 class="country__name">${ country.name }</h3> |
| 32 | + <h4 class="country__region">${ country.region }</h4> |
| 33 | + <p class="country__row"><span>👫</span>${ (+country.population / 1000000).toFixed(3) }M</p> |
| 34 | + <p class="country__row"><span>🗣️</span>${ country.languages[0].name }</p> |
| 35 | + <p class="country__row"><span>💰</span>${ country.currencies[0].name }</p> |
| 36 | + </div> |
| 37 | + </article> |
| 38 | + `; |
| 39 | + |
| 40 | + countriesContainer.insertAdjacentHTML('beforeend', html); |
| 41 | +}; |
| 42 | + |
| 43 | +const getCountryData = function (country) |
| 44 | +{ |
| 45 | + const mainLink = 'https://countries-api-836d.onrender.com/countries/'; |
| 46 | + |
| 47 | + getJSON(`${ mainLink }name/${ country }`, 'Country Not Found') |
| 48 | + .then(data => |
| 49 | + { |
| 50 | + const [country] = data; |
| 51 | + |
| 52 | + renderCountry(country); |
| 53 | + const neighbour = country.borders?.[0]; |
| 54 | + |
| 55 | + if (!neighbour) throw new Error('No Neighbour Found'); |
| 56 | + |
| 57 | + return getJSON(`${ mainLink }alpha/${ neighbour }`, 'Country Not Found'); |
| 58 | + }) |
| 59 | + .then(neighbour => renderCountry(neighbour, 'neighbour')) |
| 60 | + .catch(err => renderError(`An Error Ocurred: ${ err }`)) |
| 61 | + .finally(() => countriesContainer.style.opacity = 1); |
| 62 | +}; |
| 63 | + |
| 64 | +// getCountryData('spain'); |
| 65 | + |
| 66 | +// Coding Challenge 1 |
| 67 | + |
| 68 | +/* |
| 69 | +In this challenge you will build a function 'whereAmI' which renders a country |
| 70 | +only based on GPS coordinates.For that, you will use a second API to geocode; |
| 71 | +coordinates.So in this challenge, you’ll use an API on your own for the first time 😁 |
| 72 | +Your tasks: |
| 73 | +PART 1; |
| 74 | +1. Create a function 'whereAmI' which takes as inputs a latitude value('lat') |
| 75 | +and a longitude value('lng')(these are GPS coordinates, examples are in test |
| 76 | +data below). |
| 77 | +2. Do “reverse geocoding” of the provided coordinates.Reverse geocoding means |
| 78 | +to convert coordinates to a meaningful location, like a city and country name. |
| 79 | +Use this API to do reverse geocoding: https://geocode.xyz/api. The AJAX call |
| 80 | +will be done to a URL with this format: |
| 81 | +https://geocode.xyz/52.508,13.381?geoit=json-. Use the fetch API and |
| 82 | +promises to get the data.Do not use the 'getJSON' function we created, that |
| 83 | +is cheating 😉 |
| 84 | +3. Once you have the data, take a look at it in the console to see all the attributes |
| 85 | +that you received about the provided location.Then, using this data, log a |
| 86 | +message like this to the console: “You are in Berlin, Germany” |
| 87 | +4. Chain a.catch method to the end of the promise chain and log errors to the; |
| 88 | +console; |
| 89 | +5. This API allows you to make only 3 requests per second.If you reload fast, you |
| 90 | +will get this error with code 403. This is an error with the request.Remember, |
| 91 | +fetch() does not reject the promise in this case. So create an error to reject |
| 92 | +the promise yourself, with a meaningful error message |
| 93 | +PART 2; |
| 94 | +6. Now it's time to use the received data to render a country. So take the relevant |
| 95 | +attribute from the geocoding API result, and plug it into the countries API that |
| 96 | +we have been using. |
| 97 | +7. Render the country and catch any errors, just like we have done in the last; |
| 98 | +lecture(you can even copy this code, no need to type the same code) |
| 99 | +
|
| 100 | +The Complete JavaScript Course 31 |
| 101 | +Test data: |
| 102 | +§ Coordinates 1: 52.508, 13.381(Latitude, Longitude) |
| 103 | +§ Coordinates 2: 19.037, 72.873 |
| 104 | +§ Coordinates 3: -33.933, 18.474; |
| 105 | +*/ |
| 106 | + |
| 107 | +const [lat1, lng1] = [52.508, 13.381]; |
| 108 | +const [lat2, lng2] = [19.037, 72.873]; |
| 109 | +const [lat3, lng3] = [-33.933, 18.474]; |
| 110 | + |
| 111 | +// Personal Geocode API Key |
| 112 | +const apiKey = ''; |
| 113 | + |
| 114 | +const whereAmI = function (lat, lng) |
| 115 | +{ |
| 116 | + fetch(`https://geocode.xyz/${ lat },${ lng }?geoit=json&auth=${ apiKey }`) |
| 117 | + .then(response => |
| 118 | + { |
| 119 | + if (!response.ok) throw new Error(`Reverse Geocoding Failed (${ response.status })`); |
| 120 | + |
| 121 | + return response.json(); |
| 122 | + }) |
| 123 | + .then(data => |
| 124 | + { |
| 125 | + console.log(`You're in ${ data.state }, ${ data.country }`); |
| 126 | + getCountryData(data.country); |
| 127 | + }) |
| 128 | + .catch(err => console.log(`An Error Ocurred: ${ err }`)); |
| 129 | +}; |
| 130 | + |
| 131 | +whereAmI(lat1, lng1); |
| 132 | +// whereAmI(lat2, lng2); |
| 133 | +// whereAmI(lat3, lng3); |
0 commit comments