1 00:00:00,400 --> 00:00:01,410 Hey, how'd it go? 2 00:00:01,410 --> 00:00:04,480 Were you able to change the multi-line string in the function to 3 00:00:04,480 --> 00:00:05,860 a template literal? 4 00:00:05,860 --> 00:00:06,720 If not, no worries. 5 00:00:06,720 --> 00:00:08,280 You can watch my solution, 6 00:00:08,280 --> 00:00:11,380 compare it to what you wrote, then try to recreate it yourself. 7 00:00:11,380 --> 00:00:16,100 The goal was to make the createPlanetHTML function more concise and 8 00:00:16,100 --> 00:00:19,530 easier to maintain using a template literal and string interpolation. 9 00:00:19,530 --> 00:00:21,230 So now I'll show you my solution, 10 00:00:21,230 --> 00:00:25,290 and you can also reference my code when you download the project files. 11 00:00:25,290 --> 00:00:28,870 First you create a template literal using backticks. 12 00:00:28,870 --> 00:00:33,300 So in the return statement I'll include a backtick at the beginning and 13 00:00:33,300 --> 00:00:35,570 at the end of the string I'm creating. 14 00:00:35,570 --> 00:00:39,979 And to make the code appear less cluttered I'll bring the parent div and 15 00:00:39,979 --> 00:00:44,930 the closing backtick down to the next line, then indent the code. 16 00:00:44,930 --> 00:00:47,960 Next I'll delete all the single quotes and 17 00:00:47,960 --> 00:00:54,060 plus symbols between the backticks, leaving what resembles regular HTML code. 18 00:00:54,060 --> 00:00:57,850 I also deleted the spaces inside the strong tags. 19 00:00:57,850 --> 00:01:01,380 Instead I added a space before each property, and 20 00:01:01,380 --> 00:01:04,880 I removed the space before the words days and years. 21 00:01:06,070 --> 00:01:08,800 With template literals you're able to interpolate or 22 00:01:08,800 --> 00:01:12,250 embed JavaScript expressions inside your template. 23 00:01:12,250 --> 00:01:16,856 So now I'll use interpolation to access the properties from the object 24 00:01:16,856 --> 00:01:19,130 passed into the function. 25 00:01:19,130 --> 00:01:24,430 And the expression syntax consists of a dollar sign and curly brackets, 26 00:01:24,430 --> 00:01:28,860 so I'll place the properties inside dollar sign curly brackets. 27 00:01:28,860 --> 00:01:32,500 And as you can tell, our code is looking much cleaner. 28 00:01:32,500 --> 00:01:37,340 Now another thing we can do is in the object, change the description 29 00:01:37,340 --> 00:01:42,210 property value from a regular string to a template literal 30 00:01:42,210 --> 00:01:46,750 by replacing the single quotes with backticks. 31 00:01:46,750 --> 00:01:49,370 And one of the benefits of doing this is that we no longer need to worry about 32 00:01:49,370 --> 00:01:52,660 including escape characters before single quotes or 33 00:01:52,660 --> 00:01:57,820 apostrophes, like in the word It\'s I can remove the slash. 34 00:01:57,820 --> 00:02:01,130 So now we have a more streamlined function 35 00:02:01,130 --> 00:02:04,810 that lets us create reusable templates for planet cards. 36 00:02:06,965 --> 00:02:09,880 I can, for instance, add another planet object. 37 00:02:09,880 --> 00:02:11,797 I'll paste one in for Saturn, and 38 00:02:11,797 --> 00:02:15,220 you can copy this in a bit from the teacher's notes. 39 00:02:15,220 --> 00:02:19,740 Now I'll pass the createPlanetHTML function the new 40 00:02:19,740 --> 00:02:24,710 saturn object, and now we see the Saturn planet card. 41 00:02:26,220 --> 00:02:32,050 Or I can display multiple planet cards by creating a planet array, 42 00:02:32,050 --> 00:02:35,730 then I'll place the Mars and Saturn object literals inside the array. 43 00:02:54,040 --> 00:03:00,283 And at the bottom I'll use the map method to go through the planets array and 44 00:03:00,283 --> 00:03:04,460 return a planet card for each object in the array. 45 00:03:05,940 --> 00:03:09,090 And there you have it, the Mars and Saturn cards. 46 00:03:09,090 --> 00:03:11,840 So I hope you were able to complete this template literals 47 00:03:11,840 --> 00:03:13,520 practice session successfully. 48 00:03:13,520 --> 00:03:14,820 If not, why not start over and 49 00:03:14,820 --> 00:03:17,180 try to write it again without looking at my version. 50 00:03:17,180 --> 00:03:18,640 Thanks everyone, and happy learning.