Create Strings using Template Literals help us

JavaScript
1

Tell us what’s happening:
//Template strings were used// this is error.

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
  const resultDisplayArray = [ `<li class="text-warning">no-var</li>`,
   `<li class="text-warning">var-on-top</li>`, 
   `<li class="text-warning">linebreak</li>` ]
 ;
  // change code above this line

  return resultDisplayArray;
}

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

Create a loop instead of hardcoding the strings. Loop over the given array and create the template literal.

3

plz give me a example.

4

In the curriculum for javascript you should have already learned how to use for loop and how to access an array. Best thing to do is go back and revise those examples. You can also search the forum for how other people solve this.

1 Like
5

Look, you should use the template like ${variable}. So the <li class="text-warning">no-var</li> should be like <li class="text-warning">${variable}</li>. Here is the answer which can let you pass. You can also use the loop method to do it but I think it is not the key point of this task.

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
const resultDisplayArray = [<li class="text-warning">${arr[0]}</li>,
<li class="text-warning">${arr[1]}</li>,
<li class="text-warning">${arr[2]}</li>];
// 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);