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 trialHamzah Iqbal
Full Stack JavaScript Techdegree Student 386 PointsNot 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
231,235 PointsYou'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
2,153 PointsAs 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.