Strings using Template Literals

JavaScript
#1

I have no idea what this challenge wants me to do. It has been very abrupt since ES6 started. Dropping names like we’ve already been taught about them.
Please help.

Your code so far


const result = {
  success: ["max-length", "no-amd", "prefer-arrow-functions"],
  failure: ["no-var", "var-on-top", "linebreak"],
  skipped: ["id-blacklist", "no-dup-keys"]
};
function makeList(arr) {
  "use strict";

  // change code below this line

  // change code above this line

  return resultDisplayArray;
}
/**
 * makeList(result.failure) should return:
 * [ <li class="text-warning">no-var</li>,
 *   <li class="text-warning">var-on-top</li>, 
 *   <li class="text-warning">linebreak</li> ]
 **/
const resultDisplayArray = makeList(result.failure);

Your browser information:

User Agent is: Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/67.0.3396.99 Safari/537.36.

Link to the challenge:
https://learn.freecodecamp.org/javascript-algorithms-and-data-structures/es6/create-strings-using-template-literals/

#2

ok, so this is a exercise about a new thing being introduced called ‘template literals’. To explain what those are, let’s look at the explanation in more detail.

Pretend that you are asked to create a string which is also an html paragraph. This string will be of the form "<p>You have n dollars in your bank account!</p>"
Where ‘n’ is actual amount of money in your account.

If you were to code this string, you would probably write it like this

let myStr = "<p>You have "+money+" dollars in your bank account!</p>";

So you would have to use the + operation to concatenate the strings and the variable that represents the dollar amount. So far so good?

Ok now, we are learning a new way to do the same thing. Template literals. Instead of + everywhere, I just write the whole sentence as normal but with a template literal to represent the dollar amount this time.

let myStr = `"<p>You have ${money} dollars in your bank account!</p>"`;

Ok so when I write this, what will happen? The ${money} template literal will be replaced at run-time by the value of that variable, whatever it may be.

You may be wondering why would I bother with this?
It is a feature that lets you do more advanced string manipulation. You may not imagine but there are real life situations (usually involving internationalization) that require this feature.

Ok so back to the exercise. What do they want?

Use template literal syntax with backticks to display each entry of the result object’s failure array. Each entry should be wrapped inside an li element with the class attribute text-warning, and listed within the resultDisplayArray.

They just want you to use the technique you learned above to write an html <li> line with a specific class etc.

So you will need to iterate over the given array in order to create a new result array resultDisplayArray.

By iterate, I mean use a for loop, which is what you learned earlier.
To create a new array, use the method you were taught earlier to declare a new array.
To add values to the array, use a push command. (which you were also taught earlier)

hope this helps
./H.B.

#3

ps. I forgot to mention that after you attempt this exercise, you will discover a bug in the challenge. But pls attempt it and then when you think you have the answer, search the forum and you will see that there is a known bug (compare to the error you are seeing to determine if you hit the bug or not). Then if you do hit that bug, skip the challenge at that point.

#4

Thank you so much for taking time to explain it to me.
Truly appreciate it.
A while after I posted this, I hit the bug.
You’re an angel.

#5

no problem. Just remember to mark one of the responses above as the solution to your help request …

#6