diff --git a/README.md b/README.md index e7c58d0..23e7286 100644 --- a/README.md +++ b/README.md @@ -4,4 +4,23 @@ This is a basic website which consists of multiple pages. Data about continents, countries as well as currencies can be retrieved. As basis for the information provided, the GraphQL API at [https://countries.trevorblades.com](https://countries.trevorblades.com) is used. -More information can be found in the [corresponding GitHub repository](https://github.com/trevorblades/countries). \ No newline at end of file +More information can be found in the [corresponding GitHub repository](https://github.com/trevorblades/countries). + +## Exercise + +### Getting Started + +We're going to build a small webpage which displays continents and countries of the world. +The basic structure is already there, you need to integrate a GraphQL API to fetch the data from. +You can access GraphiQL of this API with the url [https://countries.trevorblades.com/](https://countries.trevorblades.com/). + +Play around with the API and get familiar with available queries and the fields of the returned objects as well as the relations. + +### Tasks + +Let's develop a webpage which displays continent and country information. +You need to provide the needed GraphQL queries and set some information based on the response from the API. + +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 wepage if all information is displayed correctly diff --git a/country.html b/country.html index 281a878..cebe4a7 100644 --- a/country.html +++ b/country.html @@ -19,7 +19,6 @@

Currencies

Phone Prefix

diff --git a/js/continent.js b/js/continent.js index a89d3b6..2ec4a54 100644 --- a/js/continent.js +++ b/js/continent.js @@ -1,6 +1,14 @@ const continentCode = new URLSearchParams(window.location.search).get("code"); const countryList = document.getElementById("country-list"); -fetch("https://countries.trevorblades.com/", { "method": "POST", "body": JSON.stringify({ query: "query continent($code: ID!) { continent(code: $code) { name countries { name code }}}", "operationName": "continent", "variables": { "code": continentCode }}), headers: { "Content-Type": "application/json" } }).then(response => response.json()).then(({data}) => { +fetch("https://countries.trevorblades.com/", { + "method": "POST", + "body": JSON.stringify( + { + query: "", // Fill in Query here + "operationName": "continent", + "variables": { "code": continentCode } + }), headers: { "Content-Type": "application/json" } +}).then(response => response.json()).then(({ data }) => { document.getElementById("continent-heading").innerText = data.continent.name; const countries = data.continent.countries; for (const country of countries) { diff --git a/js/continents.js b/js/continents.js index 865d236..657111e 100644 --- a/js/continents.js +++ b/js/continents.js @@ -1,7 +1,14 @@ const continentList = document.getElementById("continent-list"); -fetch("https://countries.trevorblades.com/", { method: "POST", body: JSON.stringify({"query":"query allContinents { continents { name code }}","operationName":"allContinents"}), headers: { "Content-Type": "application/json" } }).then(response => response.json()).then(({data}) => { +fetch("https://countries.trevorblades.com/", { + method: "POST", + body: JSON.stringify( + { + query: "", // Fill in Query here + "operationName": "allContinents" + }), + headers: { "Content-Type": "application/json" } +}).then(response => response.json()).then(({ data }) => { const continents = data.continents; - document.getElementById("") for (const continent of continents) { const newListItem = document.createElement("li"); newListItem.innerHTML = ` ${continent.name} `; diff --git a/js/country.js b/js/country.js index 3ef2af7..b7b53b4 100644 --- a/js/country.js +++ b/js/country.js @@ -1,11 +1,24 @@ const countryCode = new URLSearchParams(window.location.search).get("code"); const languageList = document.getElementById("language-list"); -const currencyList = document.getElementById("currency-list") -const phonePrefixList = document.getElementById("phone-prefix-list") -fetch("https://countries.trevorblades.com/", { "method": "POST", "body": JSON.stringify({ 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}) => { - document.getElementById("country-heading").innerText = data.country.name; - document.getElementById("country-capital").innerText = data.country.capital; - document.getElementById("flag-symbol").innerText = data.country.emoji; +const currencyList = document.getElementById("currency-list"); +const phonePrefixList = document.getElementById("phone-prefix-list"); +fetch("https://countries.trevorblades.com/", { + "method": "POST", + "body": JSON.stringify( + { + query: "", // Fill in Query here + "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 + */ + 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 1acad8b..3496551 100644 --- a/js/currency.js +++ b/js/currency.js @@ -1,6 +1,15 @@ const currency = new URLSearchParams(window.location.search).get("currency"); const countryList = document.getElementById("country-list"); -fetch("https://countries.trevorblades.com/", { "method": "POST", "body": JSON.stringify({ query: "query countriesPayingIn($currency: [String!]!) {countries(filter: {currency: {in:$currency}}) { name code }}", "operationName": "countriesPayingIn", "variables": { "currency": currency } }), headers: { "Content-Type": "application/json" } }).then(response => response.json()).then(({ data }) => { +fetch("https://countries.trevorblades.com/", { + "method": "POST", + "body": JSON.stringify( + { + query: "", // Fill in Query here + "operationName": "countriesPayingIn", + "variables": { "currency": currency } + }), + headers: { "Content-Type": "application/json" } +}).then(response => response.json()).then(({ data }) => { document.getElementById("currency").innerText = currency; const countries = data.countries; for (const country of countries) {