Preview
Video Player
00:00
00:00
Introducing the Practice
2:19This video introduces the challenge relating to "Template Literals" that you'll be working to complete.
[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