Heads up! To view this whole video, sign in with your Courses account or enroll in your free 7-day trial. Sign In Enroll
Well done!
You have completed Practice DOM Manipulation: Modal!
You have completed Practice DOM Manipulation: Modal!
Preview
This video introduces the challenge that you’ll be working to complete
Related Discussions
Have questions about this video? Start a discussion with the community and Treehouse staff.
Sign upRelated Discussions
Have questions about this video? Start a discussion with the community and Treehouse staff.
Sign up
[MUSIC]
0:00
Hi team, Rohald here.
0:09
Today we're diving into
an exciting practice session
0:11
on creating a modal using JavaScript.
0:14
Modals are those little pop-up windows
you've seen on websites that are often
0:17
used to display additional information.
0:22
Like our about page or collect form data
when requesting a tech degree syllabus.
0:24
We'll continue working on the project
we created in the Fetch API practice.
0:29
If you still need to go through
that practice session no worries,
0:34
you can find a link to it in
the teachers notes below this video.
0:37
Launch the workspace with
this video to get started or
0:41
download the project files and
use your preferred text editor.
0:44
In the index.html file,
you'll find the structure for the modal.
0:48
Initially the modal is hidden.
0:53
However, adding the Open Class to
the overlay will make it visible in
0:55
the browser.
0:59
To complete this challenge, you'll want
to dynamically update the content of
1:00
the modal to show the data of
the country that the user clicked.
1:05
In the app.js file, you will find some
comments that will help you get going and
1:09
the code we left off
after fetching the data.
1:14
I've made a few minor adjustments
that might help with this challenge.
1:17
After retrieving the data from the API,
1:21
the data is stored in
the countries variable.
1:23
I've also added a data name attribute
to each of the country cards.
1:26
You can use this name to find
the corresponding object in the countries
1:30
array without making another API request.
1:34
Upon completing the challenge, your
page should resemble what you see here.
1:37
When a user clicks on one of
the cards a modal is shown and
1:41
detailed information on that
country is shown to the user.
1:44
Good luck and have fun.
1:47
In the next video I'll show you one
possible solution to this challenge.
1:49
You need to sign up for Treehouse in order to download course files.
Sign upYou need to sign up for Treehouse in order to set up Workspace
Sign up