ES6 - Create Strings using Template Literals in

JavaScript
1

In my code output <li> element part is not visible in the console output,

i try it on my local js file, the output i got has <li> part in the array,
but in freeCodeCamp console i get the output :

//Output in freeCodeCamp Console : 

['no-var','var-on-top','linebreak']

// Expected Output : 
[
  '<li class="text-warning">no-var</li>',
  '<li class="text-warning">var-on-top</li>',
  '<li class="text-warning">linebreak</li>'
]

My code :

  const failureItems = [];

  for(let i=0; i<arr.length; i++){

    failureItems[i] = `<li class="target-warning">${arr[i]}</li>`;

  }

I tried using 2 ways to get the ouput , first the template literal along the string part, and , storing <li> element part in varible and using template literal, both have output where <li> part string is missing.

Also, While writing this post , i noticed <li> part is not visible unless , i use code format in the editor, i also tried JSON.stringify() in the code , still got same result, may be there is html element filtering , idk

Also , while writing this i found , what is happening here , as you can see 2nd screenshot , there are <li> part missing , so i used &lt; and &gt;

Here is changed code :

failureItems[i] = &lt;li &gt; class="text-warning"&gt;${arr[i]}&lt;/li&gt;

Which i get output as :

codea1
codea11363Ă—642 78.7 KB

Note : In the Above code , i by mistake use class"target-warning" instead class="text-warning" , i changed that , But , still i am getting error in the code.

Thank you

2

Hi

Can you please post the url of the step you are on.

3

URL - https://www.freecodecamp.org/learn/javascript-algorithms-and-data-structures/es6/create-strings-using-template-literals

4

Open your browser’s console to see the list elements. You should never have to use HTML entities or escape special characters when you use a template literal string. That’s the great thing about it!

5

I agree, the first code I have written has <li> element, the output I get on my local JS file is fine, as expected output.

But, on Free Code Camp console, I am getting output without the <li> element, an array of values of the failure field
My code :
failureItems[i] = <li class="target-warning">${arr[i]}</li>;

which gets output, I mentioned :

code11
code111361Ă—644 76.9 KB

Note: i wronly used different class name here, i corrected it, got same output without <li> elements, also i added all screenshots, but as new user, i can add only one, So, I only keep the &lt; and &gt; solution, beacuse it was still having expected output, but still i got the errors

Thank you

6

Please post your current code. Screenshots can be helpful at times, but we need to see your code to help you further.

When you enter a code block into a forum post, please precede it with three backticks to make it easier to read.

You can also use the “preformatted text” tool in the editor (</>) to add the backticks.

Pre-formatted-text
Pre-formatted-text1356Ă—380 401 KB

See this post to find the backtick on your keyboard.
Note: Backticks (`) are not single quotes (').

1 Like
7

It worked :

code111
code111635Ă—568 37.3 KB

Actually , I mistakenly used different class name , in my first code , so that why it was the error, although, In console The Output was different, as i mentioned.

As you see here, the output of the array is different. That confused me.

Thank you, dhess and a1legalfreelance :sparkles:

Edit :
For Context, I am pasting my full code

Code :

const result = {
  success: ["max-length", "no-amd", "prefer-arrow-functions"],
  failure: ["no-var", "var-on-top", "linebreak"],
  skipped: ["no-extra-semi", "no-dup-keys"]
};
function makeList(arr) {
  // Only change code below this line
  const failureItems = [];
  for(let i=0; i<arr.length; i++){
    failureItems[i] = `<li class="text-warning">${arr[i]}</li>`;
  }
  // Only change code above this line

  return failureItems;
}

const failuresList = makeList(result.failure);
console.log(failuresList)