Bummer! This is just a preview. You need to be signed in with a Basic account to view the entire video.

Preview

Start a free Basic trial
to watch this video

Sign up for Treehouse

Introducing the Practice

2:19 with Guil Hernandez

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