diff --git a/curriculum/challenges/arabic/00-certifications/front-end-development-certification/front-end-development.yml b/curriculum/challenges/arabic/00-certifications/front-end-development-certification/front-end-development.yml
new file mode 100644
index 00000000000..25d1e081292
--- /dev/null
+++ b/curriculum/challenges/arabic/00-certifications/front-end-development-certification/front-end-development.yml
@@ -0,0 +1,10 @@
+---
+id: 64514fda6c245de4d11eb7bb
+title: Front End Development Certification
+certification: front-end-development
+challengeType: 7
+isPrivate: true
+tests:
+ -
+ id: 645147516c245de4d11eb7ba
+ title: Front End Development Certification Exam
diff --git a/curriculum/challenges/arabic/03-front-end-development-libraries/sass/create-reusable-css-with-mixins.md b/curriculum/challenges/arabic/03-front-end-development-libraries/sass/create-reusable-css-with-mixins.md
index 7a3150ab57b..1df40c93426 100644
--- a/curriculum/challenges/arabic/03-front-end-development-libraries/sass/create-reusable-css-with-mixins.md
+++ b/curriculum/challenges/arabic/03-front-end-development-libraries/sass/create-reusable-css-with-mixins.md
@@ -8,85 +8,112 @@ dashedName: create-reusable-css-with-mixins
# --description--
-في الـ Sass، الـ mixin هو مجموعة من تعريفات الـ CSS التي يمكن إعادة استخدامها في الـ stylesheet.
-
-تتطلب ميزات CSS الأحدث وقتاً قبل اعتمادها بالكامل و قبل ان تكون جاهزة للاستخدام في جميع المتصفحات. مع إضافة الميزات إلى المتصفحات، قد تحتاج قواعد CSS التي تستخدمها إلى vendor prefixes. فكّر في `box-shadow`:
+In Sass, a mixin is a group of CSS declarations that can be reused throughout the style sheet. The definition starts with the `@mixin` at-rule, followed by a custom name. You apply the mixin using the `@include` at-rule.
```scss
-div {
- -webkit-box-shadow: 0px 0px 4px #fff;
- -moz-box-shadow: 0px 0px 4px #fff;
- -ms-box-shadow: 0px 0px 4px #fff;
- box-shadow: 0px 0px 4px #fff;
+@mixin reset-list {
+ margin: 0;
+ padding: 0;
+ list-style: none;
+}
+
+nav ul {
+ @include reset-list;
}
```
-يعتبر الامر الكثير من الكتابة لاعادة كتابة هذه القاعدة لجميع العناصر التي تحتوي على `box-shadow` أو لتغيير كل قيمة لاختبار تأثيرات مختلفة. يعدّ Mixins مثل الوظائف (functions) في CSS. إليك كيفية كتابة واحدة:
+Compiles to:
-```scss
-@mixin box-shadow($x, $y, $blur, $c){
- -webkit-box-shadow: $x $y $blur $c;
- -moz-box-shadow: $x $y $blur $c;
- -ms-box-shadow: $x $y $blur $c;
- box-shadow: $x $y $blur $c;
+```css
+nav ul {
+ margin: 0;
+ padding: 0;
+ list-style: none;
}
```
-يبدأ تعريف `@mixin` يتبعه اسم مخصص. هذه الحجج ( `$x`, و `$y`, و `$blur`, و `$c` في المثال أعلاه) اختيارية. الآن في أي وقت تكون قاعدة `box-shadow` مطلوبة، خط واحد فقط يستبدل mixin الذي يضطر إلى كتابة جميع رموز (vendor prefixes). يتم استدعاء mixin مع توجيه `@include`:
+Your mixins can also take arguments, which allows their behavior to be customized. The arguments are required when using the mixin.
```scss
-div {
- @include box-shadow(0px, 0px, 4px, #fff);
+@mixin prose($font-size, $spacing) {
+ font-size: $font-size;
+ margin: 0;
+ margin-block-end: $spacing;
+}
+
+p {
+ @include prose(1.25rem, 1rem);
+}
+
+h2 {
+ @include prose(2.4rem, 1.5rem);
+}
+```
+
+You can make arguments optional by giving the parameters default values.
+
+```scss
+@mixin text-color($color: black) {
+ color: $color;
+}
+
+p {
+ @include text-color(); /* color: black */
+}
+
+nav a {
+ @include text-color(orange);
}
```
# --instructions--
-اكتب mixin إلى `border-radius` وأعطيه حجة `$radius`. ينبغي أن تستخدم جميع الرموز (vendor prefixes) من المثال. ثم استخدم mixin باسم `border-radius` لإعطاء عنصر `#awesome` حدود نصف قطر بقيمة `15px`.
+Write a mixin named `shape` and give it 3 parameters: `$w`, `$h`, and `$bg-color`.
+
+Use the `shape` mixin to give the `#square` element a width and height of `50px`, and the color `red`. For the `#rect-a` element add a width of `100px`, a height of `50px`, and the color `blue`. Finally, for the `#rect-b` element add a width of `50px`, a height of `100px`, and the color `orange`.
# --hints--
-يجب أن تعلن التعليمات البرمجية الخاصة بك mixin اسمه `border-radius` يحتوي على حِجَّة اسمها `$radius`.
+You should declare a mixin named `shape` with 3 parameters: `$w`, `$h`, and `$bg-color`.
```js
-assert(code.match(/@mixin\s+?border-radius\s*?\(\s*?\$radius\s*?\)\s*?{/gi));
+assert.match(code, /@mixin\s+shape\s*\(\s*\$w,\s*\$h,\s*\$bg-color\s*\)\s*{/gi);
```
-يجب أن يتضمن تعليماتك البرمجية `-webkit-border-radius` رموز (vendor prefix) التي تستخدم حِجَّة `$radius`.
+Your mixin should include a `width` property that uses the `$w` parameter.
```js
-assert(
- __helpers.removeWhiteSpace(code).match(/-webkit-border-radius:\$radius;/gi)
-);
+assert.match(__helpers.removeWhiteSpace(code), /width:\$w;/gi);
```
-يجب أن يتضمن تعليماتك البرمجية `-moz-border-radius` رموز (vendor prefix) التي تستخدم حِجَّة `$radius`.
+Your mixin should include a `height` property that uses the `$h` parameter.
```js
-assert(
- __helpers.removeWhiteSpace(code).match(/-moz-border-radius:\$radius;/gi)
-);
+assert.match(__helpers.removeWhiteSpace(code), /height:\$h;/gi);
```
-يجب أن يتضمن تعليماتك البرمجية `-ms-border-radius` رموز (vendor prefix) التي تستخدم حِجَّة `$radius`.
+Your mixin should include a `background-color` property that uses the `$bg-color` parameter.
```js
-assert(__helpers.removeWhiteSpace(code).match(/-ms-border-radius:\$radius;/gi));
+assert.match(__helpers.removeWhiteSpace(code), /background-color:\$bg\-color;/gi);
```
-يجب أن يتضمن تعليماتك البرمجية `border-radius` رموز (vendor prefix) التي تستخدم حِجَّة `$radius`.
+You should replace the styles inside the `#square` selector with a call to the `shape` mixin using the `@include` keyword. Setting a width and height of `50px`, and the color `red`.
```js
-assert(
- __helpers.removeWhiteSpace(code).match(/border-radius:\$radius;/gi).length ==
- 4
-);
+assert.match(code, /#square\s*{\s*@include\s+shape\(\s*50px,\s*50px,\s*red\s*\)\s*;\s*}/gi);
```
-يجب أن تتصل التعليمات البرمجية الخاصة بك إلى `border-radius mixin` باستخدام الكلمة المفتاحية `@include`، ثم تضعها إلى `15px`.
+You should replace the styles inside the `#rect-a` selector with a call to the `shape` mixin using the `@include` keyword. Setting a width of `100px`, a height of `50px`, and the color `blue`.
```js
-assert(code.match(/@include\s+?border-radius\(\s*?15px\s*?\)\s*;/gi));
+assert.match(code, /#rect-a\s*{\s*@include\s+shape\(\s*100px,\s*50px,\s*blue\s*\)\s*;\s*}/gi);
+```
+
+You should replace the styles inside the `#rect-b` selector with a call to the `shape` mixin using the `@include` keyword. Setting a width of `50px`, a height of `100px`, and the color `orange`.
+
+```js
+assert.match(code, /#rect-b\s*{\s*@include\s+shape\(\s*50px,\s*100px,\s*orange\s*\)\s*;\s*}/gi);
```
# --seed--
@@ -95,38 +122,54 @@ assert(code.match(/@include\s+?border-radius\(\s*?15px\s*?\)\s*;/gi));
```html
-
+
+
+
```
# --solutions--
```html
-
+
+
+
```
diff --git a/curriculum/challenges/arabic/09-information-security/information-security-projects/stock-price-checker.md b/curriculum/challenges/arabic/09-information-security/information-security-projects/stock-price-checker.md
index 3e0a2f372e1..56afef7ec73 100644
--- a/curriculum/challenges/arabic/09-information-security/information-security-projects/stock-price-checker.md
+++ b/curriculum/challenges/arabic/09-information-security/information-security-projects/stock-price-checker.md
@@ -20,7 +20,7 @@ Working on this project will involve you writing your code using one of the foll
# --instructions--
-1. SET `NODE_ENV` to `test` without quotes and set `DB` to your MongoDB connection string
+1. Set the `NODE_ENV` environment variable to `test`, without quotes
2. Complete the project in `routes/api.js` or by creating a handler/controller
3. You will add any security features to `server.js`
4. You will create all of the functional tests in `tests/2_functional-tests.js`
diff --git a/curriculum/challenges/arabic/14-responsive-web-design-22/learn-basic-css-by-building-a-cafe-menu/5f3477cb2e27333b1ab2b955.md b/curriculum/challenges/arabic/14-responsive-web-design-22/learn-basic-css-by-building-a-cafe-menu/5f3477cb2e27333b1ab2b955.md
index a50cc8af454..51c6097d90c 100644
--- a/curriculum/challenges/arabic/14-responsive-web-design-22/learn-basic-css-by-building-a-cafe-menu/5f3477cb2e27333b1ab2b955.md
+++ b/curriculum/challenges/arabic/14-responsive-web-design-22/learn-basic-css-by-building-a-cafe-menu/5f3477cb2e27333b1ab2b955.md
@@ -7,7 +7,7 @@ dashedName: step-16
# --description--
-الآن تحتاج إلى ربط ملف `styles.css` حتى يتم تطبيق الأنماط مرة أخرى. أدخل عنصر `link` ذاتي الأغلاق في عنصر `head`. اعطيها سمة `rel` بقيمة `stylesheet` و `href` بقيمة `styles.css`.
+Now you need to link the `styles.css` file, so the styles will be applied again. Inside the `head` element, add a `link` element. Give it a `rel` attribute with the value of `"stylesheet"` and a `href` attribute with the value of `"styles.css"`.
# --hints--
diff --git a/curriculum/challenges/arabic/15-javascript-algorithms-and-data-structures-22/build-a-pokemon-search-app-project/build-a-pokemon-search-app.md b/curriculum/challenges/arabic/15-javascript-algorithms-and-data-structures-22/build-a-pokemon-search-app-project/build-a-pokemon-search-app.md
index bb3473d98b8..eea08a88900 100644
--- a/curriculum/challenges/arabic/15-javascript-algorithms-and-data-structures-22/build-a-pokemon-search-app-project/build-a-pokemon-search-app.md
+++ b/curriculum/challenges/arabic/15-javascript-algorithms-and-data-structures-22/build-a-pokemon-search-app-project/build-a-pokemon-search-app.md
@@ -15,7 +15,7 @@ In this project, you'll build an app that will search for Pokémon by name or ID
**User Stories:**
1. You should have an `input` element with an `id` of `"search-input"`
-1. You should have a `button` element with an `id` of `"search-button`
+1. You should have a `button` element with an `id` of `"search-button"`
1. You should have an element with an `id` of `"pokemon-name"`
1. You should have an element with an `id` of `"pokemon-id"`
1. You should have an element with an `id` of `"weight"`
diff --git a/curriculum/challenges/arabic/15-javascript-algorithms-and-data-structures-22/learn-basic-javascript-by-building-a-role-playing-game/62a7bfabe119461eb13ccbd6.md b/curriculum/challenges/arabic/15-javascript-algorithms-and-data-structures-22/learn-basic-javascript-by-building-a-role-playing-game/62a7bfabe119461eb13ccbd6.md
index 6040d1028d3..c2bbf7a9cf9 100644
--- a/curriculum/challenges/arabic/15-javascript-algorithms-and-data-structures-22/learn-basic-javascript-by-building-a-role-playing-game/62a7bfabe119461eb13ccbd6.md
+++ b/curriculum/challenges/arabic/15-javascript-algorithms-and-data-structures-22/learn-basic-javascript-by-building-a-role-playing-game/62a7bfabe119461eb13ccbd6.md
@@ -7,7 +7,7 @@ dashedName: step-41
# --description--
-Now you need to modify your display text. Change the `innerText` property of the `text` to be `"You enter the store."`.
+Now you need to modify your display text. Change the `innerText` property of the `text` variable to be `"You enter the store."`.
# --hints--
@@ -153,6 +153,7 @@ function goStore() {
button1.onclick = buyHealth;
button2.onclick = buyWeapon;
button3.onclick = goTown;
+
}
--fcc-editable-region--
diff --git a/curriculum/challenges/arabic/15-javascript-algorithms-and-data-structures-22/learn-introductory-javascript-by-building-a-pyramid-generator/660f535ec33a285b33af3774.md b/curriculum/challenges/arabic/15-javascript-algorithms-and-data-structures-22/learn-introductory-javascript-by-building-a-pyramid-generator/660f535ec33a285b33af3774.md
index 7e389b0a832..b0e53680056 100644
--- a/curriculum/challenges/arabic/15-javascript-algorithms-and-data-structures-22/learn-introductory-javascript-by-building-a-pyramid-generator/660f535ec33a285b33af3774.md
+++ b/curriculum/challenges/arabic/15-javascript-algorithms-and-data-structures-22/learn-introductory-javascript-by-building-a-pyramid-generator/660f535ec33a285b33af3774.md
@@ -17,7 +17,7 @@ You should call the `.push()` method of `rows` in your `else` block.
assert.match(__helpers.removeJSComments(code), /if\s*\(\s*inverted\s*\)\s*\{\s*rows\.unshift\(\s*padRow\(\s*i\s*,\s*count\s*\)\s*\);\s*\}\s*else\s*\{\s*rows\.push\(\s*/);
```
-You should pass a `padRow()` call as the argument for your `.unshift()` method.
+You should pass a `padRow()` call as the argument for your `.push()` method.
```js
assert.match(__helpers.removeJSComments(code), /if\s*\(\s*inverted\s*\)\s*\{\s*rows\.unshift\(\s*padRow\(\s*i\s*,\s*count\s*\)\s*\);\s*\}\s*else\s*\{\s*rows\.push\(\s*padRow\(/);
diff --git a/curriculum/challenges/arabic/15-javascript-algorithms-and-data-structures-22/learn-the-date-object-by-building-a-date-formatter/65388edfdf364fbb04e426f2.md b/curriculum/challenges/arabic/15-javascript-algorithms-and-data-structures-22/learn-the-date-object-by-building-a-date-formatter/65388edfdf364fbb04e426f2.md
index 10442ac529b..e921c4081f3 100644
--- a/curriculum/challenges/arabic/15-javascript-algorithms-and-data-structures-22/learn-the-date-object-by-building-a-date-formatter/65388edfdf364fbb04e426f2.md
+++ b/curriculum/challenges/arabic/15-javascript-algorithms-and-data-structures-22/learn-the-date-object-by-building-a-date-formatter/65388edfdf364fbb04e426f2.md
@@ -23,10 +23,16 @@ Add a `case` where the value is `"yyyy-mm-dd"`. Inside the `case`, set the text
# --hints--
-You should add a `case` where the condition is `"yyyy-mm-dd"`. Then set the `textContent` property of `currentDateParagraph` equal to `formattedDate`.
+You should add a `case` with the value `"yyyy-mm-dd"`.
```js
-assert(code.match(/case\s*('|")yyyy-mm-dd\1\s*:\s*currentDateParagraph\.textContent\s*=\s*formattedDate/g));
+assert.match(code, /case\s*('|")yyyy-mm-dd\1\s*:\s*/);
+```
+
+You should set the `textContent` property of `currentDateParagraph` to `formattedDate` in the block of your `"yyyy-mm-dd"` case.
+
+```js
+assert.match(code, /case\s*('|")yyyy-mm-dd\1\s*:\s*currentDateParagraph\.textContent\s*=\s*formattedDate/);
```
# --seed--
diff --git a/curriculum/challenges/arabic/15-javascript-algorithms-and-data-structures-22/learn-the-date-object-by-building-a-date-formatter/65389a63d3b1d6c764c0e10e.md b/curriculum/challenges/arabic/15-javascript-algorithms-and-data-structures-22/learn-the-date-object-by-building-a-date-formatter/65389a63d3b1d6c764c0e10e.md
index ec2be7c5c0b..f90f4e48115 100644
--- a/curriculum/challenges/arabic/15-javascript-algorithms-and-data-structures-22/learn-the-date-object-by-building-a-date-formatter/65389a63d3b1d6c764c0e10e.md
+++ b/curriculum/challenges/arabic/15-javascript-algorithms-and-data-structures-22/learn-the-date-object-by-building-a-date-formatter/65389a63d3b1d6c764c0e10e.md
@@ -13,16 +13,22 @@ Also, make sure to include a `break` statement to terminate the `switch` stateme
# --hints--
-You should add a `case` where the condition is `"mm-dd-yyyy-h-mm"`, then set the `textContent` property of `currentDateParagraph` equal to empty template literals.
+You should add a `case` with the value `"mm-dd-yyyy-h-mm"`.
```js
-assert(code.match(/case\s*('|")mm-dd-yyyy-h-mm\1\s*:\s*currentDateParagraph\.textContent\s*=\s*``/g));
+assert.match(code, /case\s*('|")mm-dd-yyyy-h-mm\1\s*:\s*/);
```
-You should include a `break` statement within the `case` after your logic.
+You should set the `textContent` property of `currentDateParagraph` to an empty template literals inside the block of your `"mm-dd-yyyy-h-mm"` case.
```js
-assert(code.match(/currentDateParagraph\.textContent\s*=\s*``\s*;?\n+\s*break/g));
+assert.match(code, /case\s*('|")mm-dd-yyyy-h-mm\1\s*:\s*currentDateParagraph\.textContent\s*=\s*``/);
+```
+
+You should include a `break` statement in the `"mm-dd-yyyy-h-mm"` `case` after your logic.
+
+```js
+assert.match(code, /currentDateParagraph\.textContent\s*=\s*``\s*;?\n+\s*break/);
```
# --seed--
diff --git a/curriculum/challenges/arabic/15-javascript-algorithms-and-data-structures-22/learn-the-date-object-by-building-a-date-formatter/65389eff4893facbbe6eae67.md b/curriculum/challenges/arabic/15-javascript-algorithms-and-data-structures-22/learn-the-date-object-by-building-a-date-formatter/65389eff4893facbbe6eae67.md
index f1028ed1966..ee16ad24222 100644
--- a/curriculum/challenges/arabic/15-javascript-algorithms-and-data-structures-22/learn-the-date-object-by-building-a-date-formatter/65389eff4893facbbe6eae67.md
+++ b/curriculum/challenges/arabic/15-javascript-algorithms-and-data-structures-22/learn-the-date-object-by-building-a-date-formatter/65389eff4893facbbe6eae67.md
@@ -31,10 +31,16 @@ And with that, your date formatter is complete! You can now format the current d
# --hints--
-You should use the `default` case to set the `textContent` property of `currentDateParagraph` to the value of `formattedDate`.
+You should have a `default` case after the existing cases.
```js
-assert(code.match(/default\s*:\s*currentDateParagraph\.textContent\s*=\s*formattedDate/g));
+assert.match(code, /default\s*:\s*/)
+```
+
+In the block of the `default` case, set the `textContent` property of `currentDateParagraph` to `formattedDate`.
+
+```js
+assert.match(code, /default\s*:\s*currentDateParagraph\.textContent\s*=\s*formattedDate/g);
```
# --seed--
diff --git a/curriculum/challenges/arabic/16-the-odin-project/top-build-a-rock-paper-scissors-game/build-a-rock-paper-scissors-game.md b/curriculum/challenges/arabic/16-the-odin-project/top-build-a-rock-paper-scissors-game/build-a-rock-paper-scissors-game.md
new file mode 100644
index 00000000000..d31a63c9495
--- /dev/null
+++ b/curriculum/challenges/arabic/16-the-odin-project/top-build-a-rock-paper-scissors-game/build-a-rock-paper-scissors-game.md
@@ -0,0 +1,261 @@
+---
+id: 66629f407d679d3105e8317f
+title: Build a Rock Paper Scissors Game
+challengeType: 14
+dashedName: top-build-a-rock-paper-scissors-game
+---
+
+# --description--
+Your game will be played against the computer. You will write a function that randomly returns `"rock"`, `"paper"` or `"scissors"`.
+
+You do not need to worry about the front-end part of the game. You will only write the logic for the game. Open the `script.js` and start following the instructions.
+
+**User stories:**
+
+1. You should have a function named `getComputerChoice`.
+
+1. Your `getComputerChoice` function should return `"rock"`, `"paper"`, or `"scissors"` at random.
+
+**Hint:** The [Math.random](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Math/random) method returns a random number that’s greater than or equal to 0 and less than 1. Think about how you can use this to conditionally return one of the multiple choices.
+
+Your game will be played by a human player. You will write a function that takes the user's choice and returns it.
+
+1. Create a function named `getHumanChoice`.
+
+1. Write the code so that `getHumanChoice` will return one of the valid choices depending on what the user inputs.
+
+**Hint:** Use the [prompt](https://developer.mozilla.org/en-US/docs/Web/API/Window/prompt) method to get the user’s input.
+
+Your game will keep track of the player's score. You will write variables to keep track of the player's score.
+
+1. Create two new variables named `humanScore` and `computerScore` in the global scope.
+
+1. Initialize those variables with the value of `0`.
+
+Your game will be played round by round. You will write a function that takes the human and computer player choices as arguments, plays a single round, increments the round winner’s score and logs a winner announcement.
+
+1. Create a new function named `playRound`.
+
+1. Define two parameters for `playRound`. Parameter one `humanChoice` and parameter two `computerChoice`. Use these two parameters to take the human and computer choices as arguments.
+
+1. Make your function’s `humanChoice` parameter case-insensitive so that players can input `"rock"`, `"ROCK"`, `"RocK"`, or other variations.
+
+1. Write the code for your `playRound` function that returns a string value representing the round winner.
+
+- If it is a tie, it should return `"It's a tie!"`.
+
+- If the player wins, it should return `"You win! [player choice] beats [computer choice]"`.
+
+- If the computer wins, it should return `"You lose! [computer choice] beats [player choice]"`.
+
+1. Increment the `humanScore` or `computerScore` variable based on the round winner.
+
+Your game will play 3 rounds. You will write a function named `playGame` that calls `playRound` to play 3 rounds, keeps track of the scores, and declares a winner at the end.
+
+1. Create a new function named `playGame`.
+
+1. Create a loop that plays 3 rounds and calls the `playRound` function each time with the human's choice and the computer's choice functions as arguments.
+
+1. At the end of the game, return the winner of the game based on who won the most rounds.
+
+- If the human player wins more rounds than the computer player, return a message that says `"You win the game!"`.
+
+- If the computer player wins more rounds than the human player, return a message that says `"You lose the game!"`.
+
+# --hints--
+
+You should have a function called `getComputerChoice`
+
+```js
+assert.isFunction(getComputerChoice);
+```
+
+Your `getComputerChoice` function should return `"rock"`, `"paper"`, or `"scissors"` at random.
+
+```js
+const counts = {}
+for (let i = 0; i < 100; i++) {
+ const result = getComputerChoice();
+ counts[result] = (counts[result] ?? 0) + 1;
+}
+assert.lengthOf(Object.keys(counts), 3);
+assert.include(Object.keys(counts), "rock");
+assert.include(Object.keys(counts), "paper");
+assert.include(Object.keys(counts), "scissors");
+```
+
+You should have a function called `getHumanChoice`
+
+```js
+assert.isFunction(getHumanChoice);
+```
+
+You should have two variables named `humanScore` and `computerScore` in the global scope.
+
+```js
+assert.exists(humanScore);
+assert.exists(computerScore);
+```
+
+You should have a function called `playRound`
+
+```js
+assert.isFunction(playRound);
+```
+
+Your `playRound` function should take the human and computer player choices as arguments with the parameters `humanChoice` and `computerChoice`.
+
+```js
+assert.match(playRound.toString(), /\s*(?:\bhumanChoice\b\s*,\s*\bcomputerChoice\b)/);
+```
+
+Your `playRound` function should be case-insensitive so that players can input `"rock"`, `"ROCK"`, `"RocK"`, or other variations.
+
+```js
+assert.match(playRound.toString(), /\bhumanChoice\s*\.toLowerCase\(\)/);
+```
+
+Your `playRound` function should return the string `"It's a tie!"` if the human and computer choices are the same.
+
+```js
+assert.equal(playRound("rock", "rock"), "It's a tie!");
+```
+
+Your `playRound` function should return the string `"You win! [player choice] beats [computer choice]"` if the player wins.
+
+```js
+assert.equal(playRound("rock", "scissors"), "You win! rock beats scissors");
+```
+
+Your `playRound` function should return the string `"You lose! [computer choice] beats [player choice]"` if the computer wins.
+
+```js
+assert.equal(playRound("rock", "paper"), "You lose! paper beats rock");
+```
+
+Your `playRound` function should increment the `humanScore` or `computerScore` variable based on the round winner.
+
+```js
+humanScore = 0;
+computerScore = 0;
+playRound("rock", "scissors");
+assert.equal(humanScore, 1);
+```
+
+You should have a function called `playGame`.
+
+```js
+assert.isFunction(playGame);
+```
+
+You should use a loop to play 3 rounds.
+
+```js
+assert.match(playGame.toString(), /\bfor\s*\(/);
+```
+
+You should return the winner of the game based on who won the most rounds.
+
+```js
+window.prompt = () => "rock";
+assert.match(playGame(), /You (win|lose) the game!/);
+```
+
+# --seed--
+
+## --seed-contents--
+
+```js
+const hand = ['rock', 'paper', 'scissor'];
+```
+
+```html
+
+
+
+
+
+```
+
+# --solutions--
+
+```html
+
+
+
+
+
+```
+
+```js
+const hand = ['rock', 'paper', 'scissors'];
+
+
+let computerScore = 0;
+let humanScore = 0;
+
+const getComputerChoice = () => {
+ return hand[Math.floor(Math.random() * hand.length)];
+}
+
+const getHumanChoice = () => {
+ return prompt();
+}
+
+const playRound = (humanChoice, computerChoice) => {
+ humanChoice = humanChoice.toLowerCase()
+
+ const tie = "It's a tie!"
+ const win = `You win! ${humanChoice} beats ${computerChoice}`
+ const lose = `You lose! ${computerChoice} beats ${humanChoice}`
+
+
+ if (humanChoice == 'rock') {
+ if (computerChoice == 'rock') {
+ computerScore++;
+ humanScore++;
+ return tie;
+ } else if (computerChoice == 'paper') {
+ computerScore++;
+ return lose;
+ } else {
+ humanScore++;
+ return win;
+ }
+ } else if (humanChoice == 'paper') {
+ if (computerChoice == 'rock') {
+ humanScore++;
+ return win;
+ } else if (computerChoice == 'paper') {
+ computerScore++;
+ humanScore++;
+ return tie;
+ } else {
+ computerScore++;
+ return lose;
+ }
+ } else if (humanChoice == 'scissors') {
+ if (computerChoice == 'rock') {
+ computerScore++;
+ return lose;
+ } else if (computerChoice == 'paper') {
+ humanScore++;
+ return win;
+ } else {
+ computerScore++;
+ humanScore++;
+ return tie;
+ }
+ }
+}
+
+const playGame = () => {
+ for(let i = 0; i < 3; i++){
+ playRound(getHumanChoice(), getComputerChoice())
+ }
+
+ return humanScore > computerScore ? "You win the game!" : "You lose the game!"
+}
+
+```
+
diff --git a/curriculum/challenges/arabic/25-front-end-development/front-end-development-certification-exam/645147516c245de4d11eb7ba.md b/curriculum/challenges/arabic/25-front-end-development/front-end-development-certification-exam/645147516c245de4d11eb7ba.md
new file mode 100644
index 00000000000..28af96694df
--- /dev/null
+++ b/curriculum/challenges/arabic/25-front-end-development/front-end-development-certification-exam/645147516c245de4d11eb7ba.md
@@ -0,0 +1,20 @@
+---
+id: 645147516c245de4d11eb7ba
+title: Front End Development Certification Exam
+challengeType: 17
+dashedName: front-end-development-certification-exam
+---
+
+# --description--
+
+Here are some rules:
+
+- click start
+
+# --instructions--
+
+# --hints--
+
+# --seed--
+
+# --solutions--
diff --git a/curriculum/challenges/arabic/25-front-end-development/learn-basic-html-by-building-a-recipe-page/66731cd027ef3acb155669f5.md b/curriculum/challenges/arabic/25-front-end-development/learn-basic-html-by-building-a-recipe-page/66731cd027ef3acb155669f5.md
new file mode 100644
index 00000000000..2b1a9d0a9de
--- /dev/null
+++ b/curriculum/challenges/arabic/25-front-end-development/learn-basic-html-by-building-a-recipe-page/66731cd027ef3acb155669f5.md
@@ -0,0 +1,28 @@
+---
+id: 66731cd027ef3acb155669f5
+title: Step 1
+challengeType: 0
+dashedName: step-1
+---
+
+# --description--
+
+step 1 instructions
+
+# --hints--
+
+Test 1
+
+```js
+
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+--fcc-editable-region--
+
+--fcc-editable-region--
+```
diff --git a/curriculum/challenges/chinese-traditional/00-certifications/front-end-development-certification/front-end-development.yml b/curriculum/challenges/chinese-traditional/00-certifications/front-end-development-certification/front-end-development.yml
new file mode 100644
index 00000000000..25d1e081292
--- /dev/null
+++ b/curriculum/challenges/chinese-traditional/00-certifications/front-end-development-certification/front-end-development.yml
@@ -0,0 +1,10 @@
+---
+id: 64514fda6c245de4d11eb7bb
+title: Front End Development Certification
+certification: front-end-development
+challengeType: 7
+isPrivate: true
+tests:
+ -
+ id: 645147516c245de4d11eb7ba
+ title: Front End Development Certification Exam
diff --git a/curriculum/challenges/chinese-traditional/03-front-end-development-libraries/sass/create-reusable-css-with-mixins.md b/curriculum/challenges/chinese-traditional/03-front-end-development-libraries/sass/create-reusable-css-with-mixins.md
index 1722751ea7c..5d1ecb6a1e1 100644
--- a/curriculum/challenges/chinese-traditional/03-front-end-development-libraries/sass/create-reusable-css-with-mixins.md
+++ b/curriculum/challenges/chinese-traditional/03-front-end-development-libraries/sass/create-reusable-css-with-mixins.md
@@ -8,85 +8,112 @@ dashedName: create-reusable-css-with-mixins
# --description--
-在 Sass 中,mixin 是一組 CSS 聲明,可以在整個樣式表中重複使用。
-
-CSS 的新功能需要一段時間適配後,所有瀏覽器後才能完全使用。 隨着瀏覽器的不斷升級,使用這些 CSS 規則時可能需要添加瀏覽器前綴。 考慮 `box-shadow`:
+In Sass, a mixin is a group of CSS declarations that can be reused throughout the style sheet. The definition starts with the `@mixin` at-rule, followed by a custom name. You apply the mixin using the `@include` at-rule.
```scss
-div {
- -webkit-box-shadow: 0px 0px 4px #fff;
- -moz-box-shadow: 0px 0px 4px #fff;
- -ms-box-shadow: 0px 0px 4px #fff;
- box-shadow: 0px 0px 4px #fff;
+@mixin reset-list {
+ margin: 0;
+ padding: 0;
+ list-style: none;
+}
+
+nav ul {
+ @include reset-list;
}
```
-對於所有具有 `box-shadow` 屬性的元素重寫此規則,或者更改每個值以測試不同的效果,需要花費大量的精力。 Mixins 就像 CSS 的函數。 以下是一個例子:
+Compiles to:
-```scss
-@mixin box-shadow($x, $y, $blur, $c){
- -webkit-box-shadow: $x $y $blur $c;
- -moz-box-shadow: $x $y $blur $c;
- -ms-box-shadow: $x $y $blur $c;
- box-shadow: $x $y $blur $c;
+```css
+nav ul {
+ margin: 0;
+ padding: 0;
+ list-style: none;
}
```
-定義以 `@mixin` 開頭,後跟自定義名稱。 參數(`$x`,`$y`,`$blur`,以及上例中的 `$c` )是可選的。 現在在需要 `box-shadow` 規則的地方,只需一行 mixin 調用而無需添加所有的瀏覽器前綴。 mixin 可以通過 `@include` 指令調用。
+Your mixins can also take arguments, which allows their behavior to be customized. The arguments are required when using the mixin.
```scss
-div {
- @include box-shadow(0px, 0px, 4px, #fff);
+@mixin prose($font-size, $spacing) {
+ font-size: $font-size;
+ margin: 0;
+ margin-block-end: $spacing;
+}
+
+p {
+ @include prose(1.25rem, 1rem);
+}
+
+h2 {
+ @include prose(2.4rem, 1.5rem);
+}
+```
+
+You can make arguments optional by giving the parameters default values.
+
+```scss
+@mixin text-color($color: black) {
+ color: $color;
+}
+
+p {
+ @include text-color(); /* color: black */
+}
+
+nav a {
+ @include text-color(orange);
}
```
# --instructions--
-爲 `border-radius` 寫一個 mixin,並給它一個 `$radius` 參數。 應該使用之前例子中的所有瀏覽器前綴。 然後使用 `border-radius` mixin 爲 `#awesome` 元素提供 `15px` 的邊框半徑。
+Write a mixin named `shape` and give it 3 parameters: `$w`, `$h`, and `$bg-color`.
+
+Use the `shape` mixin to give the `#square` element a width and height of `50px`, and the color `red`. For the `#rect-a` element add a width of `100px`, a height of `50px`, and the color `blue`. Finally, for the `#rect-b` element add a width of `50px`, a height of `100px`, and the color `orange`.
# --hints--
-應聲明名爲 `border-radius` 的 mixin,其中包含名爲 `$radius` 的參數。
+You should declare a mixin named `shape` with 3 parameters: `$w`, `$h`, and `$bg-color`.
```js
-assert(code.match(/@mixin\s+?border-radius\s*?\(\s*?\$radius\s*?\)\s*?{/gi));
+assert.match(code, /@mixin\s+shape\s*\(\s*\$w,\s*\$h,\s*\$bg-color\s*\)\s*{/gi);
```
-應該給 `$radius` 添加 `-webkit-border-radius` 瀏覽器前綴。
+Your mixin should include a `width` property that uses the `$w` parameter.
```js
-assert(
- __helpers.removeWhiteSpace(code).match(/-webkit-border-radius:\$radius;/gi)
-);
+assert.match(__helpers.removeWhiteSpace(code), /width:\$w;/gi);
```
-應該給 `$radius` 添加 `-moz-border-radius` 瀏覽器前綴。
+Your mixin should include a `height` property that uses the `$h` parameter.
```js
-assert(
- __helpers.removeWhiteSpace(code).match(/-moz-border-radius:\$radius;/gi)
-);
+assert.match(__helpers.removeWhiteSpace(code), /height:\$h;/gi);
```
-應該給 `$radius` 添加 `-ms-border-radius` 瀏覽器前綴。
+Your mixin should include a `background-color` property that uses the `$bg-color` parameter.
```js
-assert(__helpers.removeWhiteSpace(code).match(/-ms-border-radius:\$radius;/gi));
+assert.match(__helpers.removeWhiteSpace(code), /background-color:\$bg\-color;/gi);
```
-應該給 `$radius` 添加 `border-radius`。
+You should replace the styles inside the `#square` selector with a call to the `shape` mixin using the `@include` keyword. Setting a width and height of `50px`, and the color `red`.
```js
-assert(
- __helpers.removeWhiteSpace(code).match(/border-radius:\$radius;/gi).length ==
- 4
-);
+assert.match(code, /#square\s*{\s*@include\s+shape\(\s*50px,\s*50px,\s*red\s*\)\s*;\s*}/gi);
```
-應使用 `@include` 關鍵字調用 `border-radius mixin`,並將其設置爲 `15px`。
+You should replace the styles inside the `#rect-a` selector with a call to the `shape` mixin using the `@include` keyword. Setting a width of `100px`, a height of `50px`, and the color `blue`.
```js
-assert(code.match(/@include\s+?border-radius\(\s*?15px\s*?\)\s*;/gi));
+assert.match(code, /#rect-a\s*{\s*@include\s+shape\(\s*100px,\s*50px,\s*blue\s*\)\s*;\s*}/gi);
+```
+
+You should replace the styles inside the `#rect-b` selector with a call to the `shape` mixin using the `@include` keyword. Setting a width of `50px`, a height of `100px`, and the color `orange`.
+
+```js
+assert.match(code, /#rect-b\s*{\s*@include\s+shape\(\s*50px,\s*100px,\s*orange\s*\)\s*;\s*}/gi);
```
# --seed--
@@ -95,38 +122,54 @@ assert(code.match(/@include\s+?border-radius\(\s*?15px\s*?\)\s*;/gi));
```html
-
+
+
+
```
# --solutions--
```html
-
+
+
+
```
diff --git a/curriculum/challenges/chinese-traditional/09-information-security/information-security-projects/stock-price-checker.md b/curriculum/challenges/chinese-traditional/09-information-security/information-security-projects/stock-price-checker.md
index cf74a2efd59..75aa48e4eba 100644
--- a/curriculum/challenges/chinese-traditional/09-information-security/information-security-projects/stock-price-checker.md
+++ b/curriculum/challenges/chinese-traditional/09-information-security/information-security-projects/stock-price-checker.md
@@ -20,7 +20,7 @@ dashedName: stock-price-checker
# --instructions--
-1. 將 `NODE_ENV` 設置爲 `test`,不帶引號,並將 `DB` 設爲你的 MongoDB 連接字符串。
+1. Set the `NODE_ENV` environment variable to `test`, without quotes
2. 在 `routes/api.js` 中完成項目,或者通過創建一個處理程序/控制器來完成項目
3. 添加安全功能到 `server.js`。
4. 在 `tests/2_functional-tests.js` 中創建所有的功能測試
diff --git a/curriculum/challenges/chinese-traditional/14-responsive-web-design-22/learn-basic-css-by-building-a-cafe-menu/5f3477cb2e27333b1ab2b955.md b/curriculum/challenges/chinese-traditional/14-responsive-web-design-22/learn-basic-css-by-building-a-cafe-menu/5f3477cb2e27333b1ab2b955.md
index a5c3c1ea1b4..d5c51a6f67c 100644
--- a/curriculum/challenges/chinese-traditional/14-responsive-web-design-22/learn-basic-css-by-building-a-cafe-menu/5f3477cb2e27333b1ab2b955.md
+++ b/curriculum/challenges/chinese-traditional/14-responsive-web-design-22/learn-basic-css-by-building-a-cafe-menu/5f3477cb2e27333b1ab2b955.md
@@ -7,7 +7,7 @@ dashedName: step-16
# --description--
-現在你需要鏈接 `styles.css` 文件,以便再次應用這些樣式。 在 `head` 元素中嵌套一個自閉合 `link` 元素。 給它一個 `rel` 屬性,值爲 `stylesheet` 和一個 `href` 屬性,值爲 `styles.css`。
+Now you need to link the `styles.css` file, so the styles will be applied again. Inside the `head` element, add a `link` element. Give it a `rel` attribute with the value of `"stylesheet"` and a `href` attribute with the value of `"styles.css"`.
# --hints--
diff --git a/curriculum/challenges/chinese-traditional/15-javascript-algorithms-and-data-structures-22/build-a-pokemon-search-app-project/build-a-pokemon-search-app.md b/curriculum/challenges/chinese-traditional/15-javascript-algorithms-and-data-structures-22/build-a-pokemon-search-app-project/build-a-pokemon-search-app.md
index 01999562d80..81108aec3d1 100644
--- a/curriculum/challenges/chinese-traditional/15-javascript-algorithms-and-data-structures-22/build-a-pokemon-search-app-project/build-a-pokemon-search-app.md
+++ b/curriculum/challenges/chinese-traditional/15-javascript-algorithms-and-data-structures-22/build-a-pokemon-search-app-project/build-a-pokemon-search-app.md
@@ -15,7 +15,7 @@ In this project, you'll build an app that will search for Pokémon by name or ID
**User Stories:**
1. You should have an `input` element with an `id` of `"search-input"`
-1. You should have a `button` element with an `id` of `"search-button`
+1. You should have a `button` element with an `id` of `"search-button"`
1. You should have an element with an `id` of `"pokemon-name"`
1. You should have an element with an `id` of `"pokemon-id"`
1. You should have an element with an `id` of `"weight"`
diff --git a/curriculum/challenges/chinese-traditional/15-javascript-algorithms-and-data-structures-22/learn-basic-javascript-by-building-a-role-playing-game/62a7bfabe119461eb13ccbd6.md b/curriculum/challenges/chinese-traditional/15-javascript-algorithms-and-data-structures-22/learn-basic-javascript-by-building-a-role-playing-game/62a7bfabe119461eb13ccbd6.md
index 6040d1028d3..c2bbf7a9cf9 100644
--- a/curriculum/challenges/chinese-traditional/15-javascript-algorithms-and-data-structures-22/learn-basic-javascript-by-building-a-role-playing-game/62a7bfabe119461eb13ccbd6.md
+++ b/curriculum/challenges/chinese-traditional/15-javascript-algorithms-and-data-structures-22/learn-basic-javascript-by-building-a-role-playing-game/62a7bfabe119461eb13ccbd6.md
@@ -7,7 +7,7 @@ dashedName: step-41
# --description--
-Now you need to modify your display text. Change the `innerText` property of the `text` to be `"You enter the store."`.
+Now you need to modify your display text. Change the `innerText` property of the `text` variable to be `"You enter the store."`.
# --hints--
@@ -153,6 +153,7 @@ function goStore() {
button1.onclick = buyHealth;
button2.onclick = buyWeapon;
button3.onclick = goTown;
+
}
--fcc-editable-region--
diff --git a/curriculum/challenges/chinese-traditional/15-javascript-algorithms-and-data-structures-22/learn-introductory-javascript-by-building-a-pyramid-generator/660ef31a5be625914a0102cd.md b/curriculum/challenges/chinese-traditional/15-javascript-algorithms-and-data-structures-22/learn-introductory-javascript-by-building-a-pyramid-generator/660ef31a5be625914a0102cd.md
index 168a21853ad..4a146d01066 100644
--- a/curriculum/challenges/chinese-traditional/15-javascript-algorithms-and-data-structures-22/learn-introductory-javascript-by-building-a-pyramid-generator/660ef31a5be625914a0102cd.md
+++ b/curriculum/challenges/chinese-traditional/15-javascript-algorithms-and-data-structures-22/learn-introductory-javascript-by-building-a-pyramid-generator/660ef31a5be625914a0102cd.md
@@ -14,7 +14,7 @@ let programmer = "Naomi";
programmer = "CamperChan";
```
-Note that when reassigning a variable, you do **not** use the `let` keyword again.
+請注意,當重新賦值一個變量時,你 **不需要** 再使用 `let` 關鍵字。
在 `console.log` 語句後,將 `"World"` 賦值給變量 `character`。
diff --git a/curriculum/challenges/chinese-traditional/15-javascript-algorithms-and-data-structures-22/learn-introductory-javascript-by-building-a-pyramid-generator/660f039ff313dbb696b007ca.md b/curriculum/challenges/chinese-traditional/15-javascript-algorithms-and-data-structures-22/learn-introductory-javascript-by-building-a-pyramid-generator/660f039ff313dbb696b007ca.md
index 85e60cf01cb..3815fee940f 100644
--- a/curriculum/challenges/chinese-traditional/15-javascript-algorithms-and-data-structures-22/learn-introductory-javascript-by-building-a-pyramid-generator/660f039ff313dbb696b007ca.md
+++ b/curriculum/challenges/chinese-traditional/15-javascript-algorithms-and-data-structures-22/learn-introductory-javascript-by-building-a-pyramid-generator/660f039ff313dbb696b007ca.md
@@ -7,29 +7,29 @@ dashedName: step-19
# --description--
-When an array holds values, or elements, those values are separated by commas. Here is an array that holds two strings:
+當數組包含值或 元素 時,這些值以逗號分隔。 這是一個包含兩個字符串的數組:
```js
let array = ["first", "second"];
```
-Change your `rows` declaration to be an array with the strings `"Naomi"`, `"Quincy"`, and `"CamperChan"`. The order of values in an array is important, so follow that order. Remember that strings are case-sensitive.
+將 `rows` 聲明更改爲包含字符串 `"Naomi"`、`"Quincy"` 和 `"CamperChan"` 的數組。 數組中值的順序很重要,因此請遵循該順序。 請記住,字符串區分大小寫。
# --hints--
-The first element in your array should be the string `"Naomi"`.
+數組中的第一個元素應該是字符串 `"Naomi"`。
```js
assert.equal(rows[0], "Naomi");
```
-The second element in your array should be the string `"Quincy"`.
+數組中的第二個元素應該是字符串 `"Quincy"`。
```js
assert.equal(rows[1], "Quincy");
```
-The third element in your array should be the string `"CamperChan"`.
+數組中的第三個元素應該是字符串 `"CamperChan"`。
```js
assert.equal(rows[2], "CamperChan");
diff --git a/curriculum/challenges/chinese-traditional/15-javascript-algorithms-and-data-structures-22/learn-introductory-javascript-by-building-a-pyramid-generator/660f09a2694b59c3a10ee304.md b/curriculum/challenges/chinese-traditional/15-javascript-algorithms-and-data-structures-22/learn-introductory-javascript-by-building-a-pyramid-generator/660f09a2694b59c3a10ee304.md
index 10548b4f96f..cf2d3a2c2e3 100644
--- a/curriculum/challenges/chinese-traditional/15-javascript-algorithms-and-data-structures-22/learn-introductory-javascript-by-building-a-pyramid-generator/660f09a2694b59c3a10ee304.md
+++ b/curriculum/challenges/chinese-traditional/15-javascript-algorithms-and-data-structures-22/learn-introductory-javascript-by-building-a-pyramid-generator/660f09a2694b59c3a10ee304.md
@@ -7,23 +7,23 @@ dashedName: step-23
# --description--
-For now, remove your first console log and your `rows[rows.length - 1]` assignment. Leave the second `rows` log statement for later.
+現在,刪除你的第一個控制檯日誌和 `rows[rows.length - 1]` 賦值。 將第二個 `rows` 日誌語句留待以後使用。
# --hints--
-You should remove your `console.log(rows[0])` statement.
+你應該刪除 `console.log(rows[0])` 語句。
```js
assert.notMatch(__helpers.removeJSComments(code), /console\.log\(\s*rows\[\s*0\s*\]\s*\)/);
```
-You should remove your `rows[rows.length - 1]` reassignment.
+你應該刪除 `rows[rows.length - 1]` 重新賦值。
```js
assert.notMatch(__helpers.removeJSComments(code), /rows\[\s*rows\.length\s*-\s*1\s*\]/);
```
-You should not remove your `console.log(rows)` statement.
+你不應刪除 `console.log(rows)` 語句。
```js
assert.match(__helpers.removeJSComments(code), /console\.log\(\s*rows\s*\);/);
diff --git a/curriculum/challenges/chinese-traditional/15-javascript-algorithms-and-data-structures-22/learn-introductory-javascript-by-building-a-pyramid-generator/660f207334fabaeac3269c38.md b/curriculum/challenges/chinese-traditional/15-javascript-algorithms-and-data-structures-22/learn-introductory-javascript-by-building-a-pyramid-generator/660f207334fabaeac3269c38.md
index 25be5a84396..4d40c6a1fc1 100644
--- a/curriculum/challenges/chinese-traditional/15-javascript-algorithms-and-data-structures-22/learn-introductory-javascript-by-building-a-pyramid-generator/660f207334fabaeac3269c38.md
+++ b/curriculum/challenges/chinese-traditional/15-javascript-algorithms-and-data-structures-22/learn-introductory-javascript-by-building-a-pyramid-generator/660f207334fabaeac3269c38.md
@@ -7,9 +7,9 @@ dashedName: step-41
# --description--
-To manipulate the `result` string, you will use a different type of loop. Specifically, a `for...of` loop, which iterates over each item in an iterable object and temporarily assigns it to a variable.
+要操作 `result` 字符串,你將使用不同類型的循環。 具體來說,`for...of` 循環遍歷可迭代對象中的每個項目並將其臨時分配給變量。
-The syntax for a `for...of` loop looks like:
+`for...of` 循環的語法如下:
```js
for (const value of iterable) {
@@ -17,9 +17,9 @@ for (const value of iterable) {
}
```
-Note that you can use `const` because the variable only exists for a single iteration, not during the entire loop.
+請注意,你可以使用 `const`,因爲該變量僅在一次迭代中存在,而不是在整個循環期間存在。
-Create a `for...of` loop to iterate through your `rows` array, assigning each value to a `row` variable.
+創建一個 `for...of` 循環來遍歷 `rows` 數組,並將每個值分配給 `row` 變量。
# --hints--
diff --git a/curriculum/challenges/chinese-traditional/15-javascript-algorithms-and-data-structures-22/learn-introductory-javascript-by-building-a-pyramid-generator/660f23b53db70af0f2620e78.md b/curriculum/challenges/chinese-traditional/15-javascript-algorithms-and-data-structures-22/learn-introductory-javascript-by-building-a-pyramid-generator/660f23b53db70af0f2620e78.md
index cd49712ba2d..d20a9984e07 100644
--- a/curriculum/challenges/chinese-traditional/15-javascript-algorithms-and-data-structures-22/learn-introductory-javascript-by-building-a-pyramid-generator/660f23b53db70af0f2620e78.md
+++ b/curriculum/challenges/chinese-traditional/15-javascript-algorithms-and-data-structures-22/learn-introductory-javascript-by-building-a-pyramid-generator/660f23b53db70af0f2620e78.md
@@ -7,37 +7,37 @@ dashedName: step-43
# --description--
-Now all of your numbers are appearing on the same line. This will not work for creating a pyramid.
+現在,你的所有數字都出現在同一行上。 這對於創建金字塔不起作用。
-You will need to add a new line to each row. However, pressing the return key to insert a line break between quotes in JavaScript will result in a parsing error. Instead, you need to use the special escape sequence `\n`, which is interpreted as a new line when the string is logged. For example:
+你需要在每一行中添加一個新行。 但是,在 JavaScript 中按回車鍵在引號之間插入換行符將導致解析錯誤。 相反,你需要使用特殊的 轉義序列 `\n`,它在記錄字符串時被解釋爲新行。 例如:
```js
lineOne = lineOne + "\n" + lineTwo;
```
-Use a second addition operator to concatenate a new line between the existing `result` value and the added `row` value.
+使用第二個加法運算符在現有的 `result` 值和添加的 `row` 值之間連接一個新行。
# --hints--
-You should use the `\n` escape sequence. Remember that it needs to be a string, so it is wrapped in quotes.
+你應該使用 `\n` 轉義序列。 請記住,它需要是一個字符串,因此用引號括起來。
```js
assert.match(__helpers.removeJSComments(code), /('|")\\n\1/);
```
-You should concatenate the `\n` escape sequence to your `result` variable.
+你應該將 `\n` 轉義序列連接到 `result` 變量。
```js
assert.match(__helpers.removeJSComments(code), /result\s*\+\s*('|")\\n\1/);
```
-You should concatenate your `row` variable to your `\n` escape sequence.
+你應該將 `row` 變量連接到 `\n` 轉義序列。
```js
assert.match(__helpers.removeJSComments(code), /result\s*\+\s*('|")\\n\1\s*\+\s*row/);
```
-You should assign the entire concatenation back to your `result` variable. Don't forget your semicolon.
+你應該將整個連接分配回你的 `result` 變量。 Don't forget your semicolon.
```js
assert.match(__helpers.removeJSComments(code), /result\s*=\s*result\s*\+\s*('|")\\n\1\s*\+\s*row;/);
diff --git a/curriculum/challenges/chinese-traditional/15-javascript-algorithms-and-data-structures-22/learn-introductory-javascript-by-building-a-pyramid-generator/660f280dda5040f707c76b4a.md b/curriculum/challenges/chinese-traditional/15-javascript-algorithms-and-data-structures-22/learn-introductory-javascript-by-building-a-pyramid-generator/660f280dda5040f707c76b4a.md
index 5254f9ff694..4f2e08e778e 100644
--- a/curriculum/challenges/chinese-traditional/15-javascript-algorithms-and-data-structures-22/learn-introductory-javascript-by-building-a-pyramid-generator/660f280dda5040f707c76b4a.md
+++ b/curriculum/challenges/chinese-traditional/15-javascript-algorithms-and-data-structures-22/learn-introductory-javascript-by-building-a-pyramid-generator/660f280dda5040f707c76b4a.md
@@ -7,32 +7,32 @@ dashedName: step-45
# --description--
-Now you have a series of `#` characters, but the pyramid shape is still missing. Fortunately, the `i` variable represents the current "row" number in your loop, enabling you to use it for crafting a pyramid-like structure.
+現在你有一系列 `#` 字符,但仍然缺少金字塔形狀。 幸運的是,`i` 變量代表循環中的當前“行”號,使你能夠使用它來製作類似金字塔的結構。
-To achieve this, you will use the `.repeat()` method available to strings. This method accepts a number as an argument, specifying the number of times to repeat the target string. For example, using `.repeat()` to generate the string `"Code! Code! Code!"`:
+爲了實現這一點,你將使用字符串可用的 `.repeat()` 方法。 該方法接受一個數字作爲參數,指定重複目標字符串的次數。 例如使用 `.repeat()` 生成字符串 `"Code! Code! Code!"`:
```js
const activity = "Code! ";
activity.repeat(3);
```
-Use the `.repeat()` method on your `character`, and give it `i` for the number.
+在你的 `character` 上使用 `.repeat()` 方法,併爲其提供 `i` 作爲數字。
# --hints--
-You should use the `.repeat()` method.
+你應該使用 `.repeat()` 方法。
```js
assert.match(__helpers.removeJSComments(code), /\.repeat\(/);
```
-You should use the `.repeat()` method on your `character` variable.
+你應該在 `character` 變量上使用 `.repeat()` 方法。
```js
assert.match(__helpers.removeJSComments(code), /character\.repeat\(/);
```
-You should pass `i` to your `.repeat()` method.
+你應該將 `i` 傳遞給你的 `.repeat()` 方法。
```js
assert.match(__helpers.removeJSComments(code), /character\.repeat\(\s*i\s*\)/)
diff --git a/curriculum/challenges/chinese-traditional/15-javascript-algorithms-and-data-structures-22/learn-introductory-javascript-by-building-a-pyramid-generator/660f2eccfe3f820304af1b39.md b/curriculum/challenges/chinese-traditional/15-javascript-algorithms-and-data-structures-22/learn-introductory-javascript-by-building-a-pyramid-generator/660f2eccfe3f820304af1b39.md
index 86345a8a9f0..5fb86520a96 100644
--- a/curriculum/challenges/chinese-traditional/15-javascript-algorithms-and-data-structures-22/learn-introductory-javascript-by-building-a-pyramid-generator/660f2eccfe3f820304af1b39.md
+++ b/curriculum/challenges/chinese-traditional/15-javascript-algorithms-and-data-structures-22/learn-introductory-javascript-by-building-a-pyramid-generator/660f2eccfe3f820304af1b39.md
@@ -7,9 +7,9 @@ dashedName: step-64
# --description--
-In order to know how to format a row, your `padRow` function will need to know which row number you are on, and how many rows in total are being generated.
+要知道如何格式化一行,你的 `padRow` 函數需要知道你所在的行號,以及總共生成了多少行。
-The best way to do this is by creating function parameters for them. Give your `padRow` function a `rowNumber` and `rowCount` parameter. Multiple parameters are separated by a comma:
+最好的方法是給它們創建函數參數。 爲 `padRow` 函數提供 `rowNumber` 和 `rowCount` 參數。 多個參數以逗號分隔:
```js
function name(first, second) {
@@ -19,19 +19,19 @@ function name(first, second) {
# --hints--
-Your `padRow` function should have a `rowNumber` parameter.
+你的 `padRow` 函數應該有一個 `rowNumber` 參數。
```js
assert.match(__helpers.removeJSComments(code), /function\s+padRow\s*\(\s*rowNumber/);
```
-You should add a comma after your `rowNumber` parameter.
+你應該在 `rowNumber` 參數後添加一個逗號。
```js
assert.match(__helpers.removeJSComments(code), /function\s+padRow\s*\(\s*rowNumber\s*,\s*/);
```
-Your `padRow` function should have a `rowCount` parameter.
+你的 `padRow` 函數應該有一個 `rowCount` 參數。
```js
assert.match(__helpers.removeJSComments(code), /function\s+padRow\s*\(\s*rowNumber\s*,\s*rowCount\s*\)/);
diff --git a/curriculum/challenges/chinese-traditional/15-javascript-algorithms-and-data-structures-22/learn-introductory-javascript-by-building-a-pyramid-generator/660f359af3e32e0f1a6880b7.md b/curriculum/challenges/chinese-traditional/15-javascript-algorithms-and-data-structures-22/learn-introductory-javascript-by-building-a-pyramid-generator/660f359af3e32e0f1a6880b7.md
index 06d3c8f0d71..047149f8cde 100644
--- a/curriculum/challenges/chinese-traditional/15-javascript-algorithms-and-data-structures-22/learn-introductory-javascript-by-building-a-pyramid-generator/660f359af3e32e0f1a6880b7.md
+++ b/curriculum/challenges/chinese-traditional/15-javascript-algorithms-and-data-structures-22/learn-introductory-javascript-by-building-a-pyramid-generator/660f359af3e32e0f1a6880b7.md
@@ -7,11 +7,11 @@ dashedName: step-68
# --description--
-You should now see the same bunch of characters in your console. Your `padRow` function is doing the exact same thing you were doing earlier, but now it's in a reusable section of its own.
+現在你應該在控制檯中看到同一組字符。 你的 `padRow` 函數正在執行與你之前完全相同的操作,但現在它位於其自己的可重複使用部分中。
-Use the addition operator to concatenate a single space `" "` to the beginning and end of your repeated `character` string.
+使用加法運算符將單個空格 `" "` 連接到重複 `character` 字符串的開頭和結尾。
-Remember that you can use the `+` operator to concatenate strings like this:
+請記住,你可以使用 `+` 運算符來連接字符串,如下所示:
```js
" " + "string"
@@ -19,19 +19,19 @@ Remember that you can use the `+` operator to concatenate strings like this:
# --hints--
-You should concatenate a single space to the beginning of your returned value.
+你應該將一個空格連接到返回值的開頭。
```js
assert.match(padRow(1, 1), /^\s/);
```
-You should concatenate a single space to the end of your returned value.
+你應該將一個空格連接到返回值的末尾。
```js
assert.match(padRow(1, 1), /\s$/);
```
-Your `padRow()` function should return the repeated `character` series with a space before and after the series.
+你的 `padRow()` 函數應返回重複的 `character` 系列,並且在系列前後都有空格。
```js
assert.equal(padRow(1, 1), " # ");
diff --git a/curriculum/challenges/chinese-traditional/15-javascript-algorithms-and-data-structures-22/learn-introductory-javascript-by-building-a-pyramid-generator/660f447efc0e722f016c1be0.md b/curriculum/challenges/chinese-traditional/15-javascript-algorithms-and-data-structures-22/learn-introductory-javascript-by-building-a-pyramid-generator/660f447efc0e722f016c1be0.md
index 0fb6f075d43..442897d0a49 100644
--- a/curriculum/challenges/chinese-traditional/15-javascript-algorithms-and-data-structures-22/learn-introductory-javascript-by-building-a-pyramid-generator/660f447efc0e722f016c1be0.md
+++ b/curriculum/challenges/chinese-traditional/15-javascript-algorithms-and-data-structures-22/learn-introductory-javascript-by-building-a-pyramid-generator/660f447efc0e722f016c1be0.md
@@ -7,17 +7,17 @@ dashedName: step-81
# --description--
-The text has appeared again! This is because `"false"` is a string, which when evaluated to a boolean becomes `true`. This means `"false"` is a truthy value.
+文字又出現了! 這是因爲 `"false"` 是一個字符串,當將其計算爲布爾值時變爲 `true`。 這意味着 `"false"` 是一個真值。
-A truthy value is a value that is considered true when evaluated as a boolean. Most of the values you encounter in JavaScript will be truthy.
+真值是作爲布爾值評估時被視爲真的值。 你在 JavaScript 中遇到的大多數值都是真值。
-A falsy value is the opposite - a value considered false when evaluated as a boolean. JavaScript has a defined list of falsy values. Some of them include `false`, `0`, `""`, `null`, `undefined`, and `NaN`.
+假值則相反 - 當作爲布爾值評估時被視爲假的值。 JavaScript 有一個定義的假值列表。 其中包括 `false`、`0`、`""`、`null`、`undefined` 和 `NaN`。
-Try changing your `if` condition to an empty string `""`, which is a falsy value.
+嘗試將你的 `if` 條件更改爲空字符串 `""`,這是一個假值。
# --hints--
-Your `if` statement should have `""` as the condition.
+你的 `if` 語句應以 `""` 作爲條件。
```js
assert.match(__helpers.removeJSComments(code), /if\s*\(\s*("|')\1\s*\)/);
diff --git a/curriculum/challenges/chinese-traditional/15-javascript-algorithms-and-data-structures-22/learn-introductory-javascript-by-building-a-pyramid-generator/660f535ec33a285b33af3774.md b/curriculum/challenges/chinese-traditional/15-javascript-algorithms-and-data-structures-22/learn-introductory-javascript-by-building-a-pyramid-generator/660f535ec33a285b33af3774.md
index 43dde2a1425..e0943fe32bf 100644
--- a/curriculum/challenges/chinese-traditional/15-javascript-algorithms-and-data-structures-22/learn-introductory-javascript-by-building-a-pyramid-generator/660f535ec33a285b33af3774.md
+++ b/curriculum/challenges/chinese-traditional/15-javascript-algorithms-and-data-structures-22/learn-introductory-javascript-by-building-a-pyramid-generator/660f535ec33a285b33af3774.md
@@ -17,7 +17,7 @@ dashedName: step-116
assert.match(__helpers.removeJSComments(code), /if\s*\(\s*inverted\s*\)\s*\{\s*rows\.unshift\(\s*padRow\(\s*i\s*,\s*count\s*\)\s*\);\s*\}\s*else\s*\{\s*rows\.push\(\s*/);
```
-你應該將 `padRow()` 調用作爲 `.unshift()` 方法的參數傳遞。
+You should pass a `padRow()` call as the argument for your `.push()` method.
```js
assert.match(__helpers.removeJSComments(code), /if\s*\(\s*inverted\s*\)\s*\{\s*rows\.unshift\(\s*padRow\(\s*i\s*,\s*count\s*\)\s*\);\s*\}\s*else\s*\{\s*rows\.push\(\s*padRow\(/);
diff --git a/curriculum/challenges/chinese-traditional/15-javascript-algorithms-and-data-structures-22/learn-introductory-javascript-by-building-a-pyramid-generator/6610b741b54b90f0c0fb3d58.md b/curriculum/challenges/chinese-traditional/15-javascript-algorithms-and-data-structures-22/learn-introductory-javascript-by-building-a-pyramid-generator/6610b741b54b90f0c0fb3d58.md
index e1ff7a25c53..c178516ae8f 100644
--- a/curriculum/challenges/chinese-traditional/15-javascript-algorithms-and-data-structures-22/learn-introductory-javascript-by-building-a-pyramid-generator/6610b741b54b90f0c0fb3d58.md
+++ b/curriculum/challenges/chinese-traditional/15-javascript-algorithms-and-data-structures-22/learn-introductory-javascript-by-building-a-pyramid-generator/6610b741b54b90f0c0fb3d58.md
@@ -7,9 +7,9 @@ dashedName: step-8
# --description--
-When variable names are more than one word, there are specific naming conventions for how you capitalize the words. In JavaScript, the convention to use is camel case.
+當變量名超過一個單詞時,對於如何將單詞大寫,有特定的命名約定。 在 JavaScript 中,使用的約定是 駝峯式命名法。
-Camel case means that the first word in the name is entirely lowercase, but the following words are all title-cased. Here are some examples of camel case:
+駝峯式大小寫是指名稱中的第一個單詞全部小寫,但後續單詞均採用首字母大寫。 以下是駝峯式命名法的一些示例:
```js
let variableOne;
@@ -18,23 +18,23 @@ let yetAnotherVariable;
let thisIsAnAbsurdlyLongName;
```
-Use camel case to declare a new `secondCharacter` variable.
+使用駝峯式命名法聲明一個新的 `secondCharacter` 變量。
# --hints--
-You should declare a `secondCharacter` variable.
+你應該聲明一個 `secondCharacter` 變量。
```js
assert.match(__helpers.removeJSComments(code), /secondCharacter/);
```
-You should use `let` to declare your `secondCharacter` variable.
+你應該使用 `let` 來聲明你的 `secondCharacter` 變量。
```js
assert.match(__helpers.removeJSComments(code), /let\s+secondCharacter/);
```
-You should not assign a value to your `secondCharacter` variable. Do not forget your semicolon.
+你不應該爲 `secondCharacter` 變量賦值。 Do not forget your semicolon.
```js
assert.match(__helpers.removeJSComments(code), /let\s+secondCharacter;/);
diff --git a/curriculum/challenges/chinese-traditional/15-javascript-algorithms-and-data-structures-22/learn-introductory-javascript-by-building-a-pyramid-generator/6610b9f7619764fad5fd516d.md b/curriculum/challenges/chinese-traditional/15-javascript-algorithms-and-data-structures-22/learn-introductory-javascript-by-building-a-pyramid-generator/6610b9f7619764fad5fd516d.md
index c9c1d800377..9684361ece8 100644
--- a/curriculum/challenges/chinese-traditional/15-javascript-algorithms-and-data-structures-22/learn-introductory-javascript-by-building-a-pyramid-generator/6610b9f7619764fad5fd516d.md
+++ b/curriculum/challenges/chinese-traditional/15-javascript-algorithms-and-data-structures-22/learn-introductory-javascript-by-building-a-pyramid-generator/6610b9f7619764fad5fd516d.md
@@ -7,7 +7,7 @@ dashedName: step-11
# --description--
-You can also assign the value of a variable to another variable. For example:
+你還可以將一個變量的值分配給另一個變量。 例如:
```js
let first = "One";
@@ -15,27 +15,27 @@ let second = "Two";
second = first;
```
-The `second` variable would now have the value `"One"`.
+`second` 變量現在的值爲 `"One"`。
-To see this in action, change your `secondCharacter` assignment from `"Test"` to your `character` variable.
+要查看實際效果,請將 `secondCharacter` 賦值從 `"Test"` 更改爲 `character` 變量。
-Then open the console to see what gets logged.
+然後打開控制檯查看記錄的內容。
# --hints--
-You should not assign the value `"Test"` to your `secondCharacter` variable.
+你不應將值 `"Test"` 分配給 `secondCharacter` 變量。
```js
assert.notEqual(secondCharacter, "Test");
```
-You should assign the value of the `character` variable to your `secondCharacter` variable. Don't forget your semicolon.
+你應該將 `character` 變量的值分配給 `secondCharacter` 變量。 Don't forget your semicolon.
```js
assert.match(__helpers.removeJSComments(code), /secondCharacter\s*=\s*character;/);
```
-Your `secondCharacter` variable should now have the value `"World"`.
+你的 `secondCharacter` 變量現在應該具有值 `"World"`。
```js
diff --git a/curriculum/challenges/chinese-traditional/15-javascript-algorithms-and-data-structures-22/learn-introductory-javascript-by-building-a-pyramid-generator/6610bf6fa14d700beed1b109.md b/curriculum/challenges/chinese-traditional/15-javascript-algorithms-and-data-structures-22/learn-introductory-javascript-by-building-a-pyramid-generator/6610bf6fa14d700beed1b109.md
index 95026e413cd..574a58c87e9 100644
--- a/curriculum/challenges/chinese-traditional/15-javascript-algorithms-and-data-structures-22/learn-introductory-javascript-by-building-a-pyramid-generator/6610bf6fa14d700beed1b109.md
+++ b/curriculum/challenges/chinese-traditional/15-javascript-algorithms-and-data-structures-22/learn-introductory-javascript-by-building-a-pyramid-generator/6610bf6fa14d700beed1b109.md
@@ -7,19 +7,19 @@ dashedName: step-87
# --description--
-The equality operator `==` is used to check if two values are equal. To compare two values, you'd use a statement like `value == 8`.
+相等運算符 `==` 用於檢查兩個值是否相等。 要比較兩個值,你可以使用類似 `value == 8` 的語句。
-Add an `if` statement to your loop. The statement should check if `done` is equal to `count` using the equality operator.
+在循環中添加 `if` 語句。 該語句應使用相等運算符檢查 `done` 是否等於 `count`。
# --hints--
-You should use an `if` statement in your loop.
+你應該在循環中使用 `if` 語句。
```js
assert.match(__helpers.removeJSComments(code), /while\s*\(\s*continueLoop\s*\)\s*\{\s*done\+\+;\s*if/);
```
-Your `if` statement should use the equality operator to compare `done` and `count` in the condition.
+你的 `if` 語句應使用相等運算符來比較條件中的 `done` 和 `count`。
```js
assert.match(__helpers.removeJSComments(code), /while\s*\(\s*continueLoop\s*\)\s*\{\s*done\+\+;\s*if\s*\(\s*(?:done\s*==\s*count|count\s*==\s*done)\s*\)\s*\{/);
diff --git a/curriculum/challenges/chinese-traditional/15-javascript-algorithms-and-data-structures-22/learn-introductory-javascript-by-building-a-pyramid-generator/6610c105bbdacc114d6cdc44.md b/curriculum/challenges/chinese-traditional/15-javascript-algorithms-and-data-structures-22/learn-introductory-javascript-by-building-a-pyramid-generator/6610c105bbdacc114d6cdc44.md
index fac7d621a19..c7f815ec8bd 100644
--- a/curriculum/challenges/chinese-traditional/15-javascript-algorithms-and-data-structures-22/learn-introductory-javascript-by-building-a-pyramid-generator/6610c105bbdacc114d6cdc44.md
+++ b/curriculum/challenges/chinese-traditional/15-javascript-algorithms-and-data-structures-22/learn-introductory-javascript-by-building-a-pyramid-generator/6610c105bbdacc114d6cdc44.md
@@ -7,7 +7,7 @@ dashedName: step-48
# --description--
-In order to use a function, you need to call it. A function call tells your application to run the code from the function wherever you choose to call it. The syntax for a function call is the function name followed by parentheses. For example, this code defines and calls a `test` function.
+爲了使用函數,你需要調用它。 函數調用 告訴你的應用程序在你選擇調用該函數的任何地方運行該函數的代碼。 函數調用的語法是函數名稱後跟括號。 例如,此代碼定義並調用 `test` 函數。
```js
function test() {
@@ -16,17 +16,17 @@ function test() {
test();
```
-Call your `padRow` function.
+調用你的 `padRow` 函數。
# --hints--
-You should call the `padRow` function.
+你應該調用 `padRow` 函數。
```js
assert.lengthOf(__helpers.removeJSComments(code).match(/padRow\(\)/g), 2);
```
-Your `padRow` function body should be empty.
+你的 `padRow` 函數體應該是空的。
```js
assert.match(padRow.toString(), /\{\s*\}/);
diff --git a/curriculum/challenges/chinese-traditional/15-javascript-algorithms-and-data-structures-22/learn-introductory-javascript-by-building-a-pyramid-generator/6610c71600966a2191d3a64a.md b/curriculum/challenges/chinese-traditional/15-javascript-algorithms-and-data-structures-22/learn-introductory-javascript-by-building-a-pyramid-generator/6610c71600966a2191d3a64a.md
index 7445639f34d..712d62950c6 100644
--- a/curriculum/challenges/chinese-traditional/15-javascript-algorithms-and-data-structures-22/learn-introductory-javascript-by-building-a-pyramid-generator/6610c71600966a2191d3a64a.md
+++ b/curriculum/challenges/chinese-traditional/15-javascript-algorithms-and-data-structures-22/learn-introductory-javascript-by-building-a-pyramid-generator/6610c71600966a2191d3a64a.md
@@ -7,7 +7,7 @@ dashedName: step-59
# --description--
-Values returned out of a function are used by calling the function. You can use the function call directly as the value it returns, or capture the returned value in a variable. This way, you can use the value assigned to a locally scoped variable, outside the function it was created in.
+函數返回的值可通過調用該函數來使用。 你可以直接使用函數調用作爲其返回的值,或者在變量中捕獲返回的值。 這樣,你就可以在創建該變量的函數之外使用分配給本地作用域變量的值。
```js
function getName() {
@@ -23,12 +23,12 @@ console.log(capturedReturnValue); // "Camper cat"
console.log(name); // reference error
```
-To use your `"Testing"` value, return it out of the `padRow` function by updating your `return` statement to return only the `test` variable.
+要使用 `"Testing"` 值,請通過更新 `return` 語句以僅返回 `test` 變量,將其從 `padRow` 函數中返回。
# --hints--
-Your `padRow` function should return the `test` variable.
+你的 `padRow` 函數應該返回 `test` 變量。
```js
assert.equal(padRow("Naomi"), "Testing");
diff --git a/curriculum/challenges/chinese-traditional/15-javascript-algorithms-and-data-structures-22/learn-the-date-object-by-building-a-date-formatter/65388edfdf364fbb04e426f2.md b/curriculum/challenges/chinese-traditional/15-javascript-algorithms-and-data-structures-22/learn-the-date-object-by-building-a-date-formatter/65388edfdf364fbb04e426f2.md
index 038fb05191a..3c1ae00439d 100644
--- a/curriculum/challenges/chinese-traditional/15-javascript-algorithms-and-data-structures-22/learn-the-date-object-by-building-a-date-formatter/65388edfdf364fbb04e426f2.md
+++ b/curriculum/challenges/chinese-traditional/15-javascript-algorithms-and-data-structures-22/learn-the-date-object-by-building-a-date-formatter/65388edfdf364fbb04e426f2.md
@@ -23,10 +23,16 @@ switch (expr) {
# --hints--
-你應該添加一個 `case`,條件是 `"yyyy-mm-dd"`。 然後將 `currentDateParagraph` 的 `textContent` 屬性設置爲 `formattedDate`。
+You should add a `case` with the value `"yyyy-mm-dd"`.
```js
-assert(code.match(/case\s*('|")yyyy-mm-dd\1\s*:\s*currentDateParagraph\.textContent\s*=\s*formattedDate/g));
+assert.match(code, /case\s*('|")yyyy-mm-dd\1\s*:\s*/);
+```
+
+You should set the `textContent` property of `currentDateParagraph` to `formattedDate` in the block of your `"yyyy-mm-dd"` case.
+
+```js
+assert.match(code, /case\s*('|")yyyy-mm-dd\1\s*:\s*currentDateParagraph\.textContent\s*=\s*formattedDate/);
```
# --seed--
diff --git a/curriculum/challenges/chinese-traditional/15-javascript-algorithms-and-data-structures-22/learn-the-date-object-by-building-a-date-formatter/65389a63d3b1d6c764c0e10e.md b/curriculum/challenges/chinese-traditional/15-javascript-algorithms-and-data-structures-22/learn-the-date-object-by-building-a-date-formatter/65389a63d3b1d6c764c0e10e.md
index fa9420f6dd5..3fc5ac3cd5b 100644
--- a/curriculum/challenges/chinese-traditional/15-javascript-algorithms-and-data-structures-22/learn-the-date-object-by-building-a-date-formatter/65389a63d3b1d6c764c0e10e.md
+++ b/curriculum/challenges/chinese-traditional/15-javascript-algorithms-and-data-structures-22/learn-the-date-object-by-building-a-date-formatter/65389a63d3b1d6c764c0e10e.md
@@ -13,16 +13,22 @@ dashedName: step-27
# --hints--
-你應該添加一個 `case`,條件是 `"mm-dd-yyyy-h-mm"`,然後將 `currentDateParagraph` 的 `textContent` 屬性設置爲空的模板字面量。
+You should add a `case` with the value `"mm-dd-yyyy-h-mm"`.
```js
-assert(code.match(/case\s*('|")mm-dd-yyyy-h-mm\1\s*:\s*currentDateParagraph\.textContent\s*=\s*``/g));
+assert.match(code, /case\s*('|")mm-dd-yyyy-h-mm\1\s*:\s*/);
```
-你應該在邏輯代碼後面的 `case` 語句中包含 `break` 語句。
+You should set the `textContent` property of `currentDateParagraph` to an empty template literals inside the block of your `"mm-dd-yyyy-h-mm"` case.
```js
-assert(code.match(/currentDateParagraph\.textContent\s*=\s*``\s*;?\n+\s*break/g));
+assert.match(code, /case\s*('|")mm-dd-yyyy-h-mm\1\s*:\s*currentDateParagraph\.textContent\s*=\s*``/);
+```
+
+You should include a `break` statement in the `"mm-dd-yyyy-h-mm"` `case` after your logic.
+
+```js
+assert.match(code, /currentDateParagraph\.textContent\s*=\s*``\s*;?\n+\s*break/);
```
# --seed--
diff --git a/curriculum/challenges/chinese-traditional/15-javascript-algorithms-and-data-structures-22/learn-the-date-object-by-building-a-date-formatter/65389eff4893facbbe6eae67.md b/curriculum/challenges/chinese-traditional/15-javascript-algorithms-and-data-structures-22/learn-the-date-object-by-building-a-date-formatter/65389eff4893facbbe6eae67.md
index 88c41bd37fa..28ecdd4df0d 100644
--- a/curriculum/challenges/chinese-traditional/15-javascript-algorithms-and-data-structures-22/learn-the-date-object-by-building-a-date-formatter/65389eff4893facbbe6eae67.md
+++ b/curriculum/challenges/chinese-traditional/15-javascript-algorithms-and-data-structures-22/learn-the-date-object-by-building-a-date-formatter/65389eff4893facbbe6eae67.md
@@ -31,10 +31,16 @@ switch (dayOfWeek) {
# --hints--
-你應該使用 `default` 情況將 `currentDateParagraph` 的 `textContent` 屬性設置爲 `formattedDate` 的值。
+You should have a `default` case after the existing cases.
```js
-assert(code.match(/default\s*:\s*currentDateParagraph\.textContent\s*=\s*formattedDate/g));
+assert.match(code, /default\s*:\s*/)
+```
+
+In the block of the `default` case, set the `textContent` property of `currentDateParagraph` to `formattedDate`.
+
+```js
+assert.match(code, /default\s*:\s*currentDateParagraph\.textContent\s*=\s*formattedDate/g);
```
# --seed--
diff --git a/curriculum/challenges/chinese-traditional/16-the-odin-project/top-build-a-rock-paper-scissors-game/build-a-rock-paper-scissors-game.md b/curriculum/challenges/chinese-traditional/16-the-odin-project/top-build-a-rock-paper-scissors-game/build-a-rock-paper-scissors-game.md
new file mode 100644
index 00000000000..d31a63c9495
--- /dev/null
+++ b/curriculum/challenges/chinese-traditional/16-the-odin-project/top-build-a-rock-paper-scissors-game/build-a-rock-paper-scissors-game.md
@@ -0,0 +1,261 @@
+---
+id: 66629f407d679d3105e8317f
+title: Build a Rock Paper Scissors Game
+challengeType: 14
+dashedName: top-build-a-rock-paper-scissors-game
+---
+
+# --description--
+Your game will be played against the computer. You will write a function that randomly returns `"rock"`, `"paper"` or `"scissors"`.
+
+You do not need to worry about the front-end part of the game. You will only write the logic for the game. Open the `script.js` and start following the instructions.
+
+**User stories:**
+
+1. You should have a function named `getComputerChoice`.
+
+1. Your `getComputerChoice` function should return `"rock"`, `"paper"`, or `"scissors"` at random.
+
+**Hint:** The [Math.random](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Math/random) method returns a random number that’s greater than or equal to 0 and less than 1. Think about how you can use this to conditionally return one of the multiple choices.
+
+Your game will be played by a human player. You will write a function that takes the user's choice and returns it.
+
+1. Create a function named `getHumanChoice`.
+
+1. Write the code so that `getHumanChoice` will return one of the valid choices depending on what the user inputs.
+
+**Hint:** Use the [prompt](https://developer.mozilla.org/en-US/docs/Web/API/Window/prompt) method to get the user’s input.
+
+Your game will keep track of the player's score. You will write variables to keep track of the player's score.
+
+1. Create two new variables named `humanScore` and `computerScore` in the global scope.
+
+1. Initialize those variables with the value of `0`.
+
+Your game will be played round by round. You will write a function that takes the human and computer player choices as arguments, plays a single round, increments the round winner’s score and logs a winner announcement.
+
+1. Create a new function named `playRound`.
+
+1. Define two parameters for `playRound`. Parameter one `humanChoice` and parameter two `computerChoice`. Use these two parameters to take the human and computer choices as arguments.
+
+1. Make your function’s `humanChoice` parameter case-insensitive so that players can input `"rock"`, `"ROCK"`, `"RocK"`, or other variations.
+
+1. Write the code for your `playRound` function that returns a string value representing the round winner.
+
+- If it is a tie, it should return `"It's a tie!"`.
+
+- If the player wins, it should return `"You win! [player choice] beats [computer choice]"`.
+
+- If the computer wins, it should return `"You lose! [computer choice] beats [player choice]"`.
+
+1. Increment the `humanScore` or `computerScore` variable based on the round winner.
+
+Your game will play 3 rounds. You will write a function named `playGame` that calls `playRound` to play 3 rounds, keeps track of the scores, and declares a winner at the end.
+
+1. Create a new function named `playGame`.
+
+1. Create a loop that plays 3 rounds and calls the `playRound` function each time with the human's choice and the computer's choice functions as arguments.
+
+1. At the end of the game, return the winner of the game based on who won the most rounds.
+
+- If the human player wins more rounds than the computer player, return a message that says `"You win the game!"`.
+
+- If the computer player wins more rounds than the human player, return a message that says `"You lose the game!"`.
+
+# --hints--
+
+You should have a function called `getComputerChoice`
+
+```js
+assert.isFunction(getComputerChoice);
+```
+
+Your `getComputerChoice` function should return `"rock"`, `"paper"`, or `"scissors"` at random.
+
+```js
+const counts = {}
+for (let i = 0; i < 100; i++) {
+ const result = getComputerChoice();
+ counts[result] = (counts[result] ?? 0) + 1;
+}
+assert.lengthOf(Object.keys(counts), 3);
+assert.include(Object.keys(counts), "rock");
+assert.include(Object.keys(counts), "paper");
+assert.include(Object.keys(counts), "scissors");
+```
+
+You should have a function called `getHumanChoice`
+
+```js
+assert.isFunction(getHumanChoice);
+```
+
+You should have two variables named `humanScore` and `computerScore` in the global scope.
+
+```js
+assert.exists(humanScore);
+assert.exists(computerScore);
+```
+
+You should have a function called `playRound`
+
+```js
+assert.isFunction(playRound);
+```
+
+Your `playRound` function should take the human and computer player choices as arguments with the parameters `humanChoice` and `computerChoice`.
+
+```js
+assert.match(playRound.toString(), /\s*(?:\bhumanChoice\b\s*,\s*\bcomputerChoice\b)/);
+```
+
+Your `playRound` function should be case-insensitive so that players can input `"rock"`, `"ROCK"`, `"RocK"`, or other variations.
+
+```js
+assert.match(playRound.toString(), /\bhumanChoice\s*\.toLowerCase\(\)/);
+```
+
+Your `playRound` function should return the string `"It's a tie!"` if the human and computer choices are the same.
+
+```js
+assert.equal(playRound("rock", "rock"), "It's a tie!");
+```
+
+Your `playRound` function should return the string `"You win! [player choice] beats [computer choice]"` if the player wins.
+
+```js
+assert.equal(playRound("rock", "scissors"), "You win! rock beats scissors");
+```
+
+Your `playRound` function should return the string `"You lose! [computer choice] beats [player choice]"` if the computer wins.
+
+```js
+assert.equal(playRound("rock", "paper"), "You lose! paper beats rock");
+```
+
+Your `playRound` function should increment the `humanScore` or `computerScore` variable based on the round winner.
+
+```js
+humanScore = 0;
+computerScore = 0;
+playRound("rock", "scissors");
+assert.equal(humanScore, 1);
+```
+
+You should have a function called `playGame`.
+
+```js
+assert.isFunction(playGame);
+```
+
+You should use a loop to play 3 rounds.
+
+```js
+assert.match(playGame.toString(), /\bfor\s*\(/);
+```
+
+You should return the winner of the game based on who won the most rounds.
+
+```js
+window.prompt = () => "rock";
+assert.match(playGame(), /You (win|lose) the game!/);
+```
+
+# --seed--
+
+## --seed-contents--
+
+```js
+const hand = ['rock', 'paper', 'scissor'];
+```
+
+```html
+
+
+
+
+
+```
+
+# --solutions--
+
+```html
+
+
+
+
+
+```
+
+```js
+const hand = ['rock', 'paper', 'scissors'];
+
+
+let computerScore = 0;
+let humanScore = 0;
+
+const getComputerChoice = () => {
+ return hand[Math.floor(Math.random() * hand.length)];
+}
+
+const getHumanChoice = () => {
+ return prompt();
+}
+
+const playRound = (humanChoice, computerChoice) => {
+ humanChoice = humanChoice.toLowerCase()
+
+ const tie = "It's a tie!"
+ const win = `You win! ${humanChoice} beats ${computerChoice}`
+ const lose = `You lose! ${computerChoice} beats ${humanChoice}`
+
+
+ if (humanChoice == 'rock') {
+ if (computerChoice == 'rock') {
+ computerScore++;
+ humanScore++;
+ return tie;
+ } else if (computerChoice == 'paper') {
+ computerScore++;
+ return lose;
+ } else {
+ humanScore++;
+ return win;
+ }
+ } else if (humanChoice == 'paper') {
+ if (computerChoice == 'rock') {
+ humanScore++;
+ return win;
+ } else if (computerChoice == 'paper') {
+ computerScore++;
+ humanScore++;
+ return tie;
+ } else {
+ computerScore++;
+ return lose;
+ }
+ } else if (humanChoice == 'scissors') {
+ if (computerChoice == 'rock') {
+ computerScore++;
+ return lose;
+ } else if (computerChoice == 'paper') {
+ humanScore++;
+ return win;
+ } else {
+ computerScore++;
+ humanScore++;
+ return tie;
+ }
+ }
+}
+
+const playGame = () => {
+ for(let i = 0; i < 3; i++){
+ playRound(getHumanChoice(), getComputerChoice())
+ }
+
+ return humanScore > computerScore ? "You win the game!" : "You lose the game!"
+}
+
+```
+
diff --git a/curriculum/challenges/chinese-traditional/25-front-end-development/front-end-development-certification-exam/645147516c245de4d11eb7ba.md b/curriculum/challenges/chinese-traditional/25-front-end-development/front-end-development-certification-exam/645147516c245de4d11eb7ba.md
new file mode 100644
index 00000000000..28af96694df
--- /dev/null
+++ b/curriculum/challenges/chinese-traditional/25-front-end-development/front-end-development-certification-exam/645147516c245de4d11eb7ba.md
@@ -0,0 +1,20 @@
+---
+id: 645147516c245de4d11eb7ba
+title: Front End Development Certification Exam
+challengeType: 17
+dashedName: front-end-development-certification-exam
+---
+
+# --description--
+
+Here are some rules:
+
+- click start
+
+# --instructions--
+
+# --hints--
+
+# --seed--
+
+# --solutions--
diff --git a/curriculum/challenges/chinese-traditional/25-front-end-development/learn-basic-html-by-building-a-recipe-page/66731cd027ef3acb155669f5.md b/curriculum/challenges/chinese-traditional/25-front-end-development/learn-basic-html-by-building-a-recipe-page/66731cd027ef3acb155669f5.md
new file mode 100644
index 00000000000..2b1a9d0a9de
--- /dev/null
+++ b/curriculum/challenges/chinese-traditional/25-front-end-development/learn-basic-html-by-building-a-recipe-page/66731cd027ef3acb155669f5.md
@@ -0,0 +1,28 @@
+---
+id: 66731cd027ef3acb155669f5
+title: Step 1
+challengeType: 0
+dashedName: step-1
+---
+
+# --description--
+
+step 1 instructions
+
+# --hints--
+
+Test 1
+
+```js
+
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+--fcc-editable-region--
+
+--fcc-editable-region--
+```
diff --git a/curriculum/challenges/chinese/00-certifications/front-end-development-certification/front-end-development.yml b/curriculum/challenges/chinese/00-certifications/front-end-development-certification/front-end-development.yml
new file mode 100644
index 00000000000..25d1e081292
--- /dev/null
+++ b/curriculum/challenges/chinese/00-certifications/front-end-development-certification/front-end-development.yml
@@ -0,0 +1,10 @@
+---
+id: 64514fda6c245de4d11eb7bb
+title: Front End Development Certification
+certification: front-end-development
+challengeType: 7
+isPrivate: true
+tests:
+ -
+ id: 645147516c245de4d11eb7ba
+ title: Front End Development Certification Exam
diff --git a/curriculum/challenges/chinese/03-front-end-development-libraries/sass/create-reusable-css-with-mixins.md b/curriculum/challenges/chinese/03-front-end-development-libraries/sass/create-reusable-css-with-mixins.md
index 5d0cad0f57d..27117f4c24f 100644
--- a/curriculum/challenges/chinese/03-front-end-development-libraries/sass/create-reusable-css-with-mixins.md
+++ b/curriculum/challenges/chinese/03-front-end-development-libraries/sass/create-reusable-css-with-mixins.md
@@ -8,85 +8,112 @@ dashedName: create-reusable-css-with-mixins
# --description--
-在 Sass 中,mixin 是一组 CSS 声明,可以在整个样式表中重复使用。
-
-CSS 的新功能需要一段时间适配后,所有浏览器后才能完全使用。 随着浏览器的不断升级,使用这些 CSS 规则时可能需要添加浏览器前缀。 考虑 `box-shadow`:
+In Sass, a mixin is a group of CSS declarations that can be reused throughout the style sheet. The definition starts with the `@mixin` at-rule, followed by a custom name. You apply the mixin using the `@include` at-rule.
```scss
-div {
- -webkit-box-shadow: 0px 0px 4px #fff;
- -moz-box-shadow: 0px 0px 4px #fff;
- -ms-box-shadow: 0px 0px 4px #fff;
- box-shadow: 0px 0px 4px #fff;
+@mixin reset-list {
+ margin: 0;
+ padding: 0;
+ list-style: none;
+}
+
+nav ul {
+ @include reset-list;
}
```
-对于所有具有 `box-shadow` 属性的元素重写此规则,或者更改每个值以测试不同的效果,需要花费大量的精力。 Mixins 就像 CSS 的函数。 以下是一个例子:
+Compiles to:
-```scss
-@mixin box-shadow($x, $y, $blur, $c){
- -webkit-box-shadow: $x $y $blur $c;
- -moz-box-shadow: $x $y $blur $c;
- -ms-box-shadow: $x $y $blur $c;
- box-shadow: $x $y $blur $c;
+```css
+nav ul {
+ margin: 0;
+ padding: 0;
+ list-style: none;
}
```
-定义以 `@mixin` 开头,后跟自定义名称。 参数(`$x`,`$y`,`$blur`,以及上例中的 `$c` )是可选的。 现在在需要 `box-shadow` 规则的地方,只需一行 mixin 调用而无需添加所有的浏览器前缀。 mixin 可以通过 `@include` 指令调用。
+Your mixins can also take arguments, which allows their behavior to be customized. The arguments are required when using the mixin.
```scss
-div {
- @include box-shadow(0px, 0px, 4px, #fff);
+@mixin prose($font-size, $spacing) {
+ font-size: $font-size;
+ margin: 0;
+ margin-block-end: $spacing;
+}
+
+p {
+ @include prose(1.25rem, 1rem);
+}
+
+h2 {
+ @include prose(2.4rem, 1.5rem);
+}
+```
+
+You can make arguments optional by giving the parameters default values.
+
+```scss
+@mixin text-color($color: black) {
+ color: $color;
+}
+
+p {
+ @include text-color(); /* color: black */
+}
+
+nav a {
+ @include text-color(orange);
}
```
# --instructions--
-为 `border-radius` 写一个 mixin,并给它一个 `$radius` 参数。 应该使用之前例子中的所有浏览器前缀。 然后使用 `border-radius` mixin 为 `#awesome` 元素提供 `15px` 的边框半径。
+Write a mixin named `shape` and give it 3 parameters: `$w`, `$h`, and `$bg-color`.
+
+Use the `shape` mixin to give the `#square` element a width and height of `50px`, and the color `red`. For the `#rect-a` element add a width of `100px`, a height of `50px`, and the color `blue`. Finally, for the `#rect-b` element add a width of `50px`, a height of `100px`, and the color `orange`.
# --hints--
-应声明名为 `border-radius` 的 mixin,其中包含名为 `$radius` 的参数。
+You should declare a mixin named `shape` with 3 parameters: `$w`, `$h`, and `$bg-color`.
```js
-assert(code.match(/@mixin\s+?border-radius\s*?\(\s*?\$radius\s*?\)\s*?{/gi));
+assert.match(code, /@mixin\s+shape\s*\(\s*\$w,\s*\$h,\s*\$bg-color\s*\)\s*{/gi);
```
-应该给 `$radius` 添加 `-webkit-border-radius` 浏览器前缀。
+Your mixin should include a `width` property that uses the `$w` parameter.
```js
-assert(
- __helpers.removeWhiteSpace(code).match(/-webkit-border-radius:\$radius;/gi)
-);
+assert.match(__helpers.removeWhiteSpace(code), /width:\$w;/gi);
```
-应该给 `$radius` 添加 `-moz-border-radius` 浏览器前缀。
+Your mixin should include a `height` property that uses the `$h` parameter.
```js
-assert(
- __helpers.removeWhiteSpace(code).match(/-moz-border-radius:\$radius;/gi)
-);
+assert.match(__helpers.removeWhiteSpace(code), /height:\$h;/gi);
```
-应该给 `$radius` 添加 `-ms-border-radius` 浏览器前缀。
+Your mixin should include a `background-color` property that uses the `$bg-color` parameter.
```js
-assert(__helpers.removeWhiteSpace(code).match(/-ms-border-radius:\$radius;/gi));
+assert.match(__helpers.removeWhiteSpace(code), /background-color:\$bg\-color;/gi);
```
-应该给 `$radius` 添加 `border-radius`。
+You should replace the styles inside the `#square` selector with a call to the `shape` mixin using the `@include` keyword. Setting a width and height of `50px`, and the color `red`.
```js
-assert(
- __helpers.removeWhiteSpace(code).match(/border-radius:\$radius;/gi).length ==
- 4
-);
+assert.match(code, /#square\s*{\s*@include\s+shape\(\s*50px,\s*50px,\s*red\s*\)\s*;\s*}/gi);
```
-应使用 `@include` 关键字调用 `border-radius mixin`,并将其设置为 `15px`。
+You should replace the styles inside the `#rect-a` selector with a call to the `shape` mixin using the `@include` keyword. Setting a width of `100px`, a height of `50px`, and the color `blue`.
```js
-assert(code.match(/@include\s+?border-radius\(\s*?15px\s*?\)\s*;/gi));
+assert.match(code, /#rect-a\s*{\s*@include\s+shape\(\s*100px,\s*50px,\s*blue\s*\)\s*;\s*}/gi);
+```
+
+You should replace the styles inside the `#rect-b` selector with a call to the `shape` mixin using the `@include` keyword. Setting a width of `50px`, a height of `100px`, and the color `orange`.
+
+```js
+assert.match(code, /#rect-b\s*{\s*@include\s+shape\(\s*50px,\s*100px,\s*orange\s*\)\s*;\s*}/gi);
```
# --seed--
@@ -95,38 +122,54 @@ assert(code.match(/@include\s+?border-radius\(\s*?15px\s*?\)\s*;/gi));
```html
-
+
+
+
```
# --solutions--
```html
-
+
+
+
```
diff --git a/curriculum/challenges/chinese/09-information-security/information-security-projects/stock-price-checker.md b/curriculum/challenges/chinese/09-information-security/information-security-projects/stock-price-checker.md
index 085eb1a5153..09311fb3d9e 100644
--- a/curriculum/challenges/chinese/09-information-security/information-security-projects/stock-price-checker.md
+++ b/curriculum/challenges/chinese/09-information-security/information-security-projects/stock-price-checker.md
@@ -20,7 +20,7 @@ dashedName: stock-price-checker
# --instructions--
-1. 将 `NODE_ENV` 设置为 `test`,不带引号,并将 `DB` 设为你的 MongoDB 连接字符串。
+1. Set the `NODE_ENV` environment variable to `test`, without quotes
2. 在 `routes/api.js` 中完成项目,或者通过创建一个处理程序/控制器来完成项目
3. 添加安全功能到 `server.js`。
4. 在 `tests/2_functional-tests.js` 中创建所有的功能测试
diff --git a/curriculum/challenges/chinese/14-responsive-web-design-22/learn-basic-css-by-building-a-cafe-menu/5f3477cb2e27333b1ab2b955.md b/curriculum/challenges/chinese/14-responsive-web-design-22/learn-basic-css-by-building-a-cafe-menu/5f3477cb2e27333b1ab2b955.md
index 09911569de8..5478917805d 100644
--- a/curriculum/challenges/chinese/14-responsive-web-design-22/learn-basic-css-by-building-a-cafe-menu/5f3477cb2e27333b1ab2b955.md
+++ b/curriculum/challenges/chinese/14-responsive-web-design-22/learn-basic-css-by-building-a-cafe-menu/5f3477cb2e27333b1ab2b955.md
@@ -7,7 +7,7 @@ dashedName: step-16
# --description--
-现在你需要链接 `styles.css` 文件,以便再次应用这些样式。 在 `head` 元素中嵌套一个自闭合 `link` 元素。 给它一个 `rel` 属性,值为 `stylesheet` 和一个 `href` 属性,值为 `styles.css`。
+Now you need to link the `styles.css` file, so the styles will be applied again. Inside the `head` element, add a `link` element. Give it a `rel` attribute with the value of `"stylesheet"` and a `href` attribute with the value of `"styles.css"`.
# --hints--
diff --git a/curriculum/challenges/chinese/15-javascript-algorithms-and-data-structures-22/build-a-pokemon-search-app-project/build-a-pokemon-search-app.md b/curriculum/challenges/chinese/15-javascript-algorithms-and-data-structures-22/build-a-pokemon-search-app-project/build-a-pokemon-search-app.md
index da2f209682f..bb830dcb862 100644
--- a/curriculum/challenges/chinese/15-javascript-algorithms-and-data-structures-22/build-a-pokemon-search-app-project/build-a-pokemon-search-app.md
+++ b/curriculum/challenges/chinese/15-javascript-algorithms-and-data-structures-22/build-a-pokemon-search-app-project/build-a-pokemon-search-app.md
@@ -15,7 +15,7 @@ In this project, you'll build an app that will search for Pokémon by name or ID
**User Stories:**
1. You should have an `input` element with an `id` of `"search-input"`
-1. You should have a `button` element with an `id` of `"search-button`
+1. You should have a `button` element with an `id` of `"search-button"`
1. You should have an element with an `id` of `"pokemon-name"`
1. You should have an element with an `id` of `"pokemon-id"`
1. You should have an element with an `id` of `"weight"`
diff --git a/curriculum/challenges/chinese/15-javascript-algorithms-and-data-structures-22/learn-basic-javascript-by-building-a-role-playing-game/62a7bfabe119461eb13ccbd6.md b/curriculum/challenges/chinese/15-javascript-algorithms-and-data-structures-22/learn-basic-javascript-by-building-a-role-playing-game/62a7bfabe119461eb13ccbd6.md
index 6040d1028d3..c2bbf7a9cf9 100644
--- a/curriculum/challenges/chinese/15-javascript-algorithms-and-data-structures-22/learn-basic-javascript-by-building-a-role-playing-game/62a7bfabe119461eb13ccbd6.md
+++ b/curriculum/challenges/chinese/15-javascript-algorithms-and-data-structures-22/learn-basic-javascript-by-building-a-role-playing-game/62a7bfabe119461eb13ccbd6.md
@@ -7,7 +7,7 @@ dashedName: step-41
# --description--
-Now you need to modify your display text. Change the `innerText` property of the `text` to be `"You enter the store."`.
+Now you need to modify your display text. Change the `innerText` property of the `text` variable to be `"You enter the store."`.
# --hints--
@@ -153,6 +153,7 @@ function goStore() {
button1.onclick = buyHealth;
button2.onclick = buyWeapon;
button3.onclick = goTown;
+
}
--fcc-editable-region--
diff --git a/curriculum/challenges/chinese/15-javascript-algorithms-and-data-structures-22/learn-introductory-javascript-by-building-a-pyramid-generator/660ef31a5be625914a0102cd.md b/curriculum/challenges/chinese/15-javascript-algorithms-and-data-structures-22/learn-introductory-javascript-by-building-a-pyramid-generator/660ef31a5be625914a0102cd.md
index f8da7138cbb..a9c94c52992 100644
--- a/curriculum/challenges/chinese/15-javascript-algorithms-and-data-structures-22/learn-introductory-javascript-by-building-a-pyramid-generator/660ef31a5be625914a0102cd.md
+++ b/curriculum/challenges/chinese/15-javascript-algorithms-and-data-structures-22/learn-introductory-javascript-by-building-a-pyramid-generator/660ef31a5be625914a0102cd.md
@@ -14,7 +14,7 @@ let programmer = "Naomi";
programmer = "CamperChan";
```
-Note that when reassigning a variable, you do **not** use the `let` keyword again.
+请注意,当重新赋值一个变量时,你 **不需要** 再使用 `let` 关键字。
在 `console.log` 语句后,将 `"World"` 赋值给变量 `character`。
diff --git a/curriculum/challenges/chinese/15-javascript-algorithms-and-data-structures-22/learn-introductory-javascript-by-building-a-pyramid-generator/660f039ff313dbb696b007ca.md b/curriculum/challenges/chinese/15-javascript-algorithms-and-data-structures-22/learn-introductory-javascript-by-building-a-pyramid-generator/660f039ff313dbb696b007ca.md
index 85e60cf01cb..d4009b5e6f0 100644
--- a/curriculum/challenges/chinese/15-javascript-algorithms-and-data-structures-22/learn-introductory-javascript-by-building-a-pyramid-generator/660f039ff313dbb696b007ca.md
+++ b/curriculum/challenges/chinese/15-javascript-algorithms-and-data-structures-22/learn-introductory-javascript-by-building-a-pyramid-generator/660f039ff313dbb696b007ca.md
@@ -7,29 +7,29 @@ dashedName: step-19
# --description--
-When an array holds values, or elements, those values are separated by commas. Here is an array that holds two strings:
+当数组包含值或 元素 时,这些值以逗号分隔。 这是一个包含两个字符串的数组:
```js
let array = ["first", "second"];
```
-Change your `rows` declaration to be an array with the strings `"Naomi"`, `"Quincy"`, and `"CamperChan"`. The order of values in an array is important, so follow that order. Remember that strings are case-sensitive.
+将 `rows` 声明更改为包含字符串 `"Naomi"`、`"Quincy"` 和 `"CamperChan"` 的数组。 数组中值的顺序很重要,因此请遵循该顺序。 请记住,字符串区分大小写。
# --hints--
-The first element in your array should be the string `"Naomi"`.
+数组中的第一个元素应该是字符串 `"Naomi"`。
```js
assert.equal(rows[0], "Naomi");
```
-The second element in your array should be the string `"Quincy"`.
+数组中的第二个元素应该是字符串 `"Quincy"`。
```js
assert.equal(rows[1], "Quincy");
```
-The third element in your array should be the string `"CamperChan"`.
+数组中的第三个元素应该是字符串 `"CamperChan"`。
```js
assert.equal(rows[2], "CamperChan");
diff --git a/curriculum/challenges/chinese/15-javascript-algorithms-and-data-structures-22/learn-introductory-javascript-by-building-a-pyramid-generator/660f09a2694b59c3a10ee304.md b/curriculum/challenges/chinese/15-javascript-algorithms-and-data-structures-22/learn-introductory-javascript-by-building-a-pyramid-generator/660f09a2694b59c3a10ee304.md
index 10548b4f96f..e18c9f032a2 100644
--- a/curriculum/challenges/chinese/15-javascript-algorithms-and-data-structures-22/learn-introductory-javascript-by-building-a-pyramid-generator/660f09a2694b59c3a10ee304.md
+++ b/curriculum/challenges/chinese/15-javascript-algorithms-and-data-structures-22/learn-introductory-javascript-by-building-a-pyramid-generator/660f09a2694b59c3a10ee304.md
@@ -7,23 +7,23 @@ dashedName: step-23
# --description--
-For now, remove your first console log and your `rows[rows.length - 1]` assignment. Leave the second `rows` log statement for later.
+现在,删除你的第一个控制台日志和 `rows[rows.length - 1]` 赋值。 将第二个 `rows` 日志语句留待以后使用。
# --hints--
-You should remove your `console.log(rows[0])` statement.
+你应该删除 `console.log(rows[0])` 语句。
```js
assert.notMatch(__helpers.removeJSComments(code), /console\.log\(\s*rows\[\s*0\s*\]\s*\)/);
```
-You should remove your `rows[rows.length - 1]` reassignment.
+你应该删除 `rows[rows.length - 1]` 重新赋值。
```js
assert.notMatch(__helpers.removeJSComments(code), /rows\[\s*rows\.length\s*-\s*1\s*\]/);
```
-You should not remove your `console.log(rows)` statement.
+你不应删除 `console.log(rows)` 语句。
```js
assert.match(__helpers.removeJSComments(code), /console\.log\(\s*rows\s*\);/);
diff --git a/curriculum/challenges/chinese/15-javascript-algorithms-and-data-structures-22/learn-introductory-javascript-by-building-a-pyramid-generator/660f207334fabaeac3269c38.md b/curriculum/challenges/chinese/15-javascript-algorithms-and-data-structures-22/learn-introductory-javascript-by-building-a-pyramid-generator/660f207334fabaeac3269c38.md
index 25be5a84396..262ae2f81f6 100644
--- a/curriculum/challenges/chinese/15-javascript-algorithms-and-data-structures-22/learn-introductory-javascript-by-building-a-pyramid-generator/660f207334fabaeac3269c38.md
+++ b/curriculum/challenges/chinese/15-javascript-algorithms-and-data-structures-22/learn-introductory-javascript-by-building-a-pyramid-generator/660f207334fabaeac3269c38.md
@@ -7,9 +7,9 @@ dashedName: step-41
# --description--
-To manipulate the `result` string, you will use a different type of loop. Specifically, a `for...of` loop, which iterates over each item in an iterable object and temporarily assigns it to a variable.
+要操作 `result` 字符串,你将使用不同类型的循环。 具体来说,`for...of` 循环遍历可迭代对象中的每个项目并将其临时分配给变量。
-The syntax for a `for...of` loop looks like:
+`for...of` 循环的语法如下:
```js
for (const value of iterable) {
@@ -17,9 +17,9 @@ for (const value of iterable) {
}
```
-Note that you can use `const` because the variable only exists for a single iteration, not during the entire loop.
+请注意,你可以使用 `const`,因为该变量仅在一次迭代中存在,而不是在整个循环期间存在。
-Create a `for...of` loop to iterate through your `rows` array, assigning each value to a `row` variable.
+创建一个 `for...of` 循环来遍历 `rows` 数组,并将每个值分配给 `row` 变量。
# --hints--
diff --git a/curriculum/challenges/chinese/15-javascript-algorithms-and-data-structures-22/learn-introductory-javascript-by-building-a-pyramid-generator/660f23b53db70af0f2620e78.md b/curriculum/challenges/chinese/15-javascript-algorithms-and-data-structures-22/learn-introductory-javascript-by-building-a-pyramid-generator/660f23b53db70af0f2620e78.md
index cd49712ba2d..4824005ad7b 100644
--- a/curriculum/challenges/chinese/15-javascript-algorithms-and-data-structures-22/learn-introductory-javascript-by-building-a-pyramid-generator/660f23b53db70af0f2620e78.md
+++ b/curriculum/challenges/chinese/15-javascript-algorithms-and-data-structures-22/learn-introductory-javascript-by-building-a-pyramid-generator/660f23b53db70af0f2620e78.md
@@ -7,37 +7,37 @@ dashedName: step-43
# --description--
-Now all of your numbers are appearing on the same line. This will not work for creating a pyramid.
+现在,你的所有数字都出现在同一行上。 这对于创建金字塔不起作用。
-You will need to add a new line to each row. However, pressing the return key to insert a line break between quotes in JavaScript will result in a parsing error. Instead, you need to use the special escape sequence `\n`, which is interpreted as a new line when the string is logged. For example:
+你需要在每一行中添加一个新行。 但是,在 JavaScript 中按回车键在引号之间插入换行符将导致解析错误。 相反,你需要使用特殊的 转义序列 `\n`,它在记录字符串时被解释为新行。 例如:
```js
lineOne = lineOne + "\n" + lineTwo;
```
-Use a second addition operator to concatenate a new line between the existing `result` value and the added `row` value.
+使用第二个加法运算符在现有的 `result` 值和添加的 `row` 值之间连接一个新行。
# --hints--
-You should use the `\n` escape sequence. Remember that it needs to be a string, so it is wrapped in quotes.
+你应该使用 `\n` 转义序列。 请记住,它需要是一个字符串,因此用引号括起来。
```js
assert.match(__helpers.removeJSComments(code), /('|")\\n\1/);
```
-You should concatenate the `\n` escape sequence to your `result` variable.
+你应该将 `\n` 转义序列连接到 `result` 变量。
```js
assert.match(__helpers.removeJSComments(code), /result\s*\+\s*('|")\\n\1/);
```
-You should concatenate your `row` variable to your `\n` escape sequence.
+你应该将 `row` 变量连接到 `\n` 转义序列。
```js
assert.match(__helpers.removeJSComments(code), /result\s*\+\s*('|")\\n\1\s*\+\s*row/);
```
-You should assign the entire concatenation back to your `result` variable. Don't forget your semicolon.
+你应该将整个连接分配回你的 `result` 变量。 Don't forget your semicolon.
```js
assert.match(__helpers.removeJSComments(code), /result\s*=\s*result\s*\+\s*('|")\\n\1\s*\+\s*row;/);
diff --git a/curriculum/challenges/chinese/15-javascript-algorithms-and-data-structures-22/learn-introductory-javascript-by-building-a-pyramid-generator/660f280dda5040f707c76b4a.md b/curriculum/challenges/chinese/15-javascript-algorithms-and-data-structures-22/learn-introductory-javascript-by-building-a-pyramid-generator/660f280dda5040f707c76b4a.md
index 5254f9ff694..ea96135cc38 100644
--- a/curriculum/challenges/chinese/15-javascript-algorithms-and-data-structures-22/learn-introductory-javascript-by-building-a-pyramid-generator/660f280dda5040f707c76b4a.md
+++ b/curriculum/challenges/chinese/15-javascript-algorithms-and-data-structures-22/learn-introductory-javascript-by-building-a-pyramid-generator/660f280dda5040f707c76b4a.md
@@ -7,32 +7,32 @@ dashedName: step-45
# --description--
-Now you have a series of `#` characters, but the pyramid shape is still missing. Fortunately, the `i` variable represents the current "row" number in your loop, enabling you to use it for crafting a pyramid-like structure.
+现在你有一系列 `#` 字符,但仍然缺少金字塔形状。 幸运的是,`i` 变量代表循环中的当前“行”号,使你能够使用它来制作类似金字塔的结构。
-To achieve this, you will use the `.repeat()` method available to strings. This method accepts a number as an argument, specifying the number of times to repeat the target string. For example, using `.repeat()` to generate the string `"Code! Code! Code!"`:
+为了实现这一点,你将使用字符串可用的 `.repeat()` 方法。 该方法接受一个数字作为参数,指定重复目标字符串的次数。 例如使用 `.repeat()` 生成字符串 `"Code! Code! Code!"`:
```js
const activity = "Code! ";
activity.repeat(3);
```
-Use the `.repeat()` method on your `character`, and give it `i` for the number.
+在你的 `character` 上使用 `.repeat()` 方法,并为其提供 `i` 作为数字。
# --hints--
-You should use the `.repeat()` method.
+你应该使用 `.repeat()` 方法。
```js
assert.match(__helpers.removeJSComments(code), /\.repeat\(/);
```
-You should use the `.repeat()` method on your `character` variable.
+你应该在 `character` 变量上使用 `.repeat()` 方法。
```js
assert.match(__helpers.removeJSComments(code), /character\.repeat\(/);
```
-You should pass `i` to your `.repeat()` method.
+你应该将 `i` 传递给你的 `.repeat()` 方法。
```js
assert.match(__helpers.removeJSComments(code), /character\.repeat\(\s*i\s*\)/)
diff --git a/curriculum/challenges/chinese/15-javascript-algorithms-and-data-structures-22/learn-introductory-javascript-by-building-a-pyramid-generator/660f2eccfe3f820304af1b39.md b/curriculum/challenges/chinese/15-javascript-algorithms-and-data-structures-22/learn-introductory-javascript-by-building-a-pyramid-generator/660f2eccfe3f820304af1b39.md
index 86345a8a9f0..315ba0ca2e9 100644
--- a/curriculum/challenges/chinese/15-javascript-algorithms-and-data-structures-22/learn-introductory-javascript-by-building-a-pyramid-generator/660f2eccfe3f820304af1b39.md
+++ b/curriculum/challenges/chinese/15-javascript-algorithms-and-data-structures-22/learn-introductory-javascript-by-building-a-pyramid-generator/660f2eccfe3f820304af1b39.md
@@ -7,9 +7,9 @@ dashedName: step-64
# --description--
-In order to know how to format a row, your `padRow` function will need to know which row number you are on, and how many rows in total are being generated.
+要知道如何格式化一行,你的 `padRow` 函数需要知道你所在的行号,以及总共生成了多少行。
-The best way to do this is by creating function parameters for them. Give your `padRow` function a `rowNumber` and `rowCount` parameter. Multiple parameters are separated by a comma:
+最好的方法是给它们创建函数参数。 为 `padRow` 函数提供 `rowNumber` 和 `rowCount` 参数。 多个参数以逗号分隔:
```js
function name(first, second) {
@@ -19,19 +19,19 @@ function name(first, second) {
# --hints--
-Your `padRow` function should have a `rowNumber` parameter.
+你的 `padRow` 函数应该有一个 `rowNumber` 参数。
```js
assert.match(__helpers.removeJSComments(code), /function\s+padRow\s*\(\s*rowNumber/);
```
-You should add a comma after your `rowNumber` parameter.
+你应该在 `rowNumber` 参数后添加一个逗号。
```js
assert.match(__helpers.removeJSComments(code), /function\s+padRow\s*\(\s*rowNumber\s*,\s*/);
```
-Your `padRow` function should have a `rowCount` parameter.
+你的 `padRow` 函数应该有一个 `rowCount` 参数。
```js
assert.match(__helpers.removeJSComments(code), /function\s+padRow\s*\(\s*rowNumber\s*,\s*rowCount\s*\)/);
diff --git a/curriculum/challenges/chinese/15-javascript-algorithms-and-data-structures-22/learn-introductory-javascript-by-building-a-pyramid-generator/660f359af3e32e0f1a6880b7.md b/curriculum/challenges/chinese/15-javascript-algorithms-and-data-structures-22/learn-introductory-javascript-by-building-a-pyramid-generator/660f359af3e32e0f1a6880b7.md
index 06d3c8f0d71..5b4ce16ae7b 100644
--- a/curriculum/challenges/chinese/15-javascript-algorithms-and-data-structures-22/learn-introductory-javascript-by-building-a-pyramid-generator/660f359af3e32e0f1a6880b7.md
+++ b/curriculum/challenges/chinese/15-javascript-algorithms-and-data-structures-22/learn-introductory-javascript-by-building-a-pyramid-generator/660f359af3e32e0f1a6880b7.md
@@ -7,11 +7,11 @@ dashedName: step-68
# --description--
-You should now see the same bunch of characters in your console. Your `padRow` function is doing the exact same thing you were doing earlier, but now it's in a reusable section of its own.
+现在你应该在控制台中看到同一组字符。 你的 `padRow` 函数正在执行与你之前完全相同的操作,但现在它位于其自己的可重复使用部分中。
-Use the addition operator to concatenate a single space `" "` to the beginning and end of your repeated `character` string.
+使用加法运算符将单个空格 `" "` 连接到重复 `character` 字符串的开头和结尾。
-Remember that you can use the `+` operator to concatenate strings like this:
+请记住,你可以使用 `+` 运算符来连接字符串,如下所示:
```js
" " + "string"
@@ -19,19 +19,19 @@ Remember that you can use the `+` operator to concatenate strings like this:
# --hints--
-You should concatenate a single space to the beginning of your returned value.
+你应该将一个空格连接到返回值的开头。
```js
assert.match(padRow(1, 1), /^\s/);
```
-You should concatenate a single space to the end of your returned value.
+你应该将一个空格连接到返回值的末尾。
```js
assert.match(padRow(1, 1), /\s$/);
```
-Your `padRow()` function should return the repeated `character` series with a space before and after the series.
+你的 `padRow()` 函数应返回重复的 `character` 系列,并且在系列前后都有空格。
```js
assert.equal(padRow(1, 1), " # ");
diff --git a/curriculum/challenges/chinese/15-javascript-algorithms-and-data-structures-22/learn-introductory-javascript-by-building-a-pyramid-generator/660f447efc0e722f016c1be0.md b/curriculum/challenges/chinese/15-javascript-algorithms-and-data-structures-22/learn-introductory-javascript-by-building-a-pyramid-generator/660f447efc0e722f016c1be0.md
index 0fb6f075d43..5b7075f17bc 100644
--- a/curriculum/challenges/chinese/15-javascript-algorithms-and-data-structures-22/learn-introductory-javascript-by-building-a-pyramid-generator/660f447efc0e722f016c1be0.md
+++ b/curriculum/challenges/chinese/15-javascript-algorithms-and-data-structures-22/learn-introductory-javascript-by-building-a-pyramid-generator/660f447efc0e722f016c1be0.md
@@ -7,17 +7,17 @@ dashedName: step-81
# --description--
-The text has appeared again! This is because `"false"` is a string, which when evaluated to a boolean becomes `true`. This means `"false"` is a truthy value.
+文字又出现了! 这是因为 `"false"` 是一个字符串,当将其计算为布尔值时变为 `true`。 这意味着 `"false"` 是一个真值。
-A truthy value is a value that is considered true when evaluated as a boolean. Most of the values you encounter in JavaScript will be truthy.
+真值是作为布尔值评估时被视为真的值。 你在 JavaScript 中遇到的大多数值都是真值。
-A falsy value is the opposite - a value considered false when evaluated as a boolean. JavaScript has a defined list of falsy values. Some of them include `false`, `0`, `""`, `null`, `undefined`, and `NaN`.
+假值则相反 - 当作为布尔值评估时被视为假的值。 JavaScript 有一个定义的假值列表。 其中包括 `false`、`0`、`""`、`null`、`undefined` 和 `NaN`。
-Try changing your `if` condition to an empty string `""`, which is a falsy value.
+尝试将你的 `if` 条件更改为空字符串 `""`,这是一个假值。
# --hints--
-Your `if` statement should have `""` as the condition.
+你的 `if` 语句应以 `""` 作为条件。
```js
assert.match(__helpers.removeJSComments(code), /if\s*\(\s*("|')\1\s*\)/);
diff --git a/curriculum/challenges/chinese/15-javascript-algorithms-and-data-structures-22/learn-introductory-javascript-by-building-a-pyramid-generator/660f535ec33a285b33af3774.md b/curriculum/challenges/chinese/15-javascript-algorithms-and-data-structures-22/learn-introductory-javascript-by-building-a-pyramid-generator/660f535ec33a285b33af3774.md
index 896a6633cde..69ab5841b0c 100644
--- a/curriculum/challenges/chinese/15-javascript-algorithms-and-data-structures-22/learn-introductory-javascript-by-building-a-pyramid-generator/660f535ec33a285b33af3774.md
+++ b/curriculum/challenges/chinese/15-javascript-algorithms-and-data-structures-22/learn-introductory-javascript-by-building-a-pyramid-generator/660f535ec33a285b33af3774.md
@@ -17,7 +17,7 @@ dashedName: step-116
assert.match(__helpers.removeJSComments(code), /if\s*\(\s*inverted\s*\)\s*\{\s*rows\.unshift\(\s*padRow\(\s*i\s*,\s*count\s*\)\s*\);\s*\}\s*else\s*\{\s*rows\.push\(\s*/);
```
-你应该将 `padRow()` 调用作为 `.unshift()` 方法的参数传递。
+You should pass a `padRow()` call as the argument for your `.push()` method.
```js
assert.match(__helpers.removeJSComments(code), /if\s*\(\s*inverted\s*\)\s*\{\s*rows\.unshift\(\s*padRow\(\s*i\s*,\s*count\s*\)\s*\);\s*\}\s*else\s*\{\s*rows\.push\(\s*padRow\(/);
diff --git a/curriculum/challenges/chinese/15-javascript-algorithms-and-data-structures-22/learn-introductory-javascript-by-building-a-pyramid-generator/6610b741b54b90f0c0fb3d58.md b/curriculum/challenges/chinese/15-javascript-algorithms-and-data-structures-22/learn-introductory-javascript-by-building-a-pyramid-generator/6610b741b54b90f0c0fb3d58.md
index e1ff7a25c53..9c0e4d9e314 100644
--- a/curriculum/challenges/chinese/15-javascript-algorithms-and-data-structures-22/learn-introductory-javascript-by-building-a-pyramid-generator/6610b741b54b90f0c0fb3d58.md
+++ b/curriculum/challenges/chinese/15-javascript-algorithms-and-data-structures-22/learn-introductory-javascript-by-building-a-pyramid-generator/6610b741b54b90f0c0fb3d58.md
@@ -7,9 +7,9 @@ dashedName: step-8
# --description--
-When variable names are more than one word, there are specific naming conventions for how you capitalize the words. In JavaScript, the convention to use is camel case.
+当变量名超过一个单词时,对于如何将单词大写,有特定的命名约定。 在 JavaScript 中,使用的约定是 驼峰式命名法。
-Camel case means that the first word in the name is entirely lowercase, but the following words are all title-cased. Here are some examples of camel case:
+驼峰式大小写是指名称中的第一个单词全部小写,但后续单词均采用首字母大写。 以下是驼峰式命名法的一些示例:
```js
let variableOne;
@@ -18,23 +18,23 @@ let yetAnotherVariable;
let thisIsAnAbsurdlyLongName;
```
-Use camel case to declare a new `secondCharacter` variable.
+使用驼峰式命名法声明一个新的 `secondCharacter` 变量。
# --hints--
-You should declare a `secondCharacter` variable.
+你应该声明一个 `secondCharacter` 变量。
```js
assert.match(__helpers.removeJSComments(code), /secondCharacter/);
```
-You should use `let` to declare your `secondCharacter` variable.
+你应该使用 `let` 来声明你的 `secondCharacter` 变量。
```js
assert.match(__helpers.removeJSComments(code), /let\s+secondCharacter/);
```
-You should not assign a value to your `secondCharacter` variable. Do not forget your semicolon.
+你不应该为 `secondCharacter` 变量赋值。 Do not forget your semicolon.
```js
assert.match(__helpers.removeJSComments(code), /let\s+secondCharacter;/);
diff --git a/curriculum/challenges/chinese/15-javascript-algorithms-and-data-structures-22/learn-introductory-javascript-by-building-a-pyramid-generator/6610b9f7619764fad5fd516d.md b/curriculum/challenges/chinese/15-javascript-algorithms-and-data-structures-22/learn-introductory-javascript-by-building-a-pyramid-generator/6610b9f7619764fad5fd516d.md
index c9c1d800377..fca6e8b1775 100644
--- a/curriculum/challenges/chinese/15-javascript-algorithms-and-data-structures-22/learn-introductory-javascript-by-building-a-pyramid-generator/6610b9f7619764fad5fd516d.md
+++ b/curriculum/challenges/chinese/15-javascript-algorithms-and-data-structures-22/learn-introductory-javascript-by-building-a-pyramid-generator/6610b9f7619764fad5fd516d.md
@@ -7,7 +7,7 @@ dashedName: step-11
# --description--
-You can also assign the value of a variable to another variable. For example:
+你还可以将一个变量的值分配给另一个变量。 例如:
```js
let first = "One";
@@ -15,27 +15,27 @@ let second = "Two";
second = first;
```
-The `second` variable would now have the value `"One"`.
+`second` 变量现在的值为 `"One"`。
-To see this in action, change your `secondCharacter` assignment from `"Test"` to your `character` variable.
+要查看实际效果,请将 `secondCharacter` 赋值从 `"Test"` 更改为 `character` 变量。
-Then open the console to see what gets logged.
+然后打开控制台查看记录的内容。
# --hints--
-You should not assign the value `"Test"` to your `secondCharacter` variable.
+你不应将值 `"Test"` 分配给 `secondCharacter` 变量。
```js
assert.notEqual(secondCharacter, "Test");
```
-You should assign the value of the `character` variable to your `secondCharacter` variable. Don't forget your semicolon.
+你应该将 `character` 变量的值分配给 `secondCharacter` 变量。 Don't forget your semicolon.
```js
assert.match(__helpers.removeJSComments(code), /secondCharacter\s*=\s*character;/);
```
-Your `secondCharacter` variable should now have the value `"World"`.
+你的 `secondCharacter` 变量现在应该具有值 `"World"`。
```js
diff --git a/curriculum/challenges/chinese/15-javascript-algorithms-and-data-structures-22/learn-introductory-javascript-by-building-a-pyramid-generator/6610bf6fa14d700beed1b109.md b/curriculum/challenges/chinese/15-javascript-algorithms-and-data-structures-22/learn-introductory-javascript-by-building-a-pyramid-generator/6610bf6fa14d700beed1b109.md
index 95026e413cd..d0e6ab2584e 100644
--- a/curriculum/challenges/chinese/15-javascript-algorithms-and-data-structures-22/learn-introductory-javascript-by-building-a-pyramid-generator/6610bf6fa14d700beed1b109.md
+++ b/curriculum/challenges/chinese/15-javascript-algorithms-and-data-structures-22/learn-introductory-javascript-by-building-a-pyramid-generator/6610bf6fa14d700beed1b109.md
@@ -7,19 +7,19 @@ dashedName: step-87
# --description--
-The equality operator `==` is used to check if two values are equal. To compare two values, you'd use a statement like `value == 8`.
+相等运算符 `==` 用于检查两个值是否相等。 要比较两个值,你可以使用类似 `value == 8` 的语句。
-Add an `if` statement to your loop. The statement should check if `done` is equal to `count` using the equality operator.
+在循环中添加 `if` 语句。 该语句应使用相等运算符检查 `done` 是否等于 `count`。
# --hints--
-You should use an `if` statement in your loop.
+你应该在循环中使用 `if` 语句。
```js
assert.match(__helpers.removeJSComments(code), /while\s*\(\s*continueLoop\s*\)\s*\{\s*done\+\+;\s*if/);
```
-Your `if` statement should use the equality operator to compare `done` and `count` in the condition.
+你的 `if` 语句应使用相等运算符来比较条件中的 `done` 和 `count`。
```js
assert.match(__helpers.removeJSComments(code), /while\s*\(\s*continueLoop\s*\)\s*\{\s*done\+\+;\s*if\s*\(\s*(?:done\s*==\s*count|count\s*==\s*done)\s*\)\s*\{/);
diff --git a/curriculum/challenges/chinese/15-javascript-algorithms-and-data-structures-22/learn-introductory-javascript-by-building-a-pyramid-generator/6610c105bbdacc114d6cdc44.md b/curriculum/challenges/chinese/15-javascript-algorithms-and-data-structures-22/learn-introductory-javascript-by-building-a-pyramid-generator/6610c105bbdacc114d6cdc44.md
index fac7d621a19..d1eef88ab19 100644
--- a/curriculum/challenges/chinese/15-javascript-algorithms-and-data-structures-22/learn-introductory-javascript-by-building-a-pyramid-generator/6610c105bbdacc114d6cdc44.md
+++ b/curriculum/challenges/chinese/15-javascript-algorithms-and-data-structures-22/learn-introductory-javascript-by-building-a-pyramid-generator/6610c105bbdacc114d6cdc44.md
@@ -7,7 +7,7 @@ dashedName: step-48
# --description--
-In order to use a function, you need to call it. A function call tells your application to run the code from the function wherever you choose to call it. The syntax for a function call is the function name followed by parentheses. For example, this code defines and calls a `test` function.
+为了使用函数,你需要调用它。 函数调用 告诉你的应用程序在你选择调用该函数的任何地方运行该函数的代码。 函数调用的语法是函数名称后跟括号。 例如,此代码定义并调用 `test` 函数。
```js
function test() {
@@ -16,17 +16,17 @@ function test() {
test();
```
-Call your `padRow` function.
+调用你的 `padRow` 函数。
# --hints--
-You should call the `padRow` function.
+你应该调用 `padRow` 函数。
```js
assert.lengthOf(__helpers.removeJSComments(code).match(/padRow\(\)/g), 2);
```
-Your `padRow` function body should be empty.
+你的 `padRow` 函数体应该是空的。
```js
assert.match(padRow.toString(), /\{\s*\}/);
diff --git a/curriculum/challenges/chinese/15-javascript-algorithms-and-data-structures-22/learn-introductory-javascript-by-building-a-pyramid-generator/6610c71600966a2191d3a64a.md b/curriculum/challenges/chinese/15-javascript-algorithms-and-data-structures-22/learn-introductory-javascript-by-building-a-pyramid-generator/6610c71600966a2191d3a64a.md
index 7445639f34d..e94c2aeefdc 100644
--- a/curriculum/challenges/chinese/15-javascript-algorithms-and-data-structures-22/learn-introductory-javascript-by-building-a-pyramid-generator/6610c71600966a2191d3a64a.md
+++ b/curriculum/challenges/chinese/15-javascript-algorithms-and-data-structures-22/learn-introductory-javascript-by-building-a-pyramid-generator/6610c71600966a2191d3a64a.md
@@ -7,7 +7,7 @@ dashedName: step-59
# --description--
-Values returned out of a function are used by calling the function. You can use the function call directly as the value it returns, or capture the returned value in a variable. This way, you can use the value assigned to a locally scoped variable, outside the function it was created in.
+函数返回的值可通过调用该函数来使用。 你可以直接使用函数调用作为其返回的值,或者在变量中捕获返回的值。 这样,你就可以在创建该变量的函数之外使用分配给本地作用域变量的值。
```js
function getName() {
@@ -23,12 +23,12 @@ console.log(capturedReturnValue); // "Camper cat"
console.log(name); // reference error
```
-To use your `"Testing"` value, return it out of the `padRow` function by updating your `return` statement to return only the `test` variable.
+要使用 `"Testing"` 值,请通过更新 `return` 语句以仅返回 `test` 变量,将其从 `padRow` 函数中返回。
# --hints--
-Your `padRow` function should return the `test` variable.
+你的 `padRow` 函数应该返回 `test` 变量。
```js
assert.equal(padRow("Naomi"), "Testing");
diff --git a/curriculum/challenges/chinese/15-javascript-algorithms-and-data-structures-22/learn-the-date-object-by-building-a-date-formatter/65388edfdf364fbb04e426f2.md b/curriculum/challenges/chinese/15-javascript-algorithms-and-data-structures-22/learn-the-date-object-by-building-a-date-formatter/65388edfdf364fbb04e426f2.md
index b21cece2190..a8eade0ea59 100644
--- a/curriculum/challenges/chinese/15-javascript-algorithms-and-data-structures-22/learn-the-date-object-by-building-a-date-formatter/65388edfdf364fbb04e426f2.md
+++ b/curriculum/challenges/chinese/15-javascript-algorithms-and-data-structures-22/learn-the-date-object-by-building-a-date-formatter/65388edfdf364fbb04e426f2.md
@@ -23,10 +23,16 @@ switch (expr) {
# --hints--
-你应该添加一个 `case`,条件是 `"yyyy-mm-dd"`。 然后将 `currentDateParagraph` 的 `textContent` 属性设置为 `formattedDate`。
+You should add a `case` with the value `"yyyy-mm-dd"`.
```js
-assert(code.match(/case\s*('|")yyyy-mm-dd\1\s*:\s*currentDateParagraph\.textContent\s*=\s*formattedDate/g));
+assert.match(code, /case\s*('|")yyyy-mm-dd\1\s*:\s*/);
+```
+
+You should set the `textContent` property of `currentDateParagraph` to `formattedDate` in the block of your `"yyyy-mm-dd"` case.
+
+```js
+assert.match(code, /case\s*('|")yyyy-mm-dd\1\s*:\s*currentDateParagraph\.textContent\s*=\s*formattedDate/);
```
# --seed--
diff --git a/curriculum/challenges/chinese/15-javascript-algorithms-and-data-structures-22/learn-the-date-object-by-building-a-date-formatter/65389a63d3b1d6c764c0e10e.md b/curriculum/challenges/chinese/15-javascript-algorithms-and-data-structures-22/learn-the-date-object-by-building-a-date-formatter/65389a63d3b1d6c764c0e10e.md
index d1267d86e57..1bfc1453e3f 100644
--- a/curriculum/challenges/chinese/15-javascript-algorithms-and-data-structures-22/learn-the-date-object-by-building-a-date-formatter/65389a63d3b1d6c764c0e10e.md
+++ b/curriculum/challenges/chinese/15-javascript-algorithms-and-data-structures-22/learn-the-date-object-by-building-a-date-formatter/65389a63d3b1d6c764c0e10e.md
@@ -13,16 +13,22 @@ dashedName: step-27
# --hints--
-你应该添加一个 `case`,条件是 `"mm-dd-yyyy-h-mm"`,然后将 `currentDateParagraph` 的 `textContent` 属性设置为空的模板字面量。
+You should add a `case` with the value `"mm-dd-yyyy-h-mm"`.
```js
-assert(code.match(/case\s*('|")mm-dd-yyyy-h-mm\1\s*:\s*currentDateParagraph\.textContent\s*=\s*``/g));
+assert.match(code, /case\s*('|")mm-dd-yyyy-h-mm\1\s*:\s*/);
```
-你应该在逻辑代码后面的 `case` 语句中包含 `break` 语句。
+You should set the `textContent` property of `currentDateParagraph` to an empty template literals inside the block of your `"mm-dd-yyyy-h-mm"` case.
```js
-assert(code.match(/currentDateParagraph\.textContent\s*=\s*``\s*;?\n+\s*break/g));
+assert.match(code, /case\s*('|")mm-dd-yyyy-h-mm\1\s*:\s*currentDateParagraph\.textContent\s*=\s*``/);
+```
+
+You should include a `break` statement in the `"mm-dd-yyyy-h-mm"` `case` after your logic.
+
+```js
+assert.match(code, /currentDateParagraph\.textContent\s*=\s*``\s*;?\n+\s*break/);
```
# --seed--
diff --git a/curriculum/challenges/chinese/15-javascript-algorithms-and-data-structures-22/learn-the-date-object-by-building-a-date-formatter/65389eff4893facbbe6eae67.md b/curriculum/challenges/chinese/15-javascript-algorithms-and-data-structures-22/learn-the-date-object-by-building-a-date-formatter/65389eff4893facbbe6eae67.md
index 08caadba92f..89898b1ce9f 100644
--- a/curriculum/challenges/chinese/15-javascript-algorithms-and-data-structures-22/learn-the-date-object-by-building-a-date-formatter/65389eff4893facbbe6eae67.md
+++ b/curriculum/challenges/chinese/15-javascript-algorithms-and-data-structures-22/learn-the-date-object-by-building-a-date-formatter/65389eff4893facbbe6eae67.md
@@ -31,10 +31,16 @@ switch (dayOfWeek) {
# --hints--
-你应该使用 `default` 情况将 `currentDateParagraph` 的 `textContent` 属性设置为 `formattedDate` 的值。
+You should have a `default` case after the existing cases.
```js
-assert(code.match(/default\s*:\s*currentDateParagraph\.textContent\s*=\s*formattedDate/g));
+assert.match(code, /default\s*:\s*/)
+```
+
+In the block of the `default` case, set the `textContent` property of `currentDateParagraph` to `formattedDate`.
+
+```js
+assert.match(code, /default\s*:\s*currentDateParagraph\.textContent\s*=\s*formattedDate/g);
```
# --seed--
diff --git a/curriculum/challenges/chinese/16-the-odin-project/top-build-a-rock-paper-scissors-game/build-a-rock-paper-scissors-game.md b/curriculum/challenges/chinese/16-the-odin-project/top-build-a-rock-paper-scissors-game/build-a-rock-paper-scissors-game.md
new file mode 100644
index 00000000000..d31a63c9495
--- /dev/null
+++ b/curriculum/challenges/chinese/16-the-odin-project/top-build-a-rock-paper-scissors-game/build-a-rock-paper-scissors-game.md
@@ -0,0 +1,261 @@
+---
+id: 66629f407d679d3105e8317f
+title: Build a Rock Paper Scissors Game
+challengeType: 14
+dashedName: top-build-a-rock-paper-scissors-game
+---
+
+# --description--
+Your game will be played against the computer. You will write a function that randomly returns `"rock"`, `"paper"` or `"scissors"`.
+
+You do not need to worry about the front-end part of the game. You will only write the logic for the game. Open the `script.js` and start following the instructions.
+
+**User stories:**
+
+1. You should have a function named `getComputerChoice`.
+
+1. Your `getComputerChoice` function should return `"rock"`, `"paper"`, or `"scissors"` at random.
+
+**Hint:** The [Math.random](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Math/random) method returns a random number that’s greater than or equal to 0 and less than 1. Think about how you can use this to conditionally return one of the multiple choices.
+
+Your game will be played by a human player. You will write a function that takes the user's choice and returns it.
+
+1. Create a function named `getHumanChoice`.
+
+1. Write the code so that `getHumanChoice` will return one of the valid choices depending on what the user inputs.
+
+**Hint:** Use the [prompt](https://developer.mozilla.org/en-US/docs/Web/API/Window/prompt) method to get the user’s input.
+
+Your game will keep track of the player's score. You will write variables to keep track of the player's score.
+
+1. Create two new variables named `humanScore` and `computerScore` in the global scope.
+
+1. Initialize those variables with the value of `0`.
+
+Your game will be played round by round. You will write a function that takes the human and computer player choices as arguments, plays a single round, increments the round winner’s score and logs a winner announcement.
+
+1. Create a new function named `playRound`.
+
+1. Define two parameters for `playRound`. Parameter one `humanChoice` and parameter two `computerChoice`. Use these two parameters to take the human and computer choices as arguments.
+
+1. Make your function’s `humanChoice` parameter case-insensitive so that players can input `"rock"`, `"ROCK"`, `"RocK"`, or other variations.
+
+1. Write the code for your `playRound` function that returns a string value representing the round winner.
+
+- If it is a tie, it should return `"It's a tie!"`.
+
+- If the player wins, it should return `"You win! [player choice] beats [computer choice]"`.
+
+- If the computer wins, it should return `"You lose! [computer choice] beats [player choice]"`.
+
+1. Increment the `humanScore` or `computerScore` variable based on the round winner.
+
+Your game will play 3 rounds. You will write a function named `playGame` that calls `playRound` to play 3 rounds, keeps track of the scores, and declares a winner at the end.
+
+1. Create a new function named `playGame`.
+
+1. Create a loop that plays 3 rounds and calls the `playRound` function each time with the human's choice and the computer's choice functions as arguments.
+
+1. At the end of the game, return the winner of the game based on who won the most rounds.
+
+- If the human player wins more rounds than the computer player, return a message that says `"You win the game!"`.
+
+- If the computer player wins more rounds than the human player, return a message that says `"You lose the game!"`.
+
+# --hints--
+
+You should have a function called `getComputerChoice`
+
+```js
+assert.isFunction(getComputerChoice);
+```
+
+Your `getComputerChoice` function should return `"rock"`, `"paper"`, or `"scissors"` at random.
+
+```js
+const counts = {}
+for (let i = 0; i < 100; i++) {
+ const result = getComputerChoice();
+ counts[result] = (counts[result] ?? 0) + 1;
+}
+assert.lengthOf(Object.keys(counts), 3);
+assert.include(Object.keys(counts), "rock");
+assert.include(Object.keys(counts), "paper");
+assert.include(Object.keys(counts), "scissors");
+```
+
+You should have a function called `getHumanChoice`
+
+```js
+assert.isFunction(getHumanChoice);
+```
+
+You should have two variables named `humanScore` and `computerScore` in the global scope.
+
+```js
+assert.exists(humanScore);
+assert.exists(computerScore);
+```
+
+You should have a function called `playRound`
+
+```js
+assert.isFunction(playRound);
+```
+
+Your `playRound` function should take the human and computer player choices as arguments with the parameters `humanChoice` and `computerChoice`.
+
+```js
+assert.match(playRound.toString(), /\s*(?:\bhumanChoice\b\s*,\s*\bcomputerChoice\b)/);
+```
+
+Your `playRound` function should be case-insensitive so that players can input `"rock"`, `"ROCK"`, `"RocK"`, or other variations.
+
+```js
+assert.match(playRound.toString(), /\bhumanChoice\s*\.toLowerCase\(\)/);
+```
+
+Your `playRound` function should return the string `"It's a tie!"` if the human and computer choices are the same.
+
+```js
+assert.equal(playRound("rock", "rock"), "It's a tie!");
+```
+
+Your `playRound` function should return the string `"You win! [player choice] beats [computer choice]"` if the player wins.
+
+```js
+assert.equal(playRound("rock", "scissors"), "You win! rock beats scissors");
+```
+
+Your `playRound` function should return the string `"You lose! [computer choice] beats [player choice]"` if the computer wins.
+
+```js
+assert.equal(playRound("rock", "paper"), "You lose! paper beats rock");
+```
+
+Your `playRound` function should increment the `humanScore` or `computerScore` variable based on the round winner.
+
+```js
+humanScore = 0;
+computerScore = 0;
+playRound("rock", "scissors");
+assert.equal(humanScore, 1);
+```
+
+You should have a function called `playGame`.
+
+```js
+assert.isFunction(playGame);
+```
+
+You should use a loop to play 3 rounds.
+
+```js
+assert.match(playGame.toString(), /\bfor\s*\(/);
+```
+
+You should return the winner of the game based on who won the most rounds.
+
+```js
+window.prompt = () => "rock";
+assert.match(playGame(), /You (win|lose) the game!/);
+```
+
+# --seed--
+
+## --seed-contents--
+
+```js
+const hand = ['rock', 'paper', 'scissor'];
+```
+
+```html
+
+
+
+
+
+```
+
+# --solutions--
+
+```html
+
+
+
+
+
+```
+
+```js
+const hand = ['rock', 'paper', 'scissors'];
+
+
+let computerScore = 0;
+let humanScore = 0;
+
+const getComputerChoice = () => {
+ return hand[Math.floor(Math.random() * hand.length)];
+}
+
+const getHumanChoice = () => {
+ return prompt();
+}
+
+const playRound = (humanChoice, computerChoice) => {
+ humanChoice = humanChoice.toLowerCase()
+
+ const tie = "It's a tie!"
+ const win = `You win! ${humanChoice} beats ${computerChoice}`
+ const lose = `You lose! ${computerChoice} beats ${humanChoice}`
+
+
+ if (humanChoice == 'rock') {
+ if (computerChoice == 'rock') {
+ computerScore++;
+ humanScore++;
+ return tie;
+ } else if (computerChoice == 'paper') {
+ computerScore++;
+ return lose;
+ } else {
+ humanScore++;
+ return win;
+ }
+ } else if (humanChoice == 'paper') {
+ if (computerChoice == 'rock') {
+ humanScore++;
+ return win;
+ } else if (computerChoice == 'paper') {
+ computerScore++;
+ humanScore++;
+ return tie;
+ } else {
+ computerScore++;
+ return lose;
+ }
+ } else if (humanChoice == 'scissors') {
+ if (computerChoice == 'rock') {
+ computerScore++;
+ return lose;
+ } else if (computerChoice == 'paper') {
+ humanScore++;
+ return win;
+ } else {
+ computerScore++;
+ humanScore++;
+ return tie;
+ }
+ }
+}
+
+const playGame = () => {
+ for(let i = 0; i < 3; i++){
+ playRound(getHumanChoice(), getComputerChoice())
+ }
+
+ return humanScore > computerScore ? "You win the game!" : "You lose the game!"
+}
+
+```
+
diff --git a/curriculum/challenges/chinese/25-front-end-development/front-end-development-certification-exam/645147516c245de4d11eb7ba.md b/curriculum/challenges/chinese/25-front-end-development/front-end-development-certification-exam/645147516c245de4d11eb7ba.md
new file mode 100644
index 00000000000..28af96694df
--- /dev/null
+++ b/curriculum/challenges/chinese/25-front-end-development/front-end-development-certification-exam/645147516c245de4d11eb7ba.md
@@ -0,0 +1,20 @@
+---
+id: 645147516c245de4d11eb7ba
+title: Front End Development Certification Exam
+challengeType: 17
+dashedName: front-end-development-certification-exam
+---
+
+# --description--
+
+Here are some rules:
+
+- click start
+
+# --instructions--
+
+# --hints--
+
+# --seed--
+
+# --solutions--
diff --git a/curriculum/challenges/chinese/25-front-end-development/learn-basic-html-by-building-a-recipe-page/66731cd027ef3acb155669f5.md b/curriculum/challenges/chinese/25-front-end-development/learn-basic-html-by-building-a-recipe-page/66731cd027ef3acb155669f5.md
new file mode 100644
index 00000000000..2b1a9d0a9de
--- /dev/null
+++ b/curriculum/challenges/chinese/25-front-end-development/learn-basic-html-by-building-a-recipe-page/66731cd027ef3acb155669f5.md
@@ -0,0 +1,28 @@
+---
+id: 66731cd027ef3acb155669f5
+title: Step 1
+challengeType: 0
+dashedName: step-1
+---
+
+# --description--
+
+step 1 instructions
+
+# --hints--
+
+Test 1
+
+```js
+
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+--fcc-editable-region--
+
+--fcc-editable-region--
+```
diff --git a/curriculum/challenges/espanol/00-certifications/front-end-development-certification/front-end-development.yml b/curriculum/challenges/espanol/00-certifications/front-end-development-certification/front-end-development.yml
new file mode 100644
index 00000000000..25d1e081292
--- /dev/null
+++ b/curriculum/challenges/espanol/00-certifications/front-end-development-certification/front-end-development.yml
@@ -0,0 +1,10 @@
+---
+id: 64514fda6c245de4d11eb7bb
+title: Front End Development Certification
+certification: front-end-development
+challengeType: 7
+isPrivate: true
+tests:
+ -
+ id: 645147516c245de4d11eb7ba
+ title: Front End Development Certification Exam
diff --git a/curriculum/challenges/espanol/03-front-end-development-libraries/sass/create-reusable-css-with-mixins.md b/curriculum/challenges/espanol/03-front-end-development-libraries/sass/create-reusable-css-with-mixins.md
index 3773580f8f7..4e7044c92ee 100644
--- a/curriculum/challenges/espanol/03-front-end-development-libraries/sass/create-reusable-css-with-mixins.md
+++ b/curriculum/challenges/espanol/03-front-end-development-libraries/sass/create-reusable-css-with-mixins.md
@@ -8,85 +8,112 @@ dashedName: create-reusable-css-with-mixins
# --description--
-En Sass, un mixin es un grupo de declaraciones de CSS que pueden reutilizarse a través de la hoja de estilo.
-
-Las nuevas funciones de CSS tardan en ser adoptadas por completo y estar listas para su uso en todos los navegadores. A medida que se agregan funciones a los navegadores, las reglas CSS que las utilizan pueden necesitar prefijos de proveedor. Consideremos `box-shadow`:
+In Sass, a mixin is a group of CSS declarations that can be reused throughout the style sheet. The definition starts with the `@mixin` at-rule, followed by a custom name. You apply the mixin using the `@include` at-rule.
```scss
-div {
- -webkit-box-shadow: 0px 0px 4px #fff;
- -moz-box-shadow: 0px 0px 4px #fff;
- -ms-box-shadow: 0px 0px 4px #fff;
- box-shadow: 0px 0px 4px #fff;
+@mixin reset-list {
+ margin: 0;
+ padding: 0;
+ list-style: none;
+}
+
+nav ul {
+ @include reset-list;
}
```
-Es mucho teclear para reescribir esta regla para todos los elementos que tienen un `box-shadow`, o para cambiar cada valor para probar diferentes efectos. Mixins son como funciones para CSS. Aquí está cómo escribir una:
+Compiles to:
-```scss
-@mixin box-shadow($x, $y, $blur, $c){
- -webkit-box-shadow: $x $y $blur $c;
- -moz-box-shadow: $x $y $blur $c;
- -ms-box-shadow: $x $y $blur $c;
- box-shadow: $x $y $blur $c;
+```css
+nav ul {
+ margin: 0;
+ padding: 0;
+ list-style: none;
}
```
-La definición empieza con `@mixin` seguido de un nombre personalizado. Los parámetros ( `$x`, `$y`, `$blur`, y `$c` en el ejemplo anterior) son opcionales. Ahora cada vez que se necesite una regla `box-shadow`, una sola línea llamando al mixin reemplaza el tener que escribir todos los prefijos del proveedor. Se llama a un mixin con la directiva `@include`:
+Your mixins can also take arguments, which allows their behavior to be customized. The arguments are required when using the mixin.
```scss
-div {
- @include box-shadow(0px, 0px, 4px, #fff);
+@mixin prose($font-size, $spacing) {
+ font-size: $font-size;
+ margin: 0;
+ margin-block-end: $spacing;
+}
+
+p {
+ @include prose(1.25rem, 1rem);
+}
+
+h2 {
+ @include prose(2.4rem, 1.5rem);
+}
+```
+
+You can make arguments optional by giving the parameters default values.
+
+```scss
+@mixin text-color($color: black) {
+ color: $color;
+}
+
+p {
+ @include text-color(); /* color: black */
+}
+
+nav a {
+ @include text-color(orange);
}
```
# --instructions--
-Escribe un mixin para `border-radius` y dale un parámetro `$radius`. Debe utilizar todos los prefijos de proveedor del ejemplo. Luego usa el mixin `border-radius` para dar al elemento `#awesome` un border radius de `15px`.
+Write a mixin named `shape` and give it 3 parameters: `$w`, `$h`, and `$bg-color`.
+
+Use the `shape` mixin to give the `#square` element a width and height of `50px`, and the color `red`. For the `#rect-a` element add a width of `100px`, a height of `50px`, and the color `blue`. Finally, for the `#rect-b` element add a width of `50px`, a height of `100px`, and the color `orange`.
# --hints--
-Tu código debe declarar un mixin llamado `border-radius` que tiene un parámetro llamado `$radius`.
+You should declare a mixin named `shape` with 3 parameters: `$w`, `$h`, and `$bg-color`.
```js
-assert(code.match(/@mixin\s+?border-radius\s*?\(\s*?\$radius\s*?\)\s*?{/gi));
+assert.match(code, /@mixin\s+shape\s*\(\s*\$w,\s*\$h,\s*\$bg-color\s*\)\s*{/gi);
```
-Tu código debe incluir el prefijo de proveedor `-webkit-border-radius` que utiliza el parámetro `$radius`.
+Your mixin should include a `width` property that uses the `$w` parameter.
```js
-assert(
- __helpers.removeWhiteSpace(code).match(/-webkit-border-radius:\$radius;/gi)
-);
+assert.match(__helpers.removeWhiteSpace(code), /width:\$w;/gi);
```
-Tu código debe incluir el prefijo de proveedor `-moz-border-radius` que utiliza el parámetro `$radius`.
+Your mixin should include a `height` property that uses the `$h` parameter.
```js
-assert(
- __helpers.removeWhiteSpace(code).match(/-moz-border-radius:\$radius;/gi)
-);
+assert.match(__helpers.removeWhiteSpace(code), /height:\$h;/gi);
```
-Tu código debe incluir el prefijo de proveedor `-ms-border-radius` que utiliza el parámetro `$radius`.
+Your mixin should include a `background-color` property that uses the `$bg-color` parameter.
```js
-assert(__helpers.removeWhiteSpace(code).match(/-ms-border-radius:\$radius;/gi));
+assert.match(__helpers.removeWhiteSpace(code), /background-color:\$bg\-color;/gi);
```
-Tu código debe incluir la regla general `border-radius` que utiliza el parámetro `$radius`.
+You should replace the styles inside the `#square` selector with a call to the `shape` mixin using the `@include` keyword. Setting a width and height of `50px`, and the color `red`.
```js
-assert(
- __helpers.removeWhiteSpace(code).match(/border-radius:\$radius;/gi).length ==
- 4
-);
+assert.match(code, /#square\s*{\s*@include\s+shape\(\s*50px,\s*50px,\s*red\s*\)\s*;\s*}/gi);
```
-Tu código debe llamar al `border-radius mixin` usando la palabra clave `@include`, configurándolo a `15px`.
+You should replace the styles inside the `#rect-a` selector with a call to the `shape` mixin using the `@include` keyword. Setting a width of `100px`, a height of `50px`, and the color `blue`.
```js
-assert(code.match(/@include\s+?border-radius\(\s*?15px\s*?\)\s*;/gi));
+assert.match(code, /#rect-a\s*{\s*@include\s+shape\(\s*100px,\s*50px,\s*blue\s*\)\s*;\s*}/gi);
+```
+
+You should replace the styles inside the `#rect-b` selector with a call to the `shape` mixin using the `@include` keyword. Setting a width of `50px`, a height of `100px`, and the color `orange`.
+
+```js
+assert.match(code, /#rect-b\s*{\s*@include\s+shape\(\s*50px,\s*100px,\s*orange\s*\)\s*;\s*}/gi);
```
# --seed--
@@ -95,38 +122,54 @@ assert(code.match(/@include\s+?border-radius\(\s*?15px\s*?\)\s*;/gi));
```html
-
+
+
+
```
# --solutions--
```html
-
+
+
+
```
diff --git a/curriculum/challenges/espanol/09-information-security/information-security-projects/stock-price-checker.md b/curriculum/challenges/espanol/09-information-security/information-security-projects/stock-price-checker.md
index 02f7a3d8a7e..ac0aebce8d2 100644
--- a/curriculum/challenges/espanol/09-information-security/information-security-projects/stock-price-checker.md
+++ b/curriculum/challenges/espanol/09-information-security/information-security-projects/stock-price-checker.md
@@ -20,7 +20,7 @@ Trabajar en este proyecto implicará escribir tu código utilizando uno de los s
# --instructions--
-1. SET `NODE_ENV` to `test` without quotes and set `DB` to your MongoDB connection string
+1. Set the `NODE_ENV` environment variable to `test`, without quotes
2. Completa el proyecto en `routes/api.js` o creando un manejador/controlador
3. Añadirás cualquier característica de seguridad a `server.js`
4. Crearás todas las pruebas funcionales en `tests/2_functional-tests.js`
diff --git a/curriculum/challenges/espanol/14-responsive-web-design-22/learn-basic-css-by-building-a-cafe-menu/5f3477cb2e27333b1ab2b955.md b/curriculum/challenges/espanol/14-responsive-web-design-22/learn-basic-css-by-building-a-cafe-menu/5f3477cb2e27333b1ab2b955.md
index 57eef0884fb..8fdce01599d 100644
--- a/curriculum/challenges/espanol/14-responsive-web-design-22/learn-basic-css-by-building-a-cafe-menu/5f3477cb2e27333b1ab2b955.md
+++ b/curriculum/challenges/espanol/14-responsive-web-design-22/learn-basic-css-by-building-a-cafe-menu/5f3477cb2e27333b1ab2b955.md
@@ -7,7 +7,7 @@ dashedName: step-16
# --description--
-Ahora tienes que vincular el archivo `styles.css` para que los estilos se apliquen de nuevo. Anida el elemento de cierre automático `link` dentro del elemento `head`. Dale un atributo `rel` con el valor `stylesheet` y un atributo `href` con el valor `styles.css`.
+Now you need to link the `styles.css` file, so the styles will be applied again. Inside the `head` element, add a `link` element. Give it a `rel` attribute with the value of `"stylesheet"` and a `href` attribute with the value of `"styles.css"`.
# --hints--
diff --git a/curriculum/challenges/espanol/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5dc24614f86c76b9248c6ebd.md b/curriculum/challenges/espanol/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5dc24614f86c76b9248c6ebd.md
index ae57f6bc623..2cc79afadae 100644
--- a/curriculum/challenges/espanol/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5dc24614f86c76b9248c6ebd.md
+++ b/curriculum/challenges/espanol/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5dc24614f86c76b9248c6ebd.md
@@ -7,9 +7,9 @@ dashedName: step-10
# --description--
-You can link to another page with the anchor (`a`) element.
+Puedes enlazar a otra página con el elemento de anclaje (`a`).
-Here is an example linking to `https://www.freecodecamp.org`:
+Este es un ejemplo de enlace a `https://www.freecodecamp.org`:
```html
diff --git a/curriculum/challenges/espanol/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5dfa22d1b521be39a3de7be0.md b/curriculum/challenges/espanol/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5dfa22d1b521be39a3de7be0.md
index 77def24d5e6..a4e18e5c5d7 100644
--- a/curriculum/challenges/espanol/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5dfa22d1b521be39a3de7be0.md
+++ b/curriculum/challenges/espanol/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5dfa22d1b521be39a3de7be0.md
@@ -7,13 +7,13 @@ dashedName: step-12
# --description--
-You can turn any text into a link, such as the text inside of a `p` element.
+Puedes convertir cualquier texto en un enlace, como el texto dentro de un elemento `p`.
``` html
```
-In the text of your `p` element, turn the words `cat photos` into a link by adding opening and closing anchor (`a`) tags around these words. Then set the `href` attribute to `https://freecatphotoapp.com`
+En el texto de su elemento `p`, convierta las palabras `fotos de gatos` en un enlace agregando etiquetas de anclaje de apertura y cierre (`a`) alrededor de estas palabras.. Luego establece el atributo `href` en `https://freecatphotoapp.com`
# --hints--
@@ -41,7 +41,7 @@ const innerContent = nestedAnchor.innerHTML;
assert.isTrue(innerContent.trim() === 'cat photos');
```
-The text inside your anchor element has extra leading or trailing whitespace. The only space in the anchor text should be between the word `cat` and the word `photos`.
+El texto dentro de tu elemento anchor tiene espacio en blanco extra inicial o final. El único espacio en el texto del elemento anchor debería estar entre la palabra `cat` y la palabra `photos`.
```js
const nestedAnchor = document.querySelector('p > a');
@@ -49,7 +49,7 @@ const innerContent = nestedAnchor.innerHTML;
assert.isNotTrue(/^\s+|\s+$/.test(innerContent));
```
-After nesting the anchor (`a`) element, the only `p` element content visible in the browser should be `See more cat photos in our gallery.` Double check the text, spacing, or punctuation of both the `p` and nested anchor element.
+Después de anidar el elemento anchor (`a`), el único contenido visible del elemento `p` en el navegador debería ser `See more cat photos in our gallery.` Verifica el texto, el espaciado o la puntuación tanto del elemento `p` como del elemento anchor anidado.
```js
assert.match(code, /
see more ]*>cat photos<\/a> in our gallery\.?<\/p>/i)
diff --git a/curriculum/challenges/espanol/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5dfa30b9eacea3f48c6300ad.md b/curriculum/challenges/espanol/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5dfa30b9eacea3f48c6300ad.md
index 2577a934b0c..55685f7f087 100644
--- a/curriculum/challenges/espanol/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5dfa30b9eacea3f48c6300ad.md
+++ b/curriculum/challenges/espanol/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5dfa30b9eacea3f48c6300ad.md
@@ -7,9 +7,9 @@ dashedName: step-15
# --description--
-In previous steps you used an anchor element to turn text into a link. Other types of content can also be turned into a link by wrapping it in anchor tags.
+En los pasos anteriores usaste un elemento anchor para convertir un texto a un enlace. Otros tipos de contenido también se pueden convertir en un enlace envolviéndolos en etiquetas anchor.
-Here is an example of turning an image into a link:
+Este es un ejemplo de cómo convertir una imagen en un enlace:
```html
@@ -17,11 +17,11 @@ Here is an example of turning an image into a link:
```
-Turn the image into a link by surrounding it with necessary element tags. Use `https://freecatphotoapp.com` as the anchor's `href` attribute value.
+Convierte la imagen a un enlace rodeándola con las etiquetas correctas. Utiliza `https://freecatphotoapp.com` como el valor del atributo `href` del elemento anchor.
# --hints--
-You should have an `img` element with a `src` value of `https://cdn.freecodecamp.org/curriculum/cat-photo-app/relaxing-cat.jpg`. You may have accidentally deleted it.
+Debes tener un elemento `img` con un valor `src` de `https://cdn.freecodecamp.org/curriculum/cat-photo-app/relaxing-cat.jpg`. Puede que lo hayas borrado accidentalmente.
```js
assert(
@@ -31,37 +31,37 @@ assert(
);
```
-Your anchor (`a`) element should have an opening tag. Opening tags have this syntax: ``.
+Tu elemento anchor (`a`) debe tener una etiqueta de apertura. Las etiquetas de apertura tienen esta sintaxis: ``.
```js
assert(document.querySelectorAll('a').length >= 2);
```
-You are missing a closing (`a`) tag after the image.
+Te falta una etiqueta (`a`) de cierre después de la imagen.
```js
assert(document.querySelectorAll('a').length === 2);
```
-Your anchor (`a`) element should have a closing tag. Closing tags have a `/` just after the `<` character.
+Tu elemento anchor (`a`) debe tener una etiqueta de cierre. Las etiquetas de cierre tiene una `/` después del carácter `<`.
```js
assert(code.match(/<\/a>/g).length >= 2);
```
-You should only add one closing anchor (`a`) tag. Please remove any extras.
+Solo debes añadir una etiqueta anchor (`a`) de cierre. Elimina cualquier extra.
```js
assert(code.match(/<\/a>/g).length === 2);
```
-Your anchor (`a`) element does not have an `href` attribute. Check that there is a space after the opening tag's name and/or there are spaces before all attribute names.
+Tu elemento anchor (`a`) no tiene atributo `href`. Comprueba que hay un espacio después del nombre de la etiqueta de apertura y/o que hay espacios antes de los nombres de los atributos.
```js
assert(document.querySelector('a').hasAttribute('href'));
```
-Your anchor (`a`) element should link to `https://freecatphotoapp.com`. You have either omitted the URL or have a typo.
+Tu elemento anchor (`a`) te debe de llevar a `https://freecatphotoapp.com`. Probablemente no has añadido la URL o tienes un error tipográfico.
```js
assert(
@@ -70,7 +70,7 @@ assert(
);
```
-Your `img` element should be nested within the anchor (`a`) element. The entire `img` element should be inside the opening and closing tags of the anchor (`a`) element.
+Tu elemento `img` debe estar anidado dentro del elemento anchor (`a`). Todo el elemento `img` debe estar entre las etiquetas de apertura y cierre del elemento anchor (`a`).
```js
assert(document.querySelector('img').parentNode.nodeName === 'A');
diff --git a/curriculum/challenges/espanol/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5dfa37b9eacea3f48c6300b0.md b/curriculum/challenges/espanol/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5dfa37b9eacea3f48c6300b0.md
index 9e4a650b1ca..9f35563c7a6 100644
--- a/curriculum/challenges/espanol/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5dfa37b9eacea3f48c6300b0.md
+++ b/curriculum/challenges/espanol/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5dfa37b9eacea3f48c6300b0.md
@@ -7,7 +7,7 @@ dashedName: step-20
# --description--
-To create an unordered list of items, you can use the `ul` element.
+Para crear una lista no ordenada de elementos, puedes usar el elemento `ul`.
Después del elemento `h3` con el texto `Things cats love:`, añade una lista desordenada, unordered list - (`ul`). Ten en cuenta que nada será mostrado aún.
diff --git a/curriculum/challenges/espanol/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5dfb6a35eacea3f48c6300b4.md b/curriculum/challenges/espanol/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5dfb6a35eacea3f48c6300b4.md
index 1ff83adf887..5e01a198dfe 100644
--- a/curriculum/challenges/espanol/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5dfb6a35eacea3f48c6300b4.md
+++ b/curriculum/challenges/espanol/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5dfb6a35eacea3f48c6300b4.md
@@ -7,9 +7,9 @@ dashedName: step-24
# --description--
-A figure caption (`figcaption`) element is used to add a caption to describe the image contained within the `figure` element.
+El elemento de leyenda de figura (`figcaption`) se usa para agregar una leyenda que describe la imagen contenida en el elemento `figure`.
-Here is an example of a `figcaption` element with the caption of `A cute cat`:
+Aquí hay un ejemplo de un elemento `figcaption` con la leyenda `A cute cat`:
```html
diff --git a/curriculum/challenges/espanol/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5ef9b03c81a63668521804d0.md b/curriculum/challenges/espanol/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5ef9b03c81a63668521804d0.md
index ef1c2a6eefc..3bb3afb3fc6 100644
--- a/curriculum/challenges/espanol/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5ef9b03c81a63668521804d0.md
+++ b/curriculum/challenges/espanol/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5ef9b03c81a63668521804d0.md
@@ -7,7 +7,7 @@ dashedName: step-25
# --description--
-To place emphasis on a specific word or phrase, you can use the `em` element.
+Para poner énfasis en una palabra o frase específica, puedes utilizar el elemento `em`.
Enfatiza la palabra `love` en el elemento `figcaption` envolviendola en un elemento énfasis `em`.
diff --git a/curriculum/challenges/espanol/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5ef9b03c81a63668521804d2.md b/curriculum/challenges/espanol/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5ef9b03c81a63668521804d2.md
index f4a8e714f02..edd84e8727e 100644
--- a/curriculum/challenges/espanol/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5ef9b03c81a63668521804d2.md
+++ b/curriculum/challenges/espanol/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5ef9b03c81a63668521804d2.md
@@ -55,7 +55,7 @@ assert.deepStrictEqual(
);
```
-You should only have one `ol` element.
+Solo debes tener un elemento `ol`.
```js
assert([...document.querySelectorAll('ol')].length == 1);
diff --git a/curriculum/challenges/espanol/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5ef9b03c81a63668521804d6.md b/curriculum/challenges/espanol/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5ef9b03c81a63668521804d6.md
index 799f63c4035..43d3ca32618 100644
--- a/curriculum/challenges/espanol/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5ef9b03c81a63668521804d6.md
+++ b/curriculum/challenges/espanol/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5ef9b03c81a63668521804d6.md
@@ -9,7 +9,7 @@ dashedName: step-35
Ahora añadirás un formulario web para recolectar información de los usuarios.
-The `form` element is used to get information from a user like their name, email, and other details.
+El elemento `form` se utiliza para obtener información de un usuario, como su nombre, correo electrónico y otros detalles.
Después del título `Cat Form`, añade un elemento `form`.
diff --git a/curriculum/challenges/espanol/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5ef9b03c81a63668521804da.md b/curriculum/challenges/espanol/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5ef9b03c81a63668521804da.md
index 6130ef9eda3..9dbe7b78d7a 100644
--- a/curriculum/challenges/espanol/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5ef9b03c81a63668521804da.md
+++ b/curriculum/challenges/espanol/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5ef9b03c81a63668521804da.md
@@ -7,7 +7,7 @@ dashedName: step-42
# --description--
-The `button` element is used to create a clickable button.
+El elemento `button` se utiliza para crear un botón cliqueable.
Añade un elemento `button` con el texto `Submit` debajo del elemento `input`. El comportamiento predeterminado de un botón sin atributos en un formulario es enviar la información a la ubicación especificada en el atributo `action` del formulario.
diff --git a/curriculum/challenges/espanol/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5ef9b03c81a63668521804dd.md b/curriculum/challenges/espanol/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5ef9b03c81a63668521804dd.md
index b9a7366dd42..a597df61e92 100644
--- a/curriculum/challenges/espanol/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5ef9b03c81a63668521804dd.md
+++ b/curriculum/challenges/espanol/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5ef9b03c81a63668521804dd.md
@@ -7,15 +7,15 @@ dashedName: step-45
# --description--
-`label` elements are used to help associate the text for an `input` element with the `input` element itself (especially for assistive technologies like screen readers).
+Los elementos `label` se utilizan para ayudar a asociar el texto de un elemento `input` con el propio elemento `input` (especialmente para tecnologías de asistencia como lectores de pantalla).
-Here is an example of a `label` element with a `radio` button:
+Aquí tienes un ejemplo de un elemento `label` con un botón `radio`:
```html
```
-In the example, clicking on the word `"cat"` will also select the `radio` button.
+En el ejemplo, hacer clic en la palabra `"cat"` también seleccionará el botón de `radio`.
Anida tu `radio` button dentro de un elemento `label`.
diff --git a/curriculum/challenges/espanol/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5ef9b03c81a63668521804de.md b/curriculum/challenges/espanol/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5ef9b03c81a63668521804de.md
index e25495cac2e..6ec860c38ad 100644
--- a/curriculum/challenges/espanol/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5ef9b03c81a63668521804de.md
+++ b/curriculum/challenges/espanol/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5ef9b03c81a63668521804de.md
@@ -9,7 +9,7 @@ dashedName: step-48
Puedes observar que ambos elementos radio button pueden ser seleccionados al mismo tiempo. Para hacer que al seleccionar un radio button, el otro sé deseleccione automáticamente, ambos botones deben tener un atributo `name` con el mismo valor.
-Here is an example of two radio buttons with the same `name` attribute:
+Aquí tienes como ejemplo dos botones de radio que tienen el mismo atributo `name`:
```html
Breakfast
diff --git a/curriculum/challenges/espanol/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5ef9b03c81a63668521804df.md b/curriculum/challenges/espanol/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5ef9b03c81a63668521804df.md
index e2337734518..92d483af241 100644
--- a/curriculum/challenges/espanol/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5ef9b03c81a63668521804df.md
+++ b/curriculum/challenges/espanol/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5ef9b03c81a63668521804df.md
@@ -9,7 +9,7 @@ dashedName: step-46
El atributo `id` se utiliza para identificar elementos HTML específicos. Cada atributo `id` debe tener un valor único, diferente a los demás valores `id` de la página.
-Here is an example of an `input` element with an `id` attribute:
+Aquí tienes un ejemplo de un elemento `input` con un atributo `id`:
```html
diff --git a/curriculum/challenges/espanol/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5ef9b03c81a63668521804e2.md b/curriculum/challenges/espanol/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5ef9b03c81a63668521804e2.md
index 275b739e1c9..9f514c9862c 100644
--- a/curriculum/challenges/espanol/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5ef9b03c81a63668521804e2.md
+++ b/curriculum/challenges/espanol/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5ef9b03c81a63668521804e2.md
@@ -7,7 +7,7 @@ dashedName: step-54
# --description--
-Los formularios Usualmente usan casillas de verificación (checkboxes-checkbox) para preguntas que puedan tener más de una respuesta. The `input` element with a `type` attribute set to `checkbox` creates a checkbox.
+Los formularios Usualmente usan casillas de verificación (checkboxes-checkbox) para preguntas que puedan tener más de una respuesta. El elemento `input` con un atributo `type` establecido en `checkbox` crea una casilla de verificación.
Bajo el elemento `legend` que acabas de añadir, agrega un elemento `input` con un atributo `type` con el valor `checkbox` y dale la opción:
diff --git a/curriculum/challenges/espanol/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5ef9b03c81a63668521804e5.md b/curriculum/challenges/espanol/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5ef9b03c81a63668521804e5.md
index e9f665a1a8e..b01865202e6 100644
--- a/curriculum/challenges/espanol/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5ef9b03c81a63668521804e5.md
+++ b/curriculum/challenges/espanol/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5ef9b03c81a63668521804e5.md
@@ -7,9 +7,9 @@ dashedName: step-61
# --description--
-In order to make a checkbox checked or radio button selected by default, you need to add the `checked` attribute to it.
+Para hacer que una casilla de verificación o un botón de radio este seleccionado de forma predeterminada, necesitas añadirle el atributo `checked`.
-Here is an example of a radio button with the `checked` attribute:
+Aquí tienes un ejemplo de un botón de radio con atributo `checked`:
```html
Breakfast
@@ -30,7 +30,7 @@ assert(
);
```
-Your first radio button, with the `id` set to `indoor`, should have the `checked` attribute.
+Tu primer radio button, con un `id` con el valor `indoor`, debería tener el atributo `checked`.
```js
assert($('input[type="radio"]')[0].hasAttribute('checked'));
diff --git a/curriculum/challenges/espanol/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5ef9b03c81a63668521804e7.md b/curriculum/challenges/espanol/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5ef9b03c81a63668521804e7.md
index a270a411906..92703ea06af 100644
--- a/curriculum/challenges/espanol/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5ef9b03c81a63668521804e7.md
+++ b/curriculum/challenges/espanol/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5ef9b03c81a63668521804e7.md
@@ -7,7 +7,7 @@ dashedName: step-62
# --description--
-The `footer` element is used to define a footer for a document or section. A footer typically contains information about the author of the document, copyright data, links to terms of use, contact information, and more.
+El elemento `footer` se usa para definir el pie de página de un documento o sección. Un pie de página normalmente contiene información sobre el autor del documento, datos de copyright, enlaces a términos de uso, información de contacto, etcétera.
Después del elemento `main` añade un elemento `footer`.
diff --git a/curriculum/challenges/espanol/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5ef9b03c81a63668521804ea.md b/curriculum/challenges/espanol/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5ef9b03c81a63668521804ea.md
index 4d2b70e0c26..b7cac9f7120 100644
--- a/curriculum/challenges/espanol/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5ef9b03c81a63668521804ea.md
+++ b/curriculum/challenges/espanol/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5ef9b03c81a63668521804ea.md
@@ -9,7 +9,7 @@ dashedName: step-65
Puedes notar que todo lo que has añadido hasta ahora, está dentro del elemento `body`. Todos los elementos que deben ser renderizados o mostrados en la página, deben ir dentro del elemento `body`. Sin embargo, otro tipo información que también es importante va dentro del elemento `head`.
-The `head` element is used to contain metadata about the document, such as its title, links to stylesheets, and scripts. Metadata is information about the page that isn't displayed directly on the page.
+El elemento `head` se utiliza para contener metadatos sobre el documento, como su título, enlaces a hojas de estilo y scripts. Los metadatos son información sobre la página que no se muestra directamente en la página.
Agregue un elemento `head` sobre el elemento `body`.
diff --git a/curriculum/challenges/espanol/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5ef9b03c81a63668521804ec.md b/curriculum/challenges/espanol/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5ef9b03c81a63668521804ec.md
index 45e6002b625..0fe41a8c7d3 100644
--- a/curriculum/challenges/espanol/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5ef9b03c81a63668521804ec.md
+++ b/curriculum/challenges/espanol/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5ef9b03c81a63668521804ec.md
@@ -7,9 +7,9 @@ dashedName: step-67
# --description--
-Puedes ver que todo el contenido de la página está anidado dentro de un elemento `html`. The `html` element is the root element of an HTML page and wraps all content on the page.
+Puedes ver que todo el contenido de la página está anidado dentro de un elemento `html`. El elemento `html` es elemento esencial de una página HTML y envuelve todo el contenido en la página.
-You can also specify the language of your page by adding the `lang` attribute to the `html` element.
+Tu también puedes especificar el lenguaje de tu página agregando el atributo `lang` a el elemento `html`.
Añade un atributo `lang` con el valor `en` a la etiqueta de apertura del elemento `html` para especificar que el lenguaje de la página es el inglés.
diff --git a/curriculum/challenges/espanol/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5efada803cbd2bbdab94e332.md b/curriculum/challenges/espanol/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5efada803cbd2bbdab94e332.md
index e7456cc45d0..40c0a1647b9 100644
--- a/curriculum/challenges/espanol/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5efada803cbd2bbdab94e332.md
+++ b/curriculum/challenges/espanol/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5efada803cbd2bbdab94e332.md
@@ -38,7 +38,7 @@ assert(
);
```
-The third image should have a `src` attribute set to `https://cdn.freecodecamp.org/curriculum/cat-photo-app/cats.jpg`.
+La tercera imagen debe tener un atributo `src` configurado a `https://cdn.freecodecamp.org/curriculum/cat-photo-app/cats.jpg`.
```js
const catsImg = document.querySelectorAll('figure > img')[1];
diff --git a/curriculum/challenges/espanol/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5efc4f528d6a74d05e68af74.md b/curriculum/challenges/espanol/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5efc4f528d6a74d05e68af74.md
index 5539cddd371..78c62081aee 100644
--- a/curriculum/challenges/espanol/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5efc4f528d6a74d05e68af74.md
+++ b/curriculum/challenges/espanol/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5efc4f528d6a74d05e68af74.md
@@ -9,14 +9,14 @@ dashedName: step-56
Hay otra manera de asociar un texto con el elemento `input`. Puedes anidar un texto dentro de un elemento `label` y añadirle un atributo `for` con el mismo valor del atributo `id` del elemento `input`.
-Here is an example of using the `for` attribute to associate a `label` with an `input` element:
+Aquí está un ejemplo usando el atributo `for` a asociar un `label` con un elemento `input`:
```html
```
-Associate the text `Loving` with the checkbox by nesting only the text `Loving` in a `label` element and giving it an appropriate `for` attribute.
+Asocia el texto `Loving` al checkbox, anidando solo el texto `Loving` en un elemento `label` y dándole el correcto atributo `for`.
# --hints--
@@ -32,7 +32,7 @@ Tu checkbox, aún debe tener un atributo `id` con el valor `loving`. Se esperab
assert.equal($('input[type="checkbox"]')[0].id, 'loving');
```
-The text `Loving` should be wrapped in a `label` element.
+El texto `Loving` debe estar dentro de un elemento `label`.
```js
const checkboxInputElem = $('input[type="checkbox"]')[0];
@@ -78,7 +78,7 @@ const labelElem = document.querySelector('label[for="loving"]');
assert(labelElem.textContent.replace(/\s/g, '').match(/Loving/i));
```
-There should be a space between your checkbox and your new `label` element.
+Debe haber un espacio entre tu checkbox y tu nuevo elemento `label`.
```js
assert.match(code, />\s+