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

feat(seed): reformat seed/challenges JSON via repack script

Browse Source
This commit is contained in:
Alex Chaffee
2018-03-23 17:59:34 -04:00
committed by Mrugesh Mohapatra
parent 14c9ed8974
commit 52ca2b9ad6
38 changed files with 2459 additions and 2100 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
challenges/01-responsive-web-design/applied-visual-design.json
View File

@ -2752,4 +2752,4 @@
"translations": {}
}
]
}
}

56
challenges/01-responsive-web-design/basic-html-and-html5.json
View File

@ -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.",
@ -941,12 +944,12 @@
]
]
}
}
},
{
"id": "58d9cc820ce2197370032a13",
"title": "Become a Supporter",
"description": [
}
},
{
"id": "58d9cc820ce2197370032a13",
"title": "Become a Supporter",
"description": [
[
"",
"",
@ -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>&#60;input type=\"text\" required&#62;</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>&lt;!DOCTYPE html&gt;</code> tag.');",
"assert($('html').length == 1, 'message: There should be one <code>html</code> element.');",
@ -2191,4 +2189,4 @@
}
}
]
}
}

2
challenges/01-responsive-web-design/css-flexbox.json
View File

@ -1161,4 +1161,4 @@
"translations": {}
}
]
}
}

1832
challenges/01-responsive-web-design/css-grid.json
View File

File diff suppressed because it is too large Load Diff

3
challenges/01-responsive-web-design/responsive-web-design.json
View File

@ -68,7 +68,6 @@
""
]
]
}
}
},
@ -246,4 +245,4 @@
}
}
]
}
}

2
challenges/02-javascript-algorithms-and-data-structures/basic-algorithm-scripting.json
View File

@ -968,4 +968,4 @@
}
}
]
}
}

45
challenges/02-javascript-algorithms-and-data-structures/basic-javascript.json
View File

@ -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>&quot;</code>) and four escaped double quotes (<code>&#92;&quot;</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>&#39;</code> and four double quotes <code>&quot;</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",
@ -5839,4 +5832,4 @@
"translations": {}
}
]
}
}

2
challenges/02-javascript-algorithms-and-data-structures/debugging.json
View File

@ -423,4 +423,4 @@
"translations": {}
}
]
}
}

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

@ -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\";",

57
challenges/02-javascript-algorithms-and-data-structures/functional-programming.json
View File

@ -6,20 +6,21 @@
"challenges": [
{
"id": "587d7b8d367417b2b2512b5a",
"title": "Introduction to the Functional Programming Challenges",
"description": [
[
"",
"",
"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": [],
"type": "Waypoint",
"challengeType": 7,
"isRequired": false
"title": "Introduction to the Functional Programming Challenges",
"description": [
[
"",
"",
"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": [],
"type": "Waypoint",
"challengeType": 7,
"isRequired": false
},
{
"id": "587d7b8d367417b2b2512b5b",
@ -276,9 +277,9 @@
"console.log(fixedValue); // Should print 4"
],
"tests": [
"assert(fixedValue === 4, 'message: Your function <code>incrementer</code> should not change the value of <code>fixedValue</code>.');",
"assert(code.match(/function\\s+?incrementer\\s*?\\(.+?\\)/g), 'message: Your <code>incrementer</code> function should take a parameter.');",
"assert(newValue === 5, 'message: Your <code>incrementer</code> function should return a value that is one larger than the <code>fixedValue</code> value.');"
"assert(fixedValue === 4, 'message: Your function <code>incrementer</code> should not change the value of <code>fixedValue</code>.');",
"assert(code.match(/function\\s+?incrementer\\s*?\\(.+?\\)/g), 'message: Your <code>incrementer</code> function should take a parameter.');",
"assert(newValue === 5, 'message: Your <code>incrementer</code> function should return a value that is one larger than the <code>fixedValue</code> value.');"
],
"solutions": [],
"hints": [],
@ -339,9 +340,9 @@
],
"solutions": [],
"hints": [
"Look at how the functions are called to see the correct order of the parameters.",
"Consider using the concat method instead of push.",
"The slice method returns a new array without modifying the original."
"Look at how the functions are called to see the correct order of the parameters.",
"Consider using the concat method instead of push.",
"The slice method returns a new array without modifying the original."
],
"type": "waypoint",
"challengeType": 1,
@ -990,9 +991,9 @@
],
"solutions": [],
"hints": [
"Try using .filter() to filter the watchList by Director.",
"Try using .map() to return an array of ratings.",
"You can use Number() to convert a string into a number."
"Try using .filter() to filter the watchList by Director.",
"Try using .map() to return an array of ratings.",
"You can use Number() to convert a string into a number."
],
"type": "waypoint",
"challengeType": 1,
@ -1088,7 +1089,7 @@
],
"solutions": [],
"hints": [
"The regex pre-defined character class for non-alphanumerics is \\W."
"The regex pre-defined character class for non-alphanumerics is \\W."
],
"type": "waypoint",
"challengeType": 1,
@ -1123,7 +1124,7 @@
],
"solutions": [],
"hints": [
"First try to split the given string before applying the join method."
"First try to split the given string before applying the join method."
],
"type": "waypoint",
"challengeType": 1,
@ -1166,8 +1167,8 @@
],
"solutions": [],
"hints": [
"When several spaces in a row are split by space, it puts an empty string in the array.",
"You can use the .toLowerCase() method to make the title all lower case."
"When several spaces in a row are split by space, it puts an empty string in the array.",
"You can use the .toLowerCase() method to make the title all lower case."
],
"type": "waypoint",
"challengeType": 1,
@ -1273,4 +1274,4 @@
"translations": {}
}
]
}
}

4
challenges/02-javascript-algorithms-and-data-structures/intermediate-algorithm-scripting.json
View File

@ -1056,7 +1056,7 @@
]
}
},
"guideUrl":"https://guide.freecodecamp.org/certificates/arguments-optional"
"guideUrl": "https://guide.freecodecamp.org/certificates/arguments-optional"
},
{
"id": "a2f1d72d9b908d0bd72bb9f6",
@ -1209,4 +1209,4 @@
}
}
]
}
}

6
challenges/02-javascript-algorithms-and-data-structures/javascript-algorithms-and-data-structures-projects.json
View File

