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

Compare commits

base: JuliusFreudenberger:76725c3410b868dca6a1ebb2430c386ba68b4d99
Branches Tags
JuliusFreudenberger:main
JuliusFreudenberger:solution
...
compare: JuliusFreudenberger:2c35421a33a302c0fbdf7fdaf5fae2769e6a8fcb
Branches Tags
JuliusFreudenberger:solution
JuliusFreudenberger:main

2 commits
76725c3410 ... 2c35421a33

Author SHA1 Message Date
Julius Freudenberger
2c35421a33 Add solution 2025-11-19 23:46:22 +01:00
Julius Freudenberger
41ae601c19 Add basis for exercise as well as task description 2025-11-19 23:40:20 +01:00
9 changed files with 197 additions and 1 deletions
Download patch file Download diff file Expand all files Collapse all files

19
README.md
View file

@ -5,3 +5,22 @@ Data about continents, countries as well as currencies can be retrieved.
As basis for the information provided, the GraphQL API at [https://countries.trevorblades.com](https://countries.trevorblades.com) is used.
More information can be found in the [corresponding GitHub repository](https://github.com/trevorblades/countries).
## Exercise
### Getting Started
We're going to build a small webpage which displays continents and countries of the world.
The basic structure is already there, you need to integrate a GraphQL API to fetch the data from.
You can access GraphiQL of this API with the url [https://countries.trevorblades.com/](https://countries.trevorblades.com/).
Play around with the API and get familiar with available queries and the fields of the returned objects as well as the relations.
### Tasks
Let's develop a webpage which displays continent and country information.
You need to provide the needed GraphQL queries and set some information based on the response from the API.
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

18
continent.html Normal file
View file

@ -0,0 +1,18 @@
<!DOCTYPE HTML>
<html lang="en">
<head>
<title>Continent - World Information System</title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
</head>
<body>
<h1 id="continent-heading"></h1>
<div>
<ul id="country-list">
</ul>
</div>
</body>
<script src="js/continent.js"></script>
</html>

18
continents.html Normal file
View file

@ -0,0 +1,18 @@
<!DOCTYPE HTML>
<html lang="en">
<head>
<title>All Continents - World Information System</title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
</head>
<body>
<h1>All continents</h1>
<div>
<ul id="continent-list">
</ul>
</div>
</body>
<script src="js/continents.js"></script>
</html>

33
country.html Normal file
View file

@ -0,0 +1,33 @@
<!DOCTYPE HTML>
<html lang="en">
<head>
<title>Country - World Information System</title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
</head>
<body>
<div>
<h1 id="country-heading"></h1>
</div>
<h2 id="country-capital"></h2>
<h2>Languages</h2>
<div>
<ul id="language-list">
</ul>
</div>
<h2>Currencies</h2>
<div>
<ul id="currency-list">
</ul>
</div>
<h2>Phone Prefix</h2>
<div>
<ul id="phone-prefix-list">
</ul>
</div>
<h2>Flag</h2>
<span style="font-size: xxx-large" id="flag-symbol"></span>
</body>
<script src="js/country.js"></script>
</html>

18
currency.html Normal file
View file

@ -0,0 +1,18 @@
<!DOCTYPE HTML>
<html lang="en">
<head>
<title>Countries paying in - World Information System</title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
</head>
<body>
<h1>Countries paying in <span id="currency"></span></h1>
<div>
<ul id="country-list">
</ul>
</div>
</body>
<script src="js/currency.js"></script>
</html>

19
js/continent.js Normal file
View file

@ -0,0 +1,19 @@
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);
}
});

17
js/continents.js Normal file
View file

@ -0,0 +1,17 @@
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;
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);
}
});

34
js/country.js Normal file
View file

@ -0,0 +1,34 @@
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);
}
});

20
js/currency.js Normal file
View file

@ -0,0 +1,20 @@
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);
}
});