Add basis for exercise as well as task description

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 = `<a href="/country.html?code=${country.code}"> ${country.name} </a>`;
+        countryList.append(newListItem);
+    }
+});

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 = `<a href="/continent.html?code=${continent.code}"> ${continent.name} </a>`;
+        continentList.append(newListItem);
+    }
+});

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 = `<a href="/currency.html?currency=${currency}">${currency}</a>`;
+        currencyList.append(newListItem);
+    }
+    for (const phonePrefix of data.country.phones) {
+        const newListItem = document.createElement("li");
+        newListItem.innerText = `+${phonePrefix}`;
+        phonePrefixList.append(newListItem);
+    }
+});

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 = `<a href="/country.html?code=${country.code}"> ${country.name} </a>`;
+        countryList.append(newListItem);
+    }
+});