chore(i18n,learn): processed translations (#41387)
* chore(i8n,learn): processed translations * fix: remove extra space Co-authored-by: Nicholas Carrigan (he/him) <nhcarrigan@gmail.com> Co-authored-by: Crowdin Bot <support+bot@crowdin.com> Co-authored-by: Randell Dawson <5313213+RandellDawson@users.noreply.github.com> Co-authored-by: Nicholas Carrigan (he/him) <nhcarrigan@gmail.com>
This commit is contained in:
camperbot
GitHub
@ -21,13 +21,13 @@ CSS 的 class 具有可重用性，可应用于各种 HTML 元素。
|
||||
</style>
|
||||
```
|
||||
|
||||
可以看到，我们在 `<style>` 样式声明区域里，创建了一个名为 `blue-text` 的 `class` 选择器。 你可以将一个 class 添加到一个 HTML 元素里，如下所示：`<h2 class="blue-text">CatPhotoApp</h2>`。注意在 CSS `style` 里，class 名称以一个句点开始。 而在 HTML 元素的 class 属性中，名称前面没有句点。
|
||||
可以看到，我们在 `<style>` 样式声明区域里，创建了一个名为 `blue-text` 的 `class` 选择器。 你可以这样将 class 应用于 HTML 元素：`<h2 class="blue-text">CatPhotoApp</h2>`。 注意在 CSS `style` 元素里，class 名以一个句点开头。 在 HTML 元素的 class 属性中，class 名的开头没有句点。
|
||||
|
||||
# --instructions--
|
||||
|
||||
在 `style` 样式声明里，把 `h2` 元素选择器改为 `.red-text` class 选择器，同时将颜色 `blue` 改为 `red`。
|
||||
|
||||
把 `h2` 元素的 `class` 属性值设置为 `'red-text'`。
|
||||
给 `h2` 元素设置一个值为 `red-text` 的 `class` 属性。
|
||||
|
||||
# --hints--
|
||||
|
||||
|
||||
@ -25,7 +25,7 @@ dashedName: multiply-two-decimals-with-javascript
|
||||
assert(product === 5.0);
|
||||
```
|
||||
|
||||
要使用`*`运算符。
|
||||
要使用 `*` 运算符。
|
||||
|
||||
```js
|
||||
assert(/\*/.test(code));
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
---
|
||||
id: bd7158d8c442eddfaeb5bd13
|
||||
title: Build a Random Quote Machine
|
||||
title: 构建一个随机引语生成器
|
||||
challengeType: 3
|
||||
forumTopicId: 301374
|
||||
dashedName: build-a-random-quote-machine
|
||||
@ -8,39 +8,39 @@ dashedName: build-a-random-quote-machine
|
||||
|
||||
# --description--
|
||||
|
||||
**Objective:** Build a [CodePen.io](https://codepen.io) app that is functionally similar to this: <https://codepen.io/freeCodeCamp/full/qRZeGZ>.
|
||||
**目标：** 在 [CodePen.io](https://codepen.io) 上实现一个功能类似 <https://codepen.io/freeCodeCamp/full/qRZeGZ> 的 App。
|
||||
|
||||
Fulfill the below [user stories](https://en.wikipedia.org/wiki/User_story) and get all of the tests to pass. Give it your own personal style.
|
||||
在满足以下[需求](https://en.wikipedia.org/wiki/User_story)并能通过所有测试的前提下， 可以根据自己的喜好来美化 app。
|
||||
|
||||
You can use any mix of HTML, JavaScript, CSS, Bootstrap, SASS, React, Redux, and jQuery to complete this project. You should use a frontend framework (like React for example) because this section is about learning frontend frameworks. Additional technologies not listed above are not recommended and using them is at your own risk. We are looking at supporting other frontend frameworks like Angular and Vue, but they are not currently supported. We will accept and try to fix all issue reports that use the suggested technology stack for this project. Happy coding!
|
||||
可以使用 HTML、JavaScript、CSS、Bootstrap、SASS、React、Redux、jQuery 来完成这个挑战。 但鉴于这个章节的学习内容与前端框架相关，推荐使用一款前端框架（比如 React）来完成这个挑战。 不推荐使用前面没有提到的技术，否则风险自担。 我们有计划新增其他前端框架课程，例如 Angular 和 Vue，不过目前还没有这些内容。 我们会接受并尝试修复使用推荐技术栈遇到的反馈问题。 编码愉快！
|
||||
|
||||
**User Story #1:** I can see a wrapper element with a corresponding `id="quote-box"`.
|
||||
**需求 1：** 应该能看到一个具有 `id="quote-box"` 属性的包裹元素。
|
||||
|
||||
**User Story #2:** Within `#quote-box`, I can see an element with a corresponding `id="text"`.
|
||||
**需求 2：** 在 `#quote-box` 元素内，应该能看到一个具有 `id="text"` 属性的元素。
|
||||
|
||||
**User Story #3:** Within `#quote-box`, I can see an element with a corresponding `id="author"`.
|
||||
**需求 3：** 在 `#quote-box` 元素内，应该能看到一个具有 `id="author"` 属性的元素。
|
||||
|
||||
**User Story #4:** Within `#quote-box`, I can see a clickable element with a corresponding `id="new-quote"`.
|
||||
**需求 4：** 在 `#quote-box` 元素内，应该能看到一个具有 `id="new-quote"` 属性的可点击元素。
|
||||
|
||||
**User Story #5:** Within `#quote-box`, I can see a clickable `a` element with a corresponding `id="tweet-quote"`.
|
||||
**需求 5：** 在 `#quote-box` 元素内，应该能看到一个具有 `id="tweet-quote"` 属性的可点击 `a` 元素。
|
||||
|
||||
**User Story #6:** On first load, my quote machine displays a random quote in the element with `id="text"`.
|
||||
**需求 6：** 首次加载时，App 应该在具有 `id="text"` 属性的元素内展示一条随机引语。
|
||||
|
||||
**User Story #7:** On first load, my quote machine displays the random quote's author in the element with `id="author"`.
|
||||
**需求 7：** 首次加载时，App 应该在具有 `id="author"` 属性的元素内展示该条随机引语的作者。
|
||||
|
||||
**User Story #8:** When the `#new-quote` button is clicked, my quote machine should fetch a new quote and display it in the `#text` element.
|
||||
**需求 8：** 当点击具有 `#new-quote` 属性的按钮时，App 应该得到一条新的引语并在具有 `#text` 属性的元素内展示出来。
|
||||
|
||||
**User Story #9:** My quote machine should fetch the new quote's author when the `#new-quote` button is clicked and display it in the `#author` element.
|
||||
**需求 9：** 当点击具有 `#new-quote` 属性的按钮时，App 应该得到新引语的作者并在具有 `#author` 属性的元素内展示出来。
|
||||
|
||||
**User Story #10:** I can tweet the current quote by clicking on the `#tweet-quote``a` element. This `a` element should include the `"twitter.com/intent/tweet"` path in its `href` attribute to tweet the current quote.
|
||||
**需求 10：** 可以通过点击具有 `#tweet-quote` 属性的 `a` 标签将当前引语发送到推特。 该 `a` 标签的 `href` 属性应该是 `"twitter.com/intent/tweet"`，以便成功发送。
|
||||
|
||||
**User Story #11:** The `#quote-box` wrapper element should be horizontally centered. Please run tests with browser's zoom level at 100% and page maximized.
|
||||
**需求 11：** 具有 `#quote-box` 属性的包裹元素应该水平居中。 请在浏览器缩放尺寸为 100% 且页面窗口最大化时运行测试。
|
||||
|
||||
You can build your project by forking [this CodePen pen](https://codepen.io/freeCodeCamp/pen/MJjpwO). Or you can use this CDN link to run the tests in any environment you like: `https://cdn.freecodecamp.org/testable-projects-fcc/v1/bundle.js`
|
||||
可以 fork [这个 CodePen 项目](https://codepen.io/freeCodeCamp/pen/MJjpwO)来构建项目。 或者可以在任何喜欢的环境中使用以下 CDN 链接来运行测试：`https://cdn.freecodecamp.org/testable-projects-fcc/v1/bundle.js`。
|
||||
|
||||
Once you're done, submit the URL to your working project with all its tests passing.
|
||||
一旦完成了本项目并且该项目所有测试运行通过，请提交项目的 URL。
|
||||
|
||||
**Note:** Twitter does not allow links to be loaded in an iframe. Try using the `target="_blank"` or `target="_top"` attribute on the `#tweet-quote` element if your tweet won't load. `target="_top"` will replace the current tab so make sure your work is saved.
|
||||
**注意：** Twitter 不允许在 iframe 里加载链接。 如果 tweet 不能加载，尝试在 `#tweet-quote` 元素上使用 `target="_blank"` 或者 `target="_top"` 属性。 `target="_top"` 会替换当前 tab 页的内容，所以确保当前内容已经保存了。
|
||||
|
||||
# --solutions--
|
||||
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
---
|
||||
id: 5a24c314108439a4d4036159
|
||||
title: Use the Spread Operator on Arrays
|
||||
title: 在数组中使用扩展运算符
|
||||
challengeType: 6
|
||||
forumTopicId: 301452
|
||||
dashedName: use-the-spread-operator-on-arrays
|
||||
@ -8,19 +8,19 @@ dashedName: use-the-spread-operator-on-arrays
|
||||
|
||||
# --description--
|
||||
|
||||
One solution from ES6 to help enforce state immutability in Redux is the spread operator: `...`. The spread operator has a variety of applications, one of which is well-suited to the previous challenge of producing a new array from an existing array. This is relatively new, but commonly used syntax. For example, if you have an array `myArray` and write:
|
||||
ES6 中有助于在 Redux 中强制执行状态不变性的一个解决方案是扩展运算符：`...`。 扩展运算符具有很多的应用，其中一种非常适合通过一个已有的数组生成一个新数组。 这是相对较新的但常用的语法。 例如，如果你有一个数组 `myArray` 并写：
|
||||
|
||||
`let newArray = [...myArray];`
|
||||
|
||||
`newArray` is now a clone of `myArray`. Both arrays still exist separately in memory. If you perform a mutation like `newArray.push(5)`, `myArray` doesn't change. The `...` effectively *spreads* out the values in `myArray` into a new array. To clone an array but add additional values in the new array, you could write `[...myArray, 'new value']`. This would return a new array composed of the values in `myArray` and the string `'new value'` as the last value. The spread syntax can be used multiple times in array composition like this, but it's important to note that it only makes a shallow copy of the array. That is to say, it only provides immutable array operations for one-dimensional arrays.
|
||||
`newArray` 现在是 `myArray` 的克隆。 两个数组仍然在内存中单独存在。 如果你执行像 `newArray.push(5)` 这样的代码，`myArray` 不会改变。 `...` 有效将 `myArray` 中的值 *展开*到一个新数组中。 要克隆数组但在新数组中添加其他值，可以编写 `[...myArray, 'new value']`。 这将返回一个由 `myArray` 中的值和字符串 `new value` （作为最后一个值）组成的新数组。 扩展语法可以像这样在数组组合中多次使用，但重要的是要注意它只做一个浅拷贝。 这就是说，它只为一维数组提供了不可变的数组操作。
|
||||
|
||||
# --instructions--
|
||||
|
||||
Use the spread operator to return a new copy of state when a to-do is added.
|
||||
添加待办事项时，使用 spread 运算符返回新的状态副本。
|
||||
|
||||
# --hints--
|
||||
|
||||
The Redux store should exist and initialize with a state equal to `[Do not mutate state!]`.
|
||||
Redux store 应该在代码编辑器中存在并使用 `["Do not mutate state!"]` 进行状态初始化。
|
||||
|
||||
```js
|
||||
assert(
|
||||
@ -34,13 +34,13 @@ assert(
|
||||
);
|
||||
```
|
||||
|
||||
`addToDo` and `immutableReducer` both should be functions.
|
||||
`addToDo`和`immutableReducer`都应该是一个函数。
|
||||
|
||||
```js
|
||||
assert(typeof addToDo === 'function' && typeof immutableReducer === 'function');
|
||||
```
|
||||
|
||||
Dispatching an action of type `ADD_TO_DO` on the Redux store should add a `todo` item and should NOT mutate state.
|
||||
在 Redux store 上 dispatch 一个类型为`ADD_TO_DO` aciton 应该添加一个`todo`项，并且不应该改变 state。
|
||||
|
||||
```js
|
||||
assert(
|
||||
@ -55,7 +55,7 @@ assert(
|
||||
);
|
||||
```
|
||||
|
||||
The spread operator should be used to return new state.
|
||||
应使用扩展运算符返回新的 state。
|
||||
|
||||
```js
|
||||
(getUserInput) => assert(getUserInput('index').includes('...state'));
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
---
|
||||
id: 5a24c314108439a4d4036157
|
||||
title: Write a Counter with Redux
|
||||
title: 用 Redux 写一个计数器
|
||||
challengeType: 6
|
||||
forumTopicId: 301453
|
||||
dashedName: write-a-counter-with-redux
|
||||
@ -8,33 +8,33 @@ dashedName: write-a-counter-with-redux
|
||||
|
||||
# --description--
|
||||
|
||||
Now you've learned all the core principles of Redux! You've seen how to create actions and action creators, create a Redux store, dispatch your actions against the store, and design state updates with pure reducers. You've even seen how to manage complex state with reducer composition and handle asynchronous actions. These examples are simplistic, but these concepts are the core principles of Redux. If you understand them well, you're ready to start building your own Redux app. The next challenges cover some of the details regarding `state` immutability, but first, here's a review of everything you've learned so far.
|
||||
现在已经了解了 Redux 的所有核心原则！ 已经了解了如何创建 action 和 action creator，创建 Redux store，通过 store dispatch action，以及使用纯粹的 reducer 设计状态更新。 甚至已经看到过如何使用 reducer 组合管理复杂状态并处理异步操作。 这些例子很简单，但这些概念是 Redux 的核心原则。 如果已经理解这些，那么就可以开始构建自己的 Redux 应用了。 接下来的挑战包括关于 `state` 不变性的一些细节，但是，这里是对到目前为止学到的所有内容的回顾。
|
||||
|
||||
# --instructions--
|
||||
|
||||
In this lesson, you'll implement a simple counter with Redux from scratch. The basics are provided in the code editor, but you'll have to fill in the details! Use the names that are provided and define `incAction` and `decAction` action creators, the `counterReducer()`, `INCREMENT` and `DECREMENT` action types, and finally the Redux `store`. Once you're finished you should be able to dispatch `INCREMENT` or `DECREMENT` actions to increment or decrement the state held in the `store`. Good luck building your first Redux app!
|
||||
在本课程中，将从头开始使用 Redux 实现一个简单的计数器。 基本知识在代码编辑器中提供，但你必须完成细节！ 使用提供的名称定义 `incAction` 和 `decAction` action creator，`counterReducer()`，`INCREMENT`和`DECREMENT` action 类型，以及 Redux `store`。 一旦完成，应该能够 dispatch `INCREMENT` 或 `DECREMENT` 动作来增加或减少 `store` 中保存的状态。 开始构建你的第一个 Redux 应用程序吧，编码愉快！
|
||||
|
||||
# --hints--
|
||||
|
||||
The action creator `incAction` should return an action object with `type` equal to the value of `INCREMENT`
|
||||
action creator `incAction` 应该返回一个 `type` 等于 `INCREMENT` 的 action 对象。
|
||||
|
||||
```js
|
||||
assert(incAction().type === INCREMENT);
|
||||
```
|
||||
|
||||
The action creator `decAction` should return an action object with `type` equal to the value of `DECREMENT`
|
||||
action creator `decAction` 应该返回一个 `type` 等于 `DECREMENT` 的 action 对象。
|
||||
|
||||
```js
|
||||
assert(decAction().type === DECREMENT);
|
||||
```
|
||||
|
||||
The Redux store should initialize with a `state` of 0.
|
||||
Redux store 应该将 `state` 初始化为 0。
|
||||
|
||||
```js
|
||||
assert(store.getState() === 0);
|
||||
```
|
||||
|
||||
Dispatching `incAction` on the Redux store should increment the `state` by 1.
|
||||
在 Redux store 上 dispatch `incAction` 应该将 `state` 增加 1。
|
||||
|
||||
```js
|
||||
assert(
|
||||
@ -47,7 +47,7 @@ assert(
|
||||
);
|
||||
```
|
||||
|
||||
Dispatching `decAction` on the Redux store should decrement the `state` by 1.
|
||||
在 Redux store 上 dispatch `decAction` 应该将 `state` 减少 1。
|
||||
|
||||
```js
|
||||
assert(
|
||||
@ -60,7 +60,7 @@ assert(
|
||||
);
|
||||
```
|
||||
|
||||
`counterReducer` should be a function
|
||||
`counterReducer` 必须是一个函数。
|
||||
|
||||
```js
|
||||
assert(typeof counterReducer === 'function');
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
---
|
||||
id: 587d7dbf367417b2b2512bbb
|
||||
title: Apply a Style Until a Condition is Met with @while
|
||||
title: 使用 @while 循环创建样式
|
||||
challengeType: 0
|
||||
forumTopicId: 301454
|
||||
dashedName: apply-a-style-until-a-condition-is-met-with-while
|
||||
@ -8,9 +8,9 @@ dashedName: apply-a-style-until-a-condition-is-met-with-while
|
||||
|
||||
# --description--
|
||||
|
||||
The `@while` directive is an option with similar functionality to the JavaScript `while` loop. It creates CSS rules until a condition is met.
|
||||
Sass 中的 `@while` 指令与 JavaScript 中的 `while` 类似。 只要满足条件，它就会一直创建 CSS 代码。
|
||||
|
||||
The `@for` challenge gave an example to create a simple grid system. This can also work with `@while`.
|
||||
`@for` 挑战提供了一个创建简单网格系统的示例。 用 `@while` 也可以实现。
|
||||
|
||||
```scss
|
||||
$x: 1;
|
||||
@ -20,59 +20,59 @@ $x: 1;
|
||||
}
|
||||
```
|
||||
|
||||
First, define a variable `$x` and set it to 1. Next, use the `@while` directive to create the grid system *while* `$x` is less than 13. After setting the CSS rule for `width`, `$x` is incremented by 1 to avoid an infinite loop.
|
||||
首先，定义变量 `$x` 并将其设置为 1。 接下来，使用 `@while` 指令，*while* `$x` 小于 13 时创建网格系统 。 在设置 `width` 的 CSS 规则后，`$x` 增加 1 以避免无限循环。
|
||||
|
||||
# --instructions--
|
||||
|
||||
Use `@while` to create a series of classes with different `font-sizes`.
|
||||
使用 `@while` 创建一系列具有不同 `font-sizes` 的 class。
|
||||
|
||||
There should be 5 different classes from `text-1` to `text-5`. Then set `font-size` to `15px` multiplied by the current index number. Make sure to avoid an infinite loop!
|
||||
从 `text-1` 到 `text-5` 应该有 5 个不同的 class。 然后将 `font-size` 设置为 `15px` 乘以当前索引号。 注意不要写成死循环！
|
||||
|
||||
# --hints--
|
||||
|
||||
Your code should use the `@while` directive.
|
||||
代码应使用 `@while` 指令。
|
||||
|
||||
```js
|
||||
assert(code.match(/@while /g));
|
||||
```
|
||||
|
||||
Your code should use an index variable which starts at an index of 1.
|
||||
代码应将开始索引变量设置为 1 。
|
||||
|
||||
```js
|
||||
assert(code.match(/\$.*:\s*?1;/gi));
|
||||
```
|
||||
|
||||
Your code should increment the counter variable.
|
||||
代码应该递增计数器变量。
|
||||
|
||||
```js
|
||||
assert(code.match(/\$(.*)\s*?:\s*\$\1\s*\+\s*1\s*;/gi));
|
||||
```
|
||||
|
||||
Your `.text-1` class should have a `font-size` of 15px.
|
||||
`.text-1` class 的 `font-size` 应为 `15px`。
|
||||
|
||||
```js
|
||||
assert($('.text-1').css('font-size') == '15px');
|
||||
```
|
||||
|
||||
Your `.text-2` class should have a `font-size` of 30px.
|
||||
`.text-2` class 的 `font-size` 应为 `30px`。
|
||||
|
||||
```js
|
||||
assert($('.text-2').css('font-size') == '30px');
|
||||
```
|
||||
|
||||
Your `.text-3` class should have a `font-size` of 45px.
|
||||
`.text-3` class 的 `font-size` 应为 `45px`。
|
||||
|
||||
```js
|
||||
assert($('.text-3').css('font-size') == '45px');
|
||||
```
|
||||
|
||||
Your `.text-4` class should have a `font-size` of 60px.
|
||||
`.text-4` class 的 `font-size` 应为 `60px`。
|
||||
|
||||
```js
|
||||
assert($('.text-4').css('font-size') == '60px');
|
||||
```
|
||||
|
||||
Your `.text-5` class should have a `font-size` of 75px.
|
||||
`.text-5` class 的 `font-size` 应为 `75px`。
|
||||
|
||||
```js
|
||||
assert($('.text-5').css('font-size') == '75px');
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
---
|
||||
id: 587d7dbd367417b2b2512bb6
|
||||
title: Create Reusable CSS with Mixins
|
||||
title: 用 Mixins 创建可重用 CSS
|
||||
challengeType: 0
|
||||
forumTopicId: 301455
|
||||
dashedName: create-reusable-css-with-mixins
|
||||
@ -8,9 +8,9 @@ dashedName: create-reusable-css-with-mixins
|
||||
|
||||
# --description--
|
||||
|
||||
In Sass, a <dfn>mixin</dfn> is a group of CSS declarations that can be reused throughout the style sheet.
|
||||
在 Sass 中，<dfn>mixin</dfn> 是一组 CSS 声明，可以在整个样式表中重复使用。
|
||||
|
||||
Newer CSS features take time before they are fully adopted and ready to use in all browsers. As features are added to browsers, CSS rules using them may need vendor prefixes. Consider "box-shadow":
|
||||
CSS 的新功能需要一段时间适配后，所有浏览器后才能完全使用。 随着浏览器的不断升级，使用这些 CSS 规则时可能需要添加浏览器前缀。 考虑 `box-shadow`：
|
||||
|
||||
```scss
|
||||
div {
|
||||
@ -21,7 +21,7 @@ div {
|
||||
}
|
||||
```
|
||||
|
||||
It's a lot of typing to re-write this rule for all the elements that have a `box-shadow`, or to change each value to test different effects. Mixins are like functions for CSS. Here is how to write one:
|
||||
对于所有具有 `box-shadow` 属性的元素重写此规则，或者更改每个值以测试不同的效果，需要花费大量的精力。 Mixins 就像 CSS 的函数。 以下是一个例子：
|
||||
|
||||
```scss
|
||||
@mixin box-shadow($x, $y, $blur, $c){
|
||||
@ -32,7 +32,7 @@ It's a lot of typing to re-write this rule for all the elements that have a `box
|
||||
}
|
||||
```
|
||||
|
||||
The definition starts with `@mixin` followed by a custom name. The parameters (the `$x`, `$y`, `$blur`, and `$c` in the example above) are optional. Now any time a `box-shadow` rule is needed, only a single line calling the mixin replaces having to type all the vendor prefixes. A mixin is called with the `@include` directive:
|
||||
定义以 `@mixin` 开头，后跟自定义名称。 参数（`$x`，`$y`，`$blur`，以及上例中的 `$c` ）是可选的。 现在在需要 `box-shadow` 规则的地方，只需一行 mixin 调用而无需添加所有的浏览器前缀。 mixin 可以通过 `@include` 指令调用。
|
||||
|
||||
```scss
|
||||
div {
|
||||
@ -42,17 +42,17 @@ div {
|
||||
|
||||
# --instructions--
|
||||
|
||||
Write a mixin for `border-radius` and give it a `$radius` parameter. It should use all the vendor prefixes from the example. Then use the `border-radius` mixin to give the `#awesome` element a border radius of 15px.
|
||||
为 `border-radius` 写一个 mixin，并给它一个 `$radius` 参数。 应该使用之前例子中的所有浏览器前缀。 然后使用 `border-radius` mixin 为 `#awesome` 元素提供 `15px` 的边框半径。
|
||||
|
||||
# --hints--
|
||||
|
||||
Your code should declare a mixin named `border-radius` which has a parameter named `$radius`.
|
||||
应声明名为 `border-radius` 的 mixin，其中包含名为 `$radius` 的参数。
|
||||
|
||||
```js
|
||||
assert(code.match(/@mixin\s+?border-radius\s*?\(\s*?\$radius\s*?\)\s*?{/gi));
|
||||
```
|
||||
|
||||
Your code should include the `-webkit-border-radius` vendor prefix that uses the `$radius` parameter.
|
||||
应该给 `$radius` 添加 `-webkit-border-radius` 浏览器前缀。
|
||||
|
||||
```js
|
||||
assert(
|
||||
@ -60,7 +60,7 @@ assert(
|
||||
);
|
||||
```
|
||||
|
||||
Your code should include the `-moz-border-radius` vendor prefix that uses the `$radius` parameter.
|
||||
应该给 `$radius` 添加 `-moz-border-radius` 浏览器前缀。
|
||||
|
||||
```js
|
||||
assert(
|
||||
@ -68,13 +68,13 @@ assert(
|
||||
);
|
||||
```
|
||||
|
||||
Your code should include the `-ms-border-radius` vendor prefix that uses the `$radius` parameter.
|
||||
应该给 `$radius` 添加 `-ms-border-radius` 浏览器前缀。
|
||||
|
||||
```js
|
||||
assert(__helpers.removeWhiteSpace(code).match(/-ms-border-radius:\$radius;/gi));
|
||||
```
|
||||
|
||||
Your code should include the general `border-radius` rule that uses the `$radius` parameter.
|
||||
应该给 `$radius` 添加 `border-radius`。
|
||||
|
||||
```js
|
||||
assert(
|
||||
@ -83,7 +83,7 @@ assert(
|
||||
);
|
||||
```
|
||||
|
||||
Your code should call the `border-radius mixin` using the `@include` keyword, setting it to 15px.
|
||||
应使用 `@include` 关键字调用 `border-radius mixin`，并将其设置为 `15px`。
|
||||
|
||||
```js
|
||||
assert(code.match(/@include\s+?border-radius\(\s*?15px\s*?\)\s*;/gi));
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
---
|
||||
id: 587d7fa5367417b2b2512bbd
|
||||
title: Extend One Set of CSS Styles to Another Element
|
||||
title: 将一组 CSS 样式扩展到另一个元素
|
||||
challengeType: 0
|
||||
forumTopicId: 301456
|
||||
dashedName: extend-one-set-of-css-styles-to-another-element
|
||||
@ -8,9 +8,9 @@ dashedName: extend-one-set-of-css-styles-to-another-element
|
||||
|
||||
# --description--
|
||||
|
||||
Sass has a feature called `extend` that makes it easy to borrow the CSS rules from one element and build upon them in another.
|
||||
Sass 有一个名为 `extend` 的功能，可以很容易地从一个元素中借用 CSS 规则并在另一个元素上重用它们。
|
||||
|
||||
For example, the below block of CSS rules style a `.panel` class. It has a `background-color`, `height` and `border`.
|
||||
例如，下面的 CSS 规则块设置了 `.panel` class 的样式。 它有 `background-color`，`height` 和 `border`。
|
||||
|
||||
```scss
|
||||
.panel{
|
||||
@ -20,7 +20,7 @@ For example, the below block of CSS rules style a `.panel` class. It has a `back
|
||||
}
|
||||
```
|
||||
|
||||
Now you want another panel called `.big-panel`. It has the same base properties as `.panel`, but also needs a `width` and `font-size`. It's possible to copy and paste the initial CSS rules from `.panel`, but the code becomes repetitive as you add more types of panels. The `extend` directive is a simple way to reuse the rules written for one element, then add more for another:
|
||||
现在需要另一个名为 `.big-panel` 的面板。 它具有与 `.panel` 相同的基本属性，但还需要 `width` 和 `font-size`。 可以从 `.panel` 复制并粘贴初始 CSS 规则，但是当添加更多类型的面板时，代码会变得重复。 `extend` 指令是一种重用为一个元素编写的规则的简单方法，可以为另一个元素重用并添加更多规则：
|
||||
|
||||
```scss
|
||||
.big-panel{
|
||||
@ -30,15 +30,15 @@ Now you want another panel called `.big-panel`. It has the same base properties
|
||||
}
|
||||
```
|
||||
|
||||
The `.big-panel` will have the same properties as `.panel` in addition to the new styles.
|
||||
除了新样式之外，`.big-panel` 将具有与 `.panel` 相同的属性。
|
||||
|
||||
# --instructions--
|
||||
|
||||
Make a class `.info-important` that extends `.info` and also has a `background-color` set to magenta.
|
||||
创建一个扩展 `.info` 的 class `.info-important`，并将`background-color` 设置为洋红色（magenta）。
|
||||
|
||||
# --hints--
|
||||
|
||||
Your `info-important` class should have a `background-color` set to `magenta`.
|
||||
`info-important` class 应该将 `background-color` 设置为 `magenta`。
|
||||
|
||||
```js
|
||||
assert(
|
||||
@ -48,7 +48,7 @@ assert(
|
||||
);
|
||||
```
|
||||
|
||||
Your `info-important` class should use `@extend` to inherit the styling from the `info` class.
|
||||
`info-important` class 应使用 `@extend` 继承 `info` class 的样式。
|
||||
|
||||
```js
|
||||
assert(
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
---
|
||||
id: 587d7dbd367417b2b2512bb5
|
||||
title: Nest CSS with Sass
|
||||
title: 用 Sass 嵌套 CSS
|
||||
challengeType: 0
|
||||
forumTopicId: 301457
|
||||
dashedName: nest-css-with-sass
|
||||
@ -8,9 +8,9 @@ dashedName: nest-css-with-sass
|
||||
|
||||
# --description--
|
||||
|
||||
Sass allows nesting of CSS rules, which is a useful way of organizing a style sheet.
|
||||
Sass 允许 CSS 规则的嵌套，这在组织样式表的时候会很有用。
|
||||
|
||||
Normally, each element is targeted on a different line to style it, like so:
|
||||
在 CSS 里，每个元素的样式都需要写在独立的代码块中，如下所示：
|
||||
|
||||
```scss
|
||||
nav {
|
||||
@ -26,7 +26,7 @@ nav ul li {
|
||||
}
|
||||
```
|
||||
|
||||
For a large project, the CSS file will have many lines and rules. This is where nesting can help organize your code by placing child style rules within the respective parent elements:
|
||||
对于一个大型项目，CSS 规则会很复杂。 这时，引入嵌套功能（即在对应的父元素中写子元素的样式）可以有效地简化代码：
|
||||
|
||||
```scss
|
||||
nav {
|
||||
@ -45,11 +45,11 @@ nav {
|
||||
|
||||
# --instructions--
|
||||
|
||||
Use the nesting technique shown above to re-organize the CSS rules for both children of `.blog-post` element. For testing purposes, the `h1` should come before the `p` element.
|
||||
根据上面关于嵌套的例子，来简化 `.blog-post` 中两个子元素的 CSS 代码。 为了通过测试，`h1` 应该出现在 `p` 元素之前。
|
||||
|
||||
# --hints--
|
||||
|
||||
Your code should re-organize the CSS rules so the `h1` and `p` are nested in the `.blog-post` parent element.
|
||||
应重新组织 CSS 规则，以便 `h1` 和 `p` 嵌套在 `.blog-post` 父元素中。
|
||||
|
||||
```js
|
||||
assert(
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
---
|
||||
id: 587d7dbf367417b2b2512bbc
|
||||
title: Split Your Styles into Smaller Chunks with Partials
|
||||
title: 用 Partials 将样式分成小块
|
||||
challengeType: 0
|
||||
forumTopicId: 301459
|
||||
dashedName: split-your-styles-into-smaller-chunks-with-partials
|
||||
@ -8,27 +8,25 @@ dashedName: split-your-styles-into-smaller-chunks-with-partials
|
||||
|
||||
# --description--
|
||||
|
||||
<dfn>Partials</dfn> in Sass are separate files that hold segments of CSS code. These are imported and used in other Sass files. This is a great way to group similar code into a module to keep it organized.
|
||||
Sass 中的 <dfn>Partials</dfn> 是包含 CSS 代码段的单独的文件。 这些片段可以导入其它 Sass 文件使用。 可以把类似代码放到模块中，以保持代码结构规整且易于管理。
|
||||
|
||||
Names for partials start with the underscore (`_`) character, which tells Sass it is a small segment of CSS and not to convert it into a CSS file. Also, Sass files end with the `.scss` file extension. To bring the code in the partial into another Sass file, use the `@import` directive.
|
||||
partials 的名称以下划线（`_`）字符开头，这样 Sass 就知道它是 CSS 的一小部分，而不会将其转换为 CSS 文件。 此外，Sass 文件以 `.scss` 文件扩展名结尾。 要将 partial 中的代码放入另一个 Sass 文件中，使用 `@import` 指令。
|
||||
|
||||
For example, if all your mixins are saved in a partial named "\_mixins.scss", and they are needed in the "main.scss" file, this is how to use them in the main file:
|
||||
例如，如果所有 mixins 都保存在名为 “\_mixins.scss” 的 partial 中，并且在 “main.scss” 文件中需要它们，下面是使用方法：
|
||||
|
||||
```scss
|
||||
// In the main.scss file
|
||||
|
||||
@import 'mixins'
|
||||
```
|
||||
|
||||
Note that the underscore and file extension are not needed in the `import` statement - Sass understands it is a partial. Once a partial is imported into a file, all variables, mixins, and other code are available to use.
|
||||
请注意，`import` 语句中不需要下划线——Sass 知道它是 partial。 将 partial 导入文件后，可以使用所有变量、mixins 和其它代码。
|
||||
|
||||
# --instructions--
|
||||
|
||||
Write an `@import` statement to import a partial named `_variables.scss` into the main.scss file.
|
||||
编写 `@import` 语句，将名为 `_variables.scss` 的 partial 导入 main.scss 文件。
|
||||
|
||||
# --hints--
|
||||
|
||||
Your code should use the `@import` directive, and should not include the underscore in the file name.
|
||||
代码应使用 `@import` 指令，并且不应在文件名中包含下划线。
|
||||
|
||||
```js
|
||||
assert(code.match(/@import\s+?('|")variables\1/gi));
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
---
|
||||
id: 587d7dbd367417b2b2512bb4
|
||||
title: Store Data with Sass Variables
|
||||
title: 用 Sass 变量存储数据
|
||||
challengeType: 0
|
||||
forumTopicId: 301460
|
||||
dashedName: store-data-with-sass-variables
|
||||
@ -8,50 +8,53 @@ dashedName: store-data-with-sass-variables
|
||||
|
||||
# --description--
|
||||
|
||||
One feature of Sass that's different than CSS is it uses variables. They are declared and set to store data, similar to JavaScript.
|
||||
Sass 不同于 CSS 的一个特点是它允许使用变量。 可以在 Sass 中声明变量，并为它赋值，就像在 JavaScript 中一样。
|
||||
|
||||
In JavaScript, variables are defined using the `let` and `const` keywords. In Sass, variables start with a `$` followed by the variable name.
|
||||
在 JavaScript 中，变量是使用 `let` 和 `const` 关键字定义的。 在 Sass 中，变量以 `$` 开头的，后跟变量名。
|
||||
|
||||
Here are a couple examples:
|
||||
这里有几个例子：
|
||||
|
||||
```scss
|
||||
$main-fonts: Arial, sans-serif;
|
||||
$headings-color: green;
|
||||
```
|
||||
|
||||
//To use variables:
|
||||
并使用变量：
|
||||
|
||||
```scss
|
||||
h1 {
|
||||
font-family: $main-fonts;
|
||||
color: $headings-color;
|
||||
}
|
||||
```
|
||||
|
||||
One example where variables are useful is when a number of elements need to be the same color. If that color is changed, the only place to edit the code is the variable value.
|
||||
当需要把多个元素设置成相同颜色时，变量就会很有用。 一旦需要更改颜色，只需要改变这个变量的值就好。
|
||||
|
||||
# --instructions--
|
||||
|
||||
Create a variable `$text-color` and set it to red. Then change the value of the `color` property for the `.blog-post` and `h2` to the `$text-color` variable.
|
||||
创建一个变量 `$text-color` 并将其设置为 `red`。 然后更改 `.blog-post` 和 `h2` 的 `color` 属性的值为 `$text-color` 变量。
|
||||
|
||||
# --hints--
|
||||
|
||||
Your code should have a Sass variable declared for `$text-color` with a value of red.
|
||||
应该把 `$text-color` 声明一个值为 `red` 的 Sass 变量。
|
||||
|
||||
```js
|
||||
assert(code.match(/\$text-color:\s*?red;/g));
|
||||
```
|
||||
|
||||
Your code should use the `$text-color` variable to change the `color` for the `.blog-post` and `h2` items.
|
||||
应使用 `$text-color` 变量来更改 `.blog-post` 和 `h2` 的 `color`。
|
||||
|
||||
```js
|
||||
assert(code.match(/color:\s*?\$text-color;/g));
|
||||
```
|
||||
|
||||
Your `.blog-post` element should have a `color` of red.
|
||||
`.blog-post` 元素 `color` 应为红色。
|
||||
|
||||
```js
|
||||
assert($('.blog-post').css('color') == 'rgb(255, 0, 0)');
|
||||
```
|
||||
|
||||
Your `h2` elements should have a `color` of red.
|
||||
`h2` 元素的 `color` 应为红色。
|
||||
|
||||
```js
|
||||
assert($('h2').css('color') == 'rgb(255, 0, 0)');
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
---
|
||||
id: 587d7dbf367417b2b2512bba
|
||||
title: Use @each to Map Over Items in a List
|
||||
title: 使用 @each 遍历列表中的项目
|
||||
challengeType: 0
|
||||
forumTopicId: 301461
|
||||
dashedName: use-each-to-map-over-items-in-a-list
|
||||
@ -8,7 +8,7 @@ dashedName: use-each-to-map-over-items-in-a-list
|
||||
|
||||
# --description--
|
||||
|
||||
The last challenge showed how the `@for` directive uses a starting and ending value to loop a certain number of times. Sass also offers the `@each` directive which loops over each item in a list or map. On each iteration, the variable gets assigned to the current value from the list or map.
|
||||
上一个挑战显示了 `@for` 指令如何通过起始值和结束值循环一定次数。 Sass 还提供 `@each` 指令，该指令循环遍历列表或映射中的每个项目。 在每次迭代时，变量将从列表或映射分配给当前值。
|
||||
|
||||
```scss
|
||||
@each $color in blue, red, green {
|
||||
@ -16,7 +16,7 @@ The last challenge showed how the `@for` directive uses a starting and ending va
|
||||
}
|
||||
```
|
||||
|
||||
A map has slightly different syntax. Here's an example:
|
||||
map 的语法略有不同。 这是一个例子：
|
||||
|
||||
```scss
|
||||
$colors: (color1: blue, color2: red, color3: green);
|
||||
@ -26,7 +26,7 @@ $colors: (color1: blue, color2: red, color3: green);
|
||||
}
|
||||
```
|
||||
|
||||
Note that the `$key` variable is needed to reference the keys in the map. Otherwise, the compiled CSS would have `color1`, `color2`... in it. Both of the above code examples are converted into the following CSS:
|
||||
请注意，需要用 `$key` 变量来引用 map 中的键。 否则，编译后的 CSS 将包含 `color1`，`color2`...... 以上两个代码示例都转换为以下 CSS：
|
||||
|
||||
```scss
|
||||
.blue-text {
|
||||
@ -44,29 +44,29 @@ Note that the `$key` variable is needed to reference the keys in the map. Otherw
|
||||
|
||||
# --instructions--
|
||||
|
||||
Write an `@each` directive that goes through a list: `blue, black, red` and assigns each variable to a `.color-bg` class, where the "color" part changes for each item. Each class should set the `background-color` the respective color.
|
||||
编写一个 `@each` 指令遍历列表：`blue, black, red` ，将每个变量分配给 class 为`.color-bg` 的项目，使每个项目的 `color` 都不一样。 每个 class 都应该将 `background-color` 设置为相应的颜色。
|
||||
|
||||
# --hints--
|
||||
|
||||
Your code should use the `@each` directive.
|
||||
代码应使用 `@each` 指令。
|
||||
|
||||
```js
|
||||
assert(code.match(/@each /g));
|
||||
```
|
||||
|
||||
Your `.blue-bg` class should have a `background-color` of blue.
|
||||
`.blue-bg` class 的 `background-color` 应为蓝色。
|
||||
|
||||
```js
|
||||
assert($('.blue-bg').css('background-color') == 'rgb(0, 0, 255)');
|
||||
```
|
||||
|
||||
Your `.black-bg` class should have a `background-color` of black.
|
||||
`.black-bg` class 的 `background-color` 应为黑色。
|
||||
|
||||
```js
|
||||
assert($('.black-bg').css('background-color') == 'rgb(0, 0, 0)');
|
||||
```
|
||||
|
||||
Your `.red-bg` class should have a `background-color` of red.
|
||||
`.red-bg` class 的 `background-color` 应为红色。
|
||||
|
||||
```js
|
||||
assert($('.red-bg').css('background-color') == 'rgb(255, 0, 0)');
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
---
|
||||
id: 587d7dbe367417b2b2512bb9
|
||||
title: Use @for to Create a Sass Loop
|
||||
title: 使用 @for 创建一个 Sass 循环
|
||||
challengeType: 0
|
||||
forumTopicId: 301462
|
||||
dashedName: use-for-to-create-a-sass-loop
|
||||
@ -8,11 +8,11 @@ dashedName: use-for-to-create-a-sass-loop
|
||||
|
||||
# --description--
|
||||
|
||||
The `@for` directive adds styles in a loop, very similar to a `for` loop in JavaScript.
|
||||
可以在 Sass 中使用 `@for` 循环添加样式，它的用法和 JavaScript 中的 `for` 循环类似。
|
||||
|
||||
`@for` is used in two ways: "start through end" or "start to end". The main difference is that the "start **to** end" *excludes* the end number as part of the count, and "start **through** end" *includes* the end number as part of the count.
|
||||
`@for` 以两种方式使用：“开始 through 结束” 或 “开始 to 结束”。 主要区别在于“开始 **to** 结束”*不包括*结束数字，而“开始 **through** 结束”*包括* 结束号码。
|
||||
|
||||
Here's a start **through** end example:
|
||||
这是一个开始 **through** 结束的示例：
|
||||
|
||||
```scss
|
||||
@for $i from 1 through 12 {
|
||||
@ -20,7 +20,7 @@ Here's a start **through** end example:
|
||||
}
|
||||
```
|
||||
|
||||
The `#{$i}` part is the syntax to combine a variable (`i`) with text to make a string. When the Sass file is converted to CSS, it looks like this:
|
||||
`#{$i}` 部分是将变量（`i`）与文本组合成字符串的语法。 当 Sass 文件转换为 CSS 时，它看起来像这样：
|
||||
|
||||
```scss
|
||||
.col-1 {
|
||||
@ -38,47 +38,47 @@ The `#{$i}` part is the syntax to combine a variable (`i`) with text to make a s
|
||||
}
|
||||
```
|
||||
|
||||
This is a powerful way to create a grid layout. Now you have twelve options for column widths available as CSS classes.
|
||||
这是创建网格布局的有效方法。 现在，有了 12 个可用作 CSS class 的列宽选项。
|
||||
|
||||
# --instructions--
|
||||
|
||||
Write a `@for` directive that takes a variable `$j` that goes from 1 **to** 6.
|
||||
编写 `@for` 指令，使 `$j` 的值为从 1 到 **to** 6。
|
||||
|
||||
It should create 5 classes called `.text-1` to `.text-5` where each has a `font-size` set to 15px multiplied by the index.
|
||||
它应该创建 5 个名为 `.text-1` 到 `.text-5` 的 class，其中每个 class 的 `font-size` 设置为 15px 乘以索引。
|
||||
|
||||
# --hints--
|
||||
|
||||
Your code should use the `@for` directive.
|
||||
应使用 `@for` 指令。
|
||||
|
||||
```js
|
||||
assert(code.match(/@for /g));
|
||||
```
|
||||
|
||||
Your `.text-1` class should have a `font-size` of 15px.
|
||||
`.text-1` class 的 `font-size` 应为 15px。
|
||||
|
||||
```js
|
||||
assert($('.text-1').css('font-size') == '15px');
|
||||
```
|
||||
|
||||
Your `.text-2` class should have a `font-size` of 30px.
|
||||
`.text-2` class 的 `font-size` 应为 30px。
|
||||
|
||||
```js
|
||||
assert($('.text-2').css('font-size') == '30px');
|
||||
```
|
||||
|
||||
Your `.text-3` class should have a `font-size` of 45px.
|
||||
`.text-3` class 的 `font-size` 应为 45px。
|
||||
|
||||
```js
|
||||
assert($('.text-3').css('font-size') == '45px');
|
||||
```
|
||||
|
||||
Your `.text-4` class should have a `font-size` of 60px.
|
||||
`.text-4` class 的 `font-size` 应为 60px。
|
||||
|
||||
```js
|
||||
assert($('.text-4').css('font-size') == '60px');
|
||||
```
|
||||
|
||||
Your `.text-5` class should have a `font-size` of 75px.
|
||||
`.text-5` class 的 `font-size` 应为 75px。
|
||||
|
||||
```js
|
||||
assert($('.text-5').css('font-size') == '75px');
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
---
|
||||
id: 587d7dbe367417b2b2512bb8
|
||||
title: Use @if and @else to Add Logic To Your Styles
|
||||
title: 使用 @if 和 @else 为样式添加逻辑
|
||||
challengeType: 0
|
||||
forumTopicId: 301463
|
||||
dashedName: use-if-and-else-to-add-logic-to-your-styles
|
||||
@ -8,7 +8,7 @@ dashedName: use-if-and-else-to-add-logic-to-your-styles
|
||||
|
||||
# --description--
|
||||
|
||||
The `@if` directive in Sass is useful to test for a specific case - it works just like the `if` statement in JavaScript.
|
||||
Sass 中的 `@if` 指令对于测试特定情况非常有用——它的工作方式与 JavaScript 中的 `if` 语句类似。
|
||||
|
||||
```scss
|
||||
@mixin make-bold($bool) {
|
||||
@ -18,7 +18,7 @@ The `@if` directive in Sass is useful to test for a specific case - it works jus
|
||||
}
|
||||
```
|
||||
|
||||
And just like in JavaScript, `@else if` and `@else` test for more conditions:
|
||||
类似 JavaScript，可以在 Sass 中使用 `@else if` 和 `@else` 测试更多条件：
|
||||
|
||||
```scss
|
||||
@mixin text-effect($val) {
|
||||
@ -39,7 +39,7 @@ And just like in JavaScript, `@else if` and `@else` test for more conditions:
|
||||
|
||||
# --instructions--
|
||||
|
||||
Create a mixin called `border-stroke` that takes a parameter `$val`. The mixin should check for the following conditions using `@if`, `@else if`, and `@else`:
|
||||
创建一个名为 `border-stroke` 的 mixin，它接受一个参数 `$val`。 mixin 应使用 `@if`，`@else if` 和 `@else` 检查以下条件：
|
||||
|
||||
```scss
|
||||
light - 1px solid black
|
||||
@ -47,17 +47,17 @@ medium - 3px solid black
|
||||
heavy - 6px solid black
|
||||
```
|
||||
|
||||
If `$val` is not `light`, `medium`, or `heavy`, the border should be set to `none`.
|
||||
如果 `$val` 不是 `light`、`medium` 或者 `heavy`，border 应该设置为 `none`。
|
||||
|
||||
# --hints--
|
||||
|
||||
Your code should declare a mixin named `border-stroke` which has a parameter named `$val`.
|
||||
应该声明一个名为 `border-stroke` 的 mixin，它有一个名为 `$val` 的参数。
|
||||
|
||||
```js
|
||||
assert(code.match(/@mixin\s+?border-stroke\s*?\(\s*?\$val\s*?\)\s*?{/gi));
|
||||
```
|
||||
|
||||
Your mixin should have an `@if` statement to check if `$val` is light, and to set the `border` to 1px solid black.
|
||||
mixin 应该有一个 `@if` 语句来检查 `$val` 是否等于 `light`，并将 `border` 设置为 `1px solid black`。
|
||||
|
||||
```js
|
||||
assert(
|
||||
@ -67,7 +67,7 @@ assert(
|
||||
);
|
||||
```
|
||||
|
||||
Your mixin should have an `@else if` statement to check if `$val` is medium, and to set the `border` to 3px solid black.
|
||||
mixin 应该有一个 `@else if` 语句来检查 `$val` 是否等于 `medium`，并设置 `border` 为 `3px solid black`。
|
||||
|
||||
```js
|
||||
assert(
|
||||
@ -77,7 +77,7 @@ assert(
|
||||
);
|
||||
```
|
||||
|
||||
Your mixin should have an `@else if` statement to check if `$val` is heavy, and to set the `border` to 6px solid black.
|
||||
mixin 应该有一个 `@else if` 语句来检查 `$val` 是否等于 `heavy`，并设置 `border` 为 `3px solid black`。
|
||||
|
||||
```js
|
||||
assert(
|
||||
@ -87,7 +87,7 @@ assert(
|
||||
);
|
||||
```
|
||||
|
||||
Your mixin should have an `@else` statement to set the `border` to none.
|
||||
mixin 应该有一个 `@else` 语句来将 `border` 设置为 `none`。
|
||||
|
||||
```js
|
||||
assert(code.match(/@else\s*?{\s*?border\s*?:\s*?none\s*?;\s*?}/gi));
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
---
|
||||
id: 5a94fe0569fb03452672e45c
|
||||
title: Divide la grid en una platilla de área
|
||||
title: Divide la cuadrícula en una plantilla de área
|
||||
challengeType: 0
|
||||
videoUrl: 'https://scrimba.com/p/pByETK/cLLpGAy'
|
||||
forumTopicId: 301130
|
||||
@ -18,7 +18,7 @@ grid-template-areas:
|
||||
"footer footer footer";
|
||||
```
|
||||
|
||||
El código anterior fusiona las tres celdas superiores en una área llamada `header`, las tres celdas inferiores en una área `footer` y hace dos áreas en la fila del medio; `advert` and `content`. **Nota:** cada palabra en el código representa una celda y cada par de comillas representa una fila. Además de los nombres personalizados, puedes usar un punto (`.`) para designar una celda vacía en la grid.
|
||||
El código anterior fusiona las tres celdas superiores en una área llamada `header`, las tres celdas inferiores en una área `footer` y hace dos áreas en la fila del medio; `advert` y `content`. **Nota:** cada palabra en el código representa una celda y cada par de comillas representa una fila. Además de los nombres personalizados, puedes usar un punto (`.`) para designar una celda vacía en la grid.
|
||||
|
||||
# --instructions--
|
||||
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
---
|
||||
id: cf1111c1c11feddfaeb5bdef
|
||||
title: Iterate with JavaScript For Loops
|
||||
title: Itera con los bucles "for" de JavaScript
|
||||
challengeType: 1
|
||||
videoUrl: 'https://scrimba.com/c/c9yNVCe'
|
||||
forumTopicId: 18219
|
||||
@ -9,21 +9,21 @@ dashedName: iterate-with-javascript-for-loops
|
||||
|
||||
# --description--
|
||||
|
||||
You can run the same code multiple times by using a loop.
|
||||
Puedes ejecutar el mismo código múltiples veces usando un bucle.
|
||||
|
||||
The most common type of JavaScript loop is called a `for` loop because it runs "for" a specific number of times.
|
||||
El tipo más común de bucle de JavaScript se llama bucle `for` porque se ejecuta "por" un número específico de veces.
|
||||
|
||||
For loops are declared with three optional expressions separated by semicolons:
|
||||
Los bucles for se declaran con tres expresiones opcionales separadas por punto y coma:
|
||||
|
||||
`for ([initialization]; [condition]; [final-expression])`
|
||||
`for (a; b; c)`, donde `a` es la sentencia de inicialización, `b` es la sentencia condicional, y `c` es la expresión final.
|
||||
|
||||
The `initialization` statement is executed one time only before the loop starts. It is typically used to define and setup your loop variable.
|
||||
La sentencia de inicialización se ejecuta una sola vez antes de que el bucle comience. Normalmente se utiliza para definir y configurar tu variable de bucle.
|
||||
|
||||
The `condition` statement is evaluated at the beginning of every loop iteration and will continue as long as it evaluates to `true`. When `condition` is `false` at the start of the iteration, the loop will stop executing. This means if `condition` starts as `false`, your loop will never execute.
|
||||
La sentencia condicional es evaluada al principio de cada iteración del bucle y continuará siempre y cuando sea `true`. Cuando la condición sea `false` al inicio de la iteración, el bucle dejará de ejecutarse. Esto significa que si la condición comienza como falso, tu bucle nunca se ejecutará.
|
||||
|
||||
The `final-expression` is executed at the end of each loop iteration, prior to the next `condition` check and is usually used to increment or decrement your loop counter.
|
||||
La expresión final se ejecuta al final de cada iteración del bucle, antes de la siguiente comprobación de condición y se utiliza normalmente para incrementar o disminuir tu contador de bucle.
|
||||
|
||||
In the following example we initialize with `i = 0` and iterate while our condition `i < 5` is true. We'll increment `i` by `1` in each loop iteration with `i++` as our `final-expression`.
|
||||
En el siguiente ejemplo inicializamos con `i = 0` e iteramos mientras nuestra condición `i < 5` es verdadera. Incrementaremos `i` por `1` en cada iteración de bucle con `i++` como nuestra expresión final.
|
||||
|
||||
```js
|
||||
var ourArray = [];
|
||||
@ -32,21 +32,21 @@ for (var i = 0; i < 5; i++) {
|
||||
}
|
||||
```
|
||||
|
||||
`ourArray` will now contain `[0,1,2,3,4]`.
|
||||
`ourArray` ahora tendrá el valor `[0,1,2,3,4]`.
|
||||
|
||||
# --instructions--
|
||||
|
||||
Use a `for` loop to work to push the values 1 through 5 onto `myArray`.
|
||||
Usa un bucle `for` para empujar los valores desde el 1 al 5 en `myArray`.
|
||||
|
||||
# --hints--
|
||||
|
||||
You should be using a `for` loop for this.
|
||||
Debes usar un bucle `for` para esto.
|
||||
|
||||
```js
|
||||
assert(/for\s*\([^)]+?\)/.test(code));
|
||||
```
|
||||
|
||||
`myArray` should equal `[1,2,3,4,5]`.
|
||||
`myArray` debe ser igual a `[1,2,3,4,5]`.
|
||||
|
||||
```js
|
||||
assert.deepEqual(myArray, [1, 2, 3, 4, 5]);
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
---
|
||||
id: cf1111c1c11feddfaeb1bdef
|
||||
title: Iterate with JavaScript While Loops
|
||||
title: Itera con el bucle "while" de JavaScript
|
||||
challengeType: 1
|
||||
videoUrl: 'https://scrimba.com/c/c8QbnCM'
|
||||
forumTopicId: 18220
|
||||
@ -9,9 +9,9 @@ dashedName: iterate-with-javascript-while-loops
|
||||
|
||||
# --description--
|
||||
|
||||
You can run the same code multiple times by using a loop.
|
||||
Puedes ejecutar el mismo código múltiples veces usando un bucle.
|
||||
|
||||
The first type of loop we will learn is called a `while` loop because it runs "while" a specified condition is true and stops once that condition is no longer true.
|
||||
El primer tipo de bucle que aprenderemos se llama bucle `while` porque ejecuta una condición específica mientras esta sea verdadera, y se detiene una vez que esa condición ya no sea verdadera.
|
||||
|
||||
```js
|
||||
var ourArray = [];
|
||||
@ -22,23 +22,23 @@ while(i < 5) {
|
||||
}
|
||||
```
|
||||
|
||||
In the code example above, the `while` loop will execute 5 times and append the numbers 0 through 4 to `ourArray`.
|
||||
En el ejemplo de código anterior, el bucle `while` se ejecutará 5 veces y añadirá los números de 0 a 4 a `ourArray`.
|
||||
|
||||
Let's try getting a while loop to work by pushing values to an array.
|
||||
Intentemos construir un bucle while para que funcione empujando valores a un arreglo.
|
||||
|
||||
# --instructions--
|
||||
|
||||
Add the numbers 5 through 0 (inclusive) in descending order to `myArray` using a `while` loop.
|
||||
Agrega los números de 5 a 0 (inclusivo) en orden descendente a `myArray` usando un bucle `while`.
|
||||
|
||||
# --hints--
|
||||
|
||||
You should be using a `while` loop for this.
|
||||
Debes utilizar un bucle `while` para esto.
|
||||
|
||||
```js
|
||||
assert(code.match(/while/g));
|
||||
```
|
||||
|
||||
`myArray` should equal `[5,4,3,2,1,0]`.
|
||||
`myArray` debe ser igual a `[5,4,3,2,1,0]`.
|
||||
|
||||
```js
|
||||
assert.deepEqual(myArray, [5, 4, 3, 2, 1, 0]);
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
---
|
||||
id: 56533eb9ac21ba0edf2244bf
|
||||
title: Local Scope and Functions
|
||||
title: Ámbito local y funciones
|
||||
challengeType: 1
|
||||
videoUrl: 'https://scrimba.com/c/cd62NhM'
|
||||
forumTopicId: 18227
|
||||
@ -9,30 +9,30 @@ dashedName: local-scope-and-functions
|
||||
|
||||
# --description--
|
||||
|
||||
Variables which are declared within a function, as well as the function parameters have <dfn>local</dfn> scope. That means, they are only visible within that function.
|
||||
Las variables que se declaran dentro de una función, así como los parámetros de la función tienen un ámbito <dfn>local</dfn>. Esto significa que sólo son visibles dentro de esa función.
|
||||
|
||||
Here is a function `myTest` with a local variable called `loc`.
|
||||
Esta es una función `myTest` con una variable local llamada `loc`.
|
||||
|
||||
```js
|
||||
function myTest() {
|
||||
var loc = "foo";
|
||||
console.log(loc);
|
||||
}
|
||||
myTest(); // logs "foo"
|
||||
console.log(loc); // loc is not defined
|
||||
myTest();
|
||||
console.log(loc);
|
||||
```
|
||||
|
||||
`loc` is not defined outside of the function.
|
||||
La llamada a la función `myTest()` mostrará la cadena `foo` en la consola. La línea `console.log(loc)` arrojará un error, ya que `loc` no está definida fuera de la función.
|
||||
|
||||
# --instructions--
|
||||
|
||||
The editor has two `console.log`s to help you see what is happening. Check the console as you code to see how it changes. Declare a local variable `myVar` inside `myLocalScope` and run the tests.
|
||||
El editor tiene dos `console.log`s para ayudarte a ver lo que está sucediendo. Revisa la consola a medida que programas para ver cómo cambia. Declara una variable local `myVar` dentro de `myLocalScope` y ejecuta las pruebas.
|
||||
|
||||
**Note:** The console will still have 'ReferenceError: myVar is not defined', but this will not cause the tests to fail.
|
||||
**Nota:** La consola todavía mostrará el error `ReferenceError: myVar is not defined`, pero esto no causará que las pruebas fallen.
|
||||
|
||||
# --hints--
|
||||
|
||||
The code should not contain a global `myVar` variable.
|
||||
El código no debe contener una variable global `myVar`.
|
||||
|
||||
```js
|
||||
function declared() {
|
||||
@ -41,7 +41,7 @@ function declared() {
|
||||
assert.throws(declared, ReferenceError);
|
||||
```
|
||||
|
||||
You should add a local `myVar` variable.
|
||||
Debes agregar una variable local `myVar`.
|
||||
|
||||
```js
|
||||
assert(
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
---
|
||||
id: 5690307fddb111c6084545d7
|
||||
title: Logical Order in If Else Statements
|
||||
title: Orden lógico de las sentencias "if else"
|
||||
challengeType: 1
|
||||
videoUrl: 'https://scrimba.com/c/cwNvMUV'
|
||||
forumTopicId: 18228
|
||||
@ -9,13 +9,13 @@ dashedName: logical-order-in-if-else-statements
|
||||
|
||||
# --description--
|
||||
|
||||
Order is important in `if`, `else if` statements.
|
||||
El orden es importante en las sentencias `if`, `else if`.
|
||||
|
||||
The function is executed from top to bottom so you will want to be careful of what statement comes first.
|
||||
La función se ejecuta de arriba a abajo, por lo que habrá que tener cuidado con qué sentencia va primero.
|
||||
|
||||
Take these two functions as an example.
|
||||
Tomemos como ejemplo estas dos funciones.
|
||||
|
||||
Here's the first:
|
||||
Aquí está la primera:
|
||||
|
||||
```js
|
||||
function foo(x) {
|
||||
@ -29,7 +29,7 @@ function foo(x) {
|
||||
}
|
||||
```
|
||||
|
||||
And the second just switches the order of the statements:
|
||||
Y la segunda, simplemente cambia el orden de las sentencias:
|
||||
|
||||
```js
|
||||
function bar(x) {
|
||||
@ -43,32 +43,34 @@ function bar(x) {
|
||||
}
|
||||
```
|
||||
|
||||
While these two functions look nearly identical if we pass a number to both we get different outputs.
|
||||
Mientras que estas dos funciones parecen casi idénticas, si pasamos un número a ambas, obtenemos diferentes salidas.
|
||||
|
||||
```js
|
||||
foo(0) // "Less than one"
|
||||
bar(0) // "Less than two"
|
||||
foo(0)
|
||||
bar(0)
|
||||
```
|
||||
|
||||
`foo(0)` devolverá la cadena `Less than one`, y `bar(0)` devolverá la cadena `Less than two`.
|
||||
|
||||
# --instructions--
|
||||
|
||||
Change the order of logic in the function so that it will return the correct statements in all cases.
|
||||
Cambia el orden lógico en la función para que devuelva el resultado correcto en todos los casos.
|
||||
|
||||
# --hints--
|
||||
|
||||
`orderMyLogic(4)` should return "Less than 5"
|
||||
`orderMyLogic(4)` debe devolver la cadena `Less than 5`
|
||||
|
||||
```js
|
||||
assert(orderMyLogic(4) === 'Less than 5');
|
||||
```
|
||||
|
||||
`orderMyLogic(6)` should return "Less than 10"
|
||||
`orderMyLogic(6)` debe devolver la cadena `Less than 10`
|
||||
|
||||
```js
|
||||
assert(orderMyLogic(6) === 'Less than 10');
|
||||
```
|
||||
|
||||
`orderMyLogic(11)` should return "Greater than or equal to 10"
|
||||
`orderMyLogic(11)` debe devolver la cadena `Greater than or equal to 10`
|
||||
|
||||
```js
|
||||
assert(orderMyLogic(11) === 'Greater than or equal to 10');
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
---
|
||||
id: 56bbb991ad1ed5201cd392cc
|
||||
title: Manipulate Arrays With pop()
|
||||
title: Manipula arreglos con pop()
|
||||
challengeType: 1
|
||||
videoUrl: 'https://scrimba.com/c/cRbVZAB'
|
||||
forumTopicId: 18236
|
||||
@ -9,26 +9,28 @@ dashedName: manipulate-arrays-with-pop
|
||||
|
||||
# --description--
|
||||
|
||||
Another way to change the data in an array is with the `.pop()` function.
|
||||
Otra manera de cambiar los datos en un arreglo es con la función `.pop()`.
|
||||
|
||||
`.pop()` is used to "pop" a value off of the end of an array. We can store this "popped off" value by assigning it to a variable. In other words, `.pop()` removes the last element from an array and returns that element.
|
||||
`.pop()` se utiliza para sacar un valor del final de un arreglo. Podemos almacenar este valor sacado asignándolo a una variable. En otras palabras, `.pop()` elimina el último elemento de un arreglo y devuelve ese elemento.
|
||||
|
||||
Any type of entry can be "popped" off of an array - numbers, strings, even nested arrays.
|
||||
Cualquier tipo de entrada puede ser sacada de un arreglo: números, cadenas, incluso arreglos anidados.
|
||||
|
||||
```js
|
||||
var threeArr = [1, 4, 6];
|
||||
var oneDown = threeArr.pop();
|
||||
console.log(oneDown); // Returns 6
|
||||
console.log(threeArr); // Returns [1, 4]
|
||||
console.log(oneDown);
|
||||
console.log(threeArr);
|
||||
```
|
||||
|
||||
El primer `console.log` mostrará el valor `6` y el segundo mostrará el valor `[1, 4]`.
|
||||
|
||||
# --instructions--
|
||||
|
||||
Use the `.pop()` function to remove the last item from `myArray`, assigning the "popped off" value to `removedFromMyArray`.
|
||||
Utiliza la función `.pop()` para eliminar el último elemento de `myArray`, asignando el valor sacado a `removedFromMyArray`.
|
||||
|
||||
# --hints--
|
||||
|
||||
`myArray` should only contain `[["John", 23]]`.
|
||||
`myArray` sólo debe contener `[["John", 23]]`.
|
||||
|
||||
```js
|
||||
assert(
|
||||
@ -42,13 +44,13 @@ assert(
|
||||
);
|
||||
```
|
||||
|
||||
You should use `pop()` on `myArray`.
|
||||
Debes usar `pop()` en `myArray`.
|
||||
|
||||
```js
|
||||
assert(/removedFromMyArray\s*=\s*myArray\s*.\s*pop\s*(\s*)/.test(code));
|
||||
```
|
||||
|
||||
`removedFromMyArray` should only contain `["cat", 2]`.
|
||||
`removedFromMyArray` sólo debe contener `["cat", 2]`.
|
||||
|
||||
```js
|
||||
assert(
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
---
|
||||
id: 56bbb991ad1ed5201cd392cb
|
||||
title: Manipulate Arrays With push()
|
||||
title: Manipula arreglos con push()
|
||||
challengeType: 1
|
||||
videoUrl: 'https://scrimba.com/c/cnqmVtJ'
|
||||
forumTopicId: 18237
|
||||
@ -9,29 +9,29 @@ dashedName: manipulate-arrays-with-push
|
||||
|
||||
# --description--
|
||||
|
||||
An easy way to append data to the end of an array is via the `push()` function.
|
||||
Una forma fácil de añadir datos al final de un arreglo es a través de la función `push()`.
|
||||
|
||||
`.push()` takes one or more <dfn>parameters</dfn> and "pushes" them onto the end of the array.
|
||||
`.push()` toma uno o más <dfn>parámetros</dfn> y los "empuja" al final del arreglo.
|
||||
|
||||
Examples:
|
||||
Ejemplos:
|
||||
|
||||
```js
|
||||
var arr1 = [1,2,3];
|
||||
arr1.push(4);
|
||||
// arr1 is now [1,2,3,4]
|
||||
|
||||
var arr2 = ["Stimpson", "J", "cat"];
|
||||
arr2.push(["happy", "joy"]);
|
||||
// arr2 now equals ["Stimpson", "J", "cat", ["happy", "joy"]]
|
||||
```
|
||||
|
||||
`arr1` ahora tiene el valor `[1, 2, 3, 4]` y `arr2` tiene el valor `["Stimpson", "J", "cat", ["happy", "joy"]]`.
|
||||
|
||||
# --instructions--
|
||||
|
||||
Push `["dog", 3]` onto the end of the `myArray` variable.
|
||||
Empuja `["dog", 3]` al final de la variable `myArray`.
|
||||
|
||||
# --hints--
|
||||
|
||||
`myArray` should now equal `[["John", 23], ["cat", 2], ["dog", 3]]`.
|
||||
`myArray` debe ser igual a `[["John", 23], ["cat", 2], ["dog", 3]]`.
|
||||
|
||||
```js
|
||||
assert(
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
---
|
||||
id: 56bbb991ad1ed5201cd392cd
|
||||
title: Manipulate Arrays With shift()
|
||||
title: Manipula arreglos con shift()
|
||||
challengeType: 1
|
||||
videoUrl: 'https://scrimba.com/c/cRbVETW'
|
||||
forumTopicId: 18238
|
||||
@ -9,25 +9,26 @@ dashedName: manipulate-arrays-with-shift
|
||||
|
||||
# --description--
|
||||
|
||||
`pop()` always removes the last element of an array. What if you want to remove the first?
|
||||
`pop()` siempre elimina el último elemento de un arreglo. ¿Qué tal si quieres eliminar el primero?
|
||||
|
||||
That's where `.shift()` comes in. It works just like `.pop()`, except it removes the first element instead of the last.
|
||||
Ahí es donde entra `.shift()`. Funciona igual que `.pop()`, excepto que elimina el primer elemento en lugar del último.
|
||||
|
||||
Example:
|
||||
Ejemplo:
|
||||
|
||||
```js
|
||||
var ourArray = ["Stimpson", "J", ["cat"]];
|
||||
var removedFromOurArray = ourArray.shift();
|
||||
// removedFromOurArray now equals "Stimpson" and ourArray now equals ["J", ["cat"]].
|
||||
```
|
||||
|
||||
`removedFromOurArray` tendrá una cadena con valor `Stimpson` y `ourArray` tendrá `["J", ["cat"]]`.
|
||||
|
||||
# --instructions--
|
||||
|
||||
Use the `.shift()` function to remove the first item from `myArray`, assigning the "shifted off" value to `removedFromMyArray`.
|
||||
Utiliza la función `.shift()` para eliminar el primer elemento de `myArray`, asignando el valor "desplazado" a `removedFromMyArray`.
|
||||
|
||||
# --hints--
|
||||
|
||||
`myArray` should now equal `[["dog", 3]]`.
|
||||
`myArray` debe ser igual a `[["dog", 3]]`.
|
||||
|
||||
```js
|
||||
assert(
|
||||
@ -41,7 +42,7 @@ assert(
|
||||
);
|
||||
```
|
||||
|
||||
`removedFromMyArray` should contain `["John", 23]`.
|
||||
`removedFromMyArray` debe contener `["John", 23]`.
|
||||
|
||||
```js
|
||||
assert(
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
---
|
||||
id: 56533eb9ac21ba0edf2244cb
|
||||
title: Manipulating Complex Objects
|
||||
title: Manipulando objectos complejos
|
||||
challengeType: 1
|
||||
videoUrl: 'https://scrimba.com/c/c9yNMfR'
|
||||
forumTopicId: 18208
|
||||
@ -9,9 +9,9 @@ dashedName: manipulating-complex-objects
|
||||
|
||||
# --description--
|
||||
|
||||
Sometimes you may want to store data in a flexible <dfn>Data Structure</dfn>. A JavaScript object is one way to handle flexible data. They allow for arbitrary combinations of <dfn>strings</dfn>, <dfn>numbers</dfn>, <dfn>booleans</dfn>, <dfn>arrays</dfn>, <dfn>functions</dfn>, and <dfn>objects</dfn>.
|
||||
A veces, es posible que desees almacenar datos en una <dfn>estructura de datos</dfn> flexible. Un objeto de JavaScript es una forma de manejar datos flexibles. Permiten combinaciones arbitrarias de <dfn>cadenas</dfn>, <dfn>números</dfn>, <dfn>booleanos</dfn>, <dfn>arreglos</dfn>, <dfn>funciones</dfn>, y <dfn>objetos</dfn>.
|
||||
|
||||
Here's an example of a complex data structure:
|
||||
Este es un ejemplo de una estructura de datos compleja:
|
||||
|
||||
```js
|
||||
var ourMusic = [
|
||||
@ -29,7 +29,7 @@ var ourMusic = [
|
||||
];
|
||||
```
|
||||
|
||||
This is an array which contains one object inside. The object has various pieces of <dfn>metadata</dfn> about an album. It also has a nested `"formats"` array. If you want to add more album records, you can do this by adding records to the top level array. Objects hold data in a property, which has a key-value format. In the example above, `"artist": "Daft Punk"` is a property that has a key of `"artist"` and a value of `"Daft Punk"`. [JavaScript Object Notation](http://www.json.org/) or `JSON` is a related data interchange format used to store data.
|
||||
Esto es una arreglo que contiene un objeto en su interior. El objeto tiene varias piezas de <dfn>metadatos</dfn> sobre un álbum. También tiene un arreglo anidado de `formats`. Si desea añadir más registros de álbumes, puede hacerlo añadiendo registros a la parte superior del arreglo. Los objetos almacenan datos en una propiedad, con formato clave-valor. En el ejemplo anterior, `"artist": "Daft Punk"` es una propiedad que tiene como clave `artist` y su valor es `Daft Punk`. [JavaScript Object Notation](http://www.json.org/) o `JSON` es un formato de intercambio de datos relacionado utilizado para almacenar información.
|
||||
|
||||
```json
|
||||
{
|
||||
@ -45,40 +45,39 @@ This is an array which contains one object inside. The object has various pieces
|
||||
}
|
||||
```
|
||||
|
||||
**Note**
|
||||
You will need to place a comma after every object in the array, unless it is the last object in the array.
|
||||
**Nota:** Deberás colocar una coma después de cada objeto en el arreglo, a menos que sea el último objeto.
|
||||
|
||||
# --instructions--
|
||||
|
||||
Add a new album to the `myMusic` array. Add `artist` and `title` strings, `release_year` number, and a `formats` array of strings.
|
||||
Añade un nuevo álbum al arreglo `myMusic`. Añade las cadenas `artist` y `title`, el número `release_year`, y un arreglo de cadenas `formats`.
|
||||
|
||||
# --hints--
|
||||
|
||||
`myMusic` should be an array
|
||||
`myMusic` debe ser un arreglo
|
||||
|
||||
```js
|
||||
assert(Array.isArray(myMusic));
|
||||
```
|
||||
|
||||
`myMusic` should have at least two elements
|
||||
`myMusic` debe tener al menos dos elementos
|
||||
|
||||
```js
|
||||
assert(myMusic.length > 1);
|
||||
```
|
||||
|
||||
`myMusic[1]` should be an object
|
||||
`myMusic[1]` debe ser un objeto
|
||||
|
||||
```js
|
||||
assert(typeof myMusic[1] === 'object');
|
||||
```
|
||||
|
||||
`myMusic[1]` should have at least 4 properties
|
||||
`myMusic[1]` debe tener al menos 4 propiedades
|
||||
|
||||
```js
|
||||
assert(Object.keys(myMusic[1]).length > 3);
|
||||
```
|
||||
|
||||
`myMusic[1]` should contain an `artist` property which is a string
|
||||
`myMusic[1]` debe contener una propiedad `artist` que es una cadena
|
||||
|
||||
```js
|
||||
assert(
|
||||
@ -86,7 +85,7 @@ assert(
|
||||
);
|
||||
```
|
||||
|
||||
`myMusic[1]` should contain a `title` property which is a string
|
||||
`myMusic[1]` debe contener una propiedad `title` que es una cadena
|
||||
|
||||
```js
|
||||
assert(
|
||||
@ -94,7 +93,7 @@ assert(
|
||||
);
|
||||
```
|
||||
|
||||
`myMusic[1]` should contain a `release_year` property which is a number
|
||||
`myMusic[1]` debe contener una propiedad `release_year` que es un número
|
||||
|
||||
```js
|
||||
assert(
|
||||
@ -103,7 +102,7 @@ assert(
|
||||
);
|
||||
```
|
||||
|
||||
`myMusic[1]` should contain a `formats` property which is an array
|
||||
`myMusic[1]` debe contener una propiedad `formats` que es un arreglo
|
||||
|
||||
```js
|
||||
assert(
|
||||
@ -111,7 +110,7 @@ assert(
|
||||
);
|
||||
```
|
||||
|
||||
`formats` should be an array of strings with at least two elements
|
||||
`formats` debe ser un arreglo de cadenas con al menos dos elementos
|
||||
|
||||
```js
|
||||
assert(
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
---
|
||||
id: cf1111c1c11feddfaeb8bdef
|
||||
title: Modify Array Data With Indexes
|
||||
title: Modifica los datos de un arreglo con índices
|
||||
challengeType: 1
|
||||
videoUrl: 'https://scrimba.com/c/czQM4A8'
|
||||
forumTopicId: 18241
|
||||
@ -9,25 +9,26 @@ dashedName: modify-array-data-with-indexes
|
||||
|
||||
# --description--
|
||||
|
||||
Unlike strings, the entries of arrays are <dfn>mutable</dfn> and can be changed freely.
|
||||
A diferencia de las cadenas, las entradas de los arreglos son <dfn>mutables</dfn> y pueden cambiarse libremente.
|
||||
|
||||
**Example**
|
||||
**Ejemplo**
|
||||
|
||||
```js
|
||||
var ourArray = [50,40,30];
|
||||
ourArray[0] = 15; // equals [15,40,30]
|
||||
ourArray[0] = 15;
|
||||
```
|
||||
|
||||
**Note**
|
||||
There shouldn't be any spaces between the array name and the square brackets, like `array [0]`. Although JavaScript is able to process this correctly, this may confuse other programmers reading your code.
|
||||
`ourArray` ahora tiene el valor `[15, 40, 30]`.
|
||||
|
||||
**Nota:** No debe haber espacios entre el nombre del arreglo y los corchetes, como `array [0]`. Aunque JavaScript pueda procesar esto correctamente, puedes confundir a otros programadores al leer tu código.
|
||||
|
||||
# --instructions--
|
||||
|
||||
Modify the data stored at index `0` of `myArray` to a value of `45`.
|
||||
Modifica los datos almacenados en el índice `0` de `myArray` a un valor de `45`.
|
||||
|
||||
# --hints--
|
||||
|
||||
`myArray` should now be [45,64,99].
|
||||
`myArray` ahora debe ser `[45,64,99]`.
|
||||
|
||||
```js
|
||||
assert(
|
||||
@ -46,7 +47,7 @@ assert(
|
||||
);
|
||||
```
|
||||
|
||||
You should be using correct index to modify the value in `myArray`.
|
||||
Debes usar el índice correcto para modificar el valor en `myArray`.
|
||||
|
||||
```js
|
||||
assert(
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
---
|
||||
id: bd7993c9c69feddfaeb7bdef
|
||||
title: Multiply Two Decimals with JavaScript
|
||||
title: Multiplica dos números decimales con JavaScript
|
||||
challengeType: 1
|
||||
videoUrl: 'https://scrimba.com/c/ce2GeHq'
|
||||
forumTopicId: 301173
|
||||
@ -9,23 +9,23 @@ dashedName: multiply-two-decimals-with-javascript
|
||||
|
||||
# --description--
|
||||
|
||||
In JavaScript, you can also perform calculations with decimal numbers, just like whole numbers.
|
||||
En JavaScript, también puedes realizar cálculos con números decimales, al igual que con números enteros.
|
||||
|
||||
Let's multiply two decimals together to get their product.
|
||||
Multipliquemos dos números decimales para obtener su producto.
|
||||
|
||||
# --instructions--
|
||||
|
||||
Change the `0.0` so that product will equal `5.0`.
|
||||
Cambia el `0.0` para que el producto sea igual a `5.0`.
|
||||
|
||||
# --hints--
|
||||
|
||||
The variable `product` should equal `5.0`.
|
||||
La variable `product` debe ser igual a `5.0`.
|
||||
|
||||
```js
|
||||
assert(product === 5.0);
|
||||
```
|
||||
|
||||
You should use the `*` operator
|
||||
Debes utilizar el operador `*`
|
||||
|
||||
```js
|
||||
assert(/\*/.test(code));
|
||||
|
||||
@ -16,9 +16,11 @@ JavaScript utiliza el símbolo `*` para multiplicar dos números.
|
||||
**Ejemplo**
|
||||
|
||||
```js
|
||||
myVar = 13 * 13; // assigned 169
|
||||
myVar = 13 * 13;
|
||||
```
|
||||
|
||||
`myVar` ahora tendrá el valor `169`.
|
||||
|
||||
# --instructions--
|
||||
|
||||
Cambia el `0` para que el producto sea igual a `80`.
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
---
|
||||
id: 56533eb9ac21ba0edf2244e1
|
||||
title: Nesting For Loops
|
||||
title: Anida bucles "for"
|
||||
challengeType: 1
|
||||
videoUrl: 'https://scrimba.com/c/cRn6GHM'
|
||||
forumTopicId: 18248
|
||||
@ -9,7 +9,7 @@ dashedName: nesting-for-loops
|
||||
|
||||
# --description--
|
||||
|
||||
If you have a multi-dimensional array, you can use the same logic as the prior waypoint to loop through both the array and any sub-arrays. Here is an example:
|
||||
Si tienes un arreglo multidimensional, puedes utilizar la misma lógica que aprendimos anteriormente para recorrer tanto el arreglo como cualquier sub-arreglo. Aquí hay un ejemplo:
|
||||
|
||||
```js
|
||||
var arr = [
|
||||
@ -22,21 +22,21 @@ for (var i=0; i < arr.length; i++) {
|
||||
}
|
||||
```
|
||||
|
||||
This outputs each sub-element in `arr` one at a time. Note that for the inner loop, we are checking the `.length` of `arr[i]`, since `arr[i]` is itself an array.
|
||||
Esto imprime cada sub-elemento dentro de `arr` uno a la vez. Ten en cuenta que para el bucle interior, estamos comprobando el `.length` de `arr[i]`, ya que `arr[i]` es en sí mismo es un arreglo.
|
||||
|
||||
# --instructions--
|
||||
|
||||
Modify function `multiplyAll` so that it returns the product of all the numbers in the sub-arrays of `arr`.
|
||||
Modifica la función `multiplyAll` para que devuelva el producto de todos los números dentro de los sub-arreglos de `arr`.
|
||||
|
||||
# --hints--
|
||||
|
||||
`multiplyAll([[1],[2],[3]])` should return `6`
|
||||
`multiplyAll([[1],[2],[3]])` debe devolver `6`
|
||||
|
||||
```js
|
||||
assert(multiplyAll([[1], [2], [3]]) === 6);
|
||||
```
|
||||
|
||||
`multiplyAll([[1,2],[3,4],[5,6,7]])` should return `5040`
|
||||
`multiplyAll([[1,2],[3,4],[5,6,7]])` debe devolver `5040`
|
||||
|
||||
```js
|
||||
assert(
|
||||
@ -48,7 +48,7 @@ assert(
|
||||
);
|
||||
```
|
||||
|
||||
`multiplyAll([[5,1],[0.2, 4, 0.5],[3, 9]])` should return `54`
|
||||
`multiplyAll([[5,1],[0.2, 4, 0.5],[3, 9]])` debe devolver `54`
|
||||
|
||||
```js
|
||||
assert(
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
---
|
||||
id: 56533eb9ac21ba0edf2244bd
|
||||
title: Passing Values to Functions with Arguments
|
||||
title: Pasa valores a las funciones utilizando argumentos
|
||||
challengeType: 1
|
||||
videoUrl: 'https://scrimba.com/c/cy8rahW'
|
||||
forumTopicId: 18254
|
||||
@ -9,9 +9,9 @@ dashedName: passing-values-to-functions-with-arguments
|
||||
|
||||
# --description--
|
||||
|
||||
<dfn>Parameters</dfn> are variables that act as placeholders for the values that are to be input to a function when it is called. When a function is defined, it is typically defined along with one or more parameters. The actual values that are input (or <dfn>"passed"</dfn>) into a function when it is called are known as <dfn>arguments</dfn>.
|
||||
<dfn>Los parámetros</dfn> son variables que actúan como marcadores de posición para los valores que deben ser introducidos en una función cuando se llama. Cuando se define una función, se define típicamente junto con uno o más parámetros. Los valores reales que son introducidos (o <dfn>"pasados"</dfn>) a una función cuando se llama son conocidos como <dfn>argumentos</dfn>.
|
||||
|
||||
Here is a function with two parameters, `param1` and `param2`:
|
||||
Esta es una función con dos parámetros, `param1` y `param2`:
|
||||
|
||||
```js
|
||||
function testFun(param1, param2) {
|
||||
@ -19,21 +19,21 @@ function testFun(param1, param2) {
|
||||
}
|
||||
```
|
||||
|
||||
Then we can call `testFun`: `testFun("Hello", "World");` We have passed two arguments, `"Hello"` and `"World"`. Inside the function, `param1` will equal "Hello" and `param2` will equal "World". Note that you could call `testFun` again with different arguments and the parameters would take on the value of the new arguments.
|
||||
Entonces podemos llamar a `testFun` así: `testFun("Hello", "World");`. Hemos pasado dos argumentos de cadena, `Hello` y `World`. Dentro de la función, `param1` será igual a la cadena `Hello` y `param2` será igual a la cadena `World`. Ten en cuenta que podrías llamar a `testFun` otra vez con diferentes argumentos y los parámetros tomarían el valor de los nuevos argumentos.
|
||||
|
||||
# --instructions--
|
||||
|
||||
<ol><li>Create a function called <code>functionWithArgs</code> that accepts two arguments and outputs their sum to the dev console.</li><li>Call the function with two numbers as arguments.</li></ol>
|
||||
<ol><li>Crea una función llamada <code>functionWithArgs</code> que acepte dos argumentos y muestre la suma de ellos en la consola de desarrollador.</li><li>Llama a la función con dos números como argumentos.</li></ol>
|
||||
|
||||
# --hints--
|
||||
|
||||
`functionWithArgs` should be a function.
|
||||
`functionWithArgs` debe ser una función.
|
||||
|
||||
```js
|
||||
assert(typeof functionWithArgs === 'function');
|
||||
```
|
||||
|
||||
`functionWithArgs(1,2)` should output `3`.
|
||||
`functionWithArgs(1,2)` debe mostrar `3`.
|
||||
|
||||
```js
|
||||
if (typeof functionWithArgs === 'function') {
|
||||
@ -44,7 +44,7 @@ if (typeof functionWithArgs === 'function') {
|
||||
assert(logOutput == 3);
|
||||
```
|
||||
|
||||
`functionWithArgs(7,9)` should output `16`.
|
||||
`functionWithArgs(7,9)` debe mostrar `16`.
|
||||
|
||||
```js
|
||||
if (typeof functionWithArgs === 'function') {
|
||||
@ -55,7 +55,7 @@ if (typeof functionWithArgs === 'function') {
|
||||
assert(logOutput == 16);
|
||||
```
|
||||
|
||||
You should call `functionWithArgs` with two numbers after you define it.
|
||||
Debes llamar `functionWithArgs` con dos números después de definirla.
|
||||
|
||||
```js
|
||||
assert(
|
||||
@ -105,7 +105,9 @@ if (typeof functionWithArgs !== "function") {
|
||||
```
|
||||
|
||||
## --seed-contents--
|
||||
|
||||
```js
|
||||
|
||||
```
|
||||
|
||||
# --solutions--
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
---
|
||||
id: 599a789b454f2bbd91a3ff4d
|
||||
title: Practice comparing different values
|
||||
title: Practica comparando diferentes valores
|
||||
challengeType: 1
|
||||
videoUrl: 'https://scrimba.com/c/cm8PqCa'
|
||||
forumTopicId: 301174
|
||||
@ -9,44 +9,42 @@ dashedName: practice-comparing-different-values
|
||||
|
||||
# --description--
|
||||
|
||||
In the last two challenges, we learned about the equality operator (`==`) and the strict equality operator (`===`). Let's do a quick review and practice using these operators some more.
|
||||
En los dos últimos desafíos, aprendimos sobre el operador de igualdad (`==`) y el operador de estricta igualdad (`===`). Vamos a hacer una rápida revisión y práctica utilizando estos operadores un poco más.
|
||||
|
||||
If the values being compared are not of the same type, the equality operator will perform a type conversion, and then evaluate the values. However, the strict equality operator will compare both the data type and value as-is, without converting one type to the other.
|
||||
Si los valores que se comparan no son del mismo tipo, el operador de igualdad realizará una conversión de tipo y luego evaluará los valores. Sin embargo, el operador de estricta igualdad comparará tanto el tipo de datos como el valor tal como es, sin convertir un tipo a otro.
|
||||
|
||||
**Examples**
|
||||
**Ejemplos**
|
||||
|
||||
`3 == '3'` devuelve `true` porque JavaScript realiza la conversión de tipo de cadena a número. `3 === '3'` devuelve false porque los tipos son diferentes y la conversión de tipo no se realiza.
|
||||
|
||||
**Nota:** En JavaScript, puedes determinar el tipo de una variable o un valor con el operador `typeof`, de la siguiente manera:
|
||||
|
||||
```js
|
||||
3 == '3' // returns true because JavaScript performs type conversion from string to number
|
||||
3 === '3' // returns false because the types are different and type conversion is not performed
|
||||
typeof 3
|
||||
typeof '3'
|
||||
```
|
||||
|
||||
**Note**
|
||||
In JavaScript, you can determine the type of a variable or a value with the `typeof` operator, as follows:
|
||||
|
||||
```js
|
||||
typeof 3 // returns 'number'
|
||||
typeof '3' // returns 'string'
|
||||
```
|
||||
`typeof 3` devuelve la cadena `number` y `typeof '3'` devuelve la cadena `string`.
|
||||
|
||||
# --instructions--
|
||||
|
||||
The `compareEquality` function in the editor compares two values using the equality operator. Modify the function so that it returns "Equal" only when the values are strictly equal.
|
||||
La función `compareEquality` en el editor compara dos valores usando el operador de igualdad. Modifica la función para que devuelva la cadena `Equal` sólo cuando los valores son estrictamente iguales.
|
||||
|
||||
# --hints--
|
||||
|
||||
`compareEquality(10, "10")` should return "Not Equal"
|
||||
`compareEquality(10, "10")` debe devolver la cadena `Not Equal`
|
||||
|
||||
```js
|
||||
assert(compareEquality(10, '10') === 'Not Equal');
|
||||
```
|
||||
|
||||
`compareEquality("20", 20)` should return "Not Equal"
|
||||
`compareEquality("20", 20)` debe devolver la cadena `Not Equal`
|
||||
|
||||
```js
|
||||
assert(compareEquality('20', 20) === 'Not Equal');
|
||||
```
|
||||
|
||||
You should use the `===` operator
|
||||
Debes usar el operador `===`
|
||||
|
||||
```js
|
||||
assert(code.match(/===/g));
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
---
|
||||
id: 5688e62ea601b2482ff8422b
|
||||
title: Profile Lookup
|
||||
title: Búsqueda de perfiles
|
||||
challengeType: 1
|
||||
videoUrl: 'https://scrimba.com/c/cDqW2Cg'
|
||||
forumTopicId: 18259
|
||||
@ -9,27 +9,27 @@ dashedName: profile-lookup
|
||||
|
||||
# --description--
|
||||
|
||||
We have an array of objects representing different people in our contacts lists.
|
||||
Tenemos un arreglo de objetos que representan a diferentes personas en nuestras listas de contactos.
|
||||
|
||||
A `lookUpProfile` function that takes `name` and a property (`prop`) as arguments has been pre-written for you.
|
||||
Una función `lookUpProfile` que recibe nombre (`name`) y una propiedad (`prop`) como argumentos preescritos para ti.
|
||||
|
||||
The function should check if `name` is an actual contact's `firstName` and the given property (`prop`) is a property of that contact.
|
||||
La función debe verificar si el nombre (`name`) es el nombre de pila del contacto (`firstName`) y la propiedad (`prop`) dada es una propiedad de ese contacto.
|
||||
|
||||
If both are true, then return the "value" of that property.
|
||||
Si ambos son verdaderos, entonces devolver el "valor" de esa propiedad.
|
||||
|
||||
If `name` does not correspond to any contacts then return `"No such contact"`.
|
||||
Si `name` no corresponde a ningún contacto, entonces devuelve la cadena `No such contact`.
|
||||
|
||||
If `prop` does not correspond to any valid properties of a contact found to match `name` then return `"No such property"`.
|
||||
Si `prop` no corresponde a ninguna propiedad válida de un contacto encontrado que coincida con `name` entonces devuelve la cadena `No such property`.
|
||||
|
||||
# --hints--
|
||||
|
||||
`lookUpProfile("Kristian", "lastName")` should return `"Vos"`
|
||||
`lookUpProfile("Kristian", "lastName")` debe devolver la cadena `Vos`
|
||||
|
||||
```js
|
||||
assert(lookUpProfile('Kristian', 'lastName') === 'Vos');
|
||||
```
|
||||
|
||||
`lookUpProfile("Sherlock", "likes")` should return `["Intriguing Cases", "Violin"]`
|
||||
`lookUpProfile("Sherlock", "likes")` debe devolver `["Intriguing Cases", "Violin"]`
|
||||
|
||||
```js
|
||||
assert.deepEqual(lookUpProfile('Sherlock', 'likes'), [
|
||||
@ -38,25 +38,25 @@ assert.deepEqual(lookUpProfile('Sherlock', 'likes'), [
|
||||
]);
|
||||
```
|
||||
|
||||
`lookUpProfile("Harry", "likes")` should return an array
|
||||
`lookUpProfile("Harry", "likes")` debe devolver un arreglo
|
||||
|
||||
```js
|
||||
assert(typeof lookUpProfile('Harry', 'likes') === 'object');
|
||||
```
|
||||
|
||||
`lookUpProfile("Bob", "number")` should return "No such contact"
|
||||
`lookUpProfile("Bob", "number")` debe devolver la cadena `No such contact`
|
||||
|
||||
```js
|
||||
assert(lookUpProfile('Bob', 'number') === 'No such contact');
|
||||
```
|
||||
|
||||
`lookUpProfile("Bob", "potato")` should return "No such contact"
|
||||
`lookUpProfile("Bob", "potato")` debe devolver la cadena `No such contact`
|
||||
|
||||
```js
|
||||
assert(lookUpProfile('Bob', 'potato') === 'No such contact');
|
||||
```
|
||||
|
||||
`lookUpProfile("Akira", "address")` should return "No such property"
|
||||
`lookUpProfile("Akira", "address")` debe devolver la cadena `No such property`
|
||||
|
||||
```js
|
||||
assert(lookUpProfile('Akira', 'address') === 'No such property');
|
||||
|
||||
Reference in New Issue
Block a user