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