I don't understand the logic behind this challenge

[tosinnlobin]

In the Create Strings using Template Literals ES6 lesson, I understand that we have to include a loop. but I don’t understand why we have to include arr.length.
Also, what are we pushing into failureItems exactly? I’m especially confused by the part below. Could someone explain this in a simple way?

failureItems.push(`<li class="text-warning">${arr[i]}</li>`);

[halcyondays]

Could you provide a link to the lesson, just to make things easier, or paste the entire code? Thanks

[tosinnlobin]

Sure! Here’s the link to the lesson: https://www.freecodecamp.org/learn/javascript-algorithms-and-data-structures/es6/create-strings-using-template-literals

And here’s the 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) {

  "use strict";

  // change code below this line

  const failureItems = [];

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

    failureItems.push(`<li class="text-warning">${arr[i]}</li>`);

  }

  // change code above this line

  return failureItems;

}

const failuresList = makeList(result.failure);

[halcyondays]

This lesson is taking what you learned in the Javascript Basics about loops, and applying it to some HTML elements. You are iterating through the arr[] using a for loop which looks like most for loops do, and you are using arr.length because that is the conditional statement for the loop. You don’t want the for loop to iterate more times than there are arguments, right? That would break your code. If you need a refresher, go back and look at some of the lessons on loops in Javascript Basics, they are simpler and the logic can be broken down quite easily. I hope this helps

[tosinnlobin]

Thank you! This helps a lot. I’m going to search for extra lessons about this as well!