JuliusFreudenberger/graphql-browser-client
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

Add complete project

Browse source
This commit is contained in:
Julius Freudenberger 2025-11-19 23:24:55 +01:00
parent c449843941
commit 76725c3410
8 changed files with 144 additions and 0 deletions
Download patch file Download diff file Expand all files Collapse all files

11
js/continent.js Normal file
View file

@ -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 = `<a href="/country.html?code=${country.code}"> ${country.name} </a>`;
countryList.append(newListItem);
}
});

10
js/continents.js Normal file
View file

@ -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 = `<a href="/continent.html?code=${continent.code}"> ${continent.name} </a>`;
continentList.append(newListItem);
}
});

24
js/country.js Normal file
View file

@ -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 = `<a href="/currency.html?currency=${currency}">${currency}</a>`;
currencyList.append(newListItem);
}
for (const phonePrefix of data.country.phones) {
const newListItem = document.createElement("li");
newListItem.innerText = `+${phonePrefix}`;
phonePrefixList.append(newListItem);
}
});

11
js/currency.js Normal file
View file

@ -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 = `<a href="/country.html?code=${country.code}"> ${country.name} </a>`;
countryList.append(newListItem);
}
});