@ -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}"
],
@ -386,4 +384,4 @@
}
}
]
}
}

9
challenges/02-javascript-algorithms-and-data-structures/object-oriented-programming.json
View File

@ -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.');",
@ -1060,4 +1055,4 @@
"translations": {}
}
]
}
}

2
challenges/02-javascript-algorithms-and-data-structures/regular-expressions.json
View File

@ -992,4 +992,4 @@
"translations": {}
}
]
}
}

6
challenges/03-front-end-libraries/bootstrap.json
View File

@ -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.');",

2
challenges/03-front-end-libraries/front-end-libraries-projects.json
View File

@ -195,4 +195,4 @@
}
}
]
}
}

2
challenges/03-front-end-libraries/jquery.json
View File

@ -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\">",

2
challenges/03-front-end-libraries/react-and-redux.json
View File

@ -755,4 +755,4 @@
"reactRedux": true
}
]
}
}

192
challenges/03-front-end-libraries/react.json
View File

@ -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,
@ -506,49 +506,49 @@
"name": "index",
"head": [
"class NonCitrus extends React.Component {",
" render() {",
" return (",
" <div>",
" <h4>Non-Citrus:</h4>",
" <ul>",
" <li>Apples</li>",
" <li>Blueberries</li>",
" <li>Strawberries</li>",
" <li>Bananas</li>",
" </ul>",
" </div>",
" );",
" }",
"};",
"class Citrus extends React.Component {",
" render() {",
" return (",
" <div>",
" <h4>Citrus:</h4>",
" <ul>",
" <li>Lemon</li>",
" <li>Lime</li>",
" <li>Orange</li>",
" <li>Grapefruit</li>",
" </ul>",
" </div>",
" );",
" }",
"};",
"class Vegetables extends React.Component {",
" render() {",
" return (",
" <div>",
" <h2>Vegetables:</h2>",
" <ul>",
" <li>Brussel Sprouts</li>",
" <li>Broccoli</li>",
" <li>Squash</li>",
" </ul>",
" </div>",
" );",
" }",
"};"
" render() {",
" return (",
" <div>",
" <h4>Non-Citrus:</h4>",
" <ul>",
" <li>Apples</li>",
" <li>Blueberries</li>",
" <li>Strawberries</li>",
" <li>Bananas</li>",
" </ul>",
" </div>",
" );",
" }",
"};",
"class Citrus extends React.Component {",
" render() {",
" return (",
" <div>",
" <h4>Citrus:</h4>",
" <ul>",
" <li>Lemon</li>",
" <li>Lime</li>",
" <li>Orange</li>",
" <li>Grapefruit</li>",
" </ul>",
" </div>",
" );",
" }",
"};",
"class Vegetables extends React.Component {",
" render() {",
" return (",
" <div>",
" <h2>Vegetables:</h2>",
" <ul>",
" <li>Brussel Sprouts</li>",
" <li>Broccoli</li>",
" <li>Squash</li>",
" </ul>",
" </div>",
" );",
" }",
"};"
],
"contents": [
"class Fruits extends React.Component {",
@ -620,39 +620,39 @@
"head": [
"",
"const Fruits = () => {",
" return (",
" <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>",
" );",
"};",
"const Vegetables = () => {",
" return (",
" <div>",
" <h2>Vegetables:</h2>",
" <ul>",
" <li>Brussel Sprouts</li>",
" <li>Broccoli</li>",
" <li>Squash</li>",
" </ul>",
" </div>",
" );",
"};",
""
" return (",
" <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>",
" );",
"};",
"const Vegetables = () => {",
" return (",
" <div>",
" <h2>Vegetables:</h2>",
" <ul>",
" <li>Brussel Sprouts</li>",
" <li>Broccoli</li>",
" <li>Squash</li>",
" </ul>",
" </div>",
" );",
"};",
""
],
"contents": [
"",
@ -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,
@ -1096,8 +1096,8 @@
"name": "index",
"head": [
"var PropTypes = {",
" string: { isRequired: true }",
"};"
" string: { isRequired: true }",
"};"
],
"contents": [
"class CampSite extends React.Component {",
@ -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,
@ -2962,4 +2962,4 @@
"react": true
}
]
}
}

2
challenges/03-front-end-libraries/redux.json
View File

@ -927,4 +927,4 @@
"redux": true
}
]
}
}

2
challenges/03-front-end-libraries/sass.json
View File

@ -478,4 +478,4 @@
"translations": {}
}
]
}
}

2
challenges/04-data-visualization/data-visualization-projects.json
View File

@ -184,4 +184,4 @@
"translations": {}
}
]
}
}

2
challenges/04-data-visualization/data-visualization-with-d3.json
View File

@ -1803,4 +1803,4 @@
"translations": {}
}
]
}
}

2
challenges/04-data-visualization/json-apis-and-ajax.json
View File

@ -691,4 +691,4 @@
"translations": {}
}
]
}
}

2
challenges/05-apis-and-microservices/api-and-microservice-projects.json
View File

@ -171,4 +171,4 @@
}
}
]
}
}

2
challenges/05-apis-and-microservices/basic-node-and-express.json
View File

@ -309,4 +309,4 @@
"translations": {}
}
]
}
}

2
challenges/05-apis-and-microservices/managing-packages-with-npm.json
View File

@ -304,4 +304,4 @@
"translations": {}
}
]
}
}

2
challenges/05-apis-and-microservices/mongodb-and-mongoose.json
View File

@ -323,4 +323,4 @@
"translations": {}
}
]
}
}

2
challenges/06-information-security-and-quality-assurance/advanced-express-tools.json
View File

@ -738,4 +738,4 @@
"isRequired": false
}
]
}
}

2
challenges/06-information-security-and-quality-assurance/information-security-with-helmetjs.json
View File

@ -371,4 +371,4 @@
"translations": {}
}
]
}
}

2
challenges/06-information-security-and-quality-assurance/quality-assurance-and-information-security-projects.json
View File

@ -295,4 +295,4 @@
"translations": {}
}
]
}
}

2
challenges/06-information-security-and-quality-assurance/quality-assurance-and-testing-with-chai.json
View File

@ -831,4 +831,4 @@
"translations": {}
}
]
}
}

2
challenges/08-coding-interview-questions-and-take-home-assignments/coding-interview-algorithm-questions.json
View File

