Add solution

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 webpage if all information is displayed correctly
+3. Test the wepage if all information is displayed correctly

js/continent.js

@@ -4,7 +4,7 @@ fetch("https://countries.trevorblades.com/", {
     "method": "POST",
     "body": JSON.stringify(
         {
-            query: "", // Fill in Query here
+            query: "query continent($code: ID!) { continent(code: $code) { name countries { name code }}}",
             "operationName": "continent",
             "variables": { "code": continentCode }
         }), headers: { "Content-Type": "application/json" }

js/continents.js

@@ -3,7 +3,7 @@ fetch("https://countries.trevorblades.com/", {
     method: "POST",
     body: JSON.stringify(
         {
-            query: "", // Fill in Query here
+            query: "query allContinents { continents { name code }}",
             "operationName": "allContinents"
         }),
     headers: { "Content-Type": "application/json" }

js/country.js

@@ -6,19 +6,16 @@ fetch("https://countries.trevorblades.com/", {
     "method": "POST",
     "body": JSON.stringify(
         {
-            query: "", // Fill in Query here
+            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 }) => {
-    /*
-        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
-    */
-
+    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

@@ -4,7 +4,7 @@ fetch("https://countries.trevorblades.com/", {
     "method": "POST",
     "body": JSON.stringify(
         {
-            query: "", // Fill in Query here
+            query: "query countriesPayingIn($currency: [String!]!) {countries(filter: {currency: {in:$currency}}) { name code }}",
             "operationName": "countriesPayingIn",
             "variables": { "currency": currency }
         }),