Welcome to the Treehouse Community

Want to collaborate on code errors? Have bugs you need feedback on? Looking for an extra set of eyes on your latest project? Get support with fellow developers, designers, and programmers of all backgrounds and skill levels here with the Treehouse Community! While you're at it, check out some resources Treehouse students have shared here.

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and join thousands of Treehouse students and alumni in the community today.

Start your free trial

JavaScript Introducing the Practice

Posted by Hamzah Iqbal
.a{fill-rule:evenodd;}techdegree
Hamzah Iqbal
Full Stack JavaScript Techdegree Student 386 Points

Not sure about the exercise in Template Literals

const mars = {
  name: 'Mars',
  diameter: '4,212 mi',
  moons: '2',
  temp: '-153 to 20 °C',
  orbitDays: '687',
  orbitYears: '1.9',
  description: 'The fourth planet from the Sun and the second smallest planet in the solar system. Named after the Roman god of war, Mars is also often described as the “Red Planet” due to its reddish appearance. It\'s a terrestrial planet with a thin atmosphere composed primarily of carbon dioxide.',
  facts: 'Mars has the largest dust storms in the solar system. They can last for months and cover the entire planet. On Mars the Sun appears about half the size as it does on Earth.'
};

function createPlanetHTML(planet) {
 return '<div class="card">' +
          '<div>'+
            '<img src="img/' ${name}  + '.jpg" alt="' + ${name} + '">' +
          '</div>' +
          '<h2>' + {$name} + '</h2>' +
          '<p>' + {$description} + '</p>' +
          '<h3>Planet Profile</h3>' +
          '<ul>' +
            '<li><strong>Diameter: </strong>' + {diameter} + '</li>' +
            '<li><strong>Moons: </strong>' + {$moons} + '</li>' +
            '<li><strong>Temperature: </strong>' + {$temp} + '</li>' +
            '<li><strong>Orbit Period: </strong>' + {$orbitDays} + ' days ' + '(' + {$orbitYears} + ' years)' + '</li>' +
          '</ul>' +
          '<p>' + {$facts} + '</p>' +
        '</div>';
}

document.querySelector('body').innerHTML = createPlanetHTML(mars);

So i put all of the objects within the ${name} method. However it wont run, but more importantly, im not sure what i need to put in : ``

Just a litte confused guys

2 Answers

Steven Parker
Steven Parker
231,007 Points
Steven Parker
Steven Parker
231,007 Points

You've got the right idea, but there's some syntax issues. Here's a few hints:

  • no identifier "name" has been defined, perhaps you meant "planet.name"
  • similarly, you'd need to prefix the other properties with "planet." also
  • to create an interpolated token, the $ must go in front of the braces
  • template literals must be enclosed in accents ( ` ), not apostrophes ( ' )
  • you can eliminate the concatenation on the same line and make one template literal
  • you might still prefer to concatenate across lines but template literals can also span lines

For example, here's the first line that has tokens with these hints applied:

        `<img src="img/${planet.name}.jpg" alt="${planet.name}">` +
Fabio Faria
Fabio Faria
2,153 Points
Fabio Faria
Fabio Faria
2,153 Points

As said before, everytime we have an object with informations inside, just like "const name = { age: x, name: y}" we have to call like variable.object. name.age, name.name, just like that.