Template literals!

Tell us what’s happening:
Good evening everyone!

Spending my saturday night with coding is a pleasure, but…

There is someone who can help me how it works the ${arr[i]} element?

Why when we put the <li></li> tags it’s been printed the requested results?

Thanks :smiley:

Your code so far


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.push(`<li class="text-warning">${arr[i]}</li>`);
  }

// Only change code above this line

return failureItems;
}

const failuresList = makeList(result.failure);

Your browser information:

User Agent is: Mozilla/5.0 (Macintosh; Intel Mac OS X 10_14_6) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/86.0.4240.198 Safari/537.36.

Challenge: Create Strings using Template Literals

Link to the challenge:

Hi @tidumarco!

I have edited your post so the solution is blurred out for those that haven’t worked on this problem yet. If you post a full passing solution to a challenge and have questions about it, please surround it with [spoiler] and [/spoiler] tags on the line above and below your solution code.

Woah thanks! I didn’t know that!

Sorry!

Your task is to create a list of failure messages. Instead of manually writing out list items for each failure message we could instead make the computer loop through the array and push those elements to the list.

Basically we are forcing the computer to do the work instead of us manually writing everything out.

You could also replace the for loop with a for of loop too.

const failureItems = [];
  for (const message of result.failure){
    failureItems.push(`<li class="text-warning">${message}</li>`);
  }

Hope that makes sense

Sounds good!

Tomorrow evening I will dig into it again!

Have a great Sunday!

2 Likes