Introducing the Practice

[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