feat(seed): reformat seed/challenges JSON via repack script
This commit is contained in:
Alex Chaffee
committed by
Mrugesh Mohapatra
Mrugesh Mohapatra
parent
14c9ed8974
commit
52ca2b9ad6
@ -37,13 +37,13 @@
|
||||
"<hr>",
|
||||
"To pass the test on this challenge, change your <code>h1</code> element's text to say \"Hello World\"."
|
||||
],
|
||||
"challengeSeed": ["<h1>Hello</h1>"],
|
||||
"challengeSeed": [
|
||||
"<h1>Hello</h1>"
|
||||
],
|
||||
"tests": [
|
||||
{
|
||||
"text":
|
||||
"Your <code>h1</code> element should have the text \"Hello World\".",
|
||||
"testString":
|
||||
"assert.isTrue((/hello(\\s)+world/gi).test($('h1').text()), 'Your <code>h1</code> element should have the text \"Hello World\".');"
|
||||
"text": "Your <code>h1</code> element should have the text \"Hello World\".",
|
||||
"testString": "assert.isTrue((/hello(\\s)+world/gi).test($('h1').text()), 'Your <code>h1</code> element should have the text \"Hello World\".');"
|
||||
}
|
||||
],
|
||||
"type": "waypoint",
|
||||
@ -130,7 +130,9 @@
|
||||
"<hr>",
|
||||
"Add an <code>h2</code> tag that says \"CatPhotoApp\" to create a second HTML <code>element</code> below your \"Hello World\" <code>h1</code> element."
|
||||
],
|
||||
"challengeSeed": ["<h1>Hello World</h1>"],
|
||||
"challengeSeed": [
|
||||
"<h1>Hello World</h1>"
|
||||
],
|
||||
"tests": [
|
||||
"assert(($(\"h2\").length > 0), 'message: Create an <code>h2</code> element.');",
|
||||
"assert(code.match(/<\\/h2>/g) && code.match(/<\\/h2>/g).length === code.match(/<h2>/g).length, 'message: Make sure your <code>h2</code> element has a closing tag.');",
|
||||
@ -195,7 +197,10 @@
|
||||
"<hr>",
|
||||
"Create a <code>p</code> element below your <code>h2</code> element, and give it the text \"Hello Paragraph\"."
|
||||
],
|
||||
"challengeSeed": ["<h1>Hello World</h1>", "<h2>CatPhotoApp</h2>"],
|
||||
"challengeSeed": [
|
||||
"<h1>Hello World</h1>",
|
||||
"<h2>CatPhotoApp</h2>"
|
||||
],
|
||||
"tests": [
|
||||
"assert(($(\"p\").length > 0), 'message: Create a <code>p</code> element.');",
|
||||
"assert.isTrue((/hello(\\s)+paragraph/gi).test($(\"p\").text()), 'message: Your <code>p</code> element should have the text \"Hello Paragraph\".');",
|
||||
@ -639,8 +644,7 @@
|
||||
]
|
||||
}
|
||||
},
|
||||
"guideUrl":
|
||||
"https://guide.freecodecamp.org/certificates/add-images-to-your-website"
|
||||
"guideUrl": "https://guide.freecodecamp.org/certificates/add-images-to-your-website"
|
||||
},
|
||||
{
|
||||
"id": "bad87fee1348bd9aedf08816",
|
||||
@ -766,8 +770,7 @@
|
||||
"challengeType": 0,
|
||||
"translations": {
|
||||
"pt-br": {
|
||||
"title":
|
||||
"Crie links para seções internas de uma página com elementos âncora",
|
||||
"title": "Crie links para seções internas de uma página com elementos âncora",
|
||||
"description": [
|
||||
"Além de criar links externos, elementos âncora também podem ser usados para criar links internos, que são links que pulam para diferentes seções dentro de uma mesma página.",
|
||||
"O formato é parecido com um link externo, só que, ao invés de uma URL no atributo <code>href</code>, você usa o símbolo <code>#</code> e uma palavra para descrever a seção para a qual você quer pular.",
|
||||
@ -1449,8 +1452,7 @@
|
||||
]
|
||||
}
|
||||
},
|
||||
"guideUrl":
|
||||
"https://guide.freecodecamp.org/certificates/add-placeholder-text-to-a-text-field"
|
||||
"guideUrl": "https://guide.freecodecamp.org/certificates/add-placeholder-text-to-a-text-field"
|
||||
},
|
||||
{
|
||||
"id": "bad87fee1348bd9aede08830",
|
||||
@ -1618,8 +1620,7 @@
|
||||
]
|
||||
}
|
||||
},
|
||||
"guideUrl":
|
||||
"https://guide.freecodecamp.org/certificates/add-a-submit-button-to-a-form"
|
||||
"guideUrl": "https://guide.freecodecamp.org/certificates/add-a-submit-button-to-a-form"
|
||||
},
|
||||
{
|
||||
"id": "bad87fee1348bd9aedc08830",
|
||||
@ -1696,8 +1697,7 @@
|
||||
]
|
||||
},
|
||||
"ru": {
|
||||
"title":
|
||||
"Используйте HTML5, чтобы сделать заполнение поля обязательным",
|
||||
"title": "Используйте HTML5, чтобы сделать заполнение поля обязательным",
|
||||
"description": [
|
||||
"Вы можете требовать заполнения определённых полей формы, таким образом пользователь не сможет отправить данные формы до их заполнения.",
|
||||
"Например, если бы вы хотели сделать заполнение текстового поля обязательным, вы могли бы добавить слово <code>required</code> внутрь вашего элемента <code>input</code>: <code><input type=\"text\" required></code>",
|
||||
@ -1976,8 +1976,7 @@
|
||||
]
|
||||
},
|
||||
"es": {
|
||||
"title":
|
||||
"Marca botones de radio y casillas de verificación por omisión",
|
||||
"title": "Marca botones de radio y casillas de verificación por omisión",
|
||||
"description": [
|
||||
"Puedes marcar por omisión una casilla de verificación o un botón de radio usando el atributo <code>checked</code>.",
|
||||
"Para ello, sólo tienes que añadir la palabra \"checked\" en el interior de un elemento <code>input</code>. Por ejemplo:",
|
||||
@ -1987,8 +1986,7 @@
|
||||
]
|
||||
},
|
||||
"pt-br": {
|
||||
"title":
|
||||
"Faça botões de opção e caixas de seleção estarem marcados por padrão",
|
||||
"title": "Faça botões de opção e caixas de seleção estarem marcados por padrão",
|
||||
"description": [
|
||||
"Você pode fazer uma caixa de seleção ou botão de opção estar marcado por padrão usando o atributo <code>checked</code>.",
|
||||
"Para fazer isso, apenas insira a palavra \"checked\" em um elemento <code>input</code>. Por exemplo:",
|
||||
@ -2120,7 +2118,7 @@
|
||||
"<hr>",
|
||||
"Add a <code>DOCTYPE</code> tag for HTML5 to the top of the blank HTML document in the code editor. Under it, add opening and closing <code>html</code> tags, which wrap around an <code>h1</code> element. The heading can include any text."
|
||||
],
|
||||
"challengeSeed": ["", "", ""],
|
||||
"challengeSeed": [],
|
||||
"tests": [
|
||||
"assert(code.match(/<!DOCTYPE\\s+?html\\s*?>/gi), 'message: Your code should include a <code><!DOCTYPE html></code> tag.');",
|
||||
"assert($('html').length == 1, 'message: There should be one <code>html</code> element.');",
|
||||
|
||||
@ -68,7 +68,6 @@
|
||||
""
|
||||
]
|
||||
]
|
||||
|
||||
}
|
||||
}
|
||||
},
|
||||
|
||||
@ -36,9 +36,7 @@
|
||||
"<hr>",
|
||||
"Try creating one of each type of comment."
|
||||
],
|
||||
"challengeSeed": [
|
||||
""
|
||||
],
|
||||
"challengeSeed": [],
|
||||
"solutions": [
|
||||
"// Fake Comment\n/* Another Comment */"
|
||||
],
|
||||
@ -1054,7 +1052,9 @@
|
||||
" }",
|
||||
"})();"
|
||||
],
|
||||
"solutions": ["var myStr = \"I am a \\\"double quoted\\\" string inside \\\"double quotes\\\".\";"],
|
||||
"solutions": [
|
||||
"var myStr = \"I am a \\\"double quoted\\\" string inside \\\"double quotes\\\".\";"
|
||||
],
|
||||
"tests": [
|
||||
"assert(code.match(/\\\\\"/g).length === 4 && code.match(/[^\\\\]\"/g).length === 2, 'message: You should use two double quotes (<code>"</code>) and four escaped double quotes (<code>\"</code>).');",
|
||||
"assert(myStr === \"I am a \\\"double quoted\\\" string inside \\\"double quotes\\\".\", 'message: Variable myStr should contain the string: <code>I am a \"double quoted\" string inside \"double quotes\".</code>');"
|
||||
@ -1102,7 +1102,9 @@
|
||||
"tail": [
|
||||
"(function() { return \"myStr = \" + myStr; })();"
|
||||
],
|
||||
"solutions": ["var myStr = '<a href=\"http://www.example.com\" target=\"_blank\">Link</a>';"],
|
||||
"solutions": [
|
||||
"var myStr = '<a href=\"http://www.example.com\" target=\"_blank\">Link</a>';"
|
||||
],
|
||||
"tests": [
|
||||
"assert(!/\\\\/g.test(code) && myStr.match('\\\\s*<a href\\\\s*=\\\\s*\"http://www.example.com\"\\\\s*target\\\\s*=\\\\s*\"_blank\">\\\\s*Link\\\\s*</a>\\\\s*'), 'message: Remove all the <code>backslashes</code> (<code>\\</code>)');",
|
||||
"assert(code.match(/\"/g).length === 4 && code.match(/'/g).length === 2, 'message: You should have two single quotes <code>'</code> and four double quotes <code>"</code>');"
|
||||
@ -1393,7 +1395,7 @@
|
||||
]
|
||||
}
|
||||
},
|
||||
"guideUrl":"https://guide.freecodecamp.org/certificates/appending-variables-to-strings"
|
||||
"guideUrl": "https://guide.freecodecamp.org/certificates/appending-variables-to-strings"
|
||||
},
|
||||
{
|
||||
"id": "bd7123c9c448eddfaeb5bdef",
|
||||
@ -2759,7 +2761,7 @@
|
||||
]
|
||||
}
|
||||
},
|
||||
"guideUrl":"https://guide.freecodecamp.org/certificates/assignment-with-a-returned-value"
|
||||
"guideUrl": "https://guide.freecodecamp.org/certificates/assignment-with-a-returned-value"
|
||||
},
|
||||
{
|
||||
"id": "56533eb9ac21ba0edf2244c6",
|
||||
@ -3931,7 +3933,7 @@
|
||||
]
|
||||
}
|
||||
},
|
||||
"guideUrl":"https://guide.freecodecamp.org/certificates/adding-a-default-option-in-switch-statements"
|
||||
"guideUrl": "https://guide.freecodecamp.org/certificates/adding-a-default-option-in-switch-statements"
|
||||
},
|
||||
{
|
||||
"id": "56533eb9ac21ba0edf2244df",
|
||||
@ -4086,9 +4088,7 @@
|
||||
"// Change these values to test",
|
||||
"isLess(10, 15);"
|
||||
],
|
||||
"tail": [
|
||||
""
|
||||
],
|
||||
"tail": [],
|
||||
"solutions": [
|
||||
"function isLess(a, b) {\n return a < b;\n}"
|
||||
],
|
||||
@ -4142,9 +4142,7 @@
|
||||
"// Change values below to test your code",
|
||||
"abTest(2,2);"
|
||||
],
|
||||
"tail": [
|
||||
""
|
||||
],
|
||||
"tail": [],
|
||||
"solutions": [
|
||||
"function abTest(a, b) {\n if(a < 0 || b < 0) {\n return undefined;\n } \n return Math.round(Math.pow(Math.sqrt(a) + Math.sqrt(b), 2));\n}"
|
||||
],
|
||||
@ -4464,7 +4462,7 @@
|
||||
]
|
||||
}
|
||||
},
|
||||
"guideUrl":"https://guide.freecodecamp.org/certificates/accessing-objects-properties-with-variables"
|
||||
"guideUrl": "https://guide.freecodecamp.org/certificates/accessing-objects-properties-with-variables"
|
||||
},
|
||||
{
|
||||
"id": "56bbb991ad1ed5201cd392d1",
|
||||
@ -4756,9 +4754,7 @@
|
||||
"// Test your code by modifying these values",
|
||||
"checkObj(\"gift\");"
|
||||
],
|
||||
"tail": [
|
||||
""
|
||||
],
|
||||
"tail": [],
|
||||
"solutions": [
|
||||
"var myObj = {\n gift: \"pony\",\n pet: \"kitten\",\n bed: \"sleigh\"\n};\nfunction checkObj(checkProp) {\n if(myObj.hasOwnProperty(checkProp)) {\n return myObj[checkProp];\n } else {\n return \"Not Found\";\n }\n}"
|
||||
],
|
||||
@ -4906,7 +4902,7 @@
|
||||
]
|
||||
}
|
||||
},
|
||||
"guideUrl":"https://guide.freecodecamp.org/certificates/accessing-nested-objects-in-json"
|
||||
"guideUrl": "https://guide.freecodecamp.org/certificates/accessing-nested-objects-in-json"
|
||||
},
|
||||
{
|
||||
"id": "56533eb9ac21ba0edf2244cd",
|
||||
@ -4974,7 +4970,7 @@
|
||||
]
|
||||
}
|
||||
},
|
||||
"guideUrl":"https://guide.freecodecamp.org/certificates/access-array-data-with-indexes"
|
||||
"guideUrl": "https://guide.freecodecamp.org/certificates/access-array-data-with-indexes"
|
||||
},
|
||||
{
|
||||
"id": "56533eb9ac21ba0edf2244cf",
|
||||
@ -5379,9 +5375,7 @@
|
||||
"multiplyAll([[1,2],[3,4],[5,6,7]]);",
|
||||
""
|
||||
],
|
||||
"tail": [
|
||||
""
|
||||
],
|
||||
"tail": [],
|
||||
"solutions": [
|
||||
"function multiplyAll(arr) {\n var product = 1;\n for (var i = 0; i < arr.length; i++) {\n for (var j = 0; j < arr[i].length; j++) {\n product *= arr[i][j];\n }\n }\n return product;\n}\n\nmultiplyAll([[1,2],[3,4],[5,6,7]]);"
|
||||
],
|
||||
@ -5450,8 +5444,7 @@
|
||||
],
|
||||
"type": "waypoint",
|
||||
"challengeType": 1,
|
||||
"translations": {
|
||||
}
|
||||
"translations": {}
|
||||
},
|
||||
{
|
||||
"id": "5688e62ea601b2482ff8422b",
|
||||
|
||||
@ -84,7 +84,6 @@
|
||||
"This exercise is designed to illustrate the difference between how <code>var</code> and <code>let</code> keywords assign scope to the declared variable. When programming a function similar to the one used in this exercise, it is often better to use different variable names to avoid confusion."
|
||||
],
|
||||
"challengeSeed": [
|
||||
"",
|
||||
"function checkScope() {",
|
||||
"\"use strict\";",
|
||||
" var i = \"function scope\";",
|
||||
|
||||
@ -13,7 +13,8 @@
|
||||
"",
|
||||
"Functional programming is an approach to software development based around the evaluation of functions. Like mathematics, functions in programming map input to output to produce a result. You can combine basic functions in many ways to build more and more complex programs.<br><br>Functional programming follows a few core principles:<br><br><ul><li>Functions are independent from the state of the program or global variables. They only depend on the arguments passed into them to make a calculation</li><br><li>Functions try to limit any changes to the state of the program and avoid changes to the global objects holding data</li><br><li>Functions have minimal side effects in the program</li></ul><br><br>The functional programming software development approach breaks a program into small, testable parts. This section covers basic functional programming principles in JavaScript.",
|
||||
""
|
||||
] ],
|
||||
]
|
||||
],
|
||||
"releasedOn": "",
|
||||
"challengeSeed": [],
|
||||
"tests": [],
|
||||
|
||||
@ -1056,7 +1056,7 @@
|
||||
]
|
||||
}
|
||||
},
|
||||
"guideUrl":"https://guide.freecodecamp.org/certificates/arguments-optional"
|
||||
"guideUrl": "https://guide.freecodecamp.org/certificates/arguments-optional"
|
||||
},
|
||||
{
|
||||
"id": "a2f1d72d9b908d0bd72bb9f6",
|
||||
|
||||
@ -168,9 +168,7 @@
|
||||
"// Change the inputs below to test",
|
||||
"rot13(\"SERR PBQR PNZC\");"
|
||||
],
|
||||
"tail": [
|
||||
""
|
||||
],
|
||||
"tail": [],
|
||||
"solutions": [
|
||||
"var lookup = {\n 'A': 'N','B': 'O','C': 'P','D': 'Q',\n 'E': 'R','F': 'S','G': 'T','H': 'U',\n 'I': 'V','J': 'W','K': 'X','L': 'Y',\n 'M': 'Z','N': 'A','O': 'B','P': 'C',\n 'Q': 'D','R': 'E','S': 'F','T': 'G',\n 'U': 'H','V': 'I','W': 'J','X': 'K',\n 'Y': 'L','Z': 'M' \n};\n\nfunction rot13(encodedStr) {\n var codeArr = encodedStr.split(\"\"); // String to Array\n var decodedArr = []; // Your Result goes here\n // Only change code below this line\n \n decodedArr = codeArr.map(function(letter) {\n if(lookup.hasOwnProperty(letter)) {\n letter = lookup[letter];\n }\n return letter;\n });\n\n // Only change code above this line\n return decodedArr.join(\"\"); // Array to String\n}"
|
||||
],
|
||||
|
||||
@ -136,7 +136,6 @@
|
||||
"Modify the <code>dog.sayLegs</code> method to remove any references to <code>dog</code>. Use the <code>duck</code> example for guidance."
|
||||
],
|
||||
"challengeSeed": [
|
||||
"",
|
||||
"let dog = {",
|
||||
" name: \"Spot\",",
|
||||
" numLegs: 4,",
|
||||
@ -171,11 +170,7 @@
|
||||
"<hr>",
|
||||
"Create a <code>constructor</code>, <code>Dog</code>, with properties <code>name</code>, <code>color</code>, and <code>numLegs</code> that are set to a string, a string, and a number, respectively."
|
||||
],
|
||||
"challengeSeed": [
|
||||
"",
|
||||
"",
|
||||
""
|
||||
],
|
||||
"challengeSeed": [],
|
||||
"tests": [
|
||||
"assert(typeof (new Dog()).name === 'string', 'message: <code>Dog</code> should have a <code>name</code> property set to a string.');",
|
||||
"assert(typeof (new Dog()).color === 'string', 'message: <code>Dog</code> should have a <code>color</code> property set to a string.');",
|
||||
|
||||
@ -1894,11 +1894,7 @@
|
||||
"To start with, create an <code>h3</code> element, with the text <code>jQuery Playground</code>.",
|
||||
"Color your <code>h3</code> element with the <code>text-primary</code> Bootstrap class, and center it with the <code>text-center</code> Bootstrap class."
|
||||
],
|
||||
"challengeSeed": [
|
||||
"",
|
||||
"",
|
||||
""
|
||||
],
|
||||
"challengeSeed": [],
|
||||
"tests": [
|
||||
"assert($(\"h3\") && $(\"h3\").length > 0, 'message: Add a <code>h3</code> element to your page.');",
|
||||
"assert(code.match(/<\\/h3>/g) && code.match(/<h3/g) && code.match(/<\\/h3>/g).length === code.match(/<h3/g).length, 'message: Make sure your <code>h3</code> element has a closing tag.');",
|
||||
|
||||
@ -47,8 +47,6 @@
|
||||
"This is important because without your <code>document ready function</code>, your code may run before your HTML is rendered, which would cause bugs."
|
||||
],
|
||||
"challengeSeed": [
|
||||
"",
|
||||
"",
|
||||
"<!-- Only change code above this line. -->",
|
||||
"",
|
||||
"<div class=\"container-fluid\">",
|
||||
|
||||
@ -1,5 +1,4 @@
|
||||
{
|
||||
|
||||
"name": "React",
|
||||
"order": 5,
|
||||
"time": "5 hours",
|
||||
@ -292,7 +291,8 @@
|
||||
" // change code above this line",
|
||||
"}"
|
||||
],
|
||||
"tail": "ReactDOM.render(<MyComponent />, document.getElementById('root'))" }
|
||||
"tail": "ReactDOM.render(<MyComponent />, document.getElementById('root'))"
|
||||
}
|
||||
},
|
||||
"tests": [
|
||||
"assert((function() { const mockedComponent = Enzyme.mount(React.createElement(MyComponent)); return mockedComponent.length === 1; })(), 'message: <code>MyComponent</code> should return JSX.');",
|
||||
@ -300,7 +300,7 @@
|
||||
"assert((function() { const mockedComponent = Enzyme.mount(React.createElement(MyComponent)); return mockedComponent.find('div').text() !== ''; })(), 'message: The <code>div</code> element should contain a string of text.');"
|
||||
],
|
||||
"solutions": [
|
||||
"\nconst MyComponent = function() {\n // change code below this line\n return (\n <div>\n Demo Solution\n </div>\n );\n // change code above this line\n}"
|
||||
"const MyComponent = function() {\n // change code below this line\n return (\n <div>\n Demo Solution\n </div>\n );\n // change code above this line\n}"
|
||||
],
|
||||
"challengeType": 6,
|
||||
"isRequired": false,
|
||||
@ -348,7 +348,7 @@
|
||||
"assert(Enzyme.shallow(React.createElement(MyComponent)).html() === '<div><h1>Hello React!</h1></div>', 'message: The <code>h1</code> header should contain the string <code>Hello React!</code>.');"
|
||||
],
|
||||
"solutions": [
|
||||
"\nclass MyComponent extends React.Component {\n constructor(props) {\n super(props);\n }\n render() {\n // change code below this line\n return (\n <div>\n <h1>Hello React!</h1>\n </div>\n );\n // change code above this line\n }\n};"
|
||||
"class MyComponent extends React.Component {\n constructor(props) {\n super(props);\n }\n render() {\n // change code below this line\n return (\n <div>\n <h1>Hello React!</h1>\n </div>\n );\n // change code above this line\n }\n};"
|
||||
],
|
||||
"challengeType": 6,
|
||||
"isRequired": false,
|
||||
@ -684,7 +684,7 @@
|
||||
"assert((function() { const html = document.getElementById('challenge-node').childNodes[0].innerHTML; return (html === '<h1>Types of Food:</h1><div><h2>Fruits:</h2><h4>Non-Citrus:</h4><ul><li>Apples</li><li>Blueberries</li><li>Strawberries</li><li>Bananas</li></ul><h4>Citrus:</h4><ul><li>Lemon</li><li>Lime</li><li>Orange</li><li>Grapefruit</li></ul></div><div><h2>Vegetables:</h2><ul><li>Brussel Sprouts</li><li>Broccoli</li><li>Squash</li></ul></div>'); })(), 'message: The <code>TypesOfFood</code> component should render to the DOM within the <code>div</code> with the id <code>challenge-node</code>.');"
|
||||
],
|
||||
"solutions": [
|
||||
"\nclass TypesOfFood extends React.Component {\n constructor(props) {\n super(props);\n }\n render() {\n return (\n <div>\n <h1>Types of Food:</h1>\n {/* change code below this line */}\n <Fruits />\n <Vegetables />\n {/* change code above this line */}\n </div>\n );\n }\n};\n\n// change code below this line\nReactDOM.render(<TypesOfFood />, document.getElementById('challenge-node'));"
|
||||
"class TypesOfFood extends React.Component {\n constructor(props) {\n super(props);\n }\n render() {\n return (\n <div>\n <h1>Types of Food:</h1>\n {/* change code below this line */}\n <Fruits />\n <Vegetables />\n {/* change code above this line */}\n </div>\n );\n }\n};\n\n// change code below this line\nReactDOM.render(<TypesOfFood />, document.getElementById('challenge-node'));"
|
||||
],
|
||||
"challengeType": 6,
|
||||
"isRequired": false,
|
||||
@ -782,7 +782,7 @@
|
||||
"assert((function() { const mockedComponent = Enzyme.mount(React.createElement(Calendar)); return mockedComponent.find('p').html().includes(Date().substr(3)); })(), 'message: The <code>CurrentDate</code> component should render the value from the <code>date</code> prop in the <code>p</code> tag.');"
|
||||
],
|
||||
"solutions": [
|
||||
"\nconst CurrentDate = (props) => {\n return (\n <div>\n { /* change code below this line */ }\n <p>The current date is: {props.date}</p>\n { /* change code above this line */ }\n </div>\n );\n};\n\nclass Calendar extends React.Component {\n constructor(props) {\n super(props);\n }\n render() {\n return (\n <div>\n <h3>What date is it?</h3>\n { /* change code below this line */ }\n <CurrentDate date={Date()} />\n { /* change code above this line */ }\n </div>\n );\n }\n};"
|
||||
"const CurrentDate = (props) => {\n return (\n <div>\n { /* change code below this line */ }\n <p>The current date is: {props.date}</p>\n { /* change code above this line */ }\n </div>\n );\n};\n\nclass Calendar extends React.Component {\n constructor(props) {\n super(props);\n }\n render() {\n return (\n <div>\n <h3>What date is it?</h3>\n { /* change code below this line */ }\n <CurrentDate date={Date()} />\n { /* change code above this line */ }\n </div>\n );\n }\n};"
|
||||
],
|
||||
"challengeType": 6,
|
||||
"isRequired": false,
|
||||
@ -1177,7 +1177,7 @@
|
||||
"assert((function() { const mockedComponent = Enzyme.mount(React.createElement(StatefulComponent)); const initialState = mockedComponent.state(); return mockedComponent.find('h1').text() === initialState.name; })(), 'message: The property <code>name</code> in the state of <code>StatefulComponent</code> should render in the <code>h1</code> element.');"
|
||||
],
|
||||
"solutions": [
|
||||
"\nclass StatefulComponent extends React.Component {\n constructor(props) {\n super(props);\n this.state = {\n name: 'freeCodeCamp!'\n }\n }\n render() {\n return (\n <div>\n <h1>{this.state.name}</h1>\n </div>\n );\n }\n};"
|
||||
"class StatefulComponent extends React.Component {\n constructor(props) {\n super(props);\n this.state = {\n name: 'freeCodeCamp!'\n }\n }\n render() {\n return (\n <div>\n <h1>{this.state.name}</h1>\n </div>\n );\n }\n};"
|
||||
],
|
||||
"challengeType": 6,
|
||||
"isRequired": false,
|
||||
@ -2058,7 +2058,7 @@
|
||||
"tests": [
|
||||
"assert((function() { const mockedComponent = Enzyme.mount(React.createElement(Controller)); return mockedComponent.find('Controller').length === 1 && mockedComponent.find('Dialog').length === 1; })(), 'message: The <code>Controller</code> component should render the <code>Dialog</code> component as a child.');",
|
||||
"assert((function() { const lifecycleChild = React.createElement(Dialog).type.prototype.componentWillReceiveProps.toString().replace(/ /g,''); return lifecycleChild.includes('console.log') && lifecycleChild.includes('this.props') })(), 'message: The <code>componentWillReceiveProps</code> method in the <code>Dialog</code> component should log <code>this.props</code> to the console.');",
|
||||
"assert((function() { const lifecycleChild = React.createElement(Dialog).type.prototype.componentWillReceiveProps.toString().replace(/ /g,''); const nextPropsAsParameterTest = \/componentWillReceiveProps(| *?= *?)(\\(|)nextProps(\\)|)( *?=> *?{| *?{|{)\/; const nextPropsInConsoleLogTest = \/console\\.log\\(.*?nextProps\\b.*?\\)\/; return ( lifecycleChild.includes('console.log') && nextPropsInConsoleLogTest.test(lifecycleChild) && nextPropsAsParameterTest.test(lifecycleChild) ); })(), 'message: The <code>componentWillReceiveProps</code> method in the <code>Dialog</code> component should log <code>nextProps</code> to the console.');",
|
||||
"assert((function() { const lifecycleChild = React.createElement(Dialog).type.prototype.componentWillReceiveProps.toString().replace(/ /g,''); const nextPropsAsParameterTest = /componentWillReceiveProps(| *?= *?)(\\(|)nextProps(\\)|)( *?=> *?{| *?{|{)/; const nextPropsInConsoleLogTest = /console\\.log\\(.*?nextProps\\b.*?\\)/; return ( lifecycleChild.includes('console.log') && nextPropsInConsoleLogTest.test(lifecycleChild) && nextPropsAsParameterTest.test(lifecycleChild) ); })(), 'message: The <code>componentWillReceiveProps</code> method in the <code>Dialog</code> component should log <code>nextProps</code> to the console.');",
|
||||
"assert((function() { const lifecycleChild = React.createElement(Dialog).type.prototype.componentDidUpdate.toString().replace(/ /g,''); return lifecycleChild.length !== 'undefined' && lifecycleChild.includes('console.log'); })(), 'message: The <code>Dialog</code> component should call the <code>componentDidUpdate</code> method and log a message to the console.');"
|
||||
],
|
||||
"solutions": [
|
||||
@ -2186,7 +2186,7 @@
|
||||
"assert((function() { const mockedComponent = Enzyme.mount(React.createElement(Colorful)); return (mockedComponent.children().props().style.fontSize === 72 || mockedComponent.children().props().style.fontSize === '72' || mockedComponent.children().props().style.fontSize === '72px'); })(), 'message: The <code>div</code> element should have a font size of <code>72px</code>.');"
|
||||
],
|
||||
"solutions": [
|
||||
"\nclass Colorful extends React.Component {\n render() {\n return (\n <div style={{color: \"red\", fontSize: 72}}>Big Red</div>\n );\n }\n};\n"
|
||||
"class Colorful extends React.Component {\n render() {\n return (\n <div style={{color: \"red\", fontSize: 72}}>Big Red</div>\n );\n }\n};\n"
|
||||
],
|
||||
"challengeType": 6,
|
||||
"isRequired": false,
|
||||
@ -2235,7 +2235,7 @@
|
||||
"assert((function() { const mockedComponent = Enzyme.shallow(React.createElement(Colorful)); return (mockedComponent.props().style.color === \"purple\" && mockedComponent.props().style.fontSize === 40 && mockedComponent.props().style.border === \"2px solid purple\"); })(), 'message: The <code>div</code> element should have its styles defined by the <code>styles</code> object.');"
|
||||
],
|
||||
"solutions": [
|
||||
"\nconst styles = {\n color: \"purple\",\n fontSize: 40,\n border: \"2px solid purple\"\n};\n// change code above this line\nclass Colorful extends React.Component {\n render() {\n // change code below this line\n return (\n <div style={styles}>Style Me!</div>\n // change code above this line\n );\n }\n};\n"
|
||||
"const styles = {\n color: \"purple\",\n fontSize: 40,\n border: \"2px solid purple\"\n};\n// change code above this line\nclass Colorful extends React.Component {\n render() {\n // change code below this line\n return (\n <div style={styles}>Style Me!</div>\n // change code above this line\n );\n }\n};\n"
|
||||
],
|
||||
"challengeType": 6,
|
||||
"isRequired": false,
|
||||
@ -2346,7 +2346,7 @@
|
||||
"async () => { const waitForIt = (fn) => new Promise((resolve, reject) => setTimeout(() => resolve(fn()), 250)); const comp = Enzyme.mount(React.createElement(MagicEightBall)); const simulate = () => { comp.find('input').simulate('change', { target: { value: 'test?' }}); comp.find('button').simulate('click'); }; const result = () => comp.find('p').text(); const _1 = () => { simulate(); return waitForIt(() => result()) }; const _2 = () => { simulate(); return waitForIt(() => result()) }; const _3 = () => { simulate(); return waitForIt(() => result()) }; const _4 = () => { simulate(); return waitForIt(() => result()) }; const _5 = () => { simulate(); return waitForIt(() => result()) }; const _6 = () => { simulate(); return waitForIt(() => result()) }; const _7 = () => { simulate(); return waitForIt(() => result()) }; const _8 = () => { simulate(); return waitForIt(() => result()) }; const _9 = () => { simulate(); return waitForIt(() => result()) }; const _10 = () => { simulate(); return waitForIt(() => result()) }; const _1_val = await _1(); const _2_val = await _2(); const _3_val = await _3(); const _4_val = await _4(); const _5_val = await _5(); const _6_val = await _6(); const _7_val = await _7(); const _8_val = await _8(); const _9_val = await _9(); const _10_val = await _10(); const actualAnswers = [_1_val, _2_val, _3_val, _4_val, _5_val, _6_val, _7_val, _8_val, _9_val, _10_val]; const hasIndex = actualAnswers.filter((answer, i) => possibleAnswers.indexOf(answer) !== -1); const notAllEqual = new Set(actualAnswers); assert(notAllEqual.size > 1 && hasIndex.length === 10, 'message: When text is entered into the <code>input</code> element and the button is clicked, the <code>MagicEightBall</code> component should return a <code>p</code> element that contains a random element from the <code>possibleAnswers</code> array.');}"
|
||||
],
|
||||
"solutions": [
|
||||
"\nconst inputStyle = {\n width: 235,\n margin: 5\n}\n\nclass MagicEightBall extends React.Component {\n constructor(props) {\n super(props);\n this.state = {\n userInput: '',\n randomIndex: ''\n }\n this.ask = this.ask.bind(this);\n this.handleChange = this.handleChange.bind(this);\n }\n ask() {\n if (this.state.userInput) {\n this.setState({\n randomIndex: Math.floor(Math.random() * 20),\n userInput: ''\n });\n }\n }\n handleChange(event) {\n this.setState({\n userInput: event.target.value\n });\n }\n render() {\n const possibleAnswers = [\n \"It is certain\", \"It is decidedly so\", \"Without a doubt\",\n \"Yes, definitely\", \"You may rely on it\", \"As I see it, yes\",\n \"Outlook good\", \"Yes\", \"Signs point to yes\", \"Reply hazy try again\",\n \"Ask again later\", \"Better not tell you now\", \"Cannot predict now\",\n \"Concentrate and ask again\", \"Don't count on it\", \"My reply is no\",\n \"My sources say no\", \"Outlook not so good\",\"Very doubtful\", \"Most likely\"\n ];\n const answer = possibleAnswers[this.state.randomIndex];\n return (\n <div>\n <input\n type=\"text\"\n value={this.state.userInput}\n onChange={this.handleChange}\n style={inputStyle} /><br />\n <button onClick={this.ask}>Ask the Magic Eight Ball!</button><br />\n <h3>Answer:</h3>\n <p>\n {answer}\n </p>\n </div>\n );\n }\n};"
|
||||
"const inputStyle = {\n width: 235,\n margin: 5\n}\n\nclass MagicEightBall extends React.Component {\n constructor(props) {\n super(props);\n this.state = {\n userInput: '',\n randomIndex: ''\n }\n this.ask = this.ask.bind(this);\n this.handleChange = this.handleChange.bind(this);\n }\n ask() {\n if (this.state.userInput) {\n this.setState({\n randomIndex: Math.floor(Math.random() * 20),\n userInput: ''\n });\n }\n }\n handleChange(event) {\n this.setState({\n userInput: event.target.value\n });\n }\n render() {\n const possibleAnswers = [\n \"It is certain\", \"It is decidedly so\", \"Without a doubt\",\n \"Yes, definitely\", \"You may rely on it\", \"As I see it, yes\",\n \"Outlook good\", \"Yes\", \"Signs point to yes\", \"Reply hazy try again\",\n \"Ask again later\", \"Better not tell you now\", \"Cannot predict now\",\n \"Concentrate and ask again\", \"Don't count on it\", \"My reply is no\",\n \"My sources say no\", \"Outlook not so good\",\"Very doubtful\", \"Most likely\"\n ];\n const answer = possibleAnswers[this.state.randomIndex];\n return (\n <div>\n <input\n type=\"text\"\n value={this.state.userInput}\n onChange={this.handleChange}\n style={inputStyle} /><br />\n <button onClick={this.ask}>Ask the Magic Eight Ball!</button><br />\n <h3>Answer:</h3>\n <p>\n {answer}\n </p>\n </div>\n );\n }\n};"
|
||||
],
|
||||
"challengeType": 6,
|
||||
"isRequired": false,
|
||||
@ -2545,7 +2545,7 @@
|
||||
"assert(new RegExp(/(\\s|;)if(\\s|\\()/).test(Enzyme.mount(React.createElement(CheckUserAge)).instance().render.toString()) === false, 'message: Your code should not contain any <code>if/else</code> statements.');"
|
||||
],
|
||||
"solutions": [
|
||||
"\nconst inputStyle = {\n width: 235,\n margin: 5\n}\n\nclass CheckUserAge extends React.Component {\n constructor(props) {\n super(props);\n this.state = {\n userAge: '',\n input: ''\n }\n this.submit = this.submit.bind(this);\n this.handleChange = this.handleChange.bind(this);\n }\n handleChange(e) {\n this.setState({\n input: e.target.value,\n userAge: ''\n });\n }\n submit() {\n this.setState({\n userAge: this.state.input\n });\n }\n render() {\n const buttonOne = <button onClick={this.submit}>Submit</button>;\n const buttonTwo = <button>You May Enter</button>;\n const buttonThree = <button>You Shall Not Pass</button>;\n return (\n <div>\n <h3>Enter Your Age to Continue</h3>\n <input\n style={inputStyle}\n type=\"number\"\n value={this.state.input}\n onChange={this.handleChange} /><br />\n {\n this.state.userAge === '' ?\n buttonOne :\n this.state.userAge >= 18 ?\n buttonTwo :\n buttonThree\n }\n </div>\n );\n }\n};"
|
||||
"const inputStyle = {\n width: 235,\n margin: 5\n}\n\nclass CheckUserAge extends React.Component {\n constructor(props) {\n super(props);\n this.state = {\n userAge: '',\n input: ''\n }\n this.submit = this.submit.bind(this);\n this.handleChange = this.handleChange.bind(this);\n }\n handleChange(e) {\n this.setState({\n input: e.target.value,\n userAge: ''\n });\n }\n submit() {\n this.setState({\n userAge: this.state.input\n });\n }\n render() {\n const buttonOne = <button onClick={this.submit}>Submit</button>;\n const buttonTwo = <button>You May Enter</button>;\n const buttonThree = <button>You Shall Not Pass</button>;\n return (\n <div>\n <h3>Enter Your Age to Continue</h3>\n <input\n style={inputStyle}\n type=\"number\"\n value={this.state.input}\n onChange={this.handleChange} /><br />\n {\n this.state.userAge === '' ?\n buttonOne :\n this.state.userAge >= 18 ?\n buttonTwo :\n buttonThree\n }\n </div>\n );\n }\n};"
|
||||
],
|
||||
"challengeType": 6,
|
||||
"isRequired": false,
|
||||
@ -2691,7 +2691,7 @@
|
||||
"async () => { const waitForIt = (fn) => new Promise((resolve, reject) => setTimeout(() => resolve(fn()), 100)); const mockedComponent = Enzyme.mount(React.createElement(GateKeeper)); const simulateChange = (el, value) => el.simulate('change', {target: {value}}); let initialStyle = mockedComponent.find('input').props().style.border; const state_1 = () => { mockedComponent.setState({input: 'this is 15 char' }); return waitForIt(() => mockedComponent.find('input').props().style.border )}; const state_2 = () => { mockedComponent.setState({input: 'A very long string longer than 15 characters.' }); return waitForIt(() => mockedComponent.find('input').props().style.border )}; const style_1 = await state_1(); const style_2 = await state_2(); assert(initialStyle === '1px solid black' && style_1 === '1px solid black' && style_2 === '3px solid red', 'message: The <code>input</code> tag should be styled with a border of <code>3px solid red</code> if the input value in state is longer than 15 characters.'); }; "
|
||||
],
|
||||
"solutions": [
|
||||
"\nclass GateKeeper extends React.Component {\n constructor(props) {\n super(props);\n this.state = {\n input: ''\n };\n this.handleChange = this.handleChange.bind(this);\n }\n handleChange(event) {\n this.setState({ input: event.target.value })\n }\n render() {\n let inputStyle = {\n border: '1px solid black'\n };\n if (this.state.input.length > 15) {\n inputStyle.border = '3px solid red';\n };\n return (\n <div>\n <h3>Don't Type Too Much:</h3>\n <input\n type=\"text\"\n style={inputStyle}\n value={this.state.input}\n onChange={this.handleChange} />\n </div>\n );\n }\n};"
|
||||
"class GateKeeper extends React.Component {\n constructor(props) {\n super(props);\n this.state = {\n input: ''\n };\n this.handleChange = this.handleChange.bind(this);\n }\n handleChange(event) {\n this.setState({ input: event.target.value })\n }\n render() {\n let inputStyle = {\n border: '1px solid black'\n };\n if (this.state.input.length > 15) {\n inputStyle.border = '3px solid red';\n };\n return (\n <div>\n <h3>Don't Type Too Much:</h3>\n <input\n type=\"text\"\n style={inputStyle}\n value={this.state.input}\n onChange={this.handleChange} />\n </div>\n );\n }\n};"
|
||||
],
|
||||
"challengeType": 6,
|
||||
"isRequired": false,
|
||||
@ -2772,7 +2772,7 @@
|
||||
"async () => { const waitForIt = (fn) => new Promise((resolve, reject) => setTimeout(() => resolve(fn()), 100)); const mockedComponent = Enzyme.mount(React.createElement(MyToDoList)); const simulateChange = (el, value) => el.simulate('change', {target: {value}}); const state_1 = () => { return waitForIt(() => mockedComponent.find('ul').find('li'))}; const setInput = () => { return waitForIt(() => simulateChange(mockedComponent.find('textarea'), \"testA, testB, testC\"))}; const click = () => { return waitForIt(() => mockedComponent.find('button').simulate('click'))}; const state_2 = () => { return waitForIt(() => { const nodes = mockedComponent.find('ul').find('li'); return { nodes, text: nodes.reduce((t, n) => t + n.text(), '') }; })}; const setInput_2 = () => { return waitForIt(() => simulateChange(mockedComponent.find('textarea'), \"t1, t2, t3, t4, t5, t6\"))}; const click_1 = () => { return waitForIt(() => mockedComponent.find('button').simulate('click'))}; const state_3 = () => { return waitForIt(() => { const nodes = mockedComponent.find('ul').find('li'); return { nodes, text: nodes.reduce((t, n) => t + n.text(), '') }; })}; const awaited_state_1 = await state_1(); const awaited_setInput = await setInput(); const awaited_click = await click(); const awaited_state_2 = await state_2(); const awaited_setInput_2 = await setInput_2(); const awaited_click_1 = await click_1(); const awaited_state_3 = await state_3(); assert(awaited_state_1.length === 0 && awaited_state_2.nodes.length === 3 && awaited_state_3.nodes.length === 6 && awaited_state_2.text === 'testA testB testC' && awaited_state_3.text === 't1 t2 t3 t4 t5 t6', 'message: When the <code>Create List</code> button is clicked, the <code>MyToDoList</code> component should dynamically return an unordered list that contains a list item element for every item of a comma-separated list entered into the <code>textarea</code> element.'); }; "
|
||||
],
|
||||
"solutions": [
|
||||
"\nconst textAreaStyles = {\n width: 235,\n margin: 5\n};\n\nclass MyToDoList extends React.Component {\n constructor(props) {\n super(props);\n this.state = {\n toDoList: [],\n userInput: ''\n }\n this.handleSubmit = this.handleSubmit.bind(this);\n this.handleChange = this.handleChange.bind(this);\n }\n handleSubmit() {\n const itemsArray = this.state.userInput.split(',');\n this.setState({\n toDoList: itemsArray\n });\n }\n handleChange(e) {\n this.setState({\n userInput: e.target.value\n });\n }\n render() {\n const items = this.state.toDoList.map( (item, i) => {\n return <li key={i}>{item}</li>\n });\n return (\n <div>\n <textarea\n onChange={this.handleChange}\n value={this.state.userInput}\n style={textAreaStyles}\n placeholder=\"Separate Items With Commas\" /><br />\n <button onClick={this.handleSubmit}>Create List</button>\n <h1>My \"To Do\" List:</h1>\n <ul>\n {items}\n </ul>\n </div>\n );\n }\n};"
|
||||
"const textAreaStyles = {\n width: 235,\n margin: 5\n};\n\nclass MyToDoList extends React.Component {\n constructor(props) {\n super(props);\n this.state = {\n toDoList: [],\n userInput: ''\n }\n this.handleSubmit = this.handleSubmit.bind(this);\n this.handleChange = this.handleChange.bind(this);\n }\n handleSubmit() {\n const itemsArray = this.state.userInput.split(',');\n this.setState({\n toDoList: itemsArray\n });\n }\n handleChange(e) {\n this.setState({\n userInput: e.target.value\n });\n }\n render() {\n const items = this.state.toDoList.map( (item, i) => {\n return <li key={i}>{item}</li>\n });\n return (\n <div>\n <textarea\n onChange={this.handleChange}\n value={this.state.userInput}\n style={textAreaStyles}\n placeholder=\"Separate Items With Commas\" /><br />\n <button onClick={this.handleSubmit}>Create List</button>\n <h1>My \"To Do\" List:</h1>\n <ul>\n {items}\n </ul>\n </div>\n );\n }\n};"
|
||||
],
|
||||
"challengeType": 6,
|
||||
"isRequired": false,
|
||||
@ -2828,7 +2828,7 @@
|
||||
"assert((() => { const ul = Enzyme.mount(React.createElement(Frameworks)).find('ul'); const keys = new Set([ ul.childAt(0).key(), ul.childAt(1).key(), ul.childAt(2).key(), ul.childAt(3).key(), ul.childAt(4).key(), ul.childAt(5).key(), ]); return keys.size === 6; })(), 'message: Each list item element should have a unique <code>key</code> attribute.');"
|
||||
],
|
||||
"solutions": [
|
||||
"\nconst frontEndFrameworks = [\n 'React',\n 'Angular',\n 'Ember',\n 'Knockout',\n 'Backbone',\n 'Vue'\n];\n\nfunction Frameworks() {\n const renderFrameworks = frontEndFrameworks.map((fw, i) => {\n return <li key={i}>{fw}</li>\n })\n return (\n <div>\n <h1>Popular Front End JavaScript Frameworks</h1>\n <ul>\n {renderFrameworks}\n </ul>\n </div>\n );\n};"
|
||||
"const frontEndFrameworks = [\n 'React',\n 'Angular',\n 'Ember',\n 'Knockout',\n 'Backbone',\n 'Vue'\n];\n\nfunction Frameworks() {\n const renderFrameworks = frontEndFrameworks.map((fw, i) => {\n return <li key={i}>{fw}</li>\n })\n return (\n <div>\n <h1>Popular Front End JavaScript Frameworks</h1>\n <ul>\n {renderFrameworks}\n </ul>\n </div>\n );\n};"
|
||||
],
|
||||
"challengeType": 6,
|
||||
"isRequired": false,
|
||||
@ -2908,7 +2908,7 @@
|
||||
"assert((() => { const ul = Enzyme.mount(React.createElement(MyComponent)).find('ul'); console.log(ul.debug()); const keys = new Set([ ul.childAt(0).key(), ul.childAt(1).key(), ul.childAt(2).key(), ul.childAt(3).key() ]); return keys.size === 4; })(), 'message: Each list item element should have a unique <code>key</code> attribute.');"
|
||||
],
|
||||
"solutions": [
|
||||
"\nclass MyComponent extends React.Component {\n constructor(props) {\n super(props);\n this.state = {\n users: [\n {\n username: 'Jeff',\n online: true\n },\n {\n username: 'Alan',\n online: false\n },\n {\n username: 'Mary',\n online: true\n },\n {\n username: 'Jim',\n online: false\n },\n {\n username: 'Sara',\n online: true\n },\n {\n username: 'Laura',\n online: true\n }\n ]\n }\n }\n render() {\n const usersOnline = this.state.users.filter(user => {\n return user.online;\n });\n const renderOnlineUsers = usersOnline.map(user => {\n return (\n <li key={user.username}>{user.username}</li>\n );\n });\n return (\n <div>\n <h1>Current Online Users:</h1>\n <ul>\n {renderOnlineUsers}\n </ul>\n </div>\n );\n }\n};"
|
||||
"class MyComponent extends React.Component {\n constructor(props) {\n super(props);\n this.state = {\n users: [\n {\n username: 'Jeff',\n online: true\n },\n {\n username: 'Alan',\n online: false\n },\n {\n username: 'Mary',\n online: true\n },\n {\n username: 'Jim',\n online: false\n },\n {\n username: 'Sara',\n online: true\n },\n {\n username: 'Laura',\n online: true\n }\n ]\n }\n }\n render() {\n const usersOnline = this.state.users.filter(user => {\n return user.online;\n });\n const renderOnlineUsers = usersOnline.map(user => {\n return (\n <li key={user.username}>{user.username}</li>\n );\n });\n return (\n <div>\n <h1>Current Online Users:</h1>\n <ul>\n {renderOnlineUsers}\n </ul>\n </div>\n );\n }\n};"
|
||||
],
|
||||
"challengeType": 6,
|
||||
"isRequired": false,
|
||||
@ -2954,7 +2954,7 @@
|
||||
"getUserInput => assert(getUserInput('index').replace(/ /g,'').includes('ReactDOMServer.renderToString(<App/>)') && Enzyme.mount(React.createElement(App)).children().name() === 'div', 'message: The <code>App</code> component should render to a string using <code>ReactDOMServer.renderToString</code>.');"
|
||||
],
|
||||
"solutions": [
|
||||
"\nclass App extends React.Component {\n constructor(props) {\n super(props);\n }\n render() {\n return <div/>\n }\n};\n\n// change code below this line\nReactDOMServer.renderToString(<App/>);"
|
||||
"class App extends React.Component {\n constructor(props) {\n super(props);\n }\n render() {\n return <div/>\n }\n};\n\n// change code below this line\nReactDOMServer.renderToString(<App/>);"
|
||||
],
|
||||
"challengeType": 6,
|
||||
"isRequired": false,
|
||||
|
||||
@ -988,7 +988,7 @@
|
||||
"description": [
|
||||
"Let's create a <code>linked list</code> class. Every linked list should start out with a few basic properties: a <code>head</code> (the first item in your list) and a <code>length</code> (number of items in your list). Sometimes you'll see implementations of linked lists that incorporate a <code>tail</code> for the last element of the list, but for now we'll just stick with these two. Whenever we add an element to the linked list, our <code>length</code> property should be incremented by one.",
|
||||
"We'll want to have a way to add items to our linked list, so the first method we'll want to create is the <code>add</code> method.",
|
||||
"If our list is empty, adding an element to our linked list is straightforward enough: we just wrap that element in a <code>Node</code> class, and we assign that node to the <code>head</code> of our linked list." ,
|
||||
"If our list is empty, adding an element to our linked list is straightforward enough: we just wrap that element in a <code>Node</code> class, and we assign that node to the <code>head</code> of our linked list.",
|
||||
"But what if our list already has one or more members? How do we add an element to the list? Recall that each node in a linked list has a <code>next</code> property. To add a node to the list, find the last node in the list, and point that last node's <code>next</code> property at our new node. (Hint: you know you've reached the end of a linked list when a node's <code>next</code> property is <code>null</code>.)",
|
||||
"<hr>",
|
||||
"Write an add method that assigns the first node you push to the linked list to the <code>head</code>; after that, whenever adding a node, every node should be referenced by the previous node's <code>next</code> property.",
|
||||
|
||||
File diff suppressed because it is too large
Load Diff
File diff suppressed because it is too large
Load Diff
@ -276,8 +276,7 @@
|
||||
},
|
||||
{
|
||||
"subtitle": "CSS rules",
|
||||
"question": "What will the following css rule select?\n<pre><code class='language-javascript'>.test > div</code> {\n...\n}</code></pre>"
|
||||
,
|
||||
"question": "What will the following css rule select?\n<pre><code class='language-javascript'>.test > div</code> {\n...\n}</code></pre>",
|
||||
"choices": [
|
||||
"<pre><code class='language-javascript'>Selects all divs within elements with the class of test.</code></pre>",
|
||||
"<pre><code class='language-javascript'>Selects all divs outside of elements with the class of test.</code></pre>",
|
||||
@ -403,8 +402,7 @@
|
||||
},
|
||||
{
|
||||
"subtitle": "CSS Browser compatibility",
|
||||
"question": "Which is not a valid Css prefix to ensure browser compatibility?"
|
||||
,
|
||||
"question": "Which is not a valid Css prefix to ensure browser compatibility?",
|
||||
"choices": [
|
||||
"<pre><code class='language-javascript'>-webkit-</code></pre>",
|
||||
"<pre><code class='language-javascript'>-win-</code></pre>",
|
||||
|
||||
@ -371,7 +371,7 @@
|
||||
"Вы можете получить отзыв о вашем проекте от коллег, поделившись ссылкой на него в нашем <a href='//gitter.im/freecodecamp/codereview' target='_blank'>чате для рассмотрения кода</a>. Также вы можете поделиться ею через Twitter и на странице Free Code Camp вашего города на Facebook."
|
||||
]
|
||||
},
|
||||
"es":{
|
||||
"es": {
|
||||
"title": "Crea una caja de recetas",
|
||||
"description": [
|
||||
"<strong>Objetivo:</strong> Construye una aplicación en <a href='https://codepen.io' target='_blank'>CodePen.io</a> que funcione de forma similar al siguiente ejemplo: <a href='https://codepen.io/freeCodeCamp/full/dNVazZ/' target='_blank'>https://codepen.io/freeCodeCamp/full/dNVazZ/</a>.",
|
||||
@ -415,7 +415,7 @@
|
||||
"type": "zipline",
|
||||
"isRequired": false,
|
||||
"challengeType": 3,
|
||||
"translations":{
|
||||
"translations": {
|
||||
"ru": {
|
||||
"title": "Создайте игру \"Жизнь\"",
|
||||
"description": [
|
||||
@ -648,7 +648,7 @@
|
||||
"type": "basejump",
|
||||
"challengeType": 4,
|
||||
"translations": {
|
||||
"es":{
|
||||
"es": {
|
||||
"description": [
|
||||
"<strong>Objetivo:</strong> Construye una aplicación de pila completa (full stack) en JavaScript que funcione de forma similar al siguiente proyecto: <a href='http://bookjump.herokuapp.com/' target='_blank'>http://bookjump.herokuapp.com/</a> y despliégalo en Heroku.",
|
||||
"Ten en cuenta que para cada proyecto, debes crear un nuevo repositorio en GitHub y un nuevo proyecto en Heroku. Si no recuerdas cómo hacerlo, visita de nuevo <a href='/challenges/get-set-for-our-dynamic-web-application-projects'>https://freecodecamp.org/challenges/get-set-for-our-dynamic-web-application-projects</a>.",
|
||||
@ -685,7 +685,7 @@
|
||||
"type": "basejump",
|
||||
"challengeType": 4,
|
||||
"translations": {
|
||||
"es":{
|
||||
"es": {
|
||||
"description": [
|
||||
"<strong>Objetivo:</strong> Construye una aplicación de pila completa (full stack) en JavaScript que funcione de forma similar al siguiente proyecto: <a href='https://midnight-dust.glitch.me/' target='_blank'>https://midnight-dust.glitch.me/</a> y despliégalo en Heroku.",
|
||||
"Ten en cuenta que para cada proyecto, debes crear un nuevo repositorio en GitHub y un nuevo proyecto en Heroku. Si no recuerdas cómo hacerlo, visita de nuevo <a href='/challenges/get-set-for-our-dynamic-web-application-projects'>https://freecodecamp.org/challenges/get-set-for-our-dynamic-web-application-projects</a>.",
|
||||
|
||||
Reference in New Issue
Block a user