From 76725c3410b868dca6a1ebb2430c386ba68b4d99 Mon Sep 17 00:00:00 2001 From: Julius Freudenberger Date: Wed, 19 Nov 2025 23:24:55 +0100 Subject: [PATCH] Add complete project --- continent.html | 18 ++++++++++++++++++ continents.html | 18 ++++++++++++++++++ country.html | 34 ++++++++++++++++++++++++++++++++++ currency.html | 18 ++++++++++++++++++ js/continent.js | 11 +++++++++++ js/continents.js | 10 ++++++++++ js/country.js | 24 ++++++++++++++++++++++++ js/currency.js | 11 +++++++++++ 8 files changed, 144 insertions(+) create mode 100644 continent.html create mode 100644 continents.html create mode 100644 country.html create mode 100644 currency.html create mode 100644 js/continent.js create mode 100644 js/continents.js create mode 100644 js/country.js create mode 100644 js/currency.js diff --git a/continent.html b/continent.html new file mode 100644 index 0000000..87242fa --- /dev/null +++ b/continent.html @@ -0,0 +1,18 @@ + + + + + Continent - World Information System + + + + +

+
+ +
+ + + + \ No newline at end of file diff --git a/continents.html b/continents.html new file mode 100644 index 0000000..11ada97 --- /dev/null +++ b/continents.html @@ -0,0 +1,18 @@ + + + + + All Continents - World Information System + + + + +

All continents

+
+ +
+ + + + \ No newline at end of file diff --git a/country.html b/country.html new file mode 100644 index 0000000..281a878 --- /dev/null +++ b/country.html @@ -0,0 +1,34 @@ + + + + + Country - World Information System + + + + +
+

+
+

+

Languages

+
+ +
+

Currencies

+
+ +
+

Phone Prefix

+
+ +
+

Flag

+ + + + \ No newline at end of file diff --git a/currency.html b/currency.html new file mode 100644 index 0000000..b4e779a --- /dev/null +++ b/currency.html @@ -0,0 +1,18 @@ + + + + + Countries paying in - World Information System + + + + +

Countries paying in

+
+ +
+ + + + \ No newline at end of file diff --git a/js/continent.js b/js/continent.js new file mode 100644 index 0000000..a89d3b6 --- /dev/null +++ b/js/continent.js @@ -0,0 +1,11 @@ +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}) => { + 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 = ` ${country.name} `; + countryList.append(newListItem); + } +}); \ No newline at end of file diff --git a/js/continents.js b/js/continents.js new file mode 100644 index 0000000..865d236 --- /dev/null +++ b/js/continents.js @@ -0,0 +1,10 @@ +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}) => { + const continents = data.continents; + document.getElementById("") + for (const continent of continents) { + const newListItem = document.createElement("li"); + newListItem.innerHTML = ` ${continent.name} `; + continentList.append(newListItem); + } +}); \ No newline at end of file diff --git a/js/country.js b/js/country.js new file mode 100644 index 0000000..3ef2af7 --- /dev/null +++ b/js/country.js @@ -0,0 +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; + 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 = `${currency}`; + currencyList.append(newListItem); + } + for (const phonePrefix of data.country.phones) { + const newListItem = document.createElement("li"); + newListItem.innerText = `+${phonePrefix}`; + phonePrefixList.append(newListItem); + } +}); \ No newline at end of file diff --git a/js/currency.js b/js/currency.js new file mode 100644 index 0000000..1acad8b --- /dev/null +++ b/js/currency.js @@ -0,0 +1,11 @@ +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 }) => { + document.getElementById("currency").innerText = currency; + const countries = data.countries; + for (const country of countries) { + const newListItem = document.createElement("li"); + newListItem.innerHTML = ` ${country.name} `; + countryList.append(newListItem); + } +}); \ No newline at end of file