Compare commits
1 commit
76725c3410
...
main
| Author | SHA1 | Date | |
|---|---|---|---|
| 41ae601c19 |
9 changed files with 200 additions and 1 deletions
19
README.md
19
README.md
|
|
@ -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.
|
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).
|
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
18
continent.html
Normal 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
18
continents.html
Normal 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
33
country.html
Normal 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
18
currency.html
Normal 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
19
js/continent.js
Normal 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: "", // Fill in Query here
|
||||||
|
"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
17
js/continents.js
Normal file
|
|
@ -0,0 +1,17 @@
|
||||||
|
const continentList = document.getElementById("continent-list");
|
||||||
|
fetch("https://countries.trevorblades.com/", {
|
||||||
|
method: "POST",
|
||||||
|
body: JSON.stringify(
|
||||||
|
{
|
||||||
|
query: "", // Fill in Query here
|
||||||
|
"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);
|
||||||
|
}
|
||||||
|
});
|
||||||
37
js/country.js
Normal file
37
js/country.js
Normal file
|
|
@ -0,0 +1,37 @@
|
||||||
|
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: "", // Fill in Query here
|
||||||
|
"operationName": "country",
|
||||||
|
"variables": { "code": countryCode }
|
||||||
|
}),
|
||||||
|
headers: { "Content-Type": "application/json" }
|
||||||
|
}).then(response => response.json()).then(({ data }) => {
|
||||||
|
/*
|
||||||
|
Use the information from the response to insert the following text into the page:
|
||||||
|
- Name of the country
|
||||||
|
- Capital of the country
|
||||||
|
- Flag of the country as unicode 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
20
js/currency.js
Normal 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: "", // Fill in Query here
|
||||||
|
"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);
|
||||||
|
}
|
||||||
|
});
|
||||||
Loading…
Add table
Add a link
Reference in a new issue