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) {