Add complete project

README.md

@@ -4,23 +4,4 @@ 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).
-
-## 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
+More information can be found in the [corresponding GitHub repository](https://github.com/trevorblades/countries).

country.html

@@ -19,6 +19,7 @@
     <h2>Currencies</h2>
     <div>
         <ul id="currency-list">
+            </li>
         </ul>
     </div>
     <h2>Phone Prefix</h2>

js/continent.js

@@ -1,14 +1,6 @@
 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 }) => {
+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) {

js/continents.js

@@ -1,14 +1,7 @@
 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 }) => {
+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 = `<a href="/continent.html?code=${continent.code}"> ${continent.name} </a>`;

js/country.js

@@ -1,24 +1,11 @@
 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
-    */
-
+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;

js/currency.js

@@ -1,15 +1,6 @@
 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 }) => {
+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) {