graphql-browser-client/js/country.js

34 lines
No EOL
1.6 KiB
JavaScript

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);
}
});