ES6: Create Strings using Template Literal

JavaScript
1

I am having problems with this excercise. This is the link https://www.freecodecamp.org/learn/javascript-algorithms-and-data-structures/es6/create-strings-using-template-literals


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"> ${result.failure[0]}!</li>
  <li class="text-warning">${result.failure[1]}!</li>
  <li class="text-warning">${result.failure[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);
2

What is the reason why It is not possible to make this loop?

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 = arr;

for (var arr=0,arr<result.failure.length,arr++){



}


  // 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);
3

A new feature of ES6 is the template literal. This is a special type of string that makes creating complex strings easier.
Template literals allow you to create multi-line strings and to use string interpolation features to create strings.
Consider the code below:

Template Literal allows us to create complex string

i.e it allows to create multi-line strings

That is what the lesson is about
to pass it we need to meet the requirments
which is using what we just learned

Why arre u even starting about loops? it’s not even partof the lesson?

1 Like
4

Beacause it is asking me to do a loop.

5

This is not proper syntax for a for loop: for (var arr=0,arr<result.failure.length,arr++)

The statements should be separated by semicolons not commas.

1 Like
6

What may I do now?

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 = arr;

for (var arr=0;arr<result.failure.length;arr++){



}


  // 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);
7

The instructions of the lesson are pretty clear. Each time through the loop, you need to output another string literal. A string literal is one which has spaces within the string that are made up of a javascript expression, of whatever sort, in-line. For example:

const pets = {
  dogs: ['Fido','Benji','Scraps'],
  cats: ['Fluffy','Pepper','Maximillian Manx'],
  others: ['Slither','Hedgie','Frank']
};

// If I want to loop over and print the names of the dogs...
let myDogsNames = [];

for (let i=0; i<pets.dogs.length; i++){
  // This line, right below, is the string literal. It will evaluate the expression 
  //    pets.dogs[i], and insert the value of that in place. We aren't saving it to
  //    a variable, as I simply want to add it to my dogs names array!
  myDogsNames.push( `<p>There is a doggie named ${ pets.dogs[i] }.</p>`);
}

// At this point, we went through all my doggies, and we have an array of all their names.
return myDogsNames;

What you’re trying to do is very similar, though the string literal should be a bit different.

1 Like
8

I do not know what is the reason why it is not the same output as the example.

 **/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 = arr;
  
  var a = [];
  
  for(var i=0;i<result.failure.length;i++){
  
  a.push(`<li class="text-warning"> ${result.failure[i]}</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);

```
9

I have done it. I am thankful with you.

1 Like
10

Guessing it was an issue with an extra space before the ${result.failure[i]}?

1 Like
11

You are a wizard!. I was having problems with ${result.failure[i]}

This was the original line: resultDisplayArray.push(<li class="text-warning">$ {arr[i]}</li>)

This is the correct one: resultDisplayArray.push(<li class="text-warning">${arr[i]}</li>)

But I have to admited that I cheat: I used one of the solutions. I read them and compared them for an hour until I realised about my error.

I was having problems with:
const resultDisplayArray = ;
Because I misdeclared it. I declared it firstly as const resultDisplayArray = arr; that brougth 2 hours of investigation. I used your example, but I did not notice my error.
I declared in a line this
for(let i=0;i< result.failure[i];i++){ //that was wrong.
I miswrote this:
a.push(<li class="text-warning">${arr [i]}</li>)//this is wrong again.

So, I started to investigate in Youtube. They used console.log(resultDisplayArray). Thefore, I used it with a. I was showing the lines together. In that moment, I did not notice my errors yet. I tried to fix it

It was terrible,

I used the solution where I learnt that my setences were wrong: it was showing the setences, but together and it was not passing the tests. I started to read it and I corrected too many things that I did not know about. I felt a little dissapointed, but I will continue. I learnt how I shoul read the paremeter of the function and I should have care when I read the lines. I cannot declare something, I ahould meditates about it. It was strange because it was resulting in my head: ishoul improve my logical skills.

1 Like