chore(i18n,curriculum): update translations (#42191)
This commit is contained in:
camperbot
GitHub
@ -1,62 +1,62 @@
|
||||
{
|
||||
"article0title": "Golang Benchmark",
|
||||
"article0link": "https://chinese.freecodecamp.org/news/golang-benchmark/",
|
||||
"article1title": "樹莓派",
|
||||
"article1link": "https://chinese.freecodecamp.org/news/build-a-personal-dev-server-on-a-5-dollar-raspberry-pi/",
|
||||
"article2title": "如何發佈一個網站",
|
||||
"article2link": "https://chinese.freecodecamp.org/news/publish-a-no-code-website-in-10-minutes/",
|
||||
"article3title": "PWA 入門與實踐",
|
||||
"article3link": "https://chinese.freecodecamp.org/news/a-brief-introduction-to-pwa/",
|
||||
"article0title": "電腦截屏",
|
||||
"article0link": "https://chinese.freecodecamp.org/news/how-to-screenshot-on-windows/",
|
||||
"article1title": "程序員自學",
|
||||
"article1link": "https://chinese.freecodecamp.org/news/how-i-learn-coding-for-eight-months-and-become-a-developer/",
|
||||
"article2title": "AppData 文件夾",
|
||||
"article2link": "https://chinese.freecodecamp.org/news/where-to-find-the-appdata-folder-in-windows-10/",
|
||||
"article3title": "HTML 新選項卡打開鏈接",
|
||||
"article3link": "https://chinese.freecodecamp.org/news/how-to-use-html-to-open-link-in-new-tab/",
|
||||
"article4title": "Git 刪除分支",
|
||||
"article4link": "https://chinese.freecodecamp.org/news/how-to-delete-a-git-branch-both-locally-and-remotely/",
|
||||
"article5title": "NPM 教程",
|
||||
"article5link": "https://chinese.freecodecamp.org/news/what-is-npm-a-node-package-manager-tutorial-for-beginners/",
|
||||
"article6title": "前端開發學習路線",
|
||||
"article6link": "https://chinese.freecodecamp.org/news/map-of-learning-front-end/",
|
||||
"article5title": "面向對象編程 SOLID 原則",
|
||||
"article5link": "https://chinese.freecodecamp.org/news/solid-principles/",
|
||||
"article6title": "js 字符串反轉",
|
||||
"article6link": "https://chinese.freecodecamp.org/news/how-to-reverse-a-string-in-javascript-in-3-different-ways/",
|
||||
"article7title": "谷歌小恐龍",
|
||||
"article7link": "https://chinese.freecodecamp.org/news/do-you-know-the-chrome-dino-game-millions-of-people-are-playing/",
|
||||
"article8title": "GraphQL 教程",
|
||||
"article8link": "https://chinese.freecodecamp.org/news/a-detailed-guide-to-graphql/",
|
||||
"article9title": "Webpack 多入口配置",
|
||||
"article9link": "https://chinese.freecodecamp.org/news/an-introduction-to-webpack-multi-entry-configuration/",
|
||||
"article10title": "TypeScript",
|
||||
"article10link": "https://chinese.freecodecamp.org/news/why-should-you-use-typescript/",
|
||||
"article11title": "Web 開發工程師",
|
||||
"article11link": "https://chinese.freecodecamp.org/news/the-practical-guide-to-becoming-a-professional-web-developer/",
|
||||
"article12title": "提交第一個 PR",
|
||||
"article12link": "https://chinese.freecodecamp.org/news/how-to-make-your-first-pull-request-on-github/",
|
||||
"article13title": "Express ES6 支持",
|
||||
"article13link": "https://chinese.freecodecamp.org/news/how-to-enable-es6-and-beyond-syntax-with-node-and-express/",
|
||||
"article14title": "Python 快速排序算法",
|
||||
"article14link": "https://chinese.freecodecamp.org/news/sorting-in-python/",
|
||||
"article15title": "React 作品集",
|
||||
"article15link": "https://chinese.freecodecamp.org/news/portfolio-app-using-react/",
|
||||
"article16title": "JS 隱式類型轉換",
|
||||
"article16link": "https://chinese.freecodecamp.org/news/javascript-implicit-type-conversion/",
|
||||
"article17title": "Deno 入門手冊",
|
||||
"article17link": "https://chinese.freecodecamp.org/news/the-deno-handbook-with-examples/",
|
||||
"article18title": "前端和後端的區別",
|
||||
"article18link": "https://chinese.freecodecamp.org/news/front-end-developer-vs-back-end-developer-definition-and-meaning-in-practice/",
|
||||
"article8title": "自學編程",
|
||||
"article8link": "https://chinese.freecodecamp.org/news/how-i-went-from-newbie-to-software-engineer-in-9-months-while-working-full-time/",
|
||||
"article9title": "依賴注入的概念",
|
||||
"article9link": "https://chinese.freecodecamp.org/news/a-quick-intro-to-dependency-injection-what-it-is-and-when-to-use-it/",
|
||||
"article10title": "編程語言學哪個好",
|
||||
"article10link": "https://chinese.freecodecamp.org/news/what-programming-language-should-i-learn-first/",
|
||||
"article11title": "技術協作能力",
|
||||
"article11link": "https://chinese.freecodecamp.org/news/how-to-be-a-team-player-in-the-tech-world/",
|
||||
"article12title": "網頁 about:blank",
|
||||
"article12link": "https://chinese.freecodecamp.org/news/about-blank-what-does-about-blank-mean-and-why-is-it-blocked-in-chrome-and-firefox/",
|
||||
"article13title": "Python 基礎教程",
|
||||
"article13link": "https://chinese.freecodecamp.org/news/python-crash-course/",
|
||||
"article14title": "Python 輸出換行符",
|
||||
"article14link": "https://chinese.freecodecamp.org/news/python-new-line-and-how-to-python-print-without-a-newline/",
|
||||
"article15title": "計算機編程的意思",
|
||||
"article15link": "https://chinese.freecodecamp.org/news/what-is-computer-programming-defining-software-development/",
|
||||
"article16title": "前端後端",
|
||||
"article16link": "https://chinese.freecodecamp.org/news/front-end-developer-vs-back-end-developer-definition-and-meaning-in-practice/",
|
||||
"article17title": "json 文件怎麼註釋",
|
||||
"article17link": "https://chinese.freecodecamp.org/news/json-comment/",
|
||||
"article18title": "PostgreSQL 商用",
|
||||
"article18link": "https://chinese.freecodecamp.org/news/2021-postgres-1/",
|
||||
"article19title": "JS 函數的 this 指向",
|
||||
"article19link": "https://chinese.freecodecamp.org/news/javascript-this/",
|
||||
"article20title": "GitHub Pages 部署網頁",
|
||||
"article20link": "https://chinese.freecodecamp.org/news/create-a-free-static-site-with-github-pages-in-10-minutes/",
|
||||
"article21title": "第一門編程語言",
|
||||
"article21link": "https://chinese.freecodecamp.org/news/what-programming-language-should-i-learn-first/",
|
||||
"article21title": "Benchmark（基準測試）",
|
||||
"article21link": "https://chinese.freecodecamp.org/news/golang-benchmark/",
|
||||
"article22title": "配置 VS Code",
|
||||
"article22link": "https://chinese.freecodecamp.org/news/how-to-set-up-vscode-to-improve-your-productivity/",
|
||||
"article23title": "前端學習路線",
|
||||
"article23link": "https://chinese.freecodecamp.org/news/map-of-learning-front-end/",
|
||||
"article24title": "自學編程",
|
||||
"article24link": "https://chinese.freecodecamp.org/news/first-line-of-code-to-226k-job-offer-in-8-months/",
|
||||
"article24title": "docker 刪除鏡像",
|
||||
"article24link": "https://chinese.freecodecamp.org/news/how-to-remove-images-in-docker/",
|
||||
"article25title": "Java",
|
||||
"article25link": "https://chinese.freecodecamp.org/news/java-you-have-not-know-about/",
|
||||
"article26title": "React 學習手冊",
|
||||
"article26link": "https://chinese.freecodecamp.org/news/the-react-handbook/",
|
||||
"article27title": "JSON 文件註釋",
|
||||
"article27link": "https://chinese.freecodecamp.org/news/json-comment/",
|
||||
"article28title": "Canvas 動畫",
|
||||
"article28link": "https://chinese.freecodecamp.org/news/canvas-animation-performance-optimization-practice/",
|
||||
"article27title": "樹莓派",
|
||||
"article27link": "https://chinese.freecodecamp.org/news/build-a-personal-dev-server-on-a-5-dollar-raspberry-pi/",
|
||||
"article28title": "MongoDB Atlas 配置",
|
||||
"article28link": "https://chinese.freecodecamp.org/news/get-started-with-mongodb-atlas/",
|
||||
"article29title": "JWT 授權和認證",
|
||||
"article29link": "https://chinese.freecodecamp.org/news/java-spring-boot-jwt-authorization-and-authentication/"
|
||||
}
|
||||
|
||||
@ -30,19 +30,19 @@ dashedName: adjust-the-hue-of-a-color
|
||||
應使用 `hsl()` 屬性來設置顏色爲 `green`。
|
||||
|
||||
```js
|
||||
assert(code.match(/\.green\s*?{\s*?background-color:\s*?hsl/gi));
|
||||
assert(code.match(/\.green\s*?{\s*?background-color\s*:\s*?hsl/gi));
|
||||
```
|
||||
|
||||
應使用 `hsl()` 屬性來設置顏色爲 `cyan`。
|
||||
|
||||
```js
|
||||
assert(code.match(/\.cyan\s*?{\s*?background-color:\s*?hsl/gi));
|
||||
assert(code.match(/\.cyan\s*?{\s*?background-color\s*:\s*?hsl/gi));
|
||||
```
|
||||
|
||||
應使用 `hsl()` 屬性來設置顏色爲 `blue`。
|
||||
|
||||
```js
|
||||
assert(code.match(/\.blue\s*?{\s*?background-color:\s*?hsl/gi));
|
||||
assert(code.match(/\.blue\s*?{\s*?background-color\s*:\s*?hsl/gi));
|
||||
```
|
||||
|
||||
class 爲 `green` 的 `div` 元素的 `background-color` 屬性值應爲綠色。
|
||||
|
||||
@ -40,7 +40,7 @@ assert($('div').css('background-color') === 'rgb(192, 192, 192)');
|
||||
class 名 `silver-background` 應該定義在 `style` 元素內；`background-color` 的屬性值應爲 `silver`。
|
||||
|
||||
```js
|
||||
assert(code.match(/\.silver-background\s*{\s*background-color:\s*silver;\s*}/));
|
||||
assert(code.match(/\.silver-background\s*{\s*background-color\s*:\s*silver\s*;?\s*}/));
|
||||
```
|
||||
|
||||
# --seed--
|
||||
|
||||
@ -32,7 +32,7 @@ assert($('h1').hasClass('pink-text'));
|
||||
`<style>` 標籤應含有一個可以改變 `color` 的 `pink-text` class。
|
||||
|
||||
```js
|
||||
assert(code.match(/\.pink-text\s*\{\s*color\s*:\s*.+\s*;\s*\}/g));
|
||||
assert(code.match(/\.pink-text\s*\{\s*color\s*:\s*.+\s*;?\s*\}/g));
|
||||
```
|
||||
|
||||
`h1` 元素的字體顏色應爲粉色。
|
||||
|
||||
@ -31,8 +31,8 @@ CSS 的 `width` 屬性可以控制元素的寬度。 和設置文本字號一樣
|
||||
|
||||
```js
|
||||
assert(
|
||||
$("img[src='https://bit.ly/fcc-relaxing-cat']").attr('class') ===
|
||||
'smaller-image'
|
||||
$("img[src='https://bit.ly/fcc-relaxing-cat']").attr('class')
|
||||
.trim().split(/\s+/g).includes('smaller-image')
|
||||
);
|
||||
```
|
||||
|
||||
|
||||
@ -47,7 +47,7 @@ assert(
|
||||
|
||||
```js
|
||||
assert(
|
||||
/\s*h2\s*\{\s*font-family\:\s*(\'|")?Lobster(\'|")?,\s*monospace\s*;\s*\}/gi.test(
|
||||
/\s*h2\s*\{\s*font-family\s*\:\s*(\'|"|)Lobster\1\s*,\s*monospace\s*;?\s*\}/gi.test(
|
||||
code
|
||||
)
|
||||
);
|
||||
|
||||
@ -37,7 +37,7 @@ assert(
|
||||
class 爲 `red-box` 的元素的 `padding` 屬性值應爲 1.5em。
|
||||
|
||||
```js
|
||||
assert(code.match(/\.red-box\s*?{[\s\S]*padding:\s*?1\.5em/gi));
|
||||
assert(code.match(/\.red-box\s*?{[\s\S]*padding\s*:\s*?1\.5em/gi));
|
||||
```
|
||||
|
||||
# --seed--
|
||||
|
||||
@ -46,7 +46,7 @@ assert($('h2').hasClass('red-text'));
|
||||
樣式表應該聲明一個 `red-text` class，顏色爲 `red`。
|
||||
|
||||
```js
|
||||
assert(code.match(/\.red-text\s*\{\s*color\s*:\s*red;\s*\}/g));
|
||||
assert(code.match(/\.red-text\s*\{\s*color\s*:\s*red;?\s*\}/g));
|
||||
```
|
||||
|
||||
不應在 `h2` 元素裏使用行內樣式 `style="color: red"`。
|
||||
|
||||
@ -32,7 +32,7 @@ assert($('.red-text').css('color') === 'rgb(255, 0, 0)');
|
||||
應使用紅色的 `hex code` 縮寫形式，不應使用 `#FF0000`。
|
||||
|
||||
```js
|
||||
assert(code.match(/\.red-text\s*?{\s*?color:\s*?#F00\s*?;\s*?}/gi));
|
||||
assert(code.match(/\.red-text\s*?{\s*?color\s*:\s*?#F00\s*?;?\s*?}/gi));
|
||||
```
|
||||
|
||||
文本內容爲 `I am green!` 的 `h1` 元素的字體顏色 `color` 應該爲綠色。
|
||||
@ -44,7 +44,7 @@ assert($('.green-text').css('color') === 'rgb(0, 255, 0)');
|
||||
應使用綠色的 `hex code` 縮寫形式，不應使用 `#00FF00`。
|
||||
|
||||
```js
|
||||
assert(code.match(/\.green-text\s*?{\s*?color:\s*?#0F0\s*?;\s*?}/gi));
|
||||
assert(code.match(/\.green-text\s*?{\s*?color\s*:\s*?#0F0\s*?;?\s*?}/gi));
|
||||
```
|
||||
|
||||
文本內容爲 `I am cyan!` 的 `h1` 元素的字體顏色 `color` 應該爲藍綠色。
|
||||
@ -56,7 +56,7 @@ assert($('.cyan-text').css('color') === 'rgb(0, 255, 255)');
|
||||
應使用藍綠色的 `hex code` 縮寫形式，不應使用 `#00FFFF`。
|
||||
|
||||
```js
|
||||
assert(code.match(/\.cyan-text\s*?{\s*?color:\s*?#0FF\s*?;\s*?}/gi));
|
||||
assert(code.match(/\.cyan-text\s*?{\s*?color\s*:\s*?#0FF\s*?;?\s*?}/gi));
|
||||
```
|
||||
|
||||
文本內容爲 `I am fuchsia!` 的 `h1` 元素的字體顏色 `color` 應該爲紫紅色。
|
||||
@ -68,7 +68,7 @@ assert($('.fuchsia-text').css('color') === 'rgb(255, 0, 255)');
|
||||
應使用紫紅色的 `hex code` 縮寫形式，不應使用 `#FF00FF`。
|
||||
|
||||
```js
|
||||
assert(code.match(/\.fuchsia-text\s*?{\s*?color:\s*?#F0F\s*?;\s*?}/gi));
|
||||
assert(code.match(/\.fuchsia-text\s*?{\s*?color\s*:\s*?#F0F\s*?;?\s*?}/gi));
|
||||
```
|
||||
|
||||
# --seed--
|
||||
|
||||
@ -36,7 +36,7 @@ assert($('.red-text').css('color') === 'rgb(255, 0, 0)');
|
||||
應使用 `hex code` 替換 `red`。
|
||||
|
||||
```js
|
||||
assert(code.match(/\.red-text\s*?{\s*?color:\s*?(#FF0000|#F00)\s*?;\s*?}/gi));
|
||||
assert(code.match(/\.red-text\s*?{\s*?color\s*:\s*?(#FF0000|#F00)\s*?;?\s*?}/gi));
|
||||
```
|
||||
|
||||
文本內容爲 `I am green!` 的 `h1` 元素的 `color` 值應該爲綠色。
|
||||
@ -48,7 +48,7 @@ assert($('.green-text').css('color') === 'rgb(0, 255, 0)');
|
||||
應使用 `hex code` 替換 `green` 關鍵詞。
|
||||
|
||||
```js
|
||||
assert(code.match(/\.green-text\s*?{\s*?color:\s*?(#00FF00|#0F0)\s*?;\s*?}/gi));
|
||||
assert(code.match(/\.green-text\s*?{\s*?color\s*:\s*?(#00FF00|#0F0)\s*?;?\s*?}/gi));
|
||||
```
|
||||
|
||||
文本內容爲 `I am dodger blue!` 的 `h1` 元素的 `color` 值應該爲道奇藍色。
|
||||
@ -60,7 +60,7 @@ assert($('.dodger-blue-text').css('color') === 'rgb(30, 144, 255)');
|
||||
應使用 `hex code` 替換 `dodgerblue`。
|
||||
|
||||
```js
|
||||
assert(code.match(/\.dodger-blue-text\s*?{\s*?color:\s*?#1E90FF\s*?;\s*?}/gi));
|
||||
assert(code.match(/\.dodger-blue-text\s*?{\s*?color\s*:\s*?#1E90FF\s*?;?\s*?}/gi));
|
||||
```
|
||||
|
||||
文本內容爲 `I am orange!` 的 `h1` 元素的 `color` 值應該爲橘色。
|
||||
@ -72,7 +72,7 @@ assert($('.orange-text').css('color') === 'rgb(255, 165, 0)');
|
||||
應使用 `hex code` 替換 `orange`。
|
||||
|
||||
```js
|
||||
assert(code.match(/\.orange-text\s*?{\s*?color:\s*?#FFA500\s*?;\s*?}/gi));
|
||||
assert(code.match(/\.orange-text\s*?{\s*?color\s*:\s*?#FFA500\s*?;?\s*?}/gi));
|
||||
```
|
||||
|
||||
# --seed--
|
||||
|
||||
@ -30,7 +30,7 @@ assert($('.red-text').css('color') === 'rgb(255, 0, 0)');
|
||||
```js
|
||||
assert(
|
||||
code.match(
|
||||
/\.red-text\s*?{\s*?color:\s*?rgb\(\s*?255\s*?,\s*?0\s*?,\s*?0\s*?\)\s*?;\s*?}/gi
|
||||
/\.red-text\s*{\s*color\s*:\s*rgb\(\s*255\s*,\s*0\s*,\s*0\s*\)\s*;?\s*}/gi
|
||||
)
|
||||
);
|
||||
```
|
||||
@ -46,7 +46,7 @@ assert($('.orchid-text').css('color') === 'rgb(218, 112, 214)');
|
||||
```js
|
||||
assert(
|
||||
code.match(
|
||||
/\.orchid-text\s*?{\s*?color:\s*?rgb\(\s*?218\s*?,\s*?112\s*?,\s*?214\s*?\)\s*?;\s*?}/gi
|
||||
/\.orchid-text\s*{\s*color\s*:\s*rgb\(\s*218\s*,\s*112\s*,\s*214\s*\)\s*;?\s*}/gi
|
||||
)
|
||||
);
|
||||
```
|
||||
@ -62,7 +62,7 @@ assert($('.blue-text').css('color') === 'rgb(0, 0, 255)');
|
||||
```js
|
||||
assert(
|
||||
code.match(
|
||||
/\.blue-text\s*?{\s*?color:\s*?rgb\(\s*?0\s*?,\s*?0\s*?,\s*?255\s*?\)\s*?;\s*?}/gi
|
||||
/\.blue-text\s*{\s*color\s*:\s*rgb\(\s*0\s*,\s*0\s*,\s*255\s*\)\s*;?\s*}/gi
|
||||
)
|
||||
);
|
||||
```
|
||||
@ -78,7 +78,7 @@ assert($('.sienna-text').css('color') === 'rgb(160, 82, 45)');
|
||||
```js
|
||||
assert(
|
||||
code.match(
|
||||
/\.sienna-text\s*?{\s*?color:\s*?rgb\(\s*?160\s*?,\s*?82\s*?,\s*?45\s*?\)\s*?;\s*?}/gi
|
||||
/\.sienna-text\s*{\s*color\s*:\s*rgb\(\s*160\s*,\s*82\s*,\s*45\s*\)\s*;?\s*}/gi
|
||||
)
|
||||
);
|
||||
```
|
||||
|
||||
@ -19,11 +19,19 @@ users.hasOwnProperty('Alan');
|
||||
|
||||
# --instructions--
|
||||
|
||||
我們已經定義了一個包含若干用戶信息的 `users` 對象和一個 `isEveryoneHere` 函數，該函數接收 `users` 對象作爲參數。 請完成該函數使其在 `users` 對象中同時包含 `Alan`、`Jeff`、`Sarah`、`Ryan` 四個屬性時才返回 `true`，否則返回 `false`。
|
||||
請完善這個函數，如果傳遞給它的對象包含四個名字 `Alan`、`Jeff`、`Sarah` 和 `Ryan`，函數返回 true，否則返回 false。
|
||||
|
||||
# --hints--
|
||||
|
||||
`users` 對象應該只包含 `Alan`、`Jeff`、`Sarah`、`Ryan` 4 個屬性。
|
||||
不應直接訪問 `users` 對象。
|
||||
|
||||
```js
|
||||
|
||||
assert(code.match(/users/gm).length <= 2)
|
||||
|
||||
```
|
||||
|
||||
`users` 對象應該只包含 `Alan`、`Jeff`、`Sarah`、`Ryan` 4 個鍵。
|
||||
|
||||
```js
|
||||
assert(
|
||||
@ -35,13 +43,13 @@ assert(
|
||||
);
|
||||
```
|
||||
|
||||
`isEveryoneHere` 函數在 `users` 對象包含 `Alan`、`Jeff`、`Sarah`、`Ryan` 4 個屬性時應返回 `true`。
|
||||
如果 `Alan`、`Jeff`、`Sarah`、`Ryan` 是傳遞給函數 `isEveryoneHere` 對象的屬性，則函數應返回 `true`。
|
||||
|
||||
```js
|
||||
assert(isEveryoneHere(users) === true);
|
||||
```
|
||||
|
||||
`isEveryoneHere` 函數在 `users` 對象不包含 `Alan` 時應返回 `false`。
|
||||
如果傳遞給函數 `isEveryoneHere` 對象的屬性中不包含 `Alan`，則函數返回 `false`。
|
||||
|
||||
```js
|
||||
assert(
|
||||
@ -52,7 +60,7 @@ assert(
|
||||
);
|
||||
```
|
||||
|
||||
`isEveryoneHere` 函數在 `users` 對象不包含 `Jeff` 時應返回 `false`。
|
||||
如果傳遞給函數 `isEveryoneHere` 對象的屬性中不包含 `Jeff`，則函數返回 `false`。
|
||||
|
||||
```js
|
||||
assert(
|
||||
@ -63,7 +71,7 @@ assert(
|
||||
);
|
||||
```
|
||||
|
||||
`isEveryoneHere` 函數在 `users` 對象不包含 `Sarah` 時應返回 `false`。
|
||||
如果傳遞給函數 `isEveryoneHere` 對象的屬性中不包含 `Sarah`，則函數返回 `false`。
|
||||
|
||||
```js
|
||||
assert(
|
||||
@ -74,7 +82,7 @@ assert(
|
||||
);
|
||||
```
|
||||
|
||||
`isEveryoneHere` 函數在 `users` 對象不包含 `Ryan` 時應返回 `false`。
|
||||
如果傳遞給函數 `isEveryoneHere` 對象的屬性中不包含 `Ryan`，則函數返回 `false`。
|
||||
|
||||
```js
|
||||
assert(
|
||||
@ -109,7 +117,7 @@ let users = {
|
||||
}
|
||||
};
|
||||
|
||||
function isEveryoneHere(obj) {
|
||||
function isEveryoneHere(userObj) {
|
||||
// Only change code below this line
|
||||
|
||||
// Only change code above this line
|
||||
@ -140,13 +148,13 @@ let users = {
|
||||
}
|
||||
};
|
||||
|
||||
function isEveryoneHere(obj) {
|
||||
function isEveryoneHere(userObj) {
|
||||
return [
|
||||
'Alan',
|
||||
'Jeff',
|
||||
'Sarah',
|
||||
'Ryan'
|
||||
].every(i => obj.hasOwnProperty(i));
|
||||
].every(user => userObj.hasOwnProperty(user));
|
||||
}
|
||||
|
||||
console.log(isEveryoneHere(users));
|
||||
|
||||
@ -20,7 +20,7 @@ FCC 團隊需求有變更，現在想要兩種茶：綠茶（green tea）和紅
|
||||
|
||||
將函數爲參數或返回值的函數叫做高階 ( <dfn>higher order</dfn>) 函數。
|
||||
|
||||
當函數傳遞給另一個函數或從另一個函數返回時，那些傳入或返回的函數可以叫做<dfn>lambda</dfn>。
|
||||
當函數被傳遞給另一個函數或從另一個函數返回時，那些傳入或返回的函數可以叫做 <dfn>lambda</dfn>。
|
||||
|
||||
# --instructions--
|
||||
|
||||
|
||||
@ -12,7 +12,7 @@ dashedName: use-higher-order-functions-map-filter-or-reduce-to-solve-a-complex-p
|
||||
|
||||
# --instructions--
|
||||
|
||||
已經定義了一個函數 `squareList`。 你需要使用 `map()`，`filter()` 和 `reduce()` 的任意組合來完成 `squareList` 函數的代碼。當傳入一個實數數組時，返回一個*僅*包含正整數（小數不是整數）的平方的新數組。 僅包含實數字的數組示例是 `[-3, 4.8, 5, 3, -3.2]`。
|
||||
使用 `map()`、`filter()` 和 `reduce()` 的任何組合完成 `squareList` 函數的代碼。 傳遞一個包含實數的數組給函數時，函數應返回一個新的數組，*只*包含正整數（小數不是整數）的平方值， 例如 `[-3, 4.8, 5, 3, -3.2]` 這樣一個包含實數的數組。
|
||||
|
||||
**注意：** 函數不應該包含任何形式的 `for` 或者 `while` 循環或者 `forEach()` 函數。
|
||||
|
||||
|
||||
@ -39,13 +39,13 @@ h1 {
|
||||
應該把 `$text-color` 聲明一個值爲 `red` 的 Sass 變量。
|
||||
|
||||
```js
|
||||
assert(code.match(/\$text-color:\s*?red;/g));
|
||||
assert(code.match(/\$text-color\s*:\s*?red\s*;/g));
|
||||
```
|
||||
|
||||
應使用 `$text-color` 變量來更改 `.blog-post` 和 `h2` 的 `color`。
|
||||
|
||||
```js
|
||||
assert(code.match(/color:\s*?\$text-color;/g));
|
||||
assert(code.match(/color\s*:\s*\$text-color\s*;?/g));
|
||||
```
|
||||
|
||||
`.blog-post` 元素 `color` 應爲紅色。
|
||||
|
||||
@ -21,7 +21,7 @@ dashedName: add-a-hover-effect-to-a-d3-element
|
||||
`rect` 元素應該有 `bar` class。
|
||||
|
||||
```js
|
||||
assert($('rect').attr('class') == 'bar');
|
||||
assert($('rect').attr('class').trim().split(/\s+/g).includes('bar'));
|
||||
```
|
||||
|
||||
# --seed--
|
||||
|
||||
@ -27,7 +27,7 @@ selection.attr("class", "container");
|
||||
`div` 元素應該一個 `bar` class。
|
||||
|
||||
```js
|
||||
assert($('div').attr('class') == 'bar');
|
||||
assert($('div').attr('class').trim().split(/\s+/g).includes('bar'));
|
||||
```
|
||||
|
||||
應該使用 `attr()` 方法。
|
||||
|
||||
@ -94,7 +94,7 @@ dashedName: run-functional-tests-using-a-headless-browser-ii
|
||||
(getUserInput) =>
|
||||
$.get(getUserInput('url') + '/_api/get-tests?type=functional&n=5').then(
|
||||
(data) => {
|
||||
assert.equal(data.assertions[3].method, 'browser.element');
|
||||
assert.equal(data.assertions[3].method, 'browser.elements');
|
||||
assert.match(data.assertions[3].args[0], /('|")span#dates\1/);
|
||||
assert.equal(data.assertions[3].args[1], 1);
|
||||
},
|
||||
|
||||
@ -30,19 +30,19 @@ dashedName: adjust-the-hue-of-a-color
|
||||
应使用 `hsl()` 属性来设置颜色为 `green`。
|
||||
|
||||
```js
|
||||
assert(code.match(/\.green\s*?{\s*?background-color:\s*?hsl/gi));
|
||||
assert(code.match(/\.green\s*?{\s*?background-color\s*:\s*?hsl/gi));
|
||||
```
|
||||
|
||||
应使用 `hsl()` 属性来设置颜色为 `cyan`。
|
||||
|
||||
```js
|
||||
assert(code.match(/\.cyan\s*?{\s*?background-color:\s*?hsl/gi));
|
||||
assert(code.match(/\.cyan\s*?{\s*?background-color\s*:\s*?hsl/gi));
|
||||
```
|
||||
|
||||
应使用 `hsl()` 属性来设置颜色为 `blue`。
|
||||
|
||||
```js
|
||||
assert(code.match(/\.blue\s*?{\s*?background-color:\s*?hsl/gi));
|
||||
assert(code.match(/\.blue\s*?{\s*?background-color\s*:\s*?hsl/gi));
|
||||
```
|
||||
|
||||
class 为 `green` 的 `div` 元素的 `background-color` 属性值应为绿色。
|
||||
|
||||
@ -40,7 +40,7 @@ assert($('div').css('background-color') === 'rgb(192, 192, 192)');
|
||||
class 名 `silver-background` 应该定义在 `style` 元素内；`background-color` 的属性值应为 `silver`。
|
||||
|
||||
```js
|
||||
assert(code.match(/\.silver-background\s*{\s*background-color:\s*silver;\s*}/));
|
||||
assert(code.match(/\.silver-background\s*{\s*background-color\s*:\s*silver\s*;?\s*}/));
|
||||
```
|
||||
|
||||
# --seed--
|
||||
|
||||
@ -32,7 +32,7 @@ assert($('h1').hasClass('pink-text'));
|
||||
`<style>` 标签应含有一个可以改变 `color` 的 `pink-text` class。
|
||||
|
||||
```js
|
||||
assert(code.match(/\.pink-text\s*\{\s*color\s*:\s*.+\s*;\s*\}/g));
|
||||
assert(code.match(/\.pink-text\s*\{\s*color\s*:\s*.+\s*;?\s*\}/g));
|
||||
```
|
||||
|
||||
`h1` 元素的字体颜色应为粉色。
|
||||
|
||||
@ -31,8 +31,8 @@ CSS 的 `width` 属性可以控制元素的宽度。 和设置文本字号一样
|
||||
|
||||
```js
|
||||
assert(
|
||||
$("img[src='https://bit.ly/fcc-relaxing-cat']").attr('class') ===
|
||||
'smaller-image'
|
||||
$("img[src='https://bit.ly/fcc-relaxing-cat']").attr('class')
|
||||
.trim().split(/\s+/g).includes('smaller-image')
|
||||
);
|
||||
```
|
||||
|
||||
|
||||
@ -47,7 +47,7 @@ assert(
|
||||
|
||||
```js
|
||||
assert(
|
||||
/\s*h2\s*\{\s*font-family\:\s*(\'|")?Lobster(\'|")?,\s*monospace\s*;\s*\}/gi.test(
|
||||
/\s*h2\s*\{\s*font-family\s*\:\s*(\'|"|)Lobster\1\s*,\s*monospace\s*;?\s*\}/gi.test(
|
||||
code
|
||||
)
|
||||
);
|
||||
|
||||
@ -37,7 +37,7 @@ assert(
|
||||
class 为 `red-box` 的元素的 `padding` 属性值应为 1.5em。
|
||||
|
||||
```js
|
||||
assert(code.match(/\.red-box\s*?{[\s\S]*padding:\s*?1\.5em/gi));
|
||||
assert(code.match(/\.red-box\s*?{[\s\S]*padding\s*:\s*?1\.5em/gi));
|
||||
```
|
||||
|
||||
# --seed--
|
||||
|
||||
@ -46,7 +46,7 @@ assert($('h2').hasClass('red-text'));
|
||||
样式表应该声明一个 `red-text` class，颜色为 `red`。
|
||||
|
||||
```js
|
||||
assert(code.match(/\.red-text\s*\{\s*color\s*:\s*red;\s*\}/g));
|
||||
assert(code.match(/\.red-text\s*\{\s*color\s*:\s*red;?\s*\}/g));
|
||||
```
|
||||
|
||||
不应在 `h2` 元素里使用行内样式 `style="color: red"`。
|
||||
|
||||
@ -32,7 +32,7 @@ assert($('.red-text').css('color') === 'rgb(255, 0, 0)');
|
||||
应使用红色的 `hex code` 缩写形式，不应使用 `#FF0000`。
|
||||
|
||||
```js
|
||||
assert(code.match(/\.red-text\s*?{\s*?color:\s*?#F00\s*?;\s*?}/gi));
|
||||
assert(code.match(/\.red-text\s*?{\s*?color\s*:\s*?#F00\s*?;?\s*?}/gi));
|
||||
```
|
||||
|
||||
文本内容为 `I am green!` 的 `h1` 元素的字体颜色 `color` 应该为绿色。
|
||||
@ -44,7 +44,7 @@ assert($('.green-text').css('color') === 'rgb(0, 255, 0)');
|
||||
应使用绿色的 `hex code` 缩写形式，不应使用 `#00FF00`。
|
||||
|
||||
```js
|
||||
assert(code.match(/\.green-text\s*?{\s*?color:\s*?#0F0\s*?;\s*?}/gi));
|
||||
assert(code.match(/\.green-text\s*?{\s*?color\s*:\s*?#0F0\s*?;?\s*?}/gi));
|
||||
```
|
||||
|
||||
文本内容为 `I am cyan!` 的 `h1` 元素的字体颜色 `color` 应该为蓝绿色。
|
||||
@ -56,7 +56,7 @@ assert($('.cyan-text').css('color') === 'rgb(0, 255, 255)');
|
||||
应使用蓝绿色的 `hex code` 缩写形式，不应使用 `#00FFFF`。
|
||||
|
||||
```js
|
||||
assert(code.match(/\.cyan-text\s*?{\s*?color:\s*?#0FF\s*?;\s*?}/gi));
|
||||
assert(code.match(/\.cyan-text\s*?{\s*?color\s*:\s*?#0FF\s*?;?\s*?}/gi));
|
||||
```
|
||||
|
||||
文本内容为 `I am fuchsia!` 的 `h1` 元素的字体颜色 `color` 应该为紫红色。
|
||||
@ -68,7 +68,7 @@ assert($('.fuchsia-text').css('color') === 'rgb(255, 0, 255)');
|
||||
应使用紫红色的 `hex code` 缩写形式，不应使用 `#FF00FF`。
|
||||
|
||||
```js
|
||||
assert(code.match(/\.fuchsia-text\s*?{\s*?color:\s*?#F0F\s*?;\s*?}/gi));
|
||||
assert(code.match(/\.fuchsia-text\s*?{\s*?color\s*:\s*?#F0F\s*?;?\s*?}/gi));
|
||||
```
|
||||
|
||||
# --seed--
|
||||
|
||||
@ -36,7 +36,7 @@ assert($('.red-text').css('color') === 'rgb(255, 0, 0)');
|
||||
应使用 `hex code` 替换 `red`。
|
||||
|
||||
```js
|
||||
assert(code.match(/\.red-text\s*?{\s*?color:\s*?(#FF0000|#F00)\s*?;\s*?}/gi));
|
||||
assert(code.match(/\.red-text\s*?{\s*?color\s*:\s*?(#FF0000|#F00)\s*?;?\s*?}/gi));
|
||||
```
|
||||
|
||||
文本内容为 `I am green!` 的 `h1` 元素的 `color` 值应该为绿色。
|
||||
@ -48,7 +48,7 @@ assert($('.green-text').css('color') === 'rgb(0, 255, 0)');
|
||||
应使用 `hex code` 替换 `green` 关键词。
|
||||
|
||||
```js
|
||||
assert(code.match(/\.green-text\s*?{\s*?color:\s*?(#00FF00|#0F0)\s*?;\s*?}/gi));
|
||||
assert(code.match(/\.green-text\s*?{\s*?color\s*:\s*?(#00FF00|#0F0)\s*?;?\s*?}/gi));
|
||||
```
|
||||
|
||||
文本内容为 `I am dodger blue!` 的 `h1` 元素的 `color` 值应该为道奇蓝色。
|
||||
@ -60,7 +60,7 @@ assert($('.dodger-blue-text').css('color') === 'rgb(30, 144, 255)');
|
||||
应使用 `hex code` 替换 `dodgerblue`。
|
||||
|
||||
```js
|
||||
assert(code.match(/\.dodger-blue-text\s*?{\s*?color:\s*?#1E90FF\s*?;\s*?}/gi));
|
||||
assert(code.match(/\.dodger-blue-text\s*?{\s*?color\s*:\s*?#1E90FF\s*?;?\s*?}/gi));
|
||||
```
|
||||
|
||||
文本内容为 `I am orange!` 的 `h1` 元素的 `color` 值应该为橘色。
|
||||
@ -72,7 +72,7 @@ assert($('.orange-text').css('color') === 'rgb(255, 165, 0)');
|
||||
应使用 `hex code` 替换 `orange`。
|
||||
|
||||
```js
|
||||
assert(code.match(/\.orange-text\s*?{\s*?color:\s*?#FFA500\s*?;\s*?}/gi));
|
||||
assert(code.match(/\.orange-text\s*?{\s*?color\s*:\s*?#FFA500\s*?;?\s*?}/gi));
|
||||
```
|
||||
|
||||
# --seed--
|
||||
|
||||
@ -30,7 +30,7 @@ assert($('.red-text').css('color') === 'rgb(255, 0, 0)');
|
||||
```js
|
||||
assert(
|
||||
code.match(
|
||||
/\.red-text\s*?{\s*?color:\s*?rgb\(\s*?255\s*?,\s*?0\s*?,\s*?0\s*?\)\s*?;\s*?}/gi
|
||||
/\.red-text\s*{\s*color\s*:\s*rgb\(\s*255\s*,\s*0\s*,\s*0\s*\)\s*;?\s*}/gi
|
||||
)
|
||||
);
|
||||
```
|
||||
@ -46,7 +46,7 @@ assert($('.orchid-text').css('color') === 'rgb(218, 112, 214)');
|
||||
```js
|
||||
assert(
|
||||
code.match(
|
||||
/\.orchid-text\s*?{\s*?color:\s*?rgb\(\s*?218\s*?,\s*?112\s*?,\s*?214\s*?\)\s*?;\s*?}/gi
|
||||
/\.orchid-text\s*{\s*color\s*:\s*rgb\(\s*218\s*,\s*112\s*,\s*214\s*\)\s*;?\s*}/gi
|
||||
)
|
||||
);
|
||||
```
|
||||
@ -62,7 +62,7 @@ assert($('.blue-text').css('color') === 'rgb(0, 0, 255)');
|
||||
```js
|
||||
assert(
|
||||
code.match(
|
||||
/\.blue-text\s*?{\s*?color:\s*?rgb\(\s*?0\s*?,\s*?0\s*?,\s*?255\s*?\)\s*?;\s*?}/gi
|
||||
/\.blue-text\s*{\s*color\s*:\s*rgb\(\s*0\s*,\s*0\s*,\s*255\s*\)\s*;?\s*}/gi
|
||||
)
|
||||
);
|
||||
```
|
||||
@ -78,7 +78,7 @@ assert($('.sienna-text').css('color') === 'rgb(160, 82, 45)');
|
||||
```js
|
||||
assert(
|
||||
code.match(
|
||||
/\.sienna-text\s*?{\s*?color:\s*?rgb\(\s*?160\s*?,\s*?82\s*?,\s*?45\s*?\)\s*?;\s*?}/gi
|
||||
/\.sienna-text\s*{\s*color\s*:\s*rgb\(\s*160\s*,\s*82\s*,\s*45\s*\)\s*;?\s*}/gi
|
||||
)
|
||||
);
|
||||
```
|
||||
|
||||
@ -19,11 +19,19 @@ users.hasOwnProperty('Alan');
|
||||
|
||||
# --instructions--
|
||||
|
||||
我们已经定义了一个包含若干用户信息的 `users` 对象和一个 `isEveryoneHere` 函数，该函数接收 `users` 对象作为参数。 请完成该函数使其在 `users` 对象中同时包含 `Alan`、`Jeff`、`Sarah`、`Ryan` 四个属性时才返回 `true`，否则返回 `false`。
|
||||
请完善这个函数，如果传递给它的对象包含四个名字 `Alan`、`Jeff`、`Sarah` 和 `Ryan`，函数返回 true，否则返回 false。
|
||||
|
||||
# --hints--
|
||||
|
||||
`users` 对象应该只包含 `Alan`、`Jeff`、`Sarah`、`Ryan` 4 个属性。
|
||||
不应直接访问 `users` 对象。
|
||||
|
||||
```js
|
||||
|
||||
assert(code.match(/users/gm).length <= 2)
|
||||
|
||||
```
|
||||
|
||||
`users` 对象应该只包含 `Alan`、`Jeff`、`Sarah`、`Ryan` 4 个键。
|
||||
|
||||
```js
|
||||
assert(
|
||||
@ -35,13 +43,13 @@ assert(
|
||||
);
|
||||
```
|
||||
|
||||
`isEveryoneHere` 函数在 `users` 对象包含 `Alan`、`Jeff`、`Sarah`、`Ryan` 4 个属性时应返回 `true`。
|
||||
如果 `Alan`、`Jeff`、`Sarah`、`Ryan` 是传递给函数 `isEveryoneHere` 对象的属性，则函数应返回 `true`。
|
||||
|
||||
```js
|
||||
assert(isEveryoneHere(users) === true);
|
||||
```
|
||||
|
||||
`isEveryoneHere` 函数在 `users` 对象不包含 `Alan` 时应返回 `false`。
|
||||
如果传递给函数 `isEveryoneHere` 对象的属性中不包含 `Alan`，则函数返回 `false`。
|
||||
|
||||
```js
|
||||
assert(
|
||||
@ -52,7 +60,7 @@ assert(
|
||||
);
|
||||
```
|
||||
|
||||
`isEveryoneHere` 函数在 `users` 对象不包含 `Jeff` 时应返回 `false`。
|
||||
如果传递给函数 `isEveryoneHere` 对象的属性中不包含 `Jeff`，则函数返回 `false`。
|
||||
|
||||
```js
|
||||
assert(
|
||||
@ -63,7 +71,7 @@ assert(
|
||||
);
|
||||
```
|
||||
|
||||
`isEveryoneHere` 函数在 `users` 对象不包含 `Sarah` 时应返回 `false`。
|
||||
如果传递给函数 `isEveryoneHere` 对象的属性中不包含 `Sarah`，则函数返回 `false`。
|
||||
|
||||
```js
|
||||
assert(
|
||||
@ -74,7 +82,7 @@ assert(
|
||||
);
|
||||
```
|
||||
|
||||
`isEveryoneHere` 函数在 `users` 对象不包含 `Ryan` 时应返回 `false`。
|
||||
如果传递给函数 `isEveryoneHere` 对象的属性中不包含 `Ryan`，则函数返回 `false`。
|
||||
|
||||
```js
|
||||
assert(
|
||||
@ -109,7 +117,7 @@ let users = {
|
||||
}
|
||||
};
|
||||
|
||||
function isEveryoneHere(obj) {
|
||||
function isEveryoneHere(userObj) {
|
||||
// Only change code below this line
|
||||
|
||||
// Only change code above this line
|
||||
@ -140,13 +148,13 @@ let users = {
|
||||
}
|
||||
};
|
||||
|
||||
function isEveryoneHere(obj) {
|
||||
function isEveryoneHere(userObj) {
|
||||
return [
|
||||
'Alan',
|
||||
'Jeff',
|
||||
'Sarah',
|
||||
'Ryan'
|
||||
].every(i => obj.hasOwnProperty(i));
|
||||
].every(user => userObj.hasOwnProperty(user));
|
||||
}
|
||||
|
||||
console.log(isEveryoneHere(users));
|
||||
|
||||
@ -20,7 +20,7 @@ FCC 团队需求有变更，现在想要两种茶：绿茶（green tea）和红
|
||||
|
||||
将函数为参数或返回值的函数叫做高阶 ( <dfn>higher order</dfn>) 函数。
|
||||
|
||||
当函数传递给另一个函数或从另一个函数返回时，那些传入或返回的函数可以叫做<dfn>lambda</dfn>。
|
||||
当函数被传递给另一个函数或从另一个函数返回时，那些传入或返回的函数可以叫做 <dfn>lambda</dfn>。
|
||||
|
||||
# --instructions--
|
||||
|
||||
|
||||
@ -12,7 +12,7 @@ dashedName: use-higher-order-functions-map-filter-or-reduce-to-solve-a-complex-p
|
||||
|
||||
# --instructions--
|
||||
|
||||
已经定义了一个函数 `squareList`。 你需要使用 `map()`，`filter()` 和 `reduce()` 的任意组合来完成 `squareList` 函数的代码。当传入一个实数数组时，返回一个*仅*包含正整数（小数不是整数）的平方的新数组。 仅包含实数字的数组示例是 `[-3, 4.8, 5, 3, -3.2]`。
|
||||
使用 `map()`、`filter()` 和 `reduce()` 的任何组合完成 `squareList` 函数的代码。 传递一个包含实数的数组给函数时，函数应返回一个新的数组，*只*包含正整数（小数不是整数）的平方值， 例如 `[-3, 4.8, 5, 3, -3.2]` 这样一个包含实数的数组。
|
||||
|
||||
**注意：** 函数不应该包含任何形式的 `for` 或者 `while` 循环或者 `forEach()` 函数。
|
||||
|
||||
|
||||
@ -39,13 +39,13 @@ h1 {
|
||||
应该把 `$text-color` 声明一个值为 `red` 的 Sass 变量。
|
||||
|
||||
```js
|
||||
assert(code.match(/\$text-color:\s*?red;/g));
|
||||
assert(code.match(/\$text-color\s*:\s*?red\s*;/g));
|
||||
```
|
||||
|
||||
应使用 `$text-color` 变量来更改 `.blog-post` 和 `h2` 的 `color`。
|
||||
|
||||
```js
|
||||
assert(code.match(/color:\s*?\$text-color;/g));
|
||||
assert(code.match(/color\s*:\s*\$text-color\s*;?/g));
|
||||
```
|
||||
|
||||
`.blog-post` 元素 `color` 应为红色。
|
||||
|
||||
@ -21,7 +21,7 @@ dashedName: add-a-hover-effect-to-a-d3-element
|
||||
`rect` 元素应该有 `bar` class。
|
||||
|
||||
```js
|
||||
assert($('rect').attr('class') == 'bar');
|
||||
assert($('rect').attr('class').trim().split(/\s+/g).includes('bar'));
|
||||
```
|
||||
|
||||
# --seed--
|
||||
|
||||
@ -27,7 +27,7 @@ selection.attr("class", "container");
|
||||
`div` 元素应该一个 `bar` class。
|
||||
|
||||
```js
|
||||
assert($('div').attr('class') == 'bar');
|
||||
assert($('div').attr('class').trim().split(/\s+/g).includes('bar'));
|
||||
```
|
||||
|
||||
应该使用 `attr()` 方法。
|
||||
|
||||
@ -94,7 +94,7 @@ dashedName: run-functional-tests-using-a-headless-browser-ii
|
||||
(getUserInput) =>
|
||||
$.get(getUserInput('url') + '/_api/get-tests?type=functional&n=5').then(
|
||||
(data) => {
|
||||
assert.equal(data.assertions[3].method, 'browser.element');
|
||||
assert.equal(data.assertions[3].method, 'browser.elements');
|
||||
assert.match(data.assertions[3].args[0], /('|")span#dates\1/);
|
||||
assert.equal(data.assertions[3].args[1], 1);
|
||||
},
|
||||
|
||||
@ -30,19 +30,19 @@ Cambia el `background-color` de cada elemento `div` sobre la base de los nombres
|
||||
Tu código debe usar la propiedad `hsl()` para declarar el color `green`.
|
||||
|
||||
```js
|
||||
assert(code.match(/\.green\s*?{\s*?background-color:\s*?hsl/gi));
|
||||
assert(code.match(/\.green\s*?{\s*?background-color\s*:\s*?hsl/gi));
|
||||
```
|
||||
|
||||
Tu código debe usar la propiedad `hsl()` para declarar el color `cyan`.
|
||||
|
||||
```js
|
||||
assert(code.match(/\.cyan\s*?{\s*?background-color:\s*?hsl/gi));
|
||||
assert(code.match(/\.cyan\s*?{\s*?background-color\s*:\s*?hsl/gi));
|
||||
```
|
||||
|
||||
Tu código debe usar la propiedad `hsl()` para declarar el color `blue`.
|
||||
|
||||
```js
|
||||
assert(code.match(/\.blue\s*?{\s*?background-color:\s*?hsl/gi));
|
||||
assert(code.match(/\.blue\s*?{\s*?background-color\s*:\s*?hsl/gi));
|
||||
```
|
||||
|
||||
El elemento `div` con clase `green` debe tener un `background-color` verde.
|
||||
|
||||
@ -40,7 +40,7 @@ assert($('div').css('background-color') === 'rgb(192, 192, 192)');
|
||||
Una clase llamada `silver-background` debe estar definida dentro del elemento `style` y el valor `silver` debe ser asignado a la propiedad `background-color`.
|
||||
|
||||
```js
|
||||
assert(code.match(/\.silver-background\s*{\s*background-color:\s*silver;\s*}/));
|
||||
assert(code.match(/\.silver-background\s*{\s*background-color\s*:\s*silver\s*;?\s*}/));
|
||||
```
|
||||
|
||||
# --seed--
|
||||
|
||||
@ -32,7 +32,7 @@ assert($('h1').hasClass('pink-text'));
|
||||
Tu `<style>` debería tener una clase CSS `pink-text` que cambie su `color`.
|
||||
|
||||
```js
|
||||
assert(code.match(/\.pink-text\s*\{\s*color\s*:\s*.+\s*;\s*\}/g));
|
||||
assert(code.match(/\.pink-text\s*\{\s*color\s*:\s*.+\s*;?\s*\}/g));
|
||||
```
|
||||
|
||||
Tu elemento `h1` debe ser de color rosado ("pink").
|
||||
|
||||
@ -31,8 +31,8 @@ Tu elemento `img` debe incluir la "class" `smaller-image`.
|
||||
|
||||
```js
|
||||
assert(
|
||||
$("img[src='https://bit.ly/fcc-relaxing-cat']").attr('class') ===
|
||||
'smaller-image'
|
||||
$("img[src='https://bit.ly/fcc-relaxing-cat']").attr('class')
|
||||
.trim().split(/\s+/g).includes('smaller-image')
|
||||
);
|
||||
```
|
||||
|
||||
|
||||
@ -47,7 +47,7 @@ El elemento h2 debe degradarse a la fuente `monospace` cuando `Lobster` no está
|
||||
|
||||
```js
|
||||
assert(
|
||||
/\s*h2\s*\{\s*font-family\:\s*(\'|")?Lobster(\'|")?,\s*monospace\s*;\s*\}/gi.test(
|
||||
/\s*h2\s*\{\s*font-family\s*\:\s*(\'|"|)Lobster\1\s*,\s*monospace\s*;?\s*\}/gi.test(
|
||||
code
|
||||
)
|
||||
);
|
||||
|
||||
@ -37,7 +37,7 @@ assert(
|
||||
Tu clase `red-box` debe asignar a los elementos 1.5em de `padding`.
|
||||
|
||||
```js
|
||||
assert(code.match(/\.red-box\s*?{[\s\S]*padding:\s*?1\.5em/gi));
|
||||
assert(code.match(/\.red-box\s*?{[\s\S]*padding\s*:\s*?1\.5em/gi));
|
||||
```
|
||||
|
||||
# --seed--
|
||||
|
||||
@ -46,7 +46,7 @@ assert($('h2').hasClass('red-text'));
|
||||
Tu hoja de estilos debe declarar una clase `red-text` y su color debe ser `red` (rojo).
|
||||
|
||||
```js
|
||||
assert(code.match(/\.red-text\s*\{\s*color\s*:\s*red;\s*\}/g));
|
||||
assert(code.match(/\.red-text\s*\{\s*color\s*:\s*red;?\s*\}/g));
|
||||
```
|
||||
|
||||
No debes usar declaraciones de tipo inline style como `style="color: red"` en tu elemento `h2`.
|
||||
|
||||
@ -32,7 +32,7 @@ assert($('.red-text').css('color') === 'rgb(255, 0, 0)');
|
||||
Debes usar el `hex code` abreviado para el color rojo en lugar del código hexadecimal `#FF0000`.
|
||||
|
||||
```js
|
||||
assert(code.match(/\.red-text\s*?{\s*?color:\s*?#F00\s*?;\s*?}/gi));
|
||||
assert(code.match(/\.red-text\s*?{\s*?color\s*:\s*?#F00\s*?;?\s*?}/gi));
|
||||
```
|
||||
|
||||
Debes asignar al elemento `h1` que tiene el texto `I am green!` ("¡Soy de color verde!) el `color` verde.
|
||||
@ -44,7 +44,7 @@ assert($('.green-text').css('color') === 'rgb(0, 255, 0)');
|
||||
Debes usar el `hex code` abreviado para el color verde en lugar del código hexadecimal `#00FF00`.
|
||||
|
||||
```js
|
||||
assert(code.match(/\.green-text\s*?{\s*?color:\s*?#0F0\s*?;\s*?}/gi));
|
||||
assert(code.match(/\.green-text\s*?{\s*?color\s*:\s*?#0F0\s*?;?\s*?}/gi));
|
||||
```
|
||||
|
||||
Debes asignar al elemento `h1` que tiene el texto `I am cyan!` ("¡Soy de color cian!) el `color` cian.
|
||||
@ -56,7 +56,7 @@ assert($('.cyan-text').css('color') === 'rgb(0, 255, 255)');
|
||||
Debes usar el `hex code` abreviado para el color cian en lugar del código hexadecimal `#00FFFF`.
|
||||
|
||||
```js
|
||||
assert(code.match(/\.cyan-text\s*?{\s*?color:\s*?#0FF\s*?;\s*?}/gi));
|
||||
assert(code.match(/\.cyan-text\s*?{\s*?color\s*:\s*?#0FF\s*?;?\s*?}/gi));
|
||||
```
|
||||
|
||||
Debes asignar al elemento `h1` que tiene el texto `I am fuchsia!` ("¡Soy de color fucsia!) el `color` fucsia.
|
||||
@ -68,7 +68,7 @@ assert($('.fuchsia-text').css('color') === 'rgb(255, 0, 255)');
|
||||
Debes usar el `hex code` abreviado para el color fucsia en lugar del código hexadecimal `#FF00FF`.
|
||||
|
||||
```js
|
||||
assert(code.match(/\.fuchsia-text\s*?{\s*?color:\s*?#F0F\s*?;\s*?}/gi));
|
||||
assert(code.match(/\.fuchsia-text\s*?{\s*?color\s*:\s*?#F0F\s*?;?\s*?}/gi));
|
||||
```
|
||||
|
||||
# --seed--
|
||||
|
||||
@ -36,7 +36,7 @@ assert($('.red-text').css('color') === 'rgb(255, 0, 0)');
|
||||
Debes usar el `hex code` correspondiente al color rojo en lugar de la palabra reservada `red`.
|
||||
|
||||
```js
|
||||
assert(code.match(/\.red-text\s*?{\s*?color:\s*?(#FF0000|#F00)\s*?;\s*?}/gi));
|
||||
assert(code.match(/\.red-text\s*?{\s*?color\s*:\s*?(#FF0000|#F00)\s*?;?\s*?}/gi));
|
||||
```
|
||||
|
||||
Debes asignar al elemento `h1` que tiene el texto `I am green!` ("¡Soy de color verde!) el `color` verde.
|
||||
@ -48,7 +48,7 @@ assert($('.green-text').css('color') === 'rgb(0, 255, 0)');
|
||||
Debes usar el `hex code` correspondiente al color verde en lugar de la palabra reservada `green`.
|
||||
|
||||
```js
|
||||
assert(code.match(/\.green-text\s*?{\s*?color:\s*?(#00FF00|#0F0)\s*?;\s*?}/gi));
|
||||
assert(code.match(/\.green-text\s*?{\s*?color\s*:\s*?(#00FF00|#0F0)\s*?;?\s*?}/gi));
|
||||
```
|
||||
|
||||
Debes asignar al elemento `h1` que tiene el texto `I am dodger blue!` ("¡Soy de color azul dodger!) el `color` azul dodger.
|
||||
@ -60,7 +60,7 @@ assert($('.dodger-blue-text').css('color') === 'rgb(30, 144, 255)');
|
||||
Debes usar el `hex code` correspondiente al color azul dodger en lugar de la palabra reservada `dodgerblue`.
|
||||
|
||||
```js
|
||||
assert(code.match(/\.dodger-blue-text\s*?{\s*?color:\s*?#1E90FF\s*?;\s*?}/gi));
|
||||
assert(code.match(/\.dodger-blue-text\s*?{\s*?color\s*:\s*?#1E90FF\s*?;?\s*?}/gi));
|
||||
```
|
||||
|
||||
Debes asignar al elemento `h1` que tiene el texto `I am orange!` ("¡Soy de color naranja!) el `color` naranja.
|
||||
@ -72,7 +72,7 @@ assert($('.orange-text').css('color') === 'rgb(255, 165, 0)');
|
||||
Debes usar el `hex code` correspondiente al color naranja en lugar de la palabra reservada `orange`.
|
||||
|
||||
```js
|
||||
assert(code.match(/\.orange-text\s*?{\s*?color:\s*?#FFA500\s*?;\s*?}/gi));
|
||||
assert(code.match(/\.orange-text\s*?{\s*?color\s*:\s*?#FFA500\s*?;?\s*?}/gi));
|
||||
```
|
||||
|
||||
# --seed--
|
||||
|
||||
@ -30,7 +30,7 @@ Debes usar el valor `rgb` que corresponde al color rojo.
|
||||
```js
|
||||
assert(
|
||||
code.match(
|
||||
/\.red-text\s*?{\s*?color:\s*?rgb\(\s*?255\s*?,\s*?0\s*?,\s*?0\s*?\)\s*?;\s*?}/gi
|
||||
/\.red-text\s*{\s*color\s*:\s*rgb\(\s*255\s*,\s*0\s*,\s*0\s*\)\s*;?\s*}/gi
|
||||
)
|
||||
);
|
||||
```
|
||||
@ -46,7 +46,7 @@ Debes usar el valor `rgb` que corresponde al color orchid (orquídea).
|
||||
```js
|
||||
assert(
|
||||
code.match(
|
||||
/\.orchid-text\s*?{\s*?color:\s*?rgb\(\s*?218\s*?,\s*?112\s*?,\s*?214\s*?\)\s*?;\s*?}/gi
|
||||
/\.orchid-text\s*{\s*color\s*:\s*rgb\(\s*218\s*,\s*112\s*,\s*214\s*\)\s*;?\s*}/gi
|
||||
)
|
||||
);
|
||||
```
|
||||
@ -62,7 +62,7 @@ Debes usar el valor `rgb` que corresponde al color azul.
|
||||
```js
|
||||
assert(
|
||||
code.match(
|
||||
/\.blue-text\s*?{\s*?color:\s*?rgb\(\s*?0\s*?,\s*?0\s*?,\s*?255\s*?\)\s*?;\s*?}/gi
|
||||
/\.blue-text\s*{\s*color\s*:\s*rgb\(\s*0\s*,\s*0\s*,\s*255\s*\)\s*;?\s*}/gi
|
||||
)
|
||||
);
|
||||
```
|
||||
@ -78,7 +78,7 @@ Debes usar el valor `rgb` que corresponde al color sienna (siena).
|
||||
```js
|
||||
assert(
|
||||
code.match(
|
||||
/\.sienna-text\s*?{\s*?color:\s*?rgb\(\s*?160\s*?,\s*?82\s*?,\s*?45\s*?\)\s*?;\s*?}/gi
|
||||
/\.sienna-text\s*{\s*color\s*:\s*rgb\(\s*160\s*,\s*82\s*,\s*45\s*\)\s*;?\s*}/gi
|
||||
)
|
||||
);
|
||||
```
|
||||
|
||||
@ -19,10 +19,18 @@ Ambos devuelven `true`.
|
||||
|
||||
# --instructions--
|
||||
|
||||
Hemos creado un objeto, `users`, con algunos usuarios en él y una función `isEveryoneHere`, a la que pasamos el objeto `users` como argumento. Termina de escribir esta función para que devuelva `true` solo si el objeto `users` contiene los cuatro nombres, `Alan`, `Jeff`, `Sarah` y `Ryan`, como claves, y `false`en caso contrario.
|
||||
Termina de escribir la función para que devuelva "true" sólo si el objeto pasado contiene los cuatro nombres, `Alan`, `Jeff`, `Sarah` y `Ryan`, y devuelve false de lo contrario.
|
||||
|
||||
# --hints--
|
||||
|
||||
No se debe acceder directamente al objeto `users`
|
||||
|
||||
```js
|
||||
|
||||
assert(code.match(/users/gm).length <= 2)
|
||||
|
||||
```
|
||||
|
||||
El objeto `users` sólo debe contener las claves `Alan`, `Jeff`, `Sarah` y `Ryan`
|
||||
|
||||
```js
|
||||
@ -35,13 +43,13 @@ assert(
|
||||
);
|
||||
```
|
||||
|
||||
La función `isEveryoneHere` debe devolver `true` si `Alan`, `Jeff`, `Sarah`, y `Ryan` son propiedades del objeto `users`
|
||||
La función `isEveryoneHere` debe devolver `true` si `Alan`, `Jeff`, `Sarah` y `Ryan` son propiedades del objeto que se le pasa.
|
||||
|
||||
```js
|
||||
assert(isEveryoneHere(users) === true);
|
||||
```
|
||||
|
||||
La función `isEveryoneHere` debe devolver `false` si `Alan` no es una propiedad del objeto `users`
|
||||
La función `isEveryoneHere` debe devolver `false` si `Alan` no es una propiedad del objeto que se le pasa.
|
||||
|
||||
```js
|
||||
assert(
|
||||
@ -52,7 +60,7 @@ assert(
|
||||
);
|
||||
```
|
||||
|
||||
La función `isEveryoneHere` debe devolver `false` si `Jeff` no es una propiedad del objeto `users`
|
||||
La función `isEveryoneHere` debe devolver `false` si `Jeff` no es una propiedad del objeto que se le pasa.
|
||||
|
||||
```js
|
||||
assert(
|
||||
@ -63,7 +71,7 @@ assert(
|
||||
);
|
||||
```
|
||||
|
||||
La función `isEveryoneHere` debe devolver `false` si `Sarah` no es una propiedad del objeto `users`
|
||||
La función `isEveryoneHere` debe devolver `false` si `Sarah` no es una propiedad del objeto que se le pasa.
|
||||
|
||||
```js
|
||||
assert(
|
||||
@ -74,7 +82,7 @@ assert(
|
||||
);
|
||||
```
|
||||
|
||||
La función `isEveryoneHere` debe devolver `false` si `Ryan` no es una propiedad del objeto `users`
|
||||
La función `isEveryoneHere` debe devolver `false` si `Ryan` no es una propiedad del objeto que se le pasa.
|
||||
|
||||
```js
|
||||
assert(
|
||||
@ -109,7 +117,7 @@ let users = {
|
||||
}
|
||||
};
|
||||
|
||||
function isEveryoneHere(obj) {
|
||||
function isEveryoneHere(userObj) {
|
||||
// Only change code below this line
|
||||
|
||||
// Only change code above this line
|
||||
@ -140,13 +148,13 @@ let users = {
|
||||
}
|
||||
};
|
||||
|
||||
function isEveryoneHere(obj) {
|
||||
function isEveryoneHere(userObj) {
|
||||
return [
|
||||
'Alan',
|
||||
'Jeff',
|
||||
'Sarah',
|
||||
'Ryan'
|
||||
].every(i => obj.hasOwnProperty(i));
|
||||
].every(user => userObj.hasOwnProperty(user));
|
||||
}
|
||||
|
||||
console.log(isEveryoneHere(users));
|
||||
|
||||
@ -12,7 +12,7 @@ Ahora que has superado algunos desafíos usando funciones de orden superior como
|
||||
|
||||
# --instructions--
|
||||
|
||||
Hemos definido una función llamada `squareList`. Necesitas completar el código para la función `squareList` usando cualquier combinación de `map()`, `filter()`, y `reduce()` para que devuelva un nuevo arreglo que contenga *sólo* el cuadrado de los enteros positivos (los números decimales no son enteros) cuando se le pase un arreglo de números reales. Un ejemplo de un arreglo que contiene sólo números reales es `[-3, 4.8, 5, 3, -3.2]`.
|
||||
Completa el código para la función `squareList` usando cualquier combinación de `map()`, `filter()`, y `reduce()`. La función debe devolver un nuevo arreglo que contenga los cuadrados de *solamente* los enteros positivos (números decimales no son enteros) cuando se le pasa un arreglo de números reales. Un ejemplo de un arreglo que contiene números reales es `[-3, 4.8, 5, 3, -3.2]`.
|
||||
|
||||
**Nota:** Tu función no debe usar ningún tipo de bucle `for` o `while` o la función `forEach()`.
|
||||
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
---
|
||||
id: bd7158d8c442eddfaeb5bd13
|
||||
title: Build a Random Quote Machine
|
||||
title: Construye una máquina de citas al azar
|
||||
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>.
|
||||
**Objetivo:** Construye una aplicación en [CodePen.io](https://codepen.io) que funcione de manera similar a esta: <https://codepen.io/freeCodeCamp/full/qRZeGZ>.
|
||||
|
||||
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.
|
||||
Rellena las siguientes [historias de usuario](https://en.wikipedia.org/wiki/User_story) y consigue que todas las pruebas pasen. Dale tu propio estilo personal.
|
||||
|
||||
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!
|
||||
Puedes usar cualquier mezcla de HTML, Javascript, CSS, Bootstrap, SASS, React, Redux, y jQuery para completar este proyecto. Puedes usar un framework de frontend (como React por ejemplo) porque esta sección trata sobre el aprendizaje de frameworks de frontend. No se recomienda utilizar tecnologías adicionales que no estén enlistadas, su utilización corre bajo su propio riesgo. Estamos buscando apoyar otros frameworks de frontend como Angular y Vue, pero actualmente no están soportados. Aceptaremos e intentaremos arreglar todos los informes de incidencias que utilicen el stack de tecnologías sugeridas para este proyecto. ¡Feliz día programando!
|
||||
|
||||
**User Story #1:** I can see a wrapper element with a corresponding `id="quote-box"`.
|
||||
**Historia de usuario #1:** Puedo ver un elemento contenedor con un archivo `id="quote-box"`.
|
||||
|
||||
**User Story #2:** Within `#quote-box`, I can see an element with a corresponding `id="text"`.
|
||||
**Historia de usuario #2:** Dentro de `#quote-box`, puedo ver un elemento con su correspondiente `id="text"`.
|
||||
|
||||
**User Story #3:** Within `#quote-box`, I can see an element with a corresponding `id="author"`.
|
||||
**Historia de usuario #3:** Dentro de `#quote-box`, puedo ver un elemento con su correspondiente `id="author"`.
|
||||
|
||||
**User Story #4:** Within `#quote-box`, I can see a clickable element with a corresponding `id="new-quote"`.
|
||||
**Historia de usuario #4:** Dentro de `#quote-box`, puedo ver un elemento en el que se puede hacer clic con su correspondiente `id="new-quote"`.
|
||||
|
||||
**User Story #5:** Within `#quote-box`, I can see a clickable `a` element with a corresponding `id="tweet-quote"`.
|
||||
**Historia de usuario #5:** Dentro de `#quote-box`, puedo ver un elemento clickeable `a` con su correspondiente `id="tweet-quote"`.
|
||||
|
||||
**User Story #6:** On first load, my quote machine displays a random quote in the element with `id="text"`.
|
||||
**Historia de usuario #6:** En el primer cargado, mi máquina de cotizaciones muestra una cita aleatoria en el elemento con `id="text"`.
|
||||
|
||||
**User Story #7:** On first load, my quote machine displays the random quote's author in the element with `id="author"`.
|
||||
**Historia de usuario #7:**En el primer cargado, mi máquina de cotizaciones muestra al autor de la cita aleatoria en el elemento con `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.
|
||||
**Historia de usuario #8:** Cuando se hace clic en el botón `#new-quote`, mi máquina de cotizaciones debería buscar una nueva cita y mostrarla en el elemento `#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.
|
||||
**Historia de usuario #9:** Mi máquina de cotizaciones debería buscar al autor de la nueva cita cuando se hace click en el botón `#new-quote` y mostrarlo en el elemento `#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.
|
||||
**Historia de usuario #10:** Puedo tuitear la cita actual haciendo clic en `#tweet-quote` del elemento `a`. Este elemento `a` debe incluir la ruta `"twitter.com/intent/tweet"` en su atributo `href` para tuitear la cita actual.
|
||||
|
||||
**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.
|
||||
**Historia de usuario #11:**El elemento contenedor `#quote-box` debe estar centrado horizontalmente. Ejecuta las pruebas con el nivel de zoom del navegador al 100% y la página maximizada.
|
||||
|
||||
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`
|
||||
Puedes crear tu proyecto <a href='https://codepen.io/pen?template=MJjpwO' target='_blank' rel='nofollow'>utilizando la plantilla de CodePen</a> y haciendo clic en `Save` para crear tu propio entorno. O puedes utilizar este enlace CDN para ejecutar cualquier prueba en cualquier entorno que desees: `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.
|
||||
Una vez que hayas terminado, envía la URL a tu proyecto de trabajo con todas sus pruebas verificadas.
|
||||
|
||||
**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.
|
||||
**Nota:** Twitter no permite que se carguen enlaces en un iframe. Intenta usar el atributo `target="_blank"` o `target="_top"` en el elemento `#tweet-quote` si tu tweet no se carga. `target="_top"` reemplazará la pestaña actual, así que asegúrate de que tu trabajo esté guardado.
|
||||
|
||||
# --solutions--
|
||||
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
---
|
||||
id: bad87fee1348bd9aed708826
|
||||
title: Remove an Element Using jQuery
|
||||
title: Remueve un elemento usando jQuery
|
||||
challengeType: 6
|
||||
forumTopicId: 18262
|
||||
dashedName: remove-an-element-using-jquery
|
||||
@ -8,15 +8,15 @@ dashedName: remove-an-element-using-jquery
|
||||
|
||||
# --description--
|
||||
|
||||
Now let's remove an HTML element from your page using jQuery.
|
||||
Ahora vamos a eliminar un elemento HTML de su página utilizando jQuery.
|
||||
|
||||
jQuery has a function called `.remove()` that will remove an HTML element entirely
|
||||
jQuery tiene una función llamada `.remove()` que eliminará completamente un elemento HTML
|
||||
|
||||
Remove element `target4` from the page by using the `.remove()` function.
|
||||
Remueve el elemento `#target4` de la página utilizando la función `.remove()`.
|
||||
|
||||
# --hints--
|
||||
|
||||
You should use jQuery to remove your `target4` element from your page.
|
||||
Debes utilizar jQuery para remover tu elemento `target4` de tu página.
|
||||
|
||||
```js
|
||||
assert(
|
||||
@ -24,7 +24,7 @@ assert(
|
||||
);
|
||||
```
|
||||
|
||||
You should only use jQuery to remove this element.
|
||||
Sólo debes utilizar jQuery para remover este elemento.
|
||||
|
||||
```js
|
||||
assert(
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
---
|
||||
id: bad87fee1348bd9aed108826
|
||||
title: Target a Specific Child of an Element Using jQuery
|
||||
title: Apunta a un hijo específico de un elemento usando jQuery
|
||||
challengeType: 6
|
||||
forumTopicId: 18315
|
||||
required:
|
||||
@ -11,21 +11,23 @@ dashedName: target-a-specific-child-of-an-element-using-jquery
|
||||
|
||||
# --description--
|
||||
|
||||
You've seen why id attributes are so convenient for targeting with jQuery selectors. But you won't always have such neat ids to work with.
|
||||
Has visto por qué los atributos id son muy convenientes para apuntar con los selectores de jQuery. Pero no siempre tendrás tan buenos id's con los que trabajar.
|
||||
|
||||
Fortunately, jQuery has some other tricks for targeting the right elements.
|
||||
Afortunadamente, jQuery tiene algunos otros trucos para apuntar a los elementos correctos.
|
||||
|
||||
jQuery uses CSS Selectors to target elements. The `target:nth-child(n)` CSS selector allows you to select all the nth elements with the target class or element type.
|
||||
jQuery usa selectores de CSS para apuntar elementos. El selector `target:nth-child(n)` de CSS, te permite seleccionar todos los enésimos elementos con el tipo de elemento o la clase apuntada.
|
||||
|
||||
Here's how you would give the third element in each well the bounce class:
|
||||
Así es como le darías al tercer elemento en cada pozo la clase de rebote:
|
||||
|
||||
`$(".target:nth-child(3)").addClass("animated bounce");`
|
||||
```js
|
||||
$(".target:nth-child(3)").addClass("animated bounce");
|
||||
```
|
||||
|
||||
Make the second child in each of your well elements bounce. You must select the elements' children with the `target` class.
|
||||
Has que el segundo niño en cada uno de sus elementos de pozo rebote. Debes seleccionar los hijos de los elementos con la clase `target`.
|
||||
|
||||
# --hints--
|
||||
|
||||
The second element in your `target` elements should bounce.
|
||||
El segundo elemento en tus elementos `target` deben rebotar.
|
||||
|
||||
```js
|
||||
assert(
|
||||
@ -34,19 +36,19 @@ assert(
|
||||
);
|
||||
```
|
||||
|
||||
Only two elements should bounce.
|
||||
Solo deben elegirse dos elementos.
|
||||
|
||||
```js
|
||||
assert($('.animated.bounce').length === 2);
|
||||
```
|
||||
|
||||
You should use the `:nth-child()` selector to modify these elements.
|
||||
Debes usar el selector `:nth-child()` para modificar estos elementos.
|
||||
|
||||
```js
|
||||
assert(code.match(/\:nth-child\(/g));
|
||||
```
|
||||
|
||||
You should only use jQuery to add these classes to the element.
|
||||
Solo debes usar jQuery para añadir estas clases al elemento.
|
||||
|
||||
```js
|
||||
assert(
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
---
|
||||
id: bad87fee1348bd9aedc08826
|
||||
title: Target Elements by Class Using jQuery
|
||||
title: Apunta a elementos por clase usando jQuery
|
||||
challengeType: 6
|
||||
forumTopicId: 18316
|
||||
required:
|
||||
@ -11,29 +11,31 @@ dashedName: target-elements-by-class-using-jquery
|
||||
|
||||
# --description--
|
||||
|
||||
You see how we made all of your `button` elements bounce? We selected them with `$("button")`, then we added some CSS classes to them with `.addClass("animated bounce");`.
|
||||
¿Ves como hicimos que todos tus elementos `button` reboten? Los seleccionamos con `$("button")`, luego agregamos algo de clases CSS a ellos con `.addClass("animated bounce");`.
|
||||
|
||||
You just used jQuery's `.addClass()` function, which allows you to add classes to elements.
|
||||
Acabas de usar la función `.addClass()` de jQuery, que te permite añadir clases a los elementos.
|
||||
|
||||
First, let's target your `div` elements with the class `well` by using the `$(".well")` selector.
|
||||
Primero, apuntemos tus elementos `div` con la clase `well` usando el selector `$(".well")`.
|
||||
|
||||
Note that, just like with CSS declarations, you type a `.` before the class's name.
|
||||
Ten en cuenta que, al igual que con las declaraciones CSS, escribes un `.` antes del nombre de la clase.
|
||||
|
||||
Then use jQuery's `.addClass()` function to add the classes `animated` and `shake`.
|
||||
Luego usa la función `.addClass()` de jQuery para añadir las clases `animated` y `shake`.
|
||||
|
||||
For example, you could make all the elements with the class `text-primary` shake by adding the following to your `document ready function`:
|
||||
Por ejemplo, puedes hacer que todos los elementos con la clase `text-primary` se agiten agregando lo siguiente a tu función `document ready function`:
|
||||
|
||||
`$(".text-primary").addClass("animated shake");`
|
||||
```js
|
||||
$(".text-primary").addClass("animated shake");
|
||||
```
|
||||
|
||||
# --hints--
|
||||
|
||||
You should use the jQuery `addClass()` function to give the classes `animated` and `shake` to all your elements with the class `well`.
|
||||
Debes usar la función jQuery `addClass()` para dar las clases `animated` y `shake` a todos tus elementos con la clase `well`.
|
||||
|
||||
```js
|
||||
assert($('.well').hasClass('animated') && $('.well').hasClass('shake'));
|
||||
```
|
||||
|
||||
You should only use jQuery to add these classes to the element.
|
||||
Solo debes usar jQuery para añadir estas clases al elemento.
|
||||
|
||||
```js
|
||||
assert(!code.match(/class\.\*animated/g));
|
||||
|
||||
Reference in New Issue
Block a user