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