Refactor ES6 challenge descriptions (#13629)
Rob Weber
Quincy Larson
parent
4e86f6f0d0
commit
8622285ca4
|
|
@ -538,45 +538,33 @@
|
|||
},
|
||||
{
|
||||
"id": "587d7b8a367417b2b2512b4e",
|
||||
"title": "Interpolate a String Using Backquotes",
|
||||
"title": "Create Strings using Template Literals",
|
||||
"description": [
|
||||
"A new feature of ES6 or ES2015, is that it allows you to use string interpolation with back-ticks.",
|
||||
"Consider the code below",
|
||||
"<code>const text = 'Hello World';</code>",
|
||||
"<code>// string interpolation</code>",
|
||||
"<code>const divText = `</code>",
|
||||
"<code><div></code>",
|
||||
"<code> ${text}</code>",
|
||||
"<code></div></code>",
|
||||
"<code>console.log(divText); // prints </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."
|
||||
"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:",
|
||||
"<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>",
|
||||
"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.",
|
||||
"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>."
|
||||
],
|
||||
"challengeSeed": [
|
||||
"const result = {",
|
||||
" success: ['max_length', 'no-amd', 'prefer-arrow-functions'],",
|
||||
" failure: ['no-var', 'var-on-top', 'linebreak'],",
|
||||
" skipped: ['id-blacklist', 'no-dup-keys']",
|
||||
"}",
|
||||
"/* Alter code below this line */",
|
||||
"const resultDisplay = undefined;",
|
||||
"/* Alter code above this line */",
|
||||
" success: [\"max-length\", \"no-amd\", \"prefer-arrow-functions\"],",
|
||||
" failure: [\"no-var\", \"var-on-top\", \"linebreak\"],",
|
||||
" skipped: [\"id-blacklist\", \"no-dup-keys\"]",
|
||||
"};",
|
||||
"// change code below this line",
|
||||
"const resultDisplay = null;",
|
||||
"// change code above this line",
|
||||
"console.log(resultDisplay);",
|
||||
"/**",
|
||||
" * ",
|
||||
" * should look like this",
|
||||
" * <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\">var-on-top</li>",
|
||||
" * <li class=\"text-warning\">linebreak</li>",
|
||||
" **/"
|
||||
],
|
||||
"tests": [
|
||||
|
|
@ -593,32 +581,27 @@
|
|||
"id": "587d7b8a367417b2b2512b4f",
|
||||
"title": "Write Concise Object Literal Declarations Using Simple Fields",
|
||||
"description": [
|
||||
"ES6 adds some nice support for removing boiler-plate from object literals declaration.",
|
||||
"Consider the following:",
|
||||
"<code>const getMousePosition = (x, y) => {</code>",
|
||||
"<code> return {</code>",
|
||||
"<code> x: x,</code>",
|
||||
"<code> y: y</code>",
|
||||
"<code> } </code>",
|
||||
"<code>}</code>",
|
||||
"It's a simple function that returns an object, which has two fields.",
|
||||
"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"
|
||||
"ES6 adds some nice support for easily definining object literals.",
|
||||
"Consider the following code:",
|
||||
"<blockquote>const getMousePosition = (x, y) => ({<br> x: x,<br> y: y<br>});</blockquote>",
|
||||
"<code>getMousePosition</code> is a simple function that returns an object containing two fields.",
|
||||
"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.",
|
||||
"Here is the same function from above rewritten to use this new syntax:",
|
||||
"<blockquote>const getMousePosition = (x, y) => ({ x, y });</blockquote>",
|
||||
"<hr>",
|
||||
"Use simple fields with object literals to create and return a <code>Person</code> object."
|
||||
],
|
||||
"challengeSeed": [
|
||||
"/* Alter code below this line */",
|
||||
"// change code below this line",
|
||||
"const createPerson = (name, age, gender) => {",
|
||||
" return {",
|
||||
" name: name,",
|
||||
" age: age,",
|
||||
" gender: gender",
|
||||
" }",
|
||||
"}",
|
||||
"/* Alter code above this line */",
|
||||
"console.log(createPerson('Zodiac Hasbro', 56, 'male')); // returns a proper object"
|
||||
" return {",
|
||||
" name: name,",
|
||||
" age: age,",
|
||||
" gender: gender",
|
||||
" };",
|
||||
"};",
|
||||
"// change code above this line",
|
||||
"console.log(createPerson(\"Zodiac Hasbro\", 56, \"male\")); // returns a proper object"
|
||||
],
|
||||
"tests": [
|
||||
"// Test the output is {name: \"Zodiac Hasbro\", age: 56, gender: \"male\"}",
|
||||
|
|
@ -633,29 +616,24 @@
|
|||
"id": "587d7b8b367417b2b2512b50",
|
||||
"title": "Write Concise Declarative Functions with ES6",
|
||||
"description": [
|
||||
"With ES6, it's possible to remove the keyword function as follows, from object literals:",
|
||||
"<blockquote>const Container extends Component {<br> render: function() {<br> return {<br> Container<br> }<br> }<br>}</blockquote>",
|
||||
"We can remove the function keyword and colon (:) altogether - and get this:",
|
||||
"<blockquote>const Container extends Component {<br> render() {<br> return {<br> Container<br> }<br> }<br>}</blockquote>",
|
||||
"Instructions",
|
||||
"Use object literal simplification to create and return a Person object"
|
||||
"When defining functions within objects in ES5, we have to use the keyword <code>function</code> as follows:",
|
||||
"<blockquote>const person = {<br> name: \"Taylor\",<br> sayHello: function() {<br> return `Hello! My name is ${this.name}.`;<br> }<br>};</blockquote>",
|
||||
"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 person = {<br> name: \"Taylor\",<br> sayHello() {<br> return `Hello! My name is ${this.name}.`;<br> }<br>};</blockquote>",
|
||||
"<hr>",
|
||||
"Refactor the function <code>setGear</code> inside the object <code>bicycle</code> to use the shorthand syntax described above."
|
||||
],
|
||||
"challengeSeed": [
|
||||
"/* Alter code below this line */",
|
||||
"const Person = (name, age, gender) => {",
|
||||
" return {",
|
||||
" name: name,",
|
||||
" age: age,",
|
||||
" gender: gender,",
|
||||
" sendFriendRequest: function(person){",
|
||||
" console.log(`Sending request to ${person.name}`);",
|
||||
" }",
|
||||
" }",
|
||||
"}",
|
||||
"/* Alter code above this line */",
|
||||
"const zod = Person(\"Zodiac Hasbro\", 56, 'male');",
|
||||
"const yan = Person(\"Yanoshi Mimoto\", 55, 'male');",
|
||||
"zod.sendFriendRequest(yan);"
|
||||
"// change code below this line",
|
||||
"const bicycle = {",
|
||||
" gear: 2,",
|
||||
" setGear: function(newGear) {",
|
||||
" this.gear = newGear;",
|
||||
" }",
|
||||
"};",
|
||||
"// change code above this line",
|
||||
"bicycle.setGear(3);",
|
||||
"console.log(bicycle.gear);"
|
||||
],
|
||||
"tests": [
|
||||
"// Test the output is Sending request to Yanoshi Mimoto",
|
||||
|
|
|
|||
Loading…
Reference in New Issue