gaspersic/freeCodeCamp
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

Refactor ES6 challenge descriptions (#13629)

Browse Source
This commit is contained in:
Rob Weber
2017-03-22 01:59:20 -04:00
committed by Quincy Larson
parent 38a96aa899
commit f851d7b56e
1 changed files with 53 additions and 75 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@ -538,41 +538,29 @@
}, },
{ {
"id": "587d7b8a367417b2b2512b4e", "id": "587d7b8a367417b2b2512b4e",
"title": "Interpolate a String Using Backquotes", "title": "Create Strings using Template Literals",
"description": [ "description": [
"A new feature of ES6 or ES2015, is that it allows you to use string interpolation with back-ticks.", "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.",
"Consider the code below", "Consider the code below:",
"<code>const text = 'Hello World';</code>", "<blockquote>const person = {<br> name: \"Zodiac Hasbro\",<br> 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>",
"<code>// string interpolation</code>", "A lot of things happened there.",
"<code>const divText = `</code>", "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>.",
"<code><div></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.",
"<code> ${text}</code>", "This new way of creating strings gives you more flexibility to create robust strings.",
"<code></div></code>", "<hr>",
"<code>console.log(divText); // prints </code>", "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>."
"<code>//<div></code>",
"<code>// Hello World</code>",
"<code>//</div></code>",
"A lot of thing happened in there.",
"First, the ${variable} syntax. It's a template literal. Basically, you won't have to use concatenation with + anymore. Just drop the variable in your string, wrapped with ${ and }.",
"Second, we used backticks, not quotes, to wrap around the string. Notice that the string is multi-line.",
"In ES6, back-ticks give you more robust string creation ability.",
"Instructions",
"Use proper template literal syntax with backticks.",
"The expected output is each entry of result object's failure array, wrapped inside an <li> element, with class attribute text-warning.",
"If you have trouble finding backticks, it's the ` key, to the left of your 1; and has ~ on it."
], ],
"challengeSeed": [ "challengeSeed": [
"const result = {", "const result = {",
" success: ['max_length', 'no-amd', 'prefer-arrow-functions'],", " success: [\"max-length\", \"no-amd\", \"prefer-arrow-functions\"],",
" failure: ['no-var', 'var-on-top', 'linebreak'],", " failure: [\"no-var\", \"var-on-top\", \"linebreak\"],",
" skipped: ['id-blacklist', 'no-dup-keys']", " skipped: [\"id-blacklist\", \"no-dup-keys\"]",
"}", "};",
"/* Alter code below this line */", "// change code below this line",
"const resultDisplay = undefined;", "const resultDisplay = null;",
"/* Alter code above this line */", "// change code above this line",
"console.log(resultDisplay);", "console.log(resultDisplay);",
"/**", "/**",
" * ",
" * should look like this", " * should look like this",
" * <li class=\"text-warning\">no-var</li>", " * <li class=\"text-warning\">no-var</li>",
" * <li class=\"text-warning\">var-on-top</li>", " * <li class=\"text-warning\">var-on-top</li>",
@ -593,32 +581,27 @@
"id": "587d7b8a367417b2b2512b4f", "id": "587d7b8a367417b2b2512b4f",
"title": "Write Concise Object Literal Declarations Using Simple Fields", "title": "Write Concise Object Literal Declarations Using Simple Fields",
"description": [ "description": [
"ES6 adds some nice support for removing boiler-plate from object literals declaration.", "ES6 adds some nice support for easily definining object literals.",
"Consider the following:", "Consider the following code:",
"<code>const getMousePosition = (x, y) => {</code>", "<blockquote>const getMousePosition = (x, y) => ({<br> x: x,<br> y: y<br>});</blockquote>",
"<code> return {</code>", "<code>getMousePosition</code> is a simple function that returns an object containing two fields.",
"<code> x: x,</code>", "ES6 provides the syntactic sugar to eliminate the redundancy of having to write <code>x: x</code>. You can simply write <code>x</code> once, and it will be converted to<code>x: x</code> (or something equivalent) under the hood.",
"<code> y: y</code>", "Here is the same function from above rewritten to use this new syntax:",
"<code> } </code>", "<blockquote>const getMousePosition = (x, y) => ({ x, y });</blockquote>",
"<code>}</code>", "<hr>",
"It's a simple function that returns an object, which has two fields.", "Use simple fields with object literals to create and return a <code>Person</code> object."
"ES6 provides a syntactic sugar to remove the redundancy from having to write x: x. You can simply write x once, and it would convert that to x : x (or some equivalent of it) under the hood.",
"The code now becomes:",
"<code>const getMousePosition = (x, y) => ({x, y})</code>",
"Instructions",
"Use object literal simplification to create and return a Person object"
], ],
"challengeSeed": [ "challengeSeed": [
"/* Alter code below this line */", "// change code below this line",
"const createPerson = (name, age, gender) => {", "const createPerson = (name, age, gender) => {",
" return {", " return {",
" name: name,", " name: name,",
" age: age,", " age: age,",
" gender: gender", " gender: gender",
" }", " };",
"}", "};",
"/* Alter code above this line */", "// change code above this line",
"console.log(createPerson('Zodiac Hasbro', 56, 'male')); // returns a proper object" "console.log(createPerson(\"Zodiac Hasbro\", 56, \"male\")); // returns a proper object"
], ],
"tests": [ "tests": [
"// Test the output is {name: \"Zodiac Hasbro\", age: 56, gender: \"male\"}", "// Test the output is {name: \"Zodiac Hasbro\", age: 56, gender: \"male\"}",
@ -633,29 +616,24 @@
"id": "587d7b8b367417b2b2512b50", "id": "587d7b8b367417b2b2512b50",
"title": "Write Concise Declarative Functions with ES6", "title": "Write Concise Declarative Functions with ES6",
"description": [ "description": [
"With ES6, it's possible to remove the keyword function as follows, from object literals:", "When defining functions within objects in ES5, we have to use the keyword <code>function</code> as follows:",
"<blockquote>const Container extends Component {<br>&nbsp;&nbsp;render: function() {<br>&nbsp;&nbsp;&nbsp;&nbsp;return {<br>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;Container<br>&nbsp;&nbsp;&nbsp;&nbsp;}<br>&nbsp;&nbsp;}<br>}</blockquote>", "<blockquote>const person = {<br> name: \"Taylor\",<br> sayHello: function() {<br> return `Hello! My name is ${this.name}.`;<br> }<br>};</blockquote>",
"We can remove the function keyword and colon (:) altogether - and get this:", "With ES6, You can remove the <code>function</code> keyword and colon altogether when defining functions in objects. Here's an example of this syntax:",
"<blockquote>const Container extends Component {<br>&nbsp;&nbsp;render() {<br>&nbsp;&nbsp;&nbsp;&nbsp;return {<br>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;Container<br>&nbsp;&nbsp;&nbsp;&nbsp;}<br>&nbsp;&nbsp;}<br>}</blockquote>", "<blockquote>const person = {<br> name: \"Taylor\",<br> sayHello() {<br> return `Hello! My name is ${this.name}.`;<br> }<br>};</blockquote>",
"Instructions", "<hr>",
"Use object literal simplification to create and return a Person object" "Refactor the function <code>setGear</code> inside the object <code>bicycle</code> to use the shorthand syntax described above."
], ],
"challengeSeed": [ "challengeSeed": [
"/* Alter code below this line */", "// change code below this line",
"const Person = (name, age, gender) => {", "const bicycle = {",
" return {", " gear: 2,",
" name: name,", " setGear: function(newGear) {",
" age: age,", " this.gear = newGear;",
" gender: gender,",
" sendFriendRequest: function(person){",
" console.log(`Sending request to ${person.name}`);",
" }", " }",
" }", "};",
"}", "// change code above this line",
"/* Alter code above this line */", "bicycle.setGear(3);",
"const zod = Person(\"Zodiac Hasbro\", 56, 'male');", "console.log(bicycle.gear);"
"const yan = Person(\"Yanoshi Mimoto\", 55, 'male');",
"zod.sendFriendRequest(yan);"
], ],
"tests": [ "tests": [
"// Test the output is Sending request to Yanoshi Mimoto", "// Test the output is Sending request to Yanoshi Mimoto",