Still Unsolved (Help!) - update at bottom. Create Strings Using Template Literals - Where do I start?

Tell us what’s happening:
I think I have part of it down - I know that there will be the template and the space inside will be filled by the failure messages. I think I want it to iterate through each of the failure messages singly. I tried to add a ...arr but that didn’t do anything. I know one (I’m sure of several) missing piece is using the arr somewhere. I also tried:
let arr = result.failure but THAT was way off. :grimacing:

  **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 =
  [`<li class="text-warning">${result.failure}</li>`];
  
// Only change code above this line

return failureItems;
}

const failuresList = 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/96.0.4664.110 Safari/537.36 Edg/96.0.1054.62

Challenge: Create Strings using Template Literals

Link to the challenge:

Hi @nurseoquin !

I edited your post to remove the spoiler tags.
You only need to add spoiler tags around your code if it is passing.

As for your code, I think it would help to take a step back from the code and think about the problem at hand.

Your task is to create an array of list items like this

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

The directions say
Use an iterator method (any kind of loop) to get the desired output

Let’s keep it simple and use a for loop in this case.

We want to loop through result.failure which is an array of three elements

The reason why we are using a loop is because we don’t want to do something like this
and manually write out each list item

 '<li class="text-warning">no-var</li>',
  '<li class="text-warning">var-on-top</li>',
  '<li class="text-warning">linebreak</li>'

Let’s have the computer do that for us using the loop.

Our end goal is to add each list item to our failureItems array.

Slowly think through the problem and make the necessary changes to your code.
I would encourage you to use console.log along the way to see what your code is doing.

A few things to consider when you are making changes.
No.1:
You are going to want to change this line

failureItems will be an array but it would be best if there were no elements in it to start.
Then we can add elements into later using a helpful array method.
If you reset the lesson, you will see that failureItems was originally an empty array.
const failureItems = [];
I would just keep it that way

No.2:
You need to add a for loop inside your makeList function

No.3:
You need to figure out how to add the list items to the array inside the for loop.

No.4:
You want to reference the arr parameter here

Give it a try and if you get stuck then come back to the forum :grinning:

2 Likes

So… yes, I’m still on this problem :sob:
I don’t know why I’m getting confused on the for loop, I think I have to access the nested array that is result.failure but then the console keeps asking what “i” is (“i” is not defined). Then, I know I have to use the template literal, but I’m still stuck on what to put in it since I have to reference result.failure but also the 'arr'. Note to self: don’t miss a couple days of coding! (Had a vet appt for cat and caretaking for hubby’s Mom - not a lot but more stuff than usual (guilt is making me explain myself, lol)).

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
  for (let i = 0; i < arr.length; i++); {
    for (let j = 0; j < arr.length[i]; j++);
    failureItems.push['<li class="text-warning"> ${ ...arr } </li > '];
  }

  const failureItems = [];
  // Only change code above this line

  return failureItems;
}

const failuresList = makeList(result.failure);

console.log(makeList(result.failure));

You are getting closer.

You have two main issues.

The first one is your for loop.
The second one is your list item.

Let’s focus on the for loop.
Right now you are using a nested for loop but you don’t need to here.

Here is the array you are looping through

Since we are not dealing with a nested array, we don’t need to use a nested for loop.
One loop is fine.

For the second issue, make sure you are using template literals instead of regular quotes here

You can find the backticks in the upper left hand side of the computer keyboard.

These are a backticks ``

Remember that the loop is used so you don’t have to write something like this

`<li class="text-warning"> ${ arr[0] } </li > `
`<li class="text-warning"> ${ arr[1] } </li > `
`<li class="text-warning"> ${ arr[2] } </li > `

That is really repetitive.
The for loop makes it so you don’t have to write it out three times.

Find a way to write your for loop so you only have to write out the list item once.

Hope that helps!

2 Likes

Also, remember the push method uses parenthesis instead of brackets

1 Like

OMG I got it!!!

Thank you SO MUCH!!!

Everything you said helped!!! This group is amazing (and patient!!!)

1 Like

This topic was automatically closed 182 days after the last reply. New replies are no longer allowed.