From 76725c3410b868dca6a1ebb2430c386ba68b4d99 Mon Sep 17 00:00:00 2001 From: Julius Freudenberger Date: Wed, 19 Nov 2025 23:24:55 +0100 Subject: [PATCH 1/3] Add complete project --- continent.html | 18 ++++++++++++++++++ continents.html | 18 ++++++++++++++++++ country.html | 34 ++++++++++++++++++++++++++++++++++ currency.html | 18 ++++++++++++++++++ js/continent.js | 11 +++++++++++ js/continents.js | 10 ++++++++++ js/country.js | 24 ++++++++++++++++++++++++ js/currency.js | 11 +++++++++++ 8 files changed, 144 insertions(+) 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/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..281a878 --- /dev/null +++ b/country.html @@ -0,0 +1,34 @@ + + + + + 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..a89d3b6 --- /dev/null +++ b/js/continent.js @@ -0,0 +1,11 @@ +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}) => { + 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..865d236 --- /dev/null +++ b/js/continents.js @@ -0,0 +1,10 @@ +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}) => { + const continents = data.continents; + document.getElementById("") + 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..3ef2af7 --- /dev/null +++ b/js/country.js @@ -0,0 +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; + 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..1acad8b --- /dev/null +++ b/js/currency.js @@ -0,0 +1,11 @@ +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 }) => { + 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 From 41ae601c190b5fe3981abbc5ef8d9ee49c1282d1 Mon Sep 17 00:00:00 2001 From: Julius Freudenberger Date: Wed, 19 Nov 2025 23:24:55 +0100 Subject: [PATCH 2/3] 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 From 38ebeb2d40eaef0771fa017cf5f8c529914d7839 Mon Sep 17 00:00:00 2001 From: Julius Freudenberger Date: Thu, 7 May 2026 08:04:50 +0200 Subject: [PATCH 3/3] Fix typo --- README.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/README.md b/README.md index 23e7286..2cf8698 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 wepage if all information is displayed correctly +3. Test the webpage if all information is displayed correctly