@ -467,4 +467,4 @@
"releasedOn": "February 17, 2017"
}
]
}
}

6
challenges/08-coding-interview-questions-and-take-home-assignments/coding-interview-data-structure-questions.json
View File

@ -390,7 +390,7 @@
"releasedOn": "Feb 17, 2017",
"solutions": [
"function Set() {var collection = []; this.has = function(e){return(collection.indexOf(e) !== -1);};this.values = function() {return collection;};this.add = function(element) {if (!this.has(element)) {collection.push(element);return true;} else {return false;}};this.remove = function(element) {if(this.has(element)) {var i = collection.indexOf(element);collection.splice(i, 1);return true;}return false;};this.size = function() {return collection.length;};}"
],
],
"challengeType": 1,
"translations": {}
},
@ -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.",
@ -2826,4 +2826,4 @@
"translations": {}
}
]
}
}

542
challenges/08-coding-interview-questions-and-take-home-assignments/project-euler-problems.json
View File

File diff suppressed because it is too large Load Diff

1186
challenges/08-coding-interview-questions-and-take-home-assignments/rosetta-code-problems.json
View File

File diff suppressed because it is too large Load Diff

536
challenges/08-coding-interview-questions-and-take-home-assignments/system-design-and-concept-questions.json
View File

@ -262,124 +262,123 @@
"id": "5a91690fa9178457a6f12820",
"title": "CSS questions part 1",
"description": [
{
"subtitle": "Elements properties",
"question": "Which properties do inline elements not possess under normal document flow.",
"choices": [
"<pre>overflow, left or right margins</pre>",
"<pre>border-radius, z-index</pre>",
"<pre>font-size, animation</pre>",
"<pre>width, top or bottom margins</pre>"
],
"answer": 3,
"explanation": "An inline element will only take up the width of the inner content."
},
{
"subtitle": "CSS rules",
"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>",
"<pre><code class='language-javascript'>Selects only divs that are immediate children of elements with the class of test.</code></pre>",
"<pre><code class='language-javascript'>This would not be considered a valid selector.</code></pre>"
],
"answer": 2,
"explanation": "eg: \n<pre><code class='language-html'>&lt;div class='test'&gt;\n&lt;div class='box'&gt;\n&lt;div class='content'&gt;...&lt;/div&gt;\n&lt;/div&gt;\n&lt;div class='box'&gt;\n&lt;div class='content'&gt;...&lt;/div&gt;\n&lt;/div&gt;\n&lt;/div&gt;</code></pre>\n\nWould target only the elements with a class of 'box' as these are the direct children of 'test'."
},
{
"subtitle": "Overriding properties",
"question": "Which keyword would you add to the end of a style rule to override another Css style for a specific element ?",
"choices": [
"<pre><code class='language-javascript'>*override</code></pre>",
"<pre><code class='language-javascript'>*overrideAll</code></pre>",
"<pre><code class='language-javascript'>!vital</code></pre>",
"<pre><code class='language-javascript'>!important</code></pre>"
],
"answer": 3,
"explanation": "For example if you wanted all the paragraph tags in a specific class to have the colour blue instead of black\n<pre><code class='language-javascript'></code>.myClass p {\ncolor: blue !important\n}</code></pre>"
},
{
"subtitle": "Preprocessor CSS",
"question": "Which is not considered a Css preprocessor?",
"choices": [
"<pre><code class='language-javascript'>Less</code></pre>",
"<pre><code class='language-javascript'>Sass</code></pre>",
"<pre><code class='language-javascript'>Stylus</code></pre>",
"<pre><code class='language-javascript'>Express</code></pre>"
],
"answer": 3,
"explanation": "Express is an application framework for Node.js"
},
{
"subtitle": "CSS Box Model",
"question": "Which is not a property of the Css 'Box Model'?",
"choices": [
"<pre><code class='language-javascript'>Border</code></pre>",
"<pre><code class='language-javascript'>Padding</code></pre>",
"<pre><code class='language-javascript'>Margin</code></pre>",
"<pre><code class='language-javascript'>Outline</code></pre>"
],
"answer": 3,
"explanation": "Content is the fourth property of the box model not outline."
},
{
"subtitle": "CSS positioning",
"question": "Absolute positioning in Css removes an element from the normal document flow true/false?",
"choices": [
"<pre><code class='language-javascript'>true</code></pre>",
"<pre><code class='language-javascript'>false</code></pre>"
],
"answer": 0,
"explanation": "Giving an element absolute positioning removes it from the normal document flow completely allowing positioning attributes top, left, bottom."
},
{
"subtitle": "CSS selector",
"question": "With this Css Selector it is possible to select every element in a document.",
"choices": [
"<pre><code class='language-javascript'>Body</code></pre>",
"<pre><code class='language-javascript'>Universal</code></pre>",
"<pre><code class='language-javascript'>Wildcard</code></pre>",
"<pre><code class='language-javascript'>SelectAll</code></pre>"
],
"answer": 1,
"explanation": "The Universal selector will select every element on a page and is denoted by <code>*{}</code>. note: The rule of specificity still applies, so a more specific selector can override the universal selector in a Css document."
},
{
"subtitle": "Font size in CSS",
"question": "Which is not a valid Css font size?",
"choices": [
"<pre><code class='language-javascript'>em</code></pre>",
"<pre><code class='language-javascript'>%</code></pre>",
"<pre><code class='language-javascript'>tp</code></pre>",
"<pre><code class='language-javascript'>px</code></pre>"
],
"answer": 2,
"explanation": "tp is not valid this should be pt."
},
{
"subtitle": "CSS clear property",
"question": "The Css 'clear' property fulfills which task?",
"choices": [
"<pre><code class='language-javascript'>Allows transparency of an element.</code></pre>",
"<pre><code class='language-javascript'>Prevents prior properties of the selector from taking effect.</code></pre>",
"<pre><code class='language-javascript'>Positions an element clear of a siblings margins and borders.</code></pre>",
"<pre><code class='language-javascript'>Sets which sides of an element floating elements are not allowed to be floated.</code></pre>"
],
"answer": 3,
"explanation": "The clear property has the following values available: both, left, right, inherit, initial and none."
},
{
"subtitle": "CSS sudo-class",
"question": "An example of a sudo-class of a ul element written in Css would be defined?",
"choices": [
"<pre><code class='language-javascript'>ul:first-child</code></pre>",
"<pre><code class='language-javascript'>ul..first-child</code></pre>",
"<pre><code class='language-javascript'>ul::first-child</code></pre>",
"<pre><code class='language-javascript'>ul first-child</code></pre>"
],
"answer": 0,
"explanation": "First answer : Would be correct of a sudo-class.<br />Second answer : Would be an error of syntax.<br />Third answer: The double colon would be an example of a sudo element used with the likes of <code>::before</code> and <code>::after</code> which are examples of content.<br />Fourth answer : This would relate to html tag elements of which there is no first-child tag."
{
"subtitle": "Elements properties",
"question": "Which properties do inline elements not possess under normal document flow.",
"choices": [
"<pre>overflow, left or right margins</pre>",
"<pre>border-radius, z-index</pre>",
"<pre>font-size, animation</pre>",
"<pre>width, top or bottom margins</pre>"
],
"answer": 3,
"explanation": "An inline element will only take up the width of the inner content."
},
{
"subtitle": "CSS rules",
"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>",
"<pre><code class='language-javascript'>Selects only divs that are immediate children of elements with the class of test.</code></pre>",
"<pre><code class='language-javascript'>This would not be considered a valid selector.</code></pre>"
],
"answer": 2,
"explanation": "eg: \n<pre><code class='language-html'>&lt;div class='test'&gt;\n&lt;div class='box'&gt;\n&lt;div class='content'&gt;...&lt;/div&gt;\n&lt;/div&gt;\n&lt;div class='box'&gt;\n&lt;div class='content'&gt;...&lt;/div&gt;\n&lt;/div&gt;\n&lt;/div&gt;</code></pre>\n\nWould target only the elements with a class of 'box' as these are the direct children of 'test'."
},
{
"subtitle": "Overriding properties",
"question": "Which keyword would you add to the end of a style rule to override another Css style for a specific element ?",
"choices": [
"<pre><code class='language-javascript'>*override</code></pre>",
"<pre><code class='language-javascript'>*overrideAll</code></pre>",
"<pre><code class='language-javascript'>!vital</code></pre>",
"<pre><code class='language-javascript'>!important</code></pre>"
],
"answer": 3,
"explanation": "For example if you wanted all the paragraph tags in a specific class to have the colour blue instead of black\n<pre><code class='language-javascript'></code>.myClass p {\ncolor: blue !important\n}</code></pre>"
},
{
"subtitle": "Preprocessor CSS",
"question": "Which is not considered a Css preprocessor?",
"choices": [
"<pre><code class='language-javascript'>Less</code></pre>",
"<pre><code class='language-javascript'>Sass</code></pre>",
"<pre><code class='language-javascript'>Stylus</code></pre>",
"<pre><code class='language-javascript'>Express</code></pre>"
],
"answer": 3,
"explanation": "Express is an application framework for Node.js"
},
{
"subtitle": "CSS Box Model",
"question": "Which is not a property of the Css 'Box Model'?",
"choices": [
"<pre><code class='language-javascript'>Border</code></pre>",
"<pre><code class='language-javascript'>Padding</code></pre>",
"<pre><code class='language-javascript'>Margin</code></pre>",
"<pre><code class='language-javascript'>Outline</code></pre>"
],
"answer": 3,
"explanation": "Content is the fourth property of the box model not outline."
},
{
"subtitle": "CSS positioning",
"question": "Absolute positioning in Css removes an element from the normal document flow true/false?",
"choices": [
"<pre><code class='language-javascript'>true</code></pre>",
"<pre><code class='language-javascript'>false</code></pre>"
],
"answer": 0,
"explanation": "Giving an element absolute positioning removes it from the normal document flow completely allowing positioning attributes top, left, bottom."
},
{
"subtitle": "CSS selector",
"question": "With this Css Selector it is possible to select every element in a document.",
"choices": [
"<pre><code class='language-javascript'>Body</code></pre>",
"<pre><code class='language-javascript'>Universal</code></pre>",
"<pre><code class='language-javascript'>Wildcard</code></pre>",
"<pre><code class='language-javascript'>SelectAll</code></pre>"
],
"answer": 1,
"explanation": "The Universal selector will select every element on a page and is denoted by <code>*{}</code>. note: The rule of specificity still applies, so a more specific selector can override the universal selector in a Css document."
},
{
"subtitle": "Font size in CSS",
"question": "Which is not a valid Css font size?",
"choices": [
"<pre><code class='language-javascript'>em</code></pre>",
"<pre><code class='language-javascript'>%</code></pre>",
"<pre><code class='language-javascript'>tp</code></pre>",
"<pre><code class='language-javascript'>px</code></pre>"
],
"answer": 2,
"explanation": "tp is not valid this should be pt."
},
{
"subtitle": "CSS clear property",
"question": "The Css 'clear' property fulfills which task?",
"choices": [
"<pre><code class='language-javascript'>Allows transparency of an element.</code></pre>",
"<pre><code class='language-javascript'>Prevents prior properties of the selector from taking effect.</code></pre>",
"<pre><code class='language-javascript'>Positions an element clear of a siblings margins and borders.</code></pre>",
"<pre><code class='language-javascript'>Sets which sides of an element floating elements are not allowed to be floated.</code></pre>"
],
"answer": 3,
"explanation": "The clear property has the following values available: both, left, right, inherit, initial and none."
},
{
"subtitle": "CSS sudo-class",
"question": "An example of a sudo-class of a ul element written in Css would be defined?",
"choices": [
"<pre><code class='language-javascript'>ul:first-child</code></pre>",
"<pre><code class='language-javascript'>ul..first-child</code></pre>",
"<pre><code class='language-javascript'>ul::first-child</code></pre>",
"<pre><code class='language-javascript'>ul first-child</code></pre>"
],
"answer": 0,
"explanation": "First answer : Would be correct of a sudo-class.<br />Second answer : Would be an error of syntax.<br />Third answer: The double colon would be an example of a sudo element used with the likes of <code>::before</code> and <code>::after</code> which are examples of content.<br />Fourth answer : This would relate to html tag elements of which there is no first-child tag."
}
],
"tests": [],
@ -389,126 +388,125 @@
"id": "5a91a167a9178457a6f12821",
"title": "CSS questions part 2",
"description": [
{
"subtitle": "CSS selector",
"question": "An entire Css selector and declaration block whithin a Css document eg:<code><br /> .container div p {<br />position: relative;<br />width: 300px;<br />margin: auto;<br />color: #ffffff;<br />}</code><br /> is referred to as?",
"choices": [
"<pre><code class='language-javascript'>Base-Block</code></pre>",
"<pre><code class='language-javascript'>Selection Properties</code></pre>",
"<pre><code class='language-javascript'>Selector Group</code></pre>",
"<pre><code class='language-javascript'>Ruleset</code></pre>"
],
"answer": 3,
"explanation": "The selectors name and properties are collectively called a Ruleset."
},
{
"subtitle": "CSS 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>",
"<pre><code class='language-javascript'>-moz-</code></pre>",
"<pre><code class='language-javascript'>-o-</code></pre>"
],
"answer": 1,
"explanation": "<code>-win-</code> is incorrect, <code>-webkit-</code> (Chrome, Safari, ioS and modern versions of Opera), <code>-moz-</code> (Firefox), <code>-o-</code> (Older versions of Opera), the other would be <code>-ms-</code> used for (IE and Microsoft Edge)."
},
{
"subtitle": "CSS 'text-transform' property",
"question": "The Css property 'text-transform' is mainly used for?",
"choices": [
"<pre><code class='language-javascript'>Alteration of text letter case.</code></pre>",
"<pre><code class='language-javascript'>Changing the alignment of text.</code></pre>",
"<pre><code class='language-javascript'>Increase/Decrease font size.</code></pre>",
"<pre><code class='language-javascript'>Transformation of font family.</code></pre>"
],
"answer": 0,
"explanation": "The values for the property 'text-transform' are, capitalize, full-width, inherit, lowercase, none and uppercase."
},
{
"subtitle": "CSS font-sizes",
"question": "If the default font size for a page is 12px, What is the pixel equivalent of 1.5em?",
"choices": [
"<pre><code class='language-javascript'>12.5px</code></pre>",
"<pre><code class='language-javascript'>9px</code></pre>",
"<pre><code class='language-javascript'>18px</code></pre>",
"<pre><code class='language-javascript'>6px</code></pre>"
],
"answer": 2,
"explanation": "1em is equivalent to the base or default font size therefore (12 * 1.5 = 18)."
},
{
"subtitle": "CCSS font weight",
"question": "In Css 'font-weight: bold;' is the same as?",
"choices": [
"<pre><code class='language-javascript'>font-weight: 400;</code></pre>",
"<pre><code class='language-javascript'>font-weight: 900</code></pre>",
"<pre><code class='language-javascript'>font-weight: 700</code></pre>",
"<pre><code class='language-javascript'>font-weight: 500</code></pre>"
],
"answer": 2,
"explanation": "The keyword 'bold' is the same as the numerical value 700."
},
{
"subtitle": "CSS ruleset",
"question": "Given this ruleset <code><br />.testDiv {<br />width: 20%;<br />height: 20%;<br />content: 'add this text'<br />}</code><br />What would happen with the content properties text?",
"choices": [
"<pre><code class='language-javascript'>Nothing</code></pre>",
"<pre><code class='language-javascript'>Appended to any text contained in element with class of testDiv.</code></pre>",
"<pre><code class='language-javascript'>Prepended to any text contained in element with class of testDiv.</code></pre>",
"<pre><code class='language-javascript'>Overwrite any text contained in element with class of testDiv.</code></pre>"
],
"answer": 0,
"explanation": "Nothing would appear on the page, the content property needs to be used with sudo elements like <code>::after</code> or <code>::before</code> eg:<br /><code>.testDiv {<br />width: 20%;<br />height: 20%;\n}\n.testDiv::after {\ncontent: 'add this text'\n}</code>"
},
{
"subtitle": "CSS match selector",
"question": "What would the following Css selector match?<br /><code>section + p</code>",
"choices": [
"<pre><code class='language-javascript'>All &lt;section&gt; and &lt;p&gt; tags.</code></pre>",
"<pre><code class='language-javascript'>All &lt;p&gt; tags within a &lt;section&gt; tag.</code></pre>",
"<pre><code class='language-javascript'>All &lt;p&gt; tags placed immediately after a &lt;section&gt; tag.</code></pre>",
"<pre><code class='language-javascript'>Not a valid selector.</code></pre>"
],
"answer": 2,
"explanation": "<pre><code class='language-javascript'>&lt;p&gt;First Paragraph&lt;/p&gt;<br />&lt;section&gt;...&lt;/section&gt;<br />&lt;p&gt;Second Paragraph&lt;/p&gt;<br />&lt;p&gt;Third Paragraph&lt;/p&gt;</code></pre><br />Only the second paragraph tag will be selected and matched."
},
{
"subtitle": "How to incorporte CSS into web document",
"question": "How many different ways is it possible to incorporate Css into a web document?",
"choices": [
"<pre><code class='language-javascript'>1</code></pre>",
"<pre><code class='language-javascript'>2</code></pre>",
"<pre><code class='language-javascript'>3</code></pre>",
"<pre><code class='language-javascript'>4</code></pre>"
],
"answer": 2,
"explanation": "Currently Css can be used 'Inline' as a style attribute of an Html element, 'Embedded' in a style tag of a document and 'Imported' as an external file with the link tag element."
},
{
"subtitle": "Using target in css",
"question": "What would <code>[role=contentinfo] {...}</code> target in Css?",
"choices": [
"<pre><code class='language-javascript'>Any element with the role attribute of contentinfo.</code></pre>",
"<pre><code class='language-javascript'>Any element within a &lt;span&gt; tag.</code></pre>",
"<pre><code class='language-javascript'>Any element within a &lt;span&gt; tag with the role attribute of contentinfo.</code></pre>",
"<pre><code class='language-javascript'>This would only be valid using Sass or Scss.</code></pre>"
],
"answer": 0,
"explanation": "The square bracket notation is used to target elements with specific attributes."
},
{
"subtitle": "CSS positioning",
"question": "Which is not a value for 'position' in css?",
"choices": [
"<pre><code class='language-javascript'>Absolute</code></pre>",
"<pre><code class='language-javascript'>Static</code></pre>",
"<pre><code class='language-javascript'>Responsive</code></pre>",
"<pre><code class='language-javascript'>inherit</code></pre>"
],
"answer": 2,
"explanation": "There is no such positioning as responsive, currently there is (absolute, fixed, inherit, relative and static)."
{
"subtitle": "CSS selector",
"question": "An entire Css selector and declaration block whithin a Css document eg:<code><br /> .container div p {<br />position: relative;<br />width: 300px;<br />margin: auto;<br />color: #ffffff;<br />}</code><br /> is referred to as?",
"choices": [
"<pre><code class='language-javascript'>Base-Block</code></pre>",
"<pre><code class='language-javascript'>Selection Properties</code></pre>",
"<pre><code class='language-javascript'>Selector Group</code></pre>",
"<pre><code class='language-javascript'>Ruleset</code></pre>"
],
"answer": 3,
"explanation": "The selectors name and properties are collectively called a Ruleset."
},
{
"subtitle": "CSS 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>",
"<pre><code class='language-javascript'>-moz-</code></pre>",
"<pre><code class='language-javascript'>-o-</code></pre>"
],
"answer": 1,
"explanation": "<code>-win-</code> is incorrect, <code>-webkit-</code> (Chrome, Safari, ioS and modern versions of Opera), <code>-moz-</code> (Firefox), <code>-o-</code> (Older versions of Opera), the other would be <code>-ms-</code> used for (IE and Microsoft Edge)."
},
{
"subtitle": "CSS 'text-transform' property",
"question": "The Css property 'text-transform' is mainly used for?",
"choices": [
"<pre><code class='language-javascript'>Alteration of text letter case.</code></pre>",
"<pre><code class='language-javascript'>Changing the alignment of text.</code></pre>",
"<pre><code class='language-javascript'>Increase/Decrease font size.</code></pre>",
"<pre><code class='language-javascript'>Transformation of font family.</code></pre>"
],
"answer": 0,
"explanation": "The values for the property 'text-transform' are, capitalize, full-width, inherit, lowercase, none and uppercase."
},
{
"subtitle": "CSS font-sizes",
"question": "If the default font size for a page is 12px, What is the pixel equivalent of 1.5em?",
"choices": [
"<pre><code class='language-javascript'>12.5px</code></pre>",
"<pre><code class='language-javascript'>9px</code></pre>",
"<pre><code class='language-javascript'>18px</code></pre>",
"<pre><code class='language-javascript'>6px</code></pre>"
],
"answer": 2,
"explanation": "1em is equivalent to the base or default font size therefore (12 * 1.5 = 18)."
},
{
"subtitle": "CCSS font weight",
"question": "In Css 'font-weight: bold;' is the same as?",
"choices": [
"<pre><code class='language-javascript'>font-weight: 400;</code></pre>",
"<pre><code class='language-javascript'>font-weight: 900</code></pre>",
"<pre><code class='language-javascript'>font-weight: 700</code></pre>",
"<pre><code class='language-javascript'>font-weight: 500</code></pre>"
],
"answer": 2,
"explanation": "The keyword 'bold' is the same as the numerical value 700."
},
{
"subtitle": "CSS ruleset",
"question": "Given this ruleset <code><br />.testDiv {<br />width: 20%;<br />height: 20%;<br />content: 'add this text'<br />}</code><br />What would happen with the content properties text?",
"choices": [
"<pre><code class='language-javascript'>Nothing</code></pre>",
"<pre><code class='language-javascript'>Appended to any text contained in element with class of testDiv.</code></pre>",
"<pre><code class='language-javascript'>Prepended to any text contained in element with class of testDiv.</code></pre>",
"<pre><code class='language-javascript'>Overwrite any text contained in element with class of testDiv.</code></pre>"
],
"answer": 0,
"explanation": "Nothing would appear on the page, the content property needs to be used with sudo elements like <code>::after</code> or <code>::before</code> eg:<br /><code>.testDiv {<br />width: 20%;<br />height: 20%;\n}\n.testDiv::after {\ncontent: 'add this text'\n}</code>"
},
{
"subtitle": "CSS match selector",
"question": "What would the following Css selector match?<br /><code>section + p</code>",
"choices": [
"<pre><code class='language-javascript'>All &lt;section&gt; and &lt;p&gt; tags.</code></pre>",
"<pre><code class='language-javascript'>All &lt;p&gt; tags within a &lt;section&gt; tag.</code></pre>",
"<pre><code class='language-javascript'>All &lt;p&gt; tags placed immediately after a &lt;section&gt; tag.</code></pre>",
"<pre><code class='language-javascript'>Not a valid selector.</code></pre>"
],
"answer": 2,
"explanation": "<pre><code class='language-javascript'>&lt;p&gt;First Paragraph&lt;/p&gt;<br />&lt;section&gt;...&lt;/section&gt;<br />&lt;p&gt;Second Paragraph&lt;/p&gt;<br />&lt;p&gt;Third Paragraph&lt;/p&gt;</code></pre><br />Only the second paragraph tag will be selected and matched."
},
{
"subtitle": "How to incorporte CSS into web document",
"question": "How many different ways is it possible to incorporate Css into a web document?",
"choices": [
"<pre><code class='language-javascript'>1</code></pre>",
"<pre><code class='language-javascript'>2</code></pre>",
"<pre><code class='language-javascript'>3</code></pre>",
"<pre><code class='language-javascript'>4</code></pre>"
],
"answer": 2,
"explanation": "Currently Css can be used 'Inline' as a style attribute of an Html element, 'Embedded' in a style tag of a document and 'Imported' as an external file with the link tag element."
},
{
"subtitle": "Using target in css",
"question": "What would <code>[role=contentinfo] {...}</code> target in Css?",
"choices": [
"<pre><code class='language-javascript'>Any element with the role attribute of contentinfo.</code></pre>",
"<pre><code class='language-javascript'>Any element within a &lt;span&gt; tag.</code></pre>",
"<pre><code class='language-javascript'>Any element within a &lt;span&gt; tag with the role attribute of contentinfo.</code></pre>",
"<pre><code class='language-javascript'>This would only be valid using Sass or Scss.</code></pre>"
],
"answer": 0,
"explanation": "The square bracket notation is used to target elements with specific attributes."
},
{
"subtitle": "CSS positioning",
"question": "Which is not a value for 'position' in css?",
"choices": [
"<pre><code class='language-javascript'>Absolute</code></pre>",
"<pre><code class='language-javascript'>Static</code></pre>",
"<pre><code class='language-javascript'>Responsive</code></pre>",
"<pre><code class='language-javascript'>inherit</code></pre>"
],
"answer": 2,
"explanation": "There is no such positioning as responsive, currently there is (absolute, fixed, inherit, relative and static)."
}
],
"tests": [],
@ -877,10 +875,10 @@
"subtitle": "Default port for FTP",
"question": "In attempting to connect to an FTP (File Transfer Protocol) server and failing, which port can you check is open to troubleshoot the connection issue?",
"choices": [
"<pre><code class='language-javascript'>25</code></pre>",
"<pre><code class='language-javascript'>443</code></pre>",
"<pre><code class='language-javascript'>23</code></pre>",
"<pre><code class='language-javascript'>21</code></pre>"
"<pre><code class='language-javascript'>25</code></pre>",
"<pre><code class='language-javascript'>443</code></pre>",
"<pre><code class='language-javascript'>23</code></pre>",
"<pre><code class='language-javascript'>21</code></pre>"
],
"answer": 3,
"explanation": "Port 21 is traditionally used as the default port on a system for FTP."
@ -889,10 +887,10 @@
"subtitle": "Network types",
"question": "Which of the following is not a type of network?",
"choices": [
"<pre><code class='language-javascript'>LAN</code></pre>",
"<pre><code class='language-javascript'>MAN</code></pre>",
"<pre><code class='language-javascript'>PAN</code></pre>",
"<pre><code class='language-javascript'>NAN</code></pre>"
"<pre><code class='language-javascript'>LAN</code></pre>",
"<pre><code class='language-javascript'>MAN</code></pre>",
"<pre><code class='language-javascript'>PAN</code></pre>",
"<pre><code class='language-javascript'>NAN</code></pre>"
],
"answer": 3,
"explanation": "NAN is not a current network type. LAN (Local Area Network), MAN (Metropolitan Area Network), PAN (Personal Area Network)."
@ -901,10 +899,10 @@
"subtitle": "Subnet mask usage",
"question": "What is a subnet mask used for?",
"choices": [
"<pre><code class='language-javascript'>To hide the id of a wireless access point.</code></pre>",
"<pre><code class='language-javascript'>To identyfy the extended and host address.</code></pre>",
"<pre><code class='language-javascript'>To encrypt the broadcasting of ip addresses.</code></pre>",
"<pre><code class='language-javascript'>To connect to a vpn.</code></pre>"
"<pre><code class='language-javascript'>To hide the id of a wireless access point.</code></pre>",
"<pre><code class='language-javascript'>To identyfy the extended and host address.</code></pre>",
"<pre><code class='language-javascript'>To encrypt the broadcasting of ip addresses.</code></pre>",
"<pre><code class='language-javascript'>To connect to a vpn.</code></pre>"
],
"answer": 1,
"explanation": "A subnet mask is used along side an IP address in order to isolate the extended or 'subnet' of the network address and the host machine address."
@ -913,10 +911,10 @@
"subtitle": "Network acronym",
"question": "What does NIC stand for?",
"choices": [
"<pre><code class='language-javascript'>Network Isolated Connection</code></pre>",
"<pre><code class='language-javascript'>Network Interconnect Cables</code></pre>",
"<pre><code class='language-javascript'>Network Interface Card</code></pre>",
"<pre><code class='language-javascript'>Network Interference Cause</code></pre>"
"<pre><code class='language-javascript'>Network Isolated Connection</code></pre>",
"<pre><code class='language-javascript'>Network Interconnect Cables</code></pre>",
"<pre><code class='language-javascript'>Network Interface Card</code></pre>",
"<pre><code class='language-javascript'>Network Interference Cause</code></pre>"
],
"answer": 2,
"explanation": "A Network Interface Card or (Network Interface Controller) is a hardware component that connects to a Pc or printer in order to\nconnect and be identified on a network."
@ -925,8 +923,8 @@
"subtitle": "Default gateway",
"question": "A 'default gateway' provides a way for a local network to connect to a larger external network true or false?",
"choices": [
"<pre><code class='language-javascript'>true</code></pre>",
"<pre><code class='language-javascript'>false</code></pre>"
"<pre><code class='language-javascript'>true</code></pre>",
"<pre><code class='language-javascript'>false</code></pre>"
],
"answer": 0,
"explanation": "True this is usually the address of of an external router or switch."
@ -935,10 +933,10 @@
"subtitle": "The ipconfig commad",
"question": "'ipconfig' is used for?",
"choices": [
"<pre><code class='language-javascript'>Reassigning ip addresses.</code></pre>",
"<pre><code class='language-javascript'>Tool for masking ip adresses.</code></pre>",
"<pre><code class='language-javascript'>Monitoring network traffic.</code></pre>",
"<pre><code class='language-javascript'>Identify address information of a machine on a network.</code></pre>"
"<pre><code class='language-javascript'>Reassigning ip addresses.</code></pre>",
"<pre><code class='language-javascript'>Tool for masking ip adresses.</code></pre>",
"<pre><code class='language-javascript'>Monitoring network traffic.</code></pre>",
"<pre><code class='language-javascript'>Identify address information of a machine on a network.</code></pre>"
],
"answer": 3,
"explanation": "ipconfig or ifconfig(linux) is a utility for gaining various address information of a computer on a network."
@ -947,10 +945,10 @@
"subtitle": "Network terminology",
"question": "The term 'Latency' refers to?",
"choices": [
"<pre><code class='language-javascript'>The logical state of a network.</code></pre>",
"<pre><code class='language-javascript'>A loss of data expected in transfer over a network.</code></pre>",
"<pre><code class='language-javascript'>A measure of time delay between request and response experienced by a system.</code></pre>",
"<pre><code class='language-javascript'>The scope for expanding a network.</code></pre>"
"<pre><code class='language-javascript'>The logical state of a network.</code></pre>",
"<pre><code class='language-javascript'>A loss of data expected in transfer over a network.</code></pre>",
"<pre><code class='language-javascript'>A measure of time delay between request and response experienced by a system.</code></pre>",
"<pre><code class='language-javascript'>The scope for expanding a network.</code></pre>"
],
"answer": 2,
"explanation": "Latency can affect host to host transfers http requests etc."
@ -959,10 +957,10 @@
"subtitle": "Network terminology, again",
"question": "The term 'full duplex' refers to?",
"choices": [
"<pre><code class='language-javascript'>Two way data transfer but not at the same time.</code></pre>",
"<pre><code class='language-javascript'>Two way data transfer simultaneously.</code></pre>",
"<pre><code class='language-javascript'>One way data transfer at high speed.</code></pre>",
"<pre><code class='language-javascript'>One way data transfer with encryption</code></pre>"
"<pre><code class='language-javascript'>Two way data transfer but not at the same time.</code></pre>",
"<pre><code class='language-javascript'>Two way data transfer simultaneously.</code></pre>",
"<pre><code class='language-javascript'>One way data transfer at high speed.</code></pre>",
"<pre><code class='language-javascript'>One way data transfer with encryption</code></pre>"
],
"answer": 1,
"explanation": "An example of full duplex would be like a telephone conversation between two people."
@ -972,4 +970,4 @@
"challengeType": 8
}
]
}
}

