Heads up! To view this whole video, sign in with your Courses account or enroll in your free 7-day trial. Sign In Enroll
Preview
Start a free Courses trial
to watch this video
This video introduces the challenge relating to "Template Literals" that you'll be working to complete.
Resources
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
Hey everyone, Guil here.
0:04
It's time for more practice.
0:06
Practice helps make what
you've learned stick.
0:07
It also helps to become a faster and
better developer.
0:09
So you're going to sharpen your JavaScript
skills by practicing template literals.
0:11
A feature of ES2015 that offers a lot
of convenience when creating strings in
0:16
JavaScript.
0:20
This exercise is a follow up to the using
template laterals content on Treehouse.
0:21
So if you haven't watched that yet,
0:26
I suggest you watch it out
before trying this challenge.
0:27
I've added a link to the videos
in the teachers notes.
0:29
In this session,
you are going to generate the HTML for
0:32
these planet card items using template
laterals and string interpolations.
0:35
To get started, go ahead and
launch the workspace with this video.
0:41
I have included HTML, CSS images and
a JavaScript file for this exercise.
0:44
You're going to write your JavaScript
inside the file, scripts.js.
0:50
So now let's walk through
what you'll need to do.
0:54
Scripts.js currently contains an object
literal assigned to the constant, mars.
0:56
The object has properties
that describe the planet.
1:04
Like name, diameter,
temperature and description.
1:07
Right below is a function
named createPlanetHTML,
1:10
that takes the argument planet.
1:14
And the function returns the mark up for
creating a planet card.
1:16
It uses dot notation to access
the properties of the object passed to it.
1:22
For instance,
it returns the name via plane.name and
1:27
the description via planet.description.
1:31
Then at the bottom of the script,
we're setting the body's innerHTML
1:34
to the HTML that's returned
by a createPlanetHTML and
1:38
passing at the mars
object as the argument.
1:43
Currently the script is a little messy and
1:46
hard to read, because the function
is using concatenation
1:48
to create the multi-line string
that makes up a card template.
1:53
Now you've learned that template
literate help you create templates.
1:58
So now you're going to make this code more
concise, readable and easier to work with,
2:02
by converting the multi-line
string to a template literal and
2:07
using interpolation to access and
display the object's property values.
2:11
So good luck, have fun and in the next
video I’ll show you my solution.
2:15
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