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 The Solution

Posted by JaeVeine Covington
JaeVeine Covington
9,208 Points

Template-Literal not creating a new line (JavaScript)

For some reason i dont know why new lines arent being created when i add the space inside my template-literal. This is a link to the video teamtreehouse.com/library/the-solution-9 here is my code

alert("Let's do some math!");

let num1 = prompt("Give me a number"); let newNum1 = parseFloat(num1);

let num2 = prompt("Give me one more number please"); let newNum2 = parseFloat(num2);

const message = <h1>Math with the numbers ${newNum1} and ${newNum2}</h1>;

const secondMessage =${newNum1} + ${newNum2} = ${newNum1 + newNum2} ${newNum1} - ${newNum2} = ${newNum1 - newNum2} ${newNum1} * ${newNum2} = ${newNum1 * newNum2} ${newNum1} / ${newNum2} = ${newNum1 / newNum2};

const fullMessage = message + secondMessage;

document.write(fullMessage);

3 Answers

Robert Darby
Robert Darby
9,360 Points
Robert Darby
Robert Darby
9,360 Points 
// your code
const secondMessage =${newNum1} + ${newNum2} = ${newNum1 + newNum2} ${newNum1} - ${newNum2} = ${newNum1 - newNum2} ${newNum1} * ${newNum2} = ${newNum1 * newNum2} ${newNum1} / ${newNum2} = ${newNum1 / newNum2};

// correct code
const secondMessage = `${newNum1} + ${newNum2} = ${newNum1 + newNum2} ${newNum1} - ${newNum2} = ${newNum1 - newNum2} ${newNum1} * ${newNum2} = ${newNum1 * newNum2} ${newNum1} / ${newNum2} = ${newNum1 / newNum2}`;

Your code is the is missing `` around it. The back-ticks tell this line to treat whatever is inside ${} as a variable and the anything else as text.

If the value didn't contain variables you can use either "" or '' to treat the entire value as text.

Hope that helps

JaeVeine Covington
JaeVeine Covington
9,208 Points

i did add it to the code but still shows up on one line for some reason. I ended up just adding <br> to the end of each line.

Mikel Cati
Mikel Cati
8,045 Points
Mikel Cati
Mikel Cati
8,045 Points

Hello, You might have solved the problem already but i`m posting this in case other people need help.

//1. Game starts with an alert.
alert("Let's do some math!");
//2. Declaring a variable.
//3. Using the "prompt" method to retrieve information from the user.
//4. Using the "parseInt" method to convert the string into a number.
const num1 = parseInt(prompt('Please type a number'));
const num2 = parseInt(prompt('Please type another number'));

//5. Declare a variable storing the message.
let message = `<h1>Math  with the numbers ${num1} and ${num2}</h1>`;

//6. Using the additional assign operator to reassign the value of the message.
//7. Using Template Literals to make the code more readable. 
message += 
    `${num1} + ${num2} = ${num1 + num2} <br>
     ${num1} * ${num2} = ${num1 * num2} <br>
     ${num1} / ${num2} = ${num1 / num2} <br>
     ${num1} - ${num2} = ${num1 - num2}`;

//8. Display the message to the browser.
document.write(message);
Sara Cavazos
Sara Cavazos
10,898 Points
Sara Cavazos
Sara Cavazos
10,898 Points

You could have also wrapped each string in <p> tags, though I'm not sure how "proper" that is. It's what I did for my code and spacing looks good on the page, to me.