34
challenges/08-coding-interview-questions-and-take-home-assignments/take-home-interview-projects.json
View File

@ -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,25 +415,25 @@
"type": "zipline",
"isRequired": false,
"challengeType": 3,
"translations":{
"translations": {
"ru": {
"title": "Создайте игру \"Жизнь\"",
"description": [
"<strong>Задание:</strong> Создайте приложение <a href='https://codepen.io' target='_blank'>CodePen.io</a>, функционал которого схож с этим: <a href='https://codepen.io/freeCodeCamp/full/BpwMZv/' target='_blank'>https://codepen.io/freeCodeCamp/full/BpwMZv/</a>.",
"<strong>Правило #1:</strong> Не подсматривайте код приложения-примера. Напишите его самостоятельно.",
"<strong>Правило #2:</strong> Приложение должно удовлетворять нижеприведённым <a href='https://ru.wikipedia.org/wiki/Пользовательские_истории' target='_blank'>пользовательским историям</a>. Используйте любые библиотеки или API, которые потребуются. Придайте ему свой личный стиль.",
"<strong>Правило #3:</strong> Для создания этого проекта вы должны использовать Sass и React.",
"<strong>Пользовательская история:</strong> Когда я впервые запускаю игру, она генерирует доску случайным образом и начинает игру.",
"<strong>Пользовательская история:</strong> Я могу запустить и остановить игру.",
"<strong>Пользовательская история:</strong> Я могу настроить доску.",
"<strong>Пользовательская история:</strong> Я могу очистить доску.",
"<strong>Пользовательская история:</strong> Когда я нажимаю начать, игра начинает воспроизведение.",
"<strong>Пользовательская история:</strong> Каждый раз, когда доска меняется, я могу видеть сколько поколений прошло.",
"<strong>Подсказка:</strong> Вот объяснение игры \"Жизнь\" от её создателя Джона Конвея: <a href='https://www.youtube.com/watch?v=E8kUJL04ELA' target='_blank'>https://www.youtube.com/watch?v=E8kUJL04ELA</a>",
"<strong>Подсказка:</strong> Вот обзор правил игры \"Жизнь\" для вашего сведения: <a href='https://ru.wikipedia.org/wiki/Жизнь_(игра)' target='_blank'>https://ru.wikipedia.org/wiki/Жизнь_(игра)</a>",
"Если что-то не получается, не забывайте пользоваться методом <a href='//github.com/FreeCodeCamp/freecodecamp/wiki/FreeCodeCamp-Get-Help' target='_blank'>Читай-Ищи-Спрашивай</a>.",
"Когда закончите, нажмите кнопку \"I've completed this challenge\" и укажите ссылку на вашу работу на CodePen.",
"Вы можете получить отзыв о вашем проекте от коллег, поделившись ссылкой на него в нашем <a href='//gitter.im/freecodecamp/codereview' target='_blank'>чате для рассмотрения кода</a>. Также вы можете поделиться ею через Twitter и на странице Free Code Camp вашего города на Facebook."
"<strong>Правило #2:</strong> Приложение должно удовлетворять нижеприведённым <a href='https://ru.wikipedia.org/wiki/Пользовательские_истории' target='_blank'>пользовательским историям</a>. Используйте любые библиотеки или API, которые потребуются. Придайте ему свой личный стиль.",
"<strong>Правило #3:</strong> Для создания этого проекта вы должны использовать Sass и React.",
"<strong>Пользовательская история:</strong> Когда я впервые запускаю игру, она генерирует доску случайным образом и начинает игру.",
"<strong>Пользовательская история:</strong> Я могу запустить и остановить игру.",
"<strong>Пользовательская история:</strong> Я могу настроить доску.",
"<strong>Пользовательская история:</strong> Я могу очистить доску.",
"<strong>Пользовательская история:</strong> Когда я нажимаю начать, игра начинает воспроизведение.",
"<strong>Пользовательская история:</strong> Каждый раз, когда доска меняется, я могу видеть сколько поколений прошло.",
"<strong>Подсказка:</strong> Вот объяснение игры \"Жизнь\" от её создателя Джона Конвея: <a href='https://www.youtube.com/watch?v=E8kUJL04ELA' target='_blank'>https://www.youtube.com/watch?v=E8kUJL04ELA</a>",
"<strong>Подсказка:</strong> Вот обзор правил игры \"Жизнь\" для вашего сведения: <a href='https://ru.wikipedia.org/wiki/Жизнь_(игра)' target='_blank'>https://ru.wikipedia.org/wiki/Жизнь_(игра)</a>",
"Если что-то не получается, не забывайте пользоваться методом <a href='//github.com/FreeCodeCamp/freecodecamp/wiki/FreeCodeCamp-Get-Help' target='_blank'>Читай-Ищи-Спрашивай</a>.",
"Когда закончите, нажмите кнопку \"I've completed this challenge\" и укажите ссылку на вашу работу на CodePen.",
"Вы можете получить отзыв о вашем проекте от коллег, поделившись ссылкой на него в нашем <a href='//gitter.im/freecodecamp/codereview' target='_blank'>чате для рассмотрения кода</a>. Также вы можете поделиться ею через Twitter и на странице Free Code Camp вашего города на Facebook."
]
},
"es": {
@ -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>.",