diff --git a/README.md b/README.md index 2cf8698..23e7286 100644 --- a/README.md +++ b/README.md @@ -23,4 +23,4 @@ You need to provide the needed GraphQL queries and set some information based on 1. Add the necessary GraphQL queries in the JavaScript files 2. Insert some information into the page based on the response from the API -3. Test the webpage if all information is displayed correctly +3. Test the wepage if all information is displayed correctly diff --git a/js/continent.js b/js/continent.js index 2ec4a54..1a77fd8 100644 --- a/js/continent.js +++ b/js/continent.js @@ -4,7 +4,7 @@ fetch("https://countries.trevorblades.com/", { "method": "POST", "body": JSON.stringify( { - query: "", // Fill in Query here + query: "query continent($code: ID!) { continent(code: $code) { name countries { name code }}}", "operationName": "continent", "variables": { "code": continentCode } }), headers: { "Content-Type": "application/json" } diff --git a/js/continents.js b/js/continents.js index 657111e..4a38dab 100644 --- a/js/continents.js +++ b/js/continents.js @@ -3,7 +3,7 @@ fetch("https://countries.trevorblades.com/", { method: "POST", body: JSON.stringify( { - query: "", // Fill in Query here + query: "query allContinents { continents { name code }}", "operationName": "allContinents" }), headers: { "Content-Type": "application/json" } diff --git a/js/country.js b/js/country.js index b7b53b4..96f73e0 100644 --- a/js/country.js +++ b/js/country.js @@ -6,19 +6,16 @@ fetch("https://countries.trevorblades.com/", { "method": "POST", "body": JSON.stringify( { - query: "", // Fill in Query here + query: "query country($code: ID!) { country(code: $code) { name capital phones currencies languages { name native } emoji }}", "operationName": "country", "variables": { "code": countryCode } }), headers: { "Content-Type": "application/json" } }).then(response => response.json()).then(({ data }) => { - /* - Use the information from the response to insert the following text into the page: - - Name of the country - - Capital of the country - - Flag of the country as unicode emoji - */ - + document.getElementById("country-heading").innerText = data.country.name; + document.getElementById("country-capital").innerText = data.country.capital; + document.getElementById("flag-symbol").innerText = data.country.emoji; + for (const language of data.country.languages) { const newListItem = document.createElement("li"); newListItem.innerText = language.name; diff --git a/js/currency.js b/js/currency.js index 3496551..fdbc512 100644 --- a/js/currency.js +++ b/js/currency.js @@ -4,7 +4,7 @@ fetch("https://countries.trevorblades.com/", { "method": "POST", "body": JSON.stringify( { - query: "", // Fill in Query here + query: "query countriesPayingIn($currency: [String!]!) {countries(filter: {currency: {in:$currency}}) { name code }}", "operationName": "countriesPayingIn", "variables": { "currency": currency } }),