1
00:00:00,000 --> 00:00:09,279
[MUSIC]

2
00:00:09,279 --> 00:00:11,297
Hi Team, Rohald here.

3
00:00:11,297 --> 00:00:14,241
In this practice session,
you'll solidify and

4
00:00:14,241 --> 00:00:16,768
practice your skills with the Fetch API.

5
00:00:16,768 --> 00:00:17,667
As a developer,

6
00:00:17,667 --> 00:00:21,793
you'll often make network requests to
retrieve data from a remote server.

7
00:00:21,793 --> 00:00:25,026
This practice will allow
you to apply your fetch API

8
00:00:25,026 --> 00:00:29,469
knowledge firsthand by retrieving
data from the REST countries API.

9
00:00:29,469 --> 00:00:33,478
The REST countries API is
a free-to-use open-source API

10
00:00:33,478 --> 00:00:37,177
that contains various
information about countries.

11
00:00:37,177 --> 00:00:41,753
You can use it to retrieve information
about a country's flag, capital,

12
00:00:41,753 --> 00:00:44,668
currency, border countries, and much more.

13
00:00:44,668 --> 00:00:46,635
When working with an external API,

14
00:00:46,635 --> 00:00:50,121
you'll always wanna have a good
look at their documentation.

15
00:00:50,121 --> 00:00:53,901
In the docs, you'll find what
endpoints are available and

16
00:00:53,901 --> 00:00:55,722
what data they'll return.

17
00:00:55,722 --> 00:01:00,499
You'll find a link to the documentation
in the teacher's notes below this video.

18
00:01:00,499 --> 00:01:03,762
Launch the workspace with
this video to get started or

19
00:01:03,762 --> 00:01:07,691
download the project files and
use your preferred text editor.

20
00:01:07,691 --> 00:01:13,827
In the index.html file, I've provided
a snippet of the country card structure.

21
00:01:13,827 --> 00:01:18,115
You can use this same structure to
dynamically add the elements to the page

22
00:01:18,115 --> 00:01:19,787
once the data is available.

23
00:01:19,787 --> 00:01:24,268
In the app.js file, I've added some
comments to help you get going.

24
00:01:24,268 --> 00:01:29,371
To complete this practice, you'll have
to create two separate functions,

25
00:01:29,371 --> 00:01:33,608
one to retrieve the API data, and
another to create the cards and

26
00:01:33,608 --> 00:01:35,902
add them to the page dynamically.

27
00:01:35,902 --> 00:01:40,069
Once you finish the challenge,
your page should look like this.

28
00:01:40,069 --> 00:01:45,066
For each country returned by the API,
a card is added to the page.

29
00:01:45,066 --> 00:01:46,972
Good luck, and have fun.

30
00:01:46,972 --> 00:01:50,790
In the following video, I'll show you
one possible solution to this challenge.