From 41ae601c190b5fe3981abbc5ef8d9ee49c1282d1 Mon Sep 17 00:00:00 2001 From: Julius Freudenberger Date: Wed, 19 Nov 2025 23:24:55 +0100 Subject: [PATCH] Add basis for exercise as well as task description --- README.md | 21 ++++++++++++++++++++- continent.html | 18 ++++++++++++++++++ continents.html | 18 ++++++++++++++++++ country.html | 33 +++++++++++++++++++++++++++++++++ currency.html | 18 ++++++++++++++++++ js/continent.js | 19 +++++++++++++++++++ js/continents.js | 17 +++++++++++++++++ js/country.js | 37 +++++++++++++++++++++++++++++++++++++ js/currency.js | 20 ++++++++++++++++++++ 9 files changed, 200 insertions(+), 1 deletion(-) create mode 100644 continent.html create mode 100644 continents.html create mode 100644 country.html create mode 100644 currency.html create mode 100644 js/continent.js create mode 100644 js/continents.js create mode 100644 js/country.js create mode 100644 js/currency.js 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/continent.html b/continent.html new file mode 100644 index 0000000..87242fa --- /dev/null +++ b/continent.html @@ -0,0 +1,18 @@ + + + + + Continent - World Information System + + + + +

+
+ +
+ + + + \ No newline at end of file diff --git a/continents.html b/continents.html new file mode 100644 index 0000000..11ada97 --- /dev/null +++ b/continents.html @@ -0,0 +1,18 @@ + + + + + All Continents - World Information System + + + + +

All continents

+
+ +
+ + + + \ No newline at end of file diff --git a/country.html b/country.html new file mode 100644 index 0000000..cebe4a7 --- /dev/null +++ b/country.html @@ -0,0 +1,33 @@ + + + + + Country - World Information System + + + + +
+

+
+

+

Languages

+
+ +
+

Currencies

+
+ +
+

Phone Prefix

+
+ +
+

Flag

+ + + + \ No newline at end of file diff --git a/currency.html b/currency.html new file mode 100644 index 0000000..b4e779a --- /dev/null +++ b/currency.html @@ -0,0 +1,18 @@ + + + + + Countries paying in - World Information System + + + + +

Countries paying in

+
+ +
+ + + + \ No newline at end of file diff --git a/js/continent.js b/js/continent.js new file mode 100644 index 0000000..2ec4a54 --- /dev/null +++ b/js/continent.js @@ -0,0 +1,19 @@ +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: "", // 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) { + const newListItem = document.createElement("li"); + newListItem.innerHTML = ` ${country.name} `; + countryList.append(newListItem); + } +}); \ No newline at end of file diff --git a/js/continents.js b/js/continents.js new file mode 100644 index 0000000..657111e --- /dev/null +++ b/js/continents.js @@ -0,0 +1,17 @@ +const continentList = document.getElementById("continent-list"); +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; + for (const continent of continents) { + const newListItem = document.createElement("li"); + newListItem.innerHTML = ` ${continent.name} `; + continentList.append(newListItem); + } +}); \ No newline at end of file diff --git a/js/country.js b/js/country.js new file mode 100644 index 0000000..b7b53b4 --- /dev/null +++ b/js/country.js @@ -0,0 +1,37 @@ +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: "", // 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; + languageList.append(newListItem); + } + for (const currency of data.country.currencies) { + const newListItem = document.createElement("li"); + newListItem.innerHTML = `${currency}`; + currencyList.append(newListItem); + } + for (const phonePrefix of data.country.phones) { + const newListItem = document.createElement("li"); + newListItem.innerText = `+${phonePrefix}`; + phonePrefixList.append(newListItem); + } +}); \ No newline at end of file diff --git a/js/currency.js b/js/currency.js new file mode 100644 index 0000000..3496551 --- /dev/null +++ b/js/currency.js @@ -0,0 +1,20 @@ +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: "", // 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) { + const newListItem = document.createElement("li"); + newListItem.innerHTML = ` ${country.name} `; + countryList.append(newListItem); + } +}); \ No newline at end of file