` 元素包裹起来。
当 `div` 元素设置了 `row` class 之后，那几个按钮便会嵌入其中了。
diff --git a/curriculum/challenges/chinese/03-front-end-development-libraries/jquery/target-even-elements-using-jquery.md b/curriculum/challenges/chinese/03-front-end-development-libraries/jquery/target-even-elements-using-jquery.md
index b5ca026b974..7b7abaf403e 100644
--- a/curriculum/challenges/chinese/03-front-end-development-libraries/jquery/target-even-elements-using-jquery.md
+++ b/curriculum/challenges/chinese/03-front-end-development-libraries/jquery/target-even-elements-using-jquery.md
@@ -13,9 +13,9 @@ dashedName: target-even-elements-using-jquery
也可以用基于位置的奇 `:odd` 和偶 `:even` 选择器选取标签。
-注意，jQuery 是零索引（zero-indexed）的，这意味着第 1 个标签的位置编号是 0。 这有点混乱和反常——`:odd` 表示选择第 2 个标签（位置编号 1），第 4 个标签（位置编号 3）……等等，以此类推。
+注意，jQuery 是零索引（zero-indexed）的，这意味着第 1 个标签的位置编号是 0。 这有点混乱和反常——`:odd` 表示选择第 2 个标签（位置编号 1）、第 4 个标签（位置编号 3）……等等，以此类推。
-下面的代码展示了选取所有 `target` class 元素的奇数元素并设置 sheke 效果：
+下面的代码展示了选取所有 `target` class 的奇数元素并给它们设置 class：
```js
$(".target:odd").addClass("animated shake");
diff --git a/curriculum/challenges/chinese/03-front-end-development-libraries/jquery/target-the-same-element-with-multiple-jquery-selectors.md b/curriculum/challenges/chinese/03-front-end-development-libraries/jquery/target-the-same-element-with-multiple-jquery-selectors.md
index 00cea101cdc..d5c8ba4f8fc 100644
--- a/curriculum/challenges/chinese/03-front-end-development-libraries/jquery/target-the-same-element-with-multiple-jquery-selectors.md
+++ b/curriculum/challenges/chinese/03-front-end-development-libraries/jquery/target-the-same-element-with-multiple-jquery-selectors.md
@@ -11,7 +11,7 @@ dashedName: target-the-same-element-with-multiple-jquery-selectors
# --description--
-现在学写了三种选取标签的方法：用标签选择器： `$("button")`，用类选择器：`$(".btn")` 以及用 id 选择器：`$("#target1")` 。
+现在你知道了三种选取标签的方法：用元素选择器：`$("button")`、用类选择器：`$(".btn")` 以及用 id 选择器：`$("#target1")` 。
虽然可以在单个 `.addClass()` 内添加多个类，但是我们可以用*三种不同的方式*给一种标签添加类。
@@ -23,7 +23,7 @@ dashedName: target-the-same-element-with-multiple-jquery-selectors
给所有 id 为 `#target1` 的 button 标签添加 `btn-primary` 类。
-**注意：**只针对一个元素并且一次只能添加一个 class。 总之，三个选择器最终将添加三个 class `shake`、`animated` 以及 `btn-primary` 到 `#target1` 上。
+**注意：**只针对一个元素并且一次只能添加一个 class。 总之，三个选择器最终将给 `#target1` 添加三个 class `shake`、`animated` 以及 `btn-primary`。
# --hints--
diff --git a/curriculum/challenges/chinese/03-front-end-development-libraries/react/access-props-using-this.props.md b/curriculum/challenges/chinese/03-front-end-development-libraries/react/access-props-using-this.props.md
index be6cd3b9000..bd1ed890674 100644
--- a/curriculum/challenges/chinese/03-front-end-development-libraries/react/access-props-using-this.props.md
+++ b/curriculum/challenges/chinese/03-front-end-development-libraries/react/access-props-using-this.props.md
@@ -8,7 +8,7 @@ dashedName: access-props-using-this-props
# --description--
-前几项挑战涵盖了将 props 传递给子组件的基本方法。 但是，倘若接收 prop 的子组件不是无状态函数组件，而是一个 ES6 类组件又当如何呢？ ES6 类组件访问 props 的方法略有不同。
+前几项挑战涵盖了将 props 传递给子组件的基本方法。 但是，倘若接收 prop 的子组件不是无状态函数组件，而是一个 ES6 类组件，又当如何呢？ ES6 类组件访问 props 的方法略有不同。
任何时候，如果要引用类组件本身，可以使用 `this` 关键字。 要访问类组件中的 props，需要在在访问它的代码前面添加 `this`。 例如，如果 ES6 类组件有一个名为 `data` 的 prop，可以在 JSX 中这样写：`{this.props.data}`。
@@ -53,7 +53,7 @@ assert(
);
```
-`Welcome` 组件应显示你在 `strong` 标签中作为 `name` 属性传递的字符串。
+`Welcome` 组件应显示你在 `strong` 标签中作为 `name` prop 传递的字符串。
```js
assert(
diff --git a/curriculum/challenges/chinese/03-front-end-development-libraries/react/add-inline-styles-in-react.md b/curriculum/challenges/chinese/03-front-end-development-libraries/react/add-inline-styles-in-react.md
index e51d8295d4b..3ca9d841154 100644
--- a/curriculum/challenges/chinese/03-front-end-development-libraries/react/add-inline-styles-in-react.md
+++ b/curriculum/challenges/chinese/03-front-end-development-libraries/react/add-inline-styles-in-react.md
@@ -10,11 +10,11 @@ dashedName: add-inline-styles-in-react
在上一次挑战中，你可能已经注意到，除了设置为 JavaScript 对象的 `style` 属性之外，与 HTML 内联样式相比，React 的内联样式还有其他几个语法差异。 首先，某些 CSS 样式属性的名称使用驼峰式命名。 例如，最后一个挑战用 `fontSize` 而不是 `font-size` 来设置字体的大小。 对于 JavaScript 对象属性来说，像 `font-size` 这样的连字符命名是无效的语法，所以 React 使用驼峰式命名。 通常，任何连字符的 style 属性在 JSX 中都是使用驼峰式命名的。
-除非另有规定，否则所有属性值的 length（如`height`、`width` 和 `fontSize`）其单位都假定为 `px`。 例如，如果要使用 `em`，可以用引号将值和单位括起来，例如 `{fontSize: "4em"}`。 除了默认为 `px` 的 length 值之外，所有其他属性值都应该用引号括起来。
+除非另有规定，否则所有属性值长度单位（如 `height`、`width` 和 `fontSize`）都假定为 `px`。 例如，如果要使用 `em`，可以用引号将值和单位括起来，例如 `{fontSize: "4em"}`。 除了默认为 `px` 的长度值之外，所有其他属性值都应该用引号括起来。
# --instructions--
-如果你有大量样式，你可以将样式 `object`（对象）分配给一个常量，以保持代码的组织有序。 在文件顶部将你的样式声明为全局变量。 定义一个 `styles` 常量，并将其声明为具有三个样式属性及对应值的 `object`（对象）。 使 `div` 的文字颜色为 `purple`、字号为 `40`、边框为 `2px solid purple`。 然后设置 `style` 属性，使其等于 `styles` 常量。
+如果你有大量样式，你可以将样式 `object`（对象）分配给一个常量，以保持代码组织有序。 在文件顶部将你的样式声明为全局变量。 定义一个 `styles` 常量，并将其声明为具有三个样式属性及对应值的 `object`（对象）。 使 `div` 的文字颜色为 `purple`、字体大小为 `40`、边框为 `2px solid purple`。 然后设置 `style` 属性，使其等于 `styles` 常量。
# --hints--
diff --git a/curriculum/challenges/chinese/03-front-end-development-libraries/react/compose-react-components.md b/curriculum/challenges/chinese/03-front-end-development-libraries/react/compose-react-components.md
index c5c22759a2f..7b6aeec02ff 100644
--- a/curriculum/challenges/chinese/03-front-end-development-libraries/react/compose-react-components.md
+++ b/curriculum/challenges/chinese/03-front-end-development-libraries/react/compose-react-components.md
@@ -8,7 +8,7 @@ dashedName: compose-react-components
# --description--
-随着挑战继续，将组合使用更复杂的 React 组件和 JSX，有一点需要注意。 在其它组件中渲染 ES6 风格的类组件和渲染在过去几个挑战中使用的简单组件没有什么不同。 可以在其它组件中渲染 JSX 元素、无状态功能组件和 ES6 类组件。
+随着挑战继续，将组合使用更复杂的 React 组件和 JSX，有一点需要注意。 在其它组件中渲染 ES6 风格的类组件和渲染在过去几个挑战中使用的简单组件没有什么不同。 可以在其它组件中渲染 JSX 元素、无状态函数组件和 ES6 类组件。
# --instructions--
diff --git a/curriculum/challenges/chinese/03-front-end-development-libraries/react/create-a-component-with-composition.md b/curriculum/challenges/chinese/03-front-end-development-libraries/react/create-a-component-with-composition.md
index 0f52c36a3f0..e6399b0934b 100644
--- a/curriculum/challenges/chinese/03-front-end-development-libraries/react/create-a-component-with-composition.md
+++ b/curriculum/challenges/chinese/03-front-end-development-libraries/react/create-a-component-with-composition.md
@@ -10,7 +10,7 @@ dashedName: create-a-component-with-composition
现在来看看如何组合多个 React 组件。 想象一下，现在正在构建一个应用程序，并创建了三个组件：`Navbar`、`Dashboard` 和 `Footer`。
-要将这些组件组合在一起，可以创建一个 `App` *父组件*，将这三个组件分别渲染成为*子组件*。 要在 React 组件中渲染一个子组件，需要在 JSX 中包含作为自定义 HTML 标签编写的组件名称。 例如，在 `render` 方法中，可以这样编写：
+要将这些组件组合在一起，可以创建一个 `App` *父组件*，将这三个组件分别渲染成为*子组件*。 要在 React 组件中渲染一个子组件，需要在 JSX 中将组件名称写作自定义的 HTML 标签。 例如，在 `render` 方法中，可以这样编写：
```jsx
return (
@@ -26,7 +26,7 @@ return (
# --instructions--
-在代码编辑器中，有一个名为 `ChildComponent` 的简单功能组件和一个名为 `ParentComponent` 的 React 组件。 通过在 `ParentComponent` 中渲染 `ChildComponent` 来将两者组合在一起。 确保使用正斜杠关闭 `ChildComponent` 标签。
+在代码编辑器中，有一个名为 `ChildComponent` 的简单函数组件和一个名为 `ParentComponent` 的 React 组件。 通过在 `ParentComponent` 中渲染 `ChildComponent` 来将两者组合在一起。 确保使用正斜杠关闭 `ChildComponent` 标签。
**注意：** `ChildComponent` 是使用 ES6 的箭头函数定义的，这是使用 React 时非常常见的做法。 但是，要知道这只是一个函数。 如果你不熟悉箭头函数语法，请参阅 JavaScript 部分。
diff --git a/curriculum/challenges/chinese/03-front-end-development-libraries/react/create-a-stateless-functional-component.md b/curriculum/challenges/chinese/03-front-end-development-libraries/react/create-a-stateless-functional-component.md
index a0eda1d9f54..2da61359ed6 100644
--- a/curriculum/challenges/chinese/03-front-end-development-libraries/react/create-a-stateless-functional-component.md
+++ b/curriculum/challenges/chinese/03-front-end-development-libraries/react/create-a-stateless-functional-component.md
@@ -10,7 +10,7 @@ dashedName: create-a-stateless-functional-component
组件是 React 的核心。 React 中的所有内容都是一个组件，在这里将学习如何创建一个组件。
-有两种方法可以创建 React 组件。 第一种方法是使用 JavaScript 函数。 以这种方式定义组件会创建*无状态功能组件*。 应用程序中的状态概念将在以后的挑战中介绍。 目前为止，可以将无状态组件视为能接收数据并对其进行渲染，但不管理或跟踪该数据的更改的组件。 (我们将下一个挑战使用中第二种方式创建 React 组件。)
+有两种方法可以创建 React 组件。 第一种方法是使用 JavaScript 函数。 以这种方式定义组件会创建*无状态函数组件*。 将在以后的挑战中介绍应用程序中状态的概念。 目前为止，可以将无状态组件视为能接收数据并对其进行渲染，但不管理或跟踪该数据的更改的组件。 (我们将下一个挑战使用中第二种方式创建 React 组件。)
要用函数创建组件，只需编写一个返回 JSX 或 `null` 的 JavaScript 函数。 需要注意的一点是，React 要求你的函数名以大写字母开头。 下面是一个无状态功能组件的示例，该组件在 JSX 中分配一个 HTML 的 class：
@@ -28,7 +28,7 @@ const DemoComponent = function() {
# --instructions--
-代码编辑器中有一个名为 `MyComponent` 的函数。 完成此函数，使其返回包含一些文本字符串的单个`div`元素。
+代码编辑器中有一个名为 `MyComponent` 的函数。 完成此函数，使其返回包含一些文本字符串的单个 `div` 元素。
**注意：** 文本被视为是 `div` 的子元素，因此不能使用自闭合标签。
diff --git a/curriculum/challenges/chinese/03-front-end-development-libraries/react/introducing-inline-styles.md b/curriculum/challenges/chinese/03-front-end-development-libraries/react/introducing-inline-styles.md
index f9718e1cc09..cabf2a91247 100644
--- a/curriculum/challenges/chinese/03-front-end-development-libraries/react/introducing-inline-styles.md
+++ b/curriculum/challenges/chinese/03-front-end-development-libraries/react/introducing-inline-styles.md
@@ -8,7 +8,7 @@ dashedName: introducing-inline-styles
# --description--
-还有其他复杂的概念可以为 React 代码增加强大的功能。 但是，你可能会想知道更简单的问题，比如：如何对在 React 中创建的 JSX 元素添加样式。 你可能知道，鉴于
将 class 应用于 JSX 元素的方式，它与使用 HTML 并不完全相同。
+还有其他复杂的概念可以为 React 代码增加强大的功能。 但是，你可能会想知道更简单的问题，比如：如何对在 React 中创建的 JSX 元素添加样式。 你可能知道，鉴于
将 class 应用于 JSX 元素的方式，它与使用 HTML 并不完全相同。
如果从样式表导入样式，它就没有太大的不同。 使用 `className` 属性将 class 应用于 JSX 元素，并将样式应用于样式表中的 class。 另一种选择是使用内联样式，这在 ReactJS 开发中非常常见。
@@ -18,7 +18,7 @@ dashedName: introducing-inline-styles
Mellow Yellow
```
-JSX 元素使用 `style` 属性，但是鉴于 JSX 的编译方式，不能将值设置为 `string`（字符串）。 相反，你应该将其设置为等于JavaScript `object` 。 如下所示：
+JSX 元素使用 `style` 属性，但是鉴于 JSX 的编译方式，不能将值设置为 `string`（字符串）。 相反，你应该将其设置为等于 JavaScript `object` 。 如下所示：
```jsx
Mellow Yellow
diff --git a/curriculum/challenges/chinese/03-front-end-development-libraries/react/learn-about-self-closing-jsx-tags.md b/curriculum/challenges/chinese/03-front-end-development-libraries/react/learn-about-self-closing-jsx-tags.md
index 482d5e16b41..7daa70689b9 100644
--- a/curriculum/challenges/chinese/03-front-end-development-libraries/react/learn-about-self-closing-jsx-tags.md
+++ b/curriculum/challenges/chinese/03-front-end-development-libraries/react/learn-about-self-closing-jsx-tags.md
@@ -1,6 +1,6 @@
---
id: 5a24c314108439a4d4036161
-title: 了解 JSX 的自动闭合
+title: 了解自闭合 JSX 标签
challengeType: 6
forumTopicId: 301396
dashedName: learn-about-self-closing-jsx-tags
@@ -12,7 +12,7 @@ dashedName: learn-about-self-closing-jsx-tags
JSX 不同于 HTML 的另一个重要方面是自闭合标签。
-在HTML中，几乎所有的标签都有一个开始和结束标签：`
`，结束标签在你要关闭的标签名之前始终具有正斜杠。 但是，HTML 中有一些称为 “自闭合标签” 的特殊实例，它们在另一个标签开始之前，不需要开始和结束标签都存在。
+在HTML中，几乎所有的标签都有一个开始和结束标签：`
`，结束标签在你要关闭的标签名之前始终具有正斜杠。 但是，HTML 中有一些被称为“自闭合标签”的特殊实例，它们在另一个标签开始之前，不需要开始和结束标签都存在。
例如，换行标签可以写成 `
` 或者 `
`，但是不应该写成 `
`，因为它不包含任何内容。
diff --git a/curriculum/challenges/chinese/03-front-end-development-libraries/react/pass-a-callback-as-props.md b/curriculum/challenges/chinese/03-front-end-development-libraries/react/pass-a-callback-as-props.md
index 1f9d322f4d7..90c8c787f54 100644
--- a/curriculum/challenges/chinese/03-front-end-development-libraries/react/pass-a-callback-as-props.md
+++ b/curriculum/challenges/chinese/03-front-end-development-libraries/react/pass-a-callback-as-props.md
@@ -8,13 +8,13 @@ dashedName: pass-a-callback-as-props
# --description--
-可以将 `state` 作为 props 传递给子组件，但不仅限于传递数据。 也可以将函数或在 React 组件中定义的任何方法传递给子组件。 这就是子组件与父组件交互的方式。 可以把方法像普通 prop 一样传递给子组件， 它会被分配一个名字，可以在子组件中的 `this.props` 下访问该方法的名字。
+可以将 `state` 作为 props 传递给子组件，但不仅限于传递数据。 你也可以将处理函数或在 React 组件中定义的任何方法传递给子组件。 这就是子组件与父组件交互的方式。 可以把方法像普通 prop 一样传递给子组件， 它会被分配一个名字，可以在子组件中的 `this.props` 下访问该方法的名字。
# --instructions--
代码编辑器中列出了三个组件。 `MyApp` 是父组件，`GetInput` 和`RenderInput` 是它将要渲染的子组件。 将 `GetInput` 组件添加到 `MyApp` 的 render 方法，然后将 `MyApp` 的 `state` 中的 `inputValue` 传入名为 `input` 的 prop。 还要创建一个名为 `handleChange` 的 prop，并将输入处理程序 `handleChange` 传递给它。
-接下来，将 `RenderInput` 添加到 `MyApp` 中的 render 方法中，然后创建一个名为 `input` 的 prop，并将 `state` 中的 `inputValue` 传递给它。 完成后，可以在 `GetInput` 组件中的 `input` 字段中键入内容，然后该组件通过 props 调用其父组件中的处理函数方法。 这将更新处于父组件 `state` 中的 input，该 input 将作为 props 传递给两个子组件。 观察数据如何在组件之间流动，以及单一数据源如何保持父组件`state`。 诚然，这个示例有点做作，但是应该能用来说明数据和回调是如何在 React 组件之间传递的。
+接下来，将 `RenderInput` 添加到 `MyApp` 中的 render 方法中，然后创建一个名为 `input` 的 prop，并将 `state` 中的 `inputValue` 传递给它。 完成后，可以在 `GetInput` 组件中的 `input` 字段中键入内容，然后该组件通过 props 调用其父组件中的处理函数方法。 这将更新处于父组件 `state` 中的 input，该 input 将作为 props 传递给两个子组件。 观察数据如何在组件之间流动，以及单一数据源如何保持父组件`state`。 诚然，这个示例有点刻意，但是应该能用来说明数据和回调是如何在 React 组件之间传递的。
# --hints--
diff --git a/curriculum/challenges/chinese/03-front-end-development-libraries/react/pass-props-to-a-stateless-functional-component.md b/curriculum/challenges/chinese/03-front-end-development-libraries/react/pass-props-to-a-stateless-functional-component.md
index e9fb2949dd5..d9831962e38 100644
--- a/curriculum/challenges/chinese/03-front-end-development-libraries/react/pass-props-to-a-stateless-functional-component.md
+++ b/curriculum/challenges/chinese/03-front-end-development-libraries/react/pass-props-to-a-stateless-functional-component.md
@@ -16,7 +16,7 @@ dashedName: pass-props-to-a-stateless-functional-component
```
-可以把创建的 React 支持的**自定义 HTML 属性**传递给组件， 在上面的例子里，将创建的属性 `user` 传递给组件 `Welcome`。 由于 `Welcome` 是一个无状态函数组件，它可以像这样访问该值：
+可以把创建的 React 支持的**自定义 HTML 属性**传递给组件。 在上面的例子里，将创建的属性 `user` 传递给组件 `Welcome`。 由于 `Welcome` 是一个无状态函数组件，它可以像这样访问该值：
```jsx
const Welcome = (props) =>
Hello, {props.user}!
@@ -52,7 +52,7 @@ assert(
);
```
-`CurrentDate` 组件应该有一个名为 `date` 的属性。
+`CurrentDate` 组件应该有一个名为 `date` 的 prop。
```js
assert(
@@ -63,7 +63,7 @@ assert(
);
```
-`CurrentDate` 的 `date` 属性应该包含一段文本字符串。
+`CurrentDate` 的 `date` prop 应该包含一段文本字符串。
```js
assert(
diff --git a/curriculum/challenges/chinese/03-front-end-development-libraries/react/render-conditionally-from-props.md b/curriculum/challenges/chinese/03-front-end-development-libraries/react/render-conditionally-from-props.md
index 2866ce5a0a8..dc1775b8322 100644
--- a/curriculum/challenges/chinese/03-front-end-development-libraries/react/render-conditionally-from-props.md
+++ b/curriculum/challenges/chinese/03-front-end-development-libraries/react/render-conditionally-from-props.md
@@ -1,6 +1,6 @@
---
id: 5a24c314108439a4d4036188
-title: 根据 Props 有条件地渲染
+title: 使用 Props 有条件地渲染
challengeType: 6
forumTopicId: 301405
dashedName: render-conditionally-from-props
@@ -14,11 +14,11 @@ dashedName: render-conditionally-from-props
# --instructions--
-代码编辑器有两个部分为你定义的组件：一个名为 `GameOfChance` 的父组件和一个名为 `Results` 的子组件。 它们被用来创建一个简单的游戏，用户按下按钮来看它们是赢还是输。
+代码编辑器有两个部分定义了的组件：一个名为 `GameOfChance` 的父组件和一个名为 `Results` 的子组件。 它们被用来创建一个简单的游戏，用户按下按钮来看它们是赢还是输。
-首先，需要一个简单的表达式，每次运行时都会随机返回一个不同的值。 可以使用 `Math.random()`。 每次调用此方法时，此方法返回 `0`（包括）和 `1`（不包括）之间的值。 因此，对于50/50的几率，请在表达式中使用 `Math.random() >= .5`。 从统计学上讲，这个表达式有 50％ 的几率返回 `true`，另外 50％ 返回 `false`。 在第 render 方法里，用此表达式替换 `null` 以完成变量声明。
+首先，需要一个简单的表达式，每次运行时都会随机返回一个不同的值。 可以使用 `Math.random()`。 每次调用此方法时，此方法返回 `0`（包括）和 `1`（不包括）之间的值。 因此，对于 50/50 的几率，请在表达式中使用 `Math.random() >= .5`。 从统计学上讲，这个表达式有 50％ 的几率返回 `true`，另外 50％ 返回 `false`。 在 render 方法里，用此表达式替换 `null` 以完成变量声明。
-现在了一个表达式，可以使用该表达式在代码中做出随机决策。 接下来，需要实现此功能。 将 `Results` 组件渲染为 `GameOfChance` 的子 组件，并将 `expression` 作为名为 `fiftyFifty` 的 prop 传入 。 在 `Results` 组件中，编写一个三元表达式来渲染 `h1` 元素的文本。`GameOfChance` 传来的 prop `fiftyFifty` 来决定渲染文本 `You Win!` 还是 `You Lose!`。 最后，确保 `handleClick()` 方法正确计算每个回合，以便用户知道他们玩过多少次。 这也可以让用户知道组件实际上已经更新，以防他们连续赢两次或输两次时自己不知道。
+现在你有了一个表达式，可以使用该表达式在代码中做出随机决策。 接下来，需要实现此功能。 将 `Results` 组件渲染为 `GameOfChance` 的子 组件，并将 `expression` 作为名为 `fiftyFifty` 的 prop 传入 。 在 `Results` 组件中，编写一个三元表达式来渲染 `h1` 元素的文本。`GameOfChance` 传来的 prop `fiftyFifty` 来决定渲染文本 `You Win!` 还是 `You Lose!`。 最后，确保 `handleClick()` 方法正确计算每个回合，以便用户知道他们玩过多少次。 这也可以让用户知道组件实际上已经更新，以防他们连续赢两次或输两次时自己不知道。
# --hints--
diff --git a/curriculum/challenges/chinese/03-front-end-development-libraries/react/set-state-with-this.setstate.md b/curriculum/challenges/chinese/03-front-end-development-libraries/react/set-state-with-this.setstate.md
index 7c60641e7b8..0cfa2100045 100644
--- a/curriculum/challenges/chinese/03-front-end-development-libraries/react/set-state-with-this.setstate.md
+++ b/curriculum/challenges/chinese/03-front-end-development-libraries/react/set-state-with-this.setstate.md
@@ -16,7 +16,7 @@ this.setState({
});
```
-React 要求永远不要直接修改 `state`，而是在 state 发生改变时始终使用 `this.setState()`。 此外，应该注意，React 可以批量处理多个 state 更新以提高性能。 这意味着通过 `setState` 方法进行的 state 更新可以是异步的。 `setState` 方法有一种替代语法可以解决异步问题， 虽然这很少用到，但是最好还是记住它！ 请查阅我们的
React 文章了解更多详情。
+React 要求永远不要直接修改 `state`，而是在 state 发生改变时始终使用 `this.setState()`。 此外，应该注意，React 可以批量处理多个 state 更新以提高性能。 这意味着通过 `setState` 方法进行的 state 更新可以是异步的。 `setState` 方法有一种替代语法可以解决异步问题， 虽然这很少用到，但是最好还是记住它！ 请查阅我们的
React 文章了解更多详情。
# --instructions--
diff --git a/curriculum/challenges/chinese/03-front-end-development-libraries/react/use-array.filter-to-dynamically-filter-an-array.md b/curriculum/challenges/chinese/03-front-end-development-libraries/react/use-array.filter-to-dynamically-filter-an-array.md
index f3fb9f01eda..622079c718c 100644
--- a/curriculum/challenges/chinese/03-front-end-development-libraries/react/use-array.filter-to-dynamically-filter-an-array.md
+++ b/curriculum/challenges/chinese/03-front-end-development-libraries/react/use-array.filter-to-dynamically-filter-an-array.md
@@ -16,7 +16,7 @@ let onlineUsers = users.filter(user => user.online);
# --instructions--
-在代码编辑器中，`MyComponent` 的 `state` 被初始化为一个用户数组。 有些用户在线，有些则没有。 过滤数组，以便只查看在线用户。 要执行此操作，请首先使用 `filter` 返回仅包含 `online` 属性为 `true` 的用户的新数组。 然后，在 `renderOnline` 变量中，映射已过滤的数组，并为包含其 `username` 文本的每个用户返回 `li` 元素。 确保包含一个唯一的 `key` ，就像上一个挑战一样。
+在代码编辑器中，`MyComponent` 的 `state` 被初始化为一个用户数组。 有些用户在线，有些则没有。 过滤数组，以便只查看在线用户。 要执行此操作，请首先使用 `filter` 返回仅包含 `online` 属性为 `true` 的用户的新数组。 然后，在 `renderOnline` 变量中，映射已过滤的数组，并为包含其 `username` 文本的每个用户返回 `li` 元素。 确保包含一个唯一的 `key`，就像上一个挑战一样。
# --hints--
diff --git a/curriculum/challenges/chinese/03-front-end-development-libraries/react/use-array.map-to-dynamically-render-elements.md b/curriculum/challenges/chinese/03-front-end-development-libraries/react/use-array.map-to-dynamically-render-elements.md
index 3e5d4c1c16c..51e46683c72 100644
--- a/curriculum/challenges/chinese/03-front-end-development-libraries/react/use-array.map-to-dynamically-render-elements.md
+++ b/curriculum/challenges/chinese/03-front-end-development-libraries/react/use-array.map-to-dynamically-render-elements.md
@@ -10,13 +10,13 @@ dashedName: use-array-map-to-dynamically-render-elements
条件渲染很有用，但是可能需要组件来渲染未知数量的元素。 通常在响应式编程中，程序员在应用程序运行时之前无法知道其 state，因为这在很大程度上取决于用户与该程序的交互。 程序员需要提前编写代码来正确处理未知状态。 在 React 中使用 `Array.map()` 阐明了这个概念。
-例如，创建一个简单的“To Do List”应用程序。 作为程序员，你无法知道用户可能在其列表中有多少项。 需要设置组件，以便在使用该程序的人决定今天今日待办事项之前动态渲染正确数量的列表元素。
+例如，创建一个简单的 “To Do List” 应用程序。 作为程序员，你无法知道用户可能在其列表中有多少项。 需要设置组件，以便在使用该程序的人决定今日待办事项之前动态渲染列表元素的正确数量。
# --instructions--
代码编辑器完成了 `MyToDoList` 组件的大部分设置。 如果完成了受控表单挑战，这些代码中的一些应该看起来很熟悉。 你会注意到一个 `textarea` 和一个 `button`，以及一些跟踪它们状态的方法，但是页面当前还没有任何东西被渲染。
-在 `constructor` 中，创建一个 `this.state` 对象并定义两个 state：`userInput` 应该初始化为空字符串，`toDoList` 应该初始化为空数组。 接下来，在 `render()` 方法中删除 `items` 变量的 `null` 值。 取而代之的是，将存储在组件内部 state 中的 `toDoList` 数组一一遍历并相应的动态呈现 `li` 元素中。 尝试在 `textarea` 中输入 `eat, code, sleep, repeat`，然后点击按钮，看看会发生什么。
+在 `constructor` 中，创建一个 `this.state` 对象并定义两个 state：`userInput` 应该初始化为空字符串，`toDoList` 应该初始化为空数组。 接下来，在 `render()` 方法中删除 `items` 变量的 `null` 值。 取而代之的是，将存储在组件内部 state 中的 `toDoList` 数组一一遍历，并相应地动态呈现在 `li` 元素中。 尝试在 `textarea` 中输入 `eat, code, sleep, repeat`，然后点击按钮，看看会发生什么。
**注意：** 像这样的映射操作创建的所有兄弟子元素都需要提供唯一的 `key` 属性。 别担心，这是下一个挑战的主题。
diff --git a/curriculum/challenges/chinese/03-front-end-development-libraries/react/use-proptypes-to-define-the-props-you-expect.md b/curriculum/challenges/chinese/03-front-end-development-libraries/react/use-proptypes-to-define-the-props-you-expect.md
index 1d653cdaec5..2a5362aabae 100644
--- a/curriculum/challenges/chinese/03-front-end-development-libraries/react/use-proptypes-to-define-the-props-you-expect.md
+++ b/curriculum/challenges/chinese/03-front-end-development-libraries/react/use-proptypes-to-define-the-props-you-expect.md
@@ -10,13 +10,13 @@ dashedName: use-proptypes-to-define-the-props-you-expect
React 提供了有用的类型检查特性，以验证组件是否接收了正确类型的 props。 例如，应用程序调用 API 来检索数据是否是数组，然后将数据作为 prop 传递给组件。 可以在组件上设置 `propTypes`，以要求数据的类型为 `array`。 当数据是任何其它类型时，都会抛出警告。
-当提前知道 prop 的类型时，最佳实践是设置其 `propTypes`。 可以为组件定义 `propTypes` 属性，方法与定义 `defaultProps` 相同。 这样做将检查给定键的 prop 是否是给定类型。 这里有一个示例，表示名为 `handleClick` 的 prop 应为 `function` 类型：
+当提前知道 prop 的类型时，最佳实践是设置其 `propTypes`。 可以为组件定义 `propTypes` 属性，方法与定义 `defaultProps` 相同。 这样做将检查一个键的 prop 是否是给定类型。 这里有一个示例，表示名为 `handleClick` 的 prop 应为 `function` 类型：
```js
MyComponent.propTypes = { handleClick: PropTypes.func.isRequired }
```
-在上面的示例中，`PropTypes.func` 部分检查 `handleClick` 是否为函数。 添加 `isRequired`，告诉 React `handleClick` 是该组件的必需属性。 如果没有那个属性，将出现警告。 还要注意 `func` 代表 `function` 。 在 7 种 JavaScript 原语类型中， `function` 和 `boolean` （写为 `bool` ）是唯一使用异常拼写的两种类型。 除了原始类型，还有其他类型可用。 例如，你可以检查 prop 是否为 React 元素。 请查看
文档以获取所有选项。
+在上面的示例中，`PropTypes.func` 部分检查 `handleClick` 是否为函数。 添加 `isRequired`，告诉 React `handleClick` 是该组件的必需属性。 如果没有那个属性，将出现警告。 还要注意 `func` 代表 `function` 。 在 7 种 JavaScript 原始类型中，`function` 和 `boolean`（写为 `bool` ）是唯一使用异常拼写的两种类型。 除了原始类型，还有其他类型可用。 例如，你可以检查 prop 是否为 React 元素。 请查看
文档以获取所有选项。
**注意：**在 React v15.5.0 中, `PropTypes` 可以从 React 中单独引入，例如：`import PropTypes from 'prop-types';`。
@@ -48,7 +48,7 @@ assert(
);
```
-`Items` 组件应该包含一个 `propTypes`，要求 `quantity` 有一个 number 类型的值。
+`Items` 组件应该包含一个 `propTypes` 检查，要求 `quantity` 有一个值，并且这个值的类型是 number。
```js
(getUserInput) =>
diff --git a/curriculum/challenges/chinese/03-front-end-development-libraries/react/use-the-lifecycle-method-componentwillmount.md b/curriculum/challenges/chinese/03-front-end-development-libraries/react/use-the-lifecycle-method-componentwillmount.md
index db85bf6ddea..8b6a9ee6efc 100644
--- a/curriculum/challenges/chinese/03-front-end-development-libraries/react/use-the-lifecycle-method-componentwillmount.md
+++ b/curriculum/challenges/chinese/03-front-end-development-libraries/react/use-the-lifecycle-method-componentwillmount.md
@@ -1,6 +1,6 @@
---
id: 5a24c314108439a4d403617c
-title: 使用生命周期方法：componentWillMount
+title: 使用生命周期方法 componentWillMount
challengeType: 6
forumTopicId: 301423
dashedName: use-the-lifecycle-method-componentwillmount
@@ -10,11 +10,11 @@ dashedName: use-the-lifecycle-method-componentwillmount
React 组件有几种特殊方法，可以在组件生命周期的特定点执行操作。 这些称为生命周期方法或生命周期钩子，允许在特定时间点捕获组件。 这可以在渲染之前、更新之前、接收 props 之前、卸载之前等等。 以下是一些主要生命周期方法的列表： `componentWillMount()` `componentDidMount()` `shouldComponentUpdate()` `componentDidUpdate()` `componentWillUnmount()` 接下来的几节课将讲述这些生命周期方法的一些基本用例。
-**注意：** `componentWillMount` 生命周期方法会在版本 16.X 废弃在版本 17 移除。 在这篇
文章中了解更多。
+**注意：** `componentWillMount` 生命周期方法会在版本 16.X 废弃，在版本 17 移除。 在这篇
文章中了解更多。
# --instructions--
-当组件被挂载到 DOM 时，`componentWillMount()` 方法在 `render()` 方法之前被调用。 在`componentWillMount()`中将一些内容记录到控制台 -- 可能需要打开浏览器控制台以查看输出。
+当组件被挂载到 DOM 时，`componentWillMount()` 方法在 `render()` 方法之前被调用。 在 `componentWillMount()` 中将一些内容记录到控制台 -- 可能需要打开浏览器控制台以查看输出。
# --hints--
diff --git a/curriculum/challenges/chinese/03-front-end-development-libraries/redux/create-a-redux-store.md b/curriculum/challenges/chinese/03-front-end-development-libraries/redux/create-a-redux-store.md
index e97794be121..ab034704666 100644
--- a/curriculum/challenges/chinese/03-front-end-development-libraries/redux/create-a-redux-store.md
+++ b/curriculum/challenges/chinese/03-front-end-development-libraries/redux/create-a-redux-store.md
@@ -12,15 +12,15 @@ Redux 是一个状态管理框架，可以与包括 React 在内的许多不同
在 Redux 中，有一个状态对象负责应用程序的整个状态， 这意味着如果你有一个包含十个组件且每个组件都有自己的本地状态的 React 项目，那么这个项目的整个状态将通过 Redux `store` 被定义为单个状态对象， 这是学习 Redux 时要理解的第一个重要原则：Redux store 是应用程序状态的唯一真实来源。
-这也意味着，如果应用程序想要更新状态，**只能**通过 Redux store 执行， 单向数据流可以更轻松地对应用程序中的状态进行监测管理。
+这也意味着，如果应用程序想要更新状态，**只能**通过 Redux store 执行。 单向数据流可以更轻松地对应用程序中的状态进行监测管理。
# --instructions--
-Redux `store` 是一个保存和管理应用程序状态的`state`， 可以使用 Redux 对象中的 `createStore()` 来创建一个 redux `store`， 此方法将 `reducer` 函数作为必需参数， `reducer` 函数将在后面的挑战中介绍。该函数已在代码编辑器中为你定义， 它只需将 `state` 作为参数并返回一个 `state` 即可。
+Redux `store` 是一个保存和管理应用程序状态的`state`。 可以使用 Redux 对象中的 `createStore()` 来创建一个 redux `store`。 此方法将 `reducer` 函数作为必需参数， `reducer` 函数将在后面的挑战中介绍。该函数已在代码编辑器中为你定义， 它只需将 `state` 作为参数并返回一个 `state` 即可。
声明一个 `store` 变量并把它分配给 `createStore()` 方法，然后把 `reducer` 作为一个参数传入即可。
-**注意**: 编辑器中的代码使用 ES6 默认参数语法将 state 的值初始化为 `5`， 如果你不熟悉默认参数，可以参考
课程中的 ES6 部分，其中涵盖了这个主题。
+**注意**：编辑器中的代码使用 ES6 默认参数语法将 state 的值初始化为 `5`， 如果你不熟悉默认参数，可以参考
课程中的 ES6 部分，其中涵盖了这个主题。
# --hints--
diff --git a/curriculum/challenges/chinese/03-front-end-development-libraries/redux/dispatch-an-action-event.md b/curriculum/challenges/chinese/03-front-end-development-libraries/redux/dispatch-an-action-event.md
index 17c0c9e9480..4d9919aa77d 100644
--- a/curriculum/challenges/chinese/03-front-end-development-libraries/redux/dispatch-an-action-event.md
+++ b/curriculum/challenges/chinese/03-front-end-development-libraries/redux/dispatch-an-action-event.md
@@ -8,9 +8,9 @@ dashedName: dispatch-an-action-event
# --description--
-`dispatch` 方法用于将 action 分派给 Redux store， 调用 `store.dispatch()` 将从 action creator 返回的值发送回 store。
+`dispatch` 方法用于将 action 分派给 Redux store， 调用 `store.dispatch()`，并传递从一个 action creator 返回的值，将一个 action 送回给 store。
-回想一下，动作创建者返回一个具有 type 属性的对象，该属性指定已发生的动作。 然后该方法会将一个 action 对象发送到 Redux store。 基于上一个挑战的示例，下面的行是等效的，两者都会调度类 `LOGIN` 类型的 action：
+回想一下，action creator 返回一个具有 type 属性的对象，该属性指定已发生的动作。 然后该方法会将一个 action 对象发送到 Redux store。 基于上一个挑战的示例，下面的行是等效的，两者都会调度类 `LOGIN` 类型的 action：
```js
store.dispatch(actionCreator());
diff --git a/curriculum/challenges/chinese/03-front-end-development-libraries/sass/use-for-to-create-a-sass-loop.md b/curriculum/challenges/chinese/03-front-end-development-libraries/sass/use-for-to-create-a-sass-loop.md
index 57616180e4e..65cc8a390bb 100644
--- a/curriculum/challenges/chinese/03-front-end-development-libraries/sass/use-for-to-create-a-sass-loop.md
+++ b/curriculum/challenges/chinese/03-front-end-development-libraries/sass/use-for-to-create-a-sass-loop.md
@@ -10,7 +10,7 @@ dashedName: use-for-to-create-a-sass-loop
可以在 Sass 中使用 `@for` 循环添加样式，它的用法和 JavaScript 中的 `for` 循环类似。
-`@for` 以两种方式使用：“开始 through 结束” 或 “开始 to 结束”。 主要区别在于“开始 **to** 结束”*不包括*结束数字，而“开始 **through** 结束”*包括* 结束号码。
+`@for` 以两种方式使用：“开始 through 结束” 或 “开始 to 结束”。 主要区别在于“开始 **to** 结束”*不包括*结束数字，而“开始 **through** 结束”*包括*结束数字。
这是一个开始 **through** 结束的示例：
@@ -42,9 +42,9 @@ dashedName: use-for-to-create-a-sass-loop
# --instructions--
-编写 `@for` 指令，使 `$j` 的值为从 1 到 **to** 6。
+编写 `@for` 指令，使 `$j` 的值为从 1 **to** 6。
-它应该创建 5 个名为 `.text-1` 到 `.text-5` 的 class，其中每个 class 的 `font-size` 设置为 15px 乘以索引。
+它应该创建 5 个名为 `.text-1` to `.text-5` 的 class，其中每个 class 的 `font-size` 设置为 15px 乘以索引。
# --hints--
diff --git a/curriculum/challenges/espanol/02-javascript-algorithms-and-data-structures/basic-javascript/record-collection.md b/curriculum/challenges/espanol/02-javascript-algorithms-and-data-structures/basic-javascript/record-collection.md
index 66ba0a03cac..3f79545a862 100644
--- a/curriculum/challenges/espanol/02-javascript-algorithms-and-data-structures/basic-javascript/record-collection.md
+++ b/curriculum/challenges/espanol/02-javascript-algorithms-and-data-structures/basic-javascript/record-collection.md
@@ -8,28 +8,28 @@ dashedName: record-collection
# --description--
-You are creating a function that aids in the maintenance of a musical album collection. The collection is organized as an object that contains multiple albums which are also objects. Each album is represented in the collection with a unique `id` as the property name. Within each album object, there are various properties describing information about the album. Not all albums have complete information.
+Está creando una función que ayuda en el mantenimiento de una colección de álbumes musicales. La colección se organiza como un objeto que contiene múltiples álbumes que también son objetos. Cada álbum se representa en la colección con un `id` único como nombre de la propiedad. Dentro de cada objeto álbum, hay varias propiedades que describen información sobre el álbum. No todos los álbumes tienen información completa.
-The `updateRecords` function takes 4 arguments represented by the following function parameters:
+La función `updateRecords` toma 4 argumentos representados por los siguientes parámetros de función:
-- `records` - an object containing several individual albums
-- `id` - a number representing a specific album in the `records` object
-- `prop` - a string representing the name of the album’s property to update
-- `value` - a string containing the information used to update the album’s property
+- `records` - un objeto que contiene varios álbumes individuales
+- `id` - un número que representa un álbum específico en el objeto `records`
+- `prop` - una cadena que representa el nombre de la propiedad del álbum a actualizar
+- `value` - una cadena que contiene la información utilizada para actualizar la propiedad del álbum
-Complete the function using the rules below to modify the object passed to the function.
+Completa la función utilizando las reglas siguientes para modificar el objeto pasado a la función.
-- Your function must always return the entire `records` object.
-- If `value` is an empty string, delete the given `prop` property from the album.
-- If `prop` isn’t `"tracks"` and `value` isn't an empty string, assign the `value` to that album’s `prop`.
-- If `prop` is `"tracks"` and `value` isn’t an empty string, add the `value` to the end of the album’s existing `"tracks"` array.
-- If the album doesn’t have a `"tracks"` property, create a new array for the album's `"tracks"` property before adding the `value` to it.
+- Tu función debe devolver siempre el objeto `records` completo.
+- Si `value` es una cadena vacía, elimina la propiedad `prop` dada del álbum.
+- Si `prop` no es `"tracks"` y `value` no es una cadena vacía, asigna el `value` a la `prop` de ese álbum.
+- Si `prop` es `"tracks"` y `value` no es una cadena vacía, añade el `value` al final del arreglo `"tracks"` existente del álbum.
+- Si el álbum no tiene una propiedad `"tracks"`, crea un nuevo arreglo para la propiedad `"tracks"` del álbum antes de añadirle el `value`.
-**Note:** A copy of the `recordCollection` object is used for the tests. You should not directly modify the `recordCollection` object.
+**Nota:** Para las pruebas se utiliza una copia del objeto `recordCollection`. No debes modificar directamente el objeto `recordCollection`.
# --hints--
-After `updateRecords(recordCollection, 5439, "artist", "ABBA")`, `artist` should be the string `ABBA`
+Después de `updateRecords(recordCollection, 5439, "artist", "ABBA")`, `artist` debe ser la cadena `ABBA`
```js
assert(
@@ -38,7 +38,7 @@ assert(
);
```
-After `updateRecords(recordCollection, 5439, "tracks", "Take a Chance on Me")`, `tracks` should have the string `Take a Chance on Me` as the last and only element.
+Después de `updateRecords(recordCollection, 5439, "tracks", "Take a Chance on Me")`, `tracks` debe tener la cadena `Take a Chance on Me` como último y único elemento.
```js
assert(
@@ -48,14 +48,14 @@ assert(
);
```
-After `updateRecords(recordCollection, 2548, "artist", "")`, `artist` should not be set
+Después de `updateRecords(recordCollection, 2548, "artist", "")`, `artist` no debe establecerse
```js
updateRecords(_recordCollection, 2548, 'artist', '');
assert(!_recordCollection[2548].hasOwnProperty('artist'));
```
-After `updateRecords(recordCollection, 1245, "tracks", "Addicted to Love")`, `tracks` should have the string `Addicted to Love` as the last element.
+Después de `updateRecords(recordCollection, 1245, "tracks", "Addicted to Love")`, `tracks` debe tener la cadena `Addicted to Love` como último elemento.
```js
assert(
@@ -65,7 +65,7 @@ assert(
);
```
-After `updateRecords(recordCollection, 2468, "tracks", "Free")`, `tracks` should have the string `1999` as the first element.
+Después de `updateRecords(recordCollection, 2468, "tracks", "Free")`, `tracks` debe tener la cadena `1999` como primer elemento.
```js
assert(
@@ -75,14 +75,14 @@ assert(
);
```
-After `updateRecords(recordCollection, 2548, "tracks", "")`, `tracks` should not be set
+Después de `updateRecords(recordCollection, 2548, "tracks", "")`, `tracks` no debe establecerse
```js
updateRecords(_recordCollection, 2548, 'tracks', '');
assert(!_recordCollection[2548].hasOwnProperty('tracks'));
```
-After `updateRecords(recordCollection, 1245, "albumTitle", "Riptide")`, `albumTitle` should be the string `Riptide`
+Después de `updateRecords(recordCollection, 1245, "albumTitle", "Riptide")`, `albumTitle` debe ser la cadena `Riptide`
```js
assert(
diff --git a/curriculum/challenges/espanol/02-javascript-algorithms-and-data-structures/basic-javascript/replacing-if-else-chains-with-switch.md b/curriculum/challenges/espanol/02-javascript-algorithms-and-data-structures/basic-javascript/replacing-if-else-chains-with-switch.md
index 9b2dd3fd338..3094af5b926 100644
--- a/curriculum/challenges/espanol/02-javascript-algorithms-and-data-structures/basic-javascript/replacing-if-else-chains-with-switch.md
+++ b/curriculum/challenges/espanol/02-javascript-algorithms-and-data-structures/basic-javascript/replacing-if-else-chains-with-switch.md
@@ -60,43 +60,43 @@ Debes tener al menos cuatro sentencias `break`
assert(code.match(/break/g).length >= 4);
```
-`chainToSwitch("bob")` should return the string `Marley`
+`chainToSwitch("bob")` debe devolver una cadena `Marley`
```js
assert(chainToSwitch('bob') === 'Marley');
```
-`chainToSwitch(42)` should return the string `The Answer`
+`chainToSwitch(42)` debe devolver la cadena `The Answer`
```js
assert(chainToSwitch(42) === 'The Answer');
```
-`chainToSwitch(1)` should return the string `There is no #1`
+`chainToSwitch(1)` debe devolver la cadena `There is no #1`
```js
assert(chainToSwitch(1) === 'There is no #1');
```
-`chainToSwitch(99)` should return the string `Missed me by this much!`
+`chainToSwitch(99)` debe devolver la cadena `Missed me by this much!`
```js
assert(chainToSwitch(99) === 'Missed me by this much!');
```
-`chainToSwitch(7)` should return the string `Ate Nine`
+`chainToSwitch(7)` debe devolver la cadena `Ate Nine`
```js
assert(chainToSwitch(7) === 'Ate Nine');
```
-`chainToSwitch("John")` should return `""` (empty string)
+`chainToSwitch("John")` debe devolver `""` (cadena vacía)
```js
assert(chainToSwitch('John') === '');
```
-`chainToSwitch(156)` should return `""` (empty string)
+`chainToSwitch(156)` debe devolver `""` (cadena vacía)
```js
assert(chainToSwitch(156) === '');
diff --git a/curriculum/challenges/espanol/02-javascript-algorithms-and-data-structures/basic-javascript/subtract-one-number-from-another-with-javascript.md b/curriculum/challenges/espanol/02-javascript-algorithms-and-data-structures/basic-javascript/subtract-one-number-from-another-with-javascript.md
index b3bb67205c9..9781ed90a5a 100644
--- a/curriculum/challenges/espanol/02-javascript-algorithms-and-data-structures/basic-javascript/subtract-one-number-from-another-with-javascript.md
+++ b/curriculum/challenges/espanol/02-javascript-algorithms-and-data-structures/basic-javascript/subtract-one-number-from-another-with-javascript.md
@@ -26,13 +26,13 @@ Cambia el `0` para que la diferencia sea `12`.
# --hints--
-The variable `difference` should be equal to `12`.
+La variable `difference` debe ser igual a `12`.
```js
assert(difference === 12);
```
-You should only subtract one number from `45`.
+Solo debes restar un número de `45`.
```js
assert(/difference=45-33;?/.test(__helpers.removeWhiteSpace(code)));
diff --git a/curriculum/challenges/espanol/02-javascript-algorithms-and-data-structures/es6/use-class-syntax-to-define-a-constructor-function.md b/curriculum/challenges/espanol/02-javascript-algorithms-and-data-structures/es6/use-class-syntax-to-define-a-constructor-function.md
index 47b16fb4a7d..977c6f293aa 100644
--- a/curriculum/challenges/espanol/02-javascript-algorithms-and-data-structures/es6/use-class-syntax-to-define-a-constructor-function.md
+++ b/curriculum/challenges/espanol/02-javascript-algorithms-and-data-structures/es6/use-class-syntax-to-define-a-constructor-function.md
@@ -10,9 +10,9 @@ dashedName: use-class-syntax-to-define-a-constructor-function
ES6 proporciona una nueva sintaxis para crear objetos, usando la palabra clave
class.
-In ES5, an object can be created by defining a `constructor` function and using the `new` keyword to instantiate the object.
+En ES5, se puede crear un objeto definiendo una función `constructor` y usando la palabra clave `new` para instanciar el objeto.
-In ES6, a `class` declaration has a `constructor` method that is invoked with the `new` keyword. If the `constructor` method is not explicitly defined, then it is implicitly defined with no arguments.
+En ES6, una declaración `class` tiene un método `constructor` que se invoca con la palabra clave `new`. Si el método `constructor` no se define explícitamente, entonces se define implícitamente sin argumentos.
```js
// Explicit constructor
@@ -41,21 +41,21 @@ const atlas = new Rocket();
atlas.launch();
```
-It should be noted that the `class` keyword declares a new function, to which a constructor is added. This constructor is invoked when `new` is called to create a new object.
+Debe tenerse en cuenta que la palabra clave `class` declara una nueva función, a la cual se añade un constructor. Este constructor se invoca cuando `new` es llamado para crear un nuevo objeto.
-**Note:** UpperCamelCase should be used by convention for ES6 class names, as in `SpaceShuttle` used above.
+**Nota:** UpperCamelCase debe ser utilizado por convención para nombres de clase en ES6, como `SpaceShuttle` usado anteriormente.
-The `constructor` method is a special method for creating and initializing an object created with a class. You will learn more about it in the Object Oriented Programming section of the JavaScript Algorithms And Data Structures Certification.
+El método `constructor` es un método especial para crear e inicializar un objeto creado con una clase. Aprenderás más sobre ello en la sección de Programación Orientada a Objetos de la Certificación en Algoritmos de JavaScript y Estructuras de Datos.
# --instructions--
-Use the `class` keyword and write a `constructor` to create the `Vegetable` class.
+Usa la palabra clave `class` y escribe un `constructor` para crear la clase `Vegetable`.
-The `Vegetable` class allows you to create a vegetable object with a property `name` that gets passed to the `constructor`.
+La clase `Vegetable` te permite crear un objeto vegetal con una propiedad `name` que es pasada al `constructor`.
# --hints--
-`Vegetable` should be a `class` with a defined `constructor` method.
+`Vegetable` debe ser una clase `class` con un método `constructor` definido.
```js
assert(
@@ -63,13 +63,13 @@ assert(
);
```
-The `class` keyword should be used.
+La palabra clave `class` debe ser utilizada.
```js
assert(code.match(/class/g));
```
-`Vegetable` should be able to be instantiated.
+`Vegetable` debe ser capaz de ser instanciada.
```js
assert(() => {
@@ -78,7 +78,7 @@ assert(() => {
});
```
-`carrot.name` should return `carrot`.
+`carrot.name` debe devolver `carrot`.
```js
assert(carrot.name == 'carrot');
diff --git a/curriculum/challenges/espanol/02-javascript-algorithms-and-data-structures/intermediate-algorithm-scripting/sum-all-odd-fibonacci-numbers.md b/curriculum/challenges/espanol/02-javascript-algorithms-and-data-structures/intermediate-algorithm-scripting/sum-all-odd-fibonacci-numbers.md
index bab4e6f0f66..744d7596c38 100644
--- a/curriculum/challenges/espanol/02-javascript-algorithms-and-data-structures/intermediate-algorithm-scripting/sum-all-odd-fibonacci-numbers.md
+++ b/curriculum/challenges/espanol/02-javascript-algorithms-and-data-structures/intermediate-algorithm-scripting/sum-all-odd-fibonacci-numbers.md
@@ -10,7 +10,7 @@ dashedName: sum-all-odd-fibonacci-numbers
Dado un entero positivo `num`, devuelve la suma de todos los números impares de Fibonacci que son menores o iguales a `num`.
-The first two numbers in the Fibonacci sequence are 0 and 1. Cada número adicional en la secuencia es la suma de los dos números anteriores. The first seven numbers of the Fibonacci sequence are 0, 1, 1, 2, 3, 5 and 8.
+Los dos primeros números de la sucesión de Fibonacci son el 0 y el 1. Cada número adicional en la secuencia es la suma de los dos números anteriores. Los siete primeros números de la sucesión de Fibonacci son 0, 1, 1, 2, 3, 5 y 8.
Por ejemplo, `sumFibs(10)` debe devolver `10` porque todos los números impares de Fibonacci menores o iguales a `10` son 1, 1, 3 y 5.
diff --git a/curriculum/challenges/espanol/04-data-visualization/data-visualization-projects/visualize-data-with-a-heat-map.md b/curriculum/challenges/espanol/04-data-visualization/data-visualization-projects/visualize-data-with-a-heat-map.md
index 2f2f8108858..bcc499b161e 100644
--- a/curriculum/challenges/espanol/04-data-visualization/data-visualization-projects/visualize-data-with-a-heat-map.md
+++ b/curriculum/challenges/espanol/04-data-visualization/data-visualization-projects/visualize-data-with-a-heat-map.md
@@ -12,7 +12,7 @@ dashedName: visualize-data-with-a-heat-map
Completa las historias de usuario a continuación y obtén todas las pruebas para aprobar. Utiliza cualquier librería o API que necesites. Dale tu propio estilo.
-Puedes utilizar HTML, JavaScript, CSS y la librería D3 de visualización basada en svg. Required DOM elements are queried on the moment of each test. Si usas un framework frontend (como por ejemplo Vue), los resultados de la prueba pueden ser inexactos para el contenido dinámico. Esperamos poder adaptarlos eventualmente, pero por ahora estos frameworks no son soportados por los proyectos con D3.
+Puedes utilizar HTML, JavaScript, CSS y la librería D3 de visualización basada en svg. Los elementos DOM necesarios se consultan en el momento de cada prueba. Si usas un framework frontend (como por ejemplo Vue), los resultados de la prueba pueden ser inexactos para el contenido dinámico. Esperamos poder adaptarlos eventualmente, pero por ahora estos frameworks no son soportados por los proyectos con D3.
**Historia de usuario #1:** Mi mapa de calor debe tener un título con su correspondiente `id="title"`.
diff --git a/curriculum/challenges/espanol/04-data-visualization/data-visualization-projects/visualize-data-with-a-scatterplot-graph.md b/curriculum/challenges/espanol/04-data-visualization/data-visualization-projects/visualize-data-with-a-scatterplot-graph.md
index 80f4274eb06..69c95ea6350 100644
--- a/curriculum/challenges/espanol/04-data-visualization/data-visualization-projects/visualize-data-with-a-scatterplot-graph.md
+++ b/curriculum/challenges/espanol/04-data-visualization/data-visualization-projects/visualize-data-with-a-scatterplot-graph.md
@@ -12,7 +12,7 @@ dashedName: visualize-data-with-a-scatterplot-graph
Completa las historias de usuario a continuación y obtén todas las pruebas para aprobar. Utiliza cualquier librería o API que necesites. Dale tu propio estilo.
-Puedes utilizar HTML, JavaScript, CSS y la librería D3 de visualización basada en svg. Las pruebas requieren que los ejes se generen utilizando la propiedad de eje D3, que genera automáticamente marcas a lo largo del eje. Estas marcas son necesarias para pasar las pruebas de D3, ya que sus posiciones se utilizan para determinar el alineamiento de los elementos gráficos. Encontrarás información sobre cómo generar ejes en
. Required DOM elements are queried on the moment of each test. Si usas un framework frontend (como por ejemplo Vue), los resultados de la prueba pueden ser inexactos para el contenido dinámico. Esperamos poder adaptarlos eventualmente, pero por ahora estos frameworks no son soportados por los proyectos con D3.
+Puedes utilizar HTML, JavaScript, CSS y la librería D3 de visualización basada en svg. Las pruebas requieren que los ejes se generen utilizando la propiedad de eje D3, que genera automáticamente marcas a lo largo del eje. Estas marcas son necesarias para pasar las pruebas de D3, ya que sus posiciones se utilizan para determinar el alineamiento de los elementos gráficos. Encontrarás información sobre cómo generar ejes en . Los elementos DOM necesarios se consultan en el momento de cada prueba. Si usas un framework frontend (como por ejemplo Vue), los resultados de la prueba pueden ser inexactos para el contenido dinámico. Esperamos poder adaptarlos eventualmente, pero por ahora estos frameworks no son soportados por los proyectos con D3.
**Historia de usuario #1:** Puedo ver un elemento titular que tiene un `id="title"`.
diff --git a/curriculum/challenges/espanol/04-data-visualization/data-visualization-projects/visualize-data-with-a-treemap-diagram.md b/curriculum/challenges/espanol/04-data-visualization/data-visualization-projects/visualize-data-with-a-treemap-diagram.md
index 1ea37b4c27c..dc055a18520 100644
--- a/curriculum/challenges/espanol/04-data-visualization/data-visualization-projects/visualize-data-with-a-treemap-diagram.md
+++ b/curriculum/challenges/espanol/04-data-visualization/data-visualization-projects/visualize-data-with-a-treemap-diagram.md
@@ -12,7 +12,7 @@ dashedName: visualize-data-with-a-treemap-diagram
Completa las historias de usuario a continuación y obtén todas las pruebas para aprobar. Utiliza cualquier librería o API que necesites. Dale tu propio estilo.
-Puedes utilizar HTML, JavaScript, CSS y la librería D3 de visualización basada en svg. Las pruebas requieren que los ejes se generen utilizando la propiedad de eje D3, que genera automáticamente marcas a lo largo del eje. Estas marcas son necesarias para pasar las pruebas de D3, ya que sus posiciones se utilizan para determinar el alineamiento de los elementos gráficos. Encontrarás información sobre cómo generar ejes en . Required DOM elements are queried on the moment of each test. Si usas un framework frontend (como por ejemplo Vue), los resultados de la prueba pueden ser inexactos para el contenido dinámico. Esperamos poder adaptarlos eventualmente, pero por ahora estos frameworks no son soportados por los proyectos con D3.
+Puedes utilizar HTML, JavaScript, CSS y la librería D3 de visualización basada en svg. Las pruebas requieren que los ejes se generen utilizando la propiedad de eje D3, que genera automáticamente marcas a lo largo del eje. Estas marcas son necesarias para pasar las pruebas de D3, ya que sus posiciones se utilizan para determinar el alineamiento de los elementos gráficos. Encontrarás información sobre cómo generar ejes en . Los elementos DOM necesarios se consultan en el momento de cada prueba. Si usas un framework frontend (como por ejemplo Vue), los resultados de la prueba pueden ser inexactos para el contenido dinámico. Esperamos poder adaptarlos eventualmente, pero por ahora estos frameworks no son soportados por los proyectos con D3.
**Historia de usuario #1:** Mi mapa de árbol debe tener un título con su correspondiente `id="title"`.
diff --git a/curriculum/challenges/espanol/04-data-visualization/data-visualization-with-d3/add-a-tooltip-to-a-d3-element.md b/curriculum/challenges/espanol/04-data-visualization/data-visualization-with-d3/add-a-tooltip-to-a-d3-element.md
index 3a8812dc89f..ce7f7770c1f 100644
--- a/curriculum/challenges/espanol/04-data-visualization/data-visualization-with-d3/add-a-tooltip-to-a-d3-element.md
+++ b/curriculum/challenges/espanol/04-data-visualization/data-visualization-with-d3/add-a-tooltip-to-a-d3-element.md
@@ -8,7 +8,7 @@ dashedName: add-a-tooltip-to-a-d3-element
# --description--
-Un cuadro emergente muestra más información acerca de un elemento en la página cuando el usuario se coloca sobre ese elemento. There are several ways to add a tooltip to a visualization. This challenge uses the SVG `title` element.
+Un cuadro emergente muestra más información acerca de un elemento en la página cuando el usuario se coloca sobre ese elemento. Hay varias formas de añadir una información sobre herramientas a una visualización. Este reto utiliza el elemento SVG `title`.
`title` se empareja con el método `text()` para agregar datos dinámicamente a las barras.
diff --git a/curriculum/challenges/espanol/04-data-visualization/data-visualization-with-d3/add-attributes-to-the-circle-elements.md b/curriculum/challenges/espanol/04-data-visualization/data-visualization-with-d3/add-attributes-to-the-circle-elements.md
index 72e923c3ba6..4786551201a 100644
--- a/curriculum/challenges/espanol/04-data-visualization/data-visualization-with-d3/add-attributes-to-the-circle-elements.md
+++ b/curriculum/challenges/espanol/04-data-visualization/data-visualization-with-d3/add-attributes-to-the-circle-elements.md
@@ -8,11 +8,11 @@ dashedName: add-attributes-to-the-circle-elements
# --description--
-The last challenge created the `circle` elements for each point in the `dataset`, and appended them to the SVG. Pero D3 necesita más información sobre la posición y el tamaño de cada `circle` para mostrarlos correctamente.
+En el último reto se han creado los elementos `circle` para cada punto del `dataset` y se han añadido al SVG. Pero D3 necesita más información sobre la posición y el tamaño de cada `circle` para mostrarlos correctamente.
-Un `circle` en SVG tiene tres atributos principales. Los atributos `cx` y `cy` son las coordenadas. They tell D3 where to position the *center* of the shape on the SVG. El radio (atributo `r`) da el tamaño del `circle`.
+Un `circle` en SVG tiene tres atributos principales. Los atributos `cx` y `cy` son las coordenadas. Indican a D3 dónde colocar el *centro* de la forma en el SVG. El radio (atributo `r`) da el tamaño del `circle`.
-Just like the `rect` `y` coordinate, the `cy` attribute for a `circle` is measured from the top of the SVG, not from the bottom.
+Al igual que la coordenada `rect` `y`, el atributo `cy` de un `circle` se mide desde la parte superior del SVG, no desde la inferior.
Los tres atributos pueden usar una función callback para establecer sus valores de forma dinámica. Recuerda que todos los métodos encadenados después de `data(dataset)` se ejecutan una vez por elemento en `dataset`. El parámetro `d` en la función callback se refiere al elemento actual en `dataset`, que es un arreglo para cada punto. Utiliza la notación de corchetes, como `d[0]`, para acceder a los valores de ese arreglo.
diff --git a/curriculum/challenges/espanol/04-data-visualization/data-visualization-with-d3/add-axes-to-a-visualization.md b/curriculum/challenges/espanol/04-data-visualization/data-visualization-with-d3/add-axes-to-a-visualization.md
index 361eacb902c..9ffb964f25c 100644
--- a/curriculum/challenges/espanol/04-data-visualization/data-visualization-with-d3/add-axes-to-a-visualization.md
+++ b/curriculum/challenges/espanol/04-data-visualization/data-visualization-with-d3/add-axes-to-a-visualization.md
@@ -16,7 +16,7 @@ D3 tiene dos métodos, `axisLeft()` y `axisBottom()`, para representar el eje "y
const xAxis = d3.axisBottom(xScale);
```
-The next step is to render the axis on the SVG. Para hacerlo, puedes utilizar un componente SVG general, el elemento `g`. El `g` significa grupo. A diferencia de `rect`, `circle` y `text`, un eje es solo una línea recta cuando se representa. Debido a que es una forma simple, el uso de `g` funciona. The last step is to apply a `transform` attribute to position the axis on the SVG in the right place. Otherwise, the line would render along the border of the SVG and wouldn't be visible. SVG admite diferentes tipos de `transforms`, pero el posicionamiento de un eje necesita `translate`. Cuando se aplica al elemento `g`, mueve todo el grupo hacia arriba y hacia abajo en las cantidades dadas. He aquí un ejemplo:
+El siguiente paso es renderizar el eje en el SVG. Para hacerlo, puedes utilizar un componente SVG general, el elemento `g`. El `g` significa grupo. A diferencia de `rect`, `circle` y `text`, un eje es solo una línea recta cuando se representa. Debido a que es una forma simple, el uso de `g` funciona. El último paso es aplicar un atributo `transform` para colocar el eje en el SVG en el lugar correcto. De lo contrario, la línea se mostraría a lo largo del borde del SVG y no sería visible. SVG admite diferentes tipos de `transforms`, pero el posicionamiento de un eje necesita `translate`. Cuando se aplica al elemento `g`, mueve todo el grupo hacia arriba y hacia abajo en las cantidades dadas. He aquí un ejemplo:
```js
const xAxis = d3.axisBottom(xScale);
@@ -26,7 +26,7 @@ svg.append("g")
.call(xAxis);
```
-The above code places the x-axis at the bottom of the SVG. Luego se pasa como argumento al método `call()`. El eje "y" funciona de la misma manera, excepto que el argumento `translate` tiene el formato `(x, 0)`. Debido a que `translate` es una cadena en el método `attr()` anterior, puedes usar la concatenación para incluir valores de variable para sus argumentos.
+El código anterior coloca el eje x en la parte inferior del SVG. Luego se pasa como argumento al método `call()`. El eje "y" funciona de la misma manera, excepto que el argumento `translate` tiene el formato `(x, 0)`. Debido a que `translate` es una cadena en el método `attr()` anterior, puedes usar la concatenación para incluir valores de variable para sus argumentos.
# --instructions--
diff --git a/curriculum/challenges/espanol/04-data-visualization/data-visualization-with-d3/add-labels-to-d3-elements.md b/curriculum/challenges/espanol/04-data-visualization/data-visualization-with-d3/add-labels-to-d3-elements.md
index c586545ec29..bee33ab078b 100644
--- a/curriculum/challenges/espanol/04-data-visualization/data-visualization-with-d3/add-labels-to-d3-elements.md
+++ b/curriculum/challenges/espanol/04-data-visualization/data-visualization-with-d3/add-labels-to-d3-elements.md
@@ -10,7 +10,7 @@ dashedName: add-labels-to-d3-elements
D3 te permite etiquetar un elemento gráfico, como una barra, usando el elemento SVG `text`.
-Like the `rect` element, a `text` element needs to have `x` and `y` attributes, to place it on the SVG. También necesita acceso a los datos para mostrar los valores.
+Al igual que el elemento `rect`, un elemento `text` necesita tener atributos `x` y `y`, para colocarlo en el SVG. También necesita acceso a los datos para mostrar los valores.
D3 te da un nivel de control alto sobre cómo etiquetas tus barras.
diff --git a/curriculum/challenges/espanol/04-data-visualization/data-visualization-with-d3/add-labels-to-scatter-plot-circles.md b/curriculum/challenges/espanol/04-data-visualization/data-visualization-with-d3/add-labels-to-scatter-plot-circles.md
index ca2d6b5d79f..b786aeecccf 100644
--- a/curriculum/challenges/espanol/04-data-visualization/data-visualization-with-d3/add-labels-to-scatter-plot-circles.md
+++ b/curriculum/challenges/espanol/04-data-visualization/data-visualization-with-d3/add-labels-to-scatter-plot-circles.md
@@ -12,7 +12,7 @@ Puedes agregar texto para crear etiquetas para los puntos en un diagrama de disp
El objetivo es mostrar los valores separados por coma del primer (`x`) y segundo (`y`) campo de cada elemento en `dataset`.
-The `text` nodes need `x` and `y` attributes to position it on the SVG. En este desafío, el valor `y` (que determina la altura) puede usar el mismo valor que el `circle` usa para su atributo `cy`. El valor `x` puede ser ligeramente mayor que el valor `cx` del `circle` para que la etiqueta sea visible. Esto empujará la etiqueta a la derecha del punto trazado.
+Los nodos `text` necesitan atributos `x` y `y` para posicionarse en el SVG. En este desafío, el valor `y` (que determina la altura) puede usar el mismo valor que el `circle` usa para su atributo `cy`. El valor `x` puede ser ligeramente mayor que el valor `cx` del `circle` para que la etiqueta sea visible. Esto empujará la etiqueta a la derecha del punto trazado.
# --instructions--
diff --git a/curriculum/challenges/espanol/04-data-visualization/data-visualization-with-d3/change-styles-based-on-data.md b/curriculum/challenges/espanol/04-data-visualization/data-visualization-with-d3/change-styles-based-on-data.md
index 598e6cbfc96..ae2123c9df5 100644
--- a/curriculum/challenges/espanol/04-data-visualization/data-visualization-with-d3/change-styles-based-on-data.md
+++ b/curriculum/challenges/espanol/04-data-visualization/data-visualization-with-d3/change-styles-based-on-data.md
@@ -8,7 +8,7 @@ dashedName: change-styles-based-on-data
# --description--
-D3 se trata de la visualización y presentación de datos. Probablemente vayas a querer estilizar los elementos con base en los datos. For example, you may want to color a data point blue if it has a value less than 20, and red otherwise. You can use a callback function in the `style()` method and include the conditional logic. The callback function uses the `d` parameter to represent the data point:
+D3 se trata de la visualización y presentación de datos. Probablemente vayas a querer estilizar los elementos con base en los datos. Por ejemplo, puede que desas colorear un punto de datos en azul si tiene un valor inferior a 20, y en rojo en caso contrario. Puedes utilizar una función callback en el método `style()` e incluir la lógica condicional. La función callback utiliza el parámetro `d` para representar el punto de datos:
```js
selection.style("color", (d) => {
@@ -16,65 +16,65 @@ selection.style("color", (d) => {
});
```
-The `style()` method is not limited to setting the `color` - it can be used with other CSS properties as well.
+El método `style()` no se limita a establecer el `color` - también se puede utilizar con otras propiedades CSS.
# --instructions--
-Add the `style()` method to the code in the editor to set the `color` of the `h2` elements conditionally. Write the callback function so if the data value is less than 20, it returns red, otherwise it returns green.
+Agrega el método `style()` al código del editor para establecer el `color` de los elementos `h2` de forma condicional. Escribe la función callback de forma que si el valor de los datos es inferior a 20, devuelva rojo, en caso contrario devuelva verde.
-**Note:** You can use if-else logic, or the ternary operator.
+**Nota:** Puedes utilizar la lógica if-else, o el operador ternario.
# --hints--
-The first `h2` should have a `color` of red.
+El primer `h2` debe tener un `color` rojo.
```js
assert($('h2').eq(0).css('color') == 'rgb(255, 0, 0)');
```
-The second `h2` should have a `color` of green.
+El segundo `h2` debe tener un `color` verde.
```js
assert($('h2').eq(1).css('color') == 'rgb(0, 128, 0)');
```
-The third `h2` should have a `color` of green.
+El tercer `h2` debe tener un `color` verde.
```js
assert($('h2').eq(2).css('color') == 'rgb(0, 128, 0)');
```
-The fourth `h2` should have a `color` of red.
+El cuarto `h2` debe tener un `color` rojo.
```js
assert($('h2').eq(3).css('color') == 'rgb(255, 0, 0)');
```
-The fifth `h2` should have a `color` of green.
+El quinto `h2` debe tener un `color` verde.
```js
assert($('h2').eq(4).css('color') == 'rgb(0, 128, 0)');
```
-The sixth `h2` should have a `color` of red.
+El sexto `h2` debe tener un `color` rojo.
```js
assert($('h2').eq(5).css('color') == 'rgb(255, 0, 0)');
```
-The seventh `h2` should have a `color` of green.
+El séptimo `h2` debe tener un `color` verde.
```js
assert($('h2').eq(6).css('color') == 'rgb(0, 128, 0)');
```
-The eighth `h2` should have a `color` of red.
+El octavo `h2` debe tener un `color` rojo.
```js
assert($('h2').eq(7).css('color') == 'rgb(255, 0, 0)');
```
-The ninth `h2` should have a `color` of red.
+El noveno `h2` debe tener un `color` rojo.
```js
assert($('h2').eq(8).css('color') == 'rgb(255, 0, 0)');
diff --git a/curriculum/challenges/espanol/04-data-visualization/data-visualization-with-d3/create-a-linear-scale-with-d3.md b/curriculum/challenges/espanol/04-data-visualization/data-visualization-with-d3/create-a-linear-scale-with-d3.md
index 9bcd06f05f1..05f2bf1bf43 100644
--- a/curriculum/challenges/espanol/04-data-visualization/data-visualization-with-d3/create-a-linear-scale-with-d3.md
+++ b/curriculum/challenges/espanol/04-data-visualization/data-visualization-with-d3/create-a-linear-scale-with-d3.md
@@ -8,13 +8,13 @@ dashedName: create-a-linear-scale-with-d3
# --description--
-The bar and scatter plot charts both plotted data directly onto the SVG. Sin embargo, si la altura de una barra o uno de los puntos de dato fuesen mayores que los valores de ancho (width) o largo (height) del SVG, se irían fuera del área del SVG.
+Las gráficas de barras y dispersión muestran ambos datos trazados directamente en el SVG. Sin embargo, si la altura de una barra o uno de los puntos de dato fuesen mayores que los valores de ancho (width) o largo (height) del SVG, se irían fuera del área del SVG.
-En D3, hay escalas para ayudar a trazar datos. `scales` are functions that tell the program how to map a set of raw data points onto the pixels of the SVG.
+En D3, hay escalas para ayudar a trazar datos. `scales` son funciones que le dicen al programa cómo asignar un conjunto de puntos de datos sin procesar a los pixeles del SVG.
-For example, say you have a 100x500-sized SVG and you want to plot Gross Domestic Product (GDP) for a number of countries. El conjunto de números estaría en el rango de miles de millones o billones de dólares. Tú le provees a D3 un tipo de escala para decirle cómo colocar los grandes valores de PBI en esa área de tamaño 100x500.
+Por ejemplo, digamos que tienes un lienzo SVG de tamaño 100X500 y quieres trazar el Producto Interior Bruto para un número de países. El conjunto de números estaría en el rango de miles de millones o billones de dólares. Tú le provees a D3 un tipo de escala para decirle cómo colocar los grandes valores de PBI en esa área de tamaño 100x500.
-Es muy poco probable que traces los datos en bruto tal como son. Before plotting it, you set the scale for your entire data set, so that the `x` and `y` values fit your SVG width and height.
+Es muy poco probable que traces los datos en bruto tal como son. Antes de trazarlo, estableces la escala para todo el conjunto de datos, de modo que los valores `x` y `y` se ajusten al ancho y altura de tu SVG.
D3 tiene varios tipos de escalas. Para una escala lineal (usualmente usada con datos cuantitativos), existe el método de D3 `scaleLinear()`:
diff --git a/curriculum/challenges/espanol/04-data-visualization/data-visualization-with-d3/create-a-scatterplot-with-svg-circles.md b/curriculum/challenges/espanol/04-data-visualization/data-visualization-with-d3/create-a-scatterplot-with-svg-circles.md
index 2cc550230bf..2367fe3394e 100644
--- a/curriculum/challenges/espanol/04-data-visualization/data-visualization-with-d3/create-a-scatterplot-with-svg-circles.md
+++ b/curriculum/challenges/espanol/04-data-visualization/data-visualization-with-d3/create-a-scatterplot-with-svg-circles.md
@@ -14,7 +14,7 @@ SVG tiene una etiqueta `circle` para crear la forma de un circulo. Se parece muc
# --instructions--
-Use the `data()`, `enter()`, and `append()` methods to bind `dataset` to new `circle` elements that are appended to the SVG.
+Utiliza los métodos `data()`, `enter()` y `append()` para vincular `dataset` a nuevos elementos `circle` que se anexan al SVG.
**Nota:** Los círculos no serán visibles porque aún no establecimos sus atributos. Haremos esto en el siguiente desafío.
diff --git a/curriculum/challenges/espanol/04-data-visualization/data-visualization-with-d3/set-a-domain-and-a-range-on-a-scale.md b/curriculum/challenges/espanol/04-data-visualization/data-visualization-with-d3/set-a-domain-and-a-range-on-a-scale.md
index 128f9353408..edb18620560 100644
--- a/curriculum/challenges/espanol/04-data-visualization/data-visualization-with-d3/set-a-domain-and-a-range-on-a-scale.md
+++ b/curriculum/challenges/espanol/04-data-visualization/data-visualization-with-d3/set-a-domain-and-a-range-on-a-scale.md
@@ -12,7 +12,7 @@ Por defecto, las escalas usan la relación de identidad. Esto significa que el v
Digamos que un conjunto de datos tiene valores entre 50 y 480. Esta es la información de entrada para una escala, también conocido como el dominio.
-You want to map those points along the `x` axis on the SVG, between 10 units and 500 units. Esta es la información de salida, también conocida como el rango.
+Desea asignar esos puntos a lo largo del eje `x` en el SVG, entre 10 unidades y 500 unidades. Esta es la información de salida, también conocida como el rango.
Los métodos `domain()` y `range()` establecen estos valores para la escala. Ambos métodos toman un arreglo de al menos dos elementos como argumento. Aquí un ejemplo:
diff --git a/curriculum/challenges/espanol/04-data-visualization/data-visualization-with-d3/use-a-pre-defined-scale-to-place-elements.md b/curriculum/challenges/espanol/04-data-visualization/data-visualization-with-d3/use-a-pre-defined-scale-to-place-elements.md
index 47a815c5e94..968ac01e530 100644
--- a/curriculum/challenges/espanol/04-data-visualization/data-visualization-with-d3/use-a-pre-defined-scale-to-place-elements.md
+++ b/curriculum/challenges/espanol/04-data-visualization/data-visualization-with-d3/use-a-pre-defined-scale-to-place-elements.md
@@ -8,7 +8,7 @@ dashedName: use-a-pre-defined-scale-to-place-elements
# --description--
-Con las escalas configuradas, es tiempo de trazar el diagrama de dispersión nuevamente. The scales are like processing functions that turn the `x` and `y` raw data into values that fit and render correctly on the SVG. Mantienen los datos dentro del área de trazado de la pantalla.
+Con las escalas configuradas, es tiempo de trazar el diagrama de dispersión nuevamente. Las escalas son como funciones de procesamiento que convierten los datos brutos `x` y `y` en valores que se ajustan y representan correctamente en el SVG. Mantienen los datos dentro del área de trazado de la pantalla.
Establece los valores de los atributos de coordenada para una forma SVG con la función escaladora. Esto incluye los atributos `x` e `y` para `rect` o elementos `text`, o `cx` y `cy` para `circles`. He aquí un ejemplo:
@@ -17,11 +17,11 @@ shape
.attr("x", (d) => xScale(d[0]))
```
-Scales set shape coordinate attributes to place the data points onto the SVG. No necesitas aplicar escalas cuando muestras el valor del dato real, por ejemplo, en el método `text()` para una descripción o una etiqueta.
+Las escalas establecen atributos de coordenadas de forma para colocar los puntos de datos en el SVG. No necesitas aplicar escalas cuando muestras el valor del dato real, por ejemplo, en el método `text()` para una descripción o una etiqueta.
# --instructions--
-Use `xScale` and `yScale` to position both the `circle` and `text` shapes onto the SVG. Para los `circles`, aplica las escalas para establecer los atributos `cx` y `cy`. También, dales un radio de `5` unidades.
+Utiliza `xScale` y `yScale` para colocar las formas `circle` y `text` en el SVG. Para los `circles`, aplica las escalas para establecer los atributos `cx` y `cy`. También, dales un radio de `5` unidades.
Para los elementos `text`, aplica las escalas para establecer los atributos `x` e `y`. Las etiquetas deben ser desplazadas a la derecha de los puntos. Para ello, agrega `10` unidades al valor de datos `x` antes de pasarlo a `xScale`.
diff --git a/curriculum/challenges/espanol/04-data-visualization/data-visualization-with-d3/use-dynamic-scales.md b/curriculum/challenges/espanol/04-data-visualization/data-visualization-with-d3/use-dynamic-scales.md
index d2d5a124158..3129112ad9b 100644
--- a/curriculum/challenges/espanol/04-data-visualization/data-visualization-with-d3/use-dynamic-scales.md
+++ b/curriculum/challenges/espanol/04-data-visualization/data-visualization-with-d3/use-dynamic-scales.md
@@ -10,11 +10,11 @@ dashedName: use-dynamic-scales
Los métodos `min()` y `max()` de D3 son útiles para ayudar a establecer la escala.
-Dado un conjunto de datos complejo, una de las prioridades es establecer la escala para que la visualización encaje la anchura y altura del contenedor SVG. You want all the data plotted inside the SVG so it's visible on the web page.
+Dado un conjunto de datos complejo, una de las prioridades es establecer la escala para que la visualización encaje la anchura y altura del contenedor SVG. Quieres que todos los datos trazados dentro de la SVG por lo que es visible en la página web.
El siguiente ejemplo establece la escala del eje x para datos de un diagrama de dispersión. El método `domain()` envía información a la escala sobre los valores originales de los datos para el trazado. El método `range()` le proporciona información sobre el espacio actual en la página web para la visualización.
-En el ejemplo, el dominio va de 0 al máximo en el conjunto. Utiliza el método `max()` con una función callback basada en los valores de x en los arreglos. The range uses the SVG's width (`w`), but it includes some padding, too. This puts space between the scatter plot dots and the edge of the SVG.
+En el ejemplo, el dominio va de 0 al máximo en el conjunto. Utiliza el método `max()` con una función callback basada en los valores de x en los arreglos. El rango utiliza el ancho del SVG (`w`), pero también incluye algo de relleno (padding). Esto deja espacio entre los puntos del gráfico de dispersión y el borde del SVG.
```js
const dataset = [
@@ -38,7 +38,7 @@ const xScale = d3.scaleLinear()
.range([padding, w - padding]);
```
-El padding (relleno) podría ser confuso en un principio. Picture the x-axis as a horizontal line from 0 to 500 (the width value for the SVG). Incluir el padding en el método `range()` obliga al trazado a empezar en 30 a lo largo de esa línea (en lugar de 0), y terminar en 470 (en lugar de 500).
+El padding (relleno) podría ser confuso en un principio. Imagine el eje x como una línea horizontal de 0 a 500 (el valor de anchura del SVG). Incluir el padding en el método `range()` obliga al trazado a empezar en 30 a lo largo de esa línea (en lugar de 0), y terminar en 470 (en lugar de 500).
# --instructions--
diff --git a/curriculum/challenges/espanol/04-data-visualization/json-apis-and-ajax/handle-click-events-with-javascript-using-the-onclick-property.md b/curriculum/challenges/espanol/04-data-visualization/json-apis-and-ajax/handle-click-events-with-javascript-using-the-onclick-property.md
index 4a06693c247..b56267808d1 100644
--- a/curriculum/challenges/espanol/04-data-visualization/json-apis-and-ajax/handle-click-events-with-javascript-using-the-onclick-property.md
+++ b/curriculum/challenges/espanol/04-data-visualization/json-apis-and-ajax/handle-click-events-with-javascript-using-the-onclick-property.md
@@ -16,7 +16,7 @@ document.addEventListener('DOMContentLoaded', function() {
});
```
-Puedes implementar manejadores de eventos que van dentro de la función `DOMContentLoaded`. You can implement an `onclick` event handler which triggers when the user clicks on the `#getMessage` element, by adding the following code:
+Puedes implementar manejadores de eventos que van dentro de la función `DOMContentLoaded`. Puedes implementar un manejador de eventos `onclick` cual se dispare cuando el usuario hace click en el elemento `#getMessage`, agregando el siguiente código:
```js
document.getElementById('getMessage').onclick = function(){};
@@ -28,7 +28,7 @@ Agrega un manejador de eventos de clic dentro de la función `DOMContentLoaded`
# --hints--
-Your code should use the `document.getElementById` method to select the element whose id is `getMessage`.
+Tu código debe usar el método `document.getElementById` para seleccionar el elemento cuyo id es `getMessage`.
```js
assert(code.match(/document\s*\.getElementById\(\s*?('|")getMessage\1\s*?\)/g));
diff --git a/curriculum/challenges/espanol/06-quality-assurance/advanced-node-and-express/implementation-of-social-authentication.md b/curriculum/challenges/espanol/06-quality-assurance/advanced-node-and-express/implementation-of-social-authentication.md
index a1c35075dac..907ededb186 100644
--- a/curriculum/challenges/espanol/06-quality-assurance/advanced-node-and-express/implementation-of-social-authentication.md
+++ b/curriculum/challenges/espanol/06-quality-assurance/advanced-node-and-express/implementation-of-social-authentication.md
@@ -10,15 +10,15 @@ dashedName: implementation-of-social-authentication
La ruta básica que seguirá este tipo de autenticación en tu aplicación es:
-1. User clicks a button or link sending them to your route to authenticate using a specific strategy (e.g. GitHub).
+1. El usuario hace clic en un botón o enlace que le envía a tu ruta para autenticarte utilizando una estrategia específica (por ejemplo, GitHub).
2. Tu ruta llama a `passport.authenticate('github')` que los redirige a GitHub.
-3. La página en la que aterriza el usuario, en GitHub, le permite iniciar sesión si aún no lo ha hecho. It then asks them to approve access to their profile from your app.
-4. The user is then returned to your app at a specific callback url with their profile if they are approved.
+3. La página en la que aterriza el usuario, en GitHub, le permite iniciar sesión si aún no lo ha hecho. A continuación, les pides que aprueben el acceso a su perfil desde tu aplicación.
+4. A continuación, el usuario es devuelto a tu aplicación en una url callback específica con su perfil si es aprobado.
5. Ahora están autentificados, y tu aplicación debe comprobar si es un perfil que vuelve, o guardarlo en tu base de datos si no lo es.
-Las estrategias con OAuth requieren que tengas al menos un *Client ID* y un *Client Secret* que es una forma de que el servicio verifique de quién viene la solicitud de autentificación y si es válida. Estos se obtienen del sitio con el que intentas implementar la autentificación, como GitHub, y son únicos para tu aplicación: **NO SE DEBEN COMPARTIR** y nunca deben subirse a un repositorio público ni escribirse directamente en tu código. Una práctica común es ponerlos en tu archivo `.env` y referenciarlos así: `process.env.GITHUB_CLIENT_ID`. For this challenge you are going to use the GitHub strategy.
+Las estrategias con OAuth requieren que tengas al menos un *Client ID* y un *Client Secret* que es una forma de que el servicio verifique de quién viene la solicitud de autentificación y si es válida. Estos se obtienen del sitio con el que intentas implementar la autentificación, como GitHub, y son únicos para tu aplicación: **NO SE DEBEN COMPARTIR** y nunca deben subirse a un repositorio público ni escribirse directamente en tu código. Una práctica común es ponerlos en tu archivo `.env` y referenciarlos así: `process.env.GITHUB_CLIENT_ID`. Para este reto vas a utilizar la estrategia de GitHub.
-Follow these instructions to obtain your *Client ID and Secret* from GitHub. Set the homepage URL to your Replit homepage (**not the project code's URL**), and set the callback URL to the same homepage URL with `/auth/github/callback` appended to the end. Save the client ID and your client secret in your project's `.env` file as `GITHUB_CLIENT_ID` and `GITHUB_CLIENT_SECRET`.
+Sigue estas instrucciones para obtener tu *ID de cliente y secreto* de GitHub. Establece la URL de la página de inicio en tu página de inicio de Replit (**no la URL del código del proyecto**), y establece la URL callback en la misma URL de la página de inicio con `/auth/github/callback` añadido al final. Guarda el ID de cliente y tu secreto de cliente en el archivo `.env` de tu proyecto como `GITHUB_CLIENT_ID` y `GITHUB_CLIENT_SECRET`.
In your `routes.js` file, add `showSocialAuth: true` to the homepage route, after `showRegistration: true`. Now, create 2 routes accepting GET requests: `/auth/github` and `/auth/github/callback`. The first should only call passport to authenticate `'github'`. The second should call passport to authenticate `'github'` with a failure redirect to `/`, and then if that is successful redirect to `/profile` (similar to your last project).
diff --git a/curriculum/challenges/ukrainian/02-javascript-algorithms-and-data-structures/basic-javascript/accessing-object-properties-with-bracket-notation.md b/curriculum/challenges/ukrainian/02-javascript-algorithms-and-data-structures/basic-javascript/accessing-object-properties-with-bracket-notation.md
index d393dc734f9..6d83b75ed6c 100644
--- a/curriculum/challenges/ukrainian/02-javascript-algorithms-and-data-structures/basic-javascript/accessing-object-properties-with-bracket-notation.md
+++ b/curriculum/challenges/ukrainian/02-javascript-algorithms-and-data-structures/basic-javascript/accessing-object-properties-with-bracket-notation.md
@@ -37,7 +37,7 @@ myObj["NoSpace"];
# --hints--
-`entreeValue` повинен бути рядком
+`entreeValue` має бути рядком
```js
assert(typeof entreeValue === 'string');
@@ -49,7 +49,7 @@ assert(typeof entreeValue === 'string');
assert(entreeValue === 'hamburger');
```
-`drinkValue` повинне бути рядком
+`drinkValue` має бути рядком
```js
assert(typeof drinkValue === 'string');
diff --git a/curriculum/challenges/ukrainian/02-javascript-algorithms-and-data-structures/basic-javascript/accessing-object-properties-with-dot-notation.md b/curriculum/challenges/ukrainian/02-javascript-algorithms-and-data-structures/basic-javascript/accessing-object-properties-with-dot-notation.md
index 18d52338c55..25bd3b87e5f 100644
--- a/curriculum/challenges/ukrainian/02-javascript-algorithms-and-data-structures/basic-javascript/accessing-object-properties-with-dot-notation.md
+++ b/curriculum/challenges/ukrainian/02-javascript-algorithms-and-data-structures/basic-javascript/accessing-object-properties-with-dot-notation.md
@@ -33,7 +33,7 @@ const prop2val = myObj.prop2;
# --hints--
-`hatValue` повинен бути рядком
+`hatValue` має бути рядком
```js
assert(typeof hatValue === 'string');
@@ -45,7 +45,7 @@ assert(typeof hatValue === 'string');
assert(hatValue === 'ballcap');
```
-`shirtValue` повинен бути рядком
+`shirtValue` має бути рядком
```js
assert(typeof shirtValue === 'string');