From e5395a00317d0d68c1701e8f208657af0fb069aa Mon Sep 17 00:00:00 2001 From: loketa Date: Thu, 19 Jul 2018 17:30:00 +0800 Subject: [PATCH 01/37] init translate --- 02-javascript-algorithms-and-data-structures/es6.json | 8 ++++---- 1 file changed, 4 insertions(+), 4 deletions(-) diff --git a/02-javascript-algorithms-and-data-structures/es6.json b/02-javascript-algorithms-and-data-structures/es6.json index 75464f1..5c3cc36 100644 --- a/02-javascript-algorithms-and-data-structures/es6.json +++ b/02-javascript-algorithms-and-data-structures/es6.json @@ -8,10 +8,10 @@ "id": "587d7b87367417b2b2512b3f", "title": "Explore Differences Between the var and let Keywords", "description": [ - "One of the biggest problems with declaring variables with the var keyword is that you can overwrite variable declarations without an error.", + "使用var关键字来声明变量的会出现变量声明覆盖而不会报错的问题.", "
var camper = 'James';
var camper = 'David';
console.log(camper);
// logs 'David'
", - "As you can see in the code above, the camper variable is originally declared as James and then overridden to be David.", - "In a small application, you might not run into this type of problem, but when your code becomes larger, you might accidentally overwrite a variable that you did not intend to overwrite.", + "看上面的代码,camper最初声明为James,然后又被覆盖成了David", + "在小型的应用中,你可能不会遇到这样的问题,但是当你的代码规模变得更加庞大的时候,就可能会在你不经意的时候产生变量的覆盖", "Because this behavior does not throw an error, searching and fixing bugs becomes more difficult.
", "A new keyword called let was introduced in ES6 to solve this potential issue with the var keyword.", "If you were to replace var with let in the variable declarations of the code above, the result would be an error.", @@ -1362,4 +1362,4 @@ } } ] -} \ No newline at end of file +} From bf25da24f67118fd315bb5c587291dddf4709d85 Mon Sep 17 00:00:00 2001 From: loketa Date: Thu, 19 Jul 2018 17:46:19 +0800 Subject: [PATCH 02/37] first lesson translate --- .../es6.json | 32 +++++++++---------- 1 file changed, 16 insertions(+), 16 deletions(-) diff --git a/02-javascript-algorithms-and-data-structures/es6.json b/02-javascript-algorithms-and-data-structures/es6.json index 5c3cc36..11830ad 100644 --- a/02-javascript-algorithms-and-data-structures/es6.json +++ b/02-javascript-algorithms-and-data-structures/es6.json @@ -8,33 +8,33 @@ "id": "587d7b87367417b2b2512b3f", "title": "Explore Differences Between the var and let Keywords", "description": [ - "使用var关键字来声明变量的会出现变量声明覆盖而不会报错的问题.", + "使用 var 关键字来声明变量,会出现重复声明导致变量被覆盖却不会报错的问题.", "
var camper = 'James';
var camper = 'David';
console.log(camper);
// logs 'David'
", - "看上面的代码,camper最初声明为James,然后又被覆盖成了David", - "在小型的应用中,你可能不会遇到这样的问题,但是当你的代码规模变得更加庞大的时候,就可能会在你不经意的时候产生变量的覆盖", - "Because this behavior does not throw an error, searching and fixing bugs becomes more difficult.
", - "A new keyword called let was introduced in ES6 to solve this potential issue with the var keyword.", - "If you were to replace var with let in the variable declarations of the code above, the result would be an error.", + "看上面的代码, camper 最初声明为 James,然后又被覆盖成了 David.", + "在小型的应用中,你可能不会遇到这样的问题,但是当你的代码规模变得更加庞大的时候,就可能会在你不经意的时候产生变量的覆盖.", + "因为这样的行为并不会报错,导致 debug 变得更加困难.
", + "在 ES6 中使用了新的关键字 let 来解决 var 关键字可能带来的问题.", + "如果你在上面的代码中,使用了 let 关键字来代替 var关键字,结果会是一个报错.", "
let camper = 'James';
let camper = 'David'; // throws an error
", - "This error can be seen in the console of your browser.", - "So unlike var, when using let, a variable with the same name can only be declared once.", - "Note the \"use strict\". This enables Strict Mode, which catches common coding mistakes and \"unsafe\" actions. For instance:", + "这个错误可以在浏览器的控制台里被看见.", + "与 var 不同的是, 当使用 let 的时候,同一名字的变量只能被声明一次.", + "请注意 \"use strict\".这代表着开启了严格模式, 用于检测常见的代码错误以及\"不安全\"的行为,例如:", "
\"use strict\";
x = 3.14; // throws an error because x is not declared
", "
", - "Update the code so it only uses the let keyword." + "请更新这段代码,并且在其中只使用 let 关键字" ], "tests": [ { - "text": "var does not exist in code.", - "testString": "getUserInput => assert(!getUserInput('index').match(/var/g),'var does not exist in code.');" + "text": "在代码中不应存在 var.", + "testString": "getUserInput => assert(!getUserInput('index').match(/var/g),'在代码中不应存在 var.');" }, { - "text": "catName should be Oliver.", - "testString": "assert(catName === \"Oliver\", 'catName should be Oliver.');" + "text": "catName 变量的值应该为 Oliver.", + "testString": "assert(catName === \"Oliver\", 'catName 变量的值应该为 Oliver.');" }, { - "text": "quote should be \"Oliver says Meow!\"", - "testString": "assert(quote === \"Oliver says Meow!\", 'quote should be \"Oliver says Meow!\"');" + "text": "quote 变量的值应该为 \"Oliver says Meow!\"", + "testString": "assert(quote === \"Oliver says Meow!\", 'quote 变量的值应该为 \"Oliver says Meow!\"');" } ], "releasedOn": "Feb 17, 2017", From 3342d58aa569a697e5e51645df8e875fbe04e04d Mon Sep 17 00:00:00 2001 From: demongodYY Date: Thu, 19 Jul 2018 22:56:27 +0800 Subject: [PATCH 03/37] translate lesson 2 --- .../es6.json | 31 ++++++++++--------- 1 file changed, 16 insertions(+), 15 deletions(-) diff --git a/02-javascript-algorithms-and-data-structures/es6.json b/02-javascript-algorithms-and-data-structures/es6.json index 11830ad..e98bb3a 100644 --- a/02-javascript-algorithms-and-data-structures/es6.json +++ b/02-javascript-algorithms-and-data-structures/es6.json @@ -30,7 +30,7 @@ }, { "text": "catName 变量的值应该为 Oliver.", - "testString": "assert(catName === \"Oliver\", 'catName 变量的值应该为 Oliver.');" + "testString": "assert(catName === \"Oliver\", 'catName 变量的值应该为 \"Oliver\".');" }, { "text": "quote 变量的值应该为 \"Oliver says Meow!\"", @@ -65,33 +65,34 @@ "id": "587d7b87367417b2b2512b40", "title": "Compare Scopes of the var and let Keywords", "description": [ - "When you declare a variable with the var keyword, it is declared globally, or locally if declared inside a function.", - "The let keyword behaves similarly, but with some extra features. When you declare a variable with the let keyword inside a block, statement, or expression, its scope is limited to that block, statement, or expression.", - "For example:", + "当你使用 var 关键字来声明一个变量的时候,这个变量会被声明成全局变量,或是函数内的局部变量.", + "let 关键字的作用类似,但会有一些额外的特性. 当你使用 let 关键字在代码块,语句或者表达式里声明变量的时候,这个变量的作用域就在当前的代码块,语句或表达式之中.", + "举个例子:", "
var numArray = [];
for (var i = 0; i < 3; i++) {
  numArray.push(i);
}
console.log(numArray);
// returns [0, 1, 2]
console.log(i);
// returns 3
", - "With the var keyword, i is declared globally. So when i++ is executed, it updates the global variable. This code is similar to the following:", + "当使用 var 关键字的时候, i 会被声明成全局变量. 当 i++ 执行的时候, 它会改变全局变量的值. 这段代码可以看做下面这样:", "
var numArray = [];
var i;
for (i = 0; i < 3; i++) {
  numArray.push(i);
}
console.log(numArray);
// returns [0, 1, 2]
console.log(i);
// returns 3
", - "This behavior will cause problems if you were to create a function and store it for later use inside a for loop that uses the i variable. This is because the stored function will always refer to the value of the updated global i variable.", + "这个行为在你一个创建函数用来存储在 for 循环中使用的 i 变量的时候,会出现问题.这是因为函数存储的值会因为全局变量 i的变化而不断的改变.", "
var printNumTwo;
for (var i = 0; i < 3; i++) {
  if(i === 2){
    printNumTwo = function() {
      return i;
    };
  }
}
console.log(printNumTwo());
// returns 3
", - "As you can see, printNumTwo() prints 3 and not 2. This is because the value assigned to i was updated and the printNumTwo() returns the global i and not the value i had when the function was created in the for loop. The let keyword does not follow this behavior:", + "可以看到, printNumTwo() 打印了 3 而不是 2. 这是因为 i 发生了改变,并且函数 printNumTwo() 返回的是全局变量 i的值,而不是 for 循环中创建函数时 i 的值.The let 关键字就不会有这种现象:", "
'use strict';
let printNumTwo;
for (let i = 0; i < 3; i++) {
  if (i === 2) {
    printNumTwo = function() {
      return i;
    };
  }
}
console.log(printNumTwo());
// returns 2
console.log(i);
// returns \"i is not defined\"
", - "i is not defined because it was not declared in the global scope. It is only declared within the for loop statement. printNumTwo() returned the correct value because three different i variables with unique values (0, 1, and 2) were created by the let keyword within the loop statement.", + "i 在全局作用域中没有声明,所以它没有被定义, 它只会在 for 循环的语句中被声明. 因为在循环语句中的 let关键字创建了拥有独一无二的值 (0, 1, 或 2) 的三个不同 i 变量,所以 printNumTwo() 返回了正确的值.", "
", "Fix the code so that i declared in the if statement is a separate variable than i declared in the first line of the function. Be certain not to use the var keyword anywhere in your code.", - "This exercise is designed to illustrate the difference between how var and let 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." + "修改这段代码,使得在 if 语句中声明的 i 变量与在函数的第一行声明的 i 变量是彼此独立的. 请注意不要在你的代码的任何地方使用 var 关键字", + "这个练习说明了使用 var 与 let关键字声明变量时,作用域之间的不同.当编写类似这个练习中的函数的时候,通常来说最好还是使用不同的变量名,用于避免困惑." ], "tests": [ { - "text": "var does not exist in code.", - "testString": "getUserInput => assert(!getUserInput('index').match(/var/g),'var does not exist in code.');" + "text": "var 不应该在代码中存在.", + "testString": "getUserInput => assert(!getUserInput('index').match(/var/g),'var 不应该在代码中存在.');" }, { - "text": "The variable i declared in the if statement should equal \"block scope\".", - "testString": "getUserInput => assert(getUserInput('index').match(/(i\\s*=\\s*).*\\s*.*\\s*.*\\1('|\")block\\s*scope\\2/g), 'The variable i declared in the if statement should equal \"block scope\".');" + "text": "在 if 语句中声明的 i 变量的值是 \"block scope\".", + "testString": "getUserInput => assert(getUserInput('index').match(/(i\\s*=\\s*).*\\s*.*\\s*.*\\1('|\")block\\s*scope\\2/g), '在 if 语句中声明的 i 变量应该是 \"block scope\".');" }, { - "text": "checkScope() should return \"function scope\"", - "testString": "assert(checkScope() === \"function scope\", 'checkScope() should return \"function scope\"');" + "text": "checkScope() 应当 返回 \"function scope\"", + "testString": "assert(checkScope() === \"function scope\", 'checkScope() 应该返回 \"function scope\"');" } ], "releasedOn": "Feb 17, 2017", From 0a37e22b37a3bd79af197ed30b715a3e82ada0bc Mon Sep 17 00:00:00 2001 From: demongodYY Date: Thu, 19 Jul 2018 23:07:13 +0800 Subject: [PATCH 04/37] fix comma error --- .../es6.json | 51 +++++++++---------- 1 file changed, 25 insertions(+), 26 deletions(-) diff --git a/02-javascript-algorithms-and-data-structures/es6.json b/02-javascript-algorithms-and-data-structures/es6.json index e98bb3a..cbf5393 100644 --- a/02-javascript-algorithms-and-data-structures/es6.json +++ b/02-javascript-algorithms-and-data-structures/es6.json @@ -8,29 +8,29 @@ "id": "587d7b87367417b2b2512b3f", "title": "Explore Differences Between the var and let Keywords", "description": [ - "使用 var 关键字来声明变量,会出现重复声明导致变量被覆盖却不会报错的问题.", + "使用 var 关键字来声明变量,会出现重复声明导致变量被覆盖却不会报错的问题。", "
var camper = 'James';
var camper = 'David';
console.log(camper);
// logs 'David'
", - "看上面的代码, camper 最初声明为 James,然后又被覆盖成了 David.", - "在小型的应用中,你可能不会遇到这样的问题,但是当你的代码规模变得更加庞大的时候,就可能会在你不经意的时候产生变量的覆盖.", - "因为这样的行为并不会报错,导致 debug 变得更加困难.
", - "在 ES6 中使用了新的关键字 let 来解决 var 关键字可能带来的问题.", - "如果你在上面的代码中,使用了 let 关键字来代替 var关键字,结果会是一个报错.", + "看上面的代码, camper 最初声明为 James,然后又被覆盖成了 David。", + "在小型的应用中,你可能不会遇到这样的问题,但是当你的代码规模变得更加庞大的时候,就可能会在你不经意的时候产生变量的覆盖", + "因为这样的行为并不会报错，导致 debug 变得更加困难。
", + "在 ES6 中使用了新的关键字 let 来解决 var 关键字可能带来的问题。", + "如果你在上面的代码中，使用了 let 关键字来代替 var关键字,结果会是一个报错。", "
let camper = 'James';
let camper = 'David'; // throws an error
", - "这个错误可以在浏览器的控制台里被看见.", - "与 var 不同的是, 当使用 let 的时候,同一名字的变量只能被声明一次.", - "请注意 \"use strict\".这代表着开启了严格模式, 用于检测常见的代码错误以及\"不安全\"的行为,例如:", + "可以在可以在浏览器的控制台里看见这个错误。", + "与 var 不同的是, 当使用 let 的时候,同一名字的变量只能被声明一次。", + "请注意 \"use strict\"。这代表着开启了严格模式, 用于检测常见的代码错误以及\"不安全\"的行为,例如:", "
\"use strict\";
x = 3.14; // throws an error because x is not declared
", "
", "请更新这段代码,并且在其中只使用 let 关键字" ], "tests": [ { - "text": "在代码中不应存在 var.", - "testString": "getUserInput => assert(!getUserInput('index').match(/var/g),'在代码中不应存在 var.');" + "text": "在代码中不应存在 var。", + "testString": "getUserInput => assert(!getUserInput('index').match(/var/g),'在代码中不应存在 var。');" }, { - "text": "catName 变量的值应该为 Oliver.", - "testString": "assert(catName === \"Oliver\", 'catName 变量的值应该为 \"Oliver\".');" + "text": "catName 变量的值应该为 Oliver。", + "testString": "assert(catName === \"Oliver\", 'catName 变量的值应该为 \"Oliver\"。');" }, { "text": "quote 变量的值应该为 \"Oliver says Meow!\"", @@ -65,30 +65,29 @@ "id": "587d7b87367417b2b2512b40", "title": "Compare Scopes of the var and let Keywords", "description": [ - "当你使用 var 关键字来声明一个变量的时候,这个变量会被声明成全局变量,或是函数内的局部变量.", - "let 关键字的作用类似,但会有一些额外的特性. 当你使用 let 关键字在代码块,语句或者表达式里声明变量的时候,这个变量的作用域就在当前的代码块,语句或表达式之中.", + "当你使用 var 关键字来声明一个变量的时候,这个变量会被声明成全局变量,或是函数内的局部变量。", + "let 关键字的作用类似,但会有一些额外的特性。 当你使用 let 关键字在代码块,语句或者表达式里声明变量的时候,这个变量的作用域就在当前的代码块,语句或表达式之中。", "举个例子:", "
var numArray = [];
for (var i = 0; i < 3; i++) {
  numArray.push(i);
}
console.log(numArray);
// returns [0, 1, 2]
console.log(i);
// returns 3
", - "当使用 var 关键字的时候, i 会被声明成全局变量. 当 i++ 执行的时候, 它会改变全局变量的值. 这段代码可以看做下面这样:", + "当使用 var 关键字的时候, i 会被声明成全局变量。 当 i++ 执行的时候, 它会改变全局变量的值。 这段代码可以看做下面这样:", "
var numArray = [];
var i;
for (i = 0; i < 3; i++) {
  numArray.push(i);
}
console.log(numArray);
// returns [0, 1, 2]
console.log(i);
// returns 3
", - "这个行为在你一个创建函数用来存储在 for 循环中使用的 i 变量的时候,会出现问题.这是因为函数存储的值会因为全局变量 i的变化而不断的改变.", + "这个行为在你一个创建函数用来存储在 for 循环中使用的 i 变量的时候,会出现问题。这是因为函数存储的值会因为全局变量 i的变化而不断的改变。", "
var printNumTwo;
for (var i = 0; i < 3; i++) {
  if(i === 2){
    printNumTwo = function() {
      return i;
    };
  }
}
console.log(printNumTwo());
// returns 3
", - "可以看到, printNumTwo() 打印了 3 而不是 2. 这是因为 i 发生了改变,并且函数 printNumTwo() 返回的是全局变量 i的值,而不是 for 循环中创建函数时 i 的值.The let 关键字就不会有这种现象:", + "可以看到, printNumTwo() 打印了 3 而不是 2。 这是因为 i 发生了改变,并且函数 printNumTwo() 返回的是全局变量 i的值,而不是 for 循环中创建函数时 i 的值。The let 关键字就不会有这种现象:", "
'use strict';
let printNumTwo;
for (let i = 0; i < 3; i++) {
  if (i === 2) {
    printNumTwo = function() {
      return i;
    };
  }
}
console.log(printNumTwo());
// returns 2
console.log(i);
// returns \"i is not defined\"
", - "i 在全局作用域中没有声明,所以它没有被定义, 它只会在 for 循环的语句中被声明. 因为在循环语句中的 let关键字创建了拥有独一无二的值 (0, 1, 或 2) 的三个不同 i 变量,所以 printNumTwo() 返回了正确的值.", + "i 在全局作用域中没有声明,所以它没有被定义, 它只会在 for 循环的语句中被声明。 因为在循环语句中的 let关键字创建了拥有独一无二的值 (0, 1, 或 2) 的三个不同 i 变量,所以 printNumTwo() 返回了正确的值。", "
", - "Fix the code so that i declared in the if statement is a separate variable than i declared in the first line of the function. Be certain not to use the var keyword anywhere in your code.", - "修改这段代码,使得在 if 语句中声明的 i 变量与在函数的第一行声明的 i 变量是彼此独立的. 请注意不要在你的代码的任何地方使用 var 关键字", - "这个练习说明了使用 var 与 let关键字声明变量时,作用域之间的不同.当编写类似这个练习中的函数的时候,通常来说最好还是使用不同的变量名,用于避免困惑." + "修改这段代码,使得在 if 语句中声明的 i 变量与在函数的第一行声明的 i 变量是彼此独立的。 请注意不要在你的代码的任何地方使用 var 关键字。", + "这个练习说明了使用 var 与 let关键字声明变量时,作用域之间的不同。当编写类似这个练习中的函数的时候,通常来说最好还是使用不同的变量名,用于避免困惑。" ], "tests": [ { - "text": "var 不应该在代码中存在.", - "testString": "getUserInput => assert(!getUserInput('index').match(/var/g),'var 不应该在代码中存在.');" + "text": "var 不应该在代码中存在。", + "testString": "getUserInput => assert(!getUserInput('index').match(/var/g),'var 不应该在代码中存在。');" }, { - "text": "在 if 语句中声明的 i 变量的值是 \"block scope\".", - "testString": "getUserInput => assert(getUserInput('index').match(/(i\\s*=\\s*).*\\s*.*\\s*.*\\1('|\")block\\s*scope\\2/g), '在 if 语句中声明的 i 变量应该是 \"block scope\".');" + "text": "在 if 语句中声明的 i 变量的值是 \"block scope\"。", + "testString": "getUserInput => assert(getUserInput('index').match(/(i\\s*=\\s*).*\\s*.*\\s*.*\\1('|\")block\\s*scope\\2/g), '在 if 语句中声明的 i 变量应该是 \"block scope\"。');" }, { "text": "checkScope() 应当 返回 \"function scope\"", From a05db5b5e7ea3a2254ce8e000ceb9f88aec06e08 Mon Sep 17 00:00:00 2001 From: demongodYY Date: Sun, 22 Jul 2018 11:50:45 +0800 Subject: [PATCH 05/37] translate lesson 3 --- .../es6.json | 54 +++++++++---------- 1 file changed, 27 insertions(+), 27 deletions(-) diff --git a/02-javascript-algorithms-and-data-structures/es6.json b/02-javascript-algorithms-and-data-structures/es6.json index cbf5393..dae3e73 100644 --- a/02-javascript-algorithms-and-data-structures/es6.json +++ b/02-javascript-algorithms-and-data-structures/es6.json @@ -8,20 +8,20 @@ "id": "587d7b87367417b2b2512b3f", "title": "Explore Differences Between the var and let Keywords", "description": [ - "使用 var 关键字来声明变量,会出现重复声明导致变量被覆盖却不会报错的问题。", + "使用 var 关键字来声明变量，会出现重复声明导致变量被覆盖却不会报错的问题。", "
var camper = 'James';
var camper = 'David';
console.log(camper);
// logs 'David'
", - "看上面的代码, camper 最初声明为 James,然后又被覆盖成了 David。", - "在小型的应用中,你可能不会遇到这样的问题,但是当你的代码规模变得更加庞大的时候,就可能会在你不经意的时候产生变量的覆盖", + "看上面的代码， camper 最初声明为 James，然后又被覆盖成了 David。", + "在小型的应用中，你可能不会遇到这样的问题，但是当你的代码规模变得更加庞大的时候，就可能会在你不经意的时候产生变量的覆盖", "因为这样的行为并不会报错，导致 debug 变得更加困难。
", "在 ES6 中使用了新的关键字 let 来解决 var 关键字可能带来的问题。", - "如果你在上面的代码中，使用了 let 关键字来代替 var关键字,结果会是一个报错。", + "如果你在上面的代码中，使用了 let 关键字来代替 var关键字，结果会是一个报错。", "
let camper = 'James';
let camper = 'David'; // throws an error
", "可以在可以在浏览器的控制台里看见这个错误。", - "与 var 不同的是, 当使用 let 的时候,同一名字的变量只能被声明一次。", - "请注意 \"use strict\"。这代表着开启了严格模式, 用于检测常见的代码错误以及\"不安全\"的行为,例如:", + "与 var 不同的是， 当使用 let 的时候，同一名字的变量只能被声明一次。", + "请注意 \"use strict\"。这代表着开启了严格模式， 用于检测常见的代码错误以及\"不安全\"的行为，例如：", "
\"use strict\";
x = 3.14; // throws an error because x is not declared
", "
", - "请更新这段代码,并且在其中只使用 let 关键字" + "请更新这段代码，并且在其中只使用 let 关键字" ], "tests": [ { @@ -65,20 +65,20 @@ "id": "587d7b87367417b2b2512b40", "title": "Compare Scopes of the var and let Keywords", "description": [ - "当你使用 var 关键字来声明一个变量的时候,这个变量会被声明成全局变量,或是函数内的局部变量。", - "let 关键字的作用类似,但会有一些额外的特性。 当你使用 let 关键字在代码块,语句或者表达式里声明变量的时候,这个变量的作用域就在当前的代码块,语句或表达式之中。", + "当你使用 var 关键字来声明一个变量的时候，这个变量会被声明成全局变量，或是函数内的局部变量。", + "let 关键字的作用类似，但会有一些额外的特性。 当你使用 let 关键字在代码块，语句或者表达式里声明变量的时候，这个变量的作用域就在当前的代码块，语句或表达式之中。", "举个例子:", "
var numArray = [];
for (var i = 0; i < 3; i++) {
  numArray.push(i);
}
console.log(numArray);
// returns [0, 1, 2]
console.log(i);
// returns 3
", - "当使用 var 关键字的时候, i 会被声明成全局变量。 当 i++ 执行的时候, 它会改变全局变量的值。 这段代码可以看做下面这样:", + "当使用 var 关键字的时候， i 会被声明成全局变量。 当 i++ 执行的时候， 它会改变全局变量的值。 这段代码可以看做下面这样:", "
var numArray = [];
var i;
for (i = 0; i < 3; i++) {
  numArray.push(i);
}
console.log(numArray);
// returns [0, 1, 2]
console.log(i);
// returns 3
", - "这个行为在你一个创建函数用来存储在 for 循环中使用的 i 变量的时候,会出现问题。这是因为函数存储的值会因为全局变量 i的变化而不断的改变。", + "这个行为在你一个创建函数用来存储在 for 循环中使用的 i 变量的时候，会出现问题。这是因为函数存储的值会因为全局变量 i的变化而不断的改变。", "
var printNumTwo;
for (var i = 0; i < 3; i++) {
  if(i === 2){
    printNumTwo = function() {
      return i;
    };
  }
}
console.log(printNumTwo());
// returns 3
", - "可以看到, printNumTwo() 打印了 3 而不是 2。 这是因为 i 发生了改变,并且函数 printNumTwo() 返回的是全局变量 i的值,而不是 for 循环中创建函数时 i 的值。The let 关键字就不会有这种现象:", + "可以看到， printNumTwo() 打印了 3 而不是 2。 这是因为 i 发生了改变，并且函数 printNumTwo() 返回的是全局变量 i的值，而不是 for 循环中创建函数时 i 的值。The let 关键字就不会有这种现象:", "
'use strict';
let printNumTwo;
for (let i = 0; i < 3; i++) {
  if (i === 2) {
    printNumTwo = function() {
      return i;
    };
  }
}
console.log(printNumTwo());
// returns 2
console.log(i);
// returns \"i is not defined\"
", - "i 在全局作用域中没有声明,所以它没有被定义, 它只会在 for 循环的语句中被声明。 因为在循环语句中的 let关键字创建了拥有独一无二的值 (0, 1, 或 2) 的三个不同 i 变量,所以 printNumTwo() 返回了正确的值。", + "i 在全局作用域中没有声明，所以它没有被定义， 它只会在 for 循环的语句中被声明。 因为在循环语句中的 let关键字创建了拥有独一无二的值 (0, 1, 或 2) 的三个不同 i 变量，所以 printNumTwo() 返回了正确的值。", "
", - "修改这段代码,使得在 if 语句中声明的 i 变量与在函数的第一行声明的 i 变量是彼此独立的。 请注意不要在你的代码的任何地方使用 var 关键字。", - "这个练习说明了使用 var 与 let关键字声明变量时,作用域之间的不同。当编写类似这个练习中的函数的时候,通常来说最好还是使用不同的变量名,用于避免困惑。" + "修改这段代码，使得在 if 语句中声明的 i 变量与在函数的第一行声明的 i 变量是彼此独立的。 请注意不要在你的代码的任何地方使用 var 关键字。", + "这个练习说明了使用 var 与 let关键字声明变量时，作用域之间的不同。当编写类似这个练习中的函数的时候，通常来说最好还是使用不同的变量名，用于避免困惑。" ], "tests": [ { @@ -122,29 +122,29 @@ "id": "587d7b87367417b2b2512b41", "title": "Declare a Read-Only Variable with the const Keyword", "description": [ - "let is not the only new way to declare variables. In ES6, you can also declare variables using the const keyword.", - "const has all the awesome features that let has, with the added bonus that variables declared using const are read-only. They are a constant value, which means that once a variable is assigned with const, it cannot be reassigned.", + "let 并不是唯一的新的声明变量的方式。在 ES6里面，你还可以使用 const 关键字来声明变量。", + "const 拥有 let 的所有优点，所不同的是，通过code 声明的变量是只读的。这意味着通过 const 声明的变量只能被赋值一次，而不能被再次赋值。", "
\"use strict\"
const FAV_PET = \"Cats\";
FAV_PET = \"Dogs\"; // returns error
", - "As you can see, trying to reassign a variable declared with const will throw an error. You should always name variables you don't want to reassign using the const keyword. This helps when you accidentally attempt to reassign a variable that is meant to stay constant. A common practice when naming constants is to use all uppercase letters, with words separated by an underscore.", + "可以看见，尝试给通过 const 声明的变量再次赋值会报错。你应该使用 const 关键字来对所有不打算再次赋值的变量进行声明。这有助于你避免给一个常量进行额外的再次赋值。一个最佳实践是对所有常量的命名采用全大写字母，并在单词之间使用下划线进行分隔。", "
", - "Change the code so that all variables are declared using let or const. Use let when you want the variable to change, and const when you want the variable to remain constant. Also, rename variables declared with const to conform to common practices, meaning constants should be in all caps." + "改变以下代码，使得所有的变量都使用 let 或 const 关键词来声明。当变量将会改变的时候使用 let关键字，当变量要保持常量的时候使用 const 关键字。同时，对使用 const 声明的变量进行最佳实践的重命名，变量名中的字母应该都是大写的。" ], "tests": [ { - "text": "var does not exist in your code.", - "testString": "getUserInput => assert(!getUserInput('index').match(/var/g),'var does not exist in your code.');" + "text": "var 在代码中不存在。", + "testString": "getUserInput => assert(!getUserInput('index').match(/var/g),'var 在代码中不存在。');" }, { - "text": "SENTENCE should be a constant variable declared with const.", - "testString": "getUserInput => assert(getUserInput('index').match(/(const SENTENCE)/g), 'SENTENCE should be a constant variable declared with const.');" + "text": "SENTENCE 应该是使用 const 声明的常量。", + "testString": "getUserInput => assert(getUserInput('index').match(/(const SENTENCE)/g), 'SENTENCE 应该是使用 const 声明的常量。');" }, { - "text": "i should be declared with let.", - "testString": "getUserInput => assert(getUserInput('index').match(/(let i)/g), 'i should be declared with let.');" + "text": "i 应该是使用 let 声明的变量。", + "testString": "getUserInput => assert(getUserInput('index').match(/(let i)/g), 'i 应该是使用 let 声明的变量。');" }, { - "text": "console.log should be changed to print the SENTENCE variable.", - "testString": "getUserInput => assert(getUserInput('index').match(/console\\.log\\(\\s*SENTENCE\\s*\\)\\s*;?/g), 'console.log should be adjusted to print the variable SENTENCE.');" + "text": "console.log 应该修改为用于打印 SENTENCE 变量。", + "testString": "getUserInput => assert(getUserInput('index').match(/console\\.log\\(\\s*SENTENCE\\s*\\)\\s*;?/g), 'console.log 应该修改为用于打印 SENTENCE 变量。');" } ], "releasedOn": "Feb 17, 2017", From 36a6787187b15351db6ea0c18f5acacf4f5e324b Mon Sep 17 00:00:00 2001 From: demongodYY Date: Sun, 22 Jul 2018 12:30:45 +0800 Subject: [PATCH 06/37] translate lesson 4 --- .../es6.json | 26 ++++++++++--------- 1 file changed, 14 insertions(+), 12 deletions(-) diff --git a/02-javascript-algorithms-and-data-structures/es6.json b/02-javascript-algorithms-and-data-structures/es6.json index dae3e73..0de47c2 100644 --- a/02-javascript-algorithms-and-data-structures/es6.json +++ b/02-javascript-algorithms-and-data-structures/es6.json @@ -180,29 +180,31 @@ "title": "Mutate an Array Declared with const", "description": [ "The const declaration has many use cases in modern JavaScript.", - "Some developers prefer to assign all their variables using const by default, unless they know they will need to reassign the value. Only in that case, they use let.", - "However, it is important to understand that objects (including arrays and functions) assigned to a variable using const are still mutable. Using the const declaration only prevents reassignment of the variable identifier.", + "在现代的 JavaScript 里，const 声明有很多用法", + "一些开发者倾向默认使用 const 来声明所有变量，除非在他们知道需要更改某个变量的值的时候，才会使用 let", + "然而，重点是要理解对象（包括数组和函数）在使用 const 声明的时候依然是可变的。使用 const来声明只会保证它的标识不会被重新赋值。", "
\"use strict\";
const s = [5, 6, 7];
s = [1, 2, 3]; // throws error, trying to assign a const
s[2] = 45; // works just as it would with an array declared with var or let
console.log(s); // returns [5, 6, 45]
", - "As you can see, you can mutate the object [5, 6, 7] itself and the variable s will still point to the altered array [5, 6, 45]. Like all arrays, the array elements in s are mutable, but because const was used, you cannot use the variable identifier s to point to a different array using the assignment operator.", + "Like all arrays, the array elements in s are mutable, but because const was used, you cannot use the variable identifier s to point to a different array using the assignment operator.", + "可以看见，你可以改变 [5, 6, 7] 自身，所以 s 变量指向了改变后的数组 [5, 6, 45]。和所有数组一样，数组 s中的数组元素是可以被改变的，但是因为使用了 const 关键字，你不能使用赋值操作符将变量标识 s 指向另外一个数组", "
", - "An array is declared as const s = [5, 7, 2]. Change the array to [2, 5, 7] using various element assignment." + "这里有一个使用 const s = [5, 7, 2] 声明的数组。使用对各元素赋值的方法将数组改成 [2, 5, 7]。" ], "tests": [ { - "text": "Do not replace const keyword.", - "testString": "getUserInput => assert(getUserInput('index').match(/const/g), 'Do not replace const keyword.');" + "text": "不要替换 const 关键字。", + "testString": "getUserInput => assert(getUserInput('index').match(/const/g), '不要替换 const 关键字。');" }, { - "text": "s should be a constant variable (by using const).", - "testString": "getUserInput => assert(getUserInput('index').match(/const\\s+s/g), 's should be a constant variable (by using const).');" + "text": "s 应该为常量 (通过使用 const)。", + "testString": "getUserInput => assert(getUserInput('index').match(/const\\s+s/g), 's 应该为常量 (通过使用 const)。');" }, { - "text": "Do not change the original array declaration.", - "testString": "getUserInput => assert(getUserInput('index').match(/const\\s+s\\s*=\\s*\\[\\s*5\\s*,\\s*7\\s*,\\s*2\\s*\\]\\s*;?/g), 'Do not change the original array declaration.');" + "text": "不要改变原数组的声明。", + "testString": "getUserInput => assert(getUserInput('index').match(/const\\s+s\\s*=\\s*\\[\\s*5\\s*,\\s*7\\s*,\\s*2\\s*\\]\\s*;?/g), '不要改变原数组的声明。');" }, { - "text": "s should be equal to [2, 5, 7].", - "testString": "assert.deepEqual(s, [2, 5, 7], 's should be equal to [2, 5, 7].');" + "text": "s 应该等于 [2, 5, 7]。", + "testString": "assert.deepEqual(s, [2, 5, 7], 's 应该等于 [2, 5, 7]。');" } ], "releasedOn": "Feb 17, 2017", From e56a241ee0f77fb58423d9453779a7b3ebc86400 Mon Sep 17 00:00:00 2001 From: demongodYY Date: Sun, 22 Jul 2018 13:12:34 +0800 Subject: [PATCH 07/37] translate lesson 5 --- .../es6.json | 22 +++++++++---------- 1 file changed, 11 insertions(+), 11 deletions(-) diff --git a/02-javascript-algorithms-and-data-structures/es6.json b/02-javascript-algorithms-and-data-structures/es6.json index 0de47c2..e810b11 100644 --- a/02-javascript-algorithms-and-data-structures/es6.json +++ b/02-javascript-algorithms-and-data-structures/es6.json @@ -235,28 +235,28 @@ "id": "598f48a36c8c40764b4e52b3", "title": "Prevent Object Mutation", "description": [ - "As seen in the previous challenge, const declaration alone doesn't really protect your data from mutation. To ensure your data doesn't change, JavaScript provides a function Object.freeze to prevent data mutation.", - "Once the object is frozen, you can no longer add, update, or delete properties from it. Any attempt at changing the object will be rejected without an error.", + "通过之前的挑战可以看出, const 声明并不会真的保护你的数据不被改变. 为了确保数据不被改变， Javascript 提供了一个函数 Object.freeze 来防止数据改变。", + "当一个对象被冻结的时候，你不能再对它的属性再进行增、删、改的操作。任何试图改变对象的操作都会被阻止，却不会报错。", "
let obj = {
  name:\"FreeCodeCamp\",
  review:\"Awesome\"
};
Object.freeze(obj);
obj.review = \"bad\"; //will be ignored. Mutation not allowed
obj.newProp = \"Test\"; // will be ignored. Mutation not allowed
console.log(obj);
// { name: \"FreeCodeCamp\", review:\"Awesome\"}
", "
", - "In this challenge you are going to use Object.freeze to prevent mathematical constants from changing. You need to freeze the MATH_CONSTANTS object so that no one is able alter the value of PI, add, or delete properties ." + "在这个挑战中，你将使用 Object.freeze 来防止数学常量被改变。你需要冻结 MATH_CONSTANTS 对象，使得没有人可以改变 PI 的值，抑或增加或删除属性。" ], "tests": [ { - "text": "Do not replace const keyword.", - "testString": "getUserInput => assert(getUserInput('index').match(/const/g), 'Do not replace const keyword.');" + "text": "不要替换 const 关键字。", + "testString": "getUserInput => assert(getUserInput('index').match(/const/g), '不要替换 const 关键字。');" }, { - "text": "MATH_CONSTANTS should be a constant variable (by using const).", - "testString": "getUserInput => assert(getUserInput('index').match(/const\\s+MATH_CONSTANTS/g), 'MATH_CONSTANTS should be a constant variable (by using const).');" + "text": "MATH_CONSTANTS 应该为一个常量 (使用 const)。", + "testString": "getUserInput => assert(getUserInput('index').match(/const\\s+MATH_CONSTANTS/g), 'MATH_CONSTANTS 应该为一个常量 (使用 const)。');" }, { - "text": "Do not change original MATH_CONSTANTS.", - "testString": "getUserInput => assert(getUserInput('index').match(/const\\s+MATH_CONSTANTS\\s+=\\s+{\\s+PI:\\s+3.14\\s+};/g), 'Do not change original MATH_CONSTANTS.');" + "text": "不要改变原始的 MATH_CONSTANTS。", + "testString": "getUserInput => assert(getUserInput('index').match(/const\\s+MATH_CONSTANTS\\s+=\\s+{\\s+PI:\\s+3.14\\s+};/g), '不要改变原始的 MATH_CONSTANTS。');" }, { - "text": "PI equals 3.14.", - "testString": "assert(PI === 3.14, 'PI equals 3.14.');" + "text": "PI 等于 3.14。", + "testString": "assert(PI === 3.14, 'PI 等于 3.14。');" } ], "releasedOn": "Aug 12, 2017", From 4267806a06819ee0df6c01b753a27a6efdfdcd63 Mon Sep 17 00:00:00 2001 From: demongodYY Date: Sun, 22 Jul 2018 13:36:01 +0800 Subject: [PATCH 08/37] fix issue errors,but not add annotation translate yet --- .../es6.json | 34 +++++++++---------- 1 file changed, 17 insertions(+), 17 deletions(-) diff --git a/02-javascript-algorithms-and-data-structures/es6.json b/02-javascript-algorithms-and-data-structures/es6.json index e810b11..d10d0b8 100644 --- a/02-javascript-algorithms-and-data-structures/es6.json +++ b/02-javascript-algorithms-and-data-structures/es6.json @@ -8,15 +8,15 @@ "id": "587d7b87367417b2b2512b3f", "title": "Explore Differences Between the var and let Keywords", "description": [ - "使用 var 关键字来声明变量，会出现重复声明导致变量被覆盖却不会报错的问题。", + "使用 var 关键字来声明变量，会出现重复声明导致变量被覆盖却不会报错的问题：", "
var camper = 'James';
var camper = 'David';
console.log(camper);
// logs 'David'
", - "看上面的代码， camper 最初声明为 James，然后又被覆盖成了 David。", - "在小型的应用中，你可能不会遇到这样的问题，但是当你的代码规模变得更加庞大的时候，就可能会在你不经意的时候产生变量的覆盖", - "因为这样的行为并不会报错，导致 debug 变得更加困难。
", - "在 ES6 中使用了新的关键字 let 来解决 var 关键字可能带来的问题。", + "在上面的代码中， camper 的初始值为 'James'，然后又被覆盖成了 'David'。", + "在小型的应用中，你可能不会遇到这样的问题，但是当你的代码规模变得更加庞大的时候，就可能会在不经意间覆盖了之前定义的变量。", + "这样的行为不会报错导致了 debug 非常困难。
", + "在 ES6 中引入了新的关键字 let 来解决 var 关键字带来的潜在问题。", "如果你在上面的代码中，使用了 let 关键字来代替 var关键字，结果会是一个报错。", "
let camper = 'James';
let camper = 'David'; // throws an error
", - "可以在可以在浏览器的控制台里看见这个错误。", + "你可以在浏览器的控制台里看见这个错误。", "与 var 不同的是， 当使用 let 的时候，同一名字的变量只能被声明一次。", "请注意 \"use strict\"。这代表着开启了严格模式， 用于检测常见的代码错误以及\"不安全\"的行为，例如：", "
\"use strict\";
x = 3.14; // throws an error because x is not declared
", @@ -29,7 +29,7 @@ "testString": "getUserInput => assert(!getUserInput('index').match(/var/g),'在代码中不应存在 var。');" }, { - "text": "catName 变量的值应该为 Oliver。", + "text": "catName 变量的值应该为 \"Oliver\"。", "testString": "assert(catName === \"Oliver\", 'catName 变量的值应该为 \"Oliver\"。');" }, { @@ -66,19 +66,19 @@ "title": "Compare Scopes of the var and let Keywords", "description": [ "当你使用 var 关键字来声明一个变量的时候，这个变量会被声明成全局变量，或是函数内的局部变量。", - "let 关键字的作用类似，但会有一些额外的特性。 当你使用 let 关键字在代码块，语句或者表达式里声明变量的时候，这个变量的作用域就在当前的代码块，语句或表达式之中。", - "举个例子:", + "let 关键字的作用类似，但会有一些额外的特性。如果你在代码块、语句或表达式中使用关键字 let 声明变量，这个变量的作用域就被限制在当前的代码块，语句或表达式之中。", + "举个例子：", "
var numArray = [];
for (var i = 0; i < 3; i++) {
  numArray.push(i);
}
console.log(numArray);
// returns [0, 1, 2]
console.log(i);
// returns 3
", "当使用 var 关键字的时候， i 会被声明成全局变量。 当 i++ 执行的时候， 它会改变全局变量的值。 这段代码可以看做下面这样:", "
var numArray = [];
var i;
for (i = 0; i < 3; i++) {
  numArray.push(i);
}
console.log(numArray);
// returns [0, 1, 2]
console.log(i);
// returns 3
", - "这个行为在你一个创建函数用来存储在 for 循环中使用的 i 变量的时候，会出现问题。这是因为函数存储的值会因为全局变量 i的变化而不断的改变。", + "如果你在 for 循环中创建了使用 i 变量的函数，那么在后续调用函数的时候，上面提到的这种行为就会导致问题。这是因为函数存储的值会因为全局变量 i的变化而不断的改变。", "
var printNumTwo;
for (var i = 0; i < 3; i++) {
  if(i === 2){
    printNumTwo = function() {
      return i;
    };
  }
}
console.log(printNumTwo());
// returns 3
", - "可以看到， printNumTwo() 打印了 3 而不是 2。 这是因为 i 发生了改变，并且函数 printNumTwo() 返回的是全局变量 i的值，而不是 for 循环中创建函数时 i 的值。The let 关键字就不会有这种现象:", + "可以看到， printNumTwo() 打印了 3 而不是 2。 这是因为 i 发生了改变，并且函数 printNumTwo() 返回的是全局变量 i的值，而不是 for 循环中创建函数时 i 的值。let 关键字就不会有这种现象：", "
'use strict';
let printNumTwo;
for (let i = 0; i < 3; i++) {
  if (i === 2) {
    printNumTwo = function() {
      return i;
    };
  }
}
console.log(printNumTwo());
// returns 2
console.log(i);
// returns \"i is not defined\"
", - "i 在全局作用域中没有声明，所以它没有被定义， 它只会在 for 循环的语句中被声明。 因为在循环语句中的 let关键字创建了拥有独一无二的值 (0, 1, 或 2) 的三个不同 i 变量，所以 printNumTwo() 返回了正确的值。", + "i 在全局作用域中没有声明，所以它没有被定义，它的声明只会发生在 for 循环内。在循环执行的时候，let 关键字创建了三个不同的 i 变量，他们的值分别为 0、1 和 2，所以 printNumTwo() 返回了正确的值。", "
", - "修改这段代码，使得在 if 语句中声明的 i 变量与在函数的第一行声明的 i 变量是彼此独立的。 请注意不要在你的代码的任何地方使用 var 关键字。", - "这个练习说明了使用 var 与 let关键字声明变量时，作用域之间的不同。当编写类似这个练习中的函数的时候，通常来说最好还是使用不同的变量名，用于避免困惑。" + "修改这段代码，使得在 if 语句中声明的 i 变量与在函数的第一行声明的 i 变量是彼此独立的。 请注意不要在你的代码的任何地方使用 var 关键字。", + "这个练习说明了使用 var 与 let关键字声明变量时，作用域之间的不同。当编写类似这个练习中的函数的时候，通常来说最好还是使用不同的变量名来避免误会。" ], "tests": [ { @@ -86,11 +86,11 @@ "testString": "getUserInput => assert(!getUserInput('index').match(/var/g),'var 不应该在代码中存在。');" }, { - "text": "在 if 语句中声明的 i 变量的值是 \"block scope\"。", - "testString": "getUserInput => assert(getUserInput('index').match(/(i\\s*=\\s*).*\\s*.*\\s*.*\\1('|\")block\\s*scope\\2/g), '在 if 语句中声明的 i 变量应该是 \"block scope\"。');" + "text": "在 if 语句中声明的 i 变量的值是 \"block scope\"。", + "testString": "getUserInput => assert(getUserInput('index').match(/(i\\s*=\\s*).*\\s*.*\\s*.*\\1('|\")block\\s*scope\\2/g), '在 if 语句中声明的 i 变量应该是 \"block scope\"。');" }, { - "text": "checkScope() 应当 返回 \"function scope\"", + "text": "checkScope() 应当返回 \"function scope\"", "testString": "assert(checkScope() === \"function scope\", 'checkScope() 应该返回 \"function scope\"');" } ], From da096577fb33b0e6c83b2856011c4d0ce1f26963 Mon Sep 17 00:00:00 2001 From: demongodYY Date: Sat, 28 Jul 2018 10:33:47 +0800 Subject: [PATCH 09/37] translate --- .../es6.json | 126 +++++++++--------- 1 file changed, 63 insertions(+), 63 deletions(-) diff --git a/02-javascript-algorithms-and-data-structures/es6.json b/02-javascript-algorithms-and-data-structures/es6.json index d10d0b8..2933d38 100644 --- a/02-javascript-algorithms-and-data-structures/es6.json +++ b/02-javascript-algorithms-and-data-structures/es6.json @@ -9,17 +9,17 @@ "title": "Explore Differences Between the var and let Keywords", "description": [ "使用 var 关键字来声明变量，会出现重复声明导致变量被覆盖却不会报错的问题：", - "
var camper = 'James';
var camper = 'David';
console.log(camper);
// logs 'David'
", + "
var camper = 'James';
var camper = 'David';
console.log(camper);
// 打印出 'David'
", "在上面的代码中， camper 的初始值为 'James'，然后又被覆盖成了 'David'。", "在小型的应用中，你可能不会遇到这样的问题，但是当你的代码规模变得更加庞大的时候，就可能会在不经意间覆盖了之前定义的变量。", "这样的行为不会报错导致了 debug 非常困难。
", "在 ES6 中引入了新的关键字 let 来解决 var 关键字带来的潜在问题。", "如果你在上面的代码中，使用了 let 关键字来代替 var关键字，结果会是一个报错。", - "
let camper = 'James';
let camper = 'David'; // throws an error
", + "
let camper = 'James';
let camper = 'David'; // 报错
", "你可以在浏览器的控制台里看见这个错误。", "与 var 不同的是， 当使用 let 的时候，同一名字的变量只能被声明一次。", "请注意 \"use strict\"。这代表着开启了严格模式， 用于检测常见的代码错误以及\"不安全\"的行为，例如：", - "
\"use strict\";
x = 3.14; // throws an error because x is not declared
", + "
\"use strict\";
x = 3.14; // x 没有声明导致了报错
", "
", "请更新这段代码，并且在其中只使用 let 关键字" ], @@ -68,13 +68,13 @@ "当你使用 var 关键字来声明一个变量的时候，这个变量会被声明成全局变量，或是函数内的局部变量。", "let 关键字的作用类似，但会有一些额外的特性。如果你在代码块、语句或表达式中使用关键字 let 声明变量，这个变量的作用域就被限制在当前的代码块，语句或表达式之中。", "举个例子：", - "
var numArray = [];
for (var i = 0; i < 3; i++) {
  numArray.push(i);
}
console.log(numArray);
// returns [0, 1, 2]
console.log(i);
// returns 3
", + "
var numArray = [];
for (var i = 0; i < 3; i++) {
  numArray.push(i);
}
console.log(numArray);
// 返回 [0, 1, 2]
console.log(i);
// 返回 3
", "当使用 var 关键字的时候， i 会被声明成全局变量。 当 i++ 执行的时候， 它会改变全局变量的值。 这段代码可以看做下面这样:", "
var numArray = [];
var i;
for (i = 0; i < 3; i++) {
  numArray.push(i);
}
console.log(numArray);
// returns [0, 1, 2]
console.log(i);
// returns 3
", "如果你在 for 循环中创建了使用 i 变量的函数，那么在后续调用函数的时候，上面提到的这种行为就会导致问题。这是因为函数存储的值会因为全局变量 i的变化而不断的改变。", - "
var printNumTwo;
for (var i = 0; i < 3; i++) {
  if(i === 2){
    printNumTwo = function() {
      return i;
    };
  }
}
console.log(printNumTwo());
// returns 3
", + "
var printNumTwo;
for (var i = 0; i < 3; i++) {
  if(i === 2){
    printNumTwo = function() {
      return i;
    };
  }
}
console.log(printNumTwo());
// 返回 3
", "可以看到， printNumTwo() 打印了 3 而不是 2。 这是因为 i 发生了改变，并且函数 printNumTwo() 返回的是全局变量 i的值，而不是 for 循环中创建函数时 i 的值。let 关键字就不会有这种现象：", - "
'use strict';
let printNumTwo;
for (let i = 0; i < 3; i++) {
  if (i === 2) {
    printNumTwo = function() {
      return i;
    };
  }
}
console.log(printNumTwo());
// returns 2
console.log(i);
// returns \"i is not defined\"
", + "
'use strict';
let printNumTwo;
for (let i = 0; i < 3; i++) {
  if (i === 2) {
    printNumTwo = function() {
      return i;
    };
  }
}
console.log(printNumTwo());
// 返回 2
console.log(i);
// 返回 \"没有定义 i 变量\"
", "i 在全局作用域中没有声明，所以它没有被定义，它的声明只会发生在 for 循环内。在循环执行的时候，let 关键字创建了三个不同的 i 变量，他们的值分别为 0、1 和 2，所以 printNumTwo() 返回了正确的值。", "
", "修改这段代码，使得在 if 语句中声明的 i 变量与在函数的第一行声明的 i 变量是彼此独立的。 请注意不要在你的代码的任何地方使用 var 关键字。", @@ -124,7 +124,7 @@ "description": [ "let 并不是唯一的新的声明变量的方式。在 ES6里面，你还可以使用 const 关键字来声明变量。", "const 拥有 let 的所有优点，所不同的是，通过code 声明的变量是只读的。这意味着通过 const 声明的变量只能被赋值一次，而不能被再次赋值。", - "
\"use strict\"
const FAV_PET = \"Cats\";
FAV_PET = \"Dogs\"; // returns error
", + "
\"use strict\"
const FAV_PET = \"Cats\";
FAV_PET = \"Dogs\"; // 报错
", "可以看见，尝试给通过 const 声明的变量再次赋值会报错。你应该使用 const 关键字来对所有不打算再次赋值的变量进行声明。这有助于你避免给一个常量进行额外的再次赋值。一个最佳实践是对所有常量的命名采用全大写字母，并在单词之间使用下划线进行分隔。", "
", "改变以下代码，使得所有的变量都使用 let 或 const 关键词来声明。当变量将会改变的时候使用 let关键字，当变量要保持常量的时候使用 const 关键字。同时，对使用 const 声明的变量进行最佳实践的重命名，变量名中的字母应该都是大写的。" @@ -158,14 +158,14 @@ "function printManyTimes(str) {", " \"use strict\";", "", - " // change code below this line", + " // 在这行以下修改代码", "", " var sentence = str + \" is cool!\";", " for(var i = 0; i < str.length; i+=2) {", " console.log(sentence);", " }", "", - " // change code above this line", + " // 在这行以上修改代码", "", "}", "printManyTimes(\"freeCodeCamp\");" @@ -183,8 +183,7 @@ "在现代的 JavaScript 里，const 声明有很多用法", "一些开发者倾向默认使用 const 来声明所有变量，除非在他们知道需要更改某个变量的值的时候，才会使用 let", "然而，重点是要理解对象（包括数组和函数）在使用 const 声明的时候依然是可变的。使用 const来声明只会保证它的标识不会被重新赋值。", - "
\"use strict\";
const s = [5, 6, 7];
s = [1, 2, 3]; // throws error, trying to assign a const
s[2] = 45; // works just as it would with an array declared with var or let
console.log(s); // returns [5, 6, 45]
", - "Like all arrays, the array elements in s are mutable, but because const was used, you cannot use the variable identifier s to point to a different array using the assignment operator.", + "
\"use strict\";
const s = [5, 6, 7];
s = [1, 2, 3]; // 试图给 const 变量赋值，报错
s[2] = 45; // 与用 var 或 let 声明的数组一样，这个操作也会成功
console.log(s); // 返回 [5, 6, 45]
", "可以看见，你可以改变 [5, 6, 7] 自身，所以 s 变量指向了改变后的数组 [5, 6, 45]。和所有数组一样，数组 s中的数组元素是可以被改变的，但是因为使用了 const 关键字，你不能使用赋值操作符将变量标识 s 指向另外一个数组", "
", "这里有一个使用 const s = [5, 7, 2] 声明的数组。使用对各元素赋值的方法将数组改成 [2, 5, 7]。" @@ -218,11 +217,11 @@ "const s = [5, 7, 2];", "function editInPlace() {", " \"use strict\";", - " // change code below this line", + " // 在这行以下修改代码", "", " // s = [2, 5, 7]; <- this is invalid", "", - " // change code above this line", + " // 在这行以上修改代码", "}", "editInPlace();" ], @@ -237,7 +236,7 @@ "description": [ "通过之前的挑战可以看出, const 声明并不会真的保护你的数据不被改变. 为了确保数据不被改变， Javascript 提供了一个函数 Object.freeze 来防止数据改变。", "当一个对象被冻结的时候，你不能再对它的属性再进行增、删、改的操作。任何试图改变对象的操作都会被阻止，却不会报错。", - "
let obj = {
  name:\"FreeCodeCamp\",
  review:\"Awesome\"
};
Object.freeze(obj);
obj.review = \"bad\"; //will be ignored. Mutation not allowed
obj.newProp = \"Test\"; // will be ignored. Mutation not allowed
console.log(obj);
// { name: \"FreeCodeCamp\", review:\"Awesome\"}
", + "
let obj = {
  name:\"FreeCodeCamp\",
  review:\"Awesome\"
};
Object.freeze(obj);
obj.review = \"bad\"; //obj 对象被冻结了，这个操作会被忽略
obj.newProp = \"Test\"; // will be ignored. Mutation not allowed
console.log(obj);
// { name: \"FreeCodeCamp\", review:\"Awesome\"}
", "
", "在这个挑战中，你将使用 Object.freeze 来防止数学常量被改变。你需要冻结 MATH_CONSTANTS 对象，使得没有人可以改变 PI 的值，抑或增加或删除属性。" ], @@ -272,10 +271,10 @@ " const MATH_CONSTANTS = {", " PI: 3.14", " };", - " // change code below this line", + " // 在这行以下修改代码", "", "", - " // change code above this line", + " // 在这行以上修改代码", " try {", " MATH_CONSTANTS.PI = 99;", " } catch( ex ) {", @@ -294,37 +293,37 @@ "id": "587d7b87367417b2b2512b43", "title": "Use Arrow Functions to Write Concise Anonymous Functions", "description": [ - "In JavaScript, we often don't need to name our functions, especially when passing a function as an argument to another function. Instead, we create inline functions. We don't need to name these functions because we do not reuse them anywhere else.", - "To achieve this, we often use the following syntax:", + "在JavaScript里，我们会经常遇到不需要给函数命名的情况，尤其是在需要将以个函数作为参数传给另外一个函数的时候，在这些时候，我们会创建行内函数。因为这些函数不会再其他地方复用，所以我们不要给它们命名。", + "这种情况下，我们通常会使用以下语法：", "
const myFunc = function() {
  const myVar = \"value\";
  return myVar;
}
", - "ES6 provides us with the syntactic sugar to not have to write anonymous functions this way. Instead, you can use arrow function syntax:", + "ES6 提供了其他写匿名函数的方式的语法糖。你可以使用箭头函数：", "
const myFunc = () => {
  const myVar = \"value\";
  return myVar;
}
", - "When there is no function body, and only a return value, arrow function syntax allows you to omit the keyword return as well as the brackets surrounding the code. This helps simplify smaller functions into one-line statements:", + "当不需要函数体，只返回一个值的时候，箭头函数允许你省略 return 关键字和外面的大括号。这样就可以将一个简单的函数简化成一个单行语句。", "
const myFunc= () => \"value\"
", - "This code will still return value by default.", + "这段代码仍然会返回 value", "
", - "Rewrite the function assigned to the variable magic which returns a new Date() to use arrow function syntax. Also make sure nothing is defined using the keyword var." + "使用箭头函数的语法重写 magic 函数，使其返回一个新的 Date()。同时不要用 var 关键字来定义任何变量。" ], "tests": [ { - "text": "User did replace var keyword.", - "testString": "getUserInput => assert(!getUserInput('index').match(/var/g), 'User did replace var keyword.');" + "text": "替换掉 var 关键字。", + "testString": "getUserInput => assert(!getUserInput('index').match(/var/g), '替换掉 var 关键字。');" }, { - "text": "magic should be a constant variable (by using const).", - "testString": "getUserInput => assert(getUserInput('index').match(/const\\s+magic/g), 'magic should be a constant variable (by using const).');" + "text": "magic 应该为一个常量 (使用 const)。", + "testString": "getUserInput => assert(getUserInput('index').match(/const\\s+magic/g), 'magic 应该为一个常量 (使用 const)。');" }, { - "text": "magic is a function.", - "testString": "assert(typeof magic === 'function', 'magic is a function.');" + "text": "magic 是一个 function。", + "testString": "assert(typeof magic === 'function', 'magic 是一个 function。');" }, { - "text": "magic() returns correct date.", - "testString": "assert(magic().getDate() == new Date().getDate(), 'magic() returns correct date.');" + "text": "magic() 返回正确的日期。", + "testString": "assert(magic().getDate() == new Date().getDate(), 'magic() 返回正确的日期。');" }, { - "text": "function keyword was not used.", - "testString": "getUserInput => assert(!getUserInput('index').match(/function/g), 'function keyword was not used.');" + "text": "不要使用 function 关键字。", + "testString": "getUserInput => assert(!getUserInput('index').match(/function/g), '不要使用 function 关键字。');" } ], "releasedOn": "Feb 17, 2017", @@ -349,32 +348,33 @@ "id": "587d7b88367417b2b2512b44", "title": "Write Arrow Functions with Parameters", "description": [ - "Just like a normal function, you can pass arguments into arrow functions.", + "和一般的函数一样，你也可以给箭头函数传递参数。", "
// doubles input value and returns it
const doubler = (item) => item * 2;
", "You can pass more than one argument into arrow functions as well.", + "你可以同样可以给箭头函数传递多个参数。", "
", - "Rewrite the myConcat function which appends contents of arr2 to arr1 so that the function uses arrow function syntax." + "使用箭头函数的语法重写 myConcat 函数，使其可以将 arr2 的内容粘贴在 arr1里。" ], "tests": [ { - "text": "User did replace var keyword.", - "testString": "getUserInput => assert(!getUserInput('index').match(/var/g), 'User did replace var keyword.');" + "text": "替换掉所有的 var 关键字。", + "testString": "getUserInput => assert(!getUserInput('index').match(/var/g), '替换掉所有的 var 关键字。');" }, { - "text": "myConcat should be a constant variable (by using const).", - "testString": "getUserInput => assert(getUserInput('index').match(/const\\s+myConcat/g), 'myConcat should be a constant variable (by using const).');" + "text": "myConcat 应该是一个常量 (使用 const)。", + "testString": "getUserInput => assert(getUserInput('index').match(/const\\s+myConcat/g), 'myConcat 应该是一个常量 (使用 const)。');" }, { - "text": "myConcat should be a function", - "testString": "assert(typeof myConcat === 'function', 'myConcat should be a function');" + "text": "myConcat 应该是一个函数。", + "testString": "assert(typeof myConcat === 'function', 'myConcat 应该是一个函数。');" }, { - "text": "myConcat() returns the correct array", - "testString": "assert(() => { const a = myConcat([1], [2]); return a[0] == 1 && a[1] == 2; }, 'myConcat() returns the correct array');" + "text": "myConcat() 返回正确的 array。", + "testString": "assert(() => { const a = myConcat([1], [2]); return a[0] == 1 && a[1] == 2; }, 'myConcat() 返回正确的 array。');" }, { - "text": "function keyword was not used.", - "testString": "getUserInput => assert(!getUserInput('index').match(/function/g), 'function keyword was not used.');" + "text": "不要使用 function 关键字。", + "testString": "getUserInput => assert(!getUserInput('index').match(/function/g), '不要使用 function 关键字。');" } ], "releasedOn": "Feb 17, 2017", @@ -389,7 +389,7 @@ " \"use strict\";", " return arr1.concat(arr2);", "};", - "// test your code", + "// 测试你的代码", "console.log(myConcat([1, 2], [3, 4, 5]));" ], "head": [], @@ -452,9 +452,9 @@ "const realNumberArray = [4, 5.6, -9.8, 3.14, 42, 6, 8.34];", "const squareList = (arr) => {", " \"use strict\";", - " // change code below this line", + " // 在这行以下修改代码", " const squaredIntegers = arr;", - " // change code above this line", + " // 在这行以上修改代码", " return squaredIntegers;", "};", "// test your code", @@ -660,9 +660,9 @@ "function getLength(str) {", " \"use strict\";", "", - " // change code below this line", + " // 在这行以下修改代码", " const length = 0; // change this", - " // change code above this line", + " // 在这行以上修改代码", "", " return len; // you must assign length to len in line", "", @@ -711,9 +711,9 @@ "", "function getMaxOfTmrw(forecast) {", " \"use strict\";", - " // change code below this line", + " // 在这行以下修改代码", " const maxOfTomorrow = undefined; // change this line", - " // change code above this line", + " // 在这行以上修改代码", " return maxOfTomorrow;", "}", "", @@ -763,9 +763,9 @@ "let a = 8, b = 6;", "(() => {", " \"use strict\";", - " // change code below this line", + " // 在这行以下修改代码", " ", - " // change code above this line", + " // 在这行以上修改代码", "})();", "console.log(a); // should be 6", "console.log(b); // should be 8" @@ -812,9 +812,9 @@ "const source = [1,2,3,4,5,6,7,8,9,10];", "function removeFirstTwo(list) {", " \"use strict\";", - " // change code below this line", + " // 在这行以下修改代码", " arr = list; // change this", - " // change code above this line", + " // 在这行以上修改代码", " return arr;", "}", "const arr = removeFirstTwo(source);", @@ -873,12 +873,12 @@ "const half = (function() {", " \"use strict\"; // do not change this line", "", - " // change code below this line", + " // 在这行以下修改代码", " return function half(stats) {", " // use function argument destructuring", " return (stats.max + stats.min) / 2.0;", " };", - " // change code above this line", + " // 在这行以上修改代码", "", "})();", "console.log(stats); // should be object", @@ -933,9 +933,9 @@ "function makeList(arr) {", " \"use strict\";", "", - " // change code below this line", + " // 在这行以下修改代码", " const resultDisplayArray = null;", - " // change code above this line", + " // 在这行以上修改代码", "", " return resultDisplayArray;", "}", @@ -986,13 +986,13 @@ "contents": [ "const createPerson = (name, age, gender) => {", " \"use strict\";", - " // change code below this line", + " // 在这行以下修改代码", " return {", " name: name,", " age: age,", " gender: gender", " };", - " // change code above this line", + " // 在这行以上修改代码", "};", "console.log(createPerson(\"Zodiac Hasbro\", 56, \"male\")); // returns a proper object" ], @@ -1030,7 +1030,7 @@ "ext": "js", "name": "index", "contents": [ - "// change code below this line", + "// 在这行以下修改代码", "const bicycle = {", " gear: 2,", " setGear: function(newGear) {", @@ -1038,7 +1038,7 @@ " this.gear = newGear;", " }", "};", - "// change code above this line", + "// 在这行以上修改代码", "bicycle.setGear(3);", "console.log(bicycle.gear);" ], From d0805452dc80c7b0d0140ef4b0507c71269d955c Mon Sep 17 00:00:00 2001 From: demongodYY Date: Sat, 28 Jul 2018 15:11:32 +0800 Subject: [PATCH 10/37] translate --- .../es6.json | 41 ++++++++++--------- 1 file changed, 21 insertions(+), 20 deletions(-) diff --git a/02-javascript-algorithms-and-data-structures/es6.json b/02-javascript-algorithms-and-data-structures/es6.json index 2933d38..a1ce60f 100644 --- a/02-javascript-algorithms-and-data-structures/es6.json +++ b/02-javascript-algorithms-and-data-structures/es6.json @@ -401,44 +401,45 @@ "id": "587d7b88367417b2b2512b45", "title": "Write Higher Order Arrow Functions", "description": [ - "It's time we see how powerful arrow functions are when processing data.", - "Arrow functions work really well with higher order functions, such as map(), filter(), and reduce(), that take other functions as arguments for processing collections of data.", - "Read the following code:", + "我们已经见识到了箭头函数在处理数据时候的强大之处。", + "箭头函数在类似 map, filter, reduce 等需要其他函数作为参数来处理数据的高阶函数里会很好用。" , + "阅读以下代码：", "
FBPosts.filter(function(post) {
  return post.thumbnail !== null && post.shares > 100 && post.likes > 500;
})
", "We have written this with filter() to at least make it somewhat readable. Now compare it to the following code which uses arrow function syntax instead:", + "我们写下了 filter 函数，并尽量保证可读性。现在让我们用箭头函数来写同样的代码看看：", "
FBPosts.filter((post) => post.thumbnail !== null && post.shares > 100 && post.likes > 500)
", - "This code is more succinct and accomplishes the same task with fewer lines of code.", + "这段代码完成了同样的任务，却变得更加剪短易懂了。", "
", - "Use arrow function syntax to compute the square of only the positive integers (fractions are not integers) in the array realNumberArray and store the new array in the variable squaredIntegers." + "使用箭头函数的语法来计算 squaredIntegers 数组里正整数的平方（分数不是整数）" ], "tests": [ { - "text": "User did replace var keyword.", - "testString": "getUserInput => assert(!getUserInput('index').match(/var/g), 'User did replace var keyword.');" + "text": "替换掉所有的 var 关键字。", + "testString": "getUserInput => assert(!getUserInput('index').match(/var/g), '替换掉所有的 var 关键字。');" }, { - "text": "squaredIntegers should be a constant variable (by using const).", - "testString": "getUserInput => assert(getUserInput('index').match(/const\\s+squaredIntegers/g), 'squaredIntegers should be a constant variable (by using const).');" + "text": "squaredIntegers 应该是一个常量 (使用 const)。", + "testString": "getUserInput => assert(getUserInput('index').match(/const\\s+squaredIntegers/g), 'squaredIntegers 应该是一个常量 (使用 const)。');" }, { - "text": "squaredIntegers should be an array", - "testString": "assert(Array.isArray(squaredIntegers), 'squaredIntegers should be an array');" + "text": "squaredIntegers 应该是一个 array。", + "testString": "assert(Array.isArray(squaredIntegers), 'squaredIntegers 应该是一个 array');" }, { - "text": "squaredIntegers should be [16, 1764, 36]", - "testString": "assert(squaredIntegers[0] === 16 && squaredIntegers[1] === 1764 && squaredIntegers[2] === 36, 'squaredIntegers should be [16, 1764, 36]');" + "text": "squaredIntegers 应该是 [16, 1764, 36]", + "testString": "assert(squaredIntegers[0] === 16 && squaredIntegers[1] === 1764 && squaredIntegers[2] === 36, 'squaredIntegers 应该是 [16, 1764, 36]');" }, { - "text": "function keyword was not used.", - "testString": "getUserInput => assert(!getUserInput('index').match(/function/g), 'function keyword was not used.');" + "text": "不要使用 function 关键字。", + "testString": "getUserInput => assert(!getUserInput('index').match(/function/g), '不要使用 function 关键字。');" }, { - "text": "loop should not be used", - "testString": "getUserInput => assert(!getUserInput('index').match(/(for)|(while)/g), 'loop should not be used');" + "text": "不要使用循环", + "testString": "getUserInput => assert(!getUserInput('index').match(/(for)|(while)/g), '不要使用循环');" }, { - "text": "map, filter, or reduce should be used", - "testString": "getUserInput => assert(getUserInput('index').match(/map|filter|reduce/g), 'map, filter, or reduce should be used');" + "text": "请使用 map, filter, 或者 reduce。", + "testString": "getUserInput => assert(getUserInput('index').match(/map|filter|reduce/g), '请使用 map, filter, 或者 reduce。');" } ], "releasedOn": "Feb 17, 2017", @@ -457,7 +458,7 @@ " // 在这行以上修改代码", " return squaredIntegers;", "};", - "// test your code", + "// 测试你的代码", "const squaredIntegers = squareList(realNumberArray);", "console.log(squaredIntegers);" ], From e42f5cf1f0c83afd7602f593ec42471f47e7409e Mon Sep 17 00:00:00 2001 From: demongodYY Date: Sat, 28 Jul 2018 15:16:46 +0800 Subject: [PATCH 11/37] fix --- 02-javascript-algorithms-and-data-structures/es6.json | 3 --- 1 file changed, 3 deletions(-) diff --git a/02-javascript-algorithms-and-data-structures/es6.json b/02-javascript-algorithms-and-data-structures/es6.json index a1ce60f..84b1e89 100644 --- a/02-javascript-algorithms-and-data-structures/es6.json +++ b/02-javascript-algorithms-and-data-structures/es6.json @@ -179,7 +179,6 @@ "id": "587d7b87367417b2b2512b42", "title": "Mutate an Array Declared with const", "description": [ - "The const declaration has many use cases in modern JavaScript.", "在现代的 JavaScript 里，const 声明有很多用法", "一些开发者倾向默认使用 const 来声明所有变量，除非在他们知道需要更改某个变量的值的时候，才会使用 let", "然而，重点是要理解对象（包括数组和函数）在使用 const 声明的时候依然是可变的。使用 const来声明只会保证它的标识不会被重新赋值。", @@ -350,7 +349,6 @@ "description": [ "和一般的函数一样，你也可以给箭头函数传递参数。", "
// doubles input value and returns it
const doubler = (item) => item * 2;
", - "You can pass more than one argument into arrow functions as well.", "你可以同样可以给箭头函数传递多个参数。", "
", "使用箭头函数的语法重写 myConcat 函数，使其可以将 arr2 的内容粘贴在 arr1里。" @@ -405,7 +403,6 @@ "箭头函数在类似 map, filter, reduce 等需要其他函数作为参数来处理数据的高阶函数里会很好用。" , "阅读以下代码：", "
FBPosts.filter(function(post) {
  return post.thumbnail !== null && post.shares > 100 && post.likes > 500;
})
", - "We have written this with filter() to at least make it somewhat readable. Now compare it to the following code which uses arrow function syntax instead:", "我们写下了 filter 函数，并尽量保证可读性。现在让我们用箭头函数来写同样的代码看看：", "
FBPosts.filter((post) => post.thumbnail !== null && post.shares > 100 && post.likes > 500)
", "这段代码完成了同样的任务，却变得更加剪短易懂了。", From e22a6458cb1c535013018344a8cf54fc23f819d4 Mon Sep 17 00:00:00 2001 From: demongodYY Date: Sun, 29 Jul 2018 19:57:59 +0800 Subject: [PATCH 12/37] translate 10 11 --- .../es6.json | 84 +++++++++---------- 1 file changed, 42 insertions(+), 42 deletions(-) diff --git a/02-javascript-algorithms-and-data-structures/es6.json b/02-javascript-algorithms-and-data-structures/es6.json index 84b1e89..316a044 100644 --- a/02-javascript-algorithms-and-data-structures/es6.json +++ b/02-javascript-algorithms-and-data-structures/es6.json @@ -468,24 +468,24 @@ "id": "587d7b88367417b2b2512b46", "title": "Set Default Parameters for Your Functions", "description": [ - "In order to help us create more flexible functions, ES6 introduces default parameters for functions.", - "Check out this code:", + "ES6 里允许给函数传入默认参数，来构建更加灵活的函数。", + "查看以下代码：", "
function greeting(name = \"Anonymous\") {
  return \"Hello \" + name;
}
console.log(greeting(\"John\")); // Hello John
console.log(greeting()); // Hello Anonymous
", - "The default parameter kicks in when the argument is not specified (it is undefined). As you can see in the example above, the parameter name will receive its default value \"Anonymous\" when you do not provide a value for the parameter. You can add default values for as many parameters as you want.", + "默认参数会在参数没有被指定（值为 undefined ）的时候起作用。在上面的例子中，参数 name 会在没有得到新的值的时候，默认使用值 \"Anonymous\"。你还可以给多个参数赋予默认值。", "
", - "Modify the function increment by adding default parameters so that it will add 1 to number if value is not specified." + "给函数 increment 加上默认参数，使得在 value 没有被赋值的时候，默认给 number 加1。" ], "tests": [ { - "text": "The result of increment(5, 2) should be 7.", - "testString": "assert(increment(5, 2) === 7, 'The result of increment(5, 2) should be 7.');" + "text": "increment(5, 2) 的结果应该为 7。", + "testString": "assert(increment(5, 2) === 7, 'increment(5, 2) 的结果应该为 7。');" }, { - "text": "The result of increment(5) should be 6.", - "testString": "assert(increment(5) === 6, 'The result of increment(5) should be 6.');" + "text": "increment(5) 的结果应该为 6。", + "testString": "assert(increment(5) === 6, 'increment(5) 的结果应该为 6。');" }, { - "text": "default parameter 1 was used for value.", + "text": "参数 value 的默认值应该为 1。", "testString": "getUserInput => assert(getUserInput('index').match(/value\\s*=\\s*1/g), 'default parameter 1 was used for value.');" } ], @@ -503,8 +503,8 @@ " return number + value;", " };", "})();", - "console.log(increment(5, 2)); // returns 7", - "console.log(increment(5)); // returns NaN" + "console.log(increment(5, 2)); // 返回 7", + "console.log(increment(5)); // 返回 NaN" ], "head": [], "tail": [] @@ -515,33 +515,33 @@ "id": "587d7b88367417b2b2512b47", "title": "Use the Rest Operator with Function Parameters", "description": [ - "In order to help us create more flexible functions, ES6 introduces the rest operator for function parameters. With the rest operator, you can create functions that take a variable number of arguments. These arguments are stored in an array that can be accessed later from inside the function.", - "Check out this code:", - "
function howMany(...args) {
  return \"You have passed \" + args.length + \" arguments.\";
}
console.log(howMany(0, 1, 2)); // You have passed 3 arguments
console.log(howMany(\"string\", null, [1, 2, 3], { })); // You have passed 4 arguments.
", - "The rest operator eliminates the need to check the args array and allows us to apply map(), filter() and reduce() on the parameters array.", + "ES6 推出了用于函数参数的rest 操作符 帮助我们创建更加灵活的函数。 在 rest 操作符的帮助下,你可以创建有一个变量来接受多个参数的函数。 这些参数被储存在一个可以在函数内部读取的数组中。", + "请看以下代码：", + "
function howMany(...args) {
  return \"You have passed \" + args.length + \" arguments.\";
}
console.log(howMany(0, 1, 2)); // 你需要输入3个参数。
console.log(howMany(\"string\", null, [1, 2, 3], { })); //你需要输入4个参数。
", + "rest 操作符可以避免查看 args 数组的需求，并且允许我们在参数数组上使用 map(), fiter()，和 reduce()", "
", - "Modify the function sum so that it uses the rest operator and it works in the same way with any number of parameters." + "修改 sum 函数，来让它使用 rest操作符，并且它可以在有任何数量的参数时以相同的形式工作" ], "tests": [ { - "text": "The result of sum(0,1,2) should be 3", - "testString": "assert(sum(0,1,2) === 3, 'The result of sum(0,1,2) should be 3');" + "text": "sum(0,1,2) 的返回结果应该为3。", + "testString": "assert(sum(0,1,2) === 3, 'sum(0,1,2) 的返回结果应该为3。');" }, { - "text": "The result of sum(1,2,3,4) should be 10", - "testString": "assert(sum(1,2,3,4) === 10, 'The result of sum(1,2,3,4) should be 10');" + "text": "sum(1,2,3,4) 的返回结果应该为10。", + "testString": "assert(sum(1,2,3,4) === 10, 'sum(1,2,3,4) 的返回结果应该为10。');" }, { - "text": "The result of sum(5) should be 5", - "testString": "assert(sum(5) === 5, 'The result of sum(5) should be 5');" + "text": "sum(5) 的返回结果应该为5。", + "testString": "assert(sum(5) === 5, 'sum(5) 的返回结果应该为5。');" }, { - "text": "The result of sum() should be 0", - "testString": "assert(sum() === 0, 'The result of sum() should be 0');" + "text": "sum()的返回结果应该为 0。", + "testString": "assert(sum() === 0, 'sum()的返回结果应该为 0。');" }, { - "text": "The sum function uses the ... spread operator on the args parameter.", - "testString": "getUserInput => assert(getUserInput('index').match(/function\\s+sum\\s*\\(\\s*...args\\s*\\)\\s*{/g), 'The sum function uses the ... spread operator on the args parameter.');" + "text": "对 sum 函数的 args 参数使用了 ... 展开操作符。", + "testString": "getUserInput => assert(getUserInput('index').match(/function\\s+sum\\s*\\(\\s*...args\\s*\\)\\s*{/g), '对 sum 函数的 args 参数使用了 ... 展开操作符。');" } ], "releasedOn": "Feb 17, 2017", @@ -570,30 +570,30 @@ "id": "587d7b89367417b2b2512b48", "title": "Use the Spread Operator to Evaluate Arrays In-Place", "description": [ - "ES6 introduces the spread operator, which allows us to expand arrays and other expressions in places where multiple parameters or elements are expected.", - "The ES5 code below uses apply() to compute the maximum value in an array:", - "
var arr = [6, 89, 3, 45];
var maximus = Math.max.apply(null, arr); // returns 89
", - "We had to use Math.max.apply(null, arr) because Math.max(arr) returns NaN. Math.max() expects comma-separated arguments, but not an array.", + "ES6 允许我们使用 展开操作符 来展开数组，以及需要多个参数或元素的表达式。", + "下面的 ES5 代码使用了 apply() 来计算数组的最大值：", + "
var arr = [6, 89, 3, 45];
var maximus = Math.max.apply(null, arr); // 返回 89
", + "我们必须使用 Math.max.apply(null,arr)，是因为直接调用 Math.max(arr) 会返回 NaN。Math.max() 函数需要传入的是一系列由逗号分隔的参数，而不是一个数组。", "The spread operator makes this syntax much better to read and maintain.", - "
const arr = [6, 89, 3, 45];
const maximus = Math.max(...arr); // returns 89
", - "...arr returns an unpacked array. In other words, it spreads the array.", - "However, the spread operator only works in-place, like in an argument to a function or in an array literal. The following code will not work:", - "
const spreaded = ...arr; // will throw a syntax error
", + "
const arr = [6, 89, 3, 45];
const maximus = Math.max(...arr); // 返回 89
", + "...arr 返回了一个“打开”的数组。 或者说它 展开 了数组。", + "然而，展开操作符只能够在函数的参数中，或者数组之中使用。下面的代码将会报错：", + "
const spreaded = ...arr; // 将会发生语法错误
", "
", - "Copy all contents of arr1 into another array arr2 using the spread operator." + "使用展开操作符将 arr1 中的内容都赋值到 arr2 中去。" ], "tests": [ { - "text": "arr2 is correct copy of arr1.", - "testString": "assert(arr2.every((v, i) => v === arr1[i]), 'arr2 is correct copy of arr1.');" + "text": "arr2 的值是由 arr1 拷贝而来的。", + "testString": "assert(arr2.every((v, i) => v === arr1[i]), 'arr2 的值是由 arr1 拷贝而来的。');" }, { - "text": "... spread operator was used to duplicate arr1.", - "testString": "getUserInput => assert(getUserInput('index').match(/\\[\\s*...arr1\\s*\\]/g),'... spread operator was used to duplicate arr1.');" + "text": "用... 展开操作符来赋值 arr1。", + "testString": "getUserInput => assert(getUserInput('index').match(/\\[\\s*...arr1\\s*\\]/g),'用... 展开操作符来赋值 arr1。');" }, { - "text": "arr2 remains unchanged when arr1 is changed.", - "testString": "assert((arr1, arr2) => {arr1.push('JUN'); return arr2.length < arr1.length},'arr2 remains unchanged when arr1 is changed.');" + "text": "当 arr1 改变的时候，arr2 不会改变。", + "testString": "assert((arr1, arr2) => {arr1.push('JUN'); return arr2.length < arr1.length},'当 arr1 改变的时候，arr2 不会改变。');" } ], "releasedOn": "Feb 17, 2017", @@ -608,7 +608,7 @@ "let arr2;", "(function() {", " \"use strict\";", - " arr2 = []; // change this line", + " arr2 = []; // 改变这一行", "})();", "console.log(arr2);" ], From 2681e726f5c676987732f9348bd86dc1a6c96af6 Mon Sep 17 00:00:00 2001 From: demongodYY Date: Sun, 29 Jul 2018 21:30:26 +0800 Subject: [PATCH 13/37] translate 12,13 --- .../es6.json | 48 +++++++++---------- 1 file changed, 24 insertions(+), 24 deletions(-) diff --git a/02-javascript-algorithms-and-data-structures/es6.json b/02-javascript-algorithms-and-data-structures/es6.json index 316a044..cd1ad71 100644 --- a/02-javascript-algorithms-and-data-structures/es6.json +++ b/02-javascript-algorithms-and-data-structures/es6.json @@ -621,30 +621,30 @@ "id": "587d7b89367417b2b2512b49", "title": "Use Destructuring Assignment to Assign Variables from Objects", "description": [ - "We saw earlier how spread operator can effectively spread, or unpack, the contents of the array.", - "We can do something similar with objects as well. Destructuring assignment is special syntax for neatly assigning values taken directly from an object to variables.", - "Consider the following ES5 code:", + "我们之前看到了展开操作符是如何詹卡数组的内容的。", + "我们队对象也可以做同样的操作。 解构赋值 就是可以从对象中直接获取对应值的语法。", + "看看以下 ES5 的代码：", "
var voxel = {x: 3.6, y: 7.4, z: 6.54 };
var x = voxel.x; // x = 3.6
var y = voxel.y; // y = 7.4
var z = voxel.z; // z = 6.54
", - "Here's the same assignment statement with ES6 destructuring syntax:", + "使用 ES6 的解构语法可以完成同样的赋值语句：", "
const { x, y, z } = voxel; // x = 3.6, y = 7.4, z = 6.54
", - "If instead you want to store the values of voxel.x into a, voxel.y into b, and voxel.z into c, you have that freedom as well.", + "如果你想将 voxel.x, voxel.y, voxel.z 的值分别赋给 a, b, c，可以用以下这种很棒的方式：", "
const { x : a, y : b, z : c } = voxel // a = 3.6, b = 7.4, c = 6.54
", - "You may read it as \"get the field x and copy the value into a,\" and so on.", + "你可以这样理解：“将 x 地址中的值拷贝到 a 当中去。”，等等。", "
", - "Use destructuring to obtain the length of the input string str, and assign the length to len in line." + "使用解构语法去得到输入的 str 字符串的长度，并将长度赋值给 len。" ], "tests": [ { - "text": "the function getLength() returns a number.", - "testString": "assert(typeof getLength('') === 'number', 'the function getLength() returns a number.');" + "text": "函数 getLength() 返回一个数字。", + "testString": "assert(typeof getLength('') === 'number', '函数 getLength() 返回一个数字。');" }, { - "text": "getLength(\"FreeCodeCamp\") should be 12", - "testString": "assert(getLength(\"FreeCodeCamp\") === 12, 'getLength(\"FreeCodeCamp\") should be 12');" + "text": "getLength(\"FreeCodeCamp\") 应该返回 12。", + "testString": "assert(getLength(\"FreeCodeCamp\") === 12, 'getLength(\"FreeCodeCamp\") 应该返回 12。');" }, { - "text": "destructuring with reassignment was used", - "testString": "getUserInput => assert(getUserInput('index').match(/\\{\\s*length\\s*:\\s*len\\s*}\\s*=\\s*str/g),'destructuring with reassignment was used');" + "text": "使用解构语法来重新赋值。", + "testString": "getUserInput => assert(getUserInput('index').match(/\\{\\s*length\\s*:\\s*len\\s*}\\s*=\\s*str/g),'使用解构语法来重新赋值。');" } ], "releasedOn": "Feb 17, 2017", @@ -662,7 +662,7 @@ " const length = 0; // change this", " // 在这行以上修改代码", "", - " return len; // you must assign length to len in line", + " return len; // 你必须在这行将 length 赋值给 len", "", "}", "", @@ -677,21 +677,21 @@ "id": "587d7b89367417b2b2512b4a", "title": "Use Destructuring Assignment to Assign Variables from Nested Objects", "description": [ - "We can similarly destructure nested objects into variables.", - "Consider the following code:", + "同样，我们可以将 嵌套的对象解构到变量中。", + "请看以下代码：", "
const a = {
  start: { x: 5, y: 6},
  end: { x: 6, y: -9 }
};
const { start : { x: startX, y: startY }} = a;
console.log(startX, startY); // 5, 6
", - "In the example above, the variable start is assigned the value of a.start, which is also an object.", + "在上面的例子里，a.start 将值赋给了变量 start，start 同样也是个对象。", "
", - "Use destructuring assignment to obtain max of forecast.tomorrow and assign it to maxOfTomorrow." + "使用解构赋值来得到 forecast.tomorrow 的 max，并将其赋值给 maxOfTomorrow。" ], "tests": [ { - "text": "maxOfTomorrow equals 84.6", - "testString": "assert(getMaxOfTmrw(LOCAL_FORECAST) === 84.6, 'maxOfTomorrow equals 84.6');" + "text": "maxOfTomorrow 等于 84.6", + "testString": "assert(getMaxOfTmrw(LOCAL_FORECAST) === 84.6, 'maxOfTomorrow 等于 84.6');" }, { - "text": "nested destructuring was used", - "testString": "getUserInput => assert(getUserInput('index').match(/\\{\\s*tomorrow\\s*:\\s*\\{\\s*max\\s*:\\s*maxOfTomorrow\\s*\\}\\s*\\}\\s*=\\s*forecast/g),'nested destructuring was used');" + "text": "使用嵌套解构", + "testString": "getUserInput => assert(getUserInput('index').match(/\\{\\s*tomorrow\\s*:\\s*\\{\\s*max\\s*:\\s*maxOfTomorrow\\s*\\}\\s*\\}\\s*=\\s*forecast/g),'使用嵌套解构');" } ], "releasedOn": "Feb 17, 2017", @@ -710,12 +710,12 @@ "function getMaxOfTmrw(forecast) {", " \"use strict\";", " // 在这行以下修改代码", - " const maxOfTomorrow = undefined; // change this line", + " const maxOfTomorrow = undefined; // 改变这一行", " // 在这行以上修改代码", " return maxOfTomorrow;", "}", "", - "console.log(getMaxOfTmrw(LOCAL_FORECAST)); // should be 84.6" + "console.log(getMaxOfTmrw(LOCAL_FORECAST)); // 应该为 84.6" ], "head": [], "tail": [] From 589ce65eeb8c780b7f4e76637df5e1f94d8ee4c1 Mon Sep 17 00:00:00 2001 From: huluoyang Date: Wed, 18 Jul 2018 18:40:55 +0800 Subject: [PATCH 14/37] Update README.md --- README.md | 9 --------- 1 file changed, 9 deletions(-) diff --git a/README.md b/README.md index 9dc37c0..0b85b35 100644 --- a/README.md +++ b/README.md @@ -1,12 +1,3 @@ -# branch -master 分支存放的是最新的英文课程，此分支会有专人来更新。 - -middle 分支存放的是稳定的英文课程，此分支会有专人 compare master 分支后再更新。 - -translate 分支是仓库的默认分支，也是翻译者和审批者唯一需要关注的分支。 - -publish 分支作为仓库的发布分支，这个分支会进入到 curriculum 代码库中。 - # challenges challenges 指的不仅是课程本身，也是每个开源项目贡献者会遇到的挑战。 From ef148e59ebb1889ddb827e474109223e588bb62e Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Shaoyao=C2=B7=E7=90=9A?= Date: Wed, 18 Jul 2018 14:13:30 +0200 Subject: [PATCH 15/37] Update README.md --- README.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/README.md b/README.md index 0b85b35..cecc11d 100644 --- a/README.md +++ b/README.md @@ -11,6 +11,6 @@ challenges 指的不仅是课程本身，也是每个开源项目贡献者会遇 4、收获 GitHub 认可的 contributions -5、获得 FreeCodeCamp 中文社区的认可 +5、获得 freeCodeCamp 中文社区的认可 感兴趣的小伙伴可以传送到 [Wiki](https://github.com/FreeCodeCampChina/challenges/wiki) 了解更多详情。 From 2dad887c4c8b6a2fa2c81ce157fc3d773b319948 Mon Sep 17 00:00:00 2001 From: huluoyang Date: Thu, 19 Jul 2018 14:22:52 +0800 Subject: [PATCH 16/37] Update README.md --- README.md | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) diff --git a/README.md b/README.md index cecc11d..baa328b 100644 --- a/README.md +++ b/README.md @@ -3,11 +3,11 @@ challenges 指的不仅是课程本身，也是每个开源项目贡献者会遇 参与新版课程翻译你会获得： -1、持续地提升你的英文水平 +1、持续提升你的英文水平 -2、快速地提高你的 Git 操作熟练度 +2、弥补你欠缺多人协作的经验 -3、弥补你欠缺多人协作的经验 +3、快速提高你的 Git 操作熟练度 4、收获 GitHub 认可的 contributions From 7ea3f145dfdd926abe7f895bf103323512e953ac Mon Sep 17 00:00:00 2001 From: huluoyang Date: Thu, 19 Jul 2018 14:28:33 +0800 Subject: [PATCH 17/37] Update README.md --- README.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/README.md b/README.md index baa328b..367cffa 100644 --- a/README.md +++ b/README.md @@ -13,4 +13,4 @@ challenges 指的不仅是课程本身，也是每个开源项目贡献者会遇 5、获得 freeCodeCamp 中文社区的认可 -感兴趣的小伙伴可以传送到 [Wiki](https://github.com/FreeCodeCampChina/challenges/wiki) 了解更多详情。 +感兴趣的小伙伴可以传送到 [Wiki](https://github.com/FreeCodeCampChina/challenges/wiki) 解锁翻译指南。 From 5b08d48c196846e25f25f1baffca9d755b7b2ed1 Mon Sep 17 00:00:00 2001 From: huluoyang Date: Sat, 21 Jul 2018 10:22:30 +0800 Subject: [PATCH 18/37] translate html chapter to 40% --- .../basic-html-and-html5.json | 370 +++++++++--------- 1 file changed, 183 insertions(+), 187 deletions(-) diff --git a/01-responsive-web-design/basic-html-and-html5.json b/01-responsive-web-design/basic-html-and-html5.json index 7f00e0b..603ad99 100644 --- a/01-responsive-web-design/basic-html-and-html5.json +++ b/01-responsive-web-design/basic-html-and-html5.json @@ -8,23 +8,21 @@ "id": "bd7123c8c441eddfaeb5bdef", "title": "Say Hello to HTML Elements", "description": [ - "Welcome to freeCodeCamp's HTML coding challenges. These will walk you through web development step-by-step.", - "First, you'll start by building a simple web page using HTML. You can edit code in your code editor, which is embedded into this web page.", - "Do you see the code in your code editor that says <h1>Hello</h1>? That's an HTML element.", - "Most HTML elements have an opening tag and a closing tag.", - "Opening tags look like this:", - "<h1>", - "Closing tags look like this:", - "</h1>", - "The only difference between opening and closing tags is the forward slash after the opening bracket of a closing tag.", - "Each challenge has tests you can run at any time by clicking the \"Run tests\" button. When you pass all tests, you'll be prompted to submit your solution and go to the next coding challenge.", + "欢迎来到 FreeCodeCamp 的 HTML 编码挑战，这些挑战将会帮助你逐步掌握 web 开发。", + "HTML 是英文 Hyper Text Markup Language(超文本标记语言)的缩写。首先，使用 HTML 来制作一个简单的网页，你可以直接在本网页内置的代码编辑器中编辑代码。" + "你看到代码编辑器中的 <h1>Hello</h1> 了吗? 那就是一个 HTML 标签，h1 是 header1 的简写，意思是主标题。", + "大部分 HTML 标签都有一个 开始标记 和一个 结束标记。", + "开始标记像这样：<h1>", + "结束标记像这样：</h1>", + "开始标记和结束标记的唯一区别就是结束标记多了一个 /。", + "每个挑战都有测试，任何时候点击运行测试按钮就可以运行测试。如果代码通过测试，将会弹出一个窗口，你就可以提交你的代码并顺利进入下一个挑战。", "
", - "To pass the test on this challenge, change your h1 element's text to say \"Hello World\"." + "任务：请更改主标题的内容为：Hello World。" ], "tests": [ { - "text": "Your h1 element should have the text \"Hello World\".", - "testString": "assert.isTrue((/hello(\\s)+world/gi).test($('h1').text()), 'Your h1 element should have the text \"Hello World\".');" + "text": "主标题的内容应该为：Hello World。", + "testString": "assert.isTrue((/hello(\\s)+world/gi).test($('h1').text()), '主标题的内容应该为：Hello World。');" } ], "challengeType": 0, @@ -45,28 +43,28 @@ "id": "bad87fee1348bd9aedf0887a", "title": "Headline with the h2 Element", "description": [ - "Over the next few lessons, we'll build an HTML5 cat photo web app piece-by-piece.", - "The h2 element you will be adding in this step will add a level two heading to the web page.", - "This element tells the browser about the structure of your website. h1 elements are often used for main headings, while h2 elements are generally used for subheadings. There are also h3, h4, h5 and h6 elements to indicate different levels of subheadings.", + "在接下来的几节课里，我们将会由浅入深地制作一个关于猫的图片应用。", + "这节课将会引入 h2 标签，h2 是 header2 的简写，意思是二级标题。", + "这些标签用来告诉浏览器，网站的结构长什么样子。h1 标签通常被用作主标题，h2 标签通常被用作副标题，还有 h3、h4、h5、h6 标签，它们分别用作不同级别的标题。", "
", - "Add an h2 tag that says \"CatPhotoApp\" to create a second HTML element below your \"Hello World\" h1 element." + "任务：在主标题下面创建一个副标题，标题内容为：CatPhotoApp。" ], "tests": [ { - "text": "Create an h2 element.", - "testString": "assert(($(\"h2\").length > 0), 'Create an h2 element.');" + "text": "创建一个副标题。", + "testString": "assert(($(\"h2\").length > 0), '创建一个副标题。');" }, { - "text": "Make sure your h2 element has a closing tag.", - "testString": "assert(code.match(/<\\/h2>/g) && code.match(/<\\/h2>/g).length === code.match(/

/g).length, 'Make sure your h2 element has a closing tag.');" + "text": "副标题应该有结束标记。", + "testString": "assert(code.match(/<\\/h2>/g) && code.match(/<\\/h2>/g).length === code.match(/

/g).length, '副标题应该有结束标记。');" }, { - "text": "Your h2 element should have the text \"CatPhotoApp\".", - "testString": "assert.isTrue((/cat(\\s)?photo(\\s)?app/gi).test($(\"h2\").text()), 'Your h2 element should have the text \"CatPhotoApp\".');" + "text": "副标题的内容应该为：CatPhotoApp。", + "testString": "assert.isTrue((/cat(\\s)?photo(\\s)?app/gi).test($(\"h2\").text()), '副标题的内容应该为：CatPhotoApp。');" }, { - "text": "Your h1 element should have the text \"Hello World\".", - "testString": "assert.isTrue((/hello(\\s)+world/gi).test($(\"h1\").text()), 'Your h1 element should have the text \"Hello World\".');" + "text": "主标题的内容应该为：Hello World。", + "testString": "assert.isTrue((/hello(\\s)+world/gi).test($(\"h1\").text()), '主标题的内容应该为：Hello World。');" } ], "challengeType": 0, @@ -87,24 +85,24 @@ "id": "bad87fee1348bd9aedf08801", "title": "Inform with the Paragraph Element", "description": [ - "p elements are the preferred element for paragraph text on websites. p is short for \"paragraph\".", - "You can create a paragraph element like this:", + "p 是 paragraph 的缩写，通常被用来创建一个段落，就和你写作文一样。", + "你可以像这样创建一个段落：", "<p>I'm a p tag!</p>", "
", - "Create a p element below your h2 element, and give it the text \"Hello Paragraph\"." + "任务：在副标题下面新增一个段落，段落内容是：Hello Paragraph。" ], "tests": [ { - "text": "Create a p element.", - "testString": "assert(($(\"p\").length > 0), 'Create a p element.');" + "text": "创建一个段落。", + "testString": "assert(($(\"p\").length > 0), '创建一个段落。');" }, { - "text": "Your p element should have the text \"Hello Paragraph\".", - "testString": "assert.isTrue((/hello(\\s)+paragraph/gi).test($(\"p\").text()), 'Your p element should have the text \"Hello Paragraph\".');" + "text": "段落的内容应该为：Hello Paragraph。", + "testString": "assert.isTrue((/hello(\\s)+paragraph/gi).test($(\"p\").text()), '段落的内容应该为：Hello Paragraph。');" }, { - "text": "Make sure your p element has a closing tag.", - "testString": "assert(code.match(/<\\/p>/g) && code.match(/<\\/p>/g).length === code.match(/

p element has a closing tag.');" + "text": "段落应该有结束标记。", + "testString": "assert(code.match(/<\\/p>/g) && code.match(/<\\/p>/g).length === code.match(/

lorem ipsum text as placeholder text. The 'lorem ipsum' text is randomly scraped from a famous passage by Cicero of Ancient Rome.", - "Lorem ipsum text has been used as placeholder text by typesetters since the 16th century, and this tradition continues on the web.", - "Well, 5 centuries is long enough. Since we're building a CatPhotoApp, let's use something called kitty ipsum text.", + "Web开发者通常用 lorem ipsum text 来做占位符，占位符就是占着位置的一些文字，没有实际意义。", + "为什么叫 lorem ipsum text 呢?是因为 lorem ipsum 是古罗马西塞罗谚语的前两个单词。", + "从公元16世纪开始lorem ipsum text就被当做占位符了，这种传统延续到了互联网时代。于此同时，孙悟空也在五指山下压了500年，然后就进化成程序猿了，是不是很巧合，哈哈。", "

", - "Replace the text inside your p element with the first few words of this kitty ipsum text: Kitty ipsum dolor sit amet, shed everywhere shed everywhere stretching attack your ankles chase the red dot, hairball run catnip eat the grass sniff." + "任务：把段落的内容更换为：Monkey code 猴哥猴哥，你真了不得，金箍棒在手，问世间谁是英雄。" ], "tests": [ { - "text": "Your p element should contain the first few words of the provided kitty ipsum text.", - "testString": "assert.isTrue((/Kitty(\\s)+ipsum/gi).test($(\"p\").text()), 'Your p element should contain the first few words of the provided kitty ipsum text.');" + "text": "段落必须包含 Monkey code。", + "testString": "assert.isTrue((/Monkey(\\s)+code/gi).test($(\"p\").text()), '段落必须包含 Monkey code。');" } ], "challengeType": 0, @@ -160,28 +158,28 @@ "id": "bad87fee1348bd9aedf08802", "title": "Uncomment HTML", "description": [ - "Commenting is a way that you can leave comments for other developers within your code without affecting the resulting output that is displayed the end user.", - "Commenting is also a convenient way to make code inactive without having to delete it entirely.", - "Comments in HTML starts with <!--, and ends with a -->", + "注释是用来给代码添加一些说明，方便团队合作或日后自己查看，但又不影响代码本身。", + "注释也可以用来在不删除代码的前提下，让代码不起作用。", + "在 HTML 中，注释的开始标记是 <!--，结束标记是 -->。", "
", - "Uncomment your h1, h2 and p elements." + "任务：现在我们反其道而行之，干掉主标题、副标题、段落的注释。" ], "tests": [ { - "text": "Make your h1 element visible on your page by uncommenting it.", - "testString": "assert($(\"h1\").length > 0, 'Make your h1 element visible on your page by uncommenting it.');" + "text": "确保网页中能看到主标题。", + "testString": "assert($(\"h1\").length > 0, '确保网页中能看到主标题。');" }, { - "text": "Make your h2 element visible on your page by uncommenting it.", - "testString": "assert($(\"h2\").length > 0, 'Make your h2 element visible on your page by uncommenting it.');" + "text": "确保网页中能看到副标题。", + "testString": "assert($(\"h2\").length > 0, '确保网页中能看到副标题。');" }, { - "text": "Make your p element visible on your page by uncommenting it.", - "testString": "assert($(\"p\").length > 0, 'Make your p element visible on your page by uncommenting it.');" + "text": "确保网页中能看到段落。", + "testString": "assert($(\"p\").length > 0, '确保网页中能看到段落。');" }, { - "text": "Be sure to delete all trailing comment tags, i.e. -->.", - "testString": "assert(!/[^fc]-->/gi.test(code.replace(/ */gi.test(code.replace(/ *" ], "head": [], @@ -208,31 +206,31 @@ "id": "bad87fee1348bd9aedf08804", "title": "Comment out HTML", "description": [ - "Remember that in order to start a comment, you need to use <!-- and to end a comment, you need to use -->", - "Here you'll need to end the comment before your h2 element begins.", + "记住：注释的开始标记是 <!--，结束标记是 -->。", + "现在你需要在副标题前终止注释。", "
", - "Comment out your h1 element and your p element, but not your h2 element." + "任务：主标题和段落都注释掉，副标题留着。" ], "tests": [ { - "text": "Comment out your h1 element so that it is not visible on your page.", - "testString": "assert(($(\"h1\").length === 0), 'Comment out your h1 element so that it is not visible on your page.');" + "text": "注释掉主标题，这样它就从网页上消失了。", + "testString": "assert(($(\"h1\").length === 0), '注释掉主标题，这样它就从网页上消失了。');" }, { - "text": "Leave your h2 element uncommented so that it is visible on your page.", - "testString": "assert(($(\"h2\").length > 0), 'Leave your h2 element uncommented so that it is visible on your page.');" + "text": "副标题保持原样，这样网页上还能看到它。", + "testString": "assert(($(\"h2\").length > 0), '副标题保持原样，这样网页上还能看到它。');" }, { - "text": "Comment out your p element so that it is not visible on your page.", - "testString": "assert(($(\"p\").length === 0), 'Comment out your p element so that it is not visible on your page.');" + "text": "注释掉段落，这样它就从网页上消失了。", + "testString": "assert(($(\"p\").length === 0), '注释掉段落，这样它就从网页上消失了。);" }, { - "text": "Be sure to close each of your comments with -->.", - "testString": "assert(code.match(/[^fc]-->/g).length > 1, 'Be sure to close each of your comments with -->.');" + "text": "确保每一个注释都以-->结尾。", + "testString": "assert(code.match(/[^fc]-->/g).length > 1, '确保每一个注释都以-->结尾。');" }, { - "text": "Do not change the order of the h1 h2 or p in the code.", - "testString": "assert((code.match(/<([a-z0-9]){1,2}>/g)[0]===\"

\" && code.match(/<([a-z0-9]){1,2}>/g)[1]===\"

\" && code.match(/<([a-z0-9]){1,2}>/g)[2]===\"

\") , 'Do not change the order of the h1 h2 or p in the code.');" + "text": "不要更改主标题、副标题、段落的顺序。", + "testString": "assert((code.match(/<([a-z0-9]){1,2}>/g)[0]===\"

\" && code.match(/<([a-z0-9]){1,2}>/g)[1]===\"

\" && code.match(/<([a-z0-9]){1,2}>/g)[2]===\"

\") , '不要更改主标题、副标题、段落的顺序。');" } ], "challengeType": 0, @@ -247,7 +245,7 @@ "", "

CatPhotoApp

", "", - "

Kitty ipsum dolor sit amet, shed everywhere shed everywhere stretching attack your ankles chase the red dot, hairball run catnip eat the grass sniff.

", + "

在大家心目中，猫是慵懒和可爱的化身，它可以睡饱了再起来吃饭，可以逗趣小耗子，可以卖得了萌，使得了坏，这样百变的小怪兽就集结在一只宠物上，怎能不惹人怜爱。

", "-->" ], "head": [], @@ -259,23 +257,23 @@ "id": "bad87fed1348bd9aedf08833", "title": "Delete HTML Elements", "description": [ - "Our phone doesn't have much vertical space.", - "Let's remove the unnecessary elements so we can start building our CatPhotoApp.", + "手机的屏幕空间是有限的。", + "让我们删除不必要的标签，开始设计我们的 CatPhotoApp。", "
", - "Delete your h1 element so we can simplify our view." + "任务：删除主标题以简化视图。" ], "tests": [ { - "text": "Delete your h1 element.", - "testString": "assert(($(\"h1\").length == 0), 'Delete your h1 element.');" + "text": "删除主标题。", + "testString": "assert(($(\"h1\").length == 0), '删除主标题。');" }, { - "text": "Leave your h2 element on the page.", - "testString": "assert(($(\"h2\").length > 0), 'Leave your h2 element on the page.');" + "text": "保留副标题。", + "testString": "assert(($(\"h2\").length > 0), '保留副标题。');" }, { - "text": "Leave your p element on the page.", - "testString": "assert(($(\"p\").length > 0), 'Leave your p element on the page.');" + "text": "保留段落。", + "testString": "assert(($(\"p\").length > 0), '保留段落。');" } ], "challengeType": 0, @@ -289,7 +287,7 @@ "", "

CatPhotoApp

", "", - "

Kitty ipsum dolor sit amet, shed everywhere shed everywhere stretching attack your ankles chase the red dot, hairball run catnip eat the grass sniff.

" + "

在大家心目中，猫是慵懒和可爱的化身，它可以睡饱了再起来吃饭，可以逗趣小耗子，可以卖得了萌，使得了坏，这样百变的小怪兽就集结在一只宠物上，怎能不惹人怜爱。

" ], "head": [], "tail": [] @@ -300,42 +298,42 @@ "id": "bad87fee1348bd9aecf08801", "title": "Introduction to HTML5 Elements", "description": [ - "HTML5 introduces more descriptive HTML tags. These include header, footer, nav, video, article, section and others.", - "These tags make your HTML easier to read, and also help with Search Engine Optimization (SEO) and accessibility.", - "The main HTML5 tag helps search engines and other developers find the main content of your page.", - "Note
Many of the new HTML5 tags and their benefits are covered in the Applied Accessibility section.", + "HTML5 引入了很多更具描述性的 HTML 标记，例如：header、footer、nav、video、article、section 等等。", + "这些标记让 HTML 更易读，同时对搜索引擎优化和可访问性更友好。", + "main 标记让搜索引擎和其他开发者瞬间就能找到网页的主要内容。", + "Note
在后面的应用可访问性课程中我们会接触到更多新的 HTML5 标记，以及明白它们的用处。", "
", - "Create a second p element after the existing p element with the following kitty ipsum text: Purr jump eat the grass rip the couch scratched sunbathe, shed everywhere rip the couch sleep in the sink fluffy fur catnip scratched.", - "Wrap the paragraphs with an opening and closing main tag." + "在现有的段落下创建一个新的段落，段落内容为：养猫有的时候，就是介于爱与恨之间，当你钦羡别人萌宠这么可爱的时候，你一定没有想过，猫咪会到处掉毛，甚至会屯老鼠，啃鞋子，用爪子爬门，你不理它，它就挠你，你要对它发脾气，它会比你更来劲。所以，猫咪慎入，没有一定的准备，切勿随便去侍养动物。它们一旦认定你了，你就是它们的主人，如果你抛弃它们，它们必定心中重创。", + "在第一个段落前添加
，在第二个段落后添加
。" ], "tests": [ { - "text": "You need 2 p elements with Kitty Ipsum text.", - "testString": "assert($(\"p\").length > 1, 'You need 2 p elements with Kitty Ipsum text.');" + "text": "页面中应该有两个段落。", + "testString": "assert($(\"p\").length > 1, '页面中应该有两个段落。');" }, { - "text": "Make sure each of your p elements has a closing tag.", - "testString": "assert(code.match(/<\\/p>/g) && code.match(/<\\/p>/g).length === code.match(/

p elements has a closing tag.');" + "text": "确保每个段落都有结束标记。", + "testString": "assert(code.match(/<\\/p>/g) && code.match(/<\\/p>/g).length === code.match(/

p element should contain the first few words of the provided additional kitty ipsum text.", - "testString": "assert.isTrue((/Purr\\s+jump\\s+eat/gi).test($(\"p\").text()), 'Your p element should contain the first few words of the provided additional kitty ipsum text.');" + "text": "新建的段落应该包含关键词：养猫。", + "testString": "assert.isTrue((/养猫/).test($(\"p\").text()), '新建的段落应该包含关键词：养猫。');" }, { - "text": "Your code should have one main element.", - "testString": "assert($('main').length === 1, 'Your code should have one main element.');" + "text": "代码中应该包含 main 标签。", + "testString": "assert($('main').length === 1, '代码中应该包含 main 标签。');" }, { - "text": "The main element should have two paragraph elements as children.", - "testString": "assert($(\"main\").children(\"p\").length === 2, 'The main element should have two paragraph elements as children.');" + "text": "main 标签应有两个段落作为它的子标签。", + "testString": "assert($(\"main\").children(\"p\").length === 2, 'main 标签应有两个段落作为它的子标签。');" }, { - "text": "The opening main tag should come before the first paragraph tag.", - "testString": "assert(code.match(/

\\s*?

/g), 'The opening main tag should come before the first paragraph tag.');" + "text": "开始标记

应位于第一个段落之前。", + "testString": "assert(code.match(/
\\s*?

/g), '开始标记

应位于第一个段落之前。');" }, { - "text": "The closing main tag should come after the second closing paragraph tag.", - "testString": "assert(code.match(/<\\/p>\\s*?<\\/main>/g), 'The closing main tag should come after the second closing paragraph tag.');" + "text": "结束标记
应位于第二段落之后。", + "testString": "assert(code.match(/<\\/p>\\s*?<\\/main>/g), '结束标记
应位于第二个段落之后。');" } ], "challengeType": 0, @@ -347,7 +345,7 @@ "contents": [ "

CatPhotoApp

", "", - "

Kitty ipsum dolor sit amet, shed everywhere shed everywhere stretching attack your ankles chase the red dot, hairball run catnip eat the grass sniff.

" + "

在大家心目中，猫是慵懒和可爱的化身，它可以睡饱了再起来吃饭，可以逗趣小耗子，可以卖得了萌，使得了坏，这样百变的小怪兽就集结在一只宠物上，怎能不惹人怜爱。

" ], "head": [], "tail": [] @@ -358,34 +356,34 @@ "id": "bad87fee1348bd9aedf08812", "title": "Add Images to Your Website", "description": [ - "You can add images to your website by using the img element, and point to a specific image's URL using the src attribute.", - "An example of this would be:", + "用 img 标签来为你的网站添加图片，其中 src 属性指向一个图片的具体地址。", + "举例如下：", "<img src=\"https://www.your-image-source.com/your-image.jpg\">", - "Note that img elements are self-closing.", - "All img elements must have an alt attribute. The text inside an alt attribute is used for screen readers to improve accessibility and is displayed if the image fails to load.", - "Note: If the image is purely decorative, using an empty alt attribute is a best practice.", - "Ideally the alt attribute should not contain special characters unless needed.", - "Let's add an alt attribute to our img example above:", - "<img src=\"https://www.your-image-source.com/your-image.jpg\" alt=\"Author standing on a beach with two thumbs up.\">", + "注意：img 标签是自关闭标签，不需要结束标记。", + "所有的 img 标签必须有 alt 属性，alt 属性的文本是当图片无法加载时显示的替代文本，对于通过屏幕阅读器来浏览网页的用户非常重要。", + "注意：如果图片是纯装饰性的，用一个空的 alt 是最佳实践。", + "理想情况下，alt属性不应该包含特殊字符，除非需要。", + "让我们给上面例子的 img 添加 alt 属性。", + "<img src=\"https://www.your-image-source.com/your-image.jpg\" alt=\"作者站在沙滩上竖起两个大拇指\">", "
", - "Let's try to add an image to our website:", - "Insert an img tag, before the h2 element.", - "Now set the src attribute so that it points to this url:", + "让我们给网站添加图片：", + "在 h2 标签前，插入一个 img 标签", + "现在设置 src 属性指向一个 url 地址：", "https://bit.ly/fcc-relaxing-cat", - "Finally don't forget to give your image an alt text." + "最后不要忘记给图片添加一个 alt 文本。", ], "tests": [ { - "text": "Your page should have an image element.", - "testString": "assert($(\"img\").length > 0, 'Your page should have an image element.');" + "text": "网页应该有一张图片。", + "testString": "assert($(\"img\").length > 0, '网页应该有一张图片。');" }, { - "text": "Your image should have a src attribute that points to the kitten image.", - "testString": "assert(new RegExp(\"\\/\\/bit.ly\\/fcc-relaxing-cat|\\/\\/s3.amazonaws.com\\/freecodecamp\\/relaxing-cat.jpg\", \"gi\").test($(\"img\").attr(\"src\")), 'Your image should have a src attribute that points to the kitten image.');" + "text": "这张图片应该是一只小猫。", + "testString": "assert(new RegExp(\"\\/\\/bit.ly\\/fcc-relaxing-cat|\\/\\/s3.amazonaws.com\\/freecodecamp\\/relaxing-cat.jpg\", \"gi\").test($(\"img\").attr(\"src\")), '这张图片应该是一只小猫。');" }, { - "text": "Your image element must have an alt attribute.", - "testString": "assert(code.match(/alt\\s*?=\\s*?(\\\"|\\').*(\\\"|\\')/), 'Your image element must have an alt attribute.');" + "text": "图片必须有 alt 属性。", + "testString": "assert(code.match(/alt\\s*?=\\s*?(\\\"|\\').*(\\\"|\\')/), '图片必须有 alt 属性。');" } ], "challengeType": 0, @@ -400,8 +398,8 @@ "
", " ", " ", - "

Kitty ipsum dolor sit amet, shed everywhere shed everywhere stretching attack your ankles chase the red dot, hairball run catnip eat the grass sniff.

", - "

Purr jump eat the grass rip the couch scratched sunbathe, shed everywhere rip the couch sleep in the sink fluffy fur catnip scratched.

", + "

在大家心目中，猫是慵懒和可爱的化身，它可以睡饱了再起来吃饭，可以逗趣小耗子，可以卖得了萌，使得了坏，这样百变的小怪兽就集结在一只宠物上，怎能不惹人怜爱。

", + "

养猫有的时候，就是介于爱与恨之间，当你钦羡别人萌宠这么可爱的时候，你一定没有想过，猫咪会到处掉毛，甚至会屯老鼠，啃鞋子，用爪子爬门，你不理它，它就挠你，你要对它发脾气，它会比你更来劲。所以，猫咪慎入，没有一定的准备，切勿随便去侍养动物。它们一旦认定你了，你就是它们的主人，如果你抛弃它们，它们必定心中重创。

", "
" ], "head": [], @@ -413,25 +411,25 @@ "id": "bad87fee1348bd9aedf08816", "title": "Link to External Pages with Anchor Elements", "description": [ - "You can use anchor elements to link to content outside of your web page.", - "anchor elements need a destination web address called an href attribute. They also need anchor text. Here's an example:", + "你可以用锚点（Anchor，简写 a）来实现网页间的跳转。", + "锚点需要一个href属性指向目的地，它还需要有锚点文本，例如：", "<a href=\"https://freecodecamp.org\">this links to freecodecamp.org</a>", - "Then your browser will display the text \"this links to freecodecamp.org\" as a link you can click. And that link will take you to the web address https://www.freecodecamp.org.", + "然后你的浏览器会显示一个可以点击的文本，点击该文本就会跳转到 https://www.freecodecamp.org。", "
", - "Create an a element that links to http://freecatphotoapp.com and has \"cat photos\" as its anchor text." + "创建一个 a 标签，href 属性指向 http://freecatphotoapp.com ，锚点文本为：cat photos。" ], "tests": [ { - "text": "Your a element should have the anchor text of \"cat photos\".", - "testString": "assert((/cat photos/gi).test($(\"a\").text()), 'Your a element should have the anchor text of \"cat photos\".');" + "text": "a 标签的锚点文本应为：cat photos。", + "testString": "assert((/cat photos/gi).test($(\"a\").text()), 'a 标签的锚点文本应为：cat photos。');" }, { - "text": "You need an a element that links to http://freecatphotoapp.com", - "testString": "assert(/http:\\/\\/(www\\.)?freecatphotoapp\\.com/gi.test($(\"a\").attr(\"href\")), 'You need an a element that links to http://freecatphotoapp.com');" + "text": "a 标签的 href 属性应为：\"http://freecatphotoapp.com\"。", + "testString": "assert(/http:\\/\\/(www\\.)?freecatphotoapp\\.com/gi.test($(\"a\").attr(\"href\")), 'a 标签的 href 属性应为：\"http://freecatphotoapp.com\"。');" }, { - "text": "Make sure your a element has a closing tag.", - "testString": "assert(code.match(/<\\/a>/g) && code.match(/<\\/a>/g).length === code.match(/a element has a closing tag.');" + "text": "确保a 标签有结束标记。", + "testString": "assert(code.match(/<\\/a>/g) && code.match(/<\\/a>/g).length === code.match(/a 标签有结束标记。');" } ], "challengeType": 0, @@ -448,8 +446,8 @@ " ", " \"A", " ", - "

Kitty ipsum dolor sit amet, shed everywhere shed everywhere stretching attack your ankles chase the red dot, hairball run catnip eat the grass sniff.

", - "

Purr jump eat the grass rip the couch scratched sunbathe, shed everywhere rip the couch sleep in the sink fluffy fur catnip scratched.

", + "

在大家心目中，猫是慵懒和可爱的化身，它可以睡饱了再起来吃饭，可以逗趣小耗子，可以卖得了萌，使得了坏，这样百变的小怪兽就集结在一只宠物上，怎能不惹人怜爱。

", + "

养猫有的时候，就是介于爱与恨之间，当你钦羡别人萌宠这么可爱的时候，你一定没有想过，猫咪会到处掉毛，甚至会屯老鼠，啃鞋子，用爪子爬门，你不理它，它就挠你，你要对它发脾气，它会比你更来劲。所以，猫咪慎入，没有一定的准备，切勿随便去侍养动物。它们一旦认定你了，你就是它们的主人，如果你抛弃它们，它们必定心中重创。

", "
" ], "head": [], @@ -461,40 +459,40 @@ "id": "bad88fee1348bd9aedf08816", "title": "Link to Internal Sections of a Page with Anchor Elements", "description": [ - "Anchor elements can also be used to create internal links to jump to different sections within a webpage.", - "To create an internal link, you assign a link's href attribute to a hash symbol # plus the value of the id attribute for the element that you want to internally link to, usually further down the page. You then need to add the same id attribute to the element you are linking to. An id is an attribute that uniquely describes an element.", - "Below is an example of an internal anchor link and its target element:", + "锚点同样也可以用来在网页内不同区域的跳转。", + "通过给 href 属性赋值为一个哈希符号 # 加上你想跳转的标签对应的 id 属性值来创建一个内部链接。 id 是用来描述页面唯一标签的属性。", + "下面是用来创建内部锚点链接的例子：", "
<a href=\"#contacts-header\">Contacts</a>
...
<h2 id=\"contacts-header\">Contacts</h2>
", - "When users click the Contacts link, they'll be taken to the section of the webpage with the Contacts header element.", + "当用户点击了 Contacts链接，页面就会跳转到网页的 Contacts 区域。", "
", - "Change your external link to an internal link by changing the href attribute to \"#footer\" and the text from \"cat photos\" to \"Jump to Bottom\".", - "Remove the target=\"_blank\" attribute from the anchor tag since this causes the linked document to open in a new window tab.", - "Then add an id attribute with a value of \"footer\" to the <footer> element at the bottom of the page." + "通过修改 href 属性为 #footer 来更改外部链接为内部链接，同时修改文本 cat photos 为 Jump to Bottom。", + "移除 target=\"_blank\" 属性避免点击链接会跳转到新的标签页。", + "然后添加一个 <footer> 标签，它的 id 值为 footer。" ], "tests": [ { - "text": "There should be only one anchor tag on your page.", - "testString": "assert($('a').length == 1, 'There should be only one anchor tag on your page.');" + "text": "页面中应该只有一个锚点。", + "testString": "assert($('a').length == 1, '页面中应该只有一个锚点。');" }, { - "text": "There should be only one footer tag on your page.", - "testString": "assert($('footer').length == 1, 'There should be only one footer tag on your page.');" + "text": "页面中应该只有一个 footer 标签。", + "testString": "assert($('footer').length == 1, '页面中应该只有一个 footer 标签。');" }, { - "text": "The a tag should have an href attribute set to \"#footer\".", - "testString": "assert($('a').eq(0).attr('href') == \"#footer\", 'The a tag should have an href attribute set to \"#footer\".');" + "text": "a 标签的 href 属性应为：\"#footer\"。", + "testString": "assert($('a').eq(0).attr('href') == \"#footer\", 'a 标签的 href 属性应为：\"#footer\"。');" }, { - "text": "The a tag should not have a target attribute", - "testString": "assert(typeof $('a').eq(0).attr('target') == typeof undefined || $('a').eq(0).attr('target') == true, 'The a tag should not have a target attribute');" + "text": "a 标签不应该有 target 属性。", + "testString": "assert(typeof $('a').eq(0).attr('target') == typeof undefined || $('a').eq(0).attr('target') == true, 'a 标签不应该有 target 属性。');" }, { - "text": "The a text should be \"Jump to Bottom\".", - "testString": "assert($('a').eq(0).text().match(/Jump to Bottom/gi), 'The a text should be \"Jump to Bottom\".');" + "text": "a 标签的文本应为 Jump to Bottom。", + "testString": "assert($('a').eq(0).text().match(/Jump to Bottom/gi), 'a 标签的文本应为 Jump to Bottom。');" }, { - "text": "The footer tag should have an id attribute set to \"footer\".", - "testString": "assert($('footer').eq(0).attr('id') == \"footer\", 'The footer tag should have an id attribute set to \"footer\".');" + "text": "footer 标签的 id 属性应为 \"footer\"。", + "testString": "assert($('footer').eq(0).attr('id') == \"footer\", 'footer 标签的 id 属性应为 \"footer\"。');" } ], "challengeType": 0, @@ -511,10 +509,8 @@ " ", " \"A", " ", - "

Kitty ipsum dolor sit amet, shed everywhere shed everywhere stretching attack your ankles chase the red dot, hairball run catnip eat the grass sniff. Purr jump eat the grass rip the couch scratched sunbathe, shed everywhere rip the couch sleep in the sink fluffy fur catnip scratched. Kitty ipsum dolor sit amet, shed everywhere shed everywhere stretching attack your ankles chase the red dot, hairball run catnip eat the grass sniff.

", - "

Purr jump eat the grass rip the couch scratched sunbathe, shed everywhere rip the couch sleep in the sink fluffy fur catnip scratched. Kitty ipsum dolor sit amet, shed everywhere shed everywhere stretching attack your ankles chase the red dot, hairball run catnip eat the grass sniff. Purr jump eat the grass rip the couch scratched sunbathe, shed everywhere rip the couch sleep in the sink fluffy fur catnip scratched.

", - "

Meowwww loved it, hated it, loved it, hated it yet spill litter box, scratch at owner, destroy all furniture, especially couch or lay on arms while you're using the keyboard. Missing until dinner time toy mouse squeak roll over. With tail in the air lounge in doorway. Man running from cops stops to pet cats, goes to jail.

", - "

Intently stare at the same spot poop in the plant pot but kitten is playing with dead mouse. Get video posted to internet for chasing red dot leave fur on owners clothes meow to be let out and mesmerizing birds leave fur on owners clothes or favor packaging over toy so purr for no reason. Meow to be let out play time intently sniff hand run outside as soon as door open yet destroy couch.

", + "

在大家心目中，猫是慵懒和可爱的化身，它可以睡饱了再起来吃饭，可以逗趣小耗子，可以卖得了萌，使得了坏，这样百变的小怪兽就集结在一只宠物上，怎能不惹人怜爱。 养猫有的时候，就是介于爱与恨之间，当你钦羡别人萌宠这么可爱的时候，你一定没有想过，猫咪会到处掉毛，甚至会屯老鼠，啃鞋子，用爪子爬门，你不理它，它就挠你，你要对它发脾气，它会比你更来劲。所以，猫咪慎入，没有一定的准备，切勿随便去侍养动物。它们一旦认定你了，你就是它们的主人，如果你抛弃它们，它们必定心中重创。 在大家心目中，猫是慵懒和可爱的化身，它可以睡饱了再起来吃饭，可以逗趣小耗子，可以卖得了萌，使得了坏，这样百变的小怪兽就集结在一只宠物上，怎能不惹人怜爱。

", + "

养猫有的时候，就是介于爱与恨之间，当你钦羡别人萌宠这么可爱的时候，你一定没有想过，猫咪会到处掉毛，甚至会屯老鼠，啃鞋子，用爪子爬门，你不理它，它就挠你，你要对它发脾气，它会比你更来劲。所以，猫咪慎入，没有一定的准备，切勿随便去侍养动物。它们一旦认定你了，你就是它们的主人，如果你抛弃它们，它们必定心中重创。 在大家心目中，猫是慵懒和可爱的化身，它可以睡饱了再起来吃饭，可以逗趣小耗子，可以卖得了萌，使得了坏，这样百变的小怪兽就集结在一只宠物上，怎能不惹人怜爱。 养猫有的时候，就是介于爱与恨之间，当你钦羡别人萌宠这么可爱的时候，你一定没有想过，猫咪会到处掉毛，甚至会屯老鼠，啃鞋子，用爪子爬门，你不理它，它就挠你，你要对它发脾气，它会比你更来劲。所以，猫咪慎入，没有一定的准备，切勿随便去侍养动物。它们一旦认定你了，你就是它们的主人，如果你抛弃它们，它们必定心中重创。

", " ", "
", " ", @@ -529,50 +525,50 @@ "id": "bad87fee1348bd9aede08817", "title": "Nest an Anchor Element within a Paragraph", "description": [ - "You can nest links within other text elements.", + "你可以在其他文本标签内嵌套链接。You can nest links within other text elements.", "
<p>
Here's a <a target=\"_blank\" href=\"http://freecodecamp.org\"> link to freecodecamp.org</a> for you to follow.
</p>
", - "Let's break down the example:", - "Normal text is wrapped in the p element:
<p> Here's a ... for you to follow. </p>", - "Next is the anchor element <a> (which requires a closing tag </a>):
<a> ... </a>", - "target is an anchor tag attribute that specifies where to open the link and the value \"_blank\" specifies to open the link in a new tab", - "href is an anchor tag attribute that contains the URL address of the link:
<a href=\"http://freecodecamp.org\"> ... </a>", - "The text, \"link to freecodecamp.org\", within the anchor element called anchor text, will display a link to click:
<a href=\" ... \">link to freecodecamp.org</a>", - "The final output of the example will look like this:

Here's a link to freecodecamp.org for you to follow.

", + "让我们来分解这个例子：", + "通常，文本是被包裹在 p 标签内:
<p> Here's a ... for you to follow. </p>", + "接下来是 anchor 标签 <a> (需要结束标记 </a>):
<a> ... </a>", + "target 是锚点标签的一个属性，它指定了会以什么方式来打开链接。 属性值 \"_blank\" 指定了会新开一个标签页来打开链接", + "href 是锚点标签的另一个属性：它指定了链接的 URL 地址：
<a href=\"http://freecodecamp.org\"> ... </a>", + "锚点标签内的文本：\"link to freecodecamp.org\"，会显示为一个可以点击的链接：
<a href=\" ... \">link to freecodecamp.org</a>", + "例子的最后输出将会是这样：

Here's a link to freecodecamp.org for you to follow.

", "
", - "Now nest your existing a element within a new p element (just after the existing main element). The new paragraph should have text that says \"View more cat photos\", where \"cat photos\" is a link, and the rest of the text is plain text." + "现在用一个新的 p 标签来包裹现存的 a 标签（紧挨着 main标签)。新段落的文本为：View more cat photos，其中 \"cat photos\" 是一个链接，其他是纯文本。" ], "tests": [ { - "text": "You need an a element that links to \"http://freecatphotoapp.com\".", - "testString": "assert(($(\"a[href=\\\"http://freecatphotoapp.com\\\"]\").length > 0 || $(\"a[href=\\\"http://www.freecatphotoapp.com\\\"]\").length > 0), 'You need an a element that links to \"http://freecatphotoapp.com\".');" + "text": "你需要一个指向 \"http://freecatphotoapp.com\" 的锚点。", + "testString": "assert(($(\"a[href=\\\"http://freecatphotoapp.com\\\"]\").length > 0 || $(\"a[href=\\\"http://www.freecatphotoapp.com\\\"]\").length > 0), '你需要一个指向 \"http://freecatphotoapp.com\" 的锚点。');" }, { - "text": "Your a element should have the anchor text of \"cat photos\"", - "testString": "assert($(\"a\").text().match(/cat\\sphotos/gi), 'Your a element should have the anchor text of \"cat photos\"');" + "text": "锚点文本为应为：cat photos。", + "testString": "assert($(\"a\").text().match(/cat\\sphotos/gi), '锚点文本为应为：cat photos。');" }, { - "text": "Create a new p element around your a element. There should be at least 3 total p tags in your HTML code.", - "testString": "assert($(\"p\") && $(\"p\").length > 2, 'Create a new p element around your a element. There should be at least 3 total p tags in your HTML code.');" + "text": "在锚点的外部创建一个新段落，这样页面就有3个段落了。", + "testString": "assert($(\"p\") && $(\"p\").length > 2, '在锚点的外部创建一个段落，这样页面就有3个段落了。');" }, { - "text": "Your a element should be nested within your new p element.", - "testString": "assert(($(\"a[href=\\\"http://freecatphotoapp.com\\\"]\").parent().is(\"p\") || $(\"a[href=\\\"http://www.freecatphotoapp.com\\\"]\").parent().is(\"p\")), 'Your a element should be nested within your new p element.');" + "text": "锚点应嵌套在新段落内。", + "testString": "assert(($(\"a[href=\\\"http://freecatphotoapp.com\\\"]\").parent().is(\"p\") || $(\"a[href=\\\"http://www.freecatphotoapp.com\\\"]\").parent().is(\"p\")), '锚点应嵌套在新段落内。');" }, { - "text": "Your p element should have the text \"View more \" (with a space after it).", - "testString": "assert(($(\"a[href=\\\"http://freecatphotoapp.com\\\"]\").parent().text().match(/View\\smore\\s/gi) || $(\"a[href=\\\"http://www.freecatphotoapp.com\\\"]\").parent().text().match(/View\\smore\\s/gi)), 'Your p element should have the text \"View more \" (with a space after it).');" + "text": "段落的文本应为：View more (记得 more 后面有一个空格)。", + "testString": "assert(($(\"a[href=\\\"http://freecatphotoapp.com\\\"]\").parent().text().match(/View\\smore\\s/gi) || $(\"a[href=\\\"http://www.freecatphotoapp.com\\\"]\").parent().text().match(/View\\smore\\s/gi)), '段落的文本应为：View more (记得 more 后面有一个空格)。');" }, { - "text": "Your a element should not have the text \"View more\".", - "testString": "assert(!$(\"a\").text().match(/View\\smore/gi), 'Your a element should not have the text \"View more\".');" + "text": "锚点的文本不应该为：View more。", + "testString": "assert(!$(\"a\").text().match(/View\\smore/gi), '锚点的文本不应该为：View more。');" }, { - "text": "Make sure each of your p elements has a closing tag.", - "testString": "assert(code.match(/<\\/p>/g) && code.match(/

/g).length === code.match(/

p elements has a closing tag.');" + "text": "确保每个段落有结束标记。", + "testString": "assert(code.match(/<\\/p>/g) && code.match(/

/g).length === code.match(/

a elements has a closing tag.", - "testString": "assert(code.match(/<\\/a>/g) && code.match(//g).length === code.match(/a elements has a closing tag.');" + "text": "确保每个段落有结束标记。", + "testString": "assert(code.match(/<\\/a>/g) && code.match(//g).length === code.match(/", " ", - "

Kitty ipsum dolor sit amet, shed everywhere shed everywhere stretching attack your ankles chase the red dot, hairball run catnip eat the grass sniff.

", - "

Purr jump eat the grass rip the couch scratched sunbathe, shed everywhere rip the couch sleep in the sink fluffy fur catnip scratched.

", + "

在大家心目中，猫是慵懒和可爱的化身，它可以睡饱了再起来吃饭，可以逗趣小耗子，可以卖得了萌，使得了坏，这样百变的小怪兽就集结在一只宠物上，怎能不惹人怜爱。

", + "

养猫有的时候，就是介于爱与恨之间，当你钦羡别人萌宠这么可爱的时候，你一定没有想过，猫咪会到处掉毛，甚至会屯老鼠，啃鞋子，用爪子爬门，你不理它，它就挠你，你要对它发脾气，它会比你更来劲。所以，猫咪慎入，没有一定的准备，切勿随便去侍养动物。它们一旦认定你了，你就是它们的主人，如果你抛弃它们，它们必定心中重创。

", "" ], "head": [], @@ -627,8 +623,8 @@ " ", " \"A", " ", - "

Kitty ipsum dolor sit amet, shed everywhere shed everywhere stretching attack your ankles chase the red dot, hairball run catnip eat the grass sniff.

", - "

Purr jump eat the grass rip the couch scratched sunbathe, shed everywhere rip the couch sleep in the sink fluffy fur catnip scratched.

", + "

在大家心目中，猫是慵懒和可爱的化身，它可以睡饱了再起来吃饭，可以逗趣小耗子，可以卖得了萌，使得了坏，这样百变的小怪兽就集结在一只宠物上，怎能不惹人怜爱。

", + "

养猫有的时候，就是介于爱与恨之间，当你钦羡别人萌宠这么可爱的时候，你一定没有想过，猫咪会到处掉毛，甚至会屯老鼠，啃鞋子，用爪子爬门，你不理它，它就挠你，你要对它发脾气，它会比你更来劲。所以，猫咪慎入，没有一定的准备，切勿随便去侍养动物。它们一旦认定你了，你就是它们的主人，如果你抛弃它们，它们必定心中重创。

", "" ], "head": [], @@ -675,8 +671,8 @@ " ", " \"A", " ", - "

Kitty ipsum dolor sit amet, shed everywhere shed everywhere stretching attack your ankles chase the red dot, hairball run catnip eat the grass sniff.

", - "

Purr jump eat the grass rip the couch scratched sunbathe, shed everywhere rip the couch sleep in the sink fluffy fur catnip scratched.

", + "

在大家心目中，猫是慵懒和可爱的化身，它可以睡饱了再起来吃饭，可以逗趣小耗子，可以卖得了萌，使得了坏，这样百变的小怪兽就集结在一只宠物上，怎能不惹人怜爱。

", + "

养猫有的时候，就是介于爱与恨之间，当你钦羡别人萌宠这么可爱的时候，你一定没有想过，猫咪会到处掉毛，甚至会屯老鼠，啃鞋子，用爪子爬门，你不理它，它就挠你，你要对它发脾气，它会比你更来劲。所以，猫咪慎入，没有一定的准备，切勿随便去侍养动物。它们一旦认定你了，你就是它们的主人，如果你抛弃它们，它们必定心中重创。

", "" ], "head": [], @@ -727,8 +723,8 @@ " ", " \"A", " ", - "

Kitty ipsum dolor sit amet, shed everywhere shed everywhere stretching attack your ankles chase the red dot, hairball run catnip eat the grass sniff.

", - "

Purr jump eat the grass rip the couch scratched sunbathe, shed everywhere rip the couch sleep in the sink fluffy fur catnip scratched.

", + "

在大家心目中，猫是慵懒和可爱的化身，它可以睡饱了再起来吃饭，可以逗趣小耗子，可以卖得了萌，使得了坏，这样百变的小怪兽就集结在一只宠物上，怎能不惹人怜爱。

", + "

养猫有的时候，就是介于爱与恨之间，当你钦羡别人萌宠这么可爱的时候，你一定没有想过，猫咪会到处掉毛，甚至会屯老鼠，啃鞋子，用爪子爬门，你不理它，它就挠你，你要对它发脾气，它会比你更来劲。所以，猫咪慎入，没有一定的准备，切勿随便去侍养动物。它们一旦认定你了，你就是它们的主人，如果你抛弃它们，它们必定心中重创。

", "" ], "head": [], @@ -1469,7 +1465,7 @@ " The best page ever", " ", "

The best page ever

", - "

Cat ipsum dolor sit amet, jump launch to pounce upon little yarn mouse, bare fangs at toy run hide in litter box until treats are fed. Go into a room to decide you didn't want to be in there anyway. I like big cats and i can not lie kitty ipsum dolor sit amet, shed everywhere shed everywhere stretching attack your ankles chase the red dot, hairball run catnip eat the grass sniff. Meow i could pee on this if i had the energy for slap owner's face at 5am until human fills food dish yet scamper. Knock dish off table head butt cant eat out of my own dish scratch the furniture. Make meme, make cute face. Sleep in the bathroom sink chase laser but pee in the shoe. Paw at your fat belly licks your face and eat grass, throw it back up kitty ipsum dolor sit amet, shed everywhere shed everywhere stretching attack your ankles chase the red dot, hairball run catnip eat the grass sniff.

", + "

Cat ipsum dolor sit amet, jump launch to pounce upon little yarn mouse, bare fangs at toy run hide in litter box until treats are fed. Go into a room to decide you didn't want to be in there anyway. I like big cats and i can not lie 在大家心目中，猫是慵懒和可爱的化身，它可以睡饱了再起来吃饭，可以逗趣小耗子，可以卖得了萌，使得了坏，这样百变的小怪兽就集结在一只宠物上，怎能不惹人怜爱。 Meow i could pee on this if i had the energy for slap owner's face at 5am until human fills food dish yet scamper. Knock dish off table head butt cant eat out of my own dish scratch the furniture. Make meme, make cute face. Sleep in the bathroom sink chase laser but pee in the shoe. Paw at your fat belly licks your face and eat grass, throw it back up 在大家心目中，猫是慵懒和可爱的化身，它可以睡饱了再起来吃饭，可以逗趣小耗子，可以卖得了萌，使得了坏，这样百变的小怪兽就集结在一只宠物上，怎能不惹人怜爱。

", " ", " " ], From 8a9e928d754521f3ead6d1bf189340e33e96128e Mon Sep 17 00:00:00 2001 From: huluoyang Date: Sat, 21 Jul 2018 10:29:47 +0800 Subject: [PATCH 19/37] translate chapter to 40% --- 01-responsive-web-design/basic-html-and-html5.json | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/01-responsive-web-design/basic-html-and-html5.json b/01-responsive-web-design/basic-html-and-html5.json index 603ad99..6405690 100644 --- a/01-responsive-web-design/basic-html-and-html5.json +++ b/01-responsive-web-design/basic-html-and-html5.json @@ -1465,7 +1465,7 @@ " The best page ever", " ", "

The best page ever

", - "

Cat ipsum dolor sit amet, jump launch to pounce upon little yarn mouse, bare fangs at toy run hide in litter box until treats are fed. Go into a room to decide you didn't want to be in there anyway. I like big cats and i can not lie 在大家心目中，猫是慵懒和可爱的化身，它可以睡饱了再起来吃饭，可以逗趣小耗子，可以卖得了萌，使得了坏，这样百变的小怪兽就集结在一只宠物上，怎能不惹人怜爱。 Meow i could pee on this if i had the energy for slap owner's face at 5am until human fills food dish yet scamper. Knock dish off table head butt cant eat out of my own dish scratch the furniture. Make meme, make cute face. Sleep in the bathroom sink chase laser but pee in the shoe. Paw at your fat belly licks your face and eat grass, throw it back up 在大家心目中，猫是慵懒和可爱的化身，它可以睡饱了再起来吃饭，可以逗趣小耗子，可以卖得了萌，使得了坏，这样百变的小怪兽就集结在一只宠物上，怎能不惹人怜爱。

", + "

在大家心目中，猫是慵懒和可爱的化身，它可以睡饱了再起来吃饭，可以逗趣小耗子，可以卖得了萌，使得了坏，这样百变的小怪兽就集结在一只宠物上，怎能不惹人怜爱。 在大家心目中，猫是慵懒和可爱的化身，它可以睡饱了再起来吃饭，可以逗趣小耗子，可以卖得了萌，使得了坏，这样百变的小怪兽就集结在一只宠物上，怎能不惹人怜爱。

", " ", " " ], From 99ce5ce0bbe94cfb4f023f4ee0e320c65384d122 Mon Sep 17 00:00:00 2001 From: huluoyang Date: Sat, 21 Jul 2018 23:49:37 +0800 Subject: [PATCH 20/37] add chapter introduce markdown file --- .../applied-accessibility.md | 61 ++ .../applied-visual-design.md | 112 ++ 01-responsive-web-design/basic-css.md | 17 + .../basic-html-and-html5.md | 90 ++ 01-responsive-web-design/css-flexbox.md | 41 + 01-responsive-web-design/css-grid.md | 49 + .../responsive-web-design-principles.md | 13 + .../responsive-web-design-projects.md | 13 + .../basic-algorithm-scripting.md | 45 + .../basic-data-structures.md | 45 + .../basic-javascript.md | 219 ++++ .../debugging.md | 67 ++ .../es6.md | 79 ++ .../functional-programming.md | 63 ++ .../intermediate-algorithm-scripting.md | 47 + ...algorithms-and-data-structures-projects.md | 29 + .../object-oriented-programming.md | 63 ++ .../regular-expressions.md | 69 ++ 03-front-end-libraries/bootstrap.md | 75 ++ .../data-visualization-projects.md | 17 + .../data-visualization-with-d3.md | 67 ++ .../front-end-libraries-projects.md | 17 + 03-front-end-libraries/jquery.md | 41 + 03-front-end-libraries/json-apis-and-ajax.md | 31 + 03-front-end-libraries/react-and-redux.md | 29 + 03-front-end-libraries/react.md | 103 ++ 03-front-end-libraries/redux.md | 41 + 03-front-end-libraries/sass.md | 31 + .../data-visualization-projects.md | 17 + .../data-visualization-with-d3.md | 67 ++ 04-data-visualization/json-apis-and-ajax.md | 31 + .../apis-and-microservices-projects.md | 17 + .../basic-node-and-express.md | 43 + .../managing-packages-with-npm.md | 36 + .../mongodb-and-mongoose.md | 103 ++ .../advanced-node-and-express.md | 51 + ...security-and-quality-assurance-projects.md | 17 + .../information-security-with-helmetjs.md | 36 + ...quality-assurance-and-testing-with-chai.md | 57 ++ 08-coding-interview-prep/algorithms.md | 24 + 08-coding-interview-prep/data-structures.md | 101 ++ 08-coding-interview-prep/project-euler.md | 967 ++++++++++++++++++ 08-coding-interview-prep/rosetta-code.md | 181 ++++ .../take-home-projects.md | 47 + 44 files changed, 3369 insertions(+) create mode 100644 01-responsive-web-design/applied-accessibility.md create mode 100644 01-responsive-web-design/applied-visual-design.md create mode 100644 01-responsive-web-design/basic-css.md create mode 100644 01-responsive-web-design/basic-html-and-html5.md create mode 100644 01-responsive-web-design/css-flexbox.md create mode 100644 01-responsive-web-design/css-grid.md create mode 100644 01-responsive-web-design/responsive-web-design-principles.md create mode 100644 01-responsive-web-design/responsive-web-design-projects.md create mode 100644 02-javascript-algorithms-and-data-structures/basic-algorithm-scripting.md create mode 100644 02-javascript-algorithms-and-data-structures/basic-data-structures.md create mode 100644 02-javascript-algorithms-and-data-structures/basic-javascript.md create mode 100644 02-javascript-algorithms-and-data-structures/debugging.md create mode 100644 02-javascript-algorithms-and-data-structures/es6.md create mode 100644 02-javascript-algorithms-and-data-structures/functional-programming.md create mode 100644 02-javascript-algorithms-and-data-structures/intermediate-algorithm-scripting.md create mode 100644 02-javascript-algorithms-and-data-structures/javascript-algorithms-and-data-structures-projects.md create mode 100644 02-javascript-algorithms-and-data-structures/object-oriented-programming.md create mode 100644 02-javascript-algorithms-and-data-structures/regular-expressions.md create mode 100644 03-front-end-libraries/bootstrap.md create mode 100644 03-front-end-libraries/data-visualization-projects.md create mode 100644 03-front-end-libraries/data-visualization-with-d3.md create mode 100644 03-front-end-libraries/front-end-libraries-projects.md create mode 100644 03-front-end-libraries/jquery.md create mode 100644 03-front-end-libraries/json-apis-and-ajax.md create mode 100644 03-front-end-libraries/react-and-redux.md create mode 100644 03-front-end-libraries/react.md create mode 100644 03-front-end-libraries/redux.md create mode 100644 03-front-end-libraries/sass.md create mode 100644 04-data-visualization/data-visualization-projects.md create mode 100644 04-data-visualization/data-visualization-with-d3.md create mode 100644 04-data-visualization/json-apis-and-ajax.md create mode 100644 05-apis-and-microservices/apis-and-microservices-projects.md create mode 100644 05-apis-and-microservices/basic-node-and-express.md create mode 100644 05-apis-and-microservices/managing-packages-with-npm.md create mode 100644 05-apis-and-microservices/mongodb-and-mongoose.md create mode 100644 06-information-security-and-quality-assurance/advanced-node-and-express.md create mode 100644 06-information-security-and-quality-assurance/information-security-and-quality-assurance-projects.md create mode 100644 06-information-security-and-quality-assurance/information-security-with-helmetjs.md create mode 100644 06-information-security-and-quality-assurance/quality-assurance-and-testing-with-chai.md create mode 100644 08-coding-interview-prep/algorithms.md create mode 100644 08-coding-interview-prep/data-structures.md create mode 100644 08-coding-interview-prep/project-euler.md create mode 100644 08-coding-interview-prep/rosetta-code.md create mode 100644 08-coding-interview-prep/take-home-projects.md diff --git a/01-responsive-web-design/applied-accessibility.md b/01-responsive-web-design/applied-accessibility.md new file mode 100644 index 0000000..1aa0cb7 --- /dev/null +++ b/01-responsive-web-design/applied-accessibility.md @@ -0,0 +1,61 @@ +# Introduction to the Applied Accessibility Challenges # + +"Accessibility" generally means having web content and a user interface that can be understood, navigated, and interacted with by a broad audience. This includes people with visual, auditory, mobility, or cognitive disabilities. Websites should be open and accessible to everyone, regardless of a user's abilities or resources. Some users rely on assistive technology such as a screen reader or voice recognition software. Other users may be able to navigate through a site only using a keyboard. Keeping the needs of various users in mind when developing your project can go a long way towards creating an open web. Here are three general concepts this section will explore throughout the following challenges: + + + +1、have well-organized code that uses appropriate markup + +2、ensure text alternatives exist for non-text and visual content + +3、create an easily-navigated page that's keyboard-friendly + + + +Having accessible web content is an ongoing challenge. A great resource for your projects going forward is the W3 Consortium's Web Content Accessibility Guidelines (WCAG). They set the international standard for accessibility and provide a number of criteria you can use to check your work. + +# Upcoming Lessons # + +Add a Text Alternative to Images for Visually Impaired Accessibility + +Know When Alt Text Should be Left Blank + +Use Headings to Show Hierarchical Relationships of Content + +Jump Straight to the Content Using the main Element + +Wrap Content in the article Element + +Make Screen Reader Navigation Easier with the header Landmark + +Make Screen Reader Navigation Easier with the nav Landmark + +Make Screen Reader Navigation Easier with the footer Landmark + +Improve Accessibility of Audio Content with the audio Element + +Improve Chart Accessibility with the figure Element + +Improve Form Field Accessibility with the label Element + +Wrap Radio Buttons in a fieldset Element for Better Accessibility + +Add an Accessible Date Picker + +Standardize Times with the HTML5 datetime Attribute + +Make Elements Only Visible to a Screen Reader by Using Custom CSS + +Improve Readability with High Contrast Text + +Avoid Colorblindness Issues by Using Sufficient Contrast + +Avoid Colorblindness Issues by Carefully Choosing Colors that Convey Information + +Give Links Meaning by Using Descriptive Link Text + +Make Links Navigatable with HTML Access Keys + +Use tabindex to Add Keyboard Focus to an Element + +Use tabindex to Specify the Order of Keyboard Focus for Several Elements \ No newline at end of file diff --git a/01-responsive-web-design/applied-visual-design.md b/01-responsive-web-design/applied-visual-design.md new file mode 100644 index 0000000..d66b592 --- /dev/null +++ b/01-responsive-web-design/applied-visual-design.md @@ -0,0 +1,112 @@ +# Introduction to the Applied Visual Design Challenges # + +Visual Design in web development is a broad topic. It combines typography, color theory, graphics, animation, and page layout to help deliver a site's message. The definition of good design is a well-discussed subject, with many books on the theme. + +At a basic level, most web content provides a user with information. The visual design of the page can influence its presentation and a user's experience. In web development, HTML gives structure and semantics to a page's content, and CSS controls the layout and appearance of it. + +This section covers some of the basic tools developers use to create their own visual designs. + +# Upcoming Lessons # +Create Visual Balance Using the text-align Property + +Adjust the Width of an Element Using the width Property + +Adjust the Height of an Element Using the height Property + +Use the strong Tag to Make Text Bold + +Use the u Tag to Underline Text + +Use the em Tag to Italicize Text + +Use the del Tag to Strikethrough Text + +Create a Horizontal Line Using the hr Element + +Adjust the background-color Property of Text + +Adjust the Size of a Header Versus a Paragraph Tag + +Add a box-shadow to a Card-like Element + +Decrease the Opacity of an Element + +Use the text-transform Property to Make Text Uppercase + +Set the font-size for Multiple Heading Elements + +Set the font-weight for Multiple Heading Elements + +Set the font-size of Paragraph Text + +Set the line-height of Paragraphs + +Adjust the Hover State of an Anchor Tag + +Change an Element's Relative Position + +Move a Relatively Positioned Element with CSS Offsets + +Lock an Element to its Parent with Absolute Positioning + +Lock an Element to the Browser Window with Fixed Positioning + +Push Elements Left or Right with the float Property + +Change the Position of Overlapping Elements with the z-index Property + +Center an Element Horizontally Using the margin Property + +Learn about Complementary Colors + +Learn about Tertiary Colors + +Adjust the Color of Various Elements to Complementary Colors + +Adjust the Hue of a Color + +Adjust the Tone of a Color + +Create a Gradual CSS Linear Gradient + +Use a CSS Linear Gradient to Create a Striped Element + +Create Texture by Adding a Subtle Pattern as a Background Image + +Use the CSS Transform scale Property to Change the Size of an Element + +Use the CSS Transform scale Property to Scale an Element on Hover + +Use the CSS Transform Property skewX to Skew an Element Along the X-Axis + +Use the CSS Transform Property skewY to Skew an Element Along the Y-Axis + +Create a Graphic Using CSS + +Create a More Complex Shape Using CSS and HTML + +Learn How the CSS @keyframes and animation Properties Work + +Use CSS Animation to Change the Hover State of a Button + +Modify Fill Mode of an Animation + +Create Movement Using CSS Animation + +Create Visual Direction by Fading an Element from Left to Right + +Animate Elements Continually Using an Infinite Animation Count + +Make a CSS Heartbeat using an Infinite Animation Count + +Animate Elements at Variable Rates + +Animate Multiple Elements at Variable Rates + +Change Animation Timing with Keywords + +Learn How Bezier Curves Work + +Use a Bezier Curve to Move a Graphic + +Make Motion More Natural Using a Bezier Curve \ No newline at end of file diff --git a/01-responsive-web-design/basic-css.md b/01-responsive-web-design/basic-css.md new file mode 100644 index 0000000..9bf6819 --- /dev/null +++ b/01-responsive-web-design/basic-css.md @@ -0,0 +1,17 @@ +# Introduction to Basic CSS # + +Cascading Style Sheets (CSS) tell the browser how to display the text and other content that you write in HTML. + +Note that CSS is case-sensitive so be careful with your capitalization. CSS has been adopted by all major browsers and allows you to control: + +* color +* fonts +* positioning +* spacing +* sizing +* decorations +* transitions + +There are three main ways to apply CSS styling. You can apply inline styles directly to HTML elements with the `style` attribute. Alternatively, you can place CSS rules within `style` tags in an HTML document. Finally, you can write CSS rules in an external style sheet, then reference that file in the HTML document. Even though the first two options have their use cases, most developers prefer external style sheets because they keep the styles separate from the HTML elements. This improves the readability and reusability of your code. The idea behind CSS is that you can use a selector to target an HTML element in the DOM (Document Object Model) and then apply a variety of attributes to that element to change the way it is displayed on the page. + +In this section, you'll see how adding CSS styles to the elements of your CatPhotoApp can change it from simple text to something more. \ No newline at end of file diff --git a/01-responsive-web-design/basic-html-and-html5.md b/01-responsive-web-design/basic-html-and-html5.md new file mode 100644 index 0000000..216faeb --- /dev/null +++ b/01-responsive-web-design/basic-html-and-html5.md @@ -0,0 +1,90 @@ +# Introduction to Basic HTML & HTML5 # + +HTML, or HyperText Markup Language, is a markup language used to describe the structure of a web page. It uses a special syntax or notation to organize and give information about the page to the browser. Elements usually have opening and closing tags that surround and give meaning to content. For example, there are different tag options to place around text to show whether it is a heading, a paragraph, or a list. + +For example: + +``` +

Top level heading: Maybe a page title

+ +

A paragraph of text. Some information we would like to communicate to the viewer. This can be as long or short as we would like.

+ +
    +
  1. Number one on the list
    2. +
  2. Number two
    3. +
  3. A third item
    4. +
+``` + +Becomes: + +# Top level heading: Maybe a page title # + +A paragraph of text. Some information we would like to communicate to the user. This can be as long or short as we would like. + +1、Number one on the list +2、Number two +3、A third item + + +The HyperText part of HTML comes from the early days of the web and its original use case. Pages usually contained static documents that contained references to other documents. These references contained hypertext links used by the browser to navigate to the reference document so the user could read the reference document without having to manually search for it. + +As web pages and web applications grow more complex, the W3 Consortium updates the HTML specification to ensure that a webpage can be shown reliably on any browser. The latest version of HTML is HTML5. + +This section introduces how to use HTML elements to give structure and meaning to your web content. + +# Upcoming Lessons # + +Say Hello to HTML Elements + +Headline with the h2 Element + +Inform with the Paragraph Element + +Fill in the Blank with Placeholder Text + +Uncomment HTML + +Comment out HTML + +Delete HTML Elements + +Introduction to HTML5 Elements + +Add Images to Your Website + +Link to External Pages with Anchor Elements + +Link to Internal Sections of a Page with Anchor Elements + +Nest an Anchor Element within a Paragraph + +Make Dead Links Using the Hash Symbol + +Turn an Image into a Link + +Create a Bulleted Unordered List + +Create an Ordered List + +Create a Text Field + +Add Placeholder Text to a Text Field + +Create a Form Element + +Add a Submit Button to a Form + +Use HTML5 to Require a Field + +Create a Set of Radio Buttons + +Create a Set of Checkboxes + +Check Radio Buttons and Checkboxes by Default + +Nest Many Elements within a Single div Element + +Declare the Doctype of an HTML Document + +Define the Head and Body of an HTML Document \ No newline at end of file diff --git a/01-responsive-web-design/css-flexbox.md b/01-responsive-web-design/css-flexbox.md new file mode 100644 index 0000000..da12c5f --- /dev/null +++ b/01-responsive-web-design/css-flexbox.md @@ -0,0 +1,41 @@ +# Introduction to the CSS Flexbox Challenges # + +A website's User Interface ("UI") has two components. First, there are the visual elements, such as colors, fonts, and images. Second, there is the placement or positioning of those elements. In Responsive Web Design, a UI layout must accommodate many different browsers and devices accessing the content. + +CSS3 introduced Flexible Boxes, or flexbox, to create page layouts for a dynamic UI. It is a layout mode that arranges elements in a predictable way for different screen sizes and browsers. While somewhat new, all popular modern browsers support flexbox. This section covers how to use flexbox and the different layout options it offers. + +# Upcoming Lessons # + +Use display: flex to Position Two Boxes + +Add Flex Superpowers to the Tweet Embed + +Use the flex-direction Property to Make a Row + +Apply the flex-direction Property to Create Rows in the Tweet Embed + +Use the flex-direction Property to Make a Column + +Apply the flex-direction Property to Create a Column in the Tweet Embed + +Align Elements Using the justify-content Property + +Use the justify-content Property in the Tweet Embed + +Align Elements Using the align-items Property + +Use the align-items Property in the Tweet Embed + +Use the flex-wrap Property to Wrap a Row or Column + +Use the flex-shrink Property to Shrink Items + +Use the flex-grow Property to Expand Items + +Use the flex-basis Property to Set the Initial Size of an Item + +Use the flex Shorthand Property + +Use the order Property to Rearrange Items + +Use the align-self Property \ No newline at end of file diff --git a/01-responsive-web-design/css-grid.md b/01-responsive-web-design/css-grid.md new file mode 100644 index 0000000..21185fc --- /dev/null +++ b/01-responsive-web-design/css-grid.md @@ -0,0 +1,49 @@ +# Introduction to the CSS Grid Challenges # + +CSS Grid helps you easily build complex web designs. It works by turning an HTML element into a grid container with rows and columns for you to place children elements where you want within the grid. + +# Upcoming Lessons # + +Create Your First CSS Grid + +Add Columns with grid-template-columns + +Add Rows with grid-template-rows + +Use CSS Grid units to Change the Size of Columns and Rows + +Create a Column Gap Using grid-column-gap + +Create a Row Gap using grid-row-gap + +Add Gaps Faster with grid-gap + +Use grid-column to Control Spacing + +Use grid-row to Control Spacing + +Align an Item Horizontally using justify-self + +Align an Item Vertically using align-self + +Align All Items Horizontally using justify-items + +Align All Items Vertically using align-items + +Divide the Grid Into an Area Template + +Place Items in Grid Areas Using the grid-area Property + +Use grid-area Without Creating an Areas Template + +Reduce Repetition Using the repeat Function + +Limit Item Size Using the minmax Function + +Create Flexible Layouts Using auto-fill + +Create Flexible Layouts Using auto-fit + +Use Media Queries to Create Responsive Layouts + +Create Grids within Grids \ No newline at end of file diff --git a/01-responsive-web-design/responsive-web-design-principles.md b/01-responsive-web-design/responsive-web-design-principles.md new file mode 100644 index 0000000..e768b69 --- /dev/null +++ b/01-responsive-web-design/responsive-web-design-principles.md @@ -0,0 +1,13 @@ +# Introduction to the Responsive Web Design Challenges # + +Today, there are many types of devices that can access the web. They range from large desktop computers to small mobile phones. These devices have different screen sizes, resolutions, and processing power. Responsive Web Design is an approach to designing web content that responds to the constraints of different devices. The page structure and CSS rules should be flexible to accommodate these differences. In general, design the page's CSS to your target audience. If you expect most of your traffic to be from mobile users, take a 'mobile-first' approach. Then add conditional rules for larger screen sizes. If your visitors are desktop users, then design for larger screens with conditional rules for smaller sizes. CSS gives you the tools to write different style rules, then apply them depending on the device displaying the page. This section will cover the basic ways to use CSS for Responsive Web Design. + +# Upcoming Lessons # + +Create a Media Query + +Make an Image Responsive + +Use a Retina Image for Higher Resolution Displays + +Make Typography Responsive \ No newline at end of file diff --git a/01-responsive-web-design/responsive-web-design-projects.md b/01-responsive-web-design/responsive-web-design-projects.md new file mode 100644 index 0000000..e768b69 --- /dev/null +++ b/01-responsive-web-design/responsive-web-design-projects.md @@ -0,0 +1,13 @@ +# Introduction to the Responsive Web Design Challenges # + +Today, there are many types of devices that can access the web. They range from large desktop computers to small mobile phones. These devices have different screen sizes, resolutions, and processing power. Responsive Web Design is an approach to designing web content that responds to the constraints of different devices. The page structure and CSS rules should be flexible to accommodate these differences. In general, design the page's CSS to your target audience. If you expect most of your traffic to be from mobile users, take a 'mobile-first' approach. Then add conditional rules for larger screen sizes. If your visitors are desktop users, then design for larger screens with conditional rules for smaller sizes. CSS gives you the tools to write different style rules, then apply them depending on the device displaying the page. This section will cover the basic ways to use CSS for Responsive Web Design. + +# Upcoming Lessons # + +Create a Media Query + +Make an Image Responsive + +Use a Retina Image for Higher Resolution Displays + +Make Typography Responsive \ No newline at end of file diff --git a/02-javascript-algorithms-and-data-structures/basic-algorithm-scripting.md b/02-javascript-algorithms-and-data-structures/basic-algorithm-scripting.md new file mode 100644 index 0000000..deeef5e --- /dev/null +++ b/02-javascript-algorithms-and-data-structures/basic-algorithm-scripting.md @@ -0,0 +1,45 @@ +# Introduction to Basic Algorithm Scripting # + +A computer algorithm is a sequence of steps that is followed to achieve a particular outcome. To write an algorithm, you must first understand a problem, and then solve it with coding. + +To make solving problems eaiser, it can be helpful to break them down into many chuncks. Then, each chunk can be solved one by one. For example, if you are building a calculator, don't try to solve the problem as a whole. First, consider how to get inputs. Then, determine each arithematic operation one by one. Finally, display the results. + +In this section we will learn to solve basic algorithm problems using JavaScript. This will help you improve your problem solving skills and prepare you to later solve more complex problems. + +## Hint ## + +If you get stuck, try using console.log() to log variable values to the console. This will help to debug problems. + +# Upcoming Lessons # + +Convert Celsius to Fahrenheit + +Reverse a String + +Factorialize a Number + +Find the Longest Word in a String + +Return Largest Numbers in Arrays + +Confirm the Ending + +Repeat a String Repeat a String + +Truncate a String + +Finders Keepers + +Boo who + +Title Case a Sentence + +Slice and Splice + +Falsy Bouncer + +Where do I Belong + +Mutations + +Chunky Monkey \ No newline at end of file diff --git a/02-javascript-algorithms-and-data-structures/basic-data-structures.md b/02-javascript-algorithms-and-data-structures/basic-data-structures.md new file mode 100644 index 0000000..dc11d35 --- /dev/null +++ b/02-javascript-algorithms-and-data-structures/basic-data-structures.md @@ -0,0 +1,45 @@ +# Introduction to the Basic Data Structure Challenges # + +Data can be stored and accessed in many different ways, both in Javascript and other languages. This section will teach you how to manipulate arrays, as well as access and copy the information within them. It will also teach you how to manipulate and access the data within Javascript objects, using both dot and bracket notation. When you're done with this section, you should understand the basic properties and differences between arrays and objects, as well as how to choose which to use for a given purpose. + +# Upcoming Lessons # + +Use an Array to Store a Collection of Data + +Access an Array's Contents Using Bracket Notation + +Add Items to an Array with push() and unshift() + +Remove Items from an Array with pop() and shift() + +Remove Items Using splice() + +Add Items Using splice() + +Copy Array Items Using slice() + +Copy an Array with the Spread Operator + +Combine Arrays with the Spread Operator + +Check For The Presence of an Element With indexOf() + +Iterate Through All an Array's Items Using For Loops + +Create complex multi-dimensional arrays + +Add Key-Value Pairs to JavaScript Objects + +Modify an Object Nested Within an Object + +Access Property Names with Bracket Notation + +Use the delete Keyword to Remove Object Properties + +Check if an Object has a Property + +Iterate Through the Keys of an Object with a for...in Statement + +Generate an Array of All Object Keys with Object.keys() + +Modify an Array Stored in an Object \ No newline at end of file diff --git a/02-javascript-algorithms-and-data-structures/basic-javascript.md b/02-javascript-algorithms-and-data-structures/basic-javascript.md new file mode 100644 index 0000000..eca570f --- /dev/null +++ b/02-javascript-algorithms-and-data-structures/basic-javascript.md @@ -0,0 +1,219 @@ +# Introduction to JavaScript # + +JavaScript is a high-level programming language that all modern web browsers support. It is also one of the core technologies of the web, along with HTML and CSS that you may have learned previously. This section will cover basic JavaScript programming concepts, which range from variables and arithmetic to objects and loops. + +# Upcoming Lessons # + +Comment Your JavaScript Code + +Declare JavaScript Variables + +Storing Values with the Assignment Operator + +Initializing Variables with the Assignment Operator + +Understanding Uninitialized Variables + +Understanding Case Sensitivity in Variables + +Add Two Numbers with JavaScript + +Subtract One Number from Another with JavaScript + +Multiply Two Numbers with JavaScript + +Divide One Number by Another with JavaScript + +Increment a Number with JavaScript + +Decrement a Number with JavaScript + +Create Decimal Numbers with JavaScript + +Multiply Two Decimals with JavaScript + +Divide One Decimal by Another with JavaScript + +Finding a Remainder in JavaScript + +Compound Assignment With Augmented Addition + +Compound Assignment With Augmented Subtraction + +Compound Assignment With Augmented Multiplication + +Compound Assignment With Augmented Division + +Declare String Variables + +Escaping Literal Quotes in Strings + +Quoting Strings with Single Quotes + +Escape Sequences in Strings + +Concatenating Strings with Plus Operator + +Concatenating Strings with the Plus Equals Operator + +Constructing Strings with Variables + +Appending Variables to Strings + +Find the Length of a String + +Use Bracket Notation to Find the First Character in a String + +Understand String Immutability + +Use Bracket Notation to Find the Nth Character in a String + +Use Bracket Notation to Find the Last Character in a String + +Use Bracket Notation to Find the Nth-to-Last Character in a String + +Word Blanks + +Store Multiple Values in one Variable using JavaScript Arrays + +Nest one Array within Another Array + +Access Array Data with Indexes + +Modify Array Data With Indexes + +Access Multi-Dimensional Arrays With Indexes + +Manipulate Arrays With push() + +Manipulate Arrays With pop() + +Manipulate Arrays With shift() + +Manipulate Arrays With unshift() + +Shopping List + +Write Reusable JavaScript with Functions + +Passing Values to Functions with Arguments + +Global Scope and Functions + +Local Scope and Functions + +Global vs. Local Scope in Functions + +Return a Value from a Function with Return + +Understanding Undefined Value returned from a Function + +Assignment with a Returned Value + +Stand in Line + +Understanding Boolean Values + +Use Conditional Logic with If Statements + +Comparison with the Equality Operator + +Comparison with the Strict Equality Operator + +Practice comparing different values + +Comparison with the Inequality Operator + +Comparison with the Strict Inequality Operator + +Comparison with the Greater Than Operator + +Comparison with the Greater Than Or Equal To Operator + +Comparison with the Less Than Operator + +Comparison with the Less Than Or Equal To Operator + +Comparisons with the Logical And Operator + +Comparisons with the Logical Or Operator + +Introducing Else Statements + +Introducing Else If Statements + +Logical Order in If Else Statements + +Chaining If Else Statements + +Golf Code + +Selecting from Many Options with Switch Statements + +Adding a Default Option in Switch Statements + +Multiple Identical Options in Switch Statements + +Replacing If Else Chains with Switch + +Returning Boolean Values from Functions + +Return Early Pattern for Functions + +Counting Cards + +Build JavaScript Objects + +Accessing Object Properties with Dot Notation + +Accessing Object Properties with Bracket Notation + +Accessing Object Properties with Variables + +Updating Object Properties + +Add New Properties to a JavaScript Object + +Delete Properties from a JavaScript Object + +Using Objects for Lookups + +Testing Objects for Properties + +Manipulating Complex Objects + +Accessing Nested Objects + +Accessing Nested Arrays + +Record Collection + +Iterate with JavaScript While Loops + +Iterate with JavaScript For Loops + +Iterate Odd Numbers With a For Loop + +Count Backwards With a For Loop + +Iterate Through an Array with a For Loop + +Nesting For Loops + +Iterate with JavaScript Do...While Loops + +Profile Lookup + +Generate Random Fractions with JavaScript + +Generate Random Whole Numbers with JavaScript + +Generate Random Whole Numbers within a Range + +Use the parseInt Function + +Use the parseInt Function with a Radix + +Use the Conditional (Ternary) Operator + +Use Multiple Conditional (Ternary) Operators \ No newline at end of file diff --git a/02-javascript-algorithms-and-data-structures/debugging.md b/02-javascript-algorithms-and-data-structures/debugging.md new file mode 100644 index 0000000..4f173d5 --- /dev/null +++ b/02-javascript-algorithms-and-data-structures/debugging.md @@ -0,0 +1,67 @@ +# Introduction to the Debugging Challenges # + +Debugging is a valuable and (unfortunately) necessary tool for programmers. It follows the testing phase of checking if your code works as intended, and discovering it does not. Debugging is the process of finding exactly what isn't working and fixing it. After spending time creating a brilliant block of code, it is tough realizing it may have errors. These issues generally come in three forms: 1) syntax errors that prevent a program from running, 2) runtime errors when code fails to execute or has unexpected behavior, and 3) semantic (or logical) errors when code doesn't do what it's meant to. + +Modern code editors (and experience) can help identify syntax errors. Semantic and runtime errors are harder to find. They may cause your program to crash, make it run forever, or give incorrect output. Think of debugging as trying to understand why your code is behaving the way it is. + +Example of a syntax error - often detected by the code editor: + +``` +funtion willNotWork( { + console.log("Yuck"); +} +// "function" keyword is misspelled and there's a missing parenthesis +``` + +Here's an example of a runtime error - often detected while the program executes: + +``` +function loopy() { + while(true) { + console.log("Hello, world!"); + } +} +// Calling loopy starts an infinite loop, which may crash your browser +``` + +Example of a semantic error - often detected after testing code output: + +``` +function calcAreaOfRect(w, h) { + return w + h; // This should be w * h +} +let myRectArea = calcAreaOfRect(2, 3); +// Correct syntax and the program executes, but this gives the wrong answer +``` + +Debugging is frustrating, but it helps to develop (and follow) a step-by-step approach to review your code. This means checking the intermediate values and types of variables to see if they are what they should be. You can start with a simple process of elimination. + +For example, if function A works and returns what it's supposed to, then function B may have the issue. Or start checking values in a block of code from the middle to try to cut the search space in half. A problem in one spot indicates a bug in the first half of the code. If not, it's likely in the second. + +This section will cover a couple helpful tools to find bugs, and some of the common forms they take. Fortunately, debugging is a learnable skill that just requires a little patience and practice to master. + +# Upcoming Lessons # + +Use the JavaScript Console to Check the Value of a Variable + +Understanding the Differences between the freeCodeCamp and Browser Console + +Use typeof to Check the Type of a Variable + +Catch Misspelled Variable and Function Names + +Catch Unclosed Parentheses, Brackets, Braces and Quotes + +Catch Mixed Usage of Single and Double Quotes + +Catch Use of Assignment Operator Instead of Equality Operator + +Catch Missing Open and Closing Parenthesis After a Function Call + +Catch Arguments Passed in the Wrong Order When Calling a Function + +Catch Off By One Errors When Using Indexing + +Use Caution When Reinitializing Variables Inside a Loop + +Prevent Infinite Loops with a Valid Terminal Condition \ No newline at end of file diff --git a/02-javascript-algorithms-and-data-structures/es6.md b/02-javascript-algorithms-and-data-structures/es6.md new file mode 100644 index 0000000..1a15076 --- /dev/null +++ b/02-javascript-algorithms-and-data-structures/es6.md @@ -0,0 +1,79 @@ +# Introduction to the ES6 Challenges # + +ECMAScript is a standardized version of JavaScript with the goal of unifying the language's specifications and features. As all major browsers and JavaScript-runtimes follow this specification, the term ECMAScript is interchangeable with the term JavaScript. + +Most of the challenges on freeCodeCamp use the ECMAScript 5 (ES5) specification of the language, finalized in 2009. But JavaScript is an evolving programming language. As features are added and revisions are made, new versions of the language are released for use by developers. + +The most recent standardized version is called ECMAScript 6 (ES6), released in 2015. This new version of the language adds some powerful features that will be covered in this section of challenges, including: + + +* Arrow functions + +* Classes + +* Modules + +* Promises + +* Generators + +* let and const + + +## Note ## + +Not all browsers support ES6 features. If you use ES6 in your own projects, you may need to use a program (transpiler) to convert your ES6 code into ES5 until browsers support ES6. + +# Upcoming Lessons # + +Explore Differences Between the var and let Keywords + +Compare Scopes of the var and let Keywords + +Declare a Read-Only Variable with the const Keyword + +Mutate an Array Declared with const + +Prevent Object Mutation + +Use Arrow Functions to Write Concise Anonymous Functions + +Write Arrow Functions with Parameters + +Write Higher Order Arrow Functions + +Set Default Parameters for Your Functions + +Use the Rest Operator with Function Parameters + +Use the Spread Operator to Evaluate Arrays In-Place + +Use Destructuring Assignment to Assign Variables from Objects + +Use Destructuring Assignment to Assign Variables from Nested Objects + +Use Destructuring Assignment to Assign Variables from Arrays + +Use Destructuring Assignment with the Rest Operator to Reassign Array Elements + +Use Destructuring Assignment to Pass an Object as a Function's Parameters + +Create Strings using Template Literals + +Write Concise Object Literal Declarations Using Simple Fields + +Write Concise Declarative Functions with ES6 + +Use class Syntax to Define a Constructor Function + +Use getters and setters to Control Access to an Object + +Understand the Differences Between import and require + +Use export to Reuse a Code Block + +Use * to Import Everything from a File + +Create an Export Fallback with export default + +Import a Default Export \ No newline at end of file diff --git a/02-javascript-algorithms-and-data-structures/functional-programming.md b/02-javascript-algorithms-and-data-structures/functional-programming.md new file mode 100644 index 0000000..76ba821 --- /dev/null +++ b/02-javascript-algorithms-and-data-structures/functional-programming.md @@ -0,0 +1,63 @@ +# Introduction to the Functional Programming Challenges # + +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. + +Functional programming follows a few core principles: + + +* 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 + +* Functions try to limit any changes to the state of the program and avoid changes to the global objects holding data + +* Functions have minimal side effects in the program + + +The functional programming software development approach breaks a program into small, testable parts. This section covers basic functional programming principles in JavaScript. + +# Upcoming Lessons # + +Learn About Functional Programming + +Understand Functional Programming Terminology + +Understand the Hazards of Using Imperative Code + +Avoid Mutations and Side Effects Using Functional Programming + +Pass Arguments to Avoid External Dependence in a Function + +Refactor Global Variables Out of Functions + +Use the map Method to Extract Data from an Array + +Implement map on a Prototype + +Use the filter Method to Extract Data from an Array + +Implement the filter Method on a Prototype + +Return Part of an Array Using the slice Method + +Remove Elements from an Array Using slice Instead of splice + +Combine Two Arrays Using the concat Method + +Add Elements to the End of an Array Using concat Instead of push + +Use the reduce Method to Analyze Data + +Sort an Array Alphabetically using the sort Method + +Return a Sorted Array Without Changing the Original Array + +Split a String into an Array Using the split Method + +Combine an Array into a String Using the join Method + +Apply Functional Programming to Convert Strings to URL Slugs + +Use the every Method to Check that Every Element in an Array Meets a Criteria + +Use the some Method to Check that Any Elements in an Array Meet a Criteria + +Introduction to Currying and Partial Application \ No newline at end of file diff --git a/02-javascript-algorithms-and-data-structures/intermediate-algorithm-scripting.md b/02-javascript-algorithms-and-data-structures/intermediate-algorithm-scripting.md new file mode 100644 index 0000000..c59fe06 --- /dev/null +++ b/02-javascript-algorithms-and-data-structures/intermediate-algorithm-scripting.md @@ -0,0 +1,47 @@ +# Introduction to the Intermediate Algorithm Scripting Challenges # + +This is a stub introduction + +# Upcoming Lessons # + +Sum All Numbers in a Range + +Diff Two Arrays + +Seek and Destroy + +Wherefore art thou + +Spinal Tap Case + +Pig Latin + +Search and Replace + +DNA Pairing + +Missing letters + +Sorted Union + +Convert HTML Entities + +Sum All Odd Fibonacci Numbers + +Sum All Primes + +Smallest Common Multiple + +Drop it + +Steamroller + +Binary Agents + +Everything Be True + +Arguments Optional + +Make a Person + +Map the Debris \ No newline at end of file diff --git a/02-javascript-algorithms-and-data-structures/javascript-algorithms-and-data-structures-projects.md b/02-javascript-algorithms-and-data-structures/javascript-algorithms-and-data-structures-projects.md new file mode 100644 index 0000000..f24f147 --- /dev/null +++ b/02-javascript-algorithms-and-data-structures/javascript-algorithms-and-data-structures-projects.md @@ -0,0 +1,29 @@ +# Introduction to the JavaScript Algorithms and Data Structures Projects # + +Time to put your new JavaScript skills to work! These challenges will be similar to the algorithm scripting challenges but more difficult. This will allow you to prove how much you have learned. + +In this section you will create the following small JavaScript programs: + +* Roman Numeral Converter + +* Caesars Cipher + +* Telephone Number Validator + +* Cash Register + +Have fun and remember to use the Read-Search-Ask method if you get stuck. + +Good Luck! + +# Upcoming Lessons # + +Palindrome Checker + +Roman Numeral Converter + +Caesars Cipher + +Telephone Number Validator + +Cash Register \ No newline at end of file diff --git a/02-javascript-algorithms-and-data-structures/object-oriented-programming.md b/02-javascript-algorithms-and-data-structures/object-oriented-programming.md new file mode 100644 index 0000000..a0a014d --- /dev/null +++ b/02-javascript-algorithms-and-data-structures/object-oriented-programming.md @@ -0,0 +1,63 @@ +# Introduction to the Object Oriented Programming Challenges # + +At its core, software development solves a problem or achieves a result with computation. The software development process first defines a problem, then presents a solution. Object oriented programming is one of several major approaches to the software development process. + +As its name implies, object oriented programming organizes code into object definitions. These are sometimes called classes, and they group together data with related behavior. The data is an object's attributes, and the behavior (or functions) are methods. + +The object structure makes it flexible within a program. Objects can transfer information by calling and passing data to another object's methods. Also, new classes can receive, or inherit, all the features from a base or parent class. This helps to reduce repeated code. + +Your choice of programming approach depends on a few factors. These include the type of problem, as well as how you want to structure your data and algorithms. This section covers object oriented programming principles in JavaScript. + +# Upcoming Lessons # + +Create a Basic JavaScript Object + +Use Dot Notation to Access the Properties of an Object + +Create a Method on an Object + +Make Code More Reusable with the this Keyword + +Define a Constructor Function + +Use a Constructor to Create Objects + +Extend Constructors to Receive Arguments + +Verify an Object's Constructor with instanceof + +Understand Own Properties + +Use Prototype Properties to Reduce Duplicate Code + +Iterate Over All Properties + +Understand the Constructor Property + +Change the Prototype to a New Object + +Remember to Set the Constructor Property when Changing the Prototype + +Understand Where an Object’s Prototype Comes From + +Understand the Prototype Chain + +Use Inheritance So You Don't Repeat Yourself + +Inherit Behaviors from a Supertype + +Set the Child's Prototype to an Instance of the Parent + +Reset an Inherited Constructor Property + +Add Methods After Inheritance + +Override Inherited Methods + +Use a Mixin to Add Common Behavior Between Unrelated Objects + +Use Closure to Protect Properties Within an Object from Being Modified Externally + +Understand the Immediately Invoked Function Expression (IIFE) + +Use an IIFE to Create a Module \ No newline at end of file diff --git a/02-javascript-algorithms-and-data-structures/regular-expressions.md b/02-javascript-algorithms-and-data-structures/regular-expressions.md new file mode 100644 index 0000000..e95af47 --- /dev/null +++ b/02-javascript-algorithms-and-data-structures/regular-expressions.md @@ -0,0 +1,69 @@ +# Introduction to the Regular Expression Challenges # + +Regular expressions are special strings that represent a search pattern. Also known as "regex" or "regexp", they help programmers match, search, and replace text. Regular expressions can appear cryptic because a few characters have special meaning. The goal is to combine the symbols and text into a pattern that matches what you want, but only what you want. This section will cover the characters, a few shortcuts, and the common uses for writing regular expressions. + +# Upcoming Lessons # + +Using the Test Method + +Match Literal Strings + +Match a Literal String with Different Possibilities + +Ignore Case While Matching + +Extract Matches + +Find More Than the First Match + +Match Anything with Wildcard Period + +Match Single Character with Multiple Possibilities + +Match Letters of the Alphabet + +Match Numbers and Letters of the Alphabet + +Match Single Characters Not Specified + +Match Characters that Occur One or More Times + +Match Characters that Occur Zero or More Times + +Find Characters with Lazy Matching + +Find One or More Criminals in a Hunt + +Match Beginning String Patterns + +Match Ending String Patterns + +Match All Letters and Numbers + +Match Everything But Letters and Numbers + +Match All Numbers + +Match All Non-Numbers + +Restrict Possible Usernames + +Match Whitespace + +Match Non-Whitespace Characters + +Specify Upper and Lower Number of Matches + +Specify Only the Lower Number of Matches + +Specify Exact Number of Matches + +Check for All or None + +Positive and Negative Lookahead + +Reuse Patterns Using Capture Groups + +Use Capture Groups to Search and Replace + +Remove Whitespace from Start and End \ No newline at end of file diff --git a/03-front-end-libraries/bootstrap.md b/03-front-end-libraries/bootstrap.md new file mode 100644 index 0000000..b0155e9 --- /dev/null +++ b/03-front-end-libraries/bootstrap.md @@ -0,0 +1,75 @@ +# Introduction to the Bootstrap Challenges # + +Bootstrap is a front-end framework used to design responsive web pages and web applications. It takes a mobile-first approach to web development. Bootstrap includes pre-built CSS styles and classes, plus some JavaScript functionality. Bootstrap uses a responsive 12 column grid layout and has design templates for: + +* buttons +* images +* tables +* forms +* navigation + +This section introduces some of the ways to use Bootstrap in your web projects. + +# Upcoming Lessons # + +Use Responsive Design with Bootstrap Fluid Containers + +Make Images Mobile Responsive + +Center Text with Bootstrap + +Create a Bootstrap Button + +Create a Block Element Bootstrap Button + +Taste the Bootstrap Button Color Rainbow + +Call out Optional Actions with btn-info + +Warn Your Users of a Dangerous Action with btn-danger + +Use the Bootstrap Grid to Put Elements Side By Side + +Ditch Custom CSS for Bootstrap + +Use a span to Target Inline Elements + +Create a Custom Heading + +Add Font Awesome Icons to our Buttons + +Add Font Awesome Icons to all of our Buttons + +Responsively Style Radio Buttons + +Responsively Style Checkboxes + +Style Text Inputs as Form Controls + +Line up Form Elements Responsively with Bootstrap + +Create a Bootstrap Headline + +House our page within a Bootstrap container-fluid div + +Create a Bootstrap Row + +Split Your Bootstrap Row + +Create Bootstrap Wells + +Add Elements within Your Bootstrap Wells + +Apply the Default Bootstrap Button Style + +Create a Class to Target with jQuery Selectors + +Add id Attributes to Bootstrap Elements + +Label Bootstrap Wells + +Give Each Element a Unique id + +Label Bootstrap Buttons + +Use Comments to Clarify Code \ No newline at end of file diff --git a/03-front-end-libraries/data-visualization-projects.md b/03-front-end-libraries/data-visualization-projects.md new file mode 100644 index 0000000..91f9a00 --- /dev/null +++ b/03-front-end-libraries/data-visualization-projects.md @@ -0,0 +1,17 @@ +# Introduction to the Data Visualization Projects # + +This introduction is a stub + +Help us make it real on GitHub. + +# Upcoming Lessons # + +Visualize Data with a Bar Chart + +Visualize Data with a Scatterplot Graph + +Visualize Data with a Heat Map + +Visualize Data with a Choropleth Map + +Visualize Data with a Treemap Diagram \ No newline at end of file diff --git a/03-front-end-libraries/data-visualization-with-d3.md b/03-front-end-libraries/data-visualization-with-d3.md new file mode 100644 index 0000000..70652b1 --- /dev/null +++ b/03-front-end-libraries/data-visualization-with-d3.md @@ -0,0 +1,67 @@ +# Introduction to the Data Visualization with D3 Challenges # + +D3.js, or D3, stands for Data Driven Documents. D3 is a JavaScript library to create dynamic and interactive data visualizations in the browser. It's built to work with common web standards, namely HTML, CSS, and Scalable Vector Graphics (SVG). + +D3 takes input data and maps it into a visual representation of that data. It supports many different data formats. D3 lets you bind (or attach) the data to the Document Object Model (DOM). You use HTML or SVG elements with D3's built-in methods to transform the data into a visualization. + +D3 gives you a lot of control over the presentation of data. This section covers the basic functionality and how to create visualizations with the D3 library. + +# Upcoming Lessons # + +Add Document Elements with D3 + +Select a Group of Elements with D3 + +Work with Data in D3 + +Work with Dynamic Data in D3 + +Add Inline Styling to Elements + +Change Styles Based on Data + +Add Classes with D3 + +Update the Height of an Element Dynamically + +Change the Presentation of a Bar Chart + +Learn About SVG in D3 + +Display Shapes with SVG + +Create a Bar for Each Data Point in the Set + +Dynamically Set the Coordinates for Each Bar + +Dynamically Change the Height of Each Bar + +Invert SVG Elements + +Change the Color of an SVG Element + +Add Labels to D3 Elements + +Style D3 Labels + +Add a Hover Effect to a D3 Element + +Add a Tooltip to a D3 Element + +Create a Scatterplot with SVG Circles + +Add Attributes to the Circle Elements + +Add Labels to Scatter Plot Circles + +Create a Linear Scale with D3 + +Set a Domain and a Range on a Scale + +Use the d3.max and d3.min Functions to Find Minimum and Maximum Values in a Dataset + +Use Dynamic Scales + +Use a Pre-Defined Scale to Place Elements + +Add Axes to a Visualization \ No newline at end of file diff --git a/03-front-end-libraries/front-end-libraries-projects.md b/03-front-end-libraries/front-end-libraries-projects.md new file mode 100644 index 0000000..ed13447 --- /dev/null +++ b/03-front-end-libraries/front-end-libraries-projects.md @@ -0,0 +1,17 @@ +# Introduction to the Front End Libraries Projects # + +This introduction is a stub + +Help us make it real on GitHub. + +# Upcoming Lessons # + +Build a Random Quote Machine + +Build a Markdown Previewer + +Build a Drum Machine + +Build a JavaScript Calculator + +Build a Pomodoro Clock \ No newline at end of file diff --git a/03-front-end-libraries/jquery.md b/03-front-end-libraries/jquery.md new file mode 100644 index 0000000..0fcb9a3 --- /dev/null +++ b/03-front-end-libraries/jquery.md @@ -0,0 +1,41 @@ +# Introduction to jQuery # + +jQuery is one of the many libraries for JavaScript. It is designed to simplify scripting done on the client side. jQuery's most recognizable characteristic is its dollar sign ($) syntax. With it, you can easily manipulate elements, create animations and handle input events. + +# Upcoming Lessons # + +Learn How Script Tags and Document Ready Work + +Target HTML Elements with Selectors Using jQuery + +Target Elements by Class Using jQuery + +Target Elements by id Using jQuery + +Delete Your jQuery Functions + +Target the Same Element with Multiple jQuery Selectors + +Remove Classes from an Element with jQuery + +Change the CSS of an Element Using jQuery + +Disable an Element Using jQuery + +Change Text Inside an Element Using jQuery + +Remove an Element Using jQuery + +Use appendTo to Move Elements with jQuery + +Clone an Element Using jQuery + +Target the Parent of an Element Using jQuery + +Target the Children of an Element Using jQuery + +Target a Specific Child of an Element Using jQuery + +Target Even Elements Using jQuery + +Use jQuery to Modify the Entire Page \ No newline at end of file diff --git a/03-front-end-libraries/json-apis-and-ajax.md b/03-front-end-libraries/json-apis-and-ajax.md new file mode 100644 index 0000000..6db5ac9 --- /dev/null +++ b/03-front-end-libraries/json-apis-and-ajax.md @@ -0,0 +1,31 @@ +# Introduction to the JSON APIs and AJAX Challenges # + +Similar to how User Interfaces help people use programs, Application Programming Interfaces (APIs) help programs interact with other programs. APIs are tools that computers use to communicate with one another, in part to send and receive data. You can use API functionality in your page once you understand how to make requests and process data from it. Programmers often use AJAX technologies when working with APIs. + +The term AJAX originated as an acronym for Asynchronous JavaScript And XML. It refers to a group of technologies that make asynchronous requests to a server to transfer data, then load any returned data into the page. An asynchronous process has a couple key properties. The browser does not stop loading a page to wait for the server's response. Also, the browser inserts updated data into part of the page without having to refresh the entire page. + +User experience benefits from asynchronous processes in several ways. Pages load faster since the browser isn't waiting for the server to respond in the middle of a page render. Requests and transfers happen in the background, without interrupting what the user is doing. When the browser receives new data, only the necessary area of the page refreshes. These qualities especially enhance the user experience for single page applications. + +The data transferred between the browser and server is often in a format called JavaScript Object Notation (JSON). JSON resembles JavaScript object literal syntax, except that it's transferred as a string. Once received, it can be converted into an object and used in a script. + +This section covers how to transfer and use data using AJAX technologies with a freeCodeCamp API. + +# Upcoming Lessons # + +Handle Click Events with JavaScript using the onclick property + +Change Text with click Events + +Get JSON with the JavaScript XMLHttpRequest Method + +Access the JSON Data from an API + +Convert JSON Data to HTML + +Render Images from Data Sources + +Pre-filter JSON to Get the Data You Need + +Get Geolocation Data to Find A User's GPS Coordinates + +Post Data with the JavaScript XMLHttpRequest Method \ No newline at end of file diff --git a/03-front-end-libraries/react-and-redux.md b/03-front-end-libraries/react-and-redux.md new file mode 100644 index 0000000..4830e43 --- /dev/null +++ b/03-front-end-libraries/react-and-redux.md @@ -0,0 +1,29 @@ +# Introduction to the React and Redux Challenges # + +This series of challenges introduces how to use Redux with React. + +In a React Redux app, you create a single Redux store that manages the state of your entire app. Your React components subscribe to only the pieces of data in the store that are relevant to their role. Then, you dispatch actions directly from React components, which then trigger store updates. + +Improve this intro on GitHub. + +# Upcoming Lessons # + +Getting Started with React Redux + +Manage State Locally First + +Extract State Logic to Redux + +Use Provider to Connect Redux to React + +Map State to Props + +Map Dispatch to Props + +Connect Redux to React + +Connect Redux to the Messages App + +Extract Local State into Redux + +Moving Forward From Here \ No newline at end of file diff --git a/03-front-end-libraries/react.md b/03-front-end-libraries/react.md new file mode 100644 index 0000000..8a95f80 --- /dev/null +++ b/03-front-end-libraries/react.md @@ -0,0 +1,103 @@ +# Introduction to the React Challenges # + +React, popularized by Facebook, is a open-source JavaScript library for building user interfaces. With JSX, it is used to create components, handle state and props, utilize event listeners and certain life cycle methods to update data as it changes. + +React combines HTML with JavaScript functionality to create its own markup language, JSX. This section will introduce you to all of these concepts and how to implement them for use with your own projects. + +# Upcoming Lessons # + +Create a Simple JSX Element + +Create a Complex JSX Element + +Add Comments in JSX + +Render HTML Elements to the DOM + +Define an HTML Class in JSX + +Learn About Self-Closing JSX Tags + +Create a Stateless Functional Component + +Create a React Component + +Create a Component with Composition + +Use React to Render Nested Components + +Compose React Components + +Render a Class Component to the DOM + +Write a React Component from Scratch + +Pass Props to a Stateless Functional Component + +Pass an Array as Props + +Use Default Props + +Override Default Props + +Use PropTypes to Define the Props You Expect + +Access Props Using this.props + +Review Using Props with Stateless Functional Components + +Create a Stateful Component + +Render State in the User Interface + +Render State in the User Interface Another Way + +Set State with this.setState + +Bind 'this' to a Class Method + +Use State to Toggle an Element + +Write a Simple Counter + +Create a Controlled Input + +Create a Controlled Form + +Pass State as Props to Child Components + +Pass a Callback as Props + +Use the Lifecycle Method componentWillMount + +Use the Lifecycle Method componentDidMount + +Add Event Listeners + +Manage Updates with Lifecycle Methods + +Optimize Re-Renders with shouldComponentUpdate + +Introducing Inline Styles + +Add Inline Styles in React + +Use Advanced JavaScript in React Render Method + +Render with an If/Else Condition + +Use && for a More Concise Conditional + +Use a Ternary Expression for Conditional Rendering + +Render Conditionally from Props + +Change Inline CSS Conditionally Based on Component State + +Use Array.map() to Dynamically Render Elements + +Give Sibling Elements a Unique Key Attribute + +Use Array.filter() to Dynamically Filter an Array + +Render React on the Server with renderToString \ No newline at end of file diff --git a/03-front-end-libraries/redux.md b/03-front-end-libraries/redux.md new file mode 100644 index 0000000..b5bfc9f --- /dev/null +++ b/03-front-end-libraries/redux.md @@ -0,0 +1,41 @@ +# Introduction to the Redux Challenges # + +Redux is a predictable state container for JavaScript apps. It helps you write applications that behave consistently, run in different environments (client, server, and native), and are easy to test. While you can use Redux with any view library, it's introduced here before being combined with React. + +Improve this intro on GitHub. + +# Upcoming Lessons # + +Create a Redux Store + +Get State from the Redux Store + +Define a Redux Action + +Define an Action Creator + +Dispatch an Action Event + +Handle an Action in the Store + +Use a Switch Statement to Handle Multiple Actions + +Use const for Action Types + +Register a Store Listener + +Combine Multiple Reducers + +Send Action Data to the Store + +Use Middleware to Handle Asynchronous Actions + +Write a Counter with Redux + +Never Mutate State + +Use the Spread Operator on Arrays + +Remove an Item from an Array + +Copy an Object with Object.assign \ No newline at end of file diff --git a/03-front-end-libraries/sass.md b/03-front-end-libraries/sass.md new file mode 100644 index 0000000..2bf96aa --- /dev/null +++ b/03-front-end-libraries/sass.md @@ -0,0 +1,31 @@ +# Introduction to the Sass Challenges # + +Sass, or "Syntactically Awesome StyleSheets", is a language extension of CSS. It adds features that aren't available using basic CSS syntax. Sass makes it easier for developers to simplify and maintain the style sheets for their projects. + +Sass can extend the CSS language because it is a preprocessor. It takes code written using Sass syntax, and converts it into basic CSS. This allows you to create variables, nest CSS rules into others, and import other Sass files, among other things. The result is more compact, easier to read code. + +There are two syntaxes available for Sass. The first, known as SCSS (Sassy CSS) and used throughout these challenges, is an extension of the syntax of CSS. This means that every valid CSS stylesheet is a valid SCSS file with the same meaning. Files using this syntax have the .scss extension. + +The second and older syntax, known as the indented syntax (or sometimes just "Sass"), uses indentation rather than brackets to indicate nesting of selectors, and newlines rather than semicolons to separate properties. Files using this syntax have the .sass extension. + +This section introduces the basic features of Sass. + +# Upcoming Lessons # + +Store Data with Sass Variables + +Nest CSS with Sass + +Create Reusable CSS with Mixins + +Use @if and @else to Add Logic To Your Styles + +Use @for to Create a Sass Loop + +Use @each to Map Over Items in a List + +Apply a Style Until a Condition is Met with @while + +Split Your Styles into Smaller Chunks with Partials + +Extend One Set of CSS Styles to Another Element \ No newline at end of file diff --git a/04-data-visualization/data-visualization-projects.md b/04-data-visualization/data-visualization-projects.md new file mode 100644 index 0000000..91f9a00 --- /dev/null +++ b/04-data-visualization/data-visualization-projects.md @@ -0,0 +1,17 @@ +# Introduction to the Data Visualization Projects # + +This introduction is a stub + +Help us make it real on GitHub. + +# Upcoming Lessons # + +Visualize Data with a Bar Chart + +Visualize Data with a Scatterplot Graph + +Visualize Data with a Heat Map + +Visualize Data with a Choropleth Map + +Visualize Data with a Treemap Diagram \ No newline at end of file diff --git a/04-data-visualization/data-visualization-with-d3.md b/04-data-visualization/data-visualization-with-d3.md new file mode 100644 index 0000000..70652b1 --- /dev/null +++ b/04-data-visualization/data-visualization-with-d3.md @@ -0,0 +1,67 @@ +# Introduction to the Data Visualization with D3 Challenges # + +D3.js, or D3, stands for Data Driven Documents. D3 is a JavaScript library to create dynamic and interactive data visualizations in the browser. It's built to work with common web standards, namely HTML, CSS, and Scalable Vector Graphics (SVG). + +D3 takes input data and maps it into a visual representation of that data. It supports many different data formats. D3 lets you bind (or attach) the data to the Document Object Model (DOM). You use HTML or SVG elements with D3's built-in methods to transform the data into a visualization. + +D3 gives you a lot of control over the presentation of data. This section covers the basic functionality and how to create visualizations with the D3 library. + +# Upcoming Lessons # + +Add Document Elements with D3 + +Select a Group of Elements with D3 + +Work with Data in D3 + +Work with Dynamic Data in D3 + +Add Inline Styling to Elements + +Change Styles Based on Data + +Add Classes with D3 + +Update the Height of an Element Dynamically + +Change the Presentation of a Bar Chart + +Learn About SVG in D3 + +Display Shapes with SVG + +Create a Bar for Each Data Point in the Set + +Dynamically Set the Coordinates for Each Bar + +Dynamically Change the Height of Each Bar + +Invert SVG Elements + +Change the Color of an SVG Element + +Add Labels to D3 Elements + +Style D3 Labels + +Add a Hover Effect to a D3 Element + +Add a Tooltip to a D3 Element + +Create a Scatterplot with SVG Circles + +Add Attributes to the Circle Elements + +Add Labels to Scatter Plot Circles + +Create a Linear Scale with D3 + +Set a Domain and a Range on a Scale + +Use the d3.max and d3.min Functions to Find Minimum and Maximum Values in a Dataset + +Use Dynamic Scales + +Use a Pre-Defined Scale to Place Elements + +Add Axes to a Visualization \ No newline at end of file diff --git a/04-data-visualization/json-apis-and-ajax.md b/04-data-visualization/json-apis-and-ajax.md new file mode 100644 index 0000000..6db5ac9 --- /dev/null +++ b/04-data-visualization/json-apis-and-ajax.md @@ -0,0 +1,31 @@ +# Introduction to the JSON APIs and AJAX Challenges # + +Similar to how User Interfaces help people use programs, Application Programming Interfaces (APIs) help programs interact with other programs. APIs are tools that computers use to communicate with one another, in part to send and receive data. You can use API functionality in your page once you understand how to make requests and process data from it. Programmers often use AJAX technologies when working with APIs. + +The term AJAX originated as an acronym for Asynchronous JavaScript And XML. It refers to a group of technologies that make asynchronous requests to a server to transfer data, then load any returned data into the page. An asynchronous process has a couple key properties. The browser does not stop loading a page to wait for the server's response. Also, the browser inserts updated data into part of the page without having to refresh the entire page. + +User experience benefits from asynchronous processes in several ways. Pages load faster since the browser isn't waiting for the server to respond in the middle of a page render. Requests and transfers happen in the background, without interrupting what the user is doing. When the browser receives new data, only the necessary area of the page refreshes. These qualities especially enhance the user experience for single page applications. + +The data transferred between the browser and server is often in a format called JavaScript Object Notation (JSON). JSON resembles JavaScript object literal syntax, except that it's transferred as a string. Once received, it can be converted into an object and used in a script. + +This section covers how to transfer and use data using AJAX technologies with a freeCodeCamp API. + +# Upcoming Lessons # + +Handle Click Events with JavaScript using the onclick property + +Change Text with click Events + +Get JSON with the JavaScript XMLHttpRequest Method + +Access the JSON Data from an API + +Convert JSON Data to HTML + +Render Images from Data Sources + +Pre-filter JSON to Get the Data You Need + +Get Geolocation Data to Find A User's GPS Coordinates + +Post Data with the JavaScript XMLHttpRequest Method \ No newline at end of file diff --git a/05-apis-and-microservices/apis-and-microservices-projects.md b/05-apis-and-microservices/apis-and-microservices-projects.md new file mode 100644 index 0000000..083d248 --- /dev/null +++ b/05-apis-and-microservices/apis-and-microservices-projects.md @@ -0,0 +1,17 @@ +# Introduction to the APIs and Microservices Projects # + +This introduction is a stub + +Help us make it real on [GitHub](https://github.com/freeCodeCamp/learn/tree/master/src/introductions). + +# Upcoming Lessons # + +Timestamp Microservice + +Request Header Parser Microservice + +URL Shortener Microservice + +Exercise Tracker + +File Metadata Microservice \ No newline at end of file diff --git a/05-apis-and-microservices/basic-node-and-express.md b/05-apis-and-microservices/basic-node-and-express.md new file mode 100644 index 0000000..a31817d --- /dev/null +++ b/05-apis-and-microservices/basic-node-and-express.md @@ -0,0 +1,43 @@ +# Introduction to the Basic Node and Express Challenges # + +Node.js is a JavaScript tool that allows developers to write backend (server-side) programs in JavaScript. Node.js comes with a handful of built-in modules—small, independent programs—that help facilitate this purpose. Some of the core modules include: + + +* HTTP: a module that acts as a server + +* File System: a module that reads and modifies files + +* Path: a module for working with directory and file paths + +8 Assertion Testing: a module that checks code against prescribed constraints + +Express, while not included with Node.js, is another module often used with it. Express runs between the server created by Node.js and the frontend pages of a web application. Express also handles an application's routing. Routing directs users to the correct page based on their interaction with the application. + +While there are alternatives to using Express, its simplicity makes it a good place to begin when learning the interaction between a backend powered by Node.js and the frontend. Working on these challenges will involve you writing your code on Glitch on our starter project. After completing each challenge you can copy your public Glitch url (to the homepage of your app) into the challenge screen to test it! Optionally you may choose to write your project on another platform but it must be publicly visible for our testing. +Start this project on Glitch using this link or clone this repository on GitHub! If you use Glitch, remember to save the link to your project somewhere safe! + +# Upcoming Lessons # + +Meet the Node console + +Start a Working Express Server + +Serve an HTML File + +Serve Static Assets + +Serve JSON on a Specific Route + +Use the .env File + +Implement a Root-Level Request Logger Middleware + +Chain Middleware to Create a Time Server + +Get Route Parameter Input from the Client + +Get Query Parameter Input from the Client + +Use body-parser to Parse POST Requests + +Get Data from POST Requests \ No newline at end of file diff --git a/05-apis-and-microservices/managing-packages-with-npm.md b/05-apis-and-microservices/managing-packages-with-npm.md new file mode 100644 index 0000000..24a7097 --- /dev/null +++ b/05-apis-and-microservices/managing-packages-with-npm.md @@ -0,0 +1,36 @@ +# Introduction to the Managing Packages with npm Challenges # + +The Node Package Manager (npm) is a command-line tool used by developers to share and control modules (or packages) of JavaScript code written for use with Node.js. + +When starting a new project, npm generates a package.json file. This file lists the package dependencies for your project. Since npm packages are regularly updated, the package.json file allows you to set specific version numbers for each dependency. This ensures that updates to a package don't break your project. + +npm saves packages in a folder named nodemodules. These packages can be installed in two ways: + + +globally in a root nodemodules folder, accessible by all projects. +locally within a project's own node_modules folder, accessible only to that project. + +Most developers prefer to install packages local to each project to create a separation between the dependencies of different projects. Working on these challenges will involve you writing your code on Glitch on our starter project. After completing each challenge you can copy your public Glitch url (to the homepage of your app) into the challenge screen to test it! Optionally you may choose to write your project on another platform but it must be publicly visible for our testing. +Start this project on Glitch using this link or clone this repository on GitHub! If you use Glitch, remember to save the link to your project somewhere safe! + +# Upcoming Lessons # + +How to Use package.json, the Core of Any Node.js Project or npm Package + +Add a Description to Your package.json + +Add Keywords to Your package.json + +Add a License to Your package.json + +Add a Version to Your package.json + +Expand Your Project with External Packages from npm + +Manage npm Dependencies By Understanding Semantic Versioning + +Use the Tilde-Character to Always Use the Latest Patch Version of a Dependency + +Use the Caret-Character to Use the Latest Minor Version of a Dependency + +Remove a Package from Your Dependencies \ No newline at end of file diff --git a/05-apis-and-microservices/mongodb-and-mongoose.md b/05-apis-and-microservices/mongodb-and-mongoose.md new file mode 100644 index 0000000..fe705c2 --- /dev/null +++ b/05-apis-and-microservices/mongodb-and-mongoose.md @@ -0,0 +1,103 @@ +# Introduction to the MongoDB and Mongoose Challenges # + +MongoDB is a database that stores data records (documents) for use by an application. Mongo is a non-relational, "NoSQL" database. This means Mongo stores all data associated within one record, instead of storing it across many preset tables as in a SQL database. Some benefits of this storage model are: + +* Scalability: by default, non-relational databases are split (or "sharded") across many systems instead of only one. This makes it easier to improve performance at a lower cost. + +* Flexibility: new datasets and properties can be added to a document without the need to make a new table for that data. + +* Replication: copies of the database run in parallel so if one goes down, one of the copies becomes the new primary data source. + +While there are many non-relational databases, Mongo's use of JSON as its document storage structure makes it a logical choice when learning backend JavaScript. Accessing documents and their properties is like accessing objects in JavaScript. + +Mongoose.js is an npm module for Node.js that allows you to write objects for Mongo as you would in JavaScript. This can make is easier to construct documents for storage in Mongo. + +Working on these challenges will involve you writing your code on Glitch on our starter project. After completing each challenge you can copy your public glitch url (to the homepage of your app) into the challenge screen to test it! Optionally you may choose to write your project on another platform but it must be publicaly visible for our testing. + +Start this project on Glitch using this link or clone this repository on GitHub! If you use Glitch, remember to save the link to your project somewhere safe! + +Use mLab to host a free mongodb instance for your projects +For the following challenges, we are going to start using MongoDB to store our data. To simplify the configuration, we are going to use mLab. + +mLab is a MongoDB Database-as-a-Service platform, which basically means that they configure and host the database for you, making it so the only responsibility you have is to populate your database with what matters: data! We are going to show you how to: + +* Create an mLab account. +* Create a free online database. +* Create a new admin user on the database, so you can access it. +* Get the mLab URI, which you will use in your application to connect to your database. +* Create an mLab account +* Let's start by going to mLab. + +Once you open the mLab page, you should sign up for a new account. + +* Click the Sign Up button in the top right corner to open the registration page. +* Fill the registration form with your information and send it. +* You should be logged into your new, unverified account. +* In the top of the screen, a message should appear asking to send you an e-mail for account verification. Send and confirm it. +* After you confirm your account, click Create new in the MongoDB Deployments section. + +# Create a free online database. # + +Now we are going to create the actual database you are going to be using. + +* Choose a Cloud Provider from the available list. + +* Select the Sandbox plan type, which is the only one with no cost, and press Continue. + +* Select a region for your Sandbox, from the available list, and press Continue. + +* Input a name for your database. This name will be used in the URI for your database. After that, press Continue. + +A summary of all your choices should appear, allowing you to change any information provided in the previous steps. Press **Submit Order** to confirm the information. + +# Create a new admin user on the database # + +After you confirmed your configuration, a new sandbox should have been created in the MongoDB Deployments section. We are now going to create an administrator, so you can use the database in your application. + +* Click the newly-created database. + +* Click the Users section. + +* Click the Add database user button. + +* Input an username and password for your administrator. Do not mark it as read-only or you will not be able to add any information to the database with this user. + +# Get the mLab URI # + +Almost done! We have created our new database and created an user to access it, so we just need to find a way to use it in our applications. + +* In your database page, you should see some instructions about connecting using the standard MongoDB URI. + +* The line should look like this mongodb://dbuser:dbpassword@ds0.mlab.com:/. + +* Copy this URI and substitute dbuser and dbpassword with the information for the user you previously created in the database. + +* That's it! This is the URI you will add to your application to connect to your database. Keep this URI safe somewhere, so you can use it later! + +* Feel free to create separate databases for different applications, if they don't have an use for the same data. You just need to create the sandbox, user and obtain the new URI. + +# Upcoming Lessons # + +Install and Set Up Mongoose + +Create a Model + +Create and Save a Record of a Model + +Create Many Records with model.create() + +Use model.find() to Search Your Database + +Use model.findOne() to Return a Single Matching Document from Your Database + +Use model.findById() to Search Your Database By _id + +Perform Classic Updates by Running Find, Edit, then Save + +Perform New Updates on a Document Using model.findOneAndUpdate() + +Delete One Document Using model.findByIdAndRemove + +Delete Many Documents with model.remove() + +Chain Search Query Helpers to Narrow Search Results \ No newline at end of file diff --git a/06-information-security-and-quality-assurance/advanced-node-and-express.md b/06-information-security-and-quality-assurance/advanced-node-and-express.md new file mode 100644 index 0000000..999aa52 --- /dev/null +++ b/06-information-security-and-quality-assurance/advanced-node-and-express.md @@ -0,0 +1,51 @@ +# Introduction to Advanced Node and Express Challenges # + +Authentication is the process or action of verifying the identity of a user or process. Up to this point you have not been able to create an app utilizing this key concept. + +The most common and easiest to use authentication middleware for Node.js is Passport. It is easy to learn, light-weight, and extremely flexible allowing for many strategies, which we will talk about in later challenges. In addition to authentication we will also look at template engines which allow for use of Pug and web sockets which allow for real time communication between all your clients and your server. Working on these challenges will involve you writing your code on Glitch on our starter project. After completing each challenge you can copy your public glitch url (to the homepage of your app) into the challenge screen to test it! Optionally you may choose to write your project on another platform but it must be publicaly visible for our testing. Start this project on Glitch using this link or clone this repository on GitHub! If you use Glitch, remember to save the link to your project somewhere safe. + +# Upcoming Lessons # + +Set up a Template Engine + +Use a Template Engine's Powers + +Set up Passport + +Serialization of a User Object + +Implement the Serialization of a Passport User + +Authentication Strategies + +How to Use Passport Strategies + +Create New Middleware + +How to Put a Profile Together + +Logging a User Out + +Registration of New Users + +Hashing Your Passwords + +Clean Up Your Project with Modules + +Implementation of Social Authentication + +Implementation of Social Authentication II + +Implementation of Social Authentication III + +Set up the Environment + +Communicate by Emitting + +Handle a Disconnect + +Authentication with Socket.IO + +Announce New Users + +Send and Display Chat Messages \ No newline at end of file diff --git a/06-information-security-and-quality-assurance/information-security-and-quality-assurance-projects.md b/06-information-security-and-quality-assurance/information-security-and-quality-assurance-projects.md new file mode 100644 index 0000000..270fb76 --- /dev/null +++ b/06-information-security-and-quality-assurance/information-security-and-quality-assurance-projects.md @@ -0,0 +1,17 @@ +# Introduction to the Information Security and Quality Assurance Projects # + +This introduction is a stub + +Help us make it real on [GitHub](https://github.com/freeCodeCamp/learn/tree/master/src/introductions). + +# Upcoming Lessons # + +Metric-Imperial Converter + +Issue Tracker + +Personal Library + +Stock Price Checker + +Anonymous Message Board \ No newline at end of file diff --git a/06-information-security-and-quality-assurance/information-security-with-helmetjs.md b/06-information-security-and-quality-assurance/information-security-with-helmetjs.md new file mode 100644 index 0000000..d302ecb --- /dev/null +++ b/06-information-security-and-quality-assurance/information-security-with-helmetjs.md @@ -0,0 +1,36 @@ +# Introduction to Information Security with HelmetJS Challenges # + +HelmetJS is a type of middleware for Express-based applications that automatically sets HTTP headers to prevent sensitive information from unintentially being passed between the server and client. While HelmetJS does not account for all situations, it does include support for common ones like Content Security Policy, XSS Filtering, and HTTP Strict Transport Security, among others. HelmetJS can be installed on an Express project from npm, after which each layer of protection can be configured to best fit the project. + +Working on these challenges will involve you writing your code on Glitch on our starter project. After completing each challenge you can copy your public glitch url (to the homepage of your app) into the challenge screen to test it! Optionally you may choose to write your project on another platform but it must be publicaly visible for our testing. +Start this project on Glitch using this link or clone this repository on GitHub! If you use Glitch, remember to save the link to your project somewhere safe! + +# Upcoming Lessons # + +Install and Require Helmet + +Hide Potentially Dangerous Information Using helmet.hidePoweredBy() + +Mitigate the Risk of Clickjacking with helmet.frameguard() + +Mitigate the Risk of Cross Site Scripting (XSS) Attacks with helmet.xssFilter() + +Avoid Inferring the Response MIME Type with helmet.noSniff() + +Prevent IE from Opening Untrusted HTML with helmet.ieNoOpen() + +Ask Browsers to Access Your Site via HTTPS Only with helmet.hsts() + +Disable DNS Prefetching with helmet.dnsPrefetchControl() + +Disable Client-Side Caching with helmet.noCache() + +Set a Content Security Policy with helmet.contentSecurityPolicy() + +Configure Helmet Using the ‘parent’ helmet() Middleware + +Understand BCrypt Hashes + +Hash and Compare Passwords Asynchronously + +Hash and Compare Passwords Synchronously \ No newline at end of file diff --git a/06-information-security-and-quality-assurance/quality-assurance-and-testing-with-chai.md b/06-information-security-and-quality-assurance/quality-assurance-and-testing-with-chai.md new file mode 100644 index 0000000..4671650 --- /dev/null +++ b/06-information-security-and-quality-assurance/quality-assurance-and-testing-with-chai.md @@ -0,0 +1,57 @@ +# Introduction to Quality Assurance with Chai Challenges # + +As your programs become more complex, you need to test them often to make sure any new code you add doesn't break the program's original functionality. Chai is a JavaScript testing library that helps you check that your program still behaves the way you expect it to after you make changes. Using Chai, you can write tests that describe your program's requirements and see if your program meets them. + +Working on these challenges will involve you writing your code on Glitch on our starter project. After completing each challenge you can copy your public glitch url (to the homepage of your app) into the challenge screen to test it! Optionally you may choose to write your project on another platform but it must be publicaly visible for our testing. + +Start this project on Glitch using this link or clone this repository on GitHub! If you use Glitch, remember to save the link to your project somewhere safe! + +# Upcoming Lessons # + +Learn How JavaScript Assertions Work + +Test if a Variable or Function is Defined + +Use Assert.isOK and Assert.isNotOK + +Test for Truthiness + +Use the Double Equals to Assert Equality + +Use the Triple Equals to Assert Strict Equality + +Assert Deep Equality with .deepEqual and .notDeepEqual + +Compare the Properties of Two Elements + +Test if One Value is Below or At Least as Large as Another + +Test if a Value Falls within a Specific Range + +Test if a Value is an Array + +Test if an Array Contains an Item + +Test if a Value is a String + +Test if a String Contains a Substring + +Use Regular Expressions to Test a String + +Test if an Object has a Property + +Test if a Value is of a Specific Data Structure Type + +Test if an Object is an Instance of a Constructor + +Run Functional Tests on API Endpoints using Chai-HTTP + +Run Functional Tests on API Endpoints using Chai-HTTP II + +Run Functional Tests on an API Response using Chai-HTTP III - PUT method + +Run Functional Tests on an API Response using Chai-HTTP IV - PUT method + +Run Functional Tests using a Headless Browser + +Run Functional Tests using a Headless Browser II \ No newline at end of file diff --git a/08-coding-interview-prep/algorithms.md b/08-coding-interview-prep/algorithms.md new file mode 100644 index 0000000..7b69415 --- /dev/null +++ b/08-coding-interview-prep/algorithms.md @@ -0,0 +1,24 @@ +# Introduction to the Coding Interview Algorithms # + +This introduction is a stub + +Help us make it real on [GitHub](https://github.com/freeCodeCamp/learn/tree/master/src/introductions). + +# Upcoming Lessons # + +Find the Symmetric Difference +Inventory Update + +No Repeats Please + +Pairwise + +Implement Bubble Sort + +Implement Selection Sort + +Implement Insertion Sort + +Implement Quick Sort + +Implement Merge Sort \ No newline at end of file diff --git a/08-coding-interview-prep/data-structures.md b/08-coding-interview-prep/data-structures.md new file mode 100644 index 0000000..a7a72f9 --- /dev/null +++ b/08-coding-interview-prep/data-structures.md @@ -0,0 +1,101 @@ +# Introduction to the Coding Interview Data Structure Questions # + +This introduction is a stub + +Help us make it real on [GitHub](https://github.com/freeCodeCamp/learn/tree/master/src/introductions). + +# Upcoming Lessons # + +Typed Arrays + +Learn how a Stack Works + +Create a Stack Class + +Create a Queue Class + +Create a Priority Queue Class + +Create a Circular Queue + +Create a Set Class + +Remove from a Set + +Size of the Set + +Perform a Union on Two Sets + +Perform an Intersection on Two Sets of Data + +Perform a Difference on Two Sets of Data + +Perform a Subset Check on Two Sets of Data + +Create and Add to Sets in ES6 + +Remove items from a set in ES6 + +Use .has and .size on an ES6 Set + +Use Spread and Notes for ES5 Set() Integration + +Create a Map Data Structure + +Create an ES6 JavaScript Map + +Create a Hash Table + +Work with Nodes in a Linked List + +Create a Linked List Class + +Remove Elements from a Linked List + +Search within a Linked List + +Remove Elements from a Linked List by Index + +Add Elements at a Specific Index in a Linked List + +Create a Doubly Linked List + +Reverse a Doubly Linked List + +Find the Minimum and Maximum Value in a Binary Search Tree + +Add a New Element to a Binary Search Tree + +Check if an Element is Present in a Binary Search Tree + +Find the Minimum and Maximum Height of a Binary Search Tree + +Use Depth First Search in a Binary Search Tree + +Use Breadth First Search in a Binary Search Tree + +Delete a Leaf Node in a Binary Search Tree + +Delete a Node with One Child in a Binary Search Tree + +Delete a Node with Two Children in a Binary Search Tree + +Invert a Binary Tree + +Create a Trie Search Tree + +Insert an Element into a Max Heap + +Remove an Element from a Max Heap + +Implement Heap Sort with a Min Heap + +Adjacency List + +Adjacency Matrix + +Incidence Matrix + +Breadth-First Search + +Depth-First Search \ No newline at end of file diff --git a/08-coding-interview-prep/project-euler.md b/08-coding-interview-prep/project-euler.md new file mode 100644 index 0000000..eac6ee2 --- /dev/null +++ b/08-coding-interview-prep/project-euler.md @@ -0,0 +1,967 @@ +# Introduction to the Project Euler Problems # + +This introduction is a stub + +Help us make it real on GitHub. + +# Upcoming Lessons # + +Problem 1: Multiples of 3 and 5 + +Problem 2: Even Fibonacci Numbers + +Problem 3: Largest prime factor + +Problem 4: Largest palindrome product + +Problem 5: Smallest multiple + +Problem 6: Sum square difference + +Problem 7: 10001st prime + +Problem 8: Largest product in a series + +Problem 9: Special Pythagorean triplet + +Problem 10: Summation of primes + +Problem 11: Largest product in a grid + +Problem 12: Highly divisible triangular number + +Problem 13: Large sum + +Problem 14: Longest Collatz sequence + +Problem 15: Lattice paths + +Problem 16: Power digit sum + +Problem 17: Number letter counts + +Problem 18: Maximum path sum I + +Problem 19: Counting Sundays + +Problem 20: Factorial digit sum + +Problem 21: Amicable numbers + +Problem 22: Names scores + +Problem 23: Non-abundant sums + +Problem 24: Lexicographic permutations + +Problem 25: 1000-digit Fibonacci number + +Problem 26: Reciprocal cycles + +Problem 27: Quadratic primes + +Problem 28: Number spiral diagonals + +Problem 29: Distinct powers + +Problem 30: Digit n powers + +Problem 31: Coin sums + +Problem 32: Pandigital products + +Problem 33: Digit cancelling fractions + +Problem 34: Digit factorials + +Problem 35: Circular primes + +Problem 36: Double-base palindromes + +Problem 37: Truncatable primes + +Problem 38: Pandigital multiples + +Problem 39: Integer right triangles + +Problem 40: Champernowne's constant + +Problem 41: Pandigital prime + +Problem 42: Coded triangle numbers + +Problem 43: Sub-string divisibility + +Problem 44: Pentagon numbers + +Problem 45: Triangular, pentagonal, and hexagonal + +Problem 46: Goldbach's other conjecture + +Problem 47: Distinct primes factors + +Problem 48: Self powers + +Problem 49: Prime permutations + +Problem 50: Consecutive prime sum + +Problem 51: Prime digit replacements + +Problem 52: Permuted multiples + +Problem 53: Combinatoric selections + +Problem 54: Poker hands + +Problem 55: Lychrel numbers + +Problem 56: Powerful digit sum + +Problem 57: Square root convergents + +Problem 58: Spiral primes + +Problem 59: XOR decryption + +Problem 60: Prime pair sets + +Problem 61: Cyclical figurate numbers + +Problem 62: Cubic permutations + +Problem 63: Powerful digit counts + +Problem 64: Odd period square roots + +Problem 65: Convergents of e + +Problem 66: Diophantine equation + +Problem 67: Maximum path sum II + +Problem 68: Magic 5-gon ring + +Problem 69: Totient maximum + +Problem 70: Totient permutation + +Problem 71: Ordered fractions + +Problem 72: Counting fractions + +Problem 73: Counting fractions in a range + +Problem 74: Digit factorial chains + +Problem 75: Singular integer right triangles + +Problem 76: Counting summations + +Problem 77: Prime summations + +Problem 78: Coin partitions + +Problem 79: Passcode derivation + +Problem 80: Square root digital expansion + +Problem 81: Path sum: two ways + +Problem 82: Path sum: three ways + +Problem 83: Path sum: four ways + +Problem 84: Monopoly odds + +Problem 85: Counting rectangles + +Problem 86: Cuboid route + +Problem 87: Prime power triples + +Problem 88: Product-sum numbers + +Problem 89: Roman numerals + +Problem 90: Cube digit pairs + +Problem 91: Right triangles with integer coordinates + +Problem 92: Square digit chains + +Problem 93: Arithmetic expressions + +Problem 94: Almost equilateral triangles + +Problem 95: Amicable chains + +Problem 96: Su Doku + +Problem 97: Large non-Mersenne prime + +Problem 98: Anagramic squares + +Problem 99: Largest exponential + +Problem 100: Arranged probability + +Problem 101: Optimum polynomial + +Problem 102: Triangle containment + +Problem 103: Special subset sums: optimum + +Problem 104: Pandigital Fibonacci ends + +Problem 105: Special subset sums: testing + +Problem 106: Special subset sums: meta-testing + +Problem 107: Minimal network + +Problem 108: Diophantine Reciprocals I + +Problem 109: Darts + +Problem 110: Diophantine Reciprocals II + +Problem 111: Primes with runs + +Problem 112: Bouncy numbers + +Problem 113: Non-bouncy numbers + +Problem 114: Counting block combinations I + +Problem 115: Counting block combinations II + +Problem 116: Red, green or blue tiles + +Problem 117: Red, green, and blue tiles + +Problem 118: Pandigital prime sets + +Problem 119: Digit power sum + +Problem 120: Square remainders + +Problem 121: Disc game prize fund + +Problem 122: Efficient exponentiation + +Problem 123: Prime square remainders + +Problem 124: Ordered radicals + +Problem 125: Palindromic sums + +Problem 126: Cuboid layers + +Problem 127: abc-hits + +Problem 128: Hexagonal tile differences + +Problem 129: Repunit divisibility + +Problem 130: Composites with prime repunit property + +Problem 131: Prime cube partnership + +Problem 132: Large repunit factors + +Problem 133: Repunit nonfactors + +Problem 134: Prime pair connection + +Problem 135: Same differences + +Problem 136: Singleton difference + +Problem 137: Fibonacci golden nuggets + +Problem 138: Special isosceles triangles + +Problem 139: Pythagorean tiles + +Problem 140: Modified Fibonacci golden nuggets + +Problem 141: Investigating progressive numbers, n, which are also square + +Problem 142: Perfect Square Collection + +Problem 143: Investigating the Torricelli point of a triangle + +Problem 144: Investigating multiple reflections of a laser beam + +Problem 145: How many reversible numbers are there below one-billion? + +Problem 146: Investigating a Prime Pattern + +Problem 147: Rectangles in cross-hatched grids + +Problem 148: Exploring Pascal's triangle + +Problem 149: Searching for a maximum-sum subsequence + +Problem 150: Searching a triangular array for a sub-triangle having minimum-sum + +Problem 151: Paper sheets of standard sizes: an expected-value problem + +Problem 152: Writing 1/2 as a sum of inverse squares + +Problem 153: Investigating Gaussian Integers + +Problem 154: Exploring Pascal's pyramid + +Problem 155: Counting Capacitor Circuits + +Problem 156: Counting Digits + +Problem 157: Solving the diophantine equation 1/a+1/b= p/10n + +Problem 158: Exploring strings for which only one character comes lexicographically after its neighbour to the left + +Problem 159: Digital root sums of factorisations + +Problem 160: Factorial trailing digits + +Problem 161: Triominoes + +Problem 162: Hexadecimal numbers + +Problem 163: Cross-hatched triangles + +Problem 164: Numbers for which no three consecutive digits have a sum greater than a given value + +Problem 165: Intersections + +Problem 166: Criss Cross + +Problem 167: Investigating Ulam sequences + +Problem 168: Number Rotations + +Problem 169: Exploring the number of different ways a number can be expressed as a sum of powers of 2 + +Problem 170: Find the largest 0 to 9 pandigital that can be formed by concatenating products + +Problem 171: Finding numbers for which the sum of the squares of the digits is a square + +Problem 172: Investigating numbers with few repeated digits + +Problem 173: Using up to one million tiles how many different "hollow" square laminae can be formed? + +Problem 174: Counting the number of "hollow" square laminae that can form one, two, three, ... distinct arrangements + +Problem 175: Fractions involving the number of different ways a number can be expressed as a sum of powers of 2 + +Problem 176: Right-angled triangles that share a cathetus + +Problem 177: Integer angled Quadrilaterals + +Problem 178: Step Numbers + +Problem 179: Consecutive positive divisors + +Problem 180: Rational zeros of a function of three variables + +Problem 181: Investigating in how many ways objects of two different colours can be grouped + +Problem 182: RSA encryption + +Problem 183: Maximum product of parts + +Problem 184: Triangles containing the origin + +Problem 185: Number Mind + +Problem 186: Connectedness of a network + +Problem 187: Semiprimes + +Problem 188: The hyperexponentiation of a number + +Problem 189: Tri-colouring a triangular grid + +Problem 190: Maximising a weighted product + +Problem 191: Prize Strings + +Problem 192: Best Approximations + +Problem 193: Squarefree Numbers + +Problem 194: Coloured Configurations + +Problem 195: Inscribed circles of triangles with one angle of 60 degrees + +Problem 196: Prime triplets + +Problem 197: Investigating the behaviour of a recursively defined sequence + +Problem 198: Ambiguous Numbers + +Problem 199: Iterative Circle Packing + +Problem 200: Find the 200th prime-proof sqube containing the contiguous sub-string "200" + +Problem 201: Subsets with a unique sum + +Problem 202: Laserbeam + +Problem 203: Squarefree Binomial Coefficients + +Problem 204: Generalised Hamming Numbers + +Problem 205: Dice Game + +Problem 206: Concealed Square + +Problem 207: Integer partition equations + +Problem 208: Robot Walks + +Problem 209: Circular Logic + +Problem 210: Obtuse Angled Triangles + +Problem 211: Divisor Square Sum + +Problem 212: Combined Volume of Cuboids + +Problem 213: Flea Circus + +Problem 214: Totient Chains + +Problem 215: Crack-free Walls + +Problem 216: Investigating the primality of numbers of the form 2n2-1 + +Problem 217: Balanced Numbers + +Problem 218: Perfect right-angled triangles + +Problem 219: Skew-cost coding + +Problem 220: Heighway Dragon + +Problem 221: Alexandrian Integers + +Problem 222: Sphere Packing + +Problem 223: Almost right-angled triangles I + +Problem 224: Almost right-angled triangles II + +Problem 225: Tribonacci non-divisors + +Problem 226: A Scoop of Blancmange + +Problem 227: The Chase + +Problem 228: Minkowski Sums + +Problem 229: Four Representations using Squares + +Problem 230: Fibonacci Words + +Problem 231: The prime factorisation of binomial coefficients + +Problem 232: The Race + +Problem 233: Lattice points on a circle + +Problem 234: Semidivisible numbers + +Problem 235: An Arithmetic Geometric sequence + +Problem 236: Luxury Hampers + +Problem 237: Tours on a 4 x n playing board + +Problem 238: Infinite string tour + +Problem 239: Twenty-two Foolish Primes + +Problem 240: Top Dice + +Problem 241: Perfection Quotients + +Problem 242: Odd Triplets + +Problem 243: Resilience + +Problem 244: Sliders + +Problem 245: Coresilience + +Problem 246: Tangents to an ellipse + +Problem 247: Squares under a hyperbola + +Problem 248: Numbers for which Euler’s totient function equals 13! + +Problem 249: Prime Subset Sums + +Problem 250: 250250 + +Problem 251: Cardano Triplets + +Problem 252: Convex Holes + +Problem 253: Tidying up + +Problem 254: Sums of Digit Factorials + +Problem 255: Rounded Square Roots + +Problem 256: Tatami-Free Rooms + +Problem 257: Angular Bisectors + +Problem 258: A lagged Fibonacci sequence + +Problem 259: Reachable Numbers + +Problem 260: Stone Game + +Problem 261: Pivotal Square Sums + +Problem 262: Mountain Range + +Problem 263: An engineers' dream come true + +Problem 264: Triangle Centres + +Problem 265: Binary Circles + +Problem 266: Pseudo Square Root + +Problem 267: Billionaire + +Problem 268: Counting numbers with at least four distinct prime factors less than 100 + +Problem 269: Polynomials with at least one integer root + +Problem 270: Cutting Squares + +Problem 271: Modular Cubes, part 1 + +Problem 272: Modular Cubes, part 2 + +Problem 273: Sum of Squares + +Problem 274: Divisibility Multipliers + +Problem 275: Balanced Sculptures + +Problem 276: Primitive Triangles + +Problem 277: A Modified Collatz sequence + +Problem 278: Linear Combinations of Semiprimes + +Problem 279: Triangles with integral sides and an integral angle + +Problem 280: Ant and seeds + +Problem 281: Pizza Toppings + +Problem 282: The Ackermann function + +Problem 283: Integer sided triangles for which the area/perimeter ratio is integral + +Problem 284: Steady Squares + +Problem 285: Pythagorean odds + +Problem 286: Scoring probabilities + +Problem 287: Quadtree encoding (a simple compression algorithm) + +Problem 288: An enormous factorial + +Problem 289: Eulerian Cycles + +Problem 290: Digital Signature + +Problem 291: Panaitopol Primes + +Problem 292: Pythagorean Polygons + +Problem 293: Pseudo-Fortunate Numbers + +Problem 294: Sum of digits - experience #23 + +Problem 295: Lenticular holes + +Problem 296: Angular Bisector and Tangent + +Problem 297: Zeckendorf Representation + +Problem 298: Selective Amnesia + +Problem 299: Three similar triangles + +Problem 300: Protein folding + +Problem 301: Nim + +Problem 302: Strong Achilles Numbers + +Problem 303: Multiples with small digits + +Problem 304: Primonacci + +Problem 305: Reflexive Position + +Problem 306: Paper-strip Game + +Problem 307: Chip Defects + +Problem 308: An amazing Prime-generating Automaton + +Problem 309: Integer Ladders + +Problem 310: Nim Square + +Problem 311: Biclinic Integral Quadrilaterals + +Problem 312: Cyclic paths on Sierpiński graphs + +Problem 313: Sliding game + +Problem 314: The Mouse on the Moon + +Problem 315: Digital root clocks + +Problem 316: Numbers in decimal expansions + +Problem 317: Firecracker + +Problem 318: 2011 nines + +Problem 319: Bounded Sequences + +Problem 320: Factorials divisible by a huge integer + +Problem 321: Swapping Counters + +Problem 322: Binomial coefficients divisible by 10 + +Problem 323: Bitwise-OR operations on random integers + +Problem 324: Building a tower + +Problem 325: Stone Game II + +Problem 326: Modulo Summations + +Problem 327: Rooms of Doom + +Problem 328: Lowest-cost Search + +Problem 329: Prime Frog + +Problem 330: Euler's Number + +Problem 331: Cross flips + +Problem 332: Spherical triangles + +Problem 333: Special partitions + +Problem 334: Spilling the beans + +Problem 335: Gathering the beans + +Problem 336: Maximix Arrangements + +Problem 337: Totient Stairstep Sequences + +Problem 338: Cutting Rectangular Grid Paper + +Problem 339: Peredur fab Efrawg + +Problem 340: Crazy Function + +Problem 341: Golomb's self-describing sequence + +Problem 342: The totient of a square is a cube + +Problem 343: Fractional Sequences + +Problem 344: Silver dollar game + +Problem 345: Matrix Sum + +Problem 346: Strong Repunits + +Problem 347: Largest integer divisible by two primes + +Problem 348: Sum of a square and a cube + +Problem 349: Langton's ant + +Problem 350: Constraining the least greatest and the greatest least + +Problem 351: Hexagonal orchards + +Problem 352: Blood tests + +Problem 353: Risky moon + +Problem 354: Distances in a bee's honeycomb + +Problem 355: Maximal coprime subset + +Problem 356: Largest roots of cubic polynomials + +Problem 357: Prime generating integers + +Problem 358: Cyclic numbers + +Problem 359: Hilbert's New Hotel + +Problem 360: Scary Sphere + +Problem 361: Subsequence of Thue-Morse sequence + +Problem 362: Squarefree factors + +Problem 363: Bézier Curves + +Problem 364: Comfortable distance + +Problem 365: A huge binomial coefficient + +Problem 366: Stone Game III + +Problem 367: Bozo sort + +Problem 368: A Kempner-like series + +Problem 369: Badugi + +Problem 370: Geometric triangles + +Problem 371: Licence plates + +Problem 372: Pencils of rays + +Problem 373: Circumscribed Circles + +Problem 374: Maximum Integer Partition Product + +Problem 375: Minimum of subsequences + +Problem 376: Nontransitive sets of dice + +Problem 377: Sum of digits, experience 13 + +Problem 378: Triangle Triples + +Problem 379: Least common multiple count + +Problem 380: Amazing Mazes! + +Problem 381: (prime-k) factorial + +Problem 382: Generating polygons + +Problem 383: Divisibility comparison between factorials + +Problem 384: Rudin-Shapiro sequence + +Problem 385: Ellipses inside triangles + +Problem 386: Maximum length of an antichain + +Problem 387: Harshad Numbers + +Problem 388: Distinct Lines + +Problem 389: Platonic Dice + +Problem 390: Triangles with non rational sides and integral area + +Problem 391: Hopping Game + +Problem 392: Enmeshed unit circle + +Problem 393: Migrating ants + +Problem 394: Eating pie + +Problem 395: Pythagorean tree + +Problem 396: Weak Goodstein sequence + +Problem 397: Triangle on parabola + +Problem 398: Cutting rope + +Problem 399: Squarefree Fibonacci Numbers + +Problem 400: Fibonacci tree game + +Problem 401: Sum of squares of divisors + +Problem 402: Integer-valued polynomials + +Problem 403: Lattice points enclosed by parabola and line + +Problem 404: Crisscross Ellipses + +Problem 405: A rectangular tiling + +Problem 406: Guessing Game + +Problem 407: Idempotents + +Problem 408: Admissible paths through a grid + +Problem 409: Nim Extreme + +Problem 410: Circle and tangent line + +Problem 411: Uphill paths + +Problem 412: Gnomon numbering + +Problem 413: One-child Numbers + +Problem 414: Kaprekar constant + +Problem 415: Titanic sets + +Problem 416: A frog's trip + +Problem 417: Reciprocal cycles II + +Problem 418: Factorisation triples + +Problem 419: Look and say sequence + +Problem 420: 2x2 positive integer matrix + +Problem 421: Prime factors of n15+1 + +Problem 422: Sequence of points on a hyperbola + +Problem 423: Consecutive die throws + +Problem 424: Kakuro + +Problem 425: Prime connection + +Problem 426: Box-ball system + +Problem 427: n-sequences + +Problem 428: Necklace of Circles + +Problem 429: Sum of squares of unitary divisors + +Problem 430: Range flips + +Problem 431: Square Space Silo + +Problem 432: Totient sum + +Problem 433: Steps in Euclid's algorithm + +Problem 434: Rigid graphs + +Problem 435: Polynomials of Fibonacci numbers + +Problem 436: Unfair wager + +Problem 437: Fibonacci primitive roots + +Problem 438: Integer part of polynomial equation's solutions + +Problem 439: Sum of sum of divisors + +Problem 440: GCD and Tiling + +Problem 441: The inverse summation of coprime couples + +Problem 442: Eleven-free integers + +Problem 443: GCD sequence + +Problem 444: The Roundtable Lottery + +Problem 445: Retractions A + +Problem 446: Retractions B + +Problem 447: Retractions C + +Problem 448: Average least common multiple + +Problem 449: Chocolate covered candy + +Problem 450: Hypocycloid and Lattice points + +Problem 451: Modular inverses + +Problem 452: Long Products + +Problem 453: Lattice Quadrilaterals + +Problem 454: Diophantine reciprocals III + +Problem 455: Powers With Trailing Digits + +Problem 456: Triangles containing the origin II + +Problem 457: A polynomial modulo the square of a prime + +Problem 458: Permutations of Project + +Problem 459: Flipping game + +Problem 460: An ant on the move + +Problem 461: Almost Pi + +Problem 462: Permutation of 3-smooth numbers + +Problem 463: A weird recurrence relation + +Problem 464: Möbius function and intervals + +Problem 465: Polar polygons + +Problem 466: Distinct terms in a multiplication table + +Problem 467: Superinteger + +Problem 468: Smooth divisors of binomial coefficients + +Problem 469: Empty chairs + +Problem 470: Super Ramvok + +Problem 471: Triangle inscribed in ellipse + +Problem 472: Comfortable Distance II + +Problem 473: Phigital number base + +Problem 474: Last digits of divisors + +Problem 475: Music festival + +Problem 476: Circle Packing II + +Problem 477: Number Sequence Game + +Problem 478: Mixtures + +Problem 479: Roots on the Rise + +Problem 480: The Last Question \ No newline at end of file diff --git a/08-coding-interview-prep/rosetta-code.md b/08-coding-interview-prep/rosetta-code.md new file mode 100644 index 0000000..d3c2b63 --- /dev/null +++ b/08-coding-interview-prep/rosetta-code.md @@ -0,0 +1,181 @@ +# Introduction to the Rosetta Code Problems # + +The Rosetta Code is a list of programming challenges which will help you build your programming skills. + +"The idea is to present solutions to the same task in as many different languages as possible, to demonstrate how languages are similar and different, and to aid a person with a grounding in one approach to a problem in learning another." - Homepage of the Rosetta Code site + +# Upcoming Lessons # + +100 doors + +24 game + +9 billion names of God the integer + +ABC Problem + +Abundant, deficient and perfect number classifications + +Accumulator factory + +Ackermann function + +Align columns + +Amicable pairs + +Averages/Mode + +Averages/Pythagorean means + +Averages/Root mean square + +Babbage problem + +Balanced brackets + +Circles of given radius through two points + +Closest-pair problem + +Combinations + +Comma quibbling + +Compare a list of strings + +Convert seconds to compound duration + +Count occurrences of a substring + +Count the coins + +Cramer's rule + +Date format + +Date manipulation + +Day of the week + +Deal cards for FreeCell + +Deepcopy + +Define a primitive data type + +Department Numbers + +Discordian date + +Element-wise operations + +Emirp primes + +Entropy + +Equilibrium index + +Ethiopian multiplication + +Euler method + +Evaluate binomial coefficients + +Execute a Markov algorithm + +Execute Brain + +Extensible prime generator + +Factorial + +Factors of a Mersenne number + +Factors of an integer + +Farey sequence + +Fibonacci n-step number sequences + +Fibonacci sequence + +Fibonacci word + +Fractran + +Gamma function + +Gaussian elimination + +General FizzBuzz + +Generate lower case ASCII alphabet + +Generator/Exponential + +Gray code + +Greatest common divisor + +Greatest subsequential sum + +Hailstone sequence + +Happy numbers + +Harshad or Niven series + +Hash from two arrays + +Hash join + +Heronian triangles + +Hofstadter Figure-Figure sequences + +Hofstadter Q sequence + +I before E except after C + +IBAN + +Identity matrix + +Iterated digits squaring + +Jaro distance + +JortSort + +Josephus problem + +Sailors, coconuts and a monkey problem + +SEDOLs + +S-Expressions + +Taxicab numbers + +Tokenize a string with escaping + +Topological sort + +Top rank per group + +Towers of Hanoi + +Vector cross product + +Vector dot product + +Word wrap + +Y combinator + +Zeckendorf number representation + +Zhang-Suen thinning algorithm + +Zig-zag matrix \ No newline at end of file diff --git a/08-coding-interview-prep/take-home-projects.md b/08-coding-interview-prep/take-home-projects.md new file mode 100644 index 0000000..b1e8f49 --- /dev/null +++ b/08-coding-interview-prep/take-home-projects.md @@ -0,0 +1,47 @@ +# Introduction to the Coding Interview Take Home Projects # + +This introduction is a stub + +Help us make it real on [GitHub](https://github.com/freeCodeCamp/learn/tree/master/src/introductions). + +# Upcoming Lessons # + +Show the Local Weather + +Build a Wikipedia Viewer + +Use the Twitch JSON API + +Build an Image Search Abstraction Layer + +Build a Tic Tac Toe Game + +Build a Simon Game + +Build a Camper Leaderboard + +Build a Recipe Box + +Build the Game of Life + +Build a Roguelike Dungeon Crawler Game + +P2P Video Chat Application + +Show National Contiguity with a Force Directed Graph + +Map Data Across the Globe + +Manage a Book Trading Club + +Build a Pinterest Clone + +Build a Nightlife Coordination App + +Chart the Stock Market + +Build a Voting App + +Build a Pong Game + +Build a Light-Bright App \ No newline at end of file From 3bf748b651477e2bb8e5f8310743ebea47d2defd Mon Sep 17 00:00:00 2001 From: huluoyang Date: Sun, 22 Jul 2018 06:09:07 +0800 Subject: [PATCH 21/37] modify some file's name equal to it's json name filed --- ...-express-tools.json => advanced-node-and-express.json} | 0 ...ormation-security-and-quality-assurance-projects.json} | 0 ...metjs.json => information-security-with-helmetjs.json} | 0 ....json => quality-assurance-and-testing-with-chai.json} | 0 simple-json.js | 8 ++++---- 5 files changed, 4 insertions(+), 4 deletions(-) rename 06-information-security-and-quality-assurance/{advanced-express-tools.json => advanced-node-and-express.json} (100%) rename 06-information-security-and-quality-assurance/{quality-assurance-and-information-security-projects.json => information-security-and-quality-assurance-projects.json} (100%) rename 06-information-security-and-quality-assurance/{helmetjs.json => information-security-with-helmetjs.json} (100%) rename 06-information-security-and-quality-assurance/{testing-with-chai.json => quality-assurance-and-testing-with-chai.json} (100%) diff --git a/06-information-security-and-quality-assurance/advanced-express-tools.json b/06-information-security-and-quality-assurance/advanced-node-and-express.json similarity index 100% rename from 06-information-security-and-quality-assurance/advanced-express-tools.json rename to 06-information-security-and-quality-assurance/advanced-node-and-express.json diff --git a/06-information-security-and-quality-assurance/quality-assurance-and-information-security-projects.json b/06-information-security-and-quality-assurance/information-security-and-quality-assurance-projects.json similarity index 100% rename from 06-information-security-and-quality-assurance/quality-assurance-and-information-security-projects.json rename to 06-information-security-and-quality-assurance/information-security-and-quality-assurance-projects.json diff --git a/06-information-security-and-quality-assurance/helmetjs.json b/06-information-security-and-quality-assurance/information-security-with-helmetjs.json similarity index 100% rename from 06-information-security-and-quality-assurance/helmetjs.json rename to 06-information-security-and-quality-assurance/information-security-with-helmetjs.json diff --git a/06-information-security-and-quality-assurance/testing-with-chai.json b/06-information-security-and-quality-assurance/quality-assurance-and-testing-with-chai.json similarity index 100% rename from 06-information-security-and-quality-assurance/testing-with-chai.json rename to 06-information-security-and-quality-assurance/quality-assurance-and-testing-with-chai.json diff --git a/simple-json.js b/simple-json.js index e460fba..e823b2b 100644 --- a/simple-json.js +++ b/simple-json.js @@ -39,10 +39,10 @@ var source = [ '05-apis-and-microservices/apis-and-microservices-projects.json', - '06-information-security-and-quality-assurance/helmetjs.json', - '06-information-security-and-quality-assurance/testing-with-chai.json', - '06-information-security-and-quality-assurance/advanced-express-tools.json', - '06-information-security-and-quality-assurance/quality-assurance-and-information-security-projects.json', + '06-information-security-and-quality-assurance/information-security-with-helmetjs.json', + '06-information-security-and-quality-assurance/quality-assurance-and-testing-with-chai.json', + '06-information-security-and-quality-assurance/advanced-node-and-express.json', + '06-information-security-and-quality-assurance/information-security-and-quality-assurance-projects.json', '08-coding-interview-prep/algorithms.json', '08-coding-interview-prep/data-structures.json', From 177b56945095cedaed6167c5ef892bfd8551267a Mon Sep 17 00:00:00 2001 From: huluoyang Date: Sun, 22 Jul 2018 17:13:33 +0800 Subject: [PATCH 22/37] fix some error --- .../basic-html-and-html5.json | 166 +++++++++--------- 1 file changed, 83 insertions(+), 83 deletions(-) diff --git a/01-responsive-web-design/basic-html-and-html5.json b/01-responsive-web-design/basic-html-and-html5.json index 6405690..86f5d31 100644 --- a/01-responsive-web-design/basic-html-and-html5.json +++ b/01-responsive-web-design/basic-html-and-html5.json @@ -8,21 +8,21 @@ "id": "bd7123c8c441eddfaeb5bdef", "title": "Say Hello to HTML Elements", "description": [ - "欢迎来到 FreeCodeCamp 的 HTML 编码挑战，这些挑战将会帮助你逐步掌握 web 开发。", - "HTML 是英文 Hyper Text Markup Language(超文本标记语言)的缩写。首先，使用 HTML 来制作一个简单的网页，你可以直接在本网页内置的代码编辑器中编辑代码。" - "你看到代码编辑器中的 <h1>Hello</h1> 了吗? 那就是一个 HTML 标签，h1 是 header1 的简写，意思是主标题。", + "欢迎来到 freeCodeCamp 的 HTML 编码挑战，这些挑战将会帮助你逐步掌握 Web 开发。", + "HTML 是英文 Hyper Text Markup Language（超文本标记语言）的缩写。首先，使用 HTML 来制作一个简单的网页，你可以直接在本网页内置的代码编辑器中编辑代码。" + "你看到代码编辑器中的 <h1>Hello</h1> 了吗? 那就是一个 HTML 标签。", "大部分 HTML 标签都有一个 开始标记 和一个 结束标记。", "开始标记像这样：<h1>", "结束标记像这样：</h1>", "开始标记和结束标记的唯一区别就是结束标记多了一个 /。", "每个挑战都有测试，任何时候点击运行测试按钮就可以运行测试。如果代码通过测试，将会弹出一个窗口，你就可以提交你的代码并顺利进入下一个挑战。", "
", - "任务：请更改主标题的内容为：Hello World。" + "请把 h1 标签的内容改为：Hello World。" ], "tests": [ { - "text": "主标题的内容应该为：Hello World。", - "testString": "assert.isTrue((/hello(\\s)+world/gi).test($('h1').text()), '主标题的内容应该为：Hello World。');" + "text": "h1 标签的内容应该为：Hello World。", + "testString": "assert.isTrue((/hello(\\s)+world/gi).test($('h1').text()), 'h1 标签的内容应该为：Hello World。');" } ], "challengeType": 0, @@ -44,27 +44,27 @@ "title": "Headline with the h2 Element", "description": [ "在接下来的几节课里，我们将会由浅入深地制作一个关于猫的图片应用。", - "这节课将会引入 h2 标签，h2 是 header2 的简写，意思是二级标题。", + "这节课将会引入 h2 标签。", "这些标签用来告诉浏览器，网站的结构长什么样子。h1 标签通常被用作主标题，h2 标签通常被用作副标题，还有 h3、h4、h5、h6 标签，它们分别用作不同级别的标题。", "
", - "任务：在主标题下面创建一个副标题，标题内容为：CatPhotoApp。" + "在 h1 标签下面创建一个 h2 标签，标签内容为：CatPhotoApp。" ], "tests": [ { - "text": "创建一个副标题。", - "testString": "assert(($(\"h2\").length > 0), '创建一个副标题。');" + "text": "创建一个 h2 标签。", + "testString": "assert(($(\"h2\").length > 0), '创建一个 h2 标签。');" }, { - "text": "副标题应该有结束标记。", - "testString": "assert(code.match(/<\\/h2>/g) && code.match(/<\\/h2>/g).length === code.match(/

/g).length, '副标题应该有结束标记。');" + "text": "h2 标签应该有结束标记。", + "testString": "assert(code.match(/<\\/h2>/g) && code.match(/<\\/h2>/g).length === code.match(/

/g).length, 'h2 标签应该有结束标记。');" }, { - "text": "副标题的内容应该为：CatPhotoApp。", - "testString": "assert.isTrue((/cat(\\s)?photo(\\s)?app/gi).test($(\"h2\").text()), '副标题的内容应该为：CatPhotoApp。');" + "text": "h2 标签的内容应该为：CatPhotoApp。", + "testString": "assert.isTrue((/cat(\\s)?photo(\\s)?app/gi).test($(\"h2\").text()), 'h2 标签的内容应该为：CatPhotoApp。');" }, { - "text": "主标题的内容应该为：Hello World。", - "testString": "assert.isTrue((/hello(\\s)+world/gi).test($(\"h1\").text()), '主标题的内容应该为：Hello World。');" + "text": "h1 标签的内容应该为：Hello World。", + "testString": "assert.isTrue((/hello(\\s)+world/gi).test($(\"h1\").text()), '主标题的内容应该为：Hello World。');" } ], "challengeType": 0, @@ -89,20 +89,20 @@ "你可以像这样创建一个段落：", "<p>I'm a p tag!</p>", "
", - "任务：在副标题下面新增一个段落，段落内容是：Hello Paragraph。" + "在 h2 标签下面新增一个 p 标签，标签内容是：Hello Paragraph。" ], "tests": [ { - "text": "创建一个段落。", - "testString": "assert(($(\"p\").length > 0), '创建一个段落。');" + "text": "创建一个 p 标签。", + "testString": "assert(($(\"p\").length > 0), '创建一个 p 标签。');" }, { - "text": "段落的内容应该为：Hello Paragraph。", - "testString": "assert.isTrue((/hello(\\s)+paragraph/gi).test($(\"p\").text()), '段落的内容应该为：Hello Paragraph。');" + "text": "p 标签的内容应该为：Hello Paragraph。", + "testString": "assert.isTrue((/hello(\\s)+paragraph/gi).test($(\"p\").text()), 'p 标签的内容应该为：Hello Paragraph。');" }, { - "text": "段落应该有结束标记。", - "testString": "assert(code.match(/<\\/p>/g) && code.match(/<\\/p>/g).length === code.match(/

p 标签应该有结束标记。", + "testString": "assert(code.match(/<\\/p>/g) && code.match(/<\\/p>/g).length === code.match(/

p 标签应该有结束标记。');" } ], "challengeType": 0, @@ -124,16 +124,16 @@ "id": "bad87fee1348bd9aedf08833", "title": "Fill in the Blank with Placeholder Text", "description": [ - "Web开发者通常用 lorem ipsum text 来做占位符，占位符就是占着位置的一些文字，没有实际意义。", + "Web 开发者通常用 lorem ipsum text 来做占位符，占位符就是占着位置的一些文字，没有实际意义。", "为什么叫 lorem ipsum text 呢?是因为 lorem ipsum 是古罗马西塞罗谚语的前两个单词。", - "从公元16世纪开始lorem ipsum text就被当做占位符了，这种传统延续到了互联网时代。于此同时，孙悟空也在五指山下压了500年，然后就进化成程序猿了，是不是很巧合，哈哈。", + "从公元16世纪开始 lorem ipsum text 就被当做占位符了，这种传统延续到了互联网时代。于此同时，孙悟空也在五指山下被压了500年，然后就进化成程序猿了，是不是很巧合。^_^", "

", - "任务：把段落的内容更换为：Monkey code 猴哥猴哥，你真了不得，金箍棒在手，问世间谁是英雄。" + "把 p 标签的内容更换为：Monkey code 猴哥猴哥，你真了不得，金箍棒在手，问世间谁是英雄。" ], "tests": [ { - "text": "段落必须包含 Monkey code。", - "testString": "assert.isTrue((/Monkey(\\s)+code/gi).test($(\"p\").text()), '段落必须包含 Monkey code。');" + "text": "p 标签的内容必须包含 Monkey code。", + "testString": "assert.isTrue((/Monkey(\\s)+code/gi).test($(\"p\").text()), 'p 标签的内容必须包含 Monkey code。');" } ], "challengeType": 0, @@ -158,24 +158,24 @@ "id": "bad87fee1348bd9aedf08802", "title": "Uncomment HTML", "description": [ - "注释是用来给代码添加一些说明，方便团队合作或日后自己查看，但又不影响代码本身。", + "注释的作用是给代码添加一些说明，方便团队合作或日后自己查看，但又不影响代码本身。", "注释也可以用来在不删除代码的前提下，让代码不起作用。", "在 HTML 中，注释的开始标记是 <!--，结束标记是 -->。", "
", - "任务：现在我们反其道而行之，干掉主标题、副标题、段落的注释。" + "现在我们反其道而行之，干掉 h1 标签、h2 标签、p 标签的注释。" ], "tests": [ { - "text": "确保网页中能看到主标题。", - "testString": "assert($(\"h1\").length > 0, '确保网页中能看到主标题。');" + "text": "确保网页中能看到 h1 标签。", + "testString": "assert($(\"h1\").length > 0, '确保网页中能看到 h1 标签。');" }, { - "text": "确保网页中能看到副标题。", - "testString": "assert($(\"h2\").length > 0, '确保网页中能看到副标题。');" + "text": "确保网页中能看到 h2 标签。", + "testString": "assert($(\"h2\").length > 0, '确保网页中能看到 h2 标签。');" }, { - "text": "确保网页中能看到段落。", - "testString": "assert($(\"p\").length > 0, '确保网页中能看到段落。');" + "text": "确保网页中能看到 p 标签。", + "testString": "assert($(\"p\").length > 0, '确保网页中能看到 p 标签。');" }, { "text": "确保删除了注释的结束标记 -->", @@ -206,31 +206,31 @@ "id": "bad87fee1348bd9aedf08804", "title": "Comment out HTML", "description": [ - "记住：注释的开始标记是 <!--，结束标记是 -->。", - "现在你需要在副标题前终止注释。", + "记住：注释的开始标记是 <!--，结束标记是 -->。", + "现在你需要在 h2 标签前终止注释。", "
", - "任务：主标题和段落都注释掉，副标题留着。" + "任务：h1 标签和 p 标签都注释掉，h2 标签保留。" ], "tests": [ { - "text": "注释掉主标题，这样它就从网页上消失了。", - "testString": "assert(($(\"h1\").length === 0), '注释掉主标题，这样它就从网页上消失了。');" + "text": "注释掉 h1 标签，这样它就从网页上消失了。", + "testString": "assert(($(\"h1\").length === 0), '注释掉 h1 标签，这样它就从网页上消失了。');" }, { - "text": "副标题保持原样，这样网页上还能看到它。", - "testString": "assert(($(\"h2\").length > 0), '副标题保持原样，这样网页上还能看到它。');" + "text": "h2 标签保持原样，这样网页上还能看到它。", + "testString": "assert(($(\"h2\").length > 0), 'h2 标签保持原样，这样网页上还能看到它。');" }, { - "text": "注释掉段落，这样它就从网页上消失了。", - "testString": "assert(($(\"p\").length === 0), '注释掉段落，这样它就从网页上消失了。);" + "text": "注释掉 p 标签，这样它就从网页上消失了。", + "testString": "assert(($(\"p\").length === 0), '注释 p 标签，这样它就从网页上消失了。);" }, { - "text": "确保每一个注释都以-->结尾。", + "text": "确保每一个注释都以 --> 结尾。", "testString": "assert(code.match(/[^fc]-->/g).length > 1, '确保每一个注释都以-->结尾。');" }, { - "text": "不要更改主标题、副标题、段落的顺序。", - "testString": "assert((code.match(/<([a-z0-9]){1,2}>/g)[0]===\"

\" && code.match(/<([a-z0-9]){1,2}>/g)[1]===\"

\" && code.match(/<([a-z0-9]){1,2}>/g)[2]===\"

\") , '不要更改主标题、副标题、段落的顺序。');" + "text": "不要更改 h1 标签、h2 标签、p 标签的顺序。", + "testString": "assert((code.match(/<([a-z0-9]){1,2}>/g)[0]===\"

\" && code.match(/<([a-z0-9]){1,2}>/g)[1]===\"

\" && code.match(/<([a-z0-9]){1,2}>/g)[2]===\"

\") , '不要更改 h1 标签、h2 标签、p 标签的顺序。');" } ], "challengeType": 0, @@ -260,20 +260,20 @@ "手机的屏幕空间是有限的。", "让我们删除不必要的标签，开始设计我们的 CatPhotoApp。", "

", - "任务：删除主标题以简化视图。" + "任务：删除 h1 标签以简化视图。" ], "tests": [ { - "text": "删除主标题。", - "testString": "assert(($(\"h1\").length == 0), '删除主标题。');" + "text": "删除 h1 标签。", + "testString": "assert(($(\"h1\").length == 0), '删除 h1 标签。');" }, { - "text": "保留副标题。", - "testString": "assert(($(\"h2\").length > 0), '保留副标题。');" + "text": "保留 h2 标签。", + "testString": "assert(($(\"h2\").length > 0), '保留 h2 标签。');" }, { - "text": "保留段落。", - "testString": "assert(($(\"p\").length > 0), '保留段落。');" + "text": "保留 p 标签。", + "testString": "assert(($(\"p\").length > 0), '保留 p 标签。');" } ], "challengeType": 0, @@ -298,10 +298,10 @@ "id": "bad87fee1348bd9aecf08801", "title": "Introduction to HTML5 Elements", "description": [ - "HTML5 引入了很多更具描述性的 HTML 标记，例如：header、footer、nav、video、article、section 等等。", - "这些标记让 HTML 更易读，同时对搜索引擎优化和可访问性更友好。", - "main 标记让搜索引擎和其他开发者瞬间就能找到网页的主要内容。", - "Note
在后面的应用可访问性课程中我们会接触到更多新的 HTML5 标记，以及明白它们的用处。", + "HTML5 引入了很多更具描述性的 HTML 标签，例如：header、footer、nav、video、article、section 等等。", + "这些标签让 HTML 更易读，同时有助于搜索引擎优化和无障碍访问。", + "main 标签让搜索引擎和开发者瞬间就能找到网页的主要内容。", + "注意
在后面的应用无障碍课程中我们会接触到更多新的 HTML5 标签，以及明白它们的用处。", "
", "在现有的段落下创建一个新的段落，段落内容为：养猫有的时候，就是介于爱与恨之间，当你钦羡别人萌宠这么可爱的时候，你一定没有想过，猫咪会到处掉毛，甚至会屯老鼠，啃鞋子，用爪子爬门，你不理它，它就挠你，你要对它发脾气，它会比你更来劲。所以，猫咪慎入，没有一定的准备，切勿随便去侍养动物。它们一旦认定你了，你就是它们的主人，如果你抛弃它们，它们必定心中重创。", "在第一个段落前添加
，在第二个段落后添加
。" @@ -324,8 +324,8 @@ "testString": "assert($('main').length === 1, '代码中应该包含 main 标签。');" }, { - "text": "main 标签应有两个段落作为它的子标签。", - "testString": "assert($(\"main\").children(\"p\").length === 2, 'main 标签应有两个段落作为它的子标签。');" + "text": "main 标签应有两个 p 标签作为它的子标签。", + "testString": "assert($(\"main\").children(\"p\").length === 2, 'main 标签应有两个 p 标签作为它的子标签。');" }, { "text": "开始标记
应位于第一个段落之前。", @@ -356,11 +356,11 @@ "id": "bad87fee1348bd9aedf08812", "title": "Add Images to Your Website", "description": [ - "用 img 标签来为你的网站添加图片，其中 src 属性指向一个图片的具体地址。", + "用 img 标签来为你的网站添加图片，其中 src 属性指向一个图片的地址。", "举例如下：", "<img src=\"https://www.your-image-source.com/your-image.jpg\">", "注意：img 标签是自关闭标签，不需要结束标记。", - "所有的 img 标签必须有 alt 属性，alt 属性的文本是当图片无法加载时显示的替代文本，对于通过屏幕阅读器来浏览网页的用户非常重要。", + "所有的 img 标签必须有 alt 属性，alt 属性的文本是当图片无法加载时显示的替代文本，这对于通过屏幕阅读器来浏览网页的用户非常重要。", "注意：如果图片是纯装饰性的，用一个空的 alt 是最佳实践。", "理想情况下，alt属性不应该包含特殊字符，除非需要。", "让我们给上面例子的 img 添加 alt 属性。", @@ -368,7 +368,7 @@ "
", "让我们给网站添加图片：", "在 h2 标签前，插入一个 img 标签", - "现在设置 src 属性指向一个 url 地址：", + "现在设置 src 属性指向这个地址：", "https://bit.ly/fcc-relaxing-cat", "最后不要忘记给图片添加一个 alt 文本。", ], @@ -412,24 +412,24 @@ "title": "Link to External Pages with Anchor Elements", "description": [ "你可以用锚点（Anchor，简写 a）来实现网页间的跳转。", - "锚点需要一个href属性指向目的地，它还需要有锚点文本，例如：", + "锚点需要一个 href 属性指向目的地，它还需要有锚点文本，例如：", "<a href=\"https://freecodecamp.org\">this links to freecodecamp.org</a>", "然后你的浏览器会显示一个可以点击的文本，点击该文本就会跳转到 https://www.freecodecamp.org。", "
", - "创建一个 a 标签，href 属性指向 http://freecatphotoapp.com ，锚点文本为：cat photos。" + "创建一个 a 标签，href 属性为 http://freecatphotoapp.com ，锚点文本为：cat photos。" ], "tests": [ { - "text": "a 标签的锚点文本应为：cat photos。", - "testString": "assert((/cat photos/gi).test($(\"a\").text()), 'a 标签的锚点文本应为：cat photos。');" + "text": "a 标签的锚点文本应为：cat photos。", + "testString": "assert((/cat photos/gi).test($(\"a\").text()), 'a 标签的锚点文本应为：cat photos。');" }, { "text": "a 标签的 href 属性应为：\"http://freecatphotoapp.com\"。", "testString": "assert(/http:\\/\\/(www\\.)?freecatphotoapp\\.com/gi.test($(\"a\").attr(\"href\")), 'a 标签的 href 属性应为：\"http://freecatphotoapp.com\"。');" }, { - "text": "确保a 标签有结束标记。", - "testString": "assert(code.match(/<\\/a>/g) && code.match(/<\\/a>/g).length === code.match(/a 标签有结束标记。');" + "text": "确保 a 标签有结束标记。", + "testString": "assert(code.match(/<\\/a>/g) && code.match(/<\\/a>/g).length === code.match(/a 标签有结束标记。');" } ], "challengeType": 0, @@ -460,14 +460,14 @@ "title": "Link to Internal Sections of a Page with Anchor Elements", "description": [ "锚点同样也可以用来在网页内不同区域的跳转。", - "通过给 href 属性赋值为一个哈希符号 # 加上你想跳转的标签对应的 id 属性值来创建一个内部链接。 id 是用来描述页面唯一标签的属性。", + "用一个井号 # 加上你想跳转到的区域对应的 id 属性值，通过把它作为锚点的 href 属性值来创建一个内部链接。 id 是用来描述网页元素的一个属性，它的值在整个页面中唯一。", "下面是用来创建内部锚点链接的例子：", "
<a href=\"#contacts-header\">Contacts</a>
...
<h2 id=\"contacts-header\">Contacts</h2>
", - "当用户点击了 Contacts链接，页面就会跳转到网页的 Contacts 区域。", + "当用户点击了 Contacts 链接，页面就会跳转到网页的 Contacts 区域。", "
", - "通过修改 href 属性为 #footer 来更改外部链接为内部链接，同时修改文本 cat photos 为 Jump to Bottom。", - "移除 target=\"_blank\" 属性避免点击链接会跳转到新的标签页。", - "然后添加一个 <footer> 标签，它的 id 值为 footer。" + "通过修改 href 属性为 #footer 来更改外部链接为内部链接，同时修改文本 cat photos 为 Jump to Bottom。", + "移除 target=\"_blank\" 属性避免点击链接会打开新的标签页。", + "然后添加一个 <footer> 标签，它的 id 值为 footer。" ], "tests": [ { @@ -487,8 +487,8 @@ "testString": "assert(typeof $('a').eq(0).attr('target') == typeof undefined || $('a').eq(0).attr('target') == true, 'a 标签不应该有 target 属性。');" }, { - "text": "a 标签的文本应为 Jump to Bottom。", - "testString": "assert($('a').eq(0).text().match(/Jump to Bottom/gi), 'a 标签的文本应为 Jump to Bottom。');" + "text": "a 标签的文本应为 Jump to Bottom。", + "testString": "assert($('a').eq(0).text().match(/Jump to Bottom/gi), 'a 标签的文本应为 Jump to Bottom。');" }, { "text": "footer 标签的 id 属性应为 \"footer\"。", @@ -528,14 +528,14 @@ "你可以在其他文本标签内嵌套链接。You can nest links within other text elements.", "
<p>
Here's a <a target=\"_blank\" href=\"http://freecodecamp.org\"> link to freecodecamp.org</a> for you to follow.
</p>
", "让我们来分解这个例子：", - "通常，文本是被包裹在 p 标签内:
<p> Here's a ... for you to follow. </p>", - "接下来是 anchor 标签 <a> (需要结束标记 </a>):
<a> ... </a>", - "target 是锚点标签的一个属性，它指定了会以什么方式来打开链接。 属性值 \"_blank\" 指定了会新开一个标签页来打开链接", + "通常，文本是被包裹在 p 标签内：
<p> Here's a ... for you to follow. </p>", + "接下来是 anchor 标签 <a>（需要结束标记 </a>）:
<a> ... </a>", + "target 是锚点标签的一个属性，它指定了会以什么方式来打开链接，属性值 \"_blank\" 的意思是链接会在新标签页打开。", "href 是锚点标签的另一个属性：它指定了链接的 URL 地址：
<a href=\"http://freecodecamp.org\"> ... </a>", "锚点标签内的文本：\"link to freecodecamp.org\"，会显示为一个可以点击的链接：
<a href=\" ... \">link to freecodecamp.org</a>", "例子的最后输出将会是这样：

Here's a link to freecodecamp.org for you to follow.

", "
", - "现在用一个新的 p 标签来包裹现存的 a 标签（紧挨着 main标签)。新段落的文本为：View more cat photos，其中 \"cat photos\" 是一个链接，其他是纯文本。" + "现在用一个新的 p 标签来包裹现存的 a 标签（必须放在 main 标签之后才行)。新段落的文本为：View more cat photos，其中 \"cat photos\" 是一个链接，其他是纯文本。" ], "tests": [ { @@ -555,8 +555,8 @@ "testString": "assert(($(\"a[href=\\\"http://freecatphotoapp.com\\\"]\").parent().is(\"p\") || $(\"a[href=\\\"http://www.freecatphotoapp.com\\\"]\").parent().is(\"p\")), '锚点应嵌套在新段落内。');" }, { - "text": "段落的文本应为：View more (记得 more 后面有一个空格)。", - "testString": "assert(($(\"a[href=\\\"http://freecatphotoapp.com\\\"]\").parent().text().match(/View\\smore\\s/gi) || $(\"a[href=\\\"http://www.freecatphotoapp.com\\\"]\").parent().text().match(/View\\smore\\s/gi)), '段落的文本应为：View more (记得 more 后面有一个空格)。');" + "text": "段落的文本应为：View more （记得 more 后面有一个空格）。", + "testString": "assert(($(\"a[href=\\\"http://freecatphotoapp.com\\\"]\").parent().text().match(/View\\smore\\s/gi) || $(\"a[href=\\\"http://www.freecatphotoapp.com\\\"]\").parent().text().match(/View\\smore\\s/gi)), '段落的文本应为：View more （记得 more 后面有一个空格）。');" }, { "text": "锚点的文本不应该为：View more。", From f90315b23744b5900ac3683192dcb05d213111d9 Mon Sep 17 00:00:00 2001 From: huluoyang Date: Tue, 24 Jul 2018 10:30:28 +0800 Subject: [PATCH 23/37] fix some typo error (#18) --- .../applied-accessibility.md | 8 +- .../applied-visual-design.md | 1 + 01-responsive-web-design/basic-css.md | 90 ++++++++++++++++++- .../basic-html-and-html5.json | 4 +- .../responsive-web-design-principles.md | 2 +- .../responsive-web-design-projects.md | 26 ++++-- 6 files changed, 115 insertions(+), 16 deletions(-) diff --git a/01-responsive-web-design/applied-accessibility.md b/01-responsive-web-design/applied-accessibility.md index 1aa0cb7..d455128 100644 --- a/01-responsive-web-design/applied-accessibility.md +++ b/01-responsive-web-design/applied-accessibility.md @@ -3,13 +3,11 @@ "Accessibility" generally means having web content and a user interface that can be understood, navigated, and interacted with by a broad audience. This includes people with visual, auditory, mobility, or cognitive disabilities. Websites should be open and accessible to everyone, regardless of a user's abilities or resources. Some users rely on assistive technology such as a screen reader or voice recognition software. Other users may be able to navigate through a site only using a keyboard. Keeping the needs of various users in mind when developing your project can go a long way towards creating an open web. Here are three general concepts this section will explore throughout the following challenges: +* have well-organized code that uses appropriate markup -1、have well-organized code that uses appropriate markup - -2、ensure text alternatives exist for non-text and visual content - -3、create an easily-navigated page that's keyboard-friendly +* ensure text alternatives exist for non-text and visual content +* create an easily-navigated page that's keyboard-friendly Having accessible web content is an ongoing challenge. A great resource for your projects going forward is the W3 Consortium's Web Content Accessibility Guidelines (WCAG). They set the international standard for accessibility and provide a number of criteria you can use to check your work. diff --git a/01-responsive-web-design/applied-visual-design.md b/01-responsive-web-design/applied-visual-design.md index d66b592..305d863 100644 --- a/01-responsive-web-design/applied-visual-design.md +++ b/01-responsive-web-design/applied-visual-design.md @@ -7,6 +7,7 @@ At a basic level, most web content provides a user with information. The visual This section covers some of the basic tools developers use to create their own visual designs. # Upcoming Lessons # + Create Visual Balance Using the text-align Property Adjust the Width of an Element Using the width Property diff --git a/01-responsive-web-design/basic-css.md b/01-responsive-web-design/basic-css.md index 9bf6819..9b27984 100644 --- a/01-responsive-web-design/basic-css.md +++ b/01-responsive-web-design/basic-css.md @@ -14,4 +14,92 @@ Note that CSS is case-sensitive so be careful with your capitalization. CSS has There are three main ways to apply CSS styling. You can apply inline styles directly to HTML elements with the `style` attribute. Alternatively, you can place CSS rules within `style` tags in an HTML document. Finally, you can write CSS rules in an external style sheet, then reference that file in the HTML document. Even though the first two options have their use cases, most developers prefer external style sheets because they keep the styles separate from the HTML elements. This improves the readability and reusability of your code. The idea behind CSS is that you can use a selector to target an HTML element in the DOM (Document Object Model) and then apply a variety of attributes to that element to change the way it is displayed on the page. -In this section, you'll see how adding CSS styles to the elements of your CatPhotoApp can change it from simple text to something more. \ No newline at end of file +In this section, you'll see how adding CSS styles to the elements of your CatPhotoApp can change it from simple text to something more. + +# Upcoming Lessons # + +Change the Color of Text + +Use CSS Selectors to Style Elements + +Use a CSS Class to Style an Element + +Style Multiple Elements with a CSS Class + +Change the Font Size of an Element + +Set the Font Family of an Element + +Import a Google Font + +Specify How Fonts Should Degrade + +Size Your Images + +Add Borders Around Your Elements + +Add Rounded Corners with border-radius + +Make Circular Images with a border-radius + +Give a Background Color to a div Element + +Set the id of an Element + +Use an id Attribute to Style an Element + +Adjust the Padding of an Element + +Adjust the Margin of an Element + +Add a Negative Margin to an Element + +Add Different Padding to Each Side of an Element + +Add Different Margins to Each Side of an Element + +Use Clockwise Notation to Specify the Padding of an Element + +Use Clockwise Notation to Specify the Margin of an Element + +Use Attribute Selectors to Style Elements + +Understand Absolute versus Relative Units + +Style the HTML Body Element + +Inherit Styles from the Body Element + +Prioritize One Style Over Another + +Override Styles in Subsequent CSS + +Override Class Declarations by Styling ID Attributes + +Override Class Declarations with Inline Styles + +Override All Other Styles by using Important + +Use Hex Code for Specific Colors + +Use Hex Code to Mix Colors + +Use Abbreviated Hex Code + +Use RGB values to Color Elements + +Use RGB to Mix Colors + +Use CSS Variables to change several elements at once + +Create a custom CSS Variable + +Use a custom CSS Variable + +Attach a Fallback value to a CSS Variable + +Cascading CSS variables + +Change a variable for a specific area + +Use a media query to change a variable \ No newline at end of file diff --git a/01-responsive-web-design/basic-html-and-html5.json b/01-responsive-web-design/basic-html-and-html5.json index 86f5d31..3df7a2a 100644 --- a/01-responsive-web-design/basic-html-and-html5.json +++ b/01-responsive-web-design/basic-html-and-html5.json @@ -9,7 +9,7 @@ "title": "Say Hello to HTML Elements", "description": [ "欢迎来到 freeCodeCamp 的 HTML 编码挑战，这些挑战将会帮助你逐步掌握 Web 开发。", - "HTML 是英文 Hyper Text Markup Language（超文本标记语言）的缩写。首先，使用 HTML 来制作一个简单的网页，你可以直接在本网页内置的代码编辑器中编辑代码。" + "HTML 是英文 Hyper Text Markup Language（超文本标记语言）的缩写。首先，使用 HTML 来制作一个简单的网页，你可以直接在本网页内置的代码编辑器中编辑代码。", "你看到代码编辑器中的 <h1>Hello</h1> 了吗? 那就是一个 HTML 标签。", "大部分 HTML 标签都有一个 开始标记 和一个 结束标记。", "开始标记像这样：<h1>", @@ -370,7 +370,7 @@ "在 h2 标签前，插入一个 img 标签", "现在设置 src 属性指向这个地址：", "https://bit.ly/fcc-relaxing-cat", - "最后不要忘记给图片添加一个 alt 文本。", + "最后不要忘记给图片添加一个 alt 文本。" ], "tests": [ { diff --git a/01-responsive-web-design/responsive-web-design-principles.md b/01-responsive-web-design/responsive-web-design-principles.md index e768b69..b7cf4fb 100644 --- a/01-responsive-web-design/responsive-web-design-principles.md +++ b/01-responsive-web-design/responsive-web-design-principles.md @@ -1,4 +1,4 @@ -# Introduction to the Responsive Web Design Challenges # +# Introduction to the Responsive Web Design Principles # Today, there are many types of devices that can access the web. They range from large desktop computers to small mobile phones. These devices have different screen sizes, resolutions, and processing power. Responsive Web Design is an approach to designing web content that responds to the constraints of different devices. The page structure and CSS rules should be flexible to accommodate these differences. In general, design the page's CSS to your target audience. If you expect most of your traffic to be from mobile users, take a 'mobile-first' approach. Then add conditional rules for larger screen sizes. If your visitors are desktop users, then design for larger screens with conditional rules for smaller sizes. CSS gives you the tools to write different style rules, then apply them depending on the device displaying the page. This section will cover the basic ways to use CSS for Responsive Web Design. diff --git a/01-responsive-web-design/responsive-web-design-projects.md b/01-responsive-web-design/responsive-web-design-projects.md index e768b69..b5e154d 100644 --- a/01-responsive-web-design/responsive-web-design-projects.md +++ b/01-responsive-web-design/responsive-web-design-projects.md @@ -1,13 +1,25 @@ -# Introduction to the Responsive Web Design Challenges # +# Introduction to the Responsive Web Design Projects # -Today, there are many types of devices that can access the web. They range from large desktop computers to small mobile phones. These devices have different screen sizes, resolutions, and processing power. Responsive Web Design is an approach to designing web content that responds to the constraints of different devices. The page structure and CSS rules should be flexible to accommodate these differences. In general, design the page's CSS to your target audience. If you expect most of your traffic to be from mobile users, take a 'mobile-first' approach. Then add conditional rules for larger screen sizes. If your visitors are desktop users, then design for larger screens with conditional rules for smaller sizes. CSS gives you the tools to write different style rules, then apply them depending on the device displaying the page. This section will cover the basic ways to use CSS for Responsive Web Design. +Time to put your newly learnt skills to work! By working on projects you would have the opportunity of applying all the skills, principles and concepts you have learnt so far HTML, CSS, Visual Design, Accessibility, etc. -# Upcoming Lessons # +In this section you get the chance to: -Create a Media Query +* Build a Tribute Page +* Build a Survey Form +* Build a Product Landing Page +* Build a Technical Documentation Page +* Build a Personal Portfolio Webpage -Make an Image Responsive +By the end of this, you would have 5 responsive websites under your belt that you can show off to friends, family, employers, etc. Have fun and remember to use the Read-Search-Ask method if you get stuck. -Use a Retina Image for Higher Resolution Displays +# Upcoming Lessons # -Make Typography Responsive \ No newline at end of file +Build a Tribute Page + +Build a Survey Form + +Build a Product Landing Page + +Build a Technical Documentation Page + +Build a Personal Portfolio Webpage \ No newline at end of file From 37fba7c8bd709c7665b2f150ca7126ad562abbc0 Mon Sep 17 00:00:00 2001 From: Xing Liu Date: Tue, 24 Jul 2018 23:44:08 -0700 Subject: [PATCH 24/37] Add .gitignore, including patterns for OS, Vim, VSCode, Jetbrains and (#14) this's good. --- .gitignore | 26 ++++++++++++++++++++++++++ 1 file changed, 26 insertions(+) create mode 100644 .gitignore diff --git a/.gitignore b/.gitignore new file mode 100644 index 0000000..804a9d6 --- /dev/null +++ b/.gitignore @@ -0,0 +1,26 @@ +# OS generated files +.DS_Store +.DS_Store? +._* +.Spotlight-V100 +.Trashes +ehthumbs.db +Thumbs.db + +# Vim +[._]*.s[a-v][a-z] +[._]*.sw[a-p] +[._]s[a-rt-v][a-z] +[._]ss[a-gi-z] +[._]sw[a-p] +Session.vim + +# VSCode +.vscode/* + +# Jetbrains +.idea/ + +# Sublime +*.sublime-workspace + From 91a8634abac47e2dd85ef612f55508e3caf52f99 Mon Sep 17 00:00:00 2001 From: Xing Liu Date: Wed, 25 Jul 2018 23:14:15 -0700 Subject: [PATCH 25/37] Translation of intermediate-algorithm-scripting, 50% (#11) * Translation of intermediate-algorithm-scripting, first half * Address comments --- .../intermediate-algorithm-scripting.json | 371 +++++++++--------- 1 file changed, 184 insertions(+), 187 deletions(-) diff --git a/02-javascript-algorithms-and-data-structures/intermediate-algorithm-scripting.json b/02-javascript-algorithms-and-data-structures/intermediate-algorithm-scripting.json index a4a3929..53827f4 100644 --- a/02-javascript-algorithms-and-data-structures/intermediate-algorithm-scripting.json +++ b/02-javascript-algorithms-and-data-structures/intermediate-algorithm-scripting.json @@ -8,38 +8,38 @@ "id": "a3566b1109230028080c9345", "title": "Sum All Numbers in a Range", "description": [ - "We'll pass you an array of two numbers. Return the sum of those two numbers plus the sum of all the numbers between them.", - "The lowest number will not always come first.", - "Remember to use Read-Search-Ask if you get stuck. Try to pair program. Write your own code." + "给出一个含有两个数字的数组，我们需要写一个函数，让它返回这两个数字间所有数字（包含这两个数字）的总和。", + "注意，较小数不一定总是出现在数组的第一个元素。", + "如果你遇到了问题，请点击 帮助。" ], "hints": [ - "Use Math.max() to find the maximum value of two numbers.", - "Use Math.min() to find the minimum value of two numbers.", - "Remember to that you must add all the numbers in between so this would require a way to get those numbers." + "使用 Math.max() 来获取两数中较大的数。", + "使用 Math.min() 来获取两数中较小的数。", + "注意，既然需要对两数之间的所有数求和，那就先要考虑好如何获取这些数。" ], "solutions": [ "function sumAll(arr) {\n var sum = 0;\n arr.sort(function(a,b) {return a-b;});\n for (var i = arr[0]; i <= arr[1]; i++) {\n sum += i; \n }\n return sum;\n}" ], "tests": [ { - "text": "sumAll([1, 4]) should return a number.", - "testString": "assert(typeof sumAll([1, 4]) === 'number', 'sumAll([1, 4]) should return a number.');" + "text": "sumAll([1, 4]) 应该返回一个数字。", + "testString": "assert(typeof sumAll([1, 4]) === 'number', 'sumAll([1, 4]) 应该返回一个数字。');" }, { - "text": "sumAll([1, 4]) should return 10.", - "testString": "assert.deepEqual(sumAll([1, 4]), 10, 'sumAll([1, 4]) should return 10.');" + "text": "sumAll([1, 4]) 应该返回 10。", + "testString": "assert.deepEqual(sumAll([1, 4]), 10, 'sumAll([1, 4]) 应该返回 10。');" }, { - "text": "sumAll([4, 1]) should return 10.", - "testString": "assert.deepEqual(sumAll([4, 1]), 10, 'sumAll([4, 1]) should return 10.');" + "text": "sumAll([4, 1]) 应该返回 10。", + "testString": "assert.deepEqual(sumAll([4, 1]), 10, 'sumAll([4, 1]) 应该返回 10。');" }, { - "text": "sumAll([5, 10]) should return 45.", - "testString": "assert.deepEqual(sumAll([5, 10]), 45, 'sumAll([5, 10]) should return 45.');" + "text": "sumAll([5, 10]) 应该返回 45。", + "testString": "assert.deepEqual(sumAll([5, 10]), 45, 'sumAll([5, 10]) 应该返回 45。');" }, { - "text": "sumAll([10, 5]) should return 45.", - "testString": "assert.deepEqual(sumAll([10, 5]), 45, 'sumAll([10, 5]) should return 45.');" + "text": "sumAll([10, 5]) 应该返回 45。", + "testString": "assert.deepEqual(sumAll([10, 5]), 45, 'sumAll([10, 5]) 应该返回 45。');" } ], "MDNlinks": [ @@ -70,73 +70,73 @@ "id": "a5de63ebea8dbee56860f4f2", "title": "Diff Two Arrays", "description": [ - "Compare two arrays and return a new array with any items only found in one of the two given arrays, but not both. In other words, return the symmetric difference of the two arrays.", - "Remember to use Read-Search-Ask if you get stuck. Try to pair program. Write your own code.", - "Note
You can return the array with its elements in any order." + "在这道题目中，我们需要写一个函数，比较两个数组，返回一个新的数组。这个新数组需要包含传入的两个数组所有元素中，仅在其中一个数组里出现的元素。如果某个元素同时出现在两个数组中，则不应包含在返回的数组里。换言之，我们需要返回这两个数组的对称差。", + "如果你遇到了问题，请点击 帮助。", + "注意：
返回数组中的元素顺序不会影响测试结果。" ], "solutions": [ "function diffArray(arr1, arr2) {\n var newArr = [];\n var h1 = Object.create(null);\n arr1.forEach(function(e) {\n h1[e] = e;\n });\n \n var h2 = Object.create(null);\n arr2.forEach(function(e) {\n h2[e] = e;\n });\n \n Object.keys(h1).forEach(function(e) {\n if (!(e in h2)) newArr.push(h1[e]);\n });\n Object.keys(h2).forEach(function(e) {\n if (!(e in h1)) newArr.push(h2[e]);\n });\n // Same, same; but different.\n return newArr;\n}" ], "tests": [ { - "text": "diffArray([1, 2, 3, 5], [1, 2, 3, 4, 5]) should return an array.", - "testString": "assert(typeof diffArray([1, 2, 3, 5], [1, 2, 3, 4, 5]) === \"object\", 'diffArray([1, 2, 3, 5], [1, 2, 3, 4, 5]) should return an array.');" + "text": "diffArray([1, 2, 3, 5], [1, 2, 3, 4, 5]) 应该返回一个数组。", + "testString": "assert(typeof diffArray([1, 2, 3, 5], [1, 2, 3, 4, 5]) === \"object\", 'diffArray([1, 2, 3, 5], [1, 2, 3, 4, 5]) 应该返回一个数组。');" }, { - "text": "[\"diorite\", \"andesite\", \"grass\", \"dirt\", \"pink wool\", \"dead shrub\"], [\"diorite\", \"andesite\", \"grass\", \"dirt\", \"dead shrub\"] should return [\"pink wool\"].", - "testString": "assert.sameMembers(diffArray([\"diorite\", \"andesite\", \"grass\", \"dirt\", \"pink wool\", \"dead shrub\"], [\"diorite\", \"andesite\", \"grass\", \"dirt\", \"dead shrub\"]), [\"pink wool\"], '[\"diorite\", \"andesite\", \"grass\", \"dirt\", \"pink wool\", \"dead shrub\"], [\"diorite\", \"andesite\", \"grass\", \"dirt\", \"dead shrub\"] should return [\"pink wool\"].');" + "text": "[\"diorite\", \"andesite\", \"grass\", \"dirt\", \"pink wool\", \"dead shrub\"], [\"diorite\", \"andesite\", \"grass\", \"dirt\", \"dead shrub\"] 应该返回 [\"pink wool\"]。", + "testString": "assert.sameMembers(diffArray([\"diorite\", \"andesite\", \"grass\", \"dirt\", \"pink wool\", \"dead shrub\"], [\"diorite\", \"andesite\", \"grass\", \"dirt\", \"dead shrub\"]), [\"pink wool\"], '[\"diorite\", \"andesite\", \"grass\", \"dirt\", \"pink wool\", \"dead shrub\"], [\"diorite\", \"andesite\", \"grass\", \"dirt\", \"dead shrub\"] 应该返回 [\"pink wool\"]。');" }, { - "text": "[\"diorite\", \"andesite\", \"grass\", \"dirt\", \"pink wool\", \"dead shrub\"], [\"diorite\", \"andesite\", \"grass\", \"dirt\", \"dead shrub\"] should return an array with one item.", - "testString": "assert(diffArray([\"diorite\", \"andesite\", \"grass\", \"dirt\", \"pink wool\", \"dead shrub\"], [\"diorite\", \"andesite\", \"grass\", \"dirt\", \"dead shrub\"]).length === 1, '[\"diorite\", \"andesite\", \"grass\", \"dirt\", \"pink wool\", \"dead shrub\"], [\"diorite\", \"andesite\", \"grass\", \"dirt\", \"dead shrub\"] should return an array with one item.');" + "text": "[\"diorite\", \"andesite\", \"grass\", \"dirt\", \"pink wool\", \"dead shrub\"], [\"diorite\", \"andesite\", \"grass\", \"dirt\", \"dead shrub\"] 应该返回一个长度为 1 的数组。", + "testString": "assert(diffArray([\"diorite\", \"andesite\", \"grass\", \"dirt\", \"pink wool\", \"dead shrub\"], [\"diorite\", \"andesite\", \"grass\", \"dirt\", \"dead shrub\"]).length === 1, '[\"diorite\", \"andesite\", \"grass\", \"dirt\", \"pink wool\", \"dead shrub\"], [\"diorite\", \"andesite\", \"grass\", \"dirt\", \"dead shrub\"] 应该返回一个长度为 1 的数组。');" }, { - "text": "[\"andesite\", \"grass\", \"dirt\", \"pink wool\", \"dead shrub\"], [\"diorite\", \"andesite\", \"grass\", \"dirt\", \"dead shrub\"] should return [\"diorite\", \"pink wool\"].", - "testString": "assert.sameMembers(diffArray([\"andesite\", \"grass\", \"dirt\", \"pink wool\", \"dead shrub\"], [\"diorite\", \"andesite\", \"grass\", \"dirt\", \"dead shrub\"]), [\"diorite\", \"pink wool\"], '[\"andesite\", \"grass\", \"dirt\", \"pink wool\", \"dead shrub\"], [\"diorite\", \"andesite\", \"grass\", \"dirt\", \"dead shrub\"] should return [\"diorite\", \"pink wool\"].');" + "text": "[\"andesite\", \"grass\", \"dirt\", \"pink wool\", \"dead shrub\"], [\"diorite\", \"andesite\", \"grass\", \"dirt\", \"dead shrub\"] 应该返回 [\"diorite\", \"pink wool\"]。", + "testString": "assert.sameMembers(diffArray([\"andesite\", \"grass\", \"dirt\", \"pink wool\", \"dead shrub\"], [\"diorite\", \"andesite\", \"grass\", \"dirt\", \"dead shrub\"]), [\"diorite\", \"pink wool\"], '[\"andesite\", \"grass\", \"dirt\", \"pink wool\", \"dead shrub\"], [\"diorite\", \"andesite\", \"grass\", \"dirt\", \"dead shrub\"] 应该返回 [\"diorite\", \"pink wool\"]。');" }, { - "text": "[\"andesite\", \"grass\", \"dirt\", \"pink wool\", \"dead shrub\"], [\"diorite\", \"andesite\", \"grass\", \"dirt\", \"dead shrub\"] should return an array with two items.", - "testString": "assert(diffArray([\"andesite\", \"grass\", \"dirt\", \"pink wool\", \"dead shrub\"], [\"diorite\", \"andesite\", \"grass\", \"dirt\", \"dead shrub\"]).length === 2, '[\"andesite\", \"grass\", \"dirt\", \"pink wool\", \"dead shrub\"], [\"diorite\", \"andesite\", \"grass\", \"dirt\", \"dead shrub\"] should return an array with two items.');" + "text": "[\"andesite\", \"grass\", \"dirt\", \"pink wool\", \"dead shrub\"], [\"diorite\", \"andesite\", \"grass\", \"dirt\", \"dead shrub\"] 应该返回一个长度为 2 的数组。", + "testString": "assert(diffArray([\"andesite\", \"grass\", \"dirt\", \"pink wool\", \"dead shrub\"], [\"diorite\", \"andesite\", \"grass\", \"dirt\", \"dead shrub\"]).length === 2, '[\"andesite\", \"grass\", \"dirt\", \"pink wool\", \"dead shrub\"], [\"diorite\", \"andesite\", \"grass\", \"dirt\", \"dead shrub\"] 应该返回一个长度为 2 的数组。');" }, { - "text": "[\"andesite\", \"grass\", \"dirt\", \"dead shrub\"], [\"andesite\", \"grass\", \"dirt\", \"dead shrub\"] should return [].", - "testString": "assert.sameMembers(diffArray([\"andesite\", \"grass\", \"dirt\", \"dead shrub\"], [\"andesite\", \"grass\", \"dirt\", \"dead shrub\"]), [], '[\"andesite\", \"grass\", \"dirt\", \"dead shrub\"], [\"andesite\", \"grass\", \"dirt\", \"dead shrub\"] should return [].');" + "text": "[\"andesite\", \"grass\", \"dirt\", \"dead shrub\"], [\"andesite\", \"grass\", \"dirt\", \"dead shrub\"] 应该返回 []。", + "testString": "assert.sameMembers(diffArray([\"andesite\", \"grass\", \"dirt\", \"dead shrub\"], [\"andesite\", \"grass\", \"dirt\", \"dead shrub\"]), [], '[\"andesite\", \"grass\", \"dirt\", \"dead shrub\"], [\"andesite\", \"grass\", \"dirt\", \"dead shrub\"] 应该返回 []。');" }, { - "text": "[\"andesite\", \"grass\", \"dirt\", \"dead shrub\"], [\"andesite\", \"grass\", \"dirt\", \"dead shrub\"] should return an empty array.", - "testString": "assert(diffArray([\"andesite\", \"grass\", \"dirt\", \"dead shrub\"], [\"andesite\", \"grass\", \"dirt\", \"dead shrub\"]).length === 0, '[\"andesite\", \"grass\", \"dirt\", \"dead shrub\"], [\"andesite\", \"grass\", \"dirt\", \"dead shrub\"] should return an empty array.');" + "text": "[\"andesite\", \"grass\", \"dirt\", \"dead shrub\"], [\"andesite\", \"grass\", \"dirt\", \"dead shrub\"] 应该返回一个空数组。", + "testString": "assert(diffArray([\"andesite\", \"grass\", \"dirt\", \"dead shrub\"], [\"andesite\", \"grass\", \"dirt\", \"dead shrub\"]).length === 0, '[\"andesite\", \"grass\", \"dirt\", \"dead shrub\"], [\"andesite\", \"grass\", \"dirt\", \"dead shrub\"] 应该返回一个空数组。');" }, { - "text": "[1, 2, 3, 5], [1, 2, 3, 4, 5] should return [4].", - "testString": "assert.sameMembers(diffArray([1, 2, 3, 5], [1, 2, 3, 4, 5]), [4], '[1, 2, 3, 5], [1, 2, 3, 4, 5] should return [4].');" + "text": "[1, 2, 3, 5], [1, 2, 3, 4, 5] 应该返回 [4]。", + "testString": "assert.sameMembers(diffArray([1, 2, 3, 5], [1, 2, 3, 4, 5]), [4], '[1, 2, 3, 5], [1, 2, 3, 4, 5] 应该返回 [4]。');" }, { - "text": "[1, 2, 3, 5], [1, 2, 3, 4, 5] should return an array with one item.", - "testString": "assert(diffArray([1, 2, 3, 5], [1, 2, 3, 4, 5]).length === 1, '[1, 2, 3, 5], [1, 2, 3, 4, 5] should return an array with one item.');" + "text": "[1, 2, 3, 5], [1, 2, 3, 4, 5] 应该返回一个长度为 1 的数组。", + "testString": "assert(diffArray([1, 2, 3, 5], [1, 2, 3, 4, 5]).length === 1, '[1, 2, 3, 5], [1, 2, 3, 4, 5] 应该返回一个长度为 1 的数组。');" }, { - "text": "[1, \"calf\", 3, \"piglet\"], [1, \"calf\", 3, 4] should return [\"piglet\", 4].", - "testString": "assert.sameMembers(diffArray([1, \"calf\", 3, \"piglet\"], [1, \"calf\", 3, 4]), [\"piglet\", 4], '[1, \"calf\", 3, \"piglet\"], [1, \"calf\", 3, 4] should return [\"piglet\", 4].');" + "text": "[1, \"calf\", 3, \"piglet\"], [1, \"calf\", 3, 4] 应该返回 [\"piglet\", 4]。", + "testString": "assert.sameMembers(diffArray([1, \"calf\", 3, \"piglet\"], [1, \"calf\", 3, 4]), [\"piglet\", 4], '[1, \"calf\", 3, \"piglet\"], [1, \"calf\", 3, 4] 应该返回 [\"piglet\", 4]。');" }, { - "text": "[1, \"calf\", 3, \"piglet\"], [1, \"calf\", 3, 4] should return an array with two items.", - "testString": "assert(diffArray([1, \"calf\", 3, \"piglet\"], [1, \"calf\", 3, 4]).length === 2, '[1, \"calf\", 3, \"piglet\"], [1, \"calf\", 3, 4] should return an array with two items.');" + "text": "[1, \"calf\", 3, \"piglet\"], [1, \"calf\", 3, 4] 应该返回一个长度为 2 的数组。", + "testString": "assert(diffArray([1, \"calf\", 3, \"piglet\"], [1, \"calf\", 3, 4]).length === 2, '[1, \"calf\", 3, \"piglet\"], [1, \"calf\", 3, 4] 应该返回一个长度为 2 的数组。');" }, { - "text": "[], [\"snuffleupagus\", \"cookie monster\", \"elmo\"] should return [\"snuffleupagus\", \"cookie monster\", \"elmo\"].", - "testString": "assert.sameMembers(diffArray([], [\"snuffleupagus\", \"cookie monster\", \"elmo\"]), [\"snuffleupagus\", \"cookie monster\", \"elmo\"], '[], [\"snuffleupagus\", \"cookie monster\", \"elmo\"] should return [\"snuffleupagus\", \"cookie monster\", \"elmo\"].');" + "text": "[], [\"snuffleupagus\", \"cookie monster\", \"elmo\"] 应该返回 [\"snuffleupagus\", \"cookie monster\", \"elmo\"]。", + "testString": "assert.sameMembers(diffArray([], [\"snuffleupagus\", \"cookie monster\", \"elmo\"]), [\"snuffleupagus\", \"cookie monster\", \"elmo\"], '[], [\"snuffleupagus\", \"cookie monster\", \"elmo\"] 应该返回 [\"snuffleupagus\", \"cookie monster\", \"elmo\"]。');" }, { - "text": "[], [\"snuffleupagus\", \"cookie monster\", \"elmo\"] should return an array with three items.", - "testString": "assert(diffArray([], [\"snuffleupagus\", \"cookie monster\", \"elmo\"]).length === 3, '[], [\"snuffleupagus\", \"cookie monster\", \"elmo\"] should return an array with three items.');" + "text": "[], [\"snuffleupagus\", \"cookie monster\", \"elmo\"] 应该返回一个长度为 3 的数组。", + "testString": "assert(diffArray([], [\"snuffleupagus\", \"cookie monster\", \"elmo\"]).length === 3, '[], [\"snuffleupagus\", \"cookie monster\", \"elmo\"] 应该返回一个长度为 3 的数组。');" }, { - "text": "[1, \"calf\", 3, \"piglet\"], [7, \"filly\"] should return [1, \"calf\", 3, \"piglet\", 7, \"filly\"].", - "testString": "assert.sameMembers(diffArray([1, \"calf\", 3, \"piglet\"], [7, \"filly\"]), [1, \"calf\", 3, \"piglet\", 7, \"filly\"], '[1, \"calf\", 3, \"piglet\"], [7, \"filly\"] should return [1, \"calf\", 3, \"piglet\", 7, \"filly\"].');" + "text": "[1, \"calf\", 3, \"piglet\"], [7, \"filly\"] 应该返回 [1, \"calf\", 3, \"piglet\", 7, \"filly\"]。", + "testString": "assert.sameMembers(diffArray([1, \"calf\", 3, \"piglet\"], [7, \"filly\"]), [1, \"calf\", 3, \"piglet\", 7, \"filly\"], '[1, \"calf\", 3, \"piglet\"], [7, \"filly\"] 应该返回 [1, \"calf\", 3, \"piglet\", 7, \"filly\"]。');" }, { - "text": "[1, \"calf\", 3, \"piglet\"], [7, \"filly\"] should return an array with six items.", - "testString": "assert(diffArray([1, \"calf\", 3, \"piglet\"], [7, \"filly\"]).length === 6, '[1, \"calf\", 3, \"piglet\"], [7, \"filly\"] should return an array with six items.');" + "text": "[1, \"calf\", 3, \"piglet\"], [7, \"filly\"] 应该返回一个长度为 6 的数组。", + "testString": "assert(diffArray([1, \"calf\", 3, \"piglet\"], [7, \"filly\"]).length === 6, '[1, \"calf\", 3, \"piglet\"], [7, \"filly\"] 应该返回一个长度为 6 的数组。');" } ], "MDNlinks": [ @@ -156,7 +156,7 @@ "contents": [ "function diffArray(arr1, arr2) {", " var newArr = [];", - " // Same, same; but different.", + " // 这是一个党异伐同的过程", " return newArr;", "}", "", @@ -171,34 +171,34 @@ "id": "a39963a4c10bc8b4d4f06d7e", "title": "Seek and Destroy", "description": [ - "You will be provided with an initial array (the first argument in the destroyer function), followed by one or more arguments. Remove all elements from the initial array that are of the same value as these arguments.", - "Note
You have to use the arguments object.", - "Remember to use Read-Search-Ask if you get stuck. Write your own code." + "在这道题目中，我们要写一个叫 destroyer 的函数。传给它的第一个参数是数组，我们称他为初始数组。后续的参数数量是不确定的，可能有一个或多个。你需要做的是，从初始数组中移除所有与后续参数相等的元素，并返回移除元素后的数组。", + "注意：
你可以使用 arguments 对象，也可以使用 ...，即“剩余参数”（Rest Parameters）语法。", + "如果你遇到了问题，请点击 帮助。" ], "tests": [ { - "text": "destroyer([1, 2, 3, 1, 2, 3], 2, 3) should return [1, 1].", - "testString": "assert.deepEqual(destroyer([1, 2, 3, 1, 2, 3], 2, 3), [1, 1], 'destroyer([1, 2, 3, 1, 2, 3], 2, 3) should return [1, 1].');" + "text": "destroyer([1, 2, 3, 1, 2, 3], 2, 3) 应该返回 [1, 1]。", + "testString": "assert.deepEqual(destroyer([1, 2, 3, 1, 2, 3], 2, 3), [1, 1], 'destroyer([1, 2, 3, 1, 2, 3], 2, 3) 应该返回 [1, 1]。');" }, { - "text": "destroyer([1, 2, 3, 5, 1, 2, 3], 2, 3) should return [1, 5, 1].", - "testString": "assert.deepEqual(destroyer([1, 2, 3, 5, 1, 2, 3], 2, 3), [1, 5, 1], 'destroyer([1, 2, 3, 5, 1, 2, 3], 2, 3) should return [1, 5, 1].');" + "text": "destroyer([1, 2, 3, 5, 1, 2, 3], 2, 3) 应该返回 [1, 5, 1]。", + "testString": "assert.deepEqual(destroyer([1, 2, 3, 5, 1, 2, 3], 2, 3), [1, 5, 1], 'destroyer([1, 2, 3, 5, 1, 2, 3], 2, 3) 应该返回 [1, 5, 1]。');" }, { - "text": "destroyer([3, 5, 1, 2, 2], 2, 3, 5) should return [1].", - "testString": "assert.deepEqual(destroyer([3, 5, 1, 2, 2], 2, 3, 5), [1], 'destroyer([3, 5, 1, 2, 2], 2, 3, 5) should return [1].');" + "text": "destroyer([3, 5, 1, 2, 2], 2, 3, 5) 应该返回 [1]。", + "testString": "assert.deepEqual(destroyer([3, 5, 1, 2, 2], 2, 3, 5), [1], 'destroyer([3, 5, 1, 2, 2], 2, 3, 5) 应该返回 [1]。');" }, { - "text": "destroyer([2, 3, 2, 3], 2, 3) should return [].", - "testString": "assert.deepEqual(destroyer([2, 3, 2, 3], 2, 3), [], 'destroyer([2, 3, 2, 3], 2, 3) should return [].');" + "text": "destroyer([2, 3, 2, 3], 2, 3) 应该返回 []。", + "testString": "assert.deepEqual(destroyer([2, 3, 2, 3], 2, 3), [], 'destroyer([2, 3, 2, 3], 2, 3) 应该返回 []。');" }, { - "text": "destroyer([\"tree\", \"hamburger\", 53], \"tree\", 53) should return [\"hamburger\"].", - "testString": "assert.deepEqual(destroyer([\"tree\", \"hamburger\", 53], \"tree\", 53), [\"hamburger\"], 'destroyer([\"tree\", \"hamburger\", 53], \"tree\", 53) should return [\"hamburger\"].');" + "text": "destroyer([\"tree\", \"hamburger\", 53], \"tree\", 53) 应该返回 [\"hamburger\"]。", + "testString": "assert.deepEqual(destroyer([\"tree\", \"hamburger\", 53], \"tree\", 53), [\"hamburger\"], 'destroyer([\"tree\", \"hamburger\", 53], \"tree\", 53) 应该返回 [\"hamburger\"]。');" }, { - "text": "destroyer([\"possum\", \"trollo\", 12, \"safari\", \"hotdog\", 92, 65, \"grandma\", \"bugati\", \"trojan\", \"yacht\"], \"yacht\", \"possum\", \"trollo\", \"safari\", \"hotdog\", \"grandma\", \"bugati\", \"trojan\") should return [12,92,65].", - "testString": "assert.deepEqual(destroyer([\"possum\", \"trollo\", 12, \"safari\", \"hotdog\", 92, 65, \"grandma\", \"bugati\", \"trojan\", \"yacht\"], \"yacht\", \"possum\", \"trollo\", \"safari\", \"hotdog\", \"grandma\", \"bugati\", \"trojan\"), [12,92,65], 'destroyer([\"possum\", \"trollo\", 12, \"safari\", \"hotdog\", 92, 65, \"grandma\", \"bugati\", \"trojan\", \"yacht\"], \"yacht\", \"possum\", \"trollo\", \"safari\", \"hotdog\", \"grandma\", \"bugati\", \"trojan\") should return [12,92,65].');" + "text": "destroyer([\"possum\", \"trollo\", 12, \"safari\", \"hotdog\", 92, 65, \"grandma\", \"bugati\", \"trojan\", \"yacht\"], \"yacht\", \"possum\", \"trollo\", \"safari\", \"hotdog\", \"grandma\", \"bugati\", \"trojan\") 应该返回 [12,92,65]。", + "testString": "assert.deepEqual(destroyer([\"possum\", \"trollo\", 12, \"safari\", \"hotdog\", 92, 65, \"grandma\", \"bugati\", \"trojan\", \"yacht\"], \"yacht\", \"possum\", \"trollo\", \"safari\", \"hotdog\", \"grandma\", \"bugati\", \"trojan\"), [12,92,65], 'destroyer([\"possum\", \"trollo\", 12, \"safari\", \"hotdog\", 92, 65, \"grandma\", \"bugati\", \"trojan\", \"yacht\"], \"yacht\", \"possum\", \"trollo\", \"safari\", \"hotdog\", \"grandma\", \"bugati\", \"trojan\") 应该返回 [12,92,65]。');" } ], "isRequired": true, @@ -217,7 +217,7 @@ "name": "index", "contents": [ "function destroyer(arr) {", - " // Remove all the values", + " // 删掉那些值", " return arr;", "}", "", @@ -232,37 +232,37 @@ "id": "a8e512fbe388ac2f9198f0fa", "title": "Wherefore art thou", "description": [ - "Make a function that looks through an array of objects (first argument) and returns an array of all objects that have matching name and value pairs (second argument). Each name and value pair of the source object has to be present in the object from the collection if it is to be included in the returned array.", - "For example, if the first argument is [{ first: \"Romeo\", last: \"Montague\" }, { first: \"Mercutio\", last: null }, { first: \"Tybalt\", last: \"Capulet\" }], and the second argument is { last: \"Capulet\" }, then you must return the third object from the array (the first argument), because it contains the name and its value, that was passed on as the second argument.", - "Remember to use Read-Search-Ask if you get stuck. Write your own code." + "在这道题目中，我们要写一个函数，它接收两个参数：第一个参数是对象数组，第二个参数是一个对象。我们需要从对象数组中找出与第二个参数相等或包含第二个参数的所有对象，并以对象数组的形式返回。其中，相等的意思是原数组中的对象与第二个参数中对象的所有键值对完全相等；包含的意思是只要第二个参数中对象的所有键存在于原数组对象中，且它们对应的值相同即可。", + "比如，如果第一个参数是 [{ first: \"Romeo\", last: \"Montague\" }, { first: \"Mercutio\", last: null }, { first: \"Tybalt\", last: \"Capulet\" }]，第二个参数是 { last: \"Capulet\" }。那么你需要以对象数组的形式返回第一个参数中的第三个元素，因为它包含第二个参数中定义的键 last，且对应的值 \"Capulet\" 相同", + "如果你遇到了问题，请点击 帮助。" ], "solutions": [ "function whatIsInAName(collection, source) {\n var arr = [];\n var keys = Object.keys(source);\n collection.forEach(function(e) {\n if(keys.every(function(key) {return e[key] === source[key];})) {\n arr.push(e); \n }\n });\n return arr;\n}" ], "tests": [ { - "text": "whatIsInAName([{ first: \"Romeo\", last: \"Montague\" }, { first: \"Mercutio\", last: null }, { first: \"Tybalt\", last: \"Capulet\" }], { last: \"Capulet\" }) should return [{ first: \"Tybalt\", last: \"Capulet\" }].", - "testString": "assert.deepEqual(whatIsInAName([{ first: \"Romeo\", last: \"Montague\" }, { first: \"Mercutio\", last: null }, { first: \"Tybalt\", last: \"Capulet\" }], { last: \"Capulet\" }), [{ first: \"Tybalt\", last: \"Capulet\" }], 'whatIsInAName([{ first: \"Romeo\", last: \"Montague\" }, { first: \"Mercutio\", last: null }, { first: \"Tybalt\", last: \"Capulet\" }], { last: \"Capulet\" }) should return [{ first: \"Tybalt\", last: \"Capulet\" }].');" + "text": "whatIsInAName([{ first: \"Romeo\", last: \"Montague\" }, { first: \"Mercutio\", last: null }, { first: \"Tybalt\", last: \"Capulet\" }], { last: \"Capulet\" }) 应该返回 [{ first: \"Tybalt\", last: \"Capulet\" }]。", + "testString": "assert.deepEqual(whatIsInAName([{ first: \"Romeo\", last: \"Montague\" }, { first: \"Mercutio\", last: null }, { first: \"Tybalt\", last: \"Capulet\" }], { last: \"Capulet\" }), [{ first: \"Tybalt\", last: \"Capulet\" }], 'whatIsInAName([{ first: \"Romeo\", last: \"Montague\" }, { first: \"Mercutio\", last: null }, { first: \"Tybalt\", last: \"Capulet\" }], { last: \"Capulet\" }) 应该返回 [{ first: \"Tybalt\", last: \"Capulet\" }]。');" }, { - "text": "whatIsInAName([{ \"apple\": 1 }, { \"apple\": 1 }, { \"apple\": 1, \"bat\": 2 }], { \"apple\": 1 }) should return [{ \"apple\": 1 }, { \"apple\": 1 }, { \"apple\": 1, \"bat\": 2 }].", - "testString": "assert.deepEqual(whatIsInAName([{ \"apple\": 1 }, { \"apple\": 1 }, { \"apple\": 1, \"bat\": 2 }], { \"apple\": 1 }), [{ \"apple\": 1 }, { \"apple\": 1 }, { \"apple\": 1, \"bat\": 2 }], 'whatIsInAName([{ \"apple\": 1 }, { \"apple\": 1 }, { \"apple\": 1, \"bat\": 2 }], { \"apple\": 1 }) should return [{ \"apple\": 1 }, { \"apple\": 1 }, { \"apple\": 1, \"bat\": 2 }].');" + "text": "whatIsInAName([{ \"apple\": 1 }, { \"apple\": 1 }, { \"apple\": 1, \"bat\": 2 }], { \"apple\": 1 }) 应该返回 [{ \"apple\": 1 }, { \"apple\": 1 }, { \"apple\": 1, \"bat\": 2 }]。", + "testString": "assert.deepEqual(whatIsInAName([{ \"apple\": 1 }, { \"apple\": 1 }, { \"apple\": 1, \"bat\": 2 }], { \"apple\": 1 }), [{ \"apple\": 1 }, { \"apple\": 1 }, { \"apple\": 1, \"bat\": 2 }], 'whatIsInAName([{ \"apple\": 1 }, { \"apple\": 1 }, { \"apple\": 1, \"bat\": 2 }], { \"apple\": 1 }) 应该返回 [{ \"apple\": 1 }, { \"apple\": 1 }, { \"apple\": 1, \"bat\": 2 }]。');" }, { - "text": "whatIsInAName([{ \"apple\": 1, \"bat\": 2 }, { \"bat\": 2 }, { \"apple\": 1, \"bat\": 2, \"cookie\": 2 }], { \"apple\": 1, \"bat\": 2 }) should return [{ \"apple\": 1, \"bat\": 2 }, { \"apple\": 1, \"bat\": 2, \"cookie\": 2 }].", - "testString": "assert.deepEqual(whatIsInAName([{ \"apple\": 1, \"bat\": 2 }, { \"bat\": 2 }, { \"apple\": 1, \"bat\": 2, \"cookie\": 2 }], { \"apple\": 1, \"bat\": 2 }), [{ \"apple\": 1, \"bat\": 2 }, { \"apple\": 1, \"bat\": 2, \"cookie\": 2 }], 'whatIsInAName([{ \"apple\": 1, \"bat\": 2 }, { \"bat\": 2 }, { \"apple\": 1, \"bat\": 2, \"cookie\": 2 }], { \"apple\": 1, \"bat\": 2 }) should return [{ \"apple\": 1, \"bat\": 2 }, { \"apple\": 1, \"bat\": 2, \"cookie\": 2 }].');" + "text": "whatIsInAName([{ \"apple\": 1, \"bat\": 2 }, { \"bat\": 2 }, { \"apple\": 1, \"bat\": 2, \"cookie\": 2 }], { \"apple\": 1, \"bat\": 2 }) 应该返回 [{ \"apple\": 1, \"bat\": 2 }, { \"apple\": 1, \"bat\": 2, \"cookie\": 2 }]。", + "testString": "assert.deepEqual(whatIsInAName([{ \"apple\": 1, \"bat\": 2 }, { \"bat\": 2 }, { \"apple\": 1, \"bat\": 2, \"cookie\": 2 }], { \"apple\": 1, \"bat\": 2 }), [{ \"apple\": 1, \"bat\": 2 }, { \"apple\": 1, \"bat\": 2, \"cookie\": 2 }], 'whatIsInAName([{ \"apple\": 1, \"bat\": 2 }, { \"bat\": 2 }, { \"apple\": 1, \"bat\": 2, \"cookie\": 2 }], { \"apple\": 1, \"bat\": 2 }) 应该返回 [{ \"apple\": 1, \"bat\": 2 }, { \"apple\": 1, \"bat\": 2, \"cookie\": 2 }]。');" }, { - "text": "whatIsInAName([{ \"apple\": 1, \"bat\": 2 }, { \"apple\": 1 }, { \"apple\": 1, \"bat\": 2, \"cookie\": 2 }], { \"apple\": 1, \"cookie\": 2 }) should return [{ \"apple\": 1, \"bat\": 2, \"cookie\": 2 }].", - "testString": "assert.deepEqual(whatIsInAName([{ \"apple\": 1, \"bat\": 2 }, { \"apple\": 1 }, { \"apple\": 1, \"bat\": 2, \"cookie\": 2 }], { \"apple\": 1, \"cookie\": 2 }), [{ \"apple\": 1, \"bat\": 2, \"cookie\": 2 }], 'whatIsInAName([{ \"apple\": 1, \"bat\": 2 }, { \"apple\": 1 }, { \"apple\": 1, \"bat\": 2, \"cookie\": 2 }], { \"apple\": 1, \"cookie\": 2 }) should return [{ \"apple\": 1, \"bat\": 2, \"cookie\": 2 }].');" + "text": "whatIsInAName([{ \"apple\": 1, \"bat\": 2 }, { \"apple\": 1 }, { \"apple\": 1, \"bat\": 2, \"cookie\": 2 }], { \"apple\": 1, \"cookie\": 2 }) 应该返回 [{ \"apple\": 1, \"bat\": 2, \"cookie\": 2 }]。", + "testString": "assert.deepEqual(whatIsInAName([{ \"apple\": 1, \"bat\": 2 }, { \"apple\": 1 }, { \"apple\": 1, \"bat\": 2, \"cookie\": 2 }], { \"apple\": 1, \"cookie\": 2 }), [{ \"apple\": 1, \"bat\": 2, \"cookie\": 2 }], 'whatIsInAName([{ \"apple\": 1, \"bat\": 2 }, { \"apple\": 1 }, { \"apple\": 1, \"bat\": 2, \"cookie\": 2 }], { \"apple\": 1, \"cookie\": 2 }) 应该返回 [{ \"apple\": 1, \"bat\": 2, \"cookie\": 2 }]。');" }, { - "text": "whatIsInAName([{ \"apple\": 1, \"bat\": 2 }, { \"apple\": 1 }, { \"apple\": 1, \"bat\": 2, \"cookie\": 2 }, { \"bat\":2 }], { \"apple\": 1, \"bat\": 2 }) should return [{ \"apple\": 1, \"bat\": 2 }, { \"apple\": 1, \"bat\": 2, \"cookie\":2 }].", - "testString": "assert.deepEqual(whatIsInAName([{ \"apple\": 1, \"bat\": 2 }, { \"apple\": 1 }, { \"apple\": 1, \"bat\": 2, \"cookie\": 2 }, {\"bat\":2}], { \"apple\": 1, \"bat\": 2 }), [{ \"apple\": 1, \"bat\": 2 }, { \"apple\": 1, \"bat\": 2, \"cookie\":2 }], 'whatIsInAName([{ \"apple\": 1, \"bat\": 2 }, { \"apple\": 1 }, { \"apple\": 1, \"bat\": 2, \"cookie\": 2 }, { \"bat\":2 }], { \"apple\": 1, \"bat\": 2 }) should return [{ \"apple\": 1, \"bat\": 2 }, { \"apple\": 1, \"bat\": 2, \"cookie\":2 }].');" + "text": "whatIsInAName([{ \"apple\": 1, \"bat\": 2 }, { \"apple\": 1 }, { \"apple\": 1, \"bat\": 2, \"cookie\": 2 }, { \"bat\":2 }], { \"apple\": 1, \"bat\": 2 }) 应该返回 [{ \"apple\": 1, \"bat\": 2 }, { \"apple\": 1, \"bat\": 2, \"cookie\":2 }]。", + "testString": "assert.deepEqual(whatIsInAName([{ \"apple\": 1, \"bat\": 2 }, { \"apple\": 1 }, { \"apple\": 1, \"bat\": 2, \"cookie\": 2 }, {\"bat\":2}], { \"apple\": 1, \"bat\": 2 }), [{ \"apple\": 1, \"bat\": 2 }, { \"apple\": 1, \"bat\": 2, \"cookie\":2 }], 'whatIsInAName([{ \"apple\": 1, \"bat\": 2 }, { \"apple\": 1 }, { \"apple\": 1, \"bat\": 2, \"cookie\": 2 }, { \"bat\":2 }], { \"apple\": 1, \"bat\": 2 }) 应该返回 [{ \"apple\": 1, \"bat\": 2 }, { \"apple\": 1, \"bat\": 2, \"cookie\":2 }]。');" }, { - "text": "whatIsInAName([{\"a\": 1, \"b\": 2, \"c\": 3}], {\"a\": 1, \"b\": 9999, \"c\": 3}) should return []", - "testString": "assert.deepEqual(whatIsInAName([{ \"a\": 1, \"b\": 2, \"c\": 3 }], { \"a\": 1, \"b\": 9999, \"c\": 3 }), [], 'whatIsInAName([{\"a\": 1, \"b\": 2, \"c\": 3}], {\"a\": 1, \"b\": 9999, \"c\": 3}) should return []');" + "text": "whatIsInAName([{\"a\": 1, \"b\": 2, \"c\": 3}], {\"a\": 1, \"b\": 9999, \"c\": 3}) 应该返回 []。", + "testString": "assert.deepEqual(whatIsInAName([{ \"a\": 1, \"b\": 2, \"c\": 3 }], { \"a\": 1, \"b\": 9999, \"c\": 3 }), [], 'whatIsInAName([{\"a\": 1, \"b\": 2, \"c\": 3}], {\"a\": 1, \"b\": 9999, \"c\": 3}) 应该返回 []。');" } ], "MDNlinks": [ @@ -281,10 +281,10 @@ "function whatIsInAName(collection, source) {", " // What's in a name?", " var arr = [];", - " // Only change code below this line", + " // 请把你的代码写在这条注释以下", " ", " ", - " // Only change code above this line", + " // 请把你的代码写在这条注释以上", " return arr;", "}", "", @@ -299,32 +299,32 @@ "id": "a103376db3ba46b2d50db289", "title": "Spinal Tap Case", "description": [ - "Convert a string to spinal case. Spinal case is all-lowercase-words-joined-by-dashes.", - "Remember to use Read-Search-Ask if you get stuck. Try to pair program. Write your own code." + "在这道题目中，我们需要写一个函数，把一个字符串转换为“短线连接格式”。短线连接格式的意思是，所有字母都是小写，且用 - 连接。比如，对于 Hello World，应该转换为 hello-world；对于 I love_Javascript-VeryMuch，应该转换为 i-love-javascript-very-much。", + "如果你遇到了问题，请点击 帮助。" ], "solutions": [ "function spinalCase(str) {\n // \"It's such a fine line between stupid, and clever.\"\n // --David St. Hubbins\n str = str.replace(/([a-z](?=[A-Z]))/g, '$1 ');\n return str.toLowerCase().replace(/\\ |\\_/g, '-');\n}" ], "tests": [ { - "text": "spinalCase(\"This Is Spinal Tap\") should return \"this-is-spinal-tap\".", - "testString": "assert.deepEqual(spinalCase(\"This Is Spinal Tap\"), \"this-is-spinal-tap\", 'spinalCase(\"This Is Spinal Tap\") should return \"this-is-spinal-tap\".');" + "text": "spinalCase(\"This Is Spinal Tap\") 应该返回 \"this-is-spinal-tap\"。", + "testString": "assert.deepEqual(spinalCase(\"This Is Spinal Tap\"), \"this-is-spinal-tap\", 'spinalCase(\"This Is Spinal Tap\") 应该返回 \"this-is-spinal-tap\"。');" }, { - "text": "spinalCase(\"thisIsSpinalTap\") should return \"this-is-spinal-tap\".", - "testString": "assert.strictEqual(spinalCase('thisIsSpinalTap'), \"this-is-spinal-tap\", 'spinalCase(\"thisIsSpinalTap\") should return \"this-is-spinal-tap\".');" + "text": "spinalCase(\"thisIsSpinalTap\") 应该返回 \"this-is-spinal-tap\"。", + "testString": "assert.strictEqual(spinalCase('thisIsSpinalTap'), \"this-is-spinal-tap\", 'spinalCase(\"thisIsSpinalTap\") 应该返回 \"this-is-spinal-tap\"。');" }, { - "text": "spinalCase(\"The_Andy_Griffith_Show\") should return \"the-andy-griffith-show\".", - "testString": "assert.strictEqual(spinalCase(\"The_Andy_Griffith_Show\"), \"the-andy-griffith-show\", 'spinalCase(\"The_Andy_Griffith_Show\") should return \"the-andy-griffith-show\".');" + "text": "spinalCase(\"The_Andy_Griffith_Show\") 应该返回 \"the-andy-griffith-show\"。", + "testString": "assert.strictEqual(spinalCase(\"The_Andy_Griffith_Show\"), \"the-andy-griffith-show\", 'spinalCase(\"The_Andy_Griffith_Show\") 应该返回 \"the-andy-griffith-show\"。');" }, { - "text": "spinalCase(\"Teletubbies say Eh-oh\") should return \"teletubbies-say-eh-oh\".", - "testString": "assert.strictEqual(spinalCase(\"Teletubbies say Eh-oh\"), \"teletubbies-say-eh-oh\", 'spinalCase(\"Teletubbies say Eh-oh\") should return \"teletubbies-say-eh-oh\".');" + "text": "spinalCase(\"Teletubbies say Eh-oh\") 应该返回 \"teletubbies-say-eh-oh\"。", + "testString": "assert.strictEqual(spinalCase(\"Teletubbies say Eh-oh\"), \"teletubbies-say-eh-oh\", 'spinalCase(\"Teletubbies say Eh-oh\") 应该返回 \"teletubbies-say-eh-oh\"。');" }, { - "text": "spinalCase(\"AllThe-small Things\") should return \"all-the-small-things\".", - "testString": "assert.strictEqual(spinalCase(\"AllThe-small Things\"), \"all-the-small-things\", 'spinalCase(\"AllThe-small Things\") should return \"all-the-small-things\".');" + "text": "spinalCase(\"AllThe-small Things\") 应该返回 \"all-the-small-things\"。", + "testString": "assert.strictEqual(spinalCase(\"AllThe-small Things\"), \"all-the-small-things\", 'spinalCase(\"AllThe-small Things\") 应该返回 \"all-the-small-things\"。');" } ], "MDNlinks": [ @@ -340,8 +340,7 @@ "name": "index", "contents": [ "function spinalCase(str) {", - " // \"It's such a fine line between stupid, and clever.\"", - " // --David St. Hubbins", + "", " return str;", "}", "", @@ -356,43 +355,43 @@ "id": "aa7697ea2477d1316795783b", "title": "Pig Latin", "description": [ - "Translate the provided string to pig latin.", - "Pig Latin takes the first consonant (or consonant cluster) of an English word, moves it to the end of the word and suffixes an \"ay\".", - "If a word begins with a vowel you just add \"way\" to the end.", - "Input strings are guaranteed to be English words in all lowercase.", - "Remember to use Read-Search-Ask if you get stuck. Try to pair program. Write your own code." + "在这道题目中，我们需要写一个函数，把传入的字符串翻译成“儿童黑话”。", + "儿童黑话的基本转换规则很简单，只需要把一个英文单词的第一个辅音字母或第一组辅音从移到单词的结尾，并在后面加上 ay 即可。在英语中，字母 a、e、i、o、u 为元音，其余的字母均为辅音。辅音从的意思是连续的多个辅音字母。", + "额外地，如果单词本身是以元音开头的，那只需要在结尾加上 way。", + "在本题中，传入的单词一定会是英文单词，且所有字母均为小写。", + "如果你遇到了问题，请点击 帮助。" ], "solutions": [ "function translatePigLatin(str) {\n if (isVowel(str.charAt(0))) return str + \"way\";\n var front = [];\n str = str.split('');\n while (str.length && !isVowel(str[0])) {\n front.push(str.shift());\n }\n return [].concat(str, front).join('') + 'ay';\n}\n\nfunction isVowel(c) {\n return ['a', 'e', 'i', 'o', 'u'].indexOf(c.toLowerCase()) !== -1;\n}" ], "tests": [ { - "text": "translatePigLatin(\"california\") should return \"aliforniacay\".", - "testString": "assert.deepEqual(translatePigLatin(\"california\"), \"aliforniacay\", 'translatePigLatin(\"california\") should return \"aliforniacay\".');" + "text": "translatePigLatin(\"california\") 应该返回 \"aliforniacay\"。", + "testString": "assert.deepEqual(translatePigLatin(\"california\"), \"aliforniacay\", 'translatePigLatin(\"california\") 应该返回 \"aliforniacay\"。');" }, { - "text": "translatePigLatin(\"paragraphs\") should return \"aragraphspay\".", - "testString": "assert.deepEqual(translatePigLatin(\"paragraphs\"), \"aragraphspay\", 'translatePigLatin(\"paragraphs\") should return \"aragraphspay\".');" + "text": "translatePigLatin(\"paragraphs\") 应该返回 \"aragraphspay\"。", + "testString": "assert.deepEqual(translatePigLatin(\"paragraphs\"), \"aragraphspay\", 'translatePigLatin(\"paragraphs\") 应该返回 \"aragraphspay\"。');" }, { - "text": "translatePigLatin(\"glove\") should return \"oveglay\".", - "testString": "assert.deepEqual(translatePigLatin(\"glove\"), \"oveglay\", 'translatePigLatin(\"glove\") should return \"oveglay\".');" + "text": "translatePigLatin(\"glove\") 应该返回 \"oveglay\"。", + "testString": "assert.deepEqual(translatePigLatin(\"glove\"), \"oveglay\", 'translatePigLatin(\"glove\") 应该返回 \"oveglay\"。');" }, { - "text": "translatePigLatin(\"algorithm\") should return \"algorithmway\".", - "testString": "assert.deepEqual(translatePigLatin(\"algorithm\"), \"algorithmway\", 'translatePigLatin(\"algorithm\") should return \"algorithmway\".');" + "text": "translatePigLatin(\"algorithm\") 应该返回 \"algorithmway\"。", + "testString": "assert.deepEqual(translatePigLatin(\"algorithm\"), \"algorithmway\", 'translatePigLatin(\"algorithm\") 应该返回 \"algorithmway\"。');" }, { - "text": "translatePigLatin(\"eight\") should return \"eightway\".", - "testString": "assert.deepEqual(translatePigLatin(\"eight\"), \"eightway\", 'translatePigLatin(\"eight\") should return \"eightway\".');" + "text": "translatePigLatin(\"eight\") 应该返回 \"eightway\"。", + "testString": "assert.deepEqual(translatePigLatin(\"eight\"), \"eightway\", 'translatePigLatin(\"eight\") 应该返回 \"eightway\"。');" }, { - "text": "Should handle words where the first vowel comes in the end of the word.", - "testString": "assert.deepEqual(translatePigLatin(\"schwartz\"), \"artzschway\", 'Should handle words where the first vowel comes in the end of the word.');" + "text": "你的代码应当能够处理第一个元音字母在单词结尾的情况。比如 translatePigLatin(\"she\") 应该返回 \"eshay\"。", + "testString": "assert.deepEqual(translatePigLatin(\"she\"), \"eshay\", '你的代码应当能够处理第一个元音字母在单词结尾的情况。比如 translatePigLatin(\"she\") 应该返回 \"eshay\"。');" }, { - "text": "Should handle words without vowels.", - "testString": "assert.deepEqual(translatePigLatin(\"rhythm\"), \"rhythmay\", 'Should handle words without vowels.');" + "text": "你的代码应当能够处理单词中不含元音字母的情况。比如 translatePigLatin(\"rhythm\") 应该返回 \"rhythmay\"。", + "testString": "assert.deepEqual(translatePigLatin(\"rhythm\"), \"rhythmay\", '你的代码应当能够处理单词中不含元音字母的情况。比如 translatePigLatin(\"rhythm\") 应该返回 \"rhythmay\"。');" } ], "MDNlinks": [ @@ -425,36 +424,36 @@ "id": "a0b5010f579e69b815e7c5d6", "title": "Search and Replace", "description": [ - "Perform a search and replace on the sentence using the arguments provided and return the new sentence.", - "First argument is the sentence to perform the search and replace on.", - "Second argument is the word that you will be replacing (before).", - "Third argument is what you will be replacing the second argument with (after).", - "Note
Preserve the case of the first character in the original word when you are replacing it. For example if you mean to replace the word \"Book\" with the word \"dog\", it should be replaced as \"Dog\"", - "Remember to use Read-Search-Ask if you get stuck. Try to pair program. Write your own code." + "在这道题目中，我们需要写一个字符串的搜索与替换函数，它的返回值为完成替换后的新字符串。", + "这个函数接收的第一个参数为待替换的句子。", + "第二个参数为句中需要被替换的单词。", + "第三个参数为替换后的单词。", + "注意：
你需要保留被替换单词首字母的大小写格式。即如果传入的第二个参数为 \"Book\"，第三个参数为 \"dog\"，那么替换后的结果应为 \"Dog\"", + "如果你遇到了问题，请点击 帮助。" ], "solutions": [ "function myReplace(str, before, after) {\n if (before.charAt(0) === before.charAt(0).toUpperCase()) {\n after = after.charAt(0).toUpperCase() + after.substring(1);\n } else {\n after = after.charAt(0).toLowerCase() + after.substring(1);\n }\n return str.replace(before, after);\n}" ], "tests": [ { - "text": "myReplace(\"Let us go to the store\", \"store\", \"mall\") should return \"Let us go to the mall\".", - "testString": "assert.deepEqual(myReplace(\"Let us go to the store\", \"store\", \"mall\"), \"Let us go to the mall\", 'myReplace(\"Let us go to the store\", \"store\", \"mall\") should return \"Let us go to the mall\".');" + "text": "myReplace(\"Let us go to the store\", \"store\", \"mall\") 应该返回 \"Let us go to the mall\"。", + "testString": "assert.deepEqual(myReplace(\"Let us go to the store\", \"store\", \"mall\"), \"Let us go to the mall\", 'myReplace(\"Let us go to the store\", \"store\", \"mall\") 应该返回 \"Let us go to the mall\"。');" }, { - "text": "myReplace(\"He is Sleeping on the couch\", \"Sleeping\", \"sitting\") should return \"He is Sitting on the couch\".", - "testString": "assert.deepEqual(myReplace(\"He is Sleeping on the couch\", \"Sleeping\", \"sitting\"), \"He is Sitting on the couch\", 'myReplace(\"He is Sleeping on the couch\", \"Sleeping\", \"sitting\") should return \"He is Sitting on the couch\".');" + "text": "myReplace(\"He is Sleeping on the couch\", \"Sleeping\", \"sitting\") 应该返回 \"He is Sitting on the couch\"。", + "testString": "assert.deepEqual(myReplace(\"He is Sleeping on the couch\", \"Sleeping\", \"sitting\"), \"He is Sitting on the couch\", 'myReplace(\"He is Sleeping on the couch\", \"Sleeping\", \"sitting\") 应该返回 \"He is Sitting on the couch\"。');" }, { - "text": "myReplace(\"This has a spellngi error\", \"spellngi\", \"spelling\") should return \"This has a spelling error\".", - "testString": "assert.deepEqual(myReplace(\"This has a spellngi error\", \"spellngi\", \"spelling\"), \"This has a spelling error\", 'myReplace(\"This has a spellngi error\", \"spellngi\", \"spelling\") should return \"This has a spelling error\".');" + "text": "myReplace(\"This has a spellngi error\", \"spellngi\", \"spelling\") 应该返回 \"This has a spelling error\"。", + "testString": "assert.deepEqual(myReplace(\"This has a spellngi error\", \"spellngi\", \"spelling\"), \"This has a spelling error\", 'myReplace(\"This has a spellngi error\", \"spellngi\", \"spelling\") 应该返回 \"This has a spelling error\"。');" }, { - "text": "myReplace(\"His name is Tom\", \"Tom\", \"john\") should return \"His name is John\".", - "testString": "assert.deepEqual(myReplace(\"His name is Tom\", \"Tom\", \"john\"), \"His name is John\", 'myReplace(\"His name is Tom\", \"Tom\", \"john\") should return \"His name is John\".');" + "text": "myReplace(\"His name is Tom\", \"Tom\", \"john\") 应该返回 \"His name is John\"。", + "testString": "assert.deepEqual(myReplace(\"His name is Tom\", \"Tom\", \"john\"), \"His name is John\", 'myReplace(\"His name is Tom\", \"Tom\", \"john\") 应该返回 \"His name is John\"。');" }, { - "text": "myReplace(\"Let us get back to more Coding\", \"Coding\", \"algorithms\") should return \"Let us get back to more Algorithms\".", - "testString": "assert.deepEqual(myReplace(\"Let us get back to more Coding\", \"Coding\", \"algorithms\"), \"Let us get back to more Algorithms\", 'myReplace(\"Let us get back to more Coding\", \"Coding\", \"algorithms\") should return \"Let us get back to more Algorithms\".');" + "text": "myReplace(\"Let us get back to more Coding\", \"Coding\", \"algorithms\") 应该返回 \"Let us get back to more Algorithms\"。", + "testString": "assert.deepEqual(myReplace(\"Let us get back to more Coding\", \"Coding\", \"algorithms\"), \"Let us get back to more Algorithms\", 'myReplace(\"Let us get back to more Coding\", \"Coding\", \"algorithms\") 应该返回 \"Let us get back to more Algorithms\"。');" } ], "MDNlinks": [ @@ -485,28 +484,27 @@ "id": "afd15382cdfb22c9efe8b7de", "title": "DNA Pairing", "description": [ - "The DNA strand is missing the pairing element. Take each character, get its pair, and return the results as a 2d array.", - "Base pairs are a pair of AT and CG. Match the missing element to the provided character.", - "Return the provided character as the first element in each array.", - "For example, for the input GCG, return [[\"G\", \"C\"], [\"C\",\"G\"],[\"G\", \"C\"]]", - "The character and its pair are paired up in an array, and all the arrays are grouped into one encapsulating array.", - "Remember to use Read-Search-Ask if you get stuck. Try to pair program. Write your own code." + "在这道题目中，我们需要写一个函数，为 DNA 中的碱基配对。这个函数只接收一个表示碱基的字符串为参数，最后返回完成配对的二维数组。", + "碱基对 由一对碱基组成。碱基有四种，分别为 A（腺嘌呤）、T（胸腺嘧啶）、G（鸟嘌呤）和 C（胞嘧啶）。配对原则是：A 与 T 配对，C 与 G 配对。我们需要根据这个原则对传入的所有碱基进行配对。", + "对于每个传入的碱基，我们应采用数组的形式展示配对结果。其中，传入的碱基需要作为数组的第一个元素出现。最终返回的数组中应当包含参数中每一个碱基的配对结果。", + "比如，传入的参数是 GCG，那么函数的返回值应为 [[\"G\", \"C\"], [\"C\",\"G\"],[\"G\", \"C\"]]", + "如果你遇到了问题，请点击 帮助。" ], "solutions": [ "var lookup = Object.create(null);\nlookup.A = 'T';\nlookup.T = 'A';\nlookup.C = 'G';\nlookup.G = 'C';\n\nfunction pairElement(str) {\n return str.split('').map(function(p) {return [p, lookup[p]];});\n}" ], "tests": [ { - "text": "pairElement(\"ATCGA\") should return [[\"A\",\"T\"],[\"T\",\"A\"],[\"C\",\"G\"],[\"G\",\"C\"],[\"A\",\"T\"]].", - "testString": "assert.deepEqual(pairElement(\"ATCGA\"),[[\"A\",\"T\"],[\"T\",\"A\"],[\"C\",\"G\"],[\"G\",\"C\"],[\"A\",\"T\"]], 'pairElement(\"ATCGA\") should return [[\"A\",\"T\"],[\"T\",\"A\"],[\"C\",\"G\"],[\"G\",\"C\"],[\"A\",\"T\"]].');" + "text": "pairElement(\"ATCGA\") 应该返回 [[\"A\",\"T\"],[\"T\",\"A\"],[\"C\",\"G\"],[\"G\",\"C\"],[\"A\",\"T\"]]。", + "testString": "assert.deepEqual(pairElement(\"ATCGA\"),[[\"A\",\"T\"],[\"T\",\"A\"],[\"C\",\"G\"],[\"G\",\"C\"],[\"A\",\"T\"]], 'pairElement(\"ATCGA\") 应该返回 [[\"A\",\"T\"],[\"T\",\"A\"],[\"C\",\"G\"],[\"G\",\"C\"],[\"A\",\"T\"]]。');" }, { - "text": "pairElement(\"TTGAG\") should return [[\"T\",\"A\"],[\"T\",\"A\"],[\"G\",\"C\"],[\"A\",\"T\"],[\"G\",\"C\"]].", - "testString": "assert.deepEqual(pairElement(\"TTGAG\"),[[\"T\",\"A\"],[\"T\",\"A\"],[\"G\",\"C\"],[\"A\",\"T\"],[\"G\",\"C\"]], 'pairElement(\"TTGAG\") should return [[\"T\",\"A\"],[\"T\",\"A\"],[\"G\",\"C\"],[\"A\",\"T\"],[\"G\",\"C\"]].');" + "text": "pairElement(\"TTGAG\") 应该返回 [[\"T\",\"A\"],[\"T\",\"A\"],[\"G\",\"C\"],[\"A\",\"T\"],[\"G\",\"C\"]]。", + "testString": "assert.deepEqual(pairElement(\"TTGAG\"),[[\"T\",\"A\"],[\"T\",\"A\"],[\"G\",\"C\"],[\"A\",\"T\"],[\"G\",\"C\"]], 'pairElement(\"TTGAG\") 应该返回 [[\"T\",\"A\"],[\"T\",\"A\"],[\"G\",\"C\"],[\"A\",\"T\"],[\"G\",\"C\"]]。');" }, { - "text": "pairElement(\"CTCTA\") should return [[\"C\",\"G\"],[\"T\",\"A\"],[\"C\",\"G\"],[\"T\",\"A\"],[\"A\",\"T\"]].", - "testString": "assert.deepEqual(pairElement(\"CTCTA\"),[[\"C\",\"G\"],[\"T\",\"A\"],[\"C\",\"G\"],[\"T\",\"A\"],[\"A\",\"T\"]], 'pairElement(\"CTCTA\") should return [[\"C\",\"G\"],[\"T\",\"A\"],[\"C\",\"G\"],[\"T\",\"A\"],[\"A\",\"T\"]].');" + "text": "pairElement(\"CTCTA\") 应该返回 [[\"C\",\"G\"],[\"T\",\"A\"],[\"C\",\"G\"],[\"T\",\"A\"],[\"A\",\"T\"]]。", + "testString": "assert.deepEqual(pairElement(\"CTCTA\"),[[\"C\",\"G\"],[\"T\",\"A\"],[\"C\",\"G\"],[\"T\",\"A\"],[\"A\",\"T\"]], 'pairElement(\"CTCTA\") 应该返回 [[\"C\",\"G\"],[\"T\",\"A\"],[\"C\",\"G\"],[\"T\",\"A\"],[\"A\",\"T\"]]。');" } ], "MDNlinks": [ @@ -536,33 +534,33 @@ "id": "af7588ade1100bde429baf20", "title": "Missing letters", "description": [ - "Find the missing letter in the passed letter range and return it.", - "If all letters are present in the range, return undefined.", - "Remember to use Read-Search-Ask if you get stuck. Try to pair program. Write your own code." + "在这道题目中，我们需要写一个函数，找到传入的字符串里缺失的字母并返回它。", + "判断缺失的依据是字母顺序，比如 abcdfg 中缺失了 e。而 abcdef 中就没有字母缺失，此时我们需要返回 undefined。", + "如果你遇到了问题，请点击 帮助。" ], "solutions": [ "function fearNotLetter (str) {\n for (var i = str.charCodeAt(0); i <= str.charCodeAt(str.length - 1); i++) {\n var letter = String.fromCharCode(i);\n if (str.indexOf(letter) === -1) {\n return letter;\n }\n }\n \n return undefined;\n}" ], "tests": [ { - "text": "fearNotLetter(\"abce\") should return \"d\".", - "testString": "assert.deepEqual(fearNotLetter('abce'), 'd', 'fearNotLetter(\"abce\") should return \"d\".');" + "text": "fearNotLetter(\"abce\") 应该返回 \"d\"。", + "testString": "assert.deepEqual(fearNotLetter('abce'), 'd', 'fearNotLetter(\"abce\") 应该返回 \"d\"。');" }, { - "text": "fearNotLetter(\"abcdefghjklmno\") should return \"i\".", - "testString": "assert.deepEqual(fearNotLetter('abcdefghjklmno'), 'i', 'fearNotLetter(\"abcdefghjklmno\") should return \"i\".');" + "text": "fearNotLetter(\"abcdefghjklmno\") 应该返回 \"i\"。", + "testString": "assert.deepEqual(fearNotLetter('abcdefghjklmno'), 'i', 'fearNotLetter(\"abcdefghjklmno\") 应该返回 \"i\"。');" }, { - "text": "fearNotLetter(\"stvwx\") should return \"u\".", - "testString": "assert.deepEqual(fearNotLetter('stvwx'), 'u', 'fearNotLetter(\"stvwx\") should return \"u\".');" + "text": "fearNotLetter(\"stvwx\") 应该返回 \"u\"。", + "testString": "assert.deepEqual(fearNotLetter('stvwx'), 'u', 'fearNotLetter(\"stvwx\") 应该返回 \"u\"。');" }, { - "text": "fearNotLetter(\"bcdf\") should return \"e\".", - "testString": "assert.deepEqual(fearNotLetter('bcdf'), 'e', 'fearNotLetter(\"bcdf\") should return \"e\".');" + "text": "fearNotLetter(\"bcdf\") 应该返回 \"e\"。", + "testString": "assert.deepEqual(fearNotLetter('bcdf'), 'e', 'fearNotLetter(\"bcdf\") 应该返回 \"e\"。');" }, { - "text": "fearNotLetter(\"abcdefghijklmnopqrstuvwxyz\") should return undefined.", - "testString": "assert.isUndefined(fearNotLetter('abcdefghijklmnopqrstuvwxyz'), 'fearNotLetter(\"abcdefghijklmnopqrstuvwxyz\") should return undefined.');" + "text": "fearNotLetter(\"abcdefghijklmnopqrstuvwxyz\") 应该返回 undefined。", + "testString": "assert.isUndefined(fearNotLetter('abcdefghijklmnopqrstuvwxyz'), 'fearNotLetter(\"abcdefghijklmnopqrstuvwxyz\") 应该返回 undefined。');" } ], "MDNlinks": [ @@ -592,31 +590,30 @@ "id": "a105e963526e7de52b219be9", "title": "Sorted Union", "description": [ - "Write a function that takes two or more arrays and returns a new array of unique values in the order of the original provided arrays.", - "In other words, all values present from all arrays should be included in their original order, but with no duplicates in the final array.", - "The unique numbers should be sorted by their original order, but the final array should not be sorted in numerical order.", - "Check the assertion tests for examples.", - "Remember to use Read-Search-Ask if you get stuck. Try to pair program. Write your own code." + "在这道题目中，我们需要写一个函数，它接收两个或多个数组为参数。我们需要对这些数组中所有元素进行去除重复元素的处理，并以数组的形式返回去重结果。", + "需要注意的是，结果数组中的元素顺序必须与其传入的顺序保持一致。", + "如有疑问，请先浏览下方的测试用例。", + "如果你遇到了问题，请点击 帮助。" ], "solutions": [ "function uniteUnique(arr) {\n return [].slice.call(arguments).reduce(function(a, b) {\n return [].concat(a, b.filter(function(e) {return a.indexOf(e) === -1;}));\n }, []);\n}" ], "tests": [ { - "text": "uniteUnique([1, 3, 2], [5, 2, 1, 4], [2, 1]) should return [1, 3, 2, 5, 4].", - "testString": "assert.deepEqual(uniteUnique([1, 3, 2], [5, 2, 1, 4], [2, 1]), [1, 3, 2, 5, 4], 'uniteUnique([1, 3, 2], [5, 2, 1, 4], [2, 1]) should return [1, 3, 2, 5, 4].');" + "text": "uniteUnique([1, 3, 2], [5, 2, 1, 4], [2, 1]) 应该返回 [1, 3, 2, 5, 4]。", + "testString": "assert.deepEqual(uniteUnique([1, 3, 2], [5, 2, 1, 4], [2, 1]), [1, 3, 2, 5, 4], 'uniteUnique([1, 3, 2], [5, 2, 1, 4], [2, 1]) 应该返回 [1, 3, 2, 5, 4]。');" }, { - "text": "uniteUnique([1, 3, 2], [1, [5]], [2, [4]]) should return [1, 3, 2, [5], [4]].", - "testString": "assert.deepEqual(uniteUnique([1, 3, 2], [1, [5]], [2, [4]]), [1, 3, 2, [5], [4]], 'uniteUnique([1, 3, 2], [1, [5]], [2, [4]]) should return [1, 3, 2, [5], [4]].');" + "text": "uniteUnique([1, 3, 2], [1, [5]], [2, [4]]) 应该返回 [1, 3, 2, [5], [4]]。", + "testString": "assert.deepEqual(uniteUnique([1, 3, 2], [1, [5]], [2, [4]]), [1, 3, 2, [5], [4]], 'uniteUnique([1, 3, 2], [1, [5]], [2, [4]]) 应该返回 [1, 3, 2, [5], [4]]。');" }, { - "text": "uniteUnique([1, 2, 3], [5, 2, 1]) should return [1, 2, 3, 5].", - "testString": "assert.deepEqual(uniteUnique([1, 2, 3], [5, 2, 1]), [1, 2, 3, 5], 'uniteUnique([1, 2, 3], [5, 2, 1]) should return [1, 2, 3, 5].');" + "text": "uniteUnique([1, 2, 3], [5, 2, 1]) 应该返回 [1, 2, 3, 5]。", + "testString": "assert.deepEqual(uniteUnique([1, 2, 3], [5, 2, 1]), [1, 2, 3, 5], 'uniteUnique([1, 2, 3], [5, 2, 1]) 应该返回 [1, 2, 3, 5]。');" }, { - "text": "uniteUnique([1, 2, 3], [5, 2, 1, 4], [2, 1], [6, 7, 8]) should return [1, 2, 3, 5, 4, 6, 7, 8].", - "testString": "assert.deepEqual(uniteUnique([1, 2, 3], [5, 2, 1, 4], [2, 1], [6, 7, 8]), [1, 2, 3, 5, 4, 6, 7, 8], 'uniteUnique([1, 2, 3], [5, 2, 1, 4], [2, 1], [6, 7, 8]) should return [1, 2, 3, 5, 4, 6, 7, 8].');" + "text": "uniteUnique([1, 2, 3], [5, 2, 1, 4], [2, 1], [6, 7, 8]) 应该返回 [1, 2, 3, 5, 4, 6, 7, 8]。", + "testString": "assert.deepEqual(uniteUnique([1, 2, 3], [5, 2, 1, 4], [2, 1], [6, 7, 8]), [1, 2, 3, 5, 4, 6, 7, 8], 'uniteUnique([1, 2, 3], [5, 2, 1, 4], [2, 1], [6, 7, 8]) 应该返回 [1, 2, 3, 5, 4, 6, 7, 8]。');" } ], "MDNlinks": [ @@ -646,40 +643,40 @@ "id": "a6b0bb188d873cb2c8729495", "title": "Convert HTML Entities", "description": [ - "Convert the characters &, <, >, \" (double quote), and ' (apostrophe), in a string to their corresponding HTML entities.", - "Remember to use Read-Search-Ask if you get stuck. Try to pair program. Write your own code." + "在这道题目中，我们需要写一个转换 HTML entity 的函数。需要转换的 HTML entity 有 &、<、>、\"（双引号）和 '（单引号）。转换的规则你可以在 W3C 官网找到。", + "如果你遇到了问题，请点击 帮助。" ], "solutions": [ "var MAP = { '&': '&',\n '<': '<',\n '>': '>',\n '\"': '"',\n \"'\": '''};\n\nfunction convertHTML(str) {\n return str.replace(/[&<>\"']/g, function(c) {\n return MAP[c];\n });\n}" ], "tests": [ { - "text": "convertHTML(\"Dolce & Gabbana\") should return Dolce &​amp; Gabbana.", - "testString": "assert.match(convertHTML(\"Dolce & Gabbana\"), /Dolce & Gabbana/, 'convertHTML(\"Dolce & Gabbana\") should return Dolce &​amp; Gabbana.');" + "text": "convertHTML(\"Dolce & Gabbana\") 应该返回 Dolce &​amp; Gabbana。", + "testString": "assert.match(convertHTML(\"Dolce & Gabbana\"), /Dolce & Gabbana/, 'convertHTML(\"Dolce & Gabbana\") 应该返回 Dolce &​amp; Gabbana。');" }, { - "text": "convertHTML(\"Hamburgers < Pizza < Tacos\") should return Hamburgers &​lt; Pizza &​lt; Tacos.", - "testString": "assert.match(convertHTML(\"Hamburgers < Pizza < Tacos\"), /Hamburgers < Pizza < Tacos/, 'convertHTML(\"Hamburgers < Pizza < Tacos\") should return Hamburgers &​lt; Pizza &​lt; Tacos.');" + "text": "convertHTML(\"Hamburgers < Pizza < Tacos\") 应该返回 Hamburgers &​lt; Pizza &​lt; Tacos。", + "testString": "assert.match(convertHTML(\"Hamburgers < Pizza < Tacos\"), /Hamburgers < Pizza < Tacos/, 'convertHTML(\"Hamburgers < Pizza < Tacos\") 应该返回 Hamburgers &​lt; Pizza &​lt; Tacos。');" }, { - "text": "convertHTML(\"Sixty > twelve\") should return Sixty &​gt; twelve.", - "testString": "assert.match(convertHTML(\"Sixty > twelve\"), /Sixty > twelve/, 'convertHTML(\"Sixty > twelve\") should return Sixty &​gt; twelve.');" + "text": "convertHTML(\"Sixty > twelve\") 应该返回 Sixty &​gt; twelve。", + "testString": "assert.match(convertHTML(\"Sixty > twelve\"), /Sixty > twelve/, 'convertHTML(\"Sixty > twelve\") 应该返回 Sixty &​gt; twelve。');" }, { - "text": "convertHTML('Stuff in \"quotation marks\"') should return Stuff in &​quot;quotation marks&​quot;.", - "testString": "assert.match(convertHTML('Stuff in \"quotation marks\"'), /Stuff in "quotation marks"/, 'convertHTML('Stuff in \"quotation marks\"') should return Stuff in &​quot;quotation marks&​quot;.');" + "text": "convertHTML('Stuff in \"quotation marks\"') 应该返回 Stuff in &​quot;quotation marks&​quot;。", + "testString": "assert.match(convertHTML('Stuff in \"quotation marks\"'), /Stuff in "quotation marks"/, 'convertHTML('Stuff in \"quotation marks\"') 应该返回 Stuff in &​quot;quotation marks&​quot;。');" }, { - "text": "convertHTML(\"Schindler's List\") should return Schindler&​apos;s List.", - "testString": "assert.match(convertHTML(\"Schindler's List\"), /Schindler's List/, 'convertHTML(\"Schindler's List\") should return Schindler&​apos;s List.');" + "text": "convertHTML(\"Schindler's List\") 应该返回 Schindler&​apos;s List。", + "testString": "assert.match(convertHTML(\"Schindler's List\"), /Schindler's List/, 'convertHTML(\"Schindler's List\") 应该返回 Schindler&​apos;s List。');" }, { - "text": "convertHTML(\"<>\") should return &​lt;&​gt;.", - "testString": "assert.match(convertHTML('<>'), /<>/, 'convertHTML(\"<>\") should return &​lt;&​gt;.');" + "text": "convertHTML(\"<>\") 应该返回 &​lt;&​gt;。", + "testString": "assert.match(convertHTML('<>'), /<>/, 'convertHTML(\"<>\") 应该返回 &​lt;&​gt;。');" }, { - "text": "convertHTML(\"abc\") should return abc.", - "testString": "assert.strictEqual(convertHTML('abc'), 'abc', 'convertHTML(\"abc\") should return abc.');" + "text": "convertHTML(\"abc\") 应该返回 abc。", + "testString": "assert.strictEqual(convertHTML('abc'), 'abc', 'convertHTML(\"abc\") 应该返回 abc。');" } ], "MDNlinks": [ @@ -1309,4 +1306,4 @@ } } ] -} \ No newline at end of file +} From 8cf8e94b4777ebb4d845106febc02f3539c1323c Mon Sep 17 00:00:00 2001 From: Xing Liu Date: Thu, 26 Jul 2018 02:59:12 -0700 Subject: [PATCH 26/37] Add CONTRIBUTING.md (#15) MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit * Add CONTRIBUTING.md, add guide of git * address review comments - Pick pull --rebase among three options - Update guideline of resolving conflicts * Add git FAQ. Remove labels def as for not needed * Fix style issue, using HTML tags * Update Details w/ GFM, fix wrong command * Update FAQ with guide of resolving conflicts and clarification of git add . vs git add -A * Update CONTRIBUTING.md 更新了下排版 * Update CONTRIBUTING.md 更改符号的使用 * Update CONTRIBUTING.md continue fix some type error --- CONTRIBUTING.md | 243 ++++++++++++++++++++++++++++++++++++++++++++++++ 1 file changed, 243 insertions(+) create mode 100644 CONTRIBUTING.md diff --git a/CONTRIBUTING.md b/CONTRIBUTING.md new file mode 100644 index 0000000..53ba8a0 --- /dev/null +++ b/CONTRIBUTING.md @@ -0,0 +1,243 @@ +# 关于 git 和 github +## 常用词汇 +- repo：代码仓库 +- PR：即 pull request，合并请求 +- branch：分支 +- commit：提交记录 +- merge：指 PR 合并到代码仓库的操作 +- conflicts：（合并）冲突 + +## 开始之前 +* 首先，fork 一下 [challenges](https://github.com/FreeCodeCampChina/challenges.git) repo。 + +* 把**你的 fork** 克隆到本地。 + ```bash + git clone https://github.com/your_name/challenges.git # 注意，`your_name` 是你的 github ID。 + ``` +* 切换到 challenges 文件夹。 + ```bash + cd challenges + ``` +* 根据你在翻译的项目名称或者你正在做的事情，新建分支。 + ```bash + # 建议每次都从 translate 分支建立新的分支 + # 请参考后面的“常见问题” + git checkout -b your_branch_name # `your_branch_name` 是你的分支名 + ``` +* 在本地进行代码或文件修改。 + +* 添加要追踪的文件到暂存区。 + ```bash + git add . # 注：这个命令不是永远都会添加你的所有改动，请参考“常见问题”。 + git add my.json # 或者你也可以添加某一个文件 + ``` +* 提交 commit 到本地仓库。 + ```bash + git commit -m "My commit message" # 注意，请根据实际情况填写 commit message。 + git commit # 或者你也可以打开你喜欢的编辑器（需要配置），在里面编写 commit message。 + ``` +* 把本地仓库推送到远程仓库。 + ```bash + git push origin your_branch_name + ``` +* 打开 github 页面，创建 PR。 + +## 同步远程更新至本地 +* 关联上游 repo 至本地项目。 + ```bash + git remote add upstream https://github.com/FreeCodeCampChina/challenges.git + ``` +* 获取上游更新，并应用到本地。 + ```bash + git pull --rebase upstream translate + ``` + +## 注意 +* `pull` 或 `rebase` 之后，如果有 conflicts，可以先使用 `git status` 查看存在 conflicts 的文件。 + + 修改成需要的版本后，使用 `git add .` 然后 `git rebase --continue`。 + +* 解决冲突之后，需要更新至远程，否则只有你的本地有更新。 + ```bash + git push origin your_branch_name + ``` +* 如果出现错误提示，请先使用 `git status` 命令检查本地是否有未解决完成的 conflicts。 + +* 任何时候出现错误，不必惊慌。 + + 先使用 `git status` 命令检查当前所在的分支、当前目录是否纯净（clean），以及本地是否有未解决完成的 conflicts。 + +* 如果上一步没问题，你可以用 `git push -f origin your_branch_name` 来更新远程。 + +* 如果你已经用当前的 branch 开了 PR，那么更新这个 branch 至远程的同时，你的 PR 也会自动更新。 + +## 常见问题 +
为什么 `git add .` 命令有时会添加不上我的改动？ + + 注意，`git add .` 中的 `.` 表示“当前路径”。 + + 因此，如果你通过 `cd` 命令切换到子目录，并在里面执行 `git add .`，那么外面的改动则不会添加。 + + 然而，如果你在父级目录执行 `git add .`，子级目录里的文件改动是会添加的。 + + 真正的“添加所有文件”的命令是 `git add --all`，可以简写为 `git add -A`。 + + 对于这个翻译项目，我们很少会需要 `cd` 进子目录。因此，一般情况下使用 `git add .` 就足够了。 + +
+ +
如何解决冲突？ + + 对于任何多人协作项目，有 merge conflicts 是十分正常的。 + + 如果你在命令行中看到了 `CONFLICTS` 这样的输出，那就表示有冲突。 + + 这时，你需要先使用 `git status` 命令来查看冲突发生的文件。 + + 一般来说，有冲突的文件会显示成这样： + + ```text + some code ....（这里的代码是没有冲突的） + <<<<<<< HEAD + code version 1 + code version 1 + ======= + code version 2 + code version 2 + >>>>>>> your_branch_name + yet some other code ....（这里的代码也是没有冲突的） + ``` + + 注意，里面的 `HEAD` 和 `your_branch_name` 位置可能互换，也可能会是其他内容，比如一个 commit hash。 + + 其中，`<<<<<<<` 与 `=======` 之间为代码的一个版本，`=======` 与 `>>>>>>>` 之间为代码的另一个版本。 + + 你需要来决定使用哪个版本的代码，修改的时候，把 `<<<<<<<`、`=======` 和 `>>>>>>>` 这三行都删掉。 + + 以及，删掉你不需要的那个版本，保留你需要的版本。 + + 处理完所有的冲突文件后，（由于我们执行的是 `git pull --rebase`），那么我们需要 `git add .`，然后 `git rebase --continue`。 + +
+ +
如果某个文件我没有改动，在处理冲突的时候如何可以使用 upstream 上 translate 分支的版本？ + + 有时，可能会存在你没修改某个文件的内容，然而它却出现在了 conflicts 里（特别是如果你之前使用过 `pull`，而不是 `pull --rebase`）。 + + 这时，我们输入：。 + + ```bash + git fetch upstream + git checkout upstream/translate -- the/path/to/that_file + ``` + + 这时，你本地的这个文件就变成和远程一样了。 + + 处理之后，记得 `git add .`。 + +
+ +
如何查看我当前处于哪个分支？ + + `git branch` 可以列出本地所有的分支名，前面打星号（*）的就是你当前所在的分支。 + +
+ +
如何切换分支？ + + `git checkout some_branch_name` 就可以切换到对应的分支。 + + 以及，`git checkout -` 可以切换到上一个切换过的分支。 + + 在两个分支之间来回切换的时候，这个命令会很有用。 + +
+ +
新建分支的时候，与我当前所在的分支有关联么？ + + 有，新建分支的时候，当前所在分支的所有 `commit` 也会添加到新的分支里面。 + + 以及，如果你本地有未 `commit` 的改动（哪怕已经 `add` 过），同样会在新建分支的时候带过去。 + +
+ +
既然切换 branch 时代码会跟着走，我正在别的分支上翻译，突然让我去更新之前开了 PR 的另一个分支，我该怎么办？ + + 你有两个选择，`commit` 或者 `stash`： + + * `commit` 很简单，在当前分支上 `git add .` 然后 `git commit -m "xx"`，这时候你就可以使用 `checkout` 命令切换到其他分支了。 + + * 在当前分支上 `git stash`，然后切换到其他分支。完成那边的更新后，切换回来，然后 `git stash pop`，你之前的代码改动就都回来了。 + + 需要注意的是，使用 `git stash pop` 会有丢代码的潜在风险，推荐使用 `git stash apply stash@{x}`，其中 `x` 为一个数字。 + + 如果你不确定你的做法是否正确，或者不了解这个命令，请在使用之前查清资料，或者在群里提问。 + + **切换分支前，为防止把本地弄乱，前先使用 `git status` 来检查本地是否 “clean”。** + +
+ +
我可不可以根据远程的分支（比如 upstream 的 translate 分支）来创建本地分支？ + + 可以： + ```bash + git fetch upstream + git checkout -b my_branch_name upstream/translate + ``` + +
+ +
每次都从远程创建分支太麻烦，我可不可以直接从本地创建分支？ + + 可以。建议使用本地的 translate 分支保持与 upstream 中的 translate 分支保持更新。这样做的好处是： + + * 每次新建分支的时候，切换到本地的 translate 分支，然后 `git checkout -b my_new_branch` 就好了。 + + * 如果 upstream 的 translate branch 有更新，你只需要在切换到 translate 分支之后，`git pull --rebase upstream translate` 即可完成对本地 translate 分支的更新。再创建新的分支，就是基于 upstream 里最新的代码了，这样可以减少 conflicts 出现的可能。 + +
+ +
我在一个分支上 commit 了我的代码，这时候 upstream 更新了，我该怎么做？ + + ```bash + git pull --rebase upstream translate + ``` + +
+ +
我的本地 translate 分支已经有我的 commit 了，那我该如何用这个分支作为与 upstream translate 同步的分支呢？ + + **如果你目前在 translate 提交的内容不再需要了（比如，已经 merge），那你可以先切换到 translate，然后：** + + ```bash + git fetch upstream + git reset --hard upstream/translate + ``` + + 虽然 `git reset` 命令不危险，但在执行这个操作之前，建议你先在群里问一下。 + +
+ +
命令好长，我不想记。 + + `alias` 了解一下。在命令行里执行： + + ```bash + git config --global alias.gx 'pull --rebase upstream translate' + ``` + + 下次，执行 `git gx`（记忆：git 更新），就会执行你定义好的命令了。 + +
+ +## 一些原则 +* 建议使用 [git workflow](https://guides.github.com/introduction/flow/) 来进行分支的管理。 + + 这样我们可以提交 PR 之后继续在新的 branch 上进行后续的翻译，若需要更新当前的 PR，我们随时可以切换回来。 + +* 不建议同时开两个相同类型（比如翻译）的 PR，请等待之前的 merge 之后再开新的 PR。 + +* 如果你的 PR 已经被 review 过，请不要再添加新的翻译内容，根据 comment 修改好当前的 PR 即可。 + + 后续的翻译你可以等当前翻译 merge 后再开始做，或者在另一个本地的 branch 进行后续的翻译。 + From 4a711dca66c7aa8265356f9997ffb9f0a218e595 Mon Sep 17 00:00:00 2001 From: Xing Liu Date: Thu, 26 Jul 2018 23:53:57 -0700 Subject: [PATCH 27/37] Update .gitignore that captures .vscode.*\.json (#28) Add a pattern that captures .vscode.*\.json, as provided by #7 --- .gitignore | 1 + 1 file changed, 1 insertion(+) diff --git a/.gitignore b/.gitignore index 804a9d6..3715b4c 100644 --- a/.gitignore +++ b/.gitignore @@ -17,6 +17,7 @@ Session.vim # VSCode .vscode/* +.vscode*.json # Jetbrains .idea/ From 588c816f1a70cc089755c09999ceb48e77e7b79f Mon Sep 17 00:00:00 2001 From: huluoyang Date: Fri, 27 Jul 2018 16:56:05 +0800 Subject: [PATCH 28/37] Fix (#29) * fix some typo error * remove upcoming fileds * resolve conflicts --- .../applied-accessibility.md | 46 - .../applied-visual-design.md | 105 -- 01-responsive-web-design/basic-css.md | 87 -- .../basic-html-and-html5.md | 58 +- 01-responsive-web-design/css-flexbox.md | 36 - 01-responsive-web-design/css-grid.md | 48 +- .../responsive-web-design-principles.md | 10 - .../responsive-web-design-projects.md | 12 - .../basic-algorithm-scripting.md | 34 - .../basic-data-structures.md | 42 - .../basic-javascript.md | 216 ---- .../debugging.md | 28 +- .../es6.md | 54 - .../functional-programming.md | 50 +- .../intermediate-algorithm-scripting.md | 44 +- ...algorithms-and-data-structures-projects.md | 12 - .../object-oriented-programming.md | 54 - .../regular-expressions.md | 66 -- 03-front-end-libraries/bootstrap.md | 64 -- .../data-visualization-with-d3.md | 60 -- .../front-end-libraries-projects.md | 12 - 03-front-end-libraries/jquery.md | 38 - 03-front-end-libraries/json-apis-and-ajax.md | 20 - 03-front-end-libraries/react-and-redux.md | 21 - 03-front-end-libraries/react.md | 98 -- 03-front-end-libraries/redux.md | 36 - 03-front-end-libraries/sass.md | 20 - .../data-visualization-projects.md | 12 - .../data-visualization-with-d3.md | 60 -- 04-data-visualization/json-apis-and-ajax.md | 20 - .../apis-and-microservices-projects.md | 12 - .../basic-node-and-express.md | 26 - .../managing-packages-with-npm.md | 22 - .../mongodb-and-mongoose.md | 26 - .../advanced-node-and-express.md | 46 - ...security-and-quality-assurance-projects.md | 11 - .../information-security-with-helmetjs.md | 29 - ...quality-assurance-and-testing-with-chai.md | 50 - 08-coding-interview-prep/algorithms.md | 19 - 08-coding-interview-prep/data-structures.md | 96 -- 08-coding-interview-prep/project-euler.md | 961 ------------------ 08-coding-interview-prep/rosetta-code.md | 176 ---- .../take-home-projects.md | 41 - 43 files changed, 5 insertions(+), 2973 deletions(-) diff --git a/01-responsive-web-design/applied-accessibility.md b/01-responsive-web-design/applied-accessibility.md index d455128..adf01d8 100644 --- a/01-responsive-web-design/applied-accessibility.md +++ b/01-responsive-web-design/applied-accessibility.md @@ -11,49 +11,3 @@ Having accessible web content is an ongoing challenge. A great resource for your projects going forward is the W3 Consortium's Web Content Accessibility Guidelines (WCAG). They set the international standard for accessibility and provide a number of criteria you can use to check your work. - -# Upcoming Lessons # - -Add a Text Alternative to Images for Visually Impaired Accessibility - -Know When Alt Text Should be Left Blank - -Use Headings to Show Hierarchical Relationships of Content - -Jump Straight to the Content Using the main Element - -Wrap Content in the article Element - -Make Screen Reader Navigation Easier with the header Landmark - -Make Screen Reader Navigation Easier with the nav Landmark - -Make Screen Reader Navigation Easier with the footer Landmark - -Improve Accessibility of Audio Content with the audio Element - -Improve Chart Accessibility with the figure Element - -Improve Form Field Accessibility with the label Element - -Wrap Radio Buttons in a fieldset Element for Better Accessibility - -Add an Accessible Date Picker - -Standardize Times with the HTML5 datetime Attribute - -Make Elements Only Visible to a Screen Reader by Using Custom CSS - -Improve Readability with High Contrast Text - -Avoid Colorblindness Issues by Using Sufficient Contrast - -Avoid Colorblindness Issues by Carefully Choosing Colors that Convey Information - -Give Links Meaning by Using Descriptive Link Text - -Make Links Navigatable with HTML Access Keys - -Use tabindex to Add Keyboard Focus to an Element - -Use tabindex to Specify the Order of Keyboard Focus for Several Elements \ No newline at end of file diff --git a/01-responsive-web-design/applied-visual-design.md b/01-responsive-web-design/applied-visual-design.md index 305d863..dce164c 100644 --- a/01-responsive-web-design/applied-visual-design.md +++ b/01-responsive-web-design/applied-visual-design.md @@ -6,108 +6,3 @@ At a basic level, most web content provides a user with information. The visual This section covers some of the basic tools developers use to create their own visual designs. -# Upcoming Lessons # - -Create Visual Balance Using the text-align Property - -Adjust the Width of an Element Using the width Property - -Adjust the Height of an Element Using the height Property - -Use the strong Tag to Make Text Bold - -Use the u Tag to Underline Text - -Use the em Tag to Italicize Text - -Use the del Tag to Strikethrough Text - -Create a Horizontal Line Using the hr Element - -Adjust the background-color Property of Text - -Adjust the Size of a Header Versus a Paragraph Tag - -Add a box-shadow to a Card-like Element - -Decrease the Opacity of an Element - -Use the text-transform Property to Make Text Uppercase - -Set the font-size for Multiple Heading Elements - -Set the font-weight for Multiple Heading Elements - -Set the font-size of Paragraph Text - -Set the line-height of Paragraphs - -Adjust the Hover State of an Anchor Tag - -Change an Element's Relative Position - -Move a Relatively Positioned Element with CSS Offsets - -Lock an Element to its Parent with Absolute Positioning - -Lock an Element to the Browser Window with Fixed Positioning - -Push Elements Left or Right with the float Property - -Change the Position of Overlapping Elements with the z-index Property - -Center an Element Horizontally Using the margin Property - -Learn about Complementary Colors - -Learn about Tertiary Colors - -Adjust the Color of Various Elements to Complementary Colors - -Adjust the Hue of a Color - -Adjust the Tone of a Color - -Create a Gradual CSS Linear Gradient - -Use a CSS Linear Gradient to Create a Striped Element - -Create Texture by Adding a Subtle Pattern as a Background Image - -Use the CSS Transform scale Property to Change the Size of an Element - -Use the CSS Transform scale Property to Scale an Element on Hover - -Use the CSS Transform Property skewX to Skew an Element Along the X-Axis - -Use the CSS Transform Property skewY to Skew an Element Along the Y-Axis - -Create a Graphic Using CSS - -Create a More Complex Shape Using CSS and HTML - -Learn How the CSS @keyframes and animation Properties Work - -Use CSS Animation to Change the Hover State of a Button - -Modify Fill Mode of an Animation - -Create Movement Using CSS Animation - -Create Visual Direction by Fading an Element from Left to Right - -Animate Elements Continually Using an Infinite Animation Count - -Make a CSS Heartbeat using an Infinite Animation Count - -Animate Elements at Variable Rates - -Animate Multiple Elements at Variable Rates - -Change Animation Timing with Keywords - -Learn How Bezier Curves Work - -Use a Bezier Curve to Move a Graphic - -Make Motion More Natural Using a Bezier Curve \ No newline at end of file diff --git a/01-responsive-web-design/basic-css.md b/01-responsive-web-design/basic-css.md index 9b27984..c3c039c 100644 --- a/01-responsive-web-design/basic-css.md +++ b/01-responsive-web-design/basic-css.md @@ -16,90 +16,3 @@ There are three main ways to apply CSS styling. You can apply inline styles dire In this section, you'll see how adding CSS styles to the elements of your CatPhotoApp can change it from simple text to something more. -# Upcoming Lessons # - -Change the Color of Text - -Use CSS Selectors to Style Elements - -Use a CSS Class to Style an Element - -Style Multiple Elements with a CSS Class - -Change the Font Size of an Element - -Set the Font Family of an Element - -Import a Google Font - -Specify How Fonts Should Degrade - -Size Your Images - -Add Borders Around Your Elements - -Add Rounded Corners with border-radius - -Make Circular Images with a border-radius - -Give a Background Color to a div Element - -Set the id of an Element - -Use an id Attribute to Style an Element - -Adjust the Padding of an Element - -Adjust the Margin of an Element - -Add a Negative Margin to an Element - -Add Different Padding to Each Side of an Element - -Add Different Margins to Each Side of an Element - -Use Clockwise Notation to Specify the Padding of an Element - -Use Clockwise Notation to Specify the Margin of an Element - -Use Attribute Selectors to Style Elements - -Understand Absolute versus Relative Units - -Style the HTML Body Element - -Inherit Styles from the Body Element - -Prioritize One Style Over Another - -Override Styles in Subsequent CSS - -Override Class Declarations by Styling ID Attributes - -Override Class Declarations with Inline Styles - -Override All Other Styles by using Important - -Use Hex Code for Specific Colors - -Use Hex Code to Mix Colors - -Use Abbreviated Hex Code - -Use RGB values to Color Elements - -Use RGB to Mix Colors - -Use CSS Variables to change several elements at once - -Create a custom CSS Variable - -Use a custom CSS Variable - -Attach a Fallback value to a CSS Variable - -Cascading CSS variables - -Change a variable for a specific area - -Use a media query to change a variable \ No newline at end of file diff --git a/01-responsive-web-design/basic-html-and-html5.md b/01-responsive-web-design/basic-html-and-html5.md index 216faeb..6693e7e 100644 --- a/01-responsive-web-design/basic-html-and-html5.md +++ b/01-responsive-web-design/basic-html-and-html5.md @@ -31,60 +31,4 @@ The HyperText part of HTML comes from the early days of the web and its original As web pages and web applications grow more complex, the W3 Consortium updates the HTML specification to ensure that a webpage can be shown reliably on any browser. The latest version of HTML is HTML5. -This section introduces how to use HTML elements to give structure and meaning to your web content. - -# Upcoming Lessons # - -Say Hello to HTML Elements - -Headline with the h2 Element - -Inform with the Paragraph Element - -Fill in the Blank with Placeholder Text - -Uncomment HTML - -Comment out HTML - -Delete HTML Elements - -Introduction to HTML5 Elements - -Add Images to Your Website - -Link to External Pages with Anchor Elements - -Link to Internal Sections of a Page with Anchor Elements - -Nest an Anchor Element within a Paragraph - -Make Dead Links Using the Hash Symbol - -Turn an Image into a Link - -Create a Bulleted Unordered List - -Create an Ordered List - -Create a Text Field - -Add Placeholder Text to a Text Field - -Create a Form Element - -Add a Submit Button to a Form - -Use HTML5 to Require a Field - -Create a Set of Radio Buttons - -Create a Set of Checkboxes - -Check Radio Buttons and Checkboxes by Default - -Nest Many Elements within a Single div Element - -Declare the Doctype of an HTML Document - -Define the Head and Body of an HTML Document \ No newline at end of file +This section introduces how to use HTML elements to give structure and meaning to your web content. \ No newline at end of file diff --git a/01-responsive-web-design/css-flexbox.md b/01-responsive-web-design/css-flexbox.md index da12c5f..e38623e 100644 --- a/01-responsive-web-design/css-flexbox.md +++ b/01-responsive-web-design/css-flexbox.md @@ -3,39 +3,3 @@ A website's User Interface ("UI") has two components. First, there are the visual elements, such as colors, fonts, and images. Second, there is the placement or positioning of those elements. In Responsive Web Design, a UI layout must accommodate many different browsers and devices accessing the content. CSS3 introduced Flexible Boxes, or flexbox, to create page layouts for a dynamic UI. It is a layout mode that arranges elements in a predictable way for different screen sizes and browsers. While somewhat new, all popular modern browsers support flexbox. This section covers how to use flexbox and the different layout options it offers. - -# Upcoming Lessons # - -Use display: flex to Position Two Boxes - -Add Flex Superpowers to the Tweet Embed - -Use the flex-direction Property to Make a Row - -Apply the flex-direction Property to Create Rows in the Tweet Embed - -Use the flex-direction Property to Make a Column - -Apply the flex-direction Property to Create a Column in the Tweet Embed - -Align Elements Using the justify-content Property - -Use the justify-content Property in the Tweet Embed - -Align Elements Using the align-items Property - -Use the align-items Property in the Tweet Embed - -Use the flex-wrap Property to Wrap a Row or Column - -Use the flex-shrink Property to Shrink Items - -Use the flex-grow Property to Expand Items - -Use the flex-basis Property to Set the Initial Size of an Item - -Use the flex Shorthand Property - -Use the order Property to Rearrange Items - -Use the align-self Property \ No newline at end of file diff --git a/01-responsive-web-design/css-grid.md b/01-responsive-web-design/css-grid.md index 21185fc..681944f 100644 --- a/01-responsive-web-design/css-grid.md +++ b/01-responsive-web-design/css-grid.md @@ -1,49 +1,3 @@ # Introduction to the CSS Grid Challenges # -CSS Grid helps you easily build complex web designs. It works by turning an HTML element into a grid container with rows and columns for you to place children elements where you want within the grid. - -# Upcoming Lessons # - -Create Your First CSS Grid - -Add Columns with grid-template-columns - -Add Rows with grid-template-rows - -Use CSS Grid units to Change the Size of Columns and Rows - -Create a Column Gap Using grid-column-gap - -Create a Row Gap using grid-row-gap - -Add Gaps Faster with grid-gap - -Use grid-column to Control Spacing - -Use grid-row to Control Spacing - -Align an Item Horizontally using justify-self - -Align an Item Vertically using align-self - -Align All Items Horizontally using justify-items - -Align All Items Vertically using align-items - -Divide the Grid Into an Area Template - -Place Items in Grid Areas Using the grid-area Property - -Use grid-area Without Creating an Areas Template - -Reduce Repetition Using the repeat Function - -Limit Item Size Using the minmax Function - -Create Flexible Layouts Using auto-fill - -Create Flexible Layouts Using auto-fit - -Use Media Queries to Create Responsive Layouts - -Create Grids within Grids \ No newline at end of file +CSS Grid helps you easily build complex web designs. It works by turning an HTML element into a grid container with rows and columns for you to place children elements where you want within the grid. \ No newline at end of file diff --git a/01-responsive-web-design/responsive-web-design-principles.md b/01-responsive-web-design/responsive-web-design-principles.md index b7cf4fb..61cd0a9 100644 --- a/01-responsive-web-design/responsive-web-design-principles.md +++ b/01-responsive-web-design/responsive-web-design-principles.md @@ -1,13 +1,3 @@ # Introduction to the Responsive Web Design Principles # Today, there are many types of devices that can access the web. They range from large desktop computers to small mobile phones. These devices have different screen sizes, resolutions, and processing power. Responsive Web Design is an approach to designing web content that responds to the constraints of different devices. The page structure and CSS rules should be flexible to accommodate these differences. In general, design the page's CSS to your target audience. If you expect most of your traffic to be from mobile users, take a 'mobile-first' approach. Then add conditional rules for larger screen sizes. If your visitors are desktop users, then design for larger screens with conditional rules for smaller sizes. CSS gives you the tools to write different style rules, then apply them depending on the device displaying the page. This section will cover the basic ways to use CSS for Responsive Web Design. - -# Upcoming Lessons # - -Create a Media Query - -Make an Image Responsive - -Use a Retina Image for Higher Resolution Displays - -Make Typography Responsive \ No newline at end of file diff --git a/01-responsive-web-design/responsive-web-design-projects.md b/01-responsive-web-design/responsive-web-design-projects.md index b5e154d..9c035e6 100644 --- a/01-responsive-web-design/responsive-web-design-projects.md +++ b/01-responsive-web-design/responsive-web-design-projects.md @@ -10,16 +10,4 @@ In this section you get the chance to: * Build a Technical Documentation Page * Build a Personal Portfolio Webpage -By the end of this, you would have 5 responsive websites under your belt that you can show off to friends, family, employers, etc. Have fun and remember to use the Read-Search-Ask method if you get stuck. -# Upcoming Lessons # - -Build a Tribute Page - -Build a Survey Form - -Build a Product Landing Page - -Build a Technical Documentation Page - -Build a Personal Portfolio Webpage \ No newline at end of file diff --git a/02-javascript-algorithms-and-data-structures/basic-algorithm-scripting.md b/02-javascript-algorithms-and-data-structures/basic-algorithm-scripting.md index deeef5e..420ffed 100644 --- a/02-javascript-algorithms-and-data-structures/basic-algorithm-scripting.md +++ b/02-javascript-algorithms-and-data-structures/basic-algorithm-scripting.md @@ -9,37 +9,3 @@ In this section we will learn to solve basic algorithm problems using JavaScript ## Hint ## If you get stuck, try using console.log() to log variable values to the console. This will help to debug problems. - -# Upcoming Lessons # - -Convert Celsius to Fahrenheit - -Reverse a String - -Factorialize a Number - -Find the Longest Word in a String - -Return Largest Numbers in Arrays - -Confirm the Ending - -Repeat a String Repeat a String - -Truncate a String - -Finders Keepers - -Boo who - -Title Case a Sentence - -Slice and Splice - -Falsy Bouncer - -Where do I Belong - -Mutations - -Chunky Monkey \ No newline at end of file diff --git a/02-javascript-algorithms-and-data-structures/basic-data-structures.md b/02-javascript-algorithms-and-data-structures/basic-data-structures.md index dc11d35..7d1d651 100644 --- a/02-javascript-algorithms-and-data-structures/basic-data-structures.md +++ b/02-javascript-algorithms-and-data-structures/basic-data-structures.md @@ -1,45 +1,3 @@ # Introduction to the Basic Data Structure Challenges # Data can be stored and accessed in many different ways, both in Javascript and other languages. This section will teach you how to manipulate arrays, as well as access and copy the information within them. It will also teach you how to manipulate and access the data within Javascript objects, using both dot and bracket notation. When you're done with this section, you should understand the basic properties and differences between arrays and objects, as well as how to choose which to use for a given purpose. - -# Upcoming Lessons # - -Use an Array to Store a Collection of Data - -Access an Array's Contents Using Bracket Notation - -Add Items to an Array with push() and unshift() - -Remove Items from an Array with pop() and shift() - -Remove Items Using splice() - -Add Items Using splice() - -Copy Array Items Using slice() - -Copy an Array with the Spread Operator - -Combine Arrays with the Spread Operator - -Check For The Presence of an Element With indexOf() - -Iterate Through All an Array's Items Using For Loops - -Create complex multi-dimensional arrays - -Add Key-Value Pairs to JavaScript Objects - -Modify an Object Nested Within an Object - -Access Property Names with Bracket Notation - -Use the delete Keyword to Remove Object Properties - -Check if an Object has a Property - -Iterate Through the Keys of an Object with a for...in Statement - -Generate an Array of All Object Keys with Object.keys() - -Modify an Array Stored in an Object \ No newline at end of file diff --git a/02-javascript-algorithms-and-data-structures/basic-javascript.md b/02-javascript-algorithms-and-data-structures/basic-javascript.md index eca570f..1b46fe2 100644 --- a/02-javascript-algorithms-and-data-structures/basic-javascript.md +++ b/02-javascript-algorithms-and-data-structures/basic-javascript.md @@ -1,219 +1,3 @@ # Introduction to JavaScript # JavaScript is a high-level programming language that all modern web browsers support. It is also one of the core technologies of the web, along with HTML and CSS that you may have learned previously. This section will cover basic JavaScript programming concepts, which range from variables and arithmetic to objects and loops. - -# Upcoming Lessons # - -Comment Your JavaScript Code - -Declare JavaScript Variables - -Storing Values with the Assignment Operator - -Initializing Variables with the Assignment Operator - -Understanding Uninitialized Variables - -Understanding Case Sensitivity in Variables - -Add Two Numbers with JavaScript - -Subtract One Number from Another with JavaScript - -Multiply Two Numbers with JavaScript - -Divide One Number by Another with JavaScript - -Increment a Number with JavaScript - -Decrement a Number with JavaScript - -Create Decimal Numbers with JavaScript - -Multiply Two Decimals with JavaScript - -Divide One Decimal by Another with JavaScript - -Finding a Remainder in JavaScript - -Compound Assignment With Augmented Addition - -Compound Assignment With Augmented Subtraction - -Compound Assignment With Augmented Multiplication - -Compound Assignment With Augmented Division - -Declare String Variables - -Escaping Literal Quotes in Strings - -Quoting Strings with Single Quotes - -Escape Sequences in Strings - -Concatenating Strings with Plus Operator - -Concatenating Strings with the Plus Equals Operator - -Constructing Strings with Variables - -Appending Variables to Strings - -Find the Length of a String - -Use Bracket Notation to Find the First Character in a String - -Understand String Immutability - -Use Bracket Notation to Find the Nth Character in a String - -Use Bracket Notation to Find the Last Character in a String - -Use Bracket Notation to Find the Nth-to-Last Character in a String - -Word Blanks - -Store Multiple Values in one Variable using JavaScript Arrays - -Nest one Array within Another Array - -Access Array Data with Indexes - -Modify Array Data With Indexes - -Access Multi-Dimensional Arrays With Indexes - -Manipulate Arrays With push() - -Manipulate Arrays With pop() - -Manipulate Arrays With shift() - -Manipulate Arrays With unshift() - -Shopping List - -Write Reusable JavaScript with Functions - -Passing Values to Functions with Arguments - -Global Scope and Functions - -Local Scope and Functions - -Global vs. Local Scope in Functions - -Return a Value from a Function with Return - -Understanding Undefined Value returned from a Function - -Assignment with a Returned Value - -Stand in Line - -Understanding Boolean Values - -Use Conditional Logic with If Statements - -Comparison with the Equality Operator - -Comparison with the Strict Equality Operator - -Practice comparing different values - -Comparison with the Inequality Operator - -Comparison with the Strict Inequality Operator - -Comparison with the Greater Than Operator - -Comparison with the Greater Than Or Equal To Operator - -Comparison with the Less Than Operator - -Comparison with the Less Than Or Equal To Operator - -Comparisons with the Logical And Operator - -Comparisons with the Logical Or Operator - -Introducing Else Statements - -Introducing Else If Statements - -Logical Order in If Else Statements - -Chaining If Else Statements - -Golf Code - -Selecting from Many Options with Switch Statements - -Adding a Default Option in Switch Statements - -Multiple Identical Options in Switch Statements - -Replacing If Else Chains with Switch - -Returning Boolean Values from Functions - -Return Early Pattern for Functions - -Counting Cards - -Build JavaScript Objects - -Accessing Object Properties with Dot Notation - -Accessing Object Properties with Bracket Notation - -Accessing Object Properties with Variables - -Updating Object Properties - -Add New Properties to a JavaScript Object - -Delete Properties from a JavaScript Object - -Using Objects for Lookups - -Testing Objects for Properties - -Manipulating Complex Objects - -Accessing Nested Objects - -Accessing Nested Arrays - -Record Collection - -Iterate with JavaScript While Loops - -Iterate with JavaScript For Loops - -Iterate Odd Numbers With a For Loop - -Count Backwards With a For Loop - -Iterate Through an Array with a For Loop - -Nesting For Loops - -Iterate with JavaScript Do...While Loops - -Profile Lookup - -Generate Random Fractions with JavaScript - -Generate Random Whole Numbers with JavaScript - -Generate Random Whole Numbers within a Range - -Use the parseInt Function - -Use the parseInt Function with a Radix - -Use the Conditional (Ternary) Operator - -Use Multiple Conditional (Ternary) Operators \ No newline at end of file diff --git a/02-javascript-algorithms-and-data-structures/debugging.md b/02-javascript-algorithms-and-data-structures/debugging.md index 4f173d5..b4375fb 100644 --- a/02-javascript-algorithms-and-data-structures/debugging.md +++ b/02-javascript-algorithms-and-data-structures/debugging.md @@ -38,30 +38,4 @@ Debugging is frustrating, but it helps to develop (and follow) a step-by-step ap For example, if function A works and returns what it's supposed to, then function B may have the issue. Or start checking values in a block of code from the middle to try to cut the search space in half. A problem in one spot indicates a bug in the first half of the code. If not, it's likely in the second. -This section will cover a couple helpful tools to find bugs, and some of the common forms they take. Fortunately, debugging is a learnable skill that just requires a little patience and practice to master. - -# Upcoming Lessons # - -Use the JavaScript Console to Check the Value of a Variable - -Understanding the Differences between the freeCodeCamp and Browser Console - -Use typeof to Check the Type of a Variable - -Catch Misspelled Variable and Function Names - -Catch Unclosed Parentheses, Brackets, Braces and Quotes - -Catch Mixed Usage of Single and Double Quotes - -Catch Use of Assignment Operator Instead of Equality Operator - -Catch Missing Open and Closing Parenthesis After a Function Call - -Catch Arguments Passed in the Wrong Order When Calling a Function - -Catch Off By One Errors When Using Indexing - -Use Caution When Reinitializing Variables Inside a Loop - -Prevent Infinite Loops with a Valid Terminal Condition \ No newline at end of file +This section will cover a couple helpful tools to find bugs, and some of the common forms they take. Fortunately, debugging is a learnable skill that just requires a little patience and practice to master. \ No newline at end of file diff --git a/02-javascript-algorithms-and-data-structures/es6.md b/02-javascript-algorithms-and-data-structures/es6.md index 1a15076..0d4b7df 100644 --- a/02-javascript-algorithms-and-data-structures/es6.md +++ b/02-javascript-algorithms-and-data-structures/es6.md @@ -23,57 +23,3 @@ The most recent standardized version is called ECMAScript 6 (ES6), released in 2 ## Note ## Not all browsers support ES6 features. If you use ES6 in your own projects, you may need to use a program (transpiler) to convert your ES6 code into ES5 until browsers support ES6. - -# Upcoming Lessons # - -Explore Differences Between the var and let Keywords - -Compare Scopes of the var and let Keywords - -Declare a Read-Only Variable with the const Keyword - -Mutate an Array Declared with const - -Prevent Object Mutation - -Use Arrow Functions to Write Concise Anonymous Functions - -Write Arrow Functions with Parameters - -Write Higher Order Arrow Functions - -Set Default Parameters for Your Functions - -Use the Rest Operator with Function Parameters - -Use the Spread Operator to Evaluate Arrays In-Place - -Use Destructuring Assignment to Assign Variables from Objects - -Use Destructuring Assignment to Assign Variables from Nested Objects - -Use Destructuring Assignment to Assign Variables from Arrays - -Use Destructuring Assignment with the Rest Operator to Reassign Array Elements - -Use Destructuring Assignment to Pass an Object as a Function's Parameters - -Create Strings using Template Literals - -Write Concise Object Literal Declarations Using Simple Fields - -Write Concise Declarative Functions with ES6 - -Use class Syntax to Define a Constructor Function - -Use getters and setters to Control Access to an Object - -Understand the Differences Between import and require - -Use export to Reuse a Code Block - -Use * to Import Everything from a File - -Create an Export Fallback with export default - -Import a Default Export \ No newline at end of file diff --git a/02-javascript-algorithms-and-data-structures/functional-programming.md b/02-javascript-algorithms-and-data-structures/functional-programming.md index 76ba821..c731e82 100644 --- a/02-javascript-algorithms-and-data-structures/functional-programming.md +++ b/02-javascript-algorithms-and-data-structures/functional-programming.md @@ -12,52 +12,4 @@ Functional programming follows a few core principles: * Functions have minimal side effects in the program -The functional programming software development approach breaks a program into small, testable parts. This section covers basic functional programming principles in JavaScript. - -# Upcoming Lessons # - -Learn About Functional Programming - -Understand Functional Programming Terminology - -Understand the Hazards of Using Imperative Code - -Avoid Mutations and Side Effects Using Functional Programming - -Pass Arguments to Avoid External Dependence in a Function - -Refactor Global Variables Out of Functions - -Use the map Method to Extract Data from an Array - -Implement map on a Prototype - -Use the filter Method to Extract Data from an Array - -Implement the filter Method on a Prototype - -Return Part of an Array Using the slice Method - -Remove Elements from an Array Using slice Instead of splice - -Combine Two Arrays Using the concat Method - -Add Elements to the End of an Array Using concat Instead of push - -Use the reduce Method to Analyze Data - -Sort an Array Alphabetically using the sort Method - -Return a Sorted Array Without Changing the Original Array - -Split a String into an Array Using the split Method - -Combine an Array into a String Using the join Method - -Apply Functional Programming to Convert Strings to URL Slugs - -Use the every Method to Check that Every Element in an Array Meets a Criteria - -Use the some Method to Check that Any Elements in an Array Meet a Criteria - -Introduction to Currying and Partial Application \ No newline at end of file +The functional programming software development approach breaks a program into small, testable parts. This section covers basic functional programming principles in JavaScript. \ No newline at end of file diff --git a/02-javascript-algorithms-and-data-structures/intermediate-algorithm-scripting.md b/02-javascript-algorithms-and-data-structures/intermediate-algorithm-scripting.md index c59fe06..5e14193 100644 --- a/02-javascript-algorithms-and-data-structures/intermediate-algorithm-scripting.md +++ b/02-javascript-algorithms-and-data-structures/intermediate-algorithm-scripting.md @@ -2,46 +2,4 @@ This is a stub introduction -# Upcoming Lessons # - -Sum All Numbers in a Range - -Diff Two Arrays - -Seek and Destroy - -Wherefore art thou - -Spinal Tap Case - -Pig Latin - -Search and Replace - -DNA Pairing - -Missing letters - -Sorted Union - -Convert HTML Entities - -Sum All Odd Fibonacci Numbers - -Sum All Primes - -Smallest Common Multiple - -Drop it - -Steamroller - -Binary Agents - -Everything Be True - -Arguments Optional - -Make a Person - -Map the Debris \ No newline at end of file +Help us make it real on [GitHub](https://github.com/freeCodeCamp/learn/tree/master/src/introductions). \ No newline at end of file diff --git a/02-javascript-algorithms-and-data-structures/javascript-algorithms-and-data-structures-projects.md b/02-javascript-algorithms-and-data-structures/javascript-algorithms-and-data-structures-projects.md index f24f147..6123a26 100644 --- a/02-javascript-algorithms-and-data-structures/javascript-algorithms-and-data-structures-projects.md +++ b/02-javascript-algorithms-and-data-structures/javascript-algorithms-and-data-structures-projects.md @@ -15,15 +15,3 @@ In this section you will create the following small JavaScript programs: Have fun and remember to use the Read-Search-Ask method if you get stuck. Good Luck! - -# Upcoming Lessons # - -Palindrome Checker - -Roman Numeral Converter - -Caesars Cipher - -Telephone Number Validator - -Cash Register \ No newline at end of file diff --git a/02-javascript-algorithms-and-data-structures/object-oriented-programming.md b/02-javascript-algorithms-and-data-structures/object-oriented-programming.md index a0a014d..4918604 100644 --- a/02-javascript-algorithms-and-data-structures/object-oriented-programming.md +++ b/02-javascript-algorithms-and-data-structures/object-oriented-programming.md @@ -7,57 +7,3 @@ As its name implies, object oriented programming organizes code into object defi The object structure makes it flexible within a program. Objects can transfer information by calling and passing data to another object's methods. Also, new classes can receive, or inherit, all the features from a base or parent class. This helps to reduce repeated code. Your choice of programming approach depends on a few factors. These include the type of problem, as well as how you want to structure your data and algorithms. This section covers object oriented programming principles in JavaScript. - -# Upcoming Lessons # - -Create a Basic JavaScript Object - -Use Dot Notation to Access the Properties of an Object - -Create a Method on an Object - -Make Code More Reusable with the this Keyword - -Define a Constructor Function - -Use a Constructor to Create Objects - -Extend Constructors to Receive Arguments - -Verify an Object's Constructor with instanceof - -Understand Own Properties - -Use Prototype Properties to Reduce Duplicate Code - -Iterate Over All Properties - -Understand the Constructor Property - -Change the Prototype to a New Object - -Remember to Set the Constructor Property when Changing the Prototype - -Understand Where an Object’s Prototype Comes From - -Understand the Prototype Chain - -Use Inheritance So You Don't Repeat Yourself - -Inherit Behaviors from a Supertype - -Set the Child's Prototype to an Instance of the Parent - -Reset an Inherited Constructor Property - -Add Methods After Inheritance - -Override Inherited Methods - -Use a Mixin to Add Common Behavior Between Unrelated Objects - -Use Closure to Protect Properties Within an Object from Being Modified Externally - -Understand the Immediately Invoked Function Expression (IIFE) - -Use an IIFE to Create a Module \ No newline at end of file diff --git a/02-javascript-algorithms-and-data-structures/regular-expressions.md b/02-javascript-algorithms-and-data-structures/regular-expressions.md index e95af47..9289429 100644 --- a/02-javascript-algorithms-and-data-structures/regular-expressions.md +++ b/02-javascript-algorithms-and-data-structures/regular-expressions.md @@ -1,69 +1,3 @@ # Introduction to the Regular Expression Challenges # Regular expressions are special strings that represent a search pattern. Also known as "regex" or "regexp", they help programmers match, search, and replace text. Regular expressions can appear cryptic because a few characters have special meaning. The goal is to combine the symbols and text into a pattern that matches what you want, but only what you want. This section will cover the characters, a few shortcuts, and the common uses for writing regular expressions. - -# Upcoming Lessons # - -Using the Test Method - -Match Literal Strings - -Match a Literal String with Different Possibilities - -Ignore Case While Matching - -Extract Matches - -Find More Than the First Match - -Match Anything with Wildcard Period - -Match Single Character with Multiple Possibilities - -Match Letters of the Alphabet - -Match Numbers and Letters of the Alphabet - -Match Single Characters Not Specified - -Match Characters that Occur One or More Times - -Match Characters that Occur Zero or More Times - -Find Characters with Lazy Matching - -Find One or More Criminals in a Hunt - -Match Beginning String Patterns - -Match Ending String Patterns - -Match All Letters and Numbers - -Match Everything But Letters and Numbers - -Match All Numbers - -Match All Non-Numbers - -Restrict Possible Usernames - -Match Whitespace - -Match Non-Whitespace Characters - -Specify Upper and Lower Number of Matches - -Specify Only the Lower Number of Matches - -Specify Exact Number of Matches - -Check for All or None - -Positive and Negative Lookahead - -Reuse Patterns Using Capture Groups - -Use Capture Groups to Search and Replace - -Remove Whitespace from Start and End \ No newline at end of file diff --git a/03-front-end-libraries/bootstrap.md b/03-front-end-libraries/bootstrap.md index b0155e9..fe21a10 100644 --- a/03-front-end-libraries/bootstrap.md +++ b/03-front-end-libraries/bootstrap.md @@ -9,67 +9,3 @@ Bootstrap is a front-end framework used to design responsive web pages and web a * navigation This section introduces some of the ways to use Bootstrap in your web projects. - -# Upcoming Lessons # - -Use Responsive Design with Bootstrap Fluid Containers - -Make Images Mobile Responsive - -Center Text with Bootstrap - -Create a Bootstrap Button - -Create a Block Element Bootstrap Button - -Taste the Bootstrap Button Color Rainbow - -Call out Optional Actions with btn-info - -Warn Your Users of a Dangerous Action with btn-danger - -Use the Bootstrap Grid to Put Elements Side By Side - -Ditch Custom CSS for Bootstrap - -Use a span to Target Inline Elements - -Create a Custom Heading - -Add Font Awesome Icons to our Buttons - -Add Font Awesome Icons to all of our Buttons - -Responsively Style Radio Buttons - -Responsively Style Checkboxes - -Style Text Inputs as Form Controls - -Line up Form Elements Responsively with Bootstrap - -Create a Bootstrap Headline - -House our page within a Bootstrap container-fluid div - -Create a Bootstrap Row - -Split Your Bootstrap Row - -Create Bootstrap Wells - -Add Elements within Your Bootstrap Wells - -Apply the Default Bootstrap Button Style - -Create a Class to Target with jQuery Selectors - -Add id Attributes to Bootstrap Elements - -Label Bootstrap Wells - -Give Each Element a Unique id - -Label Bootstrap Buttons - -Use Comments to Clarify Code \ No newline at end of file diff --git a/03-front-end-libraries/data-visualization-with-d3.md b/03-front-end-libraries/data-visualization-with-d3.md index 70652b1..6b13e81 100644 --- a/03-front-end-libraries/data-visualization-with-d3.md +++ b/03-front-end-libraries/data-visualization-with-d3.md @@ -5,63 +5,3 @@ D3.js, or D3, stands for Data Driven Documents. D3 is a JavaScript library to cr D3 takes input data and maps it into a visual representation of that data. It supports many different data formats. D3 lets you bind (or attach) the data to the Document Object Model (DOM). You use HTML or SVG elements with D3's built-in methods to transform the data into a visualization. D3 gives you a lot of control over the presentation of data. This section covers the basic functionality and how to create visualizations with the D3 library. - -# Upcoming Lessons # - -Add Document Elements with D3 - -Select a Group of Elements with D3 - -Work with Data in D3 - -Work with Dynamic Data in D3 - -Add Inline Styling to Elements - -Change Styles Based on Data - -Add Classes with D3 - -Update the Height of an Element Dynamically - -Change the Presentation of a Bar Chart - -Learn About SVG in D3 - -Display Shapes with SVG - -Create a Bar for Each Data Point in the Set - -Dynamically Set the Coordinates for Each Bar - -Dynamically Change the Height of Each Bar - -Invert SVG Elements - -Change the Color of an SVG Element - -Add Labels to D3 Elements - -Style D3 Labels - -Add a Hover Effect to a D3 Element - -Add a Tooltip to a D3 Element - -Create a Scatterplot with SVG Circles - -Add Attributes to the Circle Elements - -Add Labels to Scatter Plot Circles - -Create a Linear Scale with D3 - -Set a Domain and a Range on a Scale - -Use the d3.max and d3.min Functions to Find Minimum and Maximum Values in a Dataset - -Use Dynamic Scales - -Use a Pre-Defined Scale to Place Elements - -Add Axes to a Visualization \ No newline at end of file diff --git a/03-front-end-libraries/front-end-libraries-projects.md b/03-front-end-libraries/front-end-libraries-projects.md index ed13447..086d4ed 100644 --- a/03-front-end-libraries/front-end-libraries-projects.md +++ b/03-front-end-libraries/front-end-libraries-projects.md @@ -3,15 +3,3 @@ This introduction is a stub Help us make it real on GitHub. - -# Upcoming Lessons # - -Build a Random Quote Machine - -Build a Markdown Previewer - -Build a Drum Machine - -Build a JavaScript Calculator - -Build a Pomodoro Clock \ No newline at end of file diff --git a/03-front-end-libraries/jquery.md b/03-front-end-libraries/jquery.md index 0fcb9a3..9036451 100644 --- a/03-front-end-libraries/jquery.md +++ b/03-front-end-libraries/jquery.md @@ -1,41 +1,3 @@ # Introduction to jQuery # jQuery is one of the many libraries for JavaScript. It is designed to simplify scripting done on the client side. jQuery's most recognizable characteristic is its dollar sign ($) syntax. With it, you can easily manipulate elements, create animations and handle input events. - -# Upcoming Lessons # - -Learn How Script Tags and Document Ready Work - -Target HTML Elements with Selectors Using jQuery - -Target Elements by Class Using jQuery - -Target Elements by id Using jQuery - -Delete Your jQuery Functions - -Target the Same Element with Multiple jQuery Selectors - -Remove Classes from an Element with jQuery - -Change the CSS of an Element Using jQuery - -Disable an Element Using jQuery - -Change Text Inside an Element Using jQuery - -Remove an Element Using jQuery - -Use appendTo to Move Elements with jQuery - -Clone an Element Using jQuery - -Target the Parent of an Element Using jQuery - -Target the Children of an Element Using jQuery - -Target a Specific Child of an Element Using jQuery - -Target Even Elements Using jQuery - -Use jQuery to Modify the Entire Page \ No newline at end of file diff --git a/03-front-end-libraries/json-apis-and-ajax.md b/03-front-end-libraries/json-apis-and-ajax.md index 6db5ac9..8469bae 100644 --- a/03-front-end-libraries/json-apis-and-ajax.md +++ b/03-front-end-libraries/json-apis-and-ajax.md @@ -9,23 +9,3 @@ User experience benefits from asynchronous processes in several ways. Pages load The data transferred between the browser and server is often in a format called JavaScript Object Notation (JSON). JSON resembles JavaScript object literal syntax, except that it's transferred as a string. Once received, it can be converted into an object and used in a script. This section covers how to transfer and use data using AJAX technologies with a freeCodeCamp API. - -# Upcoming Lessons # - -Handle Click Events with JavaScript using the onclick property - -Change Text with click Events - -Get JSON with the JavaScript XMLHttpRequest Method - -Access the JSON Data from an API - -Convert JSON Data to HTML - -Render Images from Data Sources - -Pre-filter JSON to Get the Data You Need - -Get Geolocation Data to Find A User's GPS Coordinates - -Post Data with the JavaScript XMLHttpRequest Method \ No newline at end of file diff --git a/03-front-end-libraries/react-and-redux.md b/03-front-end-libraries/react-and-redux.md index 4830e43..5027fdc 100644 --- a/03-front-end-libraries/react-and-redux.md +++ b/03-front-end-libraries/react-and-redux.md @@ -6,24 +6,3 @@ In a React Redux app, you create a single Redux store that manages the state of Improve this intro on GitHub. -# Upcoming Lessons # - -Getting Started with React Redux - -Manage State Locally First - -Extract State Logic to Redux - -Use Provider to Connect Redux to React - -Map State to Props - -Map Dispatch to Props - -Connect Redux to React - -Connect Redux to the Messages App - -Extract Local State into Redux - -Moving Forward From Here \ No newline at end of file diff --git a/03-front-end-libraries/react.md b/03-front-end-libraries/react.md index 8a95f80..6994d97 100644 --- a/03-front-end-libraries/react.md +++ b/03-front-end-libraries/react.md @@ -3,101 +3,3 @@ React, popularized by Facebook, is a open-source JavaScript library for building user interfaces. With JSX, it is used to create components, handle state and props, utilize event listeners and certain life cycle methods to update data as it changes. React combines HTML with JavaScript functionality to create its own markup language, JSX. This section will introduce you to all of these concepts and how to implement them for use with your own projects. - -# Upcoming Lessons # - -Create a Simple JSX Element - -Create a Complex JSX Element - -Add Comments in JSX - -Render HTML Elements to the DOM - -Define an HTML Class in JSX - -Learn About Self-Closing JSX Tags - -Create a Stateless Functional Component - -Create a React Component - -Create a Component with Composition - -Use React to Render Nested Components - -Compose React Components - -Render a Class Component to the DOM - -Write a React Component from Scratch - -Pass Props to a Stateless Functional Component - -Pass an Array as Props - -Use Default Props - -Override Default Props - -Use PropTypes to Define the Props You Expect - -Access Props Using this.props - -Review Using Props with Stateless Functional Components - -Create a Stateful Component - -Render State in the User Interface - -Render State in the User Interface Another Way - -Set State with this.setState - -Bind 'this' to a Class Method - -Use State to Toggle an Element - -Write a Simple Counter - -Create a Controlled Input - -Create a Controlled Form - -Pass State as Props to Child Components - -Pass a Callback as Props - -Use the Lifecycle Method componentWillMount - -Use the Lifecycle Method componentDidMount - -Add Event Listeners - -Manage Updates with Lifecycle Methods - -Optimize Re-Renders with shouldComponentUpdate - -Introducing Inline Styles - -Add Inline Styles in React - -Use Advanced JavaScript in React Render Method - -Render with an If/Else Condition - -Use && for a More Concise Conditional - -Use a Ternary Expression for Conditional Rendering - -Render Conditionally from Props - -Change Inline CSS Conditionally Based on Component State - -Use Array.map() to Dynamically Render Elements - -Give Sibling Elements a Unique Key Attribute - -Use Array.filter() to Dynamically Filter an Array - -Render React on the Server with renderToString \ No newline at end of file diff --git a/03-front-end-libraries/redux.md b/03-front-end-libraries/redux.md index b5bfc9f..0f6568d 100644 --- a/03-front-end-libraries/redux.md +++ b/03-front-end-libraries/redux.md @@ -3,39 +3,3 @@ Redux is a predictable state container for JavaScript apps. It helps you write applications that behave consistently, run in different environments (client, server, and native), and are easy to test. While you can use Redux with any view library, it's introduced here before being combined with React. Improve this intro on GitHub. - -# Upcoming Lessons # - -Create a Redux Store - -Get State from the Redux Store - -Define a Redux Action - -Define an Action Creator - -Dispatch an Action Event - -Handle an Action in the Store - -Use a Switch Statement to Handle Multiple Actions - -Use const for Action Types - -Register a Store Listener - -Combine Multiple Reducers - -Send Action Data to the Store - -Use Middleware to Handle Asynchronous Actions - -Write a Counter with Redux - -Never Mutate State - -Use the Spread Operator on Arrays - -Remove an Item from an Array - -Copy an Object with Object.assign \ No newline at end of file diff --git a/03-front-end-libraries/sass.md b/03-front-end-libraries/sass.md index 2bf96aa..e300f6b 100644 --- a/03-front-end-libraries/sass.md +++ b/03-front-end-libraries/sass.md @@ -9,23 +9,3 @@ There are two syntaxes available for Sass. The first, known as SCSS (Sassy CSS) The second and older syntax, known as the indented syntax (or sometimes just "Sass"), uses indentation rather than brackets to indicate nesting of selectors, and newlines rather than semicolons to separate properties. Files using this syntax have the .sass extension. This section introduces the basic features of Sass. - -# Upcoming Lessons # - -Store Data with Sass Variables - -Nest CSS with Sass - -Create Reusable CSS with Mixins - -Use @if and @else to Add Logic To Your Styles - -Use @for to Create a Sass Loop - -Use @each to Map Over Items in a List - -Apply a Style Until a Condition is Met with @while - -Split Your Styles into Smaller Chunks with Partials - -Extend One Set of CSS Styles to Another Element \ No newline at end of file diff --git a/04-data-visualization/data-visualization-projects.md b/04-data-visualization/data-visualization-projects.md index 91f9a00..ab8cc32 100644 --- a/04-data-visualization/data-visualization-projects.md +++ b/04-data-visualization/data-visualization-projects.md @@ -3,15 +3,3 @@ This introduction is a stub Help us make it real on GitHub. - -# Upcoming Lessons # - -Visualize Data with a Bar Chart - -Visualize Data with a Scatterplot Graph - -Visualize Data with a Heat Map - -Visualize Data with a Choropleth Map - -Visualize Data with a Treemap Diagram \ No newline at end of file diff --git a/04-data-visualization/data-visualization-with-d3.md b/04-data-visualization/data-visualization-with-d3.md index 70652b1..6b13e81 100644 --- a/04-data-visualization/data-visualization-with-d3.md +++ b/04-data-visualization/data-visualization-with-d3.md @@ -5,63 +5,3 @@ D3.js, or D3, stands for Data Driven Documents. D3 is a JavaScript library to cr D3 takes input data and maps it into a visual representation of that data. It supports many different data formats. D3 lets you bind (or attach) the data to the Document Object Model (DOM). You use HTML or SVG elements with D3's built-in methods to transform the data into a visualization. D3 gives you a lot of control over the presentation of data. This section covers the basic functionality and how to create visualizations with the D3 library. - -# Upcoming Lessons # - -Add Document Elements with D3 - -Select a Group of Elements with D3 - -Work with Data in D3 - -Work with Dynamic Data in D3 - -Add Inline Styling to Elements - -Change Styles Based on Data - -Add Classes with D3 - -Update the Height of an Element Dynamically - -Change the Presentation of a Bar Chart - -Learn About SVG in D3 - -Display Shapes with SVG - -Create a Bar for Each Data Point in the Set - -Dynamically Set the Coordinates for Each Bar - -Dynamically Change the Height of Each Bar - -Invert SVG Elements - -Change the Color of an SVG Element - -Add Labels to D3 Elements - -Style D3 Labels - -Add a Hover Effect to a D3 Element - -Add a Tooltip to a D3 Element - -Create a Scatterplot with SVG Circles - -Add Attributes to the Circle Elements - -Add Labels to Scatter Plot Circles - -Create a Linear Scale with D3 - -Set a Domain and a Range on a Scale - -Use the d3.max and d3.min Functions to Find Minimum and Maximum Values in a Dataset - -Use Dynamic Scales - -Use a Pre-Defined Scale to Place Elements - -Add Axes to a Visualization \ No newline at end of file diff --git a/04-data-visualization/json-apis-and-ajax.md b/04-data-visualization/json-apis-and-ajax.md index 6db5ac9..8469bae 100644 --- a/04-data-visualization/json-apis-and-ajax.md +++ b/04-data-visualization/json-apis-and-ajax.md @@ -9,23 +9,3 @@ User experience benefits from asynchronous processes in several ways. Pages load The data transferred between the browser and server is often in a format called JavaScript Object Notation (JSON). JSON resembles JavaScript object literal syntax, except that it's transferred as a string. Once received, it can be converted into an object and used in a script. This section covers how to transfer and use data using AJAX technologies with a freeCodeCamp API. - -# Upcoming Lessons # - -Handle Click Events with JavaScript using the onclick property - -Change Text with click Events - -Get JSON with the JavaScript XMLHttpRequest Method - -Access the JSON Data from an API - -Convert JSON Data to HTML - -Render Images from Data Sources - -Pre-filter JSON to Get the Data You Need - -Get Geolocation Data to Find A User's GPS Coordinates - -Post Data with the JavaScript XMLHttpRequest Method \ No newline at end of file diff --git a/05-apis-and-microservices/apis-and-microservices-projects.md b/05-apis-and-microservices/apis-and-microservices-projects.md index 083d248..de93522 100644 --- a/05-apis-and-microservices/apis-and-microservices-projects.md +++ b/05-apis-and-microservices/apis-and-microservices-projects.md @@ -3,15 +3,3 @@ This introduction is a stub Help us make it real on [GitHub](https://github.com/freeCodeCamp/learn/tree/master/src/introductions). - -# Upcoming Lessons # - -Timestamp Microservice - -Request Header Parser Microservice - -URL Shortener Microservice - -Exercise Tracker - -File Metadata Microservice \ No newline at end of file diff --git a/05-apis-and-microservices/basic-node-and-express.md b/05-apis-and-microservices/basic-node-and-express.md index a31817d..418eb4e 100644 --- a/05-apis-and-microservices/basic-node-and-express.md +++ b/05-apis-and-microservices/basic-node-and-express.md @@ -15,29 +15,3 @@ Express, while not included with Node.js, is another module often used with it. While there are alternatives to using Express, its simplicity makes it a good place to begin when learning the interaction between a backend powered by Node.js and the frontend. Working on these challenges will involve you writing your code on Glitch on our starter project. After completing each challenge you can copy your public Glitch url (to the homepage of your app) into the challenge screen to test it! Optionally you may choose to write your project on another platform but it must be publicly visible for our testing. Start this project on Glitch using this link or clone this repository on GitHub! If you use Glitch, remember to save the link to your project somewhere safe! - -# Upcoming Lessons # - -Meet the Node console - -Start a Working Express Server - -Serve an HTML File - -Serve Static Assets - -Serve JSON on a Specific Route - -Use the .env File - -Implement a Root-Level Request Logger Middleware - -Chain Middleware to Create a Time Server - -Get Route Parameter Input from the Client - -Get Query Parameter Input from the Client - -Use body-parser to Parse POST Requests - -Get Data from POST Requests \ No newline at end of file diff --git a/05-apis-and-microservices/managing-packages-with-npm.md b/05-apis-and-microservices/managing-packages-with-npm.md index 24a7097..b92c4e1 100644 --- a/05-apis-and-microservices/managing-packages-with-npm.md +++ b/05-apis-and-microservices/managing-packages-with-npm.md @@ -12,25 +12,3 @@ locally within a project's own node_modules folder, accessible only to that proj Most developers prefer to install packages local to each project to create a separation between the dependencies of different projects. Working on these challenges will involve you writing your code on Glitch on our starter project. After completing each challenge you can copy your public Glitch url (to the homepage of your app) into the challenge screen to test it! Optionally you may choose to write your project on another platform but it must be publicly visible for our testing. Start this project on Glitch using this link or clone this repository on GitHub! If you use Glitch, remember to save the link to your project somewhere safe! - -# Upcoming Lessons # - -How to Use package.json, the Core of Any Node.js Project or npm Package - -Add a Description to Your package.json - -Add Keywords to Your package.json - -Add a License to Your package.json - -Add a Version to Your package.json - -Expand Your Project with External Packages from npm - -Manage npm Dependencies By Understanding Semantic Versioning - -Use the Tilde-Character to Always Use the Latest Patch Version of a Dependency - -Use the Caret-Character to Use the Latest Minor Version of a Dependency - -Remove a Package from Your Dependencies \ No newline at end of file diff --git a/05-apis-and-microservices/mongodb-and-mongoose.md b/05-apis-and-microservices/mongodb-and-mongoose.md index fe705c2..cbc0c25 100644 --- a/05-apis-and-microservices/mongodb-and-mongoose.md +++ b/05-apis-and-microservices/mongodb-and-mongoose.md @@ -75,29 +75,3 @@ Almost done! We have created our new database and created an user to access it, * That's it! This is the URI you will add to your application to connect to your database. Keep this URI safe somewhere, so you can use it later! * Feel free to create separate databases for different applications, if they don't have an use for the same data. You just need to create the sandbox, user and obtain the new URI. - -# Upcoming Lessons # - -Install and Set Up Mongoose - -Create a Model - -Create and Save a Record of a Model - -Create Many Records with model.create() - -Use model.find() to Search Your Database - -Use model.findOne() to Return a Single Matching Document from Your Database - -Use model.findById() to Search Your Database By _id - -Perform Classic Updates by Running Find, Edit, then Save - -Perform New Updates on a Document Using model.findOneAndUpdate() - -Delete One Document Using model.findByIdAndRemove - -Delete Many Documents with model.remove() - -Chain Search Query Helpers to Narrow Search Results \ No newline at end of file diff --git a/06-information-security-and-quality-assurance/advanced-node-and-express.md b/06-information-security-and-quality-assurance/advanced-node-and-express.md index 999aa52..f1eb377 100644 --- a/06-information-security-and-quality-assurance/advanced-node-and-express.md +++ b/06-information-security-and-quality-assurance/advanced-node-and-express.md @@ -3,49 +3,3 @@ Authentication is the process or action of verifying the identity of a user or process. Up to this point you have not been able to create an app utilizing this key concept. The most common and easiest to use authentication middleware for Node.js is Passport. It is easy to learn, light-weight, and extremely flexible allowing for many strategies, which we will talk about in later challenges. In addition to authentication we will also look at template engines which allow for use of Pug and web sockets which allow for real time communication between all your clients and your server. Working on these challenges will involve you writing your code on Glitch on our starter project. After completing each challenge you can copy your public glitch url (to the homepage of your app) into the challenge screen to test it! Optionally you may choose to write your project on another platform but it must be publicaly visible for our testing. Start this project on Glitch using this link or clone this repository on GitHub! If you use Glitch, remember to save the link to your project somewhere safe. - -# Upcoming Lessons # - -Set up a Template Engine - -Use a Template Engine's Powers - -Set up Passport - -Serialization of a User Object - -Implement the Serialization of a Passport User - -Authentication Strategies - -How to Use Passport Strategies - -Create New Middleware - -How to Put a Profile Together - -Logging a User Out - -Registration of New Users - -Hashing Your Passwords - -Clean Up Your Project with Modules - -Implementation of Social Authentication - -Implementation of Social Authentication II - -Implementation of Social Authentication III - -Set up the Environment - -Communicate by Emitting - -Handle a Disconnect - -Authentication with Socket.IO - -Announce New Users - -Send and Display Chat Messages \ No newline at end of file diff --git a/06-information-security-and-quality-assurance/information-security-and-quality-assurance-projects.md b/06-information-security-and-quality-assurance/information-security-and-quality-assurance-projects.md index 270fb76..a169cee 100644 --- a/06-information-security-and-quality-assurance/information-security-and-quality-assurance-projects.md +++ b/06-information-security-and-quality-assurance/information-security-and-quality-assurance-projects.md @@ -4,14 +4,3 @@ This introduction is a stub Help us make it real on [GitHub](https://github.com/freeCodeCamp/learn/tree/master/src/introductions). -# Upcoming Lessons # - -Metric-Imperial Converter - -Issue Tracker - -Personal Library - -Stock Price Checker - -Anonymous Message Board \ No newline at end of file diff --git a/06-information-security-and-quality-assurance/information-security-with-helmetjs.md b/06-information-security-and-quality-assurance/information-security-with-helmetjs.md index d302ecb..7b1a618 100644 --- a/06-information-security-and-quality-assurance/information-security-with-helmetjs.md +++ b/06-information-security-and-quality-assurance/information-security-with-helmetjs.md @@ -5,32 +5,3 @@ HelmetJS is a type of middleware for Express-based applications that automatical Working on these challenges will involve you writing your code on Glitch on our starter project. After completing each challenge you can copy your public glitch url (to the homepage of your app) into the challenge screen to test it! Optionally you may choose to write your project on another platform but it must be publicaly visible for our testing. Start this project on Glitch using this link or clone this repository on GitHub! If you use Glitch, remember to save the link to your project somewhere safe! -# Upcoming Lessons # - -Install and Require Helmet - -Hide Potentially Dangerous Information Using helmet.hidePoweredBy() - -Mitigate the Risk of Clickjacking with helmet.frameguard() - -Mitigate the Risk of Cross Site Scripting (XSS) Attacks with helmet.xssFilter() - -Avoid Inferring the Response MIME Type with helmet.noSniff() - -Prevent IE from Opening Untrusted HTML with helmet.ieNoOpen() - -Ask Browsers to Access Your Site via HTTPS Only with helmet.hsts() - -Disable DNS Prefetching with helmet.dnsPrefetchControl() - -Disable Client-Side Caching with helmet.noCache() - -Set a Content Security Policy with helmet.contentSecurityPolicy() - -Configure Helmet Using the ‘parent’ helmet() Middleware - -Understand BCrypt Hashes - -Hash and Compare Passwords Asynchronously - -Hash and Compare Passwords Synchronously \ No newline at end of file diff --git a/06-information-security-and-quality-assurance/quality-assurance-and-testing-with-chai.md b/06-information-security-and-quality-assurance/quality-assurance-and-testing-with-chai.md index 4671650..5c394d2 100644 --- a/06-information-security-and-quality-assurance/quality-assurance-and-testing-with-chai.md +++ b/06-information-security-and-quality-assurance/quality-assurance-and-testing-with-chai.md @@ -5,53 +5,3 @@ As your programs become more complex, you need to test them often to make sure a Working on these challenges will involve you writing your code on Glitch on our starter project. After completing each challenge you can copy your public glitch url (to the homepage of your app) into the challenge screen to test it! Optionally you may choose to write your project on another platform but it must be publicaly visible for our testing. Start this project on Glitch using this link or clone this repository on GitHub! If you use Glitch, remember to save the link to your project somewhere safe! - -# Upcoming Lessons # - -Learn How JavaScript Assertions Work - -Test if a Variable or Function is Defined - -Use Assert.isOK and Assert.isNotOK - -Test for Truthiness - -Use the Double Equals to Assert Equality - -Use the Triple Equals to Assert Strict Equality - -Assert Deep Equality with .deepEqual and .notDeepEqual - -Compare the Properties of Two Elements - -Test if One Value is Below or At Least as Large as Another - -Test if a Value Falls within a Specific Range - -Test if a Value is an Array - -Test if an Array Contains an Item - -Test if a Value is a String - -Test if a String Contains a Substring - -Use Regular Expressions to Test a String - -Test if an Object has a Property - -Test if a Value is of a Specific Data Structure Type - -Test if an Object is an Instance of a Constructor - -Run Functional Tests on API Endpoints using Chai-HTTP - -Run Functional Tests on API Endpoints using Chai-HTTP II - -Run Functional Tests on an API Response using Chai-HTTP III - PUT method - -Run Functional Tests on an API Response using Chai-HTTP IV - PUT method - -Run Functional Tests using a Headless Browser - -Run Functional Tests using a Headless Browser II \ No newline at end of file diff --git a/08-coding-interview-prep/algorithms.md b/08-coding-interview-prep/algorithms.md index 7b69415..3c7930c 100644 --- a/08-coding-interview-prep/algorithms.md +++ b/08-coding-interview-prep/algorithms.md @@ -3,22 +3,3 @@ This introduction is a stub Help us make it real on [GitHub](https://github.com/freeCodeCamp/learn/tree/master/src/introductions). - -# Upcoming Lessons # - -Find the Symmetric Difference -Inventory Update - -No Repeats Please - -Pairwise - -Implement Bubble Sort - -Implement Selection Sort - -Implement Insertion Sort - -Implement Quick Sort - -Implement Merge Sort \ No newline at end of file diff --git a/08-coding-interview-prep/data-structures.md b/08-coding-interview-prep/data-structures.md index a7a72f9..da4456c 100644 --- a/08-coding-interview-prep/data-structures.md +++ b/08-coding-interview-prep/data-structures.md @@ -3,99 +3,3 @@ This introduction is a stub Help us make it real on [GitHub](https://github.com/freeCodeCamp/learn/tree/master/src/introductions). - -# Upcoming Lessons # - -Typed Arrays - -Learn how a Stack Works - -Create a Stack Class - -Create a Queue Class - -Create a Priority Queue Class - -Create a Circular Queue - -Create a Set Class - -Remove from a Set - -Size of the Set - -Perform a Union on Two Sets - -Perform an Intersection on Two Sets of Data - -Perform a Difference on Two Sets of Data - -Perform a Subset Check on Two Sets of Data - -Create and Add to Sets in ES6 - -Remove items from a set in ES6 - -Use .has and .size on an ES6 Set - -Use Spread and Notes for ES5 Set() Integration - -Create a Map Data Structure - -Create an ES6 JavaScript Map - -Create a Hash Table - -Work with Nodes in a Linked List - -Create a Linked List Class - -Remove Elements from a Linked List - -Search within a Linked List - -Remove Elements from a Linked List by Index - -Add Elements at a Specific Index in a Linked List - -Create a Doubly Linked List - -Reverse a Doubly Linked List - -Find the Minimum and Maximum Value in a Binary Search Tree - -Add a New Element to a Binary Search Tree - -Check if an Element is Present in a Binary Search Tree - -Find the Minimum and Maximum Height of a Binary Search Tree - -Use Depth First Search in a Binary Search Tree - -Use Breadth First Search in a Binary Search Tree - -Delete a Leaf Node in a Binary Search Tree - -Delete a Node with One Child in a Binary Search Tree - -Delete a Node with Two Children in a Binary Search Tree - -Invert a Binary Tree - -Create a Trie Search Tree - -Insert an Element into a Max Heap - -Remove an Element from a Max Heap - -Implement Heap Sort with a Min Heap - -Adjacency List - -Adjacency Matrix - -Incidence Matrix - -Breadth-First Search - -Depth-First Search \ No newline at end of file diff --git a/08-coding-interview-prep/project-euler.md b/08-coding-interview-prep/project-euler.md index eac6ee2..d755c34 100644 --- a/08-coding-interview-prep/project-euler.md +++ b/08-coding-interview-prep/project-euler.md @@ -4,964 +4,3 @@ This introduction is a stub Help us make it real on GitHub. -# Upcoming Lessons # - -Problem 1: Multiples of 3 and 5 - -Problem 2: Even Fibonacci Numbers - -Problem 3: Largest prime factor - -Problem 4: Largest palindrome product - -Problem 5: Smallest multiple - -Problem 6: Sum square difference - -Problem 7: 10001st prime - -Problem 8: Largest product in a series - -Problem 9: Special Pythagorean triplet - -Problem 10: Summation of primes - -Problem 11: Largest product in a grid - -Problem 12: Highly divisible triangular number - -Problem 13: Large sum - -Problem 14: Longest Collatz sequence - -Problem 15: Lattice paths - -Problem 16: Power digit sum - -Problem 17: Number letter counts - -Problem 18: Maximum path sum I - -Problem 19: Counting Sundays - -Problem 20: Factorial digit sum - -Problem 21: Amicable numbers - -Problem 22: Names scores - -Problem 23: Non-abundant sums - -Problem 24: Lexicographic permutations - -Problem 25: 1000-digit Fibonacci number - -Problem 26: Reciprocal cycles - -Problem 27: Quadratic primes - -Problem 28: Number spiral diagonals - -Problem 29: Distinct powers - -Problem 30: Digit n powers - -Problem 31: Coin sums - -Problem 32: Pandigital products - -Problem 33: Digit cancelling fractions - -Problem 34: Digit factorials - -Problem 35: Circular primes - -Problem 36: Double-base palindromes - -Problem 37: Truncatable primes - -Problem 38: Pandigital multiples - -Problem 39: Integer right triangles - -Problem 40: Champernowne's constant - -Problem 41: Pandigital prime - -Problem 42: Coded triangle numbers - -Problem 43: Sub-string divisibility - -Problem 44: Pentagon numbers - -Problem 45: Triangular, pentagonal, and hexagonal - -Problem 46: Goldbach's other conjecture - -Problem 47: Distinct primes factors - -Problem 48: Self powers - -Problem 49: Prime permutations - -Problem 50: Consecutive prime sum - -Problem 51: Prime digit replacements - -Problem 52: Permuted multiples - -Problem 53: Combinatoric selections - -Problem 54: Poker hands - -Problem 55: Lychrel numbers - -Problem 56: Powerful digit sum - -Problem 57: Square root convergents - -Problem 58: Spiral primes - -Problem 59: XOR decryption - -Problem 60: Prime pair sets - -Problem 61: Cyclical figurate numbers - -Problem 62: Cubic permutations - -Problem 63: Powerful digit counts - -Problem 64: Odd period square roots - -Problem 65: Convergents of e - -Problem 66: Diophantine equation - -Problem 67: Maximum path sum II - -Problem 68: Magic 5-gon ring - -Problem 69: Totient maximum - -Problem 70: Totient permutation - -Problem 71: Ordered fractions - -Problem 72: Counting fractions - -Problem 73: Counting fractions in a range - -Problem 74: Digit factorial chains - -Problem 75: Singular integer right triangles - -Problem 76: Counting summations - -Problem 77: Prime summations - -Problem 78: Coin partitions - -Problem 79: Passcode derivation - -Problem 80: Square root digital expansion - -Problem 81: Path sum: two ways - -Problem 82: Path sum: three ways - -Problem 83: Path sum: four ways - -Problem 84: Monopoly odds - -Problem 85: Counting rectangles - -Problem 86: Cuboid route - -Problem 87: Prime power triples - -Problem 88: Product-sum numbers - -Problem 89: Roman numerals - -Problem 90: Cube digit pairs - -Problem 91: Right triangles with integer coordinates - -Problem 92: Square digit chains - -Problem 93: Arithmetic expressions - -Problem 94: Almost equilateral triangles - -Problem 95: Amicable chains - -Problem 96: Su Doku - -Problem 97: Large non-Mersenne prime - -Problem 98: Anagramic squares - -Problem 99: Largest exponential - -Problem 100: Arranged probability - -Problem 101: Optimum polynomial - -Problem 102: Triangle containment - -Problem 103: Special subset sums: optimum - -Problem 104: Pandigital Fibonacci ends - -Problem 105: Special subset sums: testing - -Problem 106: Special subset sums: meta-testing - -Problem 107: Minimal network - -Problem 108: Diophantine Reciprocals I - -Problem 109: Darts - -Problem 110: Diophantine Reciprocals II - -Problem 111: Primes with runs - -Problem 112: Bouncy numbers - -Problem 113: Non-bouncy numbers - -Problem 114: Counting block combinations I - -Problem 115: Counting block combinations II - -Problem 116: Red, green or blue tiles - -Problem 117: Red, green, and blue tiles - -Problem 118: Pandigital prime sets - -Problem 119: Digit power sum - -Problem 120: Square remainders - -Problem 121: Disc game prize fund - -Problem 122: Efficient exponentiation - -Problem 123: Prime square remainders - -Problem 124: Ordered radicals - -Problem 125: Palindromic sums - -Problem 126: Cuboid layers - -Problem 127: abc-hits - -Problem 128: Hexagonal tile differences - -Problem 129: Repunit divisibility - -Problem 130: Composites with prime repunit property - -Problem 131: Prime cube partnership - -Problem 132: Large repunit factors - -Problem 133: Repunit nonfactors - -Problem 134: Prime pair connection - -Problem 135: Same differences - -Problem 136: Singleton difference - -Problem 137: Fibonacci golden nuggets - -Problem 138: Special isosceles triangles - -Problem 139: Pythagorean tiles - -Problem 140: Modified Fibonacci golden nuggets - -Problem 141: Investigating progressive numbers, n, which are also square - -Problem 142: Perfect Square Collection - -Problem 143: Investigating the Torricelli point of a triangle - -Problem 144: Investigating multiple reflections of a laser beam - -Problem 145: How many reversible numbers are there below one-billion? - -Problem 146: Investigating a Prime Pattern - -Problem 147: Rectangles in cross-hatched grids - -Problem 148: Exploring Pascal's triangle - -Problem 149: Searching for a maximum-sum subsequence - -Problem 150: Searching a triangular array for a sub-triangle having minimum-sum - -Problem 151: Paper sheets of standard sizes: an expected-value problem - -Problem 152: Writing 1/2 as a sum of inverse squares - -Problem 153: Investigating Gaussian Integers - -Problem 154: Exploring Pascal's pyramid - -Problem 155: Counting Capacitor Circuits - -Problem 156: Counting Digits - -Problem 157: Solving the diophantine equation 1/a+1/b= p/10n - -Problem 158: Exploring strings for which only one character comes lexicographically after its neighbour to the left - -Problem 159: Digital root sums of factorisations - -Problem 160: Factorial trailing digits - -Problem 161: Triominoes - -Problem 162: Hexadecimal numbers - -Problem 163: Cross-hatched triangles - -Problem 164: Numbers for which no three consecutive digits have a sum greater than a given value - -Problem 165: Intersections - -Problem 166: Criss Cross - -Problem 167: Investigating Ulam sequences - -Problem 168: Number Rotations - -Problem 169: Exploring the number of different ways a number can be expressed as a sum of powers of 2 - -Problem 170: Find the largest 0 to 9 pandigital that can be formed by concatenating products - -Problem 171: Finding numbers for which the sum of the squares of the digits is a square - -Problem 172: Investigating numbers with few repeated digits - -Problem 173: Using up to one million tiles how many different "hollow" square laminae can be formed? - -Problem 174: Counting the number of "hollow" square laminae that can form one, two, three, ... distinct arrangements - -Problem 175: Fractions involving the number of different ways a number can be expressed as a sum of powers of 2 - -Problem 176: Right-angled triangles that share a cathetus - -Problem 177: Integer angled Quadrilaterals - -Problem 178: Step Numbers - -Problem 179: Consecutive positive divisors - -Problem 180: Rational zeros of a function of three variables - -Problem 181: Investigating in how many ways objects of two different colours can be grouped - -Problem 182: RSA encryption - -Problem 183: Maximum product of parts - -Problem 184: Triangles containing the origin - -Problem 185: Number Mind - -Problem 186: Connectedness of a network - -Problem 187: Semiprimes - -Problem 188: The hyperexponentiation of a number - -Problem 189: Tri-colouring a triangular grid - -Problem 190: Maximising a weighted product - -Problem 191: Prize Strings - -Problem 192: Best Approximations - -Problem 193: Squarefree Numbers - -Problem 194: Coloured Configurations - -Problem 195: Inscribed circles of triangles with one angle of 60 degrees - -Problem 196: Prime triplets - -Problem 197: Investigating the behaviour of a recursively defined sequence - -Problem 198: Ambiguous Numbers - -Problem 199: Iterative Circle Packing - -Problem 200: Find the 200th prime-proof sqube containing the contiguous sub-string "200" - -Problem 201: Subsets with a unique sum - -Problem 202: Laserbeam - -Problem 203: Squarefree Binomial Coefficients - -Problem 204: Generalised Hamming Numbers - -Problem 205: Dice Game - -Problem 206: Concealed Square - -Problem 207: Integer partition equations - -Problem 208: Robot Walks - -Problem 209: Circular Logic - -Problem 210: Obtuse Angled Triangles - -Problem 211: Divisor Square Sum - -Problem 212: Combined Volume of Cuboids - -Problem 213: Flea Circus - -Problem 214: Totient Chains - -Problem 215: Crack-free Walls - -Problem 216: Investigating the primality of numbers of the form 2n2-1 - -Problem 217: Balanced Numbers - -Problem 218: Perfect right-angled triangles - -Problem 219: Skew-cost coding - -Problem 220: Heighway Dragon - -Problem 221: Alexandrian Integers - -Problem 222: Sphere Packing - -Problem 223: Almost right-angled triangles I - -Problem 224: Almost right-angled triangles II - -Problem 225: Tribonacci non-divisors - -Problem 226: A Scoop of Blancmange - -Problem 227: The Chase - -Problem 228: Minkowski Sums - -Problem 229: Four Representations using Squares - -Problem 230: Fibonacci Words - -Problem 231: The prime factorisation of binomial coefficients - -Problem 232: The Race - -Problem 233: Lattice points on a circle - -Problem 234: Semidivisible numbers - -Problem 235: An Arithmetic Geometric sequence - -Problem 236: Luxury Hampers - -Problem 237: Tours on a 4 x n playing board - -Problem 238: Infinite string tour - -Problem 239: Twenty-two Foolish Primes - -Problem 240: Top Dice - -Problem 241: Perfection Quotients - -Problem 242: Odd Triplets - -Problem 243: Resilience - -Problem 244: Sliders - -Problem 245: Coresilience - -Problem 246: Tangents to an ellipse - -Problem 247: Squares under a hyperbola - -Problem 248: Numbers for which Euler’s totient function equals 13! - -Problem 249: Prime Subset Sums - -Problem 250: 250250 - -Problem 251: Cardano Triplets - -Problem 252: Convex Holes - -Problem 253: Tidying up - -Problem 254: Sums of Digit Factorials - -Problem 255: Rounded Square Roots - -Problem 256: Tatami-Free Rooms - -Problem 257: Angular Bisectors - -Problem 258: A lagged Fibonacci sequence - -Problem 259: Reachable Numbers - -Problem 260: Stone Game - -Problem 261: Pivotal Square Sums - -Problem 262: Mountain Range - -Problem 263: An engineers' dream come true - -Problem 264: Triangle Centres - -Problem 265: Binary Circles - -Problem 266: Pseudo Square Root - -Problem 267: Billionaire - -Problem 268: Counting numbers with at least four distinct prime factors less than 100 - -Problem 269: Polynomials with at least one integer root - -Problem 270: Cutting Squares - -Problem 271: Modular Cubes, part 1 - -Problem 272: Modular Cubes, part 2 - -Problem 273: Sum of Squares - -Problem 274: Divisibility Multipliers - -Problem 275: Balanced Sculptures - -Problem 276: Primitive Triangles - -Problem 277: A Modified Collatz sequence - -Problem 278: Linear Combinations of Semiprimes - -Problem 279: Triangles with integral sides and an integral angle - -Problem 280: Ant and seeds - -Problem 281: Pizza Toppings - -Problem 282: The Ackermann function - -Problem 283: Integer sided triangles for which the area/perimeter ratio is integral - -Problem 284: Steady Squares - -Problem 285: Pythagorean odds - -Problem 286: Scoring probabilities - -Problem 287: Quadtree encoding (a simple compression algorithm) - -Problem 288: An enormous factorial - -Problem 289: Eulerian Cycles - -Problem 290: Digital Signature - -Problem 291: Panaitopol Primes - -Problem 292: Pythagorean Polygons - -Problem 293: Pseudo-Fortunate Numbers - -Problem 294: Sum of digits - experience #23 - -Problem 295: Lenticular holes - -Problem 296: Angular Bisector and Tangent - -Problem 297: Zeckendorf Representation - -Problem 298: Selective Amnesia - -Problem 299: Three similar triangles - -Problem 300: Protein folding - -Problem 301: Nim - -Problem 302: Strong Achilles Numbers - -Problem 303: Multiples with small digits - -Problem 304: Primonacci - -Problem 305: Reflexive Position - -Problem 306: Paper-strip Game - -Problem 307: Chip Defects - -Problem 308: An amazing Prime-generating Automaton - -Problem 309: Integer Ladders - -Problem 310: Nim Square - -Problem 311: Biclinic Integral Quadrilaterals - -Problem 312: Cyclic paths on Sierpiński graphs - -Problem 313: Sliding game - -Problem 314: The Mouse on the Moon - -Problem 315: Digital root clocks - -Problem 316: Numbers in decimal expansions - -Problem 317: Firecracker - -Problem 318: 2011 nines - -Problem 319: Bounded Sequences - -Problem 320: Factorials divisible by a huge integer - -Problem 321: Swapping Counters - -Problem 322: Binomial coefficients divisible by 10 - -Problem 323: Bitwise-OR operations on random integers - -Problem 324: Building a tower - -Problem 325: Stone Game II - -Problem 326: Modulo Summations - -Problem 327: Rooms of Doom - -Problem 328: Lowest-cost Search - -Problem 329: Prime Frog - -Problem 330: Euler's Number - -Problem 331: Cross flips - -Problem 332: Spherical triangles - -Problem 333: Special partitions - -Problem 334: Spilling the beans - -Problem 335: Gathering the beans - -Problem 336: Maximix Arrangements - -Problem 337: Totient Stairstep Sequences - -Problem 338: Cutting Rectangular Grid Paper - -Problem 339: Peredur fab Efrawg - -Problem 340: Crazy Function - -Problem 341: Golomb's self-describing sequence - -Problem 342: The totient of a square is a cube - -Problem 343: Fractional Sequences - -Problem 344: Silver dollar game - -Problem 345: Matrix Sum - -Problem 346: Strong Repunits - -Problem 347: Largest integer divisible by two primes - -Problem 348: Sum of a square and a cube - -Problem 349: Langton's ant - -Problem 350: Constraining the least greatest and the greatest least - -Problem 351: Hexagonal orchards - -Problem 352: Blood tests - -Problem 353: Risky moon - -Problem 354: Distances in a bee's honeycomb - -Problem 355: Maximal coprime subset - -Problem 356: Largest roots of cubic polynomials - -Problem 357: Prime generating integers - -Problem 358: Cyclic numbers - -Problem 359: Hilbert's New Hotel - -Problem 360: Scary Sphere - -Problem 361: Subsequence of Thue-Morse sequence - -Problem 362: Squarefree factors - -Problem 363: Bézier Curves - -Problem 364: Comfortable distance - -Problem 365: A huge binomial coefficient - -Problem 366: Stone Game III - -Problem 367: Bozo sort - -Problem 368: A Kempner-like series - -Problem 369: Badugi - -Problem 370: Geometric triangles - -Problem 371: Licence plates - -Problem 372: Pencils of rays - -Problem 373: Circumscribed Circles - -Problem 374: Maximum Integer Partition Product - -Problem 375: Minimum of subsequences - -Problem 376: Nontransitive sets of dice - -Problem 377: Sum of digits, experience 13 - -Problem 378: Triangle Triples - -Problem 379: Least common multiple count - -Problem 380: Amazing Mazes! - -Problem 381: (prime-k) factorial - -Problem 382: Generating polygons - -Problem 383: Divisibility comparison between factorials - -Problem 384: Rudin-Shapiro sequence - -Problem 385: Ellipses inside triangles - -Problem 386: Maximum length of an antichain - -Problem 387: Harshad Numbers - -Problem 388: Distinct Lines - -Problem 389: Platonic Dice - -Problem 390: Triangles with non rational sides and integral area - -Problem 391: Hopping Game - -Problem 392: Enmeshed unit circle - -Problem 393: Migrating ants - -Problem 394: Eating pie - -Problem 395: Pythagorean tree - -Problem 396: Weak Goodstein sequence - -Problem 397: Triangle on parabola - -Problem 398: Cutting rope - -Problem 399: Squarefree Fibonacci Numbers - -Problem 400: Fibonacci tree game - -Problem 401: Sum of squares of divisors - -Problem 402: Integer-valued polynomials - -Problem 403: Lattice points enclosed by parabola and line - -Problem 404: Crisscross Ellipses - -Problem 405: A rectangular tiling - -Problem 406: Guessing Game - -Problem 407: Idempotents - -Problem 408: Admissible paths through a grid - -Problem 409: Nim Extreme - -Problem 410: Circle and tangent line - -Problem 411: Uphill paths - -Problem 412: Gnomon numbering - -Problem 413: One-child Numbers - -Problem 414: Kaprekar constant - -Problem 415: Titanic sets - -Problem 416: A frog's trip - -Problem 417: Reciprocal cycles II - -Problem 418: Factorisation triples - -Problem 419: Look and say sequence - -Problem 420: 2x2 positive integer matrix - -Problem 421: Prime factors of n15+1 - -Problem 422: Sequence of points on a hyperbola - -Problem 423: Consecutive die throws - -Problem 424: Kakuro - -Problem 425: Prime connection - -Problem 426: Box-ball system - -Problem 427: n-sequences - -Problem 428: Necklace of Circles - -Problem 429: Sum of squares of unitary divisors - -Problem 430: Range flips - -Problem 431: Square Space Silo - -Problem 432: Totient sum - -Problem 433: Steps in Euclid's algorithm - -Problem 434: Rigid graphs - -Problem 435: Polynomials of Fibonacci numbers - -Problem 436: Unfair wager - -Problem 437: Fibonacci primitive roots - -Problem 438: Integer part of polynomial equation's solutions - -Problem 439: Sum of sum of divisors - -Problem 440: GCD and Tiling - -Problem 441: The inverse summation of coprime couples - -Problem 442: Eleven-free integers - -Problem 443: GCD sequence - -Problem 444: The Roundtable Lottery - -Problem 445: Retractions A - -Problem 446: Retractions B - -Problem 447: Retractions C - -Problem 448: Average least common multiple - -Problem 449: Chocolate covered candy - -Problem 450: Hypocycloid and Lattice points - -Problem 451: Modular inverses - -Problem 452: Long Products - -Problem 453: Lattice Quadrilaterals - -Problem 454: Diophantine reciprocals III - -Problem 455: Powers With Trailing Digits - -Problem 456: Triangles containing the origin II - -Problem 457: A polynomial modulo the square of a prime - -Problem 458: Permutations of Project - -Problem 459: Flipping game - -Problem 460: An ant on the move - -Problem 461: Almost Pi - -Problem 462: Permutation of 3-smooth numbers - -Problem 463: A weird recurrence relation - -Problem 464: Möbius function and intervals - -Problem 465: Polar polygons - -Problem 466: Distinct terms in a multiplication table - -Problem 467: Superinteger - -Problem 468: Smooth divisors of binomial coefficients - -Problem 469: Empty chairs - -Problem 470: Super Ramvok - -Problem 471: Triangle inscribed in ellipse - -Problem 472: Comfortable Distance II - -Problem 473: Phigital number base - -Problem 474: Last digits of divisors - -Problem 475: Music festival - -Problem 476: Circle Packing II - -Problem 477: Number Sequence Game - -Problem 478: Mixtures - -Problem 479: Roots on the Rise - -Problem 480: The Last Question \ No newline at end of file diff --git a/08-coding-interview-prep/rosetta-code.md b/08-coding-interview-prep/rosetta-code.md index d3c2b63..82bc786 100644 --- a/08-coding-interview-prep/rosetta-code.md +++ b/08-coding-interview-prep/rosetta-code.md @@ -3,179 +3,3 @@ The Rosetta Code is a list of programming challenges which will help you build your programming skills. "The idea is to present solutions to the same task in as many different languages as possible, to demonstrate how languages are similar and different, and to aid a person with a grounding in one approach to a problem in learning another." - Homepage of the Rosetta Code site - -# Upcoming Lessons # - -100 doors - -24 game - -9 billion names of God the integer - -ABC Problem - -Abundant, deficient and perfect number classifications - -Accumulator factory - -Ackermann function - -Align columns - -Amicable pairs - -Averages/Mode - -Averages/Pythagorean means - -Averages/Root mean square - -Babbage problem - -Balanced brackets - -Circles of given radius through two points - -Closest-pair problem - -Combinations - -Comma quibbling - -Compare a list of strings - -Convert seconds to compound duration - -Count occurrences of a substring - -Count the coins - -Cramer's rule - -Date format - -Date manipulation - -Day of the week - -Deal cards for FreeCell - -Deepcopy - -Define a primitive data type - -Department Numbers - -Discordian date - -Element-wise operations - -Emirp primes - -Entropy - -Equilibrium index - -Ethiopian multiplication - -Euler method - -Evaluate binomial coefficients - -Execute a Markov algorithm - -Execute Brain - -Extensible prime generator - -Factorial - -Factors of a Mersenne number - -Factors of an integer - -Farey sequence - -Fibonacci n-step number sequences - -Fibonacci sequence - -Fibonacci word - -Fractran - -Gamma function - -Gaussian elimination - -General FizzBuzz - -Generate lower case ASCII alphabet - -Generator/Exponential - -Gray code - -Greatest common divisor - -Greatest subsequential sum - -Hailstone sequence - -Happy numbers - -Harshad or Niven series - -Hash from two arrays - -Hash join - -Heronian triangles - -Hofstadter Figure-Figure sequences - -Hofstadter Q sequence - -I before E except after C - -IBAN - -Identity matrix - -Iterated digits squaring - -Jaro distance - -JortSort - -Josephus problem - -Sailors, coconuts and a monkey problem - -SEDOLs - -S-Expressions - -Taxicab numbers - -Tokenize a string with escaping - -Topological sort - -Top rank per group - -Towers of Hanoi - -Vector cross product - -Vector dot product - -Word wrap - -Y combinator - -Zeckendorf number representation - -Zhang-Suen thinning algorithm - -Zig-zag matrix \ No newline at end of file diff --git a/08-coding-interview-prep/take-home-projects.md b/08-coding-interview-prep/take-home-projects.md index b1e8f49..c6d87cf 100644 --- a/08-coding-interview-prep/take-home-projects.md +++ b/08-coding-interview-prep/take-home-projects.md @@ -4,44 +4,3 @@ This introduction is a stub Help us make it real on [GitHub](https://github.com/freeCodeCamp/learn/tree/master/src/introductions). -# Upcoming Lessons # - -Show the Local Weather - -Build a Wikipedia Viewer - -Use the Twitch JSON API - -Build an Image Search Abstraction Layer - -Build a Tic Tac Toe Game - -Build a Simon Game - -Build a Camper Leaderboard - -Build a Recipe Box - -Build the Game of Life - -Build a Roguelike Dungeon Crawler Game - -P2P Video Chat Application - -Show National Contiguity with a Force Directed Graph - -Map Data Across the Globe - -Manage a Book Trading Club - -Build a Pinterest Clone - -Build a Nightlife Coordination App - -Chart the Stock Market - -Build a Voting App - -Build a Pong Game - -Build a Light-Bright App \ No newline at end of file From 3bd36066c287f2124dcafe7ae2ab19caa3edfa72 Mon Sep 17 00:00:00 2001 From: Xing Liu Date: Sat, 28 Jul 2018 01:20:05 -0700 Subject: [PATCH 29/37] (WIP) style-guide (#33) Fix inline code in summary title that is not rendering --- CONTRIBUTING.md | 2 +- style-guide.md | 173 ++++++++++++++++++++++++++++++++++++++++++++++++ 2 files changed, 174 insertions(+), 1 deletion(-) create mode 100644 style-guide.md diff --git a/CONTRIBUTING.md b/CONTRIBUTING.md index 53ba8a0..b5b0c6d 100644 --- a/CONTRIBUTING.md +++ b/CONTRIBUTING.md @@ -72,7 +72,7 @@ * 如果你已经用当前的 branch 开了 PR，那么更新这个 branch 至远程的同时，你的 PR 也会自动更新。 ## 常见问题 -
为什么 `git add .` 命令有时会添加不上我的改动？ +
为什么 "git add ." 命令有时会添加不上我的改动？ 注意，`git add .` 中的 `.` 表示“当前路径”。 diff --git a/style-guide.md b/style-guide.md new file mode 100644 index 0000000..95b6a65 --- /dev/null +++ b/style-guide.md @@ -0,0 +1,173 @@ +## 开始之前 +1. 到官网平台做一下（至少看一下）你打算翻译的题目，这样你会对整体内容有一个更好的把握。 + +2. 翻译每句话之前，先把整行句子读一遍，这可以在很大程度上避免语序错误。 + +3. 如果你不熟悉你需要翻译的内容，请先去 MDN 和 Wikipedia 之类的平台查资料。如果觉得有难度，请联系管理员或其他朋友换任务（不用觉得不好意思，这其实很正常）。 + +## 翻译完成之后 +1. 通读一遍你的翻译，读的过程中，你很可能会发现错字，以及不通顺的地方。 + +2. 如果你是根据 review comments 更新 PR，请确保你已按照 review comments 里提到的问题更正，有些 review comments 里面提到的问题可能出现在多个地方。建议使用文本搜索工具或正则来查找。 + +3. 前后文要统一，标点符号、空格的使用要正确，记得检查。 + +## 格式 +### 全角与半角 +1. 翻译中不应出现全角的英文、空格和数字。 + +
示例 + + :smiley: `现在我们开始学习 CSS` + :slightly_frowning_face: `现在我们开始学习　CSS` + :slightly_frowning_face: `现在我们开始学习ＣＳＳ` + +
+ +2. 翻译中应使用全角标点（引号除外）。 + +
示例 + + :smiley: `我们需要写一个函数，让它返回这两个数字间所有数字（包含这两个数字）的总和。` + :slightly_frowning_face: `我们需要写一个函数,让它返回这两个数字间所有数字(包含这两个数字)的总和.` + +
+ +3. 引号的使用由引用内容决定。若引用内容全部为半角，则选用英文引号 `""`；若引用内容包含中文，则选用中文引号 `“”`。由于引号均为半角，如果引号前后为全角字符（标点除外），则需要添加空格。 + +
示例 + + :smiley: `请使用 “弹性盒子”（flexbox）调整元素的布局。` + :smiley: `在 package.json 文件中应该有 "mongodb" 依赖` + :slightly_frowning_face: `请使用"弹性盒子"（flexbox）调整元素的布局。` + +
+ +4. 应保留代码中的英文标点。 + +
示例 + + :smiley: `使用Math.min()来获取两数中较小的数。` + :slightly_frowning_face: `使用Math。min（）来获取两数中较小的数。` + +
+ +5. 块级引用（blockquote）、代码块（pre）、题目 `contents` 字段里的注释部分，若不翻译则保留原符号；若需要翻译则改用全角符号。 + +### 结尾标点 +1. 题目的描述性文字，需要在结尾添加标点。 + +2. 代码中的注释，原则上不需要在结尾添加标点。 + +### 空格 +1. 全角与半角内容之间需要加空格。注意：**内容指的是文字内容，不是标点符号**。 + +
示例 + + :smiley: `为下列项目添加 CSS 属性` + :smiley: `返回值是一个长度为 2 的数组` + :slightly_frowning_face: `JavaScript是一种语言` + +
+ +2. 全角符号的两边不应有空格。相应地，半角字符与全角符号之间也不应添加空格。 + +
示例 + + :smiley: `它接收一个查询的 document（一个 JSON 对象）作为参数。` + :smiley: `使用弹性盒子（flexbox）` + :slightly_frowning_face: `使用弹性盒子（ flexbox ）` + :slightly_frowning_face: `它的值应为 10 。` + +
+ +3. HTML 标签 + 1. `
` 之后不添加空格。 + +
示例 + + :smiley: `注意
以下代码……` + +
+ + 2. 行内元素如 ``、``、``、``，是否加空格取决于标签与外面文本，添加规则参考上文[空格 - 1](#空格)，元素中的内容也应按此标准添加。 + +
示例 + + :smiley: `请参考 Mongoose 文档获取帮助。` + :slightly_frowning_face: `父级元素叫做container` + +
+ + 3. `` 标签，无论全半角，任何情况都不添加空格。 + +
示例 + + :smiley: `使用mongoose.connect命令来连接数据库。` + +
+ +## 翻译原则 +1. 追求意译，不要逐字逐句翻译。可以根据上下文对内容进行必要的补充。 + +
示例（有关测试结果的提示信息） + 原文：`You can return the array with its elements in any order.` + + :slightly_frowning_face: `你可以返回一个数组，这个数组中的元素顺序无所谓` + :slightly_frowning_face: `你可以返回一个元素有任意顺序的数组` + :smiley: `返回数组中的元素顺序不会影响测试结果` + +
+ +
示例 + 原文：`JavaScript is important, well, you know.` + + :slightly_frowning_face: `JavaScript 很重要，那么，你知道的。` + :smiley: `你知道的，JavaScript 很重要。` + :smiley: `JavaScript 很重要，你懂的。` + +
+ +2. 尽可能地采用书面语。 + +
示例 + 原文：`Learning JavaScript is fun!` + + :slightly_frowning_face: `学 JavaScript 真的太好玩儿了！` + :smiley: `学 JavaScript 很有趣！` + +
+ +3. 如需保留原文中的英文，请核实拼写是否与官网或 Wikipedia 一致。如 `JavaScript`、`jQuery`、`React`、`MongoDB` 等。 + +## 中英有别 +1. 英文与中文的句号用法不同。在翻译的时候，有时我们需要把多个句子合并成一句。 + +
示例 + 原文：`JavaScript is a high-level, interpreted programming language. It is a language which is also characterized as dynamic and weakly typed.` + + :slightly_frowning_face: `JavaScript 是一种高级、解释型的编程语言。它有动态和弱类型的特点。` + :smiley: `JavaScript 是一种动态、弱类型、解释型的高级编程语言。` + +
+ +2. 英语中的 `a` 和 `an` 有时候不表示数量，而是泛指。此时不应翻译成“一个”。 + +
示例 + 原文：`Use CSS to position an element in a flexible way.` + + :slightly_frowning_face: `以一种灵活的方式使用 CSS 去布局一个元素。` + :smiley: `灵活地使用 CSS 布局元素。` + +
+ +3. 英语中习惯使用被动语态，中文则习惯使用主动语态。 + +
示例 + 原文：`The direction that child items are arranged is called the main axis.` + + :slightly_frowning_face: `子元素排列的方向被称为主轴。` + :smiley: `子元素排列的方向叫做主轴。` + +
+ From 60128e9f7d1c840683d2251a80d3f2cb3a6df371 Mon Sep 17 00:00:00 2001 From: Willard Wong Date: Sat, 28 Jul 2018 16:43:43 +0800 Subject: [PATCH 30/37] Translate managing-packages-with-npm (#1) * translation 2/10 * translation 4/10 * translate assert & revise * translation 2/10 * revise * fix typo * translation 2/10 * fix typo * revise * translate the document * fix typo * translate the title * remove upcoming --- .../managing-packages-with-npm.json | 200 +++++++++--------- .../managing-packages-with-npm.md | 15 +- 2 files changed, 107 insertions(+), 108 deletions(-) diff --git a/05-apis-and-microservices/managing-packages-with-npm.json b/05-apis-and-microservices/managing-packages-with-npm.json index 05d6f0f..6b6e589 100644 --- a/05-apis-and-microservices/managing-packages-with-npm.json +++ b/05-apis-and-microservices/managing-packages-with-npm.json @@ -8,21 +8,21 @@ "id": "587d7fb3367417b2b2512bfb", "title": "How to Use package.json, the Core of Any Node.js Project or npm Package", "description": [ - "The file package.json is the center of any Node.js project or npm package. It stores information about your project just like the -section in a HTML document describes the content of a webpage. The package.json consists of a single JSON-object where information is stored in \"key\": value-pairs. There are only two required fields in a minimal package.json - name and version - but it’s a good practice to provide additional information about your project that could be useful to future users or maintainers.", - "The author-field", - "If you go to the Glitch project that you set up previously and look at on the left side of your screen, you’ll find the file tree where you can see an overview of the various files in your project. Under the file tree’s back-end section, you’ll find package.json - the file that we’ll be improving in the next couple of challenges.", - "One of the most common pieces of information in this file is the author-field that specifies who’s the creator of a project. It can either be a string or an object with contact details. The object is recommended for bigger projects but in our case, a simple string like the following example will do.", + "package.json 是任何 Node.js 项目或 npm 包的中心。它存储项目的相关信息，就像 HTML 文档中的 区域是用来描述网页的通用信息（元信息）一样。package.json 由单个 JSON 对象组成，它以键值对的形式存储项目的信息。一个最小的 package.json 文件至少包含两个必须字段：name 和 version——但是提供有关项目的附加信息是一个更好的做法，在以后它可能对你的用户或者维护者有所帮助。", + "author 字段", + "如果你转到之前设置的 Glitch 项目并查看屏幕左侧，你会看到一个文件树，你可以在其中查看项目中各种文件的概述。在文件树的末尾部分，你会看到 package.json——我们将在接下来的几个挑战中改进这个文件。", + "这个文件中最常见的信息之一是 author 字段，它指定了谁是项目的创建者。它可以是字符串，也可以是带有联系人详细信息的对象。对于较大的项目，建议使用对象，但是在我们的例子中，一个简单的字符串就可以了，比如下面的例子。", "\"author\": \"Jane Doe\",", - "Instructions", - "Add your name to the author-field in the package.json of your Glitch project.", - "Remember that you’re writing JSON.", - "All field-names must use double-quotes (\"), e.g. \"author\"", - "All fields must be separated with a comma (,)" + "说明", + "将你的名字添加到 Glitch 项目中，package.json 的 author 字段。", + "请记住，你正在编写 JSON 文件。", + "所有的字段名必须使用双引号（\"）包裹, 比如：\"author\"", + "所有字段必须用逗号（,）分隔" ], "tests": [ { - "text": "package.json should have a valid \"author\" key", - "testString": "getUserInput => $.get(getUserInput('url') + '/_api/package.json').then(data => { var packJson = JSON.parse(data); assert(packJson.author, '\"author\" is missing'); }, xhr => { throw new Error(xhr.responseText); })" + "text": "package.json 应该有一个有效的 \"author\" 键", + "testString": "getUserInput => $.get(getUserInput('url') + '/_api/package.json').then(data => { var packJson = JSON.parse(data); assert(packJson.author, '缺少 \"author\"'); }, xhr => { throw new Error(xhr.responseText); })" } ], "solutions": [], @@ -33,18 +33,18 @@ "id": "587d7fb3367417b2b2512bfc", "title": "Add a Description to Your package.json", "description": [ - "The next part of a good package.json is the description-field, where a short but informative description about your project belongs.", - "If you some day plan to publishing a package to npm, remember that this is the string that should sell your idea to the user when they decide whether to install your package or not. However, that’s not the only use case for the description: Since it’s a great way to summarize what a project does, it’s just as important for your normal Node.js-projects to help other developers, future maintainers or even your future self understand the project quickly.", - "Regardless of what you plan for your project, a description is definitely recommended. Let’s add something similar to this:", + "一个好的 package.json 文件的下一部分就是 description 字段, 通过简洁的文字来描述你的项目。", + "如果你计划将来把这个包发布到 npm, 请注意 description 字段的作用是告知用户这个包的用途，这样用户就可以决定是否要安装你发布的包。然而，这并不是描述信息的唯一使用场景：它也是一种很好的总结项目的方式，对于一个普通的 Node.js 项目来说，它可以帮助其它开发者、未来的维护者以及你自己快速地了解项目，这同样非常重要。", + "无论你如何计划项目，都建议你使用描述信息。我们来添加类似这样的信息：", "\"description\": \"A project that does something awesome\",", - "Instructions", - "Add a description to the package.json in your Glitch project.", - "Remember to use double-quotes for field-names (\") and commas (,) to separate fields." + "说明", + "在 Glitch 项目的 package.json 中添加描述。", + "请记住使用 （\"）包裹字段名并且使用（,）分隔字段" ], "tests": [ { - "text": "package.json should have a valid \"description\" key", - "testString": "getUserInput => $.get(getUserInput('url') + '/_api/package.json').then(data => { var packJson = JSON.parse(data); assert(packJson.description, '\"description\" is missing'); }, xhr => { throw new Error(xhr.responseText); })" + "text": "package.json 应该有一个有效的 \"description\" 键", + "testString": "getUserInput => $.get(getUserInput('url') + '/_api/package.json').then(data => { var packJson = JSON.parse(data); assert(packJson.description, '缺少 \"description\"'); }, xhr => { throw new Error(xhr.responseText); })" } ], "solutions": [], @@ -55,26 +55,26 @@ "id": "587d7fb4367417b2b2512bfd", "title": "Add Keywords to Your package.json", "description": [ - "The keywords-field is where you can describe your project using related keywords.", - "Example", + "你可以在 keywords 字段中使用相关的关键字描述项目。", + "例子", "\"keywords\": [ \"descriptive\", \"related\", \"words\" ],", - "As you can see, this field is structured as an array of double-quoted strings.", - "Instructions", - "Add an array of suitable strings to the keywords-field in the package.json of your Glitch project.", - "One of the keywords should be freecodecamp." + "正如你所见，这个字段的结构是一个由双引号字符串组成的数组。", + "说明", + "在 Glitch 项目的 package.json 中，给 keywords 添加适当的字符串数组。", + "关键词之一应该是 freecodecamp。" ], "tests": [ { - "text": "package.json should have a valid \"keywords\" key", - "testString": "getUserInput => $.get(getUserInput('url') + '/_api/package.json').then(data => { var packJson = JSON.parse(data); assert(packJson.keywords, '\"keywords\" is missing'); }, xhr => { throw new Error(xhr.responseText); })" + "text": "package.json 应该有一个有效的 \"keywords\" 键", + "testString": "getUserInput => $.get(getUserInput('url') + '/_api/package.json').then(data => { var packJson = JSON.parse(data); assert(packJson.keywords, '缺少 \"keywords\"'); }, xhr => { throw new Error(xhr.responseText); })" }, { - "text": "\"keywords\" field should be an Array", - "testString": "getUserInput => $.get(getUserInput('url') + '/_api/package.json').then(data => { var packJson = JSON.parse(data); assert.isArray(packJson.keywords, '\"keywords\" is not an array'); }, xhr => { throw new Error(xhr.responseText); })" + "text": "\"keywords\" 应该是一个数组", + "testString": "getUserInput => $.get(getUserInput('url') + '/_api/package.json').then(data => { var packJson = JSON.parse(data); assert.isArray(packJson.keywords, '\"keywords\" 不是一个数组'); }, xhr => { throw new Error(xhr.responseText); })" }, { - "text": "\"keywords\" should include \"freecodecamp\"", - "testString": "getUserInput => $.get(getUserInput('url') + '/_api/package.json').then(data => { var packJson = JSON.parse(data); assert.include(packJson.keywords, 'freecodecamp', '\"keywords\" does not include \"freecodecamp\"'); }, xhr => { throw new Error(xhr.responseText); })" + "text": "\"keywords\" 中应该包含关键词 \"freecodecamp\"", + "testString": "getUserInput => $.get(getUserInput('url') + '/_api/package.json').then(data => { var packJson = JSON.parse(data); assert.include(packJson.keywords, 'freecodecamp', '\"keywords\" 未包含 \"freecodecamp\"'); }, xhr => { throw new Error(xhr.responseText); })" } ], "solutions": [], @@ -85,18 +85,18 @@ "id": "587d7fb4367417b2b2512bfe", "title": "Add a License to Your package.json", "description": [ - "The license-field is where you inform users of your project what they are allowed to do with it.", - "Some common licenses for open source projects include MIT and BSD. http://choosealicense.com is a great resource if you want to learn more about what license could fit your project.", - "License information is not required. Copyright laws in most countries will give you ownership of what you create by default. However, it’s always a good practice to explicitly state what users can and can’t do.", - "Example", + "license 字段是你告知用户允许他们拿这个项目干什么的地方。", + "常见的开源协议是 MIT 和 BSD。如果你想了解更多适合你项目的许可证的信息，那么 http://choosealicense.com 是一个不错的网站。", + "许可证信息并不是必须的。大多数国家的版权法会默认让你拥有自己创作的作品的所有权。但是，明确说明用户可以做什么和不能做什么会是一个很好的做法。", + "例子", "\"license\": \"MIT\",", - "Instructions", - "Fill the license-field in the package.json of your Glitch project as you find suitable." + "说明", + "在 Glitch 项目的 package.json 中填写合适的 license 字段。" ], "tests": [ { - "text": "package.json should have a valid \"license\" key", - "testString": "getUserInput => $.get(getUserInput('url') + '/_api/package.json').then(data => { var packJson = JSON.parse(data); assert(packJson.license, '\"license\" is missing'); }, xhr => { throw new Error(xhr.responseText); })" + "text": "package.json 应该有一个有效的 \"license\" 键", + "testString": "getUserInput => $.get(getUserInput('url') + '/_api/package.json').then(data => { var packJson = JSON.parse(data); assert(packJson.license, '缺少 \"license\"'); }, xhr => { throw new Error(xhr.responseText); })" } ], "solutions": [], @@ -107,16 +107,16 @@ "id": "587d7fb4367417b2b2512bff", "title": "Add a Version to Your package.json", "description": [ - "The version is together with name one of the required fields in a package.json. This field describes the current version of your project.", - "Example", + "在 package.json 中 version 和 name 是所必填的字段之一。version 字段描述了当前项目的版本。", + "例子", "\"version\": \"1.2\",", - "Instructions", - "Add a version to the package.json in your Glitch project." + "说明", + "在 Glitch 项目中的 package.json 中添加一个版本号。" ], "tests": [ { - "text": "package.json should have a valid \"version\" key", - "testString": "getUserInput => $.get(getUserInput('url') + '/_api/package.json').then(data => { var packJson = JSON.parse(data); assert(packJson.version, '\"version\" is missing'); }, xhr => { throw new Error(xhr.responseText); })" + "text": "package.json 应该包含一个有效的 \"version\" 键", + "testString": "getUserInput => $.get(getUserInput('url') + '/_api/package.json').then(data => { var packJson = JSON.parse(data); assert(packJson.version, '缺少 \"version\"'); }, xhr => { throw new Error(xhr.responseText); })" } ], "solutions": [], @@ -127,24 +127,24 @@ "id": "587d7fb4367417b2b2512c00", "title": "Expand Your Project with External Packages from npm", "description": [ - "One of the biggest reasons to use a package manager is their powerful dependency management. Instead of manually having to make sure that you get all dependencies whenever you set up a project on a new computer, npm automatically installs everything for you. But how can npm know exactly what your project needs? Meet the dependencies-section of your package.json.", - "In the dependencies-section, packages your project require are stored using the following format:", + "使用包管理器的最大原因之一是它们强大的依赖管理特性。在新的计算机上开始一个项目时，不用手动确认你已安装所有的依赖，npm 会自动为你安装它们。但是 npm 如何准确的知道你项目需要哪些依赖呢？我们来看看 package.json 中 dependencies 这一部分。", + "在 dependencies 这一部分，你的项目需要按照下面这种格式来存储这些依赖包：", "\"dependencies\": {", " \"package-name\": \"version\",", " \"express\": \"4.14.0\"", "}", - "Instructions", - "Add version 2.14.0 of the package moment to the dependencies-field of your package.json", - "Moment is a handy library for working with time and dates." + "说明", + "在 package.json 的 dependencies 字段中添加一个版本号为 2.14.0 的 moment 包", + "Moment 是一个非常方便的库，它用来处理时间和日期。" ], "tests": [ { - "text": "\"dependencies\" should include \"moment\"", - "testString": "getUserInput => $.get(getUserInput('url') + '/_api/package.json').then(data => { var packJson = JSON.parse(data); assert.property(packJson.dependencies, 'moment', '\"dependencies\" does not include \"moment\"'); }, xhr => { throw new Error(xhr.responseText); })" + "text": "\"dependencies\" 应该包含 \"moment\"", + "testString": "getUserInput => $.get(getUserInput('url') + '/_api/package.json').then(data => { var packJson = JSON.parse(data); assert.property(packJson.dependencies, 'moment', '\"dependencies\" 未包含 \"moment\"'); }, xhr => { throw new Error(xhr.responseText); })" }, { - "text": "\"moment\" version should be \"2.14.0\"", - "testString": "getUserInput => $.get(getUserInput('url') + '/_api/package.json').then(data => { var packJson = JSON.parse(data); assert.match(packJson.dependencies.moment, /^[\\^\\~]?2\\.14\\.0/, 'Wrong version of \"moment\" installed. It should be 2.14.0'); }, xhr => { throw new Error(xhr.responseText); })" + "text": "\"moment\" 的版本应该是 \"2.14.0\"", + "testString": "getUserInput => $.get(getUserInput('url') + '/_api/package.json').then(data => { var packJson = JSON.parse(data); assert.match(packJson.dependencies.moment, /^[\\^\\~]?2\\.14\\.0/, '安装的 \"moment\" 版本有误。它应该是 2.14.0'); }, xhr => { throw new Error(xhr.responseText); })" } ], "solutions": [], @@ -155,29 +155,29 @@ "id": "587d7fb5367417b2b2512c01", "title": "Manage npm Dependencies By Understanding Semantic Versioning", "description": [ - "Versions of the npm packages in the dependencies-section of your package.json follow what’s called Semantic Versioning (SemVer), an industry standard for software versioning aiming to make it easier to manage dependencies. Libraries, frameworks or other tools published on npm should use SemVer in order to clearly communicate what kind of changes that projects who depend on the package can expect if they update.", - "SemVer doesn’t make sense in projects without public APIs - so unless your project is similar to the examples above, use another versioning format.", - "So why do you need to understand SemVer?", - "Knowing SemVer can be useful when you develop software that use external dependencies (which you almost always do). One day, your understanding of these numbers will save you from accidentally introducing breaking changes to your project without understanding why things “that worked yesterday” suddenly doesn’t.", - "This is how Semantic Versioning works according to the official website:", - "Given a version number MAJOR.MINOR.PATCH, increment the:", - "MAJOR version when you make incompatible API changes,", - "MINOR version when you add functionality in a backwards-compatible manner, and", - "PATCH version when you make backwards-compatible bug fixes.", - "This means that PATCHes are bug fixes and MINORs add new features but neither of them break what worked before. Finally, MAJORs add changes that won’t work with earlier versions.", - "Example", - "A semantic version number: 1.3.8", - "Instructions", - "In the dependencies-section of your package.json, change the version of moment to match MAJOR version 2, MINOR version 10 and PATCH version 2" + "在 package.json 中，dependencies 这部分的 npm 包的版本号遵循所谓的语义化版本（SemVer），它是一种软件版本控制的行业标准，旨在使管理依赖项更加容易。在 npm 上发布的库、框架或其它工具都应该使用语义化版本（SemVer），以便让使用该依赖包的用户能够在依赖包需要升级时，提前规划自己的项目需要为之做出的改动。", + "在没有公共 API 的项目中，语义化版本（SemVer）没有意义——除非你的项目与上面的例子类似，否则请使用其它的版本控制方式吧。", + "为什么你需要了解语义化版本（SemVer）？", + "在开发使用外部依赖项的软件（大多数情况都是这样）时，了解语义化版本（SemVer）会很有用。有一天你会明白这些数字的含义，在项目中它可以避免你意外地引入一些非向下兼容的更改，同时也能避免“昨天还能好好的运行，今天就不行了”这种情况发生。", + "根据语义化版本（SemVer）官方网站，它是这样规定的：", + "版本格式：主版本号.次版本号.修订号，版本号递增规则如下：", + "主版本号：当你做了不向下兼容的公共 API 修改，", + "次版本号：当你添加了向下兼容的新功能，", + "修订号：当你做了向下兼容的问题修正。", + "这意味着修订号是用来修复错误的，次版本号则是添加了新功能，但它们都没有破坏之前的功能。最后，主版本号的变更则是添加了对早期版本不兼容的更改。", + "例子", + "一个语义化的版本号：1.3.8", + "说明", + "在 package.json 中，修改 dependencies 里的 moment 的版本号，让它的主版本是 2，次版本号是 10，修订号是 2。" ], "tests": [ { - "text": "\"dependencies\" should include \"moment\"", - "testString": "getUserInput => $.get(getUserInput('url') + '/_api/package.json').then(data => { var packJson = JSON.parse(data); assert.property(packJson.dependencies, 'moment', '\"dependencies\" does not include \"moment\"'); }, xhr => { throw new Error(xhr.responseText); })" + "text": "\"dependencies\" 应该包含 \"moment\"", + "testString": "getUserInput => $.get(getUserInput('url') + '/_api/package.json').then(data => { var packJson = JSON.parse(data); assert.property(packJson.dependencies, 'moment', '\"dependencies\" 未包含 \"moment\"'); }, xhr => { throw new Error(xhr.responseText); })" }, { - "text": "\"moment\" version should be \"2.10.2\"", - "testString": "getUserInput => $.get(getUserInput('url') + '/_api/package.json').then(data => { var packJson = JSON.parse(data); assert.match(packJson.dependencies.moment, /^[\\^\\~]?2\\.10\\.2/, 'Wrong version of \"moment\". It should be 2.10.2'); }, xhr => { throw new Error(xhr.responseText); })" + "text": "\"moment\" 的版本号应该是 \"2.10.2\"", + "testString": "getUserInput => $.get(getUserInput('url') + '/_api/package.json').then(data => { var packJson = JSON.parse(data); assert.match(packJson.dependencies.moment, /^[\\^\\~]?2\\.10\\.2/, '\"moment\" 的版本号有误。它应该是 2.10.2'); }, xhr => { throw new Error(xhr.responseText); })" } ], "solutions": [], @@ -188,22 +188,22 @@ "id": "587d7fb5367417b2b2512c02", "title": "Use the Tilde-Character to Always Use the Latest Patch Version of a Dependency", "description": [ - "In the last challenge, we told npm to only include a specific version of a package. That’s a useful way to freeze your dependencies if you need to make sure that different parts of your project stay compatible with each other. But in most use cases you don’t want to miss bug fixes, since they often include important security patches and (hopefully) don’t break things in doing so.", - "To allow a npm dependency to get updated to the latest PATCH-version, you can prefix the dependency’s version with the tilde-character (~). In package.json, our current rule for how npm may upgrade moment is to use a specific version only (2.10.2), but we want to allow the latest 2.10.x-version.", - "Example", - "\"some-package-name\": \"~1.3.8\" allows updates to any 1.3.x version.", - "Instructions", - "Use the tilde-character (~) to prefix the version of moment in your dependencies and allow npm to update it to any new PATCH release.", - "Note that the version numbers themselves not should be changed." + "在最后一个挑战中，我们告诉 npm 只包含特定版本的依赖包。如果想让项目各个部分保持相互兼容，锁定依赖包版本是一个有效的办法。但是大多数情况下，我们并不希望错过依赖项的问题修复，因为它们通常包含重要的安全补丁，而且它们理论上也会兼容我们既有的代码。", + "为了让 npm 依赖项更新到最新的修订版，你可以在依赖包的版本号前加一个波浪符号（~）。在 package.json 中，我们当前的 moment 依赖包更新规则是：仅使用特定版本（2.10.2），但我们想用它最新的 2.10.x 版本。", + "例子", + "\"some-package-name\": \"~1.3.8\" 定义这个包允许使用的版本为 1.3.x。", + "说明", + "在 dependencies 中，给 moment 的版本号添加波浪符号（~）前缀，允许 npm 将其更新为最新的修订版。", + "请注意，原本的版本号不用更改。" ], "tests": [ { - "text": "\"dependencies\" should include \"moment\"", - "testString": "getUserInput => $.get(getUserInput('url') + '/_api/package.json').then(data => { var packJson = JSON.parse(data); assert.property(packJson.dependencies, 'moment', '\"dependencies\" does not include \"moment\"'); }, xhr => { throw new Error(xhr.responseText); })" + "text": "\"dependencies\" 应该包含 \"moment\"", + "testString": "getUserInput => $.get(getUserInput('url') + '/_api/package.json').then(data => { var packJson = JSON.parse(data); assert.property(packJson.dependencies, 'moment', '\"dependencies\" 未包含 \"moment\"'); }, xhr => { throw new Error(xhr.responseText); })" }, { - "text": "\"moment\" version should match \"~2.10.2\"", - "testString": "getUserInput => $.get(getUserInput('url') + '/_api/package.json').then(data => { var packJson = JSON.parse(data); assert.match(packJson.dependencies.moment, /^\\~2\\.10\\.2/, 'Wrong version of \"moment\". It should be ~2.10.2'); }, xhr => { throw new Error(xhr.responseText); })" + "text": "\"moment\" 的版本号应该是 \"~2.10.2\"", + "testString": "getUserInput => $.get(getUserInput('url') + '/_api/package.json').then(data => { var packJson = JSON.parse(data); assert.match(packJson.dependencies.moment, /^\\~2\\.10\\.2/, '\"moment\" 版本号有误，它应该是 ~2.10.2'); }, xhr => { throw new Error(xhr.responseText); })" } ], "solutions": [], @@ -214,22 +214,22 @@ "id": "587d7fb5367417b2b2512c03", "title": "Use the Caret-Character to Use the Latest Minor Version of a Dependency", "description": [ - "Similar to how the tilde (~) we learned about in the last challenge allow npm to install the latest PATCH for a dependency, the caret (^) allows npm to install future updates as well. The difference is that the caret will allow both MINOR updates and PATCHes.", - "At the moment, your current version of moment should be ~2.10.2 which allows npm to install to the latest 2.10.x-version. If we instead were to use the caret (^) as our version prefix, npm would instead be allowed to update to any 2.x.x-version.", - "Example", - "\"some-package-name\": \"^1.3.8\" allows updates to any 1.x.x version.", - "Instructions", - "Use the caret-character (^) to prefix the version of moment in your dependencies and allow npm to update it to any new MINOR release.", - "Note that the version numbers themselves not should be changed." + "和上一个挑战中我们学到的波浪符号（~）来安装最新的修订版依赖一样，使用插入符号（^）允许 npm 来安装功能更新。它们的不同之处在于：插入符号（^）允许次版本和修订版更新。", + "此刻，你项目中的 moment 依赖包的版本应该是 ~2.10.2，这意味着 npm 可以安装 2.10.x 版的 moment，如果使用插入符号（^）来替换版本号的前缀，那么 npm 可以安装的版本则是 2.x.x。", + "例子", + "\"some-package-name\": \"^1.3.8\" 定义这个包允许使用的版本为 1.x.x。", + "说明", + "使用插入符号（^）为依赖项中的 moment 版本添加前缀，允许 npm 更新依赖包到任意向下兼容的新功能版。", + "请注意，原本的版本号不用更改。" ], "tests": [ { "text": "\"dependencies\" should include \"moment\"", - "testString": "getUserInput => $.get(getUserInput('url') + '/_api/package.json').then(data => { var packJson = JSON.parse(data); assert.property(packJson.dependencies, 'moment', '\"dependencies\" does not include \"moment\"'); }, xhr => { throw new Error(xhr.responseText); })" + "testString": "getUserInput => $.get(getUserInput('url') + '/_api/package.json').then(data => { var packJson = JSON.parse(data); assert.property(packJson.dependencies, 'moment', '\"dependencies\" 未包含 \"moment\"'); }, xhr => { throw new Error(xhr.responseText); })" }, { "text": "\"moment\" version should match \"^2.x.x\"", - "testString": "getUserInput => $.get(getUserInput('url') + '/_api/package.json').then(data => { var packJson = JSON.parse(data); assert.match(packJson.dependencies.moment, /^\\^2\\./, 'Wrong version of \"moment\". It should be ^2.10.2'); }, xhr => { throw new Error(xhr.responseText); })" + "testString": "getUserInput => $.get(getUserInput('url') + '/_api/package.json').then(data => { var packJson = JSON.parse(data); assert.match(packJson.dependencies.moment, /^\\^2\\./, '\"moment\" 的版本号有误，它应该是 ^2.10.2'); }, xhr => { throw new Error(xhr.responseText); })" } ], "solutions": [], @@ -240,17 +240,17 @@ "id": "587d7fb5367417b2b2512c04", "title": "Remove a Package from Your Dependencies", "description": [ - "Now you’ve tested a few ways you can manage dependencies of your project by using the package.json's dependencies-section. You’ve included external packages by adding them to the file and even told npm what types of versions you want by using special characters as the tilde (~) or the caret (^).", - "But what if you want to remove an external package that you no longer need? You might already have guessed it - Just remove the corresponding \"key\": value-pair for that from your dependencies.", - "This same method applies to removing other fields in your package.json as well", - "Instructions", - "Remove the package moment from your dependencies.", - "Make sure you have the right amount of commas after removing it." + "在 package.json 中 dependencies 这一部分，目前尝试了一些管理依赖的方式。你已经添加了一些外部的依赖包到项目中，甚至通过一些特殊的字符比如波浪符号（~）或者插入符号（^）来告诉 npm 你想要的版本类型。", + "但是，如果想要删除不需要的依赖包，该怎么办呢？你可能已经猜到了——只需要删除 dependencies 中的键值对就行了。", + "同样的方法也适用于删除 package.json 中的其它字段", + "说明", + "删除 moment 依赖包。", + "删除依赖包后，确保没有多余的逗号。" ], "tests": [ { - "text": "\"dependencies\" should not include \"moment\"", - "testString": "getUserInput => $.get(getUserInput('url') + '/_api/package.json').then(data => { var packJson = JSON.parse(data); assert.notProperty(packJson.dependencies, 'moment', '\"dependencies\" still includes \"moment\"'); }, xhr => { throw new Error(xhr.responseText); })" + "text": "\"dependencies\" 不包含 \"moment\"", + "testString": "getUserInput => $.get(getUserInput('url') + '/_api/package.json').then(data => { var packJson = JSON.parse(data); assert.notProperty(packJson.dependencies, 'moment', '\"dependencies\" 中仍然有 \"moment\"'); }, xhr => { throw new Error(xhr.responseText); })" } ], "solutions": [], diff --git a/05-apis-and-microservices/managing-packages-with-npm.md b/05-apis-and-microservices/managing-packages-with-npm.md index b92c4e1..1a43f5b 100644 --- a/05-apis-and-microservices/managing-packages-with-npm.md +++ b/05-apis-and-microservices/managing-packages-with-npm.md @@ -1,14 +1,13 @@ -# Introduction to the Managing Packages with npm Challenges # +# 挑战简介——使用 npm 管理包 # -The Node Package Manager (npm) is a command-line tool used by developers to share and control modules (or packages) of JavaScript code written for use with Node.js. +Node 包管理器（npm）是一种命令行工具，开发人员使用它来分享和管理 Node.js 编写的 JavaScript 模块（包）。 -When starting a new project, npm generates a package.json file. This file lists the package dependencies for your project. Since npm packages are regularly updated, the package.json file allows you to set specific version numbers for each dependency. This ensures that updates to a package don't break your project. +启动新项目时，npm 会生成一个 package.json 文件。此文件列出了项目的所有依赖。因为依赖包是有规律可循的，package.json 文件允许为每个依赖项设置特定的版本号。以确保这些依赖包更新时不会破坏你的项目。 -npm saves packages in a folder named nodemodules. These packages can be installed in two ways: +npm 会保存依赖包放入叫 nodemodules 的文件夹内。这些依赖包可以通过两种方式安装： -globally in a root nodemodules folder, accessible by all projects. -locally within a project's own node_modules folder, accessible only to that project. +全局安装的依赖包会放在根目录下叫 nodemodules 的文件夹内，以供所有项目使用 +本地安装的依赖包会放在项目内叫 node_modules 的文件夹内，只可以在当前项目使用 -Most developers prefer to install packages local to each project to create a separation between the dependencies of different projects. Working on these challenges will involve you writing your code on Glitch on our starter project. After completing each challenge you can copy your public Glitch url (to the homepage of your app) into the challenge screen to test it! Optionally you may choose to write your project on another platform but it must be publicly visible for our testing. -Start this project on Glitch using this link or clone this repository on GitHub! If you use Glitch, remember to save the link to your project somewhere safe! +为了能隔离不同项目之间的依赖，大多数开发者更喜欢在本地项目内安装依赖包。你需要在 Glitch 里启动这个项目并编写相应的代码来应对这些挑战。完成每个挑战后，你可以将 Glitch 地址公开（到你的应用主页）并复制它们，放到挑战题中进行测试！你可以选择另外的平台编写项目代码，但是必须设置为可公开访问，以便我们进行测试。可以使用这个链接在 Glitch 上开始项目，或者克隆这个 GitHub 仓库链接来开始项目！如果你使用 Glitch，请记住将项目链接保存到安全的地方！ From b0263b33301ce75b520294e899e7b0260e64b71a Mon Sep 17 00:00:00 2001 From: XERO Date: Sat, 28 Jul 2018 16:46:16 +0800 Subject: [PATCH 31/37] Translate responsive-web-design-projects (#2) * part1 * update previous & 2/5 finished * space fix * fix part1&part2 spacing --- .../responsive-web-design-projects.json | 76 +++++++++---------- 1 file changed, 38 insertions(+), 38 deletions(-) diff --git a/01-responsive-web-design/responsive-web-design-projects.json b/01-responsive-web-design/responsive-web-design-projects.json index da24157..9636a99 100644 --- a/01-responsive-web-design/responsive-web-design-projects.json +++ b/01-responsive-web-design/responsive-web-design-projects.json @@ -8,21 +8,21 @@ "id": "bd7158d8c442eddfaeb5bd18", "title": "Build a Tribute Page", "description": [ - "Objective: Build a CodePen.io app that is functionally similar to this: https://codepen.io/freeCodeCamp/full/zNqgVx.", - "Fulfill the below user stories and get all of the tests to pass. Give it your own personal style.", - "You can use HTML, JavaScript, and CSS to complete this project. Plain CSS is recommended because that is what the lessons have covered so far and you should get some practice with plain CSS. You can use Bootstrap or SASS if you choose. Additional technologies (just for example jQuery, React, Angular, or Vue) are not recommended for this project, and using them is at your own risk. Other projects will give you a chance to work with different technology stacks like React. We will accept and try to fix all issue reports that use the suggested technology stack for this project. Happy coding!", - "User Story #1: My tribute page should have an element with a corresponding id=\"main\", which contains all other elements.", - "User Story #2: I should see an element with a corresponding id=\"title\", which contains a string (i.e. text) that describes the subject of the tribute page (e.g. \"Dr. Norman Borlaug\").", - "User Story #3: I should see a div element with a corresponding id=\"img-div\".", - "User Story #4: Within the img-div element, I should see an img element with a corresponding id=\"image\".", - "User Story #5: Within the img-div element, I should see an element with a corresponding id=\"img-caption\" that contains textual content describing the image shown in img-div.", - "User Story #6: I should see an element with a corresponding id=\"tribute-info\", which contains textual content describing the subject of the tribute page.", - "User Story #7: I should see an a element with a corresponding id=\"tribute-link\", which links to an outside site that contains additional information about the subject of the tribute page. HINT: You must give your element an attribute of target and set it to _blank in order for your link to open in a new tab (i.e. target=\"_blank\").", - "User Story #8: The img element should responsively resize, relative to the width of its parent element, without exceeding its original size.", - "User Story #9: The img element should be centered within its parent element.", - "You can build your project by forking this CodePen pen. Or you can use this CDN link to run the tests in any environment you like: https://gitcdn.link/repo/freeCodeCamp/testable-projects-fcc/master/build/bundle.js.", - "Once you're done, submit the URL to your working project with all its tests passing.", - "Remember to use the Read-Search-Ask method if you get stuck." + "目标：使用 CodePen.io 搭建一个与这个功能上相似的 app：https://codepen.io/freeCodeCamp/full/zNqgVx。", + "在满足以下 用户故事 并能通过所有测试的前提下，你可以根据自己的喜好来美化你的 app。", + "你可以使用 HTML、JavaScript 以及 CSS 来完成项目，由于目前我们只学到了 CSS，因此建议你只使用 CSS 完成这个项目，顺便还可以巩固一下之前学到的内容。你也可以使用 Bootstrap 或者是 SASS。在当前的项目中，不推荐使用其他技术如 jQurey、React、Angular 或者是 Vue，因为一旦出现问题，风险自担。但在别的项目中我们仍有机会去使用不同的技术栈比如 React，我们会接受并尽力处理你在使用建议的技术栈过程中遇到的问题，编码愉快！", + "用户故事 #1：我的致敬页应有对应 id=\"main\" 的元素， 其中包含其他的所有元素", + "用户故事 #2：我应该看到一个具有相应 id=\"title\" 的元素，其中包含描述致敬页主题的字符串 (即文本)，如 \"Dr. Norman Borlaug\"。", + "用户故事 #3：我应该看到一个带有对应 id=\"img-div\" 的 div 元素。", + "用户故事 #4：在 img-div 元素内，我应该看见有对应 id=\"image\" 的 img 元素", + "用户故事 #5：在 img-div 元素内，我应该看见一个具有相应 id=\"img-caption\" 的元素，其中包含对 img-div 中图像的描述。", + "用户故事 #6：我应该看见具有对应 id=\"tribute-info\" 的元素，其中包含描述致敬页主题的文本内容", + "用户故事 #7：我应该看见具有对应 id=\"tribute-link\" 的元素，它链接到一个包含有关致敬页主题额外信息的外部网页，提示： 你必须为元素提供 target 属性，并设置为 _blank 以便在新选项卡中打开连接 (例 target=\"_blank\")。", + "用户故事 #8：img 元素应相对于其父元素的宽度响应地调整大小，但不超过其原始大小。", + "用户故事 #9：img 在其父元素内居中。", + "你可以通过 fork 此 CodePen 来构建项目，或者你可以使用此 CDN 链接在你喜欢的任何环境中运行测试：https://gitcdn.link/repo/freeCodeCamp/testable-projects-fcc/master/build/bundle.js。", + "完成项目并通过所有测试后， 输入你的项目在 CodePen 上的链接", + "要是卡住的话，记得使用 Read-Search-Ask。" ], "releasedOn": "January 1, 2016", "tests": [], @@ -33,28 +33,28 @@ "id": "587d78af367417b2b2512b03", "title": "Build a Survey Form", "description": [ - "Objective: Build a CodePen.io app that is functionally similar to this: https://codepen.io/freeCodeCamp/full/VPaoNP.", - "Fulfill the below user stories and get all of the tests to pass. Give it your own personal style.", - "You can use HTML, JavaScript, and CSS to complete this project. Plain CSS is recommended because that is what the lessons have covered so far and you should get some practice with plain CSS. You can use Bootstrap or SASS if you choose. Additional technologies (just for example jQuery, React, Angular, or Vue) are not recommended for this project, and using them is at your own risk. Other projects will give you a chance to work with different technology stacks like React. We will accept and try to fix all issue reports that use the suggested technology stack for this project. Happy coding!", - "User Story #1: I can see a title with id=\"title\" in H1 sized text.", - "User Story #2: I can see a short explanation with id=\"description\" in P sized text.", - "User Story #3: I can see a form with id=\"survey-form\".", - "User Story #4: Inside the form element, I am required to enter my name in a field with id=\"name\".", - "User Story #5: Inside the form element, I am required to enter an email in a field with id=\"email\".", - "User Story #6: If I enter an email that is not formatted correctly, I will see an HTML5 validation error.", - "User Story #7: Inside the form, I can enter a number in a field with id=\"number\".", - "User Story #8: If I enter non-numbers in the number input, I will see an HTML5 validation error.", - "User Story #9: If I enter numbers outside the range of the number input, which are defined by the min and max attributes, I will see an HTML5 validation error.", - "User Story #10: For the name, email, and number input fields inside the form I can see corresponding labels that describe the purpose of each field with the following ids: id=\"name-label\", id=\"email-label\", and id=\"number-label\".", - "User Story #11: For the name, email, and number input fields, I can see placeholder text that gives me a description or instructions for each field.", - "User Story #12: Inside the form element, I can select an option from a dropdown that has a corresponding id=\"dropdown\".", - "User Story #13: Inside the form element, I can select a field from one or more groups of radio buttons. Each group should be grouped using the name attribute.", - "User Story #14: Inside the form element, I can select several fields from a series of checkboxes, each of which must have a value attribute.", - "User Story #15: Inside the form element, I am presented with a textarea at the end for additional comments.", - "User Story #16: Inside the form element, I am presented with a button with id=\"submit\" to submit all my inputs.", - "You can build your project by forking this CodePen pen. Or you can use this CDN link to run the tests in any environment you like: https://gitcdn.link/repo/freeCodeCamp/testable-projects-fcc/master/build/bundle.js", - "Once you're done, submit the URL to your working project with all its tests passing.", - "Remember to use the Read-Search-Ask method if you get stuck." + "目标：使用CodePen.iohttps://codepen.io/freeCodeCamp/full/VPaoNP。", + "在满足以下 user stories 并能通过所有测试的前提下，你可以根据自己的喜好来美化你的 app。", + "你可以使用 HTML、JavaScript 以及 CSS 来完成项目，由于目前我们只学到了 CSS，因此建议你只使用 CSS 完成这个项目，顺便还可以巩固一下之前学到的内容。你也可以使用 Bootstrap 或者是 SASS。在当前的项目中，不推荐使用其他技术如 jQurey、React、Angular 或者是 Vue，因为一旦出现问题，风险自担。但在别的项目中我们仍有机会去使用不同的技术栈比如 React，我们会接受并尽力处理你在使用建议的技术栈过程中遇到的问题，编码愉快！", + "用户故事 #1：我能看见一个 H1 大小 id=\"title\" 的标题。", + "用户故事 #1：我能看见一个 P 大小 id=\"description\" 的简述文字。", + "用户故事 #3：我能看见一个 id=\"survey-form\" 的 form。", + "用户故事 #4：在 form 元素内， 我需要在 id=\"name\" 的字段中输入我的名字。", + "用户故事 #5：在 form 元素内， 我需要在 id=\"email\" 的字段中输入邮箱。", + "用户故事 #6：如果我输入了格式不正确的邮箱，我将会看见验证错误信息。", + "用户故事 #7：id=\"number\" 的字段中输入数字。", + "用户故事 #8：如果我在数字输入框内输入非数字，我将会看见验证错误信息。", + "用户故事 #9：如果我输入的数字超出了范围（使用 min 和 max 属性定义），我将会看见验证错误信息。", + "用户故事 #10：对于表单中的名称，邮箱和数字输入框应该使用对应 id 为：id=\"name-label\", id=\"email-label\", 和 id=\"number-label\" 的描述标签", + "用户故事 #11：在表单中的名称，邮箱和数字输入框中，我能看到各自的描述文字作为占位符。", + "用户故事 #12：在表单元素内，我可以在 id=\"dropdown\" 的下拉列表中选择一个选项。", + "用户故事 #13：在表单元素内，我可以从一组或多组单选按钮中选择一个字段。每组使用 name 属性进行分组。", + "用户故事 #14：在表单元素内，我可以从一系列复选框中选择几个字段，每个复选框都必须具有 value 属性。", + "用户故事 #15：在表单元素内，我能看见在最后有个 textarea 用于附加注释。", + "用户故事 #16：在表单元素内，我能看见一个 id=\"submit\" 的按钮，用于提交我所有的输入。", + "你可以通过 fork 此 this CodePen pen 来构建项目，或者你可以使用此 CDN 链接在你喜欢的任何环境中运行测试：https://gitcdn.link/repo/freeCodeCamp/testable-projects-fcc/master/build/bundle.js。", + "完成项目并通过所有测试后， 输入你的项目在 CodePen 上的链接。", + "要是卡住的话，记得使用 Read-Search-Ask。" ], "releasedOn": "January 15, 2017", "tests": [], @@ -150,4 +150,4 @@ "challengeType": 3 } ] -} \ No newline at end of file +} From 0cac2351e5b289de37c35a6c6f4517903c58eb48 Mon Sep 17 00:00:00 2001 From: Stanley Date: Sat, 28 Jul 2018 16:48:07 +0800 Subject: [PATCH 32/37] Translate information-security-with-helmet (#4) MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit * 完成helmet第一小节翻译 * Finish 10% * Remove IDE generated files * Update according to comments --- .../information-security-with-helmetjs.json | 38 +++++++++---------- 1 file changed, 19 insertions(+), 19 deletions(-) diff --git a/06-information-security-and-quality-assurance/information-security-with-helmetjs.json b/06-information-security-and-quality-assurance/information-security-with-helmetjs.json index bfc897b..6eda557 100644 --- a/06-information-security-and-quality-assurance/information-security-with-helmetjs.json +++ b/06-information-security-and-quality-assurance/information-security-with-helmetjs.json @@ -8,12 +8,12 @@ "id": "587d8247367417b2b2512c36", "title": "Install and Require Helmet", "description": [ - "As a reminder, this project is being built upon the following starter project on Glitch, or cloned from GitHub.", - "Helmet helps you secure your Express apps by setting various HTTP headers. Install the package, then require it." + "注意，本项目在 这个 Glitch 项目 的基础上进行开发。你也可以从 GitHub 上克隆。", + "Helmet 通过配置不同的 HTTP 头部信息来使你的 Express 应用更加安全。安装，并引入 Helmet 这个包。" ], "tests": [ { - "text": "\"helmet\" dependency should be in package.json", + "text": "package.json 文件应该有 \"helmet\" 这个依赖包", "testString": "getUserInput => $.get(getUserInput('url') + '/_api/package.json').then(data => { var packJson = JSON.parse(data); assert.property(packJson.dependencies, 'helmet'); }, xhr => { throw new Error(xhr.responseText); })" } ], @@ -26,12 +26,12 @@ "id": "587d8247367417b2b2512c37", "title": "Hide Potentially Dangerous Information Using helmet.hidePoweredBy()", "description": [ - "As a reminder, this project is being built upon the following starter project on Glitch, or cloned from GitHub.", - "Hackers can exploit known vulnerabilities in Express/Node if they see that your site is powered by Express. X-Powered-By: Express is sent in every request coming from Express by default. The helmet.hidePoweredBy() middleware will remove the X-Powered-By header. You can also explicitly set the header to something else, to throw people off. e.g. app.use(helmet.hidePoweredBy({ setTo: 'PHP 4.2.0' }))" + "温馨提醒，本项目在 这个 Glitch 项目 的基础上进行开发。你也可以从 GitHub 上克隆。", + "如果黑客发现你的网站是用 Express 搭建的，那么他们就可以利用 Express 或 Node 现存的漏洞来攻击你的网站。X-Powered-By: Express 默认情况下会被添加到所有响应的头部。不过 helmet.hidePoweredBy() 中间件可以帮你移除 X-Powered-By 头。你甚至可以把头设置成其它的值。 如 app.use(helmet.hidePoweredBy({ setTo: 'PHP 4.2.0' }))" ], "tests": [ { - "text": "helmet.hidePoweredBy() middleware should be mounted correctly", + "text": "helmet.hidePoweredBy() 中间件应该被正确加载", "testString": "getUserInput => $.get(getUserInput('url') + '/_api/app-info').then(data => { assert.include(data.appStack, 'hidePoweredBy'); assert.notEqual(data.headers['x-powered-by'], 'Express')}, xhr => { throw new Error(xhr.responseText); })" } ], @@ -44,17 +44,17 @@ "id": "587d8247367417b2b2512c38", "title": "Mitigate the Risk of Clickjacking with helmet.frameguard()", "description": [ - "As a reminder, this project is being built upon the following starter project on Glitch, or cloned from GitHub.", - "Your page could be put in a or