From 2c35421a33a302c0fbdf7fdaf5fae2769e6a8fcb Mon Sep 17 00:00:00 2001 From: Julius Freudenberger Date: Wed, 19 Nov 2025 23:24:55 +0100 Subject: [PATCH 1/2] Add solution --- js/continent.js | 2 +- js/continents.js | 2 +- js/country.js | 13 +++++-------- js/currency.js | 2 +- 4 files changed, 8 insertions(+), 11 deletions(-) diff --git a/js/continent.js b/js/continent.js index 2ec4a54..1a77fd8 100644 --- a/js/continent.js +++ b/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" } diff --git a/js/continents.js b/js/continents.js index 657111e..4a38dab 100644 --- a/js/continents.js +++ b/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" } diff --git a/js/country.js b/js/country.js index b7b53b4..96f73e0 100644 --- a/js/country.js +++ b/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; diff --git a/js/currency.js b/js/currency.js index 3496551..fdbc512 100644 --- a/js/currency.js +++ b/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 } }), From 38ebeb2d40eaef0771fa017cf5f8c529914d7839 Mon Sep 17 00:00:00 2001 From: Julius Freudenberger Date: Thu, 7 May 2026 08:04:50 +0200 Subject: [PATCH 2/2] 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