greatbody
/
freeCodeCamp
mirror of https://github.com/freeCodeCamp/freeCodeCamp.git
1
0
Fork 0
Code Issues Projects Releases Wiki Activity

fix(challenges): improve template literal challenge instructions

pull/18182/head
John Kennedy 2018-07-20 00:17:26 +01:00 committed by Kristofer Koishigawa
parent 59d98b8d1c
commit 99f4b9f1ff
1 changed files with 10 additions and 8 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

18
challenges/02-javascript-algorithms-and-data-structures/es6.json
View File

@ -990,12 +990,14 @@
"id": "587d7b8a367417b2b2512b4e",
"title": "Create Strings using Template Literals",
"description": [
"A new feature of ES6 is the <dfn>template literal</dfn>. This is a special type of string that allows you to use string interpolation features to create strings.",
"A new feature of ES6 is the <dfn>template literal</dfn>. 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:",
"<blockquote>const person = {<br>&nbsp;&nbsp;name: \"Zodiac Hasbro\",<br>&nbsp;&nbsp;age: 56<br>};<br><br>// string interpolation<br>const greeting = `Hello, my name is ${person.name}!<br>I am ${person.age} years old.`;<br><br>console.log(greeting); // prints<br>// Hello, my name is Zodiac Hasbro!<br>// I am 56 years old.<br></blockquote>",
"<blockquote>const person = {<br>&nbsp;&nbsp;name: \"Zodiac Hasbro\",<br>&nbsp;&nbsp;age: 56<br>};<br><br>// Template literal with multi-line and string interpolation<br>const greeting = `Hello, my name is ${person.name}!<br>I am ${person.age} years old.`;<br><br>console.log(greeting); // prints<br>// Hello, my name is Zodiac Hasbro!<br>// I am 56 years old.<br></blockquote>",
"A lot of things happened there.",
"Firstly, the <code>${variable}</code> syntax used above is a place holder. Basically, you won't have to use concatenation with the <code>+</code> operator anymore. To add variables to strings, you just drop the variable in a template string and wrap it with <code>${</code> and <code>}</code>.",
"Secondly, the example uses backticks (<code>`</code>), not quotes (<code>'</code> or <code>\"</code>), to wrap the string. Notice that the string is multi-line.",
"Firstly, the example uses backticks (<code>`</code>), not quotes (<code>'</code> or <code>\"</code>), to wrap the string.",
"Secondly, notice that the string is multi-line, both in the code and the output. This saves inserting \n within strings.",
"The <code>${variable}</code> syntax used above is a placeholder. Basically, you won't have to use concatenation with the <code>+</code> operator anymore. To add variables to strings, you just drop the variable in a template string and wrap it with <code>${</code> and <code>}</code>. Similarly, you can include other expressions in your string literal, for example <code>${a + b}</code>.",
"This new way of creating strings gives you more flexibility to create robust strings.",
"<hr>",
"Use template literal syntax with backticks to display each entry of the <code>result</code> object's <code>failure</code> array. Each entry should be wrapped inside an <code>li</code> element with the class attribute <code>text-warning</code>, and listed within the <code>resultDisplayArray</code>."
@ -1003,7 +1005,7 @@
"tests": [
{
"text":
"<code>resultDisplayArray</code> is a list containing <code>result failure</code> messages.",
"<code>resultDisplayArray</code> is an array containing <code>result failure</code> messages.",
"testString":
"assert(typeof makeList(result.failure) === 'object' && resultDisplayArray.length === 3, '<code>resultDisplayArray</code> is a list containing <code>result failure</code> messages.');"
},
@ -1043,9 +1045,9 @@
"}",
"/**",
" * 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> ]",
" * [ `<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);"
],