diff --git a/curriculum/challenges/arabic/02-javascript-algorithms-and-data-structures/basic-data-structures/check-for-the-presence-of-an-element-with-indexof.md b/curriculum/challenges/arabic/02-javascript-algorithms-and-data-structures/basic-data-structures/check-for-the-presence-of-an-element-with-indexof.md index f13243529db..1510d6fa4e1 100644 --- a/curriculum/challenges/arabic/02-javascript-algorithms-and-data-structures/basic-data-structures/check-for-the-presence-of-an-element-with-indexof.md +++ b/curriculum/challenges/arabic/02-javascript-algorithms-and-data-structures/basic-data-structures/check-for-the-presence-of-an-element-with-indexof.md @@ -8,7 +8,7 @@ dashedName: check-for-the-presence-of-an-element-with-indexof # --description-- -نظرًا لأنه يمكن تغيير القوائم، أو *يتم تحويرها* في أي وقت، لا يوجد ضمان حول مكان وجود جزء معين من البيانات في قائمة معينة، أو حتي إذا كان هذا العنصر لا يزال موجودا. لحسن الحظ، يوفر لنا JavaScript وظيفة مدمجة أخرى، `indexOf()`، وهذه تسمح لنا بالتحقق بسرعة وسهولة من وجود عنصر في القائمة. `indexOf()` تأخذ عنصرا كمعلم, و عندما تستدعي، فإنها ترجع المكان، أو الترتيب (index)، لهذا العنصر، أو `-1` إذا كان العنصر غير موجود في القائمة. +نظرًا لأنه يمكن تغيير القوائم، أو *يتم تحويرها* في أي وقت، لا يوجد ضمان حول مكان وجود جزء معين من البيانات في قائمة معينة، أو حتي إذا كان هذا العنصر لا يزال موجودا. لحسن الحظ، يوفر لنا JavaScript وظيفة مدمجة (built-in method) أخرى تسمى `indexOf()`، وهذه تسمح لنا بالتحقق بسرعة وسهولة من وجود عنصر في القائمة. `indexOf()` تأخذ عنصرا كمعلم, و عندما تستدعي، فإنها ترجع المكان، أو الترتيب (index)، لهذا العنصر، أو `-1` إذا كان العنصر غير موجود في القائمة. على سبيل المثال: @@ -24,7 +24,7 @@ fruits.indexOf('pears'); # --instructions-- -`indexOf()` يمكن أن تكون مفيدة بشكل لا يصدق للتحقق بسرعة من وجود عنصر في القائمة. لقد حددنا الوظيفة `quickCheck`، التي تأخذ القائمة وعناصر كوسيطات (arguments). عدل الوظيفة باستخدام `indexOf()` بحيث تنتج `true` إذا كان العنصر الذي تم تمريره موجود في القائمة، و `false` إذا لم يكن موجود. +`indexOf()` يمكن أن تكون مفيدة بشكل لا يصدق للتحقق بسرعة من وجود عنصر في القائمة. لقد حددنا الوظيفة `quickCheck`، التي تأخذ القائمة وعناصر كوسائط (arguments). عدل الوظيفة باستخدام `indexOf()` بحيث تنتج `true` إذا كان العنصر الذي تم تمريره موجود في القائمة، و `false` إذا لم يكن موجود. # --hints-- diff --git a/curriculum/challenges/arabic/02-javascript-algorithms-and-data-structures/debugging/prevent-infinite-loops-with-a-valid-terminal-condition.md b/curriculum/challenges/arabic/02-javascript-algorithms-and-data-structures/debugging/prevent-infinite-loops-with-a-valid-terminal-condition.md index 153f9c94a4a..5bb8e3e75f0 100644 --- a/curriculum/challenges/arabic/02-javascript-algorithms-and-data-structures/debugging/prevent-infinite-loops-with-a-valid-terminal-condition.md +++ b/curriculum/challenges/arabic/02-javascript-algorithms-and-data-structures/debugging/prevent-infinite-loops-with-a-valid-terminal-condition.md @@ -10,7 +10,7 @@ dashedName: prevent-infinite-loops-with-a-valid-terminal-condition الموضوع الأخير هو الحلقة اللانهائية المخيفة (dreaded infinite loop). الحلقات التكرارية (loops) هي أدوات رائعة عندما يحتاج برنامجك لتشغيل كتلة الكود عدد معين من المرات أو حتى يتم الوفاء بشرط ما، ولكنها تحتاج إلى حالة نهائية تنهي التكرار. الحلقات اللانهائية (Infinite loops) من المحتمل أن تجمد أو تعطل المتصفح، وقد تسبب في فشل تنفيذ البرامج، وهو ما لا يريده أحد. -كان هناك مثال لحلقة لانهائية في مقدمة هذا القسم - لم يكن لديها أي شرط نهائي للخروج من حلقة `while` داخل `loopy()`. لا تستدعي هذه الوظيفة! +كان هناك مثال لحلقة لانهائية في مقدمة هذا القسم - لم يكن لديها أي شرط نهائي للخروج من حلقة `while` داخل `loopy()`. لا تفعيل تلك الوظيفة (function)! ```js function loopy() { @@ -24,7 +24,7 @@ function loopy() { # --instructions-- -تحتوي وظيفة `myFunc()` على حلقة لانهائية لأن حالة الشرط الانتهائي `i != 4` لن تقيّم أبدا إلى `false` (وتخرج من التكرار) - `i` سوف يزداد بمقدار 2 في كل تكرار، ويقفز فوق 4 حيث إن `i` عدد فردي من البداية. أصلح مشغل المقارنة (comparison operator) في حالة الشرط الانتهائي بحيث تعمل الحلقة فقط ل `i` بقيمة أقل من أو يساوي 4. +تحتوي وظيفة `myFunc()` على حلقة لانهائية لإن حالة الشرط الانتهائي `i != 4` لن تصبح `false` أبدا (وتخرج من التكرار) - سوف يزداد `i` بمقدار 2 في كل تكرار، ويقفز فوق 4 حيث إن `i` عدد فردي من البداية. أصلح مشغل المقارنة (comparison operator) في حالة الشرط الانتهائي بحيث تعمل الحلقة فقط ل `i` بقيمة أقل من أو يساوي 4. # --hints-- diff --git a/curriculum/challenges/arabic/02-javascript-algorithms-and-data-structures/es6/complete-a-promise-with-resolve-and-reject.md b/curriculum/challenges/arabic/02-javascript-algorithms-and-data-structures/es6/complete-a-promise-with-resolve-and-reject.md index 24b7297917b..5ee27d3ed92 100644 --- a/curriculum/challenges/arabic/02-javascript-algorithms-and-data-structures/es6/complete-a-promise-with-resolve-and-reject.md +++ b/curriculum/challenges/arabic/02-javascript-algorithms-and-data-structures/es6/complete-a-promise-with-resolve-and-reject.md @@ -24,7 +24,7 @@ const myPromise = new Promise((resolve, reject) => { # --instructions-- -اجعل كائن promise يتعامل مع النجاح والفشل. إذا كان `responseFromServer` صحيحاً `true`، فاستدعي طريقة `resolve` لإكمال كائن promisie بنجاح. مرر `resolve` إلى سلسلة (string) نصية بقيمة `We got the data`. إذا كان `responseFromServer` بـ `false`، استخدم دالة `reject` كبديل و مرر اليها الـ string الآتي: `Data not received`. +اجعل كائن promise يتعامل مع النجاح والفشل. إذا كان `responseFromServer` صحيحاً `true`، ففعيل طريقة `resolve` لإكمال كائن promise بنجاح. مرر `resolve` إلى سلسلة (string) نصية بقيمة `We got the data`. إذا كانت حالة `responseFromServer` بنوع `false`، استخدم طريقة `reject` كبديل و مررها المقطع النصي (string) الآتي: `Data not received`. # --hints-- diff --git a/curriculum/challenges/arabic/02-javascript-algorithms-and-data-structures/es6/use-export-to-share-a-code-block.md b/curriculum/challenges/arabic/02-javascript-algorithms-and-data-structures/es6/use-export-to-share-a-code-block.md index 57b763166ed..97b51e62416 100644 --- a/curriculum/challenges/arabic/02-javascript-algorithms-and-data-structures/es6/use-export-to-share-a-code-block.md +++ b/curriculum/challenges/arabic/02-javascript-algorithms-and-data-structures/es6/use-export-to-share-a-code-block.md @@ -8,7 +8,7 @@ dashedName: use-export-to-share-a-code-block # --description-- -تخيل مِلَفّ يسمى `math_functions.js` يحتوي على عدة وظائف (functions) ذات صلة بالعمليات الرياضية. واحد منها مخزن في متغير، `add`، والذي يأخذ رقمين ويعيد مجموعهم. تريد استخدام هذه الوظيفة في عدة ملفات من JavaScript المختلفة. من أجل مشاركتها مع هذه الملفات الأخرى، تحتاج أولاً الي ان تصدرها باستخدام `export`. +تخيل مِلَفّ يسمى `math_functions.js` يحتوي على عدة وظائف (functions) ذات صلة بالعمليات الرياضية. واحد منها مخزن في متغير، `add`، والذي يأخذ رقمين ويعيد مجموعهم. تريد أن تستخدم الوظيفة (function) في عدة ملفات JavaScript المختلفة. من أجل مشاركتها مع هذه الملفات الأخرى، تحتاج أولاً الي ان تصدرها باستخدام `export`. ```js export const add = (x, y) => { diff --git a/curriculum/challenges/arabic/02-javascript-algorithms-and-data-structures/es6/use-getters-and-setters-to-control-access-to-an-object.md b/curriculum/challenges/arabic/02-javascript-algorithms-and-data-structures/es6/use-getters-and-setters-to-control-access-to-an-object.md index aecb02a34bd..bfa407a3156 100644 --- a/curriculum/challenges/arabic/02-javascript-algorithms-and-data-structures/es6/use-getters-and-setters-to-control-access-to-an-object.md +++ b/curriculum/challenges/arabic/02-javascript-algorithms-and-data-structures/es6/use-getters-and-setters-to-control-access-to-an-object.md @@ -38,7 +38,7 @@ console.log(novel.writer); ستعرض وحدة التحكم السلسلتين strings باسم `anonymous` و `newAuthor`. -لاحظ الصيغة المستخدمة لاستدعاء getter و setter. حتى أنها لا تشبه الوظائف العادية. تعتبر الـ Getters و Setters مهمة لأنها تخفي تفاصيل التنفيذ الداخلية. +لاحظ الصيغة المستخدمة لاستدعاء getter و setter. حتى أنها لا تشبه الوظائف (functions) العادية. تعتبر الـ Getters و Setters مهمة لأنها تخفي تفاصيل التنفيذ الداخلية. **ملاحظة:** من المألوف أن يسبق اسم المتغير الخاص برمز underscore هيئته (`_`). ومع ذلك، فإن الرمز نفسه لا يجعل المتغير خاصًا. @@ -58,7 +58,7 @@ console.log(novel.writer); # --hints-- -`Thermostat` يجب أن يكون `class` مع وظيفة `constructor` محددة. +يجب أن يكون `Thermostat` بنوع `class` مع طريقة `constructor` محددة. ```js assert( diff --git a/curriculum/challenges/arabic/02-javascript-algorithms-and-data-structures/functional-programming/avoid-mutations-and-side-effects-using-functional-programming.md b/curriculum/challenges/arabic/02-javascript-algorithms-and-data-structures/functional-programming/avoid-mutations-and-side-effects-using-functional-programming.md index fd23d3ecfdb..6e1e991cf90 100644 --- a/curriculum/challenges/arabic/02-javascript-algorithms-and-data-structures/functional-programming/avoid-mutations-and-side-effects-using-functional-programming.md +++ b/curriculum/challenges/arabic/02-javascript-algorithms-and-data-structures/functional-programming/avoid-mutations-and-side-effects-using-functional-programming.md @@ -8,13 +8,13 @@ dashedName: avoid-mutations-and-side-effects-using-functional-programming # --description-- -إذا لم تكتشف ذلك سلفًا، المشكلة في التحدي السابق كانت مع استدعاء `splice` في وظيفة `tabClose()`. لسوء الحظ، `splice` يغير القائمة (array) الأصلية التي تم استدعاء الوظيفة عليها، لذا ففي الاستدعاء الثاني لها استخدمت قائمة (array) معدلة، وأعطت نتائج غير متوقعة. +إذا لم تكتشف ذلك سلفًا، المشكلة في التحدي السابق كانت مع استدعاء `splice` في وظيفة `tabClose()`. لسوء الحظ، `splice` يغير القائمة (array) الأصلية التي فعليتها الوظيفة، لذا ففي التفعيل الثاني لها استخدمت قائمة (array) معدلة، وأعطت نتائج غير متوقعة. هذا مثال صغير لنمط أكبر بكثير- يمكنك استدعاء وظيفة (function) على متغير (variable)، قائمة (array)، أو كائن(object)، والوظيفة تغير المتغير أو شيء ما في الكائن. -وأحد المبادئ الأساسية للبرمجة الوظيفية هو عدم تغيير الأشياء. التغييرات تؤدي إلى أعطال. من الأسهل منع الأعطال علما بأن وظائفك (functions) لا تغير أي شيء، بما في ذلك حجج (arguments) الوظيفة أو أي متغير (variable) عام. +وأحد المبادئ الأساسية للبرمجة الوظيفية هو عدم تغيير الأشياء. التغييرات تؤدي إلى أعطال. من الأسهل منع الأعطال علما بأن وظائفك (functions) لا تغير أي شيء، بما في ذلك وسائط (arguments) الوظيفة أو أي متغير (variable) عام. -المثال السابق لم يكن به أي عمليات معقدة ولكن دالة `splice` غيرت القائمة الأصلية، وأسفرت عن حدوث خطأ. +المثال السابق لم يكن به أي عمليات معقدة ولكن طريقة (method) مسمى `splice` غيرت القائمة الأصلية، وأسفرت عن حدوث خطأ. تذكر أنه في البرمجة الوظيفية، تغيير الأشياء يسمى طفرة mutation، وتسمى النتيجة تأثير جانبي side effect. من الناحية المثالية، يجب أن تكون الوظيفة خالصة (pure function)، مما يعني أنها لا تسبب أي تأثيرات جانبية. @@ -22,11 +22,11 @@ dashedName: avoid-mutations-and-side-effects-using-functional-programming # --instructions-- -اكتب التعليمات البرمجية للوظيفة `incrementer` حتي ترجع قيمة المتغير العام `fixedValue` بعد زيادة قيمته بواحد. +اكتب الكود للوظيفة `incrementer` حتي تنتج قيمة المتغير العام `fixedValue` بعد زيادة قيمته بواحد. # --hints-- -لا ينبغي للوظيفة `incrementer` أن تغير قيمة `fixedValue` (التي هي `4`). +لا ينبغي للوظيفة (function) مسمى `incrementer` أن تغير قيمة `fixedValue` (التي هي `4`). ```js incrementer(); diff --git a/curriculum/challenges/arabic/02-javascript-algorithms-and-data-structures/functional-programming/implement-map-on-a-prototype.md b/curriculum/challenges/arabic/02-javascript-algorithms-and-data-structures/functional-programming/implement-map-on-a-prototype.md index 13d301a5b74..2218f7007c7 100644 --- a/curriculum/challenges/arabic/02-javascript-algorithms-and-data-structures/functional-programming/implement-map-on-a-prototype.md +++ b/curriculum/challenges/arabic/02-javascript-algorithms-and-data-structures/functional-programming/implement-map-on-a-prototype.md @@ -1,6 +1,6 @@ --- id: 587d7b8f367417b2b2512b62 -title: تنفيذ دالة map على Prototype +title: تنفيذ طريقة map في Prototype challengeType: 1 forumTopicId: 301230 dashedName: implement-map-on-a-prototype @@ -8,7 +8,7 @@ dashedName: implement-map-on-a-prototype # --description-- -كما رأيتم من تطبيق `Array.prototype.map()`، أو `map()` من قبل، فطريقة `map` تنتج قائمة (array) من نفس طول القائمة (array) التي تم تفعيل الطريقة عليها. وهي إلى ذلك لا تغير القائمة (array) الأصلية، مادام أن وظيفتها لإعادة التفعيل (callback function) لا تفعل ذلك. +كما رأيتم من تطبيق `Array.prototype.map()`، أو `map()` من قبل، فطريقة `map` تنتج قائمة (array) من نفس طول القائمة (array) التي تم تفعيل الطريقة (method) عليها. وهي إلى ذلك لا تغير القائمة (array) الأصلية، مادام أن وظيفتها لإعادة التفعيل (callback function) لا تفعل ذلك. بمعنى آخر، `map` هي وظيفة خالصة (pure function)، ومخرجها يعتمد فقط على مدخلاتها. إضافةً إلى ذلك، فإنها تأخذ وظيفة أخرى كوسيط (argument) لها. diff --git a/curriculum/challenges/arabic/02-javascript-algorithms-and-data-structures/functional-programming/remove-elements-from-an-array-using-slice-instead-of-splice.md b/curriculum/challenges/arabic/02-javascript-algorithms-and-data-structures/functional-programming/remove-elements-from-an-array-using-slice-instead-of-splice.md index ba53bbddab3..edcce182675 100644 --- a/curriculum/challenges/arabic/02-javascript-algorithms-and-data-structures/functional-programming/remove-elements-from-an-array-using-slice-instead-of-splice.md +++ b/curriculum/challenges/arabic/02-javascript-algorithms-and-data-structures/functional-programming/remove-elements-from-an-array-using-slice-instead-of-splice.md @@ -27,13 +27,13 @@ cities.splice(3, 1); # --hints-- -يجب أن يستخدم الكود الخاص بك دالة `slice`. +يجب أن يستخدم كودك طريقة `slice`. ```js assert(code.match(/\.slice/g)); ``` -يجب ألا يستخدم الكود الخاص بك دالة `splice`. +يجب ألا يستخدم كودك طريقة `splice`. ```js assert(!code.match(/\.?[\s\S]*?splice/g)); diff --git a/curriculum/challenges/arabic/02-javascript-algorithms-and-data-structures/functional-programming/use-higher-order-functions-map-filter-or-reduce-to-solve-a-complex-problem.md b/curriculum/challenges/arabic/02-javascript-algorithms-and-data-structures/functional-programming/use-higher-order-functions-map-filter-or-reduce-to-solve-a-complex-problem.md index ffe3a3b75f2..d28d5081e35 100644 --- a/curriculum/challenges/arabic/02-javascript-algorithms-and-data-structures/functional-programming/use-higher-order-functions-map-filter-or-reduce-to-solve-a-complex-problem.md +++ b/curriculum/challenges/arabic/02-javascript-algorithms-and-data-structures/functional-programming/use-higher-order-functions-map-filter-or-reduce-to-solve-a-complex-problem.md @@ -41,7 +41,7 @@ assert( ); ``` -يجب أن تعيد وظيفتك `array`. +يجب أن تنتج وظيفتك `array`. ```js assert(Array.isArray(squareList([4, 5.6, -9.8, 3.14, 42, 6, 8.34, -2]))); diff --git a/curriculum/challenges/arabic/02-javascript-algorithms-and-data-structures/intermediate-algorithm-scripting/sorted-union.md b/curriculum/challenges/arabic/02-javascript-algorithms-and-data-structures/intermediate-algorithm-scripting/sorted-union.md index 55d2496f405..2fcefeaed8c 100644 --- a/curriculum/challenges/arabic/02-javascript-algorithms-and-data-structures/intermediate-algorithm-scripting/sorted-union.md +++ b/curriculum/challenges/arabic/02-javascript-algorithms-and-data-structures/intermediate-algorithm-scripting/sorted-union.md @@ -8,7 +8,7 @@ dashedName: sorted-union # --description-- -أكتب وظيفة (function) تأخذ قائمتين أو أكثر وتعيد مجموعة جديدة من القيم الفريدة حسب ترتيب القوائم (arrays) الأصلية المقدمة. +أكتب وظيفة (function) تأخذ قائمتين أو أكثر وتنتج مجموعة جديدة من القيم الفريدة حسب ترتيب القوائم (arrays) الأصلية المقدمة. بعبارة أخرى، ينبغي إدراج جميع القيم الموجودة من جميع القوائم (arrays) بترتيبها الأصلي، ولكن دون تكرار لها في القائمة (array) النهائية. diff --git a/curriculum/challenges/arabic/02-javascript-algorithms-and-data-structures/javascript-algorithms-and-data-structures-projects/caesars-cipher.md b/curriculum/challenges/arabic/02-javascript-algorithms-and-data-structures/javascript-algorithms-and-data-structures-projects/caesars-cipher.md index 16df5dfdf00..99d520c10a2 100644 --- a/curriculum/challenges/arabic/02-javascript-algorithms-and-data-structures/javascript-algorithms-and-data-structures-projects/caesars-cipher.md +++ b/curriculum/challenges/arabic/02-javascript-algorithms-and-data-structures/javascript-algorithms-and-data-structures-projects/caesars-cipher.md @@ -12,7 +12,7 @@ dashedName: caesars-cipher من الاستخدامات الحديثة الشائعة تشفير ROT13 ، حيث يتم تبديل قيم الحروف بمقدار 13 مكانًا. وهكذا `A ↔ N`، `B ↔ O` وما إلى ذلك. -اكتب وظيفة تأخذ مقطع نصي مشفر من نوع ROT13 كمدخل وتنتج مقطع نصي غير مشفر. +اكتب وظيفة (function) تأخذ مقطع نصي (string) مشفر من نوع ROT13 كمدخل وتنتج مقطع نصي غير مشفر. جميع الحروف ستكون كبيرة (uppercase). لا تغير أي حرف غير أبجدي (مثل المسافات وعلامات الترقيم)، ولكن مررها. diff --git a/curriculum/challenges/arabic/02-javascript-algorithms-and-data-structures/object-oriented-programming/inherit-behaviors-from-a-supertype.md b/curriculum/challenges/arabic/02-javascript-algorithms-and-data-structures/object-oriented-programming/inherit-behaviors-from-a-supertype.md index 56250f9b544..107f5f942bf 100644 --- a/curriculum/challenges/arabic/02-javascript-algorithms-and-data-structures/object-oriented-programming/inherit-behaviors-from-a-supertype.md +++ b/curriculum/challenges/arabic/02-javascript-algorithms-and-data-structures/object-oriented-programming/inherit-behaviors-from-a-supertype.md @@ -36,7 +36,7 @@ animal.eat(); animal instanceof Animal; ``` -دالة `instanceof` هنا، ستعيد `true`. +ستعيد طريقة `instanceof` حالة `true` هنا. # --instructions-- diff --git a/curriculum/challenges/arabic/02-javascript-algorithms-and-data-structures/object-oriented-programming/remember-to-set-the-constructor-property-when-changing-the-prototype.md b/curriculum/challenges/arabic/02-javascript-algorithms-and-data-structures/object-oriented-programming/remember-to-set-the-constructor-property-when-changing-the-prototype.md index 4b39fb9b64d..bc5d837e36b 100644 --- a/curriculum/challenges/arabic/02-javascript-algorithms-and-data-structures/object-oriented-programming/remember-to-set-the-constructor-property-when-changing-the-prototype.md +++ b/curriculum/challenges/arabic/02-javascript-algorithms-and-data-structures/object-oriented-programming/remember-to-set-the-constructor-property-when-changing-the-prototype.md @@ -8,7 +8,7 @@ dashedName: remember-to-set-the-constructor-property-when-changing-the-prototype # --description-- -هناك تأثير جانبي مهم لضبط prototype يدويًا إلى كائن (object) جديد. إنه يمحو خاصية `constructor`! يمكن استخدام هذه الخاصية لمعرفة إي وظيفة منشئ (constructor) هي التي أنشأت نموذج (instance)، ولكن بما انه تم التعديل علي الخاصية (property)، فإنها تعطي الآن نتائج خاطئة: +هناك تأثير جانبي مهم لضبط prototype يدويًا إلى كائن (object) جديد. إنه يمحو خاصية `constructor`! يمكن استخدام هذه الخاصية لمعرفة إي وظيفة منشئ (constructor function) هي التي أنشأت نموذج (instance)، ولكن بما انه تم التعديل علي الخاصية (property)، فإنها تعطي الآن نتائج خاطئة: ```js duck.constructor === Bird; diff --git a/curriculum/challenges/arabic/02-javascript-algorithms-and-data-structures/regular-expressions/check-for-all-or-none.md b/curriculum/challenges/arabic/02-javascript-algorithms-and-data-structures/regular-expressions/check-for-all-or-none.md index 27dbf007db2..def0348be7f 100644 --- a/curriculum/challenges/arabic/02-javascript-algorithms-and-data-structures/regular-expressions/check-for-all-or-none.md +++ b/curriculum/challenges/arabic/02-javascript-algorithms-and-data-structures/regular-expressions/check-for-all-or-none.md @@ -22,7 +22,7 @@ rainbowRegex.test(american); rainbowRegex.test(british); ``` -كل من استدعائات دالة `test` سيرجعان `true`. +كل من استدعاءات طريقة (method) مسمى `test` سيرجعان `true`. # --instructions-- diff --git a/curriculum/challenges/arabic/02-javascript-algorithms-and-data-structures/regular-expressions/remove-whitespace-from-start-and-end.md b/curriculum/challenges/arabic/02-javascript-algorithms-and-data-structures/regular-expressions/remove-whitespace-from-start-and-end.md index d25e5f3bb03..a3430ef252e 100644 --- a/curriculum/challenges/arabic/02-javascript-algorithms-and-data-structures/regular-expressions/remove-whitespace-from-start-and-end.md +++ b/curriculum/challenges/arabic/02-javascript-algorithms-and-data-structures/regular-expressions/remove-whitespace-from-start-and-end.md @@ -14,7 +14,7 @@ dashedName: remove-whitespace-from-start-and-end اكتب regex و استخدم الطرق المناسبة لإزالة الـ whitespace في بداية و نهاية الـ strings. -**ملاحظة:** دالة `String.prototype.trim()` ستعمل هنا، ولكن ستحتاج إلى إكمال هذا التحدي باستخدام regular expressions. +**ملاحظة:** طريقة `String.prototype.trim()` ستعمل هنا، ولكن ستحتاج إلى إكمال هذا التحدي باستخدام regular expressions. # --hints-- @@ -24,7 +24,7 @@ dashedName: remove-whitespace-from-start-and-end assert(result === 'Hello, World!'); ``` -يجب ألا يستخدم الحل الخاص بك دالة `String.prototype.trim()`. +يجب ألا يستخدم حلك طريقة `String.prototype.trim()`. ```js assert(!code.match(/\.?[\s\S]*?trim/)); diff --git a/curriculum/challenges/arabic/04-data-visualization/json-apis-and-ajax/get-json-with-the-javascript-fetch-method.md b/curriculum/challenges/arabic/04-data-visualization/json-apis-and-ajax/get-json-with-the-javascript-fetch-method.md index b13644c2473..d5701854b74 100644 --- a/curriculum/challenges/arabic/04-data-visualization/json-apis-and-ajax/get-json-with-the-javascript-fetch-method.md +++ b/curriculum/challenges/arabic/04-data-visualization/json-apis-and-ajax/get-json-with-the-javascript-fetch-method.md @@ -38,6 +38,30 @@ Update the code to create and send a `GET` request to the freeCodeCamp Cat Photo # --hints-- + +Your code should use the fetched data to replace the inner HTML + +```js +const catData = "dummy data"; +const ref = fetch; +fetch = () => Promise.resolve({ json: () => catData }); +async () => { + try { + document.getElementById("getMessage").click(); + await new Promise((resolve, reject) => setTimeout(() => resolve(), 250)); + } catch (error) { + console.log(error); + } finally { + fetch = ref; + assert.equal( + document.getElementById("message").textContent, + JSON.stringify(catData) + ); + } +}; +``` + + Your code should make a `GET` request with `fetch`. ```js diff --git a/curriculum/challenges/arabic/06-quality-assurance/quality-assurance-projects/american-british-translator.md b/curriculum/challenges/arabic/06-quality-assurance/quality-assurance-projects/american-british-translator.md index 70d83bf2b6e..7ebf38ca39d 100644 --- a/curriculum/challenges/arabic/06-quality-assurance/quality-assurance-projects/american-british-translator.md +++ b/curriculum/challenges/arabic/06-quality-assurance/quality-assurance-projects/american-british-translator.md @@ -69,7 +69,7 @@ Write the following tests in `tests/2_functional-tests.js`: # --hints-- -I can provide my own project, not the example URL. +You should provide your own project, not the example URL. ```js (getUserInput) => { diff --git a/curriculum/challenges/arabic/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/61329b210dac0b08047fd6ab.md b/curriculum/challenges/arabic/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/61329b210dac0b08047fd6ab.md index f7f79efd9f2..f8d918d56f0 100644 --- a/curriculum/challenges/arabic/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/61329b210dac0b08047fd6ab.md +++ b/curriculum/challenges/arabic/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/61329b210dac0b08047fd6ab.md @@ -7,7 +7,7 @@ dashedName: step-3 # --description-- -بالمتابعة مع عناصر `meta`، يخبر تعريف `viewport` المتصفح كيفية عرض الصفحة. بما في ذلك تحسين الوصول البصري (visual accessibility) على المحمول، وتحسين _SEO_ كفاءه محرك البحث (seach engine optimization). +بالمتابعة مع عناصر `meta`، يخبر تعريف `viewport` المتصفح كيفية عرض الصفحة. بما في ذلك تسهيل البصري (visual accessibility) على المحمول، وتحسين كفاءه محرك البحث _SEO_ أو (seach engine optimization). قم بإضافة تعريف `viewport` مع سمة `content` مع تفاصيل `width` و `initial-scale` للصفحة. diff --git a/curriculum/challenges/arabic/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/6133d11ef548f51f876149e3.md b/curriculum/challenges/arabic/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/6133d11ef548f51f876149e3.md index 2ef7947512d..856a6946c04 100644 --- a/curriculum/challenges/arabic/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/6133d11ef548f51f876149e3.md +++ b/curriculum/challenges/arabic/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/6133d11ef548f51f876149e3.md @@ -7,7 +7,7 @@ dashedName: step-6 # --description-- -التنقل (Navigation) هو جزء أساسي من إمكانية الوصول (accessibility)، ويعتمد قارئ الشاشة (screen readers) عليك لتوفير بنية الصفحة الخاصة بك. ويتم ذلك باستخدام عناصر semantic HTML. +التنقل (Navigation) هو جزء أساسي من تسهيل المنال (accessibility)، ويعتمد قارئ الشاشة (screen readers) عليك لتوفير بنية صفحتك. ويتم ذلك باستخدام عناصر semantic HTML. أضف `header` و `main` إلى صفحتك. diff --git a/curriculum/challenges/arabic/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/6141fabd6f75610664e908fd.md b/curriculum/challenges/arabic/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/6141fabd6f75610664e908fd.md index 9a3b8519bf0..0581a978dd7 100644 --- a/curriculum/challenges/arabic/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/6141fabd6f75610664e908fd.md +++ b/curriculum/challenges/arabic/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/6141fabd6f75610664e908fd.md @@ -9,7 +9,7 @@ dashedName: step-14 بما أن هذا اختبار، ستحتاج إلى نموذج (form) للمستخدمين لتقديم إجابات. يمكنك فصل المحتوى بشكل لغوي (semantically) داخل النموذج (form) باستخدام عناصر `section`. -ضمن عنصر `main`، أنشئ نموذج (form) مع ثلاث عناصر `section` متداخلة. بعد ذلك، قم بإرسال النموذج (submit form) إلى `https://freecodecamp.org/practice-project/accessibility-quiz`، باستخدام الطريقة الصحيحة. +ضمن عنصر `main`، أنشئ نموذج (form) مع ثلاث عناصر `section` متداخلة. بعد ذلك، أجعل النموذج (submit form) يرسل إلى `https://freecodecamp.org/practice-project/accessibility-quiz`، باستخدام الطريقة الصحيحة. # --hints-- diff --git a/curriculum/challenges/arabic/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/6141fed65b61320743da5894.md b/curriculum/challenges/arabic/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/6141fed65b61320743da5894.md index f2fc524bf70..48138bfc512 100644 --- a/curriculum/challenges/arabic/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/6141fed65b61320743da5894.md +++ b/curriculum/challenges/arabic/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/6141fed65b61320743da5894.md @@ -7,7 +7,7 @@ dashedName: step-15 # --description-- -لزيادة إمكانية الوصول إلى الصفحة، يمكن استخدام سمة `role` للإشارة إلى الغرض وراء عنصر في الصفحة للتكنولوجيات المساعدة. سمة `role` هي جزء من _Web Accessibility Initiative_ او (WAI)، وتقبل قيم الإعداد المسبق. +لزيادة تسهيل منال (accessibility) في الصفحة، يمكن استخدام سمة `role` للإشارة إلى الغرض وراء عنصر في الصفحة للتكنولوجيات المساعدة. سمة `role` هي جزء من _Web Accessibility Initiative_ أو (WAI)، وتقبل قيم الإعداد المسبق. اعطي كل عنصر من عناصر `section` الـ role بقيمة `region`. diff --git a/curriculum/challenges/arabic/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/614206033d366c090ca7dd42.md b/curriculum/challenges/arabic/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/614206033d366c090ca7dd42.md index 38bca467f6f..b8f7422ccba 100644 --- a/curriculum/challenges/arabic/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/614206033d366c090ca7dd42.md +++ b/curriculum/challenges/arabic/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/614206033d366c090ca7dd42.md @@ -7,7 +7,7 @@ dashedName: step-17 # --description-- -يؤدي Typeface دورا هاما في إمكانية الوصول إلى الصفحة. بعض الخطوط أسهل من غيرها، وهذا صحيح بشكل خاص على الشاشات ذات الدقة المنخفضة (low-resolution). +يؤدي Typeface دورا هاما في تسهيل المنال (accessibility) في الصفحة. بعض الخطوط أسهل من غيرها، وهذا صحيح بشكل خاص على الشاشات ذات الدقة المنخفضة (low-resolution). قم بتغيير الخط لعناصر `h1` و `h2` إلى `Verdana`، واستخدم خط ويب آمنًا آخر في مجموعة sans-serif كخط احتياطي. diff --git a/curriculum/challenges/arabic/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/6143920c8eafb00b735746ce.md b/curriculum/challenges/arabic/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/6143920c8eafb00b735746ce.md index 4c76d78f016..223e908386d 100644 --- a/curriculum/challenges/arabic/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/6143920c8eafb00b735746ce.md +++ b/curriculum/challenges/arabic/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/6143920c8eafb00b735746ce.md @@ -7,7 +7,7 @@ dashedName: step-22 # --description-- -مع أنّ أنك أضفت `placeholder` إلى العنصر `input` الأول في الدرس السابق، هذه الممارسة ليست في الواقع أفضل ممارسة لتيسير الوصول؛ في كثير من الأحيان، يخلط المستخدمون بين النص النائب (placeholder text) وقيمة الإدخال الفعلية - و يعتقدون أن هناك قيمة فعلًا في حقل الإدخال. +مع أنّ أنك أضفت `placeholder` إلى العنصر `input` الأول في الدرس السابق، هذه الممارسة ليست في الواقع أفضل ممارسة لتسهيل المنال (accessibility)؛ في كثير من الأحيان، يخلط المستخدمون بين النص النائب (placeholder text) وقيمة الإدخال الفعلية - و يعتقدون أن هناك قيمة فعلًا في حقل الإدخال. أزل placeholder text من عنصر `input` الأول، معتمدا على `label` باعتبارها أفضل الممارسات. diff --git a/curriculum/challenges/arabic/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/614796cb8086be482d60e0ac.md b/curriculum/challenges/arabic/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/614796cb8086be482d60e0ac.md index e31b1c4094d..bb7f0f666e2 100644 --- a/curriculum/challenges/arabic/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/614796cb8086be482d60e0ac.md +++ b/curriculum/challenges/arabic/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/614796cb8086be482d60e0ac.md @@ -7,7 +7,7 @@ dashedName: step-46 # --description-- -وفيما يتعلق بموضوع إمكانية الوصول البصري (visual accessibility,)، فإن التباين (contrast) بين العناصر عامل رئيسي. فعلى سبيل المثال، ينبغي أن يكون التباين بين النص وخلفية العنوان 4.5:1 على الأقل. +وفيما يتعلق بموضوع تسهيل البصري (visual accessibility)، فإن التباين (contrast) بين العناصر عامل رئيسي. فعلى سبيل المثال، ينبغي أن يكون التباين بين النص وخلفية العنوان 4.5:1 على الأقل. غير لون الخط (font color) لجميع عناصر الروابط (anchor elements) داخل عناصر list إلى شيء به نسبة تباين (contrast ratio) لا تقل عن 7:1. diff --git a/curriculum/challenges/arabic/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/6148e5aeb102e3142de026a2.md b/curriculum/challenges/arabic/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/6148e5aeb102e3142de026a2.md index 00f2af7474a..71389b540b4 100644 --- a/curriculum/challenges/arabic/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/6148e5aeb102e3142de026a2.md +++ b/curriculum/challenges/arabic/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/6148e5aeb102e3142de026a2.md @@ -7,7 +7,7 @@ dashedName: step-68 # --description-- -أخيرًا ، يمكن تحسين إمكانية استيعاب التنقل (navigation accessibility) عن طريق توفير اختصارات لوحة المفاتيح. +أخيرًا، يمكن تسهيل التنقل (navigation accessibility) عن طريق توفير اختصارات للوحة المفاتيح. السمة `accesskey` تقبل قائمة مفصولة بمسافة من مفاتيح الوصول (access keys). على سبيل المثال: @@ -19,7 +19,7 @@ dashedName: step-68 _ملاحظة: لا ينصح دائما باستخدام مفاتيح الوصول، ولكن يمكن أن تكون مفيدة_ -أحسنت صنعا. لقد أكملت مشروع تدريب _اختبار إمكانية الوصول_. +أحسنت صنعا. لقد أكملت مشروع تدريب _ اختبار تسهيل المنال (Accessibility Quiz)_. # --hints-- diff --git a/curriculum/challenges/arabic/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/614ccc21ea91ef1736b9b578.md b/curriculum/challenges/arabic/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/614ccc21ea91ef1736b9b578.md index 26232f417ff..5a1a835458c 100644 --- a/curriculum/challenges/arabic/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/614ccc21ea91ef1736b9b578.md +++ b/curriculum/challenges/arabic/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/614ccc21ea91ef1736b9b578.md @@ -7,9 +7,9 @@ dashedName: step-1 # --description-- -مرحبا بكم في الجزء الأول من اختبار إمكانية الوصول (Accessibility Quiz). بما انك تسعي أن تكون متمرسًا في HTML و CSS، فقد بدأنا باستخدام النموذج الأساسي. +مرحبا بكم في الجزء الأول من اختبار تسهيل المنال (Accessibility Quiz). بما انك تسعي أن تكون متمرسًا في HTML و CSS، فقد بدأنا باستخدام النموذج الأساسي. -ابدأ رحلة الوصول هذه، عن طريق توفير سمة (attribute) تسمي `lang` إلى `html` الخاص بك. هذا سيساعد قارئ الشاشة (screen readers) على تحديد لغة الصفحة. +ابدأ رحلة التسهيل، عن طريق توفير سمة (attribute) تسمي `lang` إلى `html` الخاص بك. هذا سيساعد قارئ الشاشة (screen readers) على تحديد لغة الصفحة. # --hints-- diff --git a/curriculum/challenges/arabic/14-responsive-web-design-22/learn-css-grid-by-building-a-magazine/6148ceaf5d897d4d8b3554b3.md b/curriculum/challenges/arabic/14-responsive-web-design-22/learn-css-grid-by-building-a-magazine/6148ceaf5d897d4d8b3554b3.md index 2fbae74beb8..34f1d7c087e 100644 --- a/curriculum/challenges/arabic/14-responsive-web-design-22/learn-css-grid-by-building-a-magazine/6148ceaf5d897d4d8b3554b3.md +++ b/curriculum/challenges/arabic/14-responsive-web-design-22/learn-css-grid-by-building-a-magazine/6148ceaf5d897d4d8b3554b3.md @@ -7,7 +7,7 @@ dashedName: step-57 # --description-- -وكثيرا ما تستخدم المجلات نصا justified في محتوياتها المطبوعة لهيكلة تصميمها والتحكم في تدفق محتوياتها. بينما يعمل ذلك في الطباعة، يمكن أن يكون النص الـ justified على مواقع الويب مصدر قلق بشأن إمكانية الوصول، على سبيل المثال، صعوبات للأشخاص الذين يعانون من عسر القراءة. +وكثيرا ما تستخدم المجلات نصا justified في محتوياتها المطبوعة لهيكلة تصميمها والتحكم في تدفق محتوياتها. بينما يعمل ذلك في الطباعة، يمكن أن يكون النص المتباعد (justified) على مواقع الويب مصدر قلق بشأن تسهيل منال (accessibility)، ويضيف صعوبات للأشخاص الذين يعانون عسر القراءة على سبيل المثال. لجعل مشروعك يبدو وكأنه مجلة مطبوعة، أعط منتقي `.text` خاصية `text-align` بقيمة `justify`. diff --git a/curriculum/challenges/arabic/14-responsive-web-design-22/learn-css-grid-by-building-a-magazine/6148d3fff5186b57123d97e2.md b/curriculum/challenges/arabic/14-responsive-web-design-22/learn-css-grid-by-building-a-magazine/6148d3fff5186b57123d97e2.md index b2ed0a4385a..7b874bba2ec 100644 --- a/curriculum/challenges/arabic/14-responsive-web-design-22/learn-css-grid-by-building-a-magazine/6148d3fff5186b57123d97e2.md +++ b/curriculum/challenges/arabic/14-responsive-web-design-22/learn-css-grid-by-building-a-magazine/6148d3fff5186b57123d97e2.md @@ -9,9 +9,9 @@ dashedName: step-64 الاقتباس (quote) ليس في الحقيقة اقتباسا بدون علامات اقتباس صحيحة. يمكنك إضافة هذه باستخدام CSS pseudo selectors. -قم بإنشاء منتقي `.quote::before` وقم بتعيين خاصية `content` إلى `"` بمسافة تليها. +أنشئ منتقي `.quote::before` وعين خاصية `content` بقيمة `"` وتليها مسافة. -وأيضا، قم بإنشاء `.quote::after` وقم بتعيين خاصية `content` إلى `"`بمسافة تسبقها. +وأيضا، أنشئ `.quote::after` وعين خاصية `content` بقيمة `"` وتسبقها مسافة. # --hints-- @@ -24,7 +24,7 @@ assert(new __helpers.CSSHelp(document).getStyle('.quote::before')); يجب أن يحتوي منتقي `.quote::before` على خاصية `content` بقيمة `'" '`. ```js -assert(new __helpers.CSSHelp(document).getStyle('.quote::before')?.content?.match(/\\?\"\s/)); +assert(new __helpers.CSSHelp(document).getStyle('.quote::before')?.content?.match(/\"\\"\s\"/)); ``` يجب أن يكون لديك منتقي `.quote::after`. @@ -36,7 +36,7 @@ assert(new __helpers.CSSHelp(document).getStyle('.quote::after')); يجب أن يحتوي منتقي `.quote::after` على خاصية `content` بقيمة `' "'`. ```js -assert(new __helpers.CSSHelp(document).getStyle('.quote::after')?.content?.match(/\s\\?\"/)); +assert(new __helpers.CSSHelp(document).getStyle('.quote::before')?.content?.match(/\"\\"\s\"/)); ``` # --seed-- diff --git a/curriculum/challenges/arabic/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5dc2385ff86c76b9248c6eb7.md b/curriculum/challenges/arabic/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5dc2385ff86c76b9248c6eb7.md index 89cb818d092..6d4c32007f7 100644 --- a/curriculum/challenges/arabic/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5dc2385ff86c76b9248c6eb7.md +++ b/curriculum/challenges/arabic/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5dc2385ff86c76b9248c6eb7.md @@ -7,7 +7,7 @@ dashedName: step-5 # --description-- -يحتوي HTML5 على بعض العناصر التي تحدد مناطق المحتوى المختلفة. هذه العناصر تجعل HTML الخاص بك أسهل للقراءة وتساعدة في تحسين محرك البحث (SEO) وإمكانية الوصول (accessibility). +يحتوي HTML5 على بعض العناصر التي تحدد مناطق المحتوى المختلفة. هذه العناصر تجعل HTML الخاص بك أسهل للقراءة وتساعد في تحسين محرك البحث (SEO) وتسهيل المنال (accessibility). حدد القسم الرئيس من هذه الصفحة بإضافة علامة فتح `
` بعد عنصر `h1`، و علامة إغلاق `
` بعد عنصر `p`. diff --git a/curriculum/challenges/arabic/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5dc24165f86c76b9248c6ebc.md b/curriculum/challenges/arabic/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5dc24165f86c76b9248c6ebc.md index 8f1eafa3ae6..fd4ab4e1533 100644 --- a/curriculum/challenges/arabic/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5dc24165f86c76b9248c6ebc.md +++ b/curriculum/challenges/arabic/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5dc24165f86c76b9248c6ebc.md @@ -7,7 +7,7 @@ dashedName: step-9 # --description-- -يجب أن تحتوي جميع عناصر `img` على سمة `alt`. يتم استخدام نص السمة `alt` لقراء الشاشة (screen readers) لتحسين إمكانية الوصول ويتم عرضه إذا فشل تحميل الصورة. على سبيل المثال، `A cat` يحتوي على سمة `alt` مع النص `A cat`. +يجب أن تحتوي جميع عناصر `img` على سمة `alt`. يتم استخدام نص السمة `alt` لقراء الشاشة (screen readers) لتسهيل الوصول (accessibility) ويتم عرضه إذا فشل تحميل الصورة. على سبيل المثال، `A cat` يحتوي على سمة `alt` مع النص `A cat`. داخل عنصر `img` ، أضف سمة `alt` مع هذا النص: diff --git a/curriculum/challenges/arabic/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5efae0543cbd2bbdab94e333.md b/curriculum/challenges/arabic/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5efae0543cbd2bbdab94e333.md index b861c631d3c..8c10fdc1d6f 100644 --- a/curriculum/challenges/arabic/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5efae0543cbd2bbdab94e333.md +++ b/curriculum/challenges/arabic/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5efae0543cbd2bbdab94e333.md @@ -7,7 +7,7 @@ dashedName: step-30 # --description-- -لتحسين إمكانية الوصول (accessibility) إلى الصورة التي أضفتها، أضف خاصية `alt` مع النص: +لتسهيل المنال (accessibility) في الصورة التي أضفتها، أضف خاصية `alt` مع النص: `Five cats looking around a field.` diff --git a/curriculum/challenges/arabic/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5f07be6ef7412fbad0c5626b.md b/curriculum/challenges/arabic/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5f07be6ef7412fbad0c5626b.md index fc1525b6fbd..c6ea229adf0 100644 --- a/curriculum/challenges/arabic/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5f07be6ef7412fbad0c5626b.md +++ b/curriculum/challenges/arabic/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5f07be6ef7412fbad0c5626b.md @@ -22,7 +22,7 @@ assert(document.querySelector('section')); يجب أن يحتوي العنصر `section` على closing tag. Closing tags لها `/` مباشرة بعد رمز `<`. ```js -assert(code.match(/<\/section\>/)); +assert(code.match(/<\/section\s*>/i)); ``` يجب أن يكون عنصر `section` بأكمله بين علامات فتح وإغلاق عنصر `main`. @@ -57,15 +57,15 @@ assert.isFalse(includesH1); --fcc-editable-region-- -

CatPhotoApp

+

Cat Photos

Click here to view more cat photos.

A cute orange cat lying on its back. -
+ --fcc-editable-region-- diff --git a/curriculum/challenges/arabic/14-responsive-web-design-22/learn-html-forms-by-building-a-registration-form/62ff8b9dab5ac88e4d3d43a3.md b/curriculum/challenges/arabic/14-responsive-web-design-22/learn-html-forms-by-building-a-registration-form/62ff8b9dab5ac88e4d3d43a3.md index 9817b0b2a93..e5d85ddf48b 100644 --- a/curriculum/challenges/arabic/14-responsive-web-design-22/learn-html-forms-by-building-a-registration-form/62ff8b9dab5ac88e4d3d43a3.md +++ b/curriculum/challenges/arabic/14-responsive-web-design-22/learn-html-forms-by-building-a-registration-form/62ff8b9dab5ac88e4d3d43a3.md @@ -7,7 +7,7 @@ dashedName: step-18 # --description-- -أتباعاً أفضل ممارسات إمكانية الوصول, أربط عناصر `input` و `label` معاً باستعمال سمة `for`. +أتباعاً أفضل ممارسات تسهيل المنال (accessibility), أربط عناصر `input` و `label` معاً باستعمال سمة `for`. استخدم `first-name`, و `last-name`, و `email`, و `new-password` كقيم لسمات `id`. diff --git a/curriculum/challenges/arabic/14-responsive-web-design-22/learn-html-forms-by-building-a-registration-form/62ff8e998d3e7eae14d6ae3b.md b/curriculum/challenges/arabic/14-responsive-web-design-22/learn-html-forms-by-building-a-registration-form/62ff8e998d3e7eae14d6ae3b.md index c87a3fdd319..944e1021edc 100644 --- a/curriculum/challenges/arabic/14-responsive-web-design-22/learn-html-forms-by-building-a-registration-form/62ff8e998d3e7eae14d6ae3b.md +++ b/curriculum/challenges/arabic/14-responsive-web-design-22/learn-html-forms-by-building-a-registration-form/62ff8e998d3e7eae14d6ae3b.md @@ -7,7 +7,7 @@ dashedName: step-29 # --description-- -اتبع أفضل ممارسات إمكانية الوصول عن طريق ربط عناصر `input` و `label` في `fieldset` الثاني. +اتبع أفضل ممارسات تسهيل المنال (accessibility) عن طريق ربط عناصر `input` و `label` في `fieldset` الثاني. استخدم `personal-account`, و `business-account`, و `terms-and-conditions` كقيم لسمات `id`. diff --git a/curriculum/challenges/arabic/15-javascript-algorithms-and-data-structures-22/learn-basic-javascript-by-building-a-role-playing-game/5d5a813321b9e3db6c106a46.md b/curriculum/challenges/arabic/15-javascript-algorithms-and-data-structures-22/learn-basic-javascript-by-building-a-role-playing-game/5d5a813321b9e3db6c106a46.md index 196d0ac2b8b..fb5fd2e0cf5 100644 --- a/curriculum/challenges/arabic/15-javascript-algorithms-and-data-structures-22/learn-basic-javascript-by-building-a-role-playing-game/5d5a813321b9e3db6c106a46.md +++ b/curriculum/challenges/arabic/15-javascript-algorithms-and-data-structures-22/learn-basic-javascript-by-building-a-role-playing-game/5d5a813321b9e3db6c106a46.md @@ -7,7 +7,7 @@ dashedName: step-1 # --description-- -JavaScript is a powerful language which allows you to build websites that are interactive. To get started, create your standard HTML boilerplate with a `DOCTYPE`, `html`, `head`, and `body`. Include a `title` element and a `link` for your stylesheet, and your `meta` tag for the `charset`. Then, create a `div` element with the id `game` within your `body`. Use the text `RPG - Dragon Repeller` for your `title` element. +إن JavaScript لغة قوية تسمح لك ببناء مواقع تفاعلية. للبدء، أكتب كودك من HTML المعتاد يحتوي على `DOCTYPE`، و `html`، و `head`، و `body`. وأيضاً، أضف عنصر `title` و `link` يربط إلى صفحتك للتصميم، وعلامتك `meta` لتحديد `charset`. ثم أنشئ عنصر `div` وضف له معرف (id) بقيمة `game` داخل عنصرك `body`. استخدم نص `RPG - Dragon Repeller` لعنصرك `title`. # --hints-- diff --git a/curriculum/challenges/arabic/15-javascript-algorithms-and-data-structures-22/learn-basic-javascript-by-building-a-role-playing-game/62a23c1d505bfa13747c8a9b.md b/curriculum/challenges/arabic/15-javascript-algorithms-and-data-structures-22/learn-basic-javascript-by-building-a-role-playing-game/62a23c1d505bfa13747c8a9b.md index 5c62cdc804a..5c1739d5569 100644 --- a/curriculum/challenges/arabic/15-javascript-algorithms-and-data-structures-22/learn-basic-javascript-by-building-a-role-playing-game/62a23c1d505bfa13747c8a9b.md +++ b/curriculum/challenges/arabic/15-javascript-algorithms-and-data-structures-22/learn-basic-javascript-by-building-a-role-playing-game/62a23c1d505bfa13747c8a9b.md @@ -7,7 +7,7 @@ dashedName: step-4 # --description-- -Wrap the numbers `0`, `100`, and `50` in `span` elements, and wrap those new `span` elements in `strong` elements. Then give your new `span` elements `id` values of `xpText`, `healthText`, and `goldText`, respectively. +قم بتغليف الأرقام `0`, و `100`, و `50` في عناصر `span`. ثمَّ غلف العناصر `span` الجديدة في عناصر `strong`. Then give your new `span` elements `id` values of `xpText`, `healthText`, and `goldText`, respectively. # --hints-- diff --git a/curriculum/challenges/chinese-traditional/04-data-visualization/json-apis-and-ajax/get-json-with-the-javascript-fetch-method.md b/curriculum/challenges/chinese-traditional/04-data-visualization/json-apis-and-ajax/get-json-with-the-javascript-fetch-method.md index 839a1e1ac59..26acd9524b9 100644 --- a/curriculum/challenges/chinese-traditional/04-data-visualization/json-apis-and-ajax/get-json-with-the-javascript-fetch-method.md +++ b/curriculum/challenges/chinese-traditional/04-data-visualization/json-apis-and-ajax/get-json-with-the-javascript-fetch-method.md @@ -38,13 +38,37 @@ fetch('/json/cats.json') # --hints-- -應該使用 `fetch` 發起 `GET` 請求。 + +Your code should use the fetched data to replace the inner HTML + +```js +const catData = "dummy data"; +const ref = fetch; +fetch = () => Promise.resolve({ json: () => catData }); +async () => { + try { + document.getElementById("getMessage").click(); + await new Promise((resolve, reject) => setTimeout(() => resolve(), 250)); + } catch (error) { + console.log(error); + } finally { + fetch = ref; + assert.equal( + document.getElementById("message").textContent, + JSON.stringify(catData) + ); + } +}; +``` + + +Your code should make a `GET` request with `fetch`. ```js assert(code.match(/fetch\s*\(\s*('|")\/json\/cats\.json\1\s*\)/g)); ``` -應該在 `then` 裏面將響應轉換爲 JSON。 +Your code should use `then` to convert the response to JSON. ```js assert( @@ -54,13 +78,13 @@ assert( ); ``` -應該使用另一個 `then` 接收 `then` 轉換的 JSON。 +Your code should use `then` to handle the data converted to JSON by the other `then`. ```js assert(__helpers.removeWhiteSpace(code).match(/\.then\(\(?\w+\)?=>{[^}]*}\)/g)); ``` -代碼應該選擇 id 爲 `message` 的元素然後把它的內部 HTML 改成 JSON data 的字符串。 +Your code should get the element with id `message` and change its inner HTML to the string of JSON data. ```js assert( diff --git a/curriculum/challenges/chinese-traditional/06-quality-assurance/advanced-node-and-express/announce-new-users.md b/curriculum/challenges/chinese-traditional/06-quality-assurance/advanced-node-and-express/announce-new-users.md index b3733374282..197d35c8ced 100644 --- a/curriculum/challenges/chinese-traditional/06-quality-assurance/advanced-node-and-express/announce-new-users.md +++ b/curriculum/challenges/chinese-traditional/06-quality-assurance/advanced-node-and-express/announce-new-users.md @@ -8,9 +8,9 @@ dashedName: announce-new-users # --description-- -許多聊天室都有這個功能：所有已連接到服務器的在線用戶都會看到有人加入或退出的提醒。 我們已經寫好了處理連接和斷開事件的代碼，只要對這個方法稍作修改就可以實現這個功能。 The most logical way of doing so is sending 3 pieces of data with the event: the username of the user who connected/disconnected, the current user count, and if that username connected or disconnected. +許多聊天室都有這個功能：所有已連接到服務器的在線用戶都會看到有人加入或退出的提醒。 我們已經寫好了處理連接和斷開事件的代碼，只要對這個方法稍作修改就可以實現這個功能。 最合理的方式是隨事件發送 3 個數據：連接/斷開連接的用戶的用戶名、當前的用戶數，以及該用戶名是否連接或斷開連接。 -Change the event name to `'user'`, and pass an object along containing the fields `username`, `currentUsers`, and `connected` (to be `true` in case of connection, or `false` for disconnection of the user sent). Be sure to change both `'user count'` events and set the disconnect one to send `false` for the field `connected` instead of `true` like the event emitted on connect. +將事件名稱更改爲 `'user'`，傳遞一個對象，其中應包含如下字段：`username`、`currentUsers` 和 `connected`（布爾值，連接上即爲 `true`，斷開則是 `false`）。 記得更改兩個 `'user count'` 事件，設置斷開連接事件向 `connected` 字段發送 `false` ，而不是像連接上的事件一樣發送 `true`。 ```js io.emit('user', { @@ -34,11 +34,11 @@ socket.on('user', data => { }); ``` -完成上述要求後，你可以在下方提交你的頁面鏈接。 If you're running into errors, you can check out the project completed up to this point . +完成上述要求後，你可以在下方提交你的頁面鏈接。 如果你在運行時遇到錯誤，你可以查看已完成的項目。 # --hints-- -Event `'user'` should be emitted with `name`, `currentUsers`, and `connected`. +事件 `'user'` 應該與 `name`、`currentUsers` 和 `connected` 一起發送。 ```js async (getUserInput) => { diff --git a/curriculum/challenges/chinese-traditional/06-quality-assurance/advanced-node-and-express/authentication-strategies.md b/curriculum/challenges/chinese-traditional/06-quality-assurance/advanced-node-and-express/authentication-strategies.md index 7982c16d0a4..0b17cfe3dae 100644 --- a/curriculum/challenges/chinese-traditional/06-quality-assurance/advanced-node-and-express/authentication-strategies.md +++ b/curriculum/challenges/chinese-traditional/06-quality-assurance/advanced-node-and-express/authentication-strategies.md @@ -10,13 +10,13 @@ dashedName: authentication-strategies 策略是認證用戶的一種方式。 如果你讓用戶在註冊時填寫了用戶信息，那你就可以基於這些信息進行驗證。或者也可以引入第三方登錄，如 Google 或者 Github。 在這個項目中，我們將使用 Passport 中間件。 Passport 提供了一套全面的策略，支持使用用戶名和密碼、GitHub、谷歌等進行認證。 -`passport-local@~1.0.0` has already been added as a dependency. Add it to your server as follows: +`passport-local@~1.0.0` 已經被添加爲依賴項。 將其添加到你的服務器，如下所示： ```javascript const LocalStrategy = require('passport-local'); ``` -Tell passport to **use** an instantiated `LocalStrategy` object with a few settings defined. Make sure this (as well as everything from this point on) is encapsulated in the database connection since it relies on it!: +然後，需要讓 passport **使用**一個實例化的 `LocalStrategy` 對象，這個對象的一些設置已完成。 請注意，接下來的所有代碼都應寫在連接數據庫的回調中，因爲它們的執行都依賴數據庫。 ```javascript passport.use(new LocalStrategy((username, password, done) => { @@ -30,13 +30,13 @@ passport.use(new LocalStrategy((username, password, done) => { })); ``` -This is defining the process to use when you try to authenticate someone locally. First, it tries to find a user in your database with the username entered. Then, it checks for the password to match. Finally, if no errors have popped up that you checked for (e.g. an incorrect password), the `user` object is returned and they are authenticated. +這是定義當你試圖在本地驗證某人時要使用的程序： 首先，它試圖在你的數據庫中找到一個具有輸入的用戶名的用戶。 然後檢查密碼是否匹配。 最後，如果沒有彈出你檢查的錯誤（例如，一個錯誤的密碼），返回 `user` 對象，並且它們已經被驗證。 -Many strategies are set up using different settings. Generally, it is easy to set it up based on the README in that strategy's repository. A good example of this is the GitHub strategy where you don't need to worry about a username or password because the user will be sent to GitHub's auth page to authenticate. As long as they are logged in and agree then GitHub returns their profile for you to use. +許多策略是通過不同的設置來制定的。 一般來說，很容易根據該策略的倉庫中的 README 來建立它。 一個很好的例子是 GitHub 策略。在該策略中，你不需要寫用戶名或密碼的相關驗證邏輯，因爲用戶將被引導到 GitHub 頁面進行驗證。 只要用戶登錄並同意，GitHub 就會返回用戶的個人信息供你使用。 -In the next step, you will set up how to actually call the authentication strategy to validate a user based on form data. +下一步，你將根據表單數據設置如何實際調用認證策略來驗證用戶。 -完成上述要求後，請提交你的頁面鏈接。 If you're running into errors, you can check out the project completed up to this point. +完成上述要求後，請提交你的頁面鏈接。 如果你在運行時遇到錯誤，可以查看已完成的項目。 # --hints-- @@ -55,7 +55,7 @@ async (getUserInput) => { } ``` -Passport-local should be correctly required and set up. +應該正確地引入和配置 Passport-local。 ```js async (getUserInput) => { diff --git a/curriculum/challenges/chinese-traditional/06-quality-assurance/advanced-node-and-express/authentication-with-socket.io.md b/curriculum/challenges/chinese-traditional/06-quality-assurance/advanced-node-and-express/authentication-with-socket.io.md index 38f3636ebaf..9afeb186abc 100644 --- a/curriculum/challenges/chinese-traditional/06-quality-assurance/advanced-node-and-express/authentication-with-socket.io.md +++ b/curriculum/challenges/chinese-traditional/06-quality-assurance/advanced-node-and-express/authentication-with-socket.io.md @@ -65,7 +65,7 @@ console.log('user ' + socket.request.user.username + ' connected'); 它將在服務器控制檯記錄已連接的用戶！ -完成以上要求後，請提交你的頁面鏈接。 If you're running into errors, you can check out the project up to this point. +完成以上要求後，請提交你的頁面鏈接。 如果你在運行時遇到錯誤，你可以查看已完成的項目。 # --hints-- diff --git a/curriculum/challenges/chinese-traditional/06-quality-assurance/advanced-node-and-express/clean-up-your-project-with-modules.md b/curriculum/challenges/chinese-traditional/06-quality-assurance/advanced-node-and-express/clean-up-your-project-with-modules.md index 1055af34726..13d6b8cef06 100644 --- a/curriculum/challenges/chinese-traditional/06-quality-assurance/advanced-node-and-express/clean-up-your-project-with-modules.md +++ b/curriculum/challenges/chinese-traditional/06-quality-assurance/advanced-node-and-express/clean-up-your-project-with-modules.md @@ -24,9 +24,9 @@ module.exports = function (app, myDataBase) { 如果在這些步驟後沒有報錯，那麼你已成功地從 server.js 文件中分離出了路由文件（**除了 catch block 中的路由**）！ -Do the same thing in your `auth.js` file with all of the things related to authentication such as the serialization and the setting up of the local strategy and erase them from your server file. 請正確添加依賴，並在 server.js 中調用 `auth(app, myDataBase)`。 +在你的 `auth.js` 文件中做同樣的事情，所有與認證有關的事情，如序列化和本地策略的設置，並從你的服務器文件中刪除它們。 請正確添加依賴，並在 server.js 中調用 `auth(app, myDataBase)`。 -完成上述要求後，請提交你的頁面鏈接。 If you're running into errors, you can check out an example of the completed project. +完成上述要求後，請提交你的頁面鏈接。 如果你在運行時出現錯誤，你可以查看已完成的項目示例。 # --hints-- diff --git a/curriculum/challenges/chinese-traditional/06-quality-assurance/advanced-node-and-express/handle-a-disconnect.md b/curriculum/challenges/chinese-traditional/06-quality-assurance/advanced-node-and-express/handle-a-disconnect.md index 46b8e1d7ed8..5505d1fc7a8 100644 --- a/curriculum/challenges/chinese-traditional/06-quality-assurance/advanced-node-and-express/handle-a-disconnect.md +++ b/curriculum/challenges/chinese-traditional/06-quality-assurance/advanced-node-and-express/handle-a-disconnect.md @@ -18,11 +18,11 @@ socket.on('disconnect', () => { }); ``` -To make sure clients continuously have the updated count of current users, you should decrease `currentUsers` by 1 when the disconnect happens then emit the `'user count'` event with the updated count. +確保客戶端不斷更新當前用戶的數量，當斷開連接發生時，你應該在 `currentUsers` 上減去 1，然後發送 `'user count'` 事件和更新的計數。 **注意：**和 `'disconnect'` 類似，所有 socket 可以發送到服務器的事件，我們都應該在有 “socket” 定義的連接監聽器裏處理。 -完成上述要求後，請提交你的頁面鏈接。 If you're running into errors, you can check out the project completed up to this point. +完成上述要求後，請提交你的頁面鏈接。 如果你在運行時遇到錯誤，你可以查看已完成的項目。 # --hints-- @@ -37,7 +37,7 @@ async (getUserInput) => { } ``` -Your client should be listening for `'user count'` event. +你的客戶端應該監聽 `'user count'` 事件。 ```js async (getUserInput) => { diff --git a/curriculum/challenges/chinese-traditional/06-quality-assurance/advanced-node-and-express/hashing-your-passwords.md b/curriculum/challenges/chinese-traditional/06-quality-assurance/advanced-node-and-express/hashing-your-passwords.md index 90274d56c6c..3acebc3e9a6 100644 --- a/curriculum/challenges/chinese-traditional/06-quality-assurance/advanced-node-and-express/hashing-your-passwords.md +++ b/curriculum/challenges/chinese-traditional/06-quality-assurance/advanced-node-and-express/hashing-your-passwords.md @@ -12,9 +12,9 @@ dashedName: hashing-your-passwords `bcrypt@~5.0.0` 已被添加爲依賴項，在你的服務器中請求它。 你需要在兩個步驟中使用哈希運算：註冊和保存新賬戶，以及登錄時檢查密碼是否正確。 -Currently on your registration route, you insert a user's plaintext password into the database like so: `password: req.body.password`. Hash the passwords instead by adding the following before your database logic: `const hash = bcrypt.hashSync(req.body.password, 12);`, and replacing the `req.body.password` in the database saving with just `password: hash`. +目前在你的註冊路徑上，你將把用戶的純文本密碼插入數據庫中：`password: req.body.password`。 通過在你的數據庫邏輯前添加 `const hash = bcrypt.hashSync(req.body.password, 12);`，並在數據庫存儲中將 `req.body.password` 替換爲 `password: hash`，來哈希密碼。 -On your authentication strategy, you check for the following in your code before completing the process: `if (password !== user.password) return done(null, false);`. 現在存儲的密碼 `user.password` 已經是哈希值了。 在對現有代碼進行修改前，注意目前的語句是如何檢查如果密碼**不**匹配，就返回未認證的。 With this in mind, change that code to look as follows to properly check the password entered against the hash: +在你的驗證策略上，你在完成過程之前在代碼中檢查：`if (password !== user.password) return done(null, false);`。 現在存儲的密碼 `user.password` 已經是哈希值了。 在對現有代碼進行修改前，注意目前的語句是如何檢查如果密碼**不**匹配，就返回未認證的。 考慮到這一點，將該代碼修改如下，以便根據哈希值正確檢查輸入的密碼。 ```js if (!bcrypt.compareSync(password, user.password)) { @@ -22,9 +22,9 @@ if (!bcrypt.compareSync(password, user.password)) { } ``` -That is all it takes to implement one of the most important security features when you have to store passwords. +當你必須存儲密碼時，這就是實現最重要的安全功能之一的全部內容。 -完成上述要求後，請提交你的頁面鏈接。 If you're running into errors, you can check out the project completed up to this point. +完成上述要求後，請提交你的頁面鏈接。 如果你在運行時遇到錯誤，你可以查看已完成的項目。 # --hints-- diff --git a/curriculum/challenges/chinese-traditional/06-quality-assurance/advanced-node-and-express/how-to-put-a-profile-together.md b/curriculum/challenges/chinese-traditional/06-quality-assurance/advanced-node-and-express/how-to-put-a-profile-together.md index 26ac44be762..d5a65b05abd 100644 --- a/curriculum/challenges/chinese-traditional/06-quality-assurance/advanced-node-and-express/how-to-put-a-profile-together.md +++ b/curriculum/challenges/chinese-traditional/06-quality-assurance/advanced-node-and-express/how-to-put-a-profile-together.md @@ -8,29 +8,29 @@ dashedName: how-to-put-a-profile-together # --description-- -Now that you can ensure the user accessing the `/profile` is authenticated, you can use the information contained in `req.user` on your page. +現在你可以確保訪問 `/profile` 的用戶身份已被驗證，你可以使用你的頁面上包含在 `req.user` 中的信息。 -Pass an object containing the property `username` and value of `req.user.username` as the second argument for the `render` method of the profile view. +傳遞一個包含值爲 `req.user.username` 的屬性 `username` 的對象，作爲個人主頁視圖的 `render` 方法的第二個參數。 -Then, go to your `profile.pug` view, and add the following line below the existing `h1` element, and at the same level of indentation: +然後轉到你的 `profile.pug` 視圖，在現有 `h1` 元素下添加以下行，並且在同一級別縮進： ```pug h2.center#welcome Welcome, #{username}! ``` -This creates an `h2` element with the class `center` and id `welcome` containing the text `Welcome,` followed by the username. +這創建了一個 `h2` 元素，具有 `center` 類和包含文本 `Welcome,` 和用戶名的 id `welcome`。 -Also, in `profile.pug`, add a link referring to the `/logout` route, which will host the logic to unauthenticate a user: +另外，在 `profile.pug`中，添加一個指向 `/logout` 路由的鏈接，它將託管取消用戶認證的邏輯： ```pug a(href='/logout') Logout ``` -Submit your page when you think you've got it right. If you're running into errors, you can check out the project completed up to this point. +完成之後，提交你的頁面鏈接。 如果你在運行時遇到錯誤，你可以查看已完成的項目。 # --hints-- -You should correctly add a Pug render variable to `/profile`. +你應該正確地在 `/profile` 中添加一個 Pug 渲染變量。 ```js async (getUserInput) => { diff --git a/curriculum/challenges/chinese-traditional/06-quality-assurance/advanced-node-and-express/how-to-use-passport-strategies.md b/curriculum/challenges/chinese-traditional/06-quality-assurance/advanced-node-and-express/how-to-use-passport-strategies.md index 94ee41e70b4..b828f29e8d8 100644 --- a/curriculum/challenges/chinese-traditional/06-quality-assurance/advanced-node-and-express/how-to-use-passport-strategies.md +++ b/curriculum/challenges/chinese-traditional/06-quality-assurance/advanced-node-and-express/how-to-use-passport-strategies.md @@ -8,23 +8,23 @@ dashedName: how-to-use-passport-strategies # --description-- -In the `index.pug` file supplied, there is a login form. It is hidden because of the inline JavaScript `if showLogin` with the form indented after it. +在提供的 `index.pug` 文件中，有一個登錄表格。 它被隱藏了，因爲內聯的 JavaScript `if showLogin` 和在它之後縮進的表單。 -In the `res.render` for that page, add a new variable to the object, `showLogin: true`. When you refresh your page, you should then see the form! This form is set up to **POST** on `/login`. So, this is where you should set up to accept the POST request and authenticate the user. +在頁面的 `res.render` 中，爲對象添加一個新變量：`showLogin: true`。 當你刷新你的頁面時，應該能看到表單！ 此表單被設置爲 `/login` 上的 **POST**。 所以，你應該在這裏設置接受 POST 請求並認證用戶。 -For this challenge, you should add the route `/login` to accept a POST request. To authenticate on this route, you need to add a middleware to do so before then sending a response. This is done by just passing another argument with the middleware before with your response. The middleware to use is `passport.authenticate('local')`. +對於這個挑戰，你應該添加路由 `/login` 來接受 POST 請求。 要驗證此路由，你需要添加一箇中間件，然後發送回覆。 這可以通過在你的響應之前向中間件傳遞另一個參數來實現。 要使用的中間件是 `passport.authenticate('local')`。 -`passport.authenticate` can also take some options as an argument such as `{ failureRedirect: '/' }` which is incredibly useful, so be sure to add that in as well. Add a response after using the middleware (which will only be called if the authentication middleware passes) that redirects the user to `/profile`. Add that route, as well, and make it render the view `profile.pug`. +`passport.authenticate` 也可以把一些選項作爲參數，例如 `{ failureRedirect: '/' }`，這非常有用，因此也要確保增加這一點。 在使用中間件後添加一個響應（只有在認證中間件通過後纔會被調用），將用戶重定向到 `/profile`。 添加該路由，讓它呈現視圖 `profile.pug`。 -If the authentication was successful, the user object will be saved in `req.user`. +如果認證成功，用戶對象將被保存在 `req.user`。 -At this point, if you enter a username and password in the form, it should redirect to the home page `/`, and the console of your server should display `'User {USERNAME} attempted to log in.'`, since we currently cannot login a user who isn't registered. +現在，如果你在表單中輸入用戶名和密碼，它應該重定向到主頁 `/`，你的服務器的控制檯應該顯示 `'User {USERNAME} attempted to log in.'`，因爲目前未註冊的用戶無法登錄。 -Submit your page when you think you've got it right. If you're running into errors, you can check out the project completed up to this point. +完成後，提交你的頁面鏈接。 如果你在運行時遇到錯誤，可以查看已完成的項目。 # --hints-- -All steps should be correctly implemented in `server.js`. +所有步驟都應該在 `server.js` 中正確實現。 ```js async (getUserInput) => { @@ -49,7 +49,7 @@ async (getUserInput) => { } ``` -A POST request to `/login` should correctly redirect to `/`. +`/login` 的 POST 請求應該正確重定向到 `/`。 ```js async (getUserInput) => { diff --git a/curriculum/challenges/chinese-traditional/06-quality-assurance/advanced-node-and-express/implement-the-serialization-of-a-passport-user.md b/curriculum/challenges/chinese-traditional/06-quality-assurance/advanced-node-and-express/implement-the-serialization-of-a-passport-user.md index 101d796f410..5ccf2802b09 100644 --- a/curriculum/challenges/chinese-traditional/06-quality-assurance/advanced-node-and-express/implement-the-serialization-of-a-passport-user.md +++ b/curriculum/challenges/chinese-traditional/06-quality-assurance/advanced-node-and-express/implement-the-serialization-of-a-passport-user.md @@ -8,11 +8,11 @@ dashedName: implement-the-serialization-of-a-passport-user # --description-- -You are not loading an actual user object since the database is not set up. Connect to the database once, when you start the server, and keep a persistent connection for the full life-cycle of the app. To do this, add your database's connection string (for example: `mongodb+srv://:@cluster0-jvwxi.mongodb.net/?retryWrites=true&w=majority`) to the environment variable `MONGO_URI`. 我們會在 `connection.js` 文件中調用它。 +你沒有加載一個實際的用戶對象，因爲數據庫沒有設置好。 當你啓動服務器時，連接到數據庫一次，並在應用程序的整個生命週期中保持持久連接。 爲此，你需要在環境變量 `MONGO_URI` 中添加你的數據庫連接字符串（比如：`mongodb+srv://:@cluster0-jvwxi.mongodb.net/?retryWrites=true&w=majority`）。 我們會在 `connection.js` 文件中調用它。 -*If you are having issues setting up a free database on MongoDB Atlas, check out this tutorial.* +*如果你在 MongoDB Atlas 設置免費數據庫時遇到問題，請查看這個教程。* -Now you want to connect to your database, then start listening for requests. The purpose of this is to not allow requests before your database is connected or if there is a database error. To accomplish this, encompass your serialization and app routes in the following code: +現在你想要連接到數據庫，然後開始監聽請求。 這樣做的目的是在連接數據庫之前或者出現數據庫錯誤時，不接收任何請求。 要實現這一點，你需要在以下代碼中包含序列化和應用的路由： ```javascript myDB(async client => { @@ -40,7 +40,7 @@ myDB(async client => { 記得要取消 `deserializeUser` 中 `myDataBase` 的註釋，並把 `doc` 添加到 `done(null, null)`。 -完成上述要求後，請提交你的頁面鏈接。 If you're running into errors, you can check out the project completed up to this point. +完成上述要求後，請提交你的頁面鏈接。 如果你在運行時遇到錯誤，你可以查看已完成的項目。 # --hints-- diff --git a/curriculum/challenges/chinese-traditional/06-quality-assurance/advanced-node-and-express/implementation-of-social-authentication-ii.md b/curriculum/challenges/chinese-traditional/06-quality-assurance/advanced-node-and-express/implementation-of-social-authentication-ii.md index 059fe2b6304..daa8f15bcd5 100644 --- a/curriculum/challenges/chinese-traditional/06-quality-assurance/advanced-node-and-express/implementation-of-social-authentication-ii.md +++ b/curriculum/challenges/chinese-traditional/06-quality-assurance/advanced-node-and-express/implementation-of-social-authentication-ii.md @@ -1,6 +1,6 @@ --- id: 589a69f5f9fc0f352b528e71 -title: Implementation of Social Authentication II +title: 實現社交賬號認證 II challengeType: 2 forumTopicId: 301557 dashedName: implementation-of-social-authentication-ii @@ -12,7 +12,7 @@ dashedName: implementation-of-social-authentication-ii 爲了設置 GitHub 策略，我們需要在 Passport 中使用實例化的 `GitHubStrategy`，它可以接收兩個參數：一個對象（包括 `clientID`、`clientSecret` 和 `callbackURL`），以及一個回調函數。在這個回調函數中，我們要處理驗證成功時，判斷用戶是否已經在數據庫中存在的邏輯，以及在用戶數據庫對象中最初保存哪些字段。 這種處理方式適用於絕大部分第三方驗證策略，但有些策略會需要我們提供更多的信息，詳情請參考相關策略的 GitHub README。 例如，Google 的驗證策略會要求你提供一個 *scope*，用於標示用戶成功登錄後，你需要從返回的對象中獲取那些信息。以及，這也需要經過用戶同意，你纔可以獲取到。 -The current strategy you are implementing authenticates users using a GitHub account and OAuth 2.0 tokens. 創建應用程序時獲得的客戶 ID 和密碼在創建策略時作爲選項提供。 策略還需要 `verify` 回調，接收訪問令牌和可選刷新令牌， 以及包含認證用戶的 GitHub 資料的 `profile`。 `verify` 回調必須調用 `cb` 提供用戶完成驗證。 +你目前實施的策略是使用 GitHub 賬戶和 OAuth 2.0 令牌來認證用戶。 創建應用程序時獲得的客戶 ID 和密碼在創建策略時作爲選項提供。 策略還需要 `verify` 回調，接收訪問令牌和可選刷新令牌， 以及包含認證用戶的 GitHub 資料的 `profile`。 `verify` 回調必須調用 `cb` 提供用戶完成驗證。 你的新策略應該是這樣的： @@ -31,7 +31,7 @@ passport.use(new GitHubStrategy({ 目前，你的驗證部分不會成功。由於沒有數據庫的邏輯和回調函數，你的代碼目前還會報錯。但如果你試一試，就可以在控制檯裏看到輸出了你的 GitHub 個人信息。 -完成上述要求後，請提交你的頁面鏈接。 If you're running into errors, you can check out the project completed up to this point. +完成上述要求後，請提交你的頁面鏈接。 如果你在運行時遇到錯誤，你可以查看已完成的項目。 # --hints-- diff --git a/curriculum/challenges/chinese-traditional/06-quality-assurance/advanced-node-and-express/implementation-of-social-authentication-iii.md b/curriculum/challenges/chinese-traditional/06-quality-assurance/advanced-node-and-express/implementation-of-social-authentication-iii.md index 62e7a3b4a1e..276e648bdb8 100644 --- a/curriculum/challenges/chinese-traditional/06-quality-assurance/advanced-node-and-express/implementation-of-social-authentication-iii.md +++ b/curriculum/challenges/chinese-traditional/06-quality-assurance/advanced-node-and-express/implementation-of-social-authentication-iii.md @@ -41,9 +41,9 @@ myDataBase.findOneAndUpdate( `findOneAndUpdate` 的作用是在數據庫中查詢對象並更新， 如果對象不存在，將插入對象，然後我們可以在回調方法裏獲取到插入的新對象。 在這個例子中，我們會設置 `last_login`，而且總會爲 `login_count` 加 `1`。只有在插入一個新對象（新用戶）時，我們纔會初始化這些字段。 另外，還需要注意默認值的使用。 有時返回的用戶信息可能不全，可能是因爲用戶沒有填寫，也可能是因爲用戶選擇不公開一部分信息。 在這種情況下，我們需要進行相應的處理，以防我們的 app 報錯。 -You should be able to login to your app now. Try it! +你現在應該可以登錄你的應用了， 試試吧！ -完成上述要求後，你可以在下方提交你的頁面鏈接。 If you're running into errors, you can check out the project completed up to this point. +完成上述要求後，你可以在下方提交你的頁面鏈接。 如果你在運行時遇到錯誤，可以查看已完成的項目。 # --hints-- diff --git a/curriculum/challenges/chinese-traditional/06-quality-assurance/advanced-node-and-express/implementation-of-social-authentication.md b/curriculum/challenges/chinese-traditional/06-quality-assurance/advanced-node-and-express/implementation-of-social-authentication.md index 7414ee50b30..efa5c9a3d61 100644 --- a/curriculum/challenges/chinese-traditional/06-quality-assurance/advanced-node-and-express/implementation-of-social-authentication.md +++ b/curriculum/challenges/chinese-traditional/06-quality-assurance/advanced-node-and-express/implementation-of-social-authentication.md @@ -1,6 +1,6 @@ --- id: 589a69f5f9fc0f352b528e70 -title: Implementation of Social Authentication +title: 實現社交賬號認證 challengeType: 2 forumTopicId: 301559 dashedName: implementation-of-social-authentication @@ -10,19 +10,19 @@ dashedName: implementation-of-social-authentication 在應用中這種驗證的基本路徑是： -1. User clicks a button or link sending them to your route to authenticate using a specific strategy (e.g. GitHub). +1. 用戶點擊一個按鈕或鏈接，訪問你的路由，使用特定的策略（例如 GitHub）進行認證。 2. 需要在路由中調用 `passport.authenticate('github')`，跳轉至 GitHub 驗證頁面。 -3. 頁面跳轉到 GitHub 上，如果用戶未登錄 GitHub，就需要在這裏進行登錄。 It then asks them to approve access to their profile from your app. -4. The user is then returned to your app at a specific callback url with their profile if they are approved. +3. 頁面跳轉到 GitHub 上，如果用戶未登錄 GitHub，就需要在這裏進行登錄。 然後它要求他們批准從你的應用程序訪問他們的個人資料。 +4. 如果用戶被批准，他們會在一個特定的回調 url 上帶着他們的個人資料返回到你的應用程序。 5. 驗證已完成。我們的應用需要查詢這個用戶是否已經存在。如果是新用戶，那我們需要把用戶信息存儲到數據庫。 -在 OAuth 驗證策略中，我們至少需要提供 *Client ID* 和 *Client Secret*，這樣第三方平臺就會獲悉驗證請求的來源，以及這個來源是否有效。 爲此，需要去我們使用的第三方驗證平臺（比如 GitHub）獲取這兩個字段的值。 注意，我們獲取到的這個值是唯一的，僅對我們的當前 app 有效——**因此，千萬不要分享給別人**，更不要上傳到公共倉庫或者直接寫在代碼裏。 通常，我們會把它們放在 `.env` 文件裏，並通過 `process.env.GITHUB_CLIENT_ID` 獲取。 For this challenge you are going to use the GitHub strategy. +在 OAuth 驗證策略中，我們至少需要提供 *Client ID* 和 *Client Secret*，這樣第三方平臺就會獲悉驗證請求的來源，以及這個來源是否有效。 爲此，需要去我們使用的第三方驗證平臺（比如 GitHub）獲取這兩個字段的值。 注意，我們獲取到的這個值是唯一的，僅對我們的當前 app 有效——**因此，千萬不要分享給別人**，更不要上傳到公共倉庫或者直接寫在代碼裏。 通常，我們會把它們放在 `.env` 文件裏，並通過 `process.env.GITHUB_CLIENT_ID` 獲取。 在這個挑戰中，你要使用 GitHub 策略。 -Follow these instructions to obtain your *Client ID and Secret* from GitHub. Set the homepage URL to your Replit homepage (**not the project code's URL**), and set the callback URL to the same homepage URL with `/auth/github/callback` appended to the end. Save the client ID and your client secret in your project's `.env` file as `GITHUB_CLIENT_ID` and `GITHUB_CLIENT_SECRET`. +按照這些說明從 GitHub 獲取你的 *客戶端 ID 和密鑰*。 將主頁 URL 設置爲你的 Replit 主頁（**而不是項目代碼的 URL**），並將回調 URL 設置爲相同的主頁 URL，並在末尾添加 `/auth/github/callback`。 將客戶端 ID 和你的客戶端密碼保存到你的項目的 `.env`，作爲 `GITHUB_CLIENT_ID` 和 `GITHUB_CLIENT_SECRET`。 -In your `routes.js` file, add `showSocialAuth: true` to the homepage route, after `showRegistration: true`. Now, create 2 routes accepting GET requests: `/auth/github` and `/auth/github/callback`. The first should only call passport to authenticate `'github'`. The second should call passport to authenticate `'github'` with a failure redirect to `/`, and then if that is successful redirect to `/profile` (similar to your last project). +在你的 `routes.js` 文件中，添加 `showSocialAuth: true` 到主頁路由，在 `showRegistration: true` 的後面。 現在，創建兩個接收 GET 請求的路由：`/auth/github` 和 `/auth/github/callback`。 第一個應該只調用 passport 來驗證 `'github'`。 第二個應該調用 passport 來驗證 `'github'`，失敗後重定向到 `/`，然後如果成功則重定向到 `/profile`（與你的上一個項目類似）。 -An example of how `/auth/github/callback` should look is similar to how you handled a normal login: +`/auth/github/callback` 的例子應該與你處理正常登錄的方式相似： ```js app.route('/login') @@ -31,11 +31,11 @@ app.route('/login') }); ``` -Submit your page when you think you've got it right. If you're running into errors, you can check out the project up to this point. +完成之後，提交你的頁面鏈接。 如果你在運行時遇到錯誤，你可以查看已完成的項目。 # --hints-- -Route `/auth/github` should be correct. +路由 `/auth/github` 應該是正確的。 ```js async (getUserInput) => { @@ -66,7 +66,7 @@ async (getUserInput) => { } ``` -Route `/auth/github/callback` should be correct. +路由 `/auth/github/callback` 應該是正確的。 ```js async (getUserInput) => { diff --git a/curriculum/challenges/chinese-traditional/06-quality-assurance/advanced-node-and-express/logging-a-user-out.md b/curriculum/challenges/chinese-traditional/06-quality-assurance/advanced-node-and-express/logging-a-user-out.md index b97c4fdf86d..b40842c9dde 100644 --- a/curriculum/challenges/chinese-traditional/06-quality-assurance/advanced-node-and-express/logging-a-user-out.md +++ b/curriculum/challenges/chinese-traditional/06-quality-assurance/advanced-node-and-express/logging-a-user-out.md @@ -8,9 +8,9 @@ dashedName: logging-a-user-out # --description-- -創建退出登錄的邏輯是比較簡單的。 The route should just unauthenticate the user, and redirect to the home page instead of rendering any view. +創建退出登錄的邏輯是比較簡單的。 路由應該取消用戶的認證，並重定向到主頁，而不是渲染任何視圖。 -In passport, unauthenticating a user is as easy as just calling `req.logout()` before redirecting. Add this `/logout` route to do that: +在 passport 裏，只需要在重定向前調用 `req.logout()` 即可完成用戶的退出登錄。 添加 `/logout` 路由來實現： ```js app.route('/logout') @@ -20,7 +20,7 @@ app.route('/logout') }); ``` -You may have noticed that you are not handling missing pages (404). 在 Node 中我們通常會用如下的中間件來處理。 請在所有路由之後添加這段代碼： +你可能已經注意到我們還沒有處理 404 錯誤，這個錯誤碼代表頁面無法找到。 在 Node 中我們通常會用如下的中間件來處理。 請在所有路由之後添加這段代碼： ```js app.use((req, res, next) => { @@ -30,7 +30,7 @@ app.use((req, res, next) => { }); ``` -完成上述要求後，請提交你的頁面鏈接。 If you're running into errors, you can check out the project completed up to this point. +完成上述要求後，請提交你的頁面鏈接。 如果你在運行時遇到錯誤，你可以查看已完成的項目。 # --hints-- @@ -49,7 +49,7 @@ async (getUserInput) => { } ``` -`/logout` should redirect to the home page. +`/logout` 應重定向到主頁。 ```js async (getUserInput) => { diff --git a/curriculum/challenges/chinese-traditional/06-quality-assurance/advanced-node-and-express/registration-of-new-users.md b/curriculum/challenges/chinese-traditional/06-quality-assurance/advanced-node-and-express/registration-of-new-users.md index 2a992d337ec..0b9df50300a 100644 --- a/curriculum/challenges/chinese-traditional/06-quality-assurance/advanced-node-and-express/registration-of-new-users.md +++ b/curriculum/challenges/chinese-traditional/06-quality-assurance/advanced-node-and-express/registration-of-new-users.md @@ -8,20 +8,20 @@ dashedName: registration-of-new-users # --description-- -Now you need to allow a new user on your site to register an account. In the `res.render` for the home page add a new variable to the object passed along - `showRegistration: true`. When you refresh your page, you should then see the registration form that was already created in your `index.pug` file. This form is set up to **POST** on `/register`, so create that route and have it add the user object to the database by following the logic below. +現在你需要允許你網站上的新用戶註冊一個賬戶。 在主頁的 `res.render` 中，給傳遞的對象添加一個新的變量——`showRegistration: true`。 當你刷新頁面時，你應該看到已經在 `index.pug` 文件中創建的註冊表格。 這個表單被設置爲在 `/register` 上使用 **POST** 方法，因此根據下面的邏輯創建路由並將用戶對象添加到數據庫中。 -The logic of the registration route should be as follows: +註冊路由的邏輯應如下： -1. Register the new user -2. Authenticate the new user -3. Redirect to `/profile` +1. 註冊新用戶 +2. 驗證新用戶 +3. 重定向到 `/profile` -The logic of step 1 should be as follows: +第 1 步的邏輯應如下： -1. Query database with `findOne` -2. If there is an error, call `next` with the error -3. If a user is returned, redirect back to home -4. If a user is not found and no errors occur, then `insertOne` into the database with the username and password. As long as no errors occur there, call `next` to go to step 2, authenticating the new user, which you already wrote the logic for in your `POST /login` route. +1. 使用 `findOne` 查詢數據庫 +2. 如果出現錯誤，調用 `next` 並傳入錯誤對象。 +3. 如果用戶結果返回，則重定向至主頁 +4. 如果找不到用戶並且沒有發生錯誤，那麼使用 `insertOne` 在數據庫中插入用戶名和密碼。 只要沒有發生錯誤，就調用 `next` 進行第 2 步，認證新用戶，即你已經在 `POST /login` 路由中編寫的邏輯。 ```js app.route('/register') @@ -56,13 +56,13 @@ app.route('/register') ); ``` -完成上述要求後，請提交你的頁面鏈接。 If you're running into errors, you can check out the project completed up to this point. +完成上述要求後，請提交你的頁面鏈接。 如果你在運行時遇到錯誤，可以查看已完成的項目。 **注意：**接下來的挑戰可能會在運行 *picture-in-picture*（畫中畫）模式的瀏覽器中出現問題。 如果你使用的線上 IDE 提供在 IDE 內預覽 app 的功能，請考慮打開新的標籤頁預覽。 # --hints-- -You should have a `/register` route and display a registration form on the home page. +你應該有 `/register` 路由並在主頁上顯示註冊表單。 ```js async (getUserInput) => { diff --git a/curriculum/challenges/chinese-traditional/06-quality-assurance/advanced-node-and-express/send-and-display-chat-messages.md b/curriculum/challenges/chinese-traditional/06-quality-assurance/advanced-node-and-express/send-and-display-chat-messages.md index 5b66f966390..660a734b0f3 100644 --- a/curriculum/challenges/chinese-traditional/06-quality-assurance/advanced-node-and-express/send-and-display-chat-messages.md +++ b/curriculum/challenges/chinese-traditional/06-quality-assurance/advanced-node-and-express/send-and-display-chat-messages.md @@ -22,13 +22,13 @@ $('form').submit(function() { socket.emit('chat message', messageToSend); ``` -在服務端，我們需要監聽包含 `message` 數據的 `'chat message'` 事件。 Once the event is received, it should emit the event `'chat message'` to all sockets using `io.emit`, sending a data object containing the `username` and `message`. +在服務端，我們需要監聽包含 `message` 數據的 `'chat message'` 事件。 一旦接收到事件，服務端應該使用 `io.emit` 向所有套接字發出 `'chat message'` 事件，併發送包含 `username` 和 `message` 的數據對象。 -In `client.js`, you should now listen for event `'chat message'` and, when received, append a list item to `#messages` with the username, a colon, and the message! +在 `client.js` 中，你現在應該監聽 `'chat message'` 事件，並在接收到事件後將用戶名、冒號和消息添加到 `#messages` 的列表項中！ 至此，我們已經完成發送信息到所有客戶端的功能。 -完成上述要求後，請提交你的頁面鏈接。 If you're running into errors, you can check out the project completed up to this point. +完成上述要求後，請提交你的頁面鏈接。 如果你在運行時遇到錯誤，可以查看已完成的項目。 # --hints-- diff --git a/curriculum/challenges/chinese-traditional/06-quality-assurance/advanced-node-and-express/serialization-of-a-user-object.md b/curriculum/challenges/chinese-traditional/06-quality-assurance/advanced-node-and-express/serialization-of-a-user-object.md index 778fa71211d..655fb9916c2 100644 --- a/curriculum/challenges/chinese-traditional/06-quality-assurance/advanced-node-and-express/serialization-of-a-user-object.md +++ b/curriculum/challenges/chinese-traditional/06-quality-assurance/advanced-node-and-express/serialization-of-a-user-object.md @@ -10,20 +10,20 @@ dashedName: serialization-of-a-user-object 序列化和反序列化在身份認證中是很重要的概念。 序列化一個對象就是將其內容轉換成一個體積很小的 *key*，後續可以通過它反序列化爲原始對象。 這樣，服務器就可以在用戶未登錄時識別用戶，或者說給這個用戶一個唯一標識，用戶也不需要在每次訪問不同頁面時都給服務器發送用戶名和密碼。 -To set this up properly, you need to have a serialize function and a deserialize function. In Passport, these can be created with: +要正確設置此功能，你需要一個序列化的函數和一個反序列化函數。 在 Passport 中間件中，可以使用以下方法創建它們： ```javascript passport.serializeUser(cb); passport.deserializeUser(cb); ``` -The callback function passed to `serializeUser` is called with two arguments: the full user object, and a callback used by passport. +傳遞給 `serializeUser` 的回調函數接收兩個參數：完整的用戶對象和由 passport 使用的回調。 -The callback expects two arguments: An error, if any, and a unique key to identify the user that should be returned in the callback. You will use the user's `_id` in the object. This is guaranteed to be unique, as it is generated by MongoDB. +該回調需要兩個參數：一個錯誤，以及應在回調中返回的一個用於識別用戶的唯一鍵。 你將在對象中使用用戶的 `_id`。 這是保證唯一的，因爲它是由 MongoDB 生成的。 -Similarly, `deserializeUser` is called with two arguments: the unique key, and a callback function. +同樣，`deserializeUser` 需要用兩個參數調用：唯一的鍵值和回調函數。 -This callback expects two arguments: An error, if any, and the full user object. To get the full user object, make a query search for a Mongo `_id`, as shown below: +該回調需要兩個參數：一個錯誤，以及完整的用戶對象。 要獲取完整的用戶對象，請按如下方式進行 Mongo `_id` 查詢： ```javascript @@ -38,19 +38,19 @@ passport.deserializeUser((id, done) => { }); ``` -Add the two functions above to your server. The `ObjectID` class comes from the `mongodb` package. `mongodb@~3.6.0` has already been added as a dependency. Declare this class with: +將上面的兩個函數添加到你的服務器。 `ObjectID` 類來自 `mongodb` 包。 `mongodb@~3.6.0` 已經被添加爲依賴項。 使用以下方式聲明此類： ```javascript const { ObjectID } = require('mongodb'); ``` -The `deserializeUser` will throw an error until you set up the database connection. So, for now, comment out the `myDatabase.findOne` call, and just call `done(null, null)` in the `deserializeUser` callback function. +在設置數據庫連接之前，`deserializeUser`將拋出錯誤。 因此，現在請在 `deserializeUser` 回調函數中註釋掉 `myDatabase.findOne` 調用，只調用 `done(null, null)` 即可。 -Submit your page when you think you've got it right. If you're running into errors, you can check out the project completed up to this point. +當你覺得已經完成時提交你的頁面。 如果你遇到錯誤，你可以查看已完成的項目。 # --hints-- -You should serialize user function correctly. +應該正確地序列化用戶函數。 ```js async (getUserInput) => { @@ -70,7 +70,7 @@ async (getUserInput) => { } ``` -You should deserialize user function correctly. +應該正確地反序列化用戶函數。 ```js async (getUserInput) => { @@ -90,7 +90,7 @@ async (getUserInput) => { } ``` -MongoDB should be a dependency. +MongoDB 應作爲項目的依賴。 ```js async (getUserInput) => { @@ -105,7 +105,7 @@ async (getUserInput) => { } ``` -Mongodb should be properly required including the ObjectId. +應該正確請求 Mongodb，包括 ObjectId。 ```js async (getUserInput) => { diff --git a/curriculum/challenges/chinese-traditional/06-quality-assurance/advanced-node-and-express/set-up-a-template-engine.md b/curriculum/challenges/chinese-traditional/06-quality-assurance/advanced-node-and-express/set-up-a-template-engine.md index 883ca6f070b..38f9d304ac3 100644 --- a/curriculum/challenges/chinese-traditional/06-quality-assurance/advanced-node-and-express/set-up-a-template-engine.md +++ b/curriculum/challenges/chinese-traditional/06-quality-assurance/advanced-node-and-express/set-up-a-template-engine.md @@ -14,35 +14,35 @@ dashedName: set-up-a-template-engine - 使用我們在 Replit 上的初始化項目來完成這些挑戰。 - 使用一個你選擇的站點生成器來完成項目。 需要確定包含了我們 GitHub 倉庫的所有文件。 -If you use Replit, follow these steps to set up the project: +如果你使用 Replit，請按照以下步驟設置項目： -- Start by importing the project on Replit. -- Next, you will see a `.replit` window. -- Select `Use run command` and click the `Done` button. +- 首先在 Replit 中導入項目。 +- 接着，你將看到一個 `.replit` 窗口。 +- 選擇 `Use run command` 並點擊 `Done` 按鈕。 -When you are done, make sure a working demo of your project is hosted somewhere public. Then submit the URL to it in the `Solution Link` field. +當你完成後，請將一個確保正常運行的 demo（項目演示）託管在可以公開訪問的平臺上。 然後將 demo 的 URL 提交到 `Solution Link` 字段中。 -A template engine enables you to use static template files (such as those written in *Pug*) in your app. At runtime, the template engine replaces variables in a template file with actual values which can be supplied by your server. Then it transforms the template into a static HTML file that is sent to the client. This approach makes it easier to design an HTML page and allows for displaying variables on the page without needing to make an API call from the client. +模板引擎使你可以在應用程序中使用靜態模板文件（例如用 *Pug* 編寫的文件）。 在運行時，模版引擎會用服務端的真實數據替換掉模版文件中的變量。 然後將模版轉譯成發送給客戶端的 HTML 靜態文件。 這樣可以輕鬆地構造 HTML 頁面，允許在頁面直接顯示變量內容而不需要從客戶端發送 API 請求。 -`pug@~3.0.0` has already been installed, and is listed as a dependency in your `package.json` file. +`pug@~3.0.0` 已經被安裝，並且在你項目的 `package.json` 文件中作爲依賴。 -Express needs to know which template engine you are using. Use the `set` method to assign `pug` as the `view engine` property's value: +Express 需要知道你正在使用哪個模板引擎。 使用 `set` 方法來分配 `pug` 作爲 `view engine` 屬性的值： ```javascript app.set('view engine', 'pug'); ``` -After that, add another `set` method that sets the `views` property of your `app` to point to the `./views/pug` directory. This tells Express to render all views relative to that directory. +在那之後， 添加另一個 `set` 方法來設置你的 `app` 的 `views` 屬性，指向 `./views/pug` 目錄。 這告訴 Express 要渲染所有與那個目錄相關的視圖。 -Finally, use `res.render()` in the route for your home page, passing `index` as the first argument. This will render the `pug` template. +最後，在主頁的路由中使用 `res.render()`，傳遞 `index` 作爲第一個參數。 這將渲染 `pug` 模板。 -If all went as planned, your app home page will no longer be blank. Instead, it will display a message indicating you've successfully rendered the Pug template! +如果全部按計劃進行，你的應用主頁將不再留空。 相反，它將顯示一條消息，表明你已經成功渲染了Pug 模板！ -Submit your page when you think you've got it right. If you're running into errors, you can check out the project completed up to this point. +完成上述要求後，請提交你的頁面鏈接。 如果你遇到錯誤，可以查看已完成的項目。 # --hints-- -Pug should be a dependency. +項目中應使用 Pug 作爲依賴。 ```js async (getUserInput) => { @@ -57,7 +57,7 @@ async (getUserInput) => { } ``` -View engine should be Pug. +View 引擎應該是 Pug。 ```js async (getUserInput) => { @@ -68,7 +68,7 @@ async (getUserInput) => { } ``` -You should set the `views` property of the application to `./views/pug`. +你應該將應用程序的 `views` 屬性設置爲 `./views/pug`。 ```js async (getUserInput) => { @@ -79,7 +79,7 @@ async (getUserInput) => { } ``` -Use the correct ExpressJS method to render the index page from the response. +使用正確的 ExpressJS 方法渲染來自響應的索引頁。 ```js async (getUserInput) => { @@ -94,7 +94,7 @@ async (getUserInput) => { } ``` -Pug should be working. +Pug 應該正常運行。 ```js async (getUserInput) => { diff --git a/curriculum/challenges/chinese-traditional/06-quality-assurance/advanced-node-and-express/set-up-passport.md b/curriculum/challenges/chinese-traditional/06-quality-assurance/advanced-node-and-express/set-up-passport.md index d1811c253c6..33cfd69e32e 100644 --- a/curriculum/challenges/chinese-traditional/06-quality-assurance/advanced-node-and-express/set-up-passport.md +++ b/curriculum/challenges/chinese-traditional/06-quality-assurance/advanced-node-and-express/set-up-passport.md @@ -8,13 +8,13 @@ dashedName: set-up-passport # --description-- -It's time to set up *Passport* so you can finally start allowing a user to register or log in to an account. In addition to Passport, you will use Express-session to handle sessions. Express-session has a ton of advanced features you can use, but for now you are just going to use the basics. Using this middleware saves the session id as a cookie in the client, and allows us to access the session data using that id on the server. This way, you keep personal account information out of the cookie used by the client to tell to your server clients are authenticated and keep the *key* to access the data stored on the server. +現在我們來創建 *Passport*，最終我們需要用它來實現用戶註冊和登錄。 除了 Passport，我們還會用 Express-session 來處理 session（會話）。 Express-session 有許多高級特性供你使用，但你暫時只需要瞭解其基礎功能。 在客戶端，我們可以用這個中間件把 session id 儲存到 cookie。同時，我們可以在服務器上通過這個 id 訪問 session 數據。 通過這種方式，你無需把用戶的個人賬號信息存到 cookie，來完成用戶的驗證。只需要用這個 id 作爲 *key* 來訪問服務器上用戶的數據即可。 `passport@~0.4.1` 和 `express-session@~1.17.1` 已經安裝，並且在你的 `package.json` 文件中均被列爲依賴項。 -You will need to set up the session settings and initialize Passport. First, create the variables `session` and `passport` to require `express-session` and `passport` respectively. +現在，你需要配置 session 並初始化 Passport。 首先，創建變量 `session` 和 `passport` 以便分別請求 `express-session` 和 `passport`。 -Then, set up your Express app to use the session by defining the following options: +然後，通過定義以下選項來設置你的 Express 應用程序來使用會話： ```javascript app.use(session({ @@ -25,15 +25,15 @@ app.use(session({ })); ``` -Be sure to add `SESSION_SECRET` to your `.env` file, and give it a random value. This is used to compute the hash used to encrypt your cookie! +請在 `.env` 文件中添加 `SESSION_SECRET`，並給它賦一個隨機值。 這是用來計算用於加密你的 cookie 的哈希值的！ -After you do all that, tell your express app to **use** `passport.initialize()` and `passport.session()`. +在你做了所有這些後，告訴你的 Express 應用程序**使用** `passport.initialize()` 和 `passport.session()`。 -Submit your page when you think you've got it right. If you're running into errors, you can check out the project completed up to this point. +完成後，提交你的頁面鏈接。 如果你遇到錯誤，可以查看已完成的項目。 # --hints-- -Passport and Express-session should be dependencies. +應添加 Passort 和 Express-session 作爲依賴。 ```js async (getUserInput) => { @@ -53,7 +53,7 @@ async (getUserInput) => { } ``` -Dependencies should be correctly required. +依賴應正確引入。 ```js async (getUserInput) => { @@ -73,7 +73,7 @@ async (getUserInput) => { } ``` -Express app should use new dependencies. +Express app 可以使用新的依賴。 ```js async (getUserInput) => { @@ -85,7 +85,7 @@ async (getUserInput) => { } ``` -Session and session secret should be correctly set up. +應正確設置 session 和 session secret。 ```js async (getUserInput) => { diff --git a/curriculum/challenges/chinese-traditional/06-quality-assurance/advanced-node-and-express/set-up-the-environment.md b/curriculum/challenges/chinese-traditional/06-quality-assurance/advanced-node-and-express/set-up-the-environment.md index fc41dc9b3bb..258892428f9 100644 --- a/curriculum/challenges/chinese-traditional/06-quality-assurance/advanced-node-and-express/set-up-the-environment.md +++ b/curriculum/challenges/chinese-traditional/06-quality-assurance/advanced-node-and-express/set-up-the-environment.md @@ -19,7 +19,7 @@ const io = require('socket.io')(http); 現在我們的 *express 應用*已經包含了 *http* 服務，接下來我們需要監聽 *http* 服務的事件。 爲此，我們需要把 `app.listen` 更新爲 `http.listen`。 -需要處理的第一件事是監聽客戶端的新連接。 on 關鍵字就是監聽這個特定事件。 它需要 2 個參數：一個包含所發出事件標題的字符串，以及一個用於傳遞數據的函數。 In the case of our connection listener, use `socket` to define the data in the second argument. socket 就是指已連接到服務器的客戶端。 +需要處理的第一件事是監聽客戶端的新連接。 on 關鍵字就是監聽這個特定事件。 它需要 2 個參數：一個包含所發出事件標題的字符串，以及一個用於傳遞數據的函數。 在連接監聽器中，我們用 `socket` 來定義第二個參數中的數據。 socket 就是指已連接到服務器的客戶端。 爲了可以監聽服務器的連接事件，我們在數據庫連接的部分加入如下代碼： @@ -36,13 +36,13 @@ io.on('connection', socket => { let socket = io(); ``` -在這個文件中，我們沒有定義 “io” 變量，但第一行的註釋會阻止運行時產生的報錯。 You have already added a reliable CDN to the Socket.IO library on the page in `chat.pug`. +在這個文件中，我們沒有定義 “io” 變量，但第一行的註釋會阻止運行時產生的報錯。 你已經在 `chat.pug` 中在頁面上爲 Socket.IO 庫添加了一個可靠的CDN。 -Now try loading up your app and authenticate and you should see in your server console `A user has connected`. +現在你可以重啓一下你的 app，嘗試一下驗證用戶，然後你應該會看到服務器的 console 裏輸出了 `A user has connected`。 **注意：**只有在連接到處於同一個 url/server 上的 socket 時，`io()`纔可以正常執行。 如果需要連接到外部的 socket，就需要這樣調用：`io.connect('URL');`。 -完成上述要求後，請提交你的頁面鏈接。 If you're running into errors, you can check out the project completed up to this point. +完成上述要求後，請提交你的頁面鏈接。 如果你遇到錯誤，可以查看已完成的項目。 # --hints-- diff --git a/curriculum/challenges/chinese-traditional/06-quality-assurance/advanced-node-and-express/use-a-template-engines-powers.md b/curriculum/challenges/chinese-traditional/06-quality-assurance/advanced-node-and-express/use-a-template-engines-powers.md index 9a3d9599966..694831c7c68 100644 --- a/curriculum/challenges/chinese-traditional/06-quality-assurance/advanced-node-and-express/use-a-template-engines-powers.md +++ b/curriculum/challenges/chinese-traditional/06-quality-assurance/advanced-node-and-express/use-a-template-engines-powers.md @@ -12,9 +12,9 @@ dashedName: use-a-template-engines-powers 在 Pug 文件中，你可以用變量名來調用變量，比如寫成 `#{variable_name}` 來實現行內調用，或像 `p=variable_name` 把元素與變量直接寫在一起，這表示 p 元素的內容等價於這個變量。 -Pug is all about using whitespace and tabs to show nested elements and cutting down on the amount of code needed to make a beautiful site. +Pug 是關於使用空白和製表符來顯示嵌套元素，並減少製作一個漂亮網站所需的代碼量。 -Take the following Pug code for example: +以下面的 Pug 代碼爲例： ```pug head @@ -27,7 +27,7 @@ body p Get on it! ``` -The above yields the following HTML: +以上代碼生成以下 HTML： ```html @@ -40,23 +40,23 @@ The above yields the following HTML: ``` -Your `index.pug` file included in your project, uses the variables `title` and `message`. +你的項目中的 `index.pug` 文件使用了變量 `title` 和 `message`。 -Pass those from your server to the Pug file by adding an object as a second argument to your `res.render` call with the variables and their values. Give the `title` a value of `Hello` and `message` a value of `Please log in`. +爲了從服務器傳遞這些信息到 Pug 文件，你需要給 `res.render` 調用添加一個對象作爲第二個參數，其中包含變量和對應的值。 給 `title` 一個值爲 `Hello`，給 `message` 一個值爲 `Please log in`。 -It should look like: +就像這樣： ```javascript res.render('index', { title: 'Hello', message: 'Please log in' }); ``` -Now refresh your page, and you should see those values rendered in your view in the correct spot as laid out in your `index.pug` file! +現在刷新你的頁面， 你應該看到這些值呈現在你的視圖中正確位置，即 `index.pug` 文件中！ -Submit your page when you think you've got it right. If you're running into errors, you can check out the project completed up to this point. +完成上述要求後，請提交你的頁面鏈接。 如果你在運行時遇到錯誤，你可以查看已完成的項目。 # --hints-- -Pug should correctly render variables. +Pug 應正確地展示變量。 ```js async (getUserInput) => { diff --git a/curriculum/challenges/chinese-traditional/06-quality-assurance/quality-assurance-and-testing-with-chai/learn-how-javascript-assertions-work.md b/curriculum/challenges/chinese-traditional/06-quality-assurance/quality-assurance-and-testing-with-chai/learn-how-javascript-assertions-work.md index 9cfe253f97c..422dc986df7 100644 --- a/curriculum/challenges/chinese-traditional/06-quality-assurance/quality-assurance-and-testing-with-chai/learn-how-javascript-assertions-work.md +++ b/curriculum/challenges/chinese-traditional/06-quality-assurance/quality-assurance-and-testing-with-chai/learn-how-javascript-assertions-work.md @@ -14,21 +14,21 @@ dashedName: learn-how-javascript-assertions-work - 使用我們在 Replit 上的初始化項目來完成這些挑戰。 - 使用一個你喜歡的站點生成器來完成項目。 需要確定包含了我們 GitHub 倉庫的所有文件。 -If you use Replit, follow these steps to set up the project: +如果你使用 Replit，請按照以下步驟設置項目： -- Start by importing the project on Replit. -- Next, you will see a `.replit` window. -- Select `Use run command` and click the `Done` button. +- 首先在 Replit 中導入項目。 +- 接着，你將看到一個 `.replit` 窗口。 +- 選擇 `Use run command` 並點擊 `Done` 按鈕。 -When you are done, make sure a working demo of your project is hosted somewhere public. Then submit the URL to it in the `Solution Link` field. +當你完成後，請將一個確保正常運行的 demo（項目演示）託管在可以公開訪問的平臺上。 然後將 demo 的 URL 提交到 `Solution Link` 字段中。 # --instructions-- -Within `tests/1_unit-tests.js` under the test labelled `#1` in the `Basic Assertions` suite, change each `assert` to either `assert.isNull` or `assert.isNotNull` to make the test pass (should evaluate to `true`). Do not alter the arguments passed to the asserts. +在 `tests/1_unit-tests.js` 文件下 `Basic Assertions` suite 內註釋爲 `#1` 的地方，將每一個 `assert` 更改爲 `assert.isNull` 或 `assert.isNotNull`，以使測試通過（應該返回 `true`）。 不要修改傳入斷言的參數。 # --hints-- -All tests should pass. +應通過所有測試。 ```js (getUserInput) => @@ -42,7 +42,7 @@ All tests should pass. ); ``` -You should choose the correct method for the first assertion - `isNull` vs. `isNotNull`. +請爲第一個斷言選擇正確的方法——`isNull` 或 `isNotNull`。 ```js (getUserInput) => @@ -56,7 +56,7 @@ You should choose the correct method for the first assertion - `isNull` vs. `isN ); ``` -You should choose the correct method for the second assertion - `isNull` vs. `isNotNull`. +請爲第二個斷言選擇正確的方法——`isNull` 或 `isNotNull`。 ```js (getUserInput) => diff --git a/curriculum/challenges/chinese-traditional/06-quality-assurance/quality-assurance-projects/american-british-translator.md b/curriculum/challenges/chinese-traditional/06-quality-assurance/quality-assurance-projects/american-british-translator.md index 12aa77238a8..676023f183a 100644 --- a/curriculum/challenges/chinese-traditional/06-quality-assurance/quality-assurance-projects/american-british-translator.md +++ b/curriculum/challenges/chinese-traditional/06-quality-assurance/quality-assurance-projects/american-british-translator.md @@ -14,62 +14,62 @@ dashedName: american-british-translator - 使用我們在 Replit 上的初始化項目來完成你的項目。 - 使用您選擇的站點生成器來完成項目。 並確保包含了我們 GitHub 倉庫的所有文件。 -If you use Replit, follow these steps to set up the project: +如果你使用 Replit，請按照以下步驟設置項目： -- Start by importing the project on Replit. -- Next, you will see a `.replit` window. -- Select `Use run command` and click the `Done` button. +- 首先在 Replit 中導入項目。 +- 接着，你將看到一個 `.replit` 窗口。 +- 選擇 `Use run command` 並點擊 `Done` 按鈕。 -When you are done, make sure a working demo of your project is hosted somewhere public. Then submit the URL to it in the `Solution Link` field. Optionally, also submit a link to your project's source code in the `GitHub Link` field. +當你完成後，請將一個確保正常運行的 demo（項目演示）託管在可以公開訪問的平臺上。 然後將 demo 的 URL 提交到 `Solution Link` 字段中。 也可以將項目的源碼鏈接提交到 `GitHub Link` 字段中。 # --instructions-- -- All logic can go into `/components/translator.js` -- Complete the `/api/translate` route in `/routes/api.js` -- Create all of the unit/functional tests in `tests/1_unit-tests.js` and `tests/2_functional-tests.js` -- See the JavaScript files in `/components` for the different spelling and terms your application should translate -- To run the tests on Replit, set `NODE_ENV` to `test` without quotes in the `.env` file -- To run the tests in the console, use the command `npm run test`. To open the Replit console, press Ctrl+Shift+P (Cmd if on a Mac) and type "open shell" +- 所有邏輯都可以進入 `/components/translator.js` +- 在 `/routes/api.js` 中完成 `/api/translate` 路由 +- 在 `tests/1_unit-tests.js` 和 `tests/2_functional-tests.js` 中創建所有單元/功能測試 +- 查看 `/components` 中的 JavaScript 文件以獲取應用程序應該翻譯的條款以及不同的拼寫 +- 在 `.env` 文件中將 `NODE_ENV` 設置爲 `test`（沒有引號），在 Replit 上運行測試 +- 使用 `npm run test` 命令在 console 中運行測試。 按 Ctrl+Shift+P（在 Mac 上是 Cmd+Shift+P），並輸入“open shell”，打開 Replit 控制檯 -Write the following tests in `tests/1_unit-tests.js`: +在 `tests/1_unit-tests.js` 中寫下以下測試： -- Translate `Mangoes are my favorite fruit.` to British English -- Translate `I ate yogurt for breakfast.` to British English -- Translate `We had a party at my friend's condo.` to British English -- Translate `Can you toss this in the trashcan for me?` to British English -- Translate `The parking lot was full.` to British English -- Translate `Like a high tech Rube Goldberg machine.` to British English -- Translate `To play hooky means to skip class or work.` to British English -- Translate `No Mr. Bond, I expect you to die.` to British English -- Translate `Dr. Grosh will see you now.` to British English -- Translate `Lunch is at 12:15 today.` to British English -- Translate `We watched the footie match for a while.` to American English -- Translate `Paracetamol takes up to an hour to work.` to American English -- Translate `First, caramelise the onions.` to American English -- Translate `I spent the bank holiday at the funfair.` to American English -- Translate `I had a bicky then went to the chippy.` to American English -- Translate `I've just got bits and bobs in my bum bag.` to American English -- Translate `The car boot sale at Boxted Airfield was called off.` to American English -- Translate `Have you met Mrs Kalyani?` to American English -- Translate `Prof Joyner of King's College, London.` to American English -- Translate `Tea time is usually around 4 or 4.30.` to American English -- Highlight translation in `Mangoes are my favorite fruit.` -- Highlight translation in `I ate yogurt for breakfast.` -- Highlight translation in `We watched the footie match for a while.` -- Highlight translation in `Paracetamol takes up to an hour to work.` +- 將 `Mangoes are my favorite fruit.` 轉換成英式英語 +- 將 `I ate yogurt for breakfast.` 轉換成英式英語 +- 將 `We had a party at my friend's condo.` 轉換成英式英語 +- 將 `Can you toss this in the trashcan for me?` 轉換成英式英語 +- 將 `The parking lot was full.` 轉換成英式英語 +- 將 `Like a high tech Rube Goldberg machine.` 轉換成英式英語 +- 將 `To play hooky means to skip class or work.` 轉換成英式英語 +- 將 `No Mr. Bond, I expect you to die.` 轉換成英式英語 +- 將 `Dr. Grosh will see you now.` 轉換成英式英語 +- 將 `Lunch is at 12:15 today.` 轉換成英式英語 +- 將 `We watched the footie match for a while.` 轉換成美式英語 +- 將 `Paracetamol takes up to an hour to work.` 轉換成美式英語 +- 將 `First, caramelise the onions.` 轉換成美式英語 +- 將 `I spent the bank holiday at the funfair.` 轉換成美式英語 +- 將 `I had a bicky then went to the chippy.` 轉換成美式英語 +- 將 `I've just got bits and bobs in my bum bag.` 轉換成美式英語 +- 將 `The car boot sale at Boxted Airfield was called off.` 轉換成美式英語 +- 將 `Have you met Mrs Kalyani?` 轉換成美式英語 +- 將 `Prof Joyner of King's College, London.` 轉換成美式英語 +- 將 `Tea time is usually around 4 or 4.30.` 轉換成美式英語 +- 將 `Mangoes are my favorite fruit.` 裏的轉換高亮 +- 將 `I ate yogurt for breakfast.` 裏的轉換高亮 +- 將 `We watched the footie match for a while.` 裏的轉換高亮 +- 將 `Paracetamol takes up to an hour to work.` 裏的轉換高亮 -Write the following tests in `tests/2_functional-tests.js`: +在 `tests/2_functional-tests.js` 中編寫下以下測試： -- Translation with text and locale fields: POST request to `/api/translate` -- Translation with text and invalid locale field: POST request to `/api/translate` -- Translation with missing text field: POST request to `/api/translate` -- Translation with missing locale field: POST request to `/api/translate` -- Translation with empty text: POST request to `/api/translate` -- Translation with text that needs no translation: POST request to `/api/translate` +- 翻譯文本字段和本地化字段：POST 請求到 `/api/translate` +- 翻譯文本字段和無效的本地化字段：POST 請求到 `/api/translate` +- 翻譯缺失的文本字段：POST 請求到 `/api/translate` +- 翻譯缺失的本地化字段：POST 請求到 `/api/translate` +- 翻譯空的文本：POST 請求到 `/api/translate` +- 翻譯無需翻譯的文本：POST 請求到 `/api/translate` # --hints-- -I can provide my own project, not the example URL. +You should provide your own project, not the example URL. ```js (getUserInput) => { @@ -81,7 +81,7 @@ I can provide my own project, not the example URL. }; ``` -You can `POST` to `/api/translate` with a body containing `text` with the text to translate and `locale` with either `american-to-british` or `british-to-american`. The returned object should contain the submitted `text` and `translation` with the translated text. +可以向 `/api/translate` 發送 `POST` 請求，對請求體內的 `text` 文本進行翻譯， `locale` 字段可以是 `american-to-british` 或 `british-to-american`。 返回的對象應該包含提交的 `text` 以及翻譯的文本 `translation`。 ```js async (getUserInput) => { @@ -109,7 +109,7 @@ async (getUserInput) => { }; ``` -The `/api/translate` route should handle the way time is written in American and British English. For example, ten thirty is written as "10.30" in British English and "10:30" in American English. The `span` element should wrap the entire time string, i.e. `10:30`. +`/api/translate` 路由應該可以處理用英美方式英語寫的時間。 例如，十點半英式英語寫爲 “10.30”，而美式英語寫爲 “10:30”。 `span` 元素應該包裹整個時間字符串，即 `10:30`。 ```js async (getUserInput) => { @@ -136,7 +136,7 @@ async (getUserInput) => { }; ``` -The `/api/translate` route should also handle the way titles/honorifics are abbreviated in American and British English. For example, Doctor Wright is abbreviated as "Dr Wright" in British English and "Dr. Wright" in American English. See `/components/american-to-british-titles.js` for the different titles your application should handle. +`/api/translate` 路由也應該處理美式英語和英式英語中頭銜/尊稱的縮寫方式。 例如，Doctor Wright 在英式英語中縮寫爲 “Dr Wright”，在美式英語中縮寫爲 “Dr. Wright"”。 請參閱 `/components/american-to-british-titles.js`，瞭解程序應當處理的不同標題。 ```js async (getUserInput) => { @@ -163,7 +163,7 @@ async (getUserInput) => { }; ``` -Wrap any translated spelling or terms with `...` tags so they appear in green. +將任何翻譯過的拼寫或條目放在 `...` 標籤內以使其顯示爲綠色。 ```js async (getUserInput) => { @@ -191,7 +191,7 @@ async (getUserInput) => { }; ``` -If one or more of the required fields is missing, return `{ error: 'Required field(s) missing' }`. +如果缺少一個或多個必填字段，返回 `{ error: 'Required field(s) missing' }`。 ```js async (getUserInput) => { @@ -212,7 +212,7 @@ async (getUserInput) => { }; ``` -If `text` is empty, return `{ error: 'No text to translate' }` +如果 `text` 爲空，返回 `{ error: 'No text to translate' }`。 ```js async (getUserInput) => { @@ -233,7 +233,7 @@ async (getUserInput) => { }; ``` -If `locale` does not match one of the two specified locales, return `{ error: 'Invalid value for locale field' }`. +如果 `locale` 與兩個指定的 locales 都不匹配，返回 `{ error: 'Invalid value for locale field' }`。 ```js async (getUserInput) => { @@ -255,7 +255,7 @@ async (getUserInput) => { }; ``` -If `text` requires no translation, return `"Everything looks good to me!"` for the `translation` value. +如果 `text` 不需要翻譯，返回的 `translation` 值爲`"Everything looks good to me!"`。 ```js async (getUserInput) => { @@ -282,7 +282,7 @@ async (getUserInput) => { }; ``` -All 24 unit tests are complete and passing. See `/tests/1_unit-tests.js` for the expected behavior you should write tests for. +所有 24 項單元測試都已完成並通過。 請參閱 `/tests/1_unit-tests.js` 來了解你應該寫的測試的預期行爲。 ```js async (getUserInput) => { @@ -307,7 +307,7 @@ async (getUserInput) => { }; ``` -All 6 functional tests are complete and passing. See `/tests/2_functional-tests.js` for the functionality you should write tests for. +所有 6 項功能測試都已完成並通過。 請參閱 `/tests/2_functional-tests.js` 來了解你應該編寫的測試的功能。 ```js async (getUserInput) => { diff --git a/curriculum/challenges/chinese-traditional/06-quality-assurance/quality-assurance-projects/issue-tracker.md b/curriculum/challenges/chinese-traditional/06-quality-assurance/quality-assurance-projects/issue-tracker.md index fdc99b4cfd7..6c533b5f4bb 100644 --- a/curriculum/challenges/chinese-traditional/06-quality-assurance/quality-assurance-projects/issue-tracker.md +++ b/curriculum/challenges/chinese-traditional/06-quality-assurance/quality-assurance-projects/issue-tracker.md @@ -14,42 +14,42 @@ dashedName: issue-tracker - 使用我們的 Replit 初始化項目來完成你的項目。 - 使用一個你喜歡的站點生成器來完成項目。 需要確定包含了我們 GitHub 倉庫的所有文件。 -If you use Replit, follow these steps to set up the project: +如果你使用 Replit，請按照以下步驟設置項目： -- Start by importing the project on Replit. -- Next, you will see a `.replit` window. -- Select `Use run command` and click the `Done` button. +- 首先在 Replit 中導入項目。 +- 接着，你將看到一個 `.replit` 窗口。 +- 選擇 `Use run command` 並點擊 `Done` 按鈕。 -When you are done, make sure a working demo of your project is hosted somewhere public. Then submit the URL to it in the `Solution Link` field. Optionally, also submit a link to your project's source code in the `GitHub Link` field. +當你完成後，請將一個確保正常運行的 demo（項目演示）託管在可以公開訪問的平臺上。 然後將 demo 的 URL 提交到 `Solution Link` 字段中。 也可以將項目的源碼鏈接提交到 `GitHub Link` 字段中。 # --instructions-- -- Complete the necessary routes in `/routes/api.js` -- Create all of the functional tests in `tests/2_functional-tests.js` -- Copy the `sample.env` file to `.env` and set the variables appropriately -- To run the tests uncomment `NODE_ENV=test` in your `.env` file -- To run the tests in the console, use the command `npm run test`. To open the Replit console, press Ctrl+Shift+P (Cmd if on a Mac) and type "open shell" +- 在 `/routes/api.js` 中完成必要的路由 +- 在 `tests/2_functional-tests.js` 中創建所有的功能測試 +- 複製 `sample.env` 文件到 `.env` 並按需設置變量 +- 在 `.env` 文件中取消註釋 `NODE_ENV=test` 來運行測試 +- 使用 `npm run test` 命令在 console 中運行測試。 按 Ctrl+Shift+P（在 Mac 上是 Cmd+Shift+P），並輸入“open shell”，打開 Replit 控制檯 -Write the following tests in `tests/2_functional-tests.js`: +在 `tests/2_functional-tests.js` 中編寫下以下測試： -- Create an issue with every field: POST request to `/api/issues/{project}` -- Create an issue with only required fields: POST request to `/api/issues/{project}` -- Create an issue with missing required fields: POST request to `/api/issues/{project}` -- View issues on a project: GET request to `/api/issues/{project}` -- View issues on a project with one filter: GET request to `/api/issues/{project}` -- View issues on a project with multiple filters: GET request to `/api/issues/{project}` -- Update one field on an issue: PUT request to `/api/issues/{project}` -- Update multiple fields on an issue: PUT request to `/api/issues/{project}` -- Update an issue with missing `_id`: PUT request to `/api/issues/{project}` -- Update an issue with no fields to update: PUT request to `/api/issues/{project}` -- Update an issue with an invalid `_id`: PUT request to `/api/issues/{project}` -- Delete an issue: DELETE request to `/api/issues/{project}` -- Delete an issue with an invalid `_id`: DELETE request to `/api/issues/{project}` -- Delete an issue with missing `_id`: DELETE request to `/api/issues/{project}` +- 用所有字段創建 issue：POST 請求到 `/api/issues/{project}` +- 用必填字段創建 issue：POST 請求到 `/api/issues/{project}` +- 用缺失必填字段創建 issue：POST 請求到 `/api/issues/{project}` +- 查看項目裏的 issue：GET 請求到 `/api/issues/{project}` +- 用 filter 過濾 project 裏的 issue：GET 請求到 `/api/issues/{project}` +- 用多個 filter 過濾 project 裏的 issue：GET 請求到 `/api/issues/{project}` +- 更新 issue 裏的一個字段：PUT 請求到 `/api/issues/{project}` +- 更新 issue 裏的多個字段：PUT 請求到 `/api/issues/{project}` +- 在缺少 `_id` 字段的情況下更新 issue：PUT 請求到 `/api/issues/{project}` +- 在沒有字段更新的情況下更新 issue：PUT 請求到 `/api/issues/{project}` +- 傳入一個無效的 `_id` 來更新 issue：PUT 請求到 `/api/issues/{project}` +- 刪除一個 issue：DELETE 請求到 `/api/issues/{project}` +- 傳入一個無效的 `_id` 來刪除 issue：DELETE 請求到 `/api/issues/{project}` +- 在缺失 `_id` 的情況下來刪除 issue：DELETE 請求到 `/api/issues/{project}` # --hints-- -You can provide your own project, not the example URL. +你可以提交你自己的項目，而不是示例的 URL。 ```js (getUserInput) => { @@ -57,7 +57,7 @@ You can provide your own project, not the example URL. }; ``` -You can send a `POST` request to `/api/issues/{projectname}` with form data containing the required fields `issue_title`, `issue_text`, `created_by`, and optionally `assigned_to` and `status_text`. +你可以發送 `POST` 請求到 `/api/issues/{projectname}`，表單數據包含必填字段 `issue_title`、`issue_text`、`created_by` 和可選字段 `assigned_to` 以及 `status_text`。 ```js async (getUserInput) => { @@ -79,7 +79,7 @@ async (getUserInput) => { }; ``` -The `POST` request to `/api/issues/{projectname}` will return the created object, and must include all of the submitted fields. Excluded optional fields will be returned as empty strings. Additionally, include `created_on` (date/time), `updated_on` (date/time), `open` (boolean, `true` for open - default value, `false` for closed), and `_id`. +`POST` 請求到 `/api/issues/{projectname}` 將返回創建的對象，必須包含所有提交的全部字段。 如果沒有填選填字段將作爲空字符串返回。 此外，包含 `created_on`（日期/時間）、`updated_on`（日期/時間）、`open`（布爾型，`true` 用於打開 - 默認值， `false` 用於關閉）、`_id`。 ```js async (getUserInput) => { @@ -113,7 +113,7 @@ async (getUserInput) => { }; ``` -If you send a `POST` request to `/api/issues/{projectname}` without the required fields, returned will be the error `{ error: 'required field(s) missing' }` +如果你發送一個 `POST` 請求到 `/api/issues/{projectname}`，並且缺少必要的字段，將返回錯誤 `{ error: 'required field(s) missing' }`。 ```js async (getUserInput) => { @@ -131,7 +131,7 @@ async (getUserInput) => { }; ``` -You can send a `GET` request to `/api/issues/{projectname}` for an array of all issues for that specific `projectname`, with all the fields present for each issue. +你可以發送一個 `GET` 請求到 `/api/issues/{projectname}` 請求所有指定 `projectname` 的 issues 數組，會展示每個 issue 的所有字段。 ```js async (getUserInput) => { @@ -178,7 +178,7 @@ async (getUserInput) => { }; ``` -You can send a `GET` request to `/api/issues/{projectname}` and filter the request by also passing along any field and value as a URL query (ie. `/api/issues/{project}?open=false`). You can pass one or more field/value pairs at once. +你可以發送一個 `GET` 請求到 `/api/issues/{projectname}`，通過 URL 查詢傳入字段名和值過濾請求（如，`/api/issues/{project}?open=false`）。 你可以一次傳入一個或多個字段/值對。 ```js async (getUserInput) => { @@ -219,7 +219,7 @@ async (getUserInput) => { }; ``` -You can send a `PUT` request to `/api/issues/{projectname}` with an `_id` and one or more fields to update. On success, the `updated_on` field should be updated, and returned should be `{ result: 'successfully updated', '_id': _id }`. +你可以發送一個 `PUT` 請求到 `/api/issues/{projectname}`，帶有一個 `_id` 以及一個或多個字段進行更新。 成功後，`updated_on` field 應該被更新，返回的應該是 `{ result: 'successfully updated', '_id': _id }`。 ```js async (getUserInput) => { @@ -254,7 +254,7 @@ async (getUserInput) => { }; ``` -When the `PUT` request sent to `/api/issues/{projectname}` does not include an `_id`, the return value is `{ error: 'missing _id' }`. +當 `PUT` 請求發送給 `/api/issues/{projectname}` 的請求體不包含 `_id` 時，應返回`{ error: 'missing _id' }`。 ```js async (getUserInput) => { @@ -270,7 +270,7 @@ async (getUserInput) => { }; ``` -When the `PUT` request sent to `/api/issues/{projectname}` does not include update fields, the return value is `{ error: 'no update field(s) sent', '_id': _id }`. On any other error, the return value is `{ error: 'could not update', '_id': _id }`. +當 `PUT` 請求發送給 `/api/issues/{projectname}` 的請求體不包含任何更新的字段，應返回 `{ error: 'no update field(s) sent', '_id': _id }`。 在任何其他錯誤，應返回 `{ error: 'could not update', '_id': _id }`。 ```js async (getUserInput) => { @@ -300,7 +300,7 @@ async (getUserInput) => { }; ``` -You can send a `DELETE` request to `/api/issues/{projectname}` with an `_id` to delete an issue. If no `_id` is sent, the return value is `{ error: 'missing _id' }`. On success, the return value is `{ result: 'successfully deleted', '_id': _id }`. On failure, the return value is `{ error: 'could not delete', '_id': _id }`. +你可以發送一個 `DELETE` 請求到 `/api/issues/{projectname}`，帶有一個 `_id` 來刪除 issue。 如果沒有發送 `_id`，返回值爲 `{ error: 'missing _id' }`。 成功後，返回值爲 `{ result: 'successfully deleted', '_id': _id }`。 失敗時，返回值爲 `{ error: 'could not delete', '_id': _id }`。 ```js async (getUserInput) => { @@ -342,7 +342,7 @@ async (getUserInput) => { }; ``` -All 14 functional tests are complete and passing. +所有 14 項功能測試都已完成並通過。 ```js async (getUserInput) => { diff --git a/curriculum/challenges/chinese-traditional/06-quality-assurance/quality-assurance-projects/metric-imperial-converter.md b/curriculum/challenges/chinese-traditional/06-quality-assurance/quality-assurance-projects/metric-imperial-converter.md index 773ab117491..36d165e75cc 100644 --- a/curriculum/challenges/chinese-traditional/06-quality-assurance/quality-assurance-projects/metric-imperial-converter.md +++ b/curriculum/challenges/chinese-traditional/06-quality-assurance/quality-assurance-projects/metric-imperial-converter.md @@ -14,52 +14,52 @@ dashedName: metric-imperial-converter - 使用我們在 Replit 上的初始化項目來完成你的項目。 - 使用一個你喜歡的站點生成器來完成項目。 需要確定包含了我們 GitHub 倉庫的所有文件。 -If you use Replit, follow these steps to set up the project: +如果你使用 Replit，請按照以下步驟設置項目： -- Start by importing the project on Replit. -- Next, you will see a `.replit` window. -- Select `Use run command` and click the `Done` button. +- 首先在 Replit 中導入項目。 +- 接着，你將看到一個 `.replit` 窗口。 +- 選擇 `Use run command` 並點擊 `Done` 按鈕。 -When you are done, make sure a working demo of your project is hosted somewhere public. Then submit the URL to it in the `Solution Link` field. Optionally, also submit a link to your project's source code in the `GitHub Link` field. +當你完成後，請將一個確保正常運行的 demo（項目演示）託管在可以公開訪問的平臺上。 然後將 demo 的 URL 提交到 `Solution Link` 字段中。 也可以將項目的源碼鏈接提交到 `GitHub Link` 字段中。 # --instructions-- -- Complete the necessary conversion logic in `/controllers/convertHandler.js` -- Complete the necessary routes in `/routes/api.js` -- Copy the `sample.env` file to `.env` and set the variables appropriately -- To run the tests uncomment `NODE_ENV=test` in your `.env` file -- To run the tests in the console, use the command `npm run test`. To open the Replit console, press Ctrl+Shift+P (Cmd if on a Mac) and type "open shell" +- 在 `/controllers/convertHandler.js` 中完成必要的轉換邏輯 +- 在 `/routes/api.js` 中完成必要的路由 +- 複製 `sample.env` 文件到 `.env` 並按需設置變量 +- 在 `.env` 文件中取消註釋 `NODE_ENV=test` 來運行測試 +- 使用 `npm run test` 命令在 console 中運行測試。 按 Ctrl+Shift+P（在 Mac 上是 Cmd+Shift+P），並輸入“open shell”，打開 Replit 控制檯 -Write the following tests in `tests/1_unit-tests.js`: +在 `tests/1_unit-tests.js` 中寫下以下測試： -- `convertHandler` should correctly read a whole number input. -- `convertHandler` should correctly read a decimal number input. -- `convertHandler` should correctly read a fractional input. -- `convertHandler` should correctly read a fractional input with a decimal. -- `convertHandler` should correctly return an error on a double-fraction (i.e. `3/2/3`). -- `convertHandler` should correctly default to a numerical input of `1` when no numerical input is provided. -- `convertHandler` should correctly read each valid input unit. -- `convertHandler` should correctly return an error for an invalid input unit. -- `convertHandler` should return the correct return unit for each valid input unit. -- `convertHandler` should correctly return the spelled-out string unit for each valid input unit. -- `convertHandler` should correctly convert `gal` to `L`. -- `convertHandler` should correctly convert `L` to `gal`. -- `convertHandler` should correctly convert `mi` to `km`. -- `convertHandler` should correctly convert `km` to `mi`. -- `convertHandler` should correctly convert `lbs` to `kg`. -- `convertHandler` should correctly convert `kg` to `lbs`. +- `convertHandler` 應該正確地讀取整個數字輸入。 +- `convertHandler` 應該正確地讀取一個十進制數字輸入。 +- `convertHandler` 應該正確地讀取一個分數輸入。 +- `convertHandler` 應該正確地讀取一個帶小數點的分數輸入。 +- `convertHandler` 當輸入雙分數時應該返回錯誤（`3/2/3`）。 +- `convertHandler` 在沒有提供數字輸入時應該默認爲 `1`。 +- `convertHandler` 應該正確地讀取每個有效的單位輸入。 +- `convertHandler` 在輸入無效單位時應返回錯誤。 +- `convertHandler` 在輸入有效單位時應返回正確的單位。 +- `convertHandler` 應該正確返回每個有效輸入單位的拼寫字符串。 +- `convertHandler` 應該正確地將 `gal` 轉換爲 `L`。 +- `convertHandler` 應該正確地將 `L` 轉換爲 `gal`。 +- `convertHandler` 應該正確地將 `mi` 轉換爲 `km`。 +- `convertHandler` 應該正確地將 `km` 轉換爲 `mi`。 +- `convertHandler` 應該正確地將 `lbs` 轉換爲 `kg`。 +- `convertHandler` 應該正確地將 `kg` 轉換爲 `lbs`。 -Write the following tests in `tests/2_functional-tests.js`: +在 `tests/2_functional-tests.js` 中編寫下以下測試： -- Convert a valid input such as `10L`: `GET` request to `/api/convert`. -- Convert an invalid input such as `32g`: `GET` request to `/api/convert`. -- Convert an invalid number such as `3/7.2/4kg`: `GET` request to `/api/convert`. -- Convert an invalid number AND unit such as `3/7.2/4kilomegagram`: `GET` request to `/api/convert`. -- Convert with no number such as `kg`: `GET` request to `/api/convert`. +- 轉換一個有效的輸入例如 `10L`：`GET` 請求到 `/api/convert`。 +- 轉換一個無效的輸入例如 `32g`：`GET` 請求到 `/api/convert`。 +- 轉換一個無效的數字例如 `3/7.2/4kg`：`GET` 請求到 `/api/convert`。 +- 轉換一個無效的數字和單位例如 `3/7.2/4kilomegagram`：`GET` 請求到 `/api/convert`。 +- 轉換時沒有數字，例如 `kg`：`GET` 請求到 `/api/convert`。 # --hints-- -You can provide your own project, not the example URL. +你可以提交你自己的項目，而不是示例的 URL。 ```js getUserInput => { @@ -71,13 +71,13 @@ getUserInput => { }; ``` -You can `GET` `/api/convert` with a single parameter containing an accepted number and unit and have it converted. (Hint: Split the input by looking for the index of the first character which will mark the start of the unit) +通過 `GET` 請求 `/api/convert`，傳入數字和單位的單個參數，可以將其轉換。 （提示：通過尋找第一個字符的索引來分割輸入，這將標記單位的開始） ```js ``` -You can convert `'gal'` to `'L'` and vice versa. (1 gal to 3.78541 L) +你可以將 `'gal'` 轉換爲 `'L'`，反之亦然。 （1 gal 轉換爲 3.78541 L） ```js async getUserInput => { @@ -100,7 +100,7 @@ async getUserInput => { }; ``` -You can convert `'lbs'` to `'kg'` and vice versa. (1 lbs to 0.453592 kg) +你可以將 `'lbs'` 轉換爲 `'kg'`，反之亦然。 （1 lbs 轉換爲 0.453592 kg） ```js async getUserInput => { @@ -123,7 +123,7 @@ async getUserInput => { }; ``` -You can convert `'mi'` to `'km'` and vice versa. (1 mi to 1.60934 km) +你可以將 `'mi'` 轉換爲 `'km'` 反之亦然。 （1 mi 轉換爲 1.60934 km） ```js async getUserInput => { @@ -146,7 +146,7 @@ async getUserInput => { }; ``` -All incoming units should be accepted in both upper and lower case, but should be returned in both the `initUnit` and `returnUnit` in lower case, except for liter, which should be represented as an uppercase `'L'`. +所有輸入單位以大寫和小寫形式都應該被接受，但在 `initUnit` 和 `returnUnit` 中應以小寫形式返回，升除外，應將其表示爲大寫的 `'L'`。 ```js async getUserInput => { @@ -169,7 +169,7 @@ async getUserInput => { }; ``` -If the unit of measurement is invalid, returned will be `'invalid unit'`. +如果測量單位無效，返回將爲 `'invalid unit'`。 ```js async getUserInput => { @@ -182,7 +182,7 @@ async getUserInput => { }; ``` -If the number is invalid, returned will be `'invalid number'`. +如果數字無效，返回將爲 `'invalid number'`。 ```js async getUserInput => { @@ -197,7 +197,7 @@ async getUserInput => { }; ``` -If both the unit and number are invalid, returned will be `'invalid number and unit'`. +如果單位和數字都無效，返回將爲 `'invalid number and unit'`。 ```js async getUserInput => { @@ -215,7 +215,7 @@ async getUserInput => { }; ``` -You can use fractions, decimals or both in the parameter (ie. 5, 1/2, 2.5/6), but if nothing is provided it will default to 1. +你可以在參數中使用分數、小數或小數分數（例如 5、1/2、2.5/6），如果沒有提供任何內容，則默認值爲 1。 ```js async getUserInput => { @@ -246,7 +246,7 @@ async getUserInput => { }; ``` -Your return will consist of the `initNum`, `initUnit`, `returnNum`, `returnUnit`, and `string` spelling out units in the format `'{initNum} {initUnitString} converts to {returnNum} {returnUnitString}'` with the result rounded to 5 decimals. +你的返回將包含 `initNum`、`initUnit`、`returnNum`、`returnUnit` 和 `string` 拼寫單位格式 `'{initNum} {initUnitString} converts to {returnNum} {returnUnitString}'`，結果四捨五入爲 5 位小數。 ```js async getUserInput => { @@ -263,7 +263,7 @@ async getUserInput => { }; ``` -All 16 unit tests are complete and passing. +所有 16 項單元測試都已完成並通過。 ```js async getUserInput => { @@ -288,7 +288,7 @@ async getUserInput => { }; ``` -All 5 functional tests are complete and passing. +所有 5 項功能測試都已完成並通過。 ```js async getUserInput => { diff --git a/curriculum/challenges/chinese-traditional/06-quality-assurance/quality-assurance-projects/personal-library.md b/curriculum/challenges/chinese-traditional/06-quality-assurance/quality-assurance-projects/personal-library.md index e3cf4bf10ed..12e5df1a092 100644 --- a/curriculum/challenges/chinese-traditional/06-quality-assurance/quality-assurance-projects/personal-library.md +++ b/curriculum/challenges/chinese-traditional/06-quality-assurance/quality-assurance-projects/personal-library.md @@ -14,13 +14,13 @@ dashedName: personal-library - 使用我們在 Replit 上的初始化項目來完成你的項目 - 使用一個你喜歡的站點生成器來完成項目。 需要確定包含了我們 GitHub 倉庫的所有文件。 -If you use Replit, follow these steps to set up the project: +如果你使用 Replit，請按照以下步驟設置項目： -- Start by importing the project on Replit. -- Next, you will see a `.replit` window. -- Select `Use run command` and click the `Done` button. +- 首先在 Replit 中導入項目。 +- 接着，你將看到一個 `.replit` 窗口。 +- 選擇 `Use run command` 並點擊 `Done` 按鈕。 -When you are done, make sure a working demo of your project is hosted somewhere public. Then submit the URL to it in the `Solution Link` field. Optionally, also submit a link to your project's source code in the `GitHub Link` field. +當你完成後，請將一個確保正常運行的 demo（項目演示）託管在可以公開訪問的平臺上。 然後將 demo 的 URL 提交到 `Solution Link` 字段中。 也可以將項目的源碼鏈接提交到 `GitHub Link` 字段中。 # --instructions-- @@ -31,7 +31,7 @@ When you are done, make sure a working demo of your project is hosted somewhere # --hints-- -You can provide your own project, not the example URL. +你可以提交你自己的項目，而不是示例的 URL。 ```js (getUserInput) => { @@ -41,7 +41,7 @@ You can provide your own project, not the example URL. }; ``` -You can send a POST request to `/api/books` with `title` as part of the form data to add a book. The returned response will be an object with the `title` and a unique `_id` as keys. If `title` is not included in the request, the returned response should be the string `missing required field title`. +可以發送 POST 請求到 `/api/books`，帶有 `title` 作爲表單數據的一部分，來添加一本書。 返回的響應將是一個包含 `title` 和唯一的 `_id` 作爲鍵的對象。 如果 `title` 未包含在請求中，返回的響應應該是字符串 `missing required field title`。 ```js async (getUserInput) => { @@ -62,7 +62,7 @@ async (getUserInput) => { }; ``` -You can send a GET request to `/api/books` and receive a JSON response representing all the books. The JSON response will be an array of objects with each object (book) containing `title`, `_id`, and `commentcount` properties. +你可以向 `/api/books` 發送 GET 請求，並返回代表所有書的 JSON 響應。 JSON 響應應該是一個對象數組，每個對象（書）包含 `title`、`_id` 和 `commentcount` 屬性。 ```js async (getUserInput) => { @@ -90,7 +90,7 @@ async (getUserInput) => { }; ``` -You can send a GET request to `/api/books/{_id}` to retrieve a single object of a book containing the properties `title`, `_id`, and a `comments` array (empty array if no comments present). If no book is found, return the string `no book exists`. +你可以發送 GET 請求到 `/api/books/{_id}` 來檢索一本書的單個對象，返回屬性 `title`、`_id` 和 `comments` 數組（如果沒有評論，則展示空數組）。 如果找不到書，返回字符串 `no book exists`。 ```js async (getUserInput) => { @@ -114,7 +114,7 @@ async (getUserInput) => { }; ``` -You can send a POST request containing `comment` as the form body data to `/api/books/{_id}` to add a comment to a book. The returned response will be the books object similar to GET `/api/books/{_id}` request in an earlier test. If `comment` is not included in the request, return the string `missing required field comment`. If no book is found, return the string `no book exists`. +你可以發送一個 POST 請求，其中包含 `comment` 作爲表單正文數據，請求到 `/api/books/{_id}` 以便將評論添加到書中。 返回的響應將是書對象，與先前測試中 GET `/api/books/{_id}` 請求類似。 如果請求中沒有包含 `comment`，返回字符串 `missing required field comment`。 如果找不到書，返回字符串 `no book exists`。 ```js async (getUserInput) => { @@ -152,7 +152,7 @@ async (getUserInput) => { }; ``` -You can send a DELETE request to `/api/books/{_id}` to delete a book from the collection. The returned response will be the string `delete successful` if successful. If no book is found, return the string `no book exists`. +你可以向 `/api/books/{_id}` 發送 DELETE 請求，從收藏中刪除一本書。 如果成功，返回的響應將是字符串 `delete successful`。 如果找不到書，返回字符串 `no book exists`。 ```js async (getUserInput) => { @@ -176,7 +176,7 @@ async (getUserInput) => { }; ``` -You can send a DELETE request to `/api/books` to delete all books in the database. The returned response will be the string `complete delete successful` if successful. +你可以向 `/api/books` 發送 DELETE 請求來刪除數據庫中的所有書籍。 如果成功，返回的響應將是字符串 `complete delete successful`。 ```js async (getUserInput) => { @@ -193,7 +193,7 @@ async (getUserInput) => { }; ``` -All 10 functional tests required are complete and passing. +所有 10 項功能測試都已完成並通過。 ```js async (getUserInput) => { diff --git a/curriculum/challenges/chinese-traditional/06-quality-assurance/quality-assurance-projects/sudoku-solver.md b/curriculum/challenges/chinese-traditional/06-quality-assurance/quality-assurance-projects/sudoku-solver.md index d1cfa9da206..89852b56693 100644 --- a/curriculum/challenges/chinese-traditional/06-quality-assurance/quality-assurance-projects/sudoku-solver.md +++ b/curriculum/challenges/chinese-traditional/06-quality-assurance/quality-assurance-projects/sudoku-solver.md @@ -14,60 +14,60 @@ dashedName: sudoku-solver - 使用我們在 Replit 上的初始化項目來完成你的項目。 - 使用一個你喜歡的站點生成器來完成項目。 需要確定包含了我們 GitHub 倉庫的所有文件。 -If you use Replit, follow these steps to set up the project: +如果你使用 Replit，請按照以下步驟設置項目： -- Start by importing the project on Replit. -- Next, you will see a `.replit` window. -- Select `Use run command` and click the `Done` button. +- 首先在 Replit 中導入項目。 +- 接着，你將看到一個 `.replit` 窗口。 +- 選擇 `Use run command` 並點擊 `Done` 按鈕。 -When you are done, make sure a working demo of your project is hosted somewhere public. Then submit the URL to it in the `Solution Link` field. Optionally, also submit a link to your project's source code in the `GitHub Link` field. +當你完成後，請將一個確保正常運行的 demo（項目演示）託管在可以公開訪問的平臺上。 然後將 demo 的 URL 提交到 `Solution Link` 字段中。 也可以將項目的源碼鏈接提交到 `GitHub Link` 字段中。 # --instructions-- -- All puzzle logic can go into `/controllers/sudoku-solver.js` - - The `validate` function should take a given puzzle string and check it to see if it has 81 valid characters for the input. - - The `check` functions should be validating against the *current* state of the board. - - The `solve` function should handle solving any given valid puzzle string, not just the test inputs and solutions. You are expected to write out the logic to solve this. -- All routing logic can go into `/routes/api.js` -- See the `puzzle-strings.js` file in `/controllers` for some sample puzzles your application should solve -- To run the challenge tests on this page, set `NODE_ENV` to `test` without quotes in the `.env` file -- To run the tests in the console, use the command `npm run test`. To open the Replit console, press Ctrl+Shift+P (Cmd if on a Mac) and type "open shell" +- 所有解謎邏輯都可以進入 `/controllers/sudoku-solver.js` + - `validate` 函數應該使用給定的解謎字符串，然後檢查它是否是 81 個有效的輸入字符。 + - `check` 函數應對棋盤的 *current* 進行驗證。 + - `solve` 函數應該處理任何給定的解謎字符串，而不僅僅是測試輸入和解決方法。 你需要寫出解決這個問題的邏輯。 +- 所有路由邏輯都可以進入 `/routes/api.js` +- 閱讀 `/controllers` 中的 `puzzle-strings.js` 文件來了解一些應用程序應該解決的示例謎題 +- 在 `.env` 文件中將 `NODE_ENV` 設置爲 `test` （沒有引號），運行這個頁面的挑戰測試。 +- 使用 `npm run test` 命令在 console 中運行測試。 按 Ctrl+Shift+P（在 Mac 上是 Cmd+Shift+P），並輸入 “open shell”，打開 Replit 控制檯 -Write the following tests in `tests/1_unit-tests.js`: +在 `tests/1_unit-tests.js` 中寫下以下測試： -- Logic handles a valid puzzle string of 81 characters -- Logic handles a puzzle string with invalid characters (not 1-9 or `.`) -- Logic handles a puzzle string that is not 81 characters in length -- Logic handles a valid row placement -- Logic handles an invalid row placement -- Logic handles a valid column placement -- Logic handles an invalid column placement -- Logic handles a valid region (3x3 grid) placement -- Logic handles an invalid region (3x3 grid) placement -- Valid puzzle strings pass the solver -- Invalid puzzle strings fail the solver -- Solver returns the expected solution for an incomplete puzzle +- 邏輯處理 81 個字符的解謎字符串 +- 邏輯處理無效的解謎字符串（不是 1-9 或 `.`） +- 邏輯處理一個長度不是 81 個字符的解謎字符串 +- 邏輯處理有效行的位置 +- 邏輯處理無效行的位置 +- 邏輯處理有效列的位置 +- 邏輯處理無效列的位置 +- 邏輯處理一個有效的區域（3x3 網格） +- 邏輯處理一個無效的區域（3x3 網格） +- 有效解謎字符串通過 solver +- 無效解謎字符串無法通過 solver +- Solver 返回一個不完整謎題的的預期解決方案 -Write the following tests in `tests/2_functional-tests.js` +在 `tests/2_functional-tests.js` 中編寫下以下測試： -- Solve a puzzle with valid puzzle string: POST request to `/api/solve` -- Solve a puzzle with missing puzzle string: POST request to `/api/solve` -- Solve a puzzle with invalid characters: POST request to `/api/solve` -- Solve a puzzle with incorrect length: POST request to `/api/solve` -- Solve a puzzle that cannot be solved: POST request to `/api/solve` -- Check a puzzle placement with all fields: POST request to `/api/check` -- Check a puzzle placement with single placement conflict: POST request to `/api/check` -- Check a puzzle placement with multiple placement conflicts: POST request to `/api/check` -- Check a puzzle placement with all placement conflicts: POST request to `/api/check` -- Check a puzzle placement with missing required fields: POST request to `/api/check` -- Check a puzzle placement with invalid characters: POST request to `/api/check` -- Check a puzzle placement with incorrect length: POST request to `/api/check` -- Check a puzzle placement with invalid placement coordinate: POST request to `/api/check` -- Check a puzzle placement with invalid placement value: POST request to `/api/check` +- 用有效的解謎字符串解決一個謎題：POST 請求到 `/api/solve` +- 用缺失的解謎字符串解決一個謎題：POST 請求到 `/api/solve` +- 用無效字符解決一個謎題：POST 請求到 `/api/solve` +- 用不正確的長度解決一個謎題：POST 請求到 `/api/solve` +- 解決一個無法解決的謎題：POST 請求到 `/api/solve` +- 檢查所有字段的解謎位置：POST 請求到 `/api/check` +- 用單個位置衝突檢查解謎位置：POST 請求到 `/api/check` +- 檢查一個有多個位置衝突的解謎位置：POST 請求到 `/api/check` +- 檢查與所有位置衝突的解謎位置：POST 請求到 `/api/check` +- 檢查缺失所需字段的解謎位置：POST 請求到 `/api/check` +- 檢查一個有無效字符的解謎位置：POST 請求到 `/api/check` +- 檢查不正確長度的解謎位置：POST 請求到 `/api/check` +- 檢查一個無效的放置座標的解謎位置：POST 請求到 `/api/check` +- 檢查具有無效的放置值的解謎位置：POST 請求到 `/api/check` # --hints-- -You should provide your own project, not the example URL. +你應該提交自己的項目，而不是示例的 URL。 ```js (getUserInput) => { @@ -76,7 +76,7 @@ You should provide your own project, not the example URL. }; ``` -You can `POST` `/api/solve` with form data containing `puzzle` which will be a string containing a combination of numbers (1-9) and periods `.` to represent empty spaces. The returned object will contain a `solution` property with the solved puzzle. +你可以發送 `POST` 請求到 `/api/solve`，使用包含 `puzzle` 的表單數據，這將是一個包含數字（1-9）和點號的字符串組合，`.` 表示空格。 返回的對象將包含一個 `solution` 屬性與解決的謎題。 ```js async (getUserInput) => { @@ -95,7 +95,7 @@ async (getUserInput) => { }; ``` -If the object submitted to `/api/solve` is missing `puzzle`, the returned value will be `{ error: 'Required field missing' }` +如果提交給 `/api/solve` 的對象缺失 `puzzle`，返回的值將是 `{ error: 'Required field missing' }`。 ```js async (getUserInput) => { @@ -113,7 +113,7 @@ async (getUserInput) => { }; ``` -If the puzzle submitted to `/api/solve` contains values which are not numbers or periods, the returned value will be `{ error: 'Invalid characters in puzzle' }` +如果提交給 `/api/solve` 謎題包含非數字或點號的值，返回的值將是 `{ error: 'Invalid characters in puzzle' }`。 ```js async (getUserInput) => { @@ -131,7 +131,7 @@ async (getUserInput) => { }; ``` -If the puzzle submitted to `/api/solve` is greater or less than 81 characters, the returned value will be `{ error: 'Expected puzzle to be 81 characters long' }` +如果提交給 `/api/solve` 的謎題大於或小於 81 個字符，返回的值將是 `{ error: 'Expected puzzle to be 81 characters long' }`。 ```js async (getUserInput) => { @@ -153,7 +153,7 @@ async (getUserInput) => { }; ``` -If the puzzle submitted to `/api/solve` is invalid or cannot be solved, the returned value will be `{ error: 'Puzzle cannot be solved' }` +如果提交給 `/api/solve` 的謎題無效或無法解決，返回的值將是 `{ error: 'Puzzle cannot be solved' }`。 ```js async (getUserInput) => { @@ -171,7 +171,7 @@ async (getUserInput) => { }; ``` -You can `POST` to `/api/check` an object containing `puzzle`, `coordinate`, and `value` where the `coordinate` is the letter A-I indicating the row, followed by a number 1-9 indicating the column, and `value` is a number from 1-9. +你可以發送 `POST` 請求到 `/api/check`，包含 `puzzle`、`coordinate` 和 `value` 的對象，其中 `coordinate` 是表示行的字母 A-I，後跟表示列的數字 1-9，而 `value` 是 1-9 的數字。 ```js async (getUserInput) => { @@ -190,7 +190,7 @@ async (getUserInput) => { }; ``` -The return value from the `POST` to `/api/check` will be an object containing a `valid` property, which is `true` if the number may be placed at the provided coordinate and `false` if the number may not. If false, the returned object will also contain a `conflict` property which is an array containing the strings `"row"`, `"column"`, and/or `"region"` depending on which makes the placement invalid. +發送 `POST` 請求到 `/api/check`，返回值是一個包含 `valid` 屬性的對象，如果數字可能放置在提供的座標中則是 `true`，否則是 `false`。 如果錯誤，返回的對象還將包含一個 `conflict` 屬性，它是一個字符串 `"row"`、`"column"`，和/或 取決於哪個區域使位置無效的 `"region"` 。 ```js async (getUserInput) => { @@ -213,7 +213,7 @@ async (getUserInput) => { }; ``` -If `value` submitted to `/api/check` is already placed in `puzzle` on that `coordinate`, the returned value will be an object containing a `valid` property with `true` if `value` is not conflicting. +如果提交給 `/api/check` 的 `value` 已放置在該 `coordinate` 上的 `puzzle`中，如果 `value` 不衝突，則返回的是 `valid` 屬性爲 `true` 的對象。 ```js async (getUserInput) => { @@ -232,7 +232,7 @@ async (getUserInput) => { }; ``` -If the puzzle submitted to `/api/check` contains values which are not numbers or periods, the returned value will be `{ error: 'Invalid characters in puzzle' }` +如果提交給 `/api/check` 的謎題包含非數字或點號的值，返回的值將是 `{ error: 'Invalid characters in puzzle' }`。 ```js async (getUserInput) => { @@ -252,7 +252,7 @@ async (getUserInput) => { }; ``` -If the puzzle submitted to `/api/check` is greater or less than 81 characters, the returned value will be `{ error: 'Expected puzzle to be 81 characters long' }` +如果提交給 `/api/check` 的謎題大於或小於 81 個字符，返回的值將是 `{ error: 'Expected puzzle to be 81 characters long' }`。 ```js async (getUserInput) => { @@ -276,7 +276,7 @@ async (getUserInput) => { }; ``` -If the object submitted to `/api/check` is missing `puzzle`, `coordinate` or `value`, the returned value will be `{ error: 'Required field(s) missing' }` +如果提交給 `/api/check` 的對象缺失 `puzzle`、`coordinate` 或 `value`，那麼返回的值將是 `{ error: 'Required field(s) missing' }`。 ```js async (getUserInput) => { @@ -308,7 +308,7 @@ async (getUserInput) => { }; ``` -If the coordinate submitted to `api/check` does not point to an existing grid cell, the returned value will be `{ error: 'Invalid coordinate'}` +如果提交給 `api/check` 的座標不指向現有的網格單元格，返回的值將是 `{ error: 'Invalid coordinate'}`。 ```js async (getUserInput) => { @@ -330,7 +330,7 @@ async (getUserInput) => { }; ``` -If the `value` submitted to `/api/check` is not a number between 1 and 9, the returned value will be `{ error: 'Invalid value' }` +如果提交給 `/api/check` 的 `value` 不是一個介於 1 到 9 之間的數字，則返回的值將是 `{ error: 'Invalid value' }`。 ```js async (getUserInput) => { @@ -352,7 +352,7 @@ async (getUserInput) => { }; ``` -All 12 unit tests are complete and passing. See `/tests/1_unit-tests.js` for the expected behavior you should write tests for. +所有 12 項單元測試都已完成並通過。 請參閱 `/tests/1_unit-tests.js` 來了解你應該寫的測試的預期行爲。 ```js async (getUserInput) => { @@ -377,7 +377,7 @@ async (getUserInput) => { }; ``` -All 14 functional tests are complete and passing. See `/tests/2_functional-tests.js` for the expected functionality you should write tests for. +所有 14 項功能測試都已完成並通過。 請參閱 `/tests/2_functional-tests.js` 來了解你應該編寫的測試的功能。 ```js async (getUserInput) => { diff --git a/curriculum/challenges/chinese-traditional/09-information-security/information-security-projects/anonymous-message-board.md b/curriculum/challenges/chinese-traditional/09-information-security/information-security-projects/anonymous-message-board.md index f6ba2914d4d..5a30860e6ec 100644 --- a/curriculum/challenges/chinese-traditional/09-information-security/information-security-projects/anonymous-message-board.md +++ b/curriculum/challenges/chinese-traditional/09-information-security/information-security-projects/anonymous-message-board.md @@ -16,13 +16,13 @@ dashedName: anonymous-message-board - 使用我們在 Replit 上的初始化項目來完成你的項目。 - 使用一個你喜歡的站點生成器來完成項目。 需要確定包含了我們 GitHub 倉庫的所有文件。 -If you use Replit, follow these steps to set up the project: +如果你使用 Replit，請按照以下步驟設置項目： -- Start by importing the project on Replit. -- Next, you will see a `.replit` window. -- Select `Use run command` and click the `Done` button. +- 首先在 Replit 中導入項目。 +- 接着，你將看到一個 `.replit` 窗口。 +- 選擇 `Use run command` 並點擊 `Done` 按鈕。 -When you are done, make sure a working demo of your project is hosted somewhere public. Then submit the URL to it in the `Solution Link` field. Optionally, also submit a link to your project's source code in the `GitHub Link` field. +完成本項目後，請將一個正常運行的 demo（項目演示）託管在可以公開訪問的平臺。 然後將 URL 提交到 `Solution Link` 中。 此外，將項目的源碼鏈接提交到 `GitHub Link` 字段中。 # --instructions-- @@ -30,22 +30,22 @@ When you are done, make sure a working demo of your project is hosted somewhere 2. 建議在 `routes/api.js` 中創建控制器/處理器並處理路由。 3. 你將在 `server.js` 中添加任何安全功能。 -Write the following tests in `tests/2_functional-tests.js`: +在 `tests/2_functional-tests.js` 中編寫下以下測試： -- Creating a new thread: POST request to `/api/threads/{board}` -- Viewing the 10 most recent threads with 3 replies each: GET request to `/api/threads/{board}` -- Deleting a thread with the incorrect password: DELETE request to `/api/threads/{board}` with an invalid `delete_password` -- Deleting a thread with the correct password: DELETE request to `/api/threads/{board}` with a valid `delete_password` -- Reporting a thread: PUT request to `/api/threads/{board}` -- Creating a new reply: POST request to `/api/replies/{board}` -- Viewing a single thread with all replies: GET request to `/api/replies/{board}` -- Deleting a reply with the incorrect password: DELETE request to `/api/replies/{board}` with an invalid `delete_password` -- Deleting a reply with the correct password: DELETE request to `/api/replies/{board}` with a valid `delete_password` -- Reporting a reply: PUT request to `/api/replies/{board}` +- 創建一個新的主題：發送 POST 請求到 `/api/threads/{board}` +- 查看最近的 10 個主題，每個主題有 3 個回覆：發送 GET 請求到 `/api/threads/{board}` +- 使用錯誤密碼刪除主題：使用錯誤的 `delete_password` 向 `/api/threads/{board}` 發出 DELETE 請求 +- 使用正確密碼刪除主題：使用正確的 `delete_password` 向 `/api/threads/{board}` 發出 DELETE 請求 +- 報告一個主題：發送 PUT 請求到 `/api/threads/{board}` +- 創建一個新的回覆：發送 POST 請求到 `/api/replies/{board}` +- 查看一個帶有所有回覆的主題：發送 GET 請求到 `/api/replies/{board}` +- 使用錯誤密碼刪除回覆：使用無效的 `delete_password` 向 `/api/replies/{board}` 發出 DELETE 請求 +- 使用正確密碼刪除回覆：使用有效的 `delete_password` 向 `/api/replies/{board}` 發出 DELETE 請求 +- 報告一個回覆：發送 PUT 請求到 `/api/replies/{board}` # --hints-- -You can provide your own project, not the example URL. +你可以提交你自己的項目，而不是示例的 URL。 ```js (getUserInput) => { @@ -57,7 +57,7 @@ You can provide your own project, not the example URL. }; ``` -Only allow your site to be loaded in an iFrame on your own pages. +只允許你的網站在你自己的頁面上以 iFrame 方式加載。 ```js async (getUserInput) => { @@ -67,7 +67,7 @@ async (getUserInput) => { }; ``` -Do not allow DNS prefetching. +不允許 DNS 預取。 ```js async (getUserInput) => { @@ -77,7 +77,7 @@ async (getUserInput) => { }; ``` -Only allow your site to send the referrer for your own pages. +只允許你的網站爲你自己的頁面發送 referrer 請求頭。 ```js async (getUserInput) => { @@ -87,7 +87,7 @@ async (getUserInput) => { }; ``` -You can send a POST request to `/api/threads/{board}` with form data including `text` and `delete_password`. The saved database record will have at least the fields `_id`, `text`, `created_on`(date & time), `bumped_on`(date & time, starts same as `created_on`), `reported` (boolean), `delete_password`, & `replies` (array). +你可以向 `/api/threads/{board}` 發送一個 POST 請求，其中包括 `text` 和 `delete_password` 的表單數據。 保存的數據庫記錄將至少有 `_id`、`text`、`created_on`（date & time）、`bumped_on`（date & time，開頭和 `created_on` 一樣)、`reported`（布爾值）、`delete_password`、& `replies`（數組）。 ```js async (getUserInput) => { @@ -119,7 +119,7 @@ async (getUserInput) => { }; ``` -You can send a POST request to `/api/replies/{board}` with form data including `text`, `delete_password`, & `thread_id`. This will update the `bumped_on` date to the comment's date. In the thread's `replies` array, an object will be saved with at least the properties `_id`, `text`, `created_on`, `delete_password`, & `reported`. +你可以向 `/api/replies/{board}` 發送一個 POST 請求，其中包括字段 `text`、`delete_password` & `thread_id`。 這將更新 `bumped_on` 日期爲評論日期。 在主題的 `replies` 數組中，將保存一個對象，至少有 `_id`、`text`、`created_on`、`delete_password`、& `reported` 這些屬性。 ```js async (getUserInput) => { @@ -156,7 +156,7 @@ async (getUserInput) => { }; ``` -You can send a GET request to `/api/threads/{board}`. Returned will be an array of the most recent 10 bumped threads on the board with only the most recent 3 replies for each. The `reported` and `delete_password` fields will not be sent to the client. +你可以向 `/api/threads/{board}` 發送一個 GET 請求。 返回的將是一個數組，包括論壇上最近的 10 個被回覆的主題，及每個主題最新的 3 個回帖。 `reported` 和 `delete_password` 字段將不會被髮送到客戶端。 ```js async (getUserInput) => { @@ -187,7 +187,7 @@ async (getUserInput) => { }; ``` -You can send a GET request to `/api/replies/{board}?thread_id={thread_id}`. Returned will be the entire thread with all its replies, also excluding the same fields from the client as the previous test. +你可以向 `/api/replies/{board}?thread_id={thread_id}` 發送一個 GET 請求。 返回的將是帶有所有的回覆的整個主題，不包括與之前測試相同的客戶端字段。 ```js async (getUserInput) => { @@ -219,7 +219,7 @@ async (getUserInput) => { }; ``` -You can send a DELETE request to `/api/threads/{board}` and pass along the `thread_id` & `delete_password` to delete the thread. 返回的將是字符串 `incorrect password` 或 `success`。 +你可以向 `/api/threads/{board}` 發送一個 DELETE 請求，並傳遞 `thread_id` & `delete_password` 來刪除該線程。 返回的將是字符串 `incorrect password` 或 `success`。 ```js async (getUserInput) => { @@ -256,7 +256,7 @@ async (getUserInput) => { }; ``` -You can send a DELETE request to `/api/replies/{board}` and pass along the `thread_id`, `reply_id`, & `delete_password`. Returned will be the string `incorrect password` or `success`. On success, the text of the `reply_id` will be changed to `[deleted]`. +你可以向 `/api/replies/{board}` 發送一個 DELETE 請求，並傳遞 `thread_id`、`reply_id`、& `delete_password`。 返回的將是字符串 `incorrect password` 或 `success`。 成功後，`reply_id` 的文本將更改爲 `[deleted]`。 ```js async (getUserInput) => { @@ -311,7 +311,7 @@ async (getUserInput) => { }; ``` -You can send a PUT request to `/api/threads/{board}` and pass along the `thread_id`. 返回的將是字符串 `reported`。 The `reported` value of the `thread_id` will be changed to `true`. +你可以向 `/api/threads/{board}` 發送一個 PUT 請求，並傳遞 `thread_id`。 返回的將是字符串 `reported`。 `thread_id` 回覆的 `reported` 值將改爲 `true`。 ```js async (getUserInput) => { @@ -342,7 +342,7 @@ async (getUserInput) => { }; ``` -You can send a PUT request to `/api/replies/{board}` and pass along the `thread_id` & `reply_id`. Returned will be the string `reported`. The `reported` value of the `reply_id` will be changed to `true`. +你可以向 `/api/replies/{board}` 發送一個 PUT 請求，並傳遞 `thread_id` & `reply_id`。 返回的將是字符串 `reported`。 `reply_id` 的 `reported` 值將被改變爲 `true`。 ```js async (getUserInput) => { @@ -374,7 +374,7 @@ async (getUserInput) => { }; ``` -All 10 functional tests are complete and passing. +所有 10 項功能測試都已完成並通過。 ```js async (getUserInput) => { diff --git a/curriculum/challenges/chinese-traditional/09-information-security/information-security-projects/port-scanner.md b/curriculum/challenges/chinese-traditional/09-information-security/information-security-projects/port-scanner.md index 8947db1d81d..2a1a0a85a79 100644 --- a/curriculum/challenges/chinese-traditional/09-information-security/information-security-projects/port-scanner.md +++ b/curriculum/challenges/chinese-traditional/09-information-security/information-security-projects/port-scanner.md @@ -11,18 +11,18 @@ dashedName: port-scanner 你將使用我們在 Replit 的初始化項目來完成這個項目。 -- Start by importing the project on Replit. -- Next, you will see a `.replit` window. -- Select `Use run command` and click the `Done` button. +- 首先在 Replit 中導入項目。 +- 接着，你將看到一個 `.replit` 窗口。 +- 選擇 `Use run command` 並點擊 `Done` 按鈕。 我們仍在開發 Python 課程的交互式教學部分。 目前，你可以在 YouTube 上通過 freeCodeCamp.org 上傳的一些視頻學習這個項目相關的知識。 -- Python for Everybody Video Course (14 hours) +- 每個人視頻課程的 Python (14小時) -- Learn Python Basics in Depth (4 hours) +- 深入學習 Python 基礎知識（4 小時） -- Intermediate Python Course (6 hours) +- Python 中級課程（6 小時） # --instructions-- diff --git a/curriculum/challenges/chinese-traditional/09-information-security/information-security-projects/secure-real-time-multiplayer-game.md b/curriculum/challenges/chinese-traditional/09-information-security/information-security-projects/secure-real-time-multiplayer-game.md index 8c88e7d81db..33382f8416b 100644 --- a/curriculum/challenges/chinese-traditional/09-information-security/information-security-projects/secure-real-time-multiplayer-game.md +++ b/curriculum/challenges/chinese-traditional/09-information-security/information-security-projects/secure-real-time-multiplayer-game.md @@ -14,32 +14,32 @@ dashedName: secure-real-time-multiplayer-game - 使用我們在 Replit 上的初始化項目來完成你的項目 - 使用您選擇的站點生成器來完成項目。 需要確定包含了我們 GitHub 倉庫的所有文件。 -If you use Replit, follow these steps to set up the project: +如果你使用 Replit，請按照以下步驟設置項目： -- Start by importing the project on Replit. -- Next, you will see a `.replit` window. -- Select `Use run command` and click the `Done` button. +- 首先在 Replit 中導入項目。 +- 接着，你將看到一個 `.replit` 窗口。 +- 選擇 `Use run command` 並點擊 `Done` 按鈕。 -When you are done, make sure a working demo of your project is hosted somewhere public. Then submit the URL to it in the `Solution Link` field. Optionally, also submit a link to your project's source code in the `GitHub Link` field. +當你完成後，請將一個確保正常運行的 demo（項目演示）託管在可以公開訪問的平臺上。 然後將 demo 的 URL 提交到 `Solution Link` 字段中。 也可以將項目的源碼鏈接提交到 `GitHub Link` 字段中。 # --instructions-- -Create a secure multiplayer game in which each player can move their avatar, there is at least one collectible item, and the rank of the players is calculated based on their score. +創建一個安全的多人遊戲，每名玩家可以移動他們的角色，並且這個遊戲至少提供了一個可收集的道具，玩家的排名是根據他們的分數計算的。 -For details consult the tests below. +有關詳細信息，請參考下面的測試。 -Make sure that your game is secure! Include these security measures: +請確保你的遊戲是安全的！ 包含以下安全措施： -- The client should not be able to guess/sniff the MIME type -- Prevent XSS attacks -- Do not cache anything from the website in the client -- The headers say that the site is powered by `PHP 7.4.3` +- 客戶端不能猜測/嗅探 MIME 類型 +- 防止 XSS 攻擊 +- 不要在客戶端中緩存網站的任何信息 +- 在請求頭中聲明網站是由 `PHP 7.4.3` 提供技術支持 -**Note**: `helmet@^3.21.3` is needed for the user stories. This means you will need to use the previous version of Helmet's docs, for information on how to achieve the user stories. +**注意：** `helmet@^3.21.3` 是需求中所要求的。 這意味着你將需要使用之前版本的 Helmet 文檔，來了解如何實現需求。 # --hints-- -You can provide your own project, not the example URL. +你可以提交你自己的項目，而不是示例的 URL。 ```js (getUserInput) => { @@ -51,91 +51,91 @@ You can provide your own project, not the example URL. }; ``` -Multiple players can connect to a server and play. +多名玩家可以連接到同一臺服務器玩這個遊戲。 ```js ``` -Each player has an avatar. +每名玩家都有一個角色。 ```js ``` -Each player is represented by an object created by the `Player` class in `Player.mjs`. +每名玩家都由 `Player.mjs` 中的 `Player` 類創建的對象表示 ```js ``` -At a minimum, each player object should contain a unique `id`, a `score`, and `x` and `y` coordinates representing the player's current position. +至少，每個玩家對象都應該包含一個唯一的 `id`、一個`score`，以及代表玩家當前位置的 `x` 和 `y` 座標。 ```js ``` -The game has at least one type of collectible item. Complete the `Collectible` class in `Collectible.mjs` to implement this. +遊戲中至少有一種可收集道具。 在 `Collectible.mjs` 中完成 `Collectible` 類來實現這一點。 ```js ``` -At a minimum, each collectible item object created by the `Collectible` class should contain a unique `id`, a `value`, and `x` and `y` coordinates representing the item's current position. +至少，由 `Collectible` 類創建的每個可收集物品對象應該包含一個唯一的 `id`、一個 `value` 和代表物品的當前位置 `x` 和 `y` 座標。 ```js ``` -Players can use the WASD and/or arrow keys to move their avatar. Complete the `movePlayer` method in `Player.mjs` to implement this. +玩家可以使用 WASD 和/或箭頭鍵移動他們的角色。 完成 `Player.mjs` 中的 `movePlayer` 方法來實現這一功能。 ```js ``` -The `movePlayer` method should accept two arguments: a string of "up", "down", "left", or "right", and a number for the amount of pixels the player's position should change. `movePlayer` should adjust the `x` and `y` coordinates of the player object it's called from. +`movePlayer` 方法應該接受兩個參數：一個由 “up”、“down”、“left” 或 “right” 組成的字符串，以及一個表示玩家位置應該改變的像素數量的數字。 `movePlayer` 應該調整被調用的玩家對象的 `x` 和 `y` 座標。 ```js ``` -The player's score should be used to calculate their rank among the other players. Complete the `calculateRank` method in the `Player` class to implement this. +玩家的分數應該用來計算他們與其他玩家相比的排名。 完成 `Player` 類中的 `calculateRank` 方法來實現這個功能。 ```js ``` -The `calculateRank` method should accept an array of objects representing all connected players and return the string `Rank: currentRanking/totalPlayers`. For example, in a game with two players, if Player A has a score of 3 and Player B has a score of 5, `calculateRank` for Player A should return `Rank: 2/2`. +`calculateRank` 方法應該接受一個代表所有連接的玩家的對象數組，並返回字符串 `Rank: currentRanking/totalPlayers`（排名：當前排名/總玩家數）。 舉個例子，在一個兩人遊戲中，如果玩家 A 有 3 分，玩家 B 有 5 分，那麼玩家 A 的 `calculateRank` 應該返回 `Rank: 2/2`。 ```js ``` -Players can collide with a collectible item. Complete the `collision` method in `Player.mjs` to implement this. +玩家可以與收集道具發生碰撞。 完成 `Player.mjs` 中的 `collision` 方法實現這一功能。 ```js ``` -The `collision` method should accept a collectible item's object as an argument. If the player's avatar intersects with the item, the `collision` method should return `true`. +`collision` 方法應該接受可收集物品的對象作爲參數。 如果玩家的角色與道具重合，`collision` 方法應該返回 `true`。 ```js ``` -All players are kept in sync. +所有玩家保持同步。 ```js ``` -Players can disconnect from the game at any time. +玩家可以在任何時候退出遊戲。 ```js ``` -Prevent the client from trying to guess / sniff the MIME type. +防止客戶端嘗試猜測/嗅探 MIME 類型。 ```js async (getUserInput) => { @@ -145,7 +145,7 @@ async (getUserInput) => { }; ``` -Prevent cross-site scripting (XSS) attacks. +防止跨站腳本（XSS）攻擊。 ```js async (getUserInput) => { @@ -155,7 +155,7 @@ async (getUserInput) => { }; ``` -Nothing from the website is cached in the client. +網站上的任何東西都不會被緩存到客戶端中。 ```js async (getUserInput) => { @@ -171,7 +171,7 @@ async (getUserInput) => { }; ``` -The headers say that the site is powered by "PHP 7.4.3" even though it isn't (as a security measure). +在請求頭中聲明該網站由 “PHP 7.4.3” 提供技術支持，儘管它並非如此（作爲一種安全措施）。 ```js async (getUserInput) => { diff --git a/curriculum/challenges/chinese-traditional/09-information-security/information-security-projects/sha-1-password-cracker.md b/curriculum/challenges/chinese-traditional/09-information-security/information-security-projects/sha-1-password-cracker.md index 6a9138e8e89..9658ef7f3f8 100644 --- a/curriculum/challenges/chinese-traditional/09-information-security/information-security-projects/sha-1-password-cracker.md +++ b/curriculum/challenges/chinese-traditional/09-information-security/information-security-projects/sha-1-password-cracker.md @@ -11,18 +11,18 @@ dashedName: sha-1-password-cracker 你將使用我們在 Replit 的初始化項目來完成這個項目。 -- Start by importing the project on Replit. -- Next, you will see a `.replit` window. -- Select `Use run command` and click the `Done` button. +- 首先在 Replit 中導入項目。 +- 接着，你將看到一個 `.replit` 窗口。 +- 選擇 `Use run command` 並點擊 `Done` 按鈕。 我們仍在開發 Python 課程的交互式教學部分。 目前，你可以在 YouTube 上通過 freeCodeCamp.org 上傳的一些視頻學習這個項目相關的知識。 -- Python for Everybody Video Course (14 hours) +- 每個人視頻課程的 Python (14小時) -- Learn Python Basics in Depth (4 hours) +- 深入學習 Python 基礎知識（4 小時） -- Intermediate Python Course (6 hours) +- Python 中級課程（6 小時） # --instructions-- @@ -38,15 +38,15 @@ dashedName: sha-1-password-cracker 以下是一些用於測試該功能的散列密碼： -- `b305921a3723cd5d70a375cd21a61e60aabb84ec` should return "sammy123" -- `c7ab388a5ebefbf4d550652f1eb4d833e5316e3e` should return "abacab" -- `5baa61e4c9b93f3f0682250b6cf8331b7ee68fd8` should return "password" +- `b305921a3723cd5d70a375cd21a61e60aabb84ec` 應該返回 “sammy123” +- `c7ab388a5ebefbf4d550652f1eb4d833e5316e3e` 應該返回 “abacab” +- `5baa61e4c9b93f3f0682250b6cf8331b7ee68fd8` 應該返回 “password” 以下是一些散列密碼，用於在 `use_salts` 設置爲 `True` 時測試該功能： -- `53d8b3dc9d39f0184144674e310185e41a87ffd5` should return "superman" -- `da5a4e8cf89539e66097acd2f8af128acae2f8ae` should return "q1w2e3r4t5" -- `ea3f62d498e3b98557f9f9cd0d905028b3b019e1` should return "bubbles1" +- `53d8b3dc9d39f0184144674e310185e41a87ffd5` 應該返回 “superman” +- `da5a4e8cf89539e66097acd2f8af128acae2f8ae` 應該返回 “q1w2e3r4t5” +- `ea3f62d498e3b98557f9f9cd0d905028b3b019e1` 應該返回 “bubbles1” `hashlib` 庫已經爲你導入。 你應該在你的代碼中使用它。 在此瞭解更多關於 “hashlib” 的信息。 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 3119387c32b..bfe7cc07528 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 @@ -18,13 +18,13 @@ dashedName: stock-price-checker - 使用我們在 Replit 上的初始化項目來完成你的項目。 - 使用你選擇的網站生成器來完成項目。 需要包含我們 GitHub 倉庫的所有文件。 -If you use Replit, follow these steps to set up the project: +如果你使用 Replit，請按照以下步驟設置項目： -- Start by importing the project on Replit. -- Next, you will see a `.replit` window. -- Select `Use run command` and click the `Done` button. +- 首先在 Replit 中導入項目。 +- 接着，你將看到一個 `.replit` 窗口。 +- 選擇 `Use run command` 並點擊 `Done` 按鈕。 -When you are done, make sure a working demo of your project is hosted somewhere public. Then submit the URL to it in the `Solution Link` field. Optionally, also submit a link to your project's source code in the `GitHub Link` field. +當你完成後，請將一個確保正常運行的 demo（項目演示）託管在可以公開訪問的平臺上。 然後將 demo 的 URL 提交到 `Solution Link` 字段中。 也可以將項目的源碼鏈接提交到 `GitHub Link` 字段中。 # --instructions-- @@ -33,19 +33,19 @@ When you are done, make sure a working demo of your project is hosted somewhere 3. 添加安全功能到 `server.js`。 4. 在 `tests/2_functional-tests.js` 中創建所有的功能測試 -**Note** Privacy Considerations: Due to the requirement that only 1 like per IP should be accepted, you will have to save IP addresses. It is important to remain compliant with data privacy laws such as the General Data Protection Regulation. One option is to get permission to save the user's data, but it is much simpler to anonymize it. For this challenge, remember to anonymize IP addresses before saving them to the database. If you need ideas on how to do this, you may choose to hash the data, truncate it, or set part of the IP address to 0. +**注意** 隱私考慮：由於每個 IP 只能接受一個贊（like），你必須保存 IP 地址。 必須遵守數據隱私法規，例如《通用數據保護條例》。 一個選項是獲得保存用戶數據的權限，但是匿名化則要簡單得多。 對於此挑戰，請記住在將 IP 地址保存到數據庫之前對其進行匿名化。 如果你想知道如何做到這一點，你可以選擇散列數據、截斷它、或將 IP 地址的一部分設置爲 0。 -Write the following tests in `tests/2_functional-tests.js`: +在 `tests/2_functional-tests.js` 中編寫以下測試： -- Viewing one stock: GET request to `/api/stock-prices/` -- Viewing one stock and liking it: GET request to `/api/stock-prices/` -- Viewing the same stock and liking it again: GET request to `/api/stock-prices/` -- Viewing two stocks: GET request to `/api/stock-prices/` -- Viewing two stocks and liking them: GET request to `/api/stock-prices/` +- 查看股價：發送 GET 請求到 `/api/stock-prices/` +- 查看一個股票並關注它：發送 GET 請求到 `/api/stock-prices/` +- 查看同一只股票並再次發送關注：發送 GET 請求到 `/api/stock-prices/` +- 查看兩隻股票：發送 GET 請求到 `/api/stock-prices/` +- 查看兩隻股票並關注它：發送 GET 請求到 `/api/stock-prices/` # --hints-- -You can provide your own project, not the example URL. +你可以提交你自己的項目，而不是示例的 URL。 ```js (getUserInput) => { @@ -55,7 +55,7 @@ You can provide your own project, not the example URL. }; ``` -You should set the content security policies to only allow loading of scripts and CSS from your server. +將內容安全策略設置爲僅允許從服務器加載腳本和 CSS。 ```js async (getUserInput) => { @@ -70,7 +70,7 @@ async (getUserInput) => { }; ``` -You can send a `GET` request to `/api/stock-prices`, passing a NASDAQ stock symbol to a `stock` query parameter. The returned object will contain a property named `stockData`. +你可以向 `/api/stock-prices` 發送一個 `GET` 請求，將納斯達克股票代碼賦值給 `stock` 查詢參數。 返回的對象將包含一個名爲 `stockData` 的屬性。 ```js async (getUserInput) => { @@ -82,7 +82,7 @@ async (getUserInput) => { }; ``` -The `stockData` property includes the `stock` symbol as a string, the `price` as a number, and `likes` as a number. +`stockData` 屬性包括字符串 `stock`、數字 `price`，以及數字 `likes`。 ```js async (getUserInput) => { @@ -97,13 +97,13 @@ async (getUserInput) => { }; ``` -You can also pass along a `like` field as `true` (boolean) to have your like added to the stock(s). Only 1 like per IP should be accepted. +你也可以將 `like` 字段作爲 `true`（布爾值）傳遞，將你的偏好添加到股票中。 每個 IP 應該只接受 1 個贊（like）。 ```js ``` -If you pass along 2 stocks, the returned value will be an array with information about both stocks. Instead of `likes`, it will display `rel_likes` (the difference between the likes on both stocks) for both `stockData` objects. +如果你傳遞了兩隻股票，返回值將是一個包含這兩隻股票信息的數組。 它將會顯示對於兩個 `stockData` 對象的 `rel_likes`（兩隻股票所獲得的贊同數的區別），而不是 `likes`。 ```js async (getUserInput) => { @@ -118,7 +118,7 @@ async (getUserInput) => { }; ``` -All 5 functional tests are complete and passing. +所有 5 項功能測試都已完成並通過。 ```js async (getUserInput) => { diff --git a/curriculum/challenges/chinese-traditional/09-information-security/information-security-with-helmetjs/hash-and-compare-passwords-asynchronously.md b/curriculum/challenges/chinese-traditional/09-information-security/information-security-with-helmetjs/hash-and-compare-passwords-asynchronously.md index 07914acbe4b..1c5542a7a76 100644 --- a/curriculum/challenges/chinese-traditional/09-information-security/information-security-with-helmetjs/hash-and-compare-passwords-asynchronously.md +++ b/curriculum/challenges/chinese-traditional/09-information-security/information-security-with-helmetjs/hash-and-compare-passwords-asynchronously.md @@ -30,7 +30,7 @@ bcrypt.compare(myPlaintextPassword, hash, (err, res) => { }); ``` -在你記錄完成的哈希，並在比較中把 'res' 記錄到控制檯後，將此添加到你現有的哈希函數中（因爲你需要等待哈希完成後再調用比較函數）。 You should see in the console a hash, and then 'true' is printed! If you change 'myPlaintextPassword' in the compare function to 'someOtherPlaintextPassword', then it should say false. +在你記錄完成的哈希，並在比較中把 'res' 記錄到控制檯後，將此添加到你現有的哈希函數中（因爲你需要等待哈希完成後再調用比較函數）。 控制檯中會首先輸出一個哈希結果，然後輸出 “true”。 如果將比較函數中的 “myPlaintextPassword” 更改爲 “someOtherPlaintextPassword”，則比較的結果應顯示 false。 ```js bcrypt.hash('passw0rd!', 13, (err, hash) => { diff --git a/curriculum/challenges/chinese-traditional/09-information-security/information-security-with-helmetjs/install-and-require-helmet.md b/curriculum/challenges/chinese-traditional/09-information-security/information-security-with-helmetjs/install-and-require-helmet.md index 72c13e4e9a6..68415879d0c 100644 --- a/curriculum/challenges/chinese-traditional/09-information-security/information-security-with-helmetjs/install-and-require-helmet.md +++ b/curriculum/challenges/chinese-traditional/09-information-security/information-security-with-helmetjs/install-and-require-helmet.md @@ -14,25 +14,25 @@ dashedName: install-and-require-helmet - 使用我們在 Replit 上的初始化項目來完成這些挑戰。 - 使用你選擇的網站生成器來完成項目。 需要包含我們 GitHub 倉庫的所有文件。 -If you use Replit, follow these steps to set up the project: +如果你使用 Replit，請按照以下步驟設置項目： -- Start by importing the project on Replit. -- Next, you will see a `.replit` window. -- Select `Use run command` and click the `Done` button. +- 首先在 Replit 中導入項目。 +- 接着，你將看到一個 `.replit` 窗口。 +- 選擇 `Use run command` 並點擊 `Done` 按鈕。 -When you are done, make sure a working demo of your project is hosted somewhere public. Then submit the URL to it in the `Solution Link` field. +當你完成後，請將一個確保正常運行的 demo（項目演示）託管在可以公開訪問的平臺上。 然後將 demo 的 URL 提交到 `Solution Link` 字段中。 -Helmet helps you secure your Express apps by setting various HTTP headers. +Helmet 通過設置各種 HTTP 頭來保護你的 Express 應用程序。 # --instructions-- -All your code for these lessons goes in the `myApp.js` file between the lines of code we have started you off with. Do not change or delete the code we have added for you. +你在這些課程中寫的所有代碼都在 `myApp.js` 文件中，在初始代碼之間。 不要改變或刪除我們爲你添加的代碼。 -Helmet version `3.21.3` has already been installed, so require it as `helmet` in `myApp.js`. +Helmet `3.21.3` 版已經安裝完畢，所以在 `myApp.js` 中請求它作爲 `helmet`。 # --hints-- -`helmet` version `3.21.3` should be in `package.json` +`helmet` 版本 `3.21.3` 應該在 `package.json` 中。 ```js (getUserInput) => diff --git a/curriculum/challenges/chinese-traditional/09-information-security/information-security-with-helmetjs/set-a-content-security-policy-with-helmet.contentsecuritypolicy.md b/curriculum/challenges/chinese-traditional/09-information-security/information-security-with-helmetjs/set-a-content-security-policy-with-helmet.contentsecuritypolicy.md index 349219a5c12..78d8bf13391 100644 --- a/curriculum/challenges/chinese-traditional/09-information-security/information-security-with-helmetjs/set-a-content-security-policy-with-helmet.contentsecuritypolicy.md +++ b/curriculum/challenges/chinese-traditional/09-information-security/information-security-with-helmetjs/set-a-content-security-policy-with-helmet.contentsecuritypolicy.md @@ -10,7 +10,7 @@ dashedName: set-a-content-security-policy-with-helmet-contentsecuritypolicy 請注意，本項目是在 Replit 上的初始化項目的基礎上進行開發，你也可以從 GitHub 上克隆。 -在這個挑戰中，我們要重點討論現代瀏覽器中一種能有效減輕安全風險和防禦很多種類型常見攻擊的安全防護。 通過設置和配置內容安全策略，你可以防止在頁面中無意中注入任何內容。 這會讓你的應用遠離 XSS 漏洞、惡意追蹤、惡意 frames 和很多其他攻擊。 CSP 通過配置資源白名單來避免這些問題。 你可以給任何一種類型的頁面資源（腳本、樣式文件、字體、frames、媒體文件等）做這個配置。 它支持很多指令，所以網站管理員可以做細緻的控制。 更多詳情請參考 HTML 5 Rocks 和 KeyCDN。 Unfortunately CSP is unsupported by older browsers. +在這個挑戰中，我們要重點討論現代瀏覽器中一種能有效減輕安全風險和防禦很多種類型常見攻擊的安全防護。 通過設置和配置內容安全策略，你可以防止在頁面中無意中注入任何內容。 這會讓你的應用遠離 XSS 漏洞、惡意追蹤、惡意 frames 和很多其他攻擊。 CSP 通過配置資源白名單來避免這些問題。 你可以給任何一種類型的頁面資源（腳本、樣式文件、字體、frames、媒體文件等）做這個配置。 它支持很多指令，所以網站管理員可以做細緻的控制。 更多詳情請參考 HTML 5 Rocks 和 KeyCDN。 不幸的是，一些舊的瀏覽器不支持 CSP。 默認的指令很容易受到攻擊, 所以設置 defaultSrc 指令作爲降級方案很重要。 Helmet 同時支持 defaultSrc 和 default-src 命名規範。 降級方案可以應用在大部分指令上。 diff --git a/curriculum/challenges/chinese-traditional/14-responsive-web-design-22/learn-css-grid-by-building-a-magazine/6148d3fff5186b57123d97e2.md b/curriculum/challenges/chinese-traditional/14-responsive-web-design-22/learn-css-grid-by-building-a-magazine/6148d3fff5186b57123d97e2.md index ef2b7b73008..c65cdc98398 100644 --- a/curriculum/challenges/chinese-traditional/14-responsive-web-design-22/learn-css-grid-by-building-a-magazine/6148d3fff5186b57123d97e2.md +++ b/curriculum/challenges/chinese-traditional/14-responsive-web-design-22/learn-css-grid-by-building-a-magazine/6148d3fff5186b57123d97e2.md @@ -24,7 +24,7 @@ assert(new __helpers.CSSHelp(document).getStyle('.quote::before')); 你的 `.quote::before` 選擇器應該有一個 `content` 屬性，設置爲 `'" '`。 ```js -assert(new __helpers.CSSHelp(document).getStyle('.quote::before')?.content?.match(/\\?\"\s/)); +assert(new __helpers.CSSHelp(document).getStyle('.quote::before')?.content?.match(/\"\\"\s\"/)); ``` 你應該有一個 `.quote::after` 選擇器。 @@ -36,7 +36,7 @@ assert(new __helpers.CSSHelp(document).getStyle('.quote::after')); 你的 `.quote::after` 選擇器應該有一個 `content` 屬性，設置爲 `' "'`。 ```js -assert(new __helpers.CSSHelp(document).getStyle('.quote::after')?.content?.match(/\s\\?\"/)); +assert(new __helpers.CSSHelp(document).getStyle('.quote::after')?.content?.match(/\"\s\\""/)); ``` # --seed-- diff --git a/curriculum/challenges/chinese-traditional/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5f07be6ef7412fbad0c5626b.md b/curriculum/challenges/chinese-traditional/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5f07be6ef7412fbad0c5626b.md index 0201082643d..474127b3b51 100644 --- a/curriculum/challenges/chinese-traditional/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5f07be6ef7412fbad0c5626b.md +++ b/curriculum/challenges/chinese-traditional/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5f07be6ef7412fbad0c5626b.md @@ -22,7 +22,7 @@ assert(document.querySelector('section')); 你的 `section` 元素應該有一個結束標籤。 結束標籤在 `<` 字符之後有一個 `/`。 ```js -assert(code.match(/<\/section\>/)); +assert(code.match(/<\/section\s*>/i)); ``` 整個 `section` 元素應該在 `main` 元素的開始標籤和結束標籤之間。 @@ -57,15 +57,15 @@ assert.isFalse(includesH1); --fcc-editable-region-- -

CatPhotoApp

+

Cat Photos

Click here to view more cat photos.

A cute orange cat lying on its back. -
+ --fcc-editable-region-- diff --git a/curriculum/challenges/chinese-traditional/14-responsive-web-design-22/learn-the-css-box-model-by-building-a-rothko-painting/60a3e3396c7b40068ad6998c.md b/curriculum/challenges/chinese-traditional/14-responsive-web-design-22/learn-the-css-box-model-by-building-a-rothko-painting/60a3e3396c7b40068ad6998c.md index 702d8fc4c66..3739edeca91 100644 --- a/curriculum/challenges/chinese-traditional/14-responsive-web-design-22/learn-the-css-box-model-by-building-a-rothko-painting/60a3e3396c7b40068ad6998c.md +++ b/curriculum/challenges/chinese-traditional/14-responsive-web-design-22/learn-the-css-box-model-by-building-a-rothko-painting/60a3e3396c7b40068ad6998c.md @@ -9,7 +9,7 @@ dashedName: step-34 你的畫的顏色和形狀太銳利了，不能像 Rothko 一樣通過。 -使用 `filter` 屬性在 `.canvas` 元素中通過 `2px` 對繪畫進行 `blur`。 +使用 `filter` 屬性在 `.canvas` 元素中使其 `blur` 爲 `2px`。 下面是添加一個 3px `blur` 規則的示例： diff --git a/curriculum/challenges/chinese-traditional/15-javascript-algorithms-and-data-structures-22/learn-basic-javascript-by-building-a-role-playing-game/62a257659d0d1e2456f24ba2.md b/curriculum/challenges/chinese-traditional/15-javascript-algorithms-and-data-structures-22/learn-basic-javascript-by-building-a-role-playing-game/62a257659d0d1e2456f24ba2.md index 12d385f3107..4c51680f946 100644 --- a/curriculum/challenges/chinese-traditional/15-javascript-algorithms-and-data-structures-22/learn-basic-javascript-by-building-a-role-playing-game/62a257659d0d1e2456f24ba2.md +++ b/curriculum/challenges/chinese-traditional/15-javascript-algorithms-and-data-structures-22/learn-basic-javascript-by-building-a-role-playing-game/62a257659d0d1e2456f24ba2.md @@ -1,13 +1,13 @@ --- id: 62a257659d0d1e2456f24ba2 -title: Step 17 +title: 步驟 17 challengeType: 0 dashedName: step-17 --- # --description-- -Before you start writing your project code, you should move it to its own file to keep things organized. Remove your `console.log("Hello World");` line. Then give your now empty `script` element a `src` attribute set to `./script.js`. +在你開始編寫你的項目代碼之前，你應該將它移動到自己的文件，使一切組織有序。 刪除你的 `console.log("Hello World");` 線。 Then give your now empty `script` element a `src` attribute set to `./script.js`. # --hints-- diff --git a/curriculum/challenges/chinese/04-data-visualization/json-apis-and-ajax/get-json-with-the-javascript-fetch-method.md b/curriculum/challenges/chinese/04-data-visualization/json-apis-and-ajax/get-json-with-the-javascript-fetch-method.md index 914f5e7a961..e5289421e24 100644 --- a/curriculum/challenges/chinese/04-data-visualization/json-apis-and-ajax/get-json-with-the-javascript-fetch-method.md +++ b/curriculum/challenges/chinese/04-data-visualization/json-apis-and-ajax/get-json-with-the-javascript-fetch-method.md @@ -38,13 +38,37 @@ fetch('/json/cats.json') # --hints-- -应该使用 `fetch` 发起 `GET` 请求。 + +Your code should use the fetched data to replace the inner HTML + +```js +const catData = "dummy data"; +const ref = fetch; +fetch = () => Promise.resolve({ json: () => catData }); +async () => { + try { + document.getElementById("getMessage").click(); + await new Promise((resolve, reject) => setTimeout(() => resolve(), 250)); + } catch (error) { + console.log(error); + } finally { + fetch = ref; + assert.equal( + document.getElementById("message").textContent, + JSON.stringify(catData) + ); + } +}; +``` + + +Your code should make a `GET` request with `fetch`. ```js assert(code.match(/fetch\s*\(\s*('|")\/json\/cats\.json\1\s*\)/g)); ``` -应该在 `then` 里面将响应转换为 JSON。 +Your code should use `then` to convert the response to JSON. ```js assert( @@ -54,13 +78,13 @@ assert( ); ``` -应该使用另一个 `then` 接收 `then` 转换的 JSON。 +Your code should use `then` to handle the data converted to JSON by the other `then`. ```js assert(__helpers.removeWhiteSpace(code).match(/\.then\(\(?\w+\)?=>{[^}]*}\)/g)); ``` -代码应该选择 id 为 `message` 的元素然后把它的内部 HTML 改成 JSON data 的字符串。 +Your code should get the element with id `message` and change its inner HTML to the string of JSON data. ```js assert( diff --git a/curriculum/challenges/chinese/06-quality-assurance/advanced-node-and-express/announce-new-users.md b/curriculum/challenges/chinese/06-quality-assurance/advanced-node-and-express/announce-new-users.md index 7c13d1492de..df32cc6b066 100644 --- a/curriculum/challenges/chinese/06-quality-assurance/advanced-node-and-express/announce-new-users.md +++ b/curriculum/challenges/chinese/06-quality-assurance/advanced-node-and-express/announce-new-users.md @@ -8,9 +8,9 @@ dashedName: announce-new-users # --description-- -许多聊天室都有这个功能：所有已连接到服务器的在线用户都会看到有人加入或退出的提醒。 我们已经写好了处理连接和断开事件的代码，只要对这个方法稍作修改就可以实现这个功能。 The most logical way of doing so is sending 3 pieces of data with the event: the username of the user who connected/disconnected, the current user count, and if that username connected or disconnected. +许多聊天室都有这个功能：所有已连接到服务器的在线用户都会看到有人加入或退出的提醒。 我们已经写好了处理连接和断开事件的代码，只要对这个方法稍作修改就可以实现这个功能。 最合理的方式是随事件发送 3 个数据：连接/断开连接的用户的用户名、当前的用户数，以及该用户名是否连接或断开连接。 -Change the event name to `'user'`, and pass an object along containing the fields `username`, `currentUsers`, and `connected` (to be `true` in case of connection, or `false` for disconnection of the user sent). Be sure to change both `'user count'` events and set the disconnect one to send `false` for the field `connected` instead of `true` like the event emitted on connect. +将事件名称更改为 `'user'`，传递一个对象，其中应包含如下字段：`username`、`currentUsers` 和 `connected`（布尔值，连接上即为 `true`，断开则是 `false`）。 记得更改两个 `'user count'` 事件，设置断开连接事件向 `connected` 字段发送 `false` ，而不是像连接上的事件一样发送 `true`。 ```js io.emit('user', { @@ -34,11 +34,11 @@ socket.on('user', data => { }); ``` -完成上述要求后，你可以在下方提交你的页面链接。 If you're running into errors, you can check out the project completed up to this point . +完成上述要求后，你可以在下方提交你的页面链接。 如果你在运行时遇到错误，你可以查看已完成的项目。 # --hints-- -Event `'user'` should be emitted with `name`, `currentUsers`, and `connected`. +事件 `'user'` 应该与 `name`、`currentUsers` 和 `connected` 一起发送。 ```js async (getUserInput) => { diff --git a/curriculum/challenges/chinese/06-quality-assurance/advanced-node-and-express/authentication-strategies.md b/curriculum/challenges/chinese/06-quality-assurance/advanced-node-and-express/authentication-strategies.md index a25ab6c330b..2eb748914b8 100644 --- a/curriculum/challenges/chinese/06-quality-assurance/advanced-node-and-express/authentication-strategies.md +++ b/curriculum/challenges/chinese/06-quality-assurance/advanced-node-and-express/authentication-strategies.md @@ -10,13 +10,13 @@ dashedName: authentication-strategies 策略是认证用户的一种方式。 如果你让用户在注册时填写了用户信息，那你就可以基于这些信息进行验证。或者也可以引入第三方登录，如 Google 或者 Github。 在这个项目中，我们将使用 Passport 中间件。 Passport 提供了一套全面的策略，支持使用用户名和密码、GitHub、谷歌等进行认证。 -`passport-local@~1.0.0` has already been added as a dependency. Add it to your server as follows: +`passport-local@~1.0.0` 已经被添加为依赖项。 将其添加到你的服务器，如下所示： ```javascript const LocalStrategy = require('passport-local'); ``` -Tell passport to **use** an instantiated `LocalStrategy` object with a few settings defined. Make sure this (as well as everything from this point on) is encapsulated in the database connection since it relies on it!: +然后，需要让 passport **使用**一个实例化的 `LocalStrategy` 对象，这个对象的一些设置已完成。 请注意，接下来的所有代码都应写在连接数据库的回调中，因为它们的执行都依赖数据库。 ```javascript passport.use(new LocalStrategy((username, password, done) => { @@ -30,13 +30,13 @@ passport.use(new LocalStrategy((username, password, done) => { })); ``` -This is defining the process to use when you try to authenticate someone locally. First, it tries to find a user in your database with the username entered. Then, it checks for the password to match. Finally, if no errors have popped up that you checked for (e.g. an incorrect password), the `user` object is returned and they are authenticated. +这是定义当你试图在本地验证某人时要使用的程序： 首先，它试图在你的数据库中找到一个具有输入的用户名的用户。 然后检查密码是否匹配。 最后，如果没有弹出你检查的错误（例如，一个错误的密码），返回 `user` 对象，并且它们已经被验证。 -Many strategies are set up using different settings. Generally, it is easy to set it up based on the README in that strategy's repository. A good example of this is the GitHub strategy where you don't need to worry about a username or password because the user will be sent to GitHub's auth page to authenticate. As long as they are logged in and agree then GitHub returns their profile for you to use. +许多策略是通过不同的设置来制定的。 一般来说，很容易根据该策略的仓库中的 README 来建立它。 一个很好的例子是 GitHub 策略。在该策略中，你不需要写用户名或密码的相关验证逻辑，因为用户将被引导到 GitHub 页面进行验证。 只要用户登录并同意，GitHub 就会返回用户的个人信息供你使用。 -In the next step, you will set up how to actually call the authentication strategy to validate a user based on form data. +下一步，你将根据表单数据设置如何实际调用认证策略来验证用户。 -完成上述要求后，请提交你的页面链接。 If you're running into errors, you can check out the project completed up to this point. +完成上述要求后，请提交你的页面链接。 如果你在运行时遇到错误，可以查看已完成的项目。 # --hints-- @@ -55,7 +55,7 @@ async (getUserInput) => { } ``` -Passport-local should be correctly required and set up. +应该正确地引入和配置 Passport-local。 ```js async (getUserInput) => { diff --git a/curriculum/challenges/chinese/06-quality-assurance/advanced-node-and-express/authentication-with-socket.io.md b/curriculum/challenges/chinese/06-quality-assurance/advanced-node-and-express/authentication-with-socket.io.md index 21b3b273cef..00e58b226ae 100644 --- a/curriculum/challenges/chinese/06-quality-assurance/advanced-node-and-express/authentication-with-socket.io.md +++ b/curriculum/challenges/chinese/06-quality-assurance/advanced-node-and-express/authentication-with-socket.io.md @@ -65,7 +65,7 @@ console.log('user ' + socket.request.user.username + ' connected'); 它将在服务器控制台记录已连接的用户！ -完成以上要求后，请提交你的页面链接。 If you're running into errors, you can check out the project up to this point. +完成以上要求后，请提交你的页面链接。 如果你在运行时遇到错误，你可以查看已完成的项目。 # --hints-- diff --git a/curriculum/challenges/chinese/06-quality-assurance/advanced-node-and-express/clean-up-your-project-with-modules.md b/curriculum/challenges/chinese/06-quality-assurance/advanced-node-and-express/clean-up-your-project-with-modules.md index 679f64f5f7e..990432c7dbf 100644 --- a/curriculum/challenges/chinese/06-quality-assurance/advanced-node-and-express/clean-up-your-project-with-modules.md +++ b/curriculum/challenges/chinese/06-quality-assurance/advanced-node-and-express/clean-up-your-project-with-modules.md @@ -24,9 +24,9 @@ module.exports = function (app, myDataBase) { 如果在这些步骤后没有报错，那么你已成功地从 server.js 文件中分离出了路由文件（**除了 catch block 中的路由**）！ -Do the same thing in your `auth.js` file with all of the things related to authentication such as the serialization and the setting up of the local strategy and erase them from your server file. 请正确添加依赖，并在 server.js 中调用 `auth(app, myDataBase)`。 +在你的 `auth.js` 文件中做同样的事情，所有与认证有关的事情，如序列化和本地策略的设置，并从你的服务器文件中删除它们。 请正确添加依赖，并在 server.js 中调用 `auth(app, myDataBase)`。 -完成上述要求后，请提交你的页面链接。 If you're running into errors, you can check out an example of the completed project. +完成上述要求后，请提交你的页面链接。 如果你在运行时出现错误，你可以查看已完成的项目示例。 # --hints-- diff --git a/curriculum/challenges/chinese/06-quality-assurance/advanced-node-and-express/handle-a-disconnect.md b/curriculum/challenges/chinese/06-quality-assurance/advanced-node-and-express/handle-a-disconnect.md index 0a8475e823b..5a8b1bcd1f2 100644 --- a/curriculum/challenges/chinese/06-quality-assurance/advanced-node-and-express/handle-a-disconnect.md +++ b/curriculum/challenges/chinese/06-quality-assurance/advanced-node-and-express/handle-a-disconnect.md @@ -18,11 +18,11 @@ socket.on('disconnect', () => { }); ``` -To make sure clients continuously have the updated count of current users, you should decrease `currentUsers` by 1 when the disconnect happens then emit the `'user count'` event with the updated count. +确保客户端不断更新当前用户的数量，当断开连接发生时，你应该在 `currentUsers` 上减去 1，然后发送 `'user count'` 事件和更新的计数。 **注意：**和 `'disconnect'` 类似，所有 socket 可以发送到服务器的事件，我们都应该在有 “socket” 定义的连接监听器里处理。 -完成上述要求后，请提交你的页面链接。 If you're running into errors, you can check out the project completed up to this point. +完成上述要求后，请提交你的页面链接。 如果你在运行时遇到错误，你可以查看已完成的项目。 # --hints-- @@ -37,7 +37,7 @@ async (getUserInput) => { } ``` -Your client should be listening for `'user count'` event. +你的客户端应该监听 `'user count'` 事件。 ```js async (getUserInput) => { diff --git a/curriculum/challenges/chinese/06-quality-assurance/advanced-node-and-express/hashing-your-passwords.md b/curriculum/challenges/chinese/06-quality-assurance/advanced-node-and-express/hashing-your-passwords.md index 964ace015f0..94d7669b312 100644 --- a/curriculum/challenges/chinese/06-quality-assurance/advanced-node-and-express/hashing-your-passwords.md +++ b/curriculum/challenges/chinese/06-quality-assurance/advanced-node-and-express/hashing-your-passwords.md @@ -12,9 +12,9 @@ dashedName: hashing-your-passwords `bcrypt@~5.0.0` 已被添加为依赖项，在你的服务器中请求它。 你需要在两个步骤中使用哈希运算：注册和保存新账户，以及登录时检查密码是否正确。 -Currently on your registration route, you insert a user's plaintext password into the database like so: `password: req.body.password`. Hash the passwords instead by adding the following before your database logic: `const hash = bcrypt.hashSync(req.body.password, 12);`, and replacing the `req.body.password` in the database saving with just `password: hash`. +目前在你的注册路径上，你将把用户的纯文本密码插入数据库中：`password: req.body.password`。 通过在你的数据库逻辑前添加 `const hash = bcrypt.hashSync(req.body.password, 12);`，并在数据库存储中将 `req.body.password` 替换为 `password: hash`，来哈希密码。 -On your authentication strategy, you check for the following in your code before completing the process: `if (password !== user.password) return done(null, false);`. 现在存储的密码 `user.password` 已经是哈希值了。 在对现有代码进行修改前，注意目前的语句是如何检查如果密码**不**匹配，就返回未认证的。 With this in mind, change that code to look as follows to properly check the password entered against the hash: +在你的验证策略上，你在完成过程之前在代码中检查：`if (password !== user.password) return done(null, false);`。 现在存储的密码 `user.password` 已经是哈希值了。 在对现有代码进行修改前，注意目前的语句是如何检查如果密码**不**匹配，就返回未认证的。 考虑到这一点，将该代码修改如下，以便根据哈希值正确检查输入的密码。 ```js if (!bcrypt.compareSync(password, user.password)) { @@ -22,9 +22,9 @@ if (!bcrypt.compareSync(password, user.password)) { } ``` -That is all it takes to implement one of the most important security features when you have to store passwords. +当你必须存储密码时，这就是实现最重要的安全功能之一的全部内容。 -完成上述要求后，请提交你的页面链接。 If you're running into errors, you can check out the project completed up to this point. +完成上述要求后，请提交你的页面链接。 如果你在运行时遇到错误，你可以查看已完成的项目。 # --hints-- diff --git a/curriculum/challenges/chinese/06-quality-assurance/advanced-node-and-express/how-to-put-a-profile-together.md b/curriculum/challenges/chinese/06-quality-assurance/advanced-node-and-express/how-to-put-a-profile-together.md index 633906d437b..1f60322eb64 100644 --- a/curriculum/challenges/chinese/06-quality-assurance/advanced-node-and-express/how-to-put-a-profile-together.md +++ b/curriculum/challenges/chinese/06-quality-assurance/advanced-node-and-express/how-to-put-a-profile-together.md @@ -8,29 +8,29 @@ dashedName: how-to-put-a-profile-together # --description-- -Now that you can ensure the user accessing the `/profile` is authenticated, you can use the information contained in `req.user` on your page. +现在你可以确保访问 `/profile` 的用户身份已被验证，你可以使用你的页面上包含在 `req.user` 中的信息。 -Pass an object containing the property `username` and value of `req.user.username` as the second argument for the `render` method of the profile view. +传递一个包含值为 `req.user.username` 的属性 `username` 的对象，作为个人主页视图的 `render` 方法的第二个参数。 -Then, go to your `profile.pug` view, and add the following line below the existing `h1` element, and at the same level of indentation: +然后转到你的 `profile.pug` 视图，在现有 `h1` 元素下添加以下行，并且在同一级别缩进： ```pug h2.center#welcome Welcome, #{username}! ``` -This creates an `h2` element with the class `center` and id `welcome` containing the text `Welcome,` followed by the username. +这创建了一个 `h2` 元素，具有 `center` 类和包含文本 `Welcome,` 和用户名的 id `welcome`。 -Also, in `profile.pug`, add a link referring to the `/logout` route, which will host the logic to unauthenticate a user: +另外，在 `profile.pug`中，添加一个指向 `/logout` 路由的链接，它将托管取消用户认证的逻辑： ```pug a(href='/logout') Logout ``` -Submit your page when you think you've got it right. If you're running into errors, you can check out the project completed up to this point. +完成之后，提交你的页面链接。 如果你在运行时遇到错误，你可以查看已完成的项目。 # --hints-- -You should correctly add a Pug render variable to `/profile`. +你应该正确地在 `/profile` 中添加一个 Pug 渲染变量。 ```js async (getUserInput) => { diff --git a/curriculum/challenges/chinese/06-quality-assurance/advanced-node-and-express/how-to-use-passport-strategies.md b/curriculum/challenges/chinese/06-quality-assurance/advanced-node-and-express/how-to-use-passport-strategies.md index 94ee41e70b4..2bc1f315642 100644 --- a/curriculum/challenges/chinese/06-quality-assurance/advanced-node-and-express/how-to-use-passport-strategies.md +++ b/curriculum/challenges/chinese/06-quality-assurance/advanced-node-and-express/how-to-use-passport-strategies.md @@ -8,23 +8,23 @@ dashedName: how-to-use-passport-strategies # --description-- -In the `index.pug` file supplied, there is a login form. It is hidden because of the inline JavaScript `if showLogin` with the form indented after it. +在提供的 `index.pug` 文件中，有一个登录表格。 它被隐藏了，因为内联的 JavaScript `if showLogin` 和在它之后缩进的表单。 -In the `res.render` for that page, add a new variable to the object, `showLogin: true`. When you refresh your page, you should then see the form! This form is set up to **POST** on `/login`. So, this is where you should set up to accept the POST request and authenticate the user. +在页面的 `res.render` 中，为对象添加一个新变量：`showLogin: true`。 当你刷新你的页面时，应该能看到表单！ 此表单被设置为 `/login` 上的 **POST**。 所以，你应该在这里设置接受 POST 请求并认证用户。 -For this challenge, you should add the route `/login` to accept a POST request. To authenticate on this route, you need to add a middleware to do so before then sending a response. This is done by just passing another argument with the middleware before with your response. The middleware to use is `passport.authenticate('local')`. +对于这个挑战，你应该添加路由 `/login` 来接受 POST 请求。 要验证此路由，你需要添加一个中间件，然后发送回复。 这可以通过在你的响应之前向中间件传递另一个参数来实现。 要使用的中间件是 `passport.authenticate('local')`。 -`passport.authenticate` can also take some options as an argument such as `{ failureRedirect: '/' }` which is incredibly useful, so be sure to add that in as well. Add a response after using the middleware (which will only be called if the authentication middleware passes) that redirects the user to `/profile`. Add that route, as well, and make it render the view `profile.pug`. +`passport.authenticate` 也可以把一些选项作为参数，例如 `{ failureRedirect: '/' }`，这非常有用，因此也要确保增加这一点。 在使用中间件后添加一个响应（只有在认证中间件通过后才会被调用），将用户重定向到 `/profile`。 添加该路由，让它呈现视图 `profile.pug`。 -If the authentication was successful, the user object will be saved in `req.user`. +如果认证成功，用户对象将被保存在 `req.user`。 -At this point, if you enter a username and password in the form, it should redirect to the home page `/`, and the console of your server should display `'User {USERNAME} attempted to log in.'`, since we currently cannot login a user who isn't registered. +现在，如果你在表单中输入用户名和密码，它应该重定向到主页 `/`，你的服务器的控制台应该显示 `'User {USERNAME} attempted to log in.'`，因为目前未注册的用户无法登录。 -Submit your page when you think you've got it right. If you're running into errors, you can check out the project completed up to this point. +完成后，提交你的页面链接。 如果你在运行时遇到错误，可以查看已完成的项目。 # --hints-- -All steps should be correctly implemented in `server.js`. +所有步骤都应该在 `server.js` 中正确实现。 ```js async (getUserInput) => { @@ -49,7 +49,7 @@ async (getUserInput) => { } ``` -A POST request to `/login` should correctly redirect to `/`. +`/login` 的 POST 请求应该正确重定向到 `/`。 ```js async (getUserInput) => { diff --git a/curriculum/challenges/chinese/06-quality-assurance/advanced-node-and-express/implement-the-serialization-of-a-passport-user.md b/curriculum/challenges/chinese/06-quality-assurance/advanced-node-and-express/implement-the-serialization-of-a-passport-user.md index e7655ee059e..95d3782c9c8 100644 --- a/curriculum/challenges/chinese/06-quality-assurance/advanced-node-and-express/implement-the-serialization-of-a-passport-user.md +++ b/curriculum/challenges/chinese/06-quality-assurance/advanced-node-and-express/implement-the-serialization-of-a-passport-user.md @@ -8,11 +8,11 @@ dashedName: implement-the-serialization-of-a-passport-user # --description-- -You are not loading an actual user object since the database is not set up. Connect to the database once, when you start the server, and keep a persistent connection for the full life-cycle of the app. To do this, add your database's connection string (for example: `mongodb+srv://:@cluster0-jvwxi.mongodb.net/?retryWrites=true&w=majority`) to the environment variable `MONGO_URI`. 我们会在 `connection.js` 文件中调用它。 +你没有加载一个实际的用户对象，因为数据库没有设置好。 当你启动服务器时，连接到数据库一次，并在应用程序的整个生命周期中保持持久连接。 为此，你需要在环境变量 `MONGO_URI` 中添加你的数据库连接字符串（比如：`mongodb+srv://:@cluster0-jvwxi.mongodb.net/?retryWrites=true&w=majority`）。 我们会在 `connection.js` 文件中调用它。 -*If you are having issues setting up a free database on MongoDB Atlas, check out this tutorial.* +*如果你在 MongoDB Atlas 设置免费数据库时遇到问题，请查看这个教程。* -Now you want to connect to your database, then start listening for requests. The purpose of this is to not allow requests before your database is connected or if there is a database error. To accomplish this, encompass your serialization and app routes in the following code: +现在你想要连接到数据库，然后开始监听请求。 这样做的目的是在连接数据库之前或者出现数据库错误时，不接收任何请求。 要实现这一点，你需要在以下代码中包含序列化和应用的路由： ```javascript myDB(async client => { @@ -40,7 +40,7 @@ myDB(async client => { 记得要取消 `deserializeUser` 中 `myDataBase` 的注释，并把 `doc` 添加到 `done(null, null)`。 -完成上述要求后，请提交你的页面链接。 If you're running into errors, you can check out the project completed up to this point. +完成上述要求后，请提交你的页面链接。 如果你在运行时遇到错误，你可以查看已完成的项目。 # --hints-- diff --git a/curriculum/challenges/chinese/06-quality-assurance/advanced-node-and-express/implementation-of-social-authentication-ii.md b/curriculum/challenges/chinese/06-quality-assurance/advanced-node-and-express/implementation-of-social-authentication-ii.md index ae93dd7ceb7..87d302fa8f5 100644 --- a/curriculum/challenges/chinese/06-quality-assurance/advanced-node-and-express/implementation-of-social-authentication-ii.md +++ b/curriculum/challenges/chinese/06-quality-assurance/advanced-node-and-express/implementation-of-social-authentication-ii.md @@ -1,6 +1,6 @@ --- id: 589a69f5f9fc0f352b528e71 -title: Implementation of Social Authentication II +title: 实现社交账号认证 II challengeType: 2 forumTopicId: 301557 dashedName: implementation-of-social-authentication-ii @@ -12,7 +12,7 @@ dashedName: implementation-of-social-authentication-ii 为了设置 GitHub 策略，我们需要在 Passport 中使用实例化的 `GitHubStrategy`，它可以接收两个参数：一个对象（包括 `clientID`、`clientSecret` 和 `callbackURL`），以及一个回调函数。在这个回调函数中，我们要处理验证成功时，判断用户是否已经在数据库中存在的逻辑，以及在用户数据库对象中最初保存哪些字段。 这种处理方式适用于绝大部分第三方验证策略，但有些策略会需要我们提供更多的信息，详情请参考相关策略的 GitHub README。 例如，Google 的验证策略会要求你提供一个 *scope*，用于标示用户成功登录后，你需要从返回的对象中获取那些信息。以及，这也需要经过用户同意，你才可以获取到。 -The current strategy you are implementing authenticates users using a GitHub account and OAuth 2.0 tokens. 创建应用程序时获得的客户 ID 和密码在创建策略时作为选项提供。 策略还需要 `verify` 回调，接收访问令牌和可选刷新令牌， 以及包含认证用户的 GitHub 资料的 `profile`。 `verify` 回调必须调用 `cb` 提供用户完成验证。 +你目前实施的策略是使用 GitHub 账户和 OAuth 2.0 令牌来认证用户。 创建应用程序时获得的客户 ID 和密码在创建策略时作为选项提供。 策略还需要 `verify` 回调，接收访问令牌和可选刷新令牌， 以及包含认证用户的 GitHub 资料的 `profile`。 `verify` 回调必须调用 `cb` 提供用户完成验证。 你的新策略应该是这样的： @@ -31,7 +31,7 @@ passport.use(new GitHubStrategy({ 目前，你的验证部分不会成功。由于没有数据库的逻辑和回调函数，你的代码目前还会报错。但如果你试一试，就可以在控制台里看到输出了你的 GitHub 个人信息。 -完成上述要求后，请提交你的页面链接。 If you're running into errors, you can check out the project completed up to this point. +完成上述要求后，请提交你的页面链接。 如果你在运行时遇到错误，你可以查看已完成的项目。 # --hints-- diff --git a/curriculum/challenges/chinese/06-quality-assurance/advanced-node-and-express/implementation-of-social-authentication-iii.md b/curriculum/challenges/chinese/06-quality-assurance/advanced-node-and-express/implementation-of-social-authentication-iii.md index d04827d676a..9bdb4b938a6 100644 --- a/curriculum/challenges/chinese/06-quality-assurance/advanced-node-and-express/implementation-of-social-authentication-iii.md +++ b/curriculum/challenges/chinese/06-quality-assurance/advanced-node-and-express/implementation-of-social-authentication-iii.md @@ -41,9 +41,9 @@ myDataBase.findOneAndUpdate( `findOneAndUpdate` 的作用是在数据库中查询对象并更新， 如果对象不存在，将插入对象，然后我们可以在回调方法里获取到插入的新对象。 在这个例子中，我们会设置 `last_login`，而且总会为 `login_count` 加 `1`。只有在插入一个新对象（新用户）时，我们才会初始化这些字段。 另外，还需要注意默认值的使用。 有时返回的用户信息可能不全，可能是因为用户没有填写，也可能是因为用户选择不公开一部分信息。 在这种情况下，我们需要进行相应的处理，以防我们的 app 报错。 -You should be able to login to your app now. Try it! +你现在应该可以登录你的应用了， 试试吧！ -完成上述要求后，你可以在下方提交你的页面链接。 If you're running into errors, you can check out the project completed up to this point. +完成上述要求后，你可以在下方提交你的页面链接。 如果你在运行时遇到错误，可以查看已完成的项目。 # --hints-- diff --git a/curriculum/challenges/chinese/06-quality-assurance/advanced-node-and-express/implementation-of-social-authentication.md b/curriculum/challenges/chinese/06-quality-assurance/advanced-node-and-express/implementation-of-social-authentication.md index c114d8fa28b..d6b91f25f93 100644 --- a/curriculum/challenges/chinese/06-quality-assurance/advanced-node-and-express/implementation-of-social-authentication.md +++ b/curriculum/challenges/chinese/06-quality-assurance/advanced-node-and-express/implementation-of-social-authentication.md @@ -1,6 +1,6 @@ --- id: 589a69f5f9fc0f352b528e70 -title: Implementation of Social Authentication +title: 实现社交账号认证 challengeType: 2 forumTopicId: 301559 dashedName: implementation-of-social-authentication @@ -10,19 +10,19 @@ dashedName: implementation-of-social-authentication 在应用中这种验证的基本路径是： -1. User clicks a button or link sending them to your route to authenticate using a specific strategy (e.g. GitHub). +1. 用户点击一个按钮或链接，访问你的路由，使用特定的策略（例如 GitHub）进行认证。 2. 需要在路由中调用 `passport.authenticate('github')`，跳转至 GitHub 验证页面。 -3. 页面跳转到 GitHub 上，如果用户未登录 GitHub，就需要在这里进行登录。 It then asks them to approve access to their profile from your app. -4. The user is then returned to your app at a specific callback url with their profile if they are approved. +3. 页面跳转到 GitHub 上，如果用户未登录 GitHub，就需要在这里进行登录。 然后它要求他们批准从你的应用程序访问他们的个人资料。 +4. 如果用户被批准，他们会在一个特定的回调 url 上带着他们的个人资料返回到你的应用程序。 5. 验证已完成。我们的应用需要查询这个用户是否已经存在。如果是新用户，那我们需要把用户信息存储到数据库。 -在 OAuth 验证策略中，我们至少需要提供 *Client ID* 和 *Client Secret*，这样第三方平台就会获悉验证请求的来源，以及这个来源是否有效。 为此，需要去我们使用的第三方验证平台（比如 GitHub）获取这两个字段的值。 注意，我们获取到的这个值是唯一的，仅对我们的当前 app 有效——**因此，千万不要分享给别人**，更不要上传到公共仓库或者直接写在代码里。 通常，我们会把它们放在 `.env` 文件里，并通过 `process.env.GITHUB_CLIENT_ID` 获取。 For this challenge you are going to use the GitHub strategy. +在 OAuth 验证策略中，我们至少需要提供 *Client ID* 和 *Client Secret*，这样第三方平台就会获悉验证请求的来源，以及这个来源是否有效。 为此，需要去我们使用的第三方验证平台（比如 GitHub）获取这两个字段的值。 注意，我们获取到的这个值是唯一的，仅对我们的当前 app 有效——**因此，千万不要分享给别人**，更不要上传到公共仓库或者直接写在代码里。 通常，我们会把它们放在 `.env` 文件里，并通过 `process.env.GITHUB_CLIENT_ID` 获取。 在这个挑战中，你要使用 GitHub 策略。 -Follow these instructions to obtain your *Client ID and Secret* from GitHub. Set the homepage URL to your Replit homepage (**not the project code's URL**), and set the callback URL to the same homepage URL with `/auth/github/callback` appended to the end. Save the client ID and your client secret in your project's `.env` file as `GITHUB_CLIENT_ID` and `GITHUB_CLIENT_SECRET`. +按照这些说明从 GitHub 获取你的 *客户端 ID 和密钥*。 将主页 URL 设置为你的 Replit 主页（**而不是项目代码的 URL**），并将回调 URL 设置为相同的主页 URL，并在末尾添加 `/auth/github/callback`。 将客户端 ID 和你的客户端密码保存到你的项目的 `.env`，作为 `GITHUB_CLIENT_ID` 和 `GITHUB_CLIENT_SECRET`。 -In your `routes.js` file, add `showSocialAuth: true` to the homepage route, after `showRegistration: true`. Now, create 2 routes accepting GET requests: `/auth/github` and `/auth/github/callback`. The first should only call passport to authenticate `'github'`. The second should call passport to authenticate `'github'` with a failure redirect to `/`, and then if that is successful redirect to `/profile` (similar to your last project). +在你的 `routes.js` 文件中，添加 `showSocialAuth: true` 到主页路由，在 `showRegistration: true` 的后面。 现在，创建两个接收 GET 请求的路由：`/auth/github` 和 `/auth/github/callback`。 第一个应该只调用 passport 来验证 `'github'`。 第二个应该调用 passport 来验证 `'github'`，失败后重定向到 `/`，然后如果成功则重定向到 `/profile`（与你的上一个项目类似）。 -An example of how `/auth/github/callback` should look is similar to how you handled a normal login: +`/auth/github/callback` 的例子应该与你处理正常登录的方式相似： ```js app.route('/login') @@ -31,11 +31,11 @@ app.route('/login') }); ``` -Submit your page when you think you've got it right. If you're running into errors, you can check out the project up to this point. +完成之后，提交你的页面链接。 如果你在运行时遇到错误，你可以查看已完成的项目。 # --hints-- -Route `/auth/github` should be correct. +路由 `/auth/github` 应该是正确的。 ```js async (getUserInput) => { @@ -66,7 +66,7 @@ async (getUserInput) => { } ``` -Route `/auth/github/callback` should be correct. +路由 `/auth/github/callback` 应该是正确的。 ```js async (getUserInput) => { diff --git a/curriculum/challenges/chinese/06-quality-assurance/advanced-node-and-express/logging-a-user-out.md b/curriculum/challenges/chinese/06-quality-assurance/advanced-node-and-express/logging-a-user-out.md index 8ff70cc72a7..b325177b29f 100644 --- a/curriculum/challenges/chinese/06-quality-assurance/advanced-node-and-express/logging-a-user-out.md +++ b/curriculum/challenges/chinese/06-quality-assurance/advanced-node-and-express/logging-a-user-out.md @@ -8,9 +8,9 @@ dashedName: logging-a-user-out # --description-- -创建退出登录的逻辑是比较简单的。 The route should just unauthenticate the user, and redirect to the home page instead of rendering any view. +创建退出登录的逻辑是比较简单的。 路由应该取消用户的认证，并重定向到主页，而不是渲染任何视图。 -In passport, unauthenticating a user is as easy as just calling `req.logout()` before redirecting. Add this `/logout` route to do that: +在 passport 里，只需要在重定向前调用 `req.logout()` 即可完成用户的退出登录。 添加 `/logout` 路由来实现： ```js app.route('/logout') @@ -20,7 +20,7 @@ app.route('/logout') }); ``` -You may have noticed that you are not handling missing pages (404). 在 Node 中我们通常会用如下的中间件来处理。 请在所有路由之后添加这段代码： +你可能已经注意到我们还没有处理 404 错误，这个错误码代表页面无法找到。 在 Node 中我们通常会用如下的中间件来处理。 请在所有路由之后添加这段代码： ```js app.use((req, res, next) => { @@ -30,7 +30,7 @@ app.use((req, res, next) => { }); ``` -完成上述要求后，请提交你的页面链接。 If you're running into errors, you can check out the project completed up to this point. +完成上述要求后，请提交你的页面链接。 如果你在运行时遇到错误，你可以查看已完成的项目。 # --hints-- @@ -49,7 +49,7 @@ async (getUserInput) => { } ``` -`/logout` should redirect to the home page. +`/logout` 应重定向到主页。 ```js async (getUserInput) => { diff --git a/curriculum/challenges/chinese/06-quality-assurance/advanced-node-and-express/registration-of-new-users.md b/curriculum/challenges/chinese/06-quality-assurance/advanced-node-and-express/registration-of-new-users.md index a383ae476e1..934140ae79e 100644 --- a/curriculum/challenges/chinese/06-quality-assurance/advanced-node-and-express/registration-of-new-users.md +++ b/curriculum/challenges/chinese/06-quality-assurance/advanced-node-and-express/registration-of-new-users.md @@ -8,20 +8,20 @@ dashedName: registration-of-new-users # --description-- -Now you need to allow a new user on your site to register an account. In the `res.render` for the home page add a new variable to the object passed along - `showRegistration: true`. When you refresh your page, you should then see the registration form that was already created in your `index.pug` file. This form is set up to **POST** on `/register`, so create that route and have it add the user object to the database by following the logic below. +现在你需要允许你网站上的新用户注册一个账户。 在主页的 `res.render` 中，给传递的对象添加一个新的变量——`showRegistration: true`。 当你刷新页面时，你应该看到已经在 `index.pug` 文件中创建的注册表格。 这个表单被设置为在 `/register` 上使用 **POST** 方法，因此根据下面的逻辑创建路由并将用户对象添加到数据库中。 -The logic of the registration route should be as follows: +注册路由的逻辑应如下： -1. Register the new user -2. Authenticate the new user -3. Redirect to `/profile` +1. 注册新用户 +2. 验证新用户 +3. 重定向到 `/profile` -The logic of step 1 should be as follows: +第 1 步的逻辑应如下： -1. Query database with `findOne` -2. If there is an error, call `next` with the error -3. If a user is returned, redirect back to home -4. If a user is not found and no errors occur, then `insertOne` into the database with the username and password. As long as no errors occur there, call `next` to go to step 2, authenticating the new user, which you already wrote the logic for in your `POST /login` route. +1. 使用 `findOne` 查询数据库 +2. 如果出现错误，调用 `next` 并传入错误对象。 +3. 如果用户结果返回，则重定向至主页 +4. 如果找不到用户并且没有发生错误，那么使用 `insertOne` 在数据库中插入用户名和密码。 只要没有发生错误，就调用 `next` 进行第 2 步，认证新用户，即你已经在 `POST /login` 路由中编写的逻辑。 ```js app.route('/register') @@ -56,13 +56,13 @@ app.route('/register') ); ``` -完成上述要求后，请提交你的页面链接。 If you're running into errors, you can check out the project completed up to this point. +完成上述要求后，请提交你的页面链接。 如果你在运行时遇到错误，可以查看已完成的项目。 **注意：**接下来的挑战可能会在运行 *picture-in-picture*（画中画）模式的浏览器中出现问题。 如果你使用的线上 IDE 提供在 IDE 内预览 app 的功能，请考虑打开新的标签页预览。 # --hints-- -You should have a `/register` route and display a registration form on the home page. +你应该有 `/register` 路由并在主页上显示注册表单。 ```js async (getUserInput) => { diff --git a/curriculum/challenges/chinese/06-quality-assurance/advanced-node-and-express/send-and-display-chat-messages.md b/curriculum/challenges/chinese/06-quality-assurance/advanced-node-and-express/send-and-display-chat-messages.md index 513e3db402c..3100058d5f6 100644 --- a/curriculum/challenges/chinese/06-quality-assurance/advanced-node-and-express/send-and-display-chat-messages.md +++ b/curriculum/challenges/chinese/06-quality-assurance/advanced-node-and-express/send-and-display-chat-messages.md @@ -22,13 +22,13 @@ $('form').submit(function() { socket.emit('chat message', messageToSend); ``` -在服务端，我们需要监听包含 `message` 数据的 `'chat message'` 事件。 Once the event is received, it should emit the event `'chat message'` to all sockets using `io.emit`, sending a data object containing the `username` and `message`. +在服务端，我们需要监听包含 `message` 数据的 `'chat message'` 事件。 一旦接收到事件，服务端应该使用 `io.emit` 向所有套接字发出 `'chat message'` 事件，并发送包含 `username` 和 `message` 的数据对象。 -In `client.js`, you should now listen for event `'chat message'` and, when received, append a list item to `#messages` with the username, a colon, and the message! +在 `client.js` 中，你现在应该监听 `'chat message'` 事件，并在接收到事件后将用户名、冒号和消息添加到 `#messages` 的列表项中！ 至此，我们已经完成发送信息到所有客户端的功能。 -完成上述要求后，请提交你的页面链接。 If you're running into errors, you can check out the project completed up to this point. +完成上述要求后，请提交你的页面链接。 如果你在运行时遇到错误，可以查看已完成的项目。 # --hints-- diff --git a/curriculum/challenges/chinese/06-quality-assurance/advanced-node-and-express/serialization-of-a-user-object.md b/curriculum/challenges/chinese/06-quality-assurance/advanced-node-and-express/serialization-of-a-user-object.md index 0223b064528..ecfa270f9e3 100644 --- a/curriculum/challenges/chinese/06-quality-assurance/advanced-node-and-express/serialization-of-a-user-object.md +++ b/curriculum/challenges/chinese/06-quality-assurance/advanced-node-and-express/serialization-of-a-user-object.md @@ -10,20 +10,20 @@ dashedName: serialization-of-a-user-object 序列化和反序列化在身份认证中是很重要的概念。 序列化一个对象就是将其内容转换成一个体积很小的 *key*，后续可以通过它反序列化为原始对象。 这样，服务器就可以在用户未登录时识别用户，或者说给这个用户一个唯一标识，用户也不需要在每次访问不同页面时都给服务器发送用户名和密码。 -To set this up properly, you need to have a serialize function and a deserialize function. In Passport, these can be created with: +要正确设置此功能，你需要一个序列化的函数和一个反序列化函数。 在 Passport 中间件中，可以使用以下方法创建它们： ```javascript passport.serializeUser(cb); passport.deserializeUser(cb); ``` -The callback function passed to `serializeUser` is called with two arguments: the full user object, and a callback used by passport. +传递给 `serializeUser` 的回调函数接收两个参数：完整的用户对象和由 passport 使用的回调。 -The callback expects two arguments: An error, if any, and a unique key to identify the user that should be returned in the callback. You will use the user's `_id` in the object. This is guaranteed to be unique, as it is generated by MongoDB. +该回调需要两个参数：一个错误，以及应在回调中返回的一个用于识别用户的唯一键。 你将在对象中使用用户的 `_id`。 这是保证唯一的，因为它是由 MongoDB 生成的。 -Similarly, `deserializeUser` is called with two arguments: the unique key, and a callback function. +同样，`deserializeUser` 需要用两个参数调用：唯一的键值和回调函数。 -This callback expects two arguments: An error, if any, and the full user object. To get the full user object, make a query search for a Mongo `_id`, as shown below: +该回调需要两个参数：一个错误，以及完整的用户对象。 要获取完整的用户对象，请按如下方式进行 Mongo `_id` 查询： ```javascript @@ -38,19 +38,19 @@ passport.deserializeUser((id, done) => { }); ``` -Add the two functions above to your server. The `ObjectID` class comes from the `mongodb` package. `mongodb@~3.6.0` has already been added as a dependency. Declare this class with: +将上面的两个函数添加到你的服务器。 `ObjectID` 类来自 `mongodb` 包。 `mongodb@~3.6.0` 已经被添加为依赖项。 使用以下方式声明此类： ```javascript const { ObjectID } = require('mongodb'); ``` -The `deserializeUser` will throw an error until you set up the database connection. So, for now, comment out the `myDatabase.findOne` call, and just call `done(null, null)` in the `deserializeUser` callback function. +在设置数据库连接之前，`deserializeUser`将抛出错误。 因此，现在请在 `deserializeUser` 回调函数中注释掉 `myDatabase.findOne` 调用，只调用 `done(null, null)` 即可。 -Submit your page when you think you've got it right. If you're running into errors, you can check out the project completed up to this point. +当你觉得已经完成时提交你的页面。 如果你遇到错误，你可以查看已完成的项目。 # --hints-- -You should serialize user function correctly. +应该正确地序列化用户函数。 ```js async (getUserInput) => { @@ -70,7 +70,7 @@ async (getUserInput) => { } ``` -You should deserialize user function correctly. +应该正确地反序列化用户函数。 ```js async (getUserInput) => { @@ -90,7 +90,7 @@ async (getUserInput) => { } ``` -MongoDB should be a dependency. +MongoDB 应作为项目的依赖。 ```js async (getUserInput) => { @@ -105,7 +105,7 @@ async (getUserInput) => { } ``` -Mongodb should be properly required including the ObjectId. +应该正确请求 Mongodb，包括 ObjectId。 ```js async (getUserInput) => { diff --git a/curriculum/challenges/chinese/06-quality-assurance/advanced-node-and-express/set-up-a-template-engine.md b/curriculum/challenges/chinese/06-quality-assurance/advanced-node-and-express/set-up-a-template-engine.md index ae9a39626d3..68d9c938b7c 100644 --- a/curriculum/challenges/chinese/06-quality-assurance/advanced-node-and-express/set-up-a-template-engine.md +++ b/curriculum/challenges/chinese/06-quality-assurance/advanced-node-and-express/set-up-a-template-engine.md @@ -14,35 +14,35 @@ dashedName: set-up-a-template-engine - 使用我们在 Replit 上的初始化项目来完成这些挑战。 - 使用一个你选择的站点生成器来完成项目。 需要确定包含了我们 GitHub 仓库的所有文件。 -If you use Replit, follow these steps to set up the project: +如果你使用 Replit，请按照以下步骤设置项目： -- Start by importing the project on Replit. -- Next, you will see a `.replit` window. -- Select `Use run command` and click the `Done` button. +- 首先在 Replit 中导入项目。 +- 接着，你将看到一个 `.replit` 窗口。 +- 选择 `Use run command` 并点击 `Done` 按钮。 -When you are done, make sure a working demo of your project is hosted somewhere public. Then submit the URL to it in the `Solution Link` field. +当你完成后，请将一个确保正常运行的 demo（项目演示）托管在可以公开访问的平台上。 然后将 demo 的 URL 提交到 `Solution Link` 字段中。 -A template engine enables you to use static template files (such as those written in *Pug*) in your app. At runtime, the template engine replaces variables in a template file with actual values which can be supplied by your server. Then it transforms the template into a static HTML file that is sent to the client. This approach makes it easier to design an HTML page and allows for displaying variables on the page without needing to make an API call from the client. +模板引擎使你可以在应用程序中使用静态模板文件（例如用 *Pug* 编写的文件）。 在运行时，模版引擎会用服务端的真实数据替换掉模版文件中的变量。 然后将模版转译成发送给客户端的 HTML 静态文件。 这样可以轻松地构造 HTML 页面，允许在页面直接显示变量内容而不需要从客户端发送 API 请求。 -`pug@~3.0.0` has already been installed, and is listed as a dependency in your `package.json` file. +`pug@~3.0.0` 已经被安装，并且在你项目的 `package.json` 文件中作为依赖。 -Express needs to know which template engine you are using. Use the `set` method to assign `pug` as the `view engine` property's value: +Express 需要知道你正在使用哪个模板引擎。 使用 `set` 方法来分配 `pug` 作为 `view engine` 属性的值： ```javascript app.set('view engine', 'pug'); ``` -After that, add another `set` method that sets the `views` property of your `app` to point to the `./views/pug` directory. This tells Express to render all views relative to that directory. +在那之后， 添加另一个 `set` 方法来设置你的 `app` 的 `views` 属性，指向 `./views/pug` 目录。 这告诉 Express 要渲染所有与那个目录相关的视图。 -Finally, use `res.render()` in the route for your home page, passing `index` as the first argument. This will render the `pug` template. +最后，在主页的路由中使用 `res.render()`，传递 `index` 作为第一个参数。 这将渲染 `pug` 模板。 -If all went as planned, your app home page will no longer be blank. Instead, it will display a message indicating you've successfully rendered the Pug template! +如果全部按计划进行，你的应用主页将不再留空。 相反，它将显示一条消息，表明你已经成功渲染了Pug 模板！ -Submit your page when you think you've got it right. If you're running into errors, you can check out the project completed up to this point. +完成上述要求后，请提交你的页面链接。 如果你遇到错误，可以查看已完成的项目。 # --hints-- -Pug should be a dependency. +项目中应使用 Pug 作为依赖。 ```js async (getUserInput) => { @@ -57,7 +57,7 @@ async (getUserInput) => { } ``` -View engine should be Pug. +View 引擎应该是 Pug。 ```js async (getUserInput) => { @@ -68,7 +68,7 @@ async (getUserInput) => { } ``` -You should set the `views` property of the application to `./views/pug`. +你应该将应用程序的 `views` 属性设置为 `./views/pug`。 ```js async (getUserInput) => { @@ -79,7 +79,7 @@ async (getUserInput) => { } ``` -Use the correct ExpressJS method to render the index page from the response. +使用正确的 ExpressJS 方法渲染来自响应的索引页。 ```js async (getUserInput) => { @@ -94,7 +94,7 @@ async (getUserInput) => { } ``` -Pug should be working. +Pug 应该正常运行。 ```js async (getUserInput) => { diff --git a/curriculum/challenges/chinese/06-quality-assurance/advanced-node-and-express/set-up-passport.md b/curriculum/challenges/chinese/06-quality-assurance/advanced-node-and-express/set-up-passport.md index 2039e893239..0f299e025f1 100644 --- a/curriculum/challenges/chinese/06-quality-assurance/advanced-node-and-express/set-up-passport.md +++ b/curriculum/challenges/chinese/06-quality-assurance/advanced-node-and-express/set-up-passport.md @@ -8,13 +8,13 @@ dashedName: set-up-passport # --description-- -It's time to set up *Passport* so you can finally start allowing a user to register or log in to an account. In addition to Passport, you will use Express-session to handle sessions. Express-session has a ton of advanced features you can use, but for now you are just going to use the basics. Using this middleware saves the session id as a cookie in the client, and allows us to access the session data using that id on the server. This way, you keep personal account information out of the cookie used by the client to tell to your server clients are authenticated and keep the *key* to access the data stored on the server. +现在我们来创建 *Passport*，最终我们需要用它来实现用户注册和登录。 除了 Passport，我们还会用 Express-session 来处理 session（会话）。 Express-session 有许多高级特性供你使用，但你暂时只需要了解其基础功能。 在客户端，我们可以用这个中间件把 session id 储存到 cookie。同时，我们可以在服务器上通过这个 id 访问 session 数据。 通过这种方式，你无需把用户的个人账号信息存到 cookie，来完成用户的验证。只需要用这个 id 作为 *key* 来访问服务器上用户的数据即可。 `passport@~0.4.1` 和 `express-session@~1.17.1` 已经安装，并且在你的 `package.json` 文件中均被列为依赖项。 -You will need to set up the session settings and initialize Passport. First, create the variables `session` and `passport` to require `express-session` and `passport` respectively. +现在，你需要配置 session 并初始化 Passport。 首先，创建变量 `session` 和 `passport` 以便分别请求 `express-session` 和 `passport`。 -Then, set up your Express app to use the session by defining the following options: +然后，通过定义以下选项来设置你的 Express 应用程序来使用会话： ```javascript app.use(session({ @@ -25,15 +25,15 @@ app.use(session({ })); ``` -Be sure to add `SESSION_SECRET` to your `.env` file, and give it a random value. This is used to compute the hash used to encrypt your cookie! +请在 `.env` 文件中添加 `SESSION_SECRET`，并给它赋一个随机值。 这是用来计算用于加密你的 cookie 的哈希值的！ -After you do all that, tell your express app to **use** `passport.initialize()` and `passport.session()`. +在你做了所有这些后，告诉你的 Express 应用程序**使用** `passport.initialize()` 和 `passport.session()`。 -Submit your page when you think you've got it right. If you're running into errors, you can check out the project completed up to this point. +完成后，提交你的页面链接。 如果你遇到错误，可以查看已完成的项目。 # --hints-- -Passport and Express-session should be dependencies. +应添加 Passort 和 Express-session 作为依赖。 ```js async (getUserInput) => { @@ -53,7 +53,7 @@ async (getUserInput) => { } ``` -Dependencies should be correctly required. +依赖应正确引入。 ```js async (getUserInput) => { @@ -73,7 +73,7 @@ async (getUserInput) => { } ``` -Express app should use new dependencies. +Express app 可以使用新的依赖。 ```js async (getUserInput) => { @@ -85,7 +85,7 @@ async (getUserInput) => { } ``` -Session and session secret should be correctly set up. +应正确设置 session 和 session secret。 ```js async (getUserInput) => { diff --git a/curriculum/challenges/chinese/06-quality-assurance/advanced-node-and-express/set-up-the-environment.md b/curriculum/challenges/chinese/06-quality-assurance/advanced-node-and-express/set-up-the-environment.md index 965593e9615..366b62c56a7 100644 --- a/curriculum/challenges/chinese/06-quality-assurance/advanced-node-and-express/set-up-the-environment.md +++ b/curriculum/challenges/chinese/06-quality-assurance/advanced-node-and-express/set-up-the-environment.md @@ -19,7 +19,7 @@ const io = require('socket.io')(http); 现在我们的 *express 应用*已经包含了 *http* 服务，接下来我们需要监听 *http* 服务的事件。 为此，我们需要把 `app.listen` 更新为 `http.listen`。 -需要处理的第一件事是监听客户端的新连接。 on 关键字就是监听这个特定事件。 它需要 2 个参数：一个包含所发出事件标题的字符串，以及一个用于传递数据的函数。 In the case of our connection listener, use `socket` to define the data in the second argument. socket 就是指已连接到服务器的客户端。 +需要处理的第一件事是监听客户端的新连接。 on 关键字就是监听这个特定事件。 它需要 2 个参数：一个包含所发出事件标题的字符串，以及一个用于传递数据的函数。 在连接监听器中，我们用 `socket` 来定义第二个参数中的数据。 socket 就是指已连接到服务器的客户端。 为了可以监听服务器的连接事件，我们在数据库连接的部分加入如下代码： @@ -36,13 +36,13 @@ io.on('connection', socket => { let socket = io(); ``` -在这个文件中，我们没有定义 “io” 变量，但第一行的注释会阻止运行时产生的报错。 You have already added a reliable CDN to the Socket.IO library on the page in `chat.pug`. +在这个文件中，我们没有定义 “io” 变量，但第一行的注释会阻止运行时产生的报错。 你已经在 `chat.pug` 中在页面上为 Socket.IO 库添加了一个可靠的CDN。 -Now try loading up your app and authenticate and you should see in your server console `A user has connected`. +现在你可以重启一下你的 app，尝试一下验证用户，然后你应该会看到服务器的 console 里输出了 `A user has connected`。 **注意：**只有在连接到处于同一个 url/server 上的 socket 时，`io()`才可以正常执行。 如果需要连接到外部的 socket，就需要这样调用：`io.connect('URL');`。 -完成上述要求后，请提交你的页面链接。 If you're running into errors, you can check out the project completed up to this point. +完成上述要求后，请提交你的页面链接。 如果你遇到错误，可以查看已完成的项目。 # --hints-- diff --git a/curriculum/challenges/chinese/06-quality-assurance/advanced-node-and-express/use-a-template-engines-powers.md b/curriculum/challenges/chinese/06-quality-assurance/advanced-node-and-express/use-a-template-engines-powers.md index a214d129ced..f363f02d62c 100644 --- a/curriculum/challenges/chinese/06-quality-assurance/advanced-node-and-express/use-a-template-engines-powers.md +++ b/curriculum/challenges/chinese/06-quality-assurance/advanced-node-and-express/use-a-template-engines-powers.md @@ -12,9 +12,9 @@ dashedName: use-a-template-engines-powers 在 Pug 文件中，你可以用变量名来调用变量，比如写成 `#{variable_name}` 来实现行内调用，或像 `p=variable_name` 把元素与变量直接写在一起，这表示 p 元素的内容等价于这个变量。 -Pug is all about using whitespace and tabs to show nested elements and cutting down on the amount of code needed to make a beautiful site. +Pug 是关于使用空白和制表符来显示嵌套元素，并减少制作一个漂亮网站所需的代码量。 -Take the following Pug code for example: +以下面的 Pug 代码为例： ```pug head @@ -27,7 +27,7 @@ body p Get on it! ``` -The above yields the following HTML: +以上代码生成以下 HTML： ```html @@ -40,23 +40,23 @@ The above yields the following HTML: ``` -Your `index.pug` file included in your project, uses the variables `title` and `message`. +你的项目中的 `index.pug` 文件使用了变量 `title` 和 `message`。 -Pass those from your server to the Pug file by adding an object as a second argument to your `res.render` call with the variables and their values. Give the `title` a value of `Hello` and `message` a value of `Please log in`. +为了从服务器传递这些信息到 Pug 文件，你需要给 `res.render` 调用添加一个对象作为第二个参数，其中包含变量和对应的值。 给 `title` 一个值为 `Hello`，给 `message` 一个值为 `Please log in`。 -It should look like: +就像这样： ```javascript res.render('index', { title: 'Hello', message: 'Please log in' }); ``` -Now refresh your page, and you should see those values rendered in your view in the correct spot as laid out in your `index.pug` file! +现在刷新你的页面， 你应该看到这些值呈现在你的视图中正确位置，即 `index.pug` 文件中！ -Submit your page when you think you've got it right. If you're running into errors, you can check out the project completed up to this point. +完成上述要求后，请提交你的页面链接。 如果你在运行时遇到错误，你可以查看已完成的项目。 # --hints-- -Pug should correctly render variables. +Pug 应正确地展示变量。 ```js async (getUserInput) => { diff --git a/curriculum/challenges/chinese/06-quality-assurance/quality-assurance-and-testing-with-chai/learn-how-javascript-assertions-work.md b/curriculum/challenges/chinese/06-quality-assurance/quality-assurance-and-testing-with-chai/learn-how-javascript-assertions-work.md index 861c78911b8..7e63305eaf8 100644 --- a/curriculum/challenges/chinese/06-quality-assurance/quality-assurance-and-testing-with-chai/learn-how-javascript-assertions-work.md +++ b/curriculum/challenges/chinese/06-quality-assurance/quality-assurance-and-testing-with-chai/learn-how-javascript-assertions-work.md @@ -14,21 +14,21 @@ dashedName: learn-how-javascript-assertions-work - 使用我们在 Replit 上的初始化项目来完成这些挑战。 - 使用一个你喜欢的站点生成器来完成项目。 需要确定包含了我们 GitHub 仓库的所有文件。 -If you use Replit, follow these steps to set up the project: +如果你使用 Replit，请按照以下步骤设置项目： -- Start by importing the project on Replit. -- Next, you will see a `.replit` window. -- Select `Use run command` and click the `Done` button. +- 首先在 Replit 中导入项目。 +- 接着，你将看到一个 `.replit` 窗口。 +- 选择 `Use run command` 并点击 `Done` 按钮。 -When you are done, make sure a working demo of your project is hosted somewhere public. Then submit the URL to it in the `Solution Link` field. +当你完成后，请将一个确保正常运行的 demo（项目演示）托管在可以公开访问的平台上。 然后将 demo 的 URL 提交到 `Solution Link` 字段中。 # --instructions-- -Within `tests/1_unit-tests.js` under the test labelled `#1` in the `Basic Assertions` suite, change each `assert` to either `assert.isNull` or `assert.isNotNull` to make the test pass (should evaluate to `true`). Do not alter the arguments passed to the asserts. +在 `tests/1_unit-tests.js` 文件下 `Basic Assertions` suite 内注释为 `#1` 的地方，将每一个 `assert` 更改为 `assert.isNull` 或 `assert.isNotNull`，以使测试通过（应该返回 `true`）。 不要修改传入断言的参数。 # --hints-- -All tests should pass. +应通过所有测试。 ```js (getUserInput) => @@ -42,7 +42,7 @@ All tests should pass. ); ``` -You should choose the correct method for the first assertion - `isNull` vs. `isNotNull`. +请为第一个断言选择正确的方法——`isNull` 或 `isNotNull`。 ```js (getUserInput) => @@ -56,7 +56,7 @@ You should choose the correct method for the first assertion - `isNull` vs. `isN ); ``` -You should choose the correct method for the second assertion - `isNull` vs. `isNotNull`. +请为第二个断言选择正确的方法——`isNull` 或 `isNotNull`。 ```js (getUserInput) => diff --git a/curriculum/challenges/chinese/06-quality-assurance/quality-assurance-projects/american-british-translator.md b/curriculum/challenges/chinese/06-quality-assurance/quality-assurance-projects/american-british-translator.md index 0fa9712aa37..97df76431bb 100644 --- a/curriculum/challenges/chinese/06-quality-assurance/quality-assurance-projects/american-british-translator.md +++ b/curriculum/challenges/chinese/06-quality-assurance/quality-assurance-projects/american-british-translator.md @@ -14,62 +14,62 @@ dashedName: american-british-translator - 使用我们在 Replit 上的初始化项目来完成你的项目。 - 使用您选择的站点生成器来完成项目。 并确保包含了我们 GitHub 仓库的所有文件。 -If you use Replit, follow these steps to set up the project: +如果你使用 Replit，请按照以下步骤设置项目： -- Start by importing the project on Replit. -- Next, you will see a `.replit` window. -- Select `Use run command` and click the `Done` button. +- 首先在 Replit 中导入项目。 +- 接着，你将看到一个 `.replit` 窗口。 +- 选择 `Use run command` 并点击 `Done` 按钮。 -When you are done, make sure a working demo of your project is hosted somewhere public. Then submit the URL to it in the `Solution Link` field. Optionally, also submit a link to your project's source code in the `GitHub Link` field. +当你完成后，请将一个确保正常运行的 demo（项目演示）托管在可以公开访问的平台上。 然后将 demo 的 URL 提交到 `Solution Link` 字段中。 也可以将项目的源码链接提交到 `GitHub Link` 字段中。 # --instructions-- -- All logic can go into `/components/translator.js` -- Complete the `/api/translate` route in `/routes/api.js` -- Create all of the unit/functional tests in `tests/1_unit-tests.js` and `tests/2_functional-tests.js` -- See the JavaScript files in `/components` for the different spelling and terms your application should translate -- To run the tests on Replit, set `NODE_ENV` to `test` without quotes in the `.env` file -- To run the tests in the console, use the command `npm run test`. To open the Replit console, press Ctrl+Shift+P (Cmd if on a Mac) and type "open shell" +- 所有逻辑都可以进入 `/components/translator.js` +- 在 `/routes/api.js` 中完成 `/api/translate` 路由 +- 在 `tests/1_unit-tests.js` 和 `tests/2_functional-tests.js` 中创建所有单元/功能测试 +- 查看 `/components` 中的 JavaScript 文件以获取应用程序应该翻译的条款以及不同的拼写 +- 在 `.env` 文件中将 `NODE_ENV` 设置为 `test`（没有引号），在 Replit 上运行测试 +- 使用 `npm run test` 命令在 console 中运行测试。 按 Ctrl+Shift+P（在 Mac 上是 Cmd+Shift+P），并输入“open shell”，打开 Replit 控制台 -Write the following tests in `tests/1_unit-tests.js`: +在 `tests/1_unit-tests.js` 中写下以下测试： -- Translate `Mangoes are my favorite fruit.` to British English -- Translate `I ate yogurt for breakfast.` to British English -- Translate `We had a party at my friend's condo.` to British English -- Translate `Can you toss this in the trashcan for me?` to British English -- Translate `The parking lot was full.` to British English -- Translate `Like a high tech Rube Goldberg machine.` to British English -- Translate `To play hooky means to skip class or work.` to British English -- Translate `No Mr. Bond, I expect you to die.` to British English -- Translate `Dr. Grosh will see you now.` to British English -- Translate `Lunch is at 12:15 today.` to British English -- Translate `We watched the footie match for a while.` to American English -- Translate `Paracetamol takes up to an hour to work.` to American English -- Translate `First, caramelise the onions.` to American English -- Translate `I spent the bank holiday at the funfair.` to American English -- Translate `I had a bicky then went to the chippy.` to American English -- Translate `I've just got bits and bobs in my bum bag.` to American English -- Translate `The car boot sale at Boxted Airfield was called off.` to American English -- Translate `Have you met Mrs Kalyani?` to American English -- Translate `Prof Joyner of King's College, London.` to American English -- Translate `Tea time is usually around 4 or 4.30.` to American English -- Highlight translation in `Mangoes are my favorite fruit.` -- Highlight translation in `I ate yogurt for breakfast.` -- Highlight translation in `We watched the footie match for a while.` -- Highlight translation in `Paracetamol takes up to an hour to work.` +- 将 `Mangoes are my favorite fruit.` 转换成英式英语 +- 将 `I ate yogurt for breakfast.` 转换成英式英语 +- 将 `We had a party at my friend's condo.` 转换成英式英语 +- 将 `Can you toss this in the trashcan for me?` 转换成英式英语 +- 将 `The parking lot was full.` 转换成英式英语 +- 将 `Like a high tech Rube Goldberg machine.` 转换成英式英语 +- 将 `To play hooky means to skip class or work.` 转换成英式英语 +- 将 `No Mr. Bond, I expect you to die.` 转换成英式英语 +- 将 `Dr. Grosh will see you now.` 转换成英式英语 +- 将 `Lunch is at 12:15 today.` 转换成英式英语 +- 将 `We watched the footie match for a while.` 转换成美式英语 +- 将 `Paracetamol takes up to an hour to work.` 转换成美式英语 +- 将 `First, caramelise the onions.` 转换成美式英语 +- 将 `I spent the bank holiday at the funfair.` 转换成美式英语 +- 将 `I had a bicky then went to the chippy.` 转换成美式英语 +- 将 `I've just got bits and bobs in my bum bag.` 转换成美式英语 +- 将 `The car boot sale at Boxted Airfield was called off.` 转换成美式英语 +- 将 `Have you met Mrs Kalyani?` 转换成美式英语 +- 将 `Prof Joyner of King's College, London.` 转换成美式英语 +- 将 `Tea time is usually around 4 or 4.30.` 转换成美式英语 +- 将 `Mangoes are my favorite fruit.` 里的转换高亮 +- 将 `I ate yogurt for breakfast.` 里的转换高亮 +- 将 `We watched the footie match for a while.` 里的转换高亮 +- 将 `Paracetamol takes up to an hour to work.` 里的转换高亮 -Write the following tests in `tests/2_functional-tests.js`: +在 `tests/2_functional-tests.js` 中编写下以下测试： -- Translation with text and locale fields: POST request to `/api/translate` -- Translation with text and invalid locale field: POST request to `/api/translate` -- Translation with missing text field: POST request to `/api/translate` -- Translation with missing locale field: POST request to `/api/translate` -- Translation with empty text: POST request to `/api/translate` -- Translation with text that needs no translation: POST request to `/api/translate` +- 翻译文本字段和本地化字段：POST 请求到 `/api/translate` +- 翻译文本字段和无效的本地化字段：POST 请求到 `/api/translate` +- 翻译缺失的文本字段：POST 请求到 `/api/translate` +- 翻译缺失的本地化字段：POST 请求到 `/api/translate` +- 翻译空的文本：POST 请求到 `/api/translate` +- 翻译无需翻译的文本：POST 请求到 `/api/translate` # --hints-- -I can provide my own project, not the example URL. +You should provide your own project, not the example URL. ```js (getUserInput) => { @@ -81,7 +81,7 @@ I can provide my own project, not the example URL. }; ``` -You can `POST` to `/api/translate` with a body containing `text` with the text to translate and `locale` with either `american-to-british` or `british-to-american`. The returned object should contain the submitted `text` and `translation` with the translated text. +可以向 `/api/translate` 发送 `POST` 请求，对请求体内的 `text` 文本进行翻译， `locale` 字段可以是 `american-to-british` 或 `british-to-american`。 返回的对象应该包含提交的 `text` 以及翻译的文本 `translation`。 ```js async (getUserInput) => { @@ -109,7 +109,7 @@ async (getUserInput) => { }; ``` -The `/api/translate` route should handle the way time is written in American and British English. For example, ten thirty is written as "10.30" in British English and "10:30" in American English. The `span` element should wrap the entire time string, i.e. `10:30`. +`/api/translate` 路由应该可以处理用英美方式英语写的时间。 例如，十点半英式英语写为 “10.30”，而美式英语写为 “10:30”。 `span` 元素应该包裹整个时间字符串，即 `10:30`。 ```js async (getUserInput) => { @@ -136,7 +136,7 @@ async (getUserInput) => { }; ``` -The `/api/translate` route should also handle the way titles/honorifics are abbreviated in American and British English. For example, Doctor Wright is abbreviated as "Dr Wright" in British English and "Dr. Wright" in American English. See `/components/american-to-british-titles.js` for the different titles your application should handle. +`/api/translate` 路由也应该处理美式英语和英式英语中头衔/尊称的缩写方式。 例如，Doctor Wright 在英式英语中缩写为 “Dr Wright”，在美式英语中缩写为 “Dr. Wright"”。 请参阅 `/components/american-to-british-titles.js`，了解程序应当处理的不同标题。 ```js async (getUserInput) => { @@ -163,7 +163,7 @@ async (getUserInput) => { }; ``` -Wrap any translated spelling or terms with `...` tags so they appear in green. +将任何翻译过的拼写或条目放在 `...` 标签内以使其显示为绿色。 ```js async (getUserInput) => { @@ -191,7 +191,7 @@ async (getUserInput) => { }; ``` -If one or more of the required fields is missing, return `{ error: 'Required field(s) missing' }`. +如果缺少一个或多个必填字段，返回 `{ error: 'Required field(s) missing' }`。 ```js async (getUserInput) => { @@ -212,7 +212,7 @@ async (getUserInput) => { }; ``` -If `text` is empty, return `{ error: 'No text to translate' }` +如果 `text` 为空，返回 `{ error: 'No text to translate' }`。 ```js async (getUserInput) => { @@ -233,7 +233,7 @@ async (getUserInput) => { }; ``` -If `locale` does not match one of the two specified locales, return `{ error: 'Invalid value for locale field' }`. +如果 `locale` 与两个指定的 locales 都不匹配，返回 `{ error: 'Invalid value for locale field' }`。 ```js async (getUserInput) => { @@ -255,7 +255,7 @@ async (getUserInput) => { }; ``` -If `text` requires no translation, return `"Everything looks good to me!"` for the `translation` value. +如果 `text` 不需要翻译，返回的 `translation` 值为`"Everything looks good to me!"`。 ```js async (getUserInput) => { @@ -282,7 +282,7 @@ async (getUserInput) => { }; ``` -All 24 unit tests are complete and passing. See `/tests/1_unit-tests.js` for the expected behavior you should write tests for. +所有 24 项单元测试都已完成并通过。 请参阅 `/tests/1_unit-tests.js` 来了解你应该写的测试的预期行为。 ```js async (getUserInput) => { @@ -307,7 +307,7 @@ async (getUserInput) => { }; ``` -All 6 functional tests are complete and passing. See `/tests/2_functional-tests.js` for the functionality you should write tests for. +所有 6 项功能测试都已完成并通过。 请参阅 `/tests/2_functional-tests.js` 来了解你应该编写的测试的功能。 ```js async (getUserInput) => { diff --git a/curriculum/challenges/chinese/06-quality-assurance/quality-assurance-projects/issue-tracker.md b/curriculum/challenges/chinese/06-quality-assurance/quality-assurance-projects/issue-tracker.md index e4543693f9b..40bc861c838 100644 --- a/curriculum/challenges/chinese/06-quality-assurance/quality-assurance-projects/issue-tracker.md +++ b/curriculum/challenges/chinese/06-quality-assurance/quality-assurance-projects/issue-tracker.md @@ -14,42 +14,42 @@ dashedName: issue-tracker - 使用我们的 Replit 初始化项目来完成你的项目。 - 使用一个你喜欢的站点生成器来完成项目。 需要确定包含了我们 GitHub 仓库的所有文件。 -If you use Replit, follow these steps to set up the project: +如果你使用 Replit，请按照以下步骤设置项目： -- Start by importing the project on Replit. -- Next, you will see a `.replit` window. -- Select `Use run command` and click the `Done` button. +- 首先在 Replit 中导入项目。 +- 接着，你将看到一个 `.replit` 窗口。 +- 选择 `Use run command` 并点击 `Done` 按钮。 -When you are done, make sure a working demo of your project is hosted somewhere public. Then submit the URL to it in the `Solution Link` field. Optionally, also submit a link to your project's source code in the `GitHub Link` field. +当你完成后，请将一个确保正常运行的 demo（项目演示）托管在可以公开访问的平台上。 然后将 demo 的 URL 提交到 `Solution Link` 字段中。 也可以将项目的源码链接提交到 `GitHub Link` 字段中。 # --instructions-- -- Complete the necessary routes in `/routes/api.js` -- Create all of the functional tests in `tests/2_functional-tests.js` -- Copy the `sample.env` file to `.env` and set the variables appropriately -- To run the tests uncomment `NODE_ENV=test` in your `.env` file -- To run the tests in the console, use the command `npm run test`. To open the Replit console, press Ctrl+Shift+P (Cmd if on a Mac) and type "open shell" +- 在 `/routes/api.js` 中完成必要的路由 +- 在 `tests/2_functional-tests.js` 中创建所有的功能测试 +- 复制 `sample.env` 文件到 `.env` 并按需设置变量 +- 在 `.env` 文件中取消注释 `NODE_ENV=test` 来运行测试 +- 使用 `npm run test` 命令在 console 中运行测试。 按 Ctrl+Shift+P（在 Mac 上是 Cmd+Shift+P），并输入“open shell”，打开 Replit 控制台 -Write the following tests in `tests/2_functional-tests.js`: +在 `tests/2_functional-tests.js` 中编写下以下测试： -- Create an issue with every field: POST request to `/api/issues/{project}` -- Create an issue with only required fields: POST request to `/api/issues/{project}` -- Create an issue with missing required fields: POST request to `/api/issues/{project}` -- View issues on a project: GET request to `/api/issues/{project}` -- View issues on a project with one filter: GET request to `/api/issues/{project}` -- View issues on a project with multiple filters: GET request to `/api/issues/{project}` -- Update one field on an issue: PUT request to `/api/issues/{project}` -- Update multiple fields on an issue: PUT request to `/api/issues/{project}` -- Update an issue with missing `_id`: PUT request to `/api/issues/{project}` -- Update an issue with no fields to update: PUT request to `/api/issues/{project}` -- Update an issue with an invalid `_id`: PUT request to `/api/issues/{project}` -- Delete an issue: DELETE request to `/api/issues/{project}` -- Delete an issue with an invalid `_id`: DELETE request to `/api/issues/{project}` -- Delete an issue with missing `_id`: DELETE request to `/api/issues/{project}` +- 用所有字段创建 issue：POST 请求到 `/api/issues/{project}` +- 用必填字段创建 issue：POST 请求到 `/api/issues/{project}` +- 用缺失必填字段创建 issue：POST 请求到 `/api/issues/{project}` +- 查看项目里的 issue：GET 请求到 `/api/issues/{project}` +- 用 filter 过滤 project 里的 issue：GET 请求到 `/api/issues/{project}` +- 用多个 filter 过滤 project 里的 issue：GET 请求到 `/api/issues/{project}` +- 更新 issue 里的一个字段：PUT 请求到 `/api/issues/{project}` +- 更新 issue 里的多个字段：PUT 请求到 `/api/issues/{project}` +- 在缺少 `_id` 字段的情况下更新 issue：PUT 请求到 `/api/issues/{project}` +- 在没有字段更新的情况下更新 issue：PUT 请求到 `/api/issues/{project}` +- 传入一个无效的 `_id` 来更新 issue：PUT 请求到 `/api/issues/{project}` +- 删除一个 issue：DELETE 请求到 `/api/issues/{project}` +- 传入一个无效的 `_id` 来删除 issue：DELETE 请求到 `/api/issues/{project}` +- 在缺失 `_id` 的情况下来删除 issue：DELETE 请求到 `/api/issues/{project}` # --hints-- -You can provide your own project, not the example URL. +你可以提交你自己的项目，而不是示例的 URL。 ```js (getUserInput) => { @@ -57,7 +57,7 @@ You can provide your own project, not the example URL. }; ``` -You can send a `POST` request to `/api/issues/{projectname}` with form data containing the required fields `issue_title`, `issue_text`, `created_by`, and optionally `assigned_to` and `status_text`. +你可以发送 `POST` 请求到 `/api/issues/{projectname}`，表单数据包含必填字段 `issue_title`、`issue_text`、`created_by` 和可选字段 `assigned_to` 以及 `status_text`。 ```js async (getUserInput) => { @@ -79,7 +79,7 @@ async (getUserInput) => { }; ``` -The `POST` request to `/api/issues/{projectname}` will return the created object, and must include all of the submitted fields. Excluded optional fields will be returned as empty strings. Additionally, include `created_on` (date/time), `updated_on` (date/time), `open` (boolean, `true` for open - default value, `false` for closed), and `_id`. +`POST` 请求到 `/api/issues/{projectname}` 将返回创建的对象，必须包含所有提交的全部字段。 如果没有填选填字段将作为空字符串返回。 此外，包含 `created_on`（日期/时间）、`updated_on`（日期/时间）、`open`（布尔型，`true` 用于打开 - 默认值， `false` 用于关闭）、`_id`。 ```js async (getUserInput) => { @@ -113,7 +113,7 @@ async (getUserInput) => { }; ``` -If you send a `POST` request to `/api/issues/{projectname}` without the required fields, returned will be the error `{ error: 'required field(s) missing' }` +如果你发送一个 `POST` 请求到 `/api/issues/{projectname}`，并且缺少必要的字段，将返回错误 `{ error: 'required field(s) missing' }`。 ```js async (getUserInput) => { @@ -131,7 +131,7 @@ async (getUserInput) => { }; ``` -You can send a `GET` request to `/api/issues/{projectname}` for an array of all issues for that specific `projectname`, with all the fields present for each issue. +你可以发送一个 `GET` 请求到 `/api/issues/{projectname}` 请求所有指定 `projectname` 的 issues 数组，会展示每个 issue 的所有字段。 ```js async (getUserInput) => { @@ -178,7 +178,7 @@ async (getUserInput) => { }; ``` -You can send a `GET` request to `/api/issues/{projectname}` and filter the request by also passing along any field and value as a URL query (ie. `/api/issues/{project}?open=false`). You can pass one or more field/value pairs at once. +你可以发送一个 `GET` 请求到 `/api/issues/{projectname}`，通过 URL 查询传入字段名和值过滤请求（如，`/api/issues/{project}?open=false`）。 你可以一次传入一个或多个字段/值对。 ```js async (getUserInput) => { @@ -219,7 +219,7 @@ async (getUserInput) => { }; ``` -You can send a `PUT` request to `/api/issues/{projectname}` with an `_id` and one or more fields to update. On success, the `updated_on` field should be updated, and returned should be `{ result: 'successfully updated', '_id': _id }`. +你可以发送一个 `PUT` 请求到 `/api/issues/{projectname}`，带有一个 `_id` 以及一个或多个字段进行更新。 成功后，`updated_on` field 应该被更新，返回的应该是 `{ result: 'successfully updated', '_id': _id }`。 ```js async (getUserInput) => { @@ -254,7 +254,7 @@ async (getUserInput) => { }; ``` -When the `PUT` request sent to `/api/issues/{projectname}` does not include an `_id`, the return value is `{ error: 'missing _id' }`. +当 `PUT` 请求发送给 `/api/issues/{projectname}` 的请求体不包含 `_id` 时，应返回`{ error: 'missing _id' }`。 ```js async (getUserInput) => { @@ -270,7 +270,7 @@ async (getUserInput) => { }; ``` -When the `PUT` request sent to `/api/issues/{projectname}` does not include update fields, the return value is `{ error: 'no update field(s) sent', '_id': _id }`. On any other error, the return value is `{ error: 'could not update', '_id': _id }`. +当 `PUT` 请求发送给 `/api/issues/{projectname}` 的请求体不包含任何更新的字段，应返回 `{ error: 'no update field(s) sent', '_id': _id }`。 在任何其他错误，应返回 `{ error: 'could not update', '_id': _id }`。 ```js async (getUserInput) => { @@ -300,7 +300,7 @@ async (getUserInput) => { }; ``` -You can send a `DELETE` request to `/api/issues/{projectname}` with an `_id` to delete an issue. If no `_id` is sent, the return value is `{ error: 'missing _id' }`. On success, the return value is `{ result: 'successfully deleted', '_id': _id }`. On failure, the return value is `{ error: 'could not delete', '_id': _id }`. +你可以发送一个 `DELETE` 请求到 `/api/issues/{projectname}`，带有一个 `_id` 来删除 issue。 如果没有发送 `_id`，返回值为 `{ error: 'missing _id' }`。 成功后，返回值为 `{ result: 'successfully deleted', '_id': _id }`。 失败时，返回值为 `{ error: 'could not delete', '_id': _id }`。 ```js async (getUserInput) => { @@ -342,7 +342,7 @@ async (getUserInput) => { }; ``` -All 14 functional tests are complete and passing. +所有 14 项功能测试都已完成并通过。 ```js async (getUserInput) => { diff --git a/curriculum/challenges/chinese/06-quality-assurance/quality-assurance-projects/metric-imperial-converter.md b/curriculum/challenges/chinese/06-quality-assurance/quality-assurance-projects/metric-imperial-converter.md index d541d634a51..1897b2098de 100644 --- a/curriculum/challenges/chinese/06-quality-assurance/quality-assurance-projects/metric-imperial-converter.md +++ b/curriculum/challenges/chinese/06-quality-assurance/quality-assurance-projects/metric-imperial-converter.md @@ -14,52 +14,52 @@ dashedName: metric-imperial-converter - 使用我们在 Replit 上的初始化项目来完成你的项目。 - 使用一个你喜欢的站点生成器来完成项目。 需要确定包含了我们 GitHub 仓库的所有文件。 -If you use Replit, follow these steps to set up the project: +如果你使用 Replit，请按照以下步骤设置项目： -- Start by importing the project on Replit. -- Next, you will see a `.replit` window. -- Select `Use run command` and click the `Done` button. +- 首先在 Replit 中导入项目。 +- 接着，你将看到一个 `.replit` 窗口。 +- 选择 `Use run command` 并点击 `Done` 按钮。 -When you are done, make sure a working demo of your project is hosted somewhere public. Then submit the URL to it in the `Solution Link` field. Optionally, also submit a link to your project's source code in the `GitHub Link` field. +当你完成后，请将一个确保正常运行的 demo（项目演示）托管在可以公开访问的平台上。 然后将 demo 的 URL 提交到 `Solution Link` 字段中。 也可以将项目的源码链接提交到 `GitHub Link` 字段中。 # --instructions-- -- Complete the necessary conversion logic in `/controllers/convertHandler.js` -- Complete the necessary routes in `/routes/api.js` -- Copy the `sample.env` file to `.env` and set the variables appropriately -- To run the tests uncomment `NODE_ENV=test` in your `.env` file -- To run the tests in the console, use the command `npm run test`. To open the Replit console, press Ctrl+Shift+P (Cmd if on a Mac) and type "open shell" +- 在 `/controllers/convertHandler.js` 中完成必要的转换逻辑 +- 在 `/routes/api.js` 中完成必要的路由 +- 复制 `sample.env` 文件到 `.env` 并按需设置变量 +- 在 `.env` 文件中取消注释 `NODE_ENV=test` 来运行测试 +- 使用 `npm run test` 命令在 console 中运行测试。 按 Ctrl+Shift+P（在 Mac 上是 Cmd+Shift+P），并输入“open shell”，打开 Replit 控制台 -Write the following tests in `tests/1_unit-tests.js`: +在 `tests/1_unit-tests.js` 中写下以下测试： -- `convertHandler` should correctly read a whole number input. -- `convertHandler` should correctly read a decimal number input. -- `convertHandler` should correctly read a fractional input. -- `convertHandler` should correctly read a fractional input with a decimal. -- `convertHandler` should correctly return an error on a double-fraction (i.e. `3/2/3`). -- `convertHandler` should correctly default to a numerical input of `1` when no numerical input is provided. -- `convertHandler` should correctly read each valid input unit. -- `convertHandler` should correctly return an error for an invalid input unit. -- `convertHandler` should return the correct return unit for each valid input unit. -- `convertHandler` should correctly return the spelled-out string unit for each valid input unit. -- `convertHandler` should correctly convert `gal` to `L`. -- `convertHandler` should correctly convert `L` to `gal`. -- `convertHandler` should correctly convert `mi` to `km`. -- `convertHandler` should correctly convert `km` to `mi`. -- `convertHandler` should correctly convert `lbs` to `kg`. -- `convertHandler` should correctly convert `kg` to `lbs`. +- `convertHandler` 应该正确地读取整个数字输入。 +- `convertHandler` 应该正确地读取一个十进制数字输入。 +- `convertHandler` 应该正确地读取一个分数输入。 +- `convertHandler` 应该正确地读取一个带小数点的分数输入。 +- `convertHandler` 当输入双分数时应该返回错误（`3/2/3`）。 +- `convertHandler` 在没有提供数字输入时应该默认为 `1`。 +- `convertHandler` 应该正确地读取每个有效的单位输入。 +- `convertHandler` 在输入无效单位时应返回错误。 +- `convertHandler` 在输入有效单位时应返回正确的单位。 +- `convertHandler` 应该正确返回每个有效输入单位的拼写字符串。 +- `convertHandler` 应该正确地将 `gal` 转换为 `L`。 +- `convertHandler` 应该正确地将 `L` 转换为 `gal`。 +- `convertHandler` 应该正确地将 `mi` 转换为 `km`。 +- `convertHandler` 应该正确地将 `km` 转换为 `mi`。 +- `convertHandler` 应该正确地将 `lbs` 转换为 `kg`。 +- `convertHandler` 应该正确地将 `kg` 转换为 `lbs`。 -Write the following tests in `tests/2_functional-tests.js`: +在 `tests/2_functional-tests.js` 中编写下以下测试： -- Convert a valid input such as `10L`: `GET` request to `/api/convert`. -- Convert an invalid input such as `32g`: `GET` request to `/api/convert`. -- Convert an invalid number such as `3/7.2/4kg`: `GET` request to `/api/convert`. -- Convert an invalid number AND unit such as `3/7.2/4kilomegagram`: `GET` request to `/api/convert`. -- Convert with no number such as `kg`: `GET` request to `/api/convert`. +- 转换一个有效的输入例如 `10L`：`GET` 请求到 `/api/convert`。 +- 转换一个无效的输入例如 `32g`：`GET` 请求到 `/api/convert`。 +- 转换一个无效的数字例如 `3/7.2/4kg`：`GET` 请求到 `/api/convert`。 +- 转换一个无效的数字和单位例如 `3/7.2/4kilomegagram`：`GET` 请求到 `/api/convert`。 +- 转换时没有数字，例如 `kg`：`GET` 请求到 `/api/convert`。 # --hints-- -You can provide your own project, not the example URL. +你可以提交你自己的项目，而不是示例的 URL。 ```js getUserInput => { @@ -71,13 +71,13 @@ getUserInput => { }; ``` -You can `GET` `/api/convert` with a single parameter containing an accepted number and unit and have it converted. (Hint: Split the input by looking for the index of the first character which will mark the start of the unit) +通过 `GET` 请求 `/api/convert`，传入数字和单位的单个参数，可以将其转换。 （提示：通过寻找第一个字符的索引来分割输入，这将标记单位的开始） ```js ``` -You can convert `'gal'` to `'L'` and vice versa. (1 gal to 3.78541 L) +你可以将 `'gal'` 转换为 `'L'`，反之亦然。 （1 gal 转换为 3.78541 L） ```js async getUserInput => { @@ -100,7 +100,7 @@ async getUserInput => { }; ``` -You can convert `'lbs'` to `'kg'` and vice versa. (1 lbs to 0.453592 kg) +你可以将 `'lbs'` 转换为 `'kg'`，反之亦然。 （1 lbs 转换为 0.453592 kg） ```js async getUserInput => { @@ -123,7 +123,7 @@ async getUserInput => { }; ``` -You can convert `'mi'` to `'km'` and vice versa. (1 mi to 1.60934 km) +你可以将 `'mi'` 转换为 `'km'` 反之亦然。 （1 mi 转换为 1.60934 km） ```js async getUserInput => { @@ -146,7 +146,7 @@ async getUserInput => { }; ``` -All incoming units should be accepted in both upper and lower case, but should be returned in both the `initUnit` and `returnUnit` in lower case, except for liter, which should be represented as an uppercase `'L'`. +所有输入单位以大写和小写形式都应该被接受，但在 `initUnit` 和 `returnUnit` 中应以小写形式返回，升除外，应将其表示为大写的 `'L'`。 ```js async getUserInput => { @@ -169,7 +169,7 @@ async getUserInput => { }; ``` -If the unit of measurement is invalid, returned will be `'invalid unit'`. +如果测量单位无效，返回将为 `'invalid unit'`。 ```js async getUserInput => { @@ -182,7 +182,7 @@ async getUserInput => { }; ``` -If the number is invalid, returned will be `'invalid number'`. +如果数字无效，返回将为 `'invalid number'`。 ```js async getUserInput => { @@ -197,7 +197,7 @@ async getUserInput => { }; ``` -If both the unit and number are invalid, returned will be `'invalid number and unit'`. +如果单位和数字都无效，返回将为 `'invalid number and unit'`。 ```js async getUserInput => { @@ -215,7 +215,7 @@ async getUserInput => { }; ``` -You can use fractions, decimals or both in the parameter (ie. 5, 1/2, 2.5/6), but if nothing is provided it will default to 1. +你可以在参数中使用分数、小数或小数分数（例如 5、1/2、2.5/6），如果没有提供任何内容，则默认值为 1。 ```js async getUserInput => { @@ -246,7 +246,7 @@ async getUserInput => { }; ``` -Your return will consist of the `initNum`, `initUnit`, `returnNum`, `returnUnit`, and `string` spelling out units in the format `'{initNum} {initUnitString} converts to {returnNum} {returnUnitString}'` with the result rounded to 5 decimals. +你的返回将包含 `initNum`、`initUnit`、`returnNum`、`returnUnit` 和 `string` 拼写单位格式 `'{initNum} {initUnitString} converts to {returnNum} {returnUnitString}'`，结果四舍五入为 5 位小数。 ```js async getUserInput => { @@ -263,7 +263,7 @@ async getUserInput => { }; ``` -All 16 unit tests are complete and passing. +所有 16 项单元测试都已完成并通过。 ```js async getUserInput => { @@ -288,7 +288,7 @@ async getUserInput => { }; ``` -All 5 functional tests are complete and passing. +所有 5 项功能测试都已完成并通过。 ```js async getUserInput => { diff --git a/curriculum/challenges/chinese/06-quality-assurance/quality-assurance-projects/personal-library.md b/curriculum/challenges/chinese/06-quality-assurance/quality-assurance-projects/personal-library.md index 71c6aada170..9c3410c27af 100644 --- a/curriculum/challenges/chinese/06-quality-assurance/quality-assurance-projects/personal-library.md +++ b/curriculum/challenges/chinese/06-quality-assurance/quality-assurance-projects/personal-library.md @@ -14,13 +14,13 @@ dashedName: personal-library - 使用我们在 Replit 上的初始化项目来完成你的项目 - 使用一个你喜欢的站点生成器来完成项目。 需要确定包含了我们 GitHub 仓库的所有文件。 -If you use Replit, follow these steps to set up the project: +如果你使用 Replit，请按照以下步骤设置项目： -- Start by importing the project on Replit. -- Next, you will see a `.replit` window. -- Select `Use run command` and click the `Done` button. +- 首先在 Replit 中导入项目。 +- 接着，你将看到一个 `.replit` 窗口。 +- 选择 `Use run command` 并点击 `Done` 按钮。 -When you are done, make sure a working demo of your project is hosted somewhere public. Then submit the URL to it in the `Solution Link` field. Optionally, also submit a link to your project's source code in the `GitHub Link` field. +当你完成后，请将一个确保正常运行的 demo（项目演示）托管在可以公开访问的平台上。 然后将 demo 的 URL 提交到 `Solution Link` 字段中。 也可以将项目的源码链接提交到 `GitHub Link` 字段中。 # --instructions-- @@ -31,7 +31,7 @@ When you are done, make sure a working demo of your project is hosted somewhere # --hints-- -You can provide your own project, not the example URL. +你可以提交你自己的项目，而不是示例的 URL。 ```js (getUserInput) => { @@ -41,7 +41,7 @@ You can provide your own project, not the example URL. }; ``` -You can send a POST request to `/api/books` with `title` as part of the form data to add a book. The returned response will be an object with the `title` and a unique `_id` as keys. If `title` is not included in the request, the returned response should be the string `missing required field title`. +可以发送 POST 请求到 `/api/books`，带有 `title` 作为表单数据的一部分，来添加一本书。 返回的响应将是一个包含 `title` 和唯一的 `_id` 作为键的对象。 如果 `title` 未包含在请求中，返回的响应应该是字符串 `missing required field title`。 ```js async (getUserInput) => { @@ -62,7 +62,7 @@ async (getUserInput) => { }; ``` -You can send a GET request to `/api/books` and receive a JSON response representing all the books. The JSON response will be an array of objects with each object (book) containing `title`, `_id`, and `commentcount` properties. +你可以向 `/api/books` 发送 GET 请求，并返回代表所有书的 JSON 响应。 JSON 响应应该是一个对象数组，每个对象（书）包含 `title`、`_id` 和 `commentcount` 属性。 ```js async (getUserInput) => { @@ -90,7 +90,7 @@ async (getUserInput) => { }; ``` -You can send a GET request to `/api/books/{_id}` to retrieve a single object of a book containing the properties `title`, `_id`, and a `comments` array (empty array if no comments present). If no book is found, return the string `no book exists`. +你可以发送 GET 请求到 `/api/books/{_id}` 来检索一本书的单个对象，返回属性 `title`、`_id` 和 `comments` 数组（如果没有评论，则展示空数组）。 如果找不到书，返回字符串 `no book exists`。 ```js async (getUserInput) => { @@ -114,7 +114,7 @@ async (getUserInput) => { }; ``` -You can send a POST request containing `comment` as the form body data to `/api/books/{_id}` to add a comment to a book. The returned response will be the books object similar to GET `/api/books/{_id}` request in an earlier test. If `comment` is not included in the request, return the string `missing required field comment`. If no book is found, return the string `no book exists`. +你可以发送一个 POST 请求，其中包含 `comment` 作为表单正文数据，请求到 `/api/books/{_id}` 以便将评论添加到书中。 返回的响应将是书对象，与先前测试中 GET `/api/books/{_id}` 请求类似。 如果请求中没有包含 `comment`，返回字符串 `missing required field comment`。 如果找不到书，返回字符串 `no book exists`。 ```js async (getUserInput) => { @@ -152,7 +152,7 @@ async (getUserInput) => { }; ``` -You can send a DELETE request to `/api/books/{_id}` to delete a book from the collection. The returned response will be the string `delete successful` if successful. If no book is found, return the string `no book exists`. +你可以向 `/api/books/{_id}` 发送 DELETE 请求，从收藏中删除一本书。 如果成功，返回的响应将是字符串 `delete successful`。 如果找不到书，返回字符串 `no book exists`。 ```js async (getUserInput) => { @@ -176,7 +176,7 @@ async (getUserInput) => { }; ``` -You can send a DELETE request to `/api/books` to delete all books in the database. The returned response will be the string `complete delete successful` if successful. +你可以向 `/api/books` 发送 DELETE 请求来删除数据库中的所有书籍。 如果成功，返回的响应将是字符串 `complete delete successful`。 ```js async (getUserInput) => { @@ -193,7 +193,7 @@ async (getUserInput) => { }; ``` -All 10 functional tests required are complete and passing. +所有 10 项功能测试都已完成并通过。 ```js async (getUserInput) => { diff --git a/curriculum/challenges/chinese/06-quality-assurance/quality-assurance-projects/sudoku-solver.md b/curriculum/challenges/chinese/06-quality-assurance/quality-assurance-projects/sudoku-solver.md index 81ffdd6dd60..b10afa901b4 100644 --- a/curriculum/challenges/chinese/06-quality-assurance/quality-assurance-projects/sudoku-solver.md +++ b/curriculum/challenges/chinese/06-quality-assurance/quality-assurance-projects/sudoku-solver.md @@ -14,60 +14,60 @@ dashedName: sudoku-solver - 使用我们在 Replit 上的初始化项目来完成你的项目。 - 使用一个你喜欢的站点生成器来完成项目。 需要确定包含了我们 GitHub 仓库的所有文件。 -If you use Replit, follow these steps to set up the project: +如果你使用 Replit，请按照以下步骤设置项目： -- Start by importing the project on Replit. -- Next, you will see a `.replit` window. -- Select `Use run command` and click the `Done` button. +- 首先在 Replit 中导入项目。 +- 接着，你将看到一个 `.replit` 窗口。 +- 选择 `Use run command` 并点击 `Done` 按钮。 -When you are done, make sure a working demo of your project is hosted somewhere public. Then submit the URL to it in the `Solution Link` field. Optionally, also submit a link to your project's source code in the `GitHub Link` field. +当你完成后，请将一个确保正常运行的 demo（项目演示）托管在可以公开访问的平台上。 然后将 demo 的 URL 提交到 `Solution Link` 字段中。 也可以将项目的源码链接提交到 `GitHub Link` 字段中。 # --instructions-- -- All puzzle logic can go into `/controllers/sudoku-solver.js` - - The `validate` function should take a given puzzle string and check it to see if it has 81 valid characters for the input. - - The `check` functions should be validating against the *current* state of the board. - - The `solve` function should handle solving any given valid puzzle string, not just the test inputs and solutions. You are expected to write out the logic to solve this. -- All routing logic can go into `/routes/api.js` -- See the `puzzle-strings.js` file in `/controllers` for some sample puzzles your application should solve -- To run the challenge tests on this page, set `NODE_ENV` to `test` without quotes in the `.env` file -- To run the tests in the console, use the command `npm run test`. To open the Replit console, press Ctrl+Shift+P (Cmd if on a Mac) and type "open shell" +- 所有解谜逻辑都可以进入 `/controllers/sudoku-solver.js` + - `validate` 函数应该使用给定的解谜字符串，然后检查它是否是 81 个有效的输入字符。 + - `check` 函数应对棋盘的 *current* 进行验证。 + - `solve` 函数应该处理任何给定的解谜字符串，而不仅仅是测试输入和解决方法。 你需要写出解决这个问题的逻辑。 +- 所有路由逻辑都可以进入 `/routes/api.js` +- 阅读 `/controllers` 中的 `puzzle-strings.js` 文件来了解一些应用程序应该解决的示例谜题 +- 在 `.env` 文件中将 `NODE_ENV` 设置为 `test` （没有引号），运行这个页面的挑战测试。 +- 使用 `npm run test` 命令在 console 中运行测试。 按 Ctrl+Shift+P（在 Mac 上是 Cmd+Shift+P），并输入 “open shell”，打开 Replit 控制台 -Write the following tests in `tests/1_unit-tests.js`: +在 `tests/1_unit-tests.js` 中写下以下测试： -- Logic handles a valid puzzle string of 81 characters -- Logic handles a puzzle string with invalid characters (not 1-9 or `.`) -- Logic handles a puzzle string that is not 81 characters in length -- Logic handles a valid row placement -- Logic handles an invalid row placement -- Logic handles a valid column placement -- Logic handles an invalid column placement -- Logic handles a valid region (3x3 grid) placement -- Logic handles an invalid region (3x3 grid) placement -- Valid puzzle strings pass the solver -- Invalid puzzle strings fail the solver -- Solver returns the expected solution for an incomplete puzzle +- 逻辑处理 81 个字符的解谜字符串 +- 逻辑处理无效的解谜字符串（不是 1-9 或 `.`） +- 逻辑处理一个长度不是 81 个字符的解谜字符串 +- 逻辑处理有效行的位置 +- 逻辑处理无效行的位置 +- 逻辑处理有效列的位置 +- 逻辑处理无效列的位置 +- 逻辑处理一个有效的区域（3x3 网格） +- 逻辑处理一个无效的区域（3x3 网格） +- 有效解谜字符串通过 solver +- 无效解谜字符串无法通过 solver +- Solver 返回一个不完整谜题的的预期解决方案 -Write the following tests in `tests/2_functional-tests.js` +在 `tests/2_functional-tests.js` 中编写下以下测试： -- Solve a puzzle with valid puzzle string: POST request to `/api/solve` -- Solve a puzzle with missing puzzle string: POST request to `/api/solve` -- Solve a puzzle with invalid characters: POST request to `/api/solve` -- Solve a puzzle with incorrect length: POST request to `/api/solve` -- Solve a puzzle that cannot be solved: POST request to `/api/solve` -- Check a puzzle placement with all fields: POST request to `/api/check` -- Check a puzzle placement with single placement conflict: POST request to `/api/check` -- Check a puzzle placement with multiple placement conflicts: POST request to `/api/check` -- Check a puzzle placement with all placement conflicts: POST request to `/api/check` -- Check a puzzle placement with missing required fields: POST request to `/api/check` -- Check a puzzle placement with invalid characters: POST request to `/api/check` -- Check a puzzle placement with incorrect length: POST request to `/api/check` -- Check a puzzle placement with invalid placement coordinate: POST request to `/api/check` -- Check a puzzle placement with invalid placement value: POST request to `/api/check` +- 用有效的解谜字符串解决一个谜题：POST 请求到 `/api/solve` +- 用缺失的解谜字符串解决一个谜题：POST 请求到 `/api/solve` +- 用无效字符解决一个谜题：POST 请求到 `/api/solve` +- 用不正确的长度解决一个谜题：POST 请求到 `/api/solve` +- 解决一个无法解决的谜题：POST 请求到 `/api/solve` +- 检查所有字段的解谜位置：POST 请求到 `/api/check` +- 用单个位置冲突检查解谜位置：POST 请求到 `/api/check` +- 检查一个有多个位置冲突的解谜位置：POST 请求到 `/api/check` +- 检查与所有位置冲突的解谜位置：POST 请求到 `/api/check` +- 检查缺失所需字段的解谜位置：POST 请求到 `/api/check` +- 检查一个有无效字符的解谜位置：POST 请求到 `/api/check` +- 检查不正确长度的解谜位置：POST 请求到 `/api/check` +- 检查一个无效的放置坐标的解谜位置：POST 请求到 `/api/check` +- 检查具有无效的放置值的解谜位置：POST 请求到 `/api/check` # --hints-- -You should provide your own project, not the example URL. +你应该提交自己的项目，而不是示例的 URL。 ```js (getUserInput) => { @@ -76,7 +76,7 @@ You should provide your own project, not the example URL. }; ``` -You can `POST` `/api/solve` with form data containing `puzzle` which will be a string containing a combination of numbers (1-9) and periods `.` to represent empty spaces. The returned object will contain a `solution` property with the solved puzzle. +你可以发送 `POST` 请求到 `/api/solve`，使用包含 `puzzle` 的表单数据，这将是一个包含数字（1-9）和点号的字符串组合，`.` 表示空格。 返回的对象将包含一个 `solution` 属性与解决的谜题。 ```js async (getUserInput) => { @@ -95,7 +95,7 @@ async (getUserInput) => { }; ``` -If the object submitted to `/api/solve` is missing `puzzle`, the returned value will be `{ error: 'Required field missing' }` +如果提交给 `/api/solve` 的对象缺失 `puzzle`，返回的值将是 `{ error: 'Required field missing' }`。 ```js async (getUserInput) => { @@ -113,7 +113,7 @@ async (getUserInput) => { }; ``` -If the puzzle submitted to `/api/solve` contains values which are not numbers or periods, the returned value will be `{ error: 'Invalid characters in puzzle' }` +如果提交给 `/api/solve` 谜题包含非数字或点号的值，返回的值将是 `{ error: 'Invalid characters in puzzle' }`。 ```js async (getUserInput) => { @@ -131,7 +131,7 @@ async (getUserInput) => { }; ``` -If the puzzle submitted to `/api/solve` is greater or less than 81 characters, the returned value will be `{ error: 'Expected puzzle to be 81 characters long' }` +如果提交给 `/api/solve` 的谜题大于或小于 81 个字符，返回的值将是 `{ error: 'Expected puzzle to be 81 characters long' }`。 ```js async (getUserInput) => { @@ -153,7 +153,7 @@ async (getUserInput) => { }; ``` -If the puzzle submitted to `/api/solve` is invalid or cannot be solved, the returned value will be `{ error: 'Puzzle cannot be solved' }` +如果提交给 `/api/solve` 的谜题无效或无法解决，返回的值将是 `{ error: 'Puzzle cannot be solved' }`。 ```js async (getUserInput) => { @@ -171,7 +171,7 @@ async (getUserInput) => { }; ``` -You can `POST` to `/api/check` an object containing `puzzle`, `coordinate`, and `value` where the `coordinate` is the letter A-I indicating the row, followed by a number 1-9 indicating the column, and `value` is a number from 1-9. +你可以发送 `POST` 请求到 `/api/check`，包含 `puzzle`、`coordinate` 和 `value` 的对象，其中 `coordinate` 是表示行的字母 A-I，后跟表示列的数字 1-9，而 `value` 是 1-9 的数字。 ```js async (getUserInput) => { @@ -190,7 +190,7 @@ async (getUserInput) => { }; ``` -The return value from the `POST` to `/api/check` will be an object containing a `valid` property, which is `true` if the number may be placed at the provided coordinate and `false` if the number may not. If false, the returned object will also contain a `conflict` property which is an array containing the strings `"row"`, `"column"`, and/or `"region"` depending on which makes the placement invalid. +发送 `POST` 请求到 `/api/check`，返回值是一个包含 `valid` 属性的对象，如果数字可能放置在提供的坐标中则是 `true`，否则是 `false`。 如果错误，返回的对象还将包含一个 `conflict` 属性，它是一个字符串 `"row"`、`"column"`，和/或 取决于哪个区域使位置无效的 `"region"` 。 ```js async (getUserInput) => { @@ -213,7 +213,7 @@ async (getUserInput) => { }; ``` -If `value` submitted to `/api/check` is already placed in `puzzle` on that `coordinate`, the returned value will be an object containing a `valid` property with `true` if `value` is not conflicting. +如果提交给 `/api/check` 的 `value` 已放置在该 `coordinate` 上的 `puzzle`中，如果 `value` 不冲突，则返回的是 `valid` 属性为 `true` 的对象。 ```js async (getUserInput) => { @@ -232,7 +232,7 @@ async (getUserInput) => { }; ``` -If the puzzle submitted to `/api/check` contains values which are not numbers or periods, the returned value will be `{ error: 'Invalid characters in puzzle' }` +如果提交给 `/api/check` 的谜题包含非数字或点号的值，返回的值将是 `{ error: 'Invalid characters in puzzle' }`。 ```js async (getUserInput) => { @@ -252,7 +252,7 @@ async (getUserInput) => { }; ``` -If the puzzle submitted to `/api/check` is greater or less than 81 characters, the returned value will be `{ error: 'Expected puzzle to be 81 characters long' }` +如果提交给 `/api/check` 的谜题大于或小于 81 个字符，返回的值将是 `{ error: 'Expected puzzle to be 81 characters long' }`。 ```js async (getUserInput) => { @@ -276,7 +276,7 @@ async (getUserInput) => { }; ``` -If the object submitted to `/api/check` is missing `puzzle`, `coordinate` or `value`, the returned value will be `{ error: 'Required field(s) missing' }` +如果提交给 `/api/check` 的对象缺失 `puzzle`、`coordinate` 或 `value`，那么返回的值将是 `{ error: 'Required field(s) missing' }`。 ```js async (getUserInput) => { @@ -308,7 +308,7 @@ async (getUserInput) => { }; ``` -If the coordinate submitted to `api/check` does not point to an existing grid cell, the returned value will be `{ error: 'Invalid coordinate'}` +如果提交给 `api/check` 的坐标不指向现有的网格单元格，返回的值将是 `{ error: 'Invalid coordinate'}`。 ```js async (getUserInput) => { @@ -330,7 +330,7 @@ async (getUserInput) => { }; ``` -If the `value` submitted to `/api/check` is not a number between 1 and 9, the returned value will be `{ error: 'Invalid value' }` +如果提交给 `/api/check` 的 `value` 不是一个介于 1 到 9 之间的数字，则返回的值将是 `{ error: 'Invalid value' }`。 ```js async (getUserInput) => { @@ -352,7 +352,7 @@ async (getUserInput) => { }; ``` -All 12 unit tests are complete and passing. See `/tests/1_unit-tests.js` for the expected behavior you should write tests for. +所有 12 项单元测试都已完成并通过。 请参阅 `/tests/1_unit-tests.js` 来了解你应该写的测试的预期行为。 ```js async (getUserInput) => { @@ -377,7 +377,7 @@ async (getUserInput) => { }; ``` -All 14 functional tests are complete and passing. See `/tests/2_functional-tests.js` for the expected functionality you should write tests for. +所有 14 项功能测试都已完成并通过。 请参阅 `/tests/2_functional-tests.js` 来了解你应该编写的测试的功能。 ```js async (getUserInput) => { diff --git a/curriculum/challenges/chinese/09-information-security/information-security-projects/anonymous-message-board.md b/curriculum/challenges/chinese/09-information-security/information-security-projects/anonymous-message-board.md index a4a5e1fe94d..b6a0234d23a 100644 --- a/curriculum/challenges/chinese/09-information-security/information-security-projects/anonymous-message-board.md +++ b/curriculum/challenges/chinese/09-information-security/information-security-projects/anonymous-message-board.md @@ -16,13 +16,13 @@ dashedName: anonymous-message-board - 使用我们在 Replit 上的初始化项目来完成你的项目。 - 使用一个你喜欢的站点生成器来完成项目。 需要确定包含了我们 GitHub 仓库的所有文件。 -If you use Replit, follow these steps to set up the project: +如果你使用 Replit，请按照以下步骤设置项目： -- Start by importing the project on Replit. -- Next, you will see a `.replit` window. -- Select `Use run command` and click the `Done` button. +- 首先在 Replit 中导入项目。 +- 接着，你将看到一个 `.replit` 窗口。 +- 选择 `Use run command` 并点击 `Done` 按钮。 -When you are done, make sure a working demo of your project is hosted somewhere public. Then submit the URL to it in the `Solution Link` field. Optionally, also submit a link to your project's source code in the `GitHub Link` field. +完成本项目后，请将一个正常运行的 demo（项目演示）托管在可以公开访问的平台。 然后将 URL 提交到 `Solution Link` 中。 此外，将项目的源码链接提交到 `GitHub Link` 字段中。 # --instructions-- @@ -30,22 +30,22 @@ When you are done, make sure a working demo of your project is hosted somewhere 2. 建议在 `routes/api.js` 中创建控制器/处理器并处理路由。 3. 你将在 `server.js` 中添加任何安全功能。 -Write the following tests in `tests/2_functional-tests.js`: +在 `tests/2_functional-tests.js` 中编写下以下测试： -- Creating a new thread: POST request to `/api/threads/{board}` -- Viewing the 10 most recent threads with 3 replies each: GET request to `/api/threads/{board}` -- Deleting a thread with the incorrect password: DELETE request to `/api/threads/{board}` with an invalid `delete_password` -- Deleting a thread with the correct password: DELETE request to `/api/threads/{board}` with a valid `delete_password` -- Reporting a thread: PUT request to `/api/threads/{board}` -- Creating a new reply: POST request to `/api/replies/{board}` -- Viewing a single thread with all replies: GET request to `/api/replies/{board}` -- Deleting a reply with the incorrect password: DELETE request to `/api/replies/{board}` with an invalid `delete_password` -- Deleting a reply with the correct password: DELETE request to `/api/replies/{board}` with a valid `delete_password` -- Reporting a reply: PUT request to `/api/replies/{board}` +- 创建一个新的主题：发送 POST 请求到 `/api/threads/{board}` +- 查看最近的 10 个主题，每个主题有 3 个回复：发送 GET 请求到 `/api/threads/{board}` +- 使用错误密码删除主题：使用错误的 `delete_password` 向 `/api/threads/{board}` 发出 DELETE 请求 +- 使用正确密码删除主题：使用正确的 `delete_password` 向 `/api/threads/{board}` 发出 DELETE 请求 +- 报告一个主题：发送 PUT 请求到 `/api/threads/{board}` +- 创建一个新的回复：发送 POST 请求到 `/api/replies/{board}` +- 查看一个带有所有回复的主题：发送 GET 请求到 `/api/replies/{board}` +- 使用错误密码删除回复：使用无效的 `delete_password` 向 `/api/replies/{board}` 发出 DELETE 请求 +- 使用正确密码删除回复：使用有效的 `delete_password` 向 `/api/replies/{board}` 发出 DELETE 请求 +- 报告一个回复：发送 PUT 请求到 `/api/replies/{board}` # --hints-- -You can provide your own project, not the example URL. +你可以提交你自己的项目，而不是示例的 URL。 ```js (getUserInput) => { @@ -57,7 +57,7 @@ You can provide your own project, not the example URL. }; ``` -Only allow your site to be loaded in an iFrame on your own pages. +只允许你的网站在你自己的页面上以 iFrame 方式加载。 ```js async (getUserInput) => { @@ -67,7 +67,7 @@ async (getUserInput) => { }; ``` -Do not allow DNS prefetching. +不允许 DNS 预取。 ```js async (getUserInput) => { @@ -77,7 +77,7 @@ async (getUserInput) => { }; ``` -Only allow your site to send the referrer for your own pages. +只允许你的网站为你自己的页面发送 referrer 请求头。 ```js async (getUserInput) => { @@ -87,7 +87,7 @@ async (getUserInput) => { }; ``` -You can send a POST request to `/api/threads/{board}` with form data including `text` and `delete_password`. The saved database record will have at least the fields `_id`, `text`, `created_on`(date & time), `bumped_on`(date & time, starts same as `created_on`), `reported` (boolean), `delete_password`, & `replies` (array). +你可以向 `/api/threads/{board}` 发送一个 POST 请求，其中包括 `text` 和 `delete_password` 的表单数据。 保存的数据库记录将至少有 `_id`、`text`、`created_on`（date & time）、`bumped_on`（date & time，开头和 `created_on` 一样)、`reported`（布尔值）、`delete_password`、& `replies`（数组）。 ```js async (getUserInput) => { @@ -119,7 +119,7 @@ async (getUserInput) => { }; ``` -You can send a POST request to `/api/replies/{board}` with form data including `text`, `delete_password`, & `thread_id`. This will update the `bumped_on` date to the comment's date. In the thread's `replies` array, an object will be saved with at least the properties `_id`, `text`, `created_on`, `delete_password`, & `reported`. +你可以向 `/api/replies/{board}` 发送一个 POST 请求，其中包括字段 `text`、`delete_password` & `thread_id`。 这将更新 `bumped_on` 日期为评论日期。 在主题的 `replies` 数组中，将保存一个对象，至少有 `_id`、`text`、`created_on`、`delete_password`、& `reported` 这些属性。 ```js async (getUserInput) => { @@ -156,7 +156,7 @@ async (getUserInput) => { }; ``` -You can send a GET request to `/api/threads/{board}`. Returned will be an array of the most recent 10 bumped threads on the board with only the most recent 3 replies for each. The `reported` and `delete_password` fields will not be sent to the client. +你可以向 `/api/threads/{board}` 发送一个 GET 请求。 返回的将是一个数组，包括论坛上最近的 10 个被回复的主题，及每个主题最新的 3 个回帖。 `reported` 和 `delete_password` 字段将不会被发送到客户端。 ```js async (getUserInput) => { @@ -187,7 +187,7 @@ async (getUserInput) => { }; ``` -You can send a GET request to `/api/replies/{board}?thread_id={thread_id}`. Returned will be the entire thread with all its replies, also excluding the same fields from the client as the previous test. +你可以向 `/api/replies/{board}?thread_id={thread_id}` 发送一个 GET 请求。 返回的将是带有所有的回复的整个主题，不包括与之前测试相同的客户端字段。 ```js async (getUserInput) => { @@ -219,7 +219,7 @@ async (getUserInput) => { }; ``` -You can send a DELETE request to `/api/threads/{board}` and pass along the `thread_id` & `delete_password` to delete the thread. 返回的将是字符串 `incorrect password` 或 `success`。 +你可以向 `/api/threads/{board}` 发送一个 DELETE 请求，并传递 `thread_id` & `delete_password` 来删除该线程。 返回的将是字符串 `incorrect password` 或 `success`。 ```js async (getUserInput) => { @@ -256,7 +256,7 @@ async (getUserInput) => { }; ``` -You can send a DELETE request to `/api/replies/{board}` and pass along the `thread_id`, `reply_id`, & `delete_password`. Returned will be the string `incorrect password` or `success`. On success, the text of the `reply_id` will be changed to `[deleted]`. +你可以向 `/api/replies/{board}` 发送一个 DELETE 请求，并传递 `thread_id`、`reply_id`、& `delete_password`。 返回的将是字符串 `incorrect password` 或 `success`。 成功后，`reply_id` 的文本将更改为 `[deleted]`。 ```js async (getUserInput) => { @@ -311,7 +311,7 @@ async (getUserInput) => { }; ``` -You can send a PUT request to `/api/threads/{board}` and pass along the `thread_id`. 返回的将是字符串 `reported`。 The `reported` value of the `thread_id` will be changed to `true`. +你可以向 `/api/threads/{board}` 发送一个 PUT 请求，并传递 `thread_id`。 返回的将是字符串 `reported`。 `thread_id` 回复的 `reported` 值将改为 `true`。 ```js async (getUserInput) => { @@ -342,7 +342,7 @@ async (getUserInput) => { }; ``` -You can send a PUT request to `/api/replies/{board}` and pass along the `thread_id` & `reply_id`. Returned will be the string `reported`. The `reported` value of the `reply_id` will be changed to `true`. +你可以向 `/api/replies/{board}` 发送一个 PUT 请求，并传递 `thread_id` & `reply_id`。 返回的将是字符串 `reported`。 `reply_id` 的 `reported` 值将被改变为 `true`。 ```js async (getUserInput) => { @@ -374,7 +374,7 @@ async (getUserInput) => { }; ``` -All 10 functional tests are complete and passing. +所有 10 项功能测试都已完成并通过。 ```js async (getUserInput) => { diff --git a/curriculum/challenges/chinese/09-information-security/information-security-projects/port-scanner.md b/curriculum/challenges/chinese/09-information-security/information-security-projects/port-scanner.md index 0fb0ae816dd..d9c74ad3589 100644 --- a/curriculum/challenges/chinese/09-information-security/information-security-projects/port-scanner.md +++ b/curriculum/challenges/chinese/09-information-security/information-security-projects/port-scanner.md @@ -11,18 +11,18 @@ dashedName: port-scanner 你将使用我们在 Replit 的初始化项目来完成这个项目。 -- Start by importing the project on Replit. -- Next, you will see a `.replit` window. -- Select `Use run command` and click the `Done` button. +- 首先在 Replit 中导入项目。 +- 接着，你将看到一个 `.replit` 窗口。 +- 选择 `Use run command` 并点击 `Done` 按钮。 我们仍在开发 Python 课程的交互式教学部分。 目前，你可以在 YouTube 上通过 freeCodeCamp.org 上传的一些视频学习这个项目相关的知识。 -- Python for Everybody Video Course (14 hours) +- 每个人视频课程的 Python (14小时) -- Learn Python Basics in Depth (4 hours) +- 深入学习 Python 基础知识（4 小时） -- Intermediate Python Course (6 hours) +- Python 中级课程（6 小时） # --instructions-- diff --git a/curriculum/challenges/chinese/09-information-security/information-security-projects/secure-real-time-multiplayer-game.md b/curriculum/challenges/chinese/09-information-security/information-security-projects/secure-real-time-multiplayer-game.md index 4c9093d2c5c..8612b76b18b 100644 --- a/curriculum/challenges/chinese/09-information-security/information-security-projects/secure-real-time-multiplayer-game.md +++ b/curriculum/challenges/chinese/09-information-security/information-security-projects/secure-real-time-multiplayer-game.md @@ -14,32 +14,32 @@ dashedName: secure-real-time-multiplayer-game - 使用我们在 Replit 上的初始化项目来完成你的项目 - 使用您选择的站点生成器来完成项目。 需要确定包含了我们 GitHub 仓库的所有文件。 -If you use Replit, follow these steps to set up the project: +如果你使用 Replit，请按照以下步骤设置项目： -- Start by importing the project on Replit. -- Next, you will see a `.replit` window. -- Select `Use run command` and click the `Done` button. +- 首先在 Replit 中导入项目。 +- 接着，你将看到一个 `.replit` 窗口。 +- 选择 `Use run command` 并点击 `Done` 按钮。 -When you are done, make sure a working demo of your project is hosted somewhere public. Then submit the URL to it in the `Solution Link` field. Optionally, also submit a link to your project's source code in the `GitHub Link` field. +当你完成后，请将一个确保正常运行的 demo（项目演示）托管在可以公开访问的平台上。 然后将 demo 的 URL 提交到 `Solution Link` 字段中。 也可以将项目的源码链接提交到 `GitHub Link` 字段中。 # --instructions-- -Create a secure multiplayer game in which each player can move their avatar, there is at least one collectible item, and the rank of the players is calculated based on their score. +创建一个安全的多人游戏，每名玩家可以移动他们的角色，并且这个游戏至少提供了一个可收集的道具，玩家的排名是根据他们的分数计算的。 -For details consult the tests below. +有关详细信息，请参考下面的测试。 -Make sure that your game is secure! Include these security measures: +请确保你的游戏是安全的！ 包含以下安全措施： -- The client should not be able to guess/sniff the MIME type -- Prevent XSS attacks -- Do not cache anything from the website in the client -- The headers say that the site is powered by `PHP 7.4.3` +- 客户端不能猜测/嗅探 MIME 类型 +- 防止 XSS 攻击 +- 不要在客户端中缓存网站的任何信息 +- 在请求头中声明网站是由 `PHP 7.4.3` 提供技术支持 -**Note**: `helmet@^3.21.3` is needed for the user stories. This means you will need to use the previous version of Helmet's docs, for information on how to achieve the user stories. +**注意：** `helmet@^3.21.3` 是需求中所要求的。 这意味着你将需要使用之前版本的 Helmet 文档，来了解如何实现需求。 # --hints-- -You can provide your own project, not the example URL. +你可以提交你自己的项目，而不是示例的 URL。 ```js (getUserInput) => { @@ -51,91 +51,91 @@ You can provide your own project, not the example URL. }; ``` -Multiple players can connect to a server and play. +多名玩家可以连接到同一台服务器玩这个游戏。 ```js ``` -Each player has an avatar. +每名玩家都有一个角色。 ```js ``` -Each player is represented by an object created by the `Player` class in `Player.mjs`. +每名玩家都由 `Player.mjs` 中的 `Player` 类创建的对象表示 ```js ``` -At a minimum, each player object should contain a unique `id`, a `score`, and `x` and `y` coordinates representing the player's current position. +至少，每个玩家对象都应该包含一个唯一的 `id`、一个`score`，以及代表玩家当前位置的 `x` 和 `y` 坐标。 ```js ``` -The game has at least one type of collectible item. Complete the `Collectible` class in `Collectible.mjs` to implement this. +游戏中至少有一种可收集道具。 在 `Collectible.mjs` 中完成 `Collectible` 类来实现这一点。 ```js ``` -At a minimum, each collectible item object created by the `Collectible` class should contain a unique `id`, a `value`, and `x` and `y` coordinates representing the item's current position. +至少，由 `Collectible` 类创建的每个可收集物品对象应该包含一个唯一的 `id`、一个 `value` 和代表物品的当前位置 `x` 和 `y` 坐标。 ```js ``` -Players can use the WASD and/or arrow keys to move their avatar. Complete the `movePlayer` method in `Player.mjs` to implement this. +玩家可以使用 WASD 和/或箭头键移动他们的角色。 完成 `Player.mjs` 中的 `movePlayer` 方法来实现这一功能。 ```js ``` -The `movePlayer` method should accept two arguments: a string of "up", "down", "left", or "right", and a number for the amount of pixels the player's position should change. `movePlayer` should adjust the `x` and `y` coordinates of the player object it's called from. +`movePlayer` 方法应该接受两个参数：一个由 “up”、“down”、“left” 或 “right” 组成的字符串，以及一个表示玩家位置应该改变的像素数量的数字。 `movePlayer` 应该调整被调用的玩家对象的 `x` 和 `y` 坐标。 ```js ``` -The player's score should be used to calculate their rank among the other players. Complete the `calculateRank` method in the `Player` class to implement this. +玩家的分数应该用来计算他们与其他玩家相比的排名。 完成 `Player` 类中的 `calculateRank` 方法来实现这个功能。 ```js ``` -The `calculateRank` method should accept an array of objects representing all connected players and return the string `Rank: currentRanking/totalPlayers`. For example, in a game with two players, if Player A has a score of 3 and Player B has a score of 5, `calculateRank` for Player A should return `Rank: 2/2`. +`calculateRank` 方法应该接受一个代表所有连接的玩家的对象数组，并返回字符串 `Rank: currentRanking/totalPlayers`（排名：当前排名/总玩家数）。 举个例子，在一个两人游戏中，如果玩家 A 有 3 分，玩家 B 有 5 分，那么玩家 A 的 `calculateRank` 应该返回 `Rank: 2/2`。 ```js ``` -Players can collide with a collectible item. Complete the `collision` method in `Player.mjs` to implement this. +玩家可以与收集道具发生碰撞。 完成 `Player.mjs` 中的 `collision` 方法实现这一功能。 ```js ``` -The `collision` method should accept a collectible item's object as an argument. If the player's avatar intersects with the item, the `collision` method should return `true`. +`collision` 方法应该接受可收集物品的对象作为参数。 如果玩家的角色与道具重合，`collision` 方法应该返回 `true`。 ```js ``` -All players are kept in sync. +所有玩家保持同步。 ```js ``` -Players can disconnect from the game at any time. +玩家可以在任何时候退出游戏。 ```js ``` -Prevent the client from trying to guess / sniff the MIME type. +防止客户端尝试猜测/嗅探 MIME 类型。 ```js async (getUserInput) => { @@ -145,7 +145,7 @@ async (getUserInput) => { }; ``` -Prevent cross-site scripting (XSS) attacks. +防止跨站脚本（XSS）攻击。 ```js async (getUserInput) => { @@ -155,7 +155,7 @@ async (getUserInput) => { }; ``` -Nothing from the website is cached in the client. +网站上的任何东西都不会被缓存到客户端中。 ```js async (getUserInput) => { @@ -171,7 +171,7 @@ async (getUserInput) => { }; ``` -The headers say that the site is powered by "PHP 7.4.3" even though it isn't (as a security measure). +在请求头中声明该网站由 “PHP 7.4.3” 提供技术支持，尽管它并非如此（作为一种安全措施）。 ```js async (getUserInput) => { diff --git a/curriculum/challenges/chinese/09-information-security/information-security-projects/sha-1-password-cracker.md b/curriculum/challenges/chinese/09-information-security/information-security-projects/sha-1-password-cracker.md index 0cbc96c06f4..a006c05f37b 100644 --- a/curriculum/challenges/chinese/09-information-security/information-security-projects/sha-1-password-cracker.md +++ b/curriculum/challenges/chinese/09-information-security/information-security-projects/sha-1-password-cracker.md @@ -11,18 +11,18 @@ dashedName: sha-1-password-cracker 你将使用我们在 Replit 的初始化项目来完成这个项目。 -- Start by importing the project on Replit. -- Next, you will see a `.replit` window. -- Select `Use run command` and click the `Done` button. +- 首先在 Replit 中导入项目。 +- 接着，你将看到一个 `.replit` 窗口。 +- 选择 `Use run command` 并点击 `Done` 按钮。 我们仍在开发 Python 课程的交互式教学部分。 目前，你可以在 YouTube 上通过 freeCodeCamp.org 上传的一些视频学习这个项目相关的知识。 -- Python for Everybody Video Course (14 hours) +- 每个人视频课程的 Python (14小时) -- Learn Python Basics in Depth (4 hours) +- 深入学习 Python 基础知识（4 小时） -- Intermediate Python Course (6 hours) +- Python 中级课程（6 小时） # --instructions-- @@ -38,15 +38,15 @@ dashedName: sha-1-password-cracker 以下是一些用于测试该功能的散列密码： -- `b305921a3723cd5d70a375cd21a61e60aabb84ec` should return "sammy123" -- `c7ab388a5ebefbf4d550652f1eb4d833e5316e3e` should return "abacab" -- `5baa61e4c9b93f3f0682250b6cf8331b7ee68fd8` should return "password" +- `b305921a3723cd5d70a375cd21a61e60aabb84ec` 应该返回 “sammy123” +- `c7ab388a5ebefbf4d550652f1eb4d833e5316e3e` 应该返回 “abacab” +- `5baa61e4c9b93f3f0682250b6cf8331b7ee68fd8` 应该返回 “password” 以下是一些散列密码，用于在 `use_salts` 设置为 `True` 时测试该功能： -- `53d8b3dc9d39f0184144674e310185e41a87ffd5` should return "superman" -- `da5a4e8cf89539e66097acd2f8af128acae2f8ae` should return "q1w2e3r4t5" -- `ea3f62d498e3b98557f9f9cd0d905028b3b019e1` should return "bubbles1" +- `53d8b3dc9d39f0184144674e310185e41a87ffd5` 应该返回 “superman” +- `da5a4e8cf89539e66097acd2f8af128acae2f8ae` 应该返回 “q1w2e3r4t5” +- `ea3f62d498e3b98557f9f9cd0d905028b3b019e1` 应该返回 “bubbles1” `hashlib` 库已经为你导入。 你应该在你的代码中使用它。 在此了解更多关于 “hashlib” 的信息。 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 060ad54712d..e9b8056193a 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 @@ -18,13 +18,13 @@ dashedName: stock-price-checker - 使用我们在 Replit 上的初始化项目来完成你的项目。 - 使用你选择的网站生成器来完成项目。 需要包含我们 GitHub 仓库的所有文件。 -If you use Replit, follow these steps to set up the project: +如果你使用 Replit，请按照以下步骤设置项目： -- Start by importing the project on Replit. -- Next, you will see a `.replit` window. -- Select `Use run command` and click the `Done` button. +- 首先在 Replit 中导入项目。 +- 接着，你将看到一个 `.replit` 窗口。 +- 选择 `Use run command` 并点击 `Done` 按钮。 -When you are done, make sure a working demo of your project is hosted somewhere public. Then submit the URL to it in the `Solution Link` field. Optionally, also submit a link to your project's source code in the `GitHub Link` field. +当你完成后，请将一个确保正常运行的 demo（项目演示）托管在可以公开访问的平台上。 然后将 demo 的 URL 提交到 `Solution Link` 字段中。 也可以将项目的源码链接提交到 `GitHub Link` 字段中。 # --instructions-- @@ -33,19 +33,19 @@ When you are done, make sure a working demo of your project is hosted somewhere 3. 添加安全功能到 `server.js`。 4. 在 `tests/2_functional-tests.js` 中创建所有的功能测试 -**Note** Privacy Considerations: Due to the requirement that only 1 like per IP should be accepted, you will have to save IP addresses. It is important to remain compliant with data privacy laws such as the General Data Protection Regulation. One option is to get permission to save the user's data, but it is much simpler to anonymize it. For this challenge, remember to anonymize IP addresses before saving them to the database. If you need ideas on how to do this, you may choose to hash the data, truncate it, or set part of the IP address to 0. +**注意** 隐私考虑：由于每个 IP 只能接受一个赞（like），你必须保存 IP 地址。 必须遵守数据隐私法规，例如《通用数据保护条例》。 一个选项是获得保存用户数据的权限，但是匿名化则要简单得多。 对于此挑战，请记住在将 IP 地址保存到数据库之前对其进行匿名化。 如果你想知道如何做到这一点，你可以选择散列数据、截断它、或将 IP 地址的一部分设置为 0。 -Write the following tests in `tests/2_functional-tests.js`: +在 `tests/2_functional-tests.js` 中编写以下测试： -- Viewing one stock: GET request to `/api/stock-prices/` -- Viewing one stock and liking it: GET request to `/api/stock-prices/` -- Viewing the same stock and liking it again: GET request to `/api/stock-prices/` -- Viewing two stocks: GET request to `/api/stock-prices/` -- Viewing two stocks and liking them: GET request to `/api/stock-prices/` +- 查看股价：发送 GET 请求到 `/api/stock-prices/` +- 查看一个股票并关注它：发送 GET 请求到 `/api/stock-prices/` +- 查看同一只股票并再次发送关注：发送 GET 请求到 `/api/stock-prices/` +- 查看两只股票：发送 GET 请求到 `/api/stock-prices/` +- 查看两只股票并关注它：发送 GET 请求到 `/api/stock-prices/` # --hints-- -You can provide your own project, not the example URL. +你可以提交你自己的项目，而不是示例的 URL。 ```js (getUserInput) => { @@ -55,7 +55,7 @@ You can provide your own project, not the example URL. }; ``` -You should set the content security policies to only allow loading of scripts and CSS from your server. +将内容安全策略设置为仅允许从服务器加载脚本和 CSS。 ```js async (getUserInput) => { @@ -70,7 +70,7 @@ async (getUserInput) => { }; ``` -You can send a `GET` request to `/api/stock-prices`, passing a NASDAQ stock symbol to a `stock` query parameter. The returned object will contain a property named `stockData`. +你可以向 `/api/stock-prices` 发送一个 `GET` 请求，将纳斯达克股票代码赋值给 `stock` 查询参数。 返回的对象将包含一个名为 `stockData` 的属性。 ```js async (getUserInput) => { @@ -82,7 +82,7 @@ async (getUserInput) => { }; ``` -The `stockData` property includes the `stock` symbol as a string, the `price` as a number, and `likes` as a number. +`stockData` 属性包括字符串 `stock`、数字 `price`，以及数字 `likes`。 ```js async (getUserInput) => { @@ -97,13 +97,13 @@ async (getUserInput) => { }; ``` -You can also pass along a `like` field as `true` (boolean) to have your like added to the stock(s). Only 1 like per IP should be accepted. +你也可以将 `like` 字段作为 `true`（布尔值）传递，将你的偏好添加到股票中。 每个 IP 应该只接受 1 个赞（like）。 ```js ``` -If you pass along 2 stocks, the returned value will be an array with information about both stocks. Instead of `likes`, it will display `rel_likes` (the difference between the likes on both stocks) for both `stockData` objects. +如果你传递了两只股票，返回值将是一个包含这两只股票信息的数组。 它将会显示对于两个 `stockData` 对象的 `rel_likes`（两只股票所获得的赞同数的区别），而不是 `likes`。 ```js async (getUserInput) => { @@ -118,7 +118,7 @@ async (getUserInput) => { }; ``` -All 5 functional tests are complete and passing. +所有 5 项功能测试都已完成并通过。 ```js async (getUserInput) => { diff --git a/curriculum/challenges/chinese/09-information-security/information-security-with-helmetjs/hash-and-compare-passwords-asynchronously.md b/curriculum/challenges/chinese/09-information-security/information-security-with-helmetjs/hash-and-compare-passwords-asynchronously.md index 08cb7f1c232..80cfa18e76d 100644 --- a/curriculum/challenges/chinese/09-information-security/information-security-with-helmetjs/hash-and-compare-passwords-asynchronously.md +++ b/curriculum/challenges/chinese/09-information-security/information-security-with-helmetjs/hash-and-compare-passwords-asynchronously.md @@ -30,7 +30,7 @@ bcrypt.compare(myPlaintextPassword, hash, (err, res) => { }); ``` -在你记录完成的哈希，并在比较中把 'res' 记录到控制台后，将此添加到你现有的哈希函数中（因为你需要等待哈希完成后再调用比较函数）。 You should see in the console a hash, and then 'true' is printed! If you change 'myPlaintextPassword' in the compare function to 'someOtherPlaintextPassword', then it should say false. +在你记录完成的哈希，并在比较中把 'res' 记录到控制台后，将此添加到你现有的哈希函数中（因为你需要等待哈希完成后再调用比较函数）。 控制台中会首先输出一个哈希结果，然后输出 “true”。 如果将比较函数中的 “myPlaintextPassword” 更改为 “someOtherPlaintextPassword”，则比较的结果应显示 false。 ```js bcrypt.hash('passw0rd!', 13, (err, hash) => { diff --git a/curriculum/challenges/chinese/09-information-security/information-security-with-helmetjs/install-and-require-helmet.md b/curriculum/challenges/chinese/09-information-security/information-security-with-helmetjs/install-and-require-helmet.md index c70e7a442f3..62a0154c9f2 100644 --- a/curriculum/challenges/chinese/09-information-security/information-security-with-helmetjs/install-and-require-helmet.md +++ b/curriculum/challenges/chinese/09-information-security/information-security-with-helmetjs/install-and-require-helmet.md @@ -14,25 +14,25 @@ dashedName: install-and-require-helmet - 使用我们在 Replit 上的初始化项目来完成这些挑战。 - 使用你选择的网站生成器来完成项目。 需要包含我们 GitHub 仓库的所有文件。 -If you use Replit, follow these steps to set up the project: +如果你使用 Replit，请按照以下步骤设置项目： -- Start by importing the project on Replit. -- Next, you will see a `.replit` window. -- Select `Use run command` and click the `Done` button. +- 首先在 Replit 中导入项目。 +- 接着，你将看到一个 `.replit` 窗口。 +- 选择 `Use run command` 并点击 `Done` 按钮。 -When you are done, make sure a working demo of your project is hosted somewhere public. Then submit the URL to it in the `Solution Link` field. +当你完成后，请将一个确保正常运行的 demo（项目演示）托管在可以公开访问的平台上。 然后将 demo 的 URL 提交到 `Solution Link` 字段中。 -Helmet helps you secure your Express apps by setting various HTTP headers. +Helmet 通过设置各种 HTTP 头来保护你的 Express 应用程序。 # --instructions-- -All your code for these lessons goes in the `myApp.js` file between the lines of code we have started you off with. Do not change or delete the code we have added for you. +你在这些课程中写的所有代码都在 `myApp.js` 文件中，在初始代码之间。 不要改变或删除我们为你添加的代码。 -Helmet version `3.21.3` has already been installed, so require it as `helmet` in `myApp.js`. +Helmet `3.21.3` 版已经安装完毕，所以在 `myApp.js` 中请求它作为 `helmet`。 # --hints-- -`helmet` version `3.21.3` should be in `package.json` +`helmet` 版本 `3.21.3` 应该在 `package.json` 中。 ```js (getUserInput) => diff --git a/curriculum/challenges/chinese/09-information-security/information-security-with-helmetjs/set-a-content-security-policy-with-helmet.contentsecuritypolicy.md b/curriculum/challenges/chinese/09-information-security/information-security-with-helmetjs/set-a-content-security-policy-with-helmet.contentsecuritypolicy.md index b238c3ddf42..bc5fc68f1bd 100644 --- a/curriculum/challenges/chinese/09-information-security/information-security-with-helmetjs/set-a-content-security-policy-with-helmet.contentsecuritypolicy.md +++ b/curriculum/challenges/chinese/09-information-security/information-security-with-helmetjs/set-a-content-security-policy-with-helmet.contentsecuritypolicy.md @@ -10,7 +10,7 @@ dashedName: set-a-content-security-policy-with-helmet-contentsecuritypolicy 请注意，本项目是在 Replit 上的初始化项目的基础上进行开发，你也可以从 GitHub 上克隆。 -在这个挑战中，我们要重点讨论现代浏览器中一种能有效减轻安全风险和防御很多种类型常见攻击的安全防护。 通过设置和配置内容安全策略，你可以防止在页面中无意中注入任何内容。 这会让你的应用远离 XSS 漏洞、恶意追踪、恶意 frames 和很多其他攻击。 CSP 通过配置资源白名单来避免这些问题。 你可以给任何一种类型的页面资源（脚本、样式文件、字体、frames、媒体文件等）做这个配置。 它支持很多指令，所以网站管理员可以做细致的控制。 更多详情请参考 HTML 5 Rocks 和 KeyCDN。 Unfortunately CSP is unsupported by older browsers. +在这个挑战中，我们要重点讨论现代浏览器中一种能有效减轻安全风险和防御很多种类型常见攻击的安全防护。 通过设置和配置内容安全策略，你可以防止在页面中无意中注入任何内容。 这会让你的应用远离 XSS 漏洞、恶意追踪、恶意 frames 和很多其他攻击。 CSP 通过配置资源白名单来避免这些问题。 你可以给任何一种类型的页面资源（脚本、样式文件、字体、frames、媒体文件等）做这个配置。 它支持很多指令，所以网站管理员可以做细致的控制。 更多详情请参考 HTML 5 Rocks 和 KeyCDN。 不幸的是，一些旧的浏览器不支持 CSP。 默认的指令很容易受到攻击, 所以设置 defaultSrc 指令作为降级方案很重要。 Helmet 同时支持 defaultSrc 和 default-src 命名规范。 降级方案可以应用在大部分指令上。 diff --git a/curriculum/challenges/chinese/14-responsive-web-design-22/learn-css-grid-by-building-a-magazine/6148d3fff5186b57123d97e2.md b/curriculum/challenges/chinese/14-responsive-web-design-22/learn-css-grid-by-building-a-magazine/6148d3fff5186b57123d97e2.md index 960d4681506..0a0e4098a05 100644 --- a/curriculum/challenges/chinese/14-responsive-web-design-22/learn-css-grid-by-building-a-magazine/6148d3fff5186b57123d97e2.md +++ b/curriculum/challenges/chinese/14-responsive-web-design-22/learn-css-grid-by-building-a-magazine/6148d3fff5186b57123d97e2.md @@ -24,7 +24,7 @@ assert(new __helpers.CSSHelp(document).getStyle('.quote::before')); 你的 `.quote::before` 选择器应该有一个 `content` 属性，设置为 `'" '`。 ```js -assert(new __helpers.CSSHelp(document).getStyle('.quote::before')?.content?.match(/\\?\"\s/)); +assert(new __helpers.CSSHelp(document).getStyle('.quote::before')?.content?.match(/\"\\"\s\"/)); ``` 你应该有一个 `.quote::after` 选择器。 @@ -36,7 +36,7 @@ assert(new __helpers.CSSHelp(document).getStyle('.quote::after')); 你的 `.quote::after` 选择器应该有一个 `content` 属性，设置为 `' "'`。 ```js -assert(new __helpers.CSSHelp(document).getStyle('.quote::after')?.content?.match(/\s\\?\"/)); +assert(new __helpers.CSSHelp(document).getStyle('.quote::after')?.content?.match(/\"\s\\""/)); ``` # --seed-- diff --git a/curriculum/challenges/chinese/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5f07be6ef7412fbad0c5626b.md b/curriculum/challenges/chinese/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5f07be6ef7412fbad0c5626b.md index 777edcc3acf..9036076ffd2 100644 --- a/curriculum/challenges/chinese/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5f07be6ef7412fbad0c5626b.md +++ b/curriculum/challenges/chinese/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5f07be6ef7412fbad0c5626b.md @@ -22,7 +22,7 @@ assert(document.querySelector('section')); 你的 `section` 元素应该有一个结束标签。 结束标签在 `<` 字符之后有一个 `/`。 ```js -assert(code.match(/<\/section\>/)); +assert(code.match(/<\/section\s*>/i)); ``` 整个 `section` 元素应该在 `main` 元素的开始标签和结束标签之间。 @@ -57,15 +57,15 @@ assert.isFalse(includesH1); --fcc-editable-region-- -

CatPhotoApp

+

Cat Photos

Click here to view more cat photos.

A cute orange cat lying on its back. -
+ --fcc-editable-region-- diff --git a/curriculum/challenges/chinese/14-responsive-web-design-22/learn-the-css-box-model-by-building-a-rothko-painting/60a3e3396c7b40068ad6998c.md b/curriculum/challenges/chinese/14-responsive-web-design-22/learn-the-css-box-model-by-building-a-rothko-painting/60a3e3396c7b40068ad6998c.md index e689a290d91..90e1cc92eb8 100644 --- a/curriculum/challenges/chinese/14-responsive-web-design-22/learn-the-css-box-model-by-building-a-rothko-painting/60a3e3396c7b40068ad6998c.md +++ b/curriculum/challenges/chinese/14-responsive-web-design-22/learn-the-css-box-model-by-building-a-rothko-painting/60a3e3396c7b40068ad6998c.md @@ -9,7 +9,7 @@ dashedName: step-34 你的画的颜色和形状太锐利了，不能像 Rothko 一样通过。 -使用 `filter` 属性在 `.canvas` 元素中通过 `2px` 对绘画进行 `blur`。 +使用 `filter` 属性在 `.canvas` 元素中使其 `blur` 为 `2px`。 下面是添加一个 3px `blur` 规则的示例： diff --git a/curriculum/challenges/chinese/15-javascript-algorithms-and-data-structures-22/learn-basic-javascript-by-building-a-role-playing-game/62a257659d0d1e2456f24ba2.md b/curriculum/challenges/chinese/15-javascript-algorithms-and-data-structures-22/learn-basic-javascript-by-building-a-role-playing-game/62a257659d0d1e2456f24ba2.md index 12d385f3107..15aaeb3c283 100644 --- a/curriculum/challenges/chinese/15-javascript-algorithms-and-data-structures-22/learn-basic-javascript-by-building-a-role-playing-game/62a257659d0d1e2456f24ba2.md +++ b/curriculum/challenges/chinese/15-javascript-algorithms-and-data-structures-22/learn-basic-javascript-by-building-a-role-playing-game/62a257659d0d1e2456f24ba2.md @@ -1,13 +1,13 @@ --- id: 62a257659d0d1e2456f24ba2 -title: Step 17 +title: 步骤 17 challengeType: 0 dashedName: step-17 --- # --description-- -Before you start writing your project code, you should move it to its own file to keep things organized. Remove your `console.log("Hello World");` line. Then give your now empty `script` element a `src` attribute set to `./script.js`. +在你开始编写你的项目代码之前，你应该将它移动到自己的文件，使一切组织有序。 删除你的 `console.log("Hello World");` 线。 Then give your now empty `script` element a `src` attribute set to `./script.js`. # --hints-- diff --git a/curriculum/challenges/espanol/02-javascript-algorithms-and-data-structures/functional-programming/implement-map-on-a-prototype.md b/curriculum/challenges/espanol/02-javascript-algorithms-and-data-structures/functional-programming/implement-map-on-a-prototype.md index 80dd65f1a93..ad2593c96d1 100644 --- a/curriculum/challenges/espanol/02-javascript-algorithms-and-data-structures/functional-programming/implement-map-on-a-prototype.md +++ b/curriculum/challenges/espanol/02-javascript-algorithms-and-data-structures/functional-programming/implement-map-on-a-prototype.md @@ -36,7 +36,7 @@ const _callback = element => element.toUpperCase(); assert(JSON.stringify(_test_s.map(_callback)) === JSON.stringify(_test_s.myMap(_callback))); ``` -`[1, 1, 2, 5, 2].myMap((element, index, array) => array[index + 1] || array[0])` should return `[1, 2, 5, 2, 1]`. +`[1, 1, 2, 5, 2].myMap((element, index, array) => array[index + 1] || array[0])` debería devolver `[1, 2, 5, 2, 1]`. ```js const _test_s = [1, 1, 2, 5, 2]; diff --git a/curriculum/challenges/espanol/04-data-visualization/json-apis-and-ajax/get-json-with-the-javascript-fetch-method.md b/curriculum/challenges/espanol/04-data-visualization/json-apis-and-ajax/get-json-with-the-javascript-fetch-method.md index 984ec9e4488..473f4f98a2d 100644 --- a/curriculum/challenges/espanol/04-data-visualization/json-apis-and-ajax/get-json-with-the-javascript-fetch-method.md +++ b/curriculum/challenges/espanol/04-data-visualization/json-apis-and-ajax/get-json-with-the-javascript-fetch-method.md @@ -38,13 +38,37 @@ Actualiza el código para crear y enviar una solicitud `GET` a la API de foto de # --hints-- -Tu código debe hacer una solicitud `GET` con `fetch`. + +Your code should use the fetched data to replace the inner HTML + +```js +const catData = "dummy data"; +const ref = fetch; +fetch = () => Promise.resolve({ json: () => catData }); +async () => { + try { + document.getElementById("getMessage").click(); + await new Promise((resolve, reject) => setTimeout(() => resolve(), 250)); + } catch (error) { + console.log(error); + } finally { + fetch = ref; + assert.equal( + document.getElementById("message").textContent, + JSON.stringify(catData) + ); + } +}; +``` + + +Your code should make a `GET` request with `fetch`. ```js assert(code.match(/fetch\s*\(\s*('|")\/json\/cats\.json\1\s*\)/g)); ``` -Tu código debe usar `then` para convertir la respuesta a JSON. +Your code should use `then` to convert the response to JSON. ```js assert( @@ -54,13 +78,13 @@ assert( ); ``` -Tu código debe usar `then` para manejar los datos convertidos a JSON por el otro `then`. +Your code should use `then` to handle the data converted to JSON by the other `then`. ```js assert(__helpers.removeWhiteSpace(code).match(/\.then\(\(?\w+\)?=>{[^}]*}\)/g)); ``` -Tu código debe obtener el elemento con id `message` y cambiar su HTML interno a la cadena de datos JSON. +Your code should get the element with id `message` and change its inner HTML to the string of JSON data. ```js assert( diff --git a/curriculum/challenges/espanol/06-quality-assurance/advanced-node-and-express/how-to-use-passport-strategies.md b/curriculum/challenges/espanol/06-quality-assurance/advanced-node-and-express/how-to-use-passport-strategies.md index 43b95bce018..f871de7923b 100644 --- a/curriculum/challenges/espanol/06-quality-assurance/advanced-node-and-express/how-to-use-passport-strategies.md +++ b/curriculum/challenges/espanol/06-quality-assurance/advanced-node-and-express/how-to-use-passport-strategies.md @@ -8,23 +8,23 @@ dashedName: how-to-use-passport-strategies # --description-- -In the `index.pug` file supplied, there is a login form. It is hidden because of the inline JavaScript `if showLogin` with the form indented after it. +En el archivo `index.pug` proporcionado, hay un formulario de inicio de sesion. Esta oculto debido al JavaScript en línea `if showLogin` con el formulatio indentado luego de este. -In the `res.render` for that page, add a new variable to the object, `showLogin: true`. When you refresh your page, you should then see the form! This form is set up to **POST** on `/login`. So, this is where you should set up to accept the POST request and authenticate the user. +En el `res.render` para esa página, agrega una nueva variable para el objeto `showLogin: true`. Cuando actualices tu página, entonces deberas ver el formulario! Este formulario est configurado para **POST** en `/login`. Así que, aquí es donde tu deberías configurar para aceptar la petición POST y autenticar al usuario. -For this challenge, you should add the route `/login` to accept a POST request. To authenticate on this route, you need to add a middleware to do so before then sending a response. This is done by just passing another argument with the middleware before with your response. The middleware to use is `passport.authenticate('local')`. +Para este desafío, tu debes agregar la ruta `/login` para aceptar una petición POST. Para autenticarse en esta ruta, se necesita agregar un middleware para hacer eso antes de enviar una respuesta. Esto se hace pasando otro argumento con el middleware antes que tu respuesta. El middleware para usar es `passport.authenticate('local')`. -`passport.authenticate` can also take some options as an argument such as `{ failureRedirect: '/' }` which is incredibly useful, so be sure to add that in as well. Add a response after using the middleware (which will only be called if the authentication middleware passes) that redirects the user to `/profile`. Add that route, as well, and make it render the view `profile.pug`. +`passport.authenticate` puede además tomar algunas opciones como argumento tales como `{ failureRedirect: '/' }` la cual es increiblemente útil, así que asegurate de agregarla también. Agrega una respuesta luego de usar el middleware (la cual solo sera llamada si pasa la autenticación del middleware) esta redirige al usuario a `/profile`. Agrega también esa ruta, y haz que renderice la vista `profile.pug`. -If the authentication was successful, the user object will be saved in `req.user`. +Si la autenticación es exitosa, el objeto usuario será guardado en `req.user`. -At this point, if you enter a username and password in the form, it should redirect to the home page `/`, and the console of your server should display `'User {USERNAME} attempted to log in.'`, since we currently cannot login a user who isn't registered. +En este punto, si ingresaste un nombre de usuario y contraseña en el formulario, esta debería redirigir a la página inicial `/`, y la consola de tu servidor debería mostrar `'User {USERNAME} attempted to log in.'`, ya que actualmento no podemos iniciar sesión a un usuario que no esta registrado. -Submit your page when you think you've got it right. If you're running into errors, you can check out the project completed up to this point. +Envía tu página cuando creas que esta correcta. Si te encuentras con errores, tu puedes comprueba el proyecto realizado hasta este punto. # --hints-- -All steps should be correctly implemented in `server.js`. +Todos los pasos deben ser correctamente implementados en `server.js`. ```js async (getUserInput) => { @@ -49,7 +49,7 @@ async (getUserInput) => { } ``` -A POST request to `/login` should correctly redirect to `/`. +Una solicitud POST `/login` debería redirigir correctamente a `/`. ```js async (getUserInput) => { diff --git a/curriculum/challenges/espanol/06-quality-assurance/advanced-node-and-express/implementation-of-social-authentication-iii.md b/curriculum/challenges/espanol/06-quality-assurance/advanced-node-and-express/implementation-of-social-authentication-iii.md index 0726c66eedf..87146cac80c 100644 --- a/curriculum/challenges/espanol/06-quality-assurance/advanced-node-and-express/implementation-of-social-authentication-iii.md +++ b/curriculum/challenges/espanol/06-quality-assurance/advanced-node-and-express/implementation-of-social-authentication-iii.md @@ -41,9 +41,9 @@ myDataBase.findOneAndUpdate( `findOneAndUpdate` te permite buscar un objeto y actualizarlo. Si el objeto no existe, será insertado y puesto a disposición de la función callback. En este ejemplo, siempre establecemos `last_login`, incrementamos el `login_count` por `1`, y sólo rellenamos la mayoría de los campos cuando se inserta un nuevo objeto (nuevo usuario). Ten en cuenta el uso de valores predeterminados. A veces un perfil devuelto no tendrá toda la información rellenada o el usuario la mantendrá privada. En este caso, lo gestionas para prevenir un error. -You should be able to login to your app now. Try it! +Debería poder iniciar sesión en su aplicación ahora. ¡Intentalo! -Envía tu página cuando creas que lo has hecho bien. If you're running into errors, you can check out the project completed up to this point. +Envía tu página cuando creas que lo has hecho bien. Si te encuentras con errores, puedesconsulta el proyecto realizado hasta este momento. # --hints-- diff --git a/curriculum/challenges/espanol/06-quality-assurance/quality-assurance-projects/american-british-translator.md b/curriculum/challenges/espanol/06-quality-assurance/quality-assurance-projects/american-british-translator.md index 42c6f546596..2eec62e9d7b 100644 --- a/curriculum/challenges/espanol/06-quality-assurance/quality-assurance-projects/american-british-translator.md +++ b/curriculum/challenges/espanol/06-quality-assurance/quality-assurance-projects/american-british-translator.md @@ -14,62 +14,62 @@ Crea una aplicación full stack de JavaScript que sea funcionalmente similar a e - Usa nuestro proyecto inicial de Replit para completar tu proyecto. - Usa un constructor de sitios de tu elección para completar el proyecto. Asegúrate de incorporar todos los archivos de nuestro repositorio de GitHub. -If you use Replit, follow these steps to set up the project: +Si usas Replit, sigue estos pasos para configurar el proyecto: -- Start by importing the project on Replit. -- Next, you will see a `.replit` window. -- Select `Use run command` and click the `Done` button. +- Empieza importando el proyecto en Replit. +- Siguiente, verás una ventana `.replit`. +- Selecciona `Use run command` y click en el botón `Done`. -When you are done, make sure a working demo of your project is hosted somewhere public. Then submit the URL to it in the `Solution Link` field. Optionally, also submit a link to your project's source code in the `GitHub Link` field. +Cuando este hecho, asegurate que una demo de trabajo de tu proyecto este hospedad en algún sitio público. Luego envía la URL para esto en el campo `Solution Link`. Opcionalmente, también envía un enlace para el código fuente de tu proyecto en el campo `GitHub Link`. # --instructions-- -- All logic can go into `/components/translator.js` -- Complete the `/api/translate` route in `/routes/api.js` -- Create all of the unit/functional tests in `tests/1_unit-tests.js` and `tests/2_functional-tests.js` -- See the JavaScript files in `/components` for the different spelling and terms your application should translate -- To run the tests on Replit, set `NODE_ENV` to `test` without quotes in the `.env` file -- To run the tests in the console, use the command `npm run test`. To open the Replit console, press Ctrl+Shift+P (Cmd if on a Mac) and type "open shell" +- Toda la lógica puede ir dentro de `/components/translator.js` +- Completa la ruta `/api/translate` en `/routes/api.js` +- Crea todo lo de las pruebas unitarias/funcionales tests en `tests/1_unit-tests.js` y `tests/2_functional-tests.js` +- Consulta los archivos JavaScript en `/components` para las diferentes pronunciaciones y terminos que tu aplicación debería traducir +- Para ejecutar las pruebas en Replit, establece `NODE_ENV` a `test` sin las comillas en el archivo `.env` +- Para ejecutar las pruebas en la consola, usa el comando: `npm run test`. Para abrir la consola Replit, presiona Ctrl+Shift+P (Cmd en Mac) y tipea "open shell" -Write the following tests in `tests/1_unit-tests.js`: +Escribe las siguientes pruebas en `tests/1_unit-tests.js`: -- Translate `Mangoes are my favorite fruit.` to British English -- Translate `I ate yogurt for breakfast.` to British English -- Translate `We had a party at my friend's condo.` to British English -- Translate `Can you toss this in the trashcan for me?` to British English -- Translate `The parking lot was full.` to British English -- Translate `Like a high tech Rube Goldberg machine.` to British English -- Translate `To play hooky means to skip class or work.` to British English -- Translate `No Mr. Bond, I expect you to die.` to British English -- Translate `Dr. Grosh will see you now.` to British English -- Translate `Lunch is at 12:15 today.` to British English -- Translate `We watched the footie match for a while.` to American English -- Translate `Paracetamol takes up to an hour to work.` to American English -- Translate `First, caramelise the onions.` to American English -- Translate `I spent the bank holiday at the funfair.` to American English -- Translate `I had a bicky then went to the chippy.` to American English -- Translate `I've just got bits and bobs in my bum bag.` to American English -- Translate `The car boot sale at Boxted Airfield was called off.` to American English -- Translate `Have you met Mrs Kalyani?` to American English -- Translate `Prof Joyner of King's College, London.` to American English -- Translate `Tea time is usually around 4 or 4.30.` to American English -- Highlight translation in `Mangoes are my favorite fruit.` -- Highlight translation in `I ate yogurt for breakfast.` -- Highlight translation in `We watched the footie match for a while.` -- Highlight translation in `Paracetamol takes up to an hour to work.` +- Traduce `Mangoes are my favorite fruit.` a Inglés Británico +- Traduce `I ate yogurt for breakfast.` a Inglés Británico +- Traduce `We had a party at my friend's condo.` a Inglés Británico +- Traduce `Can you toss this in the trashcan for me?` a Inglés Británico +- Traduce `The parking lot was full.` a Inglés Británico +- Traduce `Like a high tech Rube Goldberg machine.` a Inglés Británico +- Traduce `To play hooky means to skip class or work.` a Inglés Británico +- Traduce `No Mr. Bond, I expect you to die.` a Inglés Británico +- Traduce `Dr. Grosh will see you now.` a Inglés Británico +- Traduce `Lunch is at 12:15 today.` a Inglés Británico +- Traduce `We watched the footie match for a while.` a Inglés Americano +- Traduce `Paracetamol takes up to an hour to work.` a Inglés Americano +- Traduce `First, caramelise the onions.` a Inglés Americano +- Traduce `I spent the bank holiday at the funfair.` a Inglés Americano +- Traduce `I had a bicky then went to the chippy.` a Inglés Americano +- Traduce `I've just got bits and bobs in my bum bag.` a Inglés Americano +- Traduce `The car boot sale at Boxted Airfield was called off.` a Inglés Americano +- Traduce `Have you met Mrs Kalyani?` a Inglés Americano +- Traduce `Prof Joyner of King's College, London.` a Inglés Americano +- Traduce `Tea time is usually around 4 or 4.30.` a Inglés Americano +- Resalta la traducción en `Mangoes are my favorite fruit.` +- Resalta la traducción en `I ate yogurt for breakfast.` +- Resalta la traducción en `We watched the footie match for a while.` +- Resalta la traducción en `Paracetamol takes up to an hour to work.` -Write the following tests in `tests/2_functional-tests.js`: +Escribe las siguientes pruebas en `tests/2_functional-tests.js`: -- Translation with text and locale fields: POST request to `/api/translate` -- Translation with text and invalid locale field: POST request to `/api/translate` -- Translation with missing text field: POST request to `/api/translate` -- Translation with missing locale field: POST request to `/api/translate` -- Translation with empty text: POST request to `/api/translate` -- Translation with text that needs no translation: POST request to `/api/translate` +- Traduce con texto y campos locales: petición POST a `/api/translate` +- Traduce con texto y campo local no válido: petición POST a `/api/translate` +- Traducción con campo de texto faltante: POST request to `/api/translate` +- Traducción con campo local faltante: petición POST a `/api/translate` +- Traducción con texto vacío: petición POST a `/api/translate` +- Traduce con texto eso que no necesita traducción: petición POST a `/api/translate` # --hints-- -I can provide my own project, not the example URL. +You should provide your own project, not the example URL. ```js (getUserInput) => { @@ -81,7 +81,7 @@ I can provide my own project, not the example URL. }; ``` -You can `POST` to `/api/translate` with a body containing `text` with the text to translate and `locale` with either `american-to-british` or `british-to-american`. The returned object should contain the submitted `text` and `translation` with the translated text. +Puedes `POST` a `/api/translate` con un cuerpo conteniendo `text` con el texto para traducir y `locale` con cualquiera `american-to-british` o `british-to-american`. El objeto devuelto debería contener el `text` y `translation` con el texto traducido. ```js async (getUserInput) => { @@ -109,7 +109,7 @@ async (getUserInput) => { }; ``` -The `/api/translate` route should handle the way time is written in American and British English. For example, ten thirty is written as "10.30" in British English and "10:30" in American English. The `span` element should wrap the entire time string, i.e. `10:30`. +La ruta `/api/translate` debería manejar la forma de escritura de hora en inglés Americano y Británico. Por ejemplo, diez y treinta es escrito como "10.30" en Inglés Británico y "10:30" en Inglés Americano. El elemento `span` debería envolver la cadena de tiempo entera, por Ej. `10:30`. ```js async (getUserInput) => { @@ -136,7 +136,7 @@ async (getUserInput) => { }; ``` -The `/api/translate` route should also handle the way titles/honorifics are abbreviated in American and British English. For example, Doctor Wright is abbreviated as "Dr Wright" in British English and "Dr. Wright" in American English. See `/components/american-to-british-titles.js` for the different titles your application should handle. +La ruta `/api/translate` debería manejar la manera en que los titulares/honoríficos son abreviados en Inglés Americano y Británico. Por ejemplo, Doctor Wright es abreviado como "Dr Wright" en Inglés Británico y "Dr. Wright" en Inglés Americano. Consulta `/components/american-to-british-titles.js` para los diferentes titulares que tu aplicación debería manejar. ```js async (getUserInput) => { @@ -163,7 +163,7 @@ async (getUserInput) => { }; ``` -Wrap any translated spelling or terms with `...` tags so they appear in green. +Agrupa cualquier pronunciación traducida o terminos con las etiquetas `...` entonces aparecerán en verde. ```js async (getUserInput) => { @@ -191,7 +191,7 @@ async (getUserInput) => { }; ``` -If one or more of the required fields is missing, return `{ error: 'Required field(s) missing' }`. +Si falta uno o más campos requeridos, devuelve `{ error: 'Required field(s) missing' }`. ```js async (getUserInput) => { @@ -212,7 +212,7 @@ async (getUserInput) => { }; ``` -If `text` is empty, return `{ error: 'No text to translate' }` +Si `text` esta vació, devuelve `{ error: 'No text to translate' }` ```js async (getUserInput) => { @@ -233,7 +233,7 @@ async (getUserInput) => { }; ``` -If `locale` does not match one of the two specified locales, return `{ error: 'Invalid value for locale field' }`. +Si `locale` no coincide con uno de los dos locales especificados, devuelve `{ error: 'Invalid value for locale field' }`. ```js async (getUserInput) => { @@ -255,7 +255,7 @@ async (getUserInput) => { }; ``` -If `text` requires no translation, return `"Everything looks good to me!"` for the `translation` value. +Si `text` no requiere traduciión, devuelve `"Everything looks good to me!"` para el valor `translation`. ```js async (getUserInput) => { @@ -282,7 +282,7 @@ async (getUserInput) => { }; ``` -All 24 unit tests are complete and passing. See `/tests/1_unit-tests.js` for the expected behavior you should write tests for. +Todas las 24 pruebas unitarias estan completas y pasan. Consulta `/tests/1_unit-tests.js` para el comportamiento esperado para el que deberías escribir pruebas. ```js async (getUserInput) => { @@ -307,7 +307,7 @@ async (getUserInput) => { }; ``` -All 6 functional tests are complete and passing. See `/tests/2_functional-tests.js` for the functionality you should write tests for. +Todas las 6 pruebas funcionales estan completas y pasan. Consulta `/tests/2_functional-tests.js` para la funcionalidad a la que deberías escribir pruebas. ```js async (getUserInput) => { diff --git a/curriculum/challenges/espanol/09-information-security/information-security-projects/anonymous-message-board.md b/curriculum/challenges/espanol/09-information-security/information-security-projects/anonymous-message-board.md index 4e1348bb5c0..a0988310731 100644 --- a/curriculum/challenges/espanol/09-information-security/information-security-projects/anonymous-message-board.md +++ b/curriculum/challenges/espanol/09-information-security/information-security-projects/anonymous-message-board.md @@ -16,13 +16,13 @@ Trabajar en este proyecto implicará escribir tu código utilizando uno de los s - Usa nuestra plantilla en Replit para completar tu proyecto. - Utiliza un constructor de sitios de tu elección para completar el proyecto. Asegúrate de incorporar todos los archivos de nuestro repositorio GitHub. -If you use Replit, follow these steps to set up the project: +Si usas Replit, sigue estos pasos para configurar el proyecto: -- Start by importing the project on Replit. -- Next, you will see a `.replit` window. -- Select `Use run command` and click the `Done` button. +- Empieza importando el proyecto en Replit. +- Siguiente, verás una ventana`.replit`. +- Selecciona `Use run command` y da click en el botón `Done`. -When you are done, make sure a working demo of your project is hosted somewhere public. Then submit the URL to it in the `Solution Link` field. Optionally, also submit a link to your project's source code in the `GitHub Link` field. +Cuando lo hayas hecho, asegurate que haya una demo de trabajo de tu proyecto hospedada en un sitio público. Luego envía la URL para esta en el campo `Solution Link`. Opcionalmente, además envía un enlace del código fuente de tu proyecto en el campo`GitHub Link`. # --instructions-- @@ -30,22 +30,22 @@ When you are done, make sure a working demo of your project is hosted somewhere 2. Se recomienda crear controladores/manejadores y manejar el enrutamiento en `routes/api.js` 3. Añadirás cualquier característica de seguridad a `server.js` -Write the following tests in `tests/2_functional-tests.js`: +Escribe las siguientes pruebas en `tests/2_functional-tests.js`: -- Creating a new thread: POST request to `/api/threads/{board}` -- Viewing the 10 most recent threads with 3 replies each: GET request to `/api/threads/{board}` -- Deleting a thread with the incorrect password: DELETE request to `/api/threads/{board}` with an invalid `delete_password` -- Deleting a thread with the correct password: DELETE request to `/api/threads/{board}` with a valid `delete_password` -- Reporting a thread: PUT request to `/api/threads/{board}` -- Creating a new reply: POST request to `/api/replies/{board}` -- Viewing a single thread with all replies: GET request to `/api/replies/{board}` -- Deleting a reply with the incorrect password: DELETE request to `/api/replies/{board}` with an invalid `delete_password` -- Deleting a reply with the correct password: DELETE request to `/api/replies/{board}` with a valid `delete_password` -- Reporting a reply: PUT request to `/api/replies/{board}` +- Creando un nuevo hilo: POST petición a `/api/threads/{board}` +- Visualización de los 10 más recientes hilos con 3 respuestas cada: GET petición a `/api/threads/{board}` +- Eliminar un hilo con la contraseña incorrecta: DELETE request to `/api/threads/{board}` with an invalid `delete_password` +- Eliminar un hilo con la contraseña correcta: DELETE request to `/api/threads/{board}` with a valid `delete_password` +- Reportando un hilo: petición PUT a `/api/threads/{board}` +- Creando una nueva contestación: petición POST a`/api/replies/{board}` +- Visualizando un único hilo con todas las contestaciones: GET peticiones hacia `/api/replies/{board}` +- Eliminando una respuesta con la contraseña incorrecta: DELETE request to `/api/replies/{board}` with an invalid `delete_password` +- Eliminando una respuesta con la contraseña correcta: DELETE request to `/api/replies/{board}` with a valid `delete_password` +- Reporte de una respuesta: solicitud PUT a`/api/replies/{board}` # --hints-- -You can provide your own project, not the example URL. +Puedes proporcionar tu propio proyecto, no la URL ejemplo. ```js (getUserInput) => { @@ -57,7 +57,7 @@ You can provide your own project, not the example URL. }; ``` -Only allow your site to be loaded in an iFrame on your own pages. +Solo permitele a tu sitio ser cargado dentro de un iFrame sobre tus propias páginas. ```js async (getUserInput) => { @@ -67,7 +67,7 @@ async (getUserInput) => { }; ``` -Do not allow DNS prefetching. +No se permite DNS prefetching. ```js async (getUserInput) => { @@ -77,7 +77,7 @@ async (getUserInput) => { }; ``` -Only allow your site to send the referrer for your own pages. +Solo permite a tu sitio enviar a lo concerniente para tus propias páginas. ```js async (getUserInput) => { @@ -87,7 +87,7 @@ async (getUserInput) => { }; ``` -You can send a POST request to `/api/threads/{board}` with form data including `text` and `delete_password`. The saved database record will have at least the fields `_id`, `text`, `created_on`(date & time), `bumped_on`(date & time, starts same as `created_on`), `reported` (boolean), `delete_password`, & `replies` (array). +Puedes enviar una petición POST a `/api/threads/{board}` con el formulario de datos incluyendo `text` and `delete_password`. El registo de base de datos tendrá al menos los campos: `_id`, `text`, `created_on`(date & time), `bumped_on`(date & time, starts same as `created_on`), `reported` (boolean), `delete_password`, & `replies` (array). ```js async (getUserInput) => { @@ -119,7 +119,7 @@ async (getUserInput) => { }; ``` -You can send a POST request to `/api/replies/{board}` with form data including `text`, `delete_password`, & `thread_id`. This will update the `bumped_on` date to the comment's date. In the thread's `replies` array, an object will be saved with at least the properties `_id`, `text`, `created_on`, `delete_password`, & `reported`. +Puedes enviar una petición POST a `/api/replies/{board}` con el fomulario de datos incluyendo:`text`, `delete_password`, & `thread_id`. Esto actualizará la fecha `bumped_on` en la fecha de comentarios. En el arreglo de hilos `replies`, un Objeto será guardado con al menos las propiedades: `_id`, `text`, `created_on`, `delete_password`, & `reported`. ```js async (getUserInput) => { diff --git a/curriculum/challenges/espanol/09-information-security/information-security-projects/port-scanner.md b/curriculum/challenges/espanol/09-information-security/information-security-projects/port-scanner.md index 71bad3887db..6bde7264572 100644 --- a/curriculum/challenges/espanol/09-information-security/information-security-projects/port-scanner.md +++ b/curriculum/challenges/espanol/09-information-security/information-security-projects/port-scanner.md @@ -11,18 +11,18 @@ dashedName: port-scanner En este proyecto, vas a trabajar con nuestra plantilla de Replit. -- Start by importing the project on Replit. -- Next, you will see a `.replit` window. -- Select `Use run command` and click the `Done` button. +- Empieza importando el proyecot en Replit. +- Siguiente, verás una ventana de `.replit`. +- Selecciona `Use run command` y clicar en el botón `Done`. Todavía estamos desarrollando la parte interactiva del currículo de Python. Por ahora, aquí hay algunos videos en el canal de YouTube de freeCodeCamp.org que te enseñaran todo lo que necesitas saber para completar este proyecto: -- Python for Everybody Video Course (14 hours) +- Video curso Python para todos. (14 horas) -- Learn Python Basics in Depth (4 hours) +- Aprende las bases de Python en profundidad. (4 horas) -- Intermediate Python Course (6 hours) +- Curso Intermedio de Python (6 horas) # --instructions-- 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 deadac6c14e..cec06532735 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 @@ -18,9 +18,9 @@ Trabajar en este proyecto implicará escribir tu código utilizando uno de los s - Usa este proyecto inicial de Replit para completar tu proyecto. - Utiliza un constructor de sitios de tu elección para completar el proyecto. Asegúrate de incorporar todos los archivos de nuestro repositorio GitHub. -If you use Replit, follow these steps to set up the project: +Si usas Replit, sigue estos pasos para configurar el proyecto: -- Start by importing the project on Replit. +- Empieza importando el proyecto en Replit. - Next, you will see a `.replit` window. - Select `Use run command` and click the `Done` button. diff --git a/curriculum/challenges/espanol/09-information-security/information-security-with-helmetjs/avoid-inferring-the-response-mime-type-with-helmet.nosniff.md b/curriculum/challenges/espanol/09-information-security/information-security-with-helmetjs/avoid-inferring-the-response-mime-type-with-helmet.nosniff.md index bdfe0a5f4e0..c87e37be5ba 100644 --- a/curriculum/challenges/espanol/09-information-security/information-security-with-helmetjs/avoid-inferring-the-response-mime-type-with-helmet.nosniff.md +++ b/curriculum/challenges/espanol/09-information-security/information-security-with-helmetjs/avoid-inferring-the-response-mime-type-with-helmet.nosniff.md @@ -1,6 +1,6 @@ --- id: 587d8248367417b2b2512c3a -title: Avoid Inferring the Response MIME Type with helmet.noSniff() +title: Evita inferir en la Respuesta MIME Tipo con helmet.noSniff() challengeType: 2 forumTopicId: 301574 dashedName: avoid-inferring-the-response-mime-type-with-helmet-nosniff @@ -8,15 +8,15 @@ dashedName: avoid-inferring-the-response-mime-type-with-helmet-nosniff # --description-- -As a reminder, this project is being built upon the following starter project on Replit, or cloned from GitHub. Browsers can use content or MIME sniffing to override response `Content-Type` headers to guess and process the data using an implicit content type. While this can be convenient in some scenarios, it can also lead to some dangerous attacks. This middleware sets the X-Content-Type-Options header to `nosniff`, instructing the browser to not bypass the provided `Content-Type`. +Como recordatorio, este proyecto esta contruido hasta el próximo proyecto inicial en Replit, o clonado desde GitHub. Navegadores pueden usar contenido o recorte MIME para anular los encabezados de respuesta `Content-Type` headers para adivinar y procesar los datos usando un tipo de contenido implícito. Mientras esto puede ser conveniente en algunos escenarios, esto puede conducir a algunos ataques peligrosos. Este middleware configura el encabezado X-Content-Type-Options a `nosniff`, indicando al navegador no eluda el proporcionado `Content-Type`. # --instructions-- -Use the `helmet.noSniff()` method on your server. +Usa el método `helmet.noSniff()` en tu servidor. # --hints-- -helmet.noSniff() middleware should be mounted correctly +helmet.noSniff() middleware debe ser montado correctamente ```js (getUserInput) => diff --git a/curriculum/challenges/espanol/09-information-security/information-security-with-helmetjs/configure-helmet-using-the-parent-helmet-middleware.md b/curriculum/challenges/espanol/09-information-security/information-security-with-helmetjs/configure-helmet-using-the-parent-helmet-middleware.md index f295006c265..ce11c778582 100644 --- a/curriculum/challenges/espanol/09-information-security/information-security-with-helmetjs/configure-helmet-using-the-parent-helmet-middleware.md +++ b/curriculum/challenges/espanol/09-information-security/information-security-with-helmetjs/configure-helmet-using-the-parent-helmet-middleware.md @@ -1,6 +1,6 @@ --- id: 587d8249367417b2b2512c40 -title: Configure Helmet Using the ‘parent’ helmet() Middleware +title: Configura Helmet Usando el ‘padre’ helmet() Middleware challengeType: 2 forumTopicId: 301575 dashedName: configure-helmet-using-the-parent-helmet-middleware @@ -10,7 +10,7 @@ dashedName: configure-helmet-using-the-parent-helmet-middleware Como recordatorio, este proyecto se basa en el siguiente proyecto inicial en Replit, o clonado de GitHub. -`app.use(helmet())` will automatically include all the middleware introduced above, except `noCache()`, and `contentSecurityPolicy()`, but these can be enabled if necessary. You can also disable or configure any other middleware individually, using a configuration object. +`app.use(helmet())` automaticamente incluira todo el middleware introducido arriba, excepto `noCache()`, y `contentSecurityPolicy()`, pero esto puedeser habilitado si es necesario. También puede desactivar o configurar cualquier otro middleware individualmente, usando un objeto de configuración. **Ejemplo:** @@ -29,11 +29,11 @@ app.use(helmet({ })) ``` -We introduced each middleware separately for teaching purposes and for ease of testing. Using the ‘parent’ `helmet()` middleware is easy to implement in a real project. +Presentamos cada middleware separadamente para propósitos educativos y para facilidad de pruebas. Usando el middleware ‘padre’ `helmet()` es fácil de implementar en un proyecto real. # --hints-- -no tests - it's a descriptive challenge +sin pruebas - Este es un desafío descriptivo ```js assert(true); diff --git a/curriculum/challenges/espanol/09-information-security/information-security-with-helmetjs/install-and-require-helmet.md b/curriculum/challenges/espanol/09-information-security/information-security-with-helmetjs/install-and-require-helmet.md index eba136f29ed..2b8ba1978e7 100644 --- a/curriculum/challenges/espanol/09-information-security/information-security-with-helmetjs/install-and-require-helmet.md +++ b/curriculum/challenges/espanol/09-information-security/information-security-with-helmetjs/install-and-require-helmet.md @@ -14,25 +14,25 @@ Trabajar en estos desafíos implica escribir tu código usando uno de los siguie - Usa nuestro proyecto de inicial Replit para completar estos retos. - Utilice un constructor de sitios de su elección para completar el proyecto. Asegúrese de incorporar todos los archivos de nuestro repositorio de GitHub. -If you use Replit, follow these steps to set up the project: +Si usas Replit, sigue estos pasos para configurar el proyecto: -- Start by importing the project on Replit. -- Next, you will see a `.replit` window. -- Select `Use run command` and click the `Done` button. +- Empieza importando el proyecto en Replit. +- Siguiente, tu verás una ventana `.replit`. +- Selecciona `Use run command`y cliquea el botón `Done`. -When you are done, make sure a working demo of your project is hosted somewhere public. Then submit the URL to it in the `Solution Link` field. +Cuando esté hecho, asegurate que una demo de tu trabajo este hospedado en un sitio público. Luego envía la URL para ello en el campo `Solution Link`. -Helmet helps you secure your Express apps by setting various HTTP headers. +Helmet ayuda asegurar tus aplicaciones Express apps configurando varios encabezados HTTP. # --instructions-- -All your code for these lessons goes in the `myApp.js` file between the lines of code we have started you off with. Do not change or delete the code we have added for you. +Todo el código para estas lecciones va a ir en el archivo `myApp.js` entre las líneas de código que iniciamos para ti. No cambies o borres el código que agregamos para ti. -Helmet version `3.21.3` has already been installed, so require it as `helmet` in `myApp.js`. +Helmet version `3.21.3` ha sido instalado, este requiere que `helmet` este en `myApp.js`. # --hints-- -`helmet` version `3.21.3` should be in `package.json` +`helmet` version `3.21.3` debería estar en `package.json` ```js (getUserInput) => diff --git a/curriculum/challenges/espanol/10-coding-interview-prep/data-structures/add-a-new-element-to-a-binary-search-tree.md b/curriculum/challenges/espanol/10-coding-interview-prep/data-structures/add-a-new-element-to-a-binary-search-tree.md index 1c8d8718c85..1016bbdbdee 100644 --- a/curriculum/challenges/espanol/10-coding-interview-prep/data-structures/add-a-new-element-to-a-binary-search-tree.md +++ b/curriculum/challenges/espanol/10-coding-interview-prep/data-structures/add-a-new-element-to-a-binary-search-tree.md @@ -12,7 +12,7 @@ Esta serie de desafíos introducen la estructura de datos de árbol. Los árbole Primero, vamos a describir alguna terminología común que encontraremos con los árboles. El nodo raíz es la parte superior del árbol. Los puntos de datos en el árbol son llamados nodos. Los nodos con ramas que unen a otros nodos son llamados como el padre del nodo al que la rama conduce ( el hijo). Otros términos familiares más complicados son aplicados como podría esperarse. Un subárbol se refiere a todos los descendientes de un nodo en particular, las ramas pueden ser llamadas aristas, y los nodos hojas son los nodos al final del árbol que no tienen hijos. Finalmente, tenga en cuenta que los árboles son inherentemente estructuras de datos recursivas. Esto quiere decir, que todos los hijos de un nodo son padres de su propio subárbol y así sucesivamente. Es importante entender la naturaleza recursiva de los árboles cuando diseñamos algoritmos para las operaciones comunes en árboles. -To begin, we will discuss a particular type of tree, the binary tree. De hecho, en realidad discutiremos un árbol binario en particular, un árbol binario de búsqueda. Describiremos lo que esto significa. Mientras que la estructura de datos de árbol puede tener cualquier número de ramas en un solo nodo, un árbol binario solamente puede tener dos ramas para cada nodo. Además, un árbol binario de búsqueda se ordena respecto a los subárboles hijos, el valor de cada nodo en el subárbol izquierdo es menor o igual que el valor del nodo padre, y el valor de cada nodo en el subárbol derecho es mayor o igual que el valor del nodo padre. Es muy útil visualizar esta relación de orden para entenderla mejor: +Para comenzar, trataremos un tipo particular de árbol, el árbol binario. De hecho, en realidad discutiremos un árbol binario en particular, un árbol binario de búsqueda. Describiremos lo que esto significa. Mientras que la estructura de datos de árbol puede tener cualquier número de ramas en un solo nodo, un árbol binario solamente puede tener dos ramas para cada nodo. Además, un árbol binario de búsqueda se ordena respecto a los subárboles hijos, el valor de cada nodo en el subárbol izquierdo es menor o igual que el valor del nodo padre, y el valor de cada nodo en el subárbol derecho es mayor o igual que el valor del nodo padre. Es muy útil visualizar esta relación de orden para entenderla mejor:
diff --git a/curriculum/challenges/espanol/10-coding-interview-prep/data-structures/use-.has-and-.size-on-an-es6-set.md b/curriculum/challenges/espanol/10-coding-interview-prep/data-structures/use-.has-and-.size-on-an-es6-set.md index 55d4ac67de8..8adcccef63a 100644 --- a/curriculum/challenges/espanol/10-coding-interview-prep/data-structures/use-.has-and-.size-on-an-es6-set.md +++ b/curriculum/challenges/espanol/10-coding-interview-prep/data-structures/use-.has-and-.size-on-an-es6-set.md @@ -1,6 +1,6 @@ --- id: 587d8255367417b2b2512c72 -title: Use .has and .size on an ES6 Set +title: Usa .has y .size en un Set ES6 challengeType: 1 forumTopicId: 301717 dashedName: use--has-and--size-on-an-es6-set @@ -8,21 +8,21 @@ dashedName: use--has-and--size-on-an-es6-set # --description-- -Let's look at the .has and .size methods available on the ES6 Set object. +Veamos a los métodos .has y .size disponibles en el objeto Set de ES6. -First, create an ES6 Set +Primero, creamos un Set ES6 ```js var set = new Set([1,2,3]); ``` -The .has method will check if the value is contained within the set. +El método .has comprobará si el valor esta almacenado dentro del set. ```js var hasTwo = set.has(2); ``` -The .size method will return an integer representing the size of the Set +El método .size devuelve un entero representando el tamaño del Set ```js var howBig = set.size; @@ -30,11 +30,11 @@ var howBig = set.size; # --instructions-- -In this exercise we will pass an array and a value to the checkSet() function. Your function should create an ES6 set from the array argument. Find if the set contains the value argument. Find the size of the set. And return those two values in an array. +En este ejercicio pasamos un arreglo y un valor a la función checkSet(). Tu función debería crear un set ES6 set desde el argumento arreglo. Encuentra si el set contiene el argumento valor. Encuentra el tamaño de el set. Y devuelve estos dos valores en un arreglo. # --hints-- -`checkSet([4, 5, 6], 3)` should return [ false, 3 ] +`checkSet([4, 5, 6], 3)` debería devolver [ false, 3 ] ```js assert( diff --git a/curriculum/challenges/espanol/10-coding-interview-prep/data-structures/use-breadth-first-search-in-a-binary-search-tree.md b/curriculum/challenges/espanol/10-coding-interview-prep/data-structures/use-breadth-first-search-in-a-binary-search-tree.md index 73c51e7b939..3b04e915789 100644 --- a/curriculum/challenges/espanol/10-coding-interview-prep/data-structures/use-breadth-first-search-in-a-binary-search-tree.md +++ b/curriculum/challenges/espanol/10-coding-interview-prep/data-structures/use-breadth-first-search-in-a-binary-search-tree.md @@ -14,11 +14,11 @@ En este método, empezamos agregando el nodo raíz a la cola. Luego empezamos un # --instructions-- -Let's create a breadth-first search method in our tree called `levelOrder`. This method should return an array containing the values of all the tree nodes, explored in a breadth-first manner. Be sure to return the values in the array, not the nodes themselves. A level should be traversed from left to right. Next, let's write a similar method called `reverseLevelOrder` which performs the same search but in the reverse direction (right to left) at each level. +Creamos un método de búsqueda de primera-amplitud en nuestro árbol llamado `levelOrder`. Este método debería devolver un arreglo conteniendo los valores de todos los nodos del árbol, explorados en la forma primera-amplitud. Asegurate de devolver los valores en el arreglo, no los nodos por sí mismos. Un nivel debería ser atravesado de izquierda a derecha. Siguiente, escriberemos un método similar llamado `reverseLevelOrder` cual efectuara la misma búsqueda pero en la dirección inversa (derecha a izquierda) en cada nivel. # --hints-- -The `BinarySearchTree` data structure should exist. +La estructura de datos `BinarySearchTree` debería existir. ```js assert( @@ -32,7 +32,7 @@ assert( ); ``` -The binary search tree should have a method called `levelOrder`. +El árbol de búsqueda binaria debería tener un método llamado `levelOrder`. ```js assert( @@ -48,7 +48,7 @@ assert( ); ``` -The binary search tree should have a method called `reverseLevelOrder`. +El árbol de búsqueda binaria debería tener un método llamado `reverseLevelOrder`. ```js assert( @@ -64,7 +64,7 @@ assert( ); ``` -The `levelOrder` method should return an array of the tree node values explored in level order. +El método `levelOrder` debería devolver un arreglo de valores de nodo del árbol explorados en level order. ```js assert( @@ -94,7 +94,7 @@ assert( ); ``` -The `reverseLevelOrder` method should return an array of the tree node values explored in reverse level order. +El método `reverseLevelOrder` debería devolver un arreglo de valores de nodo de árbol explorados en reverse level order. ```js assert( @@ -124,7 +124,7 @@ assert( ); ``` -The `levelOrder` method should return `null` for an empty tree. +El método `levelOrder` debería devolver `null` para un árbol vacío. ```js assert( @@ -143,7 +143,7 @@ assert( ); ``` -The `reverseLevelOrder` method should return `null` for an empty tree. +El método `reverseLevelOrder` debería devolver `null` para un árbol vacio. ```js assert( diff --git a/curriculum/challenges/espanol/10-coding-interview-prep/data-structures/use-depth-first-search-in-a-binary-search-tree.md b/curriculum/challenges/espanol/10-coding-interview-prep/data-structures/use-depth-first-search-in-a-binary-search-tree.md index c03fb750777..efba5791125 100644 --- a/curriculum/challenges/espanol/10-coding-interview-prep/data-structures/use-depth-first-search-in-a-binary-search-tree.md +++ b/curriculum/challenges/espanol/10-coding-interview-prep/data-structures/use-depth-first-search-in-a-binary-search-tree.md @@ -1,6 +1,6 @@ --- id: 587d8257367417b2b2512c7e -title: Use Depth First Search in a Binary Search Tree +title: Usa Primera Búsqueda en Profundidad en un Árbol de Búsqueda Binaria challengeType: 1 forumTopicId: 301719 dashedName: use-depth-first-search-in-a-binary-search-tree @@ -8,7 +8,7 @@ dashedName: use-depth-first-search-in-a-binary-search-tree # --description-- -We know how to search a binary search tree for a specific value. But what if we just want to explore the entire tree? Or what if we don't have an ordered tree and we need to just search for a value? Here we will introduce some tree traversal methods which can be used to explore tree data structures. First up is depth-first search. In depth-first search, a given subtree is explored as deeply as possible before the search continues on to another subtree. There are three ways this can be done: In-order: Begin the search at the left-most node and end at the right-most node. Pre-order: Explore all the roots before the leaves. Post-order: Explore all the leaves before the roots. As you may guess, you may choose different search methods depending on what type of data your tree is storing and what you are looking for. For a binary search tree, an inorder traversal returns the nodes in sorted order. +Conocemos como buscar un árbol de búsqueda binaria search para un valor específico. Pero qué pasa si solo queremos explorar el árbol entero? O ¿qué pasa si no tenemos un árbol ordenado y necesitamos buscar un valor? Aquí presentaremos algunos métodos de recorrido de árbol que pueden ser usados para explorar estructuras de datos árbol. El primero es búsqueda profundidad-primero (depth-first). En la búsqueda profundidad-primero, un sub árbol dado es explorado profundamente como sea posible antes que la búsqueda continue sobre otro sub árbol. Hay tres formas en las que esto puede hacerse: En orden (In-order): Inicia la búsqueda desde el nodo más a la izquierda y finaliza en el nodo más a la derecha. Pre ordenado (Pre-order): Explora todas las raíces antes que las hojas. Orden posterior (Post-order): Explora todas las hojas antes que las raíces. Como pudiste suponer, puedes escoger diferentes métodos de búsqueda dependiendo de que tipo de dato esta almacenando tu árbol y lo que estés buscando. Para una búsqueda de árbol binario, un recorrido en orden devuelve los nodos de forma ordenada. # --instructions-- diff --git a/curriculum/challenges/espanol/10-coding-interview-prep/project-euler/problem-100-arranged-probability.md b/curriculum/challenges/espanol/10-coding-interview-prep/project-euler/problem-100-arranged-probability.md index 4507fa49c56..c0c445d008f 100644 --- a/curriculum/challenges/espanol/10-coding-interview-prep/project-euler/problem-100-arranged-probability.md +++ b/curriculum/challenges/espanol/10-coding-interview-prep/project-euler/problem-100-arranged-probability.md @@ -8,7 +8,7 @@ dashedName: problem-100-arranged-probability # --description-- -If a box contains twenty-one colored discs, composed of fifteen blue discs and six red discs, and two discs were taken at random, it can be seen that the probability of taking two blue discs. +Si una caja contiene veintiún discos de colores, compuestos por quince discos azules y seis discos rojos, si dos discos son tomados al azar, podemos ver la probabilidad de tomar dos discos azules. $${P(BB)} = \frac{15}{21}×\frac{14}{20} = \frac{1}{2}$$ diff --git a/curriculum/challenges/espanol/10-coding-interview-prep/project-euler/problem-125-palindromic-sums.md b/curriculum/challenges/espanol/10-coding-interview-prep/project-euler/problem-125-palindromic-sums.md index f27b29c7c8d..94084a358ce 100644 --- a/curriculum/challenges/espanol/10-coding-interview-prep/project-euler/problem-125-palindromic-sums.md +++ b/curriculum/challenges/espanol/10-coding-interview-prep/project-euler/problem-125-palindromic-sums.md @@ -12,10 +12,10 @@ El número palindromico 595 es interesante, pues puede escribirse como la suma d Hay exactamente once palindromes por debajo de un millar que se pueden escribir como sumas cuadradas consecutivas, y la suma de estos palindromes es 4164. Tenga en cuenta que $1 = 0^2 + 1^2$ no ha sido incluido ya que este problema se refiere a los cuadrados de enteros positivos. -Find the sum of all the numbers less than the `limit` that are both palindromic and can be written as the sum of consecutive squares. +Encuentra la sumatoria de todos los números menores que `limit` que son palíndromos que pueden ser escritos como cuadrados consecutivos. # --hints-- -`palindromicSums(100000000)` should return `2906969179`. +`palindromicSums(100000000)` debería retornar `2906969179`. ```js @@ -23,13 +23,13 @@ assert.strictEqual(palindromicSums(100000000), 2906969179); ``` -`palindromicSums(100)` should return `137`. +`palindromicSums(100)` debería devolver `137`. ```js assert.strictEqual(palindromicSums(100), 137); ``` -`palindromicSums(1000)` should return `4164`. +`palindromicSums(1000)` debería devolver `4164`. ```js assert.strictEqual(palindromicSums(1000),4164); diff --git a/curriculum/challenges/espanol/10-coding-interview-prep/project-euler/problem-168-number-rotations.md b/curriculum/challenges/espanol/10-coding-interview-prep/project-euler/problem-168-number-rotations.md index 50802415375..ef0bc7174f4 100644 --- a/curriculum/challenges/espanol/10-coding-interview-prep/project-euler/problem-168-number-rotations.md +++ b/curriculum/challenges/espanol/10-coding-interview-prep/project-euler/problem-168-number-rotations.md @@ -1,6 +1,6 @@ --- id: 5900f4151000cf542c50ff27 -title: 'Problem 168: Number Rotations' +title: 'Problema 168: Rotaciones númericas' challengeType: 1 forumTopicId: 301802 dashedName: problem-168-number-rotations @@ -8,23 +8,23 @@ dashedName: problem-168-number-rotations # --description-- -Consider the number 142857. We can right-rotate this number by moving the last digit (7) to the front of it, giving us 714285. +Considera el número 142857. Podemos rotar-derecha este número moviendo el último dígito (7) al frente de este dándonos 714285. -It can be verified that $714285 = 5 × 142857$. +Puede ser verificado que $714285 = 5 × 142857$. -This demonstrates an unusual property of 142857: it is a divisor of its right-rotation. +Esto demuestra la propiedad inusual de 142857: este es un divisor de su rotación-derecha. -For integer number of digits $a$ and $b$, find the last 5 digits of the sum of all integers $n$, $10^a < n < 10^b$, that have this property. +Para los dígitos del numero entero $a$ y $b$, encuentra los últimos 5 dígitos de la sumatoria de todos los enteros $n$, $10^a < n < 10^b$, que tengan esta propiedad. # --hints-- -`numberRotations(2, 10)` should return `98311`. +`numberRotations(2, 10)` deberia devolver `98311`. ```js assert.strictEqual(numberRotations(2, 10), 98311); ``` -`numberRotations(2, 100)` should return `59206`. +`numberRotations(2, 100)` debería devolver `59206`. ```js assert.strictEqual(numberRotations(2, 100), 59206); diff --git a/curriculum/challenges/espanol/10-coding-interview-prep/project-euler/problem-30-digit-n-powers.md b/curriculum/challenges/espanol/10-coding-interview-prep/project-euler/problem-30-digit-n-powers.md index 1e7472bce84..1aa4629d852 100644 --- a/curriculum/challenges/espanol/10-coding-interview-prep/project-euler/problem-30-digit-n-powers.md +++ b/curriculum/challenges/espanol/10-coding-interview-prep/project-euler/problem-30-digit-n-powers.md @@ -1,6 +1,6 @@ --- id: 5900f38a1000cf542c50fe9d -title: 'Problem 30: Digit n powers' +title: 'Problema 30: Dígitos de n potencias' challengeType: 1 forumTopicId: 301953 dashedName: problem-30-digit-n-powers @@ -8,7 +8,7 @@ dashedName: problem-30-digit-n-powers # --description-- -Surprisingly there are only three numbers that can be written as the sum of fourth powers of their digits: +Sorprendentemente, solo hay tres números que se pueden escribir como la suma de las cuartas potencias de sus dígitos:
1634 = 14 + 64 + 34 + 44
@@ -16,39 +16,39 @@ Surprisingly there are only three numbers that can be written as the sum of four 9474 = 94 + 44 + 74 + 44
-As 1 = 14 is not a sum it is not included. +Como 1 = 14 no es una suma que no esté incluida. -The sum of these numbers is 1634 + 8208 + 9474 = 19316. +La suma de estos números es 1634 + 8208 + 9474 = 19316. -Find the sum of all the numbers that can be written as the sum of `n` powers of their digits. +Encuentre la suma de todos los números que se pueden escribir como la suma de `n` potencias de sus dígitos. # --hints-- -`digitnPowers(2)` should return a number. +`digitnPowers(2)` debe devolver un número. ```js assert(typeof digitnPowers(2) === 'number'); ``` -`digitnPowers(2)` should return 0. +`digitnPowers(2)` debe devolver 0. ```js assert(digitnPowers(2) == 0); ``` -`digitnPowers(3)` should return 1301. +`digitnPowers(3)` debe devolver 1301. ```js assert(digitnPowers(3) == 1301); ``` -`digitnPowers(4)` should return 19316. +`digitnPowers(4)` debe devolver 19316. ```js assert(digitnPowers(4) == 19316); ``` -`digitnPowers(5)` should return 443839. +`digitnPowers(5)` debe devolver 443839. ```js assert(digitnPowers(5) == 443839); diff --git a/curriculum/challenges/espanol/10-coding-interview-prep/project-euler/problem-31-coin-sums.md b/curriculum/challenges/espanol/10-coding-interview-prep/project-euler/problem-31-coin-sums.md index ae4372cd69f..ed487ff4cd6 100644 --- a/curriculum/challenges/espanol/10-coding-interview-prep/project-euler/problem-31-coin-sums.md +++ b/curriculum/challenges/espanol/10-coding-interview-prep/project-euler/problem-31-coin-sums.md @@ -1,6 +1,6 @@ --- id: 5900f38b1000cf542c50fe9e -title: 'Problem 31: Coin sums' +title: 'Problema 31: Sumas de monedas' challengeType: 1 forumTopicId: 301965 dashedName: problem-31-coin-sums @@ -8,43 +8,43 @@ dashedName: problem-31-coin-sums # --description-- -In England the currency is made up of pound, £, and pence, p, and there are eight coins in general circulation: +En Inglaterra la moneda se compone de libra, £, y peniques, p, y hay ocho monedas en circulación general: -
1p, 2p, 5p, 10p, 20p, 50p, £1 (100p) and £2 (200p).
+
1p, 2p, 5p, 10p, 20p, 50p, £1 (100p) y £2 (200p).
-It is possible to make £2 in the following way: +Es posible ganar £2 de la siguiente manera:
1×£1 + 1×50p + 2×20p + 1×5p + 1×2p + 3×1p
-How many different ways can `n` pence be made using any number of coins? +¿De cuántas maneras diferentes se pueden hacer `n` peniques usando cualquier número de monedas? # --hints-- -`coinSums(50)` should return a number. +`coinSums(50)` debe devolver un número. ```js assert(typeof coinSums(50) === 'number'); ``` -`coinSums(50)` should return 451. +`coinSums(50)` debe devolver 451. ```js assert(coinSums(50) == 451); ``` -`coinSums(100)` should return 4563. +`coinSums(100)` debe devolver 4563. ```js assert(coinSums(100) == 4563); ``` -`coinSums(150)` should return 21873. +`coinSums(150)` debe devolver 21873. ```js assert(coinSums(150) == 21873); ``` -`coinSums(200)` should return 73682. +`coinSums(200)` debe devolver 73682. ```js assert(coinSums(200) == 73682); diff --git a/curriculum/challenges/espanol/10-coding-interview-prep/project-euler/problem-74-digit-factorial-chains.md b/curriculum/challenges/espanol/10-coding-interview-prep/project-euler/problem-74-digit-factorial-chains.md index db8e80a8d90..eb2dfe558a5 100644 --- a/curriculum/challenges/espanol/10-coding-interview-prep/project-euler/problem-74-digit-factorial-chains.md +++ b/curriculum/challenges/espanol/10-coding-interview-prep/project-euler/problem-74-digit-factorial-chains.md @@ -1,6 +1,6 @@ --- id: 5900f3b61000cf542c50fec9 -title: 'Problem 74: Digit factorial chains' +title: 'Problema 74: Cadenas factorial de dígitos' challengeType: 1 forumTopicId: 302187 dashedName: problem-74-digit-factorial-chains @@ -8,29 +8,29 @@ dashedName: problem-74-digit-factorial-chains # --description-- -The number 145 is well known for the property that the sum of the factorial of its digits is equal to 145: +El número 145 es bien conocido por la propiedad que la suma del factorial de sus dígitos es igual a 145: $$1! + 4! + 5! = 1 + 24 + 120 = 145$$ -Perhaps less well known is 169, in that it produces the longest chain of numbers that link back to 169; it turns out that there are only three such loops that exist: +Tal vez menos conocido es 169, ya que produce la cadena más larga de números que remontan a 169; resulta que solo existen tres bucles de estos: $$\begin{align} &169 → 363601 → 1454 → 169\\\\ &871 → 45361 → 871\\\\ &872 → 45362 → 872\\\\ \end{align}$$ -It is not difficult to prove that EVERY starting number will eventually get stuck in a loop. Por ejemplo, +No es díficil demostrar que EVERY(CADA) número inicial eventualmente se atascara en un bucle. Por ejemplo, $$\begin{align} &69 → 363600 → 1454 → 169 → 363601\\ (→ 1454)\\\\ &78 → 45360 → 871 → 45361\\ (→ 871)\\\\ &540 → 145\\ (→ 145)\\\\ \end{align}$$ -Starting with 69 produces a chain of five non-repeating terms, but the longest non-repeating chain with a starting number below one million is sixty terms. +Iniciando con 69 produce una cadena de cinco terminos no repetitivos, pero la cadena de no repetición más larga que inicia con un número por debajo de un millón es de sesenta términos. ¿Cuántas cadenas, con un número inicial debajo de `n`, contienen exactamente sesenta términos que no se repiten? # --hints-- -`digitFactorialChains(2000)` should return a number. +`digitFactorialChains(2000)` debe devolver un número. ```js assert(typeof digitFactorialChains(2000) === 'number'); diff --git a/curriculum/challenges/espanol/10-coding-interview-prep/project-euler/problem-80-square-root-digital-expansion.md b/curriculum/challenges/espanol/10-coding-interview-prep/project-euler/problem-80-square-root-digital-expansion.md index 34d7dd6eea4..fb50825b451 100644 --- a/curriculum/challenges/espanol/10-coding-interview-prep/project-euler/problem-80-square-root-digital-expansion.md +++ b/curriculum/challenges/espanol/10-coding-interview-prep/project-euler/problem-80-square-root-digital-expansion.md @@ -1,6 +1,6 @@ --- id: 5900f3bc1000cf542c50fecf -title: 'Problem 80: Square root digital expansion' +title: 'Problema 80: Raíz cuadrada expansión digital' challengeType: 1 forumTopicId: 302194 dashedName: problem-80-square-root-digital-expansion @@ -8,33 +8,33 @@ dashedName: problem-80-square-root-digital-expansion # --description-- -It is well known that if the square root of a natural number is not an integer, then it is irrational. The decimal expansion of such square roots is infinite without any repeating pattern at all. +Es bien conocido que si la raíz cuadrada de un número natural no es un entero, entonces es un irraccional. La expansión decimal de tal raíz cuadrada es infinita sin patrones repetitivos. -The square root of two is `1.41421356237309504880...`, and the digital sum of the first one hundred decimal digits is `475`. +La raíz cuadrada de es `1.41421356237309504880...`, ya la suma de los primeros cien dígitos decimales es `475`. -For the first `n` natural numbers, find the total of the digital sums of the first one hundred decimal digits for all the irrational square roots. +Para los primeros `n` números naturales, encuentra la sumatoria total de los cien primeros dígitos para todas las raíces cuadradas irracionales. # --hints-- -`sqrtDigitalExpansion(2)` should return a number. +`sqrtDigitalExpansion(2)` debe devolver un número. ```js assert(typeof sqrtDigitalExpansion(2) === 'number'); ``` -`sqrtDigitalExpansion(2)` should return `475`. +`sqrtDigitalExpansion(2)` debe devolver `475`. ```js assert.strictEqual(sqrtDigitalExpansion(2), 475); ``` -`sqrtDigitalExpansion(50)` should return `19543`. +`sqrtDigitalExpansion(50)` debe devolver `19543`. ```js assert.strictEqual(sqrtDigitalExpansion(50), 19543); ``` -`sqrtDigitalExpansion(100)` should return `40886`. +`sqrtDigitalExpansion(100)` debe devolver `40886`. ```js assert.strictEqual(sqrtDigitalExpansion(100), 40886); diff --git a/curriculum/challenges/espanol/10-coding-interview-prep/project-euler/problem-93-arithmetic-expressions.md b/curriculum/challenges/espanol/10-coding-interview-prep/project-euler/problem-93-arithmetic-expressions.md index 95e805fd393..4275305a000 100644 --- a/curriculum/challenges/espanol/10-coding-interview-prep/project-euler/problem-93-arithmetic-expressions.md +++ b/curriculum/challenges/espanol/10-coding-interview-prep/project-euler/problem-93-arithmetic-expressions.md @@ -19,7 +19,7 @@ Por ejemplo, 36 = 3 * 4 * (2 + 1) -Note that concatenations of the digits, like 12 + 34, are not allowed. +Tenga en cuenta que no se permiten concatenaciones de dígitos, como 12 + 34. Using the set, {1, 2, 3, 4}, it is possible to obtain thirty-one different target numbers of which 36 is the maximum, and each of the numbers 1 to 28 can be obtained before encountering the first non-expressible number. diff --git a/curriculum/challenges/espanol/10-coding-interview-prep/rosetta-code/execute-a-markov-algorithm.md b/curriculum/challenges/espanol/10-coding-interview-prep/rosetta-code/execute-a-markov-algorithm.md index a3b6ac3e5ca..a08c99a6d5e 100644 --- a/curriculum/challenges/espanol/10-coding-interview-prep/rosetta-code/execute-a-markov-algorithm.md +++ b/curriculum/challenges/espanol/10-coding-interview-prep/rosetta-code/execute-a-markov-algorithm.md @@ -100,13 +100,13 @@ assert.deepEqual(markov(rules[1], datas[1]), outputs[1]); assert.deepEqual(markov(rules[2], datas[2]), outputs[2]); ``` -`markov(["_+1 -> _1+","1+1 -> 11+","1! -> !1",",! -> !+","_! -> _","1*1 -> x,@y","1x -> xX","X, -> 1,1","X1 -> 1X","_x -> _X",",x -> ,X","y1 -> 1y","y_ -> _","1@1 -> x,@y","1@_ -> @_",",@_ -> !_","++ -> +","_1 -> 1","1+_ -> 1","_+_ -> "],"_1111*11111_")` should return the string `11111111111111111111`. +`markov(["_+1 -> _1+","1+1 -> 11+","1! -> !1",",! -> !+","_! -> _","1*1 -> x,@y","1x -> xX","X, -> 1,1","X1 -> 1X","_x -> _X",",x -> ,X","y1 -> 1y","y_ -> _","1@1 -> x,@y","1@_ -> @_",",@_ -> !_","++ -> +","_1 -> 1","1+_ -> 1","_+_ -> "],"_1111*11111_")` debería devolver la cadena `11111111111111111111`. ```js assert.deepEqual(markov(rules[3], datas[3]), outputs[3]); ``` -`markov(["A0 -> 1B","0A1 -> C01","1A1 -> C11","0B0 -> A01","1B0 -> A11","B1 -> 1B","0C0 -> B01","1C0 -> B11","0C1 -> H01","1C1 -> H11"],"")` should return the string `00011H1111000`. +`markov(["A0 -> 1B","0A1 -> C01","1A1 -> C11","0B0 -> A01","1B0 -> A11","B1 -> 1B","0C0 -> B01","1C0 -> B11","0C1 -> H01","1C1 -> H11"],"")` debería devolver la cadena `00011H1111000`. ```js assert.deepEqual(markov(rules[4], datas[4]), outputs[4]); diff --git a/curriculum/challenges/espanol/10-coding-interview-prep/rosetta-code/jaro-distance.md b/curriculum/challenges/espanol/10-coding-interview-prep/rosetta-code/jaro-distance.md index 00f480f8b6c..7433716814e 100644 --- a/curriculum/challenges/espanol/10-coding-interview-prep/rosetta-code/jaro-distance.md +++ b/curriculum/challenges/espanol/10-coding-interview-prep/rosetta-code/jaro-distance.md @@ -46,43 +46,43 @@ Escriba una función que tome dos cadenas como parámetros y devuelva la distanc # --hints-- -`jaro` should be a function. +`jaro` debe devolver una función. ```js assert(typeof jaro == 'function'); ``` -`jaro("MARTHA", "MARHTA")` should return a number. +`jaro("MARTHA", "MARHTA")` debería devolver un número. ```js assert(typeof jaro('MARTHA', 'MARHTA') == 'number'); ``` -`jaro("MARTHA", "MARHTA")` should return `0.9444444444444445`. +`jaro("MARTHA", "MARHTA")` debería devolver `0.9444444444444445`. ```js assert.equal(jaro('MARTHA', 'MARHTA'), 0.9444444444444445); ``` -`jaro("DIXON", "DICKSONX")` should return `0.7666666666666666`. +`jaro("DIXON", "DICKSONX")` debería devolver `0.7666666666666666`. ```js assert.equal(jaro('DIXON', 'DICKSONX'), 0.7666666666666666); ``` -`jaro("JELLYFISH", "SMELLYFISH")` should return `0.8962962962962964`. +`jaro("JELLYFISH", "SMELLYFISH")` debería devolver `0.8962962962962964`. ```js assert.equal(jaro('JELLYFISH', 'SMELLYFISH'), 0.8962962962962964); ``` -`jaro("HELLOS", "CHELLO")` should return `0.888888888888889`. +`jaro("HELLOS", "CHELLO")` debería devolver `0.888888888888889`. ```js assert.equal(jaro('HELLOS', 'CHELLO'), 0.888888888888889); ``` -`jaro("ABCD", "BCDA")` should return `0.8333333333333334`. +`jaro("ABCD", "BCDA")` debería devolver `0.8333333333333334`. ```js assert.equal(jaro('ABCD', 'BCDA'), 0.8333333333333334); diff --git a/curriculum/challenges/espanol/10-coding-interview-prep/rosetta-code/soundex.md b/curriculum/challenges/espanol/10-coding-interview-prep/rosetta-code/soundex.md index b51c5bc6b71..b33f48706b2 100644 --- a/curriculum/challenges/espanol/10-coding-interview-prep/rosetta-code/soundex.md +++ b/curriculum/challenges/espanol/10-coding-interview-prep/rosetta-code/soundex.md @@ -8,60 +8,60 @@ dashedName: soundex # --description-- -**Soundex Algorithm** deals with the *intentions* of the words. It creates a representation for similar sounding words. +**Soundex Algorithm** trata con la *intentions* de las palabras. Crea una representación para palabras de sonido similar. -It is used for searching names and addresses. This means that the person who filled in the name, can focus on how it sounds instead of correcting the spelling of names. +Es usada para buscar names y addresses. Esto significa que la persona que llenó el name, puede enfocarse en como suena en lugar de corregir la pronunciación de names. -For example: +Por ejemplo: -If you are hearing the name `Quenci` for the first time, and misspelled it, you will get **Soundex** code `Q520`. +Si estás escuchando el nombre `Quenci` por primera vez, y mal ingresado obtendrás el código **Soundex** `Q520`. -When you spell the name `Quincy` correctly next time, you will still get the same code `Q520`, which means you can link multiple name pronunciations into the same person without the need for adding every spelling. +Cuando deletreas correctamente el nombre `Quincy` la próxima vez, aún obtendrás el mismo código `Q520`, lo que significa que tu puedes enlazar multiples pronunciaciones de nombre sobre el mismo person sin la necesidad de agregar cada deletreo. -Here is the rules: +Aquí están las reglas:
    -
  • If a vowel (A, E, I, O, U) separates two consonants that have the same soundex code, the consonant to the right of the vowel is coded. Tymczak is coded as T-522 (T, 5 for the M, 2 for the C, Z ignored (see "Side-by-Side" rule above), 2 for the K). Since the vowel "A" separates the Z and K, the K is coded.
    • -
  • If "H" or "W" separate two consonants that have the same soundex code, the consonant to the right of the vowel is not coded. Example: Ashcraft is coded A-261 (A, 2 for the S, C ignored, 6 for the R, 1 for the F). It is not coded A-226.
    • +
  • Si una vocal (A, E, I, O, U) separa dos consonantes que tienen el mismo código soundex, la consonante a la derecha de la vocal es codificada. Tymczak es codificado como T-522 (T, 5 para la M, 2 para la C, Z es ignorada (Consulta en la parte superior la regla "Side-by-Side"), 2 para la K). Puesto que la vocal "A" separa la Z y K, la K is codificada.
    • +
  • Si la "H" o "W" separan dos consonantes que tienen el mismo código, la consonante a la derecha de la vocal no es codificada. Ejemplo: Ashcraft es codificado A-261 (A, 2 para la S, C es ignorado, 6 para la R, 1 para la F). No es codificado A-226.
# --instructions-- -Write a function that takes a string as a parameter and returns the encoded string. +Escribe una función Write que tome una cadena como un parámetro y devuelva la cadena codificada. # --hints-- -`soundex` should be a function. +`soundex` debe ser una función. ```js assert(typeof soundex == 'function'); ``` -`soundex("Soundex")` should return a string. +`soundex("Soundex")` debe devolver una cadena. ```js assert(typeof soundex('Soundex') == 'string'); ``` -`soundex("Soundex")` should return `"S532"`. +`soundex("Soundex")` debe devolver `"S532"`. ```js assert.equal(soundex('Soundex'), 'S532'); ``` -`soundex("Example")` should return `"E251"`. +`soundex("Example")` debe devolver `"E251"`. ```js assert.equal(soundex('Example'), 'E251'); ``` -`soundex("Sownteks")` should return `"S532"`. +`soundex("Sownteks")` deb retornar `"S532"`. ```js assert.equal(soundex('Sownteks'), 'S532'); ``` -`soundex("Ekzampul")` should return `"E251"`. +`soundex("Ekzampul")` debe devolver `"E251"`. ```js assert.equal(soundex('Ekzampul'), 'E251'); diff --git a/curriculum/challenges/espanol/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/6145e6eeaa66c605eb087fe9.md b/curriculum/challenges/espanol/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/6145e6eeaa66c605eb087fe9.md index 064ac284bbc..4312885221c 100644 --- a/curriculum/challenges/espanol/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/6145e6eeaa66c605eb087fe9.md +++ b/curriculum/challenges/espanol/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/6145e6eeaa66c605eb087fe9.md @@ -7,29 +7,29 @@ dashedName: step-30 # --description-- -Add an `id` to all of your radio `input`s so you can link your labels to them. Give the first one an `id` of `q1-a1`. Give the rest of them `id`s of `q1-a2`, `q2-a1`, and `q2-a2`, respectively. +Agrega un `id`a todos tus radios `input`s así puedes linkear tus labels a ellos. Da a prime un `id` de `q1-a1`. Da al resto de ellos `id` de `q1-a2`, `q2-a1`, y `q2-a2`, respectivamente. # --hints-- -You should give the first `input` element an `id` of `q1-a1`. +Deberías dar al primer`input` elemento un `id` como `q1-a1`. ```js assert.equal(document.querySelectorAll('ul.answers-list > li > label > input')?.[0]?.id, "q1-a1"); ``` -You should give the second `input` element an `id` of `q1-a2`. +Deberías darle al segundo `input` elemento un `id` como `q1-a2`. ```js assert.equal(document.querySelectorAll('ul.answers-list > li > label > input')?.[1]?.id, "q1-a2"); ``` -You should give the third `input` element an `id` of `q2-a1`. +Deberías darle al tercer `input` elemento un `id` como `q2-a1`. ```js assert.equal(document.querySelectorAll('ul.answers-list > li > label > input')?.[2]?.id, "q2-a1"); ``` -You should give the fourth `input` element an `id` of `q2-a2`. +Deberías darle al cuarto `input` elemento un `id` como `q2-a2`. ```js assert.equal(document.querySelectorAll('ul.answers-list > li > label > input')?.[3]?.id, "q2-a2"); diff --git a/curriculum/challenges/espanol/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/6145e8b5080a5f06bb0223d0.md b/curriculum/challenges/espanol/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/6145e8b5080a5f06bb0223d0.md index c8684b36b8a..7f34c79d0fe 100644 --- a/curriculum/challenges/espanol/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/6145e8b5080a5f06bb0223d0.md +++ b/curriculum/challenges/espanol/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/6145e8b5080a5f06bb0223d0.md @@ -1,6 +1,6 @@ --- id: 6145e8b5080a5f06bb0223d0 -title: Step 32 +title: Paso 32 challengeType: 0 dashedName: step-32 --- diff --git a/curriculum/challenges/espanol/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/6145eb5f08a38a0786c7a80c.md b/curriculum/challenges/espanol/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/6145eb5f08a38a0786c7a80c.md index b795de19086..59a644ec565 100644 --- a/curriculum/challenges/espanol/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/6145eb5f08a38a0786c7a80c.md +++ b/curriculum/challenges/espanol/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/6145eb5f08a38a0786c7a80c.md @@ -1,6 +1,6 @@ --- id: 6145eb5f08a38a0786c7a80c -title: Step 33 +title: Paso 33 challengeType: 0 dashedName: step-33 --- diff --git a/curriculum/challenges/espanol/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/6145ed1f22caab087630aaad.md b/curriculum/challenges/espanol/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/6145ed1f22caab087630aaad.md index 98cc8bf8d8a..8e822c9a1b1 100644 --- a/curriculum/challenges/espanol/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/6145ed1f22caab087630aaad.md +++ b/curriculum/challenges/espanol/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/6145ed1f22caab087630aaad.md @@ -1,6 +1,6 @@ --- id: 6145ed1f22caab087630aaad -title: Step 34 +title: Paso 34 challengeType: 0 dashedName: step-34 --- diff --git a/curriculum/challenges/espanol/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/6145ee65e2e1530938cb594d.md b/curriculum/challenges/espanol/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/6145ee65e2e1530938cb594d.md index 3ce3437f020..da1628b5bd0 100644 --- a/curriculum/challenges/espanol/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/6145ee65e2e1530938cb594d.md +++ b/curriculum/challenges/espanol/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/6145ee65e2e1530938cb594d.md @@ -1,6 +1,6 @@ --- id: 6145ee65e2e1530938cb594d -title: Step 35 +title: Paso 35 challengeType: 0 dashedName: step-35 --- diff --git a/curriculum/challenges/espanol/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/6145f02240ff8f09f7ec913c.md b/curriculum/challenges/espanol/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/6145f02240ff8f09f7ec913c.md index 909649f186f..1579ff42926 100644 --- a/curriculum/challenges/espanol/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/6145f02240ff8f09f7ec913c.md +++ b/curriculum/challenges/espanol/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/6145f02240ff8f09f7ec913c.md @@ -1,6 +1,6 @@ --- id: 6145f02240ff8f09f7ec913c -title: Step 36 +title: Paso 36 challengeType: 0 dashedName: step-36 --- diff --git a/curriculum/challenges/espanol/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/6145f14f019a4b0adb94b051.md b/curriculum/challenges/espanol/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/6145f14f019a4b0adb94b051.md index c8c319ec3f3..fd09c414590 100644 --- a/curriculum/challenges/espanol/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/6145f14f019a4b0adb94b051.md +++ b/curriculum/challenges/espanol/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/6145f14f019a4b0adb94b051.md @@ -1,6 +1,6 @@ --- id: 6145f14f019a4b0adb94b051 -title: Step 37 +title: Paso 37 challengeType: 0 dashedName: step-37 --- diff --git a/curriculum/challenges/espanol/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/6145f3a5cd9be60b9459cdd6.md b/curriculum/challenges/espanol/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/6145f3a5cd9be60b9459cdd6.md index bba99d487de..c67ac8a3883 100644 --- a/curriculum/challenges/espanol/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/6145f3a5cd9be60b9459cdd6.md +++ b/curriculum/challenges/espanol/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/6145f3a5cd9be60b9459cdd6.md @@ -1,6 +1,6 @@ --- id: 6145f3a5cd9be60b9459cdd6 -title: Step 38 +title: Paso 38 challengeType: 0 dashedName: step-38 --- diff --git a/curriculum/challenges/espanol/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/6145f47393fbe70c4d885f9c.md b/curriculum/challenges/espanol/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/6145f47393fbe70c4d885f9c.md index 550f6cb4312..2c83b480253 100644 --- a/curriculum/challenges/espanol/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/6145f47393fbe70c4d885f9c.md +++ b/curriculum/challenges/espanol/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/6145f47393fbe70c4d885f9c.md @@ -1,6 +1,6 @@ --- id: 6145f47393fbe70c4d885f9c -title: Step 39 +title: Paso 39 challengeType: 0 dashedName: step-39 --- diff --git a/curriculum/challenges/espanol/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/6145f59029474c0d3dc1c8b8.md b/curriculum/challenges/espanol/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/6145f59029474c0d3dc1c8b8.md index c0d4887e307..a08095eba30 100644 --- a/curriculum/challenges/espanol/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/6145f59029474c0d3dc1c8b8.md +++ b/curriculum/challenges/espanol/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/6145f59029474c0d3dc1c8b8.md @@ -1,6 +1,6 @@ --- id: 6145f59029474c0d3dc1c8b8 -title: Step 40 +title: Paso 40 challengeType: 0 dashedName: step-40 --- diff --git a/curriculum/challenges/espanol/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/6145f685797bd30df9784e8c.md b/curriculum/challenges/espanol/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/6145f685797bd30df9784e8c.md index fc4e38a4ed1..ae38ba9b4f7 100644 --- a/curriculum/challenges/espanol/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/6145f685797bd30df9784e8c.md +++ b/curriculum/challenges/espanol/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/6145f685797bd30df9784e8c.md @@ -1,6 +1,6 @@ --- id: 6145f685797bd30df9784e8c -title: Step 41 +title: Paso 41 challengeType: 0 dashedName: step-41 --- @@ -35,7 +35,7 @@ Debes dar al botón de envío un `type` de `submit`. assert.exists(document.querySelector('button[type="submit"]') || document.querySelector('form > input[type="submit"]')); ``` -The submit should display the text `Send`. +El envío debe mostrar el texto `Send`. ```js assert.equal(document.querySelector('button[type="submit"]')?.textContent ?? document.querySelector('input[type="submit"]')?.value, 'Send'); diff --git a/curriculum/challenges/espanol/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/6145f829ac6a920ebf5797d7.md b/curriculum/challenges/espanol/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/6145f829ac6a920ebf5797d7.md index 7b24d4ca4e4..d909969e322 100644 --- a/curriculum/challenges/espanol/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/6145f829ac6a920ebf5797d7.md +++ b/curriculum/challenges/espanol/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/6145f829ac6a920ebf5797d7.md @@ -1,6 +1,6 @@ --- id: 6145f829ac6a920ebf5797d7 -title: Step 42 +title: Paso 42 challengeType: 0 dashedName: step-42 --- diff --git a/curriculum/challenges/espanol/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/6145f8f8bcd4370f6509078e.md b/curriculum/challenges/espanol/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/6145f8f8bcd4370f6509078e.md index 3d4e56612b3..db0efd25eb5 100644 --- a/curriculum/challenges/espanol/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/6145f8f8bcd4370f6509078e.md +++ b/curriculum/challenges/espanol/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/6145f8f8bcd4370f6509078e.md @@ -1,6 +1,6 @@ --- id: 6145f8f8bcd4370f6509078e -title: Step 43 +title: Paso 43 challengeType: 0 dashedName: step-43 --- diff --git a/curriculum/challenges/espanol/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/6145fb5018cb5b100cb2a88c.md b/curriculum/challenges/espanol/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/6145fb5018cb5b100cb2a88c.md index 90648d60ee4..4613b9fca25 100644 --- a/curriculum/challenges/espanol/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/6145fb5018cb5b100cb2a88c.md +++ b/curriculum/challenges/espanol/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/6145fb5018cb5b100cb2a88c.md @@ -1,6 +1,6 @@ --- id: 6145fb5018cb5b100cb2a88c -title: Step 44 +title: Paso 44 challengeType: 0 dashedName: step-44 --- diff --git a/curriculum/challenges/espanol/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/6145fc3707fc3310c277f5c8.md b/curriculum/challenges/espanol/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/6145fc3707fc3310c277f5c8.md index 4e11028abe6..35773dfad20 100644 --- a/curriculum/challenges/espanol/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/6145fc3707fc3310c277f5c8.md +++ b/curriculum/challenges/espanol/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/6145fc3707fc3310c277f5c8.md @@ -1,6 +1,6 @@ --- id: 6145fc3707fc3310c277f5c8 -title: Step 45 +title: Paso 45 challengeType: 0 dashedName: step-45 --- diff --git a/curriculum/challenges/espanol/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/614796cb8086be482d60e0ac.md b/curriculum/challenges/espanol/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/614796cb8086be482d60e0ac.md index d40b76c3b41..7283178d252 100644 --- a/curriculum/challenges/espanol/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/614796cb8086be482d60e0ac.md +++ b/curriculum/challenges/espanol/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/614796cb8086be482d60e0ac.md @@ -1,6 +1,6 @@ --- id: 614796cb8086be482d60e0ac -title: Step 46 +title: Paso 46 challengeType: 0 dashedName: step-46 --- diff --git a/curriculum/challenges/espanol/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/6147a14ef5668b5881ef2297.md b/curriculum/challenges/espanol/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/6147a14ef5668b5881ef2297.md index 8304d597501..ee56cd44882 100644 --- a/curriculum/challenges/espanol/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/6147a14ef5668b5881ef2297.md +++ b/curriculum/challenges/espanol/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/6147a14ef5668b5881ef2297.md @@ -1,6 +1,6 @@ --- id: 6147a14ef5668b5881ef2297 -title: Step 47 +title: Paso 47 challengeType: 0 dashedName: step-47 --- diff --git a/curriculum/challenges/espanol/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/614878f7a412310647873015.md b/curriculum/challenges/espanol/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/614878f7a412310647873015.md index 150320b2ea6..8fc1102388b 100644 --- a/curriculum/challenges/espanol/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/614878f7a412310647873015.md +++ b/curriculum/challenges/espanol/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/614878f7a412310647873015.md @@ -1,6 +1,6 @@ --- id: 614878f7a412310647873015 -title: Step 48 +title: Paso 48 challengeType: 0 dashedName: step-48 --- diff --git a/curriculum/challenges/espanol/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/61487b77d4a37707073a64e5.md b/curriculum/challenges/espanol/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/61487b77d4a37707073a64e5.md index b9172a81873..74f59800be7 100644 --- a/curriculum/challenges/espanol/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/61487b77d4a37707073a64e5.md +++ b/curriculum/challenges/espanol/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/61487b77d4a37707073a64e5.md @@ -1,6 +1,6 @@ --- id: 61487b77d4a37707073a64e5 -title: Step 49 +title: Paso 49 challengeType: 0 dashedName: step-49 --- diff --git a/curriculum/challenges/espanol/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/61487da611a65307e78d2c20.md b/curriculum/challenges/espanol/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/61487da611a65307e78d2c20.md index 07b9b7ceab5..6d4ecb0f628 100644 --- a/curriculum/challenges/espanol/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/61487da611a65307e78d2c20.md +++ b/curriculum/challenges/espanol/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/61487da611a65307e78d2c20.md @@ -1,6 +1,6 @@ --- id: 61487da611a65307e78d2c20 -title: Step 50 +title: Paso 50 challengeType: 0 dashedName: step-50 --- diff --git a/curriculum/challenges/espanol/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/61487f703571b60899055cf9.md b/curriculum/challenges/espanol/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/61487f703571b60899055cf9.md index 9018c79dfda..dd123219710 100644 --- a/curriculum/challenges/espanol/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/61487f703571b60899055cf9.md +++ b/curriculum/challenges/espanol/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/61487f703571b60899055cf9.md @@ -1,6 +1,6 @@ --- id: 61487f703571b60899055cf9 -title: Step 51 +title: Paso 51 challengeType: 0 dashedName: step-51 --- diff --git a/curriculum/challenges/espanol/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/614880dc16070e093e29bc56.md b/curriculum/challenges/espanol/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/614880dc16070e093e29bc56.md index 6911954031c..47288d89926 100644 --- a/curriculum/challenges/espanol/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/614880dc16070e093e29bc56.md +++ b/curriculum/challenges/espanol/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/614880dc16070e093e29bc56.md @@ -1,6 +1,6 @@ --- id: 614880dc16070e093e29bc56 -title: Step 52 +title: Paso 52 challengeType: 0 dashedName: step-52 --- diff --git a/curriculum/challenges/espanol/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/614883b6fa720e09fb167de9.md b/curriculum/challenges/espanol/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/614883b6fa720e09fb167de9.md index 5b476fd6012..fb30dbc274a 100644 --- a/curriculum/challenges/espanol/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/614883b6fa720e09fb167de9.md +++ b/curriculum/challenges/espanol/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/614883b6fa720e09fb167de9.md @@ -1,6 +1,6 @@ --- id: 614883b6fa720e09fb167de9 -title: Step 53 +title: Paso 53 challengeType: 0 dashedName: step-53 --- diff --git a/curriculum/challenges/espanol/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/614884c1f5d6f30ab3d78cde.md b/curriculum/challenges/espanol/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/614884c1f5d6f30ab3d78cde.md index 728fc6c84c8..f4d566c5420 100644 --- a/curriculum/challenges/espanol/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/614884c1f5d6f30ab3d78cde.md +++ b/curriculum/challenges/espanol/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/614884c1f5d6f30ab3d78cde.md @@ -1,6 +1,6 @@ --- id: 614884c1f5d6f30ab3d78cde -title: Step 54 +title: Paso 54 challengeType: 0 dashedName: step-54 --- diff --git a/curriculum/challenges/espanol/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/61488ecfd05e290b5712e6da.md b/curriculum/challenges/espanol/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/61488ecfd05e290b5712e6da.md index 50d01bc6333..d3f5fa71b50 100644 --- a/curriculum/challenges/espanol/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/61488ecfd05e290b5712e6da.md +++ b/curriculum/challenges/espanol/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/61488ecfd05e290b5712e6da.md @@ -1,6 +1,6 @@ --- id: 61488ecfd05e290b5712e6da -title: Step 55 +title: Paso 55 challengeType: 0 dashedName: step-55 --- diff --git a/curriculum/challenges/espanol/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/6148d99cdc7acd0c519862cb.md b/curriculum/challenges/espanol/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/6148d99cdc7acd0c519862cb.md index 88b3e3d41ae..8531563fe79 100644 --- a/curriculum/challenges/espanol/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/6148d99cdc7acd0c519862cb.md +++ b/curriculum/challenges/espanol/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/6148d99cdc7acd0c519862cb.md @@ -1,6 +1,6 @@ --- id: 6148d99cdc7acd0c519862cb -title: Step 56 +title: Paso 56 challengeType: 0 dashedName: step-56 --- diff --git a/curriculum/challenges/espanol/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/6148da157cc0bd0d06df5c0a.md b/curriculum/challenges/espanol/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/6148da157cc0bd0d06df5c0a.md index 48a10a7652b..390e2b5cda9 100644 --- a/curriculum/challenges/espanol/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/6148da157cc0bd0d06df5c0a.md +++ b/curriculum/challenges/espanol/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/6148da157cc0bd0d06df5c0a.md @@ -1,6 +1,6 @@ --- id: 6148da157cc0bd0d06df5c0a -title: Step 57 +title: Paso 57 challengeType: 0 dashedName: step-57 --- diff --git a/curriculum/challenges/espanol/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/6148dc095264000dce348bf5.md b/curriculum/challenges/espanol/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/6148dc095264000dce348bf5.md index 5c2eda9ee7d..fad3e357a14 100644 --- a/curriculum/challenges/espanol/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/6148dc095264000dce348bf5.md +++ b/curriculum/challenges/espanol/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/6148dc095264000dce348bf5.md @@ -1,6 +1,6 @@ --- id: 6148dc095264000dce348bf5 -title: Step 58 +title: Paso 58 challengeType: 0 dashedName: step-58 --- diff --git a/curriculum/challenges/espanol/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/6148dcaaf2e8750e6cb4501a.md b/curriculum/challenges/espanol/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/6148dcaaf2e8750e6cb4501a.md index 0d30766a117..3c686e86114 100644 --- a/curriculum/challenges/espanol/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/6148dcaaf2e8750e6cb4501a.md +++ b/curriculum/challenges/espanol/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/6148dcaaf2e8750e6cb4501a.md @@ -1,6 +1,6 @@ --- id: 6148dcaaf2e8750e6cb4501a -title: Step 59 +title: Paso 59 challengeType: 0 dashedName: step-59 --- diff --git a/curriculum/challenges/espanol/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/6148dd31d210990f0fb140f8.md b/curriculum/challenges/espanol/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/6148dd31d210990f0fb140f8.md index a81c6681ab9..129c2917139 100644 --- a/curriculum/challenges/espanol/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/6148dd31d210990f0fb140f8.md +++ b/curriculum/challenges/espanol/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/6148dd31d210990f0fb140f8.md @@ -1,6 +1,6 @@ --- id: 6148dd31d210990f0fb140f8 -title: Step 60 +title: Paso 60 challengeType: 0 dashedName: step-60 --- diff --git a/curriculum/challenges/espanol/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/6148defa9c01520fb9d178a0.md b/curriculum/challenges/espanol/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/6148defa9c01520fb9d178a0.md index f9a00418ffb..9505c0628fd 100644 --- a/curriculum/challenges/espanol/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/6148defa9c01520fb9d178a0.md +++ b/curriculum/challenges/espanol/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/6148defa9c01520fb9d178a0.md @@ -1,6 +1,6 @@ --- id: 6148defa9c01520fb9d178a0 -title: Step 61 +title: Paso 61 challengeType: 0 dashedName: step-61 --- diff --git a/curriculum/challenges/espanol/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/6148dfab9b54c110577de165.md b/curriculum/challenges/espanol/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/6148dfab9b54c110577de165.md index 9aad1de0893..1bd491b3290 100644 --- a/curriculum/challenges/espanol/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/6148dfab9b54c110577de165.md +++ b/curriculum/challenges/espanol/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/6148dfab9b54c110577de165.md @@ -1,6 +1,6 @@ --- id: 6148dfab9b54c110577de165 -title: Step 62 +title: Paso 62 challengeType: 0 dashedName: step-62 --- diff --git a/curriculum/challenges/espanol/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/6148e0bcc13efd10f7d7a6a9.md b/curriculum/challenges/espanol/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/6148e0bcc13efd10f7d7a6a9.md index fe550abb9f6..dc2c0360d01 100644 --- a/curriculum/challenges/espanol/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/6148e0bcc13efd10f7d7a6a9.md +++ b/curriculum/challenges/espanol/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/6148e0bcc13efd10f7d7a6a9.md @@ -1,6 +1,6 @@ --- id: 6148e0bcc13efd10f7d7a6a9 -title: Step 63 +title: Paso 63 challengeType: 0 dashedName: step-63 --- diff --git a/curriculum/challenges/espanol/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/6148e161ecec9511941f8833.md b/curriculum/challenges/espanol/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/6148e161ecec9511941f8833.md index cdda90dfdba..67742c1f0a0 100644 --- a/curriculum/challenges/espanol/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/6148e161ecec9511941f8833.md +++ b/curriculum/challenges/espanol/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/6148e161ecec9511941f8833.md @@ -1,6 +1,6 @@ --- id: 6148e161ecec9511941f8833 -title: Step 64 +title: Paso 64 challengeType: 0 dashedName: step-64 --- diff --git a/curriculum/challenges/espanol/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/6148e28706b34912340fd042.md b/curriculum/challenges/espanol/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/6148e28706b34912340fd042.md index 835c7b367a7..4bcf23ac5e9 100644 --- a/curriculum/challenges/espanol/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/6148e28706b34912340fd042.md +++ b/curriculum/challenges/espanol/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/6148e28706b34912340fd042.md @@ -1,6 +1,6 @@ --- id: 6148e28706b34912340fd042 -title: Step 65 +title: Paso 65 challengeType: 0 dashedName: step-65 --- diff --git a/curriculum/challenges/espanol/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/6148e335c1edd512d00e4691.md b/curriculum/challenges/espanol/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/6148e335c1edd512d00e4691.md index 7d77a1d354e..f3f77d30e26 100644 --- a/curriculum/challenges/espanol/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/6148e335c1edd512d00e4691.md +++ b/curriculum/challenges/espanol/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/6148e335c1edd512d00e4691.md @@ -1,6 +1,6 @@ --- id: 6148e335c1edd512d00e4691 -title: Step 66 +title: Paso 66 challengeType: 0 dashedName: step-66 --- diff --git a/curriculum/challenges/espanol/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/6148e41c728f65138addf9cc.md b/curriculum/challenges/espanol/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/6148e41c728f65138addf9cc.md index d1c51ab2013..a8eadbb7bab 100644 --- a/curriculum/challenges/espanol/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/6148e41c728f65138addf9cc.md +++ b/curriculum/challenges/espanol/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/6148e41c728f65138addf9cc.md @@ -1,6 +1,6 @@ --- id: 6148e41c728f65138addf9cc -title: Step 67 +title: Paso 67 challengeType: 0 dashedName: step-67 --- diff --git a/curriculum/challenges/espanol/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/6148e5aeb102e3142de026a2.md b/curriculum/challenges/espanol/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/6148e5aeb102e3142de026a2.md index cdc0bb30eb6..76ca170845a 100644 --- a/curriculum/challenges/espanol/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/6148e5aeb102e3142de026a2.md +++ b/curriculum/challenges/espanol/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/6148e5aeb102e3142de026a2.md @@ -1,6 +1,6 @@ --- id: 6148e5aeb102e3142de026a2 -title: Step 68 +title: Paso 68 challengeType: 0 dashedName: step-68 --- diff --git a/curriculum/challenges/espanol/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/6351e7a8684bf5377c4ee7f7.md b/curriculum/challenges/espanol/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/6351e7a8684bf5377c4ee7f7.md index 92d1c5cd3e4..604205fcc6e 100644 --- a/curriculum/challenges/espanol/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/6351e7a8684bf5377c4ee7f7.md +++ b/curriculum/challenges/espanol/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/6351e7a8684bf5377c4ee7f7.md @@ -1,64 +1,64 @@ --- id: 6351e7a8684bf5377c4ee7f7 -title: Step 31 +title: Paso 31 challengeType: 0 dashedName: step-31 --- # --description-- -Although not required for `label` elements with a nested `input`, it is still best-practice to explicitly link a `label` with its corresponding `input` element. +Aunque no es necesario para los elementos `label` con una `input` anidada, sigue siendo una buena práctica vincular explícitamente una `label` con su correspondiente elemento `input`. -Now, add a `for` attribute to each of your four `label`s that links the `label` to its corresponding radio `input`. +Ahora, agregue un atributo `for` a cada una de sus cuatro `label` que vincule la `label` a su `input` de radio correspondiente. # --hints-- -You should give the first `label` a `for` attribute. +Debes darle a la primera `label` un atributo `for`. ```js assert.notEmpty(document.querySelectorAll('ul.answers-list > li > label')?.[0]?.htmlFor); ``` -You should give the first `label` a `for` attribute matching the `id` of its `input` element. +Debes darle a la primer `label` un atributo `for` que coincida con el `id` de su elemento `input`. ```js const htmlFor = document.querySelectorAll('ul.answers-list > li > label')?.[0]?.htmlFor; assert.equal(htmlFor, document.querySelectorAll('ul.answers-list > li > label > input')?.[0]?.id); ``` -You should give the second `label` a `for` attribute. +Debes darle a la segunda `label` un atributo `for`. ```js assert.notEmpty(document.querySelectorAll('ul.answers-list > li > label')?.[1]?.htmlFor); ``` -You should give the second `label` a `for` attribute matching the `id` of its `input` element. +Debes darle a la segunda `label` un atributo `for` que coincida con el `id` de su elemento `input`. ```js const htmlFor = document.querySelectorAll('ul.answers-list > li > label')?.[1]?.htmlFor; assert.equal(htmlFor, document.querySelectorAll('ul.answers-list > li > label > input')?.[1]?.id); ``` -You should give the third `label` a `for` attribute. +Debes darle a la tercera `label` un atributo `for`. ```js assert.notEmpty(document.querySelectorAll('ul.answers-list > li > label')?.[2]?.htmlFor); ``` -You should give the third `label` a `for` attribute matching the `id` of its `input` element. +Debes darle a la tercera `label` un atributo `for` que coincida con el `id` de su elemento `input`. ```js const htmlFor = document.querySelectorAll('ul.answers-list > li > label')?.[2]?.htmlFor; assert.equal(htmlFor, document.querySelectorAll('ul.answers-list > li > label > input')?.[2]?.id); ``` -You should give the fourth `label` a `for` attribute. +Debes darle a la cuarta `label` un atributo `for`. ```js assert.notEmpty(document.querySelectorAll('ul.answers-list > li > label')?.[3]?.htmlFor); ``` -You should give the fourth `label` a `for` attribute matching the `id` of its `input` element. +Debes darle a la cuarta `label` un atributo `for` que coincida con el `id` de su elemento `input`. ```js const htmlFor = document.querySelectorAll('ul.answers-list > li > label')?.[3]?.htmlFor; diff --git a/curriculum/challenges/espanol/14-responsive-web-design-22/learn-basic-css-by-building-a-cafe-menu/5f332b23c2045fb843337579.md b/curriculum/challenges/espanol/14-responsive-web-design-22/learn-basic-css-by-building-a-cafe-menu/5f332b23c2045fb843337579.md index 59ffce236d0..6905a4d7fff 100644 --- a/curriculum/challenges/espanol/14-responsive-web-design-22/learn-basic-css-by-building-a-cafe-menu/5f332b23c2045fb843337579.md +++ b/curriculum/challenges/espanol/14-responsive-web-design-22/learn-basic-css-by-building-a-cafe-menu/5f332b23c2045fb843337579.md @@ -7,7 +7,7 @@ dashedName: step-7 # --description-- -To let visitors know the cafe was founded in 2020, add a `p` element below the `h1` element with the text `Est. 2020`. +Para que los visitantes sepan que la cafetería fue fundada en 2020, añade un elemento `p` bajo del elemento `h1` con el texto `Est. 2020`. # --hints-- @@ -35,7 +35,7 @@ Tu elemento `p` debe estar debajo del elemento `h1`. assert($('p')[0].previousElementSibling.tagName === 'H1'); ``` -Your `p` element should have the text `Est. 2020`. +Tu elemento `p` debe tener el texto `Est. 2020`. ```js assert(document.querySelector("p").innerText === "Est. 2020"); diff --git a/curriculum/challenges/espanol/14-responsive-web-design-22/learn-css-colors-by-building-a-set-of-colored-markers/616d50b93ba424d6282c99cf.md b/curriculum/challenges/espanol/14-responsive-web-design-22/learn-css-colors-by-building-a-set-of-colored-markers/616d50b93ba424d6282c99cf.md index c2b0ebd9cb1..5cf5ab3fa8f 100644 --- a/curriculum/challenges/espanol/14-responsive-web-design-22/learn-css-colors-by-building-a-set-of-colored-markers/616d50b93ba424d6282c99cf.md +++ b/curriculum/challenges/espanol/14-responsive-web-design-22/learn-css-colors-by-building-a-set-of-colored-markers/616d50b93ba424d6282c99cf.md @@ -7,9 +7,9 @@ dashedName: step-12 # --description-- -The background color was applied, but since the marker `div` element is empty, it doesn't have any height by default. +Se aplicó el color de fondo, pero dado que el elemento del marcador `div` está vacío, no tiene ninguna altura por defecto. -In your `.marker` CSS rule, set the `height` property to `25px` and the `width` property to `200px` +En la regla CSS `.marker`, establezca la propiedad `height` en `25px` y la propiedad `width` en `200px` # --hints-- diff --git a/curriculum/challenges/espanol/14-responsive-web-design-22/learn-css-colors-by-building-a-set-of-colored-markers/61a5d7ef1cfcf45764df07a2.md b/curriculum/challenges/espanol/14-responsive-web-design-22/learn-css-colors-by-building-a-set-of-colored-markers/61a5d7ef1cfcf45764df07a2.md index 129176595cb..1490c4ffeb2 100644 --- a/curriculum/challenges/espanol/14-responsive-web-design-22/learn-css-colors-by-building-a-set-of-colored-markers/61a5d7ef1cfcf45764df07a2.md +++ b/curriculum/challenges/espanol/14-responsive-web-design-22/learn-css-colors-by-building-a-set-of-colored-markers/61a5d7ef1cfcf45764df07a2.md @@ -7,20 +7,20 @@ dashedName: step-70 # --description-- -Now that the markers have the correct colors, it's time to build the marker sleeves. Start with the red marker. +Ahora que los marcadores tienen los colores correctos, es hora de construir las fundas de los marcadores. Empieza con el marcador rojo. -Inside the red marker `div`, create a new `div` and give it a class of `sleeve`. +Dentro del marcador rojo `div`, crea un nuevo `div` y asígnale una clase de `sleeve`. # --hints-- -Your new `div` element should be within the red marker's `div` element. +El nuevo elemento `div` debe estar dentro del elemento `div` del marcador rojo. ```js const redMarkerChildren = [...document.querySelector('.red')?.children]; assert(redMarkerChildren.every(child => child?.localName === 'div') && redMarkerChildren.length === 1); ``` -Your new `div` element should have a class of `sleeve`. +El nuevo elemento `div` debe tener una clase de `sleeve`. ```js const redMarkerChild = [...document.querySelector('.red')?.children][0]; diff --git a/curriculum/challenges/espanol/14-responsive-web-design-22/learn-css-colors-by-building-a-set-of-colored-markers/61b092eb9e7fc020b43b1bb2.md b/curriculum/challenges/espanol/14-responsive-web-design-22/learn-css-colors-by-building-a-set-of-colored-markers/61b092eb9e7fc020b43b1bb2.md index 2bba51f4dc7..1e1af953ceb 100644 --- a/curriculum/challenges/espanol/14-responsive-web-design-22/learn-css-colors-by-building-a-set-of-colored-markers/61b092eb9e7fc020b43b1bb2.md +++ b/curriculum/challenges/espanol/14-responsive-web-design-22/learn-css-colors-by-building-a-set-of-colored-markers/61b092eb9e7fc020b43b1bb2.md @@ -7,13 +7,13 @@ dashedName: step-72 # --description-- -To make the marker look more realistic, give the sleeve a transparent white color. +Para que el marcador se vea más realista, dale a la manga un color blanco transparente. -First, set the sleeve element's `background-color` to `white`. +Primero, establezca el elemento `background-color` de la manga a `white`. # --hints-- -Your `.sleeve` CSS rule should have a `background-color` property set to `white`. +Su regla CSS `.sleeve` debe tener una propiedad `background-color` establecida en `white`. ```js assert(new __helpers.CSSHelp(document).getStyle('.sleeve')?.backgroundColor === 'white'); diff --git a/curriculum/challenges/espanol/14-responsive-web-design-22/learn-css-colors-by-building-a-set-of-colored-markers/61b093179e7fc020b43b1bb3.md b/curriculum/challenges/espanol/14-responsive-web-design-22/learn-css-colors-by-building-a-set-of-colored-markers/61b093179e7fc020b43b1bb3.md index b13190e064e..c9275087e4a 100644 --- a/curriculum/challenges/espanol/14-responsive-web-design-22/learn-css-colors-by-building-a-set-of-colored-markers/61b093179e7fc020b43b1bb3.md +++ b/curriculum/challenges/espanol/14-responsive-web-design-22/learn-css-colors-by-building-a-set-of-colored-markers/61b093179e7fc020b43b1bb3.md @@ -7,15 +7,15 @@ dashedName: step-73 # --description-- -Opacity describes how opaque, or non-transparent, something is. For example, a solid wall is opaque, and no light can pass through. But a drinking glass is much more transparent, and you can see through the glass to the other side. +Opacity describe cuán opaco o no transparente es algo. Por ejemplo, una pared sólida es opaca y no puede pasar la luz. Pero un vaso para beber es mucho más transparente, y puedes ver a través del vaso hacia el otro lado. -With the CSS `opacity` property, you can control how opaque or transparent an element is. With the value `0`, or 0%, the element will be completely transparent, and at `1.0`, or 100%, the element will be completely opaque like it is by default. +Con la propiedad CSS `opacity`, puede controlar cuán opaco o transparente es un elemento. Con el valor `0`, o 0%, el elemento será completamente transparente, y en `1.0`, o 100%, el elemento será completamente opaco como lo es por defecto. -In the `.sleeve` CSS rule, set the `opacity` property to `0.5`. +En la regla CSS `.sleeve`, establezca la propiedad `opacity` en `0.5`. # --hints-- -Your `.sleeve` CSS rule should have an `opacity` property set to `0.5`. +La regla CSS `.sleeve` debe tener una propiedad `opacity` establecida en `0.5`. ```js assert(new __helpers.CSSHelp(document).getStyle('.sleeve')?.opacity === '0.5'); diff --git a/curriculum/challenges/espanol/14-responsive-web-design-22/learn-css-colors-by-building-a-set-of-colored-markers/61b093219e7fc020b43b1bb4.md b/curriculum/challenges/espanol/14-responsive-web-design-22/learn-css-colors-by-building-a-set-of-colored-markers/61b093219e7fc020b43b1bb4.md index 53fea4b36c8..e0d8738bee9 100644 --- a/curriculum/challenges/espanol/14-responsive-web-design-22/learn-css-colors-by-building-a-set-of-colored-markers/61b093219e7fc020b43b1bb4.md +++ b/curriculum/challenges/espanol/14-responsive-web-design-22/learn-css-colors-by-building-a-set-of-colored-markers/61b093219e7fc020b43b1bb4.md @@ -7,15 +7,15 @@ dashedName: step-74 # --description-- -Another way to set the opacity for an element is with the alpha channel. Similar to the `opacity` property, the alpha channel controls how transparent or opaque a color is. +Otra forma de establecer la opacidad de un elemento es con el canal alpha. Similar a la propiedad `opacity`, el canal alfa controla qué tan transparente u opaco es un color. -You've already set sleeve's opacity with a named color and the `opacity` property, but you can add an alpha channel to the other CSS color properties. +Ya has establecido la opacidad de la carátula con un color con nombre y la propiedad `opacity`, pero puedes agregar un canal alfa a las otras propiedades de color CSS. -Inside the `.sleeve` rule, remove the `opacity` property and value. +Dentro de la regla `.sleeve`, quite la propiedad y el valor `opacity`. # --hints-- -Your `.sleeve` CSS rule should not have an `opacity` property and value. +La regla CSS `.sleeve` no debe tener una propiedad y un valor `opacity`. ```js assert(!new __helpers.CSSHelp(document).getStyle('.sleeve')?.opacity); diff --git a/curriculum/challenges/espanol/14-responsive-web-design-22/learn-css-colors-by-building-a-set-of-colored-markers/61b093329e7fc020b43b1bb5.md b/curriculum/challenges/espanol/14-responsive-web-design-22/learn-css-colors-by-building-a-set-of-colored-markers/61b093329e7fc020b43b1bb5.md index 2ca5ea90049..5d2601bc810 100644 --- a/curriculum/challenges/espanol/14-responsive-web-design-22/learn-css-colors-by-building-a-set-of-colored-markers/61b093329e7fc020b43b1bb5.md +++ b/curriculum/challenges/espanol/14-responsive-web-design-22/learn-css-colors-by-building-a-set-of-colored-markers/61b093329e7fc020b43b1bb5.md @@ -7,19 +7,19 @@ dashedName: step-75 # --description-- -You're already familiar with using the `rgb` function to set colors. To add an alpha channel to an `rgb` color, use the `rgba` function instead. +Ya está familiarizado con el uso de la función `rgb` para establecer colores. Para agregar un canal alfa a un color `rgb`, use la función `rgba` en su lugar. -The `rgba` function works just like the `rgb` function, but takes one more number from `0` to `1.0` for the alpha channel: +La función `rgba` funciona igual que la función `rgb`, pero toma un número más de `0` a `1.0` para el canal alfa: ```css rgba(redValue, greenValue, blueValue, alphaValue); ``` -In the `.sleeve` rule, use the `rgba` function to set the `background-color` property to pure white with 50% opacity. +En la regla `.sleeve`, use la función `rgba` para establecer la propiedad `background-color` en blanco puro con un 50% de opacidad. # --hints-- -Your `.sleeve` CSS rule should have a `background-color` property set to `rgba(255, 255, 255, 0.5)`. +Su regla CSS `.sleeve` debe tener una propiedad `background-color` establecida en `rgba(255, 255, 255, 0.5)`. ```js assert(new __helpers.CSSHelp(document).getStyle('.sleeve')?.backgroundColor === 'rgba(255, 255, 255, 0.5)'); diff --git a/curriculum/challenges/espanol/14-responsive-web-design-22/learn-css-colors-by-building-a-set-of-colored-markers/61b093429e7fc020b43b1bb6.md b/curriculum/challenges/espanol/14-responsive-web-design-22/learn-css-colors-by-building-a-set-of-colored-markers/61b093429e7fc020b43b1bb6.md index fb4197fcfe9..f49e2ce7178 100644 --- a/curriculum/challenges/espanol/14-responsive-web-design-22/learn-css-colors-by-building-a-set-of-colored-markers/61b093429e7fc020b43b1bb6.md +++ b/curriculum/challenges/espanol/14-responsive-web-design-22/learn-css-colors-by-building-a-set-of-colored-markers/61b093429e7fc020b43b1bb6.md @@ -7,27 +7,27 @@ dashedName: step-76 # --description-- -Your sleeve is looking good, but it would look even better if it was positioned more toward the right side of the marker. One way to do that is to add another element before the sleeve to push it to the right. +Su manga se ve bien, pero se vería aún mejor si se colocara más hacia el lado derecho del marcador. Una forma de hacerlo es agregar otro elemento antes de la manga para empujarla hacia la derecha. -Add a new `div` with the class `cap` before the sleeve `div` element. +Agregue un nuevo `div` con la clase `cap` antes del elemento de manga `div`. # --hints-- -Your new `div` element should be within the red marker `div`. +Su nuevo elemento `div` debe estar dentro del marcador rojo `div`. ```js const redMarkerChildren = [...document.querySelector('div.red')?.children]; assert(redMarkerChildren.every(child => child?.localName === 'div') && redMarkerChildren.length === 2); ``` -Your new `div` element should have a class of `cap`. +Su nuevo elemento `div` debe tener una clase de `cap`. ```js const redMarkerChildren = [...document.querySelector('div.red')?.children]; assert(redMarkerChildren.some(child => child?.classList?.contains('cap'))); ``` -Your cap `div` should be before the sleeve `div`. +Tu tapa `div` debe estar antes de la manga `div`. ```js const redMarkerChildren = [...document.querySelector('div.red')?.children]; diff --git a/curriculum/challenges/espanol/14-responsive-web-design-22/learn-css-colors-by-building-a-set-of-colored-markers/61b0934c9e7fc020b43b1bb7.md b/curriculum/challenges/espanol/14-responsive-web-design-22/learn-css-colors-by-building-a-set-of-colored-markers/61b0934c9e7fc020b43b1bb7.md index b3b0510c7c5..a62932bc157 100644 --- a/curriculum/challenges/espanol/14-responsive-web-design-22/learn-css-colors-by-building-a-set-of-colored-markers/61b0934c9e7fc020b43b1bb7.md +++ b/curriculum/challenges/espanol/14-responsive-web-design-22/learn-css-colors-by-building-a-set-of-colored-markers/61b0934c9e7fc020b43b1bb7.md @@ -7,23 +7,23 @@ dashedName: step-77 # --description-- -Create a new CSS rule to target the class `cap`. In the new rule, set the `width` property to `60px`, and the `height` to `25px`. +Cree una nueva regla CSS para apuntar a la clase `cap`. En la nueva regla, establezca la propiedad `width` en `60px` y `height` en `25px`. # --hints-- -You should use a class selector to target the class `cap`. +Debe usar un selector de clase para apuntar a la clase `cap`. ```js assert(new __helpers.CSSHelp(document).getStyle('.cap')); ``` -Your `.cap` CSS rule should have a `width` property set to `60px`. +Su regla CSS `.cap` debe tener una propiedad `width` establecida en `60px`. ```js assert(new __helpers.CSSHelp(document).getStyle('.cap')?.width === '60px'); ``` -Your `.cap` CSS rule should have a `height` property set to `25px`. +Su regla CSS `.cap` debe tener una propiedad `height` establecida en `25px`. ```js assert(new __helpers.CSSHelp(document).getStyle('.cap')?.height === '25px'); diff --git a/curriculum/challenges/espanol/14-responsive-web-design-22/learn-css-colors-by-building-a-set-of-colored-markers/61b0936d9e7fc020b43b1bb8.md b/curriculum/challenges/espanol/14-responsive-web-design-22/learn-css-colors-by-building-a-set-of-colored-markers/61b0936d9e7fc020b43b1bb8.md index def4ed490c9..0022dfb5d5a 100644 --- a/curriculum/challenges/espanol/14-responsive-web-design-22/learn-css-colors-by-building-a-set-of-colored-markers/61b0936d9e7fc020b43b1bb8.md +++ b/curriculum/challenges/espanol/14-responsive-web-design-22/learn-css-colors-by-building-a-set-of-colored-markers/61b0936d9e7fc020b43b1bb8.md @@ -7,23 +7,23 @@ dashedName: step-78 # --description-- -It looks like your sleeve disappeared, but don't worry -- it's still there. Lo que ha ocurrido es que tu nuevo `div` de tapa está ocupando todo el ancho del marcador, y está empujando el mango hacia la siguiente línea. +Parece que tu manga desapareció, pero no te preocupes, todavía está allí. Lo que ha ocurrido es que tu nuevo `div` de tapa está ocupando todo el ancho del marcador, y está empujando el mango hacia la siguiente línea. -This is because the default `display` property for `div` elements is `block`. So when two `block` elements are next to each other, they stack like actual blocks. For example, your marker elements are all stacked on top of each other. +Esto se debe a que la propiedad predeterminada `display` para los elementos `div` es `block`. Entonces, cuando dos elementos `block` están uno al lado del otro, se apilan como bloques reales. Por ejemplo, los elementos del marcador están apilados uno encima del otro. -To position two `div` elements on the same line, set their `display` properties to `inline-block`. +Para colocar dos elementos `div` en la misma línea, establezca sus propiedades `display` en `inline-block`. -Create a new rule to target both the `cap` and `sleeve` classes, and set `display` to `inline-block`. +Cree una nueva regla para dirigirse a las clases `cap` y `sleeve` y establezca `display` en `inline-block`. # --hints-- -You should use a class selector to target both the `cap` and `sleeve` classes. +Debe usar un selector de clase para orientar las clases `cap` y `sleeve`. ```js assert(new __helpers.CSSHelp(document).getStyle('.cap, .sleeve') || new __helpers.CSSHelp(document).getStyle('.sleeve, .cap')); ``` -Your CSS rule should have a `display` property set to `inline-block`. +La regla CSS debe tener una propiedad `display` establecida en `inline-block`. ```js assert(new __helpers.CSSHelp(document).getStyle('.cap, .sleeve')?.display === 'inline-block' || new __helpers.CSSHelp(document).getStyle('.sleeve, .cap')?.display === 'inline-block'); diff --git a/curriculum/challenges/espanol/14-responsive-web-design-22/learn-css-colors-by-building-a-set-of-colored-markers/61b095989e7fc020b43b1bb9.md b/curriculum/challenges/espanol/14-responsive-web-design-22/learn-css-colors-by-building-a-set-of-colored-markers/61b095989e7fc020b43b1bb9.md index 71bbbf3ed1c..d7bce6fd5f1 100644 --- a/curriculum/challenges/espanol/14-responsive-web-design-22/learn-css-colors-by-building-a-set-of-colored-markers/61b095989e7fc020b43b1bb9.md +++ b/curriculum/challenges/espanol/14-responsive-web-design-22/learn-css-colors-by-building-a-set-of-colored-markers/61b095989e7fc020b43b1bb9.md @@ -7,13 +7,13 @@ dashedName: step-51 # --description-- -You'll use the `rgb` function for the colors of this gradient. +Utilizará la función `rgb` para los colores de este degradado. -In the `linear-gradient` function, use the `rgb` function to set the first color argument to pure red. +En la función `linear-gradient`, use la función `rgb` para establecer el primer argumento de color en rojo puro. # --hints-- -Your `.red` CSS rule should have a `background` property with the value `linear-gradient(90deg, rgb(255, 0, 0))`. +Su regla CSS `.red` debe tener una propiedad `background` con el valor `linear-gradient(90deg, rgb(255, 0, 0))`. ```js assert.match(__helpers.removeWhiteSpace(code), /\.red\{.*?background:linear-gradient\(90deg,rgb\(255,0,0\)\)/); diff --git a/curriculum/challenges/espanol/14-responsive-web-design-22/learn-css-colors-by-building-a-set-of-colored-markers/61b095a79e7fc020b43b1bba.md b/curriculum/challenges/espanol/14-responsive-web-design-22/learn-css-colors-by-building-a-set-of-colored-markers/61b095a79e7fc020b43b1bba.md index 41d5c5b21a7..aea49b5c41a 100644 --- a/curriculum/challenges/espanol/14-responsive-web-design-22/learn-css-colors-by-building-a-set-of-colored-markers/61b095a79e7fc020b43b1bba.md +++ b/curriculum/challenges/espanol/14-responsive-web-design-22/learn-css-colors-by-building-a-set-of-colored-markers/61b095a79e7fc020b43b1bba.md @@ -7,13 +7,13 @@ dashedName: step-52 # --description-- -You won't see gradient yet because the `linear-gradient` function needs at least two color arguments to work. +Todavía no verá el degradado porque la función `linear-gradient` necesita al menos dos argumentos de color para funcionar. -In the same `linear-gradient` function, use the `rgb` function to set the second color argument to pure green. +En la misma función `linear-gradient`, use la función `rgb` para establecer el segundo argumento de color en verde puro. # --hints-- -Your `.red` CSS rule should have a `background` property set to `linear-gradient(90deg, rgb(255, 0, 0), rgb(0, 255, 0))`. +Su regla CSS `.red` debe tener una propiedad `background` establecida en `linear-gradient(90deg, rgb(255, 0, 0), rgb(0, 255, 0))`. ```js assert.include(['linear-gradient(90deg,rgb(255,0,0),rgb(0,255,0))', 'rgba(0,0,0,0)linear-gradient(90deg,rgb(255,0,0),rgb(0,255,0))repeatscroll0%0%'], new __helpers.CSSHelp(document).getStyle('.red')?.getPropVal('background', true)); diff --git a/curriculum/challenges/espanol/14-responsive-web-design-22/learn-css-colors-by-building-a-set-of-colored-markers/61b095c79e7fc020b43b1bbb.md b/curriculum/challenges/espanol/14-responsive-web-design-22/learn-css-colors-by-building-a-set-of-colored-markers/61b095c79e7fc020b43b1bbb.md index 87dc9f5d626..3a82f3ff865 100644 --- a/curriculum/challenges/espanol/14-responsive-web-design-22/learn-css-colors-by-building-a-set-of-colored-markers/61b095c79e7fc020b43b1bbb.md +++ b/curriculum/challenges/espanol/14-responsive-web-design-22/learn-css-colors-by-building-a-set-of-colored-markers/61b095c79e7fc020b43b1bbb.md @@ -7,11 +7,11 @@ dashedName: step-62 # --description-- -For the second color argument, use a hex color code with the values `71` for red, `F5` for green, and `3E` for blue. +Para el segundo argumento de color, utilice un código de color hexadecimal con los valores `71` para rojo, `F5` para verde y `3E` para azul. # --hints-- -Your `.green` CSS rule should have a `background` property set to `linear-gradient(180deg, #55680D, #71F53E)`. +Su regla CSS `.green` debe tener una propiedad `background` establecida en `linear-gradient(180deg, #55680D, #71F53E)`. ```js assert.include(['linear-gradient(rgb(85,104,13),rgb(113,245,62))', 'rgba(0,0,0,0)linear-gradient(rgb(85,104,13),rgb(113,245,62))repeatscroll0%0%'], new __helpers.CSSHelp(document).getStyle('.green')?.getPropVal('background', true)); diff --git a/curriculum/challenges/espanol/14-responsive-web-design-22/learn-css-colors-by-building-a-set-of-colored-markers/61b09f739aa6572d2064f9b8.md b/curriculum/challenges/espanol/14-responsive-web-design-22/learn-css-colors-by-building-a-set-of-colored-markers/61b09f739aa6572d2064f9b8.md index f27f14b93db..20342665b94 100644 --- a/curriculum/challenges/espanol/14-responsive-web-design-22/learn-css-colors-by-building-a-set-of-colored-markers/61b09f739aa6572d2064f9b8.md +++ b/curriculum/challenges/espanol/14-responsive-web-design-22/learn-css-colors-by-building-a-set-of-colored-markers/61b09f739aa6572d2064f9b8.md @@ -7,13 +7,13 @@ dashedName: step-84 # --description-- -The black color of your border looks pretty harsh against the more transparent sleeve. You can use an alpha channel to lower the opacity of the black border. +El color negro de su borde se ve bastante duro contra la manga más transparente. Puede utilizar un canal alfa para reducir la opacidad del borde negro. -For the `border-left` shorthand property, use the `rgba` function to set the color value to pure black with 75% opacity. +Para la propiedad abreviada `border-left`, utilice la función `rgba` para establecer el valor de color en negro puro con un 75% de opacidad. # --hints-- -Your `.sleeve` CSS rule should have a `border-left` shorthand property and with the value `10px double rgba(0, 0, 0, 0.75)`. +La regla CSS `.sleeve` debe tener una propiedad abreviada `border-left` y con el valor `10px double rgba(0, 0, 0, 0.75)`. ```js assert(new __helpers.CSSHelp(document).getStyle('.sleeve')?.borderLeft === '10px double rgba(0, 0, 0, 0.75)'); diff --git a/curriculum/challenges/espanol/14-responsive-web-design-22/learn-css-colors-by-building-a-set-of-colored-markers/61b0a1b2af494934b7ec1a72.md b/curriculum/challenges/espanol/14-responsive-web-design-22/learn-css-colors-by-building-a-set-of-colored-markers/61b0a1b2af494934b7ec1a72.md index 1713f1510b4..af779859040 100644 --- a/curriculum/challenges/espanol/14-responsive-web-design-22/learn-css-colors-by-building-a-set-of-colored-markers/61b0a1b2af494934b7ec1a72.md +++ b/curriculum/challenges/espanol/14-responsive-web-design-22/learn-css-colors-by-building-a-set-of-colored-markers/61b0a1b2af494934b7ec1a72.md @@ -7,20 +7,20 @@ dashedName: step-85 # --description-- -Impresionante. Luce bien el marcador rojo. Now all you need to do is add the caps and sleeves to your other markers. +Impresionante. Luce bien el marcador rojo. Ahora todo lo que necesita hacer es agregar las tapas y mangas a sus otros marcadores. -Add a cap and sleeve to both the green and blue markers. You can just copy the `div` elements from the red marker and paste them into the other two markers. +Agregue una gorra y una manga a los marcadores verdes y azules. Puede copiar los elementos `div` del marcador rojo y pegarlos en los otros dos marcadores. # --hints-- -Your green marker `div` should contain two `div` elements. +El marcador verde `div` debe contener dos elementos `div`. ```js const greenMarkerChildren = [...document.querySelector('.green')?.children]; assert(greenMarkerChildren.every(child => child?.localName === 'div') && greenMarkerChildren.length === 2); ``` -Your green marker's cap `div` element should be before the sleeve `div` element. +El elemento `div` de la tapa del marcador verde debe estar antes del elemento `div` de la manga. ```js const greenMarkerChildren = [...document.querySelector('.green')?.children]; @@ -29,14 +29,14 @@ const greenMarkerSleeve = document.querySelector('.green .sleeve'); assert(greenMarkerChildren.indexOf(greenMarkerCap) < greenMarkerChildren.indexOf(greenMarkerSleeve)); ``` -Your blue marker `div` should contain two `div` elements. +Su marcador azul `div` debe contener dos elementos `div`. ```js const blueMarkerChildren = [...document.querySelector('.blue')?.children]; assert(blueMarkerChildren.every(child => child?.localName === 'div') && blueMarkerChildren.length === 2); ``` -Your blue marker's cap `div` element should be before the sleeve `div` element. +El elemento `div` de la tapa de su marcador azul debe estar antes del elemento `div` de la manga. ```js const blueMarkerChildren = [...document.querySelector('.blue')?.children]; diff --git a/curriculum/challenges/espanol/14-responsive-web-design-22/learn-css-colors-by-building-a-set-of-colored-markers/61b306305810f1c9040ce5a2.md b/curriculum/challenges/espanol/14-responsive-web-design-22/learn-css-colors-by-building-a-set-of-colored-markers/61b306305810f1c9040ce5a2.md index ad9c70673c4..ebdef6f1dfe 100644 --- a/curriculum/challenges/espanol/14-responsive-web-design-22/learn-css-colors-by-building-a-set-of-colored-markers/61b306305810f1c9040ce5a2.md +++ b/curriculum/challenges/espanol/14-responsive-web-design-22/learn-css-colors-by-building-a-set-of-colored-markers/61b306305810f1c9040ce5a2.md @@ -7,15 +7,15 @@ dashedName: step-87 # --description-- -As you can see, you added a simple red shadow around your marker that's 5 pixels to the right, and 5 pixels down. +Como puede ver, agregó una sombra roja simple alrededor de su marcador que está 5 píxeles a la derecha y 5 píxeles hacia abajo. -But what if you wanted to position your shadow on the opposite side? You can do that by using negative values for `offsetX` and `offsetY`. +Pero, ¿y si quisieras colocar tu sombra en el lado opuesto? Puede hacerlo usando valores negativos para `offsetX` y `offsetY`. -Update the values for the `box-shadow` property, and set `offsetX` to `-5px`, and `offsetY` to `-5px`. +Actualice los valores de la propiedad `box-shadow` y establezca `offsetX` en `-5px` y `offsetY` en `-5px`. # --hints-- -Your `.red` CSS rule should have a `box-shadow` shorthand property and with the value `-5px -5px red`. +Su regla CSS `.red` debe tener una propiedad abreviada `box-shadow` y con el valor `-5px -5px red`. ```js assert(new __helpers.CSSHelp(document).getStyle('.red')?.boxShadow === 'red -5px -5px'); diff --git a/curriculum/challenges/espanol/14-responsive-web-design-22/learn-css-colors-by-building-a-set-of-colored-markers/61b30995968123ceb6b76167.md b/curriculum/challenges/espanol/14-responsive-web-design-22/learn-css-colors-by-building-a-set-of-colored-markers/61b30995968123ceb6b76167.md index b7887c08987..23dcc7ef691 100644 --- a/curriculum/challenges/espanol/14-responsive-web-design-22/learn-css-colors-by-building-a-set-of-colored-markers/61b30995968123ceb6b76167.md +++ b/curriculum/challenges/espanol/14-responsive-web-design-22/learn-css-colors-by-building-a-set-of-colored-markers/61b30995968123ceb6b76167.md @@ -7,19 +7,19 @@ dashedName: step-88 # --description-- -Notice that the edges of the shadow are sharp. This is because there is an optional `blurRadius` value for the `box-shadow` property: +Observa que los límites de la sombra son muy bruscos. En la propiedad `box-shadow`, se encuentra el valor opcional `blurRadius`: ```css box-shadow: offsetX offsetY blurRadius color; ``` -If a `blurRadius` value isn't included, it defaults to `0` and produces sharp edges. The higher the value of `blurRadius`, the greater the blurring effect is. +Si no se indica un valor para `blurRadius`, será `0` por defecto, produciendo sombras con los límites bruscos. Cuanto mayor sea el valor de `blurRadius`, mayor será el efecto de difuminado de la sombra. -In the `.green` CSS rule, add the `box-shadow` property with the values `5px` for `offsetX`, `5px` for `offsetY`, `5px` for `blurRadius`, and `green` for `color`. +En la regla CSS `.green`, añade la propiedad `box-shadow` con los valores `5px` para `offsetX`, `5px` para `offsetY`, `5px` para `blurRadius` y `green` para `color`. # --hints-- -Your `.green` CSS rule should have a `box-shadow` shorthand property and with the value `5px 5px 5px green`. +La regla CSS `.green` debe tener la propiedad abreviada `box-shadow` con el valor `5px 5px 5px green`. ```js assert(new __helpers.CSSHelp(document).getStyle('.green')?.boxShadow === 'green 5px 5px 5px'); diff --git a/curriculum/challenges/espanol/14-responsive-web-design-22/learn-css-colors-by-building-a-set-of-colored-markers/61b30a286c228bd0c493c09a.md b/curriculum/challenges/espanol/14-responsive-web-design-22/learn-css-colors-by-building-a-set-of-colored-markers/61b30a286c228bd0c493c09a.md index 62630a0dcaa..ddf53eeaa5e 100644 --- a/curriculum/challenges/espanol/14-responsive-web-design-22/learn-css-colors-by-building-a-set-of-colored-markers/61b30a286c228bd0c493c09a.md +++ b/curriculum/challenges/espanol/14-responsive-web-design-22/learn-css-colors-by-building-a-set-of-colored-markers/61b30a286c228bd0c493c09a.md @@ -7,21 +7,21 @@ dashedName: step-89 # --description-- -But what if you wanted to expand the shadow out further? You can do that with the optional `spreadRadius` value: +¿Quieres expandir la sombra un poco más? Puedes hacerlo con el valor opcional `spreadRadius`: ```css box-shadow: offsetX offsetY blurRadius spreadRadius color; ``` -Like `blurRadius`, `spreadRadius` defaults to `0` if it isn't included. +Como `blurRadius`, el valor por defecto de `spreadRadius` es `0` si no se especifica. -Practice by adding a 5 pixel shadow directly around the blue marker. +Practica añadiendo una sombra de 5 píxels alrededor del marcador azul. -In the `.blue` CSS rule, add the `box-shadow` property with the values `0` for `offsetX`, `0` for `offsetY`, `0` for `blurRadius`, `5px` for `spreadRadius`, and `blue` for `color`. +En la regla CSS `.blue`, añade la propiedad `box-shadow` con los valores `0` para `offsetX`, `0` para `offsetY`, `0` para `blurRadius`, `5px` para `spreadRadius` y `blue` para `color`. # --hints-- -Your `.blue` CSS rule should have a `box-shadow` shorthand property and with the value `0 0 0 5px blue`. +La regla CSS `.blue` debe tener la propiedad abreviada `box-shadow`con el valor `0 0 0 5px blue`. ```js assert(new __helpers.CSSHelp(document).getStyle('.blue')?.boxShadow === 'blue 0px 0px 0px 5px'); diff --git a/curriculum/challenges/espanol/14-responsive-web-design-22/learn-css-colors-by-building-a-set-of-colored-markers/61b31287fb580ae75a486047.md b/curriculum/challenges/espanol/14-responsive-web-design-22/learn-css-colors-by-building-a-set-of-colored-markers/61b31287fb580ae75a486047.md index 0cb41d5f56c..67f9dbd220b 100644 --- a/curriculum/challenges/espanol/14-responsive-web-design-22/learn-css-colors-by-building-a-set-of-colored-markers/61b31287fb580ae75a486047.md +++ b/curriculum/challenges/espanol/14-responsive-web-design-22/learn-css-colors-by-building-a-set-of-colored-markers/61b31287fb580ae75a486047.md @@ -7,13 +7,13 @@ dashedName: step-90 # --description-- -Now that you're familiar with the `box-shadow` property you can finalize the shadows, starting with the one for the red marker. +Ahora que ya estás familiarizado con la propiedad `box-shadow`, es el momento de terminar de trabajar las sombras, comenzando con la del marcador rojo. -In the `.red` CSS rule, update the values for the `box-shadow` property so `offsetX` is `0`,`offsetY` is `0`, `blurRadius` is `20px`, `spreadRadius` is `0`, and `color` is `red`. +En la regla CSS `.red` actualiza los valores de la propiedad `box-shadow` de manera que `offsetX` sea `0`, `offsetY` sea `0`, `blurRadius` sea `20px`, `spreadRadius` sea `0` y `color` sea `red`. # --hints-- -Your `.red` CSS rule should have a `box-shadow` shorthand property and with the value `0 0 20px 0 red`. +La regla CSS `.red` debe tener la propiedad abreviada `box-shadow` con el valor `0 0 20px 0 red`. ```js assert(new __helpers.CSSHelp(document).getStyle('.red')?.boxShadow === 'red 0px 0px 20px 0px'); diff --git a/curriculum/challenges/espanol/14-responsive-web-design-22/learn-css-colors-by-building-a-set-of-colored-markers/61b315e76a63b3ecbbb11b75.md b/curriculum/challenges/espanol/14-responsive-web-design-22/learn-css-colors-by-building-a-set-of-colored-markers/61b315e76a63b3ecbbb11b75.md index 8aa2a76317a..e0415e38d2a 100644 --- a/curriculum/challenges/espanol/14-responsive-web-design-22/learn-css-colors-by-building-a-set-of-colored-markers/61b315e76a63b3ecbbb11b75.md +++ b/curriculum/challenges/espanol/14-responsive-web-design-22/learn-css-colors-by-building-a-set-of-colored-markers/61b315e76a63b3ecbbb11b75.md @@ -7,13 +7,13 @@ dashedName: step-91 # --description-- -Next, update the `color` value of the red marker's `box-shadow` property. +A continuación, actualice el valor `color` de la propiedad `box-shadow` del marcador rojo. -Replace the named color with the `rgba` function. Use the values `83` for red, `14` for green, `14` for blue and `0.8` for the alpha channel. +Reemplace el color nombrado con la función `rgba`. Utilice los valores `83` para rojo, `14` para verde, `14` para azul y `0.8` para el canal alfa. # --hints-- -Your `.red` CSS rule should have a `box-shadow` shorthand property and with the value `0 0 20px 0 rgba(83, 14, 14, 0.8)`. +Su regla CSS `.red` debe tener una propiedad abreviada `box-shadow` y con el valor `0 0 20px 0 rgba(83, 14, 14, 0.8)`. ```js assert(new __helpers.CSSHelp(document).getStyle('.red')?.boxShadow === 'rgba(83, 14, 14, 0.8) 0px 0px 20px 0px'); diff --git a/curriculum/challenges/espanol/14-responsive-web-design-22/learn-css-colors-by-building-a-set-of-colored-markers/61b3183655ec10efd8c0bb07.md b/curriculum/challenges/espanol/14-responsive-web-design-22/learn-css-colors-by-building-a-set-of-colored-markers/61b3183655ec10efd8c0bb07.md index 09aec1a5b60..64d39354084 100644 --- a/curriculum/challenges/espanol/14-responsive-web-design-22/learn-css-colors-by-building-a-set-of-colored-markers/61b3183655ec10efd8c0bb07.md +++ b/curriculum/challenges/espanol/14-responsive-web-design-22/learn-css-colors-by-building-a-set-of-colored-markers/61b3183655ec10efd8c0bb07.md @@ -7,19 +7,19 @@ dashedName: step-92 # --description-- -The shadows for your green and blue markers will have the same position, blur, and spread. The only difference will be the colors. +Las sombras de los marcadores verde y azul tendrán la misma posición, desenfoque y extensión. La única diferencia serán los colores. -In the `.green` and `.blue` CSS rules, update the values for the `box-shadow` properties so `offsetX` is `0`,`offsetY` is `0`, `blurRadius` is `20px`, and `spreadRadius` is `0`. Leave the colors as `green` and `blue` for now. +En las reglas CSS `.green` y `.blue`, actualice los valores de las propiedades `box-shadow` para que `offsetX` sea `0`, `offsetY` sea `0`, `blurRadius` sea `20px` y `spreadRadius`sea `0`. Deje los colores como `green` y `blue` por ahora. # --hints-- -Your `.green` CSS rule should have a `box-shadow` shorthand property and with the value `0 0 20px 0 green`. +Su regla CSS `.green` debe tener una propiedad abreviada `box-shadow` y con el valor `0 0 20px 0 green`. ```js assert(new __helpers.CSSHelp(document).getStyle('.green')?.boxShadow === 'green 0px 0px 20px 0px'); ``` -Your `.blue` CSS rule should have a `box-shadow` shorthand property and with the value `0 0 20px 0 blue`. +Su regla CSS `.blue` debe tener una propiedad abreviada `box-shadow` y con el valor `0 0 20px 0 blue`. ```js assert(new __helpers.CSSHelp(document).getStyle('.blue')?.boxShadow === 'blue 0px 0px 20px 0px'); diff --git a/curriculum/challenges/espanol/14-responsive-web-design-22/learn-css-colors-by-building-a-set-of-colored-markers/61b31a451057fff645ec09be.md b/curriculum/challenges/espanol/14-responsive-web-design-22/learn-css-colors-by-building-a-set-of-colored-markers/61b31a451057fff645ec09be.md index e1a51d298be..39e72cdc84d 100644 --- a/curriculum/challenges/espanol/14-responsive-web-design-22/learn-css-colors-by-building-a-set-of-colored-markers/61b31a451057fff645ec09be.md +++ b/curriculum/challenges/espanol/14-responsive-web-design-22/learn-css-colors-by-building-a-set-of-colored-markers/61b31a451057fff645ec09be.md @@ -7,11 +7,11 @@ dashedName: step-93 # --description-- -For the green marker's `box-shadow` property, replace the named color with a hex color code. Use the values `3B` for red, `7E` for green, `20` for blue, and `CC` for the alpha channel. +En la propiedad `box-shadow` del marcador verde, sustituye el nombre del color por un valor hexadecimal. Utiliza los valores `3B` para el rojo, `7E` para el verde, `20` para el azul y `CC` para el canal alfa. # --hints-- -Your `.green` CSS rule should have a `box-shadow` shorthand property and with the value `0 0 20px 0 #3B7E20CC`. +La regla CSS `.green` debe tener la propiedad abreviada `box-shadow` con el valor `0 0 20px 0 #3B7E20CC`. ```js assert(new __helpers.CSSHelp(document).getStyle('.green')?.boxShadow === 'rgba(59, 126, 32, 0.8) 0px 0px 20px 0px'); diff --git a/curriculum/challenges/espanol/14-responsive-web-design-22/learn-css-colors-by-building-a-set-of-colored-markers/61b31cd7b0c76bfc076b4719.md b/curriculum/challenges/espanol/14-responsive-web-design-22/learn-css-colors-by-building-a-set-of-colored-markers/61b31cd7b0c76bfc076b4719.md index 593517f95e3..5bab74fff97 100644 --- a/curriculum/challenges/espanol/14-responsive-web-design-22/learn-css-colors-by-building-a-set-of-colored-markers/61b31cd7b0c76bfc076b4719.md +++ b/curriculum/challenges/espanol/14-responsive-web-design-22/learn-css-colors-by-building-a-set-of-colored-markers/61b31cd7b0c76bfc076b4719.md @@ -7,13 +7,13 @@ dashedName: step-94 # --description-- -Finally, for the blue marker's `box-shadow` property, replace the named color with the `hsla` function. Use the values `223` for hue, `59%` for saturation, `31%` for lightness, and `0.8` for the alpha channel. +Por último, en la propiedad `box-shadow` del marcador azul, sustituye el nombre del color por la función `hsla`. Utiliza los valores `223` para el matiz, `59%` para la saturación, `31%` para la luminosidad y `0.8` para el canal alfa. -And with that, your set of colored markers is complete! Well done. +¡Y con esto has concluído tu impresionante grupo de marcadores coloreados! Bien hecho. # --hints-- -Your `.blue` CSS rule should have a `box-shadow` shorthand property and with the value `0 0 20px 0 hsla(223, 59%, 31%, 0.8)`. +La regla CSS `.blue` debe tener la propiedad abreviada `box-shadow` con el valor `0 0 20px 0 hsla(223, 59%, 31%, 0.8)`. ```js assert(new __helpers.CSSHelp(document).getStyle('.blue')?.boxShadow === 'rgba(32, 59, 126, 0.8) 0px 0px 20px 0px'); diff --git a/curriculum/challenges/espanol/14-responsive-web-design-22/learn-css-flexbox-by-building-a-photo-gallery/61537c9eecea6a335db6da79.md b/curriculum/challenges/espanol/14-responsive-web-design-22/learn-css-flexbox-by-building-a-photo-gallery/61537c9eecea6a335db6da79.md index f51cb28731c..79cef8ffda6 100644 --- a/curriculum/challenges/espanol/14-responsive-web-design-22/learn-css-flexbox-by-building-a-photo-gallery/61537c9eecea6a335db6da79.md +++ b/curriculum/challenges/espanol/14-responsive-web-design-22/learn-css-flexbox-by-building-a-photo-gallery/61537c9eecea6a335db6da79.md @@ -7,7 +7,7 @@ dashedName: step-5 # --description-- -Below your `.header` element, create a new `div` element and assign it a `class` of `gallery`. Este `div` actuará como contenedor de las imágenes de la galería. +Debajo del elemento `.header`, crea un nuevo elemento `div` y asigna el valor `gallery` a su atributo `class`. Este `div` actuará como contenedor de las imágenes de la galería. Dentro de ese elemento `.gallery`, crea nueve elementos `img`. diff --git a/curriculum/challenges/espanol/14-responsive-web-design-22/learn-css-grid-by-building-a-magazine/61437d575fb98f57fa8f7f36.md b/curriculum/challenges/espanol/14-responsive-web-design-22/learn-css-grid-by-building-a-magazine/61437d575fb98f57fa8f7f36.md index 90b27d8c8eb..dd7c4bf712e 100644 --- a/curriculum/challenges/espanol/14-responsive-web-design-22/learn-css-grid-by-building-a-magazine/61437d575fb98f57fa8f7f36.md +++ b/curriculum/challenges/espanol/14-responsive-web-design-22/learn-css-grid-by-building-a-magazine/61437d575fb98f57fa8f7f36.md @@ -7,13 +7,13 @@ dashedName: step-1 # --description-- -Begin with your standard HTML boilerplate. Add a `DOCTYPE` declaration, an `html` element specifying this page is in English, a `head` element, and a `body` element. +Comience con su plantilla HTML estándar. Agregue una declaración `DOCTYPE`, un elemento `html` que especifique que esta página está en inglés, un elemento `head` y un elemento `body`. -Add a `` tag with the appropriate `charset` and a `` tag for mobile responsiveness within the `head` element. +Agregue una etiqueta`` con el `charset` apropiado y una etiqueta `` para la capacidad de respuesta móvil dentro del `head` elemento. # --hints-- -Your code should contain the `DOCTYPE` reference. +Su código debe contener la referencia `DOCTYPE`. ```js assert(code.match(/` after the type. +Debe cerrar la declaración `DOCTYPE` con `>` después del tipo. ```js assert(code.match(//gi)); ``` -You should have an opening `` tag, and it should have `lang` of `en`. +Debe tener una etiqueta de apertura ``, y debe tener `lang` como `en`. ```js assert(code.match(//gi)); ``` -Your `html` element should have a closing tag. +Su elemento `html` debe tener una etiqueta de cierre. ```js assert(code.match(/<\/html\s*>/)); ``` -Your `DOCTYPE` declaration should be at the beginning of your HTML. +Su declaración `DOCTYPE` debe estar al comienzo de su HTML. ```js assert(__helpers.removeHtmlComments(code).match(/^\s*/i)); ``` -You should have an opening `` tag. +Debe tener una etiqueta de apertura ``. ```js assert(code.match(//i)); ``` -You should have a closing `` tag. +Debe tener una etiqueta de cierre ``. ```js assert(code.match(/<\/head\s*>/i)); ``` -You should have an opening `` tag. +Debe tener una etiqueta de apertura ``. ```js assert(code.match(//i)); ``` -You should have a closing `` tag. +Debe tener una etiqueta de cierre ``. ```js assert(code.match(/<\/body\s*>/i)); ``` -The `head` and `body` elements should be siblings. +Los elementos `head` y `body` deben ser hermanos. ```js assert(document.querySelector('head')?.nextElementSibling?.localName === 'body'); ``` -The `head` element should be within the `html` element. +El elemento `head` debe estar dentro del elemento `html`. ```js assert([...document.querySelector('html')?.children].some(x => x?.localName === 'head')); ``` -The `body` element should be within the `html` element. +El elemento `body` debe estar dentro del elemento `html`. ```js assert([...document.querySelector('html')?.children].some(x => x?.localName === 'body')); ``` -You should have two `meta` elements. +Debes tener dos elementos `meta`. ```js const meta = document.querySelectorAll('meta'); assert(meta?.length === 2); ``` -One `meta` element should have a `name` set to `viewport`, and `content` set to `width=device-width, initial-scale=1.0`. +Un elemento `meta` debe tener un `name` establecido en `viewport`, y `content` establecido en `width=device-width, initial-scale=1.0`. ```js const meta = [...document.querySelectorAll('meta')]; diff --git a/curriculum/challenges/espanol/14-responsive-web-design-22/learn-css-grid-by-building-a-magazine/614385513d91ae5c251c2052.md b/curriculum/challenges/espanol/14-responsive-web-design-22/learn-css-grid-by-building-a-magazine/614385513d91ae5c251c2052.md index 84356f82fb1..232d06bd5a2 100644 --- a/curriculum/challenges/espanol/14-responsive-web-design-22/learn-css-grid-by-building-a-magazine/614385513d91ae5c251c2052.md +++ b/curriculum/challenges/espanol/14-responsive-web-design-22/learn-css-grid-by-building-a-magazine/614385513d91ae5c251c2052.md @@ -7,66 +7,66 @@ dashedName: step-2 # --description-- -Add a `title` element with the text `Magazine`, a `link` element for the `https://fonts.googleapis.com/css?family=Anton%7CBaskervville%7CRaleway&display=swap` font stylesheet, a `link` for the `https://use.fontawesome.com/releases/v5.8.2/css/all.css` FontAwesome stylesheet, and a `link` for your `./styles.css` stylesheet. +Agregue un elemento `title` con el texto `Magazine`, un elemento `link` para la hoja de estilo de fuente`https://fonts.googleapis.com/css?family=Anton%7CBaskervville%7CRaleway&display=swap`, una hoja de estilos `link` para la hoja de estilos `https://use.fontawesome.com/releases/v5.8.2/css/all.css` FontAwesome, y un `link` para su hoja de estilos `./styles.css`. -Your font stylesheet will load three separate fonts: `Anton`, `Baskervville`, and `Raleway`. +La hoja de estilo de fuente cargará tres fuentes separadas: `Anton`, `Baskervville` y `Raleway`. # --hints-- -Your code should have three self-closing `link` elements. +El código debe tener tres elementos `link` de cierre automático. ```js assert(document.querySelectorAll('link').length === 3); ``` -Your `link` element should be within your `head` element. +Su elemento `link` debe estar dentro de su elemento `head`. ```js assert(document.querySelectorAll('head > link').length === 3); ``` -Your three `link` elements should have a `rel` attribute with the value `stylesheet`. +Los tres elementos `link` deben tener un atributo `rel` con el valor `stylesheet`. ```js const links = [...document.querySelectorAll('link')]; assert(links.every(link => link.getAttribute('rel') === 'stylesheet')); ``` -One of your link elements should have the `href` set to `https://fonts.googleapis.com/css?family=Anton%7CBaskervville%7CRaleway&display=swap`. +Uno de los elementos del enlace debe tener el `href` establecido en`https://fonts.googleapis.com/css?family=Anton%7CBaskervville%7CRaleway&display=swap`. ```js const links = [...document.querySelectorAll('link')]; assert(links.find(link => link.getAttribute('href') === 'https://fonts.googleapis.com/css?family=Anton%7CBaskervville%7CRaleway&display=swap')); ``` -One of your link elements should have the `href` set to `https://use.fontawesome.com/releases/v5.8.2/css/all.css`. +Uno de los elementos del enlace debe tener el `href` establecido en`https://use.fontawesome.com/releases/v5.8.2/css/all.css`. ```js const links = [...document.querySelectorAll('link')]; assert(links.find(link => link.getAttribute('href') === 'https://use.fontawesome.com/releases/v5.8.2/css/all.css')); ``` -One of your `link` elements should have an `href` attribute with the value `styles.css`. +Uno de los elementos `link` debe tener un atributo `href` con el valor `styles.css`. ```js assert.match(code, / a?.children?.length === 1 && a?.children?.[0]?.localName === 'i')); ``` -Each `i` element should have a `class` attribute which includes `fab`. +Cada elemento `i` debe tener un atributo `class` que incluya `fab`. ```js const iiiii = [...document.querySelectorAll('i')]; assert(iiiii?.every(i => i?.classList?.contains('fab'))); ``` -The first `i` element should have a `class` attribute which includes `fa-facebook-f`. +El primer elemento `i` debe tener un atributo `class` que incluya `fa-facebook-f`. ```js assert(document.querySelectorAll('i')?.[0]?.classList?.contains('fa-facebook-f')); ``` -The second `i` element should have a `class` attribute which includes `fa-twitter`. +El segundo elemento `i` debe tener un atributo `class` que incluya `fa-twitter`. ```js assert(document.querySelectorAll('i')?.[1]?.classList?.contains('fa-twitter')); ``` -The third `i` element should have a `class` attribute which includes `fa-instagram`. +El tercer elemento `i` debe tener un atributo `class` que incluya `fa-instagram`. ```js assert(document.querySelectorAll('i')?.[2]?.classList?.contains('fa-instagram')); ``` -The fourth `i` element should have a `class` attribute which includes `fa-linkedin-in`. +El cuarto elemento `i` debe tener un atributo `class` que incluya `fa-linkedin-in`. ```js assert(document.querySelectorAll('i')?.[3]?.classList?.contains('fa-linkedin-in')); ``` -The fifth `i` element should have a `class` attribute which includes `fa-youtube`. +El quinto elemento `i` debe tener un atributo `class` que incluya `fa-youtube`. ```js assert(document.querySelectorAll('i')?.[4]?.classList?.contains('fa-youtube')); diff --git a/curriculum/challenges/espanol/14-responsive-web-design-22/learn-css-grid-by-building-a-magazine/61438ec09438696391076d6a.md b/curriculum/challenges/espanol/14-responsive-web-design-22/learn-css-grid-by-building-a-magazine/61438ec09438696391076d6a.md index b3ec80181b7..4baa824606f 100644 --- a/curriculum/challenges/espanol/14-responsive-web-design-22/learn-css-grid-by-building-a-magazine/61438ec09438696391076d6a.md +++ b/curriculum/challenges/espanol/14-responsive-web-design-22/learn-css-grid-by-building-a-magazine/61438ec09438696391076d6a.md @@ -7,7 +7,7 @@ dashedName: step-11 # --description-- -Below your `.heading` element, create a new `section` element with the `class` set to `text`. Within that, create a `p` element with the `class` set to `first-paragraph` and the following text: +Debajo de su elemento `.heading`, cree un nuevo elemento `section` con `class` establecido en `text`. Dentro de eso, crea un elemento `p` con la `class` establecida en `first-paragraph` y el siguiente texto: ```markup Soon the freeCodeCamp curriculum will be 100% project-driven learning. Instead of a series of coding challenges, you'll learn through building projects - step by step. Before we get into the details, let me emphasize: we are not changing the certifications. All 6 certifications will still have the same 5 required projects. We are only changing the optional coding challenges. @@ -15,37 +15,37 @@ Soon the freeCodeCamp curriculum will be 100% project-driven learning. Instead o # --hints-- -You should create a new `section` element. +Debe crear un nuevo elemento `section`. ```js assert(document.querySelectorAll('section')?.length === 2); ``` -Your new `section` element should come after your `.heading` element. +Tu nuevo elemento `section` debe ir después de tu elemento `.heading`. ```js assert(document.querySelectorAll('section')?.[1]?.previousElementSibling?.className === 'heading'); ``` -Your new `section` element should have the `class` set to `text`. +Tu nuevo elemento `section` debe tener `class` establecido en `text`. ```js assert(document.querySelectorAll('section')?.[1]?.className === 'text'); ``` -You should create a new `p` element within your `.text` element. +Debe crear un nuevo elemento `p` dentro de su elemento `.text`. ```js assert(document.querySelector('.text')?.querySelectorAll('p')?.length === 1); ``` -Your new `p` element should have the `class` set to `first-paragraph`. +Su nuevo elemento `p` debe tener la `class` establecida en `first-paragraph`. ```js assert(document.querySelector('.text p')?.className === 'first-paragraph'); ``` -Your new `p` element should have the provided text. +Su nuevo elemento `p` debe tener el texto proporcionado. ```js assert(document.querySelector('.first-paragraph')?.innerText === 'Soon the freeCodeCamp curriculum will be 100% project-driven learning. Instead of a series of coding challenges, you\'ll learn through building projects - step by step. Before we get into the details, let me emphasize: we are not changing the certifications. All 6 certifications will still have the same 5 required projects. We are only changing the optional coding challenges.'); diff --git a/curriculum/challenges/espanol/14-responsive-web-design-22/learn-css-grid-by-building-a-magazine/61439dc084fa5f659cf75d7c.md b/curriculum/challenges/espanol/14-responsive-web-design-22/learn-css-grid-by-building-a-magazine/61439dc084fa5f659cf75d7c.md index 42c86f3e923..c45977a2e16 100644 --- a/curriculum/challenges/espanol/14-responsive-web-design-22/learn-css-grid-by-building-a-magazine/61439dc084fa5f659cf75d7c.md +++ b/curriculum/challenges/espanol/14-responsive-web-design-22/learn-css-grid-by-building-a-magazine/61439dc084fa5f659cf75d7c.md @@ -7,7 +7,7 @@ dashedName: step-12 # --description-- -Create another `p` element below your `.first-paragraph` element, and give it the following text: +Cree otro elemento `p` debajo de su elemento `.first-paragraph` y asígnele el siguiente texto: ```markup After years - years - of pondering these two problems and how to solve them, I slipped, hit my head on the sink, and when I came to I had a revelation! A vision! A picture in my head! A picture of this! This is what makes time travel possible: the flux capacitor! @@ -15,13 +15,13 @@ After years - years - of pondering these two problems and how to solve them, I s # --hints-- -You should create a second `p` element within your `.text` element. +Debe crear un segundo elemento `p` dentro de su elemento `.text`. ```js assert(document.querySelectorAll('.text p')?.length === 2) ``` -Your second `p` element should have the provided text. +Su segundo elemento `p` debe tener el texto proporcionado. ```js assert(document.querySelectorAll('.text p')?.[1]?.innerText === 'After years - years - of pondering these two problems and how to solve them, I slipped, hit my head on the sink, and when I came to I had a revelation! A vision! A picture in my head! A picture of this! This is what makes time travel possible: the flux capacitor!') diff --git a/curriculum/challenges/espanol/14-responsive-web-design-22/learn-css-grid-by-building-a-magazine/61439dfc811e12666b04be6f.md b/curriculum/challenges/espanol/14-responsive-web-design-22/learn-css-grid-by-building-a-magazine/61439dfc811e12666b04be6f.md index 606ca864a1e..e9851b150cc 100644 --- a/curriculum/challenges/espanol/14-responsive-web-design-22/learn-css-grid-by-building-a-magazine/61439dfc811e12666b04be6f.md +++ b/curriculum/challenges/espanol/14-responsive-web-design-22/learn-css-grid-by-building-a-magazine/61439dfc811e12666b04be6f.md @@ -7,7 +7,7 @@ dashedName: step-13 # --description-- -Add a third `p` element at the end of your `.text` element, and give it the following text: +Agregue un tercer elemento `p` al final de su elemento `.text` y asígnele el siguiente texto: ```markup It wasn't as dramatic as Doc's revelation in Back to the Future. It just occurred to me while I was going for a run. The revelation: the entire curriculum should be a series of projects. Instead of individual coding challenges, we'll just have projects, each with their own seamless series of tests. Each test gives you just enough information to figure out how to get it to pass. (And you can view hints if that isn't enough.) @@ -15,13 +15,13 @@ It wasn't as dramatic as Doc's revelation in Back to the Future. It just occurre # --hints-- -You should create a third `p` element in your `.text` element. +Debe crear un tercer elemento `p` en su elemento `.text`. ```js assert(document.querySelectorAll('.text p')?.length === 3); ``` -Your third `p` element should have the provided text. +Su tercer elemento `p` debe tener el texto proporcionado. ```js assert(document.querySelectorAll('.text p')?.[2]?.innerText === "It wasn't as dramatic as Doc's revelation in Back to the Future. It just occurred to me while I was going for a run. The revelation: the entire curriculum should be a series of projects. Instead of individual coding challenges, we'll just have projects, each with their own seamless series of tests. Each test gives you just enough information to figure out how to get it to pass. (And you can view hints if that isn't enough.)"); diff --git a/curriculum/challenges/espanol/14-responsive-web-design-22/learn-css-grid-by-building-a-magazine/61439e33e4fb7967609e0c83.md b/curriculum/challenges/espanol/14-responsive-web-design-22/learn-css-grid-by-building-a-magazine/61439e33e4fb7967609e0c83.md index 308137ff184..835daeaf71f 100644 --- a/curriculum/challenges/espanol/14-responsive-web-design-22/learn-css-grid-by-building-a-magazine/61439e33e4fb7967609e0c83.md +++ b/curriculum/challenges/espanol/14-responsive-web-design-22/learn-css-grid-by-building-a-magazine/61439e33e4fb7967609e0c83.md @@ -7,37 +7,37 @@ dashedName: step-14 # --description-- -After the three `p` elements within your `.text` element, create a `blockquote` element. Within that, add an `hr` element, a `p` element with the `class` set to `quote`, and a second `hr` element. +Después de los tres elementos `p` dentro de su elemento `.text`, cree un elemento `blockquote`. Dentro de eso, agregue un elemento `hr`, un elemento `p` con `class` establecido en `quote`, y un segundo elemento `hr`. -Give the `.quote` element the text `The entire curriculum should be a series of projects`. +Asigne al elemento `.quote` el texto `The entire curriculum should be a series of projects`. # --hints-- -You should create a new `blockquote` element within your `.text` element. +Debe crear un nuevo elemento `blockquote` dentro de su elemento `.text`. ```js assert.exists(document.querySelector('.text blockquote')); ``` -Your `blockquote` element should come after your three `p` elements. +Tu elemento `blockquote` debe ir después de tus tres elementos `p`. ```js assert(document.querySelector('.text')?.children?.[3]?.localName === 'blockquote'); ``` -Your `blockquote` element should have two `hr` elements. +Su elemento `blockquote` debe tener dos elementos `hr`. ```js assert(document.querySelectorAll('.text blockquote hr')?.length === 2); ``` -Your `blockquote` element should have a `p` element. +Su elemento `blockquote` debe tener un elemento `p`. ```js assert.exists(document.querySelector('.text blockquote p')); ``` -Your `blockquote` children should be in the correct order. +Tus hijos `blockquote` deben estar en el orden correcto. ```js const children = document.querySelector('.text blockquote')?.children; @@ -46,13 +46,13 @@ assert(children?.[1]?.localName === 'p'); assert(children?.[2]?.localName === 'hr'); ``` -Your new `p` element should have the `class` set to `quote`. +Su nuevo elemento `p` debe tener `class` establecido en `quote`. ```js assert(document.querySelector('.text blockquote p')?.className === 'quote'); ``` -Your new `p` element should have the text `The entire curriculum should be a series of projects`. +Su nuevo elemento `p` debe tener el texto `The entire curriculum should be a series of projects`. ```js assert(document.querySelector('.text blockquote p')?.innerText === 'The entire curriculum should be a series of projects'); diff --git a/curriculum/challenges/espanol/14-responsive-web-design-22/learn-css-grid-by-building-a-magazine/6143a1a228f7d068ab16a130.md b/curriculum/challenges/espanol/14-responsive-web-design-22/learn-css-grid-by-building-a-magazine/6143a1a228f7d068ab16a130.md index d91397a4e0a..14cf4140458 100644 --- a/curriculum/challenges/espanol/14-responsive-web-design-22/learn-css-grid-by-building-a-magazine/6143a1a228f7d068ab16a130.md +++ b/curriculum/challenges/espanol/14-responsive-web-design-22/learn-css-grid-by-building-a-magazine/6143a1a228f7d068ab16a130.md @@ -7,7 +7,7 @@ dashedName: step-15 # --description-- -Below your `blockquote` element, add another `p` element with the following text: +Debajo de su elemento `blockquote`, agregue otro elemento `p` con el siguiente texto: ```markup No more walls of explanatory text. No more walls of tests. Just one test at a time, as you build up a working project. Over the course of passing thousands of tests, you build up projects and your own understanding of coding fundamentals. There is no transition between lessons and projects, because the lessons themselves are baked into projects. And there's plenty of repetition to help you retain everything because - hey - building projects in real life has plenty of repetition. @@ -15,19 +15,19 @@ No more walls of explanatory text. No more walls of tests. Just one test at a ti # --hints-- -You should add a fourth `p` element to your `.text` element. +Debe agregar un cuarto elemento `p` a su elemento `.text`. ```js assert(document.querySelectorAll('.text p')?.length === 5); ``` -Your new `p` element should come after your `blockquote` element. +Tu nuevo elemento `p` debe ir después de tu elemento `blockquote`. ```js assert(document.querySelectorAll('.text p')?.[4]?.previousElementSibling?.localName === 'blockquote'); ``` -Your new `p` element should have the provided text. +Su nuevo elemento `p` debe tener el texto proporcionado. ```js assert(document.querySelectorAll('.text p')?.[4]?.innerText === 'No more walls of explanatory text. No more walls of tests. Just one test at a time, as you build up a working project. Over the course of passing thousands of tests, you build up projects and your own understanding of coding fundamentals. There is no transition between lessons and projects, because the lessons themselves are baked into projects. And there\'s plenty of repetition to help you retain everything because - hey - building projects in real life has plenty of repetition.'); diff --git a/curriculum/challenges/espanol/14-responsive-web-design-22/learn-css-grid-by-building-a-magazine/6143a73279ce6369de4b9bcc.md b/curriculum/challenges/espanol/14-responsive-web-design-22/learn-css-grid-by-building-a-magazine/6143a73279ce6369de4b9bcc.md index 664a6fbf372..175bf2ee8b2 100644 --- a/curriculum/challenges/espanol/14-responsive-web-design-22/learn-css-grid-by-building-a-magazine/6143a73279ce6369de4b9bcc.md +++ b/curriculum/challenges/espanol/14-responsive-web-design-22/learn-css-grid-by-building-a-magazine/6143a73279ce6369de4b9bcc.md @@ -7,7 +7,7 @@ dashedName: step-16 # --description-- -Create a fifth `p` element at the end of your `.text` element, and give it the following text: +Cree un quinto elemento `p` al final de su elemento `.text` y asígnele el siguiente texto: ```markup The main design challenge is taking what is currently paragraphs of explanation and instructions and packing them into a single test description text. Each project will involve dozens of tests like this. People will be coding the entire time, rather than switching back and forth from "reading mode" to "coding mode". @@ -15,13 +15,13 @@ The main design challenge is taking what is currently paragraphs of explanation # --hints-- -You should add a fifth `p` element. +Debe agregar un quinto elemento `p`. ```js assert(document.querySelectorAll('.text p')?.length === 6); ``` -Your new `p` element should have the provided text. +Su nuevo elemento `p` debe tener el texto proporcionado. ```js assert(document.querySelectorAll('.text p')?.[5]?.innerText === 'The main design challenge is taking what is currently paragraphs of explanation and instructions and packing them into a single test description text. Each project will involve dozens of tests like this. People will be coding the entire time, rather than switching back and forth from "reading mode" to "coding mode".'); diff --git a/curriculum/challenges/espanol/14-responsive-web-design-22/learn-css-grid-by-building-a-magazine/6143a778bffc206ac6b1dbe3.md b/curriculum/challenges/espanol/14-responsive-web-design-22/learn-css-grid-by-building-a-magazine/6143a778bffc206ac6b1dbe3.md index 543453a77e1..c9531b3efdb 100644 --- a/curriculum/challenges/espanol/14-responsive-web-design-22/learn-css-grid-by-building-a-magazine/6143a778bffc206ac6b1dbe3.md +++ b/curriculum/challenges/espanol/14-responsive-web-design-22/learn-css-grid-by-building-a-magazine/6143a778bffc206ac6b1dbe3.md @@ -7,7 +7,7 @@ dashedName: step-17 # --description-- -Create one final `p` element at the end of your `.text` element and give it the following text: +Cree un elemento final `p` al final de su elemento `.text` y asígnele el siguiente texto: ```markup Instead of a series of coding challenges, people will be in their code @@ -20,13 +20,13 @@ the beginning. And freeCodeCamp will be a much smoother experience. # --hints-- -You should add a sixth `p` element to the `.text` element. +Debe agregar un sexto elemento `p` al elemento `.text`. ```js assert(document.querySelectorAll('.text p')?.length === 7) ``` -Your sixth `p` element should have the provided text. +Su sexto elemento `p` debe tener el texto proporcionado. ```js assert(document.querySelectorAll('.text p')?.[6]?.innerText === 'Instead of a series of coding challenges, people will be in their code editor passing one test after another, quickly building up a project. People will get into a real flow state, similar to what they experience when they build the required projects at the end of each certification. They\'ll get that sense of forward progress right from the beginning. And freeCodeCamp will be a much smoother experience.') diff --git a/curriculum/challenges/espanol/14-responsive-web-design-22/learn-css-grid-by-building-a-magazine/6143a83fcc32c26bcfae3efa.md b/curriculum/challenges/espanol/14-responsive-web-design-22/learn-css-grid-by-building-a-magazine/6143a83fcc32c26bcfae3efa.md index c7e573ce4a6..f2818046095 100644 --- a/curriculum/challenges/espanol/14-responsive-web-design-22/learn-css-grid-by-building-a-magazine/6143a83fcc32c26bcfae3efa.md +++ b/curriculum/challenges/espanol/14-responsive-web-design-22/learn-css-grid-by-building-a-magazine/6143a83fcc32c26bcfae3efa.md @@ -7,53 +7,53 @@ dashedName: step-18 # --description-- -Below your `.text` element, create a new `section` element and give it a `class` of `text text-with-images`. Within that, create an `article` element with a `class` set to `brief-history`, and an `aside` element with the `class` set to `image-wrapper`. +Debajo de su elemento `.text`, cree un nuevo elemento `section` y asígnele una `class` de `text text-with-images`. Dentro de eso, cree un elemento `article` con una `class` establecida en `brief-history`, y un elemento `aside` con el `class` establecido en `image-wrapper`. # --hints-- -You should create a new `section` element. +Debe crear un nuevo elemento `section`. ```js assert(document.querySelectorAll('section')?.length === 3) ``` -Your new `section` element should come after your `.text` element. +Tu nuevo elemento `section` debe ir después de tu elemento `.text`. ```js assert(document.querySelectorAll('section')?.[2]?.previousElementSibling?.className === 'text') ``` -Your new `section` element should have the `class` set to `text text-with-images`. +Su nuevo elemento `section` debe tener la `class` establecida en `text text-with-images`. ```js assert(document.querySelectorAll('section')?.[2]?.className === 'text text-with-images') ``` -Your new `section` element should have an `article` element. +Su nuevo elemento `section` debe tener un elemento `article`. ```js assert.exists(document.querySelector('.text-with-images article')); ``` -Your new `section` element should have an `aside` element. +Su nuevo elemento `section` debe tener un elemento `aside`. ```js assert.exists(document.querySelector('.text-with-images aside')); ``` -The `article` element should come before the `aside` element. +El elemento `article` debe ir antes del elemento `aside`. ```js assert(document.querySelector('.text-with-images article')?.nextElementSibling?.localName === 'aside'); ``` -Your `article` element should have the `class` set to `brief-history`. +Tu elemento `article` debe tener `class` establecido en `brief-history`. ```js assert(document.querySelector('.text-with-images article')?.className === 'brief-history'); ``` -Your `aside` element should have the `class` set to `image-wrapper`. +Su elemento `aside` debe tener la `class` establecida en `image-wrapper`. ```js assert(document.querySelector('.text-with-images aside')?.className === 'image-wrapper'); diff --git a/curriculum/challenges/espanol/14-responsive-web-design-22/learn-css-grid-by-building-a-magazine/6143b97c06c3306d23d5da47.md b/curriculum/challenges/espanol/14-responsive-web-design-22/learn-css-grid-by-building-a-magazine/6143b97c06c3306d23d5da47.md index da73a26949a..b939f527b28 100644 --- a/curriculum/challenges/espanol/14-responsive-web-design-22/learn-css-grid-by-building-a-magazine/6143b97c06c3306d23d5da47.md +++ b/curriculum/challenges/espanol/14-responsive-web-design-22/learn-css-grid-by-building-a-magazine/6143b97c06c3306d23d5da47.md @@ -7,29 +7,29 @@ dashedName: step-19 # --description-- -Within your `article` element, create an `h3` element with the `class` set to `list-title` and the text of `A Brief History`. Below that, create a `p` element with the text `Of the Curriculum`. Then create a `ul` element with the class `lists`. +Dentro de su elemento `article`, cree un elemento `h3` con `class` establecido en `list-title` y el texto de `A Brief History`. Debajo de eso, crea un elemento `p` con el texto `Of the Curriculum`. Luego crea un elemento `ul` con la clase `lists`. # --hints-- -You should create an `h3` element within your `article` element. +Debe crear un elemento `h3` dentro de su elemento `article`. ```js assert.exists(document.querySelector('article h3')); ``` -You should create a `p` element within your `article` element. +Debe crear un elemento `p` dentro de su elemento `article`. ```js assert.exists(document.querySelector('article p')); ``` -You should create a `ul` element within your `article` element. +Debe crear un elemento `ul` dentro de su elemento `article`. ```js assert.exists(document.querySelector('article ul')); ``` -Your elements within the `article` element should be in the correct order. +Sus elementos dentro del elemento `article` deben estar en el orden correcto. ```js const children = document.querySelector('article')?.children; @@ -38,25 +38,25 @@ assert(children?.[1]?.localName === 'p'); assert(children?.[2]?.localName === 'ul'); ``` -Your new `h3` element should have the `class` set to `list-title`. +Su nuevo elemento `h3` debe tener `class` establecido en `list-title`. ```js assert(document.querySelector('article h3')?.className === 'list-title'); ``` -Your new `h3` element should have the text of `A Brief History`. +Su nuevo elemento `h3` debe tener el texto de `A Brief History`. ```js assert(document.querySelector('article h3')?.innerText === 'A Brief History'); ``` -Your new `p` element should have the text of `Of the Curriculum`. +Su nuevo elemento `p` debe tener el texto de `Of the Curriculum`. ```js assert(document.querySelector('article p')?.innerText === 'Of the Curriculum'); ``` -Your new `ul` element should have the `class` set to `lists`. +Su nuevo `ul`, el elemento debe tener el `class` a `lists`. ```js assert(document.querySelector('article ul')?.className === 'lists'); diff --git a/curriculum/challenges/espanol/14-responsive-web-design-22/learn-css-grid-by-building-a-magazine/6143b9e1f5035c6e5f2a8231.md b/curriculum/challenges/espanol/14-responsive-web-design-22/learn-css-grid-by-building-a-magazine/6143b9e1f5035c6e5f2a8231.md index 54f629eabae..e224c7a2d4a 100644 --- a/curriculum/challenges/espanol/14-responsive-web-design-22/learn-css-grid-by-building-a-magazine/6143b9e1f5035c6e5f2a8231.md +++ b/curriculum/challenges/espanol/14-responsive-web-design-22/learn-css-grid-by-building-a-magazine/6143b9e1f5035c6e5f2a8231.md @@ -7,9 +7,9 @@ dashedName: step-20 # --description-- -Within your `ul` element, create six `li` elements. Add an `h4` element with a `class` set to `list-subtitle` and a `p` element to each of your `li` elements. +Dentro de su elemento `ul`, cree seis elementos `li`. Agrega un elemento `h4` con una `class` establecida en `list-subtitle` y un elemento `p` a cada uno de tus elementos `li`. -Then give the `h4` and `p` elements the following text content, in order, with each `h4` using what's on the left side of the colon, and each `p` using what's on the right: +Luego asigne a los elementos `h4` y `p` el siguiente contenido de texto, en orden, con cada `h4` usando lo que está en el lado izquierdo de los dos puntos, y cada `p` usando lo que está a la derecha: - `V1 - 2014`: `We launched freeCodeCamp with a simple list of 15 resources, including Harvard's CS50 and Stanford's Database Class.` - `V2 - 2015`: `We added interactive algorithm challenges.` @@ -20,92 +20,92 @@ Then give the `h4` and `p` elements the following text content, in order, with e # --hints-- -Your `ul` element should have six `li` elements. +Su elemento `ul` debe tener seis elementos `li`. ```js assert(document.querySelectorAll('.lists li')?.length === 6); ``` -Each of your new `li` elements should have an `h4` and `p` element. +Cada uno de sus nuevos elementos `li` debe tener un elemento `h4` y `p`. ```js const lis = [...document.querySelectorAll('.lists li')]; assert(lis?.every(li => li?.children?.[0]?.localName === 'h4' && li?.children?.[1]?.localName === 'p')); ``` -Your first `h4` should have the text `V1 - 2014`. +Su primer `h4` debe tener el texto `V1 - 2014`. ```js assert(document.querySelectorAll('.lists li h4')?.[0]?.innerText === 'V1 - 2014'); ``` -Your first `p` should have the text `We launched freeCodeCamp with a simple list of 15 resources, including Harvard's CS50 and Stanford's Database Class.` +Tu primera `p` debe tener el texto `We launched freeCodeCamp with a simple list of 15 resources, including Harvard's CS50 and Stanford's Database Class.` ```js assert(document.querySelectorAll('.lists li p')?.[0]?.innerText === 'We launched freeCodeCamp with a simple list of 15 resources, including Harvard\'s CS50 and Stanford\'s Database Class.'); ``` -Your second `h4` should have the text `V2 - 2015`. +Su segundo `h4` debe tener el texto `V2 - 2015`. ```js assert(document.querySelectorAll('.lists li h4')?.[1]?.innerText === 'V2 - 2015'); ``` -Your second `p` should have the text `We added interactive algorithm challenges.` +Su segundo `p` debe tener el texto `We added interactive algorithm challenges.` ```js assert(document.querySelectorAll('.lists li p')?.[1]?.innerText === 'We added interactive algorithm challenges.'); ``` -Your third `h4` should have the text `V3 - 2015`. +Su tercer `h4` debe tener el texto `V3 - 2015`. ```js assert(document.querySelectorAll('.lists li h4')?.[2]?.innerText === 'V3 - 2015'); ``` -Your third `p` should have the text `We added our own HTML+CSS challenges (before we'd been relying on General Assembly's Dash course for these).` +Su tercera `p` debe tener el texto `We added our own HTML+CSS challenges (before we'd been relying on General Assembly's Dash course for these).` ```js assert(document.querySelectorAll('.lists li p')?.[2]?.innerText === 'We added our own HTML+CSS challenges (before we\'d been relying on General Assembly\'s Dash course for these).'); ``` -Your fourth `h4` should have the text `V4 - 2016`. +Su cuarto `h4` debe tener el texto `V4 - 2016`. ```js assert(document.querySelectorAll('.lists li h4')?.[3]?.innerText === 'V4 - 2016'); ``` -Your fourth `p` should have the text `We expanded the curriculum to 3 certifications, including Front End, Back End, and Data Visualization. They each had 10 required projects, but only the Front End section had its own challenges. For the other certs, we were still using external resources like Node School`. +Su cuarta `p` debe tener el texto `We expanded the curriculum to 3 certifications, including Front End, Back End, and Data Visualization. They each had 10 required projects, but only the Front End section had its own challenges. For the other certs, we were still using external resources like Node School`. ```js assert(document.querySelectorAll('.lists li p')?.[3]?.innerText === 'We expanded the curriculum to 3 certifications, including Front End, Back End, and Data Visualization. They each had 10 required projects, but only the Front End section had its own challenges. For the other certs, we were still using external resources like Node School.'); ``` -Your fifth `h4` should have the text `V5 - 2017`. +Tu quinto `h4` debe tener el texto `V5 - 2017`. ```js assert(document.querySelectorAll('.lists li h4')?.[4]?.innerText === 'V5 - 2017'); ``` -Your fifth `p` should have the text `We added the back end and data visualization challenges.` +`Su quinto p` debe tener el texto `We added the back end and data visualization challenges.` ```js assert(document.querySelectorAll('.lists li p')?.[4]?.innerText === 'We added the back end and data visualization challenges.'); ``` -Your sixth `h4` should have the text `V6 - 2018`. +Tu sexto `h4` debe tener el texto `V6 - 2018`. ```js assert(document.querySelectorAll('.lists li h4')?.[5]?.innerText === 'V6 - 2018'); ``` -Your sixth `p` should have the text `We launched 6 new certifications to replace our old ones. This was the biggest curriculum improvement to date.` +Su sexto `p` debe tener el texto `We launched 6 new certifications to replace our old ones. This was the biggest curriculum improvement to date.` ```js assert(document.querySelectorAll('.lists li p')?.[5]?.innerText === 'We launched 6 new certifications to replace our old ones. This was the biggest curriculum improvement to date.'); ``` -Your six `h4` elements should each have the class `list-subtitle`. +Tus seis elementos `h4` deben tener cada uno la clase `list-subtitle`. ```js const h4s = [...document.querySelectorAll('.lists li h4')]; diff --git a/curriculum/challenges/espanol/14-responsive-web-design-22/learn-css-grid-by-building-a-magazine/6143bb50e8e48c6f5ef9d8d5.md b/curriculum/challenges/espanol/14-responsive-web-design-22/learn-css-grid-by-building-a-magazine/6143bb50e8e48c6f5ef9d8d5.md index 1d4bbf2869d..c0d2796c189 100644 --- a/curriculum/challenges/espanol/14-responsive-web-design-22/learn-css-grid-by-building-a-magazine/6143bb50e8e48c6f5ef9d8d5.md +++ b/curriculum/challenges/espanol/14-responsive-web-design-22/learn-css-grid-by-building-a-magazine/6143bb50e8e48c6f5ef9d8d5.md @@ -7,29 +7,29 @@ dashedName: step-21 # --description-- -Within your `aside` element, create two `img` elements, a `blockquote` element, and a third `img` element. Give the `blockquote` element a `class` set to `image-quote`. +Dentro de su elemento `aside`, crear dos elementos `img` un elemento `blockquote`, y un tercer elemento `img`. Asigne al elemento `blockquote` una `class` establecida en `image-quote`. # --hints-- -You should create three `img` elements within your `aside` element. +Debe crear tres elementos `img` dentro de su elemento `aside`. ```js assert(document.querySelectorAll('aside img')?.length === 3); ``` -You should create a `blockquote` element within your `aside` element. +Debe crear un elemento `blockquote` dentro de su elemento `aside`. ```js assert.exists(document.querySelector('aside blockquote')); ``` -Your `blockquote` element should have a `class` set to `image-quote`. +Su elemento `blockquote` debe tener una `class` establecida en `image-quote`. ```js assert(document.querySelector('aside blockquote')?.classList?.contains('image-quote')); ``` -Your new elements should be in the correct order. +Sus nuevos elementos deben estar en el orden correcto. ```js const children = document.querySelector('aside')?.children; diff --git a/curriculum/challenges/espanol/14-responsive-web-design-22/learn-css-grid-by-building-a-magazine/6143c2a363865c715f1a3f72.md b/curriculum/challenges/espanol/14-responsive-web-design-22/learn-css-grid-by-building-a-magazine/6143c2a363865c715f1a3f72.md index e115d09066c..06f2354ec23 100644 --- a/curriculum/challenges/espanol/14-responsive-web-design-22/learn-css-grid-by-building-a-magazine/6143c2a363865c715f1a3f72.md +++ b/curriculum/challenges/espanol/14-responsive-web-design-22/learn-css-grid-by-building-a-magazine/6143c2a363865c715f1a3f72.md @@ -7,41 +7,41 @@ dashedName: step-22 # --description-- -Within the `.image-wrapper` element, give your first `img` element a `src` of `https://cdn.freecodecamp.org/testable-projects-fcc/images/random-quote-machine.png`, an `alt` of `image of the quote machine project`, a `class` of `image-1`, a `loading` attribute set to `lazy`, a `width` attribute of `600`, and a `height` attribute of `400`. +Dentro del elemento`.image-wrapper`, asigne a su primer elemento `img` un `src` de `https://cdn.freecodecamp.org/testable-projects-fcc/images/random-quote-machine.png`, una `alt` de `image of the quote machine project`, una `class` de `image-1`, un atributo `loading` establecido en `lazy`, un atributo `width` de `600` y un atributo `height` de `400`. # --hints-- -Your first `img` element should have a `src` attribute set to `https://cdn.freecodecamp.org/testable-projects-fcc/images/random-quote-machine.png`. +Su primer elemento `img` debe tener un atributo `src` establecido en `https://cdn.freecodecamp.org/testable-projects-fcc/images/random-quote-machine.png`. ```js assert(document.querySelectorAll('.image-wrapper img')?.[0]?.getAttribute('src') === 'https://cdn.freecodecamp.org/testable-projects-fcc/images/random-quote-machine.png'); ``` -Your first `img` element should have an `alt` attribute set to `image of the quote machine project`. +Su primer elemento `img` debe tener un atributo `alt` establecido en `image of the quote machine project`. ```js assert(document.querySelectorAll('.image-wrapper img')?.[0]?.getAttribute('alt') === 'image of the quote machine project'); ``` -Your first `img` element should have a `class` attribute set to `image-1`. +Su primer elemento `img` debe tener un atributo `class` establecido en `image-1`. ```js assert(document.querySelectorAll('.image-wrapper img')?.[0]?.classList?.contains('image-1')); ``` -Your first `img` element should have a `loading` attribute set to `lazy`. +Su primer elemento `img` debe tener un atributo `loading` establecido en `lazy`. ```js assert(document.querySelectorAll('.image-wrapper img')?.[0]?.getAttribute('loading') === 'lazy'); ``` -Your first `img` element should have a `width` attribute set to `600`. +Su primer elemento `img` debe tener un atributo `width` establecido en `600`. ```js assert(document.querySelectorAll('.image-wrapper img')?.[0]?.getAttribute('width') === '600'); ``` -Your first `img` element should have a `height` attribute set to `400`. +Su primer elemento `img` debe tener un atributo `height` establecido en `400`. ```js assert(document.querySelectorAll('.image-wrapper img')?.[0]?.getAttribute('height') === '400'); diff --git a/curriculum/challenges/espanol/14-responsive-web-design-22/learn-css-grid-by-building-a-magazine/6143cd08fe927072ca3a371d.md b/curriculum/challenges/espanol/14-responsive-web-design-22/learn-css-grid-by-building-a-magazine/6143cd08fe927072ca3a371d.md index 6510a851204..38a809e496d 100644 --- a/curriculum/challenges/espanol/14-responsive-web-design-22/learn-css-grid-by-building-a-magazine/6143cd08fe927072ca3a371d.md +++ b/curriculum/challenges/espanol/14-responsive-web-design-22/learn-css-grid-by-building-a-magazine/6143cd08fe927072ca3a371d.md @@ -7,41 +7,41 @@ dashedName: step-23 # --description-- -Within your `.image-wrapper` element, give the second `img` element a `src` of `https://cdn.freecodecamp.org/testable-projects-fcc/images/calc.png`, an `alt` of `image of a calculator project`, a `loading` attribute set to `lazy`, a `class` set to `image-2`, a `width` attribute set to `400`, and a `height` attribute set to `400`. +Dentro de su elemento `.image-wrapper`, asigne al segundo elemento `img` un `src` de`https://cdn.freecodecamp.org/testable-projects-fcc/images/calc.png`, un `alt` de `image of a calculator project`, un conjunto de atributos `loading` a `lazy`, una `class` establecida en `image-2`, un atributo `width` establecido en `400`, y un atributo `height` establecido en `400`. # --hints-- -Your second `img` element should have a `src` set to `https://cdn.freecodecamp.org/testable-projects-fcc/images/calc.png`. +Su segundo elemento `img` debe tener un `src` establecido en `https://cdn.freecodecamp.org/testable-projects-fcc/images/calc.png`. ```js assert(document.querySelectorAll('.image-wrapper img')?.[1]?.getAttribute('src') === 'https://cdn.freecodecamp.org/testable-projects-fcc/images/calc.png'); ``` -Your second `img` element should have an `alt` set to `image of a calculator project`. +Su segundo elemento `img` debe tener un `alt` establecido en `image of a calculator project`. ```js assert(document.querySelectorAll('.image-wrapper img')?.[1]?.getAttribute('alt') === 'image of a calculator project'); ``` -Your second `img` element should have a `loading` attribute set to `lazy`. +Su segundo elemento `img` debe tener un atributo `loading` establecido en `lazy`. ```js assert(document.querySelectorAll('.image-wrapper img')?.[1]?.getAttribute('loading') === 'lazy'); ``` -Your second `img` element should have a `class` set to `image-2`. +Tu segundo elemento `img` debe tener una `class` establecida en `image-2`. ```js assert(document.querySelectorAll('.image-wrapper img')?.[1]?.classList?.contains('image-2')); ``` -Your second `img` element should have a `width` set to `400`. +Su segundo elemento `img` debe tener un `width` establecido en `400`. ```js assert(document.querySelectorAll('.image-wrapper img')?.[1]?.getAttribute('width') === '400'); ``` -Your second `img` element should have a `height` set to `400`. +Su segundo elemento `img` debe tener una `height` establecida en `400`. ```js assert(document.querySelectorAll('.image-wrapper img')?.[1]?.getAttribute('height') === '400'); diff --git a/curriculum/challenges/espanol/14-responsive-web-design-22/learn-css-grid-by-building-a-magazine/6143cdf48b634a747de42104.md b/curriculum/challenges/espanol/14-responsive-web-design-22/learn-css-grid-by-building-a-magazine/6143cdf48b634a747de42104.md index da6ab95e441..aabc76ca95c 100644 --- a/curriculum/challenges/espanol/14-responsive-web-design-22/learn-css-grid-by-building-a-magazine/6143cdf48b634a747de42104.md +++ b/curriculum/challenges/espanol/14-responsive-web-design-22/learn-css-grid-by-building-a-magazine/6143cdf48b634a747de42104.md @@ -7,41 +7,41 @@ dashedName: step-24 # --description-- -Within your `.image-wrapper` element, give your third `img` element a `src` of `https://cdn.freecodecamp.org/testable-projects-fcc/images/survey-form-background.jpeg`, an `alt` of `four people working on code`, a `loading` attribute of `lazy`, a `class` set to `image-3`, a `width` attribute set to `600`, and a `height` attribute set to `400`. +Dentro de su elemento `.image-wrapper`, asigne a su tercer elemento `img` un `src` de `https://cdn.freecodecamp.org/testable-projects-fcc/images/survey-form-background.jpeg`, un `alt` de `four people working on code`, a `loading` attribute of , un `loading` atributo de `lazy`, una `class` establecida en `image-3`, un atributo `width` establecido en `600` y un atributo `height` establecido en `400`. # --hints-- -Your third `img` element should have a `src` set to `https://cdn.freecodecamp.org/testable-projects-fcc/images/survey-form-background.jpeg`. +Su tercer elemento `img` debe tener un `src` establecido en `https://cdn.freecodecamp.org/testable-projects-fcc/images/survey-form-background.jpeg`. ```js assert(document.querySelectorAll('.image-wrapper img')?.[2]?.getAttribute('src') === 'https://cdn.freecodecamp.org/testable-projects-fcc/images/survey-form-background.jpeg'); ``` -Your third `img` element should have an `alt` set to `four people working on code`. +Tu tercer elemento `img` debe tener un `alt` establecido en `four people working on code`, a `loading` attribute of. ```js assert(document.querySelectorAll('.image-wrapper img')?.[2]?.getAttribute('alt') === 'four people working on code'); ``` -Your third `img` element should have a `loading` attribute set to `lazy`. +Su tercer elemento `img` debe tener un atributo `loading` establecido en `lazy`. ```js assert(document.querySelectorAll('.image-wrapper img')?.[2]?.getAttribute('loading') === 'lazy'); ``` -Your third `img` element should have a `class` set to `image-3`. +Su tercer elemento `img` debe tener una `class` configurada en `image-3`. ```js assert(document.querySelectorAll('.image-wrapper img')?.[2]?.classList?.contains('image-3')); ``` -Your third `img` element should have a `width` attribute set to `600`. +Su tercer elemento `img` debe tener un atributo `width` establecido en `600`. ```js assert(document.querySelectorAll('.image-wrapper img')?.[2]?.getAttribute('width') === '600'); ``` -Your third `img` element should have a `height` attribute set to `400`. +Su tercer elemento `img` debe tener un atributo `height` establecido en `400`. ```js assert(document.querySelectorAll('.image-wrapper img')?.[2]?.getAttribute('height') === '400'); diff --git a/curriculum/challenges/espanol/14-responsive-web-design-22/learn-css-grid-by-building-a-magazine/6143d003ad9e9d76766293ec.md b/curriculum/challenges/espanol/14-responsive-web-design-22/learn-css-grid-by-building-a-magazine/6143d003ad9e9d76766293ec.md index a217f12328a..df4763b87df 100644 --- a/curriculum/challenges/espanol/14-responsive-web-design-22/learn-css-grid-by-building-a-magazine/6143d003ad9e9d76766293ec.md +++ b/curriculum/challenges/espanol/14-responsive-web-design-22/learn-css-grid-by-building-a-magazine/6143d003ad9e9d76766293ec.md @@ -7,23 +7,23 @@ dashedName: step-25 # --description-- -Within your `.image-quote` element, nest an `hr` element, a `p` element and a second `hr` element. Give the `p` element a `class` set to `quote` and the text `The millions of people who are learning to code through freeCodeCamp will have an even better resource to help them learn these fundamentals.`. +Dentro de su elemento `.image-quote`, anide un elemento `hr`, un elemento `p` y un segundo elemento `hr`. Asigne al elemento `p` una `class` establecida en `quote` y el texto `The millions of people who are learning to code through freeCodeCamp will have an even better resource to help them learn these fundamentals.`. # --hints-- -You should add two `hr` elements to your `.image-quote` element. +Debe agregar dos elementos `hr` a su elemento `.image-quote`. ```js assert(document.querySelectorAll('.image-quote hr')?.length === 2); ``` -You should add a `p` element to your `.image-quote` element. +Debe agregar un elemento `p` a su elemento `.image-quote`. ```js assert(document.querySelectorAll('.image-quote p')?.length === 1); ``` -Your `.image-quote` children should be in the correct order. +Tus hijos `.image-quote` deben estar en el orden correcto. ```js const children = document.querySelector('.image-quote')?.children; @@ -32,13 +32,13 @@ assert(children?.[1]?.localName === 'p'); assert(children?.[2]?.localName === 'hr'); ``` -Your new `p` element should have a `class` set to `quote`. +Su nuevo elemento `p` debe tener una `class` establecida en `quote`. ```js assert(document.querySelector('.image-quote p')?.classList.contains('quote')); ``` -Your new `p` element should have the text `The millions of people who are learning to code through freeCodeCamp will have an even better resource to help them learn these fundamentals.`. +Su nuevo elemento `p` debe tener el texto `The millions of people who are learning to code through freeCodeCamp will have an even better resource to help them learn these fundamentals.`. ```js assert(document.querySelector('.image-quote p')?.innerText === 'The millions of people who are learning to code through freeCodeCamp will have an even better resource to help them learn these fundamentals.'); diff --git a/curriculum/challenges/espanol/14-responsive-web-design-22/learn-css-grid-by-building-a-magazine/6143d2842b497779bad947de.md b/curriculum/challenges/espanol/14-responsive-web-design-22/learn-css-grid-by-building-a-magazine/6143d2842b497779bad947de.md index 6e359da3d12..d4d7d1ef53a 100644 --- a/curriculum/challenges/espanol/14-responsive-web-design-22/learn-css-grid-by-building-a-magazine/6143d2842b497779bad947de.md +++ b/curriculum/challenges/espanol/14-responsive-web-design-22/learn-css-grid-by-building-a-magazine/6143d2842b497779bad947de.md @@ -7,23 +7,23 @@ dashedName: step-26 # --description-- -To start your CSS, normalize the CSS rules by targeting all elements with `*`, including the `::before` and `::after` pseudo-selectors. Set the `padding` property and `margin` property both to `0`. +Para iniciar su CSS, normalice las reglas de CSS apuntando a todos los elementos con `*`, incluidos los pseudo-selectores `::before` y `::after`. Establezca la propiedad `padding` y la propiedad `margin` en `0`. # --hints-- -You should have a `*, ::before, ::after` selector. +Debe tener un selector `*, ::before, ::after`. ```js assert(new __helpers.CSSHelp(document).getStyle('*, ::before, ::after')); ``` -Your `*, ::before, ::after` selector should have a `padding` property set to `0`. +Su selector `*, ::before, ::after` debe tener una propiedad `padding` establecida en `0`. ```js assert(new __helpers.CSSHelp(document).getStyle('*, ::before, ::after')?.padding === '0px'); ``` -Your `*, ::before, ::after` selector should have a `margin` property set to `0`. +Su selector `*, ::before, ::after` debe tener una propiedad `margin` establecida en `0`. ```js assert(new __helpers.CSSHelp(document).getStyle('*, ::before, ::after')?.margin === '0px'); diff --git a/curriculum/challenges/espanol/14-responsive-web-design-22/learn-css-grid-by-building-a-magazine/6144d66a5358db0c80628757.md b/curriculum/challenges/espanol/14-responsive-web-design-22/learn-css-grid-by-building-a-magazine/6144d66a5358db0c80628757.md index 4c7ef92b729..05d77463dea 100644 --- a/curriculum/challenges/espanol/14-responsive-web-design-22/learn-css-grid-by-building-a-magazine/6144d66a5358db0c80628757.md +++ b/curriculum/challenges/espanol/14-responsive-web-design-22/learn-css-grid-by-building-a-magazine/6144d66a5358db0c80628757.md @@ -7,27 +7,27 @@ dashedName: step-27 # --description-- -Create an `html` selector and give it a `font-size` property set to `62.5%`. This will set the default font size for your web page to 10px (the browser default is 16px). +Cree un selector `html` y asígnele una propiedad `font-size` establecida en `62.5%`. Esto establecerá el tamaño de fuente predeterminado para su página web en 10 px (el valor predeterminado del navegador es 16 px). -This will make it easier for you to work with `rem` units later, as `2rem` would be 20px. +Esto te facilitará trabajar con unidades `rem` más adelante, ya que `2rem` serían 20 píxeles. -Also, set the `box-sizing` property to `border-box`. +Además, establezca la propiedad `box-sizing` en `border-box`. # --hints-- -You should create an `html` selector. +Debe crear un selector `html`. ```js assert(new __helpers.CSSHelp(document).getStyle('html')); ``` -Your `html` selector should have a `font-size` property set to `62.5%`. +Su selector `html` debe tener una propiedad `font-size` establecida en `62.5%`. ```js assert(new __helpers.CSSHelp(document).getStyle('html')?.fontSize === '62.5%'); ``` -Your `html` selector should have a `box-sizing` property set to `border-box`. +Su selector `html` debe tener una propiedad `box-sizing` establecida en `border-box`. ```js assert(new __helpers.CSSHelp(document).getStyle('html')?.boxSizing === 'border-box'); diff --git a/curriculum/challenges/espanol/14-responsive-web-design-22/learn-css-grid-by-building-a-magazine/6144d7dbdd3e580da730ff45.md b/curriculum/challenges/espanol/14-responsive-web-design-22/learn-css-grid-by-building-a-magazine/6144d7dbdd3e580da730ff45.md index 6c016025556..025fb015f28 100644 --- a/curriculum/challenges/espanol/14-responsive-web-design-22/learn-css-grid-by-building-a-magazine/6144d7dbdd3e580da730ff45.md +++ b/curriculum/challenges/espanol/14-responsive-web-design-22/learn-css-grid-by-building-a-magazine/6144d7dbdd3e580da730ff45.md @@ -7,30 +7,30 @@ dashedName: step-28 # --description-- -Create a `body` selector. Set the `font-family` property to `Baskervville`, with a fallback of `serif`. Set the `color` property to `linen` and the `background-color` property to `rgb(20, 30, 40)`. +Cree un selector `body`. Establezca la propiedad `font-family` en `Baskervville`, con una alternativa de `serif`. Establezca la propiedad `color` en `linen` y la propiedad `background-color` en `rgb(20, 30, 40)`. # --hints-- -You should have a `body` selector. +Deberías tener un selector `body`. ```js assert(new __helpers.CSSHelp(document).getStyle('body')); ``` -Your `body` selector should have a `font-family` property set to `Baskervville`, with a fallback of `serif`. +Tu selector `body` debe tener una propiedad `font-family` establecida en `Baskervville`, con un respaldo de `serif`. ```js const fontFamily = new __helpers.CSSHelp(document).getStyle('body')?.fontFamily; assert(fontFamily === 'Baskervville, serif' || fontFamily === `"Baskervville", serif`); ``` -Your `body` selector should have a `color` property set to `linen`. +Tu selector `body` debe tener una propiedad `color` establecida en `linen`. ```js assert(new __helpers.CSSHelp(document).getStyle('body')?.color === 'linen'); ``` -Your `body` selector should have a `background-color` property set to `rgb(20, 30, 40)`. +Tu selector `body` debe tener una propiedad `background-color` establecida en `rgb(20, 30, 40)`. ```js assert(new __helpers.CSSHelp(document).getStyle('body')?.backgroundColor === 'rgb(20, 30, 40)'); diff --git a/curriculum/challenges/espanol/14-responsive-web-design-22/learn-css-grid-by-building-a-magazine/6144de308591ec10e27d5383.md b/curriculum/challenges/espanol/14-responsive-web-design-22/learn-css-grid-by-building-a-magazine/6144de308591ec10e27d5383.md index 2c760541d01..7bd90ad703e 100644 --- a/curriculum/challenges/espanol/14-responsive-web-design-22/learn-css-grid-by-building-a-magazine/6144de308591ec10e27d5383.md +++ b/curriculum/challenges/espanol/14-responsive-web-design-22/learn-css-grid-by-building-a-magazine/6144de308591ec10e27d5383.md @@ -7,17 +7,17 @@ dashedName: step-29 # --description-- -Create an `h1` selector, and set the `font-family` property to `Anton` with the fallback of `sans-serif`. +Cree un selector `h1` y establezca la propiedad `font-family` en `Anton` con el respaldo de `sans-serif`. # --hints-- -You should have an `h1` selector. +Debe tener un selector `h1`. ```js assert(new __helpers.CSSHelp(document).getStyle('h1')); ``` -Your `h1` selector should have a `font-family` property set to `Anton` with the fallback of `sans-serif`. +Su selector `h1` debe tener una propiedad `font-family` establecida en `Anton` con el respaldo de `sans-serif`. ```js const fontFamily = new __helpers.CSSHelp(document).getStyle('h1')?.fontFamily; diff --git a/curriculum/challenges/espanol/14-responsive-web-design-22/learn-css-grid-by-building-a-magazine/6144e1ba93e435127a7f516d.md b/curriculum/challenges/espanol/14-responsive-web-design-22/learn-css-grid-by-building-a-magazine/6144e1ba93e435127a7f516d.md index 675815db972..bc7e0f77924 100644 --- a/curriculum/challenges/espanol/14-responsive-web-design-22/learn-css-grid-by-building-a-magazine/6144e1ba93e435127a7f516d.md +++ b/curriculum/challenges/espanol/14-responsive-web-design-22/learn-css-grid-by-building-a-magazine/6144e1ba93e435127a7f516d.md @@ -7,17 +7,17 @@ dashedName: step-30 # --description-- -Create an `h2, h3, h4, h5, h6` selector. Give it a `font-family` property set to `Raleway` with a fallback of `sans-serif`. +Cree un selector `h2, h3, h4, h5, h6`. Dale una propiedad `font-family` establecida en `Raleway` con un respaldo de `sans-serif`. # --hints-- -You should have an `h2, h3, h4, h5, h6` selector. +Debe tener un selector `h2, h3, h4, h5, h6`. ```js assert(new __helpers.CSSHelp(document).getStyle('h2, h3, h4, h5, h6')); ``` -Your `h2, h3, h4, h5, h6` selector should have a `font-family` property set to `Raleway` with a fallback of `sans-serif`. +Su selector `h2, h3, h4, h5, h6` debe tener una propiedad `font-family` establecida en `Raleway` con un respaldo de `sans-serif`. ```js const fontFamily = new __helpers.CSSHelp(document).getStyle('h2, h3, h4, h5, h6')?.fontFamily; diff --git a/curriculum/challenges/espanol/14-responsive-web-design-22/learn-css-grid-by-building-a-magazine/6144ee46a9d6e614c598cc05.md b/curriculum/challenges/espanol/14-responsive-web-design-22/learn-css-grid-by-building-a-magazine/6144ee46a9d6e614c598cc05.md index cadc63b729f..529b93386de 100644 --- a/curriculum/challenges/espanol/14-responsive-web-design-22/learn-css-grid-by-building-a-magazine/6144ee46a9d6e614c598cc05.md +++ b/curriculum/challenges/espanol/14-responsive-web-design-22/learn-css-grid-by-building-a-magazine/6144ee46a9d6e614c598cc05.md @@ -7,23 +7,23 @@ dashedName: step-31 # --description-- -Create an `a` selector, and give it a `text-decoration` property set to `none` and a `color` property set to `linen`. +Cree un selector `a` y asígnele una propiedad `text-decoration` establecida en `none` y una propiedad `color` establecida en `linen`. # --hints-- -You should have an `a` selector. +Deberías tener un selector `a`. ```js assert(new __helpers.CSSHelp(document).getStyle('a')); ``` -Your `a` selector should have a `text-decoration` property set to `none`. +Su selector `a` debe tener una propiedad `text-decoration` establecida en `none`. ```js assert(new __helpers.CSSHelp(document).getStyle('a')?.textDecoration === 'none'); ``` -Your `a` selector should have a `color` property set to `linen`. +Su selector `a` debe tener una propiedad `color` establecida en `linen`. ```js assert(new __helpers.CSSHelp(document).getStyle('a')?.color === 'linen'); diff --git a/curriculum/challenges/espanol/14-responsive-web-design-22/learn-css-grid-by-building-a-magazine/6144ee790af79815ad15a832.md b/curriculum/challenges/espanol/14-responsive-web-design-22/learn-css-grid-by-building-a-magazine/6144ee790af79815ad15a832.md index 66d6a04ada1..acee3e21f4e 100644 --- a/curriculum/challenges/espanol/14-responsive-web-design-22/learn-css-grid-by-building-a-magazine/6144ee790af79815ad15a832.md +++ b/curriculum/challenges/espanol/14-responsive-web-design-22/learn-css-grid-by-building-a-magazine/6144ee790af79815ad15a832.md @@ -7,19 +7,19 @@ dashedName: step-32 # --description-- -Now you are ready to start putting together the grid layout. CSS Grid offers a two-dimensional grid-based layout, allowing you to center items horizontally and vertically while still retaining control to do things like overlap elements. +Ahora está listo para comenzar a armar el diseño de la cuadrícula. CSS Grid ofrece un diseño bidimensional basado en cuadrículas, lo que le permite centrar elementos horizontal y verticalmente mientras conserva el control para hacer cosas como elementos superpuestos. -Begin by creating a `main` selector and giving it a `display` property set to `grid`. +Comience creando un selector `main` y asignándole una propiedad `display` establecida en `grid`. # --hints-- -You should have a `main` selector. +Debes tener un selector `main`. ```js assert(new __helpers.CSSHelp(document).getStyle('main')); ``` -Your `main` selector should have a `display` property set to `grid`. +Su selector `main` debe tener una propiedad `display` establecida en `grid`. ```js assert(new __helpers.CSSHelp(document).getStyle('main')?.display === 'grid'); diff --git a/curriculum/challenges/espanol/14-responsive-web-design-22/learn-css-grid-by-building-a-magazine/6144f1410990ea17187a722b.md b/curriculum/challenges/espanol/14-responsive-web-design-22/learn-css-grid-by-building-a-magazine/6144f1410990ea17187a722b.md index 89f6c23733e..dd6fc59171b 100644 --- a/curriculum/challenges/espanol/14-responsive-web-design-22/learn-css-grid-by-building-a-magazine/6144f1410990ea17187a722b.md +++ b/curriculum/challenges/espanol/14-responsive-web-design-22/learn-css-grid-by-building-a-magazine/6144f1410990ea17187a722b.md @@ -7,13 +7,13 @@ dashedName: step-33 # --description-- -Now you can style the layout of your grid. CSS Grid is similar to Flexbox in that it has a special property for both the parent and child elements. +Ahora puede diseñar el diseño de su cuadrícula. CSS Grid es similar a Flexbox en que tiene una propiedad especial para los elementos padre e hijo. -In this case, your parent element is the `main` element. Set the content to have a three-column layout by adding a `grid-template-columns` property with a value of `1fr 94rem 1fr`. This will create three columns where the middle column is `94rem` wide, and the first and last columns are both 1 fraction of the remaining space in the grid container. +En este caso, su elemento principal es el elemento `main`. Configure el contenido para que tenga un diseño de tres columnas agregando una propiedad `grid-template-columns` con un valor de `1fr 94rem 1fr`. Esto creará tres columnas donde la columna del medio tiene un ancho de `94rem`, y la primera y la última columna son ambas 1 fracción del espacio restante en el contenedor de cuadrícula. # --hints-- -Your `main` section should have a `grid-template-columns` property set to `1fr 94rem 1fr`. +Su sección `main` debe tener una propiedad `grid-template-columns` establecida en `1fr 94rem 1fr`. ```js assert(new __helpers.CSSHelp(document).getStyle('main')?.gridTemplateColumns === '1fr 94rem 1fr'); diff --git a/curriculum/challenges/espanol/14-responsive-web-design-22/learn-css-grid-by-building-a-magazine/6144f3818bfbc51844152e36.md b/curriculum/challenges/espanol/14-responsive-web-design-22/learn-css-grid-by-building-a-magazine/6144f3818bfbc51844152e36.md index 14fb42e88b0..41d59cbc044 100644 --- a/curriculum/challenges/espanol/14-responsive-web-design-22/learn-css-grid-by-building-a-magazine/6144f3818bfbc51844152e36.md +++ b/curriculum/challenges/espanol/14-responsive-web-design-22/learn-css-grid-by-building-a-magazine/6144f3818bfbc51844152e36.md @@ -7,13 +7,13 @@ dashedName: step-34 # --description-- -Use the `minmax` function to make your columns responsive on any device. The `minmax` function takes two arguments, the first being the minimum value and the second being the maximum. These values could be a length, percentage, `fr`, or even a keyword like `max-content`. +Utilice la función `minmax` para que sus columnas respondan en cualquier dispositivo. La función `minmax` toma dos argumentos, siendo el primero el valor mínimo y el segundo el máximo. Estos valores pueden ser una longitud, un porcentaje, `fr` o incluso una palabra clave como `max-content`. -Wrap each of your already defined values of the `grid-template-columns` property in a `minmax` function, using each value as the second argument. The first argument should be `2rem`, `min-content`, and `2rem` respectively. +Envuelve cada uno de tus valores ya definidos de la propiedad `grid-template-columns` en una función `minmax`, usando cada valor como segundo argumento. El primer argumento debe ser `2rem`, `min-content` y `2rem` respectivamente. # --hints-- -Your `main` selector should have a `grid-template-columns` property set to `minmax(2rem, 1fr) minmax(min-content, 94rem) minmax(2rem, 1fr)`. +Su selector `main` debe tener una propiedad `grid-template-columns` establecida en `minmax(2rem, 1fr) minmax(min-content, 94rem) minmax(2rem, 1fr)`. ```js assert(new __helpers.CSSHelp(document).getStyle('main')?.gridTemplateColumns === 'minmax(2rem, 1fr) minmax(min-content, 94rem) minmax(2rem, 1fr)'); diff --git a/curriculum/challenges/espanol/14-responsive-web-design-22/learn-css-grid-by-building-a-magazine/6144f42204c8c8195f1f3345.md b/curriculum/challenges/espanol/14-responsive-web-design-22/learn-css-grid-by-building-a-magazine/6144f42204c8c8195f1f3345.md index dad3f998e71..d78642be5ce 100644 --- a/curriculum/challenges/espanol/14-responsive-web-design-22/learn-css-grid-by-building-a-magazine/6144f42204c8c8195f1f3345.md +++ b/curriculum/challenges/espanol/14-responsive-web-design-22/learn-css-grid-by-building-a-magazine/6144f42204c8c8195f1f3345.md @@ -7,11 +7,11 @@ dashedName: step-35 # --description-- -To add space between rows in the grid layout, you can use the `row-gap` property. Give the `main` selector a `row-gap` property of `3rem`. +Para agregar espacio entre filas en el diseño de cuadrícula, puede usar la propiedad `row-gap`. Dale al selector `main` una propiedad `row-gap` de `3rem`. # --hints-- -Your `main` selector should have a `row-gap` property of `3rem`. +Tu selector `main` debe tener una propiedad `row-gap` de `3rem`. ```js assert(new __helpers.CSSHelp(document).getStyle('main')?.rowGap === '3rem'); diff --git a/curriculum/challenges/espanol/14-responsive-web-design-22/learn-css-grid-by-building-a-magazine/6144f47b7c631e1a6f304dd5.md b/curriculum/challenges/espanol/14-responsive-web-design-22/learn-css-grid-by-building-a-magazine/6144f47b7c631e1a6f304dd5.md index 81105a97130..c841ac6801d 100644 --- a/curriculum/challenges/espanol/14-responsive-web-design-22/learn-css-grid-by-building-a-magazine/6144f47b7c631e1a6f304dd5.md +++ b/curriculum/challenges/espanol/14-responsive-web-design-22/learn-css-grid-by-building-a-magazine/6144f47b7c631e1a6f304dd5.md @@ -7,21 +7,21 @@ dashedName: step-36 # --description-- -Your magazine will have three primary sections. You already set the overall layout in the `main` rule, but you can adjust the placement in the child rules. +Su revista tendrá tres secciones principales. Ya configuró el diseño general en la regla `main`, pero puede ajustar la ubicación en las reglas secundarias. -One option is the `grid-column` property, which is shorthand for `grid-column-start` and `grid-column-end`. The `grid-column` property tells the grid item which grid line to start and end at. +Una opción es la propiedad `grid-column`, que es la abreviatura de `grid-column-start` y `grid-column-end`. La propiedad `grid-column` le dice al elemento de la cuadrícula en qué línea de cuadrícula debe comenzar y terminar. -Create a `.heading` rule and set the `grid-column` property to `2 / 3`. This will tell the `.heading` element to start at grid line 2 and end at grid line 3. +Cree una regla `.heading` y establezca la propiedad `grid-column` en `2 / 3`. Esto le indicará al elemento `.heading` que comience en la línea de cuadrícula 2 y finalice en la línea de cuadrícula 3. # --hints-- -You should have a `.heading` selector. +Debe tener un selector `.heading`. ```js assert(new __helpers.CSSHelp(document).getStyle('.heading')); ``` -Your `.heading` selector should have a `grid-column` property set to `2 / 3`. +Su selector `.heading` debe tener una propiedad `grid-column` establecida en `2 / 3`. ```js assert(new __helpers.CSSHelp(document).getStyle('.heading')?.gridColumn === '2 / 3'); diff --git a/curriculum/challenges/espanol/14-responsive-web-design-22/learn-css-grid-by-building-a-magazine/6148b07081759c2c691166a9.md b/curriculum/challenges/espanol/14-responsive-web-design-22/learn-css-grid-by-building-a-magazine/6148b07081759c2c691166a9.md index bcfb43b634a..ca1cd147447 100644 --- a/curriculum/challenges/espanol/14-responsive-web-design-22/learn-css-grid-by-building-a-magazine/6148b07081759c2c691166a9.md +++ b/curriculum/challenges/espanol/14-responsive-web-design-22/learn-css-grid-by-building-a-magazine/6148b07081759c2c691166a9.md @@ -7,17 +7,17 @@ dashedName: step-37 # --description-- -Create a `.text` selector and give it a `grid-column` property set to `2 / 3`. +Cree un selector `.text` y asígnele una propiedad `grid-column` establecida en `2 / 3`. # --hints-- -You should have a `.text` selector. +Debe tener un selector `.text`. ```js assert(new __helpers.CSSHelp(document).getStyle('.text')); ``` -Your `.text` selector should have a `grid-column` property set to `2 / 3`. +Su selector `.text` debe tener una propiedad `grid-column` establecida en `2 / 3`. ```js assert(new __helpers.CSSHelp(document).getStyle('.text')?.gridColumn === '2 / 3'); diff --git a/curriculum/challenges/espanol/14-responsive-web-design-22/learn-css-grid-by-building-a-magazine/6148b0d764e4192e5712ed92.md b/curriculum/challenges/espanol/14-responsive-web-design-22/learn-css-grid-by-building-a-magazine/6148b0d764e4192e5712ed92.md index 3909b29e81b..e3be8311bf8 100644 --- a/curriculum/challenges/espanol/14-responsive-web-design-22/learn-css-grid-by-building-a-magazine/6148b0d764e4192e5712ed92.md +++ b/curriculum/challenges/espanol/14-responsive-web-design-22/learn-css-grid-by-building-a-magazine/6148b0d764e4192e5712ed92.md @@ -7,13 +7,13 @@ dashedName: step-38 # --description-- -For additional control over the layout of your content, you can have a CSS Grid within a CSS Grid. +Para un control adicional sobre el diseño de su contenido, puede tener una cuadrícula CSS dentro de una cuadrícula CSS. -Set the `display` property of your `.heading` selector to `grid`. +Establezca la propiedad `display` de su selector `.heading` en `grid`. # --hints-- -Your `.heading` selector should have a `display` property set to `grid`. +Su selector `.heading` debe tener una propiedad `display` establecida en `grid`. ```js assert(new __helpers.CSSHelp(document).getStyle('.heading')?.display === 'grid'); diff --git a/curriculum/challenges/espanol/14-responsive-web-design-22/learn-css-grid-by-building-a-magazine/6148b185ef37522f688316b0.md b/curriculum/challenges/espanol/14-responsive-web-design-22/learn-css-grid-by-building-a-magazine/6148b185ef37522f688316b0.md index 0e20d62e5d8..481346c84d4 100644 --- a/curriculum/challenges/espanol/14-responsive-web-design-22/learn-css-grid-by-building-a-magazine/6148b185ef37522f688316b0.md +++ b/curriculum/challenges/espanol/14-responsive-web-design-22/learn-css-grid-by-building-a-magazine/6148b185ef37522f688316b0.md @@ -7,15 +7,15 @@ dashedName: step-39 # --description-- -Now you can style the content of the `.heading` element with CSS Grid. +Ahora puede diseñar el contenido del elemento `.heading` con CSS Grid. -The CSS `repeat()` function is used to repeat a value, rather than writing it out manually, and is helpful for grid layouts. For example, setting the `grid-template-columns` property to `repeat(20, 200px)` would create 20 columns each `200px` wide. +La función CSS `repeat()` se usa para repetir un valor, en lugar de escribirlo manualmente, y es útil para los diseños de cuadrícula. Por ejemplo, establecer la propiedad `grid-template-columns` en `repeat(20, 200px)` crearía 20 columnas cada una de `200px` de ancho. -Give your `.heading` element a `grid-template-columns` property set to `repeat(2, 1fr)` to create two columns of equal width. +Dale a tu elemento `.heading` una propiedad `grid-template-columns` establecida en `repeat(2, 1fr)` para crear dos columnas de igual ancho. # --hints-- -Your `.heading` selector should have a `grid-template-columns` property set to `repeat(2, 1fr)`. +Su selector `.heading` debe tener una propiedad `grid-template-columns` establecida en `repeat(2, 1fr)`. ```js assert(new __helpers.CSSHelp(document).getStyle('.heading')?.gridTemplateColumns === 'repeat(2, 1fr)'); diff --git a/curriculum/challenges/espanol/14-responsive-web-design-22/learn-css-grid-by-building-a-magazine/6148b30464daf630848c21d4.md b/curriculum/challenges/espanol/14-responsive-web-design-22/learn-css-grid-by-building-a-magazine/6148b30464daf630848c21d4.md index aaecf57fb78..f4d29de4776 100644 --- a/curriculum/challenges/espanol/14-responsive-web-design-22/learn-css-grid-by-building-a-magazine/6148b30464daf630848c21d4.md +++ b/curriculum/challenges/espanol/14-responsive-web-design-22/learn-css-grid-by-building-a-magazine/6148b30464daf630848c21d4.md @@ -7,11 +7,11 @@ dashedName: step-40 # --description-- -Give your `.heading` selector a `row-gap` property set to `1.5rem`. +Dale a tu selector `.heading` una propiedad `row-gap` establecida en `1.5rem`. # --hints-- -Your `.heading` selector should have a `row-gap` property set to `1.5rem`. +Su selector `.heading` debe tener una propiedad `row-gap` establecida en `1.5rem`. ```js assert(new __helpers.CSSHelp(document).getStyle('.heading')?.rowGap === '1.5rem'); diff --git a/curriculum/challenges/espanol/14-responsive-web-design-22/learn-css-grid-by-building-a-magazine/6148b4b150434734143db6f2.md b/curriculum/challenges/espanol/14-responsive-web-design-22/learn-css-grid-by-building-a-magazine/6148b4b150434734143db6f2.md index b5929acd683..d83b750f4e7 100644 --- a/curriculum/challenges/espanol/14-responsive-web-design-22/learn-css-grid-by-building-a-magazine/6148b4b150434734143db6f2.md +++ b/curriculum/challenges/espanol/14-responsive-web-design-22/learn-css-grid-by-building-a-magazine/6148b4b150434734143db6f2.md @@ -7,19 +7,19 @@ dashedName: step-41 # --description-- -Remember that the `grid-column` property determines which columns an element starts and ends at. There may be times where you are unsure of how many columns your grid will have, but you want an element to stop at the last column. To do this, you can use `-1` for the end column. +Recuerde que la propiedad `grid-column` determina en qué columnas comienza y termina un elemento. Puede haber momentos en los que no esté seguro de cuántas columnas tendrá su cuadrícula, pero desea que un elemento se detenga en la última columna. Para hacer esto, puede usar `-1` para la columna final. -Create a `.hero` selector and give it a `grid-column` property set to `1 / -1`. This will tell the element to span the full width of the grid. +Cree un selector `.hero` y asígnele una propiedad `grid-column` establecida en `1 / -1`. Esto le indicará al elemento que abarque todo el ancho de la cuadrícula. # --hints-- -You should have a `.hero` selector. +Deberías tener un selector `.hero`. ```js assert(new __helpers.CSSHelp(document).getStyle('.hero')); ``` -Your `.hero` selector should have a `grid-column` property set to `1 / -1`. +Su selector `.hero` debe tener una propiedad `grid-column` establecida en `1 / -1`. ```js assert(new __helpers.CSSHelp(document).getStyle('.hero')?.gridColumn === '1 / -1'); diff --git a/curriculum/challenges/espanol/14-responsive-web-design-22/learn-css-grid-by-building-a-magazine/6148b5623efa8f369f2c3643.md b/curriculum/challenges/espanol/14-responsive-web-design-22/learn-css-grid-by-building-a-magazine/6148b5623efa8f369f2c3643.md index 65938f25269..5a4a203e240 100644 --- a/curriculum/challenges/espanol/14-responsive-web-design-22/learn-css-grid-by-building-a-magazine/6148b5623efa8f369f2c3643.md +++ b/curriculum/challenges/espanol/14-responsive-web-design-22/learn-css-grid-by-building-a-magazine/6148b5623efa8f369f2c3643.md @@ -7,11 +7,11 @@ dashedName: step-42 # --description-- -Give the `.hero` selector a `position` property set to `relative`. +Dale al selector `.hero` una propiedad `position` establecida en `relative`. # --hints-- -Your `.hero` selector should have a `position` property set to `relative`. +Su selector `.hero` debe tener una propiedad `position` establecida en `relative`. ```js assert(new __helpers.CSSHelp(document).getStyle('.hero')?.position === 'relative'); diff --git a/curriculum/challenges/espanol/14-responsive-web-design-22/learn-css-grid-by-building-a-magazine/6148b59ef318e03875f35c4a.md b/curriculum/challenges/espanol/14-responsive-web-design-22/learn-css-grid-by-building-a-magazine/6148b59ef318e03875f35c4a.md index 6174383cf0e..ad6d41300f6 100644 --- a/curriculum/challenges/espanol/14-responsive-web-design-22/learn-css-grid-by-building-a-magazine/6148b59ef318e03875f35c4a.md +++ b/curriculum/challenges/espanol/14-responsive-web-design-22/learn-css-grid-by-building-a-magazine/6148b59ef318e03875f35c4a.md @@ -7,25 +7,25 @@ dashedName: step-44 # --description-- -Create an `img` selector and give it a `width` property set to `100%`, and an `object-fit` property set to `cover`. +Cree un selector `img` y asígnele una propiedad `width` establecida en `100%`, y un conjunto de propiedades `object-fit` para `cover`. -The `object-fit` property tells the browser how to position the element within its container. In this case, `cover` will set the image to fill the container, cropping as needed to avoid changing the aspect ratio. +La propiedad `object-fit` le dice al navegador cómo colocar el elemento dentro de su contenedor. En este caso, `cover` configurará la imagen para llenar el contenedor, recortándola según sea necesario para evitar cambiar la relación de aspecto. # --hints-- -You should have an `img` selector. +Deberías tener un selector `img`. ```js assert(new __helpers.CSSHelp(document).getStyle('img')); ``` -Your `img` selector should have a `width` property set to `100%`. +Su selector `img` debe tener una propiedad `width` establecida en `100%`. ```js assert(new __helpers.CSSHelp(document).getStyle('img')?.width === '100%'); ``` -Your `img` selector should have an `object-fit` property set to `cover`. +Su selector `img` debe tener una propiedad `object-fit` establecida en `cover`. ```js assert(new __helpers.CSSHelp(document).getStyle('img')?.objectFit === 'cover'); diff --git a/curriculum/challenges/espanol/14-responsive-web-design-22/learn-css-grid-by-building-a-magazine/6148bd62bbb8c83a5f1fc1b3.md b/curriculum/challenges/espanol/14-responsive-web-design-22/learn-css-grid-by-building-a-magazine/6148bd62bbb8c83a5f1fc1b3.md index af4c052dd8b..a9f33abaead 100644 --- a/curriculum/challenges/espanol/14-responsive-web-design-22/learn-css-grid-by-building-a-magazine/6148bd62bbb8c83a5f1fc1b3.md +++ b/curriculum/challenges/espanol/14-responsive-web-design-22/learn-css-grid-by-building-a-magazine/6148bd62bbb8c83a5f1fc1b3.md @@ -7,29 +7,29 @@ dashedName: step-45 # --description-- -Create a `.hero-title` selector and give it a `text-align` property set to `center`, a `color` property set to `orangered` and a `font-size` property set to `8rem`. +Cree un selector `.hero-title` y asígnele una propiedad `text-align` establecida en `center`, una propiedad `color` establecido en `orangered` y una propiedad `font-size` establecida en `8rem`. # --hints-- -You should have a `.hero-title` selector. +Deberías tener un selector `.hero-title`. ```js assert(new __helpers.CSSHelp(document).getStyle('.hero-title')); ``` -Your `.hero-title` selector should have a `text-align` property set to `center`. +Su selector `.hero-title` debe tener una propiedad `text-align` establecida en `center`. ```js assert(new __helpers.CSSHelp(document).getStyle('.hero-title')?.textAlign === 'center'); ``` -Your `.hero-title` selector should have a `color` property set to `orangered`. +Su selector `.hero-title` debe tener una propiedad `color` establecida en `orangered`. ```js assert(new __helpers.CSSHelp(document).getStyle('.hero-title')?.color === 'orangered'); ``` -Your `.hero-title` selector should have a `font-size` property set to `8rem`. +Su selector `.hero-title` debe tener una propiedad `font-size` establecida en `8rem`. ```js assert(new __helpers.CSSHelp(document).getStyle('.hero-title')?.fontSize === '8rem'); diff --git a/curriculum/challenges/espanol/14-responsive-web-design-22/learn-css-grid-by-building-a-magazine/6148be3d605d6b3ca9425d11.md b/curriculum/challenges/espanol/14-responsive-web-design-22/learn-css-grid-by-building-a-magazine/6148be3d605d6b3ca9425d11.md index 168bdb2b5e2..ac3f360ff6c 100644 --- a/curriculum/challenges/espanol/14-responsive-web-design-22/learn-css-grid-by-building-a-magazine/6148be3d605d6b3ca9425d11.md +++ b/curriculum/challenges/espanol/14-responsive-web-design-22/learn-css-grid-by-building-a-magazine/6148be3d605d6b3ca9425d11.md @@ -7,29 +7,29 @@ dashedName: step-46 # --description-- -The subtitle also needs to be styled. Create a `.hero-subtitle` selector and give it a `font-size` property set to `2.4rem`, a `color` property set to `orangered`, and a `text-align` property set to `center`. +El subtítulo también necesita ser diseñado. Cree un selector `.hero-subtitle` y asígnele una propiedad `font-size` establecida en `2.4rem`, un `color` propiedad establecida en `orangered`, y una propiedad `text-align` establecida en `center`. # --hints-- -You should have a `.hero-subtitle` selector. +Debes tener un selector `.hero-subtitle`. ```js assert(new __helpers.CSSHelp(document).getStyle('.hero-subtitle')); ``` -Your `.hero-subtitle` selector should have a `font-size` property set to `2.4rem`. +Su selector `.hero-subtitle` debe tener una propiedad `font-size` establecida en `2.4rem`. ```js assert(new __helpers.CSSHelp(document).getStyle('.hero-subtitle')?.fontSize === '2.4rem'); ``` -Your `.hero-subtitle` selector should have a `color` property set to `orangered`. +Su selector `.hero-subtitle` debe tener una propiedad `color` establecida en `orangered`. ```js assert(new __helpers.CSSHelp(document).getStyle('.hero-subtitle')?.color === 'orangered'); ``` -Your `.hero-subtitle` selector should have a `text-align` property set to `center`. +Su selector `.hero-subtitle` debe tener una propiedad `text-align` establecida en `center`. ```js assert(new __helpers.CSSHelp(document).getStyle('.hero-subtitle')?.textAlign === 'center'); diff --git a/curriculum/challenges/espanol/14-responsive-web-design-22/learn-css-grid-by-building-a-magazine/6148be82ca63c63daa8cca49.md b/curriculum/challenges/espanol/14-responsive-web-design-22/learn-css-grid-by-building-a-magazine/6148be82ca63c63daa8cca49.md index 51bbd7d04fc..72d2c38afd5 100644 --- a/curriculum/challenges/espanol/14-responsive-web-design-22/learn-css-grid-by-building-a-magazine/6148be82ca63c63daa8cca49.md +++ b/curriculum/challenges/espanol/14-responsive-web-design-22/learn-css-grid-by-building-a-magazine/6148be82ca63c63daa8cca49.md @@ -7,23 +7,23 @@ dashedName: step-47 # --description-- -Create an `.author` selector and give it a `font-size` property set to `2rem` and a `font-family` property set to `Raleway` with a fallback of `sans-serif`. +Cree un selector `.author` y asígnele una propiedad `font-size` establecida en `2rem` y una propiedad `font-family` establecido en `Raleway` con un respaldo de `sans-serif`. # --hints-- -You should have an `.author` selector. +Debe tener un selector `.author`. ```js assert(new __helpers.CSSHelp(document).getStyle('.author')); ``` -Your `.author` selector should have a `font-size` property set to `2rem`. +Su selector `.author` debe tener una propiedad `font-size` establecida en `2rem`. ```js assert(new __helpers.CSSHelp(document).getStyle('.author')?.fontSize === '2rem'); ``` -Your `.author` selector should have a `font-family` property set to `Raleway` with a fallback of `sans-serif`. +Su selector `.author` debe tener una propiedad `font-family` configurada en `Raleway` con un respaldo de `sans-serif`. ```js const fontFamily = new __helpers.CSSHelp(document).getStyle('.author')?.fontFamily; diff --git a/curriculum/challenges/espanol/14-responsive-web-design-22/learn-css-grid-by-building-a-magazine/6148bf49fcc7913f05dbf9b7.md b/curriculum/challenges/espanol/14-responsive-web-design-22/learn-css-grid-by-building-a-magazine/6148bf49fcc7913f05dbf9b7.md index f8c76f0cc18..cd2429a9915 100644 --- a/curriculum/challenges/espanol/14-responsive-web-design-22/learn-css-grid-by-building-a-magazine/6148bf49fcc7913f05dbf9b7.md +++ b/curriculum/challenges/espanol/14-responsive-web-design-22/learn-css-grid-by-building-a-magazine/6148bf49fcc7913f05dbf9b7.md @@ -7,19 +7,19 @@ dashedName: step-48 # --description-- -Create a `.author-name a:hover` selector and give it a `background-color` property set to `#306203`. +Cree un selector `.author-name a:hover` y asígnele una propiedad `background-color` establecida en `#306203`. -This will create a hover effect only for the `a` element within the `.author-name`, showing the original freeCodeCamp green in the background. +Esto creará un efecto de desplazamiento solo para el elemento `a` dentro de `.author-name`, mostrando el freeCodeCamp verde original en el fondo. # --hints-- -You should have an `.author-name a:hover` selector. +Debe tener un selector `.author-name a:hover`. ```js assert(new __helpers.CSSHelp(document).getStyle('.author-name a:hover')); ``` -Your `.author-name a:hover` selector should have a `background-color` property set to `#306203`. +Su selector `.author-name a:hover` debe tener una propiedad `background-color` establecida en `#306203`. ```js assert(new __helpers.CSSHelp(document).getStyle('.author-name a:hover')?.backgroundColor === 'rgb(48, 98, 3)'); diff --git a/curriculum/challenges/espanol/14-responsive-web-design-22/learn-css-grid-by-building-a-magazine/6148bfc43df3bc40fe0e6405.md b/curriculum/challenges/espanol/14-responsive-web-design-22/learn-css-grid-by-building-a-magazine/6148bfc43df3bc40fe0e6405.md index 65ea26802b1..34bf1683c06 100644 --- a/curriculum/challenges/espanol/14-responsive-web-design-22/learn-css-grid-by-building-a-magazine/6148bfc43df3bc40fe0e6405.md +++ b/curriculum/challenges/espanol/14-responsive-web-design-22/learn-css-grid-by-building-a-magazine/6148bfc43df3bc40fe0e6405.md @@ -7,17 +7,17 @@ dashedName: step-49 # --description-- -Create a `.publish-date` selector and give it a `color` property of `rgba(255, 255, 255, 0.5)`. +Cree un selector `.publish-date` y asígnele una propiedad `color` de `rgba(255, 255, 255, 0.5)`. # --hints-- -You should have a `.publish-date` selector. +Debe tener un selector `.publish-date`. ```js assert(new __helpers.CSSHelp(document).getStyle('.publish-date')); ``` -Your `.publish-date` selector should have a `color` property set to `rgba(255, 255, 255, 0.5)`. +Su selector `.publish-date` debe tener una propiedad `color` establecida en `rgba(255, 255, 255, 0.5)`. ```js assert(new __helpers.CSSHelp(document).getStyle('.publish-date')?.color === 'rgba(255, 255, 255, 0.5)'); diff --git a/curriculum/challenges/espanol/14-responsive-web-design-22/learn-css-grid-by-building-a-magazine/6148c004ffc8434252940dc3.md b/curriculum/challenges/espanol/14-responsive-web-design-22/learn-css-grid-by-building-a-magazine/6148c004ffc8434252940dc3.md index 1994e5152b8..83e50d1f2b3 100644 --- a/curriculum/challenges/espanol/14-responsive-web-design-22/learn-css-grid-by-building-a-magazine/6148c004ffc8434252940dc3.md +++ b/curriculum/challenges/espanol/14-responsive-web-design-22/learn-css-grid-by-building-a-magazine/6148c004ffc8434252940dc3.md @@ -7,23 +7,23 @@ dashedName: step-50 # --description-- -Create a `.social-icons` selector. Give it a `display` property set to `grid`, and a `font-size` property set to `3rem`. +Cree un selector `.social-icons`. Dale una propiedad `display` establecida en `grid` y una propiedad `font-size` establecida en `3rem`. # --hints-- -You should have a `.social-icons` selector. +Debes tener un selector `.social-icons`. ```js assert(new __helpers.CSSHelp(document).getStyle('.social-icons')); ``` -Your `.social-icons` selector should have a `display` property set to `grid`. +Su selector `.social-icons` debe tener una propiedad `display` establecida en `grid`. ```js assert(new __helpers.CSSHelp(document).getStyle('.social-icons')?.display === 'grid'); ``` -Your `.social-icons` selector should have a `font-size` property set to `3rem`. +Su selector `.social-icons` debe tener una propiedad `font-size` establecida en `3rem`. ```js assert(new __helpers.CSSHelp(document).getStyle('.social-icons')?.fontSize === '3rem'); diff --git a/curriculum/challenges/espanol/14-responsive-web-design-22/learn-css-grid-by-building-a-magazine/6148c224ecb157439bc5247c.md b/curriculum/challenges/espanol/14-responsive-web-design-22/learn-css-grid-by-building-a-magazine/6148c224ecb157439bc5247c.md index 6dbd6b29ecc..8892037b4f8 100644 --- a/curriculum/challenges/espanol/14-responsive-web-design-22/learn-css-grid-by-building-a-magazine/6148c224ecb157439bc5247c.md +++ b/curriculum/challenges/espanol/14-responsive-web-design-22/learn-css-grid-by-building-a-magazine/6148c224ecb157439bc5247c.md @@ -7,11 +7,11 @@ dashedName: step-51 # --description-- -The default settings for CSS Grid will create additional rows as needed, unlike Flexbox. Give the `.social-icons` selector a `grid-template-columns` property set to `repeat(5, 1fr)` to arrange the icons in a single row. +La configuración predeterminada para CSS Grid creará filas adicionales según sea necesario, a diferencia de Flexbox. Asigne al selector `.social-icons` una propiedad `grid-template-columns` establecida en `repeat(5, 1fr)` para organizar los íconos en una sola fila. # --hints-- -Your `.social-icons` selector should have a `grid-template-columns` property set to `repeat(5, 1fr)`. +Su selector `.social-icons` debe tener una propiedad `grid-template-columns` establecida en `repeat(5, 1fr)`. ```js assert(new __helpers.CSSHelp(document).getStyle('.social-icons')?.gridTemplateColumns === 'repeat(5, 1fr)'); diff --git a/curriculum/challenges/espanol/14-responsive-web-design-22/learn-css-grid-by-building-a-magazine/6148c434bd731d45617a76c6.md b/curriculum/challenges/espanol/14-responsive-web-design-22/learn-css-grid-by-building-a-magazine/6148c434bd731d45617a76c6.md index 21c5a2e520c..5c0c9f94a5b 100644 --- a/curriculum/challenges/espanol/14-responsive-web-design-22/learn-css-grid-by-building-a-magazine/6148c434bd731d45617a76c6.md +++ b/curriculum/challenges/espanol/14-responsive-web-design-22/learn-css-grid-by-building-a-magazine/6148c434bd731d45617a76c6.md @@ -7,15 +7,15 @@ dashedName: step-52 # --description-- -If you wanted to add more social icons, but keep them on the same row, you would need to update `grid-template-columns` to create additional columns. As an alternative, you can use the `grid-auto-flow` property. +Si desea agregar más íconos sociales, pero mantenerlos en la misma fila, deberá actualizar `grid-template-columns` para crear columnas adicionales. Como alternativa, puede utilizar la propiedad `grid-auto-flow`. -This property takes either `row` or `column` as the first value, with an optional second value of `dense`. `grid-auto-flow` uses an auto-placement algorithm to adjust the grid layout. Setting it to `column` will tell the algorithm to create new columns for content as needed. The `dense` value allows the algorithm to backtrack and fill holes in the grid with smaller items, which can result in items appearing out of order. +Esta propiedad toma `row` o `column` como primer valor, con un segundo valor opcional de `dense`. `grid-auto-flow` utiliza un algoritmo de colocación automática para ajustar el diseño de la cuadrícula. Establecerlo en `column` le indicará al algoritmo que cree nuevas columnas para el contenido según sea necesario. El valor `dense` permite que el algoritmo retroceda y rellene los huecos en la cuadrícula con elementos más pequeños, lo que puede provocar que los elementos aparezcan desordenados. -For your `.social-icons` selector, set the `grid-auto-flow` property to `column`. +Para su selector `.social-icons`, establezca la propiedad `grid-auto-flow` en `column`. # --hints-- -Your `.social-icons` selector should have a `grid-auto-flow` property set to `column`. +Su selector `.social-icons` debe tener una propiedad `grid-auto-flow` establecida en `column`. ```js assert(new __helpers.CSSHelp(document).getStyle('.social-icons')?.gridAutoFlow === 'column'); diff --git a/curriculum/challenges/espanol/14-responsive-web-design-22/learn-css-grid-by-building-a-magazine/6148c5036ddad94692a66230.md b/curriculum/challenges/espanol/14-responsive-web-design-22/learn-css-grid-by-building-a-magazine/6148c5036ddad94692a66230.md index 336b2649623..9a19592d802 100644 --- a/curriculum/challenges/espanol/14-responsive-web-design-22/learn-css-grid-by-building-a-magazine/6148c5036ddad94692a66230.md +++ b/curriculum/challenges/espanol/14-responsive-web-design-22/learn-css-grid-by-building-a-magazine/6148c5036ddad94692a66230.md @@ -7,13 +7,13 @@ dashedName: step-53 # --description-- -Now the auto-placement algorithm will kick in when you add a new icon element. However, the algorithm defaults the new column width to be `auto`, which will not match your current columns. +Ahora, el algoritmo de colocación automática se activará cuando agregue un nuevo elemento de icono. Sin embargo, el algoritmo establece por defecto que el ancho de la nueva columna sea `auto`, que no coincidirá con sus columnas actuales. -You can override this with the `grid-auto-columns` property. Give the `.social-icons` selector a `grid-auto-columns` property set to `1fr`. +Puede anular esto con la propiedad `grid-auto-columns`. Asigne al selector `.social-icons` una propiedad `grid-auto-columns` establecida en `1fr`. # --hints-- -Your `.social-icons` selector should have a `grid-auto-columns` property set to `1fr`. +Su selector `.social-icons` debe tener una propiedad `grid-auto-columns` establecida en `1fr`. ```js assert(new __helpers.CSSHelp(document).getStyle('.social-icons')?.gridAutoColumns === '1fr'); diff --git a/curriculum/challenges/espanol/14-responsive-web-design-22/learn-css-grid-by-building-a-magazine/6148c58bace368497fb11bcf.md b/curriculum/challenges/espanol/14-responsive-web-design-22/learn-css-grid-by-building-a-magazine/6148c58bace368497fb11bcf.md index c2c305d1f49..2b1fe02b23a 100644 --- a/curriculum/challenges/espanol/14-responsive-web-design-22/learn-css-grid-by-building-a-magazine/6148c58bace368497fb11bcf.md +++ b/curriculum/challenges/espanol/14-responsive-web-design-22/learn-css-grid-by-building-a-magazine/6148c58bace368497fb11bcf.md @@ -7,13 +7,13 @@ dashedName: step-54 # --description-- -Much like Flexbox, with CSS Grid you can align the content of grid items with `align-items` and `justify-items`. `align-items` will align child elements along the column axis, and `justify-items` will align child elements along the row axis. +Al igual que Flexbox, con CSS Grid puedes alinear el contenido de los elementos de la cuadrícula con `align-items` y `justify-items`. `align-items` alineará los elementos secundarios a lo largo del eje de la columna, y `justify-items` alineará los elementos secundarios a lo largo del eje de la fila. -Give the `.social-icons` selector an `align-items` property set to `center`. +Asigne al selector `.social-icons` una propiedad `align-items` establecida en `center`. # --hints-- -Your `.social-icons` selector should have an `align-items` property set to `center`. +Su selector `.social-icons` debe tener una propiedad `align-items` establecida en `center`. ```js assert(new __helpers.CSSHelp(document).getStyle('.social-icons')?.alignItems === 'center'); diff --git a/curriculum/challenges/espanol/14-responsive-web-design-22/learn-css-grid-by-building-a-magazine/6148c6aa9981d74af202125e.md b/curriculum/challenges/espanol/14-responsive-web-design-22/learn-css-grid-by-building-a-magazine/6148c6aa9981d74af202125e.md index 7715e6b4443..f873b3dc33d 100644 --- a/curriculum/challenges/espanol/14-responsive-web-design-22/learn-css-grid-by-building-a-magazine/6148c6aa9981d74af202125e.md +++ b/curriculum/challenges/espanol/14-responsive-web-design-22/learn-css-grid-by-building-a-magazine/6148c6aa9981d74af202125e.md @@ -7,17 +7,17 @@ dashedName: step-55 # --description-- -Give the `.text` selector a `font-size` property set to `1.8rem` and a `letter-spacing` property set to `0.6px`. +Asigne al selector `.text` una propiedad `font-size` establecida en `1.8rem` y una propiedad `letter-spacing` establecida en `0.6px`. # --hints-- -Your `.text` selector should have a `font-size` property set to `1.8rem`. +Su selector `.text` debe tener una propiedad `font-size` establecida en `1.8rem`. ```js assert(new __helpers.CSSHelp(document).getStyle('.text')?.fontSize === '1.8rem'); ``` -Your `.text` selector should have a `letter-spacing` property set to `0.6px`. +Su selector `.text` debe tener una propiedad `letter-spacing` establecida en `0.6px`. ```js assert(new __helpers.CSSHelp(document).getStyle('.text')?.letterSpacing === '0.6px'); diff --git a/curriculum/challenges/espanol/14-responsive-web-design-22/learn-css-grid-by-building-a-magazine/6148c721e74ecd4c619ae51c.md b/curriculum/challenges/espanol/14-responsive-web-design-22/learn-css-grid-by-building-a-magazine/6148c721e74ecd4c619ae51c.md index 53ea6c06204..fb32851d9bd 100644 --- a/curriculum/challenges/espanol/14-responsive-web-design-22/learn-css-grid-by-building-a-magazine/6148c721e74ecd4c619ae51c.md +++ b/curriculum/challenges/espanol/14-responsive-web-design-22/learn-css-grid-by-building-a-magazine/6148c721e74ecd4c619ae51c.md @@ -7,13 +7,13 @@ dashedName: step-56 # --description-- -Your `.text` element is not a CSS Grid, but you can create columns within an element without using Grid by using the `column-width` property. +Su elemento `.text` no es una cuadrícula CSS, pero puede crear columnas dentro de un elemento sin usar Grid usando la propiedad `column-width`. -Give your `.text` selector a `column-width` property set to `25rem`. +Dale a tu selector `.text` una propiedad `column-width` establecida en `25rem`. # --hints-- -Your `.text` selector should have a `column-width` property set to `25rem`. +Su selector `.text` debe tener una propiedad `column-width` establecida en `25rem`. ```js assert(new __helpers.CSSHelp(document).getStyle('.text')?.columnWidth === '25rem'); diff --git a/curriculum/challenges/espanol/14-responsive-web-design-22/learn-css-grid-by-building-a-magazine/6148ceaf5d897d4d8b3554b3.md b/curriculum/challenges/espanol/14-responsive-web-design-22/learn-css-grid-by-building-a-magazine/6148ceaf5d897d4d8b3554b3.md index 602651c34b0..2cbb5b20e23 100644 --- a/curriculum/challenges/espanol/14-responsive-web-design-22/learn-css-grid-by-building-a-magazine/6148ceaf5d897d4d8b3554b3.md +++ b/curriculum/challenges/espanol/14-responsive-web-design-22/learn-css-grid-by-building-a-magazine/6148ceaf5d897d4d8b3554b3.md @@ -7,13 +7,13 @@ dashedName: step-57 # --description-- -Magazines often use justified text in their printed content to structure their layout and control the flow of their content. While this works in printed form, justified text on websites can be an accessibility concern, for example presenting challenges for folks with dyslexia. +Las revistas a menudo usan texto justificado en su contenido impreso para estructurar su diseño y controlar el flujo de su contenido. Si bien esto funciona en forma impresa, el texto justificado en los sitios web puede ser un problema de accesibilidad, por ejemplo, presenta desafíos para las personas con dislexia. -To make your project look like a printed magazine, give the `.text` selector a `text-align` property set to `justify`. +Para hacer que su proyecto parezca una revista impresa, asigne al selector `.text` una propiedad `text-align` establecida en `justify`. # --hints-- -Your `.text` selector should have a `text-align` property set to `justify`. +Su selector `.text` debe tener una propiedad `text-align` establecida en `justify`. ```js assert(new __helpers.CSSHelp(document).getStyle('.text')?.textAlign === 'justify'); diff --git a/curriculum/challenges/espanol/14-responsive-web-design-22/learn-css-grid-by-building-a-magazine/6148cf094b3f2b4e8a032c63.md b/curriculum/challenges/espanol/14-responsive-web-design-22/learn-css-grid-by-building-a-magazine/6148cf094b3f2b4e8a032c63.md index 8ebd7299a6e..6cda6859708 100644 --- a/curriculum/challenges/espanol/14-responsive-web-design-22/learn-css-grid-by-building-a-magazine/6148cf094b3f2b4e8a032c63.md +++ b/curriculum/challenges/espanol/14-responsive-web-design-22/learn-css-grid-by-building-a-magazine/6148cf094b3f2b4e8a032c63.md @@ -7,25 +7,25 @@ dashedName: step-58 # --description-- -The `::first-letter` pseudo-selector allows you to target the first letter in the text content of an element. +El pseudo-selector `::first-letter` le permite apuntar a la primera letra en el contenido de texto de un elemento. -Create a `.first-paragraph::first-letter` selector and set the `font-size` property to `6rem`. Also give it a `color` property set to `orangered` to make it stand out. +Cree un selector `.first-paragraph::first-letter` y establezca la propiedad `font-size` en `6rem`. También asígnele una propiedad `color` establecida en `orangered` para que se destaque. # --hints-- -You should have a `.first-paragraph::first-letter` selector. +Debe tener un selector `.first-paragraph::first-letter`. ```js assert(new __helpers.CSSHelp(document).getStyle('.first-paragraph::first-letter')); ``` -Your `.first-paragraph::first-letter` selector should have a `font-size` property set to `6rem`. +Su selector `.first-paragraph::first-letter` debe tener una propiedad `font-size` establecida en `6rem`. ```js assert(new __helpers.CSSHelp(document).getStyle('.first-paragraph::first-letter')?.fontSize === '6rem'); ``` -Your `.first-paragraph::first-letter` selector should have a `color` property set to `orangered`. +Su selector `.first-paragraph::first-letter` debe tener una propiedad `color` establecida en `orangered`. ```js assert(new __helpers.CSSHelp(document).getStyle('.first-paragraph::first-letter')?.color === 'orangered'); diff --git a/curriculum/challenges/espanol/14-responsive-web-design-22/learn-css-grid-by-building-a-magazine/6148d0b863d10d50544ace0e.md b/curriculum/challenges/espanol/14-responsive-web-design-22/learn-css-grid-by-building-a-magazine/6148d0b863d10d50544ace0e.md index 74f2ab0c22b..04ba913ed05 100644 --- a/curriculum/challenges/espanol/14-responsive-web-design-22/learn-css-grid-by-building-a-magazine/6148d0b863d10d50544ace0e.md +++ b/curriculum/challenges/espanol/14-responsive-web-design-22/learn-css-grid-by-building-a-magazine/6148d0b863d10d50544ace0e.md @@ -7,17 +7,17 @@ dashedName: step-59 # --description-- -The other text has been shifted out of place. Move it into position by giving the `.first-paragraph::first-letter` selector a `float` property set to `left` and a `margin-right` property set to `1rem`. +El otro texto se ha desplazado fuera de lugar. Muévalo a su posición dándole al selector `.first-paragraph::first-letter` una propiedad `float` establecida en `left` y un `margin-right` establecida en `1rem`. # --hints-- -Your `.first-paragraph::first-letter` selector should have a `float` property set to `left`. +Su selector `.first-paragraph::first-letter` debe tener una propiedad `float` establecida en `left`. ```js assert(new __helpers.CSSHelp(document).getStyle('.first-paragraph::first-letter')?.float === 'left'); ``` -Your `.first-paragraph::first-letter` selector should have a `margin-right` property set to `1rem`. +Su selector `.first-paragraph::first-letter` debe tener una propiedad `margin-right` establecida en `1rem`. ```js assert(new __helpers.CSSHelp(document).getStyle('.first-paragraph::first-letter')?.marginRight === '1rem'); diff --git a/curriculum/challenges/espanol/14-responsive-web-design-22/learn-css-grid-by-building-a-magazine/6148d1bdf39c5b5186f5974b.md b/curriculum/challenges/espanol/14-responsive-web-design-22/learn-css-grid-by-building-a-magazine/6148d1bdf39c5b5186f5974b.md index 92bc585fad4..b38cf5c06ec 100644 --- a/curriculum/challenges/espanol/14-responsive-web-design-22/learn-css-grid-by-building-a-magazine/6148d1bdf39c5b5186f5974b.md +++ b/curriculum/challenges/espanol/14-responsive-web-design-22/learn-css-grid-by-building-a-magazine/6148d1bdf39c5b5186f5974b.md @@ -7,17 +7,17 @@ dashedName: step-60 # --description-- -Create an `hr` selector, and give it a `margin` property set to `1.5rem 0`. +Cree un selector `hr` y asígnele una propiedad `margin` establecida en `1.5rem 0`. # --hints-- -You should have an `hr` selector. +Deberías tener un selector `hr`. ```js assert(new __helpers.CSSHelp(document).getStyle('hr')); ``` -Your `hr` selector should have a `margin` property set to `1.5rem 0`. +Su selector `hr` debe tener una propiedad `margin` establecida en `1.5rem 0`. ```js assert(new __helpers.CSSHelp(document).getStyle('hr')?.margin === '1.5rem 0px'); diff --git a/curriculum/challenges/espanol/14-responsive-web-design-22/learn-css-grid-by-building-a-magazine/6148d1f9eb63c252e1f8acc4.md b/curriculum/challenges/espanol/14-responsive-web-design-22/learn-css-grid-by-building-a-magazine/6148d1f9eb63c252e1f8acc4.md index c736814f95d..4e937b5e964 100644 --- a/curriculum/challenges/espanol/14-responsive-web-design-22/learn-css-grid-by-building-a-magazine/6148d1f9eb63c252e1f8acc4.md +++ b/curriculum/challenges/espanol/14-responsive-web-design-22/learn-css-grid-by-building-a-magazine/6148d1f9eb63c252e1f8acc4.md @@ -7,11 +7,11 @@ dashedName: step-61 # --description-- -To give the `hr` a color, you need to adjust the `border` property. Give the `hr` selector a `border` property set to `1px solid rgba(120, 120, 120, 0.6)`. +Para darle un color a `hr`, debe ajustar la propiedad `border`. Dale al selector `hr` una propiedad `border` establecida en `1px solid rgba(120, 120, 120, 0.6)`. # --hints-- -Your `hr` should have a `border` property set to `1px solid rgba(120, 120, 120, 0.6)`. +Su `hr` debe tener una propiedad `border` establecida en `1px solid rgba(120, 120, 120, 0.6)`. ```js assert.equal(new __helpers.CSSHelp(document).getStyle('hr')?.borderWidth, '1px'); diff --git a/curriculum/challenges/espanol/14-responsive-web-design-22/learn-css-grid-by-building-a-magazine/6148d2444d01ab541e64a1e4.md b/curriculum/challenges/espanol/14-responsive-web-design-22/learn-css-grid-by-building-a-magazine/6148d2444d01ab541e64a1e4.md index 09ff6c09ff9..fea43e88462 100644 --- a/curriculum/challenges/espanol/14-responsive-web-design-22/learn-css-grid-by-building-a-magazine/6148d2444d01ab541e64a1e4.md +++ b/curriculum/challenges/espanol/14-responsive-web-design-22/learn-css-grid-by-building-a-magazine/6148d2444d01ab541e64a1e4.md @@ -7,29 +7,29 @@ dashedName: step-62 # --description-- -Create a `.quote` selector. Give it a `color` property set to `#00beef`, a `font-size` property set to `2.4rem`, and a `text-align` property set to `center`. +Cree un selector `.quote`. Asígnele una propiedad `color` establecida en `#00beef`, una propiedad `font-size` establecida en `2.4rem` y una Propiedad `text-align` establecida en `center`. # --hints-- -You should have a `.quote` selector. +Debe tener un selector `.quote`. ```js assert(new __helpers.CSSHelp(document).getStyle('.quote')); ``` -Your `.quote` selector should have a `color` property set to `#00beef`. +Su selector `.quote` debe tener una propiedad `color` establecida en `#00beef`. ```js assert(new __helpers.CSSHelp(document).getStyle('.quote')?.color === 'rgb(0, 190, 239)'); ``` -Your `.quote` selector should have a `font-size` property set to `2.4rem`. +Su selector `.quote` debe tener una propiedad `font-size` establecida en `2.4rem`. ```js assert(new __helpers.CSSHelp(document).getStyle('.quote')?.fontSize === '2.4rem'); ``` -Your `.quote` selector should have a `text-align` property set to `center`. +Su selector `.quote` debe tener una propiedad `text-align` establecida en `center`. ```js assert(new __helpers.CSSHelp(document).getStyle('.quote')?.textAlign === 'center'); diff --git a/curriculum/challenges/espanol/14-responsive-web-design-22/learn-css-grid-by-building-a-magazine/6148d33e31fccf558696c745.md b/curriculum/challenges/espanol/14-responsive-web-design-22/learn-css-grid-by-building-a-magazine/6148d33e31fccf558696c745.md index 274bba08a34..fe3c68b9773 100644 --- a/curriculum/challenges/espanol/14-responsive-web-design-22/learn-css-grid-by-building-a-magazine/6148d33e31fccf558696c745.md +++ b/curriculum/challenges/espanol/14-responsive-web-design-22/learn-css-grid-by-building-a-magazine/6148d33e31fccf558696c745.md @@ -7,11 +7,11 @@ dashedName: step-63 # --description-- -To make the quote text stand out more, give the `.quote` selector a `font-family` property set to `Raleway` with a fallback of `sans-serif`. +Para que el texto de la cita se destaque más, asigne al selector `.quote` una propiedad `font-family` establecida en `Raleway` con un respaldo de `sans-serif`. # --hints-- -Your `.quote` selector should have a `font-family` property set to `Raleway` with a fallback of `sans-serif`. +Su selector `.quote` debe tener una propiedad `font-family` establecida en `Raleway` con un respaldo de `sans-serif`. ```js const fontFamily = new __helpers.CSSHelp(document).getStyle('.quote')?.fontFamily; diff --git a/curriculum/challenges/espanol/14-responsive-web-design-22/learn-css-grid-by-building-a-magazine/6148d3fff5186b57123d97e2.md b/curriculum/challenges/espanol/14-responsive-web-design-22/learn-css-grid-by-building-a-magazine/6148d3fff5186b57123d97e2.md index 98393daa557..84202b115f4 100644 --- a/curriculum/challenges/espanol/14-responsive-web-design-22/learn-css-grid-by-building-a-magazine/6148d3fff5186b57123d97e2.md +++ b/curriculum/challenges/espanol/14-responsive-web-design-22/learn-css-grid-by-building-a-magazine/6148d3fff5186b57123d97e2.md @@ -7,36 +7,36 @@ dashedName: step-64 # --description-- -A quote is not really a quote without proper quotation marks. You can add these with CSS pseudo selectors. +Una cita no es realmente una cita sin las comillas adecuadas. Puede agregarlos con pseudo-selectores de CSS. -Create a `.quote::before` selector and set the `content` property to `"` with a space following it. +Cree un selector `.quote::before` y establezca la propiedad `content` en `"` con un espacio a continuación. -Also, create a `.quote::after` selector and set the `content` property to `"` with a space preceding it. +Además, cree un selector `.quote::after` y establezca la propiedad `content` en `"` con un espacio antes. # --hints-- -You should have a `.quote::before` selector. +Debe tener un selector `.quote::before`. ```js assert(new __helpers.CSSHelp(document).getStyle('.quote::before')); ``` -Your `.quote::before` selector should have a `content` property set to `'" '`. +Su selector `.quote::before` debe tener una propiedad `content` establecida en `'" '`. ```js -assert(new __helpers.CSSHelp(document).getStyle('.quote::before')?.content?.match(/\\?\"\s/)); +assert(new __helpers.CSSHelp(document).getStyle('.quote::before')?.content?.match(/\"\\"\s\"/)); ``` -You should have a `.quote::after` selector. +Debería tener un selector `.quote::after`. ```js assert(new __helpers.CSSHelp(document).getStyle('.quote::after')); ``` -Your `.quote::after` selector should have a `content` property set to `' "'`. +Su selector `.quote::after` debe tener una propiedad `content` establecida en `' "'`. ```js -assert(new __helpers.CSSHelp(document).getStyle('.quote::after')?.content?.match(/\s\\?\"/)); +assert(new __helpers.CSSHelp(document).getStyle('.quote::after')?.content?.match(/\"\s\\""/)); ``` # --seed-- diff --git a/curriculum/challenges/espanol/14-responsive-web-design-22/learn-css-grid-by-building-a-magazine/6148d4d57b965358c9fa38bf.md b/curriculum/challenges/espanol/14-responsive-web-design-22/learn-css-grid-by-building-a-magazine/6148d4d57b965358c9fa38bf.md index ff2b83502a9..c3c1ce99ad5 100644 --- a/curriculum/challenges/espanol/14-responsive-web-design-22/learn-css-grid-by-building-a-magazine/6148d4d57b965358c9fa38bf.md +++ b/curriculum/challenges/espanol/14-responsive-web-design-22/learn-css-grid-by-building-a-magazine/6148d4d57b965358c9fa38bf.md @@ -7,19 +7,19 @@ dashedName: step-65 # --description-- -Now it's time to style your third `section`. Note that it has the `text` and `text-with-images` values for the `class` attribute, which means it is already inheriting the styles from your `.text` rule. +Ahora es el momento de diseñar tu tercera `section`. Tenga en cuenta que tiene los valores `text` y `text-with-images` para el atributo `class`, lo que significa que ya hereda los estilos de su regla `.text`. -Create a `.text-with-images` selector and set the `display` property to `grid`. +Cree un selector `.text-with-images` y establezca la propiedad `display` en `grid`. # --hints-- -You should have a `.text-with-images` selector. +Debe tener un selector `.text-with-images`. ```js assert(new __helpers.CSSHelp(document).getStyle('.text-with-images')); ``` -Your `.text-with-images` selector should have a `display` property set to `grid`. +Su selector `.text-with-images` debe tener una propiedad `display` establecida en `grid`. ```js assert(new __helpers.CSSHelp(document).getStyle('.text-with-images')?.display === 'grid'); diff --git a/curriculum/challenges/espanol/14-responsive-web-design-22/learn-css-grid-by-building-a-magazine/6148d7720f0db36775db868a.md b/curriculum/challenges/espanol/14-responsive-web-design-22/learn-css-grid-by-building-a-magazine/6148d7720f0db36775db868a.md index b2b08f1bf5c..67b29ed601f 100644 --- a/curriculum/challenges/espanol/14-responsive-web-design-22/learn-css-grid-by-building-a-magazine/6148d7720f0db36775db868a.md +++ b/curriculum/challenges/espanol/14-responsive-web-design-22/learn-css-grid-by-building-a-magazine/6148d7720f0db36775db868a.md @@ -7,17 +7,17 @@ dashedName: step-66 # --description-- -You will need to have a column for text and a column for images. Give the `.text-with-images` selector a `grid-template-columns` property set to `1fr 2fr`. Also set the `column-gap` property to `3rem` to provide more spacing between the columns. +Deberá tener una columna para el texto y una columna para las imágenes. Asigne al selector `.text-with-images` una propiedad `grid-template-columns` establecida en `1fr 2fr`. También establezca la propiedad `column-gap` en `3rem` para proporcionar más espacio entre las columnas. # --hints-- -Your `.text-with-images` selector should have a `grid-template-columns` property set to `1fr 2fr`. +Su selector `.text-with-images` debe tener una propiedad `grid-template-columns` establecida en `1fr 2fr`. ```js assert(new __helpers.CSSHelp(document).getStyle('.text-with-images')?.gridTemplateColumns === '1fr 2fr'); ``` -Your `.text-with-images` selector should have a `column-gap` property set to `3rem`. +Su selector `.text-with-images` debe tener una propiedad `column-gap` establecida en `3rem`. ```js assert(new __helpers.CSSHelp(document).getStyle('.text-with-images')?.columnGap === '3rem'); diff --git a/curriculum/challenges/espanol/14-responsive-web-design-22/learn-css-grid-by-building-a-magazine/6148d94fdf6a5d6899f8ff15.md b/curriculum/challenges/espanol/14-responsive-web-design-22/learn-css-grid-by-building-a-magazine/6148d94fdf6a5d6899f8ff15.md index 0858fb1260b..68266a3dc2a 100644 --- a/curriculum/challenges/espanol/14-responsive-web-design-22/learn-css-grid-by-building-a-magazine/6148d94fdf6a5d6899f8ff15.md +++ b/curriculum/challenges/espanol/14-responsive-web-design-22/learn-css-grid-by-building-a-magazine/6148d94fdf6a5d6899f8ff15.md @@ -7,11 +7,11 @@ dashedName: step-67 # --description-- -Give the `.text-with-images` selector a `margin-bottom` property set to `3rem`. +Dale al selector `.text-with-images` una propiedad `margin-bottom` establecida en `3rem`. # --hints-- -Your `.text-with-images` selector should have a `margin-bottom` property set to `3rem`. +Su selector `.text-with-images` debe tener una propiedad `margin-bottom` establecida en `3rem`. ```js assert(new __helpers.CSSHelp(document).getStyle('.text-with-images')?.marginBottom === '3rem'); diff --git a/curriculum/challenges/espanol/14-responsive-web-design-22/learn-css-grid-by-building-a-magazine/6148d9825b50a3698aeee644.md b/curriculum/challenges/espanol/14-responsive-web-design-22/learn-css-grid-by-building-a-magazine/6148d9825b50a3698aeee644.md index 9b8cb868a0b..f6e103a5ccd 100644 --- a/curriculum/challenges/espanol/14-responsive-web-design-22/learn-css-grid-by-building-a-magazine/6148d9825b50a3698aeee644.md +++ b/curriculum/challenges/espanol/14-responsive-web-design-22/learn-css-grid-by-building-a-magazine/6148d9825b50a3698aeee644.md @@ -7,17 +7,17 @@ dashedName: step-68 # --description-- -Create a `.lists` selector and set the `list-style-type` property to `none`. This will get rid of the bullet points on the list items. +Cree un selector `.lists` y establezca la propiedad `list-style-type` en `none`. Esto eliminará las viñetas en los elementos de la lista. # --hints-- -You should have a `.lists` selector. +Debería tener un selector `.lists`. ```js assert(new __helpers.CSSHelp(document).getStyle('.lists')); ``` -Your `.lists` selector should have a `list-style-type` property set to `none`. +Su selector `.lists` debe tener una propiedad `list-style-type` establecida en `none`. ```js assert(new __helpers.CSSHelp(document).getStyle('.lists')?.listStyleType === 'none'); diff --git a/curriculum/challenges/espanol/14-responsive-web-design-22/learn-css-grid-by-building-a-magazine/6148e162e255676ae0da6a76.md b/curriculum/challenges/espanol/14-responsive-web-design-22/learn-css-grid-by-building-a-magazine/6148e162e255676ae0da6a76.md index b87f79b362e..34faa6567d6 100644 --- a/curriculum/challenges/espanol/14-responsive-web-design-22/learn-css-grid-by-building-a-magazine/6148e162e255676ae0da6a76.md +++ b/curriculum/challenges/espanol/14-responsive-web-design-22/learn-css-grid-by-building-a-magazine/6148e162e255676ae0da6a76.md @@ -7,11 +7,11 @@ dashedName: step-69 # --description-- -Give the `.lists` selector a `margin-top` property set to `2rem`. +Asigne al selector `.lists` una propiedad `margin-top` establecida en `2rem`. # --hints-- -Your `.lists` selector should have a `margin-top` property set to `2rem`. +Su selector `.lists` debe tener una propiedad `margin-top` establecida en `2rem`. ```js assert(new __helpers.CSSHelp(document).getStyle('.lists')?.marginTop === '2rem'); diff --git a/curriculum/challenges/espanol/14-responsive-web-design-22/learn-css-grid-by-building-a-magazine/6148e19c3e26436be0155690.md b/curriculum/challenges/espanol/14-responsive-web-design-22/learn-css-grid-by-building-a-magazine/6148e19c3e26436be0155690.md index 9f7a067ceaa..30bcd6b6059 100644 --- a/curriculum/challenges/espanol/14-responsive-web-design-22/learn-css-grid-by-building-a-magazine/6148e19c3e26436be0155690.md +++ b/curriculum/challenges/espanol/14-responsive-web-design-22/learn-css-grid-by-building-a-magazine/6148e19c3e26436be0155690.md @@ -7,17 +7,17 @@ dashedName: step-70 # --description-- -Create a `.lists li` rule to target the list items within your `.lists` element. Give it a `margin-bottom` property set to `1.5rem`. +Cree una regla `.lists li` para apuntar a los elementos de la lista dentro de su elemento `.lists`. Dale una propiedad `margin-bottom` establecida en `1.5rem`. # --hints-- -You should have a `.lists li` selector. +Debería tener un selector `.lists li`. ```js assert(new __helpers.CSSHelp(document).getStyle('.lists li')); ``` -Your `.lists li` selector should have a `margin-bottom` property set to `1.5rem`. +Su selector `.lists li` debe tener una propiedad `margin-bottom` establecida en `1.5rem`. ```js assert(new __helpers.CSSHelp(document).getStyle('.lists li')?.marginBottom === '1.5rem'); diff --git a/curriculum/challenges/espanol/14-responsive-web-design-22/learn-css-grid-by-building-a-magazine/6148e246146b646cf4255f0c.md b/curriculum/challenges/espanol/14-responsive-web-design-22/learn-css-grid-by-building-a-magazine/6148e246146b646cf4255f0c.md index c8fe3bbad82..8f05ae44b16 100644 --- a/curriculum/challenges/espanol/14-responsive-web-design-22/learn-css-grid-by-building-a-magazine/6148e246146b646cf4255f0c.md +++ b/curriculum/challenges/espanol/14-responsive-web-design-22/learn-css-grid-by-building-a-magazine/6148e246146b646cf4255f0c.md @@ -7,17 +7,17 @@ dashedName: step-71 # --description-- -Create a `.list-title, .list-subtitle` selector and set the `color` property to `#00beef`. +Cree un selector `.list-title, .list-subtitle` y establezca la propiedad `color` en `#00beef`. # --hints-- -You should have a `.list-title, .list-subtitle` selector. +Debe tener un selector `.list-title, .list-subtitle`. ```js assert(new __helpers.CSSHelp(document).getStyle('.list-title, .list-subtitle')) ``` -Your `.list-title, .list-subtitle` selector should have a `color` property set to `#00beef`. +Su selector `.list-title, .list-subtitle` debe tener una propiedad `color` establecida en `#00beef`. ```js assert(new __helpers.CSSHelp(document).getStyle('.list-title, .list-subtitle')?.color === 'rgb(0, 190, 239)'); diff --git a/curriculum/challenges/espanol/14-responsive-web-design-22/learn-css-grid-by-building-a-magazine/6148e2dcdd60306dd77d41cc.md b/curriculum/challenges/espanol/14-responsive-web-design-22/learn-css-grid-by-building-a-magazine/6148e2dcdd60306dd77d41cc.md index d9979a0fa6e..c4a31a3ced3 100644 --- a/curriculum/challenges/espanol/14-responsive-web-design-22/learn-css-grid-by-building-a-magazine/6148e2dcdd60306dd77d41cc.md +++ b/curriculum/challenges/espanol/14-responsive-web-design-22/learn-css-grid-by-building-a-magazine/6148e2dcdd60306dd77d41cc.md @@ -7,19 +7,19 @@ dashedName: step-72 # --description-- -Time to style the last section of the magazine - the images. +Es hora de diseñar la última sección de la revista: las imágenes. -The images are wrapped with an `aside` element using the `image-wrapper` class, so create an `.image-wrapper` selector. Set the `display` property to `grid`. +Las imágenes se envuelven con un elemento `aside` utilizando la clase `image-wrapper`, así que crea un selector `.image-wrapper`. Establezca la propiedad `display` en `grid`. # --hints-- -You should have an `.image-wrapper` selector. +Debe tener un selector `.image-wrapper`. ```js assert(new __helpers.CSSHelp(document).getStyle('.image-wrapper')); ``` -Your `.image-wrapper` selector should have a `display` property set to `grid`. +Su selector `.image-wrapper` debe tener una propiedad `display` establecida en `grid`. ```js assert(new __helpers.CSSHelp(document).getStyle('.image-wrapper')?.display === 'grid'); diff --git a/curriculum/challenges/espanol/14-responsive-web-design-22/learn-css-grid-by-building-a-magazine/6148e4d6861a486f60681f36.md b/curriculum/challenges/espanol/14-responsive-web-design-22/learn-css-grid-by-building-a-magazine/6148e4d6861a486f60681f36.md index 2806c1cf54e..7380114ebbb 100644 --- a/curriculum/challenges/espanol/14-responsive-web-design-22/learn-css-grid-by-building-a-magazine/6148e4d6861a486f60681f36.md +++ b/curriculum/challenges/espanol/14-responsive-web-design-22/learn-css-grid-by-building-a-magazine/6148e4d6861a486f60681f36.md @@ -7,19 +7,19 @@ dashedName: step-73 # --description-- -The images should be within a two column, three row layout. +Las imágenes deben estar dentro de un diseño de dos columnas y tres filas. -Give the `.image-wrapper` selector a `grid-template-columns` property set to `2fr 1fr` and a `grid-template-rows` property set to `repeat(3, min-content)`. This will give our grid rows that adjust in height based on the content, but columns that remain a fixed width based on the container. +Asigne al selector `.image-wrapper` una propiedad `grid-template-columns` establecida en `2fr 1fr` y `grid-template-rows` propiedad establecida en `repeat(3, min-content)`. Esto le dará a nuestra cuadrícula filas que se ajustan en altura según el contenido, pero columnas que mantienen un ancho fijo según el contenedor. # --hints-- -Your `.image-wrapper` selector should have a `grid-template-columns` property set to `2fr 1fr`. +Su selector `.image-wrapper` debe tener una propiedad `grid-template-columns` establecida en `2fr 1fr`. ```js assert(new __helpers.CSSHelp(document).getStyle('.image-wrapper')?.gridTemplateColumns === '2fr 1fr'); ``` -Your `.image-wrapper` selector should have a `grid-template-rows` property set to `repeat(3, min-content)`. +Su selector `.image-wrapper` debe tener una propiedad `grid-template-rows` establecida en `repeat(3, min-content)`. ```js assert(new __helpers.CSSHelp(document).getStyle('.image-wrapper')?.gridTemplateRows === 'repeat(3, min-content)'); diff --git a/curriculum/challenges/espanol/14-responsive-web-design-22/learn-css-grid-by-building-a-magazine/6148e5a204d99e70343a63e4.md b/curriculum/challenges/espanol/14-responsive-web-design-22/learn-css-grid-by-building-a-magazine/6148e5a204d99e70343a63e4.md index 1a8969e3af3..58c8b0831e3 100644 --- a/curriculum/challenges/espanol/14-responsive-web-design-22/learn-css-grid-by-building-a-magazine/6148e5a204d99e70343a63e4.md +++ b/curriculum/challenges/espanol/14-responsive-web-design-22/learn-css-grid-by-building-a-magazine/6148e5a204d99e70343a63e4.md @@ -7,13 +7,13 @@ dashedName: step-74 # --description-- -The `gap` property is a shorthand way to set the value of `column-gap` and `row-gap` at the same time. If given one value, it sets the `column-gap` and `row-gap` both to that value. If given two values, it sets the `row-gap` to the first value and the `column-gap` to the second. +La propiedad `gap` es una forma abreviada de establecer el valor de `column-gap` y `row-gap` al mismo tiempo. Si se le da un valor, establece `column-gap` y `row-gap` en ese valor. Si se le dan dos valores, establece el `row-gap` en el primer valor y el `column-gap` en el segundo. -Give the `.image-wrapper` selector a `gap` property set to `2rem`. +Dale al selector `.image-wrapper` una propiedad `gap` establecida en `2rem`. # --hints-- -Your `.image-wrapper` element should have a `gap` property set to `2rem`. +Su elemento `.image-wrapper` debe tener una propiedad `gap` establecida en `2rem`. ```js assert(new __helpers.CSSHelp(document).getStyle('.image-wrapper')?.gap === '2rem'); diff --git a/curriculum/challenges/espanol/14-responsive-web-design-22/learn-css-grid-by-building-a-magazine/6148e62a6f768f71c4f04828.md b/curriculum/challenges/espanol/14-responsive-web-design-22/learn-css-grid-by-building-a-magazine/6148e62a6f768f71c4f04828.md index 3c5131d1041..1567958b6af 100644 --- a/curriculum/challenges/espanol/14-responsive-web-design-22/learn-css-grid-by-building-a-magazine/6148e62a6f768f71c4f04828.md +++ b/curriculum/challenges/espanol/14-responsive-web-design-22/learn-css-grid-by-building-a-magazine/6148e62a6f768f71c4f04828.md @@ -7,13 +7,13 @@ dashedName: step-75 # --description-- -The `place-items` property can be used to set the `align-items` and `justify-items` values at the same time. The `place-items` property takes one or two values. If one value is provided, it is used for both the `align-items` and `justify-items` properties. If two values are provided, the first value is used for the `align-items` property and the second value is used for the `justify-items` property. +La propiedad `place-items` se puede usar para establecer los valores `align-items` y `justify-items` al mismo tiempo. La propiedad `place-items` toma uno o dos valores. Si se proporciona un valor, se utiliza para las propiedades `align-items` y `justify-items`. Si se proporcionan dos valores, el primer valor se usa para la propiedad `align-items` y el segundo valor se usa para la propiedad `justify-items`. -Give the `.image-wrapper` selector a `place-items` property set to `center`. +Asigne al selector `.image-wrapper` una propiedad `place-items` establecida en `center`. # --hints-- -Your `.image-wrapper` selector should have a `place-items` property set to `center`. +Su selector `.image-wrapper` debe tener una propiedad `place-items` establecida en `center`. ```js assert(new __helpers.CSSHelp(document).getStyle('.image-wrapper')?.placeItems === 'center'); diff --git a/curriculum/challenges/espanol/14-responsive-web-design-22/learn-css-grid-by-building-a-magazine/6148e789329dc9736ce59b85.md b/curriculum/challenges/espanol/14-responsive-web-design-22/learn-css-grid-by-building-a-magazine/6148e789329dc9736ce59b85.md index 006899aeffb..efb42e12ef0 100644 --- a/curriculum/challenges/espanol/14-responsive-web-design-22/learn-css-grid-by-building-a-magazine/6148e789329dc9736ce59b85.md +++ b/curriculum/challenges/espanol/14-responsive-web-design-22/learn-css-grid-by-building-a-magazine/6148e789329dc9736ce59b85.md @@ -7,17 +7,17 @@ dashedName: step-76 # --description-- -Create an `.image-1, .image-3` rule and give it a `grid-column` property set to `1 / -1`. This will allow the first and third images to span the full width of the grid. +Cree una regla `.image-1, .image-3` y asígnele una propiedad `grid-column` establecida en `1 / -1`. Esto permitirá que la primera y la tercera imagen abarquen todo el ancho de la cuadrícula. # --hints-- -You should have an `.image-1, .image-3` selector. +Debes tener un selector `.image-1, .image-3`. ```js assert(new __helpers.CSSHelp(document).getStyle('.image-1, .image-3')); ``` -Your `.image-1, .image-3` selector should have a `grid-column` property set to `1 / -1`. +Su selector `.image-1, .image-3` debe tener una propiedad `grid-column` establecida en `1 / -1`. ```js assert(new __helpers.CSSHelp(document).getStyle('.image-1, .image-3')?.gridColumn === '1 / -1'); diff --git a/curriculum/challenges/espanol/14-responsive-web-design-22/learn-css-grid-by-building-a-magazine/6148f34ebedc2274bceeb99c.md b/curriculum/challenges/espanol/14-responsive-web-design-22/learn-css-grid-by-building-a-magazine/6148f34ebedc2274bceeb99c.md index 56295908289..8cb0ca6277e 100644 --- a/curriculum/challenges/espanol/14-responsive-web-design-22/learn-css-grid-by-building-a-magazine/6148f34ebedc2274bceeb99c.md +++ b/curriculum/challenges/espanol/14-responsive-web-design-22/learn-css-grid-by-building-a-magazine/6148f34ebedc2274bceeb99c.md @@ -7,27 +7,27 @@ dashedName: step-77 # --description-- -Now that the magazine layout is finished, you need to make it responsive. +Ahora que el diseño de la revista está terminado, debe hacerlo receptivo. -Start with a `@media` query for `only screen` with a `max-width` of `720px`. Inside, create an `.image-wrapper` selector and give it a `grid-template-columns` property of `1fr`. +Comience con una consulta `@media` para `only screen` con un `max-width` de `720px`. Dentro, crea un selector `.image-wrapper` y dale una propiedad `grid-template-columns` de `1fr`. -This will collapse the three images into one column on smaller screens. +Esto colapsará las tres imágenes en una columna en pantallas más pequeñas. # --hints-- -You should have a new `@media` rule for `only screen and (max-width: 720px)`. +Debes tener una nueva regla `@media` para `only screen and (max-width: 720px)`. ```js assert(new __helpers.CSSHelp(document).getCSSRules('media')?.[0]?.media?.mediaText === 'only screen and (max-width: 720px)'); ``` -Your new `@media` rule should have an `.image-wrapper` selector. +Su nueva regla `@media` debe tener un selector `.image-wrapper`. ```js assert(new __helpers.CSSHelp(document).getCSSRules('media')?.[0]?.cssRules?.[0]?.selectorText === '.image-wrapper'); ``` -Your new `.image-wrapper` selector should have a `grid-template-columns` property of `1fr`. +Su nuevo selector `.image-wrapper` debe tener una propiedad `grid-template-columns` de `1fr`. ```js assert(new __helpers.CSSHelp(document).getCSSRules('media')?.[0]?.cssRules?.[0]?.style?.gridTemplateColumns === '1fr'); diff --git a/curriculum/challenges/espanol/14-responsive-web-design-22/learn-css-grid-by-building-a-magazine/6148f600cde42b7670c2611f.md b/curriculum/challenges/espanol/14-responsive-web-design-22/learn-css-grid-by-building-a-magazine/6148f600cde42b7670c2611f.md index 7327d4b96d6..a9549d28a6f 100644 --- a/curriculum/challenges/espanol/14-responsive-web-design-22/learn-css-grid-by-building-a-magazine/6148f600cde42b7670c2611f.md +++ b/curriculum/challenges/espanol/14-responsive-web-design-22/learn-css-grid-by-building-a-magazine/6148f600cde42b7670c2611f.md @@ -7,25 +7,25 @@ dashedName: step-78 # --description-- -Create another `@media` query for `only screen` with a `max-width` of `600px`. Within, create a `.text-with-images` rule and give it a `grid-template-columns` property of `1fr`. +Crear otro `@media` consulta `only screen` con un `max-width` de `600px`. Dentro, cree una regla `.text-with-images` y asígnele una propiedad `grid-template-columns` de `1fr`. -This will collapse your bottom text area into a single column on smaller screens. +Esto colapsará el área de texto inferior en una sola columna en pantallas más pequeñas. # --hints-- -You should create a new `@media` query for `only screen and (max-width: 600px)`. This should be below your previous `@media` query. +Debe crear una nueva consulta `@media` para `only screen and (max-width: 600px)`. Esto debería estar debajo de su consulta anterior `@media`. ```js assert(new __helpers.CSSHelp(document).getCSSRules('media')?.[1]?.media?.mediaText === 'only screen and (max-width: 600px)'); ``` -Your new `@media` query should have a `.text-with-images` selector. +Su nueva consulta `@media` debe tener un selector `.text-with-images`. ```js assert(new __helpers.CSSHelp(document).getCSSRules('media')?.[1]?.cssRules?.[0]?.selectorText === '.text-with-images'); ``` -Your new `.text-with-images` selector should have a `grid-template-columns` property with a value of `1fr`. +Su nuevo selector `.text-with-images` debe tener una propiedad `grid-template-columns` con un valor de `1fr`. ```js assert(new __helpers.CSSHelp(document).getCSSRules('media')?.[1]?.cssRules?.[0]?.style?.gridTemplateColumns === '1fr'); diff --git a/curriculum/challenges/espanol/14-responsive-web-design-22/learn-css-grid-by-building-a-magazine/6148f693e0728f77c87f3020.md b/curriculum/challenges/espanol/14-responsive-web-design-22/learn-css-grid-by-building-a-magazine/6148f693e0728f77c87f3020.md index de3c1946b75..cc8380b1020 100644 --- a/curriculum/challenges/espanol/14-responsive-web-design-22/learn-css-grid-by-building-a-magazine/6148f693e0728f77c87f3020.md +++ b/curriculum/challenges/espanol/14-responsive-web-design-22/learn-css-grid-by-building-a-magazine/6148f693e0728f77c87f3020.md @@ -7,17 +7,17 @@ dashedName: step-79 # --description-- -Create a third `@media` query for `only screen` with a `max-width` of `550px`. Within, create a `.hero-title` selector with a `font-size` set to `6rem`, a `.hero-subtitle, .author, .quote, .list-title` selector with a `font-size` set to `1.8rem`, a `.social-icons` selector with a `font-size` set to `2rem`, and a `.text` selector with a `font-size` set to `1.6rem`. +Cree una tercera consulta `@media` para `only screen` con un `max-width` de `550px`. Dentro, crea un selector `.hero-title` con un `font-size` establecido en `6rem`, un `.hero-subtitle, .author, .quote, .list-title` selector con un `font-size` establecido en `1.8rem`, un selector `.social-icons` con un `font-size` establecido en `2rem`, y un selector `.text` con un `font-size` establecido en `1.6rem`. # --hints-- -You should have a new `@media` query for `only screen` with a `max-width` of `550px`. This should come after your previous two. +Debería tener una nueva consulta `@media` para `only screen` con un `max-width` de `550px`. Esto debería venir después de los dos anteriores. ```js assert(new __helpers.CSSHelp(document).getCSSRules('media')?.[2]?.media?.mediaText === 'only screen and (max-width: 550px)'); ``` -Your new `@media` rule should have a `.hero-title` selector, a `.hero-subtitle, .author, .quote, .list-title` selector, a `.social-icons` selector, and a `.text` selector. These selectors should be in this order. +Su nueva regla `@media` debe tener un selector `.hero-title`, un selector `.hero-subtitle, .author, .quote, .list-title`, un selector `.social-icons` y un selector `.text`. Estos selectores deben estar en este orden. ```js assert(new __helpers.CSSHelp(document).getCSSRules('media')?.[2]?.cssRules?.[0]?.selectorText === '.hero-title'); @@ -26,25 +26,25 @@ assert(new __helpers.CSSHelp(document).getCSSRules('media')?.[2]?.cssRules?.[2]? assert(new __helpers.CSSHelp(document).getCSSRules('media')?.[2]?.cssRules?.[3]?.selectorText === '.text'); ``` -Your `.hero-title` selector should have a `font-size` set to `6rem`. +Su selector `.hero-title` debe tener un `font-size` establecido en `6rem`. ```js assert(new __helpers.CSSHelp(document).getCSSRules('media')?.[2]?.cssRules?.[0]?.style?.fontSize === '6rem'); ``` -Your `.hero-subtitle, .author, .quote, .list-title` selector should have a `font-size` set to `1.8rem`. +Su selector `.hero-subtitle, .author, .quote, .list-title` debe tener un `font-size` establecido en `1.8rem`. ```js assert(new __helpers.CSSHelp(document).getCSSRules('media')?.[2]?.cssRules?.[1]?.style?.fontSize === '1.8rem'); ``` -Your `.social-icons` selector should have a `font-size` set to `2rem`. +Su selector `.social-icons` debe tener un `font-size` establecido en `2rem`. ```js assert(new __helpers.CSSHelp(document).getCSSRules('media')?.[2]?.cssRules?.[2]?.style?.fontSize === '2rem'); ``` -Your `.text` selector should have a `font-size` set to `1.6rem`. +Su selector `.text` debe tener un `font-size` establecido en `1.6rem`. ```js assert(new __helpers.CSSHelp(document).getCSSRules('media')?.[2]?.cssRules?.[3]?.style?.fontSize === '1.6rem'); diff --git a/curriculum/challenges/espanol/14-responsive-web-design-22/learn-css-grid-by-building-a-magazine/6148f6f7d8914c78e93136ca.md b/curriculum/challenges/espanol/14-responsive-web-design-22/learn-css-grid-by-building-a-magazine/6148f6f7d8914c78e93136ca.md index 8acea1076cc..cbe774b82a8 100644 --- a/curriculum/challenges/espanol/14-responsive-web-design-22/learn-css-grid-by-building-a-magazine/6148f6f7d8914c78e93136ca.md +++ b/curriculum/challenges/espanol/14-responsive-web-design-22/learn-css-grid-by-building-a-magazine/6148f6f7d8914c78e93136ca.md @@ -7,25 +7,25 @@ dashedName: step-80 # --description-- -Create one final `@media` query for `only screen` with a `max-width` of `420px`. Within, create a `.hero-title` selector with a `font-size` property set to `4.5rem`. +Cree una consulta final de `@media` para `only screen` con un `max-width` de `420px`. Dentro, cree un selector `.hero-title` con una propiedad `font-size` establecida en `4.5rem`. -Congratulations! Your magazine is now complete. +¡Felicidades! Su revista ahora está completa. # --hints-- -You should have a new `@media` query for `only screen and (max-width: 420px)`. This should be the last query in the `@media` query list. +Debería tener una nueva consulta `@media` para `only screen and (max-width: 420px)`. Esta debería ser la última consulta en la lista de consultas `@media`. ```js assert.equal(new __helpers.CSSHelp(document).getCSSRules('media')?.[3]?.media?.mediaText, 'only screen and (max-width: 420px)'); ``` -Your new `@media` query should have a `.hero-title` selector. +Su nueva consulta `@media` debe tener un selector `.hero-title`. ```js assert(new __helpers.CSSHelp(document).getCSSRules('media')?.[3]?.cssRules?.[0]?.selectorText === '.hero-title'); ``` -Your `.hero-title` selector should have a `font-size` property set to `4.5rem`. +Su selector `.hero-title` debe tener una propiedad `font-size` establecida en `4.5rem`. ```js assert(new __helpers.CSSHelp(document).getCSSRules('media')?.[3]?.cssRules?.[0]?.style?.fontSize === '4.5rem'); diff --git a/curriculum/challenges/espanol/14-responsive-web-design-22/learn-css-grid-by-building-a-magazine/614e0e503b110f76d3ac2ff6.md b/curriculum/challenges/espanol/14-responsive-web-design-22/learn-css-grid-by-building-a-magazine/614e0e503b110f76d3ac2ff6.md index 5bf18489ed3..95bbe4af95b 100644 --- a/curriculum/challenges/espanol/14-responsive-web-design-22/learn-css-grid-by-building-a-magazine/614e0e503b110f76d3ac2ff6.md +++ b/curriculum/challenges/espanol/14-responsive-web-design-22/learn-css-grid-by-building-a-magazine/614e0e503b110f76d3ac2ff6.md @@ -7,11 +7,11 @@ dashedName: step-43 # --description-- -You should remove the temporary `width` attribute before writing the CSS for your `.hero-img`. +Debe eliminar el atributo temporal `width` antes de escribir el CSS para su `.hero-img`. # --hints-- -Your `.hero-img` should not have a `width` attribute. +Tu `.hero-img` no debe tener un atributo `width`. ```js assert.isNull(document.querySelector('.hero-img')?.getAttribute('width')); diff --git a/curriculum/challenges/espanol/14-responsive-web-design-22/learn-css-grid-by-building-a-magazine/614e0e588f0e8a772a8a81a6.md b/curriculum/challenges/espanol/14-responsive-web-design-22/learn-css-grid-by-building-a-magazine/614e0e588f0e8a772a8a81a6.md index 64f270c49fb..e83ac1d9068 100644 --- a/curriculum/challenges/espanol/14-responsive-web-design-22/learn-css-grid-by-building-a-magazine/614e0e588f0e8a772a8a81a6.md +++ b/curriculum/challenges/espanol/14-responsive-web-design-22/learn-css-grid-by-building-a-magazine/614e0e588f0e8a772a8a81a6.md @@ -7,13 +7,13 @@ dashedName: step-6 # --description-- -Your image currently takes up a lot of space. To better see what you are working on, add a `width` attribute to the `img` element, with a value of `400`. +Su imagen actualmente ocupa mucho espacio. Para ver mejor en qué está trabajando, agregue un atributo `width` al elemento `img`, con un valor de `400`. -You will remove this later on when you have worked on the CSS. +Lo eliminará más adelante cuando haya trabajado en el CSS. # --hints-- -Your `img` element should have a `width` attribute set to `400`. +Su elemento `img` debe tener un atributo `width` establecido en `400`. ```js assert(document.querySelector('img')?.getAttribute('width') === '400'); diff --git a/curriculum/challenges/espanol/14-responsive-web-design-22/learn-css-grid-by-building-a-magazine/6165d3b702a5d92ad970b30c.md b/curriculum/challenges/espanol/14-responsive-web-design-22/learn-css-grid-by-building-a-magazine/6165d3b702a5d92ad970b30c.md index 1c03932407b..c74ae46cf2a 100644 --- a/curriculum/challenges/espanol/14-responsive-web-design-22/learn-css-grid-by-building-a-magazine/6165d3b702a5d92ad970b30c.md +++ b/curriculum/challenges/espanol/14-responsive-web-design-22/learn-css-grid-by-building-a-magazine/6165d3b702a5d92ad970b30c.md @@ -7,53 +7,53 @@ dashedName: step-5 # --description-- -After your `img` element, add an `h1` element with the `class` set to `hero-title` and the text set to `OUR NEW CURRICULUM`, followed by a `p` element with the `class` set to `hero-subtitle` and the text set to `Our efforts to restructure our curriculum with a more project-based focus`. +Después de su elemento `img`, agregue un elemento `h1` con `class` establecido en `hero-title` y el texto establecido en `OUR NEW CURRICULUM`, seguido de un elemento `p` con `class` establecido en `hero-subtitle` y el texto establecido en `Our efforts to restructure our curriculum with a more project-based focus`. # --hints-- -You should create an `h1` element. +Debe crear un elemento `h1`. ```js assert.exists(document.querySelector('h1')); ``` -Your `h1` element should come after your `img` element. +Su elemento `h1` debe ir después de su elemento `img`. ```js assert(document.querySelector('h1')?.previousElementSibling?.localName === 'img'); ``` -Your `h1` element should have the `class` set to `hero-title`. +Tu elemento `h1` debe tener `class` establecido en `hero-title`. ```js assert(document.querySelector('h1')?.className === 'hero-title'); ``` -Your `h1` element should have the text set to `OUR NEW CURRICULUM`. +Su elemento `h1` debe tener el texto establecido en `OUR NEW CURRICULUM`. ```js assert(document.querySelector('h1')?.textContent === 'OUR NEW CURRICULUM'); ``` -You should create a new `p` element. +Debe crear un nuevo elemento `p`. ```js assert.exists(document.querySelector('p')); ``` -Your `p` element should come after your `h1` element. +Tu elemento `p` debe ir después de tu elemento `h1`. ```js assert(document.querySelector('p')?.previousElementSibling?.localName === 'h1'); ``` -Your `p` element should have the `class` set to `hero-subtitle`. +Tu elemento `p` debe tener `class` establecido en `hero-subtitle`. ```js assert(document.querySelector('p')?.className === 'hero-subtitle'); ``` -Your `p` element should have the text set to `Our efforts to restructure our curriculum with a more project-based focus`. +Su elemento `p` debe tener el texto establecido en `Our efforts to restructure our curriculum with a more project-based focus`. ```js assert.equal(document.querySelector('p')?.textContent?.trim()?.replace(/\s{2,}/, ' '), 'Our efforts to restructure our curriculum with a more project-based focus'); diff --git a/curriculum/challenges/espanol/14-responsive-web-design-22/learn-css-grid-by-building-a-magazine/6169cd8a558aa8434e0ad7f6.md b/curriculum/challenges/espanol/14-responsive-web-design-22/learn-css-grid-by-building-a-magazine/6169cd8a558aa8434e0ad7f6.md index 09462a84f12..e7532d57d73 100644 --- a/curriculum/challenges/espanol/14-responsive-web-design-22/learn-css-grid-by-building-a-magazine/6169cd8a558aa8434e0ad7f6.md +++ b/curriculum/challenges/espanol/14-responsive-web-design-22/learn-css-grid-by-building-a-magazine/6169cd8a558aa8434e0ad7f6.md @@ -7,11 +7,11 @@ dashedName: step-8 # --description-- -The `Referer` HTTP header contains information about the address or URL of a page that a user might be visiting from. This information can be used in analytics to track how many users from your page visit freecodecamp.org, for example. Setting the `rel` attribute to `noreferrer` omits this information from the HTTP request. Give your `a` element a `rel` attribute set to `noreferrer`. +El encabezado HTTP `Referer` contiene información sobre la dirección o URL de una página desde la que un usuario podría estar visitando. Esta información se puede usar en análisis para rastrear cuántos usuarios de su página visitan freecodecamp.org, por ejemplo. Establecer el atributo `rel` en `noreferrer` omite esta información de la solicitud HTTP. Asigne a su elemento `a` un atributo `rel` establecido en `noreferrer`. # --hints-- -Your `a` element should have the `rel` set to `noreferrer`. +Su elemento `a` debe tener `rel` establecido en `noreferrer`. ```js assert(document.querySelector('div')?.querySelector('p')?.firstElementChild?.getAttribute('rel') === 'noreferrer'); diff --git a/curriculum/challenges/espanol/14-responsive-web-design-22/learn-css-transforms-by-building-a-penguin/619665c9abd72906f3ad30f9.md b/curriculum/challenges/espanol/14-responsive-web-design-22/learn-css-transforms-by-building-a-penguin/619665c9abd72906f3ad30f9.md index afa1dca6850..1dbf921f192 100644 --- a/curriculum/challenges/espanol/14-responsive-web-design-22/learn-css-transforms-by-building-a-penguin/619665c9abd72906f3ad30f9.md +++ b/curriculum/challenges/espanol/14-responsive-web-design-22/learn-css-transforms-by-building-a-penguin/619665c9abd72906f3ad30f9.md @@ -9,60 +9,60 @@ dashedName: step-1 Estarás construyendo un feliz pingüino Flappy y explorando aún más las transformaciones y animaciones CSS en el proceso. -Begin with your basic HTML boilerplate. Include the `DOCTYPE` declaration, `html` element with a language set to English, the appropriate `meta` tags, a `head`, `body`, and `title` element. Also, link your stylesheet to the page. +Comience con su plantilla HTML básica. Incluya la declaración `DOCTYPE`, el elemento `html` con un idioma establecido en inglés, las etiquetas `meta` apropiadas, un `head`, `body` y elemento `title`. Además, vincule su hoja de estilo a la página. # --hints-- -Your code should have a `` declaration. +El código debe tener una declaración ``. ```js assert(code.match(//i)); ``` -Your code should have an `html` element. +El código debe tener un elemento `html`. ```js assert.equal(document.querySelectorAll('html')?.length, 1); ``` -Your `html` element should have an opening tag with a `lang` attribute of `en`. +El elemento `html` debe tener etiqueta de apertura con el atributo `lang` con el valor `en`. ```js assert(code.match(//gi)); ``` -Your `html` element should have a closing tag. +El elemento `html` debe tener etiqueta de cierre. ```js assert(code.match(/<\/html\s*>/gi)); ``` -Your code should have a `head` element within the `html` element. +El código debe tener un elemento `head` dentro del elemento `html`. ```js assert.equal(document.querySelectorAll('head')?.length, 1); ``` -Your code should have a `body` element within the `html` element. +El código debe tener un elemento `body` dentro del elemento `html`. ```js assert.equal(document.querySelectorAll('body')?.length, 1); ``` -Your `head` element should come before your `body` element. +El elemento `head` debe estar antes del elemento `body`. ```js assert.equal(document.querySelector('body')?.previousElementSibling?.tagName, 'HEAD'); ``` -You should have two `meta` elements. +Debe haber dos elementos `meta`. ```js const meta = document.querySelectorAll('meta'); assert.equal(meta?.length, 2); ``` -One `meta` element should have a `name` set to `viewport`, and `content` set to `width=device-width, initial-scale=1.0`. +Uno de los elementos `meta` debe tener el atributo `name` establecido a `viewport` y el atributo `content` establecido a `width=device-width, initial-scale=1.0`. ```js const meta = [...document.querySelectorAll('meta')]; @@ -70,7 +70,7 @@ const target = meta?.find(m => m?.getAttribute('name') === 'viewport' && m?.getA assert.exists(target); ``` -The other `meta` element should have the `charset` attribute set to `UTF-8`. +El otro elemento `meta` debe tener el atributo `charset` establecido a `UTF-8`. ```js const meta = [...document.querySelectorAll('meta')]; @@ -78,33 +78,33 @@ const target = meta?.find(m => !m?.getAttribute('name') && !m?.getAttribute('con assert.exists(target); ``` -Your code should have a `title` element. +El código debe tener un elemento `title`. ```js const title = document.querySelector('title'); assert.exists(title); ``` -Your `title` should have some text. +El elemento `title` debe contener algún texto. ```js const title = document.querySelector('title'); assert.isAtLeast(title?.textContent?.length, 1); ``` -Your code should have a `link` element. +El código debe tener un elemento `link`. ```js assert.exists(document.querySelector('link')); ``` -Your `link` element should be within your `head` element. +El elemento `link` debe estar dentro del elemento `head`. ```js assert(code.match(/[\w\W\s]*[\w\W\s]*<\/head>/i)); ``` -Your `link` element should have a `rel` attribute with the value `stylesheet`. +El elemento `link` debe tener el atributo `rel` con el valor `stylesheet`. ```js const link_element = document.querySelector('link'); @@ -112,7 +112,7 @@ const rel = link_element.getAttribute("rel"); assert.equal(rel, "stylesheet"); ``` -Your `link` element should have an `href` attribute with the value `styles.css`. +El elemento `link` debe tener el atributo `href` con el valor `styles.css`. ```js const link = document.querySelector('link'); diff --git a/curriculum/challenges/espanol/14-responsive-web-design-22/learn-css-transforms-by-building-a-penguin/61967e74a8e3690ab6292daa.md b/curriculum/challenges/espanol/14-responsive-web-design-22/learn-css-transforms-by-building-a-penguin/61967e74a8e3690ab6292daa.md index 8595958663d..d33b6e23c09 100644 --- a/curriculum/challenges/espanol/14-responsive-web-design-22/learn-css-transforms-by-building-a-penguin/61967e74a8e3690ab6292daa.md +++ b/curriculum/challenges/espanol/14-responsive-web-design-22/learn-css-transforms-by-building-a-penguin/61967e74a8e3690ab6292daa.md @@ -7,23 +7,23 @@ dashedName: step-2 # --description-- -Target the `body` element to set the `background` to a linear gradient angled 45 degrees clockwise, starting at `rgb(118, 201, 255)` and ending at `rgb(247, 255, 222)`. +Apunte al elemento `body` para establecer el `background` en un degradado lineal inclinado 45 grados en el sentido de las agujas del reloj, comenzando en `rgb(118, 201, 255)` y terminando en `rgb(247, 255, 222)`. # --hints-- -You should use the `body` element selector. +Debe utilizar el selector de elementos `body`. ```js assert.match(code, /body\s*\{/); ``` -You should use the `background` property in the `body` selector. +Debe usar la propiedad `background` en el selector `body`. ```js assert.isTrue(new __helpers.CSSHelp(document).isPropertyUsed('background')); ``` -You should set `background` to `linear-gradient(45deg, rgb(118, 201, 255), rgb(247, 255, 222))`. +Debe establecer `background` en `linear-gradient(45deg, rgb(118, 201, 255), rgb(247, 255, 222))`. ```js assert.include(['linear-gradient(45deg,rgb(118,201,255),rgb(247,255,222))', 'rgba(0,0,0,0)linear-gradient(45deg,rgb(118,201,255),rgb(247,255,222))repeatscroll0%0%'], new __helpers.CSSHelp(document).getStyle('body')?.getPropVal('background', true)); diff --git a/curriculum/challenges/espanol/14-responsive-web-design-22/learn-css-transforms-by-building-a-penguin/61968df2acd5550bf1616c34.md b/curriculum/challenges/espanol/14-responsive-web-design-22/learn-css-transforms-by-building-a-penguin/61968df2acd5550bf1616c34.md index a90cc75dff9..208779dc69f 100644 --- a/curriculum/challenges/espanol/14-responsive-web-design-22/learn-css-transforms-by-building-a-penguin/61968df2acd5550bf1616c34.md +++ b/curriculum/challenges/espanol/14-responsive-web-design-22/learn-css-transforms-by-building-a-penguin/61968df2acd5550bf1616c34.md @@ -7,17 +7,17 @@ dashedName: step-3 # --description-- -Normalise your page's sizing, by removing the `body` element's `margin` and `padding`. +Normaliza el tamaño de tu página, eliminando el elemento `body` `margin` y `padding` del elemento. # --hints-- -You should give `body` a `margin` of `0`. +Debes darle a `body` un `margin` de `0`. ```js assert.equal(new __helpers.CSSHelp(document).getStyle('body')?.margin, '0px'); ``` -You should give `body` a `padding` of `0`. +Debes darle a `body` un `padding` de `0`. ```js assert.equal(new __helpers.CSSHelp(document).getStyle('body')?.padding, '0px'); diff --git a/curriculum/challenges/espanol/14-responsive-web-design-22/learn-css-transforms-by-building-a-penguin/61968e9243a4090cc805531c.md b/curriculum/challenges/espanol/14-responsive-web-design-22/learn-css-transforms-by-building-a-penguin/61968e9243a4090cc805531c.md index a01c300f082..871fc3527ac 100644 --- a/curriculum/challenges/espanol/14-responsive-web-design-22/learn-css-transforms-by-building-a-penguin/61968e9243a4090cc805531c.md +++ b/curriculum/challenges/espanol/14-responsive-web-design-22/learn-css-transforms-by-building-a-penguin/61968e9243a4090cc805531c.md @@ -7,11 +7,11 @@ dashedName: step-5 # --description-- -Remove both the horizontal and vertical scrollbars, using only one property. +Elimine las barras de desplazamiento horizontal y vertical, usando solo una propiedad. # --hints-- -You should give `body` an `overflow` of `--fcc-expected--`. But found `--fcc-actual--`. +Deberías darle a `body` un `overflow` de `--fcc-expected--`. Pero se encontró `--fcc-actual--`. ```js assert.equal(new __helpers.CSSHelp(document).getStyle('body')?.overflow, 'hidden'); diff --git a/curriculum/challenges/espanol/14-responsive-web-design-22/learn-css-transforms-by-building-a-penguin/61968f8877c6720d6d61aaf5.md b/curriculum/challenges/espanol/14-responsive-web-design-22/learn-css-transforms-by-building-a-penguin/61968f8877c6720d6d61aaf5.md index d12bfb57f8a..ca007b2479e 100644 --- a/curriculum/challenges/espanol/14-responsive-web-design-22/learn-css-transforms-by-building-a-penguin/61968f8877c6720d6d61aaf5.md +++ b/curriculum/challenges/espanol/14-responsive-web-design-22/learn-css-transforms-by-building-a-penguin/61968f8877c6720d6d61aaf5.md @@ -7,23 +7,23 @@ dashedName: step-6 # --description-- -Within the `body`, add a `div` with a `class` of `ground`. +Dentro del `body`, agrega un `div` con una `class` de `ground`. # --hints-- -You should add a new `div`. +Debe agregar un nuevo `div`. ```js assert.exists(document.querySelector('div')); ``` -You should give the `div` a `class` of `ground`. +Debes darle al `div` una `class` de `ground`. ```js assert.include(document.querySelector('div')?.className, 'ground'); ``` -You should place the `div` within the `body`. +Debe colocar el `div` dentro del `body`. ```js assert.exists(document.querySelector('body > div.ground')); diff --git a/curriculum/challenges/espanol/14-responsive-web-design-22/learn-css-transforms-by-building-a-penguin/619691693bc14b0e528f5a20.md b/curriculum/challenges/espanol/14-responsive-web-design-22/learn-css-transforms-by-building-a-penguin/619691693bc14b0e528f5a20.md index 9e38562e3d3..eac3b530e30 100644 --- a/curriculum/challenges/espanol/14-responsive-web-design-22/learn-css-transforms-by-building-a-penguin/619691693bc14b0e528f5a20.md +++ b/curriculum/challenges/espanol/14-responsive-web-design-22/learn-css-transforms-by-building-a-penguin/619691693bc14b0e528f5a20.md @@ -7,23 +7,23 @@ dashedName: step-7 # --description-- -Target the `.ground` element, and set its `width` to take up the full width of the viewport. Then, set the `height` to `400px`. +Apunte al elemento `.ground` y establezca su `width` para que ocupe todo el ancho de la ventanilla. Luego, establezca el `height` en `400px`. # --hints-- -You should use the `.ground` selector. +Debe usar el selector `.ground`. ```js assert.match(code, /\.ground\s*\{/); ``` -You should give the `.ground` element a `width` of `100vw`. +Debe asignar al elemento `.ground` un `width` de `100vw`. ```js assert.equal(new __helpers.CSSHelp(document).getStyle('.ground')?.width, '100vw'); ``` -You should give the `.ground` element a `height` of `400px`. +Debe asignar al elemento `.ground` un `height` de `400px`. ```js assert.equal(new __helpers.CSSHelp(document).getStyle('.ground')?.height, '400px'); diff --git a/curriculum/challenges/espanol/14-responsive-web-design-22/learn-css-transforms-by-building-a-penguin/6196928658b6010f28c39484.md b/curriculum/challenges/espanol/14-responsive-web-design-22/learn-css-transforms-by-building-a-penguin/6196928658b6010f28c39484.md index 40d79cf33e4..1f91af38e4c 100644 --- a/curriculum/challenges/espanol/14-responsive-web-design-22/learn-css-transforms-by-building-a-penguin/6196928658b6010f28c39484.md +++ b/curriculum/challenges/espanol/14-responsive-web-design-22/learn-css-transforms-by-building-a-penguin/6196928658b6010f28c39484.md @@ -7,11 +7,11 @@ dashedName: step-8 # --description-- -Give the `.ground` element a `background` with a linear gradient angled 90 degrees clockwise, starting at `rgb(88, 175, 236)` and ending at `rgb(182, 255, 255)`. +Asigne al elemento `.ground` un `background` con un degradado lineal en ángulo de 90 grados en el sentido de las agujas del reloj, comenzando en `rgb(88, 175, 236)` y terminando en `rgb(182, 255, 255)`. # --hints-- -You should give `.ground` a `background` of `linear-gradient(90deg, rgb(88, 175, 236), rgb(182, 255, 255))`. +Debe dar a `.ground` un `background` de `linear-gradient(90deg, rgb(88, 175, 236), rgb(182, 255, 255))`. ```js assert.include(['linear-gradient(90deg,rgb(88,175,236),rgb(182,255,255))', 'rgba(0,0,0,0)linear-gradient(90deg,rgb(88,175,236),rgb(182,255,255))repeatscroll0%0%'], new __helpers.CSSHelp(document).getStyle('.ground')?.getPropVal('background', true)); diff --git a/curriculum/challenges/espanol/14-responsive-web-design-22/learn-css-transforms-by-building-a-penguin/619692ff79f5770fc6d8c0b4.md b/curriculum/challenges/espanol/14-responsive-web-design-22/learn-css-transforms-by-building-a-penguin/619692ff79f5770fc6d8c0b4.md index ee2c602d289..9f62ac91502 100644 --- a/curriculum/challenges/espanol/14-responsive-web-design-22/learn-css-transforms-by-building-a-penguin/619692ff79f5770fc6d8c0b4.md +++ b/curriculum/challenges/espanol/14-responsive-web-design-22/learn-css-transforms-by-building-a-penguin/619692ff79f5770fc6d8c0b4.md @@ -7,23 +7,23 @@ dashedName: step-10 # --description-- -Above the `.ground` element, add a `div` with a `class` of `penguin`. This `div` will contain Flappy Penguin. +Encima del elemento `.ground`, añade un `div` con `class` igual a `penguin`. Este `div` contendrá al Flappy Penguin. # --hints-- -You should add a new `div` within the `body`. +Debes añadir un nuevo `div` dentro de `body`. ```js assert.equal(document.querySelectorAll('body > div')?.length, 2); ``` -You should give the `div` a `class` of `penguin`. +Este nuevo `div` debe tener el atributo `class` establecido a `penguin`. ```js assert.include(document.querySelector('body > div:not(.ground)')?.className, 'penguin'); ``` -You should place `div.penguin` before `div.ground`. +El nuevo elemento `div.penguin` debe estar encima de `div.ground`. ```js assert.strictEqual(document.querySelector('.ground')?.previousElementSibling, document.querySelector('.penguin')); diff --git a/curriculum/challenges/espanol/14-responsive-web-design-22/learn-css-transforms-by-building-a-penguin/6196990f966e8f10a40094f6.md b/curriculum/challenges/espanol/14-responsive-web-design-22/learn-css-transforms-by-building-a-penguin/6196990f966e8f10a40094f6.md index 4b6e11501c1..26690e28702 100644 --- a/curriculum/challenges/espanol/14-responsive-web-design-22/learn-css-transforms-by-building-a-penguin/6196990f966e8f10a40094f6.md +++ b/curriculum/challenges/espanol/14-responsive-web-design-22/learn-css-transforms-by-building-a-penguin/6196990f966e8f10a40094f6.md @@ -7,23 +7,23 @@ dashedName: step-11 # --description-- -Target the `.penguin` element, and set its `width` and `height` to `300px`. +Apunte al elemento `.penguin` y establezca su `width` y `height` en `300px`. # --hints-- -You should use the `.penguin` selector. +Debe usar el selector `.penguin`. ```js assert.match(code, /\.penguin\s*\{/); ``` -You should give `.penguin` a `width` of `300px`. +Debe dar a `.penguin` un `width` de `300px`. ```js assert.equal(new __helpers.CSSHelp(document).getStyle('.penguin')?.width, '300px'); ``` -You should give `.penguin` a `height` of `300px`. +Debe dar a `.penguin` un `height` de `300px`. ```js assert.equal(new __helpers.CSSHelp(document).getStyle('.penguin')?.height, '300px'); diff --git a/curriculum/challenges/espanol/14-responsive-web-design-22/learn-css-transforms-by-building-a-penguin/619699c10a0f6e11591d73c4.md b/curriculum/challenges/espanol/14-responsive-web-design-22/learn-css-transforms-by-building-a-penguin/619699c10a0f6e11591d73c4.md index 26c1dca67e8..28725f1607e 100644 --- a/curriculum/challenges/espanol/14-responsive-web-design-22/learn-css-transforms-by-building-a-penguin/619699c10a0f6e11591d73c4.md +++ b/curriculum/challenges/espanol/14-responsive-web-design-22/learn-css-transforms-by-building-a-penguin/619699c10a0f6e11591d73c4.md @@ -7,18 +7,18 @@ dashedName: step-12 # --description-- -Use the `margin` property to horizontally center the `.penguin` element, and set the `margin-top` to `75px`. +Utilice la propiedad `margin` para centrar horizontalmente el elemento `.penguin` y establezca el `margin-top` en `75px`. # --hints-- -You should give `.penguin` a `margin` of `--fcc-expected--`, but found `--fcc-actual--`. +Debe dar a `.penguin` un `margin` de `--fcc-expected--`, pero encontró `--fcc-actual--`. ```js assert.equal(new __helpers.CSSHelp(document).getStyle('.penguin')?.marginRight, 'auto'); assert.equal(new __helpers.CSSHelp(document).getStyle('.penguin')?.marginLeft, 'auto'); ``` -You should give `.penguin` a `margin-top` of `--fcc-expected--`, but found `--fcc-actual--`. +Debe dar a `.penguin` un `margin-top` de `--fcc-expected--`, pero encontrado `--fcc-actual--`. ```js assert.equal(new __helpers.CSSHelp(document).getStyle('.penguin')?.marginTop, '75px'); diff --git a/curriculum/challenges/espanol/14-responsive-web-design-22/learn-css-transforms-by-building-a-penguin/61969aa6acef5b12200f672e.md b/curriculum/challenges/espanol/14-responsive-web-design-22/learn-css-transforms-by-building-a-penguin/61969aa6acef5b12200f672e.md index dc0915cfdf8..2c76ecc89bd 100644 --- a/curriculum/challenges/espanol/14-responsive-web-design-22/learn-css-transforms-by-building-a-penguin/61969aa6acef5b12200f672e.md +++ b/curriculum/challenges/espanol/14-responsive-web-design-22/learn-css-transforms-by-building-a-penguin/61969aa6acef5b12200f672e.md @@ -7,25 +7,25 @@ dashedName: step-13 # --description-- -To create some scenery in the background, you will add two mountains. +Para crear un paisaje de fondo, agregará dos montañas. -Above the `.penguin` element, add a `div` with a `class` of `left-mountain`. +Sobre el elemento `.penguin`, agrega un `div` con una `class` de `left-mountain`. # --hints-- -You should add a new `div` within `body`. Expected to see `--fcc-expected--` `div` elements, but found `--fcc-actual--`. +Debe agregar un nuevo `div` dentro de `body`. Se esperaba ver elementos `--fcc-expected--` `div`, pero se encontraron `--fcc-actual--`. ```js assert.equal(document.querySelectorAll('body > div')?.length, 3); ``` -You should give the `div` a `class` of `left-mountain`. +Debes darle al `div` una `class` de `left-mountain`. ```js assert.include(document.querySelector('body > div:not(.ground, .penguin)')?.className, 'left-mountain'); ``` -You should place `.left-mountain` before `.penguin`. +Debe colocar `.left-mountain` antes de `.penguin`. ```js assert.strictEqual(document.querySelector('.penguin')?.previousElementSibling, document.querySelector('.left-mountain')); diff --git a/curriculum/challenges/espanol/14-responsive-web-design-22/learn-css-transforms-by-building-a-penguin/61969c487ced6f12db8fef94.md b/curriculum/challenges/espanol/14-responsive-web-design-22/learn-css-transforms-by-building-a-penguin/61969c487ced6f12db8fef94.md index 0f0c9e3bae6..e82f92d1dc1 100644 --- a/curriculum/challenges/espanol/14-responsive-web-design-22/learn-css-transforms-by-building-a-penguin/61969c487ced6f12db8fef94.md +++ b/curriculum/challenges/espanol/14-responsive-web-design-22/learn-css-transforms-by-building-a-penguin/61969c487ced6f12db8fef94.md @@ -7,29 +7,29 @@ dashedName: step-14 # --description-- -Target the `.left-mountain` element, and set its `width` and `height` to `300px`. Then, set the `background` to a linear gradient starting at `rgb(203, 241, 228)` and ending at `rgb(80, 183, 255)`. +Apunte al elemento `.left-mountain` y establezca su `width` y `height` en `300px`. Luego, establece el `background` en un degradado lineal que comienza en `rgb(203, 241, 228)` y termina en `rgb(80, 183, 255)`. # --hints-- -You should use the `.left-mountain` selector. +Debes usar el selector `.left-mountain`. ```js assert.match(code, /\.left-mountain\s*\{/); ``` -You should give `.left-mountain` a `width` of `300px`. Expected `--fcc-actual--` to be `--fcc-expected--`. +Debes darle a `.left-mountain` un `width` de `300px`. Se esperaba encontrar `--fcc-actual--` y se encontró `--fcc-expected--`. ```js assert.equal(new __helpers.CSSHelp(document).getStyle('.left-mountain')?.width, '300px'); ``` -You should give `.left-mountain` a `height` of `300px`. Expected `--fcc-actual--` to be `--fcc-expected--`. +Debes darle a `.left-mountain` una `height` de `300px`. Se esperaba que `--fcc-actual--` fuera `--fcc-expected--`. ```js assert.equal(new __helpers.CSSHelp(document).getStyle('.left-mountain')?.height, '300px'); ``` -You should give `.left-mountain` a `background` of `linear-gradient(rgb(203, 241, 228), rgb(80, 183, 255))`. +Debes darle a `.left-mountain` un `background` de `linear-gradient(rgb(203, 241, 228), rgb(80, 183, 255))`. ```js assert.include(['linear-gradient(rgb(203,241,228),rgb(80,183,255))', 'rgba(0,0,0,0)linear-gradient(rgb(203,241,228),rgb(80,183,255))repeatscroll0%0%'], new __helpers.CSSHelp(document).getStyle('.left-mountain')?.getPropVal('background', true)); diff --git a/curriculum/challenges/espanol/14-responsive-web-design-22/learn-css-transforms-by-building-a-penguin/61969d66cfcdba137d021558.md b/curriculum/challenges/espanol/14-responsive-web-design-22/learn-css-transforms-by-building-a-penguin/61969d66cfcdba137d021558.md index ff5b6b7369d..68febe6e958 100644 --- a/curriculum/challenges/espanol/14-responsive-web-design-22/learn-css-transforms-by-building-a-penguin/61969d66cfcdba137d021558.md +++ b/curriculum/challenges/espanol/14-responsive-web-design-22/learn-css-transforms-by-building-a-penguin/61969d66cfcdba137d021558.md @@ -7,11 +7,11 @@ dashedName: step-15 # --description-- -To prevent the mountain from pushing the `.ground` element, adjust its `position` to prevent it from taking up space in the page layout. +Para evitar que la montaña empuje el elemento `.ground`, ajusta su `position` para evitar que ocupe espacio en el diseño de la página. # --hints-- -You should give `.left-mountain` a `position` of `absolute`. Found `--fcc-actual--` instead of `--fcc-expected--`. +Debes darle a `.left-mountain` una `position` de `absolute`.deberia. Se encontró `--fcc-actual--` en lugar de `--fcc-expected--`. ```js assert.equal(new __helpers.CSSHelp(document).getStyle('.left-mountain')?.position, 'absolute'); diff --git a/curriculum/challenges/espanol/14-responsive-web-design-22/learn-css-transforms-by-building-a-penguin/61969e7451455614217e901b.md b/curriculum/challenges/espanol/14-responsive-web-design-22/learn-css-transforms-by-building-a-penguin/61969e7451455614217e901b.md index ff06556d12a..ada251dcb03 100644 --- a/curriculum/challenges/espanol/14-responsive-web-design-22/learn-css-transforms-by-building-a-penguin/61969e7451455614217e901b.md +++ b/curriculum/challenges/espanol/14-responsive-web-design-22/learn-css-transforms-by-building-a-penguin/61969e7451455614217e901b.md @@ -7,25 +7,25 @@ dashedName: step-16 # --description-- -To make the mountain look more like a mountain, you can use the `skew` transform function, which takes two arguments. The first being an angle to shear the x-axis by, and the second being an angle to shear the y-axis by. +Para hacer que la montaña se parezca más a una montaña, puedes usar la función de transformación `skew`, que toma dos argumentos. El primero es un ángulo por el que se corta el eje x, y el segundo es un ángulo por el que se corta el eje y. -Use the `transform` property to skew the mountain by `0deg` in the x-axis and `44deg` in the y-axis. +Usa la propiedad `transform` para sesgar la montaña `0deg` en el eje x y `44deg` en el eje y. # --hints-- -You should give `.left-mountain` a `transform` property. +Debes darle a `.left-mountain` una propiedad `transform`. ```js assert.notEmpty(new __helpers.CSSHelp(document).getStyle('.left-mountain')?.transform); ``` -You should use the `skew` function on `transform`. +Debe usar la función `skew` en `transform`. ```js assert.include(new __helpers.CSSHelp(document).getStyle('.left-mountain')?.transform, 'skew'); ``` -You should give `.left-mountain` a `transform` of `skew(0deg, 44deg)`. +Debes darle a `.left-mountain` un `transform` de `skew(0deg, 44deg)`. ```js assert.equal(new __helpers.CSSHelp(document).getStyle('.left-mountain')?.getPropVal('transform', true), 'skew(0deg,44deg)'); diff --git a/curriculum/challenges/espanol/14-responsive-web-design-22/learn-css-transforms-by-building-a-penguin/6196adc17f77a714d51485f2.md b/curriculum/challenges/espanol/14-responsive-web-design-22/learn-css-transforms-by-building-a-penguin/6196adc17f77a714d51485f2.md index d9b4229713a..fc1c5253669 100644 --- a/curriculum/challenges/espanol/14-responsive-web-design-22/learn-css-transforms-by-building-a-penguin/6196adc17f77a714d51485f2.md +++ b/curriculum/challenges/espanol/14-responsive-web-design-22/learn-css-transforms-by-building-a-penguin/6196adc17f77a714d51485f2.md @@ -7,23 +7,23 @@ dashedName: step-17 # --description-- -Set the stack level of the mountain element such that it remains directly behind the `.ground` element. +Establezca el nivel de pila del elemento de la montaña de modo que permanezca directamente detrás del elemento `.ground`. # --hints-- -You should use the `z-index` property to change the stack level. +Debe usar la propiedad `z-index` para cambiar el nivel de la pila. ```js assert.notEmpty(new __helpers.CSSHelp(document).getStyle('.left-mountain')?.zIndex); ``` -You should set the `z-index` property to `2`. +Debe establecer la propiedad `z-index` en `2`. ```js assert.equal(new __helpers.CSSHelp(document).getStyle('.left-mountain')?.zIndex, '2'); ``` -You should not change the `z-index` of the `.ground` element. +No debe cambiar el `z-index` del elemento `.ground`. ```js assert.equal(new __helpers.CSSHelp(document).getStyle('.ground')?.zIndex, '3'); diff --git a/curriculum/challenges/espanol/14-responsive-web-design-22/learn-css-transforms-by-building-a-penguin/6196aead7ac7bf1584b17a7f.md b/curriculum/challenges/espanol/14-responsive-web-design-22/learn-css-transforms-by-building-a-penguin/6196aead7ac7bf1584b17a7f.md index 94729a2372a..93e28e4c899 100644 --- a/curriculum/challenges/espanol/14-responsive-web-design-22/learn-css-transforms-by-building-a-penguin/6196aead7ac7bf1584b17a7f.md +++ b/curriculum/challenges/espanol/14-responsive-web-design-22/learn-css-transforms-by-building-a-penguin/6196aead7ac7bf1584b17a7f.md @@ -7,17 +7,17 @@ dashedName: step-18 # --description-- -To overlap the mountain and `.ground` elements better, give the mountain a `margin-top` of `100px`, and the `.ground` element a `margin-top` of `-58px`. +Para superponer la montaña y los elementos`.ground` mejor, dé a la montaña un `margin-top` de `100px`, y el `.ground un elemento margin-top` de `-58px`. # --hints-- -You should give `.left-mountain` a `margin-top` of `100px`. +Debes darle a `.left-mountain` un `margin-top` de `100px`. ```js assert.equal(new __helpers.CSSHelp(document).getStyle('.left-mountain')?.marginTop, '100px'); ``` -You should give `.ground` a `margin-top` of `-58px`. +Debes darle a `.ground` un `margin-top` de `-58px`. ```js assert.equal(new __helpers.CSSHelp(document).getStyle('.ground')?.marginTop, '-58px'); diff --git a/curriculum/challenges/espanol/14-responsive-web-design-22/learn-css-transforms-by-building-a-penguin/6196ce0415498d2463989e84.md b/curriculum/challenges/espanol/14-responsive-web-design-22/learn-css-transforms-by-building-a-penguin/6196ce0415498d2463989e84.md index f4acf9c6526..e999bdd43e3 100644 --- a/curriculum/challenges/espanol/14-responsive-web-design-22/learn-css-transforms-by-building-a-penguin/6196ce0415498d2463989e84.md +++ b/curriculum/challenges/espanol/14-responsive-web-design-22/learn-css-transforms-by-building-a-penguin/6196ce0415498d2463989e84.md @@ -7,23 +7,23 @@ dashedName: step-19 # --description-- -To give the effect of a mountain range, add another mountain, by creating a new `div` immediately after `.left-mountain`, and give the new `div` the `class` of `back-mountain`. +Para dar el efecto de una cadena montañosa, agregue otra montaña creando un nuevo `div` inmediatamente después de `.left-mountain`, y asigne el nuevo `div` la `class` de `back-mountain`. # --hints-- -You should add a new `div` within `body`. +Debe agregar un nuevo `div` dentro de `body`. ```js assert.equal(document.querySelectorAll('body > div')?.length, 4); ``` -You should give the `div` a `class` of `back-mountain`. +Debes darle al `div` una `class` de `back-mountain`. ```js assert.include(document.querySelector('div:not(.left-mountain, .ground, .penguin)')?.className, 'back-mountain'); ``` -You should place `.back-mountain` after `.left-mountain`. +Debe colocar `.back-mountain` después de `.left-mountain`. ```js assert.strictEqual(document.querySelector('.left-mountain')?.nextElementSibling, document.querySelector('.back-mountain')); diff --git a/curriculum/challenges/espanol/14-responsive-web-design-22/learn-css-transforms-by-building-a-penguin/6196cee94c6da1253809dff9.md b/curriculum/challenges/espanol/14-responsive-web-design-22/learn-css-transforms-by-building-a-penguin/6196cee94c6da1253809dff9.md index 1a7c045d468..a05d1113f0e 100644 --- a/curriculum/challenges/espanol/14-responsive-web-design-22/learn-css-transforms-by-building-a-penguin/6196cee94c6da1253809dff9.md +++ b/curriculum/challenges/espanol/14-responsive-web-design-22/learn-css-transforms-by-building-a-penguin/6196cee94c6da1253809dff9.md @@ -7,29 +7,29 @@ dashedName: step-20 # --description-- -Target the `.back-mountain` element, and set its `width` and `height` to `300px`. Then, set the `background` to a linear gradient starting at `rgb(203, 241, 228)` and ending at `rgb(47, 170, 255)`. +Apunte al elemento `.back-mountain` y establezca su `width` y `height` en `300px`. Luego, establece el `background` en un degradado lineal que comienza en `rgb(203, 241, 228)` y termina en`rgb(47, 170, 255)`. # --hints-- -You should use the `.back-mountain` selector. +Debes usar el selector `.back-mountain`. ```js assert.match(code, /\.back-mountain\s*\{/); ``` -You should give `.back-mountain` a `width` of `300px`. +Debes darle a `.back-mountain` un `width` de `300px`. ```js assert.equal(new __helpers.CSSHelp(document).getStyle('.back-mountain')?.width, '300px'); ``` -You should give `.back-mountain` a `height` of `300px`. +Debe dar a `.back-mountain` un `height` de `300px`. ```js assert.equal(new __helpers.CSSHelp(document).getStyle('.back-mountain')?.height, '300px'); ``` -You should give `.back-mountain` a `background` of `linear-gradient(rgb(203, 241, 228), rgb(47, 170, 255))`. +Debe dar a `.back-mountain` un `background` de `linear-gradient(rgb(203, 241, 228), rgb(47, 170, 255))`. ```js assert.include(['linear-gradient(rgb(203,241,228),rgb(47,170,255))', 'rgba(0,0,0,0)linear-gradient(rgb(203,241,228),rgb(47,170,255))repeatscroll0%0%'], new __helpers.CSSHelp(document).getStyle('.back-mountain')?.getPropVal('background', true)); diff --git a/curriculum/challenges/espanol/14-responsive-web-design-22/learn-css-transforms-by-building-a-penguin/6196d00a5d7292262bc02f4c.md b/curriculum/challenges/espanol/14-responsive-web-design-22/learn-css-transforms-by-building-a-penguin/6196d00a5d7292262bc02f4c.md index 1982dfd73e5..4a04cc520fd 100644 --- a/curriculum/challenges/espanol/14-responsive-web-design-22/learn-css-transforms-by-building-a-penguin/6196d00a5d7292262bc02f4c.md +++ b/curriculum/challenges/espanol/14-responsive-web-design-22/learn-css-transforms-by-building-a-penguin/6196d00a5d7292262bc02f4c.md @@ -7,11 +7,11 @@ dashedName: step-21 # --description-- -Set the `position` property of the `.back-mountain` to prevent it from taking up space in the page layout. +Establezca la propiedad `position` de `.back-mountain` para evitar que ocupe espacio en el diseño de la página. # --hints-- -You should give `.back-mountain` a `position` of `absolute`. +Debe dar a `.back-mountain` un `position` de `absolute`. ```js assert.equal(new __helpers.CSSHelp(document).getStyle('.back-mountain')?.position, 'absolute'); diff --git a/curriculum/challenges/espanol/14-responsive-web-design-22/learn-css-transforms-by-building-a-penguin/6196d0cda039d026f7f78d1e.md b/curriculum/challenges/espanol/14-responsive-web-design-22/learn-css-transforms-by-building-a-penguin/6196d0cda039d026f7f78d1e.md index 5e0444eb440..df0081e7768 100644 --- a/curriculum/challenges/espanol/14-responsive-web-design-22/learn-css-transforms-by-building-a-penguin/6196d0cda039d026f7f78d1e.md +++ b/curriculum/challenges/espanol/14-responsive-web-design-22/learn-css-transforms-by-building-a-penguin/6196d0cda039d026f7f78d1e.md @@ -7,23 +7,23 @@ dashedName: step-22 # --description-- -Change the stack level of the `.back-mountain` element such that it is directly behind the `.left-mountain` element. +Cambie el nivel de pila del elemento `.back-mountain` de modo que quede directamente detrás del elemento `.left-mountain`. # --hints-- -You should use the `z-index` property to change the stack level. +Debe usar la propiedad `z-index` para cambiar el nivel de la pila. ```js assert.notEmpty(new __helpers.CSSHelp(document).getStyle('.back-mountain')?.zIndex); ``` -You should set the `z-index` property to `1`. +Debe establecer la propiedad `z-index` en `1`. ```js assert.equal(new __helpers.CSSHelp(document).getStyle('.back-mountain')?.zIndex, '1'); ``` -You should not change the `z-index` of the `.left-mountain` element. +No debe cambiar el `z-index` del elemento `.left-mountain`. ```js assert.equal(new __helpers.CSSHelp(document).getStyle('.left-mountain')?.zIndex, '2'); diff --git a/curriculum/challenges/espanol/14-responsive-web-design-22/learn-css-transforms-by-building-a-penguin/6196d1ac33c68d27dcda5796.md b/curriculum/challenges/espanol/14-responsive-web-design-22/learn-css-transforms-by-building-a-penguin/6196d1ac33c68d27dcda5796.md index d6ba6936044..a125456aeb7 100644 --- a/curriculum/challenges/espanol/14-responsive-web-design-22/learn-css-transforms-by-building-a-penguin/6196d1ac33c68d27dcda5796.md +++ b/curriculum/challenges/espanol/14-responsive-web-design-22/learn-css-transforms-by-building-a-penguin/6196d1ac33c68d27dcda5796.md @@ -7,41 +7,41 @@ dashedName: step-23 # --description-- -Rotate the `.back-mountain` element by `45deg` clockwise. Then, give it a `left` property of `110px`, and a `top` property of `225px`. +Gire el elemento `.back-mountain` por `45deg` en el sentido de las agujas del reloj. Luego, asígnele una propiedad `left` de `110px`, y una propiedad `top` de `225px`. # --hints-- -You should use the `transform` property to rotate the element. +Debe utilizar la propiedad `transform` para girar el elemento. ```js assert.notEmpty(new __helpers.CSSHelp(document).getStyle('.back-mountain')?.transform); ``` -You should give `.back-mountain` a `transform` of `--fcc-expected--`, but found `--fcc-actual--`. +Debe darle a `.back-mountain` un `transform` de `--fcc-expected--`, pero encontró `--fcc-actual--`. ```js assert.equal(new __helpers.CSSHelp(document).getStyle('.back-mountain')?.transform, 'rotate(45deg)'); ``` -You should give `.back-mountain` a `left` property. +Debe asignar a `.back-mountain` una propiedad `left`. ```js assert.isNotEmpty(new __helpers.CSSHelp(document).getStyle('.back-mountain')?.left); ``` -You should give `.back-mountain` a `left` property of `--fcc-expected--`, but found `--fcc-actual--`. +Debe dar `.back-mountain` una propiedad `left` de `--fcc-expected--`, pero encontró `--fcc-actual--`. ```js assert.equal(new __helpers.CSSHelp(document).getStyle('.back-mountain')?.left, '110px'); ``` -You should give `.back-mountain` a `top` property. +Debe asignar a `.back-mountain` una propiedad `top`. ```js assert.isNotEmpty(new __helpers.CSSHelp(document).getStyle('.back-mountain')?.top); ``` -You should give `.back-mountain` a `top` property of `--fcc-expected--`, but found `--fcc-actual--`. +Debe dar `.back-mountain` una propiedad `top` de `--fcc-expected--`, pero encontró `--fcc-actual--`. ```js assert.equal(new __helpers.CSSHelp(document).getStyle('.back-mountain')?.top, '225px'); diff --git a/curriculum/challenges/espanol/14-responsive-web-design-22/learn-css-transforms-by-building-a-penguin/6196d213d99f16287bff22ae.md b/curriculum/challenges/espanol/14-responsive-web-design-22/learn-css-transforms-by-building-a-penguin/6196d213d99f16287bff22ae.md index 0a849042d6c..52eca8a6f31 100644 --- a/curriculum/challenges/espanol/14-responsive-web-design-22/learn-css-transforms-by-building-a-penguin/6196d213d99f16287bff22ae.md +++ b/curriculum/challenges/espanol/14-responsive-web-design-22/learn-css-transforms-by-building-a-penguin/6196d213d99f16287bff22ae.md @@ -7,23 +7,23 @@ dashedName: step-24 # --description-- -To finish the background, add a sun, by creating a new `div` element immediately after the `.back-mountain` element, and give it the class of `sun`. +Para terminar el fondo, agregue un sol, creando un nuevo elemento `div` inmediatamente después del elemento `.back-mountain`, y asígnele la clase de `sun`. # --hints-- -You should add a new `div` element to `body`. Expected `--fcc-expected--` `div` elements, but found `--fcc-actual--`. +Debe agregar un nuevo elemento `div` a `body`. Se esperaban elementos `--fcc-expected--` `div`, pero se encontró `--fcc-actual--`. ```js assert.equal(document.querySelectorAll('body > div')?.length, 5); ``` -You should give the new `div` element a `class` of `sun`. +Debe asignar al nuevo elemento `div` un `class` de `sun`. ```js assert.include(document.querySelector('div:not(.back-mountain, .left-mountain, .penguin, .ground)')?.className, 'sun'); ``` -You should place the new `div` element immediately after the `.back-mountain` element. +Debe colocar el nuevo elemento `div` inmediatamente después del elemento `.back-mountain`. ```js assert.strictEqual(document.querySelector('div.back-mountain')?.nextElementSibling, document.querySelector('div.sun')); diff --git a/curriculum/challenges/espanol/14-responsive-web-design-22/learn-css-transforms-by-building-a-penguin/6196d2c0f22ca0293107c048.md b/curriculum/challenges/espanol/14-responsive-web-design-22/learn-css-transforms-by-building-a-penguin/6196d2c0f22ca0293107c048.md index 5a621fab1d3..7df19d775ea 100644 --- a/curriculum/challenges/espanol/14-responsive-web-design-22/learn-css-transforms-by-building-a-penguin/6196d2c0f22ca0293107c048.md +++ b/curriculum/challenges/espanol/14-responsive-web-design-22/learn-css-transforms-by-building-a-penguin/6196d2c0f22ca0293107c048.md @@ -7,29 +7,29 @@ dashedName: step-25 # --description-- -Give the `.sun` element a `width` and `height` of `200px`, and a `background-color` of `yellow`. +Asigne al elemento `.sun` un `width` y `height` de `200px`, y un `background-color` de `yellow`. # --hints-- -You should use the `.sun` selector. +Debe utilizar el selector `.sun`. ```js assert.match(code, /\.sun\s*\{/); ``` -You should give `.sun` a `width` of `200px`. +Debe dar a `.sun` un `width` de `200px`. ```js assert.equal(new __helpers.CSSHelp(document).getStyle('.sun')?.width, '200px'); ``` -You should give `.sun` a `height` of `200px`. +Debe dar a `.sun` un `height` de `200px`. ```js assert.equal(new __helpers.CSSHelp(document).getStyle('.sun')?.height, '200px'); ``` -You should give `.sun` a `background-color` of `yellow`. +Debe dar a `.sun` un `background-color` de `yellow`. ```js assert.equal(new __helpers.CSSHelp(document).getStyle('.sun')?.backgroundColor, 'yellow'); diff --git a/curriculum/challenges/espanol/14-responsive-web-design-22/learn-css-transforms-by-building-a-penguin/6196d32d1340d829f0f6f57d.md b/curriculum/challenges/espanol/14-responsive-web-design-22/learn-css-transforms-by-building-a-penguin/6196d32d1340d829f0f6f57d.md index 45f8cf5cc44..eddf1e1e72e 100644 --- a/curriculum/challenges/espanol/14-responsive-web-design-22/learn-css-transforms-by-building-a-penguin/6196d32d1340d829f0f6f57d.md +++ b/curriculum/challenges/espanol/14-responsive-web-design-22/learn-css-transforms-by-building-a-penguin/6196d32d1340d829f0f6f57d.md @@ -7,17 +7,17 @@ dashedName: step-26 # --description-- -Set the `position` property of the sun to prevent it from taking up space in the page layout, and set the `border-radius` such that the sun's shape is a circle. +Establezca la propiedad `position` del sol para evitar que ocupe espacio en el diseño de página y establezca el `border-radius` de modo que la forma del sol sea un círculo. # --hints-- -You should give `.sun` a `position` of `absolute`. +Debe dar a `.sun` un `position` de `absolute`. ```js assert.equal(new __helpers.CSSHelp(document).getStyle('.sun')?.position, 'absolute'); ``` -You should give `.sun` a `border-radius` of `50%`. +Debe dar a `.sun` un `border-radius` de `50%`. ```js assert.equal(new __helpers.CSSHelp(document).getStyle('.sun')?.borderRadius, '50%'); diff --git a/curriculum/challenges/espanol/14-responsive-web-design-22/learn-css-transforms-by-building-a-penguin/6196d41d40bf9b2aaea5d520.md b/curriculum/challenges/espanol/14-responsive-web-design-22/learn-css-transforms-by-building-a-penguin/6196d41d40bf9b2aaea5d520.md index 134552ebdc2..a15667a897c 100644 --- a/curriculum/challenges/espanol/14-responsive-web-design-22/learn-css-transforms-by-building-a-penguin/6196d41d40bf9b2aaea5d520.md +++ b/curriculum/challenges/espanol/14-responsive-web-design-22/learn-css-transforms-by-building-a-penguin/6196d41d40bf9b2aaea5d520.md @@ -7,17 +7,17 @@ dashedName: step-27 # --description-- -Position the sun in the top right corner of the screen such that `75px` of its top and right edges are off screen. +Coloque el sol en la esquina superior derecha de la pantalla a `75px` de modo que sus bordes superior y derecho queden fuera de la pantalla. # --hints-- -You should give `.sun` a `top` of `--fcc-expected--`, but found `--fcc-actual--`. +Debe dar a `.sun` un `top` de `--fcc-expected--`, pero encontrado `--fcc-actual--`. ```js assert.equal(new __helpers.CSSHelp(document).getStyle('.sun')?.top, '-75px'); ``` -You should give `.sun` a `right` of `--fcc-expected--`, but found `--fcc-actual--`. +Debe dar a `.sun` un `right` de `--fcc-expected--`, pero fue encontrado `--fcc-actual--`. ```js assert.equal(new __helpers.CSSHelp(document).getStyle('.sun')?.right, '-75px'); diff --git a/curriculum/challenges/espanol/14-responsive-web-design-22/learn-css-transforms-by-building-a-penguin/6197cff995d03905b0cca8ad.md b/curriculum/challenges/espanol/14-responsive-web-design-22/learn-css-transforms-by-building-a-penguin/6197cff995d03905b0cca8ad.md index 7b9951ff183..2ee5e9b4f83 100644 --- a/curriculum/challenges/espanol/14-responsive-web-design-22/learn-css-transforms-by-building-a-penguin/6197cff995d03905b0cca8ad.md +++ b/curriculum/challenges/espanol/14-responsive-web-design-22/learn-css-transforms-by-building-a-penguin/6197cff995d03905b0cca8ad.md @@ -7,25 +7,25 @@ dashedName: step-28 # --description-- -Your penguin will consist of two main sections: the head, and the body. +Tu pingüino constará de dos secciones principales: la cabeza y el cuerpo. -Within `.penguin`, add two new `div` elements. The first with a `class` of `penguin-head`, and the second with a `class` of `penguin-body`. +Dentro de `.penguin`, agregue dos nuevos elementos `div`. El primero con un `class` de `penguin-head`, y el segundo con un `class` de `penguin-body`. # --hints-- -You should add two new `div` elements to `.penguin`. Expected `--fcc-expected--` `.penguin > div` elements, but found `--fcc-actual--`. +Debe agregar dos nuevos elementos `div` a `.penguin`. Esperado `--fcc-expected--` `.penguin > div` elementos, pero se encontró `--fcc-actual--`. ```js assert.equal(document.querySelectorAll('.penguin > div')?.length, 2); ``` -You should give the first `div` a `class` of `penguin-head`. +Debe dar al primer `div` una `class` de `penguin-head`. ```js assert.include(document.querySelector('.penguin > div:nth-of-type(1)')?.className, 'penguin-head'); ``` -You should give the second `div` a `class` of `penguin-body`. +Debe dar al segundo `div` una `class` de `penguin-body`. ```js assert.include(document.querySelector('.penguin > div:nth-of-type(2)')?.className, 'penguin-body'); diff --git a/curriculum/challenges/espanol/14-responsive-web-design-22/learn-css-transforms-by-building-a-penguin/6197f40a16afea068c7e60c8.md b/curriculum/challenges/espanol/14-responsive-web-design-22/learn-css-transforms-by-building-a-penguin/6197f40a16afea068c7e60c8.md index b6e95dd497f..e184c8d7218 100644 --- a/curriculum/challenges/espanol/14-responsive-web-design-22/learn-css-transforms-by-building-a-penguin/6197f40a16afea068c7e60c8.md +++ b/curriculum/challenges/espanol/14-responsive-web-design-22/learn-css-transforms-by-building-a-penguin/6197f40a16afea068c7e60c8.md @@ -7,29 +7,29 @@ dashedName: step-29 # --description-- -Change the stack level of the `.penguin` element such that it appears in front of the `.ground` element, and give it a `position` of `relative`. +Cambie el nivel de pila del elemento `.penguin` de modo que aparezca delante del elemento `.ground` y asígnele una `position` de `relative`. # --hints-- -You should use the `z-index` property to change the stack level. +Debe usar la propiedad `z-index` para cambiar el nivel de pila. ```js assert.notEmpty(new __helpers.CSSHelp(document).getStyle('.penguin')?.zIndex); ``` -You should give the `.penguin` element a `z-index` of `4`. +Debe asignar al elemento `.penguin` un `z-index` de `4`. ```js assert.equal(new __helpers.CSSHelp(document).getStyle('.penguin')?.zIndex, '4'); ``` -You should give `.penguin` a `position` property. +Debe asignar a `.penguin` una propiedad `position`. ```js assert.isNotEmpty(new __helpers.CSSHelp(document).getStyle('.penguin')?.position); ``` -You should give `.penguin` a `position` of `relative`. +Debe dar a `.penguin` un `position` de `relative`. ```js assert.equal(new __helpers.CSSHelp(document).getStyle('.penguin')?.position, 'relative'); diff --git a/curriculum/challenges/espanol/14-responsive-web-design-22/learn-css-transforms-by-building-a-penguin/6197f667297bb30a552ce017.md b/curriculum/challenges/espanol/14-responsive-web-design-22/learn-css-transforms-by-building-a-penguin/6197f667297bb30a552ce017.md index 7e735857e3f..7b5a3f444d3 100644 --- a/curriculum/challenges/espanol/14-responsive-web-design-22/learn-css-transforms-by-building-a-penguin/6197f667297bb30a552ce017.md +++ b/curriculum/challenges/espanol/14-responsive-web-design-22/learn-css-transforms-by-building-a-penguin/6197f667297bb30a552ce017.md @@ -7,17 +7,17 @@ dashedName: step-9 # --description-- -As the `.ground` element will be third in the stacking context of the page layout, set its `z-index` to `3`, and `position` to `absolute`. +Como el elemento `.ground` será el tercero en el contexto de apilamiento del diseño de página, establezca su `z-index` en `3` y `position` en `absolute`. # --hints-- -You should give `.ground` a `z-index` of `3`. +Debe dar a `.ground` un `z-index` de `3`. ```js assert.equal(new __helpers.CSSHelp(document).getStyle('.ground')?.zIndex, '3'); ``` -You should give `.ground` a `position` of `absolute`. +Debe dar a `.ground` un `position` de `absolute`. ```js assert.equal(new __helpers.CSSHelp(document).getStyle('.ground')?.position, 'absolute'); diff --git a/curriculum/challenges/espanol/14-responsive-web-design-22/learn-css-transforms-by-building-a-penguin/61993b72e874e709b8dfd666.md b/curriculum/challenges/espanol/14-responsive-web-design-22/learn-css-transforms-by-building-a-penguin/61993b72e874e709b8dfd666.md index 7cbc159baa1..93d6cfd068c 100644 --- a/curriculum/challenges/espanol/14-responsive-web-design-22/learn-css-transforms-by-building-a-penguin/61993b72e874e709b8dfd666.md +++ b/curriculum/challenges/espanol/14-responsive-web-design-22/learn-css-transforms-by-building-a-penguin/61993b72e874e709b8dfd666.md @@ -7,29 +7,29 @@ dashedName: step-30 # --description-- -Target the `.penguin-head` element, and give it a `width` half of its parent's, and a `height` of `45%`. Then, set the `background` to a linear gradient at `45deg` starting at `gray`, and ending at `rgb(239, 240, 228)`. +Apunte al elemento `.penguin-head` y asígnele un `width` la mitad del de su padre y un `height` de `45%`. Luego, establece el `background` en un degradado lineal a `45deg` comenzando en `gray` y terminando en `rgb(239, 240, 228)`. # --hints-- -You should use the `.penguin-head` selector. +Debes usar el selector `.penguin-head`. ```js assert.match(code, /\.penguin-head\s*\{/); ``` -You should give `.penguin-head` a `width` of `50%`. +Debes darle a `.penguin-head` un `width` de `50%`. ```js assert.equal(new __helpers.CSSHelp(document).getStyle('.penguin-head')?.width, '50%'); ``` -You should give `.penguin-head` a `height` of `45%`. +Debes darle a `.penguin-head` una `height` de `45%`. ```js assert.equal(new __helpers.CSSHelp(document).getStyle('.penguin-head')?.height, '45%'); ``` -You should give `.penguin-head` a `background` of `linear-gradient(45deg, gray, rgb(239, 240, 228))`. +Debes darle a `.penguin-head` un `background` de `linear-gradient(45deg, gray, rgb(239, 240, 228))`. ```js assert.include(['linear-gradient(45deg,gray,rgb(239,240,228))', 'rgba(0,0,0,0)linear-gradient(45deg,gray,rgb(239,240,228))repeatscroll0%0%'], new __helpers.CSSHelp(document).getStyle('.penguin-head')?.getPropVal('background', true)); diff --git a/curriculum/challenges/espanol/14-responsive-web-design-22/learn-css-transforms-by-building-a-penguin/61993cf26a8e0f0a553db223.md b/curriculum/challenges/espanol/14-responsive-web-design-22/learn-css-transforms-by-building-a-penguin/61993cf26a8e0f0a553db223.md index 970aa017513..c1fb6da8ec5 100644 --- a/curriculum/challenges/espanol/14-responsive-web-design-22/learn-css-transforms-by-building-a-penguin/61993cf26a8e0f0a553db223.md +++ b/curriculum/challenges/espanol/14-responsive-web-design-22/learn-css-transforms-by-building-a-penguin/61993cf26a8e0f0a553db223.md @@ -7,13 +7,13 @@ dashedName: step-31 # --description-- -_Most_ penguins do not have a square head. +_La mayoría_ de los pingüinos no tienen la cabeza cuadrada. -Give the penguin a slightly oval head by setting the radius of the top corners to `70%` and the radius of the bottom corners to `65%`. +Dale al pingüino una cabeza ligeramente ovalada estableciendo el radio de las esquinas superiores en `70%` y el radio de las esquinas inferiores en `65%`. # --hints-- -You should give `.penguin-head` a `border-radius` of `70% 70% 65% 65%`. +Debes darle a `.penguin-head` un `border-radius` de `70% 70% 65% 65%`. ```js // Maybe check for individual border-radius properties? diff --git a/curriculum/challenges/espanol/14-responsive-web-design-22/learn-css-transforms-by-building-a-penguin/61993dbb35adf30b10d49e38.md b/curriculum/challenges/espanol/14-responsive-web-design-22/learn-css-transforms-by-building-a-penguin/61993dbb35adf30b10d49e38.md index 141c77a2e31..1d9281d980c 100644 --- a/curriculum/challenges/espanol/14-responsive-web-design-22/learn-css-transforms-by-building-a-penguin/61993dbb35adf30b10d49e38.md +++ b/curriculum/challenges/espanol/14-responsive-web-design-22/learn-css-transforms-by-building-a-penguin/61993dbb35adf30b10d49e38.md @@ -7,29 +7,29 @@ dashedName: step-32 # --description-- -Target the `.penguin-body` element, and give it a `width` of `53%`, and a `height` of `45%`. Then, set the `background` to a linear gradient at `45deg`, `rgb(134, 133, 133)` from `0%`, `rgb(234, 231, 231)` from `25%`, and `white` from `67%`. +Apunte al elemento `.penguin-body` y asígnele un `width` de `53%`, y un `height` de `45%`. Luego, establezca el `background` en un degradado lineal a `45deg`, `rgb(134, 133, 133)` desde `0%`, `rgb(234, 231, 231)` del `25%`, y `white` del `67%`. # --hints-- -You should use the `.penguin-body` selector. +Debe usar el selector `.penguin-body`. ```js assert.match(code, /\.penguin-body\s*\{/); ``` -You should give `.penguin-body` a `width` of `--fcc-expected--`, but found `--fcc-actual--`. +Debe darle a `.penguin-body` un `width` de `--fcc-expected--`, pero encontró `--fcc-actual--`. ```js assert.equal(new __helpers.CSSHelp(document).getStyle('.penguin-body')?.width, '53%'); ``` -You should give `.penguin-body` a `height` of `--fcc-expected--`, but found `--fcc-actual--`. +Debe darle a `.penguin-body` una `height` de `--fcc-expected--`, pero encontró `--fcc-actual--`. ```js assert.equal(new __helpers.CSSHelp(document).getStyle('.penguin-body')?.height, '45%'); ``` -You should give `.penguin-body` a `background` of `linear-gradient(45deg, rgb(134, 133, 133) 0%, rgb(234, 231, 231) 25%, white 67%)`. +Debes darle a `.penguin-body` un `background` de `linear-gradient(45deg, rgb(134, 133, 133) 0%, rgb(234, 231, 231) 25%, white 67%)`. ```js assert.include(['linear-gradient(45deg,rgb(134,133,133)0%,rgb(234,231,231)25%,white67%)', 'rgba(0,0,0,0)linear-gradient(45deg,rgb(134,133,133)0%,rgb(234,231,231)25%,white67%)repeatscroll0%0%'], new __helpers.CSSHelp(document).getStyle('.penguin-body')?.getPropVal('background', true)); diff --git a/curriculum/challenges/espanol/14-responsive-web-design-22/learn-css-transforms-by-building-a-penguin/61993e9adc9e9a0bb4d28fff.md b/curriculum/challenges/espanol/14-responsive-web-design-22/learn-css-transforms-by-building-a-penguin/61993e9adc9e9a0bb4d28fff.md index 4447ca345c1..831d80be8d2 100644 --- a/curriculum/challenges/espanol/14-responsive-web-design-22/learn-css-transforms-by-building-a-penguin/61993e9adc9e9a0bb4d28fff.md +++ b/curriculum/challenges/espanol/14-responsive-web-design-22/learn-css-transforms-by-building-a-penguin/61993e9adc9e9a0bb4d28fff.md @@ -7,13 +7,13 @@ dashedName: step-33 # --description-- -Another interesting fact about penguins is that they do not have square bodies. +Otro dato interesante sobre los pingüinos es que no tienen cuerpos cuadrados. -Use the `border-radius` property with a value of `80% 80% 100% 100%`, to give the penguin a slightly rounded body. +Usa la propiedad `border-radius` con un valor de `80% 80% 100% 100%`, para darle al pingüino un cuerpo ligeramente redondeado. # --hints-- -You should give `.penguin-body` a `border-radius` of `80% 80% 100% 100%`. +Debes darle a `.penguin-body` un `border-radius` de `80% 80% 100% 100%`. ```js assert.equal(new __helpers.CSSHelp(document).getStyle('.penguin-body')?.borderRadius, '80% 80% 100% 100%'); diff --git a/curriculum/challenges/espanol/14-responsive-web-design-22/learn-css-transforms-by-building-a-penguin/6199409834ccaf0d10736596.md b/curriculum/challenges/espanol/14-responsive-web-design-22/learn-css-transforms-by-building-a-penguin/6199409834ccaf0d10736596.md index 32b60cb8c94..40809b69f5b 100644 --- a/curriculum/challenges/espanol/14-responsive-web-design-22/learn-css-transforms-by-building-a-penguin/6199409834ccaf0d10736596.md +++ b/curriculum/challenges/espanol/14-responsive-web-design-22/learn-css-transforms-by-building-a-penguin/6199409834ccaf0d10736596.md @@ -7,17 +7,17 @@ dashedName: step-34 # --description-- -Target all descendent elements of the `.penguin` element, and give them a `position` of `absolute`. +Diríjase a todos los elementos descendientes del elemento `.penguin` y asígneles una `position` de `absolute`. # --hints-- -You should use the `.penguin *` selector. +Debe usar el selector `.penguin *`. ```js assert.match(code, /\.penguin\s*\*\s*\{/); ``` -You should give `.penguin *` a `position` of `absolute`. +Debe dar a `.penguin *` un `position` de `absolute`. ```js assert.equal(new __helpers.CSSHelp(document).getStyle('.penguin *')?.position, 'absolute'); diff --git a/curriculum/challenges/espanol/14-responsive-web-design-22/learn-css-transforms-by-building-a-penguin/6199429802b7c10dc79ff871.md b/curriculum/challenges/espanol/14-responsive-web-design-22/learn-css-transforms-by-building-a-penguin/6199429802b7c10dc79ff871.md index efb99ad439e..dfb7b38e493 100644 --- a/curriculum/challenges/espanol/14-responsive-web-design-22/learn-css-transforms-by-building-a-penguin/6199429802b7c10dc79ff871.md +++ b/curriculum/challenges/espanol/14-responsive-web-design-22/learn-css-transforms-by-building-a-penguin/6199429802b7c10dc79ff871.md @@ -7,29 +7,29 @@ dashedName: step-35 # --description-- -Position the `.penguin-head` element `10%` from the top, and `25%` from the left of its parent. +Coloque el elemento `.penguin-head` `10%` desde la parte superior y `25%` a la izquierda de su padre. # --hints-- -You should give `.penguin-head` a `top` property. +Debe asignar a `.penguin-head` una propiedad `top`. ```js assert.isNotEmpty(new __helpers.CSSHelp(document).getStyle('.penguin-head')?.top); ``` -You should give `.penguin-head` a `top` property of `--fcc-expected--`, but found `--fcc-actual--`. +Debe dar a `.penguin-head` una propiedad `top` de `--fcc-expected--`, pero encontró `--fcc-actual--`. ```js assert.equal(new __helpers.CSSHelp(document).getStyle('.penguin-head')?.top, '10%'); ``` -You should give `.penguin-head` a `left` property. +Debe asignar a `.penguin-head` una propiedad `left`. ```js assert.isNotEmpty(new __helpers.CSSHelp(document).getStyle('.penguin-head')?.left); ``` -You should give `.penguin-head` a `left` property of `--fcc-expected--`, but found `--fcc-actual--`. +Debe dar a `.penguin-head` una propiedad `left` de `--fcc-expected--`, pero encontró `--fcc-actual--`. ```js assert.equal(new __helpers.CSSHelp(document).getStyle('.penguin-head')?.left, '25%'); diff --git a/curriculum/challenges/espanol/14-responsive-web-design-22/learn-css-transforms-by-building-a-penguin/619943285a41720e6370d985.md b/curriculum/challenges/espanol/14-responsive-web-design-22/learn-css-transforms-by-building-a-penguin/619943285a41720e6370d985.md index e7b9904b5f2..b28b8f3490f 100644 --- a/curriculum/challenges/espanol/14-responsive-web-design-22/learn-css-transforms-by-building-a-penguin/619943285a41720e6370d985.md +++ b/curriculum/challenges/espanol/14-responsive-web-design-22/learn-css-transforms-by-building-a-penguin/619943285a41720e6370d985.md @@ -7,29 +7,29 @@ dashedName: step-36 # --description-- -Position the `.penguin-body` element `40%` from the top, and `23.5%` from the left of its parent. +Coloque el elemento `.penguin-body` `40%` desde la parte superior, y `23.5%` desde la izquierda de su padre. # --hints-- -You should give `.penguin-body` a `top` property. +Debe asignar a `.penguin-body` una propiedad `top`. ```js assert.isNotEmpty(new __helpers.CSSHelp(document).getStyle('.penguin-body')?.top); ``` -You should give `.penguin-body` a `top` property of `--fcc-expected--`, but found `--fcc-actual--`. +Debe dar `.penguin-body` una propiedad `top` de `--fcc-expected--`, pero encontró `--fcc-actual--`. ```js assert.equal(new __helpers.CSSHelp(document).getStyle('.penguin-body')?.top, '40%'); ``` -You should give `.penguin-body` a `left` property. +Debe asignar a `.penguin-body` una propiedad `left`. ```js assert.isNotEmpty(new __helpers.CSSHelp(document).getStyle('.penguin-body')?.left); ``` -You should give `.penguin-body` a `left` property of `--fcc-expected--`, but found `--fcc-actual--`. +Debe dar a `.penguin-body` una propiedad `left` de `--fcc-expected--`, pero encontró `--fcc-actual--`. ```js assert.equal(new __helpers.CSSHelp(document).getStyle('.penguin-body')?.left, '23.5%'); diff --git a/curriculum/challenges/espanol/14-responsive-web-design-22/learn-css-transforms-by-building-a-penguin/619943876b706d0f35c01dbc.md b/curriculum/challenges/espanol/14-responsive-web-design-22/learn-css-transforms-by-building-a-penguin/619943876b706d0f35c01dbc.md index a79834b273d..a3465281b12 100644 --- a/curriculum/challenges/espanol/14-responsive-web-design-22/learn-css-transforms-by-building-a-penguin/619943876b706d0f35c01dbc.md +++ b/curriculum/challenges/espanol/14-responsive-web-design-22/learn-css-transforms-by-building-a-penguin/619943876b706d0f35c01dbc.md @@ -7,17 +7,17 @@ dashedName: step-37 # --description-- -Change the stack level of the `.penguin-head` element such that it appears in front of the `.penguin-body` element. +Cambie el nivel de pila del elemento `.penguin-head` de modo que aparezca delante del elemento `.penguin-body`. # --hints-- -You should use the `z-index` property to change the stack level. +Debe usar la propiedad `z-index` para cambiar el nivel de pila. ```js assert.notEmpty(new __helpers.CSSHelp(document).getStyle('.penguin-head')?.zIndex); ``` -You should give the `.penguin-head` element a `z-index` of `1`. +Debe asignar al elemento `.penguin-head` un `z-index` de `1`. ```js assert.equal(new __helpers.CSSHelp(document).getStyle('.penguin-head')?.zIndex, '1'); diff --git a/curriculum/challenges/espanol/14-responsive-web-design-22/learn-css-transforms-by-building-a-penguin/6199442866286d0ff421a4fc.md b/curriculum/challenges/espanol/14-responsive-web-design-22/learn-css-transforms-by-building-a-penguin/6199442866286d0ff421a4fc.md index d814fe8775f..6e15bc5d684 100644 --- a/curriculum/challenges/espanol/14-responsive-web-design-22/learn-css-transforms-by-building-a-penguin/6199442866286d0ff421a4fc.md +++ b/curriculum/challenges/espanol/14-responsive-web-design-22/learn-css-transforms-by-building-a-penguin/6199442866286d0ff421a4fc.md @@ -7,17 +7,17 @@ dashedName: step-38 # --description-- -To give the penguin body a crest, create a pseudo-element that is the first child of the `.penguin-body` element. Set the `content` property of the pseudo-element to an empty string. +Para darle una cresta al cuerpo del pingüino, cree un pseudoelemento que sea el primer hijo del elemento `.penguin-body`. Establezca la propiedad `content` del pseudoelemento en una cadena vacía. # --hints-- -You should use the `.penguin-body::before` selector. +Debe usar el selector `.penguin-body::before`. ```js assert.match(code, /\.penguin-body::before\s*\{/); ``` -You should give `.penguin-body::before` a `content` of `""`. +Debe dar a `.penguin-body::before` un `content` de `""`. ```js assert.equal(new __helpers.CSSHelp(document).getStyle('.penguin-body::before')?.content, '""'); diff --git a/curriculum/challenges/espanol/14-responsive-web-design-22/learn-css-transforms-by-building-a-penguin/619be73b3c806006ccc00bb0.md b/curriculum/challenges/espanol/14-responsive-web-design-22/learn-css-transforms-by-building-a-penguin/619be73b3c806006ccc00bb0.md index 429993fb300..e22131a8955 100644 --- a/curriculum/challenges/espanol/14-responsive-web-design-22/learn-css-transforms-by-building-a-penguin/619be73b3c806006ccc00bb0.md +++ b/curriculum/challenges/espanol/14-responsive-web-design-22/learn-css-transforms-by-building-a-penguin/619be73b3c806006ccc00bb0.md @@ -7,23 +7,23 @@ dashedName: step-40 # --description-- -Give the pseudo-element a `width` half that of its parent, a `height` of `45%`, and a `background-color` of `gray`. +Dale al pseudo-elemento un `width` la mitad que su padre, un `height` de `45%`, y un `background-color` de `gray`. # --hints-- -You should give `.penguin-body::before` a `width` of `50%`. +Debe dar `.penguin-body::before` un `width` de `50%`. ```js assert.equal(new __helpers.CSSHelp(document).getStyle('.penguin-body::before')?.width, '50%'); ``` -You should give `.penguin-body::before` a `height` of `45%`. +Debe dar a `.penguin-body::before` un `height` de `45%`. ```js assert.equal(new __helpers.CSSHelp(document).getStyle('.penguin-body::before')?.height, '45%'); ``` -You should give `.penguin-body::before` a `background-color` of `--fcc-expected--`, but found `--fcc-actual--`. +Debe dar a `.penguin-body::before` un `background-color` de `--fcc-expected--`, pero encontró `--fcc-actual--`. ```js assert.equal(new __helpers.CSSHelp(document).getStyle('.penguin-body::before')?.backgroundColor, 'gray'); diff --git a/curriculum/challenges/espanol/14-responsive-web-design-22/learn-css-transforms-by-building-a-penguin/619be7af7b0bf60770f5d2a4.md b/curriculum/challenges/espanol/14-responsive-web-design-22/learn-css-transforms-by-building-a-penguin/619be7af7b0bf60770f5d2a4.md index 2150fa88cf1..62e5f509dc7 100644 --- a/curriculum/challenges/espanol/14-responsive-web-design-22/learn-css-transforms-by-building-a-penguin/619be7af7b0bf60770f5d2a4.md +++ b/curriculum/challenges/espanol/14-responsive-web-design-22/learn-css-transforms-by-building-a-penguin/619be7af7b0bf60770f5d2a4.md @@ -7,17 +7,17 @@ dashedName: step-41 # --description-- -Position the pseudo-element `10%` from the top and `25%` from the left of its parent. +Coloque el pseudo-elemento `10%` desde la parte superior y `25%` desde la izquierda de su padre. # --hints-- -You should give `.penguin-body::before` a `top` of `--fcc-expected--`, but found `--fcc-actual--`. +Deberías dar a `.penguin-body::before` un `top` de `--fcc-expected--`, pero encontrado `--fcc-actual--`. ```js assert.equal(new __helpers.CSSHelp(document).getStyle('.penguin-body::before')?.top, '10%'); ``` -You should give `.penguin-body::before` a `left` of `--fcc-expected--`, but found `--fcc-actual--`. +Deberías dar a `.penguin-body::before` un `left` de `--fcc-expected--`, pero encontró `--fcc-actual--`. ```js assert.equal(new __helpers.CSSHelp(document).getStyle('.penguin-body::before')?.left, '25%'); diff --git a/curriculum/challenges/espanol/14-responsive-web-design-22/learn-css-transforms-by-building-a-penguin/619be80062551a080e32c821.md b/curriculum/challenges/espanol/14-responsive-web-design-22/learn-css-transforms-by-building-a-penguin/619be80062551a080e32c821.md index c193a8d4f63..b9ddc3db538 100644 --- a/curriculum/challenges/espanol/14-responsive-web-design-22/learn-css-transforms-by-building-a-penguin/619be80062551a080e32c821.md +++ b/curriculum/challenges/espanol/14-responsive-web-design-22/learn-css-transforms-by-building-a-penguin/619be80062551a080e32c821.md @@ -7,17 +7,17 @@ dashedName: step-42 # --description-- -Round off the crest, by giving the pseudo-element bottom corners a radius of `100%`, leaving the top corners at `0%`. +Redondee la cresta dando a las esquinas inferiores del pseudo-elemento un radio de `100%`, dejando las esquinas superiores en `0%`. # --hints-- -You should use the `border-radius` property to round off the crest. +Debe usar la propiedad `border-radius` para redondear la cresta. ```js assert.notEmpty(new __helpers.CSSHelp(document).getStyle('.penguin-body::before')?.borderRadius); ``` -You should give `.penguin-body::before` a `border-radius` of `0% 0% 100% 100%`. +Debes darle a `.penguin-body::before` un `border-radius` de `0% 0% 100% 100%`. ```js assert.equal(new __helpers.CSSHelp(document).getStyle('.penguin-body::before')?.borderBottomLeftRadius, '100%'); diff --git a/curriculum/challenges/espanol/14-responsive-web-design-22/learn-css-transforms-by-building-a-penguin/619be8ce4ea49008c5bfbc30.md b/curriculum/challenges/espanol/14-responsive-web-design-22/learn-css-transforms-by-building-a-penguin/619be8ce4ea49008c5bfbc30.md index ea6e14c57bf..327203b3214 100644 --- a/curriculum/challenges/espanol/14-responsive-web-design-22/learn-css-transforms-by-building-a-penguin/619be8ce4ea49008c5bfbc30.md +++ b/curriculum/challenges/espanol/14-responsive-web-design-22/learn-css-transforms-by-building-a-penguin/619be8ce4ea49008c5bfbc30.md @@ -7,11 +7,11 @@ dashedName: step-43 # --description-- -Increase the pseudo-element's transparency by `30%`. +Aumenta la transparencia del pseudo-elemento en `30%`. # --hints-- -You should give `.penguin-body::before` an `opacity` of `70%`. +Debe dar `.penguin-body::before` un `opacity` de `70%`. ```js assert.equal(new __helpers.CSSHelp(document).getStyle('.penguin-body::before')?.opacity, '0.7'); diff --git a/curriculum/challenges/espanol/14-responsive-web-design-22/learn-css-transforms-by-building-a-penguin/619be946958c6009844f1dee.md b/curriculum/challenges/espanol/14-responsive-web-design-22/learn-css-transforms-by-building-a-penguin/619be946958c6009844f1dee.md index e381ce57650..c9dac8bd6bd 100644 --- a/curriculum/challenges/espanol/14-responsive-web-design-22/learn-css-transforms-by-building-a-penguin/619be946958c6009844f1dee.md +++ b/curriculum/challenges/espanol/14-responsive-web-design-22/learn-css-transforms-by-building-a-penguin/619be946958c6009844f1dee.md @@ -7,23 +7,23 @@ dashedName: step-44 # --description-- -Start the penguin's face, by adding two `div` elements within `.penguin-head`, and giving them both a `class` of `face`. +Comience la cara del pingüino, agregando dos elementos `div` dentro de `.penguin-head`, y dándoles a ambos una `class` de `face`. # --hints-- -You should add `--fcc-expected--` `div` elements to `.penguin-head`, but found `--fcc-actual--`. +Debe agregar los elementos `--fcc-expected--` `div` a `.penguin-head`, pero encontró `--fcc-actual--`. ```js assert.equal(document.querySelectorAll('.penguin-head > div')?.length, 2); ``` -You should give the first `div` a `class` of `face`, but found `--fcc-actual--`. +Debe dar al primer `div` un `class` de `face`, pero encontrado `--fcc-actual--`. ```js assert.include(document.querySelector('.penguin-head > div:nth-of-type(1)')?.className, 'face'); ``` -You should give the second `div` a `class` of `face`, but found `--fcc-actual--`. +Debe dar al segundo `div` un `class` de `face`, pero encontrado `--fcc-actual--`. ```js assert.include(document.querySelector('.penguin-head > div:nth-of-type(2)')?.className, 'face'); diff --git a/curriculum/challenges/espanol/14-responsive-web-design-22/learn-css-transforms-by-building-a-penguin/619c155df0063a0a3fec0e32.md b/curriculum/challenges/espanol/14-responsive-web-design-22/learn-css-transforms-by-building-a-penguin/619c155df0063a0a3fec0e32.md index 94284086004..f027e234ca0 100644 --- a/curriculum/challenges/espanol/14-responsive-web-design-22/learn-css-transforms-by-building-a-penguin/619c155df0063a0a3fec0e32.md +++ b/curriculum/challenges/espanol/14-responsive-web-design-22/learn-css-transforms-by-building-a-penguin/619c155df0063a0a3fec0e32.md @@ -7,47 +7,47 @@ dashedName: step-45 # --description-- -Give the `.face` elements a `width` of `60%`, a `height` of `70%`, and a `background-color` of `white`. +Asigne a los elementos `.face` un `width` de `60%`, un `height` de `70%` y un `background-color` de `white`. # --hints-- -You should use the `.face` selector. +Debe usar el selector `.face`. ```js assert.match(code, /\.face\s*\{/); ``` -You should give `.face` a `width` property. +Debe asignar a `.face` una propiedad `width`. ```js assert.notEmpty(new __helpers.CSSHelp(document).getStyle('.face')?.width); ``` -You should give `.face` a `width` of `--fcc-expected--`, but found `--fcc-actual--`. +Debe dar a `.face` un `width` de `--fcc-expected--`, pero encontró `--fcc-actual--`. ```js assert.equal(new __helpers.CSSHelp(document).getStyle('.face')?.width, '60%'); ``` -You should give `.face` a `height` property. +Debe asignar a `.face` una propiedad `height`. ```js assert.notEmpty(new __helpers.CSSHelp(document).getStyle('.face')?.height); ``` -You should give `.face` a `height` of `--fcc-expected--`, but found `--fcc-actual--`. +Debe dar a `.face` un `height` de `--fcc-expected--`, pero encontró `--fcc-actual--`. ```js assert.equal(new __helpers.CSSHelp(document).getStyle('.face')?.height, '70%'); ``` -You should give `.face` a `background-color` property. +Debe asignar a `.face` una propiedad `background-color`. ```js assert.notEmpty(new __helpers.CSSHelp(document).getStyle('.face')?.backgroundColor); ``` -You should give `.face` a `background-color` of `--fcc-expected--`, but found `--fcc-actual--`. +Debe dar a `.face` un `background-color` de `--fcc-expected--`, pero encontró `--fcc-actual--`. ```js assert.equal(new __helpers.CSSHelp(document).getStyle('.face')?.backgroundColor, 'white'); diff --git a/curriculum/challenges/espanol/14-responsive-web-design-22/learn-css-transforms-by-building-a-penguin/619c16debd0c270b01c5ce38.md b/curriculum/challenges/espanol/14-responsive-web-design-22/learn-css-transforms-by-building-a-penguin/619c16debd0c270b01c5ce38.md index deae6c25232..cc6db401659 100644 --- a/curriculum/challenges/espanol/14-responsive-web-design-22/learn-css-transforms-by-building-a-penguin/619c16debd0c270b01c5ce38.md +++ b/curriculum/challenges/espanol/14-responsive-web-design-22/learn-css-transforms-by-building-a-penguin/619c16debd0c270b01c5ce38.md @@ -7,11 +7,11 @@ dashedName: step-46 # --description-- -Make the top corners of the `.face` elements have a radius of `70%`, and the bottom corners have a radius of `60%`. +Haz que las esquinas superiores de los elementos `.face` tengan un radio de `70%` y las esquinas inferiores tengan un radio de `60%`. # --hints-- -You should give `.face` a `border-radius` of `70% 70% 60% 60%`. +Debes darle a `.face` un `border-radius` de `70% 70% 60% 60%`. ```js assert.equal(new __helpers.CSSHelp(document).getStyle('.face')?.borderTopLeftRadius, '70%'); diff --git a/curriculum/challenges/espanol/14-responsive-web-design-22/learn-css-transforms-by-building-a-penguin/619cfdf2e63ddf05feab86ad.md b/curriculum/challenges/espanol/14-responsive-web-design-22/learn-css-transforms-by-building-a-penguin/619cfdf2e63ddf05feab86ad.md index 54fc16a4ca2..236fd5ea8a6 100644 --- a/curriculum/challenges/espanol/14-responsive-web-design-22/learn-css-transforms-by-building-a-penguin/619cfdf2e63ddf05feab86ad.md +++ b/curriculum/challenges/espanol/14-responsive-web-design-22/learn-css-transforms-by-building-a-penguin/619cfdf2e63ddf05feab86ad.md @@ -7,17 +7,17 @@ dashedName: step-47 # --description-- -Position the `.face` elements so that they are `15%` from the top. +Coloque los elementos `.face` de modo que estén `15%` desde la parte superior. # --hints-- -You should give `.face` a `top` property. +Debe asignar a `.face` una propiedad `top`. ```js assert.notEmpty(new __helpers.CSSHelp(document).getStyle('.face')?.top); ``` -You should give `.face` a `top` of `--fcc-expected--`, but found `--fcc-actual--`. +Debe dar a `.face` un `top` de `--fcc-expected--`, pero encontró `--fcc-actual--`. ```js assert.equal(new __helpers.CSSHelp(document).getStyle('.face')?.top, '15%'); diff --git a/curriculum/challenges/espanol/14-responsive-web-design-22/learn-css-transforms-by-building-a-penguin/619d019488f98c06acbbb71a.md b/curriculum/challenges/espanol/14-responsive-web-design-22/learn-css-transforms-by-building-a-penguin/619d019488f98c06acbbb71a.md index c9247b8876f..928053d944c 100644 --- a/curriculum/challenges/espanol/14-responsive-web-design-22/learn-css-transforms-by-building-a-penguin/619d019488f98c06acbbb71a.md +++ b/curriculum/challenges/espanol/14-responsive-web-design-22/learn-css-transforms-by-building-a-penguin/619d019488f98c06acbbb71a.md @@ -7,19 +7,19 @@ dashedName: step-48 # --description-- -Currently, the two `.face` elements are on top of each other. +Actualmente, los dos elementos `.face` están uno encima del otro. -Fix this, by adding a `class` of `left` to the first `.face` element, and a `class` of `right` to the second `.face` element. +Corrija esto, agregando un `class` de `left` al primer elemento `.face` y un `class` de `right` al segundo elemento `.face`. # --hints-- -You should give a `class` of `left` to the first `.face` element. +Debe dar un `class` de `left` al primer elemento `.face`. ```js assert.include(document.querySelector('.face:nth-of-type(1)').className, 'left'); ``` -You should give a `class` of `right` to the second `.face` element. +Debe dar un `class` de `right` al segundo elemento `.face`. ```js assert.include(document.querySelector('.face:nth-of-type(2)').className, 'right'); diff --git a/curriculum/challenges/espanol/14-responsive-web-design-22/learn-css-transforms-by-building-a-penguin/619d022dc8400c0763829a17.md b/curriculum/challenges/espanol/14-responsive-web-design-22/learn-css-transforms-by-building-a-penguin/619d022dc8400c0763829a17.md index e6ec669e3f6..6ac79d8d97a 100644 --- a/curriculum/challenges/espanol/14-responsive-web-design-22/learn-css-transforms-by-building-a-penguin/619d022dc8400c0763829a17.md +++ b/curriculum/challenges/espanol/14-responsive-web-design-22/learn-css-transforms-by-building-a-penguin/619d022dc8400c0763829a17.md @@ -7,23 +7,23 @@ dashedName: step-49 # --description-- -Target the `.face` element with the `left` class, and position it `5%` left of its parent. +Apunte al elemento `.face` con la clase `left` y colóquelo `5%` a la izquierda de su padre. # --hints-- -You should use the `.face.left` selector. +Debe usar el selector `.face.left`. ```js assert.match(code, /\.face\.left\s*\{/); ``` -You should give `.face.left` a `left` property. +Debes darle a `.face.left` una propiedad `left`. ```js assert.notEmpty(new __helpers.CSSHelp(document).getStyle('.face.left')?.left); ``` -You should give `.face.left` a `left` of `--fcc-expected--`, but found `--fcc-actual--`. +Debe dar a `.face.left` un `left` de `--fcc-expected--`, pero encontró `--fcc-actual--`. ```js assert.equal(new __helpers.CSSHelp(document).getStyle('.face.left')?.left, '5%'); diff --git a/curriculum/challenges/espanol/14-responsive-web-design-22/learn-css-transforms-by-building-a-penguin/619d02c7bc95bf0827a5d296.md b/curriculum/challenges/espanol/14-responsive-web-design-22/learn-css-transforms-by-building-a-penguin/619d02c7bc95bf0827a5d296.md index 7f77fbdf3e3..dd09e13c241 100644 --- a/curriculum/challenges/espanol/14-responsive-web-design-22/learn-css-transforms-by-building-a-penguin/619d02c7bc95bf0827a5d296.md +++ b/curriculum/challenges/espanol/14-responsive-web-design-22/learn-css-transforms-by-building-a-penguin/619d02c7bc95bf0827a5d296.md @@ -7,23 +7,23 @@ dashedName: step-50 # --description-- -Target the `.face` element with the `right` class, and position it `5%` right of its parent. +Apunte al elemento `.face` con la clase `right` y colóquelo `5%` a la derecha de su padre. # --hints-- -You should use the `.face.right` selector. +Debe usar el selector `.face.right`. ```js assert.match(code, /\.face\.right\s*\{/); ``` -You should give `.face.right` a `right` property. +Debes darle a `.face.right` una propiedad `right`. ```js assert.notEmpty(new __helpers.CSSHelp(document).getStyle('.face.right')?.right); ``` -You should give `.face.right` a `right` of `--fcc-expected--`, but found `--fcc-actual--`. +Debes darle a `.face.right` un `right` de `--fcc-expected--`, pero encontró `--fcc-actual--`. ```js assert.equal(new __helpers.CSSHelp(document).getStyle('.face.right')?.right, '5%'); diff --git a/curriculum/challenges/espanol/14-responsive-web-design-22/learn-css-transforms-by-building-a-penguin/619d033915012509031f309a.md b/curriculum/challenges/espanol/14-responsive-web-design-22/learn-css-transforms-by-building-a-penguin/619d033915012509031f309a.md index bf8c721245c..65cfe5ab98a 100644 --- a/curriculum/challenges/espanol/14-responsive-web-design-22/learn-css-transforms-by-building-a-penguin/619d033915012509031f309a.md +++ b/curriculum/challenges/espanol/14-responsive-web-design-22/learn-css-transforms-by-building-a-penguin/619d033915012509031f309a.md @@ -7,23 +7,23 @@ dashedName: step-51 # --description-- -Below the `.face.right` element, add a `div` element with a `class` of `chin`. +Debajo del elemento `.face.right`, agregue un elemento `div` con una `class` de `chin`. # --hints-- -You should add one `div` element within `.penguin-head`. Expected `--fcc-expected--` `div` elements, found `--fcc-actual--`. +Debe agregar un elemento `div` dentro de `.penguin-head`. Elementos `--fcc-expected--` `div` esperados, encontrados `--fcc-actual--`. ```js assert.equal(document.querySelectorAll('.penguin-head > div')?.length, 3); ``` -You should give the `div` a `class` of `chin`. +Debes darle al `div` una `class` de `chin`. ```js assert.exists(document.querySelector('.penguin-head > div.chin')); ``` -You should place the `div` element below the `.face.right` element. +Debe colocar el elemento `div` debajo del elemento `.face.right`. ```js assert.exists(document.querySelector('.face.right + .chin')); diff --git a/curriculum/challenges/espanol/14-responsive-web-design-22/learn-css-transforms-by-building-a-penguin/619d03dadadb6509a16f4f5f.md b/curriculum/challenges/espanol/14-responsive-web-design-22/learn-css-transforms-by-building-a-penguin/619d03dadadb6509a16f4f5f.md index 6fdb82652d1..788766f59a2 100644 --- a/curriculum/challenges/espanol/14-responsive-web-design-22/learn-css-transforms-by-building-a-penguin/619d03dadadb6509a16f4f5f.md +++ b/curriculum/challenges/espanol/14-responsive-web-design-22/learn-css-transforms-by-building-a-penguin/619d03dadadb6509a16f4f5f.md @@ -7,47 +7,47 @@ dashedName: step-52 # --description-- -Target the `.chin` element, and give it a `width` of `90%`, `height` of `70%`, and `background-color` of `white`. +Apunte al elemento `.chin` y asígnele un `width` de `90%`, `height` de `70%`, y `background-color` a `white`. # --hints-- -You should use the `.chin` selector. +Debe usar el selector `.chin`. ```js assert.match(code, /\.chin\s*\{/); ``` -You should give `.chin` a `width` property. +Debe darle a `.chin` una propiedad `width`. ```js assert.notEmpty(new __helpers.CSSHelp(document).getStyle('.chin')?.width); ``` -You should give `.chin` a `width` of `--fcc-expected--`, but found `--fcc-actual--`. +Debe dar a `.chin` un `width` de `--fcc-expected--`, pero encontró `--fcc-actual--`. ```js assert.equal(new __helpers.CSSHelp(document).getStyle('.chin')?.width, '90%'); ``` -You should give `.chin` a `height` property. +Debe darle a `.chin` una propiedad `height`. ```js assert.notEmpty(new __helpers.CSSHelp(document).getStyle('.chin')?.height); ``` -You should give `.chin` a `height` of `--fcc-expected--`, but found `--fcc-actual--`. +Debe dar a `.chin` una `height` de `--fcc-expected--`, pero encontró `--fcc-actual--`. ```js assert.equal(new __helpers.CSSHelp(document).getStyle('.chin')?.height, '70%'); ``` -You should give `.chin` a `background-color` property. +Debe darle a `.chin` una propiedad `background-color`. ```js assert.notEmpty(new __helpers.CSSHelp(document).getStyle('.chin')?.backgroundColor); ``` -You should give `.chin` a `background-color` of `--fcc-expected--`, but found `--fcc-actual--`. +Debe darle a `.chin` un `background-color` de `--fcc-expected--`, pero encontró `--fcc-actual--`. ```js assert.equal(new __helpers.CSSHelp(document).getStyle('.chin')?.backgroundColor, 'white'); diff --git a/curriculum/challenges/espanol/14-responsive-web-design-22/learn-css-transforms-by-building-a-penguin/619d0503e03a790a4179d463.md b/curriculum/challenges/espanol/14-responsive-web-design-22/learn-css-transforms-by-building-a-penguin/619d0503e03a790a4179d463.md index ee6b90f0f1d..41f14070833 100644 --- a/curriculum/challenges/espanol/14-responsive-web-design-22/learn-css-transforms-by-building-a-penguin/619d0503e03a790a4179d463.md +++ b/curriculum/challenges/espanol/14-responsive-web-design-22/learn-css-transforms-by-building-a-penguin/619d0503e03a790a4179d463.md @@ -7,35 +7,35 @@ dashedName: step-53 # --description-- -Position the `.chin` element such that it is `25%` from the top, and `5%` from the left of its parent. Then, give the top corners a radius of `70%`, and the bottom corners a radius of `100%`. +Coloque el elemento `.chin` de tal manera que sea `25%` desde la parte superior y `5%` desde la izquierda de su elemento primario. Luego, asigne a las esquinas superiores un radio de `70%` y a las esquinas inferiores un radio de `100%`. # --hints-- -You should give `.chin` a `top` property. +Debe darle a `.chin` una propiedad `top`. ```js assert.notEmpty(new __helpers.CSSHelp(document).getStyle('.chin')?.top); ``` -You should give `.chin` a `top` of `--fcc-expected--`, but found `--fcc-actual--`. +Debe dar a `.chin` un `top` de `--fcc-expected--`, pero encontró `--fcc-actual--`. ```js assert.equal(new __helpers.CSSHelp(document).getStyle('.chin')?.top, '25%'); ``` -You should give `.chin` a `left` property. +Debe asignar a `.chin` una propiedad `left`. ```js assert.notEmpty(new __helpers.CSSHelp(document).getStyle('.chin')?.left); ``` -You should give `.chin` a `left` of `--fcc-expected--`, but found `--fcc-actual--`. +Debe dar a `.chin` un `left` de `--fcc-expected--`, pero encontró `--fcc-actual--`. ```js assert.equal(new __helpers.CSSHelp(document).getStyle('.chin')?.left, '5%'); ``` -You should give `.chin` a `border-radius` of `70% 70% 100% 100%`. +Debe dar `.chin` un `border-radius` de `70% 70% 100% 100%`. ```js assert.equal(new __helpers.CSSHelp(document).getStyle('.chin')?.borderTopLeftRadius, '70%'); diff --git a/curriculum/challenges/espanol/14-responsive-web-design-22/learn-css-transforms-by-building-a-penguin/619d05c54dabca0b10058235.md b/curriculum/challenges/espanol/14-responsive-web-design-22/learn-css-transforms-by-building-a-penguin/619d05c54dabca0b10058235.md index af096b87022..0b90cffa59f 100644 --- a/curriculum/challenges/espanol/14-responsive-web-design-22/learn-css-transforms-by-building-a-penguin/619d05c54dabca0b10058235.md +++ b/curriculum/challenges/espanol/14-responsive-web-design-22/learn-css-transforms-by-building-a-penguin/619d05c54dabca0b10058235.md @@ -7,25 +7,25 @@ dashedName: step-54 # --description-- -So far, the `.face` and `.chin` elements have the same `background-color`. +Hasta ahora, los elementos `.face` y `.chin` tienen el mismo `background-color`. -Create a custom CSS property called `--penguin-face`, and set it to `white`. +Cree una propiedad CSS personalizada llamada `--penguin-face` y establézcala en `white`. # --hints-- -You should use the `:root` selector. +Debe usar el selector `:root`. ```js assert.match(code, /:root\s*\{/); ``` -You should give `:root` a `--penguin-face` property. +Debe darle a `:root` una propiedad `--penguin-face`. ```js assert.notEmpty(new __helpers.CSSHelp(document).getStyle(':root')?.getPropertyValue('--penguin-face')); ``` -You should give `:root` a `--penguin-face` of `--fcc-expected--`, but found `--fcc-actual--`. +Debería darle a `:root` un `--penguin-face` de `--fcc-expected--`, pero encontró `--fcc-actual--`. ```js assert.equal(new __helpers.CSSHelp(document).getStyle(':root')?.getPropVal('--penguin-face', true), 'white'); diff --git a/curriculum/challenges/espanol/14-responsive-web-design-22/learn-css-transforms-by-building-a-penguin/619d0882f54bf40bdc4671ed.md b/curriculum/challenges/espanol/14-responsive-web-design-22/learn-css-transforms-by-building-a-penguin/619d0882f54bf40bdc4671ed.md index 26696dedca0..24037a6f7f9 100644 --- a/curriculum/challenges/espanol/14-responsive-web-design-22/learn-css-transforms-by-building-a-penguin/619d0882f54bf40bdc4671ed.md +++ b/curriculum/challenges/espanol/14-responsive-web-design-22/learn-css-transforms-by-building-a-penguin/619d0882f54bf40bdc4671ed.md @@ -7,23 +7,23 @@ dashedName: step-55 # --description-- -Where relevant, replace property values with your `--penguin-face` variable. +Cuando sea relevante, reemplace los valores de propiedad con su variable `--penguin-face`. # --hints-- -You should give `.face` a `background-color` of `var(--penguin-face)`. +Debe dar a `.face` un `background-color` de `var(--penguin-face)`. ```js assert.equal(new __helpers.CSSHelp(document).getStyle('.face')?.getPropVal('background-color', true), 'var(--penguin-face)'); ``` -You should give `.chin` a `background-color` of `var(--penguin-face)`. +Debe dar a `.chin` un `background-color` de `var(--penguin-face)`. ```js assert.equal(new __helpers.CSSHelp(document).getStyle('.chin')?.getPropVal('background-color', true), 'var(--penguin-face)'); ``` -You should not use `var(--penguin-face)` in the `.penguin-body` selector. +No debe usar `var(--penguin-face)` en el selector `.penguin-body`. ```js assert.notInclude(new __helpers.CSSHelp(document).getStyle('.penguin-body')?.getPropVal('background-color', true), 'var(--penguin-face)'); diff --git a/curriculum/challenges/espanol/14-responsive-web-design-22/learn-css-transforms-by-building-a-penguin/619d090cd8d6db0c93dc5087.md b/curriculum/challenges/espanol/14-responsive-web-design-22/learn-css-transforms-by-building-a-penguin/619d090cd8d6db0c93dc5087.md index 335cfe770f5..5363d3136f2 100644 --- a/curriculum/challenges/espanol/14-responsive-web-design-22/learn-css-transforms-by-building-a-penguin/619d090cd8d6db0c93dc5087.md +++ b/curriculum/challenges/espanol/14-responsive-web-design-22/learn-css-transforms-by-building-a-penguin/619d090cd8d6db0c93dc5087.md @@ -7,47 +7,47 @@ dashedName: step-56 # --description-- -Below the `.chin` element, add two `div` elements each with a `class` of `eye`. Also, give the first `.eye` element a `class` of `left`, and the second `.eye` element a `class` of `right`. +Debajo del elemento `.chin`, agregue dos elementos `div` cada uno con una `class` de `eye`. Además, asigna al primer elemento `.eye` una `class` de `left`, y al segundo elemento `.eye` un `class` de `right`. # --hints-- -You should add two `div` elements within `.penguin-head`. Expected `--fcc-expected--` `div` elements, found `--fcc-actual--`. +Debe agregar dos elementos `div` dentro de `.penguin-head`. Elementos `--fcc-expected--` `div` esperados, encontrados `--fcc-actual--`. ```js assert.equal(document.querySelectorAll('.penguin-head > div')?.length, 5); ``` -You should give the first new `div` a `class` of `eye`. +Deberías darle al primer `div` nuevo una `class` de `eye`. ```js assert.exists(document.querySelector('.penguin-head > div.eye')); ``` -You should give the second new `div` a `class` of `eye`. +Debes darle al segundo nuevo `div` una `class` de `eye`. ```js assert.equal(document.querySelectorAll('.penguin-head > div.eye')?.length, 2); ``` -You should give the first new `div` a `class` of `left`. +Deberías darle al primer `div` nuevo una `class` de `left`. ```js assert.exists(document.querySelector('.penguin-head > div.eye.left')); ``` -You should give the second new `div` a `class` of `right`. +Deberías darle al segundo nuevo `div` una `class` de `right`. ```js assert.exists(document.querySelector('.penguin-head > div.eye.right')); ``` -You should place `div.eye.left` after `div.chin`. +Debe colocar `div.eye.left` después de `div.chin`. ```js assert.exists(document.querySelector('.chin + .eye.left')); ``` -You should place `div.eye.right` after `div.eye.left`. +Debe colocar `div.eye.right` después de `div.eye.left`. ```js assert.exists(document.querySelector('.eye.left + .eye.right')); diff --git a/curriculum/challenges/espanol/14-responsive-web-design-22/learn-css-transforms-by-building-a-penguin/619d0b51ca42ed0d74582186.md b/curriculum/challenges/espanol/14-responsive-web-design-22/learn-css-transforms-by-building-a-penguin/619d0b51ca42ed0d74582186.md index 445005d7b99..c32d45b764f 100644 --- a/curriculum/challenges/espanol/14-responsive-web-design-22/learn-css-transforms-by-building-a-penguin/619d0b51ca42ed0d74582186.md +++ b/curriculum/challenges/espanol/14-responsive-web-design-22/learn-css-transforms-by-building-a-penguin/619d0b51ca42ed0d74582186.md @@ -7,29 +7,29 @@ dashedName: step-57 # --description-- -Target the `.eye` elements, and give them a `width` of `15%`, `height` of `17%`, and `background-color` of `black`. +Diríjase a los elementos `.eye` y asígneles un `width` de `15%`, `height` de `17%` y `background-color` de `black`. # --hints-- -You should use the `.eye` selector. +Debe usar el selector `.eye`. ```js assert.match(code, /\.eye\s*\{/); ``` -You should give `.eye` a `width` of `--fcc-expected--`, found `--fcc-actual--`. +Debe dar a `.eye` un `width` de `--fcc-expected--`, encontrado `--fcc-actual--`. ```js assert.equal(new __helpers.CSSHelp(document).getStyle('.eye')?.width, '15%'); ``` -You should give `.eye` a `height` of `--fcc-expected--`, found `--fcc-actual--`. +Debe dar a `.eye` un `height` de `--fcc-expected--`, encontrado `--fcc-actual--`. ```js assert.equal(new __helpers.CSSHelp(document).getStyle('.eye')?.height, '17%'); ``` -You should give `.eye` a `background-color` of `--fcc-expected--`, found `--fcc-actual--`. +Debe dar a `.eye` un `background-color` de `--fcc-expected--`, encontrado `--fcc-actual--`. ```js assert.equal(new __helpers.CSSHelp(document).getStyle('.eye')?.backgroundColor, 'black'); diff --git a/curriculum/challenges/espanol/14-responsive-web-design-22/learn-css-transforms-by-building-a-penguin/619d0bc9cb05360e1bf549c3.md b/curriculum/challenges/espanol/14-responsive-web-design-22/learn-css-transforms-by-building-a-penguin/619d0bc9cb05360e1bf549c3.md index 6219ca0c1db..01ee3ad48ec 100644 --- a/curriculum/challenges/espanol/14-responsive-web-design-22/learn-css-transforms-by-building-a-penguin/619d0bc9cb05360e1bf549c3.md +++ b/curriculum/challenges/espanol/14-responsive-web-design-22/learn-css-transforms-by-building-a-penguin/619d0bc9cb05360e1bf549c3.md @@ -7,17 +7,17 @@ dashedName: step-58 # --description-- -Position the `.eye` elements `45%` from the top of their parent, and give all corners a radius of `50%`. +Coloque los elementos `.eye` `45%` desde la parte superior de su padre, y dé a todas las esquinas un radio de `50%`. # --hints-- -You should give `.eye` a `top` of `--fcc-expected--`, but found `--fcc-actual--`. +Debe dar a `.eye` un `top` de `--fcc-expected--`, pero encontró `--fcc-actual--`. ```js assert.equal(new __helpers.CSSHelp(document).getStyle('.eye')?.top, '45%'); ``` -You should give `.eye` a `border-radius` of `--fcc-expected--`, but found `--fcc-actual--`. +Debe dar a `.eye` un `border-radius` de `--fcc-expected--`, pero encontrado `--fcc-actual--`. ```js assert.equal(new __helpers.CSSHelp(document).getStyle('.eye')?.borderRadius, '50%'); diff --git a/curriculum/challenges/espanol/14-responsive-web-design-22/learn-css-transforms-by-building-a-penguin/619d0c1594c38c0ebae75878.md b/curriculum/challenges/espanol/14-responsive-web-design-22/learn-css-transforms-by-building-a-penguin/619d0c1594c38c0ebae75878.md index e912de80c06..35393377eb2 100644 --- a/curriculum/challenges/espanol/14-responsive-web-design-22/learn-css-transforms-by-building-a-penguin/619d0c1594c38c0ebae75878.md +++ b/curriculum/challenges/espanol/14-responsive-web-design-22/learn-css-transforms-by-building-a-penguin/619d0c1594c38c0ebae75878.md @@ -7,29 +7,29 @@ dashedName: step-59 # --description-- -Target the `.eye` element with the `left` class, and position it `25%` from the left of its parent. Then, target the `.eye` element with the `right` class, and position it `25%` from the right of its parent. +Apunte al elemento `.eye` con la clase `left` y colóquelo `25%` desde la izquierda de su elemento primario. Luego, apunte al elemento `.eye` con la clase `right` y colóquelo `25%` desde la derecha de su padre. # --hints-- -You should use the `.eye.left` selector. +Debe usar el selector `.eye.left`. ```js assert.match(code, /\.eye\.left\s*\{/); ``` -You should give `.eye.left` a `left` of `--fcc-expected--`, but found `--fcc-actual--`. +Debe dar a `.eye.left` un `left` de `--fcc-expected--`, pero encontró `--fcc-actual--`. ```js assert.equal(new __helpers.CSSHelp(document).getStyle('.eye.left')?.left, '25%'); ``` -You should use the `.eye.right` selector. +Debe usar el selector `.eye.right`. ```js assert.match(code, /\.eye\.right\s*\{/); ``` -You should give `.eye.right` a `right` of `--fcc-expected--`, but found `--fcc-actual--`. +Debe dar a `.eye.right` un `right` de `--fcc-expected--`, pero encontrado `--fcc-actual--`. ```js assert.equal(new __helpers.CSSHelp(document).getStyle('.eye.right')?.right, '25%'); diff --git a/curriculum/challenges/espanol/14-responsive-web-design-22/learn-css-transforms-by-building-a-penguin/619d0d18ca99870f884a7bff.md b/curriculum/challenges/espanol/14-responsive-web-design-22/learn-css-transforms-by-building-a-penguin/619d0d18ca99870f884a7bff.md index 4f8b17851ce..a9ad105b771 100644 --- a/curriculum/challenges/espanol/14-responsive-web-design-22/learn-css-transforms-by-building-a-penguin/619d0d18ca99870f884a7bff.md +++ b/curriculum/challenges/espanol/14-responsive-web-design-22/learn-css-transforms-by-building-a-penguin/619d0d18ca99870f884a7bff.md @@ -7,29 +7,29 @@ dashedName: step-60 # --description-- -Within each `.eye` element, add a `div` with a `class` of `eye-lid`. +Dentro de cada elemento `.eye`, agregue un `div` con un `class` de `eye-lid`. # --hints-- -You should add one `div` element within `.eye.left`, but found `--fcc-actual--`. +Debe agregar un elemento `div` dentro de `.eye.left`, pero encontró `--fcc-actual--`. ```js assert.equal(document.querySelectorAll('.eye.left > div')?.length ?? 0, 1); ``` -You should add one `div` element within `.eye.right`, but found `--fcc-actual--`. +Debe agregar un elemento `div` dentro de `.eye.right`, pero encontró `--fcc-actual--`. ```js assert.equal(document.querySelectorAll('.eye.right > div')?.length ?? 0, 1); ``` -You should give the first new `div` a `class` of `eye-lid`. +Debe dar al primer `div` nuevo un `class` de `eye-lid`. ```js assert.exists(document.querySelector('.eye.left > div.eye-lid')); ``` -You should give the second new `div` a `class` of `eye-lid`. +Debe dar al segundo nuevo `div` un `class` de `eye-lid`. ```js assert.exists(document.querySelector('.eye.right > div.eye-lid')); diff --git a/curriculum/challenges/espanol/14-responsive-web-design-22/learn-css-transforms-by-building-a-penguin/619d0daf214542102739b0da.md b/curriculum/challenges/espanol/14-responsive-web-design-22/learn-css-transforms-by-building-a-penguin/619d0daf214542102739b0da.md index 5564bf707b8..c3ca276d5d7 100644 --- a/curriculum/challenges/espanol/14-responsive-web-design-22/learn-css-transforms-by-building-a-penguin/619d0daf214542102739b0da.md +++ b/curriculum/challenges/espanol/14-responsive-web-design-22/learn-css-transforms-by-building-a-penguin/619d0daf214542102739b0da.md @@ -7,29 +7,29 @@ dashedName: step-61 # --description-- -Target the `.eye-lid` elements, and give them a `width` of `150%`, `height` of `100%`, and `background-color` of `--penguin-face`. +Diríjase a los elementos `.eye-lid` y asígneles un `width` de `150%`, `height` de `100%` y `background-color` de `--penguin-face`. # --hints-- -You should use the `.eye-lid` selector. +Debe usar el selector `.eye-lid`. ```js assert.match(code, /\.eye-lid\s*\{/); ``` -You should give `.eye-lid` a `width` of `--fcc-expected--`, found `--fcc-actual--`. +Debe dar a `.eye-lid` un `width` de `--fcc-expected--`, encontrado `--fcc-actual--`. ```js assert.equal(new __helpers.CSSHelp(document).getStyle('.eye-lid')?.width, '150%'); ``` -You should give `.eye-lid` a `height` of `--fcc-expected--`, found `--fcc-actual--`. +Debe dar a `.eye-lid` un `height` de `--fcc-expected--`, y se encontró `--fcc-actual--`. ```js assert.equal(new __helpers.CSSHelp(document).getStyle('.eye-lid')?.height, '100%'); ``` -You should give `.eye-lid` a `background-color` of `var(--penguin-face)`. +Debe dar a `.eye-lid` un `background-color` de `var(--penguin-face)`. ```js assert.equal(new __helpers.CSSHelp(document).getStyle('.eye-lid')?.getPropVal('background-color', true), 'var(--penguin-face)'); diff --git a/curriculum/challenges/espanol/14-responsive-web-design-22/learn-css-transforms-by-building-a-penguin/619d0e56f9ca9710fcb974e3.md b/curriculum/challenges/espanol/14-responsive-web-design-22/learn-css-transforms-by-building-a-penguin/619d0e56f9ca9710fcb974e3.md index 06db871d659..058ec770b63 100644 --- a/curriculum/challenges/espanol/14-responsive-web-design-22/learn-css-transforms-by-building-a-penguin/619d0e56f9ca9710fcb974e3.md +++ b/curriculum/challenges/espanol/14-responsive-web-design-22/learn-css-transforms-by-building-a-penguin/619d0e56f9ca9710fcb974e3.md @@ -7,23 +7,23 @@ dashedName: step-62 # --description-- -Position the `.eye-lid` elements `25%` from the top, and `-23%` from the left of their parents. Then, give all corners a radius of `50%`. +Coloque los elementos `.eye-lid` `25%` desde la parte superior, y `-23%` a la izquierda de sus padres. Luego, asigne a todas las esquinas un radio de `50%`. # --hints-- -You should give `.eye-lid` a `top` of `--fcc-expected--`, but found `--fcc-actual--`. +Debe dar a `.eye-lid` un `top` de `--fcc-expected--`, pero encontró `--fcc-actual--`. ```js assert.equal(new __helpers.CSSHelp(document).getStyle('.eye-lid')?.top, '25%'); ``` -You should give `.eye-lid` a `left` of `--fcc-expected--`, but found `--fcc-actual--`. +Debe dar a `.eye-lid` un `left` de `--fcc-expected--`, pero encontró `--fcc-actual--`. ```js assert.equal(new __helpers.CSSHelp(document).getStyle('.eye-lid')?.left, '-23%'); ``` -You should give `.eye-lid` a `border-radius` of `--fcc-expected--`, but found `--fcc-actual--`. +Debe dar a `.eye-lid` un `border-radius` de `--fcc-expected--`, pero encontró `--fcc-actual--`. ```js assert.equal(new __helpers.CSSHelp(document).getStyle('.eye-lid')?.borderRadius, '50%'); diff --git a/curriculum/challenges/espanol/14-responsive-web-design-22/learn-css-transforms-by-building-a-penguin/619d0eec0ac40611b41e2ccc.md b/curriculum/challenges/espanol/14-responsive-web-design-22/learn-css-transforms-by-building-a-penguin/619d0eec0ac40611b41e2ccc.md index e281505b9b7..0d34601ad69 100644 --- a/curriculum/challenges/espanol/14-responsive-web-design-22/learn-css-transforms-by-building-a-penguin/619d0eec0ac40611b41e2ccc.md +++ b/curriculum/challenges/espanol/14-responsive-web-design-22/learn-css-transforms-by-building-a-penguin/619d0eec0ac40611b41e2ccc.md @@ -7,41 +7,41 @@ dashedName: step-63 # --description-- -Below the `.eye.right` element, add two `div` elements each with a `class` of `blush`. Also, give the first `.blush` element a `class` of `left`, and the second `.blush` element a `class` of `right`. +Debajo del elemento `.eye.right`, agregue dos elementos `div` cada uno con un `class` de `blush`. Además, asigna al primer elemento `.blush` una `class` de `left`, y al segundo elemento `.blush` un `class` de `right`. # --hints-- -You should add two `div` elements within `.penguin-head`. Expected `--fcc-expected--` `div` elements, found `--fcc-actual--`. +Debe agregar dos elementos `div` dentro de `.penguin-head`. Elementos `--fcc-expected--` `div` esperados, encontrados `--fcc-actual--`. ```js assert.equal(document.querySelectorAll('.penguin-head > div')?.length, 7); ``` -You should give the first new `div` a `class` of `blush`. +Debes darle al primer `div` nuevo una `class` de `blush`. ```js assert.exists(document.querySelector('.penguin-head > div.blush')); ``` -You should give the second new `div` a `class` of `blush`. +Debe darle al segundo nuevo `div` un `class` de `blush`. ```js assert.equal(document.querySelectorAll('.penguin-head > div.blush')?.length, 2); ``` -You should give the first new `div` a `class` of `left`. +Debe dar al primer `div` nuevo un `class` de `left`. ```js assert.exists(document.querySelector('.penguin-head > div.blush.left')); ``` -You should give the second new `div` a `class` of `right`. +Debe dar al segundo nuevo `div` un `class` de `right`. ```js assert.exists(document.querySelector('.penguin-head > div.blush.right')); ``` -You should place `.blush.right` after `.blush.left`. +Debe colocar `.blush.right` después de `.blush.left`. ```js assert.exists(document.querySelector('.blush.left + .blush.right')); diff --git a/curriculum/challenges/espanol/14-responsive-web-design-22/learn-css-transforms-by-building-a-penguin/619d0fc9825c271253df28d4.md b/curriculum/challenges/espanol/14-responsive-web-design-22/learn-css-transforms-by-building-a-penguin/619d0fc9825c271253df28d4.md index 341e05fdb7e..472f1828ac7 100644 --- a/curriculum/challenges/espanol/14-responsive-web-design-22/learn-css-transforms-by-building-a-penguin/619d0fc9825c271253df28d4.md +++ b/curriculum/challenges/espanol/14-responsive-web-design-22/learn-css-transforms-by-building-a-penguin/619d0fc9825c271253df28d4.md @@ -7,29 +7,29 @@ dashedName: step-64 # --description-- -Target the `.blush` elements, and give them a `width` of `15%`, `height` of `10%`, and `background-color` of `pink`. +Apunte a los elementos `.blush` y asígneles un `width` de `15%`, `height` de `10%` y `background-color` de `pink`. # --hints-- -You should use the `.blush` selector. +Debe usar el selector `.blush`. ```js assert.match(code, /\.blush\s*\{/); ``` -You should give `.blush` a `width` of `--fcc-expected--`, found `--fcc-actual--`. +Debe dar a `.blush` un `width` de `--fcc-expected--`, pero se encontró `--fcc-actual--`. ```js assert.equal(new __helpers.CSSHelp(document).getStyle('.blush')?.width, '15%'); ``` -You should give `.blush` a `height` of `--fcc-expected--`, found `--fcc-actual--`. +Debe darle a `.blush` un `height` de `--fcc-expected--`, encontrado `--fcc-actual--`. ```js assert.equal(new __helpers.CSSHelp(document).getStyle('.blush')?.height, '10%'); ``` -You should give `.blush` a `background-color` of `--fcc-expected--`, found `--fcc-actual--`. +Debe darle a `.blush` un `background-color` de `--fcc-expected--`, pero; se encontró `--fcc-actual--`. ```js assert.equal(new __helpers.CSSHelp(document).getStyle('.blush')?.backgroundColor, 'pink'); diff --git a/curriculum/challenges/espanol/14-responsive-web-design-22/learn-css-transforms-by-building-a-penguin/619d102d786c3d13124c37c6.md b/curriculum/challenges/espanol/14-responsive-web-design-22/learn-css-transforms-by-building-a-penguin/619d102d786c3d13124c37c6.md index e15a3c680b4..c59b58d10bc 100644 --- a/curriculum/challenges/espanol/14-responsive-web-design-22/learn-css-transforms-by-building-a-penguin/619d102d786c3d13124c37c6.md +++ b/curriculum/challenges/espanol/14-responsive-web-design-22/learn-css-transforms-by-building-a-penguin/619d102d786c3d13124c37c6.md @@ -7,17 +7,17 @@ dashedName: step-65 # --description-- -Position the `.blush` elements `65%` from the top of their parent, and give all corners a radius of `50%`. +Coloque los elementos `.blush` `65%` desde la parte superior de su elemento principal y asigne a todas las esquinas un radio de `50%`. # --hints-- -You should give `.blush` a `top` of `--fcc-expected--`, but found `--fcc-actual--`. +Debería dar a `.blush` un `top` de `--fcc-expected--`, pero encontró `--fcc-actual--`. ```js assert.equal(new __helpers.CSSHelp(document).getStyle('.blush')?.top, '65%'); ``` -You should give `.blush` a `border-radius` of `--fcc-expected--`, but found `--fcc-actual--`. +Debería darle a `.blush` un `border-radius` de `--fcc-expected--`, pero encontró `--fcc-actual--`. ```js assert.equal(new __helpers.CSSHelp(document).getStyle('.blush')?.borderRadius, '50%'); diff --git a/curriculum/challenges/espanol/14-responsive-web-design-22/learn-css-transforms-by-building-a-penguin/619d107edf7ddf13cc77106a.md b/curriculum/challenges/espanol/14-responsive-web-design-22/learn-css-transforms-by-building-a-penguin/619d107edf7ddf13cc77106a.md index 363b3bd9ca9..d29b6785f5b 100644 --- a/curriculum/challenges/espanol/14-responsive-web-design-22/learn-css-transforms-by-building-a-penguin/619d107edf7ddf13cc77106a.md +++ b/curriculum/challenges/espanol/14-responsive-web-design-22/learn-css-transforms-by-building-a-penguin/619d107edf7ddf13cc77106a.md @@ -7,29 +7,29 @@ dashedName: step-66 # --description-- -Target the `.blush` element with a `class` of `left`, and position it `15%` left of its parent. Then, target the `.blush` element with a `class` of `right`, and position it `15%` right of its parent. +Apunte al elemento `.blush` con una `class` de `left` y colóquelo `15%` a la izquierda de su padre. Luego, apunte al elemento `.blush` con una `class` de `right`, y colóquelo `15%` a la derecha de su padre. # --hints-- -You should use the `.blush.left` selector. +Debe usar el selector `.blush.left`. ```js assert.match(code, /\.blush\.left\s*\{/); ``` -You should give `.blush.left` a `left` of `--fcc-expected--`, but found `--fcc-actual--`. +Debería darle a `.blush.left` un `left` de `--fcc-expected--`, pero encontró `--fcc-actual--`. ```js assert.equal(new __helpers.CSSHelp(document).getStyle('.blush.left')?.left, '15%'); ``` -You should use the `.blush.right` selector. +Debe usar el selector `.blush.right`. ```js assert.match(code, /\.blush\.right\s*\{/); ``` -You should give `.blush.right` a `right` of `--fcc-expected--`, but found `--fcc-actual--`. +Debería dar a `.blush.right` un `right` de `--fcc-expected--`, pero encontró `--fcc-actual--`. ```js assert.equal(new __helpers.CSSHelp(document).getStyle('.blush.right')?.right, '15%'); diff --git a/curriculum/challenges/espanol/14-responsive-web-design-22/learn-css-transforms-by-building-a-penguin/619d10cc98145f14820399c5.md b/curriculum/challenges/espanol/14-responsive-web-design-22/learn-css-transforms-by-building-a-penguin/619d10cc98145f14820399c5.md index 850f74c1c8d..c961cb73145 100644 --- a/curriculum/challenges/espanol/14-responsive-web-design-22/learn-css-transforms-by-building-a-penguin/619d10cc98145f14820399c5.md +++ b/curriculum/challenges/espanol/14-responsive-web-design-22/learn-css-transforms-by-building-a-penguin/619d10cc98145f14820399c5.md @@ -7,47 +7,47 @@ dashedName: step-67 # --description-- -Below the `.blush.right` element, add two `div` elements each with a `class` of `beak`. Also, give the first `.beak` element a `class` of `top`, and the second `.beak` element a `class` of `bottom`. +Debajo del elemento `.blush.right`, agregue dos elementos `div` cada uno con una `class` de `beak`. Además, asigna al primer elemento `.beak` una `class` de `top`, y al segundo elemento `.beak` un `class` de `bottom`. # --hints-- -You should add two `div` elements within `.penguin-head`. Expected `--fcc-expected--` `div` elements, found `--fcc-actual--`. +Debe agregar dos elementos `div` dentro de `.penguin-head`. Se esperaba elementos `--fcc-expected--` `div` y se encontró `--fcc-actual--`. ```js assert.equal(document.querySelectorAll('.penguin-head > div')?.length, 9); ``` -You should give the first new `div` a `class` of `beak`. +Debes darle al primer `div` nuevo una `class` de `beak`. ```js assert.exists(document.querySelector('.penguin-head > div.beak')); ``` -You should give the second new `div` a `class` of `beak`. +Debes darle al segundo `div` nuevo una `class` de `beak`. ```js assert.equal(document.querySelectorAll('.penguin-head > div.beak')?.length, 2); ``` -You should give the first new `div` a `class` of `top`. +Deberías darle al primer `div` nuevo una `class` de `top`. ```js assert.exists(document.querySelector('.penguin-head > div.beak.top')); ``` -You should give the second new `div` a `class` of `bottom`. +Debes darle al segundo `div` nuevo una `class` de `bottom`. ```js assert.exists(document.querySelector('.penguin-head > div.beak.bottom')); ``` -You should place `div.beak.top` after `div.blush.right`. +Debe colocar `div.beak.top` después de `div.blush.right`. ```js assert.exists(document.querySelector('.blush.right + .beak.top')); ``` -You should place `div.beak.bottom` after `div.beak.top`. +Debe colocar `div.beak.bottom` después de `div.beak.top`. ```js assert.exists(document.querySelector('.beak.top + .beak.bottom')); diff --git a/curriculum/challenges/espanol/14-responsive-web-design-22/learn-css-transforms-by-building-a-penguin/619d115e2adcd71538e82ebb.md b/curriculum/challenges/espanol/14-responsive-web-design-22/learn-css-transforms-by-building-a-penguin/619d115e2adcd71538e82ebb.md index 5eed8ab951a..c51eba54113 100644 --- a/curriculum/challenges/espanol/14-responsive-web-design-22/learn-css-transforms-by-building-a-penguin/619d115e2adcd71538e82ebb.md +++ b/curriculum/challenges/espanol/14-responsive-web-design-22/learn-css-transforms-by-building-a-penguin/619d115e2adcd71538e82ebb.md @@ -7,29 +7,29 @@ dashedName: step-68 # --description-- -Target the `.beak` elements, and give them a `height` of `10%`, `background-color` of `orange`, and give all corners a radius of `50%`. +Apunta a los elementos `.beak` y dales una `height` de `10%`, `background-color` de `orange`, y otorga a todas las esquinas un radio de `50%`. # --hints-- -You should use the `.beak` selector. +Debe usar el selector `.beak`. ```js assert.match(code, /\.beak\s*\{/); ``` -You should give `.beak` a `height` of `--fcc-expected--`, found `--fcc-actual--`. +Debe darle a `.beak` una `height` de `--fcc-expected--`, encontró `--fcc-actual--`. ```js assert.equal(new __helpers.CSSHelp(document).getStyle('.beak')?.height, '10%'); ``` -You should give `.beak` a `background-color` of `--fcc-expected--`, found `--fcc-actual--`. +Debes darle a `.beak` un `background-color` de `--fcc-expected--`, encontrado `--fcc-actual--`. ```js assert.equal(new __helpers.CSSHelp(document).getStyle('.beak')?.backgroundColor, 'orange'); ``` -You should give `.beak` a `border-radius` of `--fcc-expected--`, found `--fcc-actual--`. +Debes darle a `.beak` un `border-radius` de `--fcc-expected--`, encontrado `--fcc-actual--`. ```js assert.equal(new __helpers.CSSHelp(document).getStyle('.beak')?.borderRadius, '50%'); diff --git a/curriculum/challenges/espanol/14-responsive-web-design-22/learn-css-transforms-by-building-a-penguin/619d11e6d5ef9515d2a16033.md b/curriculum/challenges/espanol/14-responsive-web-design-22/learn-css-transforms-by-building-a-penguin/619d11e6d5ef9515d2a16033.md index de34972436d..a69b27ae5ae 100644 --- a/curriculum/challenges/espanol/14-responsive-web-design-22/learn-css-transforms-by-building-a-penguin/619d11e6d5ef9515d2a16033.md +++ b/curriculum/challenges/espanol/14-responsive-web-design-22/learn-css-transforms-by-building-a-penguin/619d11e6d5ef9515d2a16033.md @@ -7,29 +7,29 @@ dashedName: step-69 # --description-- -Target the `.beak` element with a `class` of `top`, give it a `width` of `20%`, and position it `60%` from the top, and `40%` from the left of its parent. +Apunta al elemento `.beak` con una `class` de `top`, asígnale un `width` de `20%` y colóquelo `60%` desde la parte superior y `40%` desde la izquierda de su padre. # --hints-- -You should use the `.beak.top` selector. +Debe usar el selector `.beak.top`. ```js assert.match(code, /\.beak\.top\s*\{/); ``` -You should give `.beak.top` a `width` of `--fcc-expected--`, but found `--fcc-actual--`. +Debe darle a `.beak.top` un `width` de `--fcc-expected--`, pero encontró `--fcc-actual--`. ```js assert.equal(new __helpers.CSSHelp(document).getStyle('.beak.top')?.width, '20%'); ``` -You should give `.beak.top` a `top` of `--fcc-expected--`, but found `--fcc-actual--`. +Debería dar a `.beak.top` un `top` de `--fcc-expected--`, pero encontró `--fcc-actual--`. ```js assert.equal(new __helpers.CSSHelp(document).getStyle('.beak.top')?.top, '60%'); ``` -You should give `.beak.top` a `left` of `--fcc-expected--`, but found `--fcc-actual--`. +Debe darle a `.beak.top` un `left` de `--fcc-expected--`, pero encontró `--fcc-actual--`. ```js assert.equal(new __helpers.CSSHelp(document).getStyle('.beak.top')?.left, '40%'); diff --git a/curriculum/challenges/espanol/14-responsive-web-design-22/learn-css-transforms-by-building-a-penguin/619d129a417d0716a94de913.md b/curriculum/challenges/espanol/14-responsive-web-design-22/learn-css-transforms-by-building-a-penguin/619d129a417d0716a94de913.md index f65ea30fd2e..90f46c23497 100644 --- a/curriculum/challenges/espanol/14-responsive-web-design-22/learn-css-transforms-by-building-a-penguin/619d129a417d0716a94de913.md +++ b/curriculum/challenges/espanol/14-responsive-web-design-22/learn-css-transforms-by-building-a-penguin/619d129a417d0716a94de913.md @@ -7,29 +7,29 @@ dashedName: step-70 # --description-- -Target the `.beak` element with a `class` of `bottom`, and give it a `width` `4%` smaller than `.beak.top`, `5%` further from the top, and `2%` further from the left of its parent than `.beak.top`. +Apunte al elemento `.beak` con una `class` de `bottom`, y asígnele un `width` `4%` menor que `.beak.top`, `5%` más lejos de la parte superior y `2%` más lejos de la izquierda de su padre que `.beak.top`. # --hints-- -You should use the `.beak.bottom` selector. +Debe usar el selector `.beak.bottom`. ```js assert.match(code, /\.beak\.bottom\s*\{/); ``` -You should give `.beak.bottom` a `width` of `--fcc-expected--`, but found `--fcc-actual--`. +Debe darle a `.beak.bottom` un `width` de `--fcc-expected--`, pero encontró `--fcc-actual--`. ```js assert.equal(new __helpers.CSSHelp(document).getStyle('.beak.bottom')?.width, '16%'); ``` -You should give `.beak.bottom` a `top` of `--fcc-expected--`, but found `--fcc-actual--`. +Debes darle a `.beak.bottom` un `top` de `--fcc-expected--`, pero encontró `--fcc-actual--`. ```js assert.equal(new __helpers.CSSHelp(document).getStyle('.beak.bottom')?.top, '65%'); ``` -You should give `.beak.bottom` a `left` of `--fcc-expected--`, but found `--fcc-actual--`. +Debe darle a `.beak.bottom` un `left` de `--fcc-expected--`, pero encontró `--fcc-actual--`. ```js assert.equal(new __helpers.CSSHelp(document).getStyle('.beak.bottom')?.left, '42%'); diff --git a/curriculum/challenges/espanol/14-responsive-web-design-22/learn-css-transforms-by-building-a-penguin/619d1340361095175f4b5115.md b/curriculum/challenges/espanol/14-responsive-web-design-22/learn-css-transforms-by-building-a-penguin/619d1340361095175f4b5115.md index 5b141fff905..c6f981ffbac 100644 --- a/curriculum/challenges/espanol/14-responsive-web-design-22/learn-css-transforms-by-building-a-penguin/619d1340361095175f4b5115.md +++ b/curriculum/challenges/espanol/14-responsive-web-design-22/learn-css-transforms-by-building-a-penguin/619d1340361095175f4b5115.md @@ -7,23 +7,23 @@ dashedName: step-71 # --description-- -The penguin's body looks a bit plain. Spruce him up by adding a `div` element with a `class` of `shirt`, immediately before the `.penguin-body` element. +El cuerpo del pingüino se ve un poco simple. Arréglalo agregando un elemento `div` con una `class` de `shirt`, inmediatamente antes del elemento `.penguin-body`. # --hints-- -You should add a `div` element within `.penguin`. Expected `--fcc-expected--` `div` elements, found `--fcc-actual--`. +Debe agregar un elemento `div` dentro de `.penguin`. Elementos `--fcc-expected--` `div` esperados, encontrados `--fcc-actual--`. ```js assert.equal(document.querySelectorAll('.penguin > div')?.length, 3); ``` -You should give the new `div` a `class` of `shirt`. +Debes darle al nuevo `div` una `class` de `shirt`. ```js assert.exists(document.querySelector('.penguin > div.shirt')); ``` -You should place the new `div` before `.penguin-body`. +Debe colocar el nuevo `div` antes de `.penguin-body`. ```js assert.exists(document.querySelector('.shirt + .penguin-body')); diff --git a/curriculum/challenges/espanol/14-responsive-web-design-22/learn-css-transforms-by-building-a-penguin/619d15797b580c1828b05426.md b/curriculum/challenges/espanol/14-responsive-web-design-22/learn-css-transforms-by-building-a-penguin/619d15797b580c1828b05426.md index 6fb02e11fd0..5f87a97b974 100644 --- a/curriculum/challenges/espanol/14-responsive-web-design-22/learn-css-transforms-by-building-a-penguin/619d15797b580c1828b05426.md +++ b/curriculum/challenges/espanol/14-responsive-web-design-22/learn-css-transforms-by-building-a-penguin/619d15797b580c1828b05426.md @@ -7,17 +7,17 @@ dashedName: step-72 # --description-- -Within the `.shirt` element, add a `div` with the following emoji as content: 💜 +Dentro del elemento `.shirt`, agrega un `div` con el siguiente emoji como contenido: 💜 # --hints-- -You should add a `div` element within `div.shirt`. Expected `--fcc-expected--` `div` element, found `--fcc-actual--`. +Debe agregar un elemento `div` dentro de `div.shirt`. Se esperaba el elemento `--fcc-expected--` `div`, encontrado `--fcc-actual--`. ```js assert.equal(document.querySelectorAll('.shirt > div')?.length, 1); ``` -You should give the new `div` a content of `💜`, but found `--fcc-actual--`. +Debe dar al nuevo `div` un contenido de `💜`, pero encontrado `--fcc-actual--`. ```js assert.equal(document.querySelector('.shirt > div')?.textContent, '💜'); diff --git a/curriculum/challenges/espanol/14-responsive-web-design-22/learn-css-transforms-by-building-a-penguin/619d15d955d9d418c4487bbc.md b/curriculum/challenges/espanol/14-responsive-web-design-22/learn-css-transforms-by-building-a-penguin/619d15d955d9d418c4487bbc.md index 41e3989f447..aa905022405 100644 --- a/curriculum/challenges/espanol/14-responsive-web-design-22/learn-css-transforms-by-building-a-penguin/619d15d955d9d418c4487bbc.md +++ b/curriculum/challenges/espanol/14-responsive-web-design-22/learn-css-transforms-by-building-a-penguin/619d15d955d9d418c4487bbc.md @@ -7,17 +7,17 @@ dashedName: step-73 # --description-- -Within `.shirt`, after the `div` element, add a `p` element with the following content: `I CSS` +Dentro de `.shirt`, después del elemento `div`, agregue un elemento `p` con el siguiente contenido: `I CSS` # --hints-- -You should add one `p` element within `.shirt`, but found `--fcc-actual--`. +Debe agregar un elemento `p` dentro de `.shirt`, pero encontró `--fcc-actual--`. ```js assert.equal(document.querySelectorAll('.shirt > p')?.length, 1); ``` -You should give the `p` element the content `I CSS`, but found `--fcc-actual--`. +Debe darle al elemento `p` el contenido `I CSS`, pero encontró `--fcc-actual--`. ```js assert.equal(document.querySelector('.shirt > p')?.textContent, 'I CSS'); diff --git a/curriculum/challenges/espanol/14-responsive-web-design-22/learn-css-transforms-by-building-a-penguin/619d1629a8adc61960ca8b40.md b/curriculum/challenges/espanol/14-responsive-web-design-22/learn-css-transforms-by-building-a-penguin/619d1629a8adc61960ca8b40.md index 007a57af379..b052d4a330a 100644 --- a/curriculum/challenges/espanol/14-responsive-web-design-22/learn-css-transforms-by-building-a-penguin/619d1629a8adc61960ca8b40.md +++ b/curriculum/challenges/espanol/14-responsive-web-design-22/learn-css-transforms-by-building-a-penguin/619d1629a8adc61960ca8b40.md @@ -7,29 +7,29 @@ dashedName: step-74 # --description-- -Target the `.shirt` element, and set its `font-size` to `25px`, `font-family` to `Helvetica` with a fallback of `sans-serif`, and `font-weight` to `bold`. +Apunte al elemento `.shirt` y establezca su `font-size` en `25px`, `font-family` a `Helvetica` con una reserva de `sans-serif` y `font-weight` a `bold`. # --hints-- -You should use the `.shirt` selector. +Debe usar el selector `.shirt`. ```js assert.match(code, /\.shirt\s*\{/); ``` -You should give `.shirt` a `font-size` of `--fcc-expected--`, but found `--fcc-actual--`. +Debe dar a `.shirt` un `font-size` de `--fcc-expected--`, pero encontró `--fcc-actual--`. ```js assert.equal(new __helpers.CSSHelp(document).getStyle('.shirt')?.fontSize, '25px'); ``` -You should give `.shirt` a `font-family` of `--fcc-expected--`, but found `--fcc-actual--`. +Debe dar a `.shirt` un `font-family` de `--fcc-expected--`, pero encontró `--fcc-actual--`. ```js assert.equal(new __helpers.CSSHelp(document).getStyle('.shirt')?.fontFamily, 'Helvetica, sans-serif'); ``` -You should give `.shirt` a `font-weight` of `--fcc-expected--`, but found `--fcc-actual--`. +Debe dar a `.shirt` un `font-weight` de `--fcc-expected--`, pero encontró `--fcc-actual--`. ```js assert.equal(new __helpers.CSSHelp(document).getStyle('.shirt')?.fontWeight, 'bold'); diff --git a/curriculum/challenges/espanol/14-responsive-web-design-22/learn-css-transforms-by-building-a-penguin/619d1c5fc9f8941a400955da.md b/curriculum/challenges/espanol/14-responsive-web-design-22/learn-css-transforms-by-building-a-penguin/619d1c5fc9f8941a400955da.md index 68e0b9583bb..09ac8e88230 100644 --- a/curriculum/challenges/espanol/14-responsive-web-design-22/learn-css-transforms-by-building-a-penguin/619d1c5fc9f8941a400955da.md +++ b/curriculum/challenges/espanol/14-responsive-web-design-22/learn-css-transforms-by-building-a-penguin/619d1c5fc9f8941a400955da.md @@ -7,19 +7,19 @@ dashedName: step-75 # --description-- -In some browsers, the _heart_ emoji may look slightly different from the previous step. This is because some of the character's properties were overridden by the `font-weight` style of `bold`. +En algunos navegadores, el emoji _corazón_ puede verse ligeramente diferente al paso anterior. Esto se debe a que algunas de las propiedades del carácter fueron anuladas por el estilo `font-weight` de `bold`. -Fix this, by targeting the `div` with the heart emoji, and setting its `font-weight` to its original value. +Solucione esto, apuntando al `div` con el emoji del corazón y estableciendo su `font-weight` a su valor original. # --hints-- -You should use the `.shirt div` selector to target the `div` with the heart emoji. +Debes usar el selector `.shirt div` para apuntar al `div` con el emoji del corazón. ```js assert.match(code, /\.shirt div\s*\{/); ``` -You should give the `.shirt div` a `font-weight` of `initial` or `normal`. +Debe asignar al div`.shirt div` un `font-weight` de `initial` o `normal`. ```js assert.include(['normal', 'initial'], new __helpers.CSSHelp(document).getStyle('.shirt div')?.fontWeight); diff --git a/curriculum/challenges/espanol/14-responsive-web-design-22/learn-css-transforms-by-building-a-penguin/619d1dab9ff3421ae1976991.md b/curriculum/challenges/espanol/14-responsive-web-design-22/learn-css-transforms-by-building-a-penguin/619d1dab9ff3421ae1976991.md index bfac6adb54e..b702a02c7ad 100644 --- a/curriculum/challenges/espanol/14-responsive-web-design-22/learn-css-transforms-by-building-a-penguin/619d1dab9ff3421ae1976991.md +++ b/curriculum/challenges/espanol/14-responsive-web-design-22/learn-css-transforms-by-building-a-penguin/619d1dab9ff3421ae1976991.md @@ -7,17 +7,17 @@ dashedName: step-76 # --description-- -Position the `div` with the heart emoji `22.5px` from the top, and `12px` from the left of its parent. +Coloca el `div` con el emoji del corazón `22.5px` desde la parte superior, y `12px` a la izquierda de su padre. # --hints-- -You should give `.shirt div` a `top` of `--fcc-expected--`, but found `--fcc-actual--`. +Debe dar a `.shirt div` un `top` de `--fcc-expected--`, pero encontró `--fcc-actual--`. ```js assert.equal(new __helpers.CSSHelp(document).getStyle('.shirt div')?.top, '22.5px'); ``` -You should give `.shirt div` a `left` of `--fcc-expected--`, but found `--fcc-actual--`. +Debes darle a `.shirt div` un `left` de `--fcc-expected--`, pero se encontró `--fcc-actual--`. ```js assert.equal(new __helpers.CSSHelp(document).getStyle('.shirt div')?.left, '12px'); diff --git a/curriculum/challenges/espanol/14-responsive-web-design-22/learn-css-transforms-by-building-a-penguin/619d1deb8b04811b8839ffe4.md b/curriculum/challenges/espanol/14-responsive-web-design-22/learn-css-transforms-by-building-a-penguin/619d1deb8b04811b8839ffe4.md index b30f7fb2176..d34a6e6bdf9 100644 --- a/curriculum/challenges/espanol/14-responsive-web-design-22/learn-css-transforms-by-building-a-penguin/619d1deb8b04811b8839ffe4.md +++ b/curriculum/challenges/espanol/14-responsive-web-design-22/learn-css-transforms-by-building-a-penguin/619d1deb8b04811b8839ffe4.md @@ -7,23 +7,23 @@ dashedName: step-77 # --description-- -Position the `.shirt` element `165px` from the top, and `127.5px` from the left of its parent. Then, increase its stacking order such that it appears above the `.penguin-body` element. +Coloque el elemento `.shirt` `165px` desde la parte superior y `127.5px` desde la izquierda de su elemento primario. Luego, aumente su orden de apilamiento de modo que aparezca encima del elemento `.penguin-body`. # --hints-- -You should give `.shirt` a `top` of `--fcc-expected--`, but found `--fcc-actual--`. +Debe dar a `.shirt` un `top` de `--fcc-expected--`, pero encontró `--fcc-actual--`. ```js assert.equal(new __helpers.CSSHelp(document).getStyle('.shirt')?.top, '165px'); ``` -You should give `.shirt` a `left` of `--fcc-expected--`, but found `--fcc-actual--`. +Debe dar a `.shirt` un `left` de `--fcc-expected--`, pero encontró `--fcc-actual--`. ```js assert.equal(new __helpers.CSSHelp(document).getStyle('.shirt')?.left, '127.5px'); ``` -You should give the `.shirt` element a `z-index` of `1`. +Debe asignar al elemento `.shirt` un `z-index` de `1`. ```js assert.equal(new __helpers.CSSHelp(document).getStyle('.shirt')?.zIndex, '1'); diff --git a/curriculum/challenges/espanol/14-responsive-web-design-22/learn-css-transforms-by-building-a-penguin/619d1e7a8e81a61c5a819dc4.md b/curriculum/challenges/espanol/14-responsive-web-design-22/learn-css-transforms-by-building-a-penguin/619d1e7a8e81a61c5a819dc4.md index 7b4b97a00dd..735b469fcd7 100644 --- a/curriculum/challenges/espanol/14-responsive-web-design-22/learn-css-transforms-by-building-a-penguin/619d1e7a8e81a61c5a819dc4.md +++ b/curriculum/challenges/espanol/14-responsive-web-design-22/learn-css-transforms-by-building-a-penguin/619d1e7a8e81a61c5a819dc4.md @@ -7,11 +7,11 @@ dashedName: step-78 # --description-- -For the shirt's final touch, set the `color` to `#6a6969`. +Para el toque final de la camiseta, configura el `color` en `#6a6969`. # --hints-- -You should give `.shirt` a `color` of `#6a6969`. +Debes darle a `.shirt` un `color` de `#6a6969`. ```js assert.equal(new __helpers.CSSHelp(document).getStyle('.shirt')?.color, 'rgb(106, 105, 105)'); diff --git a/curriculum/challenges/espanol/14-responsive-web-design-22/learn-css-transforms-by-building-a-penguin/619d1ed33c9a071cf657a0d6.md b/curriculum/challenges/espanol/14-responsive-web-design-22/learn-css-transforms-by-building-a-penguin/619d1ed33c9a071cf657a0d6.md index 1f4babfa64f..b351131afd2 100644 --- a/curriculum/challenges/espanol/14-responsive-web-design-22/learn-css-transforms-by-building-a-penguin/619d1ed33c9a071cf657a0d6.md +++ b/curriculum/challenges/espanol/14-responsive-web-design-22/learn-css-transforms-by-building-a-penguin/619d1ed33c9a071cf657a0d6.md @@ -7,43 +7,43 @@ dashedName: step-79 # --description-- -Fun fact: Penguins cannot stand without at least two feet. +Dato curioso: los pingüinos no pueden pararse sin al menos dos pies. -Within the `.penguin-body` element, add two `div` elements each with a `class` of `foot`. Give the first `.foot` a `class` of `left`, and the second `.foot` a `class` of `right`. +Dentro del elemento `.penguin-body`, agregue dos elementos `div` cada uno con una `class` de `foot`. Dale al primer `.foot` una `class` de `left`, y al segundo `.foot` una `class` de `right`. # --hints-- -You should add two `div` elements within `.penguin-body`. Expected `--fcc-expected--` `div` elements, found `--fcc-actual--`. +Debe agregar dos elementos `div` dentro de `.penguin-body`. Elementos `--fcc-expected--` `div` esperados, pero; se encontró `--fcc-actual--`. ```js assert.equal(document.querySelectorAll('.penguin-body > div')?.length, 2); ``` -You should give the first new `div` a `class` of `foot`. +Debes darle al primer `div` nuevo una `class` de `foot`. ```js assert.exists(document.querySelector('.penguin-body > div.foot')); ``` -You should give the second new `div` a `class` of `foot`. +Debes darle al segundo `div` nuevo una `class` de `foot`. ```js assert.equal(document.querySelectorAll('.penguin-body > div.foot')?.length, 2); ``` -You should give one `div` a `class` of `left`. +Debes darle a un `div` una `class` de `left`. ```js assert.exists(document.querySelector('.penguin-body > div.foot.left')); ``` -You should give the other `div` a `class` of `right`. +Debes darle al otro `div` una `class` de `right`. ```js assert.exists(document.querySelector('.penguin-body > div.foot.right')); ``` -You should place `.foot.right` after `.foot.left`. +Debe colocar `.foot.right` después de `.foot.left`. ```js assert.exists(document.querySelector('.foot.left + .foot.right')); diff --git a/curriculum/challenges/espanol/14-responsive-web-design-22/learn-css-transforms-by-building-a-penguin/619d1fb5d244c31db8a7fdb7.md b/curriculum/challenges/espanol/14-responsive-web-design-22/learn-css-transforms-by-building-a-penguin/619d1fb5d244c31db8a7fdb7.md index 17e88f349e8..873a7e71e43 100644 --- a/curriculum/challenges/espanol/14-responsive-web-design-22/learn-css-transforms-by-building-a-penguin/619d1fb5d244c31db8a7fdb7.md +++ b/curriculum/challenges/espanol/14-responsive-web-design-22/learn-css-transforms-by-building-a-penguin/619d1fb5d244c31db8a7fdb7.md @@ -7,29 +7,29 @@ dashedName: step-80 # --description-- -Target the `.foot` elements, and give them a `width` of `15%`, `height` of `30%`, and `background-color` of `orange`. +Apunte a los elementos`.foot` y asígneles un `width` de `15%`,`height` de `30%` y `background-color` de `orange`. # --hints-- -You should use the `.foot` selector. +Debe utilizar el selector `.foot`. ```js assert.match(code, /\.foot\s*\{/); ``` -You should give `.foot` a `width` of `--fcc-expected--`, found `--fcc-actual--`. +Debe dar a `.foot` un`width` de `--fcc-expected--`, pero se encontró `--fcc-actual--`. ```js assert.equal(new __helpers.CSSHelp(document).getStyle('.foot')?.width, '15%'); ``` -You should give `.foot` a `height` of `--fcc-expected--`, found `--fcc-actual--`. +Debe darle a `.foot` una `height` de `--fcc-expected--`, pero; se encontró `--fcc-actual--`. ```js assert.equal(new __helpers.CSSHelp(document).getStyle('.foot')?.height, '30%'); ``` -You should give `.foot` a `background-color` of `--fcc-expected--`, found `--fcc-actual--`. +Debe darle a `.foot` un `background-color` de `--fcc-expected--`, encontrado `--fcc-actual--`. ```js assert.equal(new __helpers.CSSHelp(document).getStyle('.foot')?.backgroundColor, 'orange'); diff --git a/curriculum/challenges/espanol/14-responsive-web-design-22/learn-css-transforms-by-building-a-penguin/619d204bd73ae51e743b8e94.md b/curriculum/challenges/espanol/14-responsive-web-design-22/learn-css-transforms-by-building-a-penguin/619d204bd73ae51e743b8e94.md index 1492cf2a4d3..537a7b294b7 100644 --- a/curriculum/challenges/espanol/14-responsive-web-design-22/learn-css-transforms-by-building-a-penguin/619d204bd73ae51e743b8e94.md +++ b/curriculum/challenges/espanol/14-responsive-web-design-22/learn-css-transforms-by-building-a-penguin/619d204bd73ae51e743b8e94.md @@ -7,17 +7,17 @@ dashedName: step-81 # --description-- -Position the `.foot` elements `85%` from the top of their parent, and give all corners a radius of `50%`. +Coloque los elementos `.foot` `85%` desde la parte superior de su elemento principal y asigne a todas las esquinas un radio de `50%`. # --hints-- -You should give `.foot` a `top` of `--fcc-expected--`, but found `--fcc-actual--`. +Debe dar a `.foot` un `top` de `--fcc-expected--`, pero encontró `--fcc-actual--`. ```js assert.equal(new __helpers.CSSHelp(document).getStyle('.foot')?.top, '85%'); ``` -You should give `.foot` a `border-radius` of `--fcc-expected--`, but found `--fcc-actual--`. +Debe dar a `.foot` un `border-radius` de `--fcc-expected--`, pero encontró `--fcc-actual--`. ```js assert.equal(new __helpers.CSSHelp(document).getStyle('.foot')?.borderRadius, '50%'); diff --git a/curriculum/challenges/espanol/14-responsive-web-design-22/learn-css-transforms-by-building-a-penguin/619d20b12996101f430920fb.md b/curriculum/challenges/espanol/14-responsive-web-design-22/learn-css-transforms-by-building-a-penguin/619d20b12996101f430920fb.md index 20bac98f1c2..e9a70cffc9d 100644 --- a/curriculum/challenges/espanol/14-responsive-web-design-22/learn-css-transforms-by-building-a-penguin/619d20b12996101f430920fb.md +++ b/curriculum/challenges/espanol/14-responsive-web-design-22/learn-css-transforms-by-building-a-penguin/619d20b12996101f430920fb.md @@ -7,31 +7,31 @@ dashedName: step-82 # --description-- -The penguin's beak and feet share the same `color`. +El pico y las patas del pingüino comparten el mismo `color`. -Create a new custom CSS variable named `--penguin-picorna`, and replace all relavant property values with it. +Cree una nueva variable CSS personalizada llamada `--penguin-picorna` y reemplace todos los valores de propiedad relevantes con ella. # --hints-- -You should give `:root` a `--penguin-picorna` property. +Debe darle a `:root` una propiedad `--penguin-picorna`. ```js assert.exists(new __helpers.CSSHelp(document).getStyle(':root').getPropertyValue('--penguin-picorna')); ``` -You should give `--penguin-picorna` a value of `orange`, but found `--fcc-actual--`. +Deberías darle a `--penguin-picorna` un valor de `orange`, pero encontró `--fcc-actual--`. ```js assert.equal(new __helpers.CSSHelp(document).getStyle(':root').getPropVal('--penguin-picorna', true), 'orange'); ``` -You should give `.beak` a `background-color` of `var(--penguin-picorna)`, but found `--fcc-actual--`. +Debería darle a `.beak` un `background-color` de `var(--penguin-picorna)`, pero encontró `--fcc-actual--`. ```js assert.equal(new __helpers.CSSHelp(document).getStyle('.beak')?.getPropVal('background-color', true), 'var(--penguin-picorna)'); ``` -You should give `.foot` a `background-color` of `var(--penguin-picorna)`, but found `--fcc-actual--`. +Debería darle a `.foot` un `background-color` de `var(--penguin-picorna)`, pero encontró `--fcc-actual--`. ```js assert.equal(new __helpers.CSSHelp(document).getStyle('.foot')?.getPropVal('background-color', true), 'var(--penguin-picorna)'); diff --git a/curriculum/challenges/espanol/14-responsive-web-design-22/learn-css-transforms-by-building-a-penguin/619d21fe6a3f9b2016be9d9d.md b/curriculum/challenges/espanol/14-responsive-web-design-22/learn-css-transforms-by-building-a-penguin/619d21fe6a3f9b2016be9d9d.md index 8d173951de7..74331fe3f2d 100644 --- a/curriculum/challenges/espanol/14-responsive-web-design-22/learn-css-transforms-by-building-a-penguin/619d21fe6a3f9b2016be9d9d.md +++ b/curriculum/challenges/espanol/14-responsive-web-design-22/learn-css-transforms-by-building-a-penguin/619d21fe6a3f9b2016be9d9d.md @@ -7,29 +7,29 @@ dashedName: step-83 # --description-- -Target the `.foot` element with a `class` of `left`, and position it `25%` left of its parent. Then, target the `.foot` element with a `class` of `right`, and position it `25%` right of its parent. +Apunte al elemento `.foot` con una `class` de `left` y colóquelo `25%` a la izquierda de su padre. Luego, apunte al elemento `.foot` con una `class` de `right`, y colóquelo `25%` a la derecha de su padre. # --hints-- -You should use the `.foot.left` selector. +Debe utilizar el selector `.foot.left`. ```js assert.match(code, /\.foot\.left\s*\{/); ``` -You should give `.foot.left` a `left` of `--fcc-expected--`, but found `--fcc-actual--`. +Debería dar a `.foot.left` un `left` de `--fcc-expected--`, pero encontró `--fcc-actual--`. ```js assert.equal(new __helpers.CSSHelp(document).getStyle('.foot.left')?.left, '25%'); ``` -You should use the `.foot.right` selector. +Debe utilizar el selector `.foot.right`. ```js assert.match(code, /\.foot\.right\s*\{/); ``` -You should give `.foot.right` a `right` of `--fcc-expected--`, but found `--fcc-actual--`. +Debería dar a `.foot.right` un `right` de `--fcc-expected--`, pero encontró `--fcc-actual--`. ```js assert.equal(new __helpers.CSSHelp(document).getStyle('.foot.right')?.right, '25%'); diff --git a/curriculum/challenges/espanol/14-responsive-web-design-22/learn-css-transforms-by-building-a-penguin/619d229b0e542520cd91c685.md b/curriculum/challenges/espanol/14-responsive-web-design-22/learn-css-transforms-by-building-a-penguin/619d229b0e542520cd91c685.md index 3819e0e5ef9..0baa6c8e629 100644 --- a/curriculum/challenges/espanol/14-responsive-web-design-22/learn-css-transforms-by-building-a-penguin/619d229b0e542520cd91c685.md +++ b/curriculum/challenges/espanol/14-responsive-web-design-22/learn-css-transforms-by-building-a-penguin/619d229b0e542520cd91c685.md @@ -7,17 +7,17 @@ dashedName: step-84 # --description-- -To make the penguin's feet look more _penguiny_, rotate the left foot by `80deg`, and the right by `-80deg`. +Para que las patas del pingüino se vean más _penguiny_, gira el pie izquierdo por `80deg`, y el derecho por `-80deg`. # --hints-- -You should give `.foot.left` a `transform` of `rotate(80deg)`. +Debe dar a `.foot.left` un `transform` de `rotate(80deg)`. ```js assert.equal(new __helpers.CSSHelp(document).getStyle('.foot.left').getPropVal('transform', true), 'rotate(80deg)'); ``` -You should give `.foot.right` a `transform` of `rotate(-80deg)`. +Debe dar a `.foot.right` un `transform` de `rotate(-80deg)`. ```js assert.equal(new __helpers.CSSHelp(document).getStyle('.foot.right').getPropVal('transform', true), 'rotate(-80deg)'); diff --git a/curriculum/challenges/espanol/14-responsive-web-design-22/learn-css-transforms-by-building-a-penguin/619d23089e787e216a7043d6.md b/curriculum/challenges/espanol/14-responsive-web-design-22/learn-css-transforms-by-building-a-penguin/619d23089e787e216a7043d6.md index ce5b39fe0d5..fe7c1f95e6a 100644 --- a/curriculum/challenges/espanol/14-responsive-web-design-22/learn-css-transforms-by-building-a-penguin/619d23089e787e216a7043d6.md +++ b/curriculum/challenges/espanol/14-responsive-web-design-22/learn-css-transforms-by-building-a-penguin/619d23089e787e216a7043d6.md @@ -7,11 +7,11 @@ dashedName: step-85 # --description-- -Change the stacking order of the `.foot` elements such that they appear beneath the `.penguin-body` element. +Cambie el orden de apilamiento de los elementos `.foot` de modo que aparezcan debajo del elemento `.penguin-body`. # --hints-- -You should give `.foot` a `z-index` of `--fcc-expected--`, but found `--fcc-actual--`. +Debe dar a `.foot` un `z-index` de `--fcc-expected--`, pero encontró `--fcc-actual--`. ```js assert.equal(new __helpers.CSSHelp(document).getStyle('.foot')?.zIndex, '-1'); diff --git a/curriculum/challenges/espanol/14-responsive-web-design-22/learn-css-transforms-by-building-a-penguin/619d237a107c10221ed743fa.md b/curriculum/challenges/espanol/14-responsive-web-design-22/learn-css-transforms-by-building-a-penguin/619d237a107c10221ed743fa.md index 3fed416380c..ff90ac76f58 100644 --- a/curriculum/challenges/espanol/14-responsive-web-design-22/learn-css-transforms-by-building-a-penguin/619d237a107c10221ed743fa.md +++ b/curriculum/challenges/espanol/14-responsive-web-design-22/learn-css-transforms-by-building-a-penguin/619d237a107c10221ed743fa.md @@ -7,43 +7,43 @@ dashedName: step-86 # --description-- -Fun fact: Penguins cannot fly without wings. +Dato curioso: los pingüinos no pueden volar sin alas. -Within `.penguin-body`, before the `.foot` elements, add two `div` elements each with a `class` of `arm`. Give the first `.arm` a `class` of `left`, and the second `.arm` a `class` of `right`. +Dentro de `.penguin-body`, antes de los elementos `.foot`, agregue dos elementos `div` cada uno con un `class` de `arm`. Dé al primer `.arm` un `class` de `left`, y al segundo `.arm` un `class` de `right`. # --hints-- -You should add two `div` elements within `.penguin-body`. Expected `--fcc-expected--` `div` elements, found `--fcc-actual--`. +Debe agregar dos elementos `div` dentro de `.penguin-body`. Se esperan los elementos `--fcc-expected--` `div`, encontrados `--fcc-actual--`. ```js assert.equal(document.querySelectorAll('.penguin-body > div')?.length, 4); ``` -You should give the first new `div` a `class` of `arm`. +Debe dar al primer `div` nuevo un `class` de `arm`. ```js assert.exists(document.querySelector('.penguin-body > div.arm')); ``` -You should give the second new `div` a `class` of `arm`. +Debe dar al segundo nuevo `div` un `class` de `arm`. ```js assert.equal(document.querySelectorAll('.penguin-body > div.arm')?.length, 2); ``` -You should give one `div` a `class` of `left`. +Debes darle a un `div` una `class` de `left`. ```js assert.exists(document.querySelector('.penguin-body > div.arm.left')); ``` -You should give the other `div` a `class` of `right`. +Debes darle al otro `div` una `class` de `right`. ```js assert.exists(document.querySelector('.penguin-body > div.arm.right')); ``` -You should place `.arm.right` after `.arm.left`. +Debe colocar `.arm.right` después de `.arm.left`. ```js assert.exists(document.querySelector('.arm.left + .arm.right')); diff --git a/curriculum/challenges/espanol/14-responsive-web-design-22/learn-css-transforms-by-building-a-penguin/619d26b12e651022d80cd017.md b/curriculum/challenges/espanol/14-responsive-web-design-22/learn-css-transforms-by-building-a-penguin/619d26b12e651022d80cd017.md index 33382de8781..1c441df4c2c 100644 --- a/curriculum/challenges/espanol/14-responsive-web-design-22/learn-css-transforms-by-building-a-penguin/619d26b12e651022d80cd017.md +++ b/curriculum/challenges/espanol/14-responsive-web-design-22/learn-css-transforms-by-building-a-penguin/619d26b12e651022d80cd017.md @@ -7,29 +7,29 @@ dashedName: step-87 # --description-- -Target the `.arm` elements, and give them a `width` of `30%`, a `height` of `60%`, and a `background` of linear gradient at `90deg` from clockwise, starting at `gray`, and ending at `rgb(209, 210, 199)`. +Apunta a los elementos `.arm` y dales, un `width` de `30%`, un `height` de `60%`, y un `background` de degradado lineal a `90deg` desde el sentido de las agujas del reloj, comenzando en `gray` y terminando en `rgb(209, 210, 199)`. # --hints-- -You should use the `.arm` selector. +Debe usar el selector `.arm`. ```js assert.match(code, /\.arm\s*\{/); ``` -You should give `.arm` a `width` of `--fcc-expected--`, found `--fcc-actual--`. +Debes darle a `.arm` un `width` de `--fcc-expected--`, encontrado `--fcc-actual--`. ```js assert.equal(new __helpers.CSSHelp(document).getStyle('.arm')?.width, '30%'); ``` -You should give `.arm` a `height` of `--fcc-expected--`, found `--fcc-actual--`. +Debe darle a `.arm` una `height` de `--fcc-expected--`, encontró `--fcc-actual--`. ```js assert.equal(new __helpers.CSSHelp(document).getStyle('.arm')?.height, '60%'); ``` -You should give `.arm` a `background` of `linear-gradient(90deg, gray, rgb(209, 210, 199))`. +Debes darle a `.arm` un `background` de `linear-gradient(90deg, gray, rgb(209, 210, 199))`. ```js assert.include(['linear-gradient(90deg,gray,rgb(209,210,199))', 'rgba(0,0,0,0)linear-gradient(90deg,gray,rgb(209,210,199))repeatscroll0%0%'], new __helpers.CSSHelp(document).getStyle('.arm')?.getPropVal('background', true)); diff --git a/curriculum/challenges/espanol/14-responsive-web-design-22/learn-css-transforms-by-building-a-penguin/619d2712853306238f41828e.md b/curriculum/challenges/espanol/14-responsive-web-design-22/learn-css-transforms-by-building-a-penguin/619d2712853306238f41828e.md index 83b79ae5b24..f07cdb29a2b 100644 --- a/curriculum/challenges/espanol/14-responsive-web-design-22/learn-css-transforms-by-building-a-penguin/619d2712853306238f41828e.md +++ b/curriculum/challenges/espanol/14-responsive-web-design-22/learn-css-transforms-by-building-a-penguin/619d2712853306238f41828e.md @@ -7,35 +7,35 @@ dashedName: step-88 # --description-- -Create a custom CSS variable named `--penguin-skin`, and set it to `gray`. Then, replace all relevant property values with it. +Cree una variable CSS personalizada llamada `--penguin-skin` y configúrela en `gray`. Luego, vuelva a colocar todos los valores de la propiedad con ella. # --hints-- -You should give `:root` a `--penguin-skin` property. +Debe darle a `:root` una propiedad `--penguin-skin`. ```js assert.exists(new __helpers.CSSHelp(document).getStyle(':root').getPropertyValue('--penguin-skin')); ``` -You should give `--penguin-skin` a value of `gray`, but found `--fcc-actual--`. +Debería darle a `--penguin-skin` un valor de `gray`, pero encontró `--fcc-actual--`. ```js assert.equal(new __helpers.CSSHelp(document).getStyle(':root').getPropVal('--penguin-skin', true), 'gray'); ``` -You should give `.penguin-head` a `background` of `linear-gradient(45deg, var(--penguin-skin), rgb(239, 240, 228))`. +Debes darle a `.penguin-head` un `background` de `linear-gradient(45deg, var(--penguin-skin), rgb(239, 240, 228))`. ```js assert.equal(new __helpers.CSSHelp(document).getStyle('.penguin-head')?.getPropVal('background', true), 'linear-gradient(45deg,var(--penguin-skin),rgb(239,240,228))'); ``` -You should give `.penguin-body::before` a `background-color` of `var(--penguin-skin)`, but found `--fcc-actual--`. +Debería darle a `.penguin-body::before` un `background-color` de `var(--penguin-skin)`, pero encontró `--fcc-actual--`. ```js assert.equal(new __helpers.CSSHelp(document).getStyle('.penguin-body::before')?.getPropVal('background-color', true), 'var(--penguin-skin)'); ``` -You should give `.arm` a `background` of `linear-gradient(90deg, var(--penguin-skin), rgb(209, 210, 199))`. +Debes darle a `.arm` un `background` de `linear-gradient(90deg, var(--penguin-skin), rgb(209, 210, 199))`. ```js assert.equal(new __helpers.CSSHelp(document).getStyle('.arm')?.getPropVal('background', true), 'linear-gradient(90deg,var(--penguin-skin),rgb(209,210,199))'); diff --git a/curriculum/challenges/espanol/14-responsive-web-design-22/learn-css-transforms-by-building-a-penguin/619d2b7a84e78b246f2d17a2.md b/curriculum/challenges/espanol/14-responsive-web-design-22/learn-css-transforms-by-building-a-penguin/619d2b7a84e78b246f2d17a2.md index cfc471aa76b..6e34cf54f10 100644 --- a/curriculum/challenges/espanol/14-responsive-web-design-22/learn-css-transforms-by-building-a-penguin/619d2b7a84e78b246f2d17a2.md +++ b/curriculum/challenges/espanol/14-responsive-web-design-22/learn-css-transforms-by-building-a-penguin/619d2b7a84e78b246f2d17a2.md @@ -7,41 +7,41 @@ dashedName: step-89 # --description-- -Target the `.arm` element with a `class` of `left`, and position it `35%` from the top, and `5%` from the left of its parent. Then, target the `.arm` element with a `class` of `right`, and position it `0%` from the top, and `-5%` from the right of its parent. +Apunte al elemento `.arm` con una `class` de `left`, y colóquelo `35%` desde la parte superior, y `5%` desde la izquierda de su padre. Luego, apunte al elemento `.arm` con una `class` de `right`, y colóquelo `0%` desde la parte superior, y `-5%` desde la derecha de su padre. # --hints-- -You should use the `.arm.left` selector. +Debe usar el selector `.arm.left`. ```js assert.match(code, /\.arm\.left\s*\{/); ``` -You should give `.arm.left` a `top` of `--fcc-expected--`, but found `--fcc-actual--`. +Debe dar a `.arm.left` un `top` de `--fcc-expected--`, pero encontró `--fcc-actual--`. ```js assert.equal(new __helpers.CSSHelp(document).getStyle('.arm.left')?.top, '35%'); ``` -You should give `.arm.left` a `left` of `--fcc-expected--`, but found `--fcc-actual--`. +Debe darle a `.arm.left` un `left` de `--fcc-expected--`, pero se encontró `--fcc-actual--`. ```js assert.equal(new __helpers.CSSHelp(document).getStyle('.arm.left')?.left, '5%'); ``` -You should use the `.arm.right` selector. +Debe usar el selector `.arm.right`. ```js assert.match(code, /\.arm\.right\s*\{/); ``` -You should give `.arm.right` a `top` of `0%`. +Debes darle a `.arm.right` un `top` de `0%`. ```js assert.include(['0%', '0', '0px'], new __helpers.CSSHelp(document).getStyle('.arm.right')?.top); ``` -You should give `.arm.right` a `right` of `--fcc-expected--`, but found `--fcc-actual--`. +Debe dar a `.arm.right` un `right` de `--fcc-expected--`, pero encontró `--fcc-actual--`. ```js assert.equal(new __helpers.CSSHelp(document).getStyle('.arm.right')?.right, '-5%'); diff --git a/curriculum/challenges/espanol/14-responsive-web-design-22/learn-css-transforms-by-building-a-penguin/619d2bd9c1d43c2526e96f1f.md b/curriculum/challenges/espanol/14-responsive-web-design-22/learn-css-transforms-by-building-a-penguin/619d2bd9c1d43c2526e96f1f.md index 44b3e807442..30e89e3c453 100644 --- a/curriculum/challenges/espanol/14-responsive-web-design-22/learn-css-transforms-by-building-a-penguin/619d2bd9c1d43c2526e96f1f.md +++ b/curriculum/challenges/espanol/14-responsive-web-design-22/learn-css-transforms-by-building-a-penguin/619d2bd9c1d43c2526e96f1f.md @@ -7,17 +7,17 @@ dashedName: step-90 # --description-- -Within the `.arm.left` selector, alter the origin of the `transform` function to be the top left corner of its parent. +Dentro del selector `.arm.left`, modifique el origen de la función `transform` para que sea la esquina superior izquierda de su padre. # --hints-- -You should use the `transform-origin` property to do this. +Debe usar la propiedad `transform-origin` para hacer esto. ```js assert.notEmpty(new __helpers.CSSHelp(document).getStyle('.arm.left')?.transformOrigin); ``` -You should give `.arm.left` a `transform-origin` of `0% 0%` or `top left`. +Debes darle a `.arm.left` un `transform-origin` de `0% 0%` o `top left`. ```js assert.include(['0% 0%', 'left top', '0% 0% 0px', 'left top 0px'], new __helpers.CSSHelp(document).getStyle('.arm.left')?.transformOrigin); diff --git a/curriculum/challenges/espanol/14-responsive-web-design-22/learn-css-transforms-by-building-a-penguin/619d2d4e80400325ff89664a.md b/curriculum/challenges/espanol/14-responsive-web-design-22/learn-css-transforms-by-building-a-penguin/619d2d4e80400325ff89664a.md index 80fe3797c13..3304e3a5a4c 100644 --- a/curriculum/challenges/espanol/14-responsive-web-design-22/learn-css-transforms-by-building-a-penguin/619d2d4e80400325ff89664a.md +++ b/curriculum/challenges/espanol/14-responsive-web-design-22/learn-css-transforms-by-building-a-penguin/619d2d4e80400325ff89664a.md @@ -7,11 +7,11 @@ dashedName: step-91 # --description-- -To keep the linear gradient on the correct side of the penguin's left arm, first rotate it by `130deg`, then invert the x-axis. +Para mantener el degradado lineal en el lado correcto del brazo izquierdo del pingüino, primero gírelo `130deg` y luego invierta el eje x. # --hints-- -You should give `.arm.left` a `transform` of `rotate(130deg) scaleX(-1)`. +Debes darle a `.arm.left` una `transform` de `rotate(130deg) scaleX(-1)`. ```js assert.equal(new __helpers.CSSHelp(document).getStyle('.arm.left').getPropVal('transform', true), 'rotate(130deg)scaleX(-1)'); diff --git a/curriculum/challenges/espanol/14-responsive-web-design-22/learn-css-transforms-by-building-a-penguin/619d2ebc81ba81271460850d.md b/curriculum/challenges/espanol/14-responsive-web-design-22/learn-css-transforms-by-building-a-penguin/619d2ebc81ba81271460850d.md index f00a923d58a..6c4fbbb8b7f 100644 --- a/curriculum/challenges/espanol/14-responsive-web-design-22/learn-css-transforms-by-building-a-penguin/619d2ebc81ba81271460850d.md +++ b/curriculum/challenges/espanol/14-responsive-web-design-22/learn-css-transforms-by-building-a-penguin/619d2ebc81ba81271460850d.md @@ -7,11 +7,11 @@ dashedName: step-92 # --description-- -Rotate the right arm by `45deg` counterclockwise. +Gire el brazo derecho `45deg` en sentido contrario a las agujas del reloj. # --hints-- -You should give `.arm.right` a `transform` of `rotate(-45deg)`. +Debes darle a `.arm.right` una `transform` de `rotate(-45deg)`. ```js assert.equal(new __helpers.CSSHelp(document).getStyle('.arm.right')?.getPropVal('transform', true), 'rotate(-45deg)'); diff --git a/curriculum/challenges/espanol/14-responsive-web-design-22/learn-css-transforms-by-building-a-penguin/619d2f0e9440bc27caee1cec.md b/curriculum/challenges/espanol/14-responsive-web-design-22/learn-css-transforms-by-building-a-penguin/619d2f0e9440bc27caee1cec.md index e8d18694dff..fdce394cfa2 100644 --- a/curriculum/challenges/espanol/14-responsive-web-design-22/learn-css-transforms-by-building-a-penguin/619d2f0e9440bc27caee1cec.md +++ b/curriculum/challenges/espanol/14-responsive-web-design-22/learn-css-transforms-by-building-a-penguin/619d2f0e9440bc27caee1cec.md @@ -7,13 +7,13 @@ dashedName: step-93 # --description-- -Fun fact: Most, if not all, flippers are not naturally rectangles. +Dato curioso: la mayoría de las aletas, si no todas, no son naturalmente rectangulares. -Give the `.arm` elements top -left, -right, and bottom-right corners a radius of `30%`, and the bottom-left corner a radius of `120%`. +Dale a los elementos `.arm` las esquinas superior izquierda, derecha e inferior derecha un radio de `30%`, y la esquina inferior izquierda un radio de `120%`. # --hints-- -You should give `.arm` a `border-radius` of `30% 30% 30% 120%`. +Debes darle a `.arm` un `border-radius` de `30% 30% 30% 120%`. ```js assert.equal(new __helpers.CSSHelp(document).getStyle('.arm')?.borderTopLeftRadius, '30%'); diff --git a/curriculum/challenges/espanol/14-responsive-web-design-22/learn-css-transforms-by-building-a-penguin/619d2fd3ff4f772882e3d998.md b/curriculum/challenges/espanol/14-responsive-web-design-22/learn-css-transforms-by-building-a-penguin/619d2fd3ff4f772882e3d998.md index 578769f55d4..cf7f3d000cc 100644 --- a/curriculum/challenges/espanol/14-responsive-web-design-22/learn-css-transforms-by-building-a-penguin/619d2fd3ff4f772882e3d998.md +++ b/curriculum/challenges/espanol/14-responsive-web-design-22/learn-css-transforms-by-building-a-penguin/619d2fd3ff4f772882e3d998.md @@ -7,11 +7,11 @@ dashedName: step-94 # --description-- -Change the `.arm` elements' stacking order such that they appear behind the `.penguin-body` element. +Cambia el orden de apilamiento de los elementos `.arm` para que aparezcan detrás del elemento `.penguin-body`. # --hints-- -You should give `.arm` a `z-index` of `--fcc-expected--`, but found `--fcc-actual--`. +Debe dar a `.arm` un `z-index` de `--fcc-expected--`, pero encontró `--fcc-actual--`. ```js assert.equal(new __helpers.CSSHelp(document).getStyle('.arm')?.zIndex, '-1'); diff --git a/curriculum/challenges/espanol/14-responsive-web-design-22/learn-css-transforms-by-building-a-penguin/619d30350883802921bfcccc.md b/curriculum/challenges/espanol/14-responsive-web-design-22/learn-css-transforms-by-building-a-penguin/619d30350883802921bfcccc.md index 848fba6af80..05d1282ce9e 100644 --- a/curriculum/challenges/espanol/14-responsive-web-design-22/learn-css-transforms-by-building-a-penguin/619d30350883802921bfcccc.md +++ b/curriculum/challenges/espanol/14-responsive-web-design-22/learn-css-transforms-by-building-a-penguin/619d30350883802921bfcccc.md @@ -7,19 +7,19 @@ dashedName: step-95 # --description-- -Now, you are going to use CSS animations to make the penguin wave. +Ahora, vas a usar animaciones CSS para hacer que el pingüino se agite. -Define a new `@keyframes` named `wave`. +Defina un nuevo `@keyframes` llamado `wave`. # --hints-- -You should defined a new `@keyframes` rule. +Debe definir una nueva regla `@keyframes`. ```js assert.notEmpty(new __helpers.CSSHelp(document).getCSSRules('keyframes')); ``` -You should give the `@keyframes` rule a name of `--fcc-expected--`, but found `--fcc-actual--`. +Debe dar a la regla `@keyframes` un nombre de `--fcc-expected--`, pero encontró `--fcc-actual--`. ```js assert.equal(new __helpers.CSSHelp(document).getCSSRules('keyframes')?.[0]?.name, 'wave'); diff --git a/curriculum/challenges/espanol/14-responsive-web-design-22/learn-css-transforms-by-building-a-penguin/619d324f5915c929f36ae91d.md b/curriculum/challenges/espanol/14-responsive-web-design-22/learn-css-transforms-by-building-a-penguin/619d324f5915c929f36ae91d.md index 80b8900fed2..c1d3ceec606 100644 --- a/curriculum/challenges/espanol/14-responsive-web-design-22/learn-css-transforms-by-building-a-penguin/619d324f5915c929f36ae91d.md +++ b/curriculum/challenges/espanol/14-responsive-web-design-22/learn-css-transforms-by-building-a-penguin/619d324f5915c929f36ae91d.md @@ -7,29 +7,29 @@ dashedName: step-96 # --description-- -Give `wave` four waypoints starting at `10%`, and incrementing by `10%`. +Asigne a `wave` cuatro puntos de ruta que comiencen en `10%` e incrementen en `10%`. # --hints-- -You should add a `10%` waypoint for `@keyframes wave`. +Debe agregar un `10%`, el punto de referencia para `@keyframes wave`. ```js assert([...[...new __helpers.CSSHelp(document).getCSSRules('keyframes')].find(rule => rule?.name === 'wave')?.cssRules].some(css => css?.keyText === '10%')); ``` -You should add a `20%` waypoint for `@keyframes wave`. +Debe agregar un punto de referencia `20%` para `@keyframes wave`. ```js assert([...[...new __helpers.CSSHelp(document).getCSSRules('keyframes')].find(rule => rule?.name === 'wave')?.cssRules].some(css => css?.keyText === '20%')); ``` -You should add a `30%` waypoint for `@keyframes wave`. +Debe agregar un punto de referencia `30%` para `@keyframes wave`. ```js assert([...[...new __helpers.CSSHelp(document).getCSSRules('keyframes')].find(rule => rule?.name === 'wave')?.cssRules].some(css => css?.keyText === '30%')); ``` -You should add a `40%` waypoint for `@keyframes wave`. +Debe agregar un punto de referencia `40%` para `@keyframes wave`. ```js assert([...[...new __helpers.CSSHelp(document).getCSSRules('keyframes')].find(rule => rule?.name === 'wave')?.cssRules].some(css => css?.keyText === '40%')); diff --git a/curriculum/challenges/espanol/14-responsive-web-design-22/learn-css-transforms-by-building-a-penguin/619d32c7fa21f32aaa91d499.md b/curriculum/challenges/espanol/14-responsive-web-design-22/learn-css-transforms-by-building-a-penguin/619d32c7fa21f32aaa91d499.md index 29b601a177a..eb4cbb8dcd8 100644 --- a/curriculum/challenges/espanol/14-responsive-web-design-22/learn-css-transforms-by-building-a-penguin/619d32c7fa21f32aaa91d499.md +++ b/curriculum/challenges/espanol/14-responsive-web-design-22/learn-css-transforms-by-building-a-penguin/619d32c7fa21f32aaa91d499.md @@ -7,11 +7,11 @@ dashedName: step-97 # --description-- -Within the first waypoint, rotate to `110deg`, and retain the scaling of the left arm. +Dentro del primer punto de referencia, gire a `110deg` y mantenga la escala del brazo izquierdo. # --hints-- -You should give the `10%` waypoint a `transform` of `rotate(110deg) scaleX(-1)`. +Debes darle al waypoint `10%` una `transform` de `rotate(110deg) scaleX(-1)`. ```js assert([...[...new __helpers.CSSHelp(document).getCSSRules('keyframes')].find(rule => rule?.name === 'wave')?.cssRules].find(css => css?.keyText === '10%')?.style?.transform?.replace(/\s+/g, '') === 'rotate(110deg)scaleX(-1)'); diff --git a/curriculum/challenges/espanol/14-responsive-web-design-22/learn-css-transforms-by-building-a-penguin/619d333b738e3c2b5d58b095.md b/curriculum/challenges/espanol/14-responsive-web-design-22/learn-css-transforms-by-building-a-penguin/619d333b738e3c2b5d58b095.md index 8de42d2a93c..3be58d6b25b 100644 --- a/curriculum/challenges/espanol/14-responsive-web-design-22/learn-css-transforms-by-building-a-penguin/619d333b738e3c2b5d58b095.md +++ b/curriculum/challenges/espanol/14-responsive-web-design-22/learn-css-transforms-by-building-a-penguin/619d333b738e3c2b5d58b095.md @@ -7,11 +7,11 @@ dashedName: step-98 # --description-- -Within the second waypoint, rotate to `130deg`, and retain the scaling of the left arm. +Dentro del segundo punto de referencia, gire a `130deg`, y conserve la escala del brazo izquierdo. # --hints-- -You should give the `20%` waypoint a `transform` of `rotate(130deg) scaleX(-1)`. +Debe dar al punto de referencia `20%` un `transform` de `rotate(130deg) scaleX(-1)`. ```js assert([...[...new __helpers.CSSHelp(document).getCSSRules('keyframes')].find(rule => rule?.name === 'wave')?.cssRules].find(css => css?.keyText === '20%')?.style?.transform?.replace(/\s+/g, '') === 'rotate(130deg)scaleX(-1)'); diff --git a/curriculum/challenges/espanol/14-responsive-web-design-22/learn-css-transforms-by-building-a-penguin/619d337765b9f02c10e93722.md b/curriculum/challenges/espanol/14-responsive-web-design-22/learn-css-transforms-by-building-a-penguin/619d337765b9f02c10e93722.md index 58e1d864e27..d52ff1e4020 100644 --- a/curriculum/challenges/espanol/14-responsive-web-design-22/learn-css-transforms-by-building-a-penguin/619d337765b9f02c10e93722.md +++ b/curriculum/challenges/espanol/14-responsive-web-design-22/learn-css-transforms-by-building-a-penguin/619d337765b9f02c10e93722.md @@ -7,17 +7,17 @@ dashedName: step-99 # --description-- -For the third and fourth waypoints, repeat the `transform` pattern once more. +Para el tercer y cuarto waypoints, repita el patrón `transform` una vez más. # --hints-- -You should give the `30%` waypoint a `transform` of `rotate(110deg) scaleX(-1)`. +Debe dar al punto de referencia `30%` un `transform` de `rotate(110deg) scaleX(-1)`. ```js assert([...[...new __helpers.CSSHelp(document).getCSSRules('keyframes')].find(rule => rule?.name === 'wave')?.cssRules].find(css => css?.keyText === '30%')?.style?.transform?.replace(/\s+/g, '') === 'rotate(110deg)scaleX(-1)'); ``` -You should give the `40%` waypoint a `transform` of `rotate(130deg) scaleX(-1)`. +Debe dar al punto de referencia `40%` un `transform` de `rotate(130deg) scaleX(-1)`. ```js assert([...[...new __helpers.CSSHelp(document).getCSSRules('keyframes')].find(rule => rule?.name === 'wave')?.cssRules].find(css => css?.keyText === '40%')?.style?.transform?.replace(/\s+/g, '') === 'rotate(130deg)scaleX(-1)'); diff --git a/curriculum/challenges/espanol/14-responsive-web-design-22/learn-css-transforms-by-building-a-penguin/619d33c51140292cc5a21742.md b/curriculum/challenges/espanol/14-responsive-web-design-22/learn-css-transforms-by-building-a-penguin/619d33c51140292cc5a21742.md index a138ee7ad9c..96548af2543 100644 --- a/curriculum/challenges/espanol/14-responsive-web-design-22/learn-css-transforms-by-building-a-penguin/619d33c51140292cc5a21742.md +++ b/curriculum/challenges/espanol/14-responsive-web-design-22/learn-css-transforms-by-building-a-penguin/619d33c51140292cc5a21742.md @@ -7,29 +7,29 @@ dashedName: step-100 # --description-- -Use the `wave` animation on the left arm. Have the animation last `3s`, infinitely iterate, and have a linear timing function. +Usa la animación `wave` en el brazo izquierdo. Haga que la animación dure `3s`, itere infinitamente y tenga una función de tiempo lineal. # --hints-- -You should give `.arm.left` an `animation-name` of `--fcc-expected--`, but found `--fcc-actual--`. +Debería darle a `.arm.left` un `animation-name` de `--fcc-expected--`, pero encontró `--fcc-actual--`. ```js assert.equal(new __helpers.CSSHelp(document).getStyle('.arm.left')?.animationName, 'wave'); ``` -You should give `.arm.left` an `animation-duration` of `--fcc-expected--`, but found `--fcc-actual--`. +Debería darle a `.arm.left` una `animation-duration` de `--fcc-expected--`, pero encontró `--fcc-actual--`. ```js assert.equal(new __helpers.CSSHelp(document).getStyle('.arm.left')?.animationDuration, '3s'); ``` -You should give `.arm.left` an `animation-iteration-count` of `--fcc-expected--`, but found `--fcc-actual--`. +Debería dar a `.arm.left` un `animation-iteration-count` de `--fcc-expected--`, pero encontró `--fcc-actual--`. ```js assert.equal(new __helpers.CSSHelp(document).getStyle('.arm.left')?.animationIterationCount, 'infinite'); ``` -You should give `.arm.left` an `animation-timing-function` of `--fcc-expected--`, but found `--fcc-actual--`. +Debería dar a `.arm.left` un `animation-timing-function` de `--fcc-expected--`, pero encontró `--fcc-actual--`. ```js assert.equal(new __helpers.CSSHelp(document).getStyle('.arm.left')?.animationTimingFunction, 'linear'); diff --git a/curriculum/challenges/espanol/14-responsive-web-design-22/learn-css-transforms-by-building-a-penguin/619d3482f505452d861d0f62.md b/curriculum/challenges/espanol/14-responsive-web-design-22/learn-css-transforms-by-building-a-penguin/619d3482f505452d861d0f62.md index 941a775e6d6..b6251aab328 100644 --- a/curriculum/challenges/espanol/14-responsive-web-design-22/learn-css-transforms-by-building-a-penguin/619d3482f505452d861d0f62.md +++ b/curriculum/challenges/espanol/14-responsive-web-design-22/learn-css-transforms-by-building-a-penguin/619d3482f505452d861d0f62.md @@ -7,17 +7,17 @@ dashedName: step-101 # --description-- -Target the `.penguin` element when it is active, and increase its size by `50%` in both dimensions. +Apunte al elemento `.penguin` cuando esté activo y aumente su tamaño en `50%` en ambas dimensiones. # --hints-- -You should use the `.penguin:active` selector. +Debe usar el selector `.penguin:active`. ```js assert.match(code, /\.penguin:active\s*\{/); ``` -You should give `.penguin:active` a `transform` of `scale(1.5)`. +Debe dar a `.penguin:active` un `transform` de `scale(1.5)`. ```js assert.equal(new __helpers.CSSHelp(document).getStyle('.penguin:active')?.getPropVal('transform', true), 'scale(1.5)'); diff --git a/curriculum/challenges/espanol/14-responsive-web-design-22/learn-css-transforms-by-building-a-penguin/619d3561a951bf2e41a24f10.md b/curriculum/challenges/espanol/14-responsive-web-design-22/learn-css-transforms-by-building-a-penguin/619d3561a951bf2e41a24f10.md index a4c69cb7e24..4458601708a 100644 --- a/curriculum/challenges/espanol/14-responsive-web-design-22/learn-css-transforms-by-building-a-penguin/619d3561a951bf2e41a24f10.md +++ b/curriculum/challenges/espanol/14-responsive-web-design-22/learn-css-transforms-by-building-a-penguin/619d3561a951bf2e41a24f10.md @@ -7,13 +7,13 @@ dashedName: step-102 # --description-- -When you activate the `.penguin` element, it might look as though you can drag it around. This is not true. +Cuando activa el elemento `.penguin`, puede parecer que puede arrastrarlo. Esto no es cierto. -Indicate this to users, by giving the active element a `cursor` property of `not-allowed`. +Indíquelo a los usuarios, dando al elemento activo una propiedad `cursor` de `not-allowed`. # --hints-- -You should give `.penguin:active` a `cursor` property of `not-allowed`. +Debe dar a `.penguin:active` una propiedad `cursor` de `not-allowed`. ```js assert.equal(new __helpers.CSSHelp(document).getStyle('.penguin:active')?.cursor, 'not-allowed'); diff --git a/curriculum/challenges/espanol/14-responsive-web-design-22/learn-css-transforms-by-building-a-penguin/619d36103839c82efa95dd34.md b/curriculum/challenges/espanol/14-responsive-web-design-22/learn-css-transforms-by-building-a-penguin/619d36103839c82efa95dd34.md index 0d8033443b5..6185dd2f0c9 100644 --- a/curriculum/challenges/espanol/14-responsive-web-design-22/learn-css-transforms-by-building-a-penguin/619d36103839c82efa95dd34.md +++ b/curriculum/challenges/espanol/14-responsive-web-design-22/learn-css-transforms-by-building-a-penguin/619d36103839c82efa95dd34.md @@ -7,23 +7,23 @@ dashedName: step-103 # --description-- -Change the `.penguin` element's `transition` behavior during transformation to have a duration of `1s`, a timing function of `ease-in-out`, and a delay of `0ms`. +Cambie el comportamiento del `transition` del elemento `.penguin` durante la transformación para que tenga una duración de `1s`, una función de temporización de `ease-in-out` y un retraso de `0ms`. # --hints-- -You should give `.penguin` a `transition-duration` of `--fcc-expected--`, but found `--fcc-actual--`. +Debería darle a `.penguin` una `transition-duration` de `--fcc-expected--`, pero encontró `--fcc-actual--`. ```js assert.equal(new __helpers.CSSHelp(document).getStyle('.penguin')?.transitionDuration, '1s'); ``` -You should give `.penguin` a `transition-timing-function` of `--fcc-expected--`, but found `--fcc-actual--`. +Debería darle a `.penguin` una `transition-timing-function` de `--fcc-expected--`, pero encontró `--fcc-actual--`. ```js assert.equal(new __helpers.CSSHelp(document).getStyle('.penguin')?.transitionTimingFunction, 'ease-in-out'); ``` -You should give `.penguin` a `transition-delay` of `--fcc-expected--`, but found `--fcc-actual--`. +Debería darle a `.penguin` un `transition-delay` de `--fcc-expected--`, pero encontró `--fcc-actual--`. ```js assert.equal(new __helpers.CSSHelp(document).getStyle('.penguin')?.transitionDelay, '0ms'); diff --git a/curriculum/challenges/espanol/14-responsive-web-design-22/learn-css-transforms-by-building-a-penguin/619d3711d04d623000013e9e.md b/curriculum/challenges/espanol/14-responsive-web-design-22/learn-css-transforms-by-building-a-penguin/619d3711d04d623000013e9e.md index 34d566c8a3b..01ff119eb02 100644 --- a/curriculum/challenges/espanol/14-responsive-web-design-22/learn-css-transforms-by-building-a-penguin/619d3711d04d623000013e9e.md +++ b/curriculum/challenges/espanol/14-responsive-web-design-22/learn-css-transforms-by-building-a-penguin/619d3711d04d623000013e9e.md @@ -7,13 +7,13 @@ dashedName: step-104 # --description-- -Finally, calculate the `height` of the `.ground` element to be the height of the viewport minus the height of the `.penguin` element. +Finalmente, calcule que el `height` del elemento `.ground` sea el alto de la ventana gráfica menos el alto del elemento `.penguin`. -Congratulations! You have completed the Responsive Web Design certification. +¡Felicidades! Has completado la certificación de Diseño Web Responsivo. # --hints-- -You should give `.ground` a `height` of `calc(100vh - 300px)`. +Debe dar a `.ground` un `height` de `calc(100vh - 300px)`. ```js assert.include(['calc(100vh-300px)', 'calc(-300px+100vh)'], new __helpers.CSSHelp(document).getStyle('.ground')?.getPropVal('height', true)); diff --git a/curriculum/challenges/espanol/14-responsive-web-design-22/learn-css-transforms-by-building-a-penguin/61a8fe15a6a31306e60d1e89.md b/curriculum/challenges/espanol/14-responsive-web-design-22/learn-css-transforms-by-building-a-penguin/61a8fe15a6a31306e60d1e89.md index 8c56940cf57..72557915f74 100644 --- a/curriculum/challenges/espanol/14-responsive-web-design-22/learn-css-transforms-by-building-a-penguin/61a8fe15a6a31306e60d1e89.md +++ b/curriculum/challenges/espanol/14-responsive-web-design-22/learn-css-transforms-by-building-a-penguin/61a8fe15a6a31306e60d1e89.md @@ -7,17 +7,17 @@ dashedName: step-4 # --description-- -Normalise your page, by setting the `width` to `100%`, and `height` to `100vh`. +Normalice su página, estableciendo el `width` en `100%` y `height` en `100vh`. # --hints-- -You should give `body` a `width` of `--fcc-expected--`, but found `--fcc-actual--`. +Debe dar a `body` un `width` de `--fcc-expected--`, pero encontrado `--fcc-actual--`. ```js assert.equal(new __helpers.CSSHelp(document).getStyle('body')?.width, '100%'); ``` -You should give `body` a `height` of `--fcc-expected--`, but found `--fcc-actual--`. +Debe dar a `body` un `height` de `--fcc-expected--`, pero encontrado `--fcc-actual--`. ```js assert.equal(new __helpers.CSSHelp(document).getStyle('body')?.height, '100vh'); diff --git a/curriculum/challenges/espanol/14-responsive-web-design-22/learn-css-variables-by-building-a-city-skyline/5d822fd413a79914d39e98cd.md b/curriculum/challenges/espanol/14-responsive-web-design-22/learn-css-variables-by-building-a-city-skyline/5d822fd413a79914d39e98cd.md index 4e491b32435..8a31ae0abac 100644 --- a/curriculum/challenges/espanol/14-responsive-web-design-22/learn-css-variables-by-building-a-city-skyline/5d822fd413a79914d39e98cd.md +++ b/curriculum/challenges/espanol/14-responsive-web-design-22/learn-css-variables-by-building-a-city-skyline/5d822fd413a79914d39e98cd.md @@ -7,23 +7,23 @@ dashedName: step-5 # --description-- -In CSS, you can target everything with an asterisk. Add a border to everything by using the `*` selector, and giving it a `border` of `1px solid black`. This is a trick that helps visualize where elements are and their size. You will remove this later. +En CSS, puedes orientar todo con un asterisco. Agregue un borde a todo usando el selector `*` y dándole un `border` de `1px solid black`. Este es un truco que ayuda a visualizar dónde están los elementos y su tamaño. Eliminará esto más tarde. # --hints-- -You should use the `*` selector. +Debe utilizar el selector `*`. ```js assert.exists(new __helpers.CSSHelp(document).getStyle('*')); ``` -You should use the `border` property to style all the elements. +Debe usar la propiedad `border` para aplicar estilo a todos los elementos. ```js assert(new __helpers.CSSHelp(document).isPropertyUsed('border')); ``` -All elements should have a `1px solid black` border. +Todos los elementos deben tener un borde `1px solid black`. ```js const astStyles = new __helpers.CSSHelp(document).getStyle('*'); diff --git a/curriculum/challenges/espanol/14-responsive-web-design-22/learn-css-variables-by-building-a-city-skyline/5d822fd413a79914d39e98ce.md b/curriculum/challenges/espanol/14-responsive-web-design-22/learn-css-variables-by-building-a-city-skyline/5d822fd413a79914d39e98ce.md index f87b0df9e26..5c0c264ccf9 100644 --- a/curriculum/challenges/espanol/14-responsive-web-design-22/learn-css-variables-by-building-a-city-skyline/5d822fd413a79914d39e98ce.md +++ b/curriculum/challenges/espanol/14-responsive-web-design-22/learn-css-variables-by-building-a-city-skyline/5d822fd413a79914d39e98ce.md @@ -7,24 +7,24 @@ dashedName: step-6 # --description-- -Also add a `box-sizing` of `border-box` to everything. This will make it so the border you added doesn't add any size to your elements. +También agregue un `box-sizing` de `border-box` a todo. Esto hará que el borde que agregó no agregue ningún tamaño a sus elementos. # --hints-- -You should use the `box-sizing` property. +Debe usar la propiedad `box-sizing`. ```js assert(new __helpers.CSSHelp(document).isPropertyUsed('box-sizing')); ``` -You should make use of the existing `*` selector. +Debe utilizar el selector `*` existente. ```js // Two selectors create two CSSStyleRule objects assert.equal(new __helpers.CSSHelp(document).getStyleDeclarations('*').length, 1); ``` -All elements should have a `box-sizing` of `border-box`. +Todos los elementos deben tener un `box-sizing` de `border-box`. ```js const astStyles = new __helpers.CSSHelp(document).getStyle('*'); diff --git a/curriculum/challenges/espanol/14-responsive-web-design-22/learn-css-variables-by-building-a-city-skyline/5d822fd413a79914d39e98cf.md b/curriculum/challenges/espanol/14-responsive-web-design-22/learn-css-variables-by-building-a-city-skyline/5d822fd413a79914d39e98cf.md index 7be8156ef7c..9ef2568f421 100644 --- a/curriculum/challenges/espanol/14-responsive-web-design-22/learn-css-variables-by-building-a-city-skyline/5d822fd413a79914d39e98cf.md +++ b/curriculum/challenges/espanol/14-responsive-web-design-22/learn-css-variables-by-building-a-city-skyline/5d822fd413a79914d39e98cf.md @@ -7,30 +7,30 @@ dashedName: step-7 # --description-- -You can see the `body` (it's the inner-most box on your page); the box around it is the `html` element. Make your `body` fill the whole viewport by giving it a `height` of `100vh`. Remove the default `margin` from the `body` by setting the `margin` to `0`. Finally, set the `overflow` property to `hidden` to hide any scroll bars that appear when something extends past the viewport. +Puedes ver el `body` (es el cuadro más interno de tu página); el cuadro que lo rodea es el elemento `html`. Haz que tu `body` llene toda la ventana gráfica dándole una `height` de `100vh`. Elimine el `margin` predeterminado del `body` estableciendo el `margin` en `0`. Finalmente, establezca la propiedad `overflow` en `hidden` para ocultar las barras de desplazamiento que aparecen cuando algo se extiende más allá de la ventana gráfica. # --hints-- -You should use the `body` selector. +Debe utilizar el selector `body`. ```js assert.exists(new __helpers.CSSHelp(document).getStyle('body')); ``` -Your `body` should have a `height` of `100vh`. +Tu `body` debe tener una `height` de `100vh`. ```js const bodyStyles = new __helpers.CSSHelp(document).getStyle('body'); assert.equal(bodyStyles?.height, '100vh'); ``` -Your `body` should have a `margin` of `0`. +Su `body` debe tener un `margin` de `0`. ```js assert.equal(new __helpers.CSSHelp(document).getStyle('body')?.margin, '0px'); ``` -Your `body` should have the `overflow` property set to `hidden`. +Su `body` debe tener la propiedad `overflow` configurada en `hidden`. ```js assert.equal(new __helpers.CSSHelp(document).getStyle('body')?.overflow, 'hidden'); diff --git a/curriculum/challenges/espanol/14-responsive-web-design-22/learn-css-variables-by-building-a-city-skyline/5d822fd413a79914d39e98d0.md b/curriculum/challenges/espanol/14-responsive-web-design-22/learn-css-variables-by-building-a-city-skyline/5d822fd413a79914d39e98d0.md index 7a6742d172e..2d3a093cdc7 100644 --- a/curriculum/challenges/espanol/14-responsive-web-design-22/learn-css-variables-by-building-a-city-skyline/5d822fd413a79914d39e98d0.md +++ b/curriculum/challenges/espanol/14-responsive-web-design-22/learn-css-variables-by-building-a-city-skyline/5d822fd413a79914d39e98d0.md @@ -7,23 +7,23 @@ dashedName: step-8 # --description-- -Create a `div` element in the `body` with a class of `background-buildings`. This will be a container for a group of buildings. +Crea un elemento `div` en el `body` con una clase de `background-buildings`. Este será un contenedor para un grupo de edificios. # --hints-- -You should create a `div` element. +Debe crear un elemento `div`. ```js assert.exists(document.querySelector('div')); ``` -Your `div` element should be within the `body`. +El elemento `div` debe estar dentro del elemento `body`. ```js assert(document.querySelector('div')?.parentElement?.localName === 'body'); ``` -Your `div` element should have a class of `background-buildings` +El elemento `div` debe tener una clase de `background-buildings` ```js assert([...document.querySelector('div')?.classList]?.includes('background-buildings')); diff --git a/curriculum/challenges/espanol/14-responsive-web-design-22/learn-css-variables-by-building-a-city-skyline/5d822fd413a79914d39e98d1.md b/curriculum/challenges/espanol/14-responsive-web-design-22/learn-css-variables-by-building-a-city-skyline/5d822fd413a79914d39e98d1.md index 97d07613dbf..54fa343274e 100644 --- a/curriculum/challenges/espanol/14-responsive-web-design-22/learn-css-variables-by-building-a-city-skyline/5d822fd413a79914d39e98d1.md +++ b/curriculum/challenges/espanol/14-responsive-web-design-22/learn-css-variables-by-building-a-city-skyline/5d822fd413a79914d39e98d1.md @@ -7,23 +7,23 @@ dashedName: step-9 # --description-- -Give your `.background-buildings` element a `width` and `height` of `100%` to make it the full width and height of its parent, the `body`. +Asigne a su elemento `.background-buildings` un `width` y `height` de `100%` para convertirlo en el ancho y alto completos de su padre, el `body`. # --hints-- -You should use the `background-buildings` class to select the correct element. +Debe utilizar la clase `background-buildings` para seleccionar el elemento correcto. ```js assert.exists(new __helpers.CSSHelp(document).getStyle('.background-buildings')); ``` -Your `.background-buildings` element should have a `width` of `100%`. +El elemento `.background-buildings` debe tener un `width` de `100%`. ```js assert.equal(new __helpers.CSSHelp(document).getStyle('.background-buildings')?.width, '100%'); ``` -Your `.background-buildings` element should have a `height` of `100%`. +El elemento `.background-buildings` debe tener un `height` de `100%`. ```js assert.equal(new __helpers.CSSHelp(document).getStyle('.background-buildings')?.height, '100%'); diff --git a/curriculum/challenges/espanol/14-responsive-web-design-22/learn-css-variables-by-building-a-city-skyline/5d822fd413a79914d39e98d2.md b/curriculum/challenges/espanol/14-responsive-web-design-22/learn-css-variables-by-building-a-city-skyline/5d822fd413a79914d39e98d2.md index cdabeac1f27..91853cb7288 100644 --- a/curriculum/challenges/espanol/14-responsive-web-design-22/learn-css-variables-by-building-a-city-skyline/5d822fd413a79914d39e98d2.md +++ b/curriculum/challenges/espanol/14-responsive-web-design-22/learn-css-variables-by-building-a-city-skyline/5d822fd413a79914d39e98d2.md @@ -7,35 +7,35 @@ dashedName: step-10 # --description-- -Nest a `div` with a class of `bb1` in the background buildings container. Open your `styles.css` file, and give `.bb1` a `width` of `10%` and `height` of `70%`. "bb" stands for "background building", this will be your first building. +Anida un `div` con una clase de `bb1` en el contenedor de edificios en segundo plano. Abra su archivo `styles.css` y asigne a `.bb1` un `width` de `10%` y `height` de `70%`. "bb" significa "edificio de fondo", este será su primer edificio. # --hints-- -You should create a new `div` element. +Debe crear un nuevo elemento `div`. ```js assert.equal(document.querySelectorAll('div').length, 2); ``` -You should give the new `div` a class of `bb1`. +Debe asignar al nuevo `div` una clase de `bb1`. ```js assert.exists(document.querySelector('div.bb1')); ``` -You should use a `.bb1` class selector to style the element. +Debe utilizar un selector de clase `.bb1` para aplicar estilo al elemento. ```js assert.exists(new __helpers.CSSHelp(document).getStyle('.bb1')); ``` -You should give the `.bb1` element a `width` of `10%`. +Debe asignar al elemento `.bb1` un `width` de `10%`. ```js assert.equal(new __helpers.CSSHelp(document).getStyle('.bb1')?.width, '10%'); ``` -You should give the `.bb1` element a `height` of `70%`. +Debe asignar al elemento `.bb1` un `height` de `70%`. ```js assert.equal(new __helpers.CSSHelp(document).getStyle('.bb1')?.height, '70%'); diff --git a/curriculum/challenges/espanol/14-responsive-web-design-22/learn-css-variables-by-building-a-city-skyline/5d822fd413a79914d39e98d3.md b/curriculum/challenges/espanol/14-responsive-web-design-22/learn-css-variables-by-building-a-city-skyline/5d822fd413a79914d39e98d3.md index e5059c1b24f..6f1de2920f0 100644 --- a/curriculum/challenges/espanol/14-responsive-web-design-22/learn-css-variables-by-building-a-city-skyline/5d822fd413a79914d39e98d3.md +++ b/curriculum/challenges/espanol/14-responsive-web-design-22/learn-css-variables-by-building-a-city-skyline/5d822fd413a79914d39e98d3.md @@ -7,41 +7,41 @@ dashedName: step-11 # --description-- -Nest four `div` elements in the `.bb1` container. Give them the classes `bb1a`, `bb1b`, `bb1c`, and `bb1d` in that order. This building will have four sections. +Anida cuatro elementos `div` en el contenedor `.bb1`. Dales las clases `bb1a`, `bb1b`, `bb1c` y `bb1d` en ese orden. Este edificio tendrá cuatro secciones. # --hints-- -You should create four new `div` elements. +Debe crear cuatro nuevos elementos `div`. ```js assert.equal(document.querySelectorAll('div')?.length, 6); ``` -You should give one of the new `div` elements a class of `bb1a`. +Debe asignar a uno de los nuevos elementos `div` una clase de `bb1a`. ```js assert.exists(document.querySelector('div.bb1a')); ``` -You should give one of the new `div` elements a class of `bb1b`. +Debe asignar a uno de los nuevos elementos `div` una clase de `bb1b`. ```js assert.exists(document.querySelector('div.bb1b')); ``` -You should give one of the new `div` elements a class of `bb1c`. +Debe asignar a uno de los nuevos elementos `div` una clase de `bb1c`. ```js assert.exists(document.querySelector('div.bb1c')); ``` -You should give one of the new `div` elements a class of `bb1d`. +Debe asignar a uno de los nuevos elementos `div` una clase de `bb1d`. ```js assert.exists(document.querySelector('div.bb1d')); ``` -You should place the new `div` elements in the correct order. +Debe colocar los nuevos elementos `div` en el orden correcto. ```js function __t(a, b) { @@ -50,7 +50,7 @@ function __t(a, b) { assert(__t('div.bb1a','bb1b') && __t('div.bb1b','bb1c') && __t('div.bb1c','bb1d')); ``` -You should place the new `div` elements within the `.bb1` element. +Debe colocar los nuevos elementos `div` dentro del elemento `.bb1`. ```js assert.equal(document.querySelectorAll('div.bb1 > div')?.length, 4); diff --git a/curriculum/challenges/espanol/14-responsive-web-design-22/learn-css-variables-by-building-a-city-skyline/5d822fd413a79914d39e98d4.md b/curriculum/challenges/espanol/14-responsive-web-design-22/learn-css-variables-by-building-a-city-skyline/5d822fd413a79914d39e98d4.md index 767d0b82819..5568b7e576e 100644 --- a/curriculum/challenges/espanol/14-responsive-web-design-22/learn-css-variables-by-building-a-city-skyline/5d822fd413a79914d39e98d4.md +++ b/curriculum/challenges/espanol/14-responsive-web-design-22/learn-css-variables-by-building-a-city-skyline/5d822fd413a79914d39e98d4.md @@ -7,77 +7,77 @@ dashedName: step-12 # --description-- -Give the parts of your building `width` and `height` properties with these values: `70%` and `10%` to `.bb1a`, `80%` and `10%` to `.bb1b`, `90%` and `10%` to `.bb1c`, and `100%` and `70%` to `.bb1d`. Remember that these percentages are relative to the parent and note that the heights will add up to 100% - vertically filling the container. +Proporcione las partes de las propiedades de su edificio `width` y `height` con estos valores: `70%` y `10%` a `.bb1a`, `80%` y `10%` a `.bb1b`, `90%` y `10%` a `.bb1c` y `100%` y `70%` a `.bb1d`. Recuerde que estos porcentajes son relativos al padre y tenga en cuenta que las alturas sumarán hasta el 100%, llenando verticalmente el contenedor. # --hints-- -You should use a class selector to style `.bb1a`. +Debe utilizar un selector de clases para aplicar estilo a `.bb1a`. ```js assert.exists(new __helpers.CSSHelp(document).getStyle('.bb1a')); ``` -You should give `.bb1a` a `width` of `70%`. +Debe dar a `.bb1a` un `width` de `70%`. ```js assert.equal(new __helpers.CSSHelp(document).getStyle('.bb1a')?.width, '70%'); ``` -You should give `.bb1a` a `height` of `10%`. +Debe dar a `.bb1a` un `height` de `10%`. ```js assert.equal(new __helpers.CSSHelp(document).getStyle('.bb1a')?.height, '10%'); ``` -You should use a class selector to style `.bb1b`. +Debe usar un selector de clase para aplicar estilo a `.bb1b`. ```js assert.exists(new __helpers.CSSHelp(document).getStyle('.bb1b')); ``` -You should give `.bb1b` a `width` of `80%`. +Debe dar a `.bb1b` un `width` de `80%`. ```js assert.equal(new __helpers.CSSHelp(document).getStyle('.bb1b')?.width, '80%'); ``` -You should give `.bb1b` a `height` of `10%`. +Debe dar a `.bb1b` un `height` de `10%`. ```js assert.equal(new __helpers.CSSHelp(document).getStyle('.bb1b')?.height, '10%'); ``` -You should use a class selector to style `.bb1c`. +Debe utilizar un selector de clases para aplicar estilo a `.bb1c`. ```js assert.exists(new __helpers.CSSHelp(document).getStyle('.bb1c')); ``` -You should give `.bb1c` a `width` of `90%`. +Debe dar a `.bb1c` un `width` de `90%`. ```js assert.equal(new __helpers.CSSHelp(document).getStyle('.bb1c')?.width, '90%'); ``` -You should give `.bb1c` a `height` of `10%`. +Debe dar a `.bb1c` un `height` de `10%`. ```js assert.equal(new __helpers.CSSHelp(document).getStyle('.bb1c')?.height, '10%'); ``` -You should use a class selector to style `.bb1d`. +Debe usar un selector de clases para aplicar estilo `.bb1d`. ```js assert.exists(new __helpers.CSSHelp(document).getStyle('.bb1d')); ``` -You should give `.bb1d` a `width` of `100%`. +Debe dar a `.bb1d` un `width` de `100%`. ```js assert.equal(new __helpers.CSSHelp(document).getStyle('.bb1d')?.width, '100%'); ``` -You should give `.bb1d` a `height` of `70%`. +Debe dar a `.bb1d` un `height` de `70%`. ```js assert.equal(new __helpers.CSSHelp(document).getStyle('.bb1d')?.height, '70%'); diff --git a/curriculum/challenges/espanol/14-responsive-web-design-22/learn-css-variables-by-building-a-city-skyline/5d822fd413a79914d39e98d5.md b/curriculum/challenges/espanol/14-responsive-web-design-22/learn-css-variables-by-building-a-city-skyline/5d822fd413a79914d39e98d5.md index 417e7ce4d42..530e7e14070 100644 --- a/curriculum/challenges/espanol/14-responsive-web-design-22/learn-css-variables-by-building-a-city-skyline/5d822fd413a79914d39e98d5.md +++ b/curriculum/challenges/espanol/14-responsive-web-design-22/learn-css-variables-by-building-a-city-skyline/5d822fd413a79914d39e98d5.md @@ -7,11 +7,11 @@ dashedName: step-13 # --description-- -Center the parts of your building by turning the `.bb1` element into a flexbox parent. Use the `flex-direction` and `align-items` properties to center the children. +Centra las partes del edificio convirtiendo el elemento `.bb1` en un elemento primario flexbox. Utilice las propiedades `flex-direction` y `align-items` para centrar los elementos secundarios. # --hints-- -You should not change the `.bb1` `width` or `height` properties. +No debe cambiar las propiedades `.bb1` `width` ni `height`. ```js const bb1Style = new __helpers.CSSHelp(document).getStyle('.bb1'); @@ -19,21 +19,21 @@ assert.equal(bb1Style?.width, '10%'); assert.equal(bb1Style?.height, '70%'); ``` -You should give the `.bb1` element a `display` of `flex`. +Debe asignar al elemento `.bb1` un `display` de `flex`. ```js const bb1Style = new __helpers.CSSHelp(document).getStyle('.bb1'); assert.equal(bb1Style?.display, 'flex'); ``` -You should give the `.bb1` element a `flex-direction` of `column`. +Debe asignar al elemento `.bb1` un `flex-direction` de `column`. ```js const bb1Style = new __helpers.CSSHelp(document).getStyle('.bb1'); assert.equal(bb1Style?.flexDirection, 'column'); ``` -You should give the `.bb1` element a `align-items` of `center`. +Debe asignar al elemento `.bb1` un `align-items` de `center`. ```js const bb1Style = new __helpers.CSSHelp(document).getStyle('.bb1'); diff --git a/curriculum/challenges/espanol/14-responsive-web-design-22/learn-css-variables-by-building-a-city-skyline/5d822fd413a79914d39e98d6.md b/curriculum/challenges/espanol/14-responsive-web-design-22/learn-css-variables-by-building-a-city-skyline/5d822fd413a79914d39e98d6.md index a4bdde5e327..12b85494059 100644 --- a/curriculum/challenges/espanol/14-responsive-web-design-22/learn-css-variables-by-building-a-city-skyline/5d822fd413a79914d39e98d6.md +++ b/curriculum/challenges/espanol/14-responsive-web-design-22/learn-css-variables-by-building-a-city-skyline/5d822fd413a79914d39e98d6.md @@ -7,23 +7,23 @@ dashedName: step-14 # --description-- -Now you have something that is resembling a building. You are ready to create your first variable. Variable declarations begin with two dashes (`-`) and are given a name and a value like this: `--variable-name: value;`. In the rule for the `bb1` class, create a variable named `--building-color1` and give it a value of `#999`. +Ahora tienes algo que se parece a un edificio. Estás listo para crear tu primera variable. Las declaraciones de variables comienzan con dos guiones (`-`) y se les asigna un nombre y un valor como este: `--variable-name: value;`. En la regla de la clase `bb1`, cree una variable denominada `--building-color1` y asígnele un valor de `#999`. # --hints-- -You should create a new variable named `--building-color1`. +Debe crear una nueva variable denominada `--building-color1`. ```js assert(new __helpers.CSSHelp(document).isPropertyUsed('--building-color1')); ``` -You should define the `--building-color1` variable within `.bb1`. +Debe definir la variable `--building-color1` dentro de `.bb1`. ```js assert.exists(new __helpers.CSSHelp(document).getStyle('.bb1')?.getPropertyValue('--building-color1')); ``` -You should give `--building-color1` a value of `#999`. +Debe dar a `--building-color1` un valor de `#999`. ```js assert.equal(new __helpers.CSSHelp(document).getStyle('.bb1')?.getPropertyValue('--building-color1').trim(),'#999'); diff --git a/curriculum/challenges/espanol/14-responsive-web-design-22/learn-css-variables-by-building-a-city-skyline/5d822fd413a79914d39e98d7.md b/curriculum/challenges/espanol/14-responsive-web-design-22/learn-css-variables-by-building-a-city-skyline/5d822fd413a79914d39e98d7.md index d3257185fb0..af08d958b7a 100644 --- a/curriculum/challenges/espanol/14-responsive-web-design-22/learn-css-variables-by-building-a-city-skyline/5d822fd413a79914d39e98d7.md +++ b/curriculum/challenges/espanol/14-responsive-web-design-22/learn-css-variables-by-building-a-city-skyline/5d822fd413a79914d39e98d7.md @@ -7,19 +7,19 @@ dashedName: step-15 # --description-- -To use a variable, put the variable name in parentheses with `var` in front of them like this: `var(--variable-name)`. Whatever value you gave the variable will be applied to whatever property you use it on. +Para usar una variable, ponga el nombre de la variable entre paréntesis con `var` delante de ellos de esta manera: `var(--variable-name)`. Cualquier valor que haya asignado a la variable se aplicará a cualquier propiedad en la que la use. -Add the variable `--building-color1` you created in the previous step as the value of the `background-color` property of the `.bb1a` class. +Agregue la variable `--building-color1` que creó en el paso anterior como el valor de la propiedad `background-color` de la clase `.bb1a`. # --hints-- -The `background-color` of the `.bb1a` element should be set. +Se debe establecer el `background-color` del elemento `.bb1a`. ```js assert.exists(new __helpers.CSSHelp(document).getStyle('.bb1a')?.backgroundColor) ``` -You should use `var(--building-color1)` to set the `background-color` of the `.bb1a` element. +Debe usar `var(--building-color1)` para establecer el `background-color` del elemento `.bb1a`. ```js assert.equal(new __helpers.CSSHelp(document).getStyle('.bb1a')?.getPropVal('background-color', true), 'var(--building-color1)'); diff --git a/curriculum/challenges/espanol/14-responsive-web-design-22/learn-css-variables-by-building-a-city-skyline/5d822fd413a79914d39e98d8.md b/curriculum/challenges/espanol/14-responsive-web-design-22/learn-css-variables-by-building-a-city-skyline/5d822fd413a79914d39e98d8.md index 0f3d1776de1..236ded00222 100644 --- a/curriculum/challenges/espanol/14-responsive-web-design-22/learn-css-variables-by-building-a-city-skyline/5d822fd413a79914d39e98d8.md +++ b/curriculum/challenges/espanol/14-responsive-web-design-22/learn-css-variables-by-building-a-city-skyline/5d822fd413a79914d39e98d8.md @@ -7,41 +7,41 @@ dashedName: step-16 # --description-- -Use the same variable as the `background-color` of the `.bb1b`, `.bb1c`, and `.bb1d` classes to fill in the rest of the building. +Utilice la misma variable que las clases `background-color` de las clases `.bb1b`, `.bb1c` y `.bb1d` para rellenar el resto del edificio. # --hints-- -The `background-color` of the `.bb1b` element should be set. +Se debe establecer el `background-color` del elemento `.bb1b`. ```js assert.exists(new __helpers.CSSHelp(document).getStyle('.bb1b')?.backgroundColor) ``` -You should use `var(--building-color1)` to set the `background-color` of the `.bb1b` element. +Debe usar `var(--building-color1)` para establecer el `background-color` del elemento `.bb1b`. ```js assert.equal(new __helpers.CSSHelp(document).getStyle('.bb1b')?.getPropVal('background-color', true), 'var(--building-color1)'); ``` -The `background-color` of the `.bb1c` element should be set. +Se debe establecer el `background-color` del elemento `.bb1c`. ```js assert.exists(new __helpers.CSSHelp(document).getStyle('.bb1c')?.backgroundColor) ``` -You should use `var(--building-color1)` to set the `background-color` of the `.bb1c` element. +Debe usar `var(--building-color1)` para establecer el `background-color` del elemento `.bb1c`. ```js assert.equal(new __helpers.CSSHelp(document).getStyle('.bb1c')?.getPropVal('background-color', true), 'var(--building-color1)'); ``` -The `background-color` of the `.bb1d` element should be set. +Se debe establecer el `background-color` del elemento `.bb1d`. ```js assert.exists(new __helpers.CSSHelp(document).getStyle('.bb1d')?.backgroundColor) ``` -You should use `var(--building-color1)` to set the `background-color` of the `.bb1d` element. +Debe usar `var(--building-color1)` para establecer el `background-color` del elemento `.bb1d`. ```js assert.equal(new __helpers.CSSHelp(document).getStyle('.bb1d')?.getPropVal('background-color', true), 'var(--building-color1)'); diff --git a/curriculum/challenges/espanol/14-responsive-web-design-22/learn-css-variables-by-building-a-city-skyline/5d822fd413a79914d39e98d9.md b/curriculum/challenges/espanol/14-responsive-web-design-22/learn-css-variables-by-building-a-city-skyline/5d822fd413a79914d39e98d9.md index 9b8dce4d849..4762c8761c4 100644 --- a/curriculum/challenges/espanol/14-responsive-web-design-22/learn-css-variables-by-building-a-city-skyline/5d822fd413a79914d39e98d9.md +++ b/curriculum/challenges/espanol/14-responsive-web-design-22/learn-css-variables-by-building-a-city-skyline/5d822fd413a79914d39e98d9.md @@ -7,11 +7,11 @@ dashedName: step-17 # --description-- -Change the value of your variable from `#999` to `#aa80ff` and you can see how it gets applied everywhere you used the variable. This is the main advantage of using variables, being able to quickly change many values in your stylesheet by just changing the value of a variable. +Cambie el valor de su variable de `#999` a `#aa80ff` y podrá ver cómo se aplica en todos los lugares donde usó la variable. Esta es la principal ventaja de usar variables, pudiendo cambiar rápidamente muchos valores en su hoja de estilo simplemente cambiando el valor de una variable. # --hints-- -You should change the value of the `--building-color1` property variable from `#999` to `#aa80ff`. +Debe cambiar el valor de la variable de propiedad `--building-color1` de `#999` a `#aa80ff`. ```js assert.equal(new __helpers.CSSHelp(document).getStyle('.bb1')?.getPropertyValue('--building-color1').trim(),'#aa80ff'); diff --git a/curriculum/challenges/espanol/14-responsive-web-design-22/learn-css-variables-by-building-a-city-skyline/5d822fd413a79914d39e98da.md b/curriculum/challenges/espanol/14-responsive-web-design-22/learn-css-variables-by-building-a-city-skyline/5d822fd413a79914d39e98da.md index b446efa4bda..9b4f460858f 100644 --- a/curriculum/challenges/espanol/14-responsive-web-design-22/learn-css-variables-by-building-a-city-skyline/5d822fd413a79914d39e98da.md +++ b/curriculum/challenges/espanol/14-responsive-web-design-22/learn-css-variables-by-building-a-city-skyline/5d822fd413a79914d39e98da.md @@ -7,41 +7,41 @@ dashedName: step-18 # --description-- -Your first building looks pretty good now. Nest three new `div` elements in the `.background-buildings` container and give them the classes of `bb2`, `bb3`, and `bb4` in that order. These will be three more buildings for the background. +Tu primer edificio se ve bastante bien ahora. Anida tres nuevos elementos `div` en el contenedor `.background-buildings` y asígneles las clases de `bb2`, `bb3` y `bb4` en ese orden. Estos serán tres edificios más para el fondo. # --hints-- -You should create a `div` with a class of `bb2`. +Debe crear un `div` con una clase de `bb2`. ```js assert.exists(document.querySelector('div.bb2')); ``` -You should create a `div` with a class of `bb3`. +Debe crear un `div` con una clase de `bb3`. ```js assert.exists(document.querySelector('div.bb3')); ``` -You should create a `div` with a class of `bb4`. +Debe crear un `div` con una clase de `bb4`. ```js assert.exists(document.querySelector('div.bb4')); ``` -You should create 3 new `div` elements. +Debe crear 3 nuevos elementos `div`. ```js assert.equal(document.querySelectorAll('div')?.length, 9); ``` -You should place these `div` elements within the `.background-buildings` element. +Debe colocar estos elementos `div` dentro del elemento `.background-buildings`. ```js assert.equal(document.querySelector('div.background-buildings')?.children?.length, 4); ``` -You should place the elements in the correct order. +Debe colocar los elementos en el orden correcto. ```js function __t(a, b) { diff --git a/curriculum/challenges/espanol/14-responsive-web-design-22/learn-css-variables-by-building-a-city-skyline/5d822fd413a79914d39e98db.md b/curriculum/challenges/espanol/14-responsive-web-design-22/learn-css-variables-by-building-a-city-skyline/5d822fd413a79914d39e98db.md index d4c00b5a44f..eca1f0ed7d1 100644 --- a/curriculum/challenges/espanol/14-responsive-web-design-22/learn-css-variables-by-building-a-city-skyline/5d822fd413a79914d39e98db.md +++ b/curriculum/challenges/espanol/14-responsive-web-design-22/learn-css-variables-by-building-a-city-skyline/5d822fd413a79914d39e98db.md @@ -7,41 +7,41 @@ dashedName: step-19 # --description-- -Give the new buildings `width` and `height` properties of: `10%` and `50%` for `.bb2`, `10%` and `55%` for `.bb3`, and `11%` and `58%` for `.bb4`. You will be using almost all percent based units and some flexbox for this project, so everything will be completely responsive. +Indique los nuevos edificios `width` y `height` propiedades de: `10%` y `50%` para `.bb2`, `10%` y `55%` para `.bb3`, y `11%` y `58%` para `.bb4`. Utilizará casi todas las unidades basadas en porcentajes y algunos flexbox para este proyecto, por lo que todo será completamente receptivo. # --hints-- -You should give `.bb2` a `width` of `10%`. +Debe dar a `.bb2` un `width` de `10%`. ```js assert.equal(new __helpers.CSSHelp(document).getStyle('.bb2')?.width, '10%'); ``` -You should give `.bb2` a `height` of `50%`. +Debe dar a `.bb2` un `height` de `50%`. ```js assert.equal(new __helpers.CSSHelp(document).getStyle('.bb2')?.height, '50%'); ``` -You should give `.bb3` a `width` of `10%`. +Debe dar a `.bb3` un `width` de `10%`. ```js assert.equal(new __helpers.CSSHelp(document).getStyle('.bb3')?.width, '10%'); ``` -You should give `.bb3` a `height` of `55%`. +Debe dar a `.bb3` un `height` de `55%`. ```js assert.equal(new __helpers.CSSHelp(document).getStyle('.bb3')?.height, '55%'); ``` -You should give `.bb4` a `width` of `11%`. +Debe dar a `.bb4` un `width` de `11%`. ```js assert.equal(new __helpers.CSSHelp(document).getStyle('.bb4')?.width, '11%'); ``` -You should give `.bb4` a `height` of `58%`. +Debe dar a `.bb4` un `height` de `58%`. ```js assert.equal(new __helpers.CSSHelp(document).getStyle('.bb4')?.height, '58%'); diff --git a/curriculum/challenges/espanol/14-responsive-web-design-22/learn-css-variables-by-building-a-city-skyline/5d822fd413a79914d39e98dc.md b/curriculum/challenges/espanol/14-responsive-web-design-22/learn-css-variables-by-building-a-city-skyline/5d822fd413a79914d39e98dc.md index 8e18d8f024d..90be8e58a36 100644 --- a/curriculum/challenges/espanol/14-responsive-web-design-22/learn-css-variables-by-building-a-city-skyline/5d822fd413a79914d39e98dc.md +++ b/curriculum/challenges/espanol/14-responsive-web-design-22/learn-css-variables-by-building-a-city-skyline/5d822fd413a79914d39e98dc.md @@ -7,23 +7,23 @@ dashedName: step-20 # --description-- -The buildings are currently stacked on top of each other. Align the buildings by turning the `.background-buildings` element into a flexbox parent. Use the `align-items` and `justify-content` properties to evenly space the buildings across the bottom of the element. +Los edificios están actualmente apilados uno encima del otro. Alinee los edificios convirtiendo el elemento `.background-buildings` en un padre flexbox. Utilice las propiedades `align-items` y `justify-content` para espaciar uniformemente los edificios en la parte inferior del elemento. # --hints-- -You should add a `display` of `flex` to the `background-buildings` class. +Debe agregar un `display` de `flex` a la clase `background-buildings`. ```js assert.equal(new __helpers.CSSHelp(document).getStyle('.background-buildings')?.display, 'flex'); ``` -You should add an `align-items` of `flex-end` to the `background-buildings` class. +Debe agregar un `align-items` de `flex-end` a la clase `background-buildings`. ```js assert.equal(new __helpers.CSSHelp(document).getStyle('.background-buildings')?.alignItems, 'flex-end'); ``` -You should add a `justify-content` of `space-evenly` to the `background-buildings` class. +Debe agregar un `justify-content` de `space-evenly` a la clase `background-buildings`. ```js assert.equal(new __helpers.CSSHelp(document).getStyle('.background-buildings')?.justifyContent, 'space-evenly'); diff --git a/curriculum/challenges/espanol/14-responsive-web-design-22/learn-css-variables-by-building-a-city-skyline/5d822fd413a79914d39e98dd.md b/curriculum/challenges/espanol/14-responsive-web-design-22/learn-css-variables-by-building-a-city-skyline/5d822fd413a79914d39e98dd.md index 3cbb65cf4bc..ef910db2f6d 100644 --- a/curriculum/challenges/espanol/14-responsive-web-design-22/learn-css-variables-by-building-a-city-skyline/5d822fd413a79914d39e98dd.md +++ b/curriculum/challenges/espanol/14-responsive-web-design-22/learn-css-variables-by-building-a-city-skyline/5d822fd413a79914d39e98dd.md @@ -7,11 +7,11 @@ dashedName: step-21 # --description-- -The buildings are too spaced out. Squeeze them together by adding two empty `div` elements to the top of the `.background-buildings` element, two more at the bottom of it, and one more in between `.bb3` and `.bb4`. These will be added as evenly-spaced elements across the container, effectively moving the buildings closer to the center. +Los edificios están demasiado espaciados. Comprieta agregando dos elementos vacíos `div` en la parte superior del elemento `.background-buildings`, dos más en la parte inferior y uno más entre `.bb3` y `.bb4`. Estos se agregarán como elementos espaciados uniformemente a través del contenedor, moviendo efectivamente los edificios más cerca del centro. # --hints-- -You should add two new `div` elements before the `.bb1` element. +Debe agregar dos nuevos elementos `div` antes del elemento `.bb1`. ```js const bBuildings = document.querySelector('.background-buildings')?.children; @@ -19,13 +19,13 @@ assert(![...bBuildings?.[0]?.classList]?.includes('bb1')); assert(![...bBuildings?.[1]?.classList]?.includes('bb1')); ``` -You should add one new `div` element between the `.bb3` and `.bb4` element. +Debe agregar un nuevo elemento `div` entre el elemento `.bb3` y `.bb4`. ```js assert(document.querySelector('.bb3')?.nextElementSibling === document.querySelector('.bb4')?.previousElementSibling); ``` -You should add two new `div` elements after the `.bb4` element. +Debe agregar dos nuevos elementos `div` después del elemento `.bb4`. ```js const bb4 = document.querySelector('.bb4'); @@ -33,7 +33,7 @@ assert.exists(bb4?.nextElementSibling); assert.exists(bb4?.nextElementSibling?.nextElementSibling); ``` -You should add 5 new `div` elements. +Debe agregar 5 nuevos elementos `div`. ```js assert.equal(document.querySelectorAll('div')?.length, 14); diff --git a/curriculum/challenges/espanol/14-responsive-web-design-22/learn-css-variables-by-building-a-city-skyline/5d822fd413a79914d39e98de.md b/curriculum/challenges/espanol/14-responsive-web-design-22/learn-css-variables-by-building-a-city-skyline/5d822fd413a79914d39e98de.md index e07f55cfbb7..856675a27dc 100644 --- a/curriculum/challenges/espanol/14-responsive-web-design-22/learn-css-variables-by-building-a-city-skyline/5d822fd413a79914d39e98de.md +++ b/curriculum/challenges/espanol/14-responsive-web-design-22/learn-css-variables-by-building-a-city-skyline/5d822fd413a79914d39e98de.md @@ -7,29 +7,29 @@ dashedName: step-22 # --description-- -Create a new variable below your `--building-color1` variable. Name your new variable `--building-color2` and give it a value of `#66cc99`. Then set it as the `background-color` of `.bb2`. +Cree una nueva variable debajo de su variable `--building-color1`. Asigne un nombre a su nueva variable `--building-color2` y asígnele un valor de `#66cc99`. Luego configúrelo como el `background-color` de `.bb2`. # --hints-- -You should define a new property variable called `--building-color2`. +Debe definir una nueva variable de propiedad denominada `--building-color2`. ```js assert.exists(new __helpers.CSSHelp(document).isPropertyUsed('--building-color2')); ``` -You should give `--building-color2` a value of `#66cc99` within the `.bb1` class. +Debe dar a `--building-color2` un valor de `#66cc99` dentro de la clase `.bb1`. ```js assert.equal(new __helpers.CSSHelp(document).getStyle('.bb1')?.getPropertyValue('--building-color2').trim(), '#66cc99'); ``` -You should set the `background-color` of `.bb2`. +Debe establecer el `background-color` de `.bb2`. ```js assert.exists(new __helpers.CSSHelp(document).getStyle('.bb2')?.backgroundColor); ``` -You should set the `background-color` using the `--building-color2` variable. +Debe establecer la variable `background-color` utilizando la variable `--building-color2`. ```js assert.equal(new __helpers.CSSHelp(document).getStyle('.bb2')?.getPropVal('background-color', true), 'var(--building-color2)'); diff --git a/curriculum/challenges/espanol/14-responsive-web-design-22/learn-css-variables-by-building-a-city-skyline/5d822fd413a79914d39e98df.md b/curriculum/challenges/espanol/14-responsive-web-design-22/learn-css-variables-by-building-a-city-skyline/5d822fd413a79914d39e98df.md index 384eb7845f1..84d5c38734f 100644 --- a/curriculum/challenges/espanol/14-responsive-web-design-22/learn-css-variables-by-building-a-city-skyline/5d822fd413a79914d39e98df.md +++ b/curriculum/challenges/espanol/14-responsive-web-design-22/learn-css-variables-by-building-a-city-skyline/5d822fd413a79914d39e98df.md @@ -7,11 +7,11 @@ dashedName: step-23 # --description-- -That didn't work. You should add a fallback value to a variable by putting it as the second value of where you use the variable like this: `var(--variable-name, fallback-value)`. The property will use the fallback value when there's a problem with the variable. Add a fallback value of `green` to the `background-color` of `.bb2`. +Eso no funcionó. Debe agregar un valor de reserva a una variable poniéndolo como el segundo valor de donde usa la variable de esta manera: `var(--variable-name, fallback-value)`. La propiedad usará el valor de reserva cuando haya un problema con la variable. Agregue un valor de reserva de `green` al `background-color` de `.bb2`. # --hints-- -You should add a fallback value of `green` to the `background-color` property. +Debe agregar un valor de reserva de `green` a la propiedad `background-color`. ```js assert.equal(new __helpers.CSSHelp(document).getStyle('.bb2')?.getPropVal('background-color', true), 'var(--building-color2,green)'); diff --git a/curriculum/challenges/espanol/14-responsive-web-design-22/learn-css-variables-by-building-a-city-skyline/5d822fd413a79914d39e98e0.md b/curriculum/challenges/espanol/14-responsive-web-design-22/learn-css-variables-by-building-a-city-skyline/5d822fd413a79914d39e98e0.md index bbf033b03d3..bda20759f1f 100644 --- a/curriculum/challenges/espanol/14-responsive-web-design-22/learn-css-variables-by-building-a-city-skyline/5d822fd413a79914d39e98e0.md +++ b/curriculum/challenges/espanol/14-responsive-web-design-22/learn-css-variables-by-building-a-city-skyline/5d822fd413a79914d39e98e0.md @@ -7,29 +7,29 @@ dashedName: step-24 # --description-- -Create a new variable below the other ones named `--building-color3` and give it a value of `#cc6699`. Then use it as the `background-color` of the `.bb3` class and give it a fallback value of `pink`. +Cree una nueva variable debajo de las otras llamadas `--building-color3` y asígnele un valor de `#cc6699`. Luego úselo como el `background-color` de la clase `.bb3` y asígnele un valor de reserva de `pink`. # --hints-- -You should define a new property variable called `--building-color3`. +Debe definir una nueva variable de propiedad denominada `--building-color3`. ```js assert.exists(new __helpers.CSSHelp(document).isPropertyUsed('--building-color3')); ``` -You should give `--building-color3` a value of `#cc6699`. +Debe dar a `--building-color3` un valor de `#cc6699`. ```js assert.equal(new __helpers.CSSHelp(document).getStyle('.bb1')?.getPropertyValue('--building-color3')?.trim(), '#cc6699'); ``` -You should set the `background-color` of `.bb3`. +Debe establecer el `background-color` de `.bb3`. ```js assert.exists(new __helpers.CSSHelp(document).getStyle('.bb3')?.backgroundColor); ``` -You should set the `background-color` using the `--building-color3` variable with a fallback of `pink`. +Debe establecer la variable `background-color` utilizando la variable `--building-color3` con una reserva de `pink`. ```js assert.equal(new __helpers.CSSHelp(document).getStyle('.bb3')?.getPropVal('background-color', true), 'var(--building-color3,pink)'); diff --git a/curriculum/challenges/espanol/14-responsive-web-design-22/learn-css-variables-by-building-a-city-skyline/5d822fd413a79914d39e98e1.md b/curriculum/challenges/espanol/14-responsive-web-design-22/learn-css-variables-by-building-a-city-skyline/5d822fd413a79914d39e98e1.md index 164dc0fce26..a9a970135b8 100644 --- a/curriculum/challenges/espanol/14-responsive-web-design-22/learn-css-variables-by-building-a-city-skyline/5d822fd413a79914d39e98e1.md +++ b/curriculum/challenges/espanol/14-responsive-web-design-22/learn-css-variables-by-building-a-city-skyline/5d822fd413a79914d39e98e1.md @@ -7,35 +7,35 @@ dashedName: step-25 # --description-- -That didn't work, because the variables you declared in `.bb1` do not cascade to the `.bb2` and `.bb3` sibling elements. That's just how CSS works. Because of this, variables are often declared in the `:root` selector. This is the highest level selector in CSS; putting your variables there will make them usable everywhere. Add the `:root` selector to the top of your stylesheet, and move all your variable declarations there. +Eso no funcionó, porque las variables que declaró en `.bb1` no caen en cascada a los elementos hermanos `.bb2` y `.bb3`. Así es como funciona CSS. Debido a esto, las variables a menudo se declaran en el selector `:root`. Este es el selector de nivel más alto en CSS; Poner sus variables allí las hará utilizables en todas partes. Agregue el selector `:root` a la parte superior de la hoja de estilos y mueva todas las declaraciones de variables allí. # --hints-- -You should declare a `:root` selector at the top of the stylesheet. +Debe declarar un selector `:root` en la parte superior de la hoja de estilos. ```js assert.exists(new __helpers.CSSHelp(document).getStyle(':root')); ``` -You should define `--building-color1` with a value of `#aa80ff` in the `:root` selector. +Debe definir `--building-color1` con un valor de `#aa80ff` en el selector `:root`. ```js assert.equal(new __helpers.CSSHelp(document).getStyle(':root')?.getPropertyValue('--building-color1')?.trim(), '#aa80ff'); ``` -You should define `--building-color2` with a value of `#66cc99` in the `:root` selector. +Debe definir `--building-color2` con un valor de `#66cc99` en el selector `:root`. ```js assert.equal(new __helpers.CSSHelp(document).getStyle(':root')?.getPropertyValue('--building-color2')?.trim(), '#66cc99'); ``` -You should define `--building-color3` with a value of `#cc6699` in the `:root` selector. +Debe definir `--building-color3` con un valor de `#cc6699` en el selector `:root`. ```js assert.equal(new __helpers.CSSHelp(document).getStyle(':root')?.getPropertyValue('--building-color3')?.trim(), '#cc6699'); ``` -You should remove the custom property variables from `.bb1`. +Debe quitar las variables de propiedad personalizadas de `.bb1`. ```js assert.isEmpty(new __helpers.CSSHelp(document).getStyle('.bb1')?.getPropertyValue('--building-color1')); diff --git a/curriculum/challenges/espanol/14-responsive-web-design-22/learn-css-variables-by-building-a-city-skyline/5d822fd413a79914d39e98e2.md b/curriculum/challenges/espanol/14-responsive-web-design-22/learn-css-variables-by-building-a-city-skyline/5d822fd413a79914d39e98e2.md index 4d505c042ad..e09555da2db 100644 --- a/curriculum/challenges/espanol/14-responsive-web-design-22/learn-css-variables-by-building-a-city-skyline/5d822fd413a79914d39e98e2.md +++ b/curriculum/challenges/espanol/14-responsive-web-design-22/learn-css-variables-by-building-a-city-skyline/5d822fd413a79914d39e98e2.md @@ -7,17 +7,17 @@ dashedName: step-26 # --description-- -Now that you've worked the bugs out and the buildings are the right colors, you can remove the fallback values in the two places they were used. Go ahead and do that now. +Ahora que ha solucionado los errores y los edificios tienen los colores correctos, puede eliminar los valores alternativos en los dos lugares en los que se usaron. Adelante y hazlo ahora. # --hints-- -You should remove the fallback in the `background-color` from `.bb2`. +Debe eliminar el respaldo en el `background-color` de `.bb2`. ```js assert.equal(new __helpers.CSSHelp(document).getStyle('.bb2')?.getPropVal('background-color', true), 'var(--building-color2)'); ``` -You should remove the fallback in the `background-color` from `.bb3`. +Debe eliminar el respaldo en el `background-color` de `.bb3`. ```js assert.equal(new __helpers.CSSHelp(document).getStyle('.bb3')?.getPropVal('background-color', true), 'var(--building-color3)'); diff --git a/curriculum/challenges/espanol/14-responsive-web-design-22/learn-css-variables-by-building-a-city-skyline/5d822fd413a79914d39e98e3.md b/curriculum/challenges/espanol/14-responsive-web-design-22/learn-css-variables-by-building-a-city-skyline/5d822fd413a79914d39e98e3.md index 81a1fd1fc5e..98dd97b9b5f 100644 --- a/curriculum/challenges/espanol/14-responsive-web-design-22/learn-css-variables-by-building-a-city-skyline/5d822fd413a79914d39e98e3.md +++ b/curriculum/challenges/espanol/14-responsive-web-design-22/learn-css-variables-by-building-a-city-skyline/5d822fd413a79914d39e98e3.md @@ -7,23 +7,23 @@ dashedName: step-27 # --description-- -Create another variable named `--building-color4` and give it a value of `#538cc6`. Make sure it's in the `:root` selector this time. Then use it to fill in the last building. +Cree otra variable llamada `--building-color4` y asígnele un valor de `#538cc6`. Asegúrate de que esté en el selector `:root` esta vez. Luego úsalo para rellenar el último edificio. # --hints-- -You should define a new property variable called `--building-color4`. +Debe definir una nueva variable de propiedad llamada `--building-color4`. ```js assert.exists(new __helpers.CSSHelp(document).isPropertyUsed('--building-color4')); ``` -You should give `--building-color4` a value of `#538cc6` in the `:root` selector. +Debe dar a `--building-color4` un valor de `#538cc6` en el selector `:root`. ```js assert.equal(new __helpers.CSSHelp(document).getStyle(':root')?.getPropertyValue('--building-color4').trim(), '#538cc6'); ``` -You should add `background-color: var(--building-color4)` in the `.bb4` selector. +Debe agregar `background-color: var(--building-color4)` en el selector `.bb4`. ```js assert.equal(new __helpers.CSSHelp(document).getStyle('.bb4')?.getPropVal('background-color', true), 'var(--building-color4)') diff --git a/curriculum/challenges/espanol/14-responsive-web-design-22/learn-css-variables-by-building-a-city-skyline/5d822fd413a79914d39e98e4.md b/curriculum/challenges/espanol/14-responsive-web-design-22/learn-css-variables-by-building-a-city-skyline/5d822fd413a79914d39e98e4.md index 00bdb00400a..1bbd345ec1d 100644 --- a/curriculum/challenges/espanol/14-responsive-web-design-22/learn-css-variables-by-building-a-city-skyline/5d822fd413a79914d39e98e4.md +++ b/curriculum/challenges/espanol/14-responsive-web-design-22/learn-css-variables-by-building-a-city-skyline/5d822fd413a79914d39e98e4.md @@ -7,23 +7,23 @@ dashedName: step-28 # --description-- -The background buildings are starting to look pretty good. Create a new `div` below the `.background-buildings` element and give it a class of `foreground-buildings`. This will be another container for more buildings. +Los edificios de fondo están empezando a verse bastante bien. Cree un nuevo `div` debajo del elemento `.background-buildings` y asígnele una clase de `foreground-buildings`. Este será otro contenedor para más edificios. # --hints-- -You should create a new `div` element. +Debe crear un nuevo elemento `div`. ```js assert.equal(document.querySelectorAll('div')?.length, 15); ``` -The new `div` should come after the `div.background-buildings` element. +El nuevo `div` debe venir después del elemento `div.background-buildings`. ```js assert.exists(document.querySelector('div.background-buildings + div')); ``` -Your new `div` should have a class of `foreground-buildings`. +Su nuevo `div` debe tener una clase de `foreground-buildings`. ```js assert.exists(document.querySelector('div.foreground-buildings')); diff --git a/curriculum/challenges/espanol/14-responsive-web-design-22/learn-css-variables-by-building-a-city-skyline/5d822fd413a79914d39e98e5.md b/curriculum/challenges/espanol/14-responsive-web-design-22/learn-css-variables-by-building-a-city-skyline/5d822fd413a79914d39e98e5.md index 29d7a0974c6..d8c3a6e5886 100644 --- a/curriculum/challenges/espanol/14-responsive-web-design-22/learn-css-variables-by-building-a-city-skyline/5d822fd413a79914d39e98e5.md +++ b/curriculum/challenges/espanol/14-responsive-web-design-22/learn-css-variables-by-building-a-city-skyline/5d822fd413a79914d39e98e5.md @@ -7,35 +7,35 @@ dashedName: step-29 # --description-- -You want the `.foreground-buildings` container to sit directly on top of the `.background-buildings` element. Give it a `width` and `height` of `100%`, set the `position` to `absolute`, and the `top` to `0`. This will make it the same size as the body and move the start of it to the top left corner. +Desea que el contenedor `.foreground-buildings` se coloque directamente encima del elemento `.background-buildings`. Dale un `width` y `height` de `100%`, establece el `position` en `absolute`, y el `top` a `0`. Esto lo hará del mismo tamaño que el cuerpo y moverá el inicio del mismo a la esquina superior izquierda. # --hints-- -You should use a `.foreground-buildings` selector. +Debe utilizar un selector `.foreground-buildings`. ```js assert.exists(new __helpers.CSSHelp(document).getStyle('.foreground-buildings')); ``` -You should give the `.foreground-buildings` element a `width` of `100%`. +Debe asignar al elemento `.foreground-buildings` un `width` de `100%`. ```js assert.equal(new __helpers.CSSHelp(document).getStyle('.foreground-buildings')?.width, '100%'); ``` -You should give the `.foreground-buildings` element a `height` of `100%`. +Debes darle al elemento `.foreground-buildings` una `height` de `100%`. ```js assert.equal(new __helpers.CSSHelp(document).getStyle('.foreground-buildings')?.height, '100%'); ``` -You should give the `.foreground-buildings` element a `position` of `absolute`. +Debe asignar al elemento `.foreground-buildings` un `position` de `absolute`. ```js assert.equal(new __helpers.CSSHelp(document).getStyle('.foreground-buildings')?.position, 'absolute'); ``` -You should give the `.foreground-buildings` element a `top` of `0`. +Debe asignar al elemento `.foreground-buildings` un `top` de `0`. ```js assert.equal(new __helpers.CSSHelp(document).getStyle('.foreground-buildings')?.top, '0px'); diff --git a/curriculum/challenges/espanol/14-responsive-web-design-22/learn-css-variables-by-building-a-city-skyline/5d822fd413a79914d39e98e6.md b/curriculum/challenges/espanol/14-responsive-web-design-22/learn-css-variables-by-building-a-city-skyline/5d822fd413a79914d39e98e6.md index d155315d3bc..c721e3c37cc 100644 --- a/curriculum/challenges/espanol/14-responsive-web-design-22/learn-css-variables-by-building-a-city-skyline/5d822fd413a79914d39e98e6.md +++ b/curriculum/challenges/espanol/14-responsive-web-design-22/learn-css-variables-by-building-a-city-skyline/5d822fd413a79914d39e98e6.md @@ -7,47 +7,47 @@ dashedName: step-30 # --description-- -Nest six `div` elements within `.foreground-buildings` and give them the classes of `fb1` through `fb6` in that order. "fb" stands for "foreground building". These will be six more buildings for the foreground. +Anida seis elementos `div` dentro de `.foreground-buildings` y asígnales las clases de `fb1` a través de `fb6` en ese orden. "fb" significa "edificio en primer plano". Estos serán seis edificios más para el primer plano. # --hints-- -You should create a new `div` with a class of `fb1`. +Debe crear un nuevo `div` con una clase de `fb1`. ```js assert.exists(document.querySelector('div.fb1')); ``` -You should create a new `div` with a class of `fb2`. +Debe crear un nuevo `div` con una clase de `fb2`. ```js assert.exists(document.querySelector('div.fb2')); ``` -You should create a new `div` with a class of `fb3`. +Debe crear un nuevo `div` con una clase de `fb3`. ```js assert.exists(document.querySelector('div.fb3')); ``` -You should create a new `div` with a class of `fb4`. +Debe crear un nuevo `div` con una clase de `fb4`. ```js assert.exists(document.querySelector('div.fb4')); ``` -You should create a new `div` with a class of `fb5`. +Debe crear un nuevo `div` con una clase de `fb5`. ```js assert.exists(document.querySelector('div.fb5')); ``` -You should create a new `div` with a class of `fb6`. +Debe crear un nuevo `div` con una clase de `fb6`. ```js assert.exists(document.querySelector('div.fb6')); ``` -You should place these new `div` elements within the `.foreground-buildings` element. +Debe colocar estos nuevos elementos `div` dentro del elemento `.foreground-buildings`. ```js assert.exists(document.querySelector('div.foreground-buildings > div.fb1')); @@ -58,7 +58,7 @@ assert.exists(document.querySelector('div.foreground-buildings > div.fb5')); assert.exists(document.querySelector('div.foreground-buildings > div.fb6')); ``` -You should place the new `div` elements in the correct order. +Debe colocar los nuevos elementos `div` en el orden correcto. ```js function __t(a, b) { diff --git a/curriculum/challenges/espanol/14-responsive-web-design-22/learn-css-variables-by-building-a-city-skyline/5d822fd413a79914d39e98e7.md b/curriculum/challenges/espanol/14-responsive-web-design-22/learn-css-variables-by-building-a-city-skyline/5d822fd413a79914d39e98e7.md index 75d052a544a..e4b486fec4b 100644 --- a/curriculum/challenges/espanol/14-responsive-web-design-22/learn-css-variables-by-building-a-city-skyline/5d822fd413a79914d39e98e7.md +++ b/curriculum/challenges/espanol/14-responsive-web-design-22/learn-css-variables-by-building-a-city-skyline/5d822fd413a79914d39e98e7.md @@ -7,113 +7,113 @@ dashedName: step-31 # --description-- -Give the six new elements these `width` and `height` values: `10%` and `60%` to `.fb1`, `10%` and `40%` to `.fb2`, `10%` and `35%` to `.fb3`, `8%` and `45%` to `.fb4`, `10%` and `33%` to `.fb5`, and `9%` and `38%` to `.fb6`. +Dar a los seis nuevos elementos estos valores: `width` y `height` `10%` y `60%` a `.fb1`, `10%` y `40%` a `.fb2`, `10%` y `35%` a `.fb3`, `8%` y `45%` a `.fb4`, `10%` y `33%` a `.fb5`, y `9%` y `38%` a `.fb6`. # --hints-- -You should create a `.fb1` selector. +Debe crear un selector `.fb1`. ```js assert.exists(new __helpers.CSSHelp(document).getStyle('.fb1')); ``` -You should give the `.fb1` selector a `width` of `10%`. +Debe asignar al selector `.fb1` un `width` de `10%`. ```js assert.equal(new __helpers.CSSHelp(document).getStyle('.fb1')?.width, '10%'); ``` -You should give the `.fb1` selector a `height` of `60%`. +Debe asignar al selector `.fb1` un `height` de `60%`. ```js assert.equal(new __helpers.CSSHelp(document).getStyle('.fb1')?.height, '60%'); ``` -You should create a `.fb2` selector. +Debe crear un selector `.fb2`. ```js assert.exists(new __helpers.CSSHelp(document).getStyle('.fb2')); ``` -You should give the `.fb2` selector a `width` of `10%`. +Debes darle al selector `.fb2` un `width` de `10%`. ```js assert.equal(new __helpers.CSSHelp(document).getStyle('.fb2')?.width, '10%'); ``` -You should give the `.fb2` selector a `height` of `40%`. +Debe asignar al selector `.fb2` un `height` de `40%`. ```js assert.equal(new __helpers.CSSHelp(document).getStyle('.fb2')?.height, '40%'); ``` -You should create a `.fb3` selector. +Debe crear un selector `.fb3`. ```js assert.exists(new __helpers.CSSHelp(document).getStyle('.fb3')); ``` -You should give the `.fb3` selector a `width` of `10%`. +Debe asignar al selector `.fb3` un `width` de `10%`. ```js assert.equal(new __helpers.CSSHelp(document).getStyle('.fb3')?.width, '10%'); ``` -You should give the `.fb3` selector a `height` of `35%`. +Debe asignar al selector `.fb3` un `height` de `35%`. ```js assert.equal(new __helpers.CSSHelp(document).getStyle('.fb3')?.height, '35%'); ``` -You should create a `.fb4` selector. +Debe crear un selector `.fb4`. ```js assert.exists(new __helpers.CSSHelp(document).getStyle('.fb4')); ``` -You should give the `.fb4` selector a `width` of `8%`. +Debes darle al selector `.fb4` un `width` de `8%`. ```js assert.equal(new __helpers.CSSHelp(document).getStyle('.fb4')?.width, '8%'); ``` -You should give the `.fb4` selector a `height` of `45%`. +Debes darle al selector `.fb4` una `height` de `45%`. ```js assert.equal(new __helpers.CSSHelp(document).getStyle('.fb4')?.height, '45%'); ``` -You should create a `.fb5` selector. +Debe crear un selector `.fb5`. ```js assert.exists(new __helpers.CSSHelp(document).getStyle('.fb5')); ``` -You should give the `.fb5` selector a `width` of `10%`. +Debes darle al selector `.fb5` un `width` de `10%`. ```js assert.equal(new __helpers.CSSHelp(document).getStyle('.fb5')?.width, '10%'); ``` -You should give the `.fb5` selector a `height` of `33%`. +Debe asignar al selector `.fb5` un `height` de `33%`. ```js assert.equal(new __helpers.CSSHelp(document).getStyle('.fb5')?.height, '33%'); ``` -You should create a `.fb6` selector. +Debe crear un selector `.fb6`. ```js assert.exists(new __helpers.CSSHelp(document).getStyle('.fb6')); ``` -You should give the `.fb6` selector a `width` of `9%`. +Debe asignar al selector `.fb6` un `width` de `9%`. ```js assert.equal(new __helpers.CSSHelp(document).getStyle('.fb6')?.width, '9%'); ``` -You should give the `.fb6` selector a `height` of `38%`. +Debes darle al selector `.fb6` una `height` de `38%`. ```js assert.equal(new __helpers.CSSHelp(document).getStyle('.fb6')?.height, '38%'); diff --git a/curriculum/challenges/espanol/14-responsive-web-design-22/learn-css-variables-by-building-a-city-skyline/5d822fd413a79914d39e98e8.md b/curriculum/challenges/espanol/14-responsive-web-design-22/learn-css-variables-by-building-a-city-skyline/5d822fd413a79914d39e98e8.md index 717094c31a0..2e2a9c7c74a 100644 --- a/curriculum/challenges/espanol/14-responsive-web-design-22/learn-css-variables-by-building-a-city-skyline/5d822fd413a79914d39e98e8.md +++ b/curriculum/challenges/espanol/14-responsive-web-design-22/learn-css-variables-by-building-a-city-skyline/5d822fd413a79914d39e98e8.md @@ -7,23 +7,23 @@ dashedName: step-32 # --description-- -Add the same `display`, `align-items`, and `justify-content` properties and values to `.foreground-buildings` that you used on `.background-buildings`. Again, this will use Flexbox to evenly space the buildings across the bottom of their container. +Agregue las mismas propiedades y valores `display`, `align-items` y `justify-content` a `.foreground-buildings` que usó en `.background-buildings`. Una vez más, esto usará Flexbox para espaciar uniformemente los edificios en la parte inferior de su contenedor. # --hints-- -You should give `.foreground-buildings` a `display` property of `flex`. +Debe asignar `.foreground-buildings` una propiedad `display` de `flex`. ```js assert.equal(new __helpers.CSSHelp(document).getStyle('.foreground-buildings')?.display, 'flex'); ``` -You should give `.foreground-buildings` an `align-items` property of `flex-end`. +Debe asignar `.foreground-buildings` una propiedad `align-items` de `flex-end`. ```js assert.equal(new __helpers.CSSHelp(document).getStyle('.foreground-buildings')?.alignItems, 'flex-end'); ``` -You should give `.foreground-buildings` a `justify-content` property of `space-evenly`. +Debe dar a `.foreground-buildings` una propiedad `justify-content` de `space-evenly`. ```js assert.equal(new __helpers.CSSHelp(document).getStyle('.foreground-buildings')?.justifyContent, 'space-evenly'); diff --git a/curriculum/challenges/espanol/14-responsive-web-design-22/learn-css-variables-by-building-a-city-skyline/5d822fd413a79914d39e98e9.md b/curriculum/challenges/espanol/14-responsive-web-design-22/learn-css-variables-by-building-a-city-skyline/5d822fd413a79914d39e98e9.md index b2d961c67ca..8e3c70e9d8c 100644 --- a/curriculum/challenges/espanol/14-responsive-web-design-22/learn-css-variables-by-building-a-city-skyline/5d822fd413a79914d39e98e9.md +++ b/curriculum/challenges/espanol/14-responsive-web-design-22/learn-css-variables-by-building-a-city-skyline/5d822fd413a79914d39e98e9.md @@ -7,29 +7,29 @@ dashedName: step-33 # --description-- -You should optimize your code. Move the `position` and `top` properties and values from `.foreground-buildings` to `.background-buildings`. Then select both `.background-buildings` and `.foreground-buildings` there, effectively applying those styles to both of the elements. You can use a comma (`,`) to separate selectors like this: `selector1, selector2`. +Debe optimizar su código. Mueva las propiedades y valores `position` y `top` de `.foreground-buildings` a `.background-buildings`. Luego seleccione `.background-buildings` y `.foreground-buildings` allí, aplicando efectivamente esos estilos a ambos elementos. Puede usar una coma (`,`) para separar selectores como este: `selector1, selector2`. # --hints-- -You should not remove the `.foreground-buildings` declaration. +No debe eliminar la declaración `.foreground-buildings`. ```js assert.exists(new __helpers.CSSHelp(document).getStyle('.foreground-buildings')); ``` -You should remove the `position` property from `.foreground-buildings`. +Debe quitar la propiedad `position` de `.foreground-buildings`. ```js assert.isEmpty(new __helpers.CSSHelp(document).getStyle('.foreground-buildings')?.position); ``` -You should remove the `top` property from `.foreground-buildings`. +Debe quitar la propiedad `top` de `.foreground-buildings`. ```js assert.isEmpty(new __helpers.CSSHelp(document).getStyle('.foreground-buildings')?.top); ``` -You should add the `position` property of `absolute` to `.background-buildings, .foreground-buildings`. +Debe agregar la propiedad `position` de `absolute` a `.background-buildings, .foreground-buildings`. ```js function eitherOr() { @@ -39,7 +39,7 @@ function eitherOr() { assert.equal(eitherOr()?.position, 'absolute'); ``` -You should add the `top` property of `0` to `.background-buildings, .foreground-buildings`. +Debe agregar la propiedad `top` de `0` a `.background-buildings, .foreground-buildings`. ```js function eitherOr() { @@ -49,7 +49,7 @@ function eitherOr() { assert.equal(eitherOr()?.top, '0px'); ``` -You should use a comma to use both `.foreground-buildings` and `.background-buildings` selectors in the same style declaration. +Debe usar una coma para usar los selectores `.foreground-buildings` y `.background-buildings` en la misma declaración de estilo. ```js function eitherOr() { diff --git a/curriculum/challenges/espanol/14-responsive-web-design-22/learn-css-variables-by-building-a-city-skyline/5d822fd413a79914d39e98ea.md b/curriculum/challenges/espanol/14-responsive-web-design-22/learn-css-variables-by-building-a-city-skyline/5d822fd413a79914d39e98ea.md index c8cda8eaeeb..83648f2d85c 100644 --- a/curriculum/challenges/espanol/14-responsive-web-design-22/learn-css-variables-by-building-a-city-skyline/5d822fd413a79914d39e98ea.md +++ b/curriculum/challenges/espanol/14-responsive-web-design-22/learn-css-variables-by-building-a-city-skyline/5d822fd413a79914d39e98ea.md @@ -7,11 +7,11 @@ dashedName: step-34 # --description-- -Now that you did that, you can delete the old `.foreground-buildings` declaration and all of its properties since they aren't needed anymore. +Ahora que lo hizo, puede eliminar la antigua declaración `.foreground-buildings` y todas sus propiedades, ya que ya no son necesarias. # --hints-- -You should delete the whole `.foreground-buildings` style declaration. +Debe eliminar toda la declaración de estilo `.foreground-buildings`. ```js assert.notExists(new __helpers.CSSHelp(document).getStyle('.foreground-buildings')); diff --git a/curriculum/challenges/espanol/14-responsive-web-design-22/learn-css-variables-by-building-a-city-skyline/5d822fd413a79914d39e98eb.md b/curriculum/challenges/espanol/14-responsive-web-design-22/learn-css-variables-by-building-a-city-skyline/5d822fd413a79914d39e98eb.md index b275fd78972..42c60b81062 100644 --- a/curriculum/challenges/espanol/14-responsive-web-design-22/learn-css-variables-by-building-a-city-skyline/5d822fd413a79914d39e98eb.md +++ b/curriculum/challenges/espanol/14-responsive-web-design-22/learn-css-variables-by-building-a-city-skyline/5d822fd413a79914d39e98eb.md @@ -7,41 +7,41 @@ dashedName: step-35 # --description-- -The skyline is coming together. Fill in the `background-color` property of the foreground buildings. Use your `--building-color1` variable to fill in `.fb3` and `.fb4`, `--building-color2` for `.fb5`, `--building-color3` for `.fb2` and `.fb6`, and `--building-color4` for `.fb1`. +El horizonte se está juntando. Rellene la propiedad `background-color` de los edificios en primer plano. Use su variable `--building-color1` para completar `.fb3` y `.fb4`, `--building-color2` para `.fb5`, `--building-color3` para `.fb2` y `.fb6`, y `--building-color4` para `.fb1`. # --hints-- -You should give `.fb1` a `background-color` using `--building-color4`. +Debe dar a `.fb1` un `background-color` usando `--building-color4`. ```js assert.equal(new __helpers.CSSHelp(document).getStyle('.fb1')?.getPropVal('background-color', true), 'var(--building-color4)'); ``` -You should give `.fb2` a `background-color` using `--building-color3`. +Debe dar a `.fb2` un `background-color` usando `--building-color3`. ```js assert.equal(new __helpers.CSSHelp(document).getStyle('.fb2')?.getPropVal('background-color', true), 'var(--building-color3)'); ``` -You should give `.fb3` a `background-color` using `--building-color1`. +Debes darle a `.fb3` un `background-color` usando `--building-color1`. ```js assert.equal(new __helpers.CSSHelp(document).getStyle('.fb3')?.getPropVal('background-color', true), 'var(--building-color1)'); ``` -You should give `.fb4` a `background-color` using `--building-color1`. +Debes darle a `.fb4` un `background-color` usando `--building-color1`. ```js assert.equal(new __helpers.CSSHelp(document).getStyle('.fb4')?.getPropVal('background-color', true), 'var(--building-color1)'); ``` -You should give `.fb5` a `background-color` using `--building-color2`. +Debes darle a `.fb5` un `background-color` usando `--building-color2`. ```js assert.equal(new __helpers.CSSHelp(document).getStyle('.fb5')?.getPropVal('background-color', true), 'var(--building-color2)'); ``` -You should give `.fb6` a `background-color` using `--building-color3`. +Debes darle a `.fb6` un `background-color` usando `--building-color3`. ```js assert.equal(new __helpers.CSSHelp(document).getStyle('.fb6')?.getPropVal('background-color', true), 'var(--building-color3)'); diff --git a/curriculum/challenges/espanol/14-responsive-web-design-22/learn-css-variables-by-building-a-city-skyline/5d822fd413a79914d39e98ec.md b/curriculum/challenges/espanol/14-responsive-web-design-22/learn-css-variables-by-building-a-city-skyline/5d822fd413a79914d39e98ec.md index e121b42b390..474ae1406bd 100644 --- a/curriculum/challenges/espanol/14-responsive-web-design-22/learn-css-variables-by-building-a-city-skyline/5d822fd413a79914d39e98ec.md +++ b/curriculum/challenges/espanol/14-responsive-web-design-22/learn-css-variables-by-building-a-city-skyline/5d822fd413a79914d39e98ec.md @@ -7,11 +7,11 @@ dashedName: step-36 # --description-- -Squeeze the buildings together again by adding two empty `div` elements within both the top and bottom of the `.foreground-buildings` element, and one more in between `.fb2` and `.fb3`. +Vuelva a juntar los edificios agregando dos elementos `div` vacíos en la parte superior e inferior del elemento `.foreground-buildings`, y uno más entre `.fb2` y `.fb3`. # --hints-- -You should add two `div` elements as the first children of `.foreground-buildings`. +Debe agregar dos elementos `div` como los primeros hijos de `.foreground-buildings`. ```js const bBuildings = document.querySelector('.background-buildings')?.children; @@ -19,14 +19,14 @@ assert(![...bBuildings?.[0]?.classList]?.includes('fb1')); assert(![...bBuildings?.[1]?.classList]?.includes('fb1')); ``` -You should add one `div` element between `.fb2` and `.fb3`. +Debe agregar un elemento `div` entre `.fb2` y `.fb3`. ```js assert(document.querySelector('.fb2')?.nextElementSibling === document.querySelector('.fb3')?.previousElementSibling); ``` -You should add two `div` elements as the last children of `.foreground-buildings`. +Debe agregar dos elementos `div` como los últimos elementos secundarios de `.foreground-buildings`. ```js const fb6 = document.querySelector('.fb6'); @@ -34,7 +34,7 @@ assert.exists(fb6?.nextElementSibling); assert.exists(fb6?.nextElementSibling?.nextElementSibling); ``` -You should have added 5 new `div` elements. +Debería haber agregado 5 nuevos elementos `div`. ```js assert.equal(document.querySelectorAll('div')?.length, 26); diff --git a/curriculum/challenges/espanol/14-responsive-web-design-22/learn-css-variables-by-building-a-city-skyline/5d822fd413a79914d39e98ed.md b/curriculum/challenges/espanol/14-responsive-web-design-22/learn-css-variables-by-building-a-city-skyline/5d822fd413a79914d39e98ed.md index f5fc62788f1..69242324497 100644 --- a/curriculum/challenges/espanol/14-responsive-web-design-22/learn-css-variables-by-building-a-city-skyline/5d822fd413a79914d39e98ed.md +++ b/curriculum/challenges/espanol/14-responsive-web-design-22/learn-css-variables-by-building-a-city-skyline/5d822fd413a79914d39e98ed.md @@ -7,29 +7,29 @@ dashedName: step-37 # --description-- -Move the position of `.fb4` relative to where it is now by adding a `position` of `relative` and `left` of `10%` to it. Do the same for `.fb5` but use `right` instead of `left`. This will cover up the remaining white space in between the buildings. +Mueva la posición de `.fb4` relativa a donde está ahora agregando una `position` de `relative` y `left` de `10%` a él. Haz lo mismo para `.fb5` pero usa `right` en lugar de `left`. Esto cubrirá el espacio en blanco restante entre los edificios. # --hints-- -You should give `.fb4` a `position` of `relative`. +Debes darle a `.fb4` una `position` de `relative`. ```js assert.equal(new __helpers.CSSHelp(document).getStyle('.fb4')?.position, 'relative'); ``` -You should give `.fb4` a `left` of `10%`. +Debes darle a `.fb4` una `left` de `10%`. ```js assert.equal(new __helpers.CSSHelp(document).getStyle('.fb4')?.left, '10%'); ``` -You should give `.fb5` a `position` of `relative`. +Debes darle a `.fb5` una `position` de `relative`. ```js assert.equal(new __helpers.CSSHelp(document).getStyle('.fb5')?.position, 'relative'); ``` -You should give `.fb5` a `right` of `10%`. +Deberías darle a `.fb5` un `right` de `10%`. ```js assert.equal(new __helpers.CSSHelp(document).getStyle('.fb5')?.right, '10%'); diff --git a/curriculum/challenges/espanol/14-responsive-web-design-22/learn-css-variables-by-building-a-city-skyline/5d822fd413a79914d39e98ee.md b/curriculum/challenges/espanol/14-responsive-web-design-22/learn-css-variables-by-building-a-city-skyline/5d822fd413a79914d39e98ee.md index 20ec58d9b49..a4d1054796d 100644 --- a/curriculum/challenges/espanol/14-responsive-web-design-22/learn-css-variables-by-building-a-city-skyline/5d822fd413a79914d39e98ee.md +++ b/curriculum/challenges/espanol/14-responsive-web-design-22/learn-css-variables-by-building-a-city-skyline/5d822fd413a79914d39e98ee.md @@ -7,17 +7,17 @@ dashedName: step-38 # --description-- -Your code is starting to get quite long. Add a comment above the `.fb1` class that says `FOREGROUND BUILDINGS - "fb" stands for "foreground building"` to help people understand your code. Above the `.bb1` class add another comment that says `BACKGROUND BUILDINGS - "bb" stands for "background building"`. If you don't remember, comments in CSS look like this: `/* Comment here */`. +Su código está empezando a ser bastante largo. Agregue un comentario sobre la clase `.fb1` que diga `FOREGROUND BUILDINGS - "fb" stands for "foreground building"` para ayudar a las personas a comprender su código. Encima de la clase `.bb1` agregue otro comentario que diga `BACKGROUND BUILDINGS - "bb" stands for "background building"`. Si no lo recuerda, los comentarios en CSS se ven así: `/* Comment here */`. # --hints-- -You should add the comment `BACKGROUND BUILDINGS - "bb" stands for "background building"` above the `.bb1` selector. +Debe agregar el comentario `BACKGROUND BUILDINGS - "bb" stands for "background building"` encima del selector `.bb1`. ```js assert(/\/\*\s*BACKGROUND BUILDINGS - "bb" stands for "background building"\s*\*\//gi.test(code)); ``` -You should add the comment `FOREGROUND BUILDINGS - "fb" stands for "foreground building"` above the `.fb1` selector. +Debe agregar el comentario `FOREGROUND BUILDINGS - "fb" stands for "foreground building"` encima del selector `.fb1`. ```js assert(/\/\*\s*FOREGROUND BUILDINGS - "fb" stands for "foreground building"\s*\*\//gi.test(code)); diff --git a/curriculum/challenges/espanol/14-responsive-web-design-22/learn-css-variables-by-building-a-city-skyline/5d822fd413a79914d39e98ef.md b/curriculum/challenges/espanol/14-responsive-web-design-22/learn-css-variables-by-building-a-city-skyline/5d822fd413a79914d39e98ef.md index 8a24409f4d2..ffe5af9957b 100644 --- a/curriculum/challenges/espanol/14-responsive-web-design-22/learn-css-variables-by-building-a-city-skyline/5d822fd413a79914d39e98ef.md +++ b/curriculum/challenges/espanol/14-responsive-web-design-22/learn-css-variables-by-building-a-city-skyline/5d822fd413a79914d39e98ef.md @@ -7,17 +7,17 @@ dashedName: step-39 # --description-- -Create a new variable in `:root` called `--window-color1` and give it a value of `black`. This will be a secondary color for the purple buildings. +Cree una nueva variable en `:root` llamada `--window-color1` y asígnele un valor de `black`. Este será un color secundario para los edificios morados. # --hints-- -You should create a new variable in `:root` called `--window-color1`. +Debe crear una nueva variable en `:root` llamada `--window-color1`. ```js assert(new __helpers.CSSHelp(document).isPropertyUsed('--window-color1')); ``` -You should give the property variable `--window-color1` a value of `black`. +Debe dar a la variable de propiedad `--window-color1` un valor de `black`. ```js assert.equal(new __helpers.CSSHelp(document).getStyle(':root')?.getPropertyValue('--window-color1').trim(), 'black'); diff --git a/curriculum/challenges/espanol/14-responsive-web-design-22/learn-css-variables-by-building-a-city-skyline/5d822fd413a79914d39e98f0.md b/curriculum/challenges/espanol/14-responsive-web-design-22/learn-css-variables-by-building-a-city-skyline/5d822fd413a79914d39e98f0.md index b1dd0b5d994..510bbe4f1db 100644 --- a/curriculum/challenges/espanol/14-responsive-web-design-22/learn-css-variables-by-building-a-city-skyline/5d822fd413a79914d39e98f0.md +++ b/curriculum/challenges/espanol/14-responsive-web-design-22/learn-css-variables-by-building-a-city-skyline/5d822fd413a79914d39e98f0.md @@ -7,7 +7,7 @@ dashedName: step-40 # --description-- -Gradients in CSS are a way to transition between colors across the distance of an element. They are applied to the `background` property and the syntax looks like this: +Los degradados en CSS son una forma de transición entre colores a lo largo de la distancia de un elemento. Se aplican a la propiedad `background` y la sintaxis se ve así: ```css gradient-type( @@ -16,29 +16,29 @@ gradient-type( ); ``` -In the example, `color1` is solid at the top, `color2` is solid at the bottom, and in between it transitions evenly from one to the next. In `.bb1a`, add a gradient of type `linear-gradient` to the `background` property with `--building-color1` as the first color and `--window-color1` as the second. +En el ejemplo, `color1` es sólido en la parte superior, `color2` es sólido en la parte inferior, y en el medio pasa uniformemente de uno a otro. En `.bb1a`, agregue un degradado de tipo `linear-gradient` a la propiedad `background` con `--building-color1` como primer color y `--window-color1` como segundo. # --hints-- -You should apply a `background` to `.bb1a`. +Debe aplicar un `background` a `.bb1a`. ```js assert(new __helpers.CSSHelp(document).getStyle('.bb1a')?.background); ``` -You should give the `background` a `linear-gradient`. +Debes darle al `background` un `linear-gradient`. ```js assert.include(new __helpers.CSSHelp(document).getStyle('.bb1a')?.background, 'linear-gradient'); ``` -You should give the `background` a `linear-gradient` starting from `--building-color1`. +Debes darle al `background` un `linear-gradient` a partir de `--building-color1`. ```js assert.include(new __helpers.CSSHelp(document).getStyle('.bb1a')?.getPropVal('background', true), 'linear-gradient(var(--building-color1'); ``` -You should give the `background` a `linear-gradient` ending at `--window-color1`. +Debes darle al `background` un `linear-gradient` que termine en `--window-color1`. ```js assert.include(new __helpers.CSSHelp(document).getStyle('.bb1a')?.getPropVal('background', true), 'linear-gradient(var(--building-color1),var(--window-color1))'); diff --git a/curriculum/challenges/espanol/14-responsive-web-design-22/learn-css-variables-by-building-a-city-skyline/5d822fd413a79914d39e98f1.md b/curriculum/challenges/espanol/14-responsive-web-design-22/learn-css-variables-by-building-a-city-skyline/5d822fd413a79914d39e98f1.md index 50e48620bbb..89a05e62ca2 100644 --- a/curriculum/challenges/espanol/14-responsive-web-design-22/learn-css-variables-by-building-a-city-skyline/5d822fd413a79914d39e98f1.md +++ b/curriculum/challenges/espanol/14-responsive-web-design-22/learn-css-variables-by-building-a-city-skyline/5d822fd413a79914d39e98f1.md @@ -7,37 +7,37 @@ dashedName: step-41 # --description-- -You want to add the same gradient to the next two sections. Instead of doing that, create a new class selector called `bb1-window`, and move the `height` and `background` properties and values from `.bb1a` to the new class selector. +Desea agregar el mismo degradado a las siguientes dos secciones. En lugar de hacer eso, cree un nuevo selector de clase llamado `bb1-window`, y mueva las propiedades y valores `height` y `background` de `.bb1a` al nuevo selector de clase. # --hints-- -You should create a new class selector called `bb1-window`. +Debe crear un nuevo selector de clase llamado `bb1-window`. ```js assert.exists(new __helpers.CSSHelp(document).getStyle('.bb1-window')); ``` -You should move the `height` property and value from `.bb1a` to `.bb1-window`. +Debe mover la propiedad y el valor `height` de `.bb1a` a `.bb1-window`. ```js assert.isEmpty(new __helpers.CSSHelp(document).getStyle('.bb1a')?.height); assert.equal(new __helpers.CSSHelp(document).getStyle('.bb1-window')?.height, '10%'); ``` -You should move the `background` property and value from `.bb1a` to `.bb1-window`. +Debe mover la propiedad y el valor `background` de `.bb1a` a `.bb1-window`. ```js assert.isEmpty(new __helpers.CSSHelp(document).getStyle('.bb1a')?.background); assert.equal(new __helpers.CSSHelp(document).getStyle('.bb1-window')?.getPropVal('background', true), 'linear-gradient(var(--building-color1),var(--window-color1))'); ``` -You should not move the `background-color` property from `.bb1a`. +No debe mover la propiedad `background-color` de `.bb1a`. ```js assert.notEmpty(new __helpers.CSSHelp(document).getStyle('.bb1a')?.backgroundColor); ``` -You should not move the `width` property from `.bb1a`. +No debe mover la propiedad `width` de `.bb1a`. ```js assert.notEmpty(new __helpers.CSSHelp(document).getStyle('.bb1a')?.width); diff --git a/curriculum/challenges/espanol/14-responsive-web-design-22/learn-css-variables-by-building-a-city-skyline/5d822fd413a79914d39e98f2.md b/curriculum/challenges/espanol/14-responsive-web-design-22/learn-css-variables-by-building-a-city-skyline/5d822fd413a79914d39e98f2.md index 870e2db1cec..e96a9d86154 100644 --- a/curriculum/challenges/espanol/14-responsive-web-design-22/learn-css-variables-by-building-a-city-skyline/5d822fd413a79914d39e98f2.md +++ b/curriculum/challenges/espanol/14-responsive-web-design-22/learn-css-variables-by-building-a-city-skyline/5d822fd413a79914d39e98f2.md @@ -7,47 +7,47 @@ dashedName: step-42 # --description-- -Add the new `bb1-window` class to the `.bb1a`, `.bb1b`, and `.bb1c` elements. This will apply the gradient to them. +Agregue la nueva clase `bb1-window` a los elementos `.bb1a`, `.bb1b` y `.bb1c`. Esto les aplicará el degradado. # --hints-- -You should not remove the `bb1a` class. +No debe eliminar la clase `bb1a`. ```js assert.exists(document.querySelector('div.bb1a')); ``` -You should add the `bb1-window` class to the `.bb1a` element. +Debe agregar la clase `bb1-window` al elemento `.bb1a`. ```js assert.exists(document.querySelector('div.bb1a.bb1-window')); ``` -You should not remove the `bb1b` class. +No debe eliminar la clase `bb1b`. ```js assert.exists(document.querySelector('div.bb1b')); ``` -You should add the `bb1-window` class to the `.bb1b` element. +Debe agregar la clase `bb1-window` al elemento `.bb1b`. ```js assert.exists(document.querySelector('div.bb1b.bb1-window')); ``` -You should not remove the `bb1c` class. +No debe eliminar la clase `bb1c`. ```js assert.exists(document.querySelector('div.bb1c')); ``` -You should add the `bb1-window` class to the `.bb1c` element. +Debe agregar la clase `bb1-window` al elemento `.bb1c`. ```js assert.exists(document.querySelector('div.bb1c.bb1-window')); ``` -You should not change the `.bb1d` element. +No debe cambiar el elemento `.bb1d`. ```js assert.exists(document.querySelector('div.bb1d')); diff --git a/curriculum/challenges/espanol/14-responsive-web-design-22/learn-css-variables-by-building-a-city-skyline/5d822fd413a79914d39e98f3.md b/curriculum/challenges/espanol/14-responsive-web-design-22/learn-css-variables-by-building-a-city-skyline/5d822fd413a79914d39e98f3.md index 314894765e2..65156b6df9d 100644 --- a/curriculum/challenges/espanol/14-responsive-web-design-22/learn-css-variables-by-building-a-city-skyline/5d822fd413a79914d39e98f3.md +++ b/curriculum/challenges/espanol/14-responsive-web-design-22/learn-css-variables-by-building-a-city-skyline/5d822fd413a79914d39e98f3.md @@ -7,35 +7,35 @@ dashedName: step-43 # --description-- -You don't need the `height` or `background-color` properties in `.bb1a`, `.bb1b` or `.bb1c` anymore, so go ahead and remove them. +No necesita las propiedades `height` o `background-color` en `.bb1a`, `.bb1b` o `.bb1c` nunca más, así que adelante, elimínelos. # --hints-- -You should remove the `background-color` from `.bb1a`. +Debe eliminar el `background-color` de `.bb1a`. ```js assert.isEmpty(new __helpers.CSSHelp(document).getStyle('.bb1a')?.backgroundColor); ``` -You should remove the `height` property from `.bb1b`. +Debe eliminar la propiedad `height` de `.bb1b`. ```js assert.isEmpty(new __helpers.CSSHelp(document).getStyle('.bb1b')?.height); ``` -You should remove the `background-color` property from `.bb1b`. +Debe eliminar la propiedad `background-color` de `.bb1b`. ```js assert.isEmpty(new __helpers.CSSHelp(document).getStyle('.bb1b')?.backgroundColor); ``` -You should remove the `height` property from `.bb1c`. +Debe eliminar la propiedad `height` de `.bb1c`. ```js assert.isEmpty(new __helpers.CSSHelp(document).getStyle('.bb1c')?.height); ``` -You should remove the `background-color` property from `.bb1c`. +Debe eliminar la propiedad `background-color` de `.bb1c`. ```js assert.isEmpty(new __helpers.CSSHelp(document).getStyle('.bb1c')?.backgroundColor); diff --git a/curriculum/challenges/espanol/14-responsive-web-design-22/learn-css-variables-by-building-a-city-skyline/5d822fd413a79914d39e98f4.md b/curriculum/challenges/espanol/14-responsive-web-design-22/learn-css-variables-by-building-a-city-skyline/5d822fd413a79914d39e98f4.md index 18525551e28..cbc06b9dc9c 100644 --- a/curriculum/challenges/espanol/14-responsive-web-design-22/learn-css-variables-by-building-a-city-skyline/5d822fd413a79914d39e98f4.md +++ b/curriculum/challenges/espanol/14-responsive-web-design-22/learn-css-variables-by-building-a-city-skyline/5d822fd413a79914d39e98f4.md @@ -7,7 +7,7 @@ dashedName: step-44 # --description-- -Gradients can use as many colors as you want like this: +Los degradados pueden usar tantos colores como quieras así: ```css gradient-type( @@ -17,35 +17,35 @@ gradient-type( ); ``` -Add a `linear-gradient` to `.bb1d` with `orange` as the first color, `--building-color1` as the second, and `--window-color1` as the third. Remember to use the gradient on the `background` property. +Agrega un `linear-gradient` a `.bb1d` con `orange` como el primer color, `--building-color1` como el segundo, y `--window-color1` como tercero. Recuerda usar el degradado en la propiedad `background`. # --hints-- -You should use the `background` on `.bb1d`. +Debe usar el `background` en `.bb1d`. ```js assert.isNotEmpty(new __helpers.CSSHelp(document).getStyle('.bb1d')?.background); ``` -You should give the `background` property a `linear-gradient`. +Debes darle a la propiedad `background` un `linear-gradient`. ```js assert.include(new __helpers.CSSHelp(document).getStyle('.bb1d')?.background, 'linear-gradient'); ``` -You should use `orange` as the first color in the `linear-gradient`. +Debes usar `orange` como el primer color en el `linear-gradient`. ```js assert.include(new __helpers.CSSHelp(document).getStyle('.bb1d')?.getPropVal('background', true), 'linear-gradient(orange'); ``` -You should use `--building-color1` as the second color in the `linear-gradient`. +Debes usar `--building-color1` como segundo color en el `linear-gradient`. ```js assert.include(new __helpers.CSSHelp(document).getStyle('.bb1d')?.getPropVal('background', true), 'linear-gradient(orange,var(--building-color1)'); ``` -You should use `--window-color1` as the third color in the `linear-gradient`. +Debe usar `--window-color1` como el tercer color en el `linear-gradient`. ```js assert.equal(new __helpers.CSSHelp(document).getStyle('.bb1d')?.getPropVal('background', true), 'linear-gradient(orange,var(--building-color1),var(--window-color1))'); diff --git a/curriculum/challenges/espanol/14-responsive-web-design-22/learn-css-variables-by-building-a-city-skyline/5d822fd413a79914d39e98f5.md b/curriculum/challenges/espanol/14-responsive-web-design-22/learn-css-variables-by-building-a-city-skyline/5d822fd413a79914d39e98f5.md index b521ff2529a..8c205d5b522 100644 --- a/curriculum/challenges/espanol/14-responsive-web-design-22/learn-css-variables-by-building-a-city-skyline/5d822fd413a79914d39e98f5.md +++ b/curriculum/challenges/espanol/14-responsive-web-design-22/learn-css-variables-by-building-a-city-skyline/5d822fd413a79914d39e98f5.md @@ -7,11 +7,11 @@ dashedName: step-45 # --description-- -It's a little hidden behind the foreground buildings, but you can see the three color gradient there. Since you are using that now, remove the `background-color` property from `.bb1d`. +Está un poco escondido detrás de los edificios en primer plano, pero puedes ver el degradado de tres colores allí. Como lo está usando ahora, elimine la propiedad `background-color` de `.bb1d`. # --hints-- -You should remove the `background-color` property and value from `.bb1d` +Debe eliminar la propiedad y el valor `background-color` de `.bb1d` ```js assert.notMatch(code, /\.bb1d\s*\{\s*[^}]*?background-color[^}]*?\}/); diff --git a/curriculum/challenges/espanol/14-responsive-web-design-22/learn-css-variables-by-building-a-city-skyline/5d822fd413a79914d39e98f6.md b/curriculum/challenges/espanol/14-responsive-web-design-22/learn-css-variables-by-building-a-city-skyline/5d822fd413a79914d39e98f6.md index b9086841e6b..f4c1eb52f8d 100644 --- a/curriculum/challenges/espanol/14-responsive-web-design-22/learn-css-variables-by-building-a-city-skyline/5d822fd413a79914d39e98f6.md +++ b/curriculum/challenges/espanol/14-responsive-web-design-22/learn-css-variables-by-building-a-city-skyline/5d822fd413a79914d39e98f6.md @@ -7,7 +7,7 @@ dashedName: step-46 # --description-- -You can specify where you want a gradient transition to complete by adding it to the color like this: +Puede especificar dónde desea que se complete una transición de degradado agregándolo al color de esta manera: ```css gradient-type( @@ -17,11 +17,11 @@ gradient-type( ); ``` -Here, it will transition from `color1` to `color2` between `0%` and `20%` of the element and then transition to `color3` for the rest. Add `80%` to the `--building-color1` color of the `.bb1d` gradient so you can see it in action. +Aquí, pasará de `color1` a `color2` entre `0%` y `20%` del elemento y luego pasará a `color3` para el resto. Agrega `80%` al color `--building-color1` del degradado `.bb1d` para que puedas verlo en acción. # --hints-- -You should add a value of `80%` to the `--building-color1` color in the `linear-gradient` of `.bb1d`. +Debe agregar un valor de `80%` al color `--building-color1` en el `linear-gradient` de `.bb1d`. ```js assert.equal(new __helpers.CSSHelp(document).getStyle('.bb1d')?.getPropVal('background', true), 'linear-gradient(orange,var(--building-color1)80%,var(--window-color1))'); diff --git a/curriculum/challenges/espanol/14-responsive-web-design-22/learn-css-variables-by-building-a-city-skyline/5d822fd413a79914d39e98f7.md b/curriculum/challenges/espanol/14-responsive-web-design-22/learn-css-variables-by-building-a-city-skyline/5d822fd413a79914d39e98f7.md index 137c45cfc45..1a5310c9187 100644 --- a/curriculum/challenges/espanol/14-responsive-web-design-22/learn-css-variables-by-building-a-city-skyline/5d822fd413a79914d39e98f7.md +++ b/curriculum/challenges/espanol/14-responsive-web-design-22/learn-css-variables-by-building-a-city-skyline/5d822fd413a79914d39e98f7.md @@ -7,17 +7,17 @@ dashedName: step-47 # --description-- -Remove `orange` from the `.bb1d` gradient and change the `80%` to `50%`. This will make `--building-color1` solid for the top half, and then transition to `--window-color1` for the bottom half. +Elimina `orange` del degradado `.bb1d` y cambia el `80%` a `50%`. Esto hará que `--building-color1` sea sólido para la mitad superior y luego pasará a `--window-color1` para la mitad inferior. # --hints-- -You should remove `orange` from the `linear-gradient`. +Debe eliminar `orange` del `linear-gradient`. ```js assert.notInclude(new __helpers.CSSHelp(document).getStyle('.bb1d')?.background, 'orange'); ``` -You should change the now first `linear-gradient` color to transition at `50%`. +Deberías cambiar el ahora primer color `linear-gradient` para hacer una transición al `50%`. ```js assert.equal(new __helpers.CSSHelp(document).getStyle('.bb1d')?.getPropVal('background', true), 'linear-gradient(var(--building-color1)50%,var(--window-color1))'); diff --git a/curriculum/challenges/espanol/14-responsive-web-design-22/learn-css-variables-by-building-a-city-skyline/5d822fd413a79914d39e98f8.md b/curriculum/challenges/espanol/14-responsive-web-design-22/learn-css-variables-by-building-a-city-skyline/5d822fd413a79914d39e98f8.md index 03da0179b64..12680ec4de6 100644 --- a/curriculum/challenges/espanol/14-responsive-web-design-22/learn-css-variables-by-building-a-city-skyline/5d822fd413a79914d39e98f8.md +++ b/curriculum/challenges/espanol/14-responsive-web-design-22/learn-css-variables-by-building-a-city-skyline/5d822fd413a79914d39e98f8.md @@ -7,23 +7,23 @@ dashedName: step-48 # --description-- -Nest two new `div` elements within `.bb2`, give them the classes of `bb2a` and `bb2b`, in that order. These will be two sections for this building. +Anide dos nuevos elementos `div` dentro de `.bb2`, asígneles las clases de `bb2a` y `bb2b`, en ese orden. Estas serán dos secciones para este edificio. # --hints-- -You should add two `div` elements to `.bb2`. +Debe agregar dos elementos `div` a `.bb2`. ```js assert.equal(document.querySelector('div.bb2')?.children?.length, 2); ``` -You should give the first `div` a class of `bb2a`. +Debes darle al primer `div` una clase de `bb2a`. ```js assert.exists(document.querySelector('div.bb2a')); ``` -You should give the second `div` a class of `bb2b`. +Debes darle al segundo `div` una clase de `bb2b`. ```js assert.exists(document.querySelector('div.bb2b')); diff --git a/curriculum/challenges/espanol/14-responsive-web-design-22/learn-css-variables-by-building-a-city-skyline/5d822fd413a79914d39e98f9.md b/curriculum/challenges/espanol/14-responsive-web-design-22/learn-css-variables-by-building-a-city-skyline/5d822fd413a79914d39e98f9.md index 733801dd31c..2310149d32a 100644 --- a/curriculum/challenges/espanol/14-responsive-web-design-22/learn-css-variables-by-building-a-city-skyline/5d822fd413a79914d39e98f9.md +++ b/curriculum/challenges/espanol/14-responsive-web-design-22/learn-css-variables-by-building-a-city-skyline/5d822fd413a79914d39e98f9.md @@ -7,17 +7,17 @@ dashedName: step-49 # --description-- -Give `.bb2b` a `width` and `height` of `100%` to make it fill the building container. You will add something on the top a little later. +Dale a `.bb2b` un `width` y `height` de `100%` para que llene el contenedor de construcción. Agregarás algo en la parte superior un poco más tarde. # --hints-- -You should give `.bb2b` a `width` of `100%`. +Debe dar a `.bb2b` un `width` de `100%`. ```js assert.equal(new __helpers.CSSHelp(document).getStyle('.bb2b')?.width, '100%'); ``` -You should give `.bb2b` a `height` of `100%`. +Debe dar a `.bb2b` un `height` de `100%`. ```js assert.equal(new __helpers.CSSHelp(document).getStyle('.bb2b')?.height, '100%'); diff --git a/curriculum/challenges/espanol/14-responsive-web-design-22/learn-css-variables-by-building-a-city-skyline/5d822fd413a79914d39e98fa.md b/curriculum/challenges/espanol/14-responsive-web-design-22/learn-css-variables-by-building-a-city-skyline/5d822fd413a79914d39e98fa.md index f37f95b5cdc..be334251ed6 100644 --- a/curriculum/challenges/espanol/14-responsive-web-design-22/learn-css-variables-by-building-a-city-skyline/5d822fd413a79914d39e98fa.md +++ b/curriculum/challenges/espanol/14-responsive-web-design-22/learn-css-variables-by-building-a-city-skyline/5d822fd413a79914d39e98fa.md @@ -7,17 +7,17 @@ dashedName: step-50 # --description-- -Create a new variable in `:root` named `window-color2` with a value of `#8cd9b3`. This will be used as the secondary color for this building. +Cree una nueva variable en `:root` denominada `window-color2` con un valor de `#8cd9b3`. Esto se utilizará como el color secundario para este edificio. # --hints-- -You should create a new property variable called `window-color2` within `:root`. +Debe crear una nueva variable de propiedad llamada `window-color2` dentro de `:root`. ```js assert.exists(new __helpers.CSSHelp(document).getStyle(':root')?.getPropertyValue('--window-color2')); ``` -You should give `window-color2` a value of `#8cd9b3`. +Debe asignar a `window-color2` un valor de `#8cd9b3`. ```js assert.equal(new __helpers.CSSHelp(document).getStyle(':root')?.getPropertyValue('--window-color2').trim(), '#8cd9b3'); diff --git a/curriculum/challenges/espanol/14-responsive-web-design-22/learn-css-variables-by-building-a-city-skyline/5d822fd413a79914d39e98fb.md b/curriculum/challenges/espanol/14-responsive-web-design-22/learn-css-variables-by-building-a-city-skyline/5d822fd413a79914d39e98fb.md index 24512b6c26c..c6b6fee82f5 100644 --- a/curriculum/challenges/espanol/14-responsive-web-design-22/learn-css-variables-by-building-a-city-skyline/5d822fd413a79914d39e98fb.md +++ b/curriculum/challenges/espanol/14-responsive-web-design-22/learn-css-variables-by-building-a-city-skyline/5d822fd413a79914d39e98fb.md @@ -7,7 +7,7 @@ dashedName: step-51 # --description-- -Gradient transitions often gradually change from one color to another. You can make the change a solid line like this: +Las transiciones de gradiente a menudo cambian gradualmente de un color a otro. Puede hacer que el cambio sea una línea sólida como esta: ```css linear-gradient( @@ -18,35 +18,35 @@ linear-gradient( ); ``` -Add a `linear-gradient` to `.bb2b` that uses `--building-color2` from `0%` to `6%` and `--window-color2` from `6%` to `9%`. +Agregue un `linear-gradient` a `.bb2b` que use `--building-color2` de `0%` a `6%` y `--window-color2` de `6%` a `9%`. # --hints-- -You should give `.bb2b` a `background` property. +Debe asignar a `.bb2b` una propiedad `background`. ```js assert.isNotEmpty(new __helpers.CSSHelp(document).getStyle(`.bb2b`)?.background); ``` -You should use a `linear-gradient` on the `background`. +Debe usar un `linear-gradient` en el `background`. ```js assert.include(new __helpers.CSSHelp(document).getStyle(`.bb2b`)?.background, "linear-gradient"); ``` -You should use `--building-color2` from `0%` to `6%`. +Debe usar `--building-color2` de `0%` a `6%`. ```js assert.match(new __helpers.CSSHelp(document).getStyle(`.bb2b`)?.getPropVal('background', true), /var\(--building-color2\)(0%)?,var\(--building-color2\)6%/); ``` -You should use `--window-color2` from `6%` to `9%`. +Debe usar `--window-color2` de `6%` a `9%`. ```js assert.include(new __helpers.CSSHelp(document).getStyle(`.bb2b`)?.getPropVal('background', true), "var(--window-color2)6%,var(--window-color2)9%"); ``` -`.bb2b` should have a `linear-gradient` transitioning from `--building-color2` at `0%` to `6%`, and `--window-color2` at `6%` to `9%`. +`.bb2b` debe tener una transición `linear-gradient` de `--building-color2` en `0%` a `6%`, y `--window-color2` en `6%` a `9%`. ```js assert.match(new __helpers.CSSHelp(document).getStyle(`.bb2b`)?.getPropVal('background', true), /linear-gradient\(var\(--building-color2\)(0%)?,var\(--building-color2\)6%,var\(--window-color2\)6%,var\(--window-color2\)9%\)/); diff --git a/curriculum/challenges/espanol/14-responsive-web-design-22/learn-css-variables-by-building-a-city-skyline/5d822fd413a79914d39e98fc.md b/curriculum/challenges/espanol/14-responsive-web-design-22/learn-css-variables-by-building-a-city-skyline/5d822fd413a79914d39e98fc.md index bb2d46ba059..9adb95044aa 100644 --- a/curriculum/challenges/espanol/14-responsive-web-design-22/learn-css-variables-by-building-a-city-skyline/5d822fd413a79914d39e98fc.md +++ b/curriculum/challenges/espanol/14-responsive-web-design-22/learn-css-variables-by-building-a-city-skyline/5d822fd413a79914d39e98fc.md @@ -7,11 +7,11 @@ dashedName: step-52 # --description-- -You can see the hard color change at the top of the section. Change the gradient type from `linear-gradient` to `repeating-linear-gradient` for this section. This will make the four colors of your gradient repeat until it gets to the bottom of the element; giving you some stripes, and saving you from having to add a bunch of elements to create them. +Puede ver el cambio de color duro en la parte superior de la sección. Cambie el tipo de degradado de `linear-gradient` a `repeating-linear-gradient` para esta sección. Esto hará que los cuatro colores de su degradado se repitan hasta que llegue al fondo del elemento; dándote algunas rayas y ahorrándote tener que agregar un montón de elementos para crearlos. # --hints-- -You should change the `background` property of `.bb2b` from using `linear-gradient` to using `repeating-linear-gradient`. +Debe cambiar la propiedad `background` de `.bb2b` de usar `linear-gradient` a usar `repeating-linear-gradient`. ```js assert.equal(new __helpers.CSSHelp(document).getStyle(`.bb2b`)?.getPropVal('background', true), "repeating-linear-gradient(var(--building-color2),var(--building-color2)6%,var(--window-color2)6%,var(--window-color2)9%)"); diff --git a/curriculum/challenges/espanol/14-responsive-web-design-22/learn-css-variables-by-building-a-city-skyline/5d822fd413a79914d39e98fd.md b/curriculum/challenges/espanol/14-responsive-web-design-22/learn-css-variables-by-building-a-city-skyline/5d822fd413a79914d39e98fd.md index 44ca773aa95..19c89cea684 100644 --- a/curriculum/challenges/espanol/14-responsive-web-design-22/learn-css-variables-by-building-a-city-skyline/5d822fd413a79914d39e98fd.md +++ b/curriculum/challenges/espanol/14-responsive-web-design-22/learn-css-variables-by-building-a-city-skyline/5d822fd413a79914d39e98fd.md @@ -7,11 +7,11 @@ dashedName: step-53 # --description-- -In the next few steps, you are going to use some tricks with CSS borders to turn the `.bb2a` section into a triangle at the top of the building. First, remove the `background-color` from `.bb2` since you don't need it anymore. +En los siguientes pasos, usarás algunos trucos con bordes CSS para convertir la sección `.bb2a` en un triángulo en la parte superior del edificio. Primero, elimine el `background-color` de `.bb2` ya que ya no lo necesita. # --hints-- -You should remove the `background-color` from `.bb2`. +Debe eliminar el `background-color` de `.bb2`. ```js assert.isEmpty(new __helpers.CSSHelp(document).getStyle(".bb2")?.backgroundColor); diff --git a/curriculum/challenges/espanol/14-responsive-web-design-22/learn-css-variables-by-building-a-city-skyline/5d822fd413a79914d39e98fe.md b/curriculum/challenges/espanol/14-responsive-web-design-22/learn-css-variables-by-building-a-city-skyline/5d822fd413a79914d39e98fe.md index 36d8b355a51..40aca2bcd77 100644 --- a/curriculum/challenges/espanol/14-responsive-web-design-22/learn-css-variables-by-building-a-city-skyline/5d822fd413a79914d39e98fe.md +++ b/curriculum/challenges/espanol/14-responsive-web-design-22/learn-css-variables-by-building-a-city-skyline/5d822fd413a79914d39e98fe.md @@ -7,7 +7,7 @@ dashedName: step-54 # --description-- -Add these properties to `.bb2a`: +Agregue estas propiedades a `.bb2a`: ```css margin: auto; @@ -19,47 +19,47 @@ border-left: 1vw solid #999; border-right: 1vw solid #999; ``` -After you add these, you can see how a thick border on an element gives you some angles where two sides meet. You are going to use that bottom border as the top of the building. +Después de agregar estos, puede ver cómo un borde grueso en un elemento le da algunos ángulos donde se encuentran dos lados. Vas a usar ese borde inferior como la parte superior del edificio. # --hints-- -You should give `.bb2a` a `margin` of `auto`. +Debe dar a `.bb2a` un `margin` de `auto`. ```js assert.equal(new __helpers.CSSHelp(document).getStyle('.bb2a')?.margin, "auto"); ``` -You should give `.bb2a` a `width` of `auto`. +Debe dar a `.bb2a` un `width` de `auto`. ```js assert.equal(new __helpers.CSSHelp(document).getStyle('.bb2a')?.width, "5vw"); ``` -You should give `.bb2a` a `height` of `5vw`. +Debe dar `.bb2a` un `height` de `5vw`. ```js assert.equal(new __helpers.CSSHelp(document).getStyle('.bb2a')?.height, "5vw"); ``` -You should give `.bb2a` a `border-top` of `1vw solid #000`. +Debe dar a `.bb2a` un `border-top` de `1vw solid #000`. ```js assert.equal(new __helpers.CSSHelp(document).getStyle('.bb2a')?.borderTop, "1vw solid rgb(0, 0, 0)"); ``` -You should give `.bb2a` a `border-bottom` of `1vw solid #000`. +Debe dar a `.bb2a` un `border-bottom` de `1vw solid #000`. ```js assert.equal(new __helpers.CSSHelp(document).getStyle('.bb2a')?.borderBottom, "1vw solid rgb(0, 0, 0)"); ``` -You should give `.bb2a` a `border-left` of `1vw solid #999`. +Debe dar a `.bb2a` un `border-left` de `1vw solid #999`. ```js assert.equal(new __helpers.CSSHelp(document).getStyle('.bb2a')?.borderLeft, "1vw solid rgb(153, 153, 153)"); ``` -You should give `.bb2a` a `border-right` of `1vw solid #999`. +Debe dar `.bb2a` un `border-right` de `1vw solid #999`. ```js assert.equal(new __helpers.CSSHelp(document).getStyle('.bb2a')?.borderRight, "1vw solid rgb(153, 153, 153)"); diff --git a/curriculum/challenges/espanol/14-responsive-web-design-22/learn-css-variables-by-building-a-city-skyline/5d822fd413a79914d39e98ff.md b/curriculum/challenges/espanol/14-responsive-web-design-22/learn-css-variables-by-building-a-city-skyline/5d822fd413a79914d39e98ff.md index bf58568bb90..2ecd74bcc3b 100644 --- a/curriculum/challenges/espanol/14-responsive-web-design-22/learn-css-variables-by-building-a-city-skyline/5d822fd413a79914d39e98ff.md +++ b/curriculum/challenges/espanol/14-responsive-web-design-22/learn-css-variables-by-building-a-city-skyline/5d822fd413a79914d39e98ff.md @@ -7,29 +7,29 @@ dashedName: step-55 # --description-- -Next, remove the `width` and `height` from `.bb2a`, and change the `border-left` and `border-right` to use `5vw` instead of `1vw`. The element will now have zero size and the borders will come together in the middle. +A continuación, elimine `width` y `height` de `.bb2a` y cambie `border-left` y `border-right` para usar `5vw` en lugar de `1vw`. El elemento ahora tendrá un tamaño cero y los bordes se unirán en el medio. # --hints-- -You should remove the `width` from `.bb2a`. +Debe eliminar el `width` de `.bb2a`. ```js assert.isEmpty(new __helpers.CSSHelp(document).getStyle(".bb2a")?.width); ``` -You should remove the `height` from `.bb2a`. +Debe eliminar el `height` de `.bb2a`. ```js assert.isEmpty(new __helpers.CSSHelp(document).getStyle(".bb2a")?.height); ``` -You should change the `border-left` to use `5vw`. +Debe cambiar el `border-left` para usar `5vw`. ```js assert.equal(new __helpers.CSSHelp(document).getStyle(".bb2a")?.borderLeft, "5vw solid rgb(153, 153, 153)"); ``` -You should change the `border-right` to use `5vw`. +Debe cambiar el `border-right` para usar `5vw`. ```js assert.equal(new __helpers.CSSHelp(document).getStyle(".bb2a")?.borderRight, "5vw solid rgb(153, 153, 153)"); diff --git a/curriculum/challenges/espanol/14-responsive-web-design-22/learn-css-variables-by-building-a-city-skyline/5d822fd413a79914d39e9900.md b/curriculum/challenges/espanol/14-responsive-web-design-22/learn-css-variables-by-building-a-city-skyline/5d822fd413a79914d39e9900.md index cb323c1ad4f..653ec19f40e 100644 --- a/curriculum/challenges/espanol/14-responsive-web-design-22/learn-css-variables-by-building-a-city-skyline/5d822fd413a79914d39e9900.md +++ b/curriculum/challenges/espanol/14-responsive-web-design-22/learn-css-variables-by-building-a-city-skyline/5d822fd413a79914d39e9900.md @@ -7,17 +7,17 @@ dashedName: step-56 # --description-- -Next, change the two `#999` of `.bb2a` to `transparent`. This will make the left and right borders invisible. +A continuación, cambie los dos `#999` de `.bb2a` a `transparent`. Esto hará invisibles las fronteras izquierda y derecha. # --hints-- -You should change the `border-left` to use `transparent`. +Debe cambiar el `border-left` para usar `transparent`. ```js assert.equal(new __helpers.CSSHelp(document).getStyle(".bb2a")?.borderLeft, "5vw solid transparent"); ``` -You should change the `border-right` to use `transparent`. +Debe cambiar el `border-right` para usar `transparent`. ```js assert.equal(new __helpers.CSSHelp(document).getStyle(".bb2a")?.borderRight, "5vw solid transparent"); diff --git a/curriculum/challenges/espanol/14-responsive-web-design-22/learn-css-variables-by-building-a-city-skyline/5d822fd413a79914d39e9901.md b/curriculum/challenges/espanol/14-responsive-web-design-22/learn-css-variables-by-building-a-city-skyline/5d822fd413a79914d39e9901.md index 297c0f68827..5b77439ee29 100644 --- a/curriculum/challenges/espanol/14-responsive-web-design-22/learn-css-variables-by-building-a-city-skyline/5d822fd413a79914d39e9901.md +++ b/curriculum/challenges/espanol/14-responsive-web-design-22/learn-css-variables-by-building-a-city-skyline/5d822fd413a79914d39e9901.md @@ -7,17 +7,17 @@ dashedName: step-57 # --description-- -Remove the `margin` and `border-top` properties and values from `.bb2a` to turn it into a triangle for the top of the building. +Elimine las propiedades y valores `margin` y `border-top` de `.bb2a` para convertirlo en un triángulo para la parte superior del edificio. # --hints-- -You should remove the `margin` from `.bb2a`. +Debe eliminar el `margin` de `.bb2a`. ```js assert.isEmpty(new __helpers.CSSHelp(document).getStyle(".bb2a")?.margin); ``` -You should remove the `border-top` from `.bb2a`. +Debe eliminar el `border-top` de `.bb2a`. ```js assert.isEmpty(new __helpers.CSSHelp(document).getStyle(".bb2a")?.borderTop); diff --git a/curriculum/challenges/espanol/14-responsive-web-design-22/learn-css-variables-by-building-a-city-skyline/5d822fd413a79914d39e9902.md b/curriculum/challenges/espanol/14-responsive-web-design-22/learn-css-variables-by-building-a-city-skyline/5d822fd413a79914d39e9902.md index c946f416e13..1b1d48fd503 100644 --- a/curriculum/challenges/espanol/14-responsive-web-design-22/learn-css-variables-by-building-a-city-skyline/5d822fd413a79914d39e9902.md +++ b/curriculum/challenges/espanol/14-responsive-web-design-22/learn-css-variables-by-building-a-city-skyline/5d822fd413a79914d39e9902.md @@ -7,23 +7,23 @@ dashedName: step-58 # --description-- -Finally, on the `border-bottom` property of `.bb2a`, change the `1vw` to `5vh` and change the `#000` color to your `--building-color2` variable. There you go, now it looks good! At any time throughout this project, you can comment out or remove the `border` property you added to everything at the beginning to see what the buildings will look like when that gets removed at the end. +Finalmente, en la propiedad `border-bottom` de `.bb2a`, cambie el `1vw` a `5vh` y cambie el color `#000` a su variable `--building-color2`. ¡Ahí lo tienes, ahora se ve bien! En cualquier momento a lo largo de este proyecto, puede comentar o eliminar la propiedad `border` que agregó a todo al principio para ver cómo se verán los edificios cuando se elimine al final. # --hints-- -You should change `border-bottom` to use `5vh`. +Debe cambiar `border-bottom` para usar `5vh`. ```js assert.include(new __helpers.CSSHelp(document).getStyle(".bb2a")?.borderBottom, "5vh"); ``` -You should change `border-bottom` to use `--building-color2`. +Debe cambiar `border-bottom` para usar `--building-color2`. ```js assert.include(new __helpers.CSSHelp(document).getStyle(".bb2a")?.borderBottom.trim(), "var(--building-color2)"); ``` -`border-bottom` should be `5vh solid var(--building-color2)`. +`border-bottom` debe ser `5vh solid var(--building-color2)`. ```js assert.equal(new __helpers.CSSHelp(document).getStyle(".bb2a")?.borderBottom.trim(), "5vh solid var(--building-color2)"); diff --git a/curriculum/challenges/espanol/14-responsive-web-design-22/learn-css-variables-by-building-a-city-skyline/5d822fd413a79914d39e9903.md b/curriculum/challenges/espanol/14-responsive-web-design-22/learn-css-variables-by-building-a-city-skyline/5d822fd413a79914d39e9903.md index 63e83c6fbb8..5d19e50854a 100644 --- a/curriculum/challenges/espanol/14-responsive-web-design-22/learn-css-variables-by-building-a-city-skyline/5d822fd413a79914d39e9903.md +++ b/curriculum/challenges/espanol/14-responsive-web-design-22/learn-css-variables-by-building-a-city-skyline/5d822fd413a79914d39e9903.md @@ -7,17 +7,17 @@ dashedName: step-59 # --description-- -On to the next building! Create a new variable called `--window-color3` in `:root` and give it a value of `#d98cb3`. This will be the secondary color for the pink buildings. +¡Vamos al siguiente edificio! Cree una nueva variable llamada `--window-color3` en `:root` y asígnele un valor de `#d98cb3`. Este será el color secundario para los edificios rosas. # --hints-- -You should define a new property variable `--window-color3`. +Debe definir una nueva variable de propiedad `--window-color3`. ```js assert(new __helpers.CSSHelp(document).isPropertyUsed("--window-color3")); ``` -You should give `--window-color3` a value of `#d98cb3`. +Debe dar a `--window-color3` un valor de `#d98cb3`. ```js assert.equal(new __helpers.CSSHelp(document).getStyle(":root")?.getPropertyValue("--window-color3")?.trim(), "#d98cb3"); diff --git a/curriculum/challenges/espanol/14-responsive-web-design-22/learn-css-variables-by-building-a-city-skyline/5d822fd413a79914d39e9904.md b/curriculum/challenges/espanol/14-responsive-web-design-22/learn-css-variables-by-building-a-city-skyline/5d822fd413a79914d39e9904.md index 5a6ad6d642d..a7184443198 100644 --- a/curriculum/challenges/espanol/14-responsive-web-design-22/learn-css-variables-by-building-a-city-skyline/5d822fd413a79914d39e9904.md +++ b/curriculum/challenges/espanol/14-responsive-web-design-22/learn-css-variables-by-building-a-city-skyline/5d822fd413a79914d39e9904.md @@ -7,7 +7,7 @@ dashedName: step-60 # --description-- -So far, all the gradients you created have gone from top to bottom, that's the default direction. You can specify another direction by adding it before your colors like this: +Hasta ahora, todos los degradados que creaste han ido de arriba a abajo, esa es la dirección predeterminada. Puede especificar otra dirección agregándola antes de sus colores de esta manera: ```css gradient-type( @@ -17,29 +17,29 @@ gradient-type( ); ``` -Fill in `.bb3` with a `repeating-linear-gradient`. Use `90deg` for the direction, your `building-color3` for the first two colors, and `window-color3` at `15%` for the third. When you don't specify a distance for a color, it will use the values that makes sense. In this case, the first two colors will default to `0%` and `7.5%` because it starts at `0%`, and `7.5%` is half of the `15%`. +Rellene `.bb3` con un `repeating-linear-gradient`. Use `90deg` para la dirección, su `building-color3` para los dos primeros colores, y `window-color3` en `15%` para el tercero. Cuando no especifique una distancia para un color, usará los valores que tengan sentido. En este caso, los primeros dos colores serán `0%` y `7.5%` porque comienzan en `0%` y `7.5%` es la mitad del `15%`. # --hints-- -You should give `.bb3` a `background` using `repeating-linear-gradient`. +Debe dar a `.bb3` un `background` usando `repeating-linear-gradient`. ```js assert.include(new __helpers.CSSHelp(document).getStyle(".bb3")?.background, "repeating-linear-gradient"); ``` -You should use `90deg` for the direction in the first argument of `repeating-linear-gradient`. +Debe usar `90deg` para la dirección en el primer argumento de `repeating-linear-gradient`. ```js assert.include(new __helpers.CSSHelp(document).getStyle(".bb3")?.getPropVal('background', true), "repeating-linear-gradient(90deg"); ``` -You should use `--building-color3` for the first two colors. +Debe usar `--building-color3` para los dos primeros colores. ```js assert.include(new __helpers.CSSHelp(document).getStyle(".bb3")?.getPropVal('background', true), "repeating-linear-gradient(90deg,var(--building-color3),var(--building-color3)"); ``` -You should use `--window-color3` at `15%` for the third color. +Debe usar `--window-color3` en `15%` para el tercer color. ```js assert.equal(new __helpers.CSSHelp(document).getStyle(".bb3")?.getPropVal('background', true), "repeating-linear-gradient(90deg,var(--building-color3),var(--building-color3),var(--window-color3)15%)"); diff --git a/curriculum/challenges/espanol/14-responsive-web-design-22/learn-css-variables-by-building-a-city-skyline/5d822fd413a79914d39e9905.md b/curriculum/challenges/espanol/14-responsive-web-design-22/learn-css-variables-by-building-a-city-skyline/5d822fd413a79914d39e9905.md index 99e7a97b756..80580bef805 100644 --- a/curriculum/challenges/espanol/14-responsive-web-design-22/learn-css-variables-by-building-a-city-skyline/5d822fd413a79914d39e9905.md +++ b/curriculum/challenges/espanol/14-responsive-web-design-22/learn-css-variables-by-building-a-city-skyline/5d822fd413a79914d39e9905.md @@ -7,11 +7,11 @@ dashedName: step-61 # --description-- -Remove the `background-color` property and value from `.bb3` since you are using the gradient as the background now. +Quite la propiedad y el valor `background-color` de `.bb3` ya que ahora está utilizando el degradado como fondo. # --hints-- -You should remove the `background-color` from `.bb3`. +Debe eliminar el `background-color` de `.bb3`. ```js assert.notMatch(code, /\.bb3\s*\{\s*[^}]*?background-color[^}]*?\}/); diff --git a/curriculum/challenges/espanol/14-responsive-web-design-22/learn-css-variables-by-building-a-city-skyline/5d822fd413a79914d39e9906.md b/curriculum/challenges/espanol/14-responsive-web-design-22/learn-css-variables-by-building-a-city-skyline/5d822fd413a79914d39e9906.md index 44e3351d879..151a5c8392a 100644 --- a/curriculum/challenges/espanol/14-responsive-web-design-22/learn-css-variables-by-building-a-city-skyline/5d822fd413a79914d39e9906.md +++ b/curriculum/challenges/espanol/14-responsive-web-design-22/learn-css-variables-by-building-a-city-skyline/5d822fd413a79914d39e9906.md @@ -7,35 +7,35 @@ dashedName: step-62 # --description-- -The next building will have three sections. Nest three `div` elements within `.bb4`. Give them the classes of `bb4a`, `bb4b` and `bb4c` in that order. +El próximo edificio tendrá tres secciones. Anida tres elementos `div` dentro de `.bb4`. Dales las clases de `bb4a`, `bb4b` y `bb4c` en ese orden. # --hints-- -You should add three `div` elements within `.bb4`. +Debe agregar tres elementos `div` dentro de `.bb4`. ```js assert.equal(document.querySelector("div.bb4")?.children?.length, 3); ``` -You should give the first new `div` a class of `bb4a`. +Debe dar al primer `div` una clase de `bb4a`. ```js assert.exists(document.querySelector("div.bb4 > div.bb4a")); ``` -You should give the second new `div` a class of `bb4b`. +Debe asignar al segundo nuevo `div` una clase de `bb4b`. ```js assert.exists(document.querySelector("div.bb4 > div.bb4a")); ``` -You should give the third new `div` a class of `bb4c`. +Debe dar al tercer nuevo `div` una clase de `bb4c`. ```js assert.exists(document.querySelector("div.bb4 > div.bb4a")); ``` -You should place the new `div` elements in this order `.bb4a + .bb4b + .bb4c`. +Debe colocar los nuevos elementos `div` en este orden `.bb4a + .bb4b + .bb4c`. ```js assert.exists(document.querySelector("div.bb4a + div.bb4b")); diff --git a/curriculum/challenges/espanol/14-responsive-web-design-22/learn-css-variables-by-building-a-city-skyline/5d822fd413a79914d39e9907.md b/curriculum/challenges/espanol/14-responsive-web-design-22/learn-css-variables-by-building-a-city-skyline/5d822fd413a79914d39e9907.md index 2dbc0d0404c..39461a775d2 100644 --- a/curriculum/challenges/espanol/14-responsive-web-design-22/learn-css-variables-by-building-a-city-skyline/5d822fd413a79914d39e9907.md +++ b/curriculum/challenges/espanol/14-responsive-web-design-22/learn-css-variables-by-building-a-city-skyline/5d822fd413a79914d39e9907.md @@ -7,41 +7,41 @@ dashedName: step-63 # --description-- -Give the new `div` elements these `width` and `height` values: `3%` and `10%` to `.bb4a`, `80%` and `5%` to `.bb4b`, and `100%` and `85%` to `.bb4c`. +Asigne a los nuevos elementos `div` estos valores `width` y `height`: `3%` y `10%` a `.bb4a`, `80%` y `5%` a `.bb4b`, y `100%` y `85%` a `.bb4c`. # --hints-- -You should give `.bb4a` a `width` of `3%`. +Debe dar a `.bb4a` un `width` de `3%`. ```js assert.equal(new __helpers.CSSHelp(document).getStyle(".bb4a")?.width, "3%"); ``` -You should give `.bb4a` a `height` of `10%`. +Debe dar a `.bb4a` un `height` de `10%`. ```js assert.equal(new __helpers.CSSHelp(document).getStyle(".bb4a")?.height, "10%"); ``` -You should give `.bb4b` a `width` of `80%`. +Debe dar a `.bb4b` un `width` de `80%`. ```js assert.equal(new __helpers.CSSHelp(document).getStyle(".bb4b")?.width, "80%"); ``` -You should give `.bb4b` a `height` of `5%`. +Debe dar a `.bb4b` un `height` de `5%`. ```js assert.equal(new __helpers.CSSHelp(document).getStyle(".bb4b")?.height, "5%"); ``` -You should give `.bb4c` a `width` of `100%`. +Debe dar a `.bb4c` un `width` de `100%`. ```js assert.equal(new __helpers.CSSHelp(document).getStyle(".bb4c")?.width, "100%"); ``` -You should give `.bb4c` a `height` of `85%`. +Debe dar a `.bb4c` un `height` de `85%`. ```js assert.equal(new __helpers.CSSHelp(document).getStyle(".bb4c")?.height, "85%"); diff --git a/curriculum/challenges/espanol/14-responsive-web-design-22/learn-css-variables-by-building-a-city-skyline/5d822fd413a79914d39e9908.md b/curriculum/challenges/espanol/14-responsive-web-design-22/learn-css-variables-by-building-a-city-skyline/5d822fd413a79914d39e9908.md index c031b6e0163..0ed5a49f509 100644 --- a/curriculum/challenges/espanol/14-responsive-web-design-22/learn-css-variables-by-building-a-city-skyline/5d822fd413a79914d39e9908.md +++ b/curriculum/challenges/espanol/14-responsive-web-design-22/learn-css-variables-by-building-a-city-skyline/5d822fd413a79914d39e9908.md @@ -7,29 +7,29 @@ dashedName: step-64 # --description-- -Remove the `background-color` property and value from `.bb4`, and add it to the three new sections `.bb4a`, `.bb4b`, and `.bb4c`, so only the sections are filled. +Elimine la propiedad y el valor `background-color` de `.bb4` y agréguelo a las tres nuevas secciones `.bb4a`, `.bb4b` y `.bb4c`, de modo que solo se rellenen las secciones. # --hints-- -You should remove the `background-color` from `.bb4`. +Debe eliminar el `background-color` de `.bb4`. ```js assert.isEmpty(new __helpers.CSSHelp(document).getStyle(".bb4")?.backgroundColor); ``` -You should give `.bb4a` a `background-color` of `--building-color4`. +Debe dar a `.bb4a` un `background-color` de `--building-color4`. ```js assert.equal(new __helpers.CSSHelp(document).getStyle(".bb4a")?.backgroundColor.trim(), "var(--building-color4)"); ``` -You should give `.bb4b` a `background-color` of `--building-color4`. +Debe dar a `.bb4b` un `background-color` de `--building-color4`. ```js assert.equal(new __helpers.CSSHelp(document).getStyle(".bb4b")?.backgroundColor.trim(), "var(--building-color4)"); ``` -You should give `.bb4c` a `background-color` of `--building-color4`. +Debe dar a `.bb4c` un `background-color` de `--building-color4`. ```js assert.equal(new __helpers.CSSHelp(document).getStyle(".bb4c")?.backgroundColor.trim(), "var(--building-color4)"); diff --git a/curriculum/challenges/espanol/14-responsive-web-design-22/learn-css-variables-by-building-a-city-skyline/5d822fd413a79914d39e9909.md b/curriculum/challenges/espanol/14-responsive-web-design-22/learn-css-variables-by-building-a-city-skyline/5d822fd413a79914d39e9909.md index 4cf01daa0fb..606aec26f43 100644 --- a/curriculum/challenges/espanol/14-responsive-web-design-22/learn-css-variables-by-building-a-city-skyline/5d822fd413a79914d39e9909.md +++ b/curriculum/challenges/espanol/14-responsive-web-design-22/learn-css-variables-by-building-a-city-skyline/5d822fd413a79914d39e9909.md @@ -7,11 +7,11 @@ dashedName: step-65 # --description-- -You want `.bb4` to share the properties of `.bb1` that center the sections. Instead of duplicating that code, create a new class above the background building comment called `building-wrap`. Leave it empty for now; this class will be used in a few places to save you some coding. +Desea que `.bb4` comparta las propiedades de `.bb1` que centran las secciones. En lugar de duplicar ese código, cree una nueva clase encima del comentario de creación en segundo plano llamado `building-wrap`. Déjalo vacío por ahora; Esta clase se usará en algunos lugares para ahorrarle algo de codificación. # --hints-- -You should create a new class declaration called `building-wrap`. +Debe crear una nueva declaración de clase denominada `building-wrap`. ```js assert.exists(new __helpers.CSSHelp(document).getStyle(".building-wrap")); diff --git a/curriculum/challenges/espanol/14-responsive-web-design-22/learn-css-variables-by-building-a-city-skyline/5d822fd413a79914d39e990a.md b/curriculum/challenges/espanol/14-responsive-web-design-22/learn-css-variables-by-building-a-city-skyline/5d822fd413a79914d39e990a.md index c7c9206208e..a1d5e18fc42 100644 --- a/curriculum/challenges/espanol/14-responsive-web-design-22/learn-css-variables-by-building-a-city-skyline/5d822fd413a79914d39e990a.md +++ b/curriculum/challenges/espanol/14-responsive-web-design-22/learn-css-variables-by-building-a-city-skyline/5d822fd413a79914d39e990a.md @@ -7,41 +7,41 @@ dashedName: step-66 # --description-- -Move the `display`, `flex-direction`, and `align-items` properties and values from `.bb1` to the new `building-wrap` class. +Mueva las propiedades y valores `display`, `flex-direction` y `align-items` de `.bb1` a la nueva clase `building-wrap`. # --hints-- -You should remove `display` from `.bb1`. +Debe eliminar `display` de `.bb1`. ```js assert.isEmpty(new __helpers.CSSHelp(document).getStyle(".bb1")?.display); ``` -You should move `display` with a value of `flex` to `.building-wrap`. +Debe mover `display` con un valor de `flex` a `.building-wrap`. ```js assert.equal(new __helpers.CSSHelp(document).getStyle(".building-wrap")?.display, "flex"); ``` -You should remove `flex-direction` from `.bb1`. +Debe eliminar `flex-direction` de `.bb1`. ```js assert.isEmpty(new __helpers.CSSHelp(document).getStyle(".bb1")?.flexDirection); ``` -You should move `flex-direction` with a value of `column` to `.building-wrap`. +Debe mover `flex-direction` con un valor de `column` a `.building-wrap`. ```js assert.equal(new __helpers.CSSHelp(document).getStyle(".building-wrap")?.flexDirection, "column"); ``` -You should remove `align-items` from `.bb1`. +Debe eliminar `align-items` de `.bb1`. ```js assert.isEmpty(new __helpers.CSSHelp(document).getStyle(".bb1")?.alignItems); ``` -You should move `align-items` with a value of `center` to `.building-wrap`. +Debe mover `align-items` con un valor de `center` a `.building-wrap`. ```js assert.equal(new __helpers.CSSHelp(document).getStyle(".building-wrap")?.alignItems, "center"); diff --git a/curriculum/challenges/espanol/14-responsive-web-design-22/learn-css-variables-by-building-a-city-skyline/5d822fd413a79914d39e990b.md b/curriculum/challenges/espanol/14-responsive-web-design-22/learn-css-variables-by-building-a-city-skyline/5d822fd413a79914d39e990b.md index e7c97d165ea..c6aeb9c3090 100644 --- a/curriculum/challenges/espanol/14-responsive-web-design-22/learn-css-variables-by-building-a-city-skyline/5d822fd413a79914d39e990b.md +++ b/curriculum/challenges/espanol/14-responsive-web-design-22/learn-css-variables-by-building-a-city-skyline/5d822fd413a79914d39e990b.md @@ -7,17 +7,17 @@ dashedName: step-67 # --description-- -Add the new `building-wrap` class to the `.bb1` and `.bb4` elements. This will apply the centering properties to the buildings that need it. +Agregue la nueva clase `building-wrap` a los elementos `.bb1` y `.bb4`. Esto aplicará las propiedades de centrado a los edificios que lo necesiten. # --hints-- -You should add `building-wrap` to the `.bb1` element. +Debe agregar `building-wrap` al elemento `.bb1`. ```js assert.exists(document.querySelector("div.bb1.building-wrap")); ``` -You should add `building-wrap` to the `.bb4` element. +Debe agregar `building-wrap` al elemento `.bb4`. ```js assert.exists(document.querySelector("div.bb4.building-wrap")); diff --git a/curriculum/challenges/espanol/14-responsive-web-design-22/learn-css-variables-by-building-a-city-skyline/5d822fd413a79914d39e990c.md b/curriculum/challenges/espanol/14-responsive-web-design-22/learn-css-variables-by-building-a-city-skyline/5d822fd413a79914d39e990c.md index 3ebe1b8d1a7..f5ea247677c 100644 --- a/curriculum/challenges/espanol/14-responsive-web-design-22/learn-css-variables-by-building-a-city-skyline/5d822fd413a79914d39e990c.md +++ b/curriculum/challenges/espanol/14-responsive-web-design-22/learn-css-variables-by-building-a-city-skyline/5d822fd413a79914d39e990c.md @@ -7,17 +7,17 @@ dashedName: step-68 # --description-- -Create a new variable called `--window-color4` in `:root` and give it a value of `#8cb3d9`. This will be the secondary color for the last background building. +Cree una nueva variable llamada `--window-color4` en `:root` y asígnele un valor de `#8cb3d9`. Este será el color secundario para el último edificio de fondo. # --hints-- -You should define a new property variable `--window-color4`. +Debe definir una nueva variable de propiedad `--window-color4`. ```js assert(new __helpers.CSSHelp(document).isPropertyUsed("--window-color4")); ``` -You should give `--window-color4` a value of `#8cb3d9`. +Debe darle a `--window-color4` un valor de `#8cb3d9`. ```js assert.equal(new __helpers.CSSHelp(document).getStyle(":root")?.getPropertyValue("--window-color4")?.trim(), "#8cb3d9"); diff --git a/curriculum/challenges/espanol/14-responsive-web-design-22/learn-css-variables-by-building-a-city-skyline/5d822fd413a79914d39e990d.md b/curriculum/challenges/espanol/14-responsive-web-design-22/learn-css-variables-by-building-a-city-skyline/5d822fd413a79914d39e990d.md index 8abab436c1c..7902898a226 100644 --- a/curriculum/challenges/espanol/14-responsive-web-design-22/learn-css-variables-by-building-a-city-skyline/5d822fd413a79914d39e990d.md +++ b/curriculum/challenges/espanol/14-responsive-web-design-22/learn-css-variables-by-building-a-city-skyline/5d822fd413a79914d39e990d.md @@ -7,17 +7,17 @@ dashedName: step-69 # --description-- -Nest four new `div` elements within `.bb4c`, give them all the class of `bb4-window`. These will be windows for this building. +Anida cuatro nuevos elementos `div` dentro de `.bb4c`, dales toda la clase de `bb4-window`. Estas serán las ventanas de este edificio. # --hints-- -You should add four `div` elements to `.bb4c`. +Debe agregar cuatro elementos `div` a `.bb4c`. ```js assert.equal(document.querySelector(".bb4c")?.children?.length, 4); ``` -You should give each new `div` a class of `bb4-window`. +Debe dar a cada nuevo `div` una clase de `bb4-window`. ```js assert.equal(document.querySelectorAll("div.bb4c > div.bb4-window")?.length, 4); diff --git a/curriculum/challenges/espanol/14-responsive-web-design-22/learn-css-variables-by-building-a-city-skyline/5d822fd413a79914d39e990e.md b/curriculum/challenges/espanol/14-responsive-web-design-22/learn-css-variables-by-building-a-city-skyline/5d822fd413a79914d39e990e.md index cc9ac6869c6..fb4be5b2995 100644 --- a/curriculum/challenges/espanol/14-responsive-web-design-22/learn-css-variables-by-building-a-city-skyline/5d822fd413a79914d39e990e.md +++ b/curriculum/challenges/espanol/14-responsive-web-design-22/learn-css-variables-by-building-a-city-skyline/5d822fd413a79914d39e990e.md @@ -7,23 +7,23 @@ dashedName: step-70 # --description-- -Give the `bb4-window` class a `width` of `18%`, a `height` of `90%`, and add your `--window-color4` variable as the `background-color`. +Dale a la clase `bb4-window` un `width` de `18%`, un `height` de `90%`, y agrega tu variable `--window-color4` como el `background-color`. # --hints-- -You should give `.bb4-window` a `width` of `18%`. +Debe darle a `.bb4-window` un `width` de `18%`. ```js assert.equal(new __helpers.CSSHelp(document).getStyle(".bb4-window")?.width, "18%"); ``` -You should give `.bb4-window` a `height` of `90%`. +Debe dar a `.bb4-window` un `height` de `90%`. ```js assert.equal(new __helpers.CSSHelp(document).getStyle(".bb4-window")?.height, "90%"); ``` -You should give `.bb4-window` a `background-color` of `--window-color4`. +Debe dar a `.bb4-window` un `background-color` de `--window-color4`. ```js assert.equal(new __helpers.CSSHelp(document).getStyle(".bb4-window")?.backgroundColor.trim(), "var(--window-color4)"); diff --git a/curriculum/challenges/espanol/14-responsive-web-design-22/learn-css-variables-by-building-a-city-skyline/5d822fd413a79914d39e990f.md b/curriculum/challenges/espanol/14-responsive-web-design-22/learn-css-variables-by-building-a-city-skyline/5d822fd413a79914d39e990f.md index 326ca9937d7..52e92044829 100644 --- a/curriculum/challenges/espanol/14-responsive-web-design-22/learn-css-variables-by-building-a-city-skyline/5d822fd413a79914d39e990f.md +++ b/curriculum/challenges/espanol/14-responsive-web-design-22/learn-css-variables-by-building-a-city-skyline/5d822fd413a79914d39e990f.md @@ -8,29 +8,29 @@ dashedName: step-71 # --description-- -The windows are stacked on top of each other at the left of the section, behind the purple building. Add a new class below `.building-wrap` called `window-wrap`. Make `.window-wrap` a flexbox container, and use the `align-items` and `justify-content` properties to center its child elements vertically and evenly space them in their parent, respectively. +Las ventanas están apiladas una encima de la otra a la izquierda de la sección, detrás del edificio púrpura. Agregue una nueva clase debajo de `.building-wrap` llamada `window-wrap`. Convierta `.window-wrap` en un contenedor flexbox y use las propiedades `align-items` y `justify-content` para centrar sus elementos secundarios verticalmente y espaciarlos uniformemente en su elemento primario, respectivamente. # --hints-- -You should create a `.window-wrap` selector. +Debe crear un selector `.window-wrap`. ```js assert.exists(new __helpers.CSSHelp(document).getStyle(".window-wrap")); ``` -You should give `.window-wrap` a `display` of `flex`. +Deberías darle a `.window-wrap` una `display` de `flex`. ```js assert.equal(new __helpers.CSSHelp(document).getStyle(".window-wrap")?.display, "flex"); ``` -You should give `.window-wrap` an `align-items` of `center`. +Debes darle a `.window-wrap` un `align-items` de `center`. ```js assert.equal(new __helpers.CSSHelp(document).getStyle(".window-wrap")?.alignItems, "center"); ``` -You should give `.window-wrap` a `justify-content` of `space-evenly`. +Debes darle a `.window-wrap` un `justify-content` de `space-evenly`. ```js assert.equal(new __helpers.CSSHelp(document).getStyle(".window-wrap")?.justifyContent, "space-evenly"); diff --git a/curriculum/challenges/espanol/14-responsive-web-design-22/learn-css-variables-by-building-a-city-skyline/5d822fd413a79914d39e9910.md b/curriculum/challenges/espanol/14-responsive-web-design-22/learn-css-variables-by-building-a-city-skyline/5d822fd413a79914d39e9910.md index d95913e77e0..f03473da782 100644 --- a/curriculum/challenges/espanol/14-responsive-web-design-22/learn-css-variables-by-building-a-city-skyline/5d822fd413a79914d39e9910.md +++ b/curriculum/challenges/espanol/14-responsive-web-design-22/learn-css-variables-by-building-a-city-skyline/5d822fd413a79914d39e9910.md @@ -7,11 +7,11 @@ dashedName: step-72 # --description-- -Add the new `window-wrap` class to the `.bb4c` element. +Agregue la nueva clase `window-wrap` al elemento `.bb4c`. # --hints-- -You should add a class of `window-wrap` to `.bb4c`. +Debe agregar una clase de `window-wrap` a `.bb4c`. ```js assert.exists(document.querySelector("div.bb4c.window-wrap")); diff --git a/curriculum/challenges/espanol/14-responsive-web-design-22/learn-css-variables-by-building-a-city-skyline/5d822fd413a79914d39e9911.md b/curriculum/challenges/espanol/14-responsive-web-design-22/learn-css-variables-by-building-a-city-skyline/5d822fd413a79914d39e9911.md index bfdb567fdaa..c9b678e834e 100644 --- a/curriculum/challenges/espanol/14-responsive-web-design-22/learn-css-variables-by-building-a-city-skyline/5d822fd413a79914d39e9911.md +++ b/curriculum/challenges/espanol/14-responsive-web-design-22/learn-css-variables-by-building-a-city-skyline/5d822fd413a79914d39e9911.md @@ -7,35 +7,35 @@ dashedName: step-73 # --description-- -Looks good! On to the foreground buildings! Turn the `.fb1` building into three sections by nesting three new `div` elements within it. Give them the classes of `fb1a`, `fb1b` and `fb1c`, in that order. +¡Se ve bien! ¡A los edificios en primer plano! Convierta el edificio `.fb1` en tres secciones anidando tres nuevos elementos `div` dentro de él. Dales las clases de `fb1a`, `fb1b` y `fb1c`, en ese orden. # --hints-- -You should add three `div` elements within `.fb1`. +Debe agregar tres elementos `div` dentro de `.fb1`. ```js assert.equal(document.querySelector("div.fb1")?.children?.length, 3); ``` -You should give the first new `div` a class of `fb1a`. +Debe asignar al primer `div` una clase de `fb1a`. ```js assert.exists(document.querySelector("div.fb1 > div.fb1a")); ``` -You should give the second new `div` a class of `fb1b`. +Debe asignar al segundo nuevo `div` una clase de `fb1b`. ```js assert.exists(document.querySelector("div.fb1 > div.fb1b")); ``` -You should give the third new `div` a class of `fb1c`. +Debe asignar al tercer nuevo `div` una clase de `fb1c`. ```js assert.exists(document.querySelector("div.fb1 > div.fb1c")); ``` -You should place the new `div` elements in this order `.fb1a + .fb1b + .fb1c`. +Debe colocar los nuevos elementos `div` en este orden `.fb1a + .fb1b + .fb1c`. ```js assert.exists(document.querySelector("div.fb1a + div.fb1b")); diff --git a/curriculum/challenges/espanol/14-responsive-web-design-22/learn-css-variables-by-building-a-city-skyline/5d822fd413a79914d39e9912.md b/curriculum/challenges/espanol/14-responsive-web-design-22/learn-css-variables-by-building-a-city-skyline/5d822fd413a79914d39e9912.md index 26596f311a4..8e328ffc41b 100644 --- a/curriculum/challenges/espanol/14-responsive-web-design-22/learn-css-variables-by-building-a-city-skyline/5d822fd413a79914d39e9912.md +++ b/curriculum/challenges/espanol/14-responsive-web-design-22/learn-css-variables-by-building-a-city-skyline/5d822fd413a79914d39e9912.md @@ -7,29 +7,29 @@ dashedName: step-74 # --description-- -Give `.fb1b` a `width` of `60%` and `height` of `10%`, and `.fb1c` a `width` of `100%` and `height` of `80%`. +Proporcione a `.fb1b` un `width` de `60%` y `height` de `10%` y `.fb1c` un `width` de `100%` y `height` de `80%`. # --hints-- -You should give `.fb1b` a `width` of `60%`. +Debe asignar a `.fb1b` un `width` de `60%`. ```js assert.equal(new __helpers.CSSHelp(document).getStyle(".fb1b")?.width, "60%"); ``` -You should give `.fb1b` a `height` of `10%`. +Debe dar a `.fb1b` un `height` de `10%`. ```js assert.equal(new __helpers.CSSHelp(document).getStyle(".fb1b")?.height, "10%"); ``` -You should give `.fb1c` a `width` of `100%`. +Debe dar a `.fb1c` un `width` de `100%`. ```js assert.equal(new __helpers.CSSHelp(document).getStyle(".fb1c")?.width, "100%"); ``` -You should give `.fb1c` a `height` of `80%`. +Debe dar a `.fb1c` un `height` de `80%`. ```js assert.equal(new __helpers.CSSHelp(document).getStyle(".fb1c")?.height, "80%"); diff --git a/curriculum/challenges/espanol/14-responsive-web-design-22/learn-css-variables-by-building-a-city-skyline/5d822fd413a79914d39e9913.md b/curriculum/challenges/espanol/14-responsive-web-design-22/learn-css-variables-by-building-a-city-skyline/5d822fd413a79914d39e9913.md index 112ed8e7e8b..1ddc02774bb 100644 --- a/curriculum/challenges/espanol/14-responsive-web-design-22/learn-css-variables-by-building-a-city-skyline/5d822fd413a79914d39e9913.md +++ b/curriculum/challenges/espanol/14-responsive-web-design-22/learn-css-variables-by-building-a-city-skyline/5d822fd413a79914d39e9913.md @@ -7,11 +7,11 @@ dashedName: step-75 # --description-- -Add the `building-wrap` class to the `.fb1` element to center the sections. +Agregue la clase `building-wrap` al elemento `.fb1` para centrar las secciones. # --hints-- -You should add the class `building-wrap` to `.fb1`. +Debe agregar la clase `building-wrap` a `.fb1`. ```js assert.exists(document.querySelector("div.fb1.building-wrap")); diff --git a/curriculum/challenges/espanol/14-responsive-web-design-22/learn-css-variables-by-building-a-city-skyline/5d822fd413a79914d39e9914.md b/curriculum/challenges/espanol/14-responsive-web-design-22/learn-css-variables-by-building-a-city-skyline/5d822fd413a79914d39e9914.md index 0022948d44b..d4ecec3650f 100644 --- a/curriculum/challenges/espanol/14-responsive-web-design-22/learn-css-variables-by-building-a-city-skyline/5d822fd413a79914d39e9914.md +++ b/curriculum/challenges/espanol/14-responsive-web-design-22/learn-css-variables-by-building-a-city-skyline/5d822fd413a79914d39e9914.md @@ -7,17 +7,17 @@ dashedName: step-76 # --description-- -Move the `background-color` property and value from `.fb1` to `.fb1b`. +Mueva la propiedad y el valor `background-color` de `.fb1` a `.fb1b`. # --hints-- -You should remove `background-color` from `.fb1`. +Debe eliminar `background-color` de `.fb1`. ```js assert.isEmpty(new __helpers.CSSHelp(document).getStyle(".fb1")?.backgroundColor); ``` -You should add a `background-color` of `--building-color4` to `.fb1b`. +Debe agregar un `background-color` de `--building-color4` a `.fb1b`. ```js assert.equal(new __helpers.CSSHelp(document).getStyle(".fb1b")?.backgroundColor.trim(), "var(--building-color4)"); diff --git a/curriculum/challenges/espanol/14-responsive-web-design-22/learn-css-variables-by-building-a-city-skyline/5d822fd413a79914d39e9915.md b/curriculum/challenges/espanol/14-responsive-web-design-22/learn-css-variables-by-building-a-city-skyline/5d822fd413a79914d39e9915.md index 918d8e4ec34..8bf3b86e63b 100644 --- a/curriculum/challenges/espanol/14-responsive-web-design-22/learn-css-variables-by-building-a-city-skyline/5d822fd413a79914d39e9915.md +++ b/curriculum/challenges/espanol/14-responsive-web-design-22/learn-css-variables-by-building-a-city-skyline/5d822fd413a79914d39e9915.md @@ -7,11 +7,11 @@ dashedName: step-106 # --description-- -You don't need the `background-color` for this building anymore so you can remove that property. +Ya no necesita el `background-color` para este edificio, por lo que puede eliminar esa propiedad. # --hints-- -You should remove the `background-color` of `.fb5`. +Debe eliminar el `background-color` de `.fb5`. ```js assert.notMatch(code, /\.fb5\s*\{\s*[^}]*?background-color[^}]*?\}/); diff --git a/curriculum/challenges/espanol/14-responsive-web-design-22/learn-css-variables-by-building-a-city-skyline/5d822fd413a79914d39e9916.md b/curriculum/challenges/espanol/14-responsive-web-design-22/learn-css-variables-by-building-a-city-skyline/5d822fd413a79914d39e9916.md index 0f33c0e5bb6..4e4c14a0fad 100644 --- a/curriculum/challenges/espanol/14-responsive-web-design-22/learn-css-variables-by-building-a-city-skyline/5d822fd413a79914d39e9916.md +++ b/curriculum/challenges/espanol/14-responsive-web-design-22/learn-css-variables-by-building-a-city-skyline/5d822fd413a79914d39e9916.md @@ -7,31 +7,31 @@ dashedName: step-77 # --description-- -Don't worry about the space at the bottom, everything will get moved down later when you add some height to the element at the top of the building. +No se preocupe por el espacio en la parte inferior, todo se moverá hacia abajo más tarde cuando agregue algo de altura al elemento en la parte superior del edificio. -Add a `repeating-linear-gradient` to `.fb1c` with a `90deg` angle, your `--building-color4` from `0%` to `10%` and `transparent` from `10%` to `15%`. +Agregue un `repeating-linear-gradient` a `.fb1c` con un ángulo `90deg`, su `--building-color4` de `0%` a `10%` y `transparent` de `10%` a `15%`. # --hints-- -You should give `.fb1c` a `background` with a `repeating-linear-gradient`. +Debe dar a `.fb1c` un `background` con un `repeating-linear-gradient`. ```js assert.include(new __helpers.CSSHelp(document).getStyle(".fb1c")?.background, "repeating-linear-gradient"); ``` -You should use a direction of `90deg`. +Debe usar una dirección de `90deg`. ```js assert.include(new __helpers.CSSHelp(document).getStyle(".fb1c")?.getPropVal('background', true), "repeating-linear-gradient(90deg"); ``` -You should use a first color of `--building-color4` from `0%` to `10%`. +Debe usar un primer color de `--building-color4` de `0%` a `10%`. ```js assert.match(new __helpers.CSSHelp(document).getStyle(".fb1c")?.getPropVal('background', true), /repeating-linear-gradient\(90deg,var(\(--building-color4\)(0%)?,var\(--building-color4\)10%|\(--building-color4\)0%10%)/); ``` -You should use a second color of `transparent` from `10%` to `15%`. +Debe usar un segundo color de `transparent` de `10%` a `15%`. ```js assert.match(new __helpers.CSSHelp(document).getStyle(".fb1c")?.getPropVal('background', true), /,(transparent10%,transparent15%\)|transparent10%15%\))$/); diff --git a/curriculum/challenges/espanol/14-responsive-web-design-22/learn-css-variables-by-building-a-city-skyline/5d822fd413a79914d39e9917.md b/curriculum/challenges/espanol/14-responsive-web-design-22/learn-css-variables-by-building-a-city-skyline/5d822fd413a79914d39e9917.md index deeb7700b5f..b12e220703d 100644 --- a/curriculum/challenges/espanol/14-responsive-web-design-22/learn-css-variables-by-building-a-city-skyline/5d822fd413a79914d39e9917.md +++ b/curriculum/challenges/espanol/14-responsive-web-design-22/learn-css-variables-by-building-a-city-skyline/5d822fd413a79914d39e9917.md @@ -7,7 +7,7 @@ dashedName: step-78 # --description-- -You can add multiple gradients to an element by separating them with a comma (`,`) like this: +Puede agregar varios degradados a un elemento separándolos con una coma (`,`) como esta: ```css gradient1( @@ -18,23 +18,23 @@ gradient2( ); ``` -Add a `repeating-linear-gradient` to `.fb1c` below the one that's there; use your `--building-color4` from `0%` to `10%` and `--window-color4` from `10%` and `90%`. This will fill in behind the gradient you added last. +Agregue un `repeating-linear-gradient` a `.fb1c` debajo del que está allí; Use su `--building-color4` de `0%` a `10%` y `--window-color4` de `10%` y `90%`. Esto se completará detrás del degradado que agregó en último lugar. # --hints-- -You should not alter the first `repeating-linear-gradient`. +No debe alterar el primer `repeating-linear-gradient`. ```js assert.match(new __helpers.CSSHelp(document).getStyle(".fb1c")?.getPropVal('background', true), /repeating-linear-gradient\(90deg,var\(--building-color4\)(0%)?,var\(--building-color4\)10%,transparent10%,transparent15%\)/); ``` -You should add a `repeating-linear-gradient` with a first color of `--building-color4` from `0%` to `10%`. +Debe agregar un `repeating-linear-gradient` con un primer color de `--building-color4` de `0%` a `10%`. ```js assert.match(new __helpers.CSSHelp(document).getStyle(".fb1c")?.getPropVal('background', true), /repeating-linear-gradient\(90deg,var\(--building-color4\)(0%)?,var\(--building-color4\)10%,transparent10%,transparent15%\),repeating-linear-gradient\(var(\(--building-color4\)(0%)?,var\(--building-color4\)10%|\(--building-color4\)0%10%)/); ``` -You should use a second color of `--window-color4` from `10%` to `90%`. +Debe usar un segundo color de `--window-color4` de `10%` a `90%`. ```js assert.match(new __helpers.CSSHelp(document).getStyle(".fb1c")?.getPropVal('background', true), /,(var\(--window-color4\)10%,var\(--window-color4\)90%\)|var\(--window-color4\)10%90%\))$/); diff --git a/curriculum/challenges/espanol/14-responsive-web-design-22/learn-css-variables-by-building-a-city-skyline/5d822fd413a79914d39e9918.md b/curriculum/challenges/espanol/14-responsive-web-design-22/learn-css-variables-by-building-a-city-skyline/5d822fd413a79914d39e9918.md index d4ee2889b29..ce30bbe038e 100644 --- a/curriculum/challenges/espanol/14-responsive-web-design-22/learn-css-variables-by-building-a-city-skyline/5d822fd413a79914d39e9918.md +++ b/curriculum/challenges/espanol/14-responsive-web-design-22/learn-css-variables-by-building-a-city-skyline/5d822fd413a79914d39e9918.md @@ -7,17 +7,17 @@ dashedName: step-79 # --description-- -You're going to use some more border tricks for the top section. Add a `border-bottom` with a value of `7vh solid var(--building-color4)` to `.fb1a`. This will put a `7vh` height border on the bottom. But since the element has zero size, it only shows up as a 2px wide line from the 1px border that is on all the elements. +Vas a usar algunos trucos de borde más para la sección superior. Agregue un `border-bottom` con un valor de `7vh solid var(--building-color4)` a `.fb1a`. Esto pondrá un borde de altura `7vh` en la parte inferior. Pero como el elemento tiene tamaño cero, solo aparece como una línea de 2px de ancho desde el borde de 1px que está en todos los elementos. # --hints-- -You should give `.fb1a` a `border-bottom`. +Debe dar a `.fb1a` un `border-bottom`. ```js assert.isNotEmpty(new __helpers.CSSHelp(document).getStyle(".fb1a")?.borderBottom); ``` -You should use a `border-bottom` of `7vh solid var(--building-color4)`. +Debe usar un `border-bottom` de `7vh solid var(--building-color4)`. ```js assert.equal(new __helpers.CSSHelp(document).getStyle(".fb1a")?.borderBottom.trim(), "7vh solid var(--building-color4)"); diff --git a/curriculum/challenges/espanol/14-responsive-web-design-22/learn-css-variables-by-building-a-city-skyline/5d822fd413a79914d39e9919.md b/curriculum/challenges/espanol/14-responsive-web-design-22/learn-css-variables-by-building-a-city-skyline/5d822fd413a79914d39e9919.md index b1b76c420e5..47fe96a8baa 100644 --- a/curriculum/challenges/espanol/14-responsive-web-design-22/learn-css-variables-by-building-a-city-skyline/5d822fd413a79914d39e9919.md +++ b/curriculum/challenges/espanol/14-responsive-web-design-22/learn-css-variables-by-building-a-city-skyline/5d822fd413a79914d39e9919.md @@ -7,17 +7,17 @@ dashedName: step-80 # --description-- -When you increase the size of the left and right borders, the border on the bottom will expand to be the width of the combined left and right border widths. Add `2vw solid transparent` as the value of the `border-left` and `border-right` properties of `.fb1a`. They will be invisible, but it will make the border on the bottom `4vw` wide. +Cuando aumente el tamaño de los bordes izquierdo y derecho, el borde de la parte inferior se expandirá para ser el ancho de los anchos de borde izquierdo y derecho combinados. Agregue `2vw solid transparent` como el valor de las propiedades `border-left` y `border-right` de `.fb1a`. Serán invisibles, pero hará que el borde en la parte inferior `4vw` ancho. # --hints-- -You should give `.fb1a` a `border-left` of `2vw solid transparent`. +Debe dar `.fb1a` un `border-left` de `2vw solid transparent`. ```js assert.equal(new __helpers.CSSHelp(document).getStyle(".fb1a")?.borderLeft, "2vw solid transparent"); ``` -You should give `.fb1a` a `border-right` of `2vw solid transparent`. +Debe dar a `.fb1a` un `border-right` de `2vw solid transparent`. ```js assert.equal(new __helpers.CSSHelp(document).getStyle(".fb1a")?.borderRight, "2vw solid transparent"); diff --git a/curriculum/challenges/espanol/14-responsive-web-design-22/learn-css-variables-by-building-a-city-skyline/5d822fd413a79914d39e991a.md b/curriculum/challenges/espanol/14-responsive-web-design-22/learn-css-variables-by-building-a-city-skyline/5d822fd413a79914d39e991a.md index 0a1896ec35a..1b25058ca80 100644 --- a/curriculum/challenges/espanol/14-responsive-web-design-22/learn-css-variables-by-building-a-city-skyline/5d822fd413a79914d39e991a.md +++ b/curriculum/challenges/espanol/14-responsive-web-design-22/learn-css-variables-by-building-a-city-skyline/5d822fd413a79914d39e991a.md @@ -7,24 +7,24 @@ dashedName: step-81 # --description-- -On to the next building! Nest two `div` elements within `.fb2` and give them classes of `fb2a` and `fb2b`, in that order. +¡Hasta el próximo edificio! Anide dos elementos `div` dentro de `.fb2` y asígneles clases de `fb2a` y `fb2b`, en ese orden. # --hints-- -You should add two `div` elements within `.fb2`. +Debe agregar dos elementos `div` dentro de `.fb2`. ```js assert.equal(document.querySelectorAll("div.fb2 > div")?.length, 2); ``` -You should give the first new `div` a class of `fb2a`. +Debes darle al primer `div` nuevo una clase de `fb2a`. ```js assert.exists(document.querySelector("div.fb2 > div.fb2a")); assert(document.querySelector("div.fb2 > div.fb2a") === document.querySelector("div.fb2")?.firstElementChild); ``` -You should give the second new `div` a class of `fb2b`. +Debes darle al segundo `div` nuevo una clase de `fb2b`. ```js assert.exists(document.querySelector("div.fb2 > div.fb2b")); diff --git a/curriculum/challenges/espanol/14-responsive-web-design-22/learn-css-variables-by-building-a-city-skyline/5d822fd413a79914d39e991b.md b/curriculum/challenges/espanol/14-responsive-web-design-22/learn-css-variables-by-building-a-city-skyline/5d822fd413a79914d39e991b.md index ee9e88e0698..4c0bc42cdbe 100644 --- a/curriculum/challenges/espanol/14-responsive-web-design-22/learn-css-variables-by-building-a-city-skyline/5d822fd413a79914d39e991b.md +++ b/curriculum/challenges/espanol/14-responsive-web-design-22/learn-css-variables-by-building-a-city-skyline/5d822fd413a79914d39e991b.md @@ -7,23 +7,23 @@ dashedName: step-82 # --description-- -Give `.fb2a` a `width` of `100%` and `.fb2b` a `width` of `100%` and `height` of `75%`. +Dale a`.fb2a` un `width` de `100%` y`.fb2b` un `width` de `100%` y `height` de `75%`. # --hints-- -You should give `.fb2a` a `width` of `100%`. +Debes darle a `.fb2a` un `width` de `100%`. ```js assert.equal(new __helpers.CSSHelp(document).getStyle(".fb2a")?.width, "100%"); ``` -You should give `.fb2b` a `width` of `100%`. +Debe dar a `.fb2b` un `width` de `100%`. ```js assert.equal(new __helpers.CSSHelp(document).getStyle(".fb2b")?.width, "100%"); ``` -You should give `.fb2b` a `height` of `75%`. +Debe dar a `.fb2b` un `height` de `75%`. ```js assert.equal(new __helpers.CSSHelp(document).getStyle(".fb2b")?.height, "75%"); diff --git a/curriculum/challenges/espanol/14-responsive-web-design-22/learn-css-variables-by-building-a-city-skyline/5d822fd413a79914d39e991c.md b/curriculum/challenges/espanol/14-responsive-web-design-22/learn-css-variables-by-building-a-city-skyline/5d822fd413a79914d39e991c.md index 0c91031ac2f..768a121eddb 100644 --- a/curriculum/challenges/espanol/14-responsive-web-design-22/learn-css-variables-by-building-a-city-skyline/5d822fd413a79914d39e991c.md +++ b/curriculum/challenges/espanol/14-responsive-web-design-22/learn-css-variables-by-building-a-city-skyline/5d822fd413a79914d39e991c.md @@ -7,17 +7,17 @@ dashedName: step-83 # --description-- -Nest three `div` elements within `.fb2b` and give them a class of `fb2-window`. These will be windows for this section of the building. +Anida tres elementos `div` dentro de `.fb2b` y asígneles una clase de `fb2-window`. Estas serán ventanas para esta sección del edificio. # --hints-- -You should add three `div` elements within `.fb2b`. +Debe agregar tres elementos `div` dentro de `.fb2b`. ```js assert.equal(document.querySelectorAll("div.fb2b > div")?.length, 3); ``` -You should give the three new `div` elements each a class of `fb2-window`. +Debe dar a los tres nuevos elementos `div` cada uno una clase de `fb2-window`. ```js assert.equal(document.querySelectorAll("div.fb2-window")?.length, 3); diff --git a/curriculum/challenges/espanol/14-responsive-web-design-22/learn-css-variables-by-building-a-city-skyline/5d822fd413a79914d39e991d.md b/curriculum/challenges/espanol/14-responsive-web-design-22/learn-css-variables-by-building-a-city-skyline/5d822fd413a79914d39e991d.md index 249f296803b..57ef1eb8fab 100644 --- a/curriculum/challenges/espanol/14-responsive-web-design-22/learn-css-variables-by-building-a-city-skyline/5d822fd413a79914d39e991d.md +++ b/curriculum/challenges/espanol/14-responsive-web-design-22/learn-css-variables-by-building-a-city-skyline/5d822fd413a79914d39e991d.md @@ -7,11 +7,11 @@ dashedName: step-84 # --description-- -Add your `window-wrap` class to `.fb2b` to position the new window elements. +Agregue la clase `window-wrap` a `.fb2b` para colocar los nuevos elementos de ventana. # --hints-- -You should add the class `window-wrap` to `.fb2b`. +Debe agregar la clase `window-wrap` a `.fb2b`. ```js assert.exists(document.querySelector("div.fb2b.window-wrap")); diff --git a/curriculum/challenges/espanol/14-responsive-web-design-22/learn-css-variables-by-building-a-city-skyline/5d822fd413a79914d39e991e.md b/curriculum/challenges/espanol/14-responsive-web-design-22/learn-css-variables-by-building-a-city-skyline/5d822fd413a79914d39e991e.md index c8a282f31d2..6ffb0d4f623 100644 --- a/curriculum/challenges/espanol/14-responsive-web-design-22/learn-css-variables-by-building-a-city-skyline/5d822fd413a79914d39e991e.md +++ b/curriculum/challenges/espanol/14-responsive-web-design-22/learn-css-variables-by-building-a-city-skyline/5d822fd413a79914d39e991e.md @@ -7,23 +7,23 @@ dashedName: step-85 # --description-- -Give the `.fb2-window` elements a `width` of `22%`, `height` of `100%`, and a `background-color` of your `--window-color3` variable. +Asigne a los elementos `.fb2-window` una `width` de `22%`, `height` de `100%` y una variable `background-color` de su variable `--window-color3`. # --hints-- -You should give the `.fb2-window` elements a `width` of `22%`. +Debe asignar a los elementos `.fb2-window` un `width` de `22%`. ```js assert.equal(new __helpers.CSSHelp(document).getStyle(".fb2-window")?.width, "22%"); ``` -You should give the `.fb2-window` elements a `height` of `100%`. +Debe asignar a los elementos `.fb2-window` un `height` de `100%`. ```js assert.equal(new __helpers.CSSHelp(document).getStyle(".fb2-window")?.height, "100%"); ``` -You should give the `.fb2-window` elements a `background-color` of `--window-color3`. +Debe dar a los elementos `.fb2-window` un `background-color` de `--window-color3`. ```js assert.equal(new __helpers.CSSHelp(document).getStyle(".fb2-window")?.backgroundColor.trim(), "var(--window-color3)"); diff --git a/curriculum/challenges/espanol/14-responsive-web-design-22/learn-css-variables-by-building-a-city-skyline/5d822fd413a79914d39e991f.md b/curriculum/challenges/espanol/14-responsive-web-design-22/learn-css-variables-by-building-a-city-skyline/5d822fd413a79914d39e991f.md index 8c119f12912..e35e90b90fe 100644 --- a/curriculum/challenges/espanol/14-responsive-web-design-22/learn-css-variables-by-building-a-city-skyline/5d822fd413a79914d39e991f.md +++ b/curriculum/challenges/espanol/14-responsive-web-design-22/learn-css-variables-by-building-a-city-skyline/5d822fd413a79914d39e991f.md @@ -7,17 +7,17 @@ dashedName: step-86 # --description-- -Move the `background-color` property and value from `.fb2` to `.fb2b` to just color the section and not the container. +Mueva la propiedad y el valor `background-color` de `.fb2` a `.fb2b` para colorear la sección y no el contenedor. # --hints-- -You should remove the `background-color` property from `.fb2`. +Debe quitar la propiedad `background-color` de `.fb2`. ```js assert.isEmpty(new __helpers.CSSHelp(document).getStyle(".fb2")?.backgroundColor); ``` -You should give `.fb2b` a `background-color` of `--building-color3`. +Debe dar a `.fb2b` un `background-color` de `--building-color3`. ```js assert.equal(new __helpers.CSSHelp(document).getStyle(".fb2b")?.backgroundColor.trim(), "var(--building-color3)"); diff --git a/curriculum/challenges/espanol/14-responsive-web-design-22/learn-css-variables-by-building-a-city-skyline/5d822fd413a79914d39e9920.md b/curriculum/challenges/espanol/14-responsive-web-design-22/learn-css-variables-by-building-a-city-skyline/5d822fd413a79914d39e9920.md index e6fb6f5a978..323ffea88a7 100644 --- a/curriculum/challenges/espanol/14-responsive-web-design-22/learn-css-variables-by-building-a-city-skyline/5d822fd413a79914d39e9920.md +++ b/curriculum/challenges/espanol/14-responsive-web-design-22/learn-css-variables-by-building-a-city-skyline/5d822fd413a79914d39e9920.md @@ -7,23 +7,23 @@ dashedName: step-87 # --description-- -For `.fb2a`, add a `border-bottom` of `10vh solid var(--building-color3)`, and a `border-left` and `border-right` of `1vw solid transparent`. This time the border trick will create a trapezoid shape. +Para `.fb2a`, agregue un `border-bottom` de `10vh solid var(--building-color3)`, y un `border-left` y `border-right` de `1vw solid transparent`. Esta vez el truco del borde creará una forma trapezoidal. # --hints-- -You should give `.fb2a` a `border-bottom` of `10vh solid var(--building-color3)`. +Debe dar a `.fb2a` un `border-bottom` de `10vh solid var(--building-color3)`. ```js assert.equal(new __helpers.CSSHelp(document).getStyle(".fb2a")?.borderBottom.trim(), "10vh solid var(--building-color3)"); ``` -You should give `.fb2a` a `border-left` of `1vw solid transparent`. +Debe dar `.fb2a` un `border-left` de `1vw solid transparent`. ```js assert.equal(new __helpers.CSSHelp(document).getStyle(".fb2a")?.borderLeft, "1vw solid transparent"); ``` -You should give `.fb2a` a `border-right` of `1vw solid transparent`. +Debe dar a `.fb2a` un `border-right` de `1vw solid transparent`. ```js assert.equal(new __helpers.CSSHelp(document).getStyle(".fb2a")?.borderRight, "1vw solid transparent"); diff --git a/curriculum/challenges/espanol/14-responsive-web-design-22/learn-css-variables-by-building-a-city-skyline/5d822fd413a79914d39e9921.md b/curriculum/challenges/espanol/14-responsive-web-design-22/learn-css-variables-by-building-a-city-skyline/5d822fd413a79914d39e9921.md index a72095c54d7..d8e15216b3b 100644 --- a/curriculum/challenges/espanol/14-responsive-web-design-22/learn-css-variables-by-building-a-city-skyline/5d822fd413a79914d39e9921.md +++ b/curriculum/challenges/espanol/14-responsive-web-design-22/learn-css-variables-by-building-a-city-skyline/5d822fd413a79914d39e9921.md @@ -7,35 +7,35 @@ dashedName: step-88 # --description-- -For the next building, nest four `div` elements within `.fb3` with classes of `fb3a`, `fb3b`, `fb3a` again, and `fb3b` again, in that order. This building will have four sections, and the top two will be almost the same as the bottom two. +Para el siguiente edificio, anide cuatro elementos `div` dentro de `.fb3` con clases de `fb3a`, `fb3b`, `fb3a` de nuevo, y `fb3b` de nuevo, en ese orden. Este edificio tendrá cuatro secciones, y las dos superiores serán casi las mismas que las dos inferiores. # --hints-- -You should add four `div` elements within `.fb3`. +Debe agregar cuatro elementos `div` dentro de `.fb3`. ```js assert.equal(document.querySelectorAll("div.fb3 > div")?.length, 4); ``` -You should give the first new `div` a class of `fb3a`. +Debe asignar al primer `div` una clase de `fb3a`. ```js assert.equal(document.querySelector("div.fb3").firstElementChild, document.querySelector("div.fb3a")); ``` -You should give the second new `div` a class of `fb3b`. +Debe dar al segundo nuevo `div` una clase de `fb3b`. ```js assert.equal(document.querySelector("div.fb3 :nth-child(2)"), document.querySelector("div.fb3b")); ``` -You should give the third new `div` a class of `fb3a`. +Deberías darle al tercer `div` nuevo una clase de `fb3a`. ```js assert.equal(document.querySelector("div.fb3 :nth-child(3)"), document.querySelector("div.fb3b + div.fb3a")); ``` -You should give the fourth new `div` a class of `fb3b`. +Debe asignar al cuarto nuevo `div` una clase de `fb3b`. ```js assert.exists(document.querySelector("div.fb3 :nth-child(4).fb3b")); diff --git a/curriculum/challenges/espanol/14-responsive-web-design-22/learn-css-variables-by-building-a-city-skyline/5d822fd413a79914d39e9922.md b/curriculum/challenges/espanol/14-responsive-web-design-22/learn-css-variables-by-building-a-city-skyline/5d822fd413a79914d39e9922.md index 638168518dd..bc40efa8428 100644 --- a/curriculum/challenges/espanol/14-responsive-web-design-22/learn-css-variables-by-building-a-city-skyline/5d822fd413a79914d39e9922.md +++ b/curriculum/challenges/espanol/14-responsive-web-design-22/learn-css-variables-by-building-a-city-skyline/5d822fd413a79914d39e9922.md @@ -7,29 +7,29 @@ dashedName: step-89 # --description-- -Give the `.fb3a` element a `width` of `80%` and `height` of `15%`. Then give the `.fb3b` element a `width` of `100%` and `height` of `35%`. +Asigne al elemento `.fb3a` un `width` de `80%` y `height` de `15%`. Luego dale al elemento `.fb3b` un `width` de `100%` y `height` de `35%`. # --hints-- -You should give `.fb3a` a `width` of `80%`. +Debe dar a `.fb3a` un `width` de `80%`. ```js assert.equal(new __helpers.CSSHelp(document).getStyle(".fb3a")?.width, "80%"); ``` -You should give `.fb3a` a `height` of `15%`. +Debe dar a `.fb3a` un `height` de `15%`. ```js assert.equal(new __helpers.CSSHelp(document).getStyle(".fb3a")?.height, "15%"); ``` -You should give `.fb3b` a `width` of `100%`. +Debe dar a `.fb3b` un `width` de `100%`. ```js assert.equal(new __helpers.CSSHelp(document).getStyle(".fb3b")?.width, "100%"); ``` -You should give `.fb3b` a `height` of `35%`. +Debe dar a `.fb3b` un `height` de `35%`. ```js assert.equal(new __helpers.CSSHelp(document).getStyle(".fb3b")?.height, "35%"); diff --git a/curriculum/challenges/espanol/14-responsive-web-design-22/learn-css-variables-by-building-a-city-skyline/5d822fd413a79914d39e9923.md b/curriculum/challenges/espanol/14-responsive-web-design-22/learn-css-variables-by-building-a-city-skyline/5d822fd413a79914d39e9923.md index b543305e01e..cad00734bfa 100644 --- a/curriculum/challenges/espanol/14-responsive-web-design-22/learn-css-variables-by-building-a-city-skyline/5d822fd413a79914d39e9923.md +++ b/curriculum/challenges/espanol/14-responsive-web-design-22/learn-css-variables-by-building-a-city-skyline/5d822fd413a79914d39e9923.md @@ -7,23 +7,23 @@ dashedName: step-90 # --description-- -Remove the `background-color` property and value from `.fb3`, and add them to `.fb3a` and `.fb3b`. +Quite la propiedad y el valor `background-color` de `.fb3` y agréguelos a `.fb3a` y `.fb3b`. # --hints-- -You should remove the `background-color` from `.fb3`. +Debe eliminar el `background-color` de `.fb3`. ```js assert.isEmpty(new __helpers.CSSHelp(document).getStyle(".fb3")?.backgroundColor); ``` -You should give `.fb3a` a `background-color` of `--building-color1`. +Debe dar a `.fb3a` un `background-color` de `--building-color1`. ```js assert.equal(new __helpers.CSSHelp(document).getStyle(".fb3a")?.backgroundColor.trim(), "var(--building-color1)"); ``` -You should give `.fb3b` a `background-color` of `--building-color1`. +Debe dar a `.fb3b` un `background-color` de `--building-color1`. ```js assert.equal(new __helpers.CSSHelp(document).getStyle(".fb3b")?.backgroundColor.trim(), "var(--building-color1)"); diff --git a/curriculum/challenges/espanol/14-responsive-web-design-22/learn-css-variables-by-building-a-city-skyline/5d822fd413a79914d39e9924.md b/curriculum/challenges/espanol/14-responsive-web-design-22/learn-css-variables-by-building-a-city-skyline/5d822fd413a79914d39e9924.md index a8ef0438e21..d7e20d1d5d7 100644 --- a/curriculum/challenges/espanol/14-responsive-web-design-22/learn-css-variables-by-building-a-city-skyline/5d822fd413a79914d39e9924.md +++ b/curriculum/challenges/espanol/14-responsive-web-design-22/learn-css-variables-by-building-a-city-skyline/5d822fd413a79914d39e9924.md @@ -7,11 +7,11 @@ dashedName: step-91 # --description-- -Add your `building-wrap` class to the `.fb3` element to center the sections. +Agregue la clase `building-wrap` al elemento `.fb3` para centrar las secciones. # --hints-- -You should add the class `building-wrap` to `.fb3`. +Debe agregar la clase `building-wrap` a `.fb3`. ```js assert.exists(document.querySelector("div.fb3.building-wrap")); diff --git a/curriculum/challenges/espanol/14-responsive-web-design-22/learn-css-variables-by-building-a-city-skyline/5d822fd413a79914d39e9925.md b/curriculum/challenges/espanol/14-responsive-web-design-22/learn-css-variables-by-building-a-city-skyline/5d822fd413a79914d39e9925.md index 63a8632ce7c..07953e5ece2 100644 --- a/curriculum/challenges/espanol/14-responsive-web-design-22/learn-css-variables-by-building-a-city-skyline/5d822fd413a79914d39e9925.md +++ b/curriculum/challenges/espanol/14-responsive-web-design-22/learn-css-variables-by-building-a-city-skyline/5d822fd413a79914d39e9925.md @@ -7,17 +7,17 @@ dashedName: step-92 # --description-- -Nest three new `div` elements in the first `.fb3a` element. Give them each a class of `fb3-window`. These will be windows for this section. +Anida tres nuevos elementos `div` en el primer elemento `.fb3a`. Dale a cada uno una clase de `fb3-window`. Estas serán ventanas para esta sección. # --hints-- -You should add three `div` elements within the first `.fb3a` element. +Debe agregar tres elementos `div` dentro del primer elemento `.fb3a`. ```js assert.equal(document.querySelectorAll("div.fb3a > div")?.length, 3); ``` -You should give each new `div` a class of `fb3-window`. +Debe asignar a cada nuevo `div` una clase de `fb3-window`. ```js assert.equal(document.querySelectorAll("div.fb3-window")?.length, 3) diff --git a/curriculum/challenges/espanol/14-responsive-web-design-22/learn-css-variables-by-building-a-city-skyline/5d822fd413a79914d39e9926.md b/curriculum/challenges/espanol/14-responsive-web-design-22/learn-css-variables-by-building-a-city-skyline/5d822fd413a79914d39e9926.md index 9204121b7cf..ee1b68db8dd 100644 --- a/curriculum/challenges/espanol/14-responsive-web-design-22/learn-css-variables-by-building-a-city-skyline/5d822fd413a79914d39e9926.md +++ b/curriculum/challenges/espanol/14-responsive-web-design-22/learn-css-variables-by-building-a-city-skyline/5d822fd413a79914d39e9926.md @@ -7,23 +7,23 @@ dashedName: step-93 # --description-- -Give the `.fb3-window` elements a `width` of `25%`, a `height` of `80%`, and use your `--window-color1` variable as the `background-color` value. +Asigne a los elementos `.fb3-window` un `width` de `25%`, un `height` de `80%`, y use su variable `--window-color1` como valor `background-color`. # --hints-- -You should give `.fb3-window` a `width` of `25%`. +Debe dar a `.fb3-window` un `width` de `25%`. ```js assert.equal(new __helpers.CSSHelp(document).getStyle(".fb3-window")?.width, "25%"); ``` -You should give `.fb3-window` a `height` of `80%`. +Debe dar a `.fb3-window` un `height` de `80%`. ```js assert.equal(new __helpers.CSSHelp(document).getStyle(".fb3-window")?.height, "80%"); ``` -You should give `.fb3-window` a `background-color` of `--window-color1`. +Debe dar a `.fb3-window` un `background-color` de `--window-color1`. ```js assert.equal(new __helpers.CSSHelp(document).getStyle(".fb3-window")?.backgroundColor.trim(), "var(--window-color1)"); diff --git a/curriculum/challenges/espanol/14-responsive-web-design-22/learn-css-variables-by-building-a-city-skyline/5d822fd413a79914d39e9927.md b/curriculum/challenges/espanol/14-responsive-web-design-22/learn-css-variables-by-building-a-city-skyline/5d822fd413a79914d39e9927.md index 9725ca304ea..395edf230cf 100644 --- a/curriculum/challenges/espanol/14-responsive-web-design-22/learn-css-variables-by-building-a-city-skyline/5d822fd413a79914d39e9927.md +++ b/curriculum/challenges/espanol/14-responsive-web-design-22/learn-css-variables-by-building-a-city-skyline/5d822fd413a79914d39e9927.md @@ -7,11 +7,11 @@ dashedName: step-94 # --description-- -Add your `window-wrap` class to the `.fb3a` element to center and space the windows. +Agregue la clase `window-wrap` al elemento `.fb3a` para centrar y espaciar las ventanas. # --hints-- -You should give `.fb3a` a class of `window-wrap`. +Debe asignar `.fb3a` una clase de `window-wrap`. ```js assert.exists(document.querySelector("div.fb3a.window-wrap")); diff --git a/curriculum/challenges/espanol/14-responsive-web-design-22/learn-css-variables-by-building-a-city-skyline/5d822fd413a79914d39e9928.md b/curriculum/challenges/espanol/14-responsive-web-design-22/learn-css-variables-by-building-a-city-skyline/5d822fd413a79914d39e9928.md index 9106cce9d83..83359ad9248 100644 --- a/curriculum/challenges/espanol/14-responsive-web-design-22/learn-css-variables-by-building-a-city-skyline/5d822fd413a79914d39e9928.md +++ b/curriculum/challenges/espanol/14-responsive-web-design-22/learn-css-variables-by-building-a-city-skyline/5d822fd413a79914d39e9928.md @@ -7,11 +7,11 @@ dashedName: step-95 # --description-- -With CSS variables you can change values without searching everywhere in the stylesheet. Change the `--window-color1` value to `#bb99ff`. +Con las variables CSS puede cambiar los valores sin buscar en todas partes de la hoja de estilo. Cambie el valor `--window-color1` a `#bb99ff`. # --hints-- -You should change the value of `--window-color1` to `#bb99ff`. +Debe cambiar el valor de `--window-color1` a `#bb99ff`. ```js assert.equal(new __helpers.CSSHelp(document).getStyle(":root")?.getPropertyValue("--window-color1")?.trim(), "#bb99ff"); diff --git a/curriculum/challenges/espanol/14-responsive-web-design-22/learn-css-variables-by-building-a-city-skyline/5d822fd413a79914d39e9929.md b/curriculum/challenges/espanol/14-responsive-web-design-22/learn-css-variables-by-building-a-city-skyline/5d822fd413a79914d39e9929.md index 0d1eb0866b0..e41fdabc2d0 100644 --- a/curriculum/challenges/espanol/14-responsive-web-design-22/learn-css-variables-by-building-a-city-skyline/5d822fd413a79914d39e9929.md +++ b/curriculum/challenges/espanol/14-responsive-web-design-22/learn-css-variables-by-building-a-city-skyline/5d822fd413a79914d39e9929.md @@ -7,23 +7,23 @@ dashedName: step-96 # --description-- -Only three more buildings to go. Nest two new `div` elements within the `.fb4` element and give them the classes of `fb4a` and `fb4b`, in that order. Remember that you sort of flipped the location of `.fb4` and `.fb5`, so it's the rightmost purple building you are working on now. +Solo quedan tres edificios más. Anida dos nuevos elementos `div` dentro del elemento `.fb4` y asígneles las clases de `fb4a` y `fb4b`, en ese orden. Recuerde que cambió la ubicación de `.fb4` y `.fb5`, por lo que es el edificio púrpura más a la derecha en el que está trabajando ahora. # --hints-- -You should add two `div` elements within `.fb4`. +Debe agregar dos elementos `div` dentro de `.fb4`. ```js assert.equal(document.querySelectorAll("div.fb4 > div")?.length, 2); ``` -You should give the first new `div` a class of `fb4a`. +Debe asignar al primer `div` una clase de `fb4a`. ```js assert.exists(document.querySelector("div.fb4a")); ``` -You should give the second new `div` a class of `fb4b`. +Debe asignar al segundo nuevo `div` una clase de `fb4b`. ```js assert.exists(document.querySelector("div.fb4b")); diff --git a/curriculum/challenges/espanol/14-responsive-web-design-22/learn-css-variables-by-building-a-city-skyline/5d822fd413a79914d39e992a.md b/curriculum/challenges/espanol/14-responsive-web-design-22/learn-css-variables-by-building-a-city-skyline/5d822fd413a79914d39e992a.md index af4320c4aa6..591eed17d66 100644 --- a/curriculum/challenges/espanol/14-responsive-web-design-22/learn-css-variables-by-building-a-city-skyline/5d822fd413a79914d39e992a.md +++ b/curriculum/challenges/espanol/14-responsive-web-design-22/learn-css-variables-by-building-a-city-skyline/5d822fd413a79914d39e992a.md @@ -7,17 +7,17 @@ dashedName: step-97 # --description-- -Give `.fb4b` a `width` of `100%` and `height` of `89%`. +Proporcione a `.fb4b` un `width` de `100%` y `height` de `89%`. # --hints-- -You should give `.fb4b` a `width` of `100%`. +Debe dar a `.fb4b` un `width` de `100%`. ```js assert.equal(new __helpers.CSSHelp(document).getStyle(".fb4b")?.width, "100%"); ``` -You should give `.fb4b` a `height` of `89%`. +Debe dar a `.fb4b` un `height` de `89%`. ```js assert.equal(new __helpers.CSSHelp(document).getStyle(".fb4b")?.height, "89%"); diff --git a/curriculum/challenges/espanol/14-responsive-web-design-22/learn-css-variables-by-building-a-city-skyline/5d822fd413a79914d39e992b.md b/curriculum/challenges/espanol/14-responsive-web-design-22/learn-css-variables-by-building-a-city-skyline/5d822fd413a79914d39e992b.md index 899d0e18c23..b1585627252 100644 --- a/curriculum/challenges/espanol/14-responsive-web-design-22/learn-css-variables-by-building-a-city-skyline/5d822fd413a79914d39e992b.md +++ b/curriculum/challenges/espanol/14-responsive-web-design-22/learn-css-variables-by-building-a-city-skyline/5d822fd413a79914d39e992b.md @@ -7,17 +7,17 @@ dashedName: step-98 # --description-- -Add your `--building-color1` variable as value of the `background-color` property of `.fb4b`. Then, remove the `background-color` from `.fb4`. +Agregue su variable `--building-color1` como valor de la propiedad `background-color` de `.fb4b`. A continuación, elimine el `background-color` de `.fb4`. # --hints-- -You should remove the `background-color` from `.fb4`. +Debe eliminar el `background-color` de `.fb4`. ```js assert.isEmpty(new __helpers.CSSHelp(document).getStyle(".fb4")?.backgroundColor); ``` -You should give `.fb4b` a `background-color` of `--building-color1`. +Debe dar a `.fb4b` un `background-color` de `--building-color1`. ```js assert.equal(new __helpers.CSSHelp(document).getStyle(".fb4b")?.backgroundColor.trim(), "var(--building-color1)"); diff --git a/curriculum/challenges/espanol/14-responsive-web-design-22/learn-css-variables-by-building-a-city-skyline/5d822fd413a79914d39e992c.md b/curriculum/challenges/espanol/14-responsive-web-design-22/learn-css-variables-by-building-a-city-skyline/5d822fd413a79914d39e992c.md index 51067f306dc..a520c51ab58 100644 --- a/curriculum/challenges/espanol/14-responsive-web-design-22/learn-css-variables-by-building-a-city-skyline/5d822fd413a79914d39e992c.md +++ b/curriculum/challenges/espanol/14-responsive-web-design-22/learn-css-variables-by-building-a-city-skyline/5d822fd413a79914d39e992c.md @@ -7,17 +7,17 @@ dashedName: step-99 # --description-- -Nest six `div` elements within `.fb4b` and give them all a class of `fb4-window`. +Anida seis elementos `div` dentro de `.fb4b` y asígneles a todos una clase de `fb4-window`. # --hints-- -You should add six `div` elements within `.fb4b`. +Debe agregar seis elementos `div` dentro de `.fb4b`. ```js assert.equal(document.querySelectorAll("div.fb4b > div")?.length, 6); ``` -You should give each new `div` a class of `fb4-window`. +Debe asignar a cada nuevo `div` una clase de `fb4-window`. ```js assert.equal(document.querySelectorAll("div.fb4-window")?.length, 6); diff --git a/curriculum/challenges/espanol/14-responsive-web-design-22/learn-css-variables-by-building-a-city-skyline/5d822fd413a79914d39e992d.md b/curriculum/challenges/espanol/14-responsive-web-design-22/learn-css-variables-by-building-a-city-skyline/5d822fd413a79914d39e992d.md index 3cf46cc93f1..1b84a10d55f 100644 --- a/curriculum/challenges/espanol/14-responsive-web-design-22/learn-css-variables-by-building-a-city-skyline/5d822fd413a79914d39e992d.md +++ b/curriculum/challenges/espanol/14-responsive-web-design-22/learn-css-variables-by-building-a-city-skyline/5d822fd413a79914d39e992d.md @@ -7,23 +7,23 @@ dashedName: step-100 # --description-- -Give the `.fb4-window` elements a `width` of `30%`, `height` of `10%`, and `border-radius` of `50%`. These will make some circular windows for this building. +Asigne a los elementos `.fb4-window` un `width` de `30%`, `height` de `10%` y `border-radius` de `50%`. Estos harán algunas ventanas circulares para este edificio. # --hints-- -You should give `.fb4-window` a `width` of `30%`. +Debe dar a `.fb4-window` un `width` de `30%`. ```js assert.equal(new __helpers.CSSHelp(document).getStyle(".fb4-window")?.width, "30%"); ``` -You should give `.fb4-window` a `height` of `10%`. +Debe dar a `.fb4-window` un `height` de `10%`. ```js assert.equal(new __helpers.CSSHelp(document).getStyle(".fb4-window")?.height, "10%"); ``` -You should give `.fb4-window` a `border-radius` of `50%`. +Debe dar a `.fb4-window` un `border-radius` de `50%`. ```js assert.equal(new __helpers.CSSHelp(document).getStyle(".fb4-window")?.borderRadius, "50%"); diff --git a/curriculum/challenges/espanol/14-responsive-web-design-22/learn-css-variables-by-building-a-city-skyline/5d822fd413a79914d39e992e.md b/curriculum/challenges/espanol/14-responsive-web-design-22/learn-css-variables-by-building-a-city-skyline/5d822fd413a79914d39e992e.md index 2af9db5f384..a18d054213e 100644 --- a/curriculum/challenges/espanol/14-responsive-web-design-22/learn-css-variables-by-building-a-city-skyline/5d822fd413a79914d39e992e.md +++ b/curriculum/challenges/espanol/14-responsive-web-design-22/learn-css-variables-by-building-a-city-skyline/5d822fd413a79914d39e992e.md @@ -7,17 +7,17 @@ dashedName: step-101 # --description-- -Fill in the windows with your secondary color for this building. Also add a `margin` of `10%` to give the windows some space. +Rellene las ventanas con su color secundario para este edificio. También agregue un `margin` de `10%` para dar espacio a las ventanas. # --hints-- -You should give `.fb4-window` a `background-color` of `--window-color1`. +Debe dar a `.fb4-window` un `background-color` de `--window-color1`. ```js assert.equal(new __helpers.CSSHelp(document).getStyle(".fb4-window")?.backgroundColor.trim(), "var(--window-color1)"); ``` -You should give `.fb4-window` a `margin` of `10%`. +Debe dar a `.fb4-window` un `margin` de `10%`. ```js assert.equal(new __helpers.CSSHelp(document).getStyle(".fb4-window")?.margin, "10%"); diff --git a/curriculum/challenges/espanol/14-responsive-web-design-22/learn-css-variables-by-building-a-city-skyline/5d822fd413a79914d39e992f.md b/curriculum/challenges/espanol/14-responsive-web-design-22/learn-css-variables-by-building-a-city-skyline/5d822fd413a79914d39e992f.md index 4438a2037c7..93c229ebc09 100644 --- a/curriculum/challenges/espanol/14-responsive-web-design-22/learn-css-variables-by-building-a-city-skyline/5d822fd413a79914d39e992f.md +++ b/curriculum/challenges/espanol/14-responsive-web-design-22/learn-css-variables-by-building-a-city-skyline/5d822fd413a79914d39e992f.md @@ -7,17 +7,17 @@ dashedName: step-102 # --description-- -The windows are stacked on top of each other on the rightmost purple building. Turn the building into a flexbox parent, and use the `flex-wrap` property to put the windows side by side, and push them down to a new row when they don't fit. +Las ventanas están apiladas una encima de la otra en el edificio púrpura más a la derecha. Convierta el edificio en un padre flexbox y use la propiedad `flex-wrap` para colocar las ventanas una al lado de la otra y empujarlas hacia abajo a una nueva fila cuando no encajen. # --hints-- -You should give `.fb4b` a `display` of `flex`. +Debe dar a `.fb4b` un `display` de `flex`. ```js assert.equal(new __helpers.CSSHelp(document).getStyle(".fb4b")?.display, "flex"); ``` -You should give `.fb4b` a `flex-wrap` of `wrap`. +Debe dar a `.fb4b` un `flex-wrap` de `wrap`. ```js assert.equal(new __helpers.CSSHelp(document).getStyle(".fb4b")?.flexWrap, "wrap"); diff --git a/curriculum/challenges/espanol/14-responsive-web-design-22/learn-css-variables-by-building-a-city-skyline/5d822fd413a79914d39e9930.md b/curriculum/challenges/espanol/14-responsive-web-design-22/learn-css-variables-by-building-a-city-skyline/5d822fd413a79914d39e9930.md index 53fc8e53991..d3ef96141fa 100644 --- a/curriculum/challenges/espanol/14-responsive-web-design-22/learn-css-variables-by-building-a-city-skyline/5d822fd413a79914d39e9930.md +++ b/curriculum/challenges/espanol/14-responsive-web-design-22/learn-css-variables-by-building-a-city-skyline/5d822fd413a79914d39e9930.md @@ -7,17 +7,17 @@ dashedName: step-103 # --description-- -This building is going to have another triangle on top. Give the top section a `border-top` of `5vh solid transparent`, and a `border-left` that is `8vw`, `solid`, and uses your building color variable as the color. +Este edificio va a tener otro triángulo en la parte superior. Asigne a la sección superior un `border-top` de `5vh solid transparent`, y un `border-left` que sea `8vw`, `solid`, y use la variable de color del edificio como color. # --hints-- -You should give `.fb4a` a `border-top` of `5vh solid transparent`. +Debe dar `.fb4a` un `border-top` de `5vh solid transparent`. ```js assert.equal(new __helpers.CSSHelp(document).getStyle(".fb4a")?.borderTop.trim(), "5vh solid transparent") ``` -You should give `.fb4a` a `border-left` of `8vw solid var(--building-color1)`. +Debe dar a `.fb4a` un `border-left` de `8vw solid var(--building-color1)`. ```js assert.equal(new __helpers.CSSHelp(document).getStyle(".fb4a")?.borderLeft.trim(), "8vw solid var(--building-color1)") diff --git a/curriculum/challenges/espanol/14-responsive-web-design-22/learn-css-variables-by-building-a-city-skyline/5d822fd413a79914d39e9931.md b/curriculum/challenges/espanol/14-responsive-web-design-22/learn-css-variables-by-building-a-city-skyline/5d822fd413a79914d39e9931.md index 7caa052e9bf..28aee2a3de8 100644 --- a/curriculum/challenges/espanol/14-responsive-web-design-22/learn-css-variables-by-building-a-city-skyline/5d822fd413a79914d39e9931.md +++ b/curriculum/challenges/espanol/14-responsive-web-design-22/learn-css-variables-by-building-a-city-skyline/5d822fd413a79914d39e9931.md @@ -7,11 +7,11 @@ dashedName: step-109 # --description-- -You can remove the `background-color` for this building now, since it isn't needed. +Puede eliminar el `background-color` para este edificio ahora, ya que no es necesario. # --hints-- -You should remove the `background-color` of `.fb6`. +Debe eliminar el `background-color` de `.fb6`. ```js assert.notMatch(code, /\.fb6\s*\{\s*[^}]*?background-color[^}]*?\}/); diff --git a/curriculum/challenges/espanol/14-responsive-web-design-22/learn-css-variables-by-building-a-city-skyline/5d822fd413a79914d39e9932.md b/curriculum/challenges/espanol/14-responsive-web-design-22/learn-css-variables-by-building-a-city-skyline/5d822fd413a79914d39e9932.md index fa631b8aebc..ce4ef4eabf1 100644 --- a/curriculum/challenges/espanol/14-responsive-web-design-22/learn-css-variables-by-building-a-city-skyline/5d822fd413a79914d39e9932.md +++ b/curriculum/challenges/espanol/14-responsive-web-design-22/learn-css-variables-by-building-a-city-skyline/5d822fd413a79914d39e9932.md @@ -7,29 +7,29 @@ dashedName: step-104 # --description-- -On to the next building! It's the green one in the foreground. Give it a `repeating-linear-gradient` with your building color from `0%` to `5%`, and `transparent` from `5%` to `10%`. +¡Vamos al siguiente edificio! Es el verde en primer plano. Dale un `repeating-linear-gradient` con el color de tu edificio de `0%` a `5%` y `transparent` de `5%` a `10%`. # --hints-- -You should give `.fb5` a `background` property. +Debe asignar a `.fb5` una propiedad `background`. ```js assert.isNotEmpty(new __helpers.CSSHelp(document).getStyle(".fb5")?.background); ``` -You should give the `background` a `repeating-linear-gradient`. +Debe dar al `background` un `repeating-linear-gradient`. ```js assert.include(new __helpers.CSSHelp(document).getStyle(".fb5")?.background, "repeating-linear-gradient"); ``` -You should give the `repeating-linear-gradient` a first color of `--building-color2` from `0%` to `5%`. +Debe dar al `repeating-linear-gradient` un primer color de `--building-color2` de `0%` a `5%`. ```js assert.match(new __helpers.CSSHelp(document).getStyle(".fb5")?.getPropVal('background', true), /repeating-linear-gradient\(var\(--building-color2\)(0%)?,var\(--building-color2\)5%/); ``` -You should give the `repeating-linear-gradient` a second color of `transparent` from `5%` to `10%`. +Debe dar al `repeating-linear-gradient` un segundo color de `transparent` de `5%` a `10%`. ```js assert.match(new __helpers.CSSHelp(document).getStyle(".fb5")?.getPropVal('background', true), /repeating-linear-gradient\(var\(--building-color2\)(0%)?,var\(--building-color2\)5%,transparent5%,transparent10%\)/); diff --git a/curriculum/challenges/espanol/14-responsive-web-design-22/learn-css-variables-by-building-a-city-skyline/5d822fd413a79914d39e9933.md b/curriculum/challenges/espanol/14-responsive-web-design-22/learn-css-variables-by-building-a-city-skyline/5d822fd413a79914d39e9933.md index 8a4d1de6abf..92418cd0075 100644 --- a/curriculum/challenges/espanol/14-responsive-web-design-22/learn-css-variables-by-building-a-city-skyline/5d822fd413a79914d39e9933.md +++ b/curriculum/challenges/espanol/14-responsive-web-design-22/learn-css-variables-by-building-a-city-skyline/5d822fd413a79914d39e9933.md @@ -7,29 +7,29 @@ dashedName: step-105 # --description-- -Add another `repeating-linear-gradient` below the one you just added. Give it a `90deg` direction, use your building color from `0%` to `12%` and window color `12%` to `44%`. This will make a bunch of rectangle windows. +Agregue otro `repeating-linear-gradient` debajo del que acaba de agregar. Dale una dirección de `90deg`, usa el color de tu edificio de `0%` a `12%` y el color de la ventana `12%` a `44%`. Esto hará un montón de ventanas rectangulares. # --hints-- -You should give `.fb5` a second `repeating-linear-gradient` in the `background` property. +Debes darle a `.fb5` un segundo `repeating-linear-gradient` en la propiedad `background`. ```js assert.match(new __helpers.CSSHelp(document).getStyle(".fb5")?.getPropVal('background', true), /repeating-linear-gradient\(var\(--building-color2\)(0%)?,var\(--building-color2\)5%,transparent5%,transparent10%\),repeating-linear-gradient/); ``` -You should give the second `repeating-linear-gradient` a direction of `90deg`. +Debes darle al segundo `repeating-linear-gradient` una dirección de `90deg`. ```js assert.match(new __helpers.CSSHelp(document).getStyle(".fb5")?.getPropVal('background', true), /repeating-linear-gradient\(var\(--building-color2\)(0%)?,var\(--building-color2\)5%,transparent5%,transparent10%\),repeating-linear-gradient\(90deg/); ``` -You should give the second `repeating-linear-gradient` a first color of `--building-color2` from `0%` to `12%`. +Debes darle al segundo `repeating-linear-gradient` un primer color de `--building-color2` de `0%` a `12%`. ```js assert.match(new __helpers.CSSHelp(document).getStyle(".fb5")?.getPropVal('background', true), /repeating-linear-gradient\(var\(--building-color2\)(0%)?,var\(--building-color2\)5%,transparent5%,transparent10%\),repeating-linear-gradient\(90deg,var\(--building-color2\)(0%)?,var\(--building-color2\)12%/); ``` -You should give the second `repeating-linear-gradient` a second color of `--window-color2` from `12%` to `44%`. +Debes darle al segundo `repeating-linear-gradient` un segundo color de `--window-color2` de `12%` a `44%`. ```js assert.match(new __helpers.CSSHelp(document).getStyle(".fb5")?.getPropVal('background', true), /repeating-linear-gradient\(var\(--building-color2\)(0%)?,var\(--building-color2\)5%,transparent5%,transparent10%\),repeating-linear-gradient\(90deg,var\(--building-color2\)(0%)?,var\(--building-color2\)12%,var\(--window-color2\)12%,var\(--window-color2\)44%\)/); diff --git a/curriculum/challenges/espanol/14-responsive-web-design-22/learn-css-variables-by-building-a-city-skyline/5d822fd413a79914d39e9934.md b/curriculum/challenges/espanol/14-responsive-web-design-22/learn-css-variables-by-building-a-city-skyline/5d822fd413a79914d39e9934.md index 1ce9a7edf5b..6931681297c 100644 --- a/curriculum/challenges/espanol/14-responsive-web-design-22/learn-css-variables-by-building-a-city-skyline/5d822fd413a79914d39e9934.md +++ b/curriculum/challenges/espanol/14-responsive-web-design-22/learn-css-variables-by-building-a-city-skyline/5d822fd413a79914d39e9934.md @@ -7,29 +7,29 @@ dashedName: step-107 # --description-- -Finally! You made it to the last building! Add a repeating gradient to it with a `90deg` direction. Use the building color from `0%` to `10%` and `transparent` from `10%` to `30%`. +¡Finalmente! ¡Llegaste al último edificio! Agregue un degradado repetitivo con una dirección de `90deg`. Utilice el color de construcción de `0%` a `10%` y `transparent` de `10%` a `30%`. # --hints-- -You should add a `repeating-linear-gradient` to `.fb6` in the `background` property. +Debe agregar un `repeating-linear-gradient` a `.fb6` en la propiedad `background`. ```js assert.include(new __helpers.CSSHelp(document).getStyle(".fb6")?.background, "repeating-linear-gradient"); ``` -You should give the `repeating-linear-gradient` a direction of `90deg`. +Debe dar al `repeating-linear-gradient` una dirección de `90deg`. ```js assert.include(new __helpers.CSSHelp(document).getStyle(".fb6")?.getPropVal('background', true), "repeating-linear-gradient(90deg"); ``` -You should give the `repeating-linear-gradient` a first color of `--building-color3` from `0%` to `10%`. +Debe dar al `repeating-linear-gradient` un primer color de `--building-color3` de `0%` a `10%`. ```js assert.match(new __helpers.CSSHelp(document).getStyle(".fb6")?.getPropVal('background', true), /repeating-linear-gradient\(90deg,var\(--building-color3\)(0%)?,var\(--building-color3\)10%/); ``` -You should give the `repeating-linear-gradient` a second color of `transparent` from `10%` to `30%`. +Debe dar al `repeating-linear-gradient` un segundo color de `transparent` de `10%` a `30%`. ```js assert.match(new __helpers.CSSHelp(document).getStyle(".fb6")?.getPropVal('background', true), /repeating-linear-gradient\(90deg,var\(--building-color3\)(0%)?,var\(--building-color3\)10%,transparent10%,transparent30%\)/); diff --git a/curriculum/challenges/espanol/14-responsive-web-design-22/learn-css-variables-by-building-a-city-skyline/5d822fd413a79914d39e9935.md b/curriculum/challenges/espanol/14-responsive-web-design-22/learn-css-variables-by-building-a-city-skyline/5d822fd413a79914d39e9935.md index 6cf439e7252..e3a3410c42e 100644 --- a/curriculum/challenges/espanol/14-responsive-web-design-22/learn-css-variables-by-building-a-city-skyline/5d822fd413a79914d39e9935.md +++ b/curriculum/challenges/espanol/14-responsive-web-design-22/learn-css-variables-by-building-a-city-skyline/5d822fd413a79914d39e9935.md @@ -7,23 +7,23 @@ dashedName: step-108 # --description-- -Add another repeating gradient to this building; make it the same as the one you just added, except don't add the `90deg` direction and use your window color instead of the two `transparent` colors. +Agregue otro degradado repetitivo a este edificio; Hágalo igual que el que acaba de agregar, excepto que no agregue la dirección `90deg` y use el color de la ventana en lugar de los dos colores `transparent`. # --hints-- -You should give `.fb6` a second `repeating-linear-gradient` in the `background` property. +Debe asignar a `.fb6` un segundo `repeating-linear-gradient` en la propiedad `background`. ```js assert.match(new __helpers.CSSHelp(document).getStyle(".fb6")?.getPropVal('background', true), /repeating-linear-gradient\(90deg,var\(--building-color3\)(0%)?,var\(--building-color3\)10%,transparent10%,transparent30%\),repeating-linear-gradient/); ``` -You should give the second `repeating-linear-gradient` a first color of `--building-color3` from `0%` to `10%`. +Debe dar al segundo `repeating-linear-gradient` un primer color de `--building-color3` de `0%` a `10%`. ```js assert.match(new __helpers.CSSHelp(document).getStyle(".fb6")?.getPropVal('background', true), /repeating-linear-gradient\(90deg,var\(--building-color3\)(0%)?,var\(--building-color3\)10%,transparent10%,transparent30%\),repeating-linear-gradient\(var\(--building-color3\)(0%)?,var\(--building-color3\)10%/); ``` -You should give the second `repeating-linear-gradient` a second color of `--window-color3` from `10%` to `30%`. +Debe dar al segundo `repeating-linear-gradient` un segundo color de `--window-color3` de `10%` a `30%`. ```js assert.match(new __helpers.CSSHelp(document).getStyle(".fb6")?.getPropVal('background', true), /repeating-linear-gradient\(90deg,var\(--building-color3\)(0%)?,var\(--building-color3\)10%,transparent10%,transparent30%\),repeating-linear-gradient\(var\(--building-color3\)(0%)?,var\(--building-color3\)10%,var\(--window-color3\)10%,var\(--window-color3\)30%\)/); diff --git a/curriculum/challenges/espanol/14-responsive-web-design-22/learn-css-variables-by-building-a-city-skyline/5d822fd413a79914d39e9936.md b/curriculum/challenges/espanol/14-responsive-web-design-22/learn-css-variables-by-building-a-city-skyline/5d822fd413a79914d39e9936.md index 28d42e7e714..ae14d6d1cdb 100644 --- a/curriculum/challenges/espanol/14-responsive-web-design-22/learn-css-variables-by-building-a-city-skyline/5d822fd413a79914d39e9936.md +++ b/curriculum/challenges/espanol/14-responsive-web-design-22/learn-css-variables-by-building-a-city-skyline/5d822fd413a79914d39e9936.md @@ -7,11 +7,11 @@ dashedName: step-110 # --description-- -Okay, the buildings are done. Go back to the `*` selector and remove the `border` you applied to everything at the beginning and the buildings will come together. +Está bien, los edificios están hechos. Vuelva al selector `*` y elimine el `border` que aplicó a todo al principio y los edificios se unirán. # --hints-- -You should remove the `border` from the `*` selector. +Debe eliminar el `border` del selector `*`. ```js assert.isEmpty(new __helpers.CSSHelp(document).getStyle("*")?.border); diff --git a/curriculum/challenges/espanol/14-responsive-web-design-22/learn-css-variables-by-building-a-city-skyline/5d822fd413a79914d39e9937.md b/curriculum/challenges/espanol/14-responsive-web-design-22/learn-css-variables-by-building-a-city-skyline/5d822fd413a79914d39e9937.md index d831b785913..a30467751d3 100644 --- a/curriculum/challenges/espanol/14-responsive-web-design-22/learn-css-variables-by-building-a-city-skyline/5d822fd413a79914d39e9937.md +++ b/curriculum/challenges/espanol/14-responsive-web-design-22/learn-css-variables-by-building-a-city-skyline/5d822fd413a79914d39e9937.md @@ -7,11 +7,11 @@ dashedName: step-111 # --description-- -Add `sky` as a second class to the `.background-buildings` element. You are going to make a background for the skyline. +Agregue `sky` como una segunda clase al elemento `.background-buildings`. Vas a hacer un fondo para el horizonte. # --hints-- -You should add a class of `sky` to `.background-buildings`. +Debe agregar una clase de `sky` a `.background-buildings`. ```js assert.exists(document.querySelector("div.background-buildings.sky")); diff --git a/curriculum/challenges/espanol/14-responsive-web-design-22/learn-css-variables-by-building-a-city-skyline/5d822fd413a79914d39e9938.md b/curriculum/challenges/espanol/14-responsive-web-design-22/learn-css-variables-by-building-a-city-skyline/5d822fd413a79914d39e9938.md index cad20e2b3f3..5f49e710e57 100644 --- a/curriculum/challenges/espanol/14-responsive-web-design-22/learn-css-variables-by-building-a-city-skyline/5d822fd413a79914d39e9938.md +++ b/curriculum/challenges/espanol/14-responsive-web-design-22/learn-css-variables-by-building-a-city-skyline/5d822fd413a79914d39e9938.md @@ -7,29 +7,29 @@ dashedName: step-112 # --description-- -Give the `sky` class a `radial-gradient`. Use `#ffcf33` from `0%` to `20%`, `#ffff66` at `21%`, and `#bbeeff` at `100%`. This will add circular gradient to the background that will be your sun. +Dale a la clase `sky` un `radial-gradient`. Usa `#ffcf33` del `0%` al `20%`, `#ffff66` al `21%` y `#bbeeff` en `100%`. Esto agregará un degradado circular al fondo que será tu sol. # --hints-- -You should give `.sky` a `radial-gradient` in the `background` property. +Debe asignar a `.sky` un `radial-gradient` en la propiedad `background`. ```js assert.include(new __helpers.CSSHelp(document).getStyle(".sky")?.background, "radial-gradient"); ``` -You should give the `radial-gradient` a first color of `#ffcf33`. +Debe dar al `radial-gradient` un primer color de `#ffcf33`. ```js assert.match(new __helpers.CSSHelp(document).getStyle(".sky")?.background, /radial-gradient\(rgb\(255, 207, 51\)( 0%)?, rgb\(255, 207, 51\) 20%/); ``` -You should give the `radial-gradient` a second color of `#ffff66` at `21%`. +Debes darle al `radial-gradient` un segundo color de `#ffff66` al `21%`. ```js assert.match(new __helpers.CSSHelp(document).getStyle(".sky")?.background, /radial-gradient\(rgb\(255, 207, 51\)( 0%)?, rgb\(255, 207, 51\) 20%, rgb\(255, 255, 102\) 21%/); ``` -You should give the `radial-gradient` a third color of `#bbeeff` at `100%`. +Debe darle al `radial-gradient` un tercer color de `#bbeeff` en `100%`. ```js assert.match(new __helpers.CSSHelp(document).getStyle(".sky")?.background, /radial-gradient\(rgb\(255, 207, 51\)( 0%)?, rgb\(255, 207, 51\) 20%, rgb\(255, 255, 102\) 21%, rgb\(187, 238, 255\) 100%\)/); diff --git a/curriculum/challenges/espanol/14-responsive-web-design-22/learn-css-variables-by-building-a-city-skyline/5d822fd413a79914d39e9939.md b/curriculum/challenges/espanol/14-responsive-web-design-22/learn-css-variables-by-building-a-city-skyline/5d822fd413a79914d39e9939.md index 6e87f918ebe..00cf5744bc3 100644 --- a/curriculum/challenges/espanol/14-responsive-web-design-22/learn-css-variables-by-building-a-city-skyline/5d822fd413a79914d39e9939.md +++ b/curriculum/challenges/espanol/14-responsive-web-design-22/learn-css-variables-by-building-a-city-skyline/5d822fd413a79914d39e9939.md @@ -7,11 +7,11 @@ dashedName: step-113 # --description-- -At the top of the sky gradient color list, where you would put a direction for the gradient; add `circle closest-corner at 15% 15%,`. This will move the start of the gradient to `15%` from the top and left. It will make it end at the `closest-corner` and it will maintain a `circle` shape. These are some keywords built into gradients to describe how it behaves. +En la parte superior de la lista de colores del degradado del cielo, donde pondrías una dirección para el degradado; Agregue `circle closest-corner at 15% 15%,`. Esto moverá el inicio del degradado a `15%` desde la parte superior e izquierda. Hará que termine en la `closest-corner` y mantendrá una forma de `circle`. Estas son algunas palabras clave integradas en gradientes para describir cómo se comporta. # --hints-- -You should give the `.sky` `radial-gradient` a direction of `circle closest-corner at 15% 15%`. +Debes darle a `.sky` `radial-gradient` una dirección de `circle closest-corner at 15% 15%`. ```js assert.match(new __helpers.CSSHelp(document).getStyle(".sky")?.background, /radial-gradient\(circle closest-corner at 15% 15%, rgb\(255, 207, 51\)|( 0%), rgb\(255, 207, 51\) 20%, rgb\(255, 255, 102\) 21%, rgb\(187, 238, 255\) 100%\)/); diff --git a/curriculum/challenges/espanol/14-responsive-web-design-22/learn-css-variables-by-building-a-city-skyline/5d822fd413a79914d39e993a.md b/curriculum/challenges/espanol/14-responsive-web-design-22/learn-css-variables-by-building-a-city-skyline/5d822fd413a79914d39e993a.md index abbe219de48..55ba3ff5f3f 100644 --- a/curriculum/challenges/espanol/14-responsive-web-design-22/learn-css-variables-by-building-a-city-skyline/5d822fd413a79914d39e993a.md +++ b/curriculum/challenges/espanol/14-responsive-web-design-22/learn-css-variables-by-building-a-city-skyline/5d822fd413a79914d39e993a.md @@ -7,7 +7,7 @@ dashedName: step-114 # --description-- -A media query can be used to change styles based on certain conditions, and they look like this: +Una consulta de medios se puede usar para cambiar estilos en función de ciertas condiciones, y se ven así: ```css @media (condition) { @@ -15,11 +15,11 @@ A media query can be used to change styles based on certain conditions, and they } ``` -Add an empty media query at the bottom of your stylesheet with a condition of `max-width: 1000px`. Styles added in here will take effect when the document size is 1000px wide or less. +Agregue una consulta multimedia vacía en la parte inferior de la hoja de estilos con una condición de `max-width: 1000px`. Los estilos agregados aquí surtirán efecto cuando el tamaño del documento sea de 1000px de ancho o menos. # --hints-- -You should add an empty media query with `max-width: 1000px`. +Debe agregar una consulta de medios vacía con `max-width: 1000px`. ```js assert.equal(new __helpers.CSSHelp(document).getCSSRules("media")?.[0]?.media?.mediaText, '(max-width: 1000px)'); diff --git a/curriculum/challenges/espanol/14-responsive-web-design-22/learn-css-variables-by-building-a-city-skyline/5d822fd413a79914d39e993b.md b/curriculum/challenges/espanol/14-responsive-web-design-22/learn-css-variables-by-building-a-city-skyline/5d822fd413a79914d39e993b.md index f8d6b1d6131..517faddcf01 100644 --- a/curriculum/challenges/espanol/14-responsive-web-design-22/learn-css-variables-by-building-a-city-skyline/5d822fd413a79914d39e993b.md +++ b/curriculum/challenges/espanol/14-responsive-web-design-22/learn-css-variables-by-building-a-city-skyline/5d822fd413a79914d39e993b.md @@ -7,19 +7,19 @@ dashedName: step-115 # --description-- -Copy and paste your whole `sky` class along with all of its properties and values into the media query. You are going to make another color scheme for the skyline that changes it from day to night. +Copie y pegue toda su clase `sky` junto con todas sus propiedades y valores en la consulta de medios. Vas a hacer otro esquema de color para el horizonte que lo cambie de día a noche. -Note: You are going to need to scroll past the editable region to copy the class. +Nota: Deberá desplazarse más allá de la región editable para copiar la clase. # --hints-- -You should not delete the existing `.sky` declaration. +No debe eliminar la declaración `.sky` existente. ```js assert.match(new __helpers.CSSHelp(document).getStyle(".sky")?.getPropVal('background', true), /radial-gradient\(circleclosest-cornerat15%15%,rgb\(255,207,51\)(0%)?,rgb\(255,207,51\)20%,rgb\(255,255,102\)21%,rgb\(187,238,255\)100%\)/); ``` -You should copy the existing `.sky` declaration into the media query. +Debe copiar la declaración `.sky` existente en la consulta de medios. ```js assert.match(new __helpers.CSSHelp(document).getRuleListsWithinMedia("(max-width: 1000px)")?.find(x => x.selectorText===".sky")?.style?.background, /radial-gradient\(\s*circle\s+closest-corner\s+at\s+15%\s+15%\s*,\s+rgb\(\s*255\s*,\s*207\s*,\s*51\s*\)\s*(0%)?\s*,\s*rgb\(\s*255\s*,\s*207\s*,\s*51\s*\)\s+20%\s*,\s*rgb\(\s*255\s*,\s*255\s*,\s*102\s*\)\s+21%\s*,\s*rgb\(\s*187\s*,\s*238\s*,\s*255\s*\)\s+100%\s*\)/); diff --git a/curriculum/challenges/espanol/14-responsive-web-design-22/learn-css-variables-by-building-a-city-skyline/5d822fd413a79914d39e993c.md b/curriculum/challenges/espanol/14-responsive-web-design-22/learn-css-variables-by-building-a-city-skyline/5d822fd413a79914d39e993c.md index 627f133a134..c24830be4f2 100644 --- a/curriculum/challenges/espanol/14-responsive-web-design-22/learn-css-variables-by-building-a-city-skyline/5d822fd413a79914d39e993c.md +++ b/curriculum/challenges/espanol/14-responsive-web-design-22/learn-css-variables-by-building-a-city-skyline/5d822fd413a79914d39e993c.md @@ -7,23 +7,23 @@ dashedName: step-116 # --description-- -In the `sky` class of the media query, change the two `#ffcf33` color values to `#ccc`, the `#ffff66` to `#445`, and the `#bbeeff` to `#223`. Then you can resize your window to see the background change colors. +En la clase `sky` de la consulta de medios, cambie los dos valores de color `#ffcf33` a `#ccc`, el `#ffff66` a `#445`, y `#bbeeff` a `#223`. Luego puede cambiar el tamaño de su ventana para ver los colores de cambio de fondo. # --hints-- -You should change the first color values from `#ffcf33` to `#ccc`. +Debe cambiar los primeros valores de color de `#ffcf33` a `#ccc`. ```js assert.match(new __helpers.CSSHelp(document).getRuleListsWithinMedia("(max-width: 1000px)")?.find(x => x.selectorText===".sky")?.style?.background, /radial-gradient\(\s*circle\s+closest-corner\s+at\s+15%\s+15%\s*,\s+rgb\(\s*204\s*,\s*204\s*,\s*204\s*\)\s*(0%)?\s*,\s*rgb\(\s*204\s*,\s*204\s*,\s*204\s*\)\s+20%/); ``` -You should change the second color value from `#ffff66` to `#445`. +Debe cambiar el valor del segundo color de `#ffff66` a `#445`. ```js assert.match(new __helpers.CSSHelp(document).getRuleListsWithinMedia("(max-width: 1000px)")?.find(x => x.selectorText===".sky")?.style?.background, /radial-gradient\(\s*circle\s+closest-corner\s+at\s+15%\s+15%\s*,\s+rgb\(\s*204\s*,\s*204\s*,\s*204\s*\)\s*(0%)?\s*,\s*rgb\(\s*204\s*,\s*204\s*,\s*204\s*\)\s+20%\s*,\s*rgb\(\s*68\s*,\s*68\s*,\s*85\s*\)\s+21%/); ``` -You should change the third color value from `#bbeeff` to `#223`. +Debe cambiar el valor del tercer color de `#bbeeff` a `#223`. ```js assert.match(new __helpers.CSSHelp(document).getRuleListsWithinMedia("(max-width: 1000px)")?.find(x => x.selectorText===".sky")?.style?.background, /radial-gradient\(\s*circle\s+closest-corner\s+at\s+15%\s+15%\s*,\s+rgb\(\s*204\s*,\s*204\s*,\s*204\s*\)\s*(0%)?\s*,\s*rgb\(\s*204\s*,\s*204\s*,\s*204\s*\)\s+20%\s*,\s*rgb\(\s*68\s*,\s*68\s*,\s*85\s*\)\s+21%\s*,\s*rgb\(\s*34\s*,\s*34\s*,\s*51\s*\)\s+100%\s*\)/); diff --git a/curriculum/challenges/espanol/14-responsive-web-design-22/learn-css-variables-by-building-a-city-skyline/5d822fd413a79914d39e993d.md b/curriculum/challenges/espanol/14-responsive-web-design-22/learn-css-variables-by-building-a-city-skyline/5d822fd413a79914d39e993d.md index ec7873fbdcb..eb9f179932e 100644 --- a/curriculum/challenges/espanol/14-responsive-web-design-22/learn-css-variables-by-building-a-city-skyline/5d822fd413a79914d39e993d.md +++ b/curriculum/challenges/espanol/14-responsive-web-design-22/learn-css-variables-by-building-a-city-skyline/5d822fd413a79914d39e993d.md @@ -7,35 +7,35 @@ dashedName: step-117 # --description-- -Add a `:root` selector to the top of your media query. Then redefine all four of the `--building-color` variables to use the value `#000` there. +Agregue un selector `:root` en la parte superior de su consulta de medios. Luego redefina las cuatro variables `--building-color` para usar el valor `#000` allí. # --hints-- -You should add a `:root` selector to the media query. +Debe agregar un selector `:root` a la consulta de medios. ```js assert.notDeepEqual(new __helpers.CSSHelp(document).getRuleListsWithinMedia("(max-width: 1000px)")?.find(x=>x.selectorText === ":root"), undefined); ``` -You should add `--building-color1` with a value of `#000`. +Debe agregar `--building-color1` con un valor de `#000`. ```js assert.equal(new __helpers.CSSHelp(document).getRuleListsWithinMedia("(max-width: 1000px)")?.find(x=>x.selectorText === ":root")?.style?.getPropertyValue("--building-color1")?.trim(), "#000"); ``` -You should add `--building-color2` with a value of `#000`. +Debe agregar `--building-color2` con un valor de `#000`. ```js assert.equal(new __helpers.CSSHelp(document).getRuleListsWithinMedia("(max-width: 1000px)")?.find(x=>x.selectorText === ":root")?.style?.getPropertyValue("--building-color2")?.trim(), "#000"); ``` -You should add `--building-color3` with a value of `#000`. +Debe agregar `--building-color3` con un valor de `#000`. ```js assert.equal(new __helpers.CSSHelp(document).getRuleListsWithinMedia("(max-width: 1000px)")?.find(x=>x.selectorText === ":root")?.style?.getPropertyValue("--building-color3")?.trim(), "#000"); ``` -You should add `--building-color4` with a value of `#000`. +Debe agregar `--building-color4` con un valor de `#000`. ```js assert.equal(new __helpers.CSSHelp(document).getRuleListsWithinMedia("(max-width: 1000px)")?.find(x=>x.selectorText === ":root")?.style?.getPropertyValue("--building-color4")?.trim(), "#000"); diff --git a/curriculum/challenges/espanol/14-responsive-web-design-22/learn-css-variables-by-building-a-city-skyline/5d822fd413a79914d39e993e.md b/curriculum/challenges/espanol/14-responsive-web-design-22/learn-css-variables-by-building-a-city-skyline/5d822fd413a79914d39e993e.md index 5c7ce18da09..5ad9ad9a6cf 100644 --- a/curriculum/challenges/espanol/14-responsive-web-design-22/learn-css-variables-by-building-a-city-skyline/5d822fd413a79914d39e993e.md +++ b/curriculum/challenges/espanol/14-responsive-web-design-22/learn-css-variables-by-building-a-city-skyline/5d822fd413a79914d39e993e.md @@ -7,31 +7,31 @@ dashedName: step-118 # --description-- -Lastly, in the `:root` selector of the media query, redefine all four of the `--window-color` variables to use `#777`. When you're done, resize the window and watch it go from day to night. +Por último, en el selector `:root` de la consulta de medios, redefina las cuatro variables `--window-color` para usar `#777`. Cuando haya terminado, cambie el tamaño de la ventana y observe cómo pasa del día a la noche. -Variables are primarily used with colors, and that's how you used them here. But they can be given any value and used on any property. Your project looks great! +Las variables se usan principalmente con colores, y así es como las usaste aquí. Pero se les puede dar cualquier valor y usar en cualquier propiedad. Tu proyecto se ve genial! # --hints-- -You should add `--window-color1` with a value of `#777`. +Debe agregar `--window-color1` con un valor de `#777`. ```js assert.equal(new __helpers.CSSHelp(document).getRuleListsWithinMedia("(max-width: 1000px)")?.find(x=>x.selectorText === ":root")?.style?.getPropertyValue("--window-color1")?.trim(), "#777"); ``` -You should add `--window-color2` with a value of `#777`. +Debe agregar `--window-color2` con un valor de `#777`. ```js assert.equal(new __helpers.CSSHelp(document).getRuleListsWithinMedia("(max-width: 1000px)")?.find(x=>x.selectorText === ":root")?.style?.getPropertyValue("--window-color2")?.trim(), "#777"); ``` -You should add `--window-color3` with a value of `#777`. +Debe agregar `--window-color3` con un valor de `#777`. ```js assert.equal(new __helpers.CSSHelp(document).getRuleListsWithinMedia("(max-width: 1000px)")?.find(x=>x.selectorText === ":root")?.style?.getPropertyValue("--window-color3")?.trim(), "#777"); ``` -You should add `--window-color4` with a value of `#777`. +Debe agregar `--window-color4` con un valor de `#777`. ```js assert.equal(new __helpers.CSSHelp(document).getRuleListsWithinMedia("(max-width: 1000px)")?.find(x=>x.selectorText === ":root")?.style?.getPropertyValue("--window-color4")?.trim(), "#777"); diff --git a/curriculum/challenges/espanol/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5dc174fcf86c76b9248c6eb2.md b/curriculum/challenges/espanol/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5dc174fcf86c76b9248c6eb2.md index aadefd362d5..862a5d9c6db 100644 --- a/curriculum/challenges/espanol/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5dc174fcf86c76b9248c6eb2.md +++ b/curriculum/challenges/espanol/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5dc174fcf86c76b9248c6eb2.md @@ -47,7 +47,7 @@ El texto de tu elemento `h1` deber ser `CatPhotoApp`. Probablemente olvidaste a assert(document.querySelector('h1').innerText.toLowerCase() === 'catphotoapp'); ``` -You appear to be using a browser extension that is modifying the page. Be sure to turn off all browser extensions. +Parece que está utilizando una extensión del navegador que está modificando la página. Asegúrese de desactivar todas las extensiones del navegador. ```js assert.isAtMost(document.querySelectorAll('script').length, 2); diff --git a/curriculum/challenges/espanol/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5dc2385ff86c76b9248c6eb7.md b/curriculum/challenges/espanol/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5dc2385ff86c76b9248c6eb7.md index 197ef319956..e847d1626cc 100644 --- a/curriculum/challenges/espanol/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5dc2385ff86c76b9248c6eb7.md +++ b/curriculum/challenges/espanol/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5dc2385ff86c76b9248c6eb7.md @@ -25,7 +25,7 @@ Tu elemento `main` debe tener una etiqueta de cierre. Las etiquetas de cierre ti assert(code.match(/<\/main\>/)); ``` -Your `main` element's opening tag should be below the `body` element's opening tag. Los tienes en el orden incorrecto. +La etiqueta de apertura del elemento `main` debe estar debajo de la etiqueta de apertura del elemento `body`. Los tienes en el orden incorrecto. ```js const main = document.querySelector('main'); diff --git a/curriculum/challenges/espanol/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5ef9b03c81a63668521804dc.md b/curriculum/challenges/espanol/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5ef9b03c81a63668521804dc.md index 98d3fa7cdbf..3264c8599a2 100644 --- a/curriculum/challenges/espanol/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5ef9b03c81a63668521804dc.md +++ b/curriculum/challenges/espanol/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5ef9b03c81a63668521804dc.md @@ -51,7 +51,7 @@ Tu nuevo elemento `input` no tiene un atributo `type`. Comprueba que hay un espa assert($('input')[0].hasAttribute('type')); ``` -Your new `input` element should have only one `type` attribute. Remove any extras. +Tu nuevo elemento `input` debe tener solo un atributo `type`. Retire cualquier extra. ```js assert($('input')[0] @@ -61,7 +61,7 @@ assert($('input')[0] ); ``` -Your new `input` element should have a `type` attribute with the value `radio`. You have either omitted the value or have a typo. Remember that attribute values should be surrounded with quotation marks. +Tu nuevo elemento `input` debe tener un atributo `type` con el valor `radio`. Ha omitido el valor o tiene un error tipográfico. Recuerde que los valores de los atributos deben estar entre comillas. ```js assert( @@ -71,20 +71,20 @@ assert( ); ``` -Although you have set the new `input` element's `type` attribute to `radio`, it is recommended to always surround the value of an attribute with quotation marks. +Aunque ha establecido el atributo `type` del nuevo elemento `input` en `radio`, se recomienda encerrar siempre el valor de un atributo entre comillas. ```js assert(!/\<\s*input\s+type\s*=\s*radio/i.test(code)); ``` -The `radio` button's `Indoor` text should be located after it instead of before it. +El texto `Indoor` del botón `radio` debe ubicarse después de él en lugar de antes. ```js const radioInputElem = $('input')[0]; assert(!radioInputElem.previousSibling.nodeValue.match(/Indoor/i)); ``` -The text `Indoor` should be located directly to the right of your `radio` button. You have either omitted the text or have a typo. +El texto `Indoor` debe ubicarse directamente a la derecha de su botón `radio`. Ha omitido el texto o tiene un error tipográfico. ```js const radioInputElem = $('input')[0]; 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 9cbf04ef74e..d2e974d4ee8 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`. -Add a `head` element above the `body` element. +Agregue un elemento `head` sobre el elemento `body`. # --hints-- diff --git a/curriculum/challenges/espanol/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5efae0543cbd2bbdab94e333.md b/curriculum/challenges/espanol/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5efae0543cbd2bbdab94e333.md index d98d798082a..5b9528c57a7 100644 --- a/curriculum/challenges/espanol/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5efae0543cbd2bbdab94e333.md +++ b/curriculum/challenges/espanol/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5efae0543cbd2bbdab94e333.md @@ -7,7 +7,7 @@ dashedName: step-30 # --description-- -To improve accessibility of the image you added, add an `alt` attribute with the text: +Para mejorar la accesibilidad de la imagen que agregó, agregue un atributo `alt` con el texto: `Five cats looking around a field.` diff --git a/curriculum/challenges/espanol/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5f07be6ef7412fbad0c5626b.md b/curriculum/challenges/espanol/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5f07be6ef7412fbad0c5626b.md index 086796dd2f7..5c1a252e7dd 100644 --- a/curriculum/challenges/espanol/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5f07be6ef7412fbad0c5626b.md +++ b/curriculum/challenges/espanol/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5f07be6ef7412fbad0c5626b.md @@ -22,7 +22,7 @@ assert(document.querySelector('section')); Tu elemento `section` debe tener una etiqueta de cierre. Las etiquetas de cierre tiene una `/` después del carácter `<`. ```js -assert(code.match(/<\/section\>/)); +assert(code.match(/<\/section\s*>/i)); ``` El elemento `section` debe estar entre las etiquetas de apertura y cierre del elemento `main`. @@ -57,15 +57,15 @@ assert.isFalse(includesH1); --fcc-editable-region-- -

CatPhotoApp

+

Cat Photos

Click here to view more cat photos.

A cute orange cat lying on its back. -
+ --fcc-editable-region-- diff --git a/curriculum/challenges/espanol/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/62bb4009e3458a128ff57d5d.md b/curriculum/challenges/espanol/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/62bb4009e3458a128ff57d5d.md index 1f7ffe908ce..9cbe103c036 100644 --- a/curriculum/challenges/espanol/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/62bb4009e3458a128ff57d5d.md +++ b/curriculum/challenges/espanol/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/62bb4009e3458a128ff57d5d.md @@ -7,17 +7,17 @@ dashedName: step-69 # --description-- -You can set browser behavior by adding self-closing `meta` elements in the `head`. Here's an example: +Puede configurar el comportamiento del navegador agregando elementos `meta` de cierre automático en el `head`. Aquí hay un ejemplo: ```html ``` -Tell the browser to parse the markup into multiple languages by creating a `meta` element as a child of the `head` element. Establece su atributo `charset` en `UTF-8`. +Indique al navegador que analice el marcado en varios idiomas creando un elemento `meta` como hijo del elemento `head`. Establece su atributo `charset` en `UTF-8`. # --hints-- -You should create a self-closing `meta` element within the `head` element. +Debe crear un elemento `meta` de cierre automático dentro del elemento `head`. ```js assert.exists(document.querySelector('head > meta')); @@ -29,7 +29,7 @@ Debes dar al elemento `meta` un `charset` de `UTF-8`. assert.equal(document.querySelector('head > meta')?.getAttribute('charset')?.toLowerCase(), 'utf-8'); ``` -Your `meta` element should be a self-closing tag, you don't need to add ``. +Su elemento `meta` debe ser una etiqueta de cierre automático, no necesita agregar ``. ```js assert.notMatch(code, /<\/meta\s*>?/i); diff --git a/curriculum/challenges/espanol/14-responsive-web-design-22/learn-html-forms-by-building-a-registration-form/60f5cb8875ab6a0610f05071.md b/curriculum/challenges/espanol/14-responsive-web-design-22/learn-html-forms-by-building-a-registration-form/60f5cb8875ab6a0610f05071.md index ae3a9705bcf..7e6216acf21 100644 --- a/curriculum/challenges/espanol/14-responsive-web-design-22/learn-html-forms-by-building-a-registration-form/60f5cb8875ab6a0610f05071.md +++ b/curriculum/challenges/espanol/14-responsive-web-design-22/learn-html-forms-by-building-a-registration-form/60f5cb8875ab6a0610f05071.md @@ -1,6 +1,6 @@ --- id: 60f5cb8875ab6a0610f05071 -title: Step 13 +title: Paso 13 challengeType: 0 dashedName: step-13 --- diff --git a/curriculum/challenges/espanol/14-responsive-web-design-22/learn-html-forms-by-building-a-registration-form/60f5d2776c854e069560fbe6.md b/curriculum/challenges/espanol/14-responsive-web-design-22/learn-html-forms-by-building-a-registration-form/60f5d2776c854e069560fbe6.md index 3aa9e9c9bb2..2253a7a253c 100644 --- a/curriculum/challenges/espanol/14-responsive-web-design-22/learn-html-forms-by-building-a-registration-form/60f5d2776c854e069560fbe6.md +++ b/curriculum/challenges/espanol/14-responsive-web-design-22/learn-html-forms-by-building-a-registration-form/60f5d2776c854e069560fbe6.md @@ -1,6 +1,6 @@ --- id: 60f5d2776c854e069560fbe6 -title: Step 14 +title: Paso 14 challengeType: 0 dashedName: step-14 --- diff --git a/curriculum/challenges/espanol/14-responsive-web-design-22/learn-html-forms-by-building-a-registration-form/60f5dc35c07ac1078f140916.md b/curriculum/challenges/espanol/14-responsive-web-design-22/learn-html-forms-by-building-a-registration-form/60f5dc35c07ac1078f140916.md index ec8223f7a5b..9b15c2bb217 100644 --- a/curriculum/challenges/espanol/14-responsive-web-design-22/learn-html-forms-by-building-a-registration-form/60f5dc35c07ac1078f140916.md +++ b/curriculum/challenges/espanol/14-responsive-web-design-22/learn-html-forms-by-building-a-registration-form/60f5dc35c07ac1078f140916.md @@ -1,6 +1,6 @@ --- id: 60f5dc35c07ac1078f140916 -title: Step 15 +title: Paso 15 challengeType: 0 dashedName: step-15 --- diff --git a/curriculum/challenges/espanol/14-responsive-web-design-22/learn-html-forms-by-building-a-registration-form/60f803d5241e6a0433a523a1.md b/curriculum/challenges/espanol/14-responsive-web-design-22/learn-html-forms-by-building-a-registration-form/60f803d5241e6a0433a523a1.md index ae593a95b3d..11a05712f40 100644 --- a/curriculum/challenges/espanol/14-responsive-web-design-22/learn-html-forms-by-building-a-registration-form/60f803d5241e6a0433a523a1.md +++ b/curriculum/challenges/espanol/14-responsive-web-design-22/learn-html-forms-by-building-a-registration-form/60f803d5241e6a0433a523a1.md @@ -1,6 +1,6 @@ --- id: 60f803d5241e6a0433a523a1 -title: Step 16 +title: Paso 16 challengeType: 0 dashedName: step-16 --- diff --git a/curriculum/challenges/espanol/14-responsive-web-design-22/learn-html-forms-by-building-a-registration-form/60f805f813eaf2049bc2ceea.md b/curriculum/challenges/espanol/14-responsive-web-design-22/learn-html-forms-by-building-a-registration-form/60f805f813eaf2049bc2ceea.md index 4e7c6c9dd54..cc43d590c47 100644 --- a/curriculum/challenges/espanol/14-responsive-web-design-22/learn-html-forms-by-building-a-registration-form/60f805f813eaf2049bc2ceea.md +++ b/curriculum/challenges/espanol/14-responsive-web-design-22/learn-html-forms-by-building-a-registration-form/60f805f813eaf2049bc2ceea.md @@ -1,6 +1,6 @@ --- id: 60f805f813eaf2049bc2ceea -title: Step 17 +title: Paso 17 challengeType: 0 dashedName: step-17 --- diff --git a/curriculum/challenges/espanol/14-responsive-web-design-22/learn-html-forms-by-building-a-registration-form/60f80e0081e0f2052ae5b505.md b/curriculum/challenges/espanol/14-responsive-web-design-22/learn-html-forms-by-building-a-registration-form/60f80e0081e0f2052ae5b505.md index 5e3a03c4519..4f4f060d112 100644 --- a/curriculum/challenges/espanol/14-responsive-web-design-22/learn-html-forms-by-building-a-registration-form/60f80e0081e0f2052ae5b505.md +++ b/curriculum/challenges/espanol/14-responsive-web-design-22/learn-html-forms-by-building-a-registration-form/60f80e0081e0f2052ae5b505.md @@ -1,6 +1,6 @@ --- id: 60f80e0081e0f2052ae5b505 -title: Step 19 +title: Paso 19 challengeType: 0 dashedName: step-19 --- diff --git a/curriculum/challenges/espanol/14-responsive-web-design-22/learn-html-forms-by-building-a-registration-form/60f81167d0d4910809f88945.md b/curriculum/challenges/espanol/14-responsive-web-design-22/learn-html-forms-by-building-a-registration-form/60f81167d0d4910809f88945.md index 30766c47bb6..ff0122c3ae5 100644 --- a/curriculum/challenges/espanol/14-responsive-web-design-22/learn-html-forms-by-building-a-registration-form/60f81167d0d4910809f88945.md +++ b/curriculum/challenges/espanol/14-responsive-web-design-22/learn-html-forms-by-building-a-registration-form/60f81167d0d4910809f88945.md @@ -1,6 +1,6 @@ --- id: 60f81167d0d4910809f88945 -title: Step 20 +title: Paso 20 challengeType: 0 dashedName: step-20 --- diff --git a/curriculum/challenges/espanol/14-responsive-web-design-22/learn-html-forms-by-building-a-registration-form/60f81616cff80508badf9ad5.md b/curriculum/challenges/espanol/14-responsive-web-design-22/learn-html-forms-by-building-a-registration-form/60f81616cff80508badf9ad5.md index 3aa376e2918..fb8e651550a 100644 --- a/curriculum/challenges/espanol/14-responsive-web-design-22/learn-html-forms-by-building-a-registration-form/60f81616cff80508badf9ad5.md +++ b/curriculum/challenges/espanol/14-responsive-web-design-22/learn-html-forms-by-building-a-registration-form/60f81616cff80508badf9ad5.md @@ -1,6 +1,6 @@ --- id: 60f81616cff80508badf9ad5 -title: Step 21 +title: Paso 21 challengeType: 0 dashedName: step-21 --- diff --git a/curriculum/challenges/espanol/14-responsive-web-design-22/learn-html-forms-by-building-a-registration-form/60f83e7bfc09900959f41e20.md b/curriculum/challenges/espanol/14-responsive-web-design-22/learn-html-forms-by-building-a-registration-form/60f83e7bfc09900959f41e20.md index cabf09907c4..7c45d80f204 100644 --- a/curriculum/challenges/espanol/14-responsive-web-design-22/learn-html-forms-by-building-a-registration-form/60f83e7bfc09900959f41e20.md +++ b/curriculum/challenges/espanol/14-responsive-web-design-22/learn-html-forms-by-building-a-registration-form/60f83e7bfc09900959f41e20.md @@ -1,6 +1,6 @@ --- id: 60f83e7bfc09900959f41e20 -title: Step 22 +title: Paso 22 challengeType: 0 dashedName: step-22 --- diff --git a/curriculum/challenges/espanol/14-responsive-web-design-22/learn-html-forms-by-building-a-registration-form/60f84ec41116b209c280ba91.md b/curriculum/challenges/espanol/14-responsive-web-design-22/learn-html-forms-by-building-a-registration-form/60f84ec41116b209c280ba91.md index 8eb27b269a1..a10d779e3a6 100644 --- a/curriculum/challenges/espanol/14-responsive-web-design-22/learn-html-forms-by-building-a-registration-form/60f84ec41116b209c280ba91.md +++ b/curriculum/challenges/espanol/14-responsive-web-design-22/learn-html-forms-by-building-a-registration-form/60f84ec41116b209c280ba91.md @@ -1,6 +1,6 @@ --- id: 60f84ec41116b209c280ba91 -title: Step 23 +title: Paso 23 challengeType: 0 dashedName: step-23 --- diff --git a/curriculum/challenges/espanol/14-responsive-web-design-22/learn-html-forms-by-building-a-registration-form/60f852f645b5310a8264f555.md b/curriculum/challenges/espanol/14-responsive-web-design-22/learn-html-forms-by-building-a-registration-form/60f852f645b5310a8264f555.md index 13700c8f863..6da077c407a 100644 --- a/curriculum/challenges/espanol/14-responsive-web-design-22/learn-html-forms-by-building-a-registration-form/60f852f645b5310a8264f555.md +++ b/curriculum/challenges/espanol/14-responsive-web-design-22/learn-html-forms-by-building-a-registration-form/60f852f645b5310a8264f555.md @@ -1,6 +1,6 @@ --- id: 60f852f645b5310a8264f555 -title: Step 24 +title: Paso 24 challengeType: 0 dashedName: step-24 --- diff --git a/curriculum/challenges/espanol/14-responsive-web-design-22/learn-html-forms-by-building-a-registration-form/60f85a62fb30c80bcea0cedb.md b/curriculum/challenges/espanol/14-responsive-web-design-22/learn-html-forms-by-building-a-registration-form/60f85a62fb30c80bcea0cedb.md index 31d8fa3bfa1..03ded9b57dd 100644 --- a/curriculum/challenges/espanol/14-responsive-web-design-22/learn-html-forms-by-building-a-registration-form/60f85a62fb30c80bcea0cedb.md +++ b/curriculum/challenges/espanol/14-responsive-web-design-22/learn-html-forms-by-building-a-registration-form/60f85a62fb30c80bcea0cedb.md @@ -1,6 +1,6 @@ --- id: 60f85a62fb30c80bcea0cedb -title: Step 25 +title: Paso 25 challengeType: 0 dashedName: step-25 --- diff --git a/curriculum/challenges/espanol/14-responsive-web-design-22/learn-html-forms-by-building-a-registration-form/60f8604682407e0d017bbf7f.md b/curriculum/challenges/espanol/14-responsive-web-design-22/learn-html-forms-by-building-a-registration-form/60f8604682407e0d017bbf7f.md index f6d9689c33f..0c4b4e3e906 100644 --- a/curriculum/challenges/espanol/14-responsive-web-design-22/learn-html-forms-by-building-a-registration-form/60f8604682407e0d017bbf7f.md +++ b/curriculum/challenges/espanol/14-responsive-web-design-22/learn-html-forms-by-building-a-registration-form/60f8604682407e0d017bbf7f.md @@ -1,6 +1,6 @@ --- id: 60f8604682407e0d017bbf7f -title: Step 26 +title: Paso 26 challengeType: 0 dashedName: step-26 --- diff --git a/curriculum/challenges/espanol/14-responsive-web-design-22/learn-html-forms-by-building-a-registration-form/60f8618d191b940d62038513.md b/curriculum/challenges/espanol/14-responsive-web-design-22/learn-html-forms-by-building-a-registration-form/60f8618d191b940d62038513.md index ce82de00be6..323d067dc38 100644 --- a/curriculum/challenges/espanol/14-responsive-web-design-22/learn-html-forms-by-building-a-registration-form/60f8618d191b940d62038513.md +++ b/curriculum/challenges/espanol/14-responsive-web-design-22/learn-html-forms-by-building-a-registration-form/60f8618d191b940d62038513.md @@ -1,6 +1,6 @@ --- id: 60f8618d191b940d62038513 -title: Step 27 +title: Paso 27 challengeType: 0 dashedName: step-27 --- diff --git a/curriculum/challenges/espanol/14-responsive-web-design-22/learn-html-forms-by-building-a-registration-form/60fab4a123ce4b04526b082b.md b/curriculum/challenges/espanol/14-responsive-web-design-22/learn-html-forms-by-building-a-registration-form/60fab4a123ce4b04526b082b.md index 51591c0c19c..bf41f82763f 100644 --- a/curriculum/challenges/espanol/14-responsive-web-design-22/learn-html-forms-by-building-a-registration-form/60fab4a123ce4b04526b082b.md +++ b/curriculum/challenges/espanol/14-responsive-web-design-22/learn-html-forms-by-building-a-registration-form/60fab4a123ce4b04526b082b.md @@ -1,6 +1,6 @@ --- id: 60fab4a123ce4b04526b082b -title: Step 28 +title: Paso 28 challengeType: 0 dashedName: step-28 --- diff --git a/curriculum/challenges/espanol/14-responsive-web-design-22/learn-html-forms-by-building-a-registration-form/60fab8367d35de04e5cb7929.md b/curriculum/challenges/espanol/14-responsive-web-design-22/learn-html-forms-by-building-a-registration-form/60fab8367d35de04e5cb7929.md index 0435c7c67df..2ef4125f74f 100644 --- a/curriculum/challenges/espanol/14-responsive-web-design-22/learn-html-forms-by-building-a-registration-form/60fab8367d35de04e5cb7929.md +++ b/curriculum/challenges/espanol/14-responsive-web-design-22/learn-html-forms-by-building-a-registration-form/60fab8367d35de04e5cb7929.md @@ -1,6 +1,6 @@ --- id: 60fab8367d35de04e5cb7929 -title: Step 30 +title: Paso 30 challengeType: 0 dashedName: step-30 --- diff --git a/curriculum/challenges/espanol/14-responsive-web-design-22/learn-html-forms-by-building-a-registration-form/60fab9f17fa294054b74228c.md b/curriculum/challenges/espanol/14-responsive-web-design-22/learn-html-forms-by-building-a-registration-form/60fab9f17fa294054b74228c.md index 07683382f38..7c9eb22a767 100644 --- a/curriculum/challenges/espanol/14-responsive-web-design-22/learn-html-forms-by-building-a-registration-form/60fab9f17fa294054b74228c.md +++ b/curriculum/challenges/espanol/14-responsive-web-design-22/learn-html-forms-by-building-a-registration-form/60fab9f17fa294054b74228c.md @@ -1,6 +1,6 @@ --- id: 60fab9f17fa294054b74228c -title: Step 31 +title: Paso 31 challengeType: 0 dashedName: step-31 --- diff --git a/curriculum/challenges/espanol/14-responsive-web-design-22/learn-html-forms-by-building-a-registration-form/60fabf0dd4959805dbae09e6.md b/curriculum/challenges/espanol/14-responsive-web-design-22/learn-html-forms-by-building-a-registration-form/60fabf0dd4959805dbae09e6.md index 95355af98bb..5a35c23b798 100644 --- a/curriculum/challenges/espanol/14-responsive-web-design-22/learn-html-forms-by-building-a-registration-form/60fabf0dd4959805dbae09e6.md +++ b/curriculum/challenges/espanol/14-responsive-web-design-22/learn-html-forms-by-building-a-registration-form/60fabf0dd4959805dbae09e6.md @@ -1,6 +1,6 @@ --- id: 60fabf0dd4959805dbae09e6 -title: Step 32 +title: Paso 32 challengeType: 0 dashedName: step-32 --- diff --git a/curriculum/challenges/espanol/14-responsive-web-design-22/learn-html-forms-by-building-a-registration-form/60fac4095512d3066053d73c.md b/curriculum/challenges/espanol/14-responsive-web-design-22/learn-html-forms-by-building-a-registration-form/60fac4095512d3066053d73c.md index cf2d96b21ff..a32bbe64efb 100644 --- a/curriculum/challenges/espanol/14-responsive-web-design-22/learn-html-forms-by-building-a-registration-form/60fac4095512d3066053d73c.md +++ b/curriculum/challenges/espanol/14-responsive-web-design-22/learn-html-forms-by-building-a-registration-form/60fac4095512d3066053d73c.md @@ -1,6 +1,6 @@ --- id: 60fac4095512d3066053d73c -title: Step 33 +title: Paso 33 challengeType: 0 dashedName: step-33 --- diff --git a/curriculum/challenges/espanol/14-responsive-web-design-22/learn-html-forms-by-building-a-registration-form/60fac56271087806def55b33.md b/curriculum/challenges/espanol/14-responsive-web-design-22/learn-html-forms-by-building-a-registration-form/60fac56271087806def55b33.md index bd254dfec75..962e6aa1d70 100644 --- a/curriculum/challenges/espanol/14-responsive-web-design-22/learn-html-forms-by-building-a-registration-form/60fac56271087806def55b33.md +++ b/curriculum/challenges/espanol/14-responsive-web-design-22/learn-html-forms-by-building-a-registration-form/60fac56271087806def55b33.md @@ -1,6 +1,6 @@ --- id: 60fac56271087806def55b33 -title: Step 34 +title: Paso 34 challengeType: 0 dashedName: step-34 --- diff --git a/curriculum/challenges/espanol/14-responsive-web-design-22/learn-html-forms-by-building-a-registration-form/60fac8d7fdfaee0796934f20.md b/curriculum/challenges/espanol/14-responsive-web-design-22/learn-html-forms-by-building-a-registration-form/60fac8d7fdfaee0796934f20.md index d6a70de83cd..d8f017152cf 100644 --- a/curriculum/challenges/espanol/14-responsive-web-design-22/learn-html-forms-by-building-a-registration-form/60fac8d7fdfaee0796934f20.md +++ b/curriculum/challenges/espanol/14-responsive-web-design-22/learn-html-forms-by-building-a-registration-form/60fac8d7fdfaee0796934f20.md @@ -1,6 +1,6 @@ --- id: 60fac8d7fdfaee0796934f20 -title: Step 35 +title: Paso 35 challengeType: 0 dashedName: step-35 --- diff --git a/curriculum/challenges/espanol/14-responsive-web-design-22/learn-html-forms-by-building-a-registration-form/60faca286cb48b07f6482970.md b/curriculum/challenges/espanol/14-responsive-web-design-22/learn-html-forms-by-building-a-registration-form/60faca286cb48b07f6482970.md index 6292887830e..b8a2e6b86a9 100644 --- a/curriculum/challenges/espanol/14-responsive-web-design-22/learn-html-forms-by-building-a-registration-form/60faca286cb48b07f6482970.md +++ b/curriculum/challenges/espanol/14-responsive-web-design-22/learn-html-forms-by-building-a-registration-form/60faca286cb48b07f6482970.md @@ -1,6 +1,6 @@ --- id: 60faca286cb48b07f6482970 -title: Step 36 +title: Paso 36 challengeType: 0 dashedName: step-36 --- diff --git a/curriculum/challenges/espanol/14-responsive-web-design-22/learn-html-forms-by-building-a-registration-form/60facde2d0dc61085b41063f.md b/curriculum/challenges/espanol/14-responsive-web-design-22/learn-html-forms-by-building-a-registration-form/60facde2d0dc61085b41063f.md index cdfe7cec9de..086e9d715de 100644 --- a/curriculum/challenges/espanol/14-responsive-web-design-22/learn-html-forms-by-building-a-registration-form/60facde2d0dc61085b41063f.md +++ b/curriculum/challenges/espanol/14-responsive-web-design-22/learn-html-forms-by-building-a-registration-form/60facde2d0dc61085b41063f.md @@ -1,6 +1,6 @@ --- id: 60facde2d0dc61085b41063f -title: Step 37 +title: Paso 37 challengeType: 0 dashedName: step-37 --- diff --git a/curriculum/challenges/espanol/14-responsive-web-design-22/learn-html-forms-by-building-a-registration-form/60facf914c7b9b08d7510c2c.md b/curriculum/challenges/espanol/14-responsive-web-design-22/learn-html-forms-by-building-a-registration-form/60facf914c7b9b08d7510c2c.md index 0d263dee40d..cfd84afd3ff 100644 --- a/curriculum/challenges/espanol/14-responsive-web-design-22/learn-html-forms-by-building-a-registration-form/60facf914c7b9b08d7510c2c.md +++ b/curriculum/challenges/espanol/14-responsive-web-design-22/learn-html-forms-by-building-a-registration-form/60facf914c7b9b08d7510c2c.md @@ -1,6 +1,6 @@ --- id: 60facf914c7b9b08d7510c2c -title: Step 39 +title: Paso 39 challengeType: 0 dashedName: step-39 --- diff --git a/curriculum/challenges/espanol/14-responsive-web-design-22/learn-html-forms-by-building-a-registration-form/60fad0a812d9890938524f50.md b/curriculum/challenges/espanol/14-responsive-web-design-22/learn-html-forms-by-building-a-registration-form/60fad0a812d9890938524f50.md index 986fff7e5c6..99442f1f271 100644 --- a/curriculum/challenges/espanol/14-responsive-web-design-22/learn-html-forms-by-building-a-registration-form/60fad0a812d9890938524f50.md +++ b/curriculum/challenges/espanol/14-responsive-web-design-22/learn-html-forms-by-building-a-registration-form/60fad0a812d9890938524f50.md @@ -1,6 +1,6 @@ --- id: 60fad0a812d9890938524f50 -title: Step 40 +title: Paso 40 challengeType: 0 dashedName: step-40 --- diff --git a/curriculum/challenges/espanol/14-responsive-web-design-22/learn-html-forms-by-building-a-registration-form/60fad1cafcde010995e15306.md b/curriculum/challenges/espanol/14-responsive-web-design-22/learn-html-forms-by-building-a-registration-form/60fad1cafcde010995e15306.md index 4e507ba5476..e425124d8b5 100644 --- a/curriculum/challenges/espanol/14-responsive-web-design-22/learn-html-forms-by-building-a-registration-form/60fad1cafcde010995e15306.md +++ b/curriculum/challenges/espanol/14-responsive-web-design-22/learn-html-forms-by-building-a-registration-form/60fad1cafcde010995e15306.md @@ -1,6 +1,6 @@ --- id: 60fad1cafcde010995e15306 -title: Step 41 +title: Paso 41 challengeType: 0 dashedName: step-41 --- diff --git a/curriculum/challenges/espanol/14-responsive-web-design-22/learn-html-forms-by-building-a-registration-form/60fad6dfcc0d930a59becf12.md b/curriculum/challenges/espanol/14-responsive-web-design-22/learn-html-forms-by-building-a-registration-form/60fad6dfcc0d930a59becf12.md index d3a5baf0360..f7224f31615 100644 --- a/curriculum/challenges/espanol/14-responsive-web-design-22/learn-html-forms-by-building-a-registration-form/60fad6dfcc0d930a59becf12.md +++ b/curriculum/challenges/espanol/14-responsive-web-design-22/learn-html-forms-by-building-a-registration-form/60fad6dfcc0d930a59becf12.md @@ -1,6 +1,6 @@ --- id: 60fad6dfcc0d930a59becf12 -title: Step 42 +title: Paso 42 challengeType: 0 dashedName: step-42 --- diff --git a/curriculum/challenges/espanol/14-responsive-web-design-22/learn-html-forms-by-building-a-registration-form/60fad8e6148f310bba7890b1.md b/curriculum/challenges/espanol/14-responsive-web-design-22/learn-html-forms-by-building-a-registration-form/60fad8e6148f310bba7890b1.md index ec2e6227b77..9b1e2c3ecf8 100644 --- a/curriculum/challenges/espanol/14-responsive-web-design-22/learn-html-forms-by-building-a-registration-form/60fad8e6148f310bba7890b1.md +++ b/curriculum/challenges/espanol/14-responsive-web-design-22/learn-html-forms-by-building-a-registration-form/60fad8e6148f310bba7890b1.md @@ -1,6 +1,6 @@ --- id: 60fad8e6148f310bba7890b1 -title: Step 43 +title: Paso 43 challengeType: 0 dashedName: step-43 --- diff --git a/curriculum/challenges/espanol/14-responsive-web-design-22/learn-html-forms-by-building-a-registration-form/60fad99e09f9d30c1657e790.md b/curriculum/challenges/espanol/14-responsive-web-design-22/learn-html-forms-by-building-a-registration-form/60fad99e09f9d30c1657e790.md index eee160317bf..99c51eaf609 100644 --- a/curriculum/challenges/espanol/14-responsive-web-design-22/learn-html-forms-by-building-a-registration-form/60fad99e09f9d30c1657e790.md +++ b/curriculum/challenges/espanol/14-responsive-web-design-22/learn-html-forms-by-building-a-registration-form/60fad99e09f9d30c1657e790.md @@ -1,6 +1,6 @@ --- id: 60fad99e09f9d30c1657e790 -title: Step 44 +title: Paso 44 challengeType: 0 dashedName: step-44 --- diff --git a/curriculum/challenges/espanol/14-responsive-web-design-22/learn-html-forms-by-building-a-registration-form/60fadb18058e950c73925279.md b/curriculum/challenges/espanol/14-responsive-web-design-22/learn-html-forms-by-building-a-registration-form/60fadb18058e950c73925279.md index 03d5674a796..5fba77bd762 100644 --- a/curriculum/challenges/espanol/14-responsive-web-design-22/learn-html-forms-by-building-a-registration-form/60fadb18058e950c73925279.md +++ b/curriculum/challenges/espanol/14-responsive-web-design-22/learn-html-forms-by-building-a-registration-form/60fadb18058e950c73925279.md @@ -1,6 +1,6 @@ --- id: 60fadb18058e950c73925279 -title: Step 45 +title: Paso 45 challengeType: 0 dashedName: step-45 --- diff --git a/curriculum/challenges/espanol/14-responsive-web-design-22/learn-html-forms-by-building-a-registration-form/60fadce90f85c50d0bb0dd4f.md b/curriculum/challenges/espanol/14-responsive-web-design-22/learn-html-forms-by-building-a-registration-form/60fadce90f85c50d0bb0dd4f.md index 676740ec313..48c4b5c3c1a 100644 --- a/curriculum/challenges/espanol/14-responsive-web-design-22/learn-html-forms-by-building-a-registration-form/60fadce90f85c50d0bb0dd4f.md +++ b/curriculum/challenges/espanol/14-responsive-web-design-22/learn-html-forms-by-building-a-registration-form/60fadce90f85c50d0bb0dd4f.md @@ -1,6 +1,6 @@ --- id: 60fadce90f85c50d0bb0dd4f -title: Step 46 +title: Paso 46 challengeType: 0 dashedName: step-46 --- diff --git a/curriculum/challenges/espanol/14-responsive-web-design-22/learn-html-forms-by-building-a-registration-form/60fadd972e6ffe0d6858fa2d.md b/curriculum/challenges/espanol/14-responsive-web-design-22/learn-html-forms-by-building-a-registration-form/60fadd972e6ffe0d6858fa2d.md index 1755661fb72..5182eb2484c 100644 --- a/curriculum/challenges/espanol/14-responsive-web-design-22/learn-html-forms-by-building-a-registration-form/60fadd972e6ffe0d6858fa2d.md +++ b/curriculum/challenges/espanol/14-responsive-web-design-22/learn-html-forms-by-building-a-registration-form/60fadd972e6ffe0d6858fa2d.md @@ -1,6 +1,6 @@ --- id: 60fadd972e6ffe0d6858fa2d -title: Step 48 +title: Paso 48 challengeType: 0 dashedName: step-48 --- diff --git a/curriculum/challenges/espanol/14-responsive-web-design-22/learn-html-forms-by-building-a-registration-form/60fadfa2b540b70dcfa8b771.md b/curriculum/challenges/espanol/14-responsive-web-design-22/learn-html-forms-by-building-a-registration-form/60fadfa2b540b70dcfa8b771.md index 8af3f3bb956..911018d2665 100644 --- a/curriculum/challenges/espanol/14-responsive-web-design-22/learn-html-forms-by-building-a-registration-form/60fadfa2b540b70dcfa8b771.md +++ b/curriculum/challenges/espanol/14-responsive-web-design-22/learn-html-forms-by-building-a-registration-form/60fadfa2b540b70dcfa8b771.md @@ -1,6 +1,6 @@ --- id: 60fadfa2b540b70dcfa8b771 -title: Step 49 +title: Paso 49 challengeType: 0 dashedName: step-49 --- diff --git a/curriculum/challenges/espanol/14-responsive-web-design-22/learn-html-forms-by-building-a-registration-form/60fc219d333e37046f474a6e.md b/curriculum/challenges/espanol/14-responsive-web-design-22/learn-html-forms-by-building-a-registration-form/60fc219d333e37046f474a6e.md index 0474a73fdda..0018954f04a 100644 --- a/curriculum/challenges/espanol/14-responsive-web-design-22/learn-html-forms-by-building-a-registration-form/60fc219d333e37046f474a6e.md +++ b/curriculum/challenges/espanol/14-responsive-web-design-22/learn-html-forms-by-building-a-registration-form/60fc219d333e37046f474a6e.md @@ -1,6 +1,6 @@ --- id: 60fc219d333e37046f474a6e -title: Step 50 +title: Paso 50 challengeType: 0 dashedName: step-50 --- diff --git a/curriculum/challenges/espanol/14-responsive-web-design-22/learn-html-forms-by-building-a-registration-form/60fc22d1e64d1b04cdd4e602.md b/curriculum/challenges/espanol/14-responsive-web-design-22/learn-html-forms-by-building-a-registration-form/60fc22d1e64d1b04cdd4e602.md index 62e14167caf..78ce2dc867d 100644 --- a/curriculum/challenges/espanol/14-responsive-web-design-22/learn-html-forms-by-building-a-registration-form/60fc22d1e64d1b04cdd4e602.md +++ b/curriculum/challenges/espanol/14-responsive-web-design-22/learn-html-forms-by-building-a-registration-form/60fc22d1e64d1b04cdd4e602.md @@ -1,6 +1,6 @@ --- id: 60fc22d1e64d1b04cdd4e602 -title: Step 51 +title: Paso 51 challengeType: 0 dashedName: step-51 --- diff --git a/curriculum/challenges/espanol/14-responsive-web-design-22/learn-html-forms-by-building-a-registration-form/60fc236dc04532052926fdac.md b/curriculum/challenges/espanol/14-responsive-web-design-22/learn-html-forms-by-building-a-registration-form/60fc236dc04532052926fdac.md index 870f41d8e3a..677fd81fc8e 100644 --- a/curriculum/challenges/espanol/14-responsive-web-design-22/learn-html-forms-by-building-a-registration-form/60fc236dc04532052926fdac.md +++ b/curriculum/challenges/espanol/14-responsive-web-design-22/learn-html-forms-by-building-a-registration-form/60fc236dc04532052926fdac.md @@ -1,6 +1,6 @@ --- id: 60fc236dc04532052926fdac -title: Step 52 +title: Paso 52 challengeType: 0 dashedName: step-52 --- diff --git a/curriculum/challenges/espanol/14-responsive-web-design-22/learn-html-forms-by-building-a-registration-form/60ffe1bc30415f042faea936.md b/curriculum/challenges/espanol/14-responsive-web-design-22/learn-html-forms-by-building-a-registration-form/60ffe1bc30415f042faea936.md index fc25383b3d8..7f0e4cdcbf5 100644 --- a/curriculum/challenges/espanol/14-responsive-web-design-22/learn-html-forms-by-building-a-registration-form/60ffe1bc30415f042faea936.md +++ b/curriculum/challenges/espanol/14-responsive-web-design-22/learn-html-forms-by-building-a-registration-form/60ffe1bc30415f042faea936.md @@ -1,6 +1,6 @@ --- id: 60ffe1bc30415f042faea936 -title: Step 53 +title: Paso 53 challengeType: 0 dashedName: step-53 --- diff --git a/curriculum/challenges/espanol/14-responsive-web-design-22/learn-html-forms-by-building-a-registration-form/60ffe3936796ac04959285a9.md b/curriculum/challenges/espanol/14-responsive-web-design-22/learn-html-forms-by-building-a-registration-form/60ffe3936796ac04959285a9.md index 1f174d3910f..58ceebbb64d 100644 --- a/curriculum/challenges/espanol/14-responsive-web-design-22/learn-html-forms-by-building-a-registration-form/60ffe3936796ac04959285a9.md +++ b/curriculum/challenges/espanol/14-responsive-web-design-22/learn-html-forms-by-building-a-registration-form/60ffe3936796ac04959285a9.md @@ -1,6 +1,6 @@ --- id: 60ffe3936796ac04959285a9 -title: Step 54 +title: Paso 54 challengeType: 0 dashedName: step-54 --- diff --git a/curriculum/challenges/espanol/14-responsive-web-design-22/learn-html-forms-by-building-a-registration-form/60ffe4f4ec18cd04dc470c56.md b/curriculum/challenges/espanol/14-responsive-web-design-22/learn-html-forms-by-building-a-registration-form/60ffe4f4ec18cd04dc470c56.md index d23e2bd0467..e6213bcedb5 100644 --- a/curriculum/challenges/espanol/14-responsive-web-design-22/learn-html-forms-by-building-a-registration-form/60ffe4f4ec18cd04dc470c56.md +++ b/curriculum/challenges/espanol/14-responsive-web-design-22/learn-html-forms-by-building-a-registration-form/60ffe4f4ec18cd04dc470c56.md @@ -1,6 +1,6 @@ --- id: 60ffe4f4ec18cd04dc470c56 -title: Step 55 +title: Paso 55 challengeType: 0 dashedName: step-55 --- diff --git a/curriculum/challenges/espanol/14-responsive-web-design-22/learn-html-forms-by-building-a-registration-form/60ffe69ee377c6055e192a46.md b/curriculum/challenges/espanol/14-responsive-web-design-22/learn-html-forms-by-building-a-registration-form/60ffe69ee377c6055e192a46.md index acb37346adf..e2dc967ad3a 100644 --- a/curriculum/challenges/espanol/14-responsive-web-design-22/learn-html-forms-by-building-a-registration-form/60ffe69ee377c6055e192a46.md +++ b/curriculum/challenges/espanol/14-responsive-web-design-22/learn-html-forms-by-building-a-registration-form/60ffe69ee377c6055e192a46.md @@ -1,6 +1,6 @@ --- id: 60ffe69ee377c6055e192a46 -title: Step 56 +title: Paso 56 challengeType: 0 dashedName: step-56 --- diff --git a/curriculum/challenges/espanol/14-responsive-web-design-22/learn-html-forms-by-building-a-registration-form/60ffe7d8aae62c05bcc9e7eb.md b/curriculum/challenges/espanol/14-responsive-web-design-22/learn-html-forms-by-building-a-registration-form/60ffe7d8aae62c05bcc9e7eb.md index d529a6edda9..a06b03be65f 100644 --- a/curriculum/challenges/espanol/14-responsive-web-design-22/learn-html-forms-by-building-a-registration-form/60ffe7d8aae62c05bcc9e7eb.md +++ b/curriculum/challenges/espanol/14-responsive-web-design-22/learn-html-forms-by-building-a-registration-form/60ffe7d8aae62c05bcc9e7eb.md @@ -1,6 +1,6 @@ --- id: 60ffe7d8aae62c05bcc9e7eb -title: Step 57 +title: Paso 57 challengeType: 0 dashedName: step-57 --- diff --git a/curriculum/challenges/espanol/14-responsive-web-design-22/learn-html-forms-by-building-a-registration-form/60ffe8a5ceb0e90618db06d9.md b/curriculum/challenges/espanol/14-responsive-web-design-22/learn-html-forms-by-building-a-registration-form/60ffe8a5ceb0e90618db06d9.md index b82fa6a2897..33f74065409 100644 --- a/curriculum/challenges/espanol/14-responsive-web-design-22/learn-html-forms-by-building-a-registration-form/60ffe8a5ceb0e90618db06d9.md +++ b/curriculum/challenges/espanol/14-responsive-web-design-22/learn-html-forms-by-building-a-registration-form/60ffe8a5ceb0e90618db06d9.md @@ -1,6 +1,6 @@ --- id: 60ffe8a5ceb0e90618db06d9 -title: Step 58 +title: Paso 58 challengeType: 0 dashedName: step-58 --- diff --git a/curriculum/challenges/espanol/14-responsive-web-design-22/learn-html-forms-by-building-a-registration-form/60ffe947a868ec068f7850f6.md b/curriculum/challenges/espanol/14-responsive-web-design-22/learn-html-forms-by-building-a-registration-form/60ffe947a868ec068f7850f6.md index 7ef80d4207b..92577784a3d 100644 --- a/curriculum/challenges/espanol/14-responsive-web-design-22/learn-html-forms-by-building-a-registration-form/60ffe947a868ec068f7850f6.md +++ b/curriculum/challenges/espanol/14-responsive-web-design-22/learn-html-forms-by-building-a-registration-form/60ffe947a868ec068f7850f6.md @@ -1,6 +1,6 @@ --- id: 60ffe947a868ec068f7850f6 -title: Step 59 +title: Paso 59 challengeType: 0 dashedName: step-59 --- diff --git a/curriculum/challenges/espanol/14-responsive-web-design-22/learn-html-forms-by-building-a-registration-form/60ffe9cb47809106eda2f2c9.md b/curriculum/challenges/espanol/14-responsive-web-design-22/learn-html-forms-by-building-a-registration-form/60ffe9cb47809106eda2f2c9.md index 7c24a865e38..6faa1bc25d2 100644 --- a/curriculum/challenges/espanol/14-responsive-web-design-22/learn-html-forms-by-building-a-registration-form/60ffe9cb47809106eda2f2c9.md +++ b/curriculum/challenges/espanol/14-responsive-web-design-22/learn-html-forms-by-building-a-registration-form/60ffe9cb47809106eda2f2c9.md @@ -1,6 +1,6 @@ --- id: 60ffe9cb47809106eda2f2c9 -title: Step 60 +title: Paso 60 challengeType: 0 dashedName: step-60 --- diff --git a/curriculum/challenges/espanol/14-responsive-web-design-22/learn-html-forms-by-building-a-registration-form/60ffec2825da1007509ddd06.md b/curriculum/challenges/espanol/14-responsive-web-design-22/learn-html-forms-by-building-a-registration-form/60ffec2825da1007509ddd06.md index d3b2ee941bb..504c1d1f298 100644 --- a/curriculum/challenges/espanol/14-responsive-web-design-22/learn-html-forms-by-building-a-registration-form/60ffec2825da1007509ddd06.md +++ b/curriculum/challenges/espanol/14-responsive-web-design-22/learn-html-forms-by-building-a-registration-form/60ffec2825da1007509ddd06.md @@ -1,6 +1,6 @@ --- id: 60ffec2825da1007509ddd06 -title: Step 61 +title: Paso 61 challengeType: 0 dashedName: step-61 --- diff --git a/curriculum/challenges/espanol/14-responsive-web-design-22/learn-html-forms-by-building-a-registration-form/60ffecefac971607ae73c60f.md b/curriculum/challenges/espanol/14-responsive-web-design-22/learn-html-forms-by-building-a-registration-form/60ffecefac971607ae73c60f.md index 9e5b72db439..bdaa0c7e54b 100644 --- a/curriculum/challenges/espanol/14-responsive-web-design-22/learn-html-forms-by-building-a-registration-form/60ffecefac971607ae73c60f.md +++ b/curriculum/challenges/espanol/14-responsive-web-design-22/learn-html-forms-by-building-a-registration-form/60ffecefac971607ae73c60f.md @@ -1,6 +1,6 @@ --- id: 60ffecefac971607ae73c60f -title: Step 62 +title: Paso 62 challengeType: 0 dashedName: step-62 --- diff --git a/curriculum/challenges/espanol/14-responsive-web-design-22/learn-html-forms-by-building-a-registration-form/60ffefd6479a3d084fb77cbc.md b/curriculum/challenges/espanol/14-responsive-web-design-22/learn-html-forms-by-building-a-registration-form/60ffefd6479a3d084fb77cbc.md index 78e5b436239..8702b52a0cd 100644 --- a/curriculum/challenges/espanol/14-responsive-web-design-22/learn-html-forms-by-building-a-registration-form/60ffefd6479a3d084fb77cbc.md +++ b/curriculum/challenges/espanol/14-responsive-web-design-22/learn-html-forms-by-building-a-registration-form/60ffefd6479a3d084fb77cbc.md @@ -1,6 +1,6 @@ --- id: 60ffefd6479a3d084fb77cbc -title: Step 63 +title: Paso 63 challengeType: 0 dashedName: step-63 --- diff --git a/curriculum/challenges/espanol/14-responsive-web-design-22/learn-html-forms-by-building-a-registration-form/62b30924c5e4ef0daba23b5e.md b/curriculum/challenges/espanol/14-responsive-web-design-22/learn-html-forms-by-building-a-registration-form/62b30924c5e4ef0daba23b5e.md index 9ddd22f42a6..50448bc8370 100644 --- a/curriculum/challenges/espanol/14-responsive-web-design-22/learn-html-forms-by-building-a-registration-form/62b30924c5e4ef0daba23b5e.md +++ b/curriculum/challenges/espanol/14-responsive-web-design-22/learn-html-forms-by-building-a-registration-form/62b30924c5e4ef0daba23b5e.md @@ -1,6 +1,6 @@ --- id: 62b30924c5e4ef0daba23b5e -title: Step 47 +title: Paso 47 challengeType: 0 dashedName: step-47 --- diff --git a/curriculum/challenges/espanol/14-responsive-web-design-22/learn-html-forms-by-building-a-registration-form/62ff8b9dab5ac88e4d3d43a3.md b/curriculum/challenges/espanol/14-responsive-web-design-22/learn-html-forms-by-building-a-registration-form/62ff8b9dab5ac88e4d3d43a3.md index 04addb754f8..660055063aa 100644 --- a/curriculum/challenges/espanol/14-responsive-web-design-22/learn-html-forms-by-building-a-registration-form/62ff8b9dab5ac88e4d3d43a3.md +++ b/curriculum/challenges/espanol/14-responsive-web-design-22/learn-html-forms-by-building-a-registration-form/62ff8b9dab5ac88e4d3d43a3.md @@ -1,6 +1,6 @@ --- id: 62ff8b9dab5ac88e4d3d43a3 -title: Step 18 +title: Paso 18 challengeType: 0 dashedName: step-18 --- diff --git a/curriculum/challenges/espanol/14-responsive-web-design-22/learn-html-forms-by-building-a-registration-form/62ff8e998d3e7eae14d6ae3b.md b/curriculum/challenges/espanol/14-responsive-web-design-22/learn-html-forms-by-building-a-registration-form/62ff8e998d3e7eae14d6ae3b.md index 2185a412280..e268e7fb5fd 100644 --- a/curriculum/challenges/espanol/14-responsive-web-design-22/learn-html-forms-by-building-a-registration-form/62ff8e998d3e7eae14d6ae3b.md +++ b/curriculum/challenges/espanol/14-responsive-web-design-22/learn-html-forms-by-building-a-registration-form/62ff8e998d3e7eae14d6ae3b.md @@ -1,6 +1,6 @@ --- id: 62ff8e998d3e7eae14d6ae3b -title: Step 29 +title: Paso 29 challengeType: 0 dashedName: step-29 --- diff --git a/curriculum/challenges/espanol/14-responsive-web-design-22/learn-html-forms-by-building-a-registration-form/62ff919a7b5612c0670923a5.md b/curriculum/challenges/espanol/14-responsive-web-design-22/learn-html-forms-by-building-a-registration-form/62ff919a7b5612c0670923a5.md index c0a188ae93a..6c5b44cf83d 100644 --- a/curriculum/challenges/espanol/14-responsive-web-design-22/learn-html-forms-by-building-a-registration-form/62ff919a7b5612c0670923a5.md +++ b/curriculum/challenges/espanol/14-responsive-web-design-22/learn-html-forms-by-building-a-registration-form/62ff919a7b5612c0670923a5.md @@ -1,6 +1,6 @@ --- id: 62ff919a7b5612c0670923a5 -title: Step 38 +title: Paso 38 challengeType: 0 dashedName: step-38 --- diff --git a/curriculum/challenges/espanol/14-responsive-web-design-22/learn-html-forms-by-building-a-registration-form/63541ef4f96cd82e8e6c788a.md b/curriculum/challenges/espanol/14-responsive-web-design-22/learn-html-forms-by-building-a-registration-form/63541ef4f96cd82e8e6c788a.md index 973feafdabb..f03db592bc0 100644 --- a/curriculum/challenges/espanol/14-responsive-web-design-22/learn-html-forms-by-building-a-registration-form/63541ef4f96cd82e8e6c788a.md +++ b/curriculum/challenges/espanol/14-responsive-web-design-22/learn-html-forms-by-building-a-registration-form/63541ef4f96cd82e8e6c788a.md @@ -1,31 +1,31 @@ --- id: 63541ef4f96cd82e8e6c788a -title: Step 12 +title: Paso 12 challengeType: 0 dashedName: step-12 --- # --description-- -The `method` attribute specifies how to send form-data to the URL specified in the `action` attribute. The form-data can be sent via a `GET` request as URL parameters (with `method="get"`) or via a `POST` request as data in the request body (with `method="post"`). +El atributo `method` especifica cómo enviar datos de formulario a la dirección URL especificada en el atributo `action`. Los datos del formulario se pueden enviar a través de una solicitud `GET` como parámetros de URL (con `method="get"`) o mediante una solicitud `POST` como datos en el cuerpo de la solicitud (con `method="post"`). -Set the `method` attribute to send your form data via a `POST` request. +Establezca el atributo `method` para enviar los datos del formulario a través de una solicitud `POST`. # --hints-- -You shouldn't add a new `form` element. +No debe agregar un nuevo elemento `form`. ```js assert.equal(document.querySelectorAll('form').length, 1 ) ``` -Your `form` element should have a `method` attribute. +El elemento `form` debe tener un atributo `method`. ```js assert.exists(document.querySelector('form')?.getAttribute('method')); ``` -Your `method` attribute should be set to `post`. +El atributo `method` debe establecerse en `post`. ```js assert.equal(document.querySelector('form')?.getAttribute('method'), 'post'); diff --git a/curriculum/challenges/espanol/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c51578.md b/curriculum/challenges/espanol/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c51578.md index 33bb830941b..f8f40397ea1 100644 --- a/curriculum/challenges/espanol/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c51578.md +++ b/curriculum/challenges/espanol/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c51578.md @@ -7,89 +7,89 @@ dashedName: step-1 # --description-- -Start by setting up your HTML structure. Add a `` declaration and an `html` element with a `lang` attribute set to `en`. Within the `html` element, add a `head` element and a `body` element. +Comience configurando su estructura HTML. Agregue una declaración`` y un elemento `html` con un atributo `lang` establecido en `en`. Dentro del elemento `html`, agregue un elemento `head` y un elemento `body`. # --hints-- -Your code should contain the `DOCTYPE` reference. +Su código debe contener la referencia `DOCTYPE`. ```js assert(code.match(/` after the type. +Debe cerrar la declaración `DOCTYPE` con `>` después del tipo. ```js assert(code.match(/html\s*>/gi)); ``` -Your `DOCTYPE` declaration should be at the beginning of your HTML. +Su declaración `DOCTYPE` debe estar al comienzo de su HTML. ```js assert(__helpers.removeHtmlComments(code).match(/^\s*/i)); ``` -Your `html` element should have an opening tag with a `lang` attribute of `en` +Su elemento `html` debe tener una etiqueta de apertura con un atributo `lang` de `en` ```js assert(code.match(//gi)); ``` -Your `html` element should have a closing tag. +Su elemento `html` debe tener una etiqueta de cierre. ```js assert(code.match(/<\/html\s*>/)); ``` -You should have an opening `head` tag. +Debe tener una etiqueta de apertura `head`. ```js assert(code.match(//i)); ``` -You should have a closing `head` tag. +Debe tener una etiqueta de cierre `head`. ```js assert(code.match(/<\/head\s*>/i)); ``` -You should have an opening `body` tag. +Debe tener una etiqueta de apertura `body`. ```js assert(code.match(//i)); ``` -You should have a closing `body` tag. +Debe tener una etiqueta de cierre `body`. ```js assert(code.match(/<\/body\s*>/i)); ``` -The `head` and `body` elements should be siblings. +Los elementos `head` y `body` deben ser hermanos. ```js assert(document.querySelector('head')?.nextElementSibling?.localName === 'body'); ``` -The `head` element should be within the `html` element. +El elemento `head` debe estar dentro del elemento `html`. ```js assert([...document.querySelector('html')?.children].some(x => x?.localName === 'head')); ``` -The `body` element should be within the `html` element. +El elemento `body` debe estar dentro del elemento `html`. ```js assert([...document.querySelector('html')?.children].some(x => x?.localName === 'body')); diff --git a/curriculum/challenges/espanol/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c51579.md b/curriculum/challenges/espanol/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c51579.md index d846f16bbae..8032e27a2e7 100644 --- a/curriculum/challenges/espanol/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c51579.md +++ b/curriculum/challenges/espanol/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c51579.md @@ -7,35 +7,35 @@ dashedName: step-2 # --description-- -Within your `head` element, add a `meta` tag with the `charset` attribute set to `utf-8`. Also add a `title` element with the text `Picasso Painting`. +Dentro de su elemento `head`, agregue una etiqueta `meta` con el atributo `charset` establecido en `utf-8`. Añade también un elemento `title` con el texto `Picasso Painting`. # --hints-- -You should add exactly one `meta` element. +Debe agregar exactamente un elemento `meta`. ```js assert(document.querySelectorAll('meta').length === 1); ``` -Your `meta` element should have a `charset` attribute. +Su elemento `meta` debe tener un atributo `charset`. ```js assert(document.querySelector('meta')?.getAttribute('charset')); ``` -Your `charset` attribute should be set to `utf-8`. +Su atributo `charset` debe establecerse en `utf-8`. ```js assert(document.querySelector('meta')?.getAttribute('charset')?.toLowerCase() === 'utf-8'); ``` -You should add exactly one `title` element. +Debe agregar exactamente un elemento `title`. ```js assert(document.querySelectorAll('title').length === 1); ``` -Your `title` element should have the text `Picasso Painting`. Note that spelling and casing matter. +Tu elemento `title` debe tener el texto `Picasso Painting`. Tenga en cuenta que la ortografía y las mayúsculas son importantes. ```js assert(document.querySelector('title')?.innerText === 'Picasso Painting'); diff --git a/curriculum/challenges/espanol/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c5157a.md b/curriculum/challenges/espanol/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c5157a.md index 5dcdaadfb3c..fb646a0f2b9 100644 --- a/curriculum/challenges/espanol/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c5157a.md +++ b/curriculum/challenges/espanol/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c5157a.md @@ -7,25 +7,25 @@ dashedName: step-4 # --description-- -FontAwesome is a library of SVG-powered icons, many of which are freely available to use. You will be using some of these icons in this project, so you will need to link the external stylesheet to your HTML. +FontAwesome es una biblioteca de iconos basados ​​en SVG, muchos de los cuales están disponibles para su uso de forma gratuita. Utilizará algunos de estos íconos en este proyecto, por lo que deberá vincular la hoja de estilo externa a su HTML. -Add a `link` element with a `rel` of `stylesheet` and an `href` of `https://use.fontawesome.com/releases/v5.8.2/css/all.css`. +Agregue un elemento `link` con un `rel` de `stylesheet` y un `href` de `https://use.fontawesome.com/releases/v5.8.2/css/all.css`. # --hints-- -You should have two `link` elements. +Debes tener dos elementos `link`. ```js assert(document.querySelectorAll('link').length === 2); ``` -Your `link` element should have a `rel` of `stylesheet`. +Su elemento `link` debe tener un `rel` de `stylesheet`. ```js assert(document.querySelectorAll('link')?.[1]?.getAttribute('rel') === 'stylesheet'); ``` -Your `link` element should have an `href` of `https://use.fontawesome.com/releases/v5.8.2/css/all.css`. +Su elemento `link` debe tener un `href` de `https://use.fontawesome.com/releases/v5.8.2/css/all.css`. ```js assert(document.querySelectorAll('link')?.[1]?.getAttribute('href') === 'https://use.fontawesome.com/releases/v5.8.2/css/all.css') diff --git a/curriculum/challenges/espanol/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c5157b.md b/curriculum/challenges/espanol/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c5157b.md index 80072fd18bc..f570b8b84b7 100644 --- a/curriculum/challenges/espanol/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c5157b.md +++ b/curriculum/challenges/espanol/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c5157b.md @@ -7,17 +7,17 @@ dashedName: step-5 # --description-- -To get your painting started, give your `body` element a `background-color` of `rgb(184, 132, 46)`. +Para comenzar a pintar, asigne a su elemento `body` un `background-color` de `rgb(184, 132, 46)`. # --hints-- -You should use the `body` selector. +Debes usar el selector `body`. ```js assert(new __helpers.CSSHelp(document).getStyle('body')); ``` -Your `body` element should have the `background-color` property set to `rgb (184, 132, 46)`. +Su elemento `body` debe tener la propiedad `background-color` establecida en `rgb (184, 132, 46)`. ```js assert(new __helpers.CSSHelp(document).getStyle('body')?.backgroundColor === 'rgb(184, 132, 46)'); diff --git a/curriculum/challenges/espanol/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c5157c.md b/curriculum/challenges/espanol/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c5157c.md index 98106180215..04f4918665a 100644 --- a/curriculum/challenges/espanol/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c5157c.md +++ b/curriculum/challenges/espanol/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c5157c.md @@ -7,17 +7,17 @@ dashedName: step-6 # --description-- -Within your body tag, add a `div` element. Give it an `id` of `back-wall`. +Dentro de su etiqueta de cuerpo, agregue un elemento `div`. Dale un `id` de `back-wall`. # --hints-- -You should add exactly 1 `div` element. +Debe agregar exactamente 1 elemento `div`. ```js assert(document.querySelectorAll('div').length === 1); ``` -Your `div` element should have the `id` value of `back-wall`. +Su elemento `div` debe tener el valor `id` de `back-wall`. ```js assert(document.querySelector('div')?.getAttribute('id') === 'back-wall'); diff --git a/curriculum/challenges/espanol/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c5157d.md b/curriculum/challenges/espanol/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c5157d.md index c7e3135ecb3..4609fe58e7e 100644 --- a/curriculum/challenges/espanol/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c5157d.md +++ b/curriculum/challenges/espanol/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c5157d.md @@ -7,17 +7,17 @@ dashedName: step-7 # --description-- -Use an id selector to give the element with the id `back-wall` a `background-color` of `#8B4513`. +Usa un selector de id para darle al elemento con el id `back-wall` un `background-color` de `#8B4513`. # --hints-- -You should use a `#back-wall` selector. +Debe usar un selector `#back-wall`. ```js assert(new __helpers.CSSHelp(document).getStyle('#back-wall')); ``` -Your `#back-wall` selector should have a `background-color` of `#8B4513`. +Su selector `#back-wall` debe tener un `background-color` de `#8B4513`. ```js assert(new __helpers.CSSHelp(document).getStyle('#back-wall')?.backgroundColor === 'rgb(139, 69, 19)'); diff --git a/curriculum/challenges/espanol/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c5157e.md b/curriculum/challenges/espanol/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c5157e.md index 53345feb40b..0a223910b0d 100644 --- a/curriculum/challenges/espanol/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c5157e.md +++ b/curriculum/challenges/espanol/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c5157e.md @@ -7,17 +7,17 @@ dashedName: step-8 # --description-- -Give the `#back-wall` element a `width` of `100%` and a `height` of `60%`. +Asigne al elemento `#back-wall` un `width` de `100%` y un `height` de `60%`. # --hints-- -You should set the `width` of the `#back-wall` selector to `100%`. +Debe establecer el selector `width` del selector `#back-wall` en `100%`. ```js assert(new __helpers.CSSHelp(document).getStyle('#back-wall')?.width === '100%'); ``` -You should set the `height` of the `#back-wall` selector to `60%`. +Debe establecer el `height` del selector `#back-wall` en `60%`. ```js assert(new __helpers.CSSHelp(document).getStyle('#back-wall')?.height === '60%'); diff --git a/curriculum/challenges/espanol/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c5157f.md b/curriculum/challenges/espanol/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c5157f.md index eafb3d6e4a5..0240ddbc1b3 100644 --- a/curriculum/challenges/espanol/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c5157f.md +++ b/curriculum/challenges/espanol/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c5157f.md @@ -7,28 +7,28 @@ dashedName: step-9 # --description-- -Typically, HTML is rendered in a top-down manner. Elements at the top of the code are positioned at the top of the page. However, many times you may want to move the elements to different positions. You can do this with the `position` property. +Normalmente, HTML se representa de arriba hacia abajo. Los elementos en la parte superior del código se colocan en la parte superior de la página. Sin embargo, muchas veces es posible que desee mover los elementos a diferentes posiciones. Puede hacerlo con la propiedad `position`. -Set the `position` property for the `#back-wall` element to `absolute`. An `absolute` position takes the element out of that top-down document flow and allows you to adjust it relative to its container. +Establezca la propiedad `position` para el elemento `#back-wall` en `absolute`. Una posición `absolute` elimina el elemento de ese flujo de documento descendente y le permite ajustarlo en relación con su contenedor. -When an element is manually positioned, you can shift its layout with `top`, `left`, `right`, and `bottom`. Set the `#back-wall` element to have a `top` value of `0`, and a `left` value of `0`. +Cuando un elemento se coloca manualmente, puede cambiar su diseño con `top`, `left`, `right` y `bottom`. Establezca el elemento `#back-wall` para que tenga un valor `top` de `0` y un valor `left` de `0`. # --hints-- -Your `#back-wall` selector should have the `position` property set to `absolute`. +El selector `#back-wall` debe tener la propiedad `position` establecida en `absolute`. ```js assert(new __helpers.CSSHelp(document).getStyle('#back-wall')?.position === 'absolute'); ``` -Your `#back-wall` selector should have the `top` property set to `0`. +El selector `#back-wall` debe tener la propiedad `top` establecida en `0`. ```js assert(new __helpers.CSSHelp(document).getStyle('#back-wall')?.top === '0px'); ``` -Your `#back-wall` selector should have the `left` property set to `0`. +El selector `#back-wall` debe tener la propiedad `left` establecida en `0`. ```js assert(new __helpers.CSSHelp(document).getStyle('#back-wall')?.left === '0px'); diff --git a/curriculum/challenges/espanol/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c51580.md b/curriculum/challenges/espanol/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c51580.md index 0bcc3071f59..38c7b8f58c5 100644 --- a/curriculum/challenges/espanol/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c51580.md +++ b/curriculum/challenges/espanol/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c51580.md @@ -7,15 +7,15 @@ dashedName: step-10 # --description-- -The `z-index` property is used to create "layers" for your HTML elements. If you are familiar with image editing tools, you may have worked with layers before. This is a similar concept. +La propiedad `z-index` se usa para crear "capas" para sus elementos HTML. Si está familiarizado con las herramientas de edición de imágenes, es posible que haya trabajado con capas antes. Este es un concepto similar. -Elements with a higher `z-index` value will appear to be layered on top of elements with a lower `z-index` value. This can be combined with the positioning in the previous lesson to create unique effects. +Los elementos con un valor de `z-index` más alto aparecerán superpuestos a los elementos con un valor de `z-index` más bajo. Esto se puede combinar con el posicionamiento de la lección anterior para crear efectos únicos. -Since the `back-wall` element will need to appear "behind" the other elements you will be creating, give the `back-wall` element a `z-index` of `-1`. +Dado que el elemento `back-wall` deberá aparecer "detrás" de los otros elementos que creará, asigne al elemento `back-wall` un `z-index` de `-1`. # --hints-- -Your `#back-wall` selector should have the `z-index` property set to `-1`. +El selector `#back-wall` debe tener la propiedad `z-index` establecida en `-1`. ```js assert(new __helpers.CSSHelp(document).getStyle('#back-wall')?.zIndex === '-1'); diff --git a/curriculum/challenges/espanol/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c51581.md b/curriculum/challenges/espanol/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c51581.md index 664e42fb2b0..aa8bdb24c1d 100644 --- a/curriculum/challenges/espanol/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c51581.md +++ b/curriculum/challenges/espanol/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c51581.md @@ -7,23 +7,23 @@ dashedName: step-11 # --description-- -Below your `#back-wall` element, create a `div` with a `class` of `characters`. This is where you will be creating your painting's characters. +Debajo del elemento `#back-wall`, cree un `div` con un `class` de `characters`. Aquí es donde crearás los personajes de tu pintura. # --hints-- -You should only add one new `div` element. +Solo debe agregar un nuevo elemento `div`. ```js assert(document.querySelectorAll('div').length === 2); ``` -Your new `div` element should come after your `#back-wall` element. +Su nuevo elemento `div` debe venir después de su elemento `#back-wall`. ```js assert(document.querySelector('#back-wall')?.nextElementSibling?.localName === 'div'); ``` -Your new `div` element should have the `class` set to `characters`. +El nuevo elemento `div` debe tener el `class` establecido en `characters`. ```js assert(document.querySelectorAll('div')?.[1]?.classList?.contains('characters')); diff --git a/curriculum/challenges/espanol/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c51582.md b/curriculum/challenges/espanol/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c51582.md index 48ed2d55fcb..5e9c71b4207 100644 --- a/curriculum/challenges/espanol/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c51582.md +++ b/curriculum/challenges/espanol/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c51582.md @@ -7,23 +7,23 @@ dashedName: step-12 # --description-- -Inside that `.characters` element, create another `div` with an `id` of `offwhite-character`. +Dentro de ese elemento `.characters`, cree otro `div` con un `id` de `offwhite-character`. # --hints-- -You should only create 1 additional `div` element. +Solo debe crear 1 elemento adicional `div`. ```js assert(document.querySelectorAll('div').length === 3); ``` -Your new `div` element should be nested in your `.characters` element. +El nuevo elemento `div` debe estar anidado en el elemento `.characters`. ```js assert(document.querySelector('.characters div')); ``` -Your new `div` element should have an `id` of `offwhite-character`. +El nuevo elemento `div` debe tener un `id` de `offwhite-character`. ```js assert(document.querySelector('.characters div')?.getAttribute('id') === 'offwhite-character'); diff --git a/curriculum/challenges/espanol/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c51583.md b/curriculum/challenges/espanol/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c51583.md index 35fb47853b8..8a1637d216c 100644 --- a/curriculum/challenges/espanol/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c51583.md +++ b/curriculum/challenges/espanol/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c51583.md @@ -7,35 +7,35 @@ dashedName: step-13 # --description-- -Create four `div` elements inside your `offwhite-character` element. Give those `div` elements the following `id` values, in order: `white-hat`, `black-mask`, `gray-instrument`, `tan-table`. +Cree cuatro elementos `div` dentro del elemento `offwhite-character`. Asigne a esos elementos `div` los siguientes valores `id`, en orden: `white-hat`, `black-mask`, `gray-instrument`, `tan-table`. # --hints-- -You should add four `div` elements within your `.offwhite-character` element. +Debe agregar cuatro elementos `div` dentro de su elemento `.offwhite-character`. ```js assert(document.querySelectorAll('#offwhite-character div').length === 4); ``` -Your first new `div` element should have the `id` of `white-hat`. +El primer elemento nuevo `div` debe tener el `id` de `white-hat`. ```js assert(document.querySelectorAll('#offwhite-character div')[0]?.getAttribute('id') === 'white-hat'); ``` -Your second new `div` element should have the `id` of `black-mask`. +El segundo elemento nuevo `div` debe tener el `id` de `black-mask`. ```js assert(document.querySelectorAll('#offwhite-character div')[1]?.getAttribute('id') === 'black-mask'); ``` -Your third new `div` element should have the `id` of `gray-instrument`. +El tercer elemento nuevo `div` debe tener el `id` de `gray-instrument`. ```js assert(document.querySelectorAll('#offwhite-character div')[2]?.getAttribute('id') === 'gray-instrument'); ``` -Your fourth new `div` element should have the `id` of `tan-table`. +El cuarto elemento nuevo `div` debe tener el `id` de `tan-table`. ```js assert(document.querySelectorAll('#offwhite-character div')[3]?.getAttribute('id') === 'tan-table'); diff --git a/curriculum/challenges/espanol/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c51584.md b/curriculum/challenges/espanol/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c51584.md index 6e8305ebf17..12644053577 100644 --- a/curriculum/challenges/espanol/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c51584.md +++ b/curriculum/challenges/espanol/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c51584.md @@ -7,24 +7,24 @@ dashedName: step-14 # --description-- -This character needs eyes. Create two `div` elements in the `#black-mask` element. Give them the classes `eyes left` and `eyes right`, in that order. +Este personaje necesita ojos. Cree dos elementos `div` en el elemento `#black-mask`. Dales las clases `eyes left` y `eyes right`, en ese orden. # --hints-- -You should create 2 `div` elements within your `#black-mask` element. +Debe crear 2 elementos `div` dentro de su elemento `#black-mask`. ```js assert(document.querySelectorAll('#black-mask div').length === 2); ``` -Your first new `div` should have the classes `eyes` and `left`. +Su primer `div` nuevo debe tener las clases `eyes` y `left`. ```js assert(document.querySelectorAll('#black-mask div')[0]?.classList.contains('eyes')); assert(document.querySelectorAll('#black-mask div')[0]?.classList.contains('left')); ``` -Your second new `div` should have the classes `eyes` and `right`. +Su segundo nuevo `div` debe tener las clases `eyes` y `right`. ```js assert(document.querySelectorAll('#black-mask div')[1]?.classList.contains('eyes')); diff --git a/curriculum/challenges/espanol/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c51585.md b/curriculum/challenges/espanol/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c51585.md index 4ead006fac7..a452e67ee09 100644 --- a/curriculum/challenges/espanol/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c51585.md +++ b/curriculum/challenges/espanol/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c51585.md @@ -7,17 +7,17 @@ dashedName: step-15 # --description-- -Create some "dots" for the instrument. Add five `div` elements within your `#gray-instrument` element. Set the `class` of each to `black-dot`. +Crea algunos "puntos" para el instrumento. Agregue cinco elementos `div` dentro de su elemento `#gray-instrument`. Establezca el `class` de cada uno en `black-dot`. # --hints-- -You should have five new `div` elements within your `#gray-instrument` element. +Debe tener cinco nuevos elementos `div` dentro de su elemento `#gray-instrument`. ```js assert(document.querySelectorAll('#gray-instrument div').length === 5); ``` -Your five `div` elements should all have the class `black-dot`. +Sus cinco elementos `div` deben tener la clase `black-dot`. ```js assert(document.querySelectorAll('#gray-instrument .black-dot').length === 5); diff --git a/curriculum/challenges/espanol/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c51586.md b/curriculum/challenges/espanol/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c51586.md index bd770b85998..c0d4fa8e6ab 100644 --- a/curriculum/challenges/espanol/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c51586.md +++ b/curriculum/challenges/espanol/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c51586.md @@ -7,29 +7,29 @@ dashedName: step-16 # --description-- -Using an id selector, create a rule for the element with the id `offwhite-character`. Give it a `width` of `300px`, a `height` of `550px`, and a `background-color` of `GhostWhite`. +Con un selector de id, cree una regla para el elemento con el id `offwhite-character`. Dale un `width` de `300px`, un `height` de `550px` y un `background-color` de `GhostWhite`. # --hints-- -You should use the `#offwhite-character` selector. +Debe utilizar el selector `#offwhite-character`. ```js assert(new __helpers.CSSHelp(document).getStyle('#offwhite-character')); ``` -Your `#offwhite-character` should have a `width` property set to `300px`. +Su `#offwhite-character` debe tener una propiedad `width` establecida en `300px`. ```js assert(new __helpers.CSSHelp(document).getStyle('#offwhite-character')?.width === '300px'); ``` -Your `#offwhite-character` should have a `height` property set to `550px`. +Su `#offwhite-character` debe tener una propiedad `height` establecida en `550px`. ```js assert(new __helpers.CSSHelp(document).getStyle('#offwhite-character')?.height === '550px'); ``` -Your `#offwhite-character` should have a `background-color` property set to `GhostWhite`. +Su `#offwhite-character` debe tener una propiedad `background-color` establecida en `GhostWhite`. ```js assert(new __helpers.CSSHelp(document).getStyle('#offwhite-character')?.backgroundColor === 'ghostwhite'); diff --git a/curriculum/challenges/espanol/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c51587.md b/curriculum/challenges/espanol/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c51587.md index 37491fdbf43..94060cb4dce 100644 --- a/curriculum/challenges/espanol/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c51587.md +++ b/curriculum/challenges/espanol/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c51587.md @@ -7,23 +7,23 @@ dashedName: step-17 # --description-- -Move the `#offwhite-character` into place by giving it a `position` of `absolute`, a `top` value of `20%`, and a `left` value of `17.5%`. +Mueve el `#offwhite-character` a su lugar dándole una `position` de `absolute`, un valor `top` de `20%` y un valor `left` de `17.5%`. # --hints-- -Your `#offwhite-character` selector should have a `position` property set to `absolute`. +Su selector `#offwhite-character` debe tener una propiedad `position` establecida en `absolute`. ```js assert(new __helpers.CSSHelp(document).getStyle('#offwhite-character')?.position === 'absolute'); ``` -Your `#offwhite-character` selector should have a `top` property set to `20%`. +Su selector `#offwhite-character` debe tener una propiedad `top` establecida en `20%`. ```js assert(new __helpers.CSSHelp(document).getStyle('#offwhite-character')?.top === '20%'); ``` -Your `#offwhite-character` selector should have a `left` property set to `17.5%`. +Su selector `#offwhite-character` debe tener una propiedad `left` establecida en `17.5%`. ```js assert(new __helpers.CSSHelp(document).getStyle('#offwhite-character')?.left === '17.5%'); diff --git a/curriculum/challenges/espanol/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c51588.md b/curriculum/challenges/espanol/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c51588.md index ee2bb204df1..e32c9fed498 100644 --- a/curriculum/challenges/espanol/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c51588.md +++ b/curriculum/challenges/espanol/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c51588.md @@ -7,29 +7,29 @@ dashedName: step-18 # --description-- -Using an id selector, style the element with the id `white-hat`. Give it a `width` and `height` of `0`, and a `border-style` of `solid`. +Usando un selector de id, diseñe el elemento con el id `white-hat`. Dale un `width` y `height` de `0`, y un `border-style` de `solid`. # --hints-- -You should use a `#white-hat` selector. +Debe usar un selector `#white-hat`. ```js assert(new __helpers.CSSHelp(document).getStyle('#white-hat')); ``` -Your `#white-hat` selector should have a `width` property set to `0`. +Su selector `#white-hat` debe tener una propiedad `width` establecida en `0`. ```js assert(new __helpers.CSSHelp(document).getStyle('#white-hat')?.width === '0px'); ``` -Your `#white-hat` selector should have a `height` property set to `0`. +Su selector `#white-hat` debe tener una propiedad `height` establecida en `0`. ```js assert(new __helpers.CSSHelp(document).getStyle('#white-hat')?.height === '0px'); ``` -Your `#white-hat` selector should have a `border-style` property set to `solid`. +Su selector `#white-hat` debe tener una propiedad `border-style` establecida en `solid`. ```js assert(new __helpers.CSSHelp(document).getStyle('#white-hat')?.borderStyle === 'solid'); diff --git a/curriculum/challenges/espanol/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c51589.md b/curriculum/challenges/espanol/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c51589.md index 5e420abc771..52307ff3235 100644 --- a/curriculum/challenges/espanol/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c51589.md +++ b/curriculum/challenges/espanol/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c51589.md @@ -7,11 +7,11 @@ dashedName: step-19 # --description-- -That does not look quite right. Set a `border-width` of `0 120px 140px 180px` to size the hat properly. +Eso no se ve muy bien. Establezca un `border-width` de `0 120px 140px 180px` para dimensionar el sombrero correctamente. # --hints-- -Your `#white-hat` selector should have a `border-width` property set to `0 120px 140px 180px`. +Su selector `#white-hat` debe tener una propiedad `border-width` establecida en `0 120px 140px 180px`. ```js assert(new __helpers.CSSHelp(document).getStyle('#white-hat')?.borderWidth === '0px 120px 140px 180px'); diff --git a/curriculum/challenges/espanol/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c5158a.md b/curriculum/challenges/espanol/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c5158a.md index 615da9d001f..bbefb80c2bc 100644 --- a/curriculum/challenges/espanol/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c5158a.md +++ b/curriculum/challenges/espanol/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c5158a.md @@ -7,29 +7,29 @@ dashedName: step-20 # --description-- -Now you have a large box. Give it a `border-top-color`, `border-right-color`, and `border-left-color` of `transparent`. Set the `border-bottom-color` to `GhostWhite`. This will make it look more like a hat. +Ahora tienes una caja grande. Dale un `border-top-color`, `border-right-color` y `border-left-color` de `transparent`. Establezca el `border-bottom-color` en `GhostWhite`. Esto hará que se vea más como un sombrero. # --hints-- -Your `#white-hat` selector should have a `border-top-color` property set to `transparent`. +El selector `#white-hat` debe tener una propiedad `border-top-color` establecida en `transparent`. ```js assert(new __helpers.CSSHelp(document).getStyle('#white-hat')?.borderTopColor === 'transparent'); ``` -Your `#white-hat` selector should have a `border-right-color` property set to `transparent`. +El selector `#white-hat` debe tener una propiedad `border-right-color` establecida en `transparent`. ```js assert(new __helpers.CSSHelp(document).getStyle('#white-hat')?.borderRightColor === 'transparent'); ``` -Your `#white-hat` selector should have a `border-left-color` property set to `transparent`. +El selector `#white-hat` debe tener una propiedad `border-left-color` establecida en `transparent`. ```js assert(new __helpers.CSSHelp(document).getStyle('#white-hat')?.borderLeftColor === 'transparent'); ``` -Your `#white-hat` selector should have a `border-bottom-color` property set to `GhostWhite`. +El selector `#white-hat` debe tener una propiedad `border-bottom-color` establecida en `GhostWhite`. ```js assert(new __helpers.CSSHelp(document).getStyle('#white-hat')?.borderBottomColor === 'ghostwhite'); diff --git a/curriculum/challenges/espanol/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c5158b.md b/curriculum/challenges/espanol/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c5158b.md index 6362b0ae1f2..6d0b42289ed 100644 --- a/curriculum/challenges/espanol/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c5158b.md +++ b/curriculum/challenges/espanol/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c5158b.md @@ -7,23 +7,23 @@ dashedName: step-21 # --description-- -Give the hat a `position` of `absolute`, a `top` value of `-140px`, and a `left` value of `0`. +Dale al sombrero una `position` de `absolute`, un valor `top` de `-140px` y `left` valor de `0`. # --hints-- -Your `#white-hat` selector should have a `position` property set to `absolute`. +Su selector `#white-hat` debe tener una propiedad `position` establecida en `absolute`. ```js assert(new __helpers.CSSHelp(document).getStyle('#white-hat')?.position === 'absolute'); ``` -Your `#white-hat` selector should have a `top` property set to `-140px`. +Su selector `#white-hat` debe tener una propiedad `top` establecida en `-140px`. ```js assert(new __helpers.CSSHelp(document).getStyle('#white-hat')?.top === '-140px'); ``` -Your `#white-hat` selector should have a `left` property set to `0`. +Su selector `#white-hat` debe tener una propiedad `left` establecida en `0`. ```js assert(new __helpers.CSSHelp(document).getStyle('#white-hat')?.left === '0px'); diff --git a/curriculum/challenges/espanol/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c5158c.md b/curriculum/challenges/espanol/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c5158c.md index 45ea488869f..1d1ac59aa63 100644 --- a/curriculum/challenges/espanol/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c5158c.md +++ b/curriculum/challenges/espanol/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c5158c.md @@ -7,29 +7,29 @@ dashedName: step-22 # --description-- -Using an id selector, create a rule for the element with the id `black-mask`. Give it a `width` of `100%`, a `height` of `50px`, and a `background-color` of `rgb(45, 31, 19)`. +Usando un selector de id, cree una regla para el elemento con el id `black-mask`. Dale un `width` de `100%`, un `height` de `50px` y un `background-color` de `rgb(45, 31, 19)`. # --hints-- -You should have a `#black-mask` selector. +Debe tener un selector `#black-mask`. ```js assert(new __helpers.CSSHelp(document).getStyle('#black-mask')); ``` -Your `#black-mask` selector should have a `width` property set to `100%`. +El selector `#black-mask` debe tener una propiedad `width` establecida en `100%`. ```js assert(new __helpers.CSSHelp(document).getStyle('#black-mask')?.width === '100%'); ``` -Your `#black-mask` selector should have a `height` property set to `50px`. +El selector `#black-mask` debe tener una propiedad `height` establecida en `50px`. ```js assert(new __helpers.CSSHelp(document).getStyle('#black-mask')?.height === '50px'); ``` -Your `#black-mask` selector should have a `background-color` property set to `rgb(45, 31, 19)`. +El selector `#black-mask` debe tener una propiedad `background-color` establecida en `rgb(45, 31, 19)`. ```js assert(new __helpers.CSSHelp(document).getStyle('#black-mask')?.backgroundColor === 'rgb(45, 31, 19)'); diff --git a/curriculum/challenges/espanol/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c5158d.md b/curriculum/challenges/espanol/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c5158d.md index 3d17df2710f..94c5f228097 100644 --- a/curriculum/challenges/espanol/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c5158d.md +++ b/curriculum/challenges/espanol/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c5158d.md @@ -7,23 +7,23 @@ dashedName: step-23 # --description-- -Give the mask a `position` of `absolute`, and a `top` and `left` value of `0`. +Asigne a la máscara una `position` de `absolute` y un valor `top` y `left` de `0`. # --hints-- -Your `#black-mask` selector should have a `position` property set to `absolute`. +Su selector `#black-mask` debe tener una propiedad `position` establecida en `absolute`. ```js assert(new __helpers.CSSHelp(document).getStyle('#black-mask')?.position === 'absolute'); ``` -Your `#black-mask` selector should have a `top` property set to `0`. +Su selector `#black-mask` debe tener una propiedad `top` establecida en `0`. ```js assert(new __helpers.CSSHelp(document).getStyle('#black-mask')?.top === '0px'); ``` -Your `#black-mask` selector should have a `left` property set to `0`. +Su selector `#black-mask` debe tener una propiedad `left` establecida en `0`. ```js assert(new __helpers.CSSHelp(document).getStyle('#black-mask')?.left === '0px'); diff --git a/curriculum/challenges/espanol/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c5158e.md b/curriculum/challenges/espanol/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c5158e.md index d1715c32a1f..1036b3a72b5 100644 --- a/curriculum/challenges/espanol/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c5158e.md +++ b/curriculum/challenges/espanol/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c5158e.md @@ -7,11 +7,11 @@ dashedName: step-24 # --description-- -To ensure you can see the mask, give it a `z-index` of `1`. +Para asegurarse de que puede ver la máscara, asígnele un `z-index` de `1`. # --hints-- -Your `#black-mask` selector should have a `z-index` property set to `1`. +Su selector `#black-mask` debe tener una propiedad `z-index` establecida en `1`. ```js assert(new __helpers.CSSHelp(document).getStyle('#black-mask')?.zIndex === '1'); diff --git a/curriculum/challenges/espanol/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c5158f.md b/curriculum/challenges/espanol/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c5158f.md index 394cb2a8017..124b638183d 100644 --- a/curriculum/challenges/espanol/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c5158f.md +++ b/curriculum/challenges/espanol/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c5158f.md @@ -7,29 +7,29 @@ dashedName: step-25 # --description-- -Using an id selector, give the element with the id `gray-instrument` a `width` of `15%`, a `height` of `40%`, and a `background-color` of `rgb(167, 162, 117)`. +Usando un selector de id, proporcione al elemento id `gray-instrument` un `width` de `15%`, un `height` de `40%` y un `background-color` de `rgb(167, 162, 117)`. # --hints-- -You should have a `#gray-instrument` selector. +Debe tener un selector `#gray-instrument`. ```js assert(new __helpers.CSSHelp(document).getStyle('#gray-instrument')); ``` -Your `#gray-instrument` selector should have a `width` property set to `15%`. +El selector `#gray-instrument` debe tener una propiedad `width` establecida en `15%`. ```js assert(new __helpers.CSSHelp(document).getStyle('#gray-instrument')?.width === '15%'); ``` -Your `#gray-instrument` selector should have a `height` property set to `40%`. +El selector `#gray-instrument` debe tener una propiedad `height` establecida en `40%`. ```js assert(new __helpers.CSSHelp(document).getStyle('#gray-instrument')?.height === '40%'); ``` -Your `#gray-instrument` selector should have a `background-color` property set to `rgb(167, 162, 117)`. +El selector `#gray-instrument` debe tener una propiedad `background-color` establecida en `rgb(167, 162, 117)`. ```js assert(new __helpers.CSSHelp(document).getStyle('#gray-instrument')?.backgroundColor === 'rgb(167, 162, 117)'); diff --git a/curriculum/challenges/espanol/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c51590.md b/curriculum/challenges/espanol/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c51590.md index 352fe50adc9..1bf6871edd5 100644 --- a/curriculum/challenges/espanol/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c51590.md +++ b/curriculum/challenges/espanol/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c51590.md @@ -7,23 +7,23 @@ dashedName: step-26 # --description-- -Now move it into place with a `position` of `absolute`, a `top` value of `50px`, and a `left` value of `125px`. +Ahora muévalo a su lugar con un `position` de `absolute`, un valor `top` de `50px` y un valor `left` de `125px`. # --hints-- -Your `#gray-instrument` selector should have a `position` property set to `absolute`. +El selector `#gray-instrument` debe tener una propiedad `position` establecida en `absolute`. ```js assert(new __helpers.CSSHelp(document).getStyle('#gray-instrument')?.position === 'absolute'); ``` -Your `#gray-instrument` selector should have a `top` value set to `50px`. +El selector `#gray-instrument` debe tener un valor `top` establecido en `50px`. ```js assert(new __helpers.CSSHelp(document).getStyle('#gray-instrument')?.top === '50px'); ``` -Your `#gray-instrument` selector should have a `left` value set to `125px`. +El selector `#gray-instrument` debe tener un valor `left` establecido en `125px`. ```js assert(new __helpers.CSSHelp(document).getStyle('#gray-instrument')?.left === '125px'); diff --git a/curriculum/challenges/espanol/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c51591.md b/curriculum/challenges/espanol/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c51591.md index 2cbcd6eaef8..07dc2596f64 100644 --- a/curriculum/challenges/espanol/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c51591.md +++ b/curriculum/challenges/espanol/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c51591.md @@ -7,11 +7,11 @@ dashedName: step-27 # --description-- -Set the `z-index` to `1`. +Establezca el `z-index` en `1`. # --hints-- -Your `#gray-instrument` selector should have a `z-index` property set to `1`. +El selector `#gray-instrument` debe tener una propiedad `z-index` establecida en `1`. ```js assert(new __helpers.CSSHelp(document).getStyle('#gray-instrument')?.zIndex === '1'); diff --git a/curriculum/challenges/espanol/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c51592.md b/curriculum/challenges/espanol/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c51592.md index ef9bafecef6..c68dec11a2f 100644 --- a/curriculum/challenges/espanol/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c51592.md +++ b/curriculum/challenges/espanol/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c51592.md @@ -7,29 +7,29 @@ dashedName: step-28 # --description-- -Use a class selector to create a rule for the elements with `black-dot` class. Set the `width` to `10px`, the `height` to `10px`, and the `background-color` to `rgb(45, 31, 19)`. +Utilice un selector de clase para crear una regla para los elementos con la clase `black-dot`. Establezca el `width` en `10px`, el `height` en `10px` y el `background-color` en `rgb(45, 31, 19)`. # --hints-- -You should have a `.black-dot` selector. +Debe tener un selector `.black-dot`. ```js assert(new __helpers.CSSHelp(document).getStyle('.black-dot')); ``` -Your `.black-dot` selector should have a `width` property set to `10px`. +El selector `.black-dot` debe tener una propiedad `width` establecida en `10px`. ```js assert(new __helpers.CSSHelp(document).getStyle('.black-dot')?.width === '10px'); ``` -Your `.black-dot` selector should have a `height` property set to `10px`. +El selector `.black-dot` debe tener una propiedad `height` establecida en `10px`. ```js assert(new __helpers.CSSHelp(document).getStyle('.black-dot')?.height === '10px'); ``` -Your `.black-dot` selector should have a `background-color` property set to `rgb(45, 31, 19)`. +El selector `.black-dot` debe tener una propiedad `background-color` establecida en `rgb(45, 31, 19)`. ```js assert(new __helpers.CSSHelp(document).getStyle('.black-dot')?.backgroundColor === 'rgb(45, 31, 19)'); diff --git a/curriculum/challenges/espanol/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c51593.md b/curriculum/challenges/espanol/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c51593.md index 6825822a360..7dffdaa74f0 100644 --- a/curriculum/challenges/espanol/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c51593.md +++ b/curriculum/challenges/espanol/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c51593.md @@ -7,11 +7,11 @@ dashedName: step-29 # --description-- -These dots are just a little too square. Give the `black-dot` class a `border-radius` of `50%` to fix it. +Estos puntos son demasiado cuadrados. Asigne a la clase `black-dot` un `border-radius` de `50%` para solucionarlo. # --hints-- -Your `.black-dot` selector should have a `border-radius` property set to `50%`. +El selector `.black-dot` debe tener una propiedad `border-radius` establecida en `50%`. ```js assert.equal(new __helpers.CSSHelp(document).getStyle('.black-dot')?.borderTopLeftRadius, '50%'); diff --git a/curriculum/challenges/espanol/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c51594.md b/curriculum/challenges/espanol/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c51594.md index c24fad1a5e4..ff578e32ad5 100644 --- a/curriculum/challenges/espanol/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c51594.md +++ b/curriculum/challenges/espanol/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c51594.md @@ -7,23 +7,23 @@ dashedName: step-30 # --description-- -Move the dots into place by setting the `display` to `block`, the `margin` to `auto`, and the `margin-top` to `65%`. +Mueva los puntos en su lugar estableciendo el `display` en `block`, el `margin` en `auto` y el `margin-top` en `65%`. # --hints-- -Your `.black-dot` selector should have a `display` property set to `block`. +El selector `.black-dot` debe tener una propiedad `display` establecida en `block`. ```js assert(new __helpers.CSSHelp(document).getStyle('.black-dot')?.display === 'block'); ``` -Your `.black-dot` selector should have a `margin` property set to `auto`. +El selector `.black-dot` debe tener una propiedad `margin` establecida en `auto`. ```js assert(new __helpers.CSSHelp(document).getStyle('.black-dot')?.margin?.includes('auto')); ``` -Your `.black-dot` selector should have a `margin-top` property set to `65%`. +El selector `.black-dot` debe tener una propiedad `margin-top` establecida en `65%`. ```js assert(new __helpers.CSSHelp(document).getStyle('.black-dot')?.marginTop === '65%'); diff --git a/curriculum/challenges/espanol/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c51595.md b/curriculum/challenges/espanol/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c51595.md index 7dab2576be9..9cb16fd839d 100644 --- a/curriculum/challenges/espanol/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c51595.md +++ b/curriculum/challenges/espanol/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c51595.md @@ -7,29 +7,29 @@ dashedName: step-31 # --description-- -Use an id selector to style the element with the id `tan-table`. Give it a `width` of `450px`, a `height` of `140px`, and a `background-color` of `#D2691E`. +Utilice un selector de id para aplicar estilo al elemento con el id `tan-table`. Dale un `width` de `450px`, un `height` de `140px` y un `background-color` de `#D2691E`. # --hints-- -You should have a `#tan-table` selector. +Debe tener un selector `#tan-table`. ```js assert(new __helpers.CSSHelp(document).getStyle('#tan-table')); ``` -Your `#tan-table` selector should have a `width` property set to `450px`. +El selector `#tan-table` debe tener una propiedad `width` establecida en `450px`. ```js assert(new __helpers.CSSHelp(document).getStyle('#tan-table')?.width === '450px'); ``` -Your `#tan-table` selector should have a `height` property set to `140px`. +El selector `#tan-table` debe tener una propiedad `height` establecida en `140px`. ```js assert(new __helpers.CSSHelp(document).getStyle('#tan-table')?.height === '140px'); ``` -Your `#tan-table` selector should have a `background-color` property set to `#D2691E`. +El selector `#tan-table` debe tener una propiedad `background-color` establecida en `#D2691E`. ```js assert (new __helpers.CSSHelp(document).getStyle('#tan-table')?.backgroundColor === 'rgb(210, 105, 30)'); diff --git a/curriculum/challenges/espanol/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c51596.md b/curriculum/challenges/espanol/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c51596.md index 67b999e776b..ae4e5910d04 100644 --- a/curriculum/challenges/espanol/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c51596.md +++ b/curriculum/challenges/espanol/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c51596.md @@ -7,23 +7,23 @@ dashedName: step-32 # --description-- -Move the table into place by giving it a `position` of `absolute`, a `top` value of `275px`, and a `left` value of `15px`. +Mueva la tabla a su lugar dándole un `position` de `absolute`, un valor `top` de `275px` y un valor `left` de `15px`. # --hints-- -Your `#tan-table` selector should have a `position` property set to `absolute`. +El selector `#tan-table` debe tener una propiedad `position` establecida en `absolute`. ```js assert(new __helpers.CSSHelp(document).getStyle('#tan-table')?.position === 'absolute'); ``` -Your `#tan-table` selector should have a `top` property set to `275px`. +El selector `#tan-table` debe tener una propiedad `top` establecida en `275px`. ```js assert(new __helpers.CSSHelp(document).getStyle('#tan-table')?.top === '275px'); ``` -Your `#tan-table` selector should have a `left` property set to `15px`. +El selector `#tan-table` debe tener una propiedad `left` establecida en `15px`. ```js assert(new __helpers.CSSHelp(document).getStyle('#tan-table')?.left === '15px'); diff --git a/curriculum/challenges/espanol/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c51597.md b/curriculum/challenges/espanol/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c51597.md index 621b5bdb154..a2a28f9ed96 100644 --- a/curriculum/challenges/espanol/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c51597.md +++ b/curriculum/challenges/espanol/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c51597.md @@ -7,11 +7,11 @@ dashedName: step-33 # --description-- -Give the table a `z-index` of `1`. +Asigne a la tabla un `z-index` de `1`. # --hints-- -Your `#tan-table` selector should have a `z-index` property set to `1`. +Su selector `#tan-table` debe tener una propiedad `z-index` establecida en `1`. ```js assert(new __helpers.CSSHelp(document).getStyle('#tan-table')?.zIndex === '1'); diff --git a/curriculum/challenges/espanol/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c51598.md b/curriculum/challenges/espanol/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c51598.md index 407565e0ba5..2707e0f8ea4 100644 --- a/curriculum/challenges/espanol/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c51598.md +++ b/curriculum/challenges/espanol/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c51598.md @@ -7,17 +7,17 @@ dashedName: step-34 # --description-- -After your `div#offwhite-character` element, add a `div` with the `id` of `black-character`. +Después de su elemento `div#offwhite-character`, agregue un `div` con el `id` de `black-character`. # --hints-- -You should add a new `div` element within the `.characters` element. +Debe agregar un nuevo elemento `div` dentro del elemento `.characters`. ```js assert(document.querySelectorAll('.characters > div')?.length === 2); ``` -Your new `div` element should have the `id` set to `black-character`. +Su nuevo elemento `div` debe tener el `id` establecido en `black-character`. ```js assert(document.querySelectorAll('.characters > div')?.[1]?.getAttribute('id') === 'black-character'); diff --git a/curriculum/challenges/espanol/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c51599.md b/curriculum/challenges/espanol/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c51599.md index 2b5e20292e3..0ff36b48d51 100644 --- a/curriculum/challenges/espanol/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c51599.md +++ b/curriculum/challenges/espanol/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c51599.md @@ -7,29 +7,29 @@ dashedName: step-35 # --description-- -Within your new `#black-character` element, add three `div` elements with the following `id` values, in order: `black-hat`, `gray-mask`, `white-paper`. +Dentro de su nuevo elemento `#black-character`, agregue tres elementos `div` con los siguientes valores `id`, en orden: `black-hat`, `gray-mask`, `white-paper`. # --hints-- -You should have three `div` elements within your `#black-character` element. +Debe tener tres elementos `div` dentro de su elemento `#black-character`. ```js assert(document.querySelectorAll('#black-character > div')?.length === 3); ``` -Your first new `div` element should have the `id` set to `black-hat`. +El primer elemento `div` nuevo debe tener el `id` establecido en `black-hat`. ```js assert(document.querySelectorAll('#black-character > div')?.[0]?.getAttribute('id') === 'black-hat'); ``` -Your second new `div` element should have the `id` set to `gray-mask`. +El segundo elemento nuevo `div` debe tener el `id` establecido en `gray-mask`. ```js assert(document.querySelectorAll('#black-character > div')?.[1]?.getAttribute('id') === 'gray-mask'); ``` -Your third new `div` element should have the `id` set to `white-paper`. +El tercer elemento nuevo `div` debe tener el `id` establecido en `white-paper`. ```js assert(document.querySelectorAll('#black-character > div')?.[2]?.getAttribute('id') === 'white-paper'); diff --git a/curriculum/challenges/espanol/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c5159a.md b/curriculum/challenges/espanol/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c5159a.md index f1cae3472cd..1eb58f5230e 100644 --- a/curriculum/challenges/espanol/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c5159a.md +++ b/curriculum/challenges/espanol/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c5159a.md @@ -7,17 +7,17 @@ dashedName: step-36 # --description-- -The mask needs eyes. Within your `#gray-mask` element, add two `div` elements. The first should have the `class` set to `eyes left`, and the second should have the `class` set to `eyes right`. +La máscara necesita ojos. Dentro del elemento `#gray-mask`, agregue dos elementos `div`. El primero debe tener el `class` establecido en `eyes left`, y el segundo debe tener el `class` establecido en `eyes right`. # --hints-- -You should have two `div` elements within your `#gray-mask` element. +Debe tener dos elementos `div` dentro de su elemento `#gray-mask`. ```js assert(document.querySelectorAll('#gray-mask > div')?.length === 2); ``` -Your first new `div` element should have the `class` set to `eyes left`. +El primer elemento `div` nuevo debe tener el `class` establecido en `eyes left`. ```js const first = document.querySelectorAll('#gray-mask > div')?.[0]; @@ -25,7 +25,7 @@ assert(first?.classList?.contains('eyes')); assert(first?.classList?.contains('left')); ``` -Your second new `div` element should have the `class` set to `eyes right`. +El segundo elemento nuevo `div` debe tener el `class` establecido en `eyes right`. ```js const second = document.querySelectorAll('#gray-mask > div')?.[1]; diff --git a/curriculum/challenges/espanol/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c5159b.md b/curriculum/challenges/espanol/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c5159b.md index 0174ec88ca8..513e40d37e1 100644 --- a/curriculum/challenges/espanol/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c5159b.md +++ b/curriculum/challenges/espanol/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c5159b.md @@ -7,23 +7,23 @@ dashedName: step-37 # --description-- -Time to use some FontAwesome icons. +Es hora de usar algunos iconos de FontAwesome. -The `i` element is used for idiomatic text, or text that is separate from the "normal" text content. This could be for _italic_ text, such as scientific terms, or for icons like those provided by FontAwesome. +El elemento `i` se utiliza para texto idiomático o texto independiente del contenido de texto "normal". Esto podría ser para _italic_ texto, como términos científicos, o para iconos como los proporcionados por FontAwesome. -Within your `#white-paper` element, add four `i` elements. Give them all a `class` value of `fas fa-music`. +Dentro del elemento `#white-paper`, agregue cuatro elementos `i`. Dales a todos un valor `class` de `fas fa-music`. -This special class is how FontAwesome determines which icon to load. `fas` indicates the category of icons (FontAwesome Solid, here), while `fa-music` selects the specific icon. +Esta clase especial es la forma en que FontAwesome determina qué icono cargar. `fas` indica la categoría de iconos (FontAwesome Solid, aquí), mientras que `fa-music` selecciona el icono específico. # --hints-- -You should have four new `i` elements within your `#white-paper` element. +Debe tener cuatro nuevos elementos `i` dentro de su elemento `#white-paper`. ```js assert(document.querySelectorAll('#white-paper > i')?.length === 4); ``` -All of your `i` elements should have the `class` set to `fas fa-music`. +Todos los elementos `i` deben tener el `class` establecido en `fas fa-music`. ```js const icons = document.querySelectorAll('#white-paper > i'); diff --git a/curriculum/challenges/espanol/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c5159c.md b/curriculum/challenges/espanol/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c5159c.md index 470b568acfd..8987649d4d8 100644 --- a/curriculum/challenges/espanol/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c5159c.md +++ b/curriculum/challenges/espanol/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c5159c.md @@ -7,29 +7,29 @@ dashedName: step-38 # --description-- -Use an id selector to create a rule for the element with the id `black-character`. Set the `width` to `300px`, the `height` to `500px`, and the `background-color` to `rgb(45, 31, 19)`. +Utilice un selector de id para crear una regla para el elemento con el id `black-character`. Establezca el `width` en `300px`, el `height` en `500px` y el `background-color` en `rgb(45, 31, 19)`. # --hints-- -You should use a `#black-character` selector. +Debe usar un selector `#black-character`. ```js assert(new __helpers.CSSHelp(document).getStyle('#black-character')); ``` -Your `#black-character` selector should have a `width` property set to `300px`. +Su selector `#black-character` debe tener una propiedad `width` establecida en `300px`. ```js assert(new __helpers.CSSHelp(document).getStyle('#black-character')?.width === '300px'); ``` -Your `#black-character` selector should have a `height` property set to `500px`. +Su selector `#black-character` debe tener una propiedad `height` establecida en `500px`. ```js assert(new __helpers.CSSHelp(document).getStyle('#black-character')?.height === '500px'); ``` -Your `#black-character` selector should have a `background-color` property set to `rgb(45, 31, 19)`. +Su selector `#black-character` debe tener una propiedad `background-color` establecida en `rgb(45, 31, 19)`. ```js assert(new __helpers.CSSHelp(document).getStyle('#black-character')?.backgroundColor === 'rgb(45, 31, 19)'); diff --git a/curriculum/challenges/espanol/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c5159d.md b/curriculum/challenges/espanol/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c5159d.md index 9401529cd63..9cb75da48a2 100644 --- a/curriculum/challenges/espanol/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c5159d.md +++ b/curriculum/challenges/espanol/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c5159d.md @@ -7,23 +7,23 @@ dashedName: step-39 # --description-- -Move the `#black-character` element into place by setting the `position` to `absolute`, the `top` to `30%`, and the `left` to `59%`. +Mueva el elemento `#black-character` a su lugar configurando `position` a `absolute`, `top` a `30%`, y la `left` al `59%`. # --hints-- -Your `#black-character` selector should have a `position` property set to `absolute`. +Su selector `#black-character` debe tener una propiedad `position` establecida en `absolute`. ```js assert(new __helpers.CSSHelp(document).getStyle('#black-character')?.position === 'absolute'); ``` -Your `#black-character` selector should have a `top` property set to `30%`. +Su selector `#black-character` debe tener una propiedad `top` establecida en `30%`. ```js assert(new __helpers.CSSHelp(document).getStyle('#black-character')?.top === '30%'); ``` -Your `#black-character` selector should have a `left` property set to `59%`. +Su selector `#black-character` debe tener una propiedad `left` establecida en `59%`. ```js assert(new __helpers.CSSHelp(document).getStyle('#black-character')?.left === '59%'); diff --git a/curriculum/challenges/espanol/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c5159e.md b/curriculum/challenges/espanol/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c5159e.md index 39520c07945..c8127b1f38c 100644 --- a/curriculum/challenges/espanol/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c5159e.md +++ b/curriculum/challenges/espanol/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c5159e.md @@ -7,29 +7,29 @@ dashedName: step-40 # --description-- -Use an id selector to create a rule for the element with the id `black-hat`. Give it a `width` of `0`, a `height` of `0`, and a `border-style` of `solid`. +Utilice un selector de id para crear una regla para el elemento con el id `black-hat`. Dale un `width` de `0`, un `height` de `0` y un `border-style` de `solid`. # --hints-- -You should have a `#black-hat` selector. +Debe tener un selector `#black-hat`. ```js assert(new __helpers.CSSHelp(document).getStyle('#black-hat')); ``` -Your `#black-hat` selector should have a `width` property set to `0`. +El selector `#black-hat` debe tener una propiedad `width` establecida en `0`. ```js assert(new __helpers.CSSHelp(document).getStyle('#black-hat')?.width === '0px'); ``` -Your `#black-hat` selector should have a `height` property set to `0`. +El selector `#black-hat` debe tener una propiedad `height` establecida en `0`. ```js assert(new __helpers.CSSHelp(document).getStyle('#black-hat')?.height === '0px'); ``` -Your `#black-hat` selector should have a `border-style` property set to `solid`. +El selector `#black-hat` debe tener una propiedad `border-style` establecida en `solid`. ```js assert(new __helpers.CSSHelp(document).getStyle('#black-hat')?.borderStyle === 'solid'); diff --git a/curriculum/challenges/espanol/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c5159f.md b/curriculum/challenges/espanol/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c5159f.md index 35625ae7b66..cc3fc797f9f 100644 --- a/curriculum/challenges/espanol/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c5159f.md +++ b/curriculum/challenges/espanol/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c5159f.md @@ -7,29 +7,29 @@ dashedName: step-42 # --description-- -Just like with your `#white-hat`, you should style the border for the `#black-hat` element. Give it a `border-top-color`, `border-right-color`, and `border-bottom-color` of `transparent`. Set the `border-left-color` to `rgb(45, 31, 19)`. +Al igual que con su `#white-hat`, debe aplicar estilo al borde para el elemento `#black-hat`. Dale un `border-top-color`, `border-right-color` y `border-bottom-color` de `transparent`. Establezca el `border-left-color` en `rgb(45, 31, 19)`. # --hints-- -Your `#black-hat` selector should have a `border-top-color` property set to `transparent`. +El selector `#black-hat` debe tener una propiedad `border-top-color` establecida en `transparent`. ```js assert(new __helpers.CSSHelp(document).getStyle('#black-hat')?.borderTopColor === 'transparent'); ``` -Your `#black-hat` selector should have a `border-right-color` property set to `transparent`. +El selector `#black-hat` debe tener una propiedad `border-right-color` establecida en `transparent`. ```js assert(new __helpers.CSSHelp(document).getStyle('#black-hat')?.borderRightColor === 'transparent'); ``` -Your `#black-hat` selector should have a `border-bottom-color` property set to `transparent`. +El selector `#black-hat` debe tener una propiedad `border-bottom-color` establecida en `transparent`. ```js assert(new __helpers.CSSHelp(document).getStyle('#black-hat')?.borderBottomColor === 'transparent'); ``` -Your `#black-hat` selector should have a `border-left-color` property set to `rgb(45, 31, 19)`. +El selector `#black-hat` debe tener una propiedad `border-left-color` establecida en `rgb(45, 31, 19)`. ```js assert(new __helpers.CSSHelp(document).getStyle('#black-hat')?.borderLeftColor === 'rgb(45, 31, 19)'); diff --git a/curriculum/challenges/espanol/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c515a0.md b/curriculum/challenges/espanol/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c515a0.md index 3ad220ef033..aa55394a540 100644 --- a/curriculum/challenges/espanol/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c515a0.md +++ b/curriculum/challenges/espanol/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c515a0.md @@ -7,7 +7,7 @@ dashedName: step-43 # --description-- -Now position the `#black-hat` element. Dale una propiedad `position` con valor de `absolute`, un `top` de `-150px` y un `left` de `0`. +Ahora coloque el elemento `#black-hat`. Dale una propiedad `position` con valor de `absolute`, un `top` de `-150px` y un `left` de `0`. # --hints-- diff --git a/curriculum/challenges/espanol/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c515a1.md b/curriculum/challenges/espanol/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c515a1.md index a67bae0ba9d..cf0e3c718cd 100644 --- a/curriculum/challenges/espanol/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c515a1.md +++ b/curriculum/challenges/espanol/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c515a1.md @@ -7,29 +7,29 @@ dashedName: step-44 # --description-- -Using an id selector, style the element with the id `gray-mask`. Give it a `width` of `150px`, a `height` of `150px`, and a `background-color` of `rgb(167, 162, 117)`. +Usando un selector de id, diseñe el elemento con el id `gray-mask`. Dale un `width` de `150px`, un `height` de `150px` y un `background-color` de `rgb(167, 162, 117)`. # --hints-- -You should have a `#gray-mask` selector. +Debe tener un selector `#gray-mask`. ```js assert(new __helpers.CSSHelp(document).getStyle('#gray-mask')); ``` -Your `#gray-mask` selector should have a `width` property set to `150px`. +El selector `#gray-mask` debe tener una propiedad `width` establecida en `150px`. ```js assert(new __helpers.CSSHelp(document).getStyle('#gray-mask')?.height === '150px'); ``` -Your `#gray-mask` selector should have a `height` property set to `150px`. +El selector `#gray-mask` debe tener una propiedad `height` establecida en `150px`. ```js assert(new __helpers.CSSHelp(document).getStyle('#gray-mask')?.height === '150px') ``` -Your `#gray-mask` selector should have a `background-color` property set to `rgb(167, 162, 117)`. +El selector `#gray-mask` debe tener una propiedad `background-color` establecida en `rgb(167, 162, 117)`. ```js assert(new __helpers.CSSHelp(document).getStyle('#gray-mask')?.backgroundColor === 'rgb(167, 162, 117)'); diff --git a/curriculum/challenges/espanol/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c515a2.md b/curriculum/challenges/espanol/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c515a2.md index 1ba52a36611..659d87feea8 100644 --- a/curriculum/challenges/espanol/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c515a2.md +++ b/curriculum/challenges/espanol/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c515a2.md @@ -7,23 +7,23 @@ dashedName: step-45 # --description-- -Position the `#gray-mask` element by setting `position` to `absolute`, the `top` to `-10px`, and the `left` to `70px`. +Coloque el elemento `#gray-mask` estableciendo `position` en `absolute`, el `top` en `-10px` y el `left` en `70px`. # --hints-- -Your `#gray-mask` selector should have a `position` property set to `absolute`. +El selector `#gray-mask` debe tener una propiedad `position` establecida en `absolute`. ```js assert(new __helpers.CSSHelp(document).getStyle('#gray-mask')?.position === 'absolute'); ``` -Your `#gray-mask` selector should have a `top` property set to `-10px`. +El selector `#gray-mask` debe tener una propiedad `top` establecida en `-10px`. ```js assert(new __helpers.CSSHelp(document).getStyle('#gray-mask')?.top === '-10px'); ``` -Your `#gray-mask` selector should have a `left` property set to `70px`. +El selector `#gray-mask` debe tener una propiedad `left` establecida en `70px`. ```js assert(new __helpers.CSSHelp(document).getStyle('#gray-mask')?.left === '70px'); diff --git a/curriculum/challenges/espanol/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c515a3.md b/curriculum/challenges/espanol/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c515a3.md index ad4b138733f..53fc798eeb7 100644 --- a/curriculum/challenges/espanol/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c515a3.md +++ b/curriculum/challenges/espanol/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c515a3.md @@ -7,29 +7,29 @@ dashedName: step-46 # --description-- -Using an id selector, create a rule for the id `white-paper`. Set the `width` to `400px`, the `height` to `100px`, and the `background-color` to `GhostWhite`. +Con un selector de id, cree una regla para el id `white-paper`. Establezca el `width` en `400px`, el `height` en `100px` y el `background-color` en `GhostWhite`. # --hints-- -You should have a `#white-paper` selector. +Debe tener un selector `#white-paper`. ```js assert(new __helpers.CSSHelp(document).getStyle('#white-paper')); ``` -Your `#white-paper` selector should have a `width` property set to `400px`. +El selector `#white-paper` debe tener una propiedad `width` establecida en `400px`. ```js assert(new __helpers.CSSHelp(document).getStyle('#white-paper')?.width === '400px'); ``` -Your `#white-paper` selector should have a `height` property set to `100px`. +El selector `#white-paper` debe tener una propiedad `height` establecida en `100px`. ```js assert(new __helpers.CSSHelp(document).getStyle('#white-paper')?.height === '100px'); ``` -Your `#white-paper` selector should have a `background-color` property set to `GhostWhite`. +El selector `#white-paper` debe tener una propiedad `background-color` establecida en `GhostWhite`. ```js assert(new __helpers.CSSHelp(document).getStyle('#white-paper')?.backgroundColor === 'ghostwhite'); diff --git a/curriculum/challenges/espanol/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c515a4.md b/curriculum/challenges/espanol/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c515a4.md index 75b69cbf9aa..b4200895850 100644 --- a/curriculum/challenges/espanol/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c515a4.md +++ b/curriculum/challenges/espanol/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c515a4.md @@ -7,23 +7,23 @@ dashedName: step-47 # --description-- -Give the `#white-paper` a `position` of `absolute`, a `top` of `250px`, and a `left` of `-150px` to move it into place. +Dale al `#white-paper` una `position` de `absolute`, una `top` de `250px` y un `left` de `-150px` para moverlo a su lugar. # --hints-- -Your `#white-paper` selector should have a `position` property set to `absolute`. +Su selector `#white-paper` debe tener una propiedad `position` establecida en `absolute`. ```js assert(new __helpers.CSSHelp(document).getStyle('#white-paper')?.position === 'absolute'); ``` -Your `#white-paper` selector should have a `top` property set to `250px`. +Su selector `#white-paper` debe tener una propiedad `top` establecida en `250px`. ```js assert(new __helpers.CSSHelp(document).getStyle('#white-paper')?.top === '250px'); ``` -Your `#white-paper` selector should have a `left` property set to `-150px`. +Su selector `#white-paper` debe tener una propiedad `left` establecida en `-150px`. ```js assert(new __helpers.CSSHelp(document).getStyle('#white-paper')?.left === '-150px'); diff --git a/curriculum/challenges/espanol/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c515a5.md b/curriculum/challenges/espanol/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c515a5.md index b714e66e945..06e0b01134b 100644 --- a/curriculum/challenges/espanol/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c515a5.md +++ b/curriculum/challenges/espanol/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c515a5.md @@ -7,11 +7,11 @@ dashedName: step-48 # --description-- -Set the `z-index` of the `#white-paper` element to `1`. +Establezca el `z-index` del elemento `#white-paper` en `1`. # --hints-- -Your `#white-paper` selector should have a `z-index` property set to `1`. +Su selector `#white-paper` debe tener una propiedad `z-index` establecida en `1`. ```js assert(new __helpers.CSSHelp(document).getStyle('#white-paper')?.zIndex === '1'); diff --git a/curriculum/challenges/espanol/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c515a6.md b/curriculum/challenges/espanol/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c515a6.md index 7e743f83b9d..15732c76ca6 100644 --- a/curriculum/challenges/espanol/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c515a6.md +++ b/curriculum/challenges/espanol/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c515a6.md @@ -7,29 +7,29 @@ dashedName: step-49 # --description-- -FontAwesome icons come with their own styling to define the icon. However, you can still set the styling yourself as well, to change things like the color and size. For now, use a class selector to target the icons with the class `fa-music`. Set the `display` to `inline-block`, the `margin-top` to `8%`, and the `margin-left` to `13%`. +Los íconos de FontAwesome vienen con su propio estilo para definir el ícono. Sin embargo, también puede configurar el estilo usted mismo, para cambiar cosas como el color y el tamaño. Por ahora, use un selector de clase para apuntar a los íconos con la clase `fa-music`. Establezca la `display` en `inline-block`, el `margin-top` en `8%` y el `margin-left` a `13%`. # --hints-- -You should have a `.fa-music` selector. +Deberías tener un selector `.fa-music`. ```js assert(new __helpers.CSSHelp(document).getStyle('.fa-music')); ``` -Your `.fa-music` selector should have a `display` property set to `inline-block`. +Su selector `.fa-music` debe tener una propiedad `display` establecida en `inline-block`. ```js assert(new __helpers.CSSHelp(document).getStyle('.fa-music')?.display === 'inline-block'); ``` -Your `.fa-music` selector should have a `margin-top` property set to `8%`. +Su selector `.fa-music` debe tener una propiedad `margin-top` establecida en `8%`. ```js assert(new __helpers.CSSHelp(document).getStyle('.fa-music')?.marginTop === '8%'); ``` -Your `.fa-music` selector should have a `margin-left` property set to `13%`. +Su selector `.fa-music` debe tener una propiedad `margin-left` establecida en `13%`. ```js assert(new __helpers.CSSHelp(document).getStyle('.fa-music')?.marginLeft === '13%'); diff --git a/curriculum/challenges/espanol/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c515a7.md b/curriculum/challenges/espanol/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c515a7.md index a3c13b799d7..b4ca6dc0f88 100644 --- a/curriculum/challenges/espanol/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c515a7.md +++ b/curriculum/challenges/espanol/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c515a7.md @@ -7,17 +7,17 @@ dashedName: step-50 # --description-- -Below your `#black-character` element, add two new `div` elements. These will be the shawl. Give both of them a `class` of `blue`. Then give the first one an `id` of `blue-left`, and the second an `id` of `blue-right`. +Debajo de su elemento `#black-character`, agregue dos nuevos elementos `div`. Estos serán el mantón. Dale a ambos una `class` de `blue`. Luego dale al primero un `id` de `blue-left`, y al segundo un `id` de `blue-right`. # --hints-- -You should have two new `div` elements within your `.characters` element. +Debería tener dos nuevos elementos `div` dentro de su elemento `.characters`. ```js assert(document.querySelectorAll('.characters > div')?.length === 4); ``` -Your two new `div` elements should have the `class` set to `blue`. +Tus dos nuevos elementos `div` deberían tener la `class` establecida en `blue`. ```js const divs = document.querySelectorAll('.characters > div'); @@ -25,13 +25,13 @@ assert(divs?.[2]?.classList?.contains('blue')) assert(divs?.[3]?.classList?.contains('blue')) ``` -Your first new `div` should have an `id` of `blue-left`. +Tu primer `div` nuevo debe tener un `id` de `blue-left`. ```js assert(document.querySelectorAll('.characters > div')?.[2]?.getAttribute('id') === 'blue-left'); ``` -Your second new `div` should have an `id` of `blue-right`. +Su segundo nuevo `div` debe tener un `id` de `blue-right`. ```js assert(document.querySelectorAll('.characters > div')?.[3]?.getAttribute('id') === 'blue-right'); diff --git a/curriculum/challenges/espanol/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c515a8.md b/curriculum/challenges/espanol/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c515a8.md index d2586d6bdb8..3b96ff9d42c 100644 --- a/curriculum/challenges/espanol/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c515a8.md +++ b/curriculum/challenges/espanol/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c515a8.md @@ -7,17 +7,17 @@ dashedName: step-51 # --description-- -Use a class selector to target the new elements with the class `blue`. Set the `background-color` to `#1E90FF`. +Use un selector de clase para apuntar a los nuevos elementos con la clase `blue`. Establezca el `background-color` en `#1E90FF`. # --hints-- -You should have a `.blue` selector. +Deberías tener un selector `.blue`. ```js assert(new __helpers.CSSHelp(document).getStyle('.blue')); ``` -Your `.blue` selector should have a `background-color` property set to `#1E90FF`. +Su selector `.blue` debe tener una propiedad `background-color` establecida en `#1E90FF`. ```js assert(new __helpers.CSSHelp(document).getStyle('.blue')?.backgroundColor === 'rgb(30, 144, 255)'); diff --git a/curriculum/challenges/espanol/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c515a9.md b/curriculum/challenges/espanol/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c515a9.md index c4fe1dae1a1..497bf005957 100644 --- a/curriculum/challenges/espanol/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c515a9.md +++ b/curriculum/challenges/espanol/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c515a9.md @@ -7,23 +7,23 @@ dashedName: step-52 # --description-- -Select the element with the id `blue-left` using an id selector. Give it a `width` of `500px` and a `height` of `300px`. +Selecciona el elemento con el id `blue-left` usando un selector de id. Dale un `width` de `500px` y un `height` de `300px`. # --hints-- -You should have a `#blue-left` selector. +Debe tener un selector `#blue-left`. ```js assert(new __helpers.CSSHelp(document).getStyle('#blue-left')); ``` -Your `#blue-left` selector should have a `width` property set to `500px`. +El selector `#blue-left` debe tener una propiedad `width` establecida en `500px`. ```js assert(new __helpers.CSSHelp(document).getStyle('#blue-left')?.width === '500px'); ``` -Your `#blue-left` selector should have a `height` property set to `300px`. +El selector `#blue-left` debe tener una propiedad `height` establecida en `300px`. ```js assert(new __helpers.CSSHelp(document).getStyle('#blue-left')?.height === '300px'); diff --git a/curriculum/challenges/espanol/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c515aa.md b/curriculum/challenges/espanol/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c515aa.md index 1ba71f1d7bb..867b19ab9b1 100644 --- a/curriculum/challenges/espanol/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c515aa.md +++ b/curriculum/challenges/espanol/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c515aa.md @@ -7,23 +7,23 @@ dashedName: step-53 # --description-- -Now set the `position` to `absolute`, the `top` to `20%`, and the `left` to `20%`. +Ahora establezca el `position` en `absolute`, el `top` en `20%` y el `left` en `20%`. # --hints-- -Your `#blue-left` selector should have a `position` property set to `absolute`. +El selector `#blue-left` debe tener una propiedad `position` establecida en `absolute`. ```js assert(new __helpers.CSSHelp(document).getStyle('#blue-left')?.position === 'absolute'); ``` -Your `#blue-left` selector should have a `top` property set to `20%`. +Su selector `#blue-left` debe tener una propiedad `top` establecida en `20%`. ```js assert(new __helpers.CSSHelp(document).getStyle('#blue-left')?.top === '20%'); ``` -Your `#blue-left` selector should have a `left` property set to `20%`. +Su selector `#blue-left` debe tener una propiedad `left` establecida en `20%`. ```js assert(new __helpers.CSSHelp(document).getStyle('#blue-left')?.left === '20%'); diff --git a/curriculum/challenges/espanol/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c515ab.md b/curriculum/challenges/espanol/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c515ab.md index 4069d2a06ff..53f5ba0a3c8 100644 --- a/curriculum/challenges/espanol/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c515ab.md +++ b/curriculum/challenges/espanol/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c515ab.md @@ -7,23 +7,23 @@ dashedName: step-54 # --description-- -Next, target the element with the id `blue-right` using an id selector. Set the `width` to `400px` and the `height` to `300px`. +A continuación, apunte al elemento con el id `blue-right` usando un selector de id. Establece el `width` en `400px` y el `height` en `300px`. # --hints-- -You should have a `#blue-right` selector. +Debe tener un selector `#blue-right`. ```js assert(new __helpers.CSSHelp(document).getStyle('#blue-right')); ``` -Your `#blue-right` selector should have a `width` property set to `400px`. +Su selector `#blue-right` debe tener una propiedad `width` establecida en `400px`. ```js assert(new __helpers.CSSHelp(document).getStyle('#blue-right')?.width === '400px'); ``` -Your `#blue-right` selector should have a `height` property set to `300px`. +Su selector `#blue-right` debe tener una propiedad `height` establecida en `300px`. ```js assert(new __helpers.CSSHelp(document).getStyle('#blue-right')?.height === '300px'); diff --git a/curriculum/challenges/espanol/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c515ac.md b/curriculum/challenges/espanol/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c515ac.md index 94561fb29b4..d5198351a6a 100644 --- a/curriculum/challenges/espanol/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c515ac.md +++ b/curriculum/challenges/espanol/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c515ac.md @@ -7,23 +7,23 @@ dashedName: step-55 # --description-- -Give the `#blue-right` element the correct positioning with `position` set to `absolute`, `top` set to `50%`, and `left` set to `40%`. +Asigne al elemento `#blue-right` la posición correcta con `position` establecido en `absolute`, `top` establecido en `50%` y `left` establecido en `40%`. # --hints-- -Your `#blue-right` selector should have a `position` property set to `absolute`. +Su selector `#blue-right` debe tener una propiedad `position` establecida en `absolute`. ```js assert(new __helpers.CSSHelp(document).getStyle('#blue-right')?.position === 'absolute'); ``` -Your `#blue-right` selector should have a `top` property set to `50%`. +Su selector `#blue-right` debe tener una propiedad `top` establecida en `50%`. ```js assert(new __helpers.CSSHelp(document).getStyle('#blue-right')?.top === '50%'); ``` -Your `#blue-right` selector should have a `left` property set to `40%`. +Su selector `#blue-right` debe tener una propiedad `left` establecida en `40%`. ```js assert(new __helpers.CSSHelp(document).getStyle('#blue-right')?.left === '40%'); diff --git a/curriculum/challenges/espanol/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c515ad.md b/curriculum/challenges/espanol/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c515ad.md index 6bc5243ec32..5558e1e6d54 100644 --- a/curriculum/challenges/espanol/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c515ad.md +++ b/curriculum/challenges/espanol/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c515ad.md @@ -7,17 +7,17 @@ dashedName: step-56 # --description-- -Below your `.blue` elements, add another `div`. Give it the `id` value of `orange-character`. +Debajo de sus elementos `.blue`, agregue otro `div`. Dale el valor `id` de `orange-character`. # --hints-- -You should have a new `div` element within your `.characters` element. +Debería tener un nuevo elemento `div` dentro de su elemento `.characters`. ```js assert(document.querySelectorAll('.characters > div')?.length === 5); ``` -Your new `div` element should have the `id` set to `orange-character`. +Su nuevo elemento `div` debe tener el `id` establecido en `orange-character`. ```js assert(document.querySelectorAll('.characters > div')?.[4]?.getAttribute('id') === 'orange-character'); diff --git a/curriculum/challenges/espanol/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c515ae.md b/curriculum/challenges/espanol/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c515ae.md index 42e4158600c..adc35ed0794 100644 --- a/curriculum/challenges/espanol/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c515ae.md +++ b/curriculum/challenges/espanol/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c515ae.md @@ -7,35 +7,35 @@ dashedName: step-57 # --description-- -Within that `#orange-character` element, add four `div` elements. Give them the `id` values of `black-round-hat`, `eyes-div`, `triangles`, and `guitar`, in order. +Dentro de ese elemento `#orange-character`, agregue cuatro elementos `div`. Dales los valores de `id` de `black-round-hat`, `eyes-div`, `triangles` y `guitar`, en orden. # --hints-- -You should have four new `div` elements within your `#orange-character` element. +Deberías tener cuatro nuevos elementos `div` dentro de tu elemento `#orange-character`. ```js assert(document.querySelectorAll('#orange-character > div')?.length === 4); ``` -Your first new `div` element should have an `id` set to `black-round-hat`. +Su primer elemento nuevo `div` debe tener un `id` establecido en `black-round-hat`. ```js assert(document.querySelectorAll('#orange-character > div')?.[0]?.getAttribute('id') === 'black-round-hat'); ``` -Your second new `div` element should have an `id` set to `eyes-div`. +Su segundo elemento nuevo `div` debe tener un `id` establecido en `eyes-div`. ```js assert(document.querySelectorAll('#orange-character > div')?.[1]?.getAttribute('id') === 'eyes-div'); ``` -Your third new `div` element should have an `id` set to `triangles`. +Su tercer elemento nuevo `div` debe tener un `id` establecido en `triangles`. ```js assert(document.querySelectorAll('#orange-character > div')?.[2]?.getAttribute('id') === 'triangles'); ``` -Your fourth new `div` element should have an `id` set to `guitar`. +Tu cuarto elemento nuevo `div` debe tener un `id` establecido en `guitar`. ```js assert(document.querySelectorAll('#orange-character > div')?.[3]?.getAttribute('id') === 'guitar'); diff --git a/curriculum/challenges/espanol/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c515af.md b/curriculum/challenges/espanol/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c515af.md index fb533d4a01e..0ce419268e2 100644 --- a/curriculum/challenges/espanol/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c515af.md +++ b/curriculum/challenges/espanol/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c515af.md @@ -7,24 +7,24 @@ dashedName: step-58 # --description-- -The `#eyes-div` element should hold some eyes. Add two `div` elements inside. Give the first a `class` of `eyes left`, and give the second a `class` of `eyes right`. +El elemento `#eyes-div` debería tener algunos ojos. Agregue dos elementos `div` dentro. Dale al primero una `class` de `eyes left`, y al segundo una `class` de `eyes right`. # --hints-- -You should have two `div` elements nested in your `#eyes-div` element. +Debe tener dos elementos `div` anidados en su elemento `#eyes-div`. ```js assert(document.querySelectorAll('#eyes-div > div')?.length === 2); ``` -The first new `div` should have the `class` set to `eyes left`. +El primer `div` nuevo debe tener la `class` establecida en `eyes left`. ```js assert(document.querySelectorAll('#eyes-div > div')?.[0]?.classList?.contains('eyes')); assert(document.querySelectorAll('#eyes-div > div')?.[0]?.classList?.contains('left')); ``` -The second new `div` should have the `class` set to `eyes right`. +El segundo `div` nuevo debe tener la `class` establecida en `eyes right`. ```js assert(document.querySelectorAll('#eyes-div > div')?.[1]?.classList?.contains('eyes')); diff --git a/curriculum/challenges/espanol/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c515b0.md b/curriculum/challenges/espanol/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c515b0.md index cc4029437ea..d7b34b49b78 100644 --- a/curriculum/challenges/espanol/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c515b0.md +++ b/curriculum/challenges/espanol/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c515b0.md @@ -7,17 +7,17 @@ dashedName: step-59 # --description-- -Within the `#triangles` div, you will need to add the elements that will become your triangles. Create thirty `div` elements and give each of them the class `triangle`. +Dentro del div `#triangles`, deberá agregar los elementos que se convertirán en sus triángulos. Crea treinta elementos `div` y dale a cada uno de ellos la clase `triangle`. # --hints-- -You should have 30 `div` elements within your `#triangles` element. +Debe tener 30 elementos `div` dentro de su elemento `#triangles`. ```js assert(document.querySelectorAll('#triangles > div')?.length === 30); ``` -All 30 of your new `div` elements should have the `class` set to `triangle`. +Los 30 elementos `div` nuevos deben tener la `class` establecida en `triangle`. ```js const divDivDiv = document.querySelectorAll('#triangles > div'); diff --git a/curriculum/challenges/espanol/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c515b1.md b/curriculum/challenges/espanol/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c515b1.md index 949062971bf..ace9564e5be 100644 --- a/curriculum/challenges/espanol/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c515b1.md +++ b/curriculum/challenges/espanol/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c515b1.md @@ -7,49 +7,49 @@ dashedName: step-60 # --description-- -Within the `#guitar` element, create three `div` elements. Give the first two a `class` value of `guitar`. Then give the first an `id` of `guitar-left`, and the second an `id` of `guitar-right`. Add an `id` to the third `div` with the value `guitar-neck`. +Dentro del elemento `#guitar`, crea tres elementos `div`. Asigne a los dos primeros un valor `class` de `guitar`. Luego dale al primero un `id` de `guitar-left`, y al segundo un `id` de `guitar-right`. Agregue un `id` al tercer `div` con el valor `guitar-neck`. -The third `div` should not have the `guitar` class. +El tercer `div` no debería tener la clase `guitar`. # --hints-- -You should have three new `div` elements within your `#guitar` element. +Deberías tener tres nuevos elementos `div` dentro de tu elemento `#guitar`. ```js assert(document.querySelectorAll('#guitar > div')?.length === 3); ``` -Your first new `div` should have a `class` set to `guitar`. +Su primer `div` nuevo debe tener una `class` establecida en `guitar`. ```js assert(document.querySelectorAll('#guitar > div')?.[0]?.classList?.contains('guitar')); ``` -Your first new `div` should have an `id` set to `guitar-left`. +Tu primer `div` nuevo debe tener un `id` establecido en `guitar-left`. ```js assert(document.querySelectorAll('#guitar > div')?.[0]?.getAttribute('id') === 'guitar-left'); ``` -Your second new `div` should have a `class` set to `guitar`. +Tu segundo nuevo `div` debería tener una `class` establecida en `guitar`. ```js assert(document.querySelectorAll('#guitar > div')?.[1]?.classList?.contains('guitar')); ``` -Your second new `div` should have an `id` set to `guitar-right`. +Su segundo nuevo `div` debe tener un `id` establecido en `guitar-right`. ```js assert(document.querySelectorAll('#guitar > div')?.[1]?.getAttribute('id') === 'guitar-right'); ``` -Your third new `div` should have an `id` set to `guitar-neck`. +Tu tercer `div` nuevo debe tener un `id` establecido en `guitar-neck`. ```js assert(document.querySelectorAll('#guitar > div')?.[2]?.getAttribute('id') === 'guitar-neck'); ``` -You should not give the third new `div` a `class` of `guitar`. +No deberías darle al tercer `div` nuevo una `class` de `guitar`. ```js assert.notExists(document.querySelector('#guitar > #guitar-neck.guitar')); diff --git a/curriculum/challenges/espanol/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c515b2.md b/curriculum/challenges/espanol/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c515b2.md index 92a76fb270d..07af2d3ce08 100644 --- a/curriculum/challenges/espanol/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c515b2.md +++ b/curriculum/challenges/espanol/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c515b2.md @@ -7,23 +7,23 @@ dashedName: step-61 # --description-- -Use another FontAwesome icon for your `.guitar`. Inside both the `#guitar-left` and `#guitar-right` elements, add an `i` element and give it a `class` of `fas fa-bars`. +Usa otro ícono de FontAwesome para tu `.guitar`. Dentro de los elementos `#guitar-left` y `#guitar-right`, agrega un elemento `i` y dale una `class` de `fas fa-bars`. # --hints-- -Within your `#guitar-left` element, you should add an `i` element. +Dentro de su elemento `#guitar-left`, debe agregar un elemento `i`. ```js assert(document.querySelectorAll('#guitar-left > i')?.length === 1); ``` -Within your `#guitar-right` element, you should add an `i` element. +Dentro de su elemento `#guitar-right`, debe agregar un elemento `i`. ```js assert(document.querySelectorAll('#guitar-right > i')?.length === 1); ``` -Your two new `i` elements should have the `class` set to `fas fa-bars`. +Sus dos nuevos elementos `i` deben tener la `class` establecida en `fas fa-bars`. ```js assert(document.querySelector('#guitar-left > i')?.classList?.contains('fas')); diff --git a/curriculum/challenges/espanol/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c515b3.md b/curriculum/challenges/espanol/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c515b3.md index 1fff39a6508..bcc993895c7 100644 --- a/curriculum/challenges/espanol/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c515b3.md +++ b/curriculum/challenges/espanol/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c515b3.md @@ -7,29 +7,29 @@ dashedName: step-62 # --description-- -Select your `orange-character` element with an id selector. Give it a `width` of `250px`, a `height` of `550px`, and a `background-color` of `rgb(240, 78, 42)`. +Seleccione su elemento `orange-character` con un selector de id. Dale un `width` de `250px`, un `height` de `550px` y un `background-color` de `rgb(240, 78, 42)`. # --hints-- -You should have an `#orange-character` selector. +Debe tener un selector `#orange-character`. ```js assert(new __helpers.CSSHelp(document).getStyle('#orange-character')); ``` -Your `#orange-character` selector should have a `width` property set to `250px`. +Su selector `#orange-character` debe tener una propiedad `width` establecida en `250px`. ```js assert(new __helpers.CSSHelp(document).getStyle('#orange-character')?.width === '250px'); ``` -Your `#orange-character` selector should have a `height` property set to `550px`. +Su selector `#orange-character` debe tener una propiedad `height` establecida en `550px`. ```js assert(new __helpers.CSSHelp(document).getStyle('#orange-character')?.height === '550px'); ``` -Your `#orange-character` selector should have a `background-color` property set to `rgb(240, 78, 42)`. +Su selector `#orange-character` debe tener una propiedad `background-color` establecida en `rgb(240, 78, 42)`. ```js assert(new __helpers.CSSHelp(document).getStyle('#orange-character')?.backgroundColor === 'rgb(240, 78, 42)'); diff --git a/curriculum/challenges/espanol/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c515b4.md b/curriculum/challenges/espanol/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c515b4.md index b2112811f0a..154e06cb356 100644 --- a/curriculum/challenges/espanol/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c515b4.md +++ b/curriculum/challenges/espanol/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c515b4.md @@ -7,23 +7,23 @@ dashedName: step-63 # --description-- -Give the `#orange-character` element a `position` of `absolute`, a `top` of `25%`, and a `left` of `40%`. +Dale al elemento `#orange-character` una `position` de `absolute`, una `top` de `25%`, y una `left` de `40%`. # --hints-- -Your `#orange-character` selector should have a `position` property set to `absolute`. +Su selector `#orange-character` debe tener una propiedad `position` establecida en `absolute`. ```js assert(new __helpers.CSSHelp(document).getStyle('#orange-character')?.position === 'absolute'); ``` -Your `#orange-character` selector should have a `top` property set to `25%`. +Su selector `#orange-character` debe tener una propiedad `top` establecida en `25%`. ```js assert(new __helpers.CSSHelp(document).getStyle('#orange-character')?.top === '25%'); ``` -Your `#orange-character` selector should have a `left` property set to `40%`. +Su selector `#orange-character` debe tener una propiedad `left` establecida en `40%`. ```js assert(new __helpers.CSSHelp(document).getStyle('#orange-character')?.left === '40%'); diff --git a/curriculum/challenges/espanol/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c515b5.md b/curriculum/challenges/espanol/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c515b5.md index 7aecb1a5475..73a45cc50ad 100644 --- a/curriculum/challenges/espanol/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c515b5.md +++ b/curriculum/challenges/espanol/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c515b5.md @@ -7,29 +7,29 @@ dashedName: step-64 # --description-- -Style the element with the id `black-round-hat` using an id selector. Set the `width` to `180px`, the `height` to `150px`, and the `background-color` to `rgb(45, 31, 19)`. +Dale estilo al elemento con el id `black-round-hat` usando un selector de id. Establezca el `width` en `180px`, el `height` en `150px` y el `background-color` a `rgb(45, 31, 19)`. # --hints-- -You should have a `#black-round-hat` selector. +Debe tener un selector `#black-round-hat`. ```js assert(new __helpers.CSSHelp(document).getStyle('#black-round-hat')); ``` -Your `#black-round-hat` selector should have a `width` property set to `180px`. +Su selector `#black-round-hat` debe tener una propiedad `width` establecida en `180px`. ```js assert(new __helpers.CSSHelp(document).getStyle('#black-round-hat')?.width === '180px'); ``` -Your `#black-round-hat` selector should have a `height` property set to `150px`. +Su selector `#black-round-hat` debe tener una propiedad `height` establecida en `150px`. ```js assert(new __helpers.CSSHelp(document).getStyle('#black-round-hat')?.height === '150px'); ``` -Your `#black-round-hat` selector should have a `background-color` property set to `rgb(45, 31, 19)`. +Su selector `#black-round-hat` debe tener una propiedad `background-color` establecida en `rgb(45, 31, 19)`. ```js assert(new __helpers.CSSHelp(document).getStyle('#black-round-hat')?.backgroundColor === 'rgb(45, 31, 19)'); diff --git a/curriculum/challenges/espanol/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c515b6.md b/curriculum/challenges/espanol/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c515b6.md index 45f63cc8f2b..59e7a7814a8 100644 --- a/curriculum/challenges/espanol/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c515b6.md +++ b/curriculum/challenges/espanol/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c515b6.md @@ -7,11 +7,11 @@ dashedName: step-65 # --description-- -The `#black-round-hat` element should probably be round. Give it a `border-radius` of `50%` to fix this. +El elemento `#black-round-hat` probablemente debería ser redondo. Dale un `border-radius` de `50%` para arreglar esto. # --hints-- -Your `#black-round-hat` selector should have a `border-radius` property set to `50%`. +Su selector `#black-round-hat` debe tener una propiedad `border-radius` establecida en `50%`. ```js assert(new __helpers.CSSHelp(document).getStyle('#black-round-hat')?.borderRadius === '50%'); diff --git a/curriculum/challenges/espanol/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c515b7.md b/curriculum/challenges/espanol/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c515b7.md index 661958b0f21..e13f4ba87d2 100644 --- a/curriculum/challenges/espanol/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c515b7.md +++ b/curriculum/challenges/espanol/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c515b7.md @@ -7,23 +7,23 @@ dashedName: step-66 # --description-- -Move the `#black-round-hat` element into place with a `position` of `absolute`, a `top` of `-100px`, and a `left` of `5px`. +Mueve el elemento `#black-round-hat` a su lugar con una `position` de `absolute`, una `top` de `-100px`, y una `left` de `5px`. # --hints-- -Your `#black-round-hat` selector should have a `position` property set to `absolute`. +Su selector `#black-round-hat` debe tener una propiedad `position` establecida en `absolute`. ```js assert(new __helpers.CSSHelp(document).getStyle('#black-round-hat')?.position === 'absolute'); ``` -Your `#black-round-hat` selector should have a `top` property set to `-100px`. +Su selector `#black-round-hat` debe tener una propiedad `top` establecida en `-100px`. ```js assert(new __helpers.CSSHelp(document).getStyle('#black-round-hat')?.top === '-100px'); ``` -Your `#black-round-hat` selector should have a `left` property set to `5px`. +Su selector `#black-round-hat` debe tener una propiedad `left` establecida en `5px`. ```js assert(new __helpers.CSSHelp(document).getStyle('#black-round-hat')?.left === '5px'); diff --git a/curriculum/challenges/espanol/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c515b8.md b/curriculum/challenges/espanol/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c515b8.md index e2ca48cba0c..5b9e22869dd 100644 --- a/curriculum/challenges/espanol/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c515b8.md +++ b/curriculum/challenges/espanol/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c515b8.md @@ -7,11 +7,11 @@ dashedName: step-67 # --description-- -Put the `#black-round-hat` element on the correct layer with a `z-index` of `-1`. +Coloque el elemento `#black-round-hat` en la capa correcta con un `z-index` de `-1`. # --hints-- -Your `#black-round-hat` selector should have a `z-index` property set to `-1`. +Su selector `#black-round-hat` debe tener una propiedad `z-index` establecida en `-1`. ```js assert(new __helpers.CSSHelp(document).getStyle('#black-round-hat')?.zIndex === '-1'); diff --git a/curriculum/challenges/espanol/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c515b9.md b/curriculum/challenges/espanol/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c515b9.md index 3bbcfc1856b..19bc008797f 100644 --- a/curriculum/challenges/espanol/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c515b9.md +++ b/curriculum/challenges/espanol/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c515b9.md @@ -7,23 +7,23 @@ dashedName: step-68 # --description-- -Use an id selector to create a rule for the element with the id `eyes-div`. Set the `width` to `180px` and the `height` to `50px`. +Utilice un selector de id para crear una regla para el elemento con el id `eyes-div`. Establezca el `width` en `180px` y el `height` en `50px`. # --hints-- -You should create an `#eyes-div` selector. +Debe crear un selector `#eyes-div`. ```js assert(new __helpers.CSSHelp(document).getStyle('#eyes-div')); ``` -Your `#eyes-div` selector should have a `width` property set to `180px`. +Su selector `#eyes-div` debe tener una propiedad `width` establecida en `180px`. ```js assert(new __helpers.CSSHelp(document).getStyle('#eyes-div')?.width === '180px'); ``` -Your `#eyes-div` selector should have a `height` property set to `50px`. +Su selector `#eyes-div` debe tener una propiedad `height` establecida en `50px`. ```js assert(new __helpers.CSSHelp(document).getStyle('#eyes-div')?.height === '50px'); diff --git a/curriculum/challenges/espanol/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c515ba.md b/curriculum/challenges/espanol/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c515ba.md index 7a8a67164da..e0e182c5bc3 100644 --- a/curriculum/challenges/espanol/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c515ba.md +++ b/curriculum/challenges/espanol/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c515ba.md @@ -7,23 +7,23 @@ dashedName: step-69 # --description-- -Now move the `#eyes-div` element into position with `position` set to `absolute`, `top` set to `-40px`, and `left` set to `20px`. +Ahora mueva el elemento `#eyes-div` a su posición con `position` establecido en `absolute`, `top` establecido en `-40px`, y `left` establecido en `20px`. # --hints-- -Your `#eyes-div` selector should have a `position` property set to `absolute`. +Su selector `#eyes-div` debe tener una propiedad `position` establecida en `absolute`. ```js assert(new __helpers.CSSHelp(document).getStyle('#eyes-div')?.position === 'absolute'); ``` -Your `#eyes-div` selector should have a `top` property set to `-40px`. +Su selector `#eyes-div` debe tener una propiedad `top` establecida en `-40px`. ```js assert(new __helpers.CSSHelp(document).getStyle('#eyes-div')?.top === '-40px'); ``` -Your `#eyes-div` selector should have a `left` property set to `20px`. +Su selector `#eyes-div` debe tener una propiedad `left` establecida en `20px`. ```js assert(new __helpers.CSSHelp(document).getStyle('#eyes-div')?.left === '20px'); diff --git a/curriculum/challenges/espanol/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c515bc.md b/curriculum/challenges/espanol/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c515bc.md index 943a9a07b3a..13e9fe13bdc 100644 --- a/curriculum/challenges/espanol/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c515bc.md +++ b/curriculum/challenges/espanol/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c515bc.md @@ -7,11 +7,11 @@ dashedName: step-70 # --description-- -Give the `#eyes-div` element a `z-index` of `3`. +Dale al elemento `#eyes-div` un `z-index` de `3`. # --hints-- -Your `#eyes-div` selector should have a `z-index` property set to `3`. +Su selector `#eyes-div` debe tener una propiedad `z-index` establecida en `3`. ```js assert(new __helpers.CSSHelp(document).getStyle('#eyes-div')?.zIndex === '3'); diff --git a/curriculum/challenges/espanol/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c515bd.md b/curriculum/challenges/espanol/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c515bd.md index e7b658c33db..a94d6e5f8a7 100644 --- a/curriculum/challenges/espanol/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c515bd.md +++ b/curriculum/challenges/espanol/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c515bd.md @@ -7,35 +7,35 @@ dashedName: step-79 # --description-- -Now use a class selector to target `guitar`. This will style the two "halves" of your guitar. Set the `width` to `150px`, the `height` to `120px`, the `background-color` to `Goldenrod`, and the `border-radius` to `50%`. +Ahora usa un selector de clase para apuntar a `guitar`. Esto le dará estilo a las dos "mitades" de tu guitarra. Establezca el `width` en `150px`, el `height` en `120px`, el `background-color` a `Goldenrod`, y el `border-radius` a `50%`. # --hints-- -You should create a `.guitar` selector. +Deberías crear un selector `.guitar`. ```js assert(new __helpers.CSSHelp(document).getStyle('.guitar')); ``` -Your `.guitar` selector should have a `width` property set to `150px`. +Su selector `.guitar` debe tener una propiedad `width` establecida en `150px`. ```js assert(new __helpers.CSSHelp(document).getStyle('.guitar')?.width === '150px'); ``` -Your `.guitar` selector should have a `height` property set to `120px`. +Su selector `.guitar` debe tener una propiedad `height` establecida en `120px`. ```js assert(new __helpers.CSSHelp(document).getStyle('.guitar')?.height === '120px'); ``` -Your `.guitar` selector should have a `background-color` property set to `Goldenrod`. +Su selector `.guitar` debe tener una propiedad `background-color` establecida en `Goldenrod`. ```js assert(new __helpers.CSSHelp(document).getStyle('.guitar')?.backgroundColor === 'goldenrod'); ``` -Your `.guitar` selector should have a `border-radius` property set to `50%`. +Su selector `.guitar` debe tener una propiedad `border-radius` establecida en `50%`. ```js assert(new __helpers.CSSHelp(document).getStyle('.guitar')?.borderRadius === '50%'); diff --git a/curriculum/challenges/espanol/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c515be.md b/curriculum/challenges/espanol/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c515be.md index 31505cedd71..3b6b1938fe6 100644 --- a/curriculum/challenges/espanol/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c515be.md +++ b/curriculum/challenges/espanol/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c515be.md @@ -7,17 +7,17 @@ dashedName: step-80 # --description-- -Select the `id` with value `guitar-left`, and set the `position` to `absolute` and the `left` to `0px`. +Seleccione el `id` con el valor `guitar-left`, y establezca la `position` en `absolute` y la `left` a `0px`. # --hints-- -You should create a new `#guitar-left` selector. +Debes crear un nuevo selector `#guitar-left`. ```js assert(new __helpers.CSSHelp(document).getStyle('#guitar-left')); ``` -Your `#guitar-left` selector should have a `position` property set to `absolute`. +Su selector `#guitar-left` debe tener una propiedad `position` establecida en `absolute`. ```js assert(new __helpers.CSSHelp(document).getStyle('#guitar-left')?.position === 'absolute'); diff --git a/curriculum/challenges/espanol/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c515bf.md b/curriculum/challenges/espanol/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c515bf.md index d85a5dd0213..2bd3a020fcf 100644 --- a/curriculum/challenges/espanol/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c515bf.md +++ b/curriculum/challenges/espanol/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c515bf.md @@ -7,23 +7,23 @@ dashedName: step-81 # --description-- -Select the `id` with value `guitar-right`, and also set `position` to `absolute`. This time, set `left` to `100px`. +Selecciona el `id` con el valor `guitar-right`, y también establece `position` en `absolute`. Esta vez, establezca `left` en `100px`. # --hints-- -You should create a new `#guitar-right` selector. +Debes crear un nuevo selector `#guitar-right`. ```js assert(new __helpers.CSSHelp(document).getStyle('#guitar-right')); ``` -Your `#guitar-right` selector should have a `position` property set to `absolute`. +Su selector `#guitar-right` debe tener una propiedad `position` establecida en `absolute`. ```js assert(new __helpers.CSSHelp(document).getStyle('#guitar-right')?.position === 'absolute'); ``` -Your `#guitar-right` selector should have a `left` property set to `100px`. +Su selector `#guitar-right` debe tener una propiedad `left` establecida en `100px`. ```js assert(new __helpers.CSSHelp(document).getStyle('#guitar-right')?.left === '100px'); diff --git a/curriculum/challenges/espanol/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c515c0.md b/curriculum/challenges/espanol/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c515c0.md index 87fdd86c715..06d0a7b03b3 100644 --- a/curriculum/challenges/espanol/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c515c0.md +++ b/curriculum/challenges/espanol/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c515c0.md @@ -7,29 +7,29 @@ dashedName: step-82 # --description-- -Now you need to move the bar icons into place. Create a class selector for the `fa-bars` class. Set the `display` to `block`, the `margin-top` to `30%`, and the `margin-left` to `40%`. +Ahora necesita mover los íconos de la barra a su lugar. Crea un selector de clase para las `fa-bars`. Configure `display` en `block`, `margin-top` en `30%` y `margin-left` a `40%`. # --hints-- -You should create a `.fa-bars` selector. +Debe crear un selector `.fa-bars`. ```js assert(new __helpers.CSSHelp(document).getStyle('.fa-bars')); ``` -Your `.fa-bars` selector should have a `display` property set to `block`. +Su selector `.fa-bars` debe tener una propiedad `display` establecida en `block`. ```js assert(new __helpers.CSSHelp(document).getStyle('.fa-bars')?.display === 'block'); ``` -Your `.fa-bars` selector should have a `margin-top` property set to `30%`. +Su selector `.fa-bars` debe tener una propiedad `margin-top` establecida en `30%`. ```js assert(new __helpers.CSSHelp(document).getStyle('.fa-bars')?.marginTop === '30%'); ``` -Your `.fa-bars` selector should have a `margin-left` property set to `40%`. +Su selector `.fa-bars` debe tener una propiedad `margin-left` establecida en `40%`. ```js assert(new __helpers.CSSHelp(document).getStyle('.fa-bars')?.marginLeft === '40%'); diff --git a/curriculum/challenges/espanol/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c515c1.md b/curriculum/challenges/espanol/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c515c1.md index 4682fa122cd..3018997a2a0 100644 --- a/curriculum/challenges/espanol/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c515c1.md +++ b/curriculum/challenges/espanol/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c515c1.md @@ -7,29 +7,29 @@ dashedName: step-83 # --description-- -Use an id selector to create a rule for the id `guitar-neck`. Set the `width` to `200px`, the `height` to `30px`, and the `background-color` to `#D2691E`. +Use un selector de Id para crear una regla para el Id `guitar-neck`. Establezca el `width` en `200px`, el `height` en `30px` y el `background-color` a `#D2691E`. # --hints-- -You should create a `#guitar-neck` selector. +Deberías crear un selector `#guitar-neck`. ```js assert(new __helpers.CSSHelp(document).getStyle('#guitar-neck')); ``` -Your `#guitar-neck` selector should have a `width` property set to `200px`. +Su selector `#guitar-neck` debe tener una propiedad `width` establecida en `200px`. ```js assert(new __helpers.CSSHelp(document).getStyle('#guitar-neck')?.width === '200px'); ``` -Your `#guitar-neck` selector should have a `height` property set to `30px`. +Su selector `#guitar-neck` debe tener una propiedad `height` establecida en `30px`. ```js assert(new __helpers.CSSHelp(document).getStyle('#guitar-neck')?.height === '30px'); ``` -Your `#guitar-neck` selector should have a `background-color` property set to `#D2691E`. +Su selector `#guitar-neck` debe tener una propiedad `background-color` establecida en `#D2691E`. ```js assert(new __helpers.CSSHelp(document).getStyle('#guitar-neck')?.backgroundColor === 'rgb(210, 105, 30)'); diff --git a/curriculum/challenges/espanol/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c515c2.md b/curriculum/challenges/espanol/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c515c2.md index db2e26b8bd9..be4e4142eb1 100644 --- a/curriculum/challenges/espanol/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c515c2.md +++ b/curriculum/challenges/espanol/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c515c2.md @@ -7,23 +7,23 @@ dashedName: step-84 # --description-- -Now move the `#guitar-neck` element with a `position` of `absolute`, a `top` value of `45px`, and a `left` value of `200px`. +Ahora mueva el elemento `#guitar-neck` con una `position` de `absolute`, un valor `top` de `45px`, y un valor `left` de `200px`. # --hints-- -Your `#guitar-neck` selector should have a `position` property set to `absolute`. +Su selector `#guitar-neck` debe tener una propiedad `position` establecida en `absolute`. ```js assert(new __helpers.CSSHelp(document).getStyle('#guitar-neck')?.position === 'absolute'); ``` -Your `#guitar-neck` selector should have a `top` property set to `45px`. +Su selector `#guitar-neck` debe tener una propiedad `top` establecida en `45px`. ```js assert(new __helpers.CSSHelp(document).getStyle('#guitar-neck')?.top === '45px'); ``` -Your `#guitar-neck` selector should have a `left` property set to `200px`. +Su selector `#guitar-neck` debe tener una propiedad `left` establecida en `200px`. ```js assert(new __helpers.CSSHelp(document).getStyle('#guitar-neck')?.left === '200px'); diff --git a/curriculum/challenges/espanol/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c515c3.md b/curriculum/challenges/espanol/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c515c3.md index a23a36534d7..368c913452c 100644 --- a/curriculum/challenges/espanol/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c515c3.md +++ b/curriculum/challenges/espanol/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c515c3.md @@ -7,11 +7,11 @@ dashedName: step-85 # --description-- -Give the `#guitar-neck` element a `z-index` of `3`. +Dale al elemento `#guitar-neck` un `z-index` de `3`. # --hints-- -Your `#guitar-neck` selector should have a `z-index` property set to `3`. +Su selector `#guitar-neck` debe tener una propiedad `z-index` establecida en `3`. ```js assert(new __helpers.CSSHelp(document).getStyle('#guitar-neck')?.zIndex === '3'); diff --git a/curriculum/challenges/espanol/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c515c4.md b/curriculum/challenges/espanol/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c515c4.md index 1330202fba8..c0ea9504303 100644 --- a/curriculum/challenges/espanol/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c515c4.md +++ b/curriculum/challenges/espanol/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c515c4.md @@ -7,35 +7,35 @@ dashedName: step-86 # --description-- -Time to style the elements with the `eyes` class. Use a class selector to set the `width` to `35px`, the `height` to `20px`, the `background-color` to `#8B4513`, and the `border-radius` to `20px 50%`. +Es hora de diseñar los elementos con la clase `eyes`. Use un selector de clase para establecer el `width` en `35px`, el `height` en `20px`, el `background-color` a `#8B4513`, y `border-radius` a `20px 50%`. # --hints-- -You should create a `.eyes` selector. +Debe crear un selector `.eyes`. ```js assert(new __helpers.CSSHelp(document).getStyle('.eyes')); ``` -Your `.eyes` selector should have a `width` property set to `35px`. +Su selector `.eyes` debe tener una propiedad `width` establecida en `35px`. ```js assert(new __helpers.CSSHelp(document).getStyle('.eyes')?.width === '35px'); ``` -Your `.eyes` selector should have a `height` property set to `20px`. +Su selector `.eyes` debe tener una propiedad `height` establecida en `20px`. ```js assert(new __helpers.CSSHelp(document).getStyle('.eyes')?.height === '20px'); ``` -Your `.eyes` selector should have a `background-color` property set to `#8B4513`. +Su selector `.eyes` debe tener una propiedad `background-color` establecida en `#8B4513`. ```js assert(new __helpers.CSSHelp(document).getStyle('.eyes')?.backgroundColor === 'rgb(139, 69, 19)'); ``` -Your `.eyes` selector should have a `border-radius` property set to `20px 50%`. +Su selector `.eyes` debe tener una propiedad `border-radius` establecida en `20px 50%`. ```js assert(new __helpers.CSSHelp(document).getStyle('.eyes')?.borderRadius === '20px 50%'); diff --git a/curriculum/challenges/espanol/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c515c5.md b/curriculum/challenges/espanol/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c515c5.md index 7e27dc1f8ba..371d190c622 100644 --- a/curriculum/challenges/espanol/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c515c5.md +++ b/curriculum/challenges/espanol/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c515c5.md @@ -7,29 +7,29 @@ dashedName: step-87 # --description-- -Target the `class` with value `right` and set the `position` to `absolute`, `top` to `15px`, and `right` to `30px`. +Apunte a la `class` con el valor `right` y establezca la `position` en `absolute`, `top` en `15px`, y `right` a `30px`. # --hints-- -You should create a `.right` selector. +Debe crear un selector `.right`. ```js assert(new __helpers.CSSHelp(document).getStyle('.right')); ``` -Your `.right` selector should have a `position` property set to `absolute`. +Su selector `.right` debe tener una propiedad `position` establecida en `absolute`. ```js assert(new __helpers.CSSHelp(document).getStyle('.right')?.position === 'absolute'); ``` -Your `.right` selector should have a `top` property set to `15px`. +Su selector `.right` debe tener una propiedad `top` establecida en `15px`. ```js assert(new __helpers.CSSHelp(document).getStyle('.right')?.top === '15px'); ``` -Your `.right` selector should have a `right` property set to `30px`. +Su selector `.right` debe tener una propiedad `right` establecida en `30px`. ```js assert(new __helpers.CSSHelp(document).getStyle('.right')?.right === '30px'); diff --git a/curriculum/challenges/espanol/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c515c6.md b/curriculum/challenges/espanol/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c515c6.md index eb749bb1d7f..d113c0c4998 100644 --- a/curriculum/challenges/espanol/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c515c6.md +++ b/curriculum/challenges/espanol/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c515c6.md @@ -7,7 +7,7 @@ dashedName: step-88 # --description-- -For the `class` with value `left`, create the selector and set the `position` to `absolute`, the `top` to `15px`, and the `left` to `30px`. +Para la `class` con valor `left`, cree el selector y establezca la `position` en `absolute`, la `top` a `15px`, y la `left` a `30px`. # --hints-- diff --git a/curriculum/challenges/espanol/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c515c7.md b/curriculum/challenges/espanol/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c515c7.md index 5b394ed2c60..f376b306ff7 100644 --- a/curriculum/challenges/espanol/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c515c7.md +++ b/curriculum/challenges/espanol/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c515c7.md @@ -7,19 +7,19 @@ dashedName: step-89 # --description-- -Un último paso. The FontAwesome icons are a little too small. Target all of them with a class selector for `fas`, and set the `font-size` to `30px`. +Un último paso. Los íconos de FontAwesome son demasiado pequeños. Apunte a todos ellos con un selector de clase para `fas` y establezca el `font-size` en `30px`. -With that, your Picasso painting is complete! +¡Con eso, tu pintura de Picasso está completa! # --hints-- -You should create a `.fas` selector. +Debe crear un selector `.fas`. ```js assert(new __helpers.CSSHelp(document).getStyle('.fas')); ``` -Your `.fas` selector should have a `font-size` property set to `30px`. +Su selector `.fas` debe tener una propiedad `font-size` establecida en `30px`. ```js assert(new __helpers.CSSHelp(document).getStyle('.fas')?.fontSize === '30px'); diff --git a/curriculum/challenges/espanol/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b80da8676fb3227967a731.md b/curriculum/challenges/espanol/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b80da8676fb3227967a731.md index 053ec906153..4ee2c628d73 100644 --- a/curriculum/challenges/espanol/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b80da8676fb3227967a731.md +++ b/curriculum/challenges/espanol/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b80da8676fb3227967a731.md @@ -7,32 +7,32 @@ dashedName: step-3 # --description-- -Go ahead and link your CSS file now, even though you have not written any CSS yet. +Continúe y vincule su archivo CSS ahora, aunque aún no haya escrito ningún CSS. -Add a `link` element with a `rel` of `stylesheet` and an `href` of `styles.css`. +Agregue un elemento `link` con un `rel` de `stylesheet` y un `href` de `styles.css`. # --hints-- -Your code should have a `link` element. +El código debe tener un elemento `link`. ```js assert.match(code, / link')); ``` -Your `link` element should have a `rel` attribute with the value `stylesheet`. +El elemento `link` debe tener un atributo `rel` con el valor `stylesheet`. ```js const link_element = document.querySelector('link'); @@ -40,7 +40,7 @@ const rel = link_element.getAttribute("rel"); assert.equal(rel, "stylesheet"); ``` -Your `link` element should have an `href` attribute with the value `styles.css`. +El elemento `link` debe tener un atributo `href` con el valor `styles.css`. ```js const link = document.querySelector('link'); diff --git a/curriculum/challenges/espanol/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60ba890832b4940f24d1936b.md b/curriculum/challenges/espanol/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60ba890832b4940f24d1936b.md index a7a3a443b44..6715a700818 100644 --- a/curriculum/challenges/espanol/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60ba890832b4940f24d1936b.md +++ b/curriculum/challenges/espanol/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60ba890832b4940f24d1936b.md @@ -7,11 +7,11 @@ dashedName: step-75 # --description-- -Adjust the layout of the `.triangle` elements with a `display` of `inline-block`. +Ajuste el diseño de los elementos `.triangle` con una `display` de `inline-block`. # --hints-- -Your `.triangle` selector should have a `display` property set to `inline-block`. +Su selector `.triangle` debe tener una propiedad `display` establecida en `inline-block`. ```js assert(new __helpers.CSSHelp(document).getStyle('.triangle')?.display === 'inline-block'); diff --git a/curriculum/challenges/espanol/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60ba89123a445e0f5c9e4022.md b/curriculum/challenges/espanol/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60ba89123a445e0f5c9e4022.md index a322b267caa..2a731724044 100644 --- a/curriculum/challenges/espanol/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60ba89123a445e0f5c9e4022.md +++ b/curriculum/challenges/espanol/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60ba89123a445e0f5c9e4022.md @@ -7,29 +7,29 @@ dashedName: step-74 # --description-- -Give your `.triangle` elements the correct color. Set the `border-top-color`, `border-bottom-color`, and `border-left-color` to `transparent`. Set the `border-right-color` to `Gold`. +Dale a tus elementos `.triangle` el color correcto. Establezca `border-top-color`, `border-bottom-color` y `border-left-color` en `transparent`. Establezca el `border-right-color` en `Gold`. # --hints-- -Your `.triangle` selector should have a `border-top-color` property set to `transparent`. +Su selector `.triangle` debe tener una propiedad `border-top-color` establecida en `transparent`. ```js assert(new __helpers.CSSHelp(document).getStyle('.triangle')?.borderTopColor === 'transparent'); ``` -Your `.triangle` selector should have a `border-bottom-color` property set to `transparent`. +Su selector `.triangle` debe tener una propiedad `border-bottom-color` establecida en `transparent`. ```js assert(new __helpers.CSSHelp(document).getStyle('.triangle')?.borderBottomColor === 'transparent'); ``` -Your `.triangle` selector should have a `border-left-color` property set to `transparent`. +Su selector `.triangle` debe tener una propiedad `border-left-color` establecida en `transparent`. ```js assert(new __helpers.CSSHelp(document).getStyle('.triangle')?.borderLeftColor === 'transparent'); ``` -Your `.triangle` selector should have a `border-right-color` property set to `Gold`. +Su selector `.triangle` debe tener una propiedad `border-right-color` establecida en `Gold`. ```js assert(new __helpers.CSSHelp(document).getStyle('.triangle')?.borderRightColor === 'gold'); diff --git a/curriculum/challenges/espanol/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60ba8913f1704c0f7a8906b8.md b/curriculum/challenges/espanol/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60ba8913f1704c0f7a8906b8.md index 8e171e2c73f..de751cf7a40 100644 --- a/curriculum/challenges/espanol/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60ba8913f1704c0f7a8906b8.md +++ b/curriculum/challenges/espanol/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60ba8913f1704c0f7a8906b8.md @@ -7,17 +7,17 @@ dashedName: step-73 # --description-- -Style the border of your `.triangle` elements. Set the `border-style` to `solid` and the `border-width` to `42px 45px 45px 0`. +Aplique estilo al borde de los elementos `.triangle`. Establezca el `border-style` en `solid` y el `border-width` en `42px 45px 45px 0`. # --hints-- -Your `.triangle` selector should have a `border-style` property set to `solid`. +El selector `.triangle` debe tener una propiedad `border-style` establecida en `solid`. ```js assert(new __helpers.CSSHelp(document).getStyle('.triangle')?.borderStyle === 'solid'); ``` -Your `.triangle` selector should have a `border-width` property set to `42px 45px 45px 0`. +Nuestro selector `.triangle` debe tener una propiedad `border-width` establecida en `42px 45px 45px 0`. ```js assert(new __helpers.CSSHelp(document).getStyle('.triangle')?.borderWidth === '42px 45px 45px 0px'); diff --git a/curriculum/challenges/espanol/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60ba89146b25080f99ab54ad.md b/curriculum/challenges/espanol/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60ba89146b25080f99ab54ad.md index 2f179441c66..b5ff9a7fd79 100644 --- a/curriculum/challenges/espanol/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60ba89146b25080f99ab54ad.md +++ b/curriculum/challenges/espanol/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60ba89146b25080f99ab54ad.md @@ -7,23 +7,23 @@ dashedName: step-72 # --description-- -Create a class selector for the elements with the `triangle` class. Set the `width` to `0` and the `height` to `0`. +Cree un selector de clase para los elementos con la clase `triangle`. Establezca `width` en `0` y `height` en `0`. # --hints-- -You should create a `.triangle` selector. +Debe crear un selector `.triangle`. ```js assert(new __helpers.CSSHelp(document).getStyle('.triangle')); ``` -Your `.triangle` selector should have a `width` property set to `0`. +Su selector `.triangle` debe tener una propiedad `width` establecida en `0`. ```js assert(new __helpers.CSSHelp(document).getStyle('.triangle')?.width === '0px'); ``` -Your `.triangle` selector should have a `height` property set to `0`. +Su selector `.triangle` debe tener una propiedad `height` establecida en `0`. ```js assert(new __helpers.CSSHelp(document).getStyle('.triangle')?.height === '0px'); diff --git a/curriculum/challenges/espanol/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60ba8914bab51f0fb8228e9c.md b/curriculum/challenges/espanol/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60ba8914bab51f0fb8228e9c.md index 4da160cd0db..61afed2efe3 100644 --- a/curriculum/challenges/espanol/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60ba8914bab51f0fb8228e9c.md +++ b/curriculum/challenges/espanol/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60ba8914bab51f0fb8228e9c.md @@ -7,23 +7,23 @@ dashedName: step-71 # --description-- -Target the element with the id `triangles` using an id selector. Set the `width` to `250px` and the `height` to `550px`. +Apunte al elemento con el id `triangles` utilizando un selector de id. Establezca el `width` en `250px` y el `height` en `550px`. # --hints-- -You should add a `#triangles` selector. +Debe agregar un selector `#triangles`. ```js assert(new __helpers.CSSHelp(document).getStyle('#triangles')); ``` -Your `#triangles` selector should have a `width` property set to `250px`. +Su selector `#triangles` debe tener una propiedad `width` establecida en `250px`. ```js assert(new __helpers.CSSHelp(document).getStyle('#triangles')?.width === '250px'); ``` -Your `#triangles` selector should have a `height` property set to `550px`. +Su selector `#triangles` debe tener una propiedad `height` establecida en `550px`. ```js assert(new __helpers.CSSHelp(document).getStyle('#triangles')?.height === '550px'); diff --git a/curriculum/challenges/espanol/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60ba929345ab0714a3743655.md b/curriculum/challenges/espanol/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60ba929345ab0714a3743655.md index 29a1f5bb079..61b36f11589 100644 --- a/curriculum/challenges/espanol/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60ba929345ab0714a3743655.md +++ b/curriculum/challenges/espanol/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60ba929345ab0714a3743655.md @@ -7,23 +7,23 @@ dashedName: step-76 # --description-- -Now use an id selector for `guitar`. Set the `width` to `100%`, and the `height` to `100px`. +Ahora usa un selector de id para `guitar`. Establezca el `width` en `100%` y el `height` en `100px`. # --hints-- -You should create a `#guitar` selector. +Debes crear un selector `#guitar`. ```js assert(new __helpers.CSSHelp(document).getStyle('#guitar')); ``` -Your `#guitar` selector should have a `width` property set to `100%`. +Su selector `#guitar` debe tener una propiedad `width` establecida en `100%`. ```js assert(new __helpers.CSSHelp(document).getStyle('#guitar')?.width === '100%'); ``` -Your `#guitar` selector should have a `height` property set to `100px`. +Su selector `#guitar` debe tener una propiedad `height` establecida en `100px`. ```js assert(new __helpers.CSSHelp(document).getStyle('#guitar')?.height === '100px'); diff --git a/curriculum/challenges/espanol/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60ba9296d4d6b414c1b10995.md b/curriculum/challenges/espanol/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60ba9296d4d6b414c1b10995.md index 7784fcb4312..c794e899878 100644 --- a/curriculum/challenges/espanol/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60ba9296d4d6b414c1b10995.md +++ b/curriculum/challenges/espanol/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60ba9296d4d6b414c1b10995.md @@ -7,23 +7,23 @@ dashedName: step-77 # --description-- -In the same `#guitar` selector, set the `position` to `absolute`, the `top` to `120px`, and the `left` to `0px`. +En el mismo selector `#guitar`, establece la `position` en `absolute`, la `top` en `120px`, y el `left` a `0px`. # --hints-- -Your `#guitar` selector should have a `position` property set to `absolute`. +Su selector `#guitar` debe tener una propiedad `position` establecida en `absolute`. ```js assert(new __helpers.CSSHelp(document).getStyle('#guitar')?.position === 'absolute'); ``` -Your `#guitar` selector should have a `top` property set to `120px`. +Su selector `#guitar` debe tener una propiedad `top` establecida en `120px`. ```js assert(new __helpers.CSSHelp(document).getStyle('#guitar')?.top === '120px'); ``` -Your `#guitar` selector should have a `left` property set to `0px`. +Su selector `#guitar` debe tener una propiedad `left` establecida en `0px`. ```js assert(new __helpers.CSSHelp(document).getStyle('#guitar')?.left === '0px'); diff --git a/curriculum/challenges/espanol/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60ba92987c1e4914dfa7a0b9.md b/curriculum/challenges/espanol/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60ba92987c1e4914dfa7a0b9.md index 67b35741c50..6e043b333bb 100644 --- a/curriculum/challenges/espanol/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60ba92987c1e4914dfa7a0b9.md +++ b/curriculum/challenges/espanol/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60ba92987c1e4914dfa7a0b9.md @@ -7,11 +7,11 @@ dashedName: step-78 # --description-- -Give the `#guitar` rule a `z-index` of `3`. +Asigne a la regla `#guitar` un `z-index` de `3`. # --hints-- -Your `#guitar` selector should have a `z-index` property set to `3`. +Su selector `#guitar` debe tener una propiedad `z-index` establecida en `3`. ```js assert(new __helpers.CSSHelp(document).getStyle('#guitar')?.zIndex === '3'); diff --git a/curriculum/challenges/espanol/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60bad32219ebcb4a8810ac6a.md b/curriculum/challenges/espanol/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60bad32219ebcb4a8810ac6a.md index e6ddb653475..11a69e1f857 100644 --- a/curriculum/challenges/espanol/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60bad32219ebcb4a8810ac6a.md +++ b/curriculum/challenges/espanol/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60bad32219ebcb4a8810ac6a.md @@ -7,11 +7,11 @@ dashedName: step-41 # --description-- -Set the `border-width` of the `#black-hat` to `150px 0 0 300px`. +Establezca el `border-width` del `#black-hat` en `150px 0 0 300px`. # --hints-- -Your `#black-hat` selector should have a `border-width` property set to `150px 0 0 300px`. +Su selector `#black-hat` debe tener una propiedad `border-width` establecida en `150px 0 0 300px`. ```js assert(new __helpers.CSSHelp(document).getStyle('#black-hat')?.borderWidth === '150px 0px 0px 300px'); diff --git a/curriculum/challenges/espanol/14-responsive-web-design-22/learn-more-about-css-pseudo-selectors-by-building-a-balance-sheet/620192a767533a7ad19d96d7.md b/curriculum/challenges/espanol/14-responsive-web-design-22/learn-more-about-css-pseudo-selectors-by-building-a-balance-sheet/620192a767533a7ad19d96d7.md index 25493eb910a..201324bc58e 100644 --- a/curriculum/challenges/espanol/14-responsive-web-design-22/learn-more-about-css-pseudo-selectors-by-building-a-balance-sheet/620192a767533a7ad19d96d7.md +++ b/curriculum/challenges/espanol/14-responsive-web-design-22/learn-more-about-css-pseudo-selectors-by-building-a-balance-sheet/620192a767533a7ad19d96d7.md @@ -7,7 +7,7 @@ dashedName: step-56 # --description-- -La diferencia clave entre `tr[class="total"]` y `tr.total` es que el primero seleccionara los elementos `tr` donde la *única* clase sea `total`. The second will select `tr` elements where the class *includes* `total`. +La diferencia clave entre `tr[class="total"]` y `tr.total` es que el primero seleccionara los elementos `tr` donde la *única* clase sea `total`. El segundo seleccionará los elementos `tr` donde la clase *includes* `total`. En tu caso, `tr.total` funcionará. Puedes usar este selector para apuntar a todos los elementos `td` dentro de tus filas `.total`. Alinea el texto a la derecha, y dales un relleno de `0 0.25rem`. diff --git a/curriculum/challenges/espanol/14-responsive-web-design-22/learn-the-css-box-model-by-building-a-rothko-painting/60a3e3396c7b40068ad6996b.md b/curriculum/challenges/espanol/14-responsive-web-design-22/learn-the-css-box-model-by-building-a-rothko-painting/60a3e3396c7b40068ad6996b.md index 3473cd5eb83..9e64215d3bb 100644 --- a/curriculum/challenges/espanol/14-responsive-web-design-22/learn-the-css-box-model-by-building-a-rothko-painting/60a3e3396c7b40068ad6996b.md +++ b/curriculum/challenges/espanol/14-responsive-web-design-22/learn-the-css-box-model-by-building-a-rothko-painting/60a3e3396c7b40068ad6996b.md @@ -7,42 +7,42 @@ dashedName: step-2 # --description-- -Within the `head` element, add a `meta` tag which sets the `charset` to `UTF-8`, and a `title` element with the value `Rothko Painting`. +Dentro del elemento `head`, agregue una etiqueta `meta` que establezca la etiqueta `charset` en `UTF-8`, y un elemento `title` con el valor `Rothko Painting`. -Within the `body` element, add an `img` element with a `src` of `https://cdn.freecodecamp.org/curriculum/css-box-model/diagram-1.png`. +Dentro del elemento `body`, agregue un elemento `img` con un `src` de `https://cdn.freecodecamp.org/curriculum/css-box-model/diagram-1.png`. # --hints-- -Your code should have a `meta` tag. +El código debe tener una etiqueta `meta`. ```js assert(document.querySelectorAll('meta').length === 1); ``` -The `meta` tag should set the `charset` to `UTF-8`. +La etiqueta `meta` debe establecer el `charset` en `UTF-8`. ```js assert(document.querySelector('meta').getAttribute('charset')?.toLowerCase() === 'utf-8'); ``` -Your code should have a `title` element. +El código debe tener un elemento `title`. ```js assert(document.querySelectorAll('title').length === 1); ``` -The `title` should be `Rothko Painting`. +El `title` debe ser `Rothko Painting`. ```js assert(document.querySelector('title').innerText === 'Rothko Painting'); ``` -Your code should have an `img` element. +El código debe tener un elemento `img`. ```js assert(document.querySelectorAll('img').length === 1); ``` -The `img` element should have a `src` of `https://cdn.freecodecamp.org/curriculum/css-box-model/diagram-1.png`. +El elemento `img` debe tener un `src` de `https://cdn.freecodecamp.org/curriculum/css-box-model/diagram-1.png`. ```js assert(document.querySelector('img').getAttribute('src') === 'https://cdn.freecodecamp.org/curriculum/css-box-model/diagram-1.png'); diff --git a/curriculum/challenges/espanol/14-responsive-web-design-22/learn-the-css-box-model-by-building-a-rothko-painting/60a3e3396c7b40068ad6996c.md b/curriculum/challenges/espanol/14-responsive-web-design-22/learn-the-css-box-model-by-building-a-rothko-painting/60a3e3396c7b40068ad6996c.md index 2e9eea116d6..80662618fb3 100644 --- a/curriculum/challenges/espanol/14-responsive-web-design-22/learn-the-css-box-model-by-building-a-rothko-painting/60a3e3396c7b40068ad6996c.md +++ b/curriculum/challenges/espanol/14-responsive-web-design-22/learn-the-css-box-model-by-building-a-rothko-painting/60a3e3396c7b40068ad6996c.md @@ -7,15 +7,15 @@ dashedName: step-3 # --description-- -In the CSS box model, every HTML element is treated as a box with four areas. +En el modelo de cuadro CSS, cada elemento HTML se trata como un cuadro con cuatro áreas. -Imagine you receive a box from your favorite online retailer -- the content is the item in the box, or in our case, a header, paragraph, or image element. +Imagine que recibe una caja de su minorista en línea favorito: el contenido es el elemento en la caja, o en nuestro caso, un encabezado, párrafo o elemento de imagen. -Change the `src` attribute in the `` from `https://cdn.freecodecamp.org/curriculum/css-box-model/diagram-1.png` to `https://cdn.freecodecamp.org/curriculum/css-box-model/diagram-2.png`. +Cambie el atributo `src` en el atributo `` de `https://cdn.freecodecamp.org/curriculum/css-box-model/diagram-1.png` a `https://cdn.freecodecamp.org/curriculum/css-box-model/diagram-2.png`. # --hints-- -The `img` element should have a `src` of `https://cdn.freecodecamp.org/curriculum/css-box-model/diagram-2.png` +El elemento `img` debe tener un `src` de `https://cdn.freecodecamp.org/curriculum/css-box-model/diagram-2.png` ```js assert(document.querySelector('img').getAttribute('src') === 'https://cdn.freecodecamp.org/curriculum/css-box-model/diagram-2.png'); diff --git a/curriculum/challenges/espanol/14-responsive-web-design-22/learn-the-css-box-model-by-building-a-rothko-painting/60a3e3396c7b40068ad6996d.md b/curriculum/challenges/espanol/14-responsive-web-design-22/learn-the-css-box-model-by-building-a-rothko-painting/60a3e3396c7b40068ad6996d.md index 6398e4ac705..e0e095416fe 100644 --- a/curriculum/challenges/espanol/14-responsive-web-design-22/learn-the-css-box-model-by-building-a-rothko-painting/60a3e3396c7b40068ad6996d.md +++ b/curriculum/challenges/espanol/14-responsive-web-design-22/learn-the-css-box-model-by-building-a-rothko-painting/60a3e3396c7b40068ad6996d.md @@ -7,15 +7,15 @@ dashedName: step-4 # --description-- -The content is surrounded by a space called padding, similar to how bubble wrap separates an item from the box around it. +El contenido está rodeado por un espacio llamado relleno, similar a cómo el plástico de burbujas separa un elemento de la caja que lo rodea. -Think of the border like the cardboard box your item was shipped in. +Piense en el borde como la caja de cartón en la que se envió su artículo. -Change the `src` attribute to `https://cdn.freecodecamp.org/curriculum/css-box-model/diagram-3.png` +Cambie el atributo `src` a `https://cdn.freecodecamp.org/curriculum/css-box-model/diagram-3.png` # --hints-- -The `img` element should have a `src` of `https://cdn.freecodecamp.org/curriculum/css-box-model/diagram-3.png` +El elemento `img` debe tener un `src` de `https://cdn.freecodecamp.org/curriculum/css-box-model/diagram-3.png` ```js assert(document.querySelector('img').getAttribute('src') === 'https://cdn.freecodecamp.org/curriculum/css-box-model/diagram-3.png'); diff --git a/curriculum/challenges/espanol/14-responsive-web-design-22/learn-the-css-box-model-by-building-a-rothko-painting/60a3e3396c7b40068ad6996e.md b/curriculum/challenges/espanol/14-responsive-web-design-22/learn-the-css-box-model-by-building-a-rothko-painting/60a3e3396c7b40068ad6996e.md index c6d63c6f728..1dd41ee265c 100644 --- a/curriculum/challenges/espanol/14-responsive-web-design-22/learn-the-css-box-model-by-building-a-rothko-painting/60a3e3396c7b40068ad6996e.md +++ b/curriculum/challenges/espanol/14-responsive-web-design-22/learn-the-css-box-model-by-building-a-rothko-painting/60a3e3396c7b40068ad6996e.md @@ -7,17 +7,17 @@ dashedName: step-5 # --description-- -Margin is the area outside of the box, and can be used to control the space between other boxes or elements. +El margen es el área fuera de la caja, y se puede utilizar para controlar el espacio entre otras cajas o elementos. -Here the bottom element has a larger top margin, pushing it further down the page. +Aquí el elemento inferior tiene un margen superior más grande, empujándolo más abajo en la página. -Now that you understand the CSS box model, let's get started on the Rothko painting. +Ahora que entiendes el modelo de caja CSS, comencemos con la pintura de Rothko. -Remove the `` element. +Elimine el elemento``. # --hints-- -You should not have an `img` element in your code. +No debe tener un elemento `img` en el código. ```js assert(document.querySelector('img') === null); diff --git a/curriculum/challenges/espanol/14-responsive-web-design-22/learn-the-css-box-model-by-building-a-rothko-painting/60a3e3396c7b40068ad6996f.md b/curriculum/challenges/espanol/14-responsive-web-design-22/learn-the-css-box-model-by-building-a-rothko-painting/60a3e3396c7b40068ad6996f.md index 56562c05521..d538940fc56 100644 --- a/curriculum/challenges/espanol/14-responsive-web-design-22/learn-the-css-box-model-by-building-a-rothko-painting/60a3e3396c7b40068ad6996f.md +++ b/curriculum/challenges/espanol/14-responsive-web-design-22/learn-the-css-box-model-by-building-a-rothko-painting/60a3e3396c7b40068ad6996f.md @@ -7,21 +7,21 @@ dashedName: step-6 # --description-- -Add a `div` element in the `body`. +Agregue un elemento `div` en el `body`. -Set the `class` attribute equal to `canvas`. For example, `
`. +Establezca el atributo `class` igual a `canvas`. Por ejemplo,`
`. -This will act as the canvas for your painting. +Esto actuará como el lienzo para su pintura. # --hints-- -Your code should have a `div` element. +El código debe tener un elemento `div`. ```js assert(document.querySelectorAll('div').length === 1) ``` -The `div` element should have a `class` with the value `canvas`. +El elemento `div` debe tener un `class` con el valor `canvas`. ```js assert(document.querySelector('div').className.split(' ').includes('canvas')) diff --git a/curriculum/challenges/espanol/14-responsive-web-design-22/learn-the-css-box-model-by-building-a-rothko-painting/60a3e3396c7b40068ad69970.md b/curriculum/challenges/espanol/14-responsive-web-design-22/learn-the-css-box-model-by-building-a-rothko-painting/60a3e3396c7b40068ad69970.md index 2d45bf00a64..711852010ef 100644 --- a/curriculum/challenges/espanol/14-responsive-web-design-22/learn-the-css-box-model-by-building-a-rothko-painting/60a3e3396c7b40068ad69970.md +++ b/curriculum/challenges/espanol/14-responsive-web-design-22/learn-the-css-box-model-by-building-a-rothko-painting/60a3e3396c7b40068ad69970.md @@ -7,25 +7,25 @@ dashedName: step-7 # --description-- -Before you can start styling the `div` you added, you need to link your CSS to your HTML. +Antes de que pueda comenzar a aplicar estilo al `div` que agregó, debe vincular su CSS a su HTML. -Add a `link` element to link your `styles.css` file. Set the `href` to `styles.css`, and remember to set the `rel` attribute to `stylesheet`. +Agregue un elemento `link` para vincular el archivo `styles.css`. Establezca el `href` en `styles.css` y recuerde establecer el atributo `rel` en `stylesheet`. # --hints-- -Your code should have a `link` element. +El código debe tener un elemento `link`. ```js assert(/` has no text, it's still treated as a box with content. Write a CSS rule that uses the `.canvas` class selector and set its `width` to 500 pixels. Here's a CSS rule that sets the width of the class `card` to 300 pixels: +Aunque tu `
` no tenga texto, todavía se trata como un cuadro con contenido. Escribe una regla CSS que use el selector de clase `.canvas` y establece su `width` en 500 píxeles. Aquí hay una regla CSS que establece el ancho de la clase `card` en 300 píxeles: ```css .card { @@ -19,21 +19,21 @@ Even though your `
` has no text, it's still treated as a box with content. # --hints-- -Your code should have a `.canvas` selector. +El código debe tener un selector `.canvas`. ```js const hasCanvas = new __helpers.CSSHelp(document).getStyle('.canvas'); assert(hasCanvas) ``` -You should set the `width` property to `500px`. +Debe establecer la propiedad `width` en `500px`. ```js const hasWidth = new __helpers.CSSHelp(document).getCSSRules().some(x => x.style.width === '500px') assert(hasWidth); ``` -Your `.canvas` element should have a `width` of `500px`. +El elemento `.canvas` debe tener un `width` de `500px`. ```js const width = new __helpers.CSSHelp(document).getStyle('.canvas')?.getPropertyValue('width'); diff --git a/curriculum/challenges/espanol/14-responsive-web-design-22/learn-the-css-box-model-by-building-a-rothko-painting/60a3e3396c7b40068ad69972.md b/curriculum/challenges/espanol/14-responsive-web-design-22/learn-the-css-box-model-by-building-a-rothko-painting/60a3e3396c7b40068ad69972.md index bb00380e96f..d3cdbc88934 100644 --- a/curriculum/challenges/espanol/14-responsive-web-design-22/learn-the-css-box-model-by-building-a-rothko-painting/60a3e3396c7b40068ad69972.md +++ b/curriculum/challenges/espanol/14-responsive-web-design-22/learn-the-css-box-model-by-building-a-rothko-painting/60a3e3396c7b40068ad69972.md @@ -7,18 +7,18 @@ dashedName: step-9 # --description-- -Add the `height` property with the value `600px` to your `.canvas` rule. +Agregue la propiedad `height` con el valor `600px` a la regla `.canvas`. # --hints-- -You should set the `height` property to `600px`. +Debe establecer la propiedad `height` en `600px`. ```js const hasHeight = new __helpers.CSSHelp(document).getCSSRules().some(x => x.style.height === '600px'); assert(hasHeight); ``` -Your `.canvas` element should have a `height` of `600px`. +El elemento `.canvas` debe tener un `height` de `600px`. ```js const canvasHeight = new __helpers.CSSHelp(document).getStyle('.canvas')?.getPropertyValue('height'); diff --git a/curriculum/challenges/espanol/14-responsive-web-design-22/learn-the-css-box-model-by-building-a-rothko-painting/60a3e3396c7b40068ad69973.md b/curriculum/challenges/espanol/14-responsive-web-design-22/learn-the-css-box-model-by-building-a-rothko-painting/60a3e3396c7b40068ad69973.md index a0a1c4e871c..f2d217fd7bb 100644 --- a/curriculum/challenges/espanol/14-responsive-web-design-22/learn-the-css-box-model-by-building-a-rothko-painting/60a3e3396c7b40068ad69973.md +++ b/curriculum/challenges/espanol/14-responsive-web-design-22/learn-the-css-box-model-by-building-a-rothko-painting/60a3e3396c7b40068ad69973.md @@ -7,18 +7,18 @@ dashedName: step-10 # --description-- -Change the `background-color` of the canvas to `#4d0f00`. +Cambie el `background-color` del lienzo a `#4d0f00`. # --hints-- -You should set the `background-color` property to `#4d0f00`. +Debe establecer la propiedad `background-color` en `#4d0f00`. ```js const hasBackground = new __helpers.CSSHelp(document).getCSSRules().some(x => x.style['background-color'] === 'rgb(77, 15, 0)'); assert(hasBackground); ``` -Your `.canvas` element should have a `background-color` of `#4d0f00`. +El elemento `.canvas` debe tener un `background-color` de `#4d0f00`. ```js const canvasBackground = new __helpers.CSSHelp(document).getStyle('.canvas')?.getPropertyValue('background-color'); diff --git a/curriculum/challenges/espanol/14-responsive-web-design-22/learn-the-css-box-model-by-building-a-rothko-painting/60a3e3396c7b40068ad69974.md b/curriculum/challenges/espanol/14-responsive-web-design-22/learn-the-css-box-model-by-building-a-rothko-painting/60a3e3396c7b40068ad69974.md index 9d83af2ccce..024068609c9 100644 --- a/curriculum/challenges/espanol/14-responsive-web-design-22/learn-the-css-box-model-by-building-a-rothko-painting/60a3e3396c7b40068ad69974.md +++ b/curriculum/challenges/espanol/14-responsive-web-design-22/learn-the-css-box-model-by-building-a-rothko-painting/60a3e3396c7b40068ad69974.md @@ -7,30 +7,30 @@ dashedName: step-11 # --description-- -Every painting needs a frame. +Cada pintura necesita un marco. -Wrap the `.canvas` element in another `div`. Give that `div` the `frame` class. +Ajuste el elemento `.canvas` en otro `div`. Asigne a ese `div` la clase `frame`. # --hints-- -You should add a new `div` element. +Debe agregar un nuevo elemento `div`. ```js assert(document.querySelectorAll('div').length === 2) ``` -Your `.canvas` element should be nested in the new `div` element. +El elemento `.canvas` debe estar anidado en el nuevo elemento `div`. ```js assert(document.querySelector('.canvas').parentElement.tagName === 'DIV'); ``` -Your new `div` should have a `class` with the value `frame`. +El nuevo `div` debe tener un `class` con el valor `frame`. ```js assert(document.querySelector('div').className.split(' ').includes('frame')); ``` -Your new `div` should be within your `body` element. +Su nuevo `div` debe estar dentro de su elemento `body`. ```js assert(document.querySelector('div').parentElement.tagName === 'BODY'); diff --git a/curriculum/challenges/espanol/14-responsive-web-design-22/learn-the-css-box-model-by-building-a-rothko-painting/60a3e3396c7b40068ad69975.md b/curriculum/challenges/espanol/14-responsive-web-design-22/learn-the-css-box-model-by-building-a-rothko-painting/60a3e3396c7b40068ad69975.md index f988633ad35..d5636f93bfa 100644 --- a/curriculum/challenges/espanol/14-responsive-web-design-22/learn-the-css-box-model-by-building-a-rothko-painting/60a3e3396c7b40068ad69975.md +++ b/curriculum/challenges/espanol/14-responsive-web-design-22/learn-the-css-box-model-by-building-a-rothko-painting/60a3e3396c7b40068ad69975.md @@ -7,27 +7,27 @@ dashedName: step-12 # --description-- -Write a new rule using the `.frame` class selector. +Escribe una nueva regla usando el selector de clase `.frame`. -Use the `border` shorthand declaration to give the `.frame` element a solid, black border with a width of `50px`. +Usa la declaración abreviada `border` para darle al elemento `.frame` un borde negro sólido con un ancho de `50px`. # --hints-- -Your code should have a `.frame` selector. +Su código debe tener un selector `.frame`. ```js const hasFrame = new __helpers.CSSHelp(document).getStyle('.frame'); assert(hasFrame); ``` -You should set the `border` property to `50px solid black`. +Debe establecer la propiedad `border` en `50px solid black`. ```js const hasBorder = new __helpers.CSSHelp(document).getCSSRules().some(x => x.style.border === '50px solid black'); assert(hasBorder); ``` -Your `.frame` element should have a `50px solid black` `border`. +El elemento `.frame` debe tener un `50px solid black` `border`. ```js const frameBorder = new __helpers.CSSHelp(document).getStyle('.frame')?.getPropertyValue('border'); diff --git a/curriculum/challenges/espanol/14-responsive-web-design-22/learn-the-css-box-model-by-building-a-rothko-painting/60a3e3396c7b40068ad69976.md b/curriculum/challenges/espanol/14-responsive-web-design-22/learn-the-css-box-model-by-building-a-rothko-painting/60a3e3396c7b40068ad69976.md index cada315d622..36336eed459 100644 --- a/curriculum/challenges/espanol/14-responsive-web-design-22/learn-the-css-box-model-by-building-a-rothko-painting/60a3e3396c7b40068ad69976.md +++ b/curriculum/challenges/espanol/14-responsive-web-design-22/learn-the-css-box-model-by-building-a-rothko-painting/60a3e3396c7b40068ad69976.md @@ -7,20 +7,20 @@ dashedName: step-13 # --description-- -The frame is much too wide. +El marco es demasiado ancho. -In `.frame`, set its `width` to 500 pixels. +En `.frame`, establezca su `width` en 500 píxeles. # --hints-- -You should set the `width` property to `500px`. +Debe establecer la propiedad `width` en `500px`. ```js const widthFilter = new __helpers.CSSHelp(document).getCSSRules().filter(x => x.style.width === '500px'); assert(widthFilter.length === 2); ``` -Your `.frame` element should have a `width` of `500px`. +El elemento `.frame` debe tener un `width` de `500px`. ```js const frameWidth = new __helpers.CSSHelp(document).getStyle('.frame')?.getPropertyValue('width'); diff --git a/curriculum/challenges/espanol/14-responsive-web-design-22/learn-the-css-box-model-by-building-a-rothko-painting/60a3e3396c7b40068ad69977.md b/curriculum/challenges/espanol/14-responsive-web-design-22/learn-the-css-box-model-by-building-a-rothko-painting/60a3e3396c7b40068ad69977.md index dfbf0ed80d5..0dd138a7518 100644 --- a/curriculum/challenges/espanol/14-responsive-web-design-22/learn-the-css-box-model-by-building-a-rothko-painting/60a3e3396c7b40068ad69977.md +++ b/curriculum/challenges/espanol/14-responsive-web-design-22/learn-the-css-box-model-by-building-a-rothko-painting/60a3e3396c7b40068ad69977.md @@ -7,20 +7,20 @@ dashedName: step-14 # --description-- -Use padding to adjust the spacing within an element. +Utilice el relleno para ajustar el espaciado dentro de un elemento. -In `.frame`, use the `padding` shorthand property to increase the space between the `.frame` and `.canvas` elements by `50px`. The shorthand will increase space in the top, bottom, left, and right of the element's border and canvas within. +En `.frame`, use la abreviatura `padding` para aumentar el espacio entre los elementos `.frame` y `.canvas` por `50px`. La taquigrafía aumentará el espacio en la parte superior, inferior, izquierda y derecha del borde y el lienzo del elemento dentro. # --hints-- -You should set the `padding` property to `50px`. +Debe establecer la propiedad `padding` en `50px`. ```js const hasPadding = new __helpers.CSSHelp(document).getCSSRules().some(x => x.style.padding === '50px'); assert(hasPadding); ``` -Your `.frame` element should have a `padding` value of `50px`. +El elemento `.frame` debe tener un valor `padding` de `50px`. ```js const framePadding = new __helpers.CSSHelp(document).getStyle('.frame')?.getPropertyValue('padding'); diff --git a/curriculum/challenges/espanol/14-responsive-web-design-22/learn-the-css-box-model-by-building-a-rothko-painting/60a3e3396c7b40068ad69978.md b/curriculum/challenges/espanol/14-responsive-web-design-22/learn-the-css-box-model-by-building-a-rothko-painting/60a3e3396c7b40068ad69978.md index 91dce442545..c999c0f6e5b 100644 --- a/curriculum/challenges/espanol/14-responsive-web-design-22/learn-the-css-box-model-by-building-a-rothko-painting/60a3e3396c7b40068ad69978.md +++ b/curriculum/challenges/espanol/14-responsive-web-design-22/learn-the-css-box-model-by-building-a-rothko-painting/60a3e3396c7b40068ad69978.md @@ -7,20 +7,20 @@ dashedName: step-15 # --description-- -Use margins to adjust the spacing outside of an element. +Use márgenes para ajustar el espaciado fuera de un elemento. -Using the `margin` property, give the `.frame` element vertical margin of `20px`, and horizontal margin of `auto`. This will move the frame down 20 pixels and horizontally center it on the page. +Usando la propiedad `margin`, proporcione al elemento `.frame` un margen vertical de `20px` y un margen horizontal de `auto`. Esto moverá el marco 20 píxeles hacia abajo y lo centrará horizontalmente en la página. # --hints-- -You should set the `margin` property to `20px auto`. +Debe establecer la propiedad `margin` en `20px auto`. ```js const hasMargin = new __helpers.CSSHelp(document).getCSSRules().some(x => x.style.margin === '20px auto'); assert(hasMargin); ``` -Your `.frame` element should have a `margin` value of `20px auto`. +Su elemento `.frame` debe tener un valor `margin` de `20px auto`. ```js const frameMargin = new __helpers.CSSHelp(document).getStyle('.frame')?.getPropertyValue('margin'); diff --git a/curriculum/challenges/espanol/14-responsive-web-design-22/learn-the-css-box-model-by-building-a-rothko-painting/60a3e3396c7b40068ad69979.md b/curriculum/challenges/espanol/14-responsive-web-design-22/learn-the-css-box-model-by-building-a-rothko-painting/60a3e3396c7b40068ad69979.md index ac8e242962b..10c1e17ff7f 100644 --- a/curriculum/challenges/espanol/14-responsive-web-design-22/learn-the-css-box-model-by-building-a-rothko-painting/60a3e3396c7b40068ad69979.md +++ b/curriculum/challenges/espanol/14-responsive-web-design-22/learn-the-css-box-model-by-building-a-rothko-painting/60a3e3396c7b40068ad69979.md @@ -7,25 +7,25 @@ dashedName: step-16 # --description-- -Add a new `div` element inside of your `.canvas` element. +Agrega un nuevo elemento `div` dentro de tu elemento `.canvas`. -Give the new `div` the `class` attribute with a value of `one`. This will be your first rectangle. +Asigne al nuevo atributo `div` el atributo `class` con un valor de `one`. Este será tu primer rectángulo. # --hints-- -You should create a new `div` element. +Debe crear un nuevo elemento `div`. ```js assert(document.querySelectorAll('div').length === 3); ``` -You should nest the new `div` element within your `.canvas` element. +Debe anidar el nuevo elemento `div` dentro de su elemento `.canvas`. ```js assert(document.querySelector('.canvas').children[0].tagName === 'DIV'); ``` -Your new `div` should have a `class` attribute with a value `one`. +El nuevo `div` debe tener un atributo `class` con un valor `one`. ```js assert(document.querySelector('.canvas').children[0].className.split(' ').includes('one')); diff --git a/curriculum/challenges/espanol/14-responsive-web-design-22/learn-the-css-box-model-by-building-a-rothko-painting/60a3e3396c7b40068ad6997a.md b/curriculum/challenges/espanol/14-responsive-web-design-22/learn-the-css-box-model-by-building-a-rothko-painting/60a3e3396c7b40068ad6997a.md index 446551b848c..870ed6e8548 100644 --- a/curriculum/challenges/espanol/14-responsive-web-design-22/learn-the-css-box-model-by-building-a-rothko-painting/60a3e3396c7b40068ad6997a.md +++ b/curriculum/challenges/espanol/14-responsive-web-design-22/learn-the-css-box-model-by-building-a-rothko-painting/60a3e3396c7b40068ad6997a.md @@ -7,25 +7,25 @@ dashedName: step-17 # --description-- -Write a new rule that targets `.one` and set its `width` to 425 pixels. +Escriba una nueva regla que apunte a `.one` y establezca su `width` en 425 píxeles. # --hints-- -You should have a `.one` selector. +Deberías tener un selector `.one`. ```js const hasOne = new __helpers.CSSHelp(document).getStyle('.one'); assert(hasOne); ``` -You should set the `width` property to `425px`. +Debe establecer la propiedad `width` en `425px`. ```js const hasWidth = new __helpers.CSSHelp(document).getCSSRules().some(x => x.style.width === '425px'); assert(hasWidth); ``` -Your `.one` element should have a `width` value of `425px`. +Su elemento `.one` debe tener un valor de `width` de `425px`. ```js const oneWidth = new __helpers.CSSHelp(document).getStyle('.one')?.getPropertyValue('width'); diff --git a/curriculum/challenges/espanol/14-responsive-web-design-22/learn-the-css-box-model-by-building-a-rothko-painting/60a3e3396c7b40068ad6997b.md b/curriculum/challenges/espanol/14-responsive-web-design-22/learn-the-css-box-model-by-building-a-rothko-painting/60a3e3396c7b40068ad6997b.md index a66e124fe6f..d82daecaaa4 100644 --- a/curriculum/challenges/espanol/14-responsive-web-design-22/learn-the-css-box-model-by-building-a-rothko-painting/60a3e3396c7b40068ad6997b.md +++ b/curriculum/challenges/espanol/14-responsive-web-design-22/learn-the-css-box-model-by-building-a-rothko-painting/60a3e3396c7b40068ad6997b.md @@ -7,18 +7,18 @@ dashedName: step-18 # --description-- -Now set the `height` for `.one` to 150 pixels. +Ahora establezca el `height` para `.one` en 150 píxeles. # --hints-- -You should set the `height` property to `150px`. +Debe establecer la propiedad `height` en `150px`. ```js const hasHeight = new __helpers.CSSHelp(document).getCSSRules().some(x => x.style.height === '150px'); assert(hasHeight); ``` -Your `.one` element should have a `height` value of `150px`. +Su elemento `.one` debe tener un valor de `height` de `150px`. ```js const oneHeight = new __helpers.CSSHelp(document).getStyle('.one')?.getPropertyValue('height'); diff --git a/curriculum/challenges/espanol/14-responsive-web-design-22/learn-the-css-box-model-by-building-a-rothko-painting/60a3e3396c7b40068ad6997c.md b/curriculum/challenges/espanol/14-responsive-web-design-22/learn-the-css-box-model-by-building-a-rothko-painting/60a3e3396c7b40068ad6997c.md index c0a9fd1eff6..ec40515b2dd 100644 --- a/curriculum/challenges/espanol/14-responsive-web-design-22/learn-the-css-box-model-by-building-a-rothko-painting/60a3e3396c7b40068ad6997c.md +++ b/curriculum/challenges/espanol/14-responsive-web-design-22/learn-the-css-box-model-by-building-a-rothko-painting/60a3e3396c7b40068ad6997c.md @@ -7,18 +7,18 @@ dashedName: step-19 # --description-- -Set the `background-color` of `.one` to `#efb762`. +Establezca el `background-color` de `.one` en `#efb762`. # --hints-- -You should set the `background-color` property to `#efb762`. +Debe establecer la propiedad `background-color` en `#efb762`. ```js const hasBackground = new __helpers.CSSHelp(document).getCSSRules().some(x => x.style['background-color'] === 'rgb(239, 183, 98)'); assert(hasBackground) ``` -Your `.one` element should have a `background-color` value of `#efb762`. +Su elemento `.one` debe tener un valor `background-color` de `#efb762`. ```js const oneBackground = new __helpers.CSSHelp(document).getStyle('.one')?.getPropertyValue('background-color'); diff --git a/curriculum/challenges/espanol/14-responsive-web-design-22/learn-the-css-box-model-by-building-a-rothko-painting/60a3e3396c7b40068ad6997d.md b/curriculum/challenges/espanol/14-responsive-web-design-22/learn-the-css-box-model-by-building-a-rothko-painting/60a3e3396c7b40068ad6997d.md index b4a83be16da..a92a820fe8b 100644 --- a/curriculum/challenges/espanol/14-responsive-web-design-22/learn-the-css-box-model-by-building-a-rothko-painting/60a3e3396c7b40068ad6997d.md +++ b/curriculum/challenges/espanol/14-responsive-web-design-22/learn-the-css-box-model-by-building-a-rothko-painting/60a3e3396c7b40068ad6997d.md @@ -7,20 +7,20 @@ dashedName: step-20 # --description-- -Use margins to position the `.one` element on the canvas. +Utilice márgenes para colocar el elemento `.one` en el lienzo. -Add the shorthand `margin` property with a vertical margin of `20px` and a horizontal margin of `auto`. +Agregue la propiedad abreviada `margin` con un margen vertical de `20px` y un margen horizontal de `auto`. # --hints-- -You should set the `margin` property to `20px auto`. +Debe establecer la propiedad `margin` en `20px auto`. ```js const marginFilter = new __helpers.CSSHelp(document).getCSSRules().filter(x => x.style.margin === '20px auto'); assert(marginFilter.length === 2); ``` -Your `.one` element should have a `margin` value of `20px auto`. +Su elemento `.one` debe tener un valor `margin` de `20px auto`. ```js const oneMargin = new __helpers.CSSHelp(document).getStyle('.one')?.getPropertyValue('margin'); diff --git a/curriculum/challenges/espanol/14-responsive-web-design-22/learn-the-css-box-model-by-building-a-rothko-painting/60a3e3396c7b40068ad6997e.md b/curriculum/challenges/espanol/14-responsive-web-design-22/learn-the-css-box-model-by-building-a-rothko-painting/60a3e3396c7b40068ad6997e.md index 1f8b6fc0783..cdfce57088d 100644 --- a/curriculum/challenges/espanol/14-responsive-web-design-22/learn-the-css-box-model-by-building-a-rothko-painting/60a3e3396c7b40068ad6997e.md +++ b/curriculum/challenges/espanol/14-responsive-web-design-22/learn-the-css-box-model-by-building-a-rothko-painting/60a3e3396c7b40068ad6997e.md @@ -7,20 +7,20 @@ dashedName: step-21 # --description-- -Now `.one` is centered horizontally, but its top margin is pushing past the canvas and onto the frame's border, shifting the entire canvas down 20 pixels. +Ahora `.one` está centrado horizontalmente, pero su margen superior está empujando más allá del lienzo y hacia el borde del marco, desplazando todo el lienzo 20 píxeles hacia abajo. -Add `padding` of `1px` to the `.canvas` element to give the `.one` element something solid to push off of. +Agregue `padding` de `1px` al elemento `.canvas` para darle al elemento `.one` algo sólido para empujar. # --hints-- -You should set the `padding` property to `1px`. +Debe establecer la propiedad `padding` en `1px`. ```js const hasPadding = new __helpers.CSSHelp(document).getCSSRules().some(x => x.style.padding === '1px'); assert(hasPadding); ``` -Your `.canvas` element should have a `padding` value of `1px`. +El elemento `.canvas` debe tener un valor `padding` de `1px`. ```js const canvasPadding = new __helpers.CSSHelp(document).getStyle('.canvas')?.getPropertyValue('padding'); diff --git a/curriculum/challenges/espanol/14-responsive-web-design-22/learn-the-css-box-model-by-building-a-rothko-painting/60a3e3396c7b40068ad6997f.md b/curriculum/challenges/espanol/14-responsive-web-design-22/learn-the-css-box-model-by-building-a-rothko-painting/60a3e3396c7b40068ad6997f.md index 9f4bfaae89b..3f94f0211d9 100644 --- a/curriculum/challenges/espanol/14-responsive-web-design-22/learn-the-css-box-model-by-building-a-rothko-painting/60a3e3396c7b40068ad6997f.md +++ b/curriculum/challenges/espanol/14-responsive-web-design-22/learn-the-css-box-model-by-building-a-rothko-painting/60a3e3396c7b40068ad6997f.md @@ -7,27 +7,27 @@ dashedName: step-22 # --description-- -Adding 1 pixel of padding to the top, bottom, left, and right of the canvas changed its dimensions to 502 pixels x 602 pixels. +Agregar 1 píxel de relleno a la parte superior, inferior, izquierda y derecha del lienzo cambió sus dimensiones a 502 píxeles x 602 píxeles. -Replace the `padding` property with `overflow` set to `hidden` - changing the canvas back to its original dimensions. +Reemplace la propiedad `padding` por `overflow` establecida en `hidden` - Cambiar el lienzo a sus dimensiones originales. # --hints-- -You should remove the `padding` property from the `.canvas` selector. +Debe quitar la propiedad `padding` del selector `.canvas`. ```js const canvasPadding = new __helpers.CSSHelp(document).getStyle('.canvas').getPropertyValue('padding'); assert(!canvasPadding); ``` -You should set the `overflow` property to `hidden`. +Debe establecer la propiedad `overflow` en `hidden`. ```js const hasOverflow = new __helpers.CSSHelp(document).getCSSRules().some(x => x.style.overflow === 'hidden'); assert(hasOverflow); ``` -Your `.canvas` element should have an `overflow` value of `hidden`. +El elemento `.canvas` debe tener un valor `overflow` de `hidden`. ```js const canvasOverflow = new __helpers.CSSHelp(document).getStyle('.canvas')?.getPropertyValue('overflow'); diff --git a/curriculum/challenges/espanol/14-responsive-web-design-22/learn-the-css-box-model-by-building-a-rothko-painting/60a3e3396c7b40068ad69980.md b/curriculum/challenges/espanol/14-responsive-web-design-22/learn-the-css-box-model-by-building-a-rothko-painting/60a3e3396c7b40068ad69980.md index 59881b438c3..c1c94c7aed6 100644 --- a/curriculum/challenges/espanol/14-responsive-web-design-22/learn-the-css-box-model-by-building-a-rothko-painting/60a3e3396c7b40068ad69980.md +++ b/curriculum/challenges/espanol/14-responsive-web-design-22/learn-the-css-box-model-by-building-a-rothko-painting/60a3e3396c7b40068ad69980.md @@ -7,29 +7,29 @@ dashedName: step-23 # --description-- -Add another `div` with a `class` value of `two` just below your `one` element. This will be your second rectangle. +Agregue otro `div` con un valor `class` de `two` justo debajo de su elemento `one`. Este será tu segundo rectángulo. # --hints-- -You should not change the existing `.one` element. +No debe cambiar el elemento `.one` existente. ```js assert(document.querySelectorAll('.one').length === 1); ``` -You should have a second `div` element in your `.canvas` element. +Debes tener un segundo elemento `div` en tu elemento `.canvas`. ```js assert(document.querySelector('.canvas').children[1].tagName === 'DIV'); ``` -Your second `div` element should have a `class` value of `two`. +El segundo elemento `div` debe tener un valor `class` de `two`. ```js assert(document.querySelector('.canvas').children[1].className.split(' ').includes('two')); ``` -Your `.two` element should come after your `.one` element. +El elemento `.two` debe venir después del elemento `.one`. ```js assert(document.querySelector('.two').previousElementSibling.className.split(' ').includes('one')); diff --git a/curriculum/challenges/espanol/14-responsive-web-design-22/learn-the-css-box-model-by-building-a-rothko-painting/60a3e3396c7b40068ad69981.md b/curriculum/challenges/espanol/14-responsive-web-design-22/learn-the-css-box-model-by-building-a-rothko-painting/60a3e3396c7b40068ad69981.md index c1db512e4ed..87b9f759d0f 100644 --- a/curriculum/challenges/espanol/14-responsive-web-design-22/learn-the-css-box-model-by-building-a-rothko-painting/60a3e3396c7b40068ad69981.md +++ b/curriculum/challenges/espanol/14-responsive-web-design-22/learn-the-css-box-model-by-building-a-rothko-painting/60a3e3396c7b40068ad69981.md @@ -18,14 +18,14 @@ const hasTwo = new __helpers.CSSHelp(document).getStyle('.two'); assert(hasTwo); ``` -You should set the `width` property to `475px`. +Debe establecer la propiedad `width` en `475px`. ```js const hasWidth = new __helpers.CSSHelp(document).getCSSRules().some(x => x.style.width === '475px'); assert(hasWidth); ``` -Your `.two` element should have a `width` value of `475px`. +Su elemento `.two` debe tener un valor de `width` de `475px`. ```js const twoWidth = new __helpers.CSSHelp(document).getStyle('.two')?.getPropertyValue('width'); diff --git a/curriculum/challenges/espanol/14-responsive-web-design-22/learn-the-css-box-model-by-building-a-rothko-painting/60a3e3396c7b40068ad69982.md b/curriculum/challenges/espanol/14-responsive-web-design-22/learn-the-css-box-model-by-building-a-rothko-painting/60a3e3396c7b40068ad69982.md index 86288cbc56c..3531663fc77 100644 --- a/curriculum/challenges/espanol/14-responsive-web-design-22/learn-the-css-box-model-by-building-a-rothko-painting/60a3e3396c7b40068ad69982.md +++ b/curriculum/challenges/espanol/14-responsive-web-design-22/learn-the-css-box-model-by-building-a-rothko-painting/60a3e3396c7b40068ad69982.md @@ -7,18 +7,18 @@ dashedName: step-25 # --description-- -Set the `height` of the `.two` element to 200 pixels. +Establezca el `height` del elemento `.two` en 200 píxeles. # --hints-- -You should set the `height` property to `200px`. +Debe establecer la propiedad `height` en `200px`. ```js const hasHeight = new __helpers.CSSHelp(document).getCSSRules().some(x => x.style.height === '200px'); assert(hasHeight); ``` -Your `.two` element should have a `height` value of `200px`. +El elemento `.two` debe tener un valor `height` de `200px`. ```js const twoHeight = new __helpers.CSSHelp(document).getStyle('.two')?.getPropertyValue('height'); diff --git a/curriculum/challenges/espanol/14-responsive-web-design-22/learn-the-css-box-model-by-building-a-rothko-painting/60a3e3396c7b40068ad69983.md b/curriculum/challenges/espanol/14-responsive-web-design-22/learn-the-css-box-model-by-building-a-rothko-painting/60a3e3396c7b40068ad69983.md index ad05afb5fa8..f3de341688a 100644 --- a/curriculum/challenges/espanol/14-responsive-web-design-22/learn-the-css-box-model-by-building-a-rothko-painting/60a3e3396c7b40068ad69983.md +++ b/curriculum/challenges/espanol/14-responsive-web-design-22/learn-the-css-box-model-by-building-a-rothko-painting/60a3e3396c7b40068ad69983.md @@ -7,18 +7,18 @@ dashedName: step-26 # --description-- -Set the `background-color` of the `.two` element to `#8f0401`. +Establezca el `background-color` del elemento `.two` en `#8f0401`. # --hints-- -You should set the `background-color` property to `#8f0401`. +Debe establecer la propiedad `background-color` en `#8f0401`. ```js const hasBackground = new __helpers.CSSHelp(document).getCSSRules().some(x => x.style['background-color'] === 'rgb(143, 4, 1)'); assert(hasBackground); ``` -Your `.two` element should have a `background-color` value of `#8f0401`. +El elemento `.two` debe tener un valor `background-color` de `#8f0401`. ```js const twoBackground = new __helpers.CSSHelp(document).getStyle('.two')?.getPropertyValue('background-color'); diff --git a/curriculum/challenges/espanol/14-responsive-web-design-22/learn-the-css-box-model-by-building-a-rothko-painting/60a3e3396c7b40068ad69984.md b/curriculum/challenges/espanol/14-responsive-web-design-22/learn-the-css-box-model-by-building-a-rothko-painting/60a3e3396c7b40068ad69984.md index 76da04df8ca..a5ca04e581b 100644 --- a/curriculum/challenges/espanol/14-responsive-web-design-22/learn-the-css-box-model-by-building-a-rothko-painting/60a3e3396c7b40068ad69984.md +++ b/curriculum/challenges/espanol/14-responsive-web-design-22/learn-the-css-box-model-by-building-a-rothko-painting/60a3e3396c7b40068ad69984.md @@ -7,18 +7,18 @@ dashedName: step-27 # --description-- -Center the `.two` element by setting its `margin` to `auto`. +Centra el elemento `.two` estableciendo su `margin` en `auto`. # --hints-- -You should set the `margin` property to `auto`. +Debe establecer la propiedad `margin` en `auto`. ```js const hasMargin = new __helpers.CSSHelp(document).getCSSRules().some(x => x.style.margin === 'auto'); assert(hasMargin); ``` -Your `.two` element should have a `margin` value of `auto`. +El elemento `.two` debe tener un valor `margin` de `auto`. ```js const twoMargin = new __helpers.CSSHelp(document).getStyle('.two')?.getPropertyValue('margin'); diff --git a/curriculum/challenges/espanol/14-responsive-web-design-22/learn-the-css-box-model-by-building-a-rothko-painting/60a3e3396c7b40068ad69986.md b/curriculum/challenges/espanol/14-responsive-web-design-22/learn-the-css-box-model-by-building-a-rothko-painting/60a3e3396c7b40068ad69986.md index 3dd47766dfa..a7cb7c17cb1 100644 --- a/curriculum/challenges/espanol/14-responsive-web-design-22/learn-the-css-box-model-by-building-a-rothko-painting/60a3e3396c7b40068ad69986.md +++ b/curriculum/challenges/espanol/14-responsive-web-design-22/learn-the-css-box-model-by-building-a-rothko-painting/60a3e3396c7b40068ad69986.md @@ -7,30 +7,30 @@ dashedName: step-28 # --description-- -Create a new `div` with a `class` value of `three` right under the `.two` element. This will be your third rectangle. +Cree un nuevo `div` con un valor `class` de `three` justo debajo del elemento `.two`. Este será tu tercer rectángulo. # --hints-- -Your existing `.one` and `.two` elements should not be changed. +Los elementos existentes `.one` y `.two` no deben cambiarse. ```js assert(document.querySelectorAll('.one').length === 1); assert(document.querySelectorAll('.two').length === 1); ``` -Your new `div` should be nested in your `.canvas` element. +El nuevo `div` debe estar anidado en el elemento `.canvas`. ```js assert(document.querySelector('.canvas').children[2].tagName === 'DIV'); ``` -Your new `div` should come after your `.two` element. +Su nuevo `div` debe venir después de su elemento `.two`. ```js assert(document.querySelector('.two').nextElementSibling.tagName === 'DIV'); ``` -Your new `div` element should have a `class` with the value `three`. +El nuevo elemento `div` debe tener un `class` con el valor `three`. ```js assert(document.querySelector('.canvas').children[2].className.split(' ').includes('three')); diff --git a/curriculum/challenges/espanol/14-responsive-web-design-22/learn-the-css-box-model-by-building-a-rothko-painting/60a3e3396c7b40068ad69987.md b/curriculum/challenges/espanol/14-responsive-web-design-22/learn-the-css-box-model-by-building-a-rothko-painting/60a3e3396c7b40068ad69987.md index 64f439e6218..af69024f421 100644 --- a/curriculum/challenges/espanol/14-responsive-web-design-22/learn-the-css-box-model-by-building-a-rothko-painting/60a3e3396c7b40068ad69987.md +++ b/curriculum/challenges/espanol/14-responsive-web-design-22/learn-the-css-box-model-by-building-a-rothko-painting/60a3e3396c7b40068ad69987.md @@ -7,27 +7,27 @@ dashedName: step-29 # --description-- -You don't always have to use pixels when sizing an element. +No siempre tienes que usar píxeles al dimensionar un elemento. -Create a new rule, `.three`, and set its `width` to `91%`. +Cree una nueva regla, `.three`, y establezca su `width` en `91%`. # --hints-- -You should use the `.three` selector. +Debe usar el selector `.three`. ```js const hasThree = new __helpers.CSSHelp(document).getStyle('.three'); assert(hasThree); ``` -You should set the `width` property to `91%`. +Debe establecer la propiedad `width` en `91%`. ```js const hasWidth = new __helpers.CSSHelp(document).getCSSRules().some(x => x.style.width === '91%'); assert(hasWidth); ``` -Your `.three` element should have a `width` value of `91%`. +Su elemento `.three` debe tener un valor de `width` de `91%`. ```js const threeWidth = new __helpers.CSSHelp(document).getStyle('.three')?.getPropertyValue('width'); diff --git a/curriculum/challenges/espanol/14-responsive-web-design-22/learn-the-css-box-model-by-building-a-rothko-painting/60a3e3396c7b40068ad69988.md b/curriculum/challenges/espanol/14-responsive-web-design-22/learn-the-css-box-model-by-building-a-rothko-painting/60a3e3396c7b40068ad69988.md index 9205e213fbe..7c43b8738b9 100644 --- a/curriculum/challenges/espanol/14-responsive-web-design-22/learn-the-css-box-model-by-building-a-rothko-painting/60a3e3396c7b40068ad69988.md +++ b/curriculum/challenges/espanol/14-responsive-web-design-22/learn-the-css-box-model-by-building-a-rothko-painting/60a3e3396c7b40068ad69988.md @@ -7,18 +7,18 @@ dashedName: step-30 # --description-- -Set the `height` of `.three` to `28%`. +Establezca el `height` de `.three` en `28%`. # --hints-- -You should set the `height` property to `28%`. +Debe establecer la propiedad `height` en `28%`. ```js const hasHeight = new __helpers.CSSHelp(document).getCSSRules().some(x => x.style.height === '28%'); assert(hasHeight); ``` -Your `.three` element should have a `height` value of `28%`. +El elemento `.three` debe tener un valor `height` de `28%`. ```js const threeHeight = new __helpers.CSSHelp(document).getStyle('.three')?.getPropertyValue('height'); diff --git a/curriculum/challenges/espanol/14-responsive-web-design-22/learn-the-css-box-model-by-building-a-rothko-painting/60a3e3396c7b40068ad69989.md b/curriculum/challenges/espanol/14-responsive-web-design-22/learn-the-css-box-model-by-building-a-rothko-painting/60a3e3396c7b40068ad69989.md index 320cb29a702..3eb5b662e4f 100644 --- a/curriculum/challenges/espanol/14-responsive-web-design-22/learn-the-css-box-model-by-building-a-rothko-painting/60a3e3396c7b40068ad69989.md +++ b/curriculum/challenges/espanol/14-responsive-web-design-22/learn-the-css-box-model-by-building-a-rothko-painting/60a3e3396c7b40068ad69989.md @@ -7,18 +7,18 @@ dashedName: step-31 # --description-- -Change the `background-color` of `.three` to `#b20403`. +Cambie el `background-color` de `.three` a `#b20403`. # --hints-- -You should set the `background-color` property to `#b20403`. +Debe establecer la propiedad `background-color` en `#b20403`. ```js const hasBackground = new __helpers.CSSHelp(document).getCSSRules().some(x => x.style['background-color'] === 'rgb(178, 4, 3)'); assert(hasBackground); ``` -Your `.three` element should have a `background-color` value of `#b20403`. +El elemento `.three` debe tener un valor `background-color` de `#b20403`. ```js const threeBackground = new __helpers.CSSHelp(document).getStyle('.three')?.getPropertyValue('background-color'); diff --git a/curriculum/challenges/espanol/14-responsive-web-design-22/learn-the-css-box-model-by-building-a-rothko-painting/60a3e3396c7b40068ad6998a.md b/curriculum/challenges/espanol/14-responsive-web-design-22/learn-the-css-box-model-by-building-a-rothko-painting/60a3e3396c7b40068ad6998a.md index d3380c3452d..2cd907aac20 100644 --- a/curriculum/challenges/espanol/14-responsive-web-design-22/learn-the-css-box-model-by-building-a-rothko-painting/60a3e3396c7b40068ad6998a.md +++ b/curriculum/challenges/espanol/14-responsive-web-design-22/learn-the-css-box-model-by-building-a-rothko-painting/60a3e3396c7b40068ad6998a.md @@ -7,18 +7,18 @@ dashedName: step-32 # --description-- -Center the `.three` element on the canvas by setting its `margin` to `auto`. +Centra el elemento `.three` en el lienzo estableciendo su `margin` en `auto`. # --hints-- -You should set the `margin` property to `auto`. +Debe establecer la propiedad `margin` en `auto`. ```js const marginFilter = new __helpers.CSSHelp(document).getCSSRules().filter(x => x.style.margin === 'auto'); assert(marginFilter.length === 2); ``` -Your `.three` element should have a `margin` value of `auto`. +El elemento `.three` debe tener un valor `margin` de `auto`. ```js const threeMargin = new __helpers.CSSHelp(document).getStyle('.three')?.getPropertyValue('margin'); diff --git a/curriculum/challenges/espanol/14-responsive-web-design-22/learn-the-css-box-model-by-building-a-rothko-painting/60a3e3396c7b40068ad6998b.md b/curriculum/challenges/espanol/14-responsive-web-design-22/learn-the-css-box-model-by-building-a-rothko-painting/60a3e3396c7b40068ad6998b.md index 2490bfe0f9a..6e6636bebb2 100644 --- a/curriculum/challenges/espanol/14-responsive-web-design-22/learn-the-css-box-model-by-building-a-rothko-painting/60a3e3396c7b40068ad6998b.md +++ b/curriculum/challenges/espanol/14-responsive-web-design-22/learn-the-css-box-model-by-building-a-rothko-painting/60a3e3396c7b40068ad6998b.md @@ -7,22 +7,22 @@ dashedName: step-33 # --description-- -It's helpful to have your margins push in one direction. +Es útil que sus márgenes empujen en una dirección. -In this case, the bottom margin of the `.one` element pushes `.two` down 20 pixels. +En este caso, el margen inferior del elemento `.one` empuja `.two` 20 píxeles hacia abajo. -In the `.two` selector, use `margin` shorthand property to set top margin to `0`, horizontal margin to `auto`, and bottom margin to `20px`. This will remove its top margin, horizontally center it, and set its bottom margin to 20 pixels. +En el selector `.two`, use la abreviatura `margin` para establecer el margen superior en `0`, el margen horizontal en `auto` y el margen inferior en `20px`. Esto eliminará su margen superior, lo centrará horizontalmente y establecerá su margen inferior en 20 píxeles. # --hints-- -You should set the `margin` property to `0 auto 20px`. +Debe establecer la propiedad `margin` en `0 auto 20px`. ```js const hasMargin = new __helpers.CSSHelp(document).getCSSRules().some(x => x.style.margin === '0px auto 20px'); assert(hasMargin); ``` -Your `.two` element should have a `margin` value of `0 auto 20px`. +El elemento `.two` debe tener un valor `margin` de `0 auto 20px`. ```js const twoMargin = new __helpers.CSSHelp(document).getStyle('.two')?.getPropertyValue('margin'); diff --git a/curriculum/challenges/espanol/14-responsive-web-design-22/learn-the-css-box-model-by-building-a-rothko-painting/60a3e3396c7b40068ad6998c.md b/curriculum/challenges/espanol/14-responsive-web-design-22/learn-the-css-box-model-by-building-a-rothko-painting/60a3e3396c7b40068ad6998c.md index c5d3d55b4d8..15001915e6f 100644 --- a/curriculum/challenges/espanol/14-responsive-web-design-22/learn-the-css-box-model-by-building-a-rothko-painting/60a3e3396c7b40068ad6998c.md +++ b/curriculum/challenges/espanol/14-responsive-web-design-22/learn-the-css-box-model-by-building-a-rothko-painting/60a3e3396c7b40068ad6998c.md @@ -7,11 +7,11 @@ dashedName: step-34 # --description-- -The colors and shapes of your painting are too sharp to pass as a Rothko. +Los colores y las formas de su pintura son demasiado nítidos para pasar como un Rothko. -Use the `filter` property to `blur` the painting by `2px` in the `.canvas` element. +Utilice la propiedad `filter` para `blur` la pintura por `2px` en el elemento `.canvas`. -Here's an example of a rule that add a 3px `blur`: +Aquí hay un ejemplo de una regla que agrega un 3px `blur`: ```css p { @@ -21,14 +21,14 @@ p { # --hints-- -You should set the `filter` property to `blur(2px)`. +Debe establecer la propiedad `filter` en `blur(2px)`. ```js const hasFilter = new __helpers.CSSHelp(document).getCSSRules().some(x => x.style.filter === 'blur(2px)'); assert(hasFilter); ``` -Your `.canvas` element should have a `filter` value of `blur(2px)`. +El elemento `.canvas` debe tener un valor `filter` de `blur(2px)`. ```js const canvasFilter = new __helpers.CSSHelp(document).getStyle('.canvas')?.getPropertyValue('filter'); diff --git a/curriculum/challenges/espanol/14-responsive-web-design-22/learn-the-css-box-model-by-building-a-rothko-painting/60a3e3396c7b40068ad6998d.md b/curriculum/challenges/espanol/14-responsive-web-design-22/learn-the-css-box-model-by-building-a-rothko-painting/60a3e3396c7b40068ad6998d.md index 42116a7becd..f558494f926 100644 --- a/curriculum/challenges/espanol/14-responsive-web-design-22/learn-the-css-box-model-by-building-a-rothko-painting/60a3e3396c7b40068ad6998d.md +++ b/curriculum/challenges/espanol/14-responsive-web-design-22/learn-the-css-box-model-by-building-a-rothko-painting/60a3e3396c7b40068ad6998d.md @@ -7,25 +7,25 @@ dashedName: step-35 # --description-- -Create a rule that targets both `.one` and `.two` and increase their `blur` effect by 1 pixel. +Cree una regla destinada tanto a `.one` como a `.two` y aumente su efecto `blur` en 1 píxel. # --hints-- -You should have a `.one, .two` selector list. +Debe tener una lista de selectores `.one, .two`. ```js const oneTwo = new __helpers.CSSHelp(document).getStyle('.one, .two'); assert(oneTwo); ``` -You should set the `filter` property to `blur(1px)`. +Debe establecer la propiedad `filter` en `blur(1px)`. ```js const hasFilter = new __helpers.CSSHelp(document).getCSSRules().some(x => x.style.filter === 'blur(1px)'); assert(hasFilter) ``` -Your `.one` element should have a `filter` value of `blur(1px)`. +El elemento `.one` debe tener un valor `filter` de `blur(1px)`. ```js const one = document.querySelector('.one'); @@ -33,7 +33,7 @@ const oneFilter = getComputedStyle(one).filter; assert(oneFilter === 'blur(1px)'); ``` -Your `.two` element should have a `filter` value of `blur(1px)`. +El elemento `.two` debe tener un valor `filter` de `blur(1px)`. ```js const two = document.querySelector('.two'); diff --git a/curriculum/challenges/espanol/14-responsive-web-design-22/learn-the-css-box-model-by-building-a-rothko-painting/60a3e3396c7b40068ad6998e.md b/curriculum/challenges/espanol/14-responsive-web-design-22/learn-the-css-box-model-by-building-a-rothko-painting/60a3e3396c7b40068ad6998e.md index eb2e5fcacad..20e8b546bde 100644 --- a/curriculum/challenges/espanol/14-responsive-web-design-22/learn-the-css-box-model-by-building-a-rothko-painting/60a3e3396c7b40068ad6998e.md +++ b/curriculum/challenges/espanol/14-responsive-web-design-22/learn-the-css-box-model-by-building-a-rothko-painting/60a3e3396c7b40068ad6998e.md @@ -7,18 +7,18 @@ dashedName: step-36 # --description-- -Increase the `blur` of `.three` by 2 pixels. +Aumente el `blur` de `.three` en 2 píxeles. # --hints-- -You should set the `filter` property to `blur(2px)`. +Debe establecer la propiedad `filter` en `blur(2px)`. ```js const filterFilter = new __helpers.CSSHelp(document).getCSSRules().filter(x => x.style.filter === 'blur(2px)'); assert(filterFilter.length === 2); ``` -Your `.three` element should have a `filter` value of `blur(2px)`. +El elemento `.three` debe tener un valor `filter` de `blur(2px)`. ```js const threeFilter = new __helpers.CSSHelp(document).getStyle('.three')?.getPropertyValue('filter'); diff --git a/curriculum/challenges/espanol/14-responsive-web-design-22/learn-the-css-box-model-by-building-a-rothko-painting/60a3e3396c7b40068ad6998f.md b/curriculum/challenges/espanol/14-responsive-web-design-22/learn-the-css-box-model-by-building-a-rothko-painting/60a3e3396c7b40068ad6998f.md index 27f0818270d..5d4ae6e4d29 100644 --- a/curriculum/challenges/espanol/14-responsive-web-design-22/learn-the-css-box-model-by-building-a-rothko-painting/60a3e3396c7b40068ad6998f.md +++ b/curriculum/challenges/espanol/14-responsive-web-design-22/learn-the-css-box-model-by-building-a-rothko-painting/60a3e3396c7b40068ad6998f.md @@ -7,20 +7,20 @@ dashedName: step-37 # --description-- -The rectangles are too small and their edges don't have the soft quality of a painting. +Los rectángulos son demasiado pequeños y sus bordes no tienen la calidad suave de una pintura. -Increase the area and soften the edges of `.one` by setting its `box-shadow` to `0 0 3px 3px #efb762`. +Aumente el área y suavice los bordes de `.one` estableciendo su `box-shadow` en `0 0 3px 3px #efb762`. # --hints-- -You should set the `box-shadow` property to `0 0 3px 3px #efb762`. +Debe establecer la propiedad `box-shadow` en `0 0 3px 3px #efb762`. ```js const hasBoxShadow = new __helpers.CSSHelp(document).getCSSRules().some(x => x.style['box-shadow'] === 'rgb(239, 183, 98) 0px 0px 3px 3px'); assert(hasBoxShadow); ``` -Your `.one` element should have a `box-shadow` value of `0 0 3px 3px #efb762`. +Su elemento `.one` debe tener un valor `box-shadow` de `0 0 3px 3px #efb762`. ```js const oneShadow = new __helpers.CSSHelp(document).getStyle('.one')?.getPropertyValue('box-shadow'); diff --git a/curriculum/challenges/espanol/14-responsive-web-design-22/learn-the-css-box-model-by-building-a-rothko-painting/60a3e3396c7b40068ad69990.md b/curriculum/challenges/espanol/14-responsive-web-design-22/learn-the-css-box-model-by-building-a-rothko-painting/60a3e3396c7b40068ad69990.md index 18d3b3c8068..e5c82f7a73d 100644 --- a/curriculum/challenges/espanol/14-responsive-web-design-22/learn-the-css-box-model-by-building-a-rothko-painting/60a3e3396c7b40068ad69990.md +++ b/curriculum/challenges/espanol/14-responsive-web-design-22/learn-the-css-box-model-by-building-a-rothko-painting/60a3e3396c7b40068ad69990.md @@ -7,18 +7,18 @@ dashedName: step-38 # --description-- -Use the same `box-shadow` declaration for `.two`, but change the color from `#efb762` to `#8f0401`. +Utilice la misma declaración `box-shadow` para `.two`, pero cambie el color de `#efb762` a `#8f0401`. # --hints-- -You should set the `box-shadow` property to `0 0 3px 3px #8f0401`. +Debe establecer la propiedad `box-shadow` en `0 0 3px 3px #8f0401`. ```js const hasBoxShadow = new __helpers.CSSHelp(document).getCSSRules().some(x => x.style['box-shadow'] === 'rgb(143, 4, 1) 0px 0px 3px 3px'); assert(hasBoxShadow); ``` -Your `.two` element should have a `box-shadow` value of `0 0 3px 3px #8f0401`. +El elemento `.two` debe tener un valor `box-shadow` de `0 0 3px 3px #8f0401`. ```js const twoShadow = new __helpers.CSSHelp(document).getStyle('.two')?.getPropertyValue('box-shadow'); diff --git a/curriculum/challenges/espanol/14-responsive-web-design-22/learn-the-css-box-model-by-building-a-rothko-painting/60a3e3396c7b40068ad69991.md b/curriculum/challenges/espanol/14-responsive-web-design-22/learn-the-css-box-model-by-building-a-rothko-painting/60a3e3396c7b40068ad69991.md index d9bffb865fd..dff2e105bb5 100644 --- a/curriculum/challenges/espanol/14-responsive-web-design-22/learn-the-css-box-model-by-building-a-rothko-painting/60a3e3396c7b40068ad69991.md +++ b/curriculum/challenges/espanol/14-responsive-web-design-22/learn-the-css-box-model-by-building-a-rothko-painting/60a3e3396c7b40068ad69991.md @@ -7,18 +7,18 @@ dashedName: step-39 # --description-- -Add a `box-shadow` to `.three` with the values `0 0 5px 5px #b20403`. +Agregue un `box-shadow` a `.three` con los valores `0 0 5px 5px #b20403`. # --hints-- -You should set the `box-shadow` property to `0 0 5px 5px #b20403`. +Debe establecer la propiedad `box-shadow` en `0 0 5px 5px #b20403`. ```js const hasBoxShadow = new __helpers.CSSHelp(document).getCSSRules().some(x => x.style['box-shadow'] === 'rgb(178, 4, 3) 0px 0px 5px 5px'); assert(hasBoxShadow); ``` -Your `.three` element should have a `box-shadow` value of `0 0 5px 5px #b20403`. +El elemento `.three` debe tener un valor `box-shadow` de `0 0 5px 5px #b20403`. ```js const threeShadow = new __helpers.CSSHelp(document).getStyle('.three')?.getPropertyValue('box-shadow'); diff --git a/curriculum/challenges/espanol/14-responsive-web-design-22/learn-the-css-box-model-by-building-a-rothko-painting/60a3e3396c7b40068ad69992.md b/curriculum/challenges/espanol/14-responsive-web-design-22/learn-the-css-box-model-by-building-a-rothko-painting/60a3e3396c7b40068ad69992.md index 115c85a038b..40863382749 100644 --- a/curriculum/challenges/espanol/14-responsive-web-design-22/learn-the-css-box-model-by-building-a-rothko-painting/60a3e3396c7b40068ad69992.md +++ b/curriculum/challenges/espanol/14-responsive-web-design-22/learn-the-css-box-model-by-building-a-rothko-painting/60a3e3396c7b40068ad69992.md @@ -7,20 +7,20 @@ dashedName: step-40 # --description-- -The corners of each rectangle are still too sharp. +Las esquinas de cada rectángulo siguen siendo demasiado afiladas. -Round each corner of the `.one` element by 9 pixels, using the `border-radius` property. +Redondee cada esquina del elemento `.one` 9 píxeles, utilizando la propiedad `border-radius`. # --hints-- -You should set the `border-radius` property to `9px`. +Debe establecer la propiedad `border-radius` en `9px`. ```js const hasBorderRadius = new __helpers.CSSHelp(document).getCSSRules().some(x => x.style['border-radius'] === '9px'); assert(hasBorderRadius); ``` -Your `.one` element should have a `border-radius` value of `9px`. +El elemento `.one` debe tener un valor `border-radius` de `9px`. ```js const oneBorderRadius =new __helpers.CSSHelp(document).getStyle('.one')?.getPropertyValue('border-radius'); diff --git a/curriculum/challenges/espanol/14-responsive-web-design-22/learn-the-css-box-model-by-building-a-rothko-painting/60a3e3396c7b40068ad69993.md b/curriculum/challenges/espanol/14-responsive-web-design-22/learn-the-css-box-model-by-building-a-rothko-painting/60a3e3396c7b40068ad69993.md index c517f6a6706..8b06f00812e 100644 --- a/curriculum/challenges/espanol/14-responsive-web-design-22/learn-the-css-box-model-by-building-a-rothko-painting/60a3e3396c7b40068ad69993.md +++ b/curriculum/challenges/espanol/14-responsive-web-design-22/learn-the-css-box-model-by-building-a-rothko-painting/60a3e3396c7b40068ad69993.md @@ -7,18 +7,18 @@ dashedName: step-41 # --description-- -Use the `border-radius` property on the `.two` selector, to set its top-left and bottom-right radii to `8px`, and top-right and bottom-left radii to `10px`. +Utilice la propiedad `border-radius` en el selector `.two` para establecer sus radios superior izquierdo e inferior derecho en `8px` y los radios superior derecho e inferior izquierdo en `10px`. # --hints-- -You should set the `border-radius` property to `8px 10px`. +Debe establecer la propiedad `border-radius` en `8px 10px`. ```js const hasBorderRadius = new __helpers.CSSHelp(document).getCSSRules().some(x => x.style['border-radius'] === '8px 10px'); assert(hasBorderRadius); ``` -Your `.two` element should have a `border-radius` value of `8px 10px`. +El elemento `.two` debe tener un valor `border-radius` de `8px 10px`. ```js const twoBorderRadius = new __helpers.CSSHelp(document).getStyle('.two')?.getPropertyValue('border-radius'); diff --git a/curriculum/challenges/espanol/14-responsive-web-design-22/learn-the-css-box-model-by-building-a-rothko-painting/60a3e3396c7b40068ad69994.md b/curriculum/challenges/espanol/14-responsive-web-design-22/learn-the-css-box-model-by-building-a-rothko-painting/60a3e3396c7b40068ad69994.md index 892e50c6cb6..1f928d1df3e 100644 --- a/curriculum/challenges/espanol/14-responsive-web-design-22/learn-the-css-box-model-by-building-a-rothko-painting/60a3e3396c7b40068ad69994.md +++ b/curriculum/challenges/espanol/14-responsive-web-design-22/learn-the-css-box-model-by-building-a-rothko-painting/60a3e3396c7b40068ad69994.md @@ -7,20 +7,20 @@ dashedName: step-42 # --description-- -The `border-radius` property accepts up to four values to round the top-left, top-right, bottom-right, and bottom-left corners. +La propiedad `border-radius` acepta hasta cuatro valores para redondear las esquinas superior izquierda, superior derecha, inferior derecha e inferior izquierda. -Round the top-left corner of `.three` by 30 pixels, the top-right by 25 pixels, the bottom-right by 60 pixels, and bottom-left by 12 pixels. +Redondee la esquina superior izquierda de `.three` 30 píxeles, la parte superior derecha 25 píxeles, la parte inferior derecha 60 píxeles y la parte inferior izquierda 12 píxeles. # --hints-- -You should set the `border-radius` property to `30px 25px 60px 12px`. +Debe establecer la propiedad `border-radius` en `30px 25px 60px 12px`. ```js const hasBorderRadius = new __helpers.CSSHelp(document).getCSSRules().some(x => x.style['border-radius'] === '30px 25px 60px 12px'); assert(hasBorderRadius); ``` -Your `.three` element should have a `border-radius` value of `30px 25px 60px 12px`. +El elemento `.three` debe tener un valor `border-radius` de `30px 25px 60px 12px`. ```js const threeBorderRadius = new __helpers.CSSHelp(document).getStyle('.three')?.getPropertyValue('border-radius'); diff --git a/curriculum/challenges/espanol/14-responsive-web-design-22/learn-the-css-box-model-by-building-a-rothko-painting/60a3e3396c7b40068ad69995.md b/curriculum/challenges/espanol/14-responsive-web-design-22/learn-the-css-box-model-by-building-a-rothko-painting/60a3e3396c7b40068ad69995.md index 686f3b2fe12..438f5b8189d 100644 --- a/curriculum/challenges/espanol/14-responsive-web-design-22/learn-the-css-box-model-by-building-a-rothko-painting/60a3e3396c7b40068ad69995.md +++ b/curriculum/challenges/espanol/14-responsive-web-design-22/learn-the-css-box-model-by-building-a-rothko-painting/60a3e3396c7b40068ad69995.md @@ -7,20 +7,20 @@ dashedName: step-43 # --description-- -Rotate each rectangle to give them more of an imperfect, hand-painted look. +Gire cada rectángulo para darles un aspecto más imperfecto y pintado a mano. -Use the `transform` property on the `.one` selector to `rotate` it counter clockwise by 0.6 degrees. +Utilice la propiedad `transform` del selector `.one` para `rotate` en sentido contrario a las agujas del reloj en 0,6 grados. # --hints-- -You should set the `transform` property to `rotate(-0.6deg)`. +Debe establecer la propiedad `transform` en `rotate(-0.6deg)`. ```js const hasTransform = new __helpers.CSSHelp(document).getCSSRules().some(x => x.style.transform === 'rotate(-0.6deg)'); assert(hasTransform); ``` -Your `.one` element should have a `transform` value of `rotate(-0.6deg)`. +El elemento `.one` debe tener un valor `transform` de `rotate(-0.6deg)`. ```js const oneTransform = new __helpers.CSSHelp(document).getStyle('.one')?.getPropertyValue('transform'); diff --git a/curriculum/challenges/espanol/14-responsive-web-design-22/learn-the-css-box-model-by-building-a-rothko-painting/60a3e3396c7b40068ad69996.md b/curriculum/challenges/espanol/14-responsive-web-design-22/learn-the-css-box-model-by-building-a-rothko-painting/60a3e3396c7b40068ad69996.md index 9c18e8f2b6a..92f7c9fc999 100644 --- a/curriculum/challenges/espanol/14-responsive-web-design-22/learn-the-css-box-model-by-building-a-rothko-painting/60a3e3396c7b40068ad69996.md +++ b/curriculum/challenges/espanol/14-responsive-web-design-22/learn-the-css-box-model-by-building-a-rothko-painting/60a3e3396c7b40068ad69996.md @@ -7,18 +7,18 @@ dashedName: step-44 # --description-- -Rotate the `.two` element clockwise by 0.4 degrees. +Gire el elemento `.two` en el sentido de las agujas del reloj en 0,4 grados. # --hints-- -You should set the `transform` property to `rotate(0.4deg)`. +Debe establecer la propiedad `transform` en `rotate(0.4deg)`. ```js const hasTransform = new __helpers.CSSHelp(document).getCSSRules().some(x => x.style.transform === 'rotate(0.4deg)'); assert(hasTransform); ``` -Your `.two` element should have a `transform` value of `rotate(0.4deg)`. +El elemento `.two` debe tener un valor `transform` de `rotate(0.4deg)`. ```js const twoTransform = new __helpers.CSSHelp(document).getStyle('.two')?.getPropertyValue('transform'); diff --git a/curriculum/challenges/espanol/14-responsive-web-design-22/learn-the-css-box-model-by-building-a-rothko-painting/60a3e3396c7b40068ad69997.md b/curriculum/challenges/espanol/14-responsive-web-design-22/learn-the-css-box-model-by-building-a-rothko-painting/60a3e3396c7b40068ad69997.md index 41487d7fdb8..5c4fca23bfd 100644 --- a/curriculum/challenges/espanol/14-responsive-web-design-22/learn-the-css-box-model-by-building-a-rothko-painting/60a3e3396c7b40068ad69997.md +++ b/curriculum/challenges/espanol/14-responsive-web-design-22/learn-the-css-box-model-by-building-a-rothko-painting/60a3e3396c7b40068ad69997.md @@ -7,20 +7,20 @@ dashedName: step-45 # --description-- -Rotate `.three` counter clockwise by 0.2 degrees. +Gire `.three` en sentido contrario a las agujas del reloj en 0,2 grados. Con este paso final, tu pintura de Rothko ha sido completada. # --hints-- -You should set the `transform` property to `rotate(-0.2deg)`. +Debe establecer la propiedad `transform` en `rotate(-0.2deg)`. ```js const hasTransform = new __helpers.CSSHelp(document).getCSSRules().some(x => x.style.transform === 'rotate(-0.2deg)'); assert(hasTransform); ``` -Your `.three` element should have a `transform` value of `rotate(-0.2deg)`. +El elemento `.three` debe tener un valor `transform` de `rotate(-0.2deg)`. ```js const threeTransform = new __helpers.CSSHelp(document).getStyle('.three')?.getPropertyValue('transform'); diff --git a/curriculum/challenges/espanol/14-responsive-web-design-22/learn-typography-by-building-a-nutrition-label/615f2abbe7d18d49a1e0e1c8.md b/curriculum/challenges/espanol/14-responsive-web-design-22/learn-typography-by-building-a-nutrition-label/615f2abbe7d18d49a1e0e1c8.md index 9fca1833551..71d15830797 100644 --- a/curriculum/challenges/espanol/14-responsive-web-design-22/learn-typography-by-building-a-nutrition-label/615f2abbe7d18d49a1e0e1c8.md +++ b/curriculum/challenges/espanol/14-responsive-web-design-22/learn-typography-by-building-a-nutrition-label/615f2abbe7d18d49a1e0e1c8.md @@ -7,9 +7,9 @@ dashedName: step-1 # --description-- -We've provided a basic HTML boilerplate for you. +Hemos proporcionado una plantilla HTML básica para usted. -Create an `h1` element within your `body` element and give it the text `Nutrition Facts`. +Cree un elemento `h1` dentro de su elemento `body` y asígnele el texto `Nutrition Facts`. # --hints-- diff --git a/curriculum/challenges/espanol/14-responsive-web-design-22/learn-typography-by-building-a-nutrition-label/615f2d4150fe0d4cbd0f2628.md b/curriculum/challenges/espanol/14-responsive-web-design-22/learn-typography-by-building-a-nutrition-label/615f2d4150fe0d4cbd0f2628.md index d99e7b9b3bb..0aa5456c5e4 100644 --- a/curriculum/challenges/espanol/14-responsive-web-design-22/learn-typography-by-building-a-nutrition-label/615f2d4150fe0d4cbd0f2628.md +++ b/curriculum/challenges/espanol/14-responsive-web-design-22/learn-typography-by-building-a-nutrition-label/615f2d4150fe0d4cbd0f2628.md @@ -7,29 +7,29 @@ dashedName: step-2 # --description-- -Below your `h1` element, add a `p` element with the text `8 servings per container`. +Debajo del elemento `h1`, agregue un elemento `p` con el texto `8 servings per container`. # --hints-- -You should add a new `p` element. +Debe agregar un nuevo elemento `p`. ```js assert.exists(document.querySelector('p')); ``` -Your `p` element should be within your `body` element. +El elemento `p` debe estar dentro del elemento `body`. ```js assert(document.querySelector('p')?.parentElement?.localName === 'body'); ``` -Your `p` element should come after your `h1` element. +El elemento `p` debe venir después del elemento `h1`. ```js assert(document.querySelector('p')?.previousElementSibling?.localName === 'h1'); ``` -Your `p` element should have the text `8 servings per container`. +Su elemento `p` debe tener el texto `8 servings per container`. ```js assert(document.querySelector('p')?.innerText === '8 servings per container'); diff --git a/curriculum/challenges/espanol/14-responsive-web-design-22/learn-typography-by-building-a-nutrition-label/615f34948891834dd77655a6.md b/curriculum/challenges/espanol/14-responsive-web-design-22/learn-typography-by-building-a-nutrition-label/615f34948891834dd77655a6.md index b3680dc9a58..d10159ea0af 100644 --- a/curriculum/challenges/espanol/14-responsive-web-design-22/learn-typography-by-building-a-nutrition-label/615f34948891834dd77655a6.md +++ b/curriculum/challenges/espanol/14-responsive-web-design-22/learn-typography-by-building-a-nutrition-label/615f34948891834dd77655a6.md @@ -7,29 +7,29 @@ dashedName: step-3 # --description-- -Add a second `p` element with the text `Serving size 2/3 cup (55g)`. +Agregue un segundo elemento `p` con el texto `Serving size 2/3 cup (55g)`. # --hints-- -You should have a second `p` element. +Deberías tener un segundo elemento `p`. ```js assert(document.querySelectorAll('p')?.length === 2); ``` -Your second `p` element should be within your `body` element. +Su segundo elemento `p` debe estar dentro de su elemento `body`. ```js assert(document.querySelectorAll('p')?.[1]?.parentElement?.localName === 'body'); ``` -Your second `p` element should come after your existing `p` element. +Tu segundo elemento `p` debe ir después de tu elemento `p` existente. ```js assert(document.querySelectorAll('p')?.[1]?.previousElementSibling?.localName === 'p'); ``` -Your second `p` element should have the text `Serving size 2/3 cup (55g)`. +Su segundo elemento `p` debe tener el texto `Serving size 2/3 cup (55g)`. ```js assert(document.querySelectorAll('p')?.[1]?.innerText === 'Serving size 2/3 cup (55g)'); diff --git a/curriculum/challenges/espanol/14-responsive-web-design-22/learn-typography-by-building-a-nutrition-label/615f34ecc1091b4fd5a8a484.md b/curriculum/challenges/espanol/14-responsive-web-design-22/learn-typography-by-building-a-nutrition-label/615f34ecc1091b4fd5a8a484.md index e8d518d9b1b..f4bdb3ca9ba 100644 --- a/curriculum/challenges/espanol/14-responsive-web-design-22/learn-typography-by-building-a-nutrition-label/615f34ecc1091b4fd5a8a484.md +++ b/curriculum/challenges/espanol/14-responsive-web-design-22/learn-typography-by-building-a-nutrition-label/615f34ecc1091b4fd5a8a484.md @@ -7,34 +7,34 @@ dashedName: step-4 # --description-- -Within your `head` element, add a `link` element with the `rel` attribute set to `stylesheet` and the `href` attribute set to `https://fonts.googleapis.com/css?family=Open+Sans:400,700,800`. +Dentro de su elemento `head`, agregue un elemento `link` con el atributo `rel` establecido en `stylesheet` y el `href` Atributo establecido en `https://fonts.googleapis.com/css?family=Open+Sans:400,700,800`. -This will import the `Open Sans` font family, with the font weight values `400`, `700`, and `800`. +Esto importará la familia de fuentes `Open Sans`, con los valores de peso de fuente `400`, `700` y `800`. -Also add a `link` element to link your `styles.css` file. +También agregue un elemento `link` para vincular su archivo `styles.css`. # --hints-- -Your code should have two self-closing `link` elements. +Su código debe tener dos elementos `link` de cierre automático. ```js assert(document.querySelectorAll('link').length === 2); ``` -Both of your `link` elements should have the `rel` attribute set to `stylesheet`. +Ambos elementos `link` deben tener el atributo `rel` establecido en `stylesheet`. ```js const links = [...document.querySelectorAll('link')]; assert(links.every(link => link.getAttribute('rel') === 'stylesheet')); ``` -One of your `link` elements should have an `href` attribute set to `./styles.css`. +Uno de sus elementos `link` debe tener un atributo `href` establecido en `./styles.css`. ```js assert(code.match(/ div')?.length === 3) ``` -Your new `div` should have the `class` attribute set to `divider md`. This div should be the last element in your `.label` element. +Su nuevo `div` debe tener el atributo `class` establecido en `divider md`. Este div debe ser el último elemento en su elemento `.label`. ```js const div = document.querySelector('.label')?.lastElementChild; diff --git a/curriculum/challenges/espanol/14-responsive-web-design-22/learn-typography-by-building-a-nutrition-label/615f666ac5edea782feb7e75.md b/curriculum/challenges/espanol/14-responsive-web-design-22/learn-typography-by-building-a-nutrition-label/615f666ac5edea782feb7e75.md index d7fc70d097c..2ef4692628e 100644 --- a/curriculum/challenges/espanol/14-responsive-web-design-22/learn-typography-by-building-a-nutrition-label/615f666ac5edea782feb7e75.md +++ b/curriculum/challenges/espanol/14-responsive-web-design-22/learn-typography-by-building-a-nutrition-label/615f666ac5edea782feb7e75.md @@ -7,17 +7,17 @@ dashedName: step-38 # --description-- -Create an `.md` selector and give it a `height` property of `5px`. +Cree un selector `.md` y asígnele una propiedad `height` de `5px`. # --hints-- -You should create an `.md` selector. +Debe crear un selector `.md`. ```js assert(new __helpers.CSSHelp(document).getStyle('.md')); ``` -Your `.md` selector should have a `height` property set to `5px`. +Su selector `.md` debe tener una propiedad `height` establecida en `5px`. ```js assert(new __helpers.CSSHelp(document).getStyle('.md')?.height === '5px'); diff --git a/curriculum/challenges/espanol/14-responsive-web-design-22/learn-typography-by-building-a-nutrition-label/615f671b6d1919792745aa5d.md b/curriculum/challenges/espanol/14-responsive-web-design-22/learn-typography-by-building-a-nutrition-label/615f671b6d1919792745aa5d.md index be44918bee8..7719b591f68 100644 --- a/curriculum/challenges/espanol/14-responsive-web-design-22/learn-typography-by-building-a-nutrition-label/615f671b6d1919792745aa5d.md +++ b/curriculum/challenges/espanol/14-responsive-web-design-22/learn-typography-by-building-a-nutrition-label/615f671b6d1919792745aa5d.md @@ -7,11 +7,11 @@ dashedName: step-39 # --description-- -Create a new `div` element below your `.md` element. Give it a `class` attribute set to `daily-value sm-text`. Within this new `div`, add a `p` element with the text `% Daily Value *`, and set the `class` attribute to `right bold`. +Cree un nuevo elemento `div` debajo de su elemento `.md`. Asígnele un atributo `class` establecido en `daily-value sm-text`. Dentro de este nuevo `div`, agregue un elemento `p` con el texto `% Daily Value *`, y configure el atributo `class` a `right bold`. # --hints-- -You should create a new `div` element after your `.md` element. +Debe crear un nuevo elemento `div` después de su elemento `.md`. ```js assert(document.querySelector('.label')?.lastElementChild?.localName === 'div'); @@ -19,26 +19,26 @@ assert(document.querySelector('.label')?.lastElementChild?.previousElementSiblin assert(document.querySelector('.label')?.lastElementChild?.previousElementSibling?.classList?.contains('md')); ``` -Your new `div` should have a `class` attribute set to `daily-value sm-text`. +Su nuevo `div` debe tener un atributo `class` establecido en `daily-value sm-text`. ```js assert(document.querySelector('.label')?.lastElementChild?.classList?.contains('daily-value')); assert(document.querySelector('.label')?.lastElementChild?.classList?.contains('sm-text')); ``` -Your new `div` element should have a `p` element. +Su nuevo elemento `div` debe tener un elemento `p`. ```js assert(document.querySelector('.label')?.lastElementChild?.firstElementChild?.localName === 'p'); ``` -Your new `p` element should have the text `% Daily Value *`. +Su nuevo elemento `p` debe tener el texto `% Daily Value *`. ```js assert(document.querySelector('.label')?.lastElementChild?.firstElementChild?.textContent === '% Daily Value *'); ``` -Your new `p` element should have a `class` attribute set to `right bold`. +Su nuevo elemento `p` debe tener un atributo `class` establecido en `right bold`. ```js assert(document.querySelector('.label')?.lastElementChild?.firstElementChild?.classList?.contains('right')); diff --git a/curriculum/challenges/espanol/14-responsive-web-design-22/learn-typography-by-building-a-nutrition-label/615f6823d0815b7a991f2a75.md b/curriculum/challenges/espanol/14-responsive-web-design-22/learn-typography-by-building-a-nutrition-label/615f6823d0815b7a991f2a75.md index 8eafbd85211..dcfc6994ae0 100644 --- a/curriculum/challenges/espanol/14-responsive-web-design-22/learn-typography-by-building-a-nutrition-label/615f6823d0815b7a991f2a75.md +++ b/curriculum/challenges/espanol/14-responsive-web-design-22/learn-typography-by-building-a-nutrition-label/615f6823d0815b7a991f2a75.md @@ -7,23 +7,23 @@ dashedName: step-40 # --description-- -The `float` styling is causing the new `p` element to be outside of the label's border. Use your existing `.divider` element as an example to add a new divider after the `p` element. +El estilo `float` hace que el nuevo elemento `p` quede fuera del borde de la etiqueta. Use su elemento `.divider` existente como ejemplo para agregar un nuevo divisor después del elemento `p`. # --hints-- -You should create a new `div` within your `.daily-value.sm-text` element. +Debe crear un nuevo `div` dentro de su elemento `.daily-value.sm-text`. ```js assert(document.querySelectorAll('.daily-value.sm-text > div')?.length === 1) ``` -Your new `div` should have the `class` attribute set to `divider`. +Tu nuevo `div` debe tener el atributo `class` establecido en `divider`. ```js assert(document.querySelector('.daily-value.sm-text > div')?.classList?.contains('divider')) ``` -Your new `div` should come after your `p` element. +Tu nuevo `div` debería ir después de tu elemento `p`. ```js assert(document.querySelector('.daily-value.sm-text > div')?.previousElementSibling?.localName === 'p'); diff --git a/curriculum/challenges/espanol/14-responsive-web-design-22/learn-typography-by-building-a-nutrition-label/615f6a7d4ba8037bc086c2c7.md b/curriculum/challenges/espanol/14-responsive-web-design-22/learn-typography-by-building-a-nutrition-label/615f6a7d4ba8037bc086c2c7.md index d04ab725fb9..4471723c152 100644 --- a/curriculum/challenges/espanol/14-responsive-web-design-22/learn-typography-by-building-a-nutrition-label/615f6a7d4ba8037bc086c2c7.md +++ b/curriculum/challenges/espanol/14-responsive-web-design-22/learn-typography-by-building-a-nutrition-label/615f6a7d4ba8037bc086c2c7.md @@ -7,11 +7,11 @@ dashedName: step-41 # --description-- -Give the `.divider` selector a `clear` property set to `right`. This will clear the `float` property, pushing the divider and any following content down below the `float` text. +Asigne al selector `.divider` una propiedad `clear` establecida en `right`. Esto borrará la propiedad `float`, empujando el divisor y cualquier contenido siguiente debajo del texto `float`. # --hints-- -Your `.divider` selector should have a `clear` property set to `right`. +El selector `.divider` debe tener una propiedad `clear` establecida en `right`. ```js assert(new __helpers.CSSHelp(document).getStyle('.divider')?.clear === 'right'); diff --git a/curriculum/challenges/espanol/14-responsive-web-design-22/learn-typography-by-building-a-nutrition-label/615f6b2d164f81809efd9bdc.md b/curriculum/challenges/espanol/14-responsive-web-design-22/learn-typography-by-building-a-nutrition-label/615f6b2d164f81809efd9bdc.md index a2ec8312ffd..33a1b765ae4 100644 --- a/curriculum/challenges/espanol/14-responsive-web-design-22/learn-typography-by-building-a-nutrition-label/615f6b2d164f81809efd9bdc.md +++ b/curriculum/challenges/espanol/14-responsive-web-design-22/learn-typography-by-building-a-nutrition-label/615f6b2d164f81809efd9bdc.md @@ -7,47 +7,47 @@ dashedName: step-42 # --description-- -After your last `.divider` element, create a `p` element and give it the text `Total Fat 8g 10%`. Wrap `Total Fat` in a `span` element with the `class` set to `bold`. Wrap `10%` in another `span` element with the `class` set to `bold right`. +Después de su último elemento `.divider`, cree un elemento `p` y asígnele el texto `Total Fat 8g 10%`. Envuelva `Total Fat` en un elemento `span` con la `class` configurada en `bold`. Envuelva `10%` en otro elemento `span` con la `class` establecida en `bold right`. # --hints-- -You should create a new `p` element at the end of your `.daily-value` element. +Debe crear un nuevo elemento `p` al final de su elemento `.daily-value`. ```js assert(document.querySelector('.daily-value.sm-text')?.lastElementChild?.localName === 'p'); ``` -Your new `p` element should have the text `Total Fat 8g 10%`. +Su nuevo elemento `p` debe tener el texto `Total Fat 8g 10%`. ```js assert(document.querySelector('.daily-value.sm-text')?.lastElementChild?.innerText?.match(/Total Fat 8g[\s|\n]+10%/)); ``` -Your `p` element should have two `span` elements. +Su elemento `p` debe tener dos elementos `span`. ```js assert(document.querySelector('.daily-value.sm-text')?.lastElementChild?.querySelectorAll('span')?.length === 2); ``` -Your first `span` element should wrap the text `Total Fat`. +Tu primer elemento `span` debe envolver el texto `Total Fat`. ```js assert(document.querySelector('.daily-value.sm-text')?.lastElementChild?.querySelector('span')?.innerText === 'Total Fat'); ``` -Your first `span` element should have the `class` set to `bold`. +Su primer elemento `span` debe tener `class` establecido en `bold`. ```js assert(document.querySelector('.daily-value.sm-text')?.lastElementChild?.querySelector('span')?.className === 'bold'); ``` -Your second `span` element should wrap the text `10%`. +Su segundo elemento `span` debe envolver el texto `10%`. ```js assert(document.querySelector('.daily-value.sm-text')?.lastElementChild?.querySelectorAll('span')?.[1]?.innerText === '10%'); ``` -Your second `span` element should have the `class` set to `bold right`. +El segundo elemento `span` debe tener el `class` establecido en `bold right`. ```js assert(document.querySelector('.daily-value.sm-text')?.lastElementChild?.querySelectorAll('span')?.[1]?.className === 'bold right'); diff --git a/curriculum/challenges/espanol/14-responsive-web-design-22/learn-typography-by-building-a-nutrition-label/615f6cc778f7698258467596.md b/curriculum/challenges/espanol/14-responsive-web-design-22/learn-typography-by-building-a-nutrition-label/615f6cc778f7698258467596.md index 27215727b89..bbafe08d050 100644 --- a/curriculum/challenges/espanol/14-responsive-web-design-22/learn-typography-by-building-a-nutrition-label/615f6cc778f7698258467596.md +++ b/curriculum/challenges/espanol/14-responsive-web-design-22/learn-typography-by-building-a-nutrition-label/615f6cc778f7698258467596.md @@ -7,37 +7,37 @@ dashedName: step-43 # --description-- -Below your element with the `Total Fat` text, create a new `p` element with the text `Saturated Fat 1g 5%`. Wrap the `5%` in a `span` with the `class` attribute set to `bold right`. +Debajo de su elemento con el texto `Total Fat`, cree un nuevo elemento `p` con el texto `Saturated Fat 1g 5%`. Envuelva el `5%` en un `span` con el atributo `class` establecido en`bold right`. # --hints-- -You should create a new `p` element below your element with the `Total Fat` text. +Debe crear un nuevo elemento `p` debajo de su elemento con el texto `Total de Grasas`. ```js assert(document.querySelector('.daily-value.sm-text')?.lastElementChild?.localName === 'p'); assert(document.querySelector('.daily-value.sm-text')?.lastElementChild?.previousElementSibling?.innerText.match(/Total Fat 8g\s*10%/)); ``` -Your new `p` element should have the text `Saturated Fat 1g 5%`. +Su nuevo elemento `p` debe tener el texto `Grasas saturadas 1g 5%`. ```js assert(document.querySelector('.daily-value.sm-text')?.lastElementChild?.innerText.match(/Saturated Fat 1g\s*5%/)); ``` -Your new `p` element should have a `span` element. +Su nuevo elemento `p` debe tener un elemento `span`. ```js assert(document.querySelector('.daily-value.sm-text')?.lastElementChild?.lastElementChild?.localName === 'span'); ``` -Your `span` element should have the `class` attribute set to `bold right`. +Su elemento `span` debe tener el atributo `class` establecido en `bold right`. ```js assert(document.querySelector('.daily-value.sm-text')?.lastElementChild?.lastElementChild?.classList?.contains('bold')); assert(document.querySelector('.daily-value.sm-text')?.lastElementChild?.lastElementChild?.classList?.contains('right')); ``` -Your `span` element should wrap the `5%` text. +Su elemento `span` debe envolver el texto `5%`. ```js assert(document.querySelector('.daily-value.sm-text')?.lastElementChild?.lastElementChild?.innerText === "5%"); diff --git a/curriculum/challenges/espanol/14-responsive-web-design-22/learn-typography-by-building-a-nutrition-label/615f6fddaac1e083502d3e6a.md b/curriculum/challenges/espanol/14-responsive-web-design-22/learn-typography-by-building-a-nutrition-label/615f6fddaac1e083502d3e6a.md index 59171a36ea5..9930b02f21e 100644 --- a/curriculum/challenges/espanol/14-responsive-web-design-22/learn-typography-by-building-a-nutrition-label/615f6fddaac1e083502d3e6a.md +++ b/curriculum/challenges/espanol/14-responsive-web-design-22/learn-typography-by-building-a-nutrition-label/615f6fddaac1e083502d3e6a.md @@ -7,11 +7,11 @@ dashedName: step-44 # --description-- -This new `p` element will need to be indented. Give it a `class` set to `indent`. +Este nuevo elemento `p` deberá sangrarse. Dale una `class` establecida en `indent`. # --hints-- -Your `p` element with the text `Saturated Fat 1g 5%` should have a `class` attribute set to `indent`. +Su elemento `p` con el texto `Saturated Fat 1g 5%` debe tener un atributo `class` establecido en `indent`. ```js assert(document.querySelector('.daily-value.sm-text')?.lastElementChild?.classList?.contains('indent')); diff --git a/curriculum/challenges/espanol/14-responsive-web-design-22/learn-typography-by-building-a-nutrition-label/615f70077a4ff98424236c1e.md b/curriculum/challenges/espanol/14-responsive-web-design-22/learn-typography-by-building-a-nutrition-label/615f70077a4ff98424236c1e.md index 3b5a2d63c6f..14dfe7ac64d 100644 --- a/curriculum/challenges/espanol/14-responsive-web-design-22/learn-typography-by-building-a-nutrition-label/615f70077a4ff98424236c1e.md +++ b/curriculum/challenges/espanol/14-responsive-web-design-22/learn-typography-by-building-a-nutrition-label/615f70077a4ff98424236c1e.md @@ -7,17 +7,17 @@ dashedName: step-45 # --description-- -Create a new `.indent` selector and give it a `margin-left` property set to `1em`. +Cree un nuevo selector `.indent` y asígnele una propiedad `margin-left` establecida en `1em`. # --hints-- -You should have a new `.indent` selector. +Debería tener un nuevo selector `.indent`. ```js assert(new __helpers.CSSHelp(document).getStyle('.indent')); ``` -Your new `.indent` selector should have a `margin-left` property set to `1em`. +Su nuevo selector `.indent` debe tener una propiedad `margin-left` establecida en `1em`. ```js assert(new __helpers.CSSHelp(document).getStyle('.indent')?.marginLeft === '1em'); diff --git a/curriculum/challenges/espanol/14-responsive-web-design-22/learn-typography-by-building-a-nutrition-label/615f72a872354a850d4f533e.md b/curriculum/challenges/espanol/14-responsive-web-design-22/learn-typography-by-building-a-nutrition-label/615f72a872354a850d4f533e.md index f3810976d06..c050ea3ee1d 100644 --- a/curriculum/challenges/espanol/14-responsive-web-design-22/learn-typography-by-building-a-nutrition-label/615f72a872354a850d4f533e.md +++ b/curriculum/challenges/espanol/14-responsive-web-design-22/learn-typography-by-building-a-nutrition-label/615f72a872354a850d4f533e.md @@ -7,17 +7,17 @@ dashedName: step-46 # --description-- -Create a `.daily-value p` selector to target all of your `p` elements in the `daily-value` section. Give this new selector a `border-bottom` set to `1px solid #888989`. +Cree un selector `.daily-value p` para orientar todos sus elementos `p` en la sección `daily-value`. Dale a este nuevo selector un `border-bottom` establecido en `1px solid #888989`. # --hints-- -You should have a new `.daily-value p` selector. +Debería tener un nuevo selector `.daily-value p`. ```js assert(new __helpers.CSSHelp(document).getStyle('.daily-value p')); ``` -Your `.daily-value p` selector should have a `border-bottom` property set to `1px solid #888989`. +Su selector `.daily-value p` debe tener una propiedad `border-bottom` establecida en `1px solid #888989`. ```js assert(new __helpers.CSSHelp(document).getStyle('.daily-value p')?.borderBottom === '1px solid rgb(136, 137, 137)'); diff --git a/curriculum/challenges/espanol/14-responsive-web-design-22/learn-typography-by-building-a-nutrition-label/615f74a71f1e498619e38ee8.md b/curriculum/challenges/espanol/14-responsive-web-design-22/learn-typography-by-building-a-nutrition-label/615f74a71f1e498619e38ee8.md index d275a78a8ad..1225d80c4f9 100644 --- a/curriculum/challenges/espanol/14-responsive-web-design-22/learn-typography-by-building-a-nutrition-label/615f74a71f1e498619e38ee8.md +++ b/curriculum/challenges/espanol/14-responsive-web-design-22/learn-typography-by-building-a-nutrition-label/615f74a71f1e498619e38ee8.md @@ -7,11 +7,11 @@ dashedName: step-47 # --description-- -The bottom borders under your `% Daily Value *` and `Saturated Fat 1g 5%` elements do not extend the full width of the label. Add `no-divider` to the `class` for these two elements. +Los bordes inferiores debajo de los elementos `% Daily Value *` y `Saturated Fat 1g 5%` no se extienden por todo el ancho de la etiqueta. Agrega `no-divider` a la `class` para estos dos elementos. # --hints-- -Your `p` element with the text `% Daily Value *` should have `no-divider` added to the `class` attribute. Do not remove the existing classes. +Su elemento `p` con el texto `% Daily Value *` debe tener `no-divider` agregado al atributo `class`. No elimine las clases existentes. ```js const p = document.querySelector('.daily-value.sm-text')?.firstElementChild; @@ -20,7 +20,7 @@ assert(p?.classList?.contains('bold')); assert(p?.classList?.contains('right')); ``` -Your `p` element with the text `Saturated Fat 1g 5%` should have `no-divider` added to the `class` attribute. Do not remove the existing classes. +Su elemento `p` con el texto `Saturated Fat 1g 5%` debe tener `no-divider` agregado al atributo `class`. No elimine las clases existentes. ```js const p = document.querySelector('.daily-value.sm-text')?.lastElementChild; diff --git a/curriculum/challenges/espanol/14-responsive-web-design-22/learn-typography-by-building-a-nutrition-label/615f7ad94380408d971d14f6.md b/curriculum/challenges/espanol/14-responsive-web-design-22/learn-typography-by-building-a-nutrition-label/615f7ad94380408d971d14f6.md index bcd82a50545..58d3af576f8 100644 --- a/curriculum/challenges/espanol/14-responsive-web-design-22/learn-typography-by-building-a-nutrition-label/615f7ad94380408d971d14f6.md +++ b/curriculum/challenges/espanol/14-responsive-web-design-22/learn-typography-by-building-a-nutrition-label/615f7ad94380408d971d14f6.md @@ -7,7 +7,7 @@ dashedName: step-48 # --description-- -The `:not` pseudo-selector can be used to select all elements that do not match the given CSS rule. +El pseudo-selector `:not` se puede utilizar para seleccionar todos los elementos que no coincidan con la regla CSS dada. ```css div:not(#example) { @@ -15,25 +15,25 @@ div:not(#example) { } ``` -The above selects all `div` elements without an `id` of `example`. +Lo anterior selecciona todos los elementos `div` sin un `id` de `example`. -Modify your `.daily-value p` selector to exclude the `.no-divider` elements. +Modifique su selector `.daily-value p` para excluir los elementos `.no-divider`. # --hints-- -You should have a `.daily-value p:not(.no-divider)` selector. +Debe tener un selector `.daily-value p:not(.no-divider)`. ```js assert(new __helpers.CSSHelp(document).getStyle('.daily-value p:not(.no-divider)')); ``` -You should not have a `.daily-value p` selector. +No debe tener un selector `.daily-value p`. ```js assert(!new __helpers.CSSHelp(document).getStyle('.daily-value p')); ``` -You should not change the properties in the `.daily-value p:not(.no-divider)` selector. +No debe cambiar las propiedades en el selector `.daily-value p:not(.no-divider)`. ```js const style = new __helpers.CSSHelp(document).getStyle('.daily-value p:not(.no-divider)'); diff --git a/curriculum/challenges/espanol/14-responsive-web-design-22/learn-typography-by-building-a-nutrition-label/615f7bc680f7168ea01ebf99.md b/curriculum/challenges/espanol/14-responsive-web-design-22/learn-typography-by-building-a-nutrition-label/615f7bc680f7168ea01ebf99.md index 65b30424ad3..9b6df5680ae 100644 --- a/curriculum/challenges/espanol/14-responsive-web-design-22/learn-typography-by-building-a-nutrition-label/615f7bc680f7168ea01ebf99.md +++ b/curriculum/challenges/espanol/14-responsive-web-design-22/learn-typography-by-building-a-nutrition-label/615f7bc680f7168ea01ebf99.md @@ -7,19 +7,19 @@ dashedName: step-49 # --description-- -Now you will have to add separate dividers below your `.no-divider` elements. +Ahora tendrá que agregar divisores separados debajo de sus elementos `.no-divider`. -Your first `.no-divider` element has a `.divider` after it. Create another `.divider` after your second `.no-divider` element. +Su primer elemento `.no-divider` tiene un `.divider` después de él. Cree otro `.divider` después de su segundo elemento `.no-divider`. # --hints-- -You should create a new `div` at the end of your `.daily-value.sm-text` element. +Debe crear un nuevo `div` al final de su elemento `.daily-value.sm-text`. ```js assert(document.querySelector('.daily-value.sm-text')?.lastElementChild?.localName === 'div'); ``` -Your new `div` should have the `class` attribute set to `divider`. +Tu nuevo `div` debe tener el atributo `class` establecido en `divider`. ```js assert(document.querySelector('.daily-value.sm-text')?.lastElementChild?.classList?.contains('divider')); diff --git a/curriculum/challenges/espanol/14-responsive-web-design-22/learn-typography-by-building-a-nutrition-label/615f7c71eab8218f846e4503.md b/curriculum/challenges/espanol/14-responsive-web-design-22/learn-typography-by-building-a-nutrition-label/615f7c71eab8218f846e4503.md index d4b8f438538..9555786a5d1 100644 --- a/curriculum/challenges/espanol/14-responsive-web-design-22/learn-typography-by-building-a-nutrition-label/615f7c71eab8218f846e4503.md +++ b/curriculum/challenges/espanol/14-responsive-web-design-22/learn-typography-by-building-a-nutrition-label/615f7c71eab8218f846e4503.md @@ -7,23 +7,23 @@ dashedName: step-50 # --description-- -After your last `.divider`, create another `p` element with the text `Trans Fat 0g`. Italicize the word `Trans` by wrapping it in an `i` element. Give the new `p` element the `class` attribute set to `indent no-divider`. +Después de su último `.divider`, cree otro elemento `p` con el texto `Trans Fat 0g`. Ponga en cursiva la palabra `Trans` envolviéndola en un elemento `i`. Asigne al nuevo elemento `p` el atributo `class` establecido en `indent no-divider`. # --hints-- -You should create a new `p` element at the end of your `.daily-value.sm-text` element. +Debe crear un nuevo elemento `p` al final de su elemento `.daily-value.sm-text`. ```js assert(document.querySelector('.daily-value.sm-text')?.lastElementChild?.localName === 'p'); ``` -Your new `p` element should have the text `Trans Fat 0g`. +Su nuevo elemento `p` debe tener el texto `Trans Fat 0g`. ```js assert(document.querySelector('.daily-value.sm-text')?.lastElementChild?.innerText === 'Trans Fat 0g'); ``` -Your new `p` element should have the `class` attribute set to `indent no-divider`. +Su nuevo elemento `p` debe tener el atributo `class` establecido en `indent no-divider`. ```js const p = document.querySelector('.daily-value.sm-text')?.lastElementChild; @@ -31,13 +31,13 @@ assert(p?.classList?.contains('indent')); assert(p?.classList?.contains('no-divider')); ``` -Your new `p` element should have an `i` element. +Su nuevo elemento `p` debe tener un elemento `i`. ```js assert(document.querySelector('.daily-value.sm-text')?.lastElementChild?.firstElementChild?.localName === 'i'); ``` -Your `i` element should wrap the text `Trans`. +Su elemento `i` debe envolver el texto `Trans`. ```js assert(document.querySelector('.daily-value.sm-text')?.lastElementChild?.firstElementChild?.innerText === 'Trans'); diff --git a/curriculum/challenges/espanol/14-responsive-web-design-22/learn-typography-by-building-a-nutrition-label/615f7d489a581590d1350288.md b/curriculum/challenges/espanol/14-responsive-web-design-22/learn-typography-by-building-a-nutrition-label/615f7d489a581590d1350288.md index b749ec9018a..ca9cb9dcb3f 100644 --- a/curriculum/challenges/espanol/14-responsive-web-design-22/learn-typography-by-building-a-nutrition-label/615f7d489a581590d1350288.md +++ b/curriculum/challenges/espanol/14-responsive-web-design-22/learn-typography-by-building-a-nutrition-label/615f7d489a581590d1350288.md @@ -7,17 +7,17 @@ dashedName: step-51 # --description-- -Create another `.divider` after your last `p` element. +Crea otro `.divider` después de tu último elemento `p`. # --hints-- -You should create a new `div` element at the end of your `.daily-value.sm-text` element. +Debe crear un nuevo elemento `div` al final de su elemento `.daily-value.sm-text`. ```js assert(document.querySelector('.daily-value.sm-text')?.lastElementChild?.localName === 'div'); ``` -Your new `div` element should have the `class` attribute set to `divider`. +Su nuevo elemento `div` debe tener el atributo `class` establecido en `divider`. ```js assert(document.querySelector('.daily-value.sm-text')?.lastElementChild?.classList?.contains('divider')); diff --git a/curriculum/challenges/espanol/14-responsive-web-design-22/learn-typography-by-building-a-nutrition-label/615f7de4487b64919bb4aa5e.md b/curriculum/challenges/espanol/14-responsive-web-design-22/learn-typography-by-building-a-nutrition-label/615f7de4487b64919bb4aa5e.md index f3a7e548f88..3d47edbc4be 100644 --- a/curriculum/challenges/espanol/14-responsive-web-design-22/learn-typography-by-building-a-nutrition-label/615f7de4487b64919bb4aa5e.md +++ b/curriculum/challenges/espanol/14-responsive-web-design-22/learn-typography-by-building-a-nutrition-label/615f7de4487b64919bb4aa5e.md @@ -7,48 +7,48 @@ dashedName: step-52 # --description-- -After your last `.divider`, create a new `p` element with the text `Cholesterol 0mg 0%`. Wrap the text `Cholesterol` in a `span` element, and give that `span` element the `class` attribute set to `bold`. Wrap the text `0%` in another `span` element, with the `class` set to `bold right`. +Después de su último `.divider`, cree un nuevo elemento `p` con el texto `Cholesterol 0mg 0%`. Envuelve el texto `Cholesterol` en un elemento `span` y dale a ese elemento `span` el atributo `class` establecido en `bold`. Envuelva el texto `0%` en otro elemento `span`, con `class` establecido en `bold right`. # --hints-- -You should create a new `p` element at the end of your `.daily-value.sm-text` element. +Debe crear un nuevo elemento `p` al final de su elemento `.daily-value.sm-text`. ```js assert(document.querySelector('.daily-value.sm-text')?.lastElementChild?.localName === 'p'); ``` -Your new `p` element should have the text `Cholesterol 0mg 0%`. +Su nuevo elemento `p` debe tener el texto `Cholesterol 0mg 0%`. ```js assert(document.querySelector('.daily-value.sm-text')?.lastElementChild?.innerText?.match(/Cholesterol 0mg[\s|\n]+0%/)); ``` -Your new `p` element should have two `span` elements. +Su nuevo elemento `p` debe tener dos elementos `span`. ```js assert(document.querySelector('.daily-value.sm-text')?.lastElementChild?.querySelectorAll('span')?.length === 2); ``` -Your first `span` element should have the `class` attribute set to `bold`. +Su primer elemento `span` debe tener el atributo `class` establecido en `bold`. ```js assert(document.querySelector('.daily-value.sm-text')?.lastElementChild?.firstElementChild?.classList?.contains('bold')); ``` -Your first `span` element should wrap the text `Cholesterol`. +Tu primer elemento `span` debe envolver el texto `Cholesterol`. ```js assert(document.querySelector('.daily-value.sm-text')?.lastElementChild?.firstElementChild?.innerText === 'Cholesterol'); ``` -Your second `span` element should have the `class` attribute set to `bold right`. +Su segundo elemento `span` debe tener el atributo `class` establecido en `bold right`. ```js assert(document.querySelector('.daily-value.sm-text')?.lastElementChild?.lastElementChild?.classList?.contains('bold')); assert(document.querySelector('.daily-value.sm-text')?.lastElementChild?.lastElementChild?.classList?.contains('right')); ``` -Your second `span` element should wrap the text `0%`. +Su segundo elemento `span` debe envolver el texto `0%`. ```js assert(document.querySelector('.daily-value.sm-text')?.lastElementChild?.lastElementChild?.innerText === '0%'); diff --git a/curriculum/challenges/espanol/14-responsive-web-design-22/learn-typography-by-building-a-nutrition-label/615f7e7281626a92bbd62da8.md b/curriculum/challenges/espanol/14-responsive-web-design-22/learn-typography-by-building-a-nutrition-label/615f7e7281626a92bbd62da8.md index 89ed082412d..c61f4c233a3 100644 --- a/curriculum/challenges/espanol/14-responsive-web-design-22/learn-typography-by-building-a-nutrition-label/615f7e7281626a92bbd62da8.md +++ b/curriculum/challenges/espanol/14-responsive-web-design-22/learn-typography-by-building-a-nutrition-label/615f7e7281626a92bbd62da8.md @@ -7,48 +7,48 @@ dashedName: step-53 # --description-- -Below your last `p` element, create another `p` element with the text `Sodium 160mg 7%`. Wrap the text `Sodium` in a `span` element with a `class` attribute set to `bold`. Wrap the `7%` text in another `span` element with the `class` set to `bold right`. +Debajo de su último elemento `p`, cree otro elemento `p` con el texto `Sodium 160mg 7%`. Envuelva el texto `Sodium` en un elemento `span` con un atributo `class` establecido en `bold`. Envuelve el texto `7%` en otro elemento `span` con la `class` establecida en `bold right`. # --hints-- -You should create a new `p` element at the end of your `.daily-value.sm-text` element. +Debe crear un nuevo elemento `p` al final de su elemento `.daily-value.sm-text`. ```js assert(document.querySelector('.daily-value.sm-text')?.lastElementChild?.localName === 'p'); ``` -Your new `p` element should have the text `Sodium 160mg 7%`. +Su nuevo elemento `p` debe tener el texto `Sodium 160mg 7%`. ```js assert(document.querySelector('.daily-value.sm-text')?.lastElementChild?.innerText?.match(/Sodium 160mg[\s|\n]+7%/)); ``` -Your new `p` element should have two `span` elements. +Su nuevo elemento `p` debe tener dos elementos `span`. ```js assert(document.querySelector('.daily-value.sm-text')?.lastElementChild?.querySelectorAll('span')?.length === 2); ``` -Your first `span` element should have the `class` attribute set to `bold`. +Su primer elemento `span` debe tener el atributo `class` establecido en `bold`. ```js assert(document.querySelector('.daily-value.sm-text')?.lastElementChild?.firstElementChild?.classList?.contains('bold')); ``` -Your first `span` element should wrap the text `Sodium`. +Su primer elemento `span` debe envolver el texto `Sodium`. ```js assert(document.querySelector('.daily-value.sm-text')?.lastElementChild?.firstElementChild?.innerText === 'Sodium'); ``` -Your second `span` element should have the `class` attribute set to `bold right`. +Su segundo elemento `span` debe tener el atributo `class` establecido en `bold right`. ```js assert(document.querySelector('.daily-value.sm-text')?.lastElementChild?.lastElementChild?.classList?.contains('bold')); assert(document.querySelector('.daily-value.sm-text')?.lastElementChild?.lastElementChild?.classList?.contains('right')); ``` -Your second `span` element should wrap the text `7%`. +Su segundo elemento `span` debe envolver el texto `7%`. ```js assert(document.querySelector('.daily-value.sm-text')?.lastElementChild?.lastElementChild?.innerText === '7%'); diff --git a/curriculum/challenges/espanol/14-responsive-web-design-22/learn-typography-by-building-a-nutrition-label/615f7ecb09de9a938ef94756.md b/curriculum/challenges/espanol/14-responsive-web-design-22/learn-typography-by-building-a-nutrition-label/615f7ecb09de9a938ef94756.md index 21596a1f418..c6c2b15ead2 100644 --- a/curriculum/challenges/espanol/14-responsive-web-design-22/learn-typography-by-building-a-nutrition-label/615f7ecb09de9a938ef94756.md +++ b/curriculum/challenges/espanol/14-responsive-web-design-22/learn-typography-by-building-a-nutrition-label/615f7ecb09de9a938ef94756.md @@ -7,48 +7,48 @@ dashedName: step-54 # --description-- -Add another `p` element with the text `Total Carbohydrate 37g 13%`. Like before, use `span` elements to make the text `Total Carbohydrate` bold, and the text `13%` bold and right aligned. +Agrega otro elemento `p` con el texto `Total Carbohydrate 37g 13%`. Al igual que antes, utilice los elementos `span` para hacer que el texto `Total Carbohydrate` esté en negrita y que el texto `13%` esté en negrita y alineado a la derecha. # --hints-- -You should create a new `p` element at the end of your `.daily-value.sm-text` element. +Debe crear un nuevo elemento `p` al final de su elemento `.daily-value.sm-text`. ```js assert(document.querySelector('.daily-value.sm-text')?.lastElementChild?.localName === 'p'); ``` -Your new `p` element should have the text `Total Carbohydrate 37g 13%`. +Su nuevo elemento `p` debe tener el texto `Total Carbohydrate 37g 13%`. ```js assert(document.querySelector('.daily-value.sm-text')?.lastElementChild?.innerText?.match(/Total Carbohydrate 37g[\s|\n]+13%/)); ``` -Your new `p` element should have two `span` elements. +Su nuevo elemento `p` debe tener dos elementos `span`. ```js assert(document.querySelector('.daily-value.sm-text')?.lastElementChild?.querySelectorAll('span')?.length === 2); ``` -Your first `span` element should have the `class` attribute set to `bold`. +Su primer elemento `span` debe tener el atributo `class` establecido en `bold`. ```js assert(document.querySelector('.daily-value.sm-text')?.lastElementChild?.firstElementChild?.classList?.contains('bold')); ``` -Your first `span` element should wrap the text `Total Carbohydrate`. +Su primer elemento `span` debe envolver el texto `Total Carbohydrate`. ```js assert(document.querySelector('.daily-value.sm-text')?.lastElementChild?.firstElementChild?.innerText === 'Total Carbohydrate'); ``` -Your second `span` element should have the `class` attribute set to `bold right`. +Su segundo elemento `span` debe tener el atributo `class` establecido en`bold right`. ```js assert(document.querySelector('.daily-value.sm-text')?.lastElementChild?.lastElementChild?.classList?.contains('bold')); assert(document.querySelector('.daily-value.sm-text')?.lastElementChild?.lastElementChild?.classList?.contains('right')); ``` -Your second `span` element should wrap the text `13%`. +Su segundo elemento `span` debe envolver el texto `13%`. ```js assert(document.querySelector('.daily-value.sm-text')?.lastElementChild?.lastElementChild?.innerText === '13%'); diff --git a/curriculum/challenges/espanol/14-responsive-web-design-22/learn-typography-by-building-a-nutrition-label/615f7fa959ab75948f96a0d6.md b/curriculum/challenges/espanol/14-responsive-web-design-22/learn-typography-by-building-a-nutrition-label/615f7fa959ab75948f96a0d6.md index 3adbb61bd7f..ed32f555e9f 100644 --- a/curriculum/challenges/espanol/14-responsive-web-design-22/learn-typography-by-building-a-nutrition-label/615f7fa959ab75948f96a0d6.md +++ b/curriculum/challenges/espanol/14-responsive-web-design-22/learn-typography-by-building-a-nutrition-label/615f7fa959ab75948f96a0d6.md @@ -7,31 +7,31 @@ dashedName: step-55 # --description-- -Below your last `p` element, add another `p` element with the text `Dietary Fiber 4g`. Give the `p` element the `class` necessary to indent it and remove the dividing border. Then create a divider below that `p` element. +Debajo de su último elemento `p`, agregue otro elemento `p` con el texto `Dietary Fiber 4g`. Dale al elemento `p` la `class` necesaria para sangrar y eliminar el borde divisorio. Luego crea un divisor debajo de ese elemento `p`. # --hints-- -You should create a new `p` and `div` element at the end of your `.daily-value.sm-text` element. +Debe crear un nuevo elemento `p` y `div` al final de su elemento `.daily-value.sm-text`. ```js assert(document.querySelector('.daily-value.sm-text')?.lastElementChild?.previousElementSibling?.localName === 'p'); assert(document.querySelector('.daily-value.sm-text')?.lastElementChild?.localName === 'div'); ``` -Your new `p` element should have the text `Dietary Fiber 4g`. +Su nuevo elemento `p` debe tener el texto `Dietary Fiber 4g`. ```js assert(document.querySelector('.daily-value.sm-text p:last-of-type')?.innerText.match(/Dietary Fiber[\s|\n]+4g/)); ``` -Your new `p` element should have the `class` attribute set to `indent no-divider`. +Su nuevo elemento `p` debe tener el atributo `class` establecido en `indent no-divider`. ```js assert(document.querySelector('.daily-value.sm-text p:last-of-type')?.classList?.contains('indent')); assert(document.querySelector('.daily-value.sm-text p:last-of-type')?.classList?.contains('no-divider')); ``` -Your new `div` should have the `class` attribute set to `divider`. +Tu nuevo `div` debe tener el atributo `class` establecido en `divider`. ```js assert(document.querySelector('.daily-value.sm-text')?.lastElementChild?.classList?.contains('divider')); diff --git a/curriculum/challenges/espanol/14-responsive-web-design-22/learn-typography-by-building-a-nutrition-label/615f808d85793195b0f53be9.md b/curriculum/challenges/espanol/14-responsive-web-design-22/learn-typography-by-building-a-nutrition-label/615f808d85793195b0f53be9.md index a4a290bc04e..bb7217addbd 100644 --- a/curriculum/challenges/espanol/14-responsive-web-design-22/learn-typography-by-building-a-nutrition-label/615f808d85793195b0f53be9.md +++ b/curriculum/challenges/espanol/14-responsive-web-design-22/learn-typography-by-building-a-nutrition-label/615f808d85793195b0f53be9.md @@ -7,31 +7,31 @@ dashedName: step-56 # --description-- -Create another `p` element after your last `.divider`, and give it the text `Total Sugars 12g`. Assign that `p` element the `class` values necessary to indent it and remove the bottom border. Then create another `.divider` below your new `p` element. +Cree otro elemento `p` después de su último `.divider` y asígnele el texto `Total Sugars 12g`. Asigne a ese elemento `p` los valores de `class` necesarios para sangrar y eliminar el borde inferior. Luego crea otro `.divider` debajo de tu nuevo elemento `p`. # --hints-- -You should create a new `p` and `div` element at the end of your `.daily-value.sm-text` element. +Debe crear un nuevo elemento `p` y `div` al final de su elemento `.daily-value.sm-text`. ```js assert(document.querySelector('.daily-value.sm-text')?.lastElementChild?.previousElementSibling?.localName === 'p'); assert(document.querySelector('.daily-value.sm-text')?.lastElementChild?.localName === 'div'); ``` -Your new `p` element should have the text `Total Sugars 12g`. +Su nuevo elemento `p` debe tener el texto `Total Sugars 12g`. ```js assert(document.querySelector('.daily-value.sm-text p:last-of-type')?.innerText.match(/Total Sugars[\s|\n]+12g/)); ``` -Your new `p` element should have the `class` attribute set to `indent no-divider`. +Su nuevo elemento `p` debe tener el atributo `class` establecido en `indent no-divider`. ```js assert(document.querySelector('.daily-value.sm-text p:last-of-type')?.classList?.contains('indent')); assert(document.querySelector('.daily-value.sm-text p:last-of-type')?.classList?.contains('no-divider')); ``` -Your new `div` should have the `class` attribute set to `divider`. +Tu nuevo `div` debe tener el atributo `class` establecido en `divider`. ```js assert(document.querySelector('.daily-value.sm-text')?.lastElementChild?.classList?.contains('divider')); diff --git a/curriculum/challenges/espanol/14-responsive-web-design-22/learn-typography-by-building-a-nutrition-label/615f829d07b18f96f6f6684b.md b/curriculum/challenges/espanol/14-responsive-web-design-22/learn-typography-by-building-a-nutrition-label/615f829d07b18f96f6f6684b.md index e8337a082fc..695ee8885db 100644 --- a/curriculum/challenges/espanol/14-responsive-web-design-22/learn-typography-by-building-a-nutrition-label/615f829d07b18f96f6f6684b.md +++ b/curriculum/challenges/espanol/14-responsive-web-design-22/learn-typography-by-building-a-nutrition-label/615f829d07b18f96f6f6684b.md @@ -7,11 +7,11 @@ dashedName: step-57 # --description-- -The advantage to creating these dividers is that you can apply specific classes to style them individually. Add `dbl-indent` to the `class` for your last `.divider`. +La ventaja de crear estos divisores es que puede aplicar clases específicas para diseñarlos individualmente. Agregue `dbl-indent` a la `class` para su último `.divider`. # --hints-- -Your last `.divider` element should have `dbl-indent` added to the `class`. Do not remove the existing value. +Tu último elemento `.divider` debe tener `dbl-indent` agregado a la `class`. No elimine el valor existente. ```js const last = document.querySelector('.daily-value.sm-text')?.lastElementChild; diff --git a/curriculum/challenges/espanol/14-responsive-web-design-22/learn-typography-by-building-a-nutrition-label/615f83ef928ec9982b785b6a.md b/curriculum/challenges/espanol/14-responsive-web-design-22/learn-typography-by-building-a-nutrition-label/615f83ef928ec9982b785b6a.md index dc3f50df9b1..342c6dc4b46 100644 --- a/curriculum/challenges/espanol/14-responsive-web-design-22/learn-typography-by-building-a-nutrition-label/615f83ef928ec9982b785b6a.md +++ b/curriculum/challenges/espanol/14-responsive-web-design-22/learn-typography-by-building-a-nutrition-label/615f83ef928ec9982b785b6a.md @@ -7,17 +7,17 @@ dashedName: step-58 # --description-- -Create a `.dbl-indent` selector and give it a left margin of `2em`. +Cree un selector `.dbl-indent` y asígnele un margen izquierdo de `2em`. # --hints-- -You should have a new `.dbl-indent` selector. +Debería tener un nuevo selector `.dbl-indent`. ```js assert(new __helpers.CSSHelp(document).getStyle('.dbl-indent')); ``` -Your `.dbl-indent` selector should have a `margin-left` property set to `2em`. +Su selector `.dbl-indent` debe tener una propiedad `margin-left` establecida en `2em`. ```js assert(new __helpers.CSSHelp(document).getStyle('.dbl-indent')?.marginLeft === '2em'); diff --git a/curriculum/challenges/espanol/14-responsive-web-design-22/learn-typography-by-building-a-nutrition-label/615f84f246e8ba98e3cd97be.md b/curriculum/challenges/espanol/14-responsive-web-design-22/learn-typography-by-building-a-nutrition-label/615f84f246e8ba98e3cd97be.md index 00b9082c8b9..09148309e2f 100644 --- a/curriculum/challenges/espanol/14-responsive-web-design-22/learn-typography-by-building-a-nutrition-label/615f84f246e8ba98e3cd97be.md +++ b/curriculum/challenges/espanol/14-responsive-web-design-22/learn-typography-by-building-a-nutrition-label/615f84f246e8ba98e3cd97be.md @@ -7,52 +7,52 @@ dashedName: step-59 # --description-- -Below your `.dbl-indent` element, add a new `p` element with the text `Includes 10g Added Sugars 20%`. Your new `p` element should also be double indented, and have no bottom border. Use a `span` to make the `20%` bold and right aligned. +Debajo de su elemento `.dbl-indent`, agregue un nuevo elemento `p` con el texto `Includes 10g Added Sugars 20%`. Su nuevo elemento `p` también debe tener doble sangría y no tener un borde inferior. Usa un `span` para hacer que el `20%` esté en negrita y alineado a la derecha. -Then create another divider after that `p` element. +Luego crea otro divisor después de ese elemento `p`. # --hints-- -You should create a new `p` and `div` element at the end of your `.daily-value.sm-text` element. +Debe crear un nuevo elemento `p` y `div` al final de su elemento `.daily-value.sm-text`. ```js assert(document.querySelector('.daily-value.sm-text')?.lastElementChild?.previousElementSibling?.localName === 'p'); assert(document.querySelector('.daily-value.sm-text')?.lastElementChild?.localName === 'div'); ``` -Your new `p` element should have the text `Includes 10g Added Sugars 20%`. +Su nuevo elemento `p` debe tener el texto `Includes 10g Added Sugars 20%`. ```js assert(document.querySelector('.daily-value.sm-text p:last-of-type')?.innerText.match(/Includes 10g Added Sugars[\s|\n]+20%/)); ``` -Your new `p` element should have the `class` attribute set to `dbl-indent no-divider`. +Su nuevo elemento `p` debe tener el atributo `class` establecido en `dbl-indent no-divider`. ```js assert(document.querySelector('.daily-value.sm-text p:last-of-type')?.classList?.contains('dbl-indent')); assert(document.querySelector('.daily-value.sm-text p:last-of-type')?.classList?.contains('no-divider')); ``` -Your new `p` element should have a `span` element. +Su nuevo elemento `p` debe tener un elemento `span`. ```js assert(document.querySelector('.daily-value.sm-text p:last-of-type')?.firstElementChild?.localName === 'span'); ``` -Your `span` element should have the `class` attribute set to `bold right`. +Su elemento `span` debe tener el atributo `class` establecido en `bold right`. ```js assert(document.querySelector('.daily-value.sm-text p:last-of-type')?.firstElementChild?.classList?.contains('bold')); assert(document.querySelector('.daily-value.sm-text p:last-of-type')?.firstElementChild?.classList?.contains('right')); ``` -Your `span` element should wrap the text `20%`. +Su elemento `span` debe envolver el texto `20%`. ```js assert(document.querySelector('.daily-value.sm-text p:last-of-type span')?.innerText === '20%'); ``` -Your new `div` should have the `class` attribute set to `divider`. +Tu nuevo `div` debe tener el atributo `class` establecido en `divider`. ```js assert(document.querySelector('.daily-value.sm-text')?.lastElementChild?.classList?.contains('divider')); diff --git a/curriculum/challenges/espanol/14-responsive-web-design-22/learn-typography-by-building-a-nutrition-label/615f887466db4ba14b5342cc.md b/curriculum/challenges/espanol/14-responsive-web-design-22/learn-typography-by-building-a-nutrition-label/615f887466db4ba14b5342cc.md index 77f35cb1f21..fb53ccd1a59 100644 --- a/curriculum/challenges/espanol/14-responsive-web-design-22/learn-typography-by-building-a-nutrition-label/615f887466db4ba14b5342cc.md +++ b/curriculum/challenges/espanol/14-responsive-web-design-22/learn-typography-by-building-a-nutrition-label/615f887466db4ba14b5342cc.md @@ -7,32 +7,32 @@ dashedName: step-60 # --description-- -After your last divider, create another `p` element with the text `Protein 3g`. Use the necessary classes to remove the bottom border, and a `span` to make the `Protein` bold. +Después de su último divisor, cree otro elemento `p` con el texto `Protein 3g`. Use las clases necesarias para eliminar el borde inferior y un `span` para poner la `Protein` en negrita. -Following this element, create a large divider. +Siguiendo este elemento, cree un gran divisor. # --hints-- -You should create a new `p` and `div` element at the end of your `.daily-value.sm-text` element. +Debe crear un nuevo elemento `p` y `div` al final de su elemento `.daily-value.sm-text`. ```js assert(document.querySelector('.daily-value.sm-text')?.lastElementChild?.previousElementSibling?.localName === 'p'); assert(document.querySelector('.daily-value.sm-text')?.lastElementChild?.localName === 'div'); ``` -Your new `p` element should have the text `Protein 3g`. +Su nuevo elemento `p` debe tener el texto `Protein 3g`. ```js assert(document.querySelector('.daily-value.sm-text p:last-of-type')?.innerText.match(/Protein[\s|\n]+3g/)); ``` -Your new `p` element should have the `class` attribute set to `no-divider`. +Su nuevo elemento `p` debe tener el atributo `class` establecido en `no-divider`. ```js assert(document.querySelector('.daily-value.sm-text p:last-of-type')?.classList?.contains('no-divider')); ``` -Your new `div` should have the `class` attribute set to `divider lg`. +Su nuevo `div` debe tener el atributo `class` establecido en `divider lg`. ```js assert(document.querySelector('.daily-value.sm-text')?.lastElementChild?.classList?.contains('divider')); diff --git a/curriculum/challenges/espanol/14-responsive-web-design-22/learn-typography-by-building-a-nutrition-label/615f89e055040ba294719d2f.md b/curriculum/challenges/espanol/14-responsive-web-design-22/learn-typography-by-building-a-nutrition-label/615f89e055040ba294719d2f.md index 733aef66863..2f85407b233 100644 --- a/curriculum/challenges/espanol/14-responsive-web-design-22/learn-typography-by-building-a-nutrition-label/615f89e055040ba294719d2f.md +++ b/curriculum/challenges/espanol/14-responsive-web-design-22/learn-typography-by-building-a-nutrition-label/615f89e055040ba294719d2f.md @@ -7,29 +7,29 @@ dashedName: step-61 # --description-- -Create another `p` element below your large divider. Give the `p` element the text `Vitamin D 2mcg 10%`. Use a `span` to make the `10%` align to the right, but do not make it bold. +Crea otro elemento `p` debajo de tu divisor grande. Asigne al elemento `p` el texto `Vitamin D 2mcg 10%`. Usa un `span` para hacer que el `10%` se alinee a la derecha, pero no lo pongas en negrita. # --hints-- -You should create a new `p` element at the end of your `.daily-value.sm-text` element. +Debe crear un nuevo elemento `p` al final de su elemento `.daily-value.sm-text`. ```js assert(document.querySelector('.daily-value.sm-text')?.lastElementChild?.localName === 'p'); ``` -Your new `p` element should have the text `Vitamin D 2mcg 10%`. +Su nuevo elemento `p` debe tener el texto `Vitamin D 2mcg 10%`. ```js assert(document.querySelector('.daily-value.sm-text')?.lastElementChild?.innerText?.match(/Vitamin D 2mcg[\s|\n]+10%/)); ``` -Your new `p` element should have a `span` element. +Su nuevo elemento `p` debe tener un elemento `span`. ```js assert(document.querySelector('.daily-value.sm-text')?.lastElementChild?.querySelectorAll('span')?.length === 1); ``` -Your `span` element should have the `class` set to `right`. Remember you should not make it bold. +Su elemento `span` debe tener la `class` establecida en `right`. Recuerda que no debes ponerlo en negrita. ```js assert(document.querySelector('.daily-value.sm-text')?.lastElementChild?.querySelector('span')?.classList?.contains('right')); diff --git a/curriculum/challenges/espanol/14-responsive-web-design-22/learn-typography-by-building-a-nutrition-label/615f8bfe0f30a1a3c340356b.md b/curriculum/challenges/espanol/14-responsive-web-design-22/learn-typography-by-building-a-nutrition-label/615f8bfe0f30a1a3c340356b.md index e08015618a1..3a129bf801f 100644 --- a/curriculum/challenges/espanol/14-responsive-web-design-22/learn-typography-by-building-a-nutrition-label/615f8bfe0f30a1a3c340356b.md +++ b/curriculum/challenges/espanol/14-responsive-web-design-22/learn-typography-by-building-a-nutrition-label/615f8bfe0f30a1a3c340356b.md @@ -7,55 +7,55 @@ dashedName: step-62 # --description-- -Create another `p` element, give it the text `Calcium 260mg 20%`. Align `20%` to the right. Below that, create a `p` element with the text `Iron 8mg 45%`, aligning the `45%` to the right. +Cree otro elemento `p`, asígnele el texto `Calcium 260mg 20%`. Alinea `20%` a la derecha. Debajo de eso, cree un elemento `p` con el texto `Iron 8mg 45%`, alineando el `45%` a la derecha. # --hints-- -You should create two new `p` elements at the end of your `.daily-value.sm-text` element. +Debe crear dos nuevos elementos `p` al final de su elemento `.daily-value.sm-text`. ```js assert(document.querySelector('.daily-value.sm-text')?.lastElementChild?.localName === 'p'); assert(document.querySelector('.daily-value.sm-text')?.lastElementChild?.previousElementSibling?.localName === 'p'); ``` -Your first new `p` element should have the text `Calcium 260mg 20%`. +Su primer elemento nuevo `p` debe tener el texto `Calcium 260mg 20%`. ```js assert(document.querySelector('.daily-value.sm-text')?.lastElementChild?.previousElementSibling?.innerText?.match(/Calcium 260mg[\s|\n]+20%/)); ``` -Your first new `p` element should have a `span` element. +Su primer elemento nuevo `p` debe tener un elemento `span`. ```js assert(document.querySelector('.daily-value.sm-text')?.lastElementChild?.previousElementSibling?.firstElementChild?.localName === 'span'); ``` -Your first `span` element should have the `class` attribute set to `right`. Remember, do not make it bold. +Su primer elemento `span` debe tener el atributo `class` establecido en `right`. Recuerda, no lo pongas en negrita. ```js assert(document.querySelector('.daily-value.sm-text')?.lastElementChild?.previousElementSibling?.firstElementChild?.classList?.contains('right')); assert(!document.querySelector('.daily-value.sm-text')?.lastElementChild?.previousElementSibling?.firstElementChild?.classList?.contains('bold')); ``` -Your first `span` element should wrap the text `20%`. +Su primer elemento `span` debe envolver el texto `20%`. ```js assert(document.querySelector('.daily-value.sm-text')?.lastElementChild?.previousElementSibling?.firstElementChild?.innerText === '20%'); ``` -Your second new `p` element should have the text `Iron 8mg 45%`. +Su segundo elemento nuevo `p` debe tener el texto `Iron 8mg 45%`. ```js assert(document.querySelector('.daily-value.sm-text')?.lastElementChild?.innerText?.match(/Iron 8mg[\s|\n]+45%/)); ``` -Your second new `p` element should have a `span` element. +Tu segundo elemento nuevo `p` debe tener un elemento `span`. ```js assert(document.querySelector('.daily-value.sm-text')?.lastElementChild?.firstElementChild?.localName === 'span'); ``` -Your second `span` element should have the `class` attribute set to `right`. Remember, do not make it bold. +Su segundo elemento `span` debe tener el atributo `class` establecido en `right`. Recuerda, no lo pongas en negrita. ```js assert(document.querySelector('.daily-value.sm-text')?.lastElementChild?.firstElementChild?.classList?.contains('right')); diff --git a/curriculum/challenges/espanol/14-responsive-web-design-22/learn-typography-by-building-a-nutrition-label/615f8f1223601fa546e93f31.md b/curriculum/challenges/espanol/14-responsive-web-design-22/learn-typography-by-building-a-nutrition-label/615f8f1223601fa546e93f31.md index ba71aa7776a..8441bd58098 100644 --- a/curriculum/challenges/espanol/14-responsive-web-design-22/learn-typography-by-building-a-nutrition-label/615f8f1223601fa546e93f31.md +++ b/curriculum/challenges/espanol/14-responsive-web-design-22/learn-typography-by-building-a-nutrition-label/615f8f1223601fa546e93f31.md @@ -7,35 +7,35 @@ dashedName: step-63 # --description-- -Create the final `p` element for your `.daily-value` section. Give it the text `Potassium 235mg 6%`. Align the `6%` text to the right, and remove the bottom border of the `p` element. +Cree el elemento final `p` para su sección `.daily-value`. Dale el texto `Potassium 235mg 6%`. Alinee el texto `6%` a la derecha y elimine el borde inferior del elemento `p`. # --hints-- -You should create a new `p` element at the end of your `.daily-value.sm-text` element. +Debe crear un nuevo elemento `p` al final de su elemento `.daily-value.sm-text`. ```js assert(document.querySelector('.daily-value.sm-text')?.lastElementChild?.localName === 'p'); ``` -Your new `p` element should have the `class` attribute set to `no-divider`. +Su nuevo elemento `p` debe tener el atributo `class` establecido en `no-divider`. ```js assert(document.querySelector('.daily-value.sm-text')?.lastElementChild?.classList?.contains('no-divider')); ``` -Your new `p` element should have the text `Potassium 235mg 6%`. +Su nuevo elemento `p` debe tener el texto `Potassium 235mg 6%`. ```js assert(document.querySelector('.daily-value.sm-text')?.lastElementChild?.innerText?.match(/Potassium 235mg[\s|\n]+6%/)); ``` -Your new `p` element should have a `span` element. +Su nuevo elemento `p` debe tener un elemento `span`. ```js assert(document.querySelector('.daily-value.sm-text')?.lastElementChild?.querySelectorAll('span')?.length === 1); ``` -Your `span` element should have the `class` set to `right`. Remember you should not make it bold. +Su elemento `span` debe tener la `class` establecida en `right`. Recuerda que no debes ponerlo en negrita. ```js assert(document.querySelector('.daily-value.sm-text')?.lastElementChild?.querySelector('span')?.classList?.contains('right')); diff --git a/curriculum/challenges/espanol/14-responsive-web-design-22/learn-typography-by-building-a-nutrition-label/615f905fbd1017a65ca224eb.md b/curriculum/challenges/espanol/14-responsive-web-design-22/learn-typography-by-building-a-nutrition-label/615f905fbd1017a65ca224eb.md index 533b0b9a307..c6b1b2584bc 100644 --- a/curriculum/challenges/espanol/14-responsive-web-design-22/learn-typography-by-building-a-nutrition-label/615f905fbd1017a65ca224eb.md +++ b/curriculum/challenges/espanol/14-responsive-web-design-22/learn-typography-by-building-a-nutrition-label/615f905fbd1017a65ca224eb.md @@ -7,9 +7,9 @@ dashedName: step-64 # --description-- -Add a medium divider after your `.daily-value` element. Below that new divider, create a `p` element with the `class` attribute set to `note`. +Agregue un divisor mediano después de su elemento `.daily-value`. Debajo de ese nuevo divisor, cree un elemento `p` con el atributo `class` establecido en `note`. -Give the `p` element the following text: +Dale al elemento `p` el siguiente texto: ```markup * The % Daily Value (DV) tells you how much a nutrient in a serving of food contributes to a daily diet. 2,000 calories a day is used for general nutrition advice. @@ -17,32 +17,32 @@ Give the `p` element the following text: # --hints-- -You should create a new `div` after your `.daily-value` element. +Debe crear un nuevo `div` después de su elemento `.daily-value`. ```js assert(document.querySelector('.daily-value').nextElementSibling?.localName === 'div'); ``` -Your new `div` should have the `class` set to `divider md`. +Tu nuevo `div` debe tener `class` establecido en `divider md`. ```js assert(document.querySelector('.daily-value')?.nextElementSibling?.classList?.contains('divider')); assert(document.querySelector('.daily-value')?.nextElementSibling?.classList?.contains('md')); ``` -You should create a `p` element after your new `div` element. +Debe crear un elemento `p` después de su nuevo elemento `div`. ```js assert(document.querySelector('.label')?.lastElementChild?.localName === 'p'); ``` -Your new `p` element should have the `class` set to `note`. +Su nuevo elemento `p` debe tener `class` establecido en `note`. ```js assert(document.querySelector('.label')?.lastElementChild?.classList?.contains('note')); ``` -Your new `p` element should have the provided text. +Su nuevo elemento `p` debe tener el texto proporcionado. ```js assert.equal(document.querySelector('.label')?.lastElementChild?.innerText, '* The % Daily Value (DV) tells you how much a nutrient in a serving of food contributes to a daily diet. 2,000 calories a day is used for general nutrition advice.'); diff --git a/curriculum/challenges/espanol/14-responsive-web-design-22/learn-typography-by-building-a-nutrition-label/615f94786869e1a7fec54375.md b/curriculum/challenges/espanol/14-responsive-web-design-22/learn-typography-by-building-a-nutrition-label/615f94786869e1a7fec54375.md index 824d92e9837..974547f8706 100644 --- a/curriculum/challenges/espanol/14-responsive-web-design-22/learn-typography-by-building-a-nutrition-label/615f94786869e1a7fec54375.md +++ b/curriculum/challenges/espanol/14-responsive-web-design-22/learn-typography-by-building-a-nutrition-label/615f94786869e1a7fec54375.md @@ -7,23 +7,23 @@ dashedName: step-65 # --description-- -Create a `.note` selector, and set the size of the font to `0.6rem`. Also set the top and bottom margins to `5px`, removing the left and right margins. +Cree un selector `.note` y establezca el tamaño de la fuente en `0.6rem`. También establezca los márgenes superior e inferior en `5px`, eliminando los márgenes izquierdo y derecho. # --hints-- -You should have a new `.note` selector. +Debería tener un nuevo selector `.note`. ```js assert(new __helpers.CSSHelp(document).getStyle('.note')); ``` -Your `.note` selector should have a `font-size` property set to `0.6rem`. +Su selector `.note` debe tener una propiedad `font-size` establecida en `0.6rem`. ```js assert(new __helpers.CSSHelp(document).getStyle('.note')?.fontSize === '0.6rem'); ``` -Your `.note` selector should have a `margin` property set to `5px 0`. +Su selector `.note` debe tener una propiedad `margin` establecida en `5px 0`. ```js assert(new __helpers.CSSHelp(document).getStyle('.note')?.margin === '5px 0px'); diff --git a/curriculum/challenges/espanol/14-responsive-web-design-22/learn-typography-by-building-a-nutrition-label/615f951dff9317a900ef683f.md b/curriculum/challenges/espanol/14-responsive-web-design-22/learn-typography-by-building-a-nutrition-label/615f951dff9317a900ef683f.md index f40bdeb7b93..680e2143275 100644 --- a/curriculum/challenges/espanol/14-responsive-web-design-22/learn-typography-by-building-a-nutrition-label/615f951dff9317a900ef683f.md +++ b/curriculum/challenges/espanol/14-responsive-web-design-22/learn-typography-by-building-a-nutrition-label/615f951dff9317a900ef683f.md @@ -7,13 +7,13 @@ dashedName: step-66 # --description-- -Give the `.note` selector a left and right padding of `8px`, removing the top and bottom padding. Also set the `text-indent` property to `-8px`. +Dale al selector `.note` un relleno izquierdo y derecho de `8px`, eliminando el relleno superior e inferior. También establezca la propiedad `text-indent` en `-8px`. -With these last changes, your nutrition label is complete! +¡Con estos últimos cambios, su etiqueta nutricional está completa! # --hints-- -Your `.note` selector should have a `padding` property set to `0 8px`. +Su selector `.note` debe tener una propiedad `padding` establecida en `0 8px`. ```js assert.equal(new __helpers.CSSHelp(document).getStyle('.note')?.paddingTop, '0px'); @@ -22,7 +22,7 @@ assert.equal(new __helpers.CSSHelp(document).getStyle('.note')?.paddingLeft, '8p assert.equal(new __helpers.CSSHelp(document).getStyle('.note')?.paddingRight, '8px'); ``` -Your `.note` selector should have a `text-indent` property set to `-8px`. +Su selector `.note` debe tener una propiedad `text-indent` establecida en `-8px`. ```js assert(new __helpers.CSSHelp(document).getStyle('.note')?.textIndent === '-8px'); diff --git a/curriculum/challenges/german/04-data-visualization/json-apis-and-ajax/get-json-with-the-javascript-fetch-method.md b/curriculum/challenges/german/04-data-visualization/json-apis-and-ajax/get-json-with-the-javascript-fetch-method.md index b78ec78555b..6bfb5b9f3c5 100644 --- a/curriculum/challenges/german/04-data-visualization/json-apis-and-ajax/get-json-with-the-javascript-fetch-method.md +++ b/curriculum/challenges/german/04-data-visualization/json-apis-and-ajax/get-json-with-the-javascript-fetch-method.md @@ -38,13 +38,37 @@ Aktualisiere den Code, um eine `GET`-Anfrage an die freeCodeCamp Katzen-Foto-API # --hints-- -Dein Code sollte eine `GET`-Anfrage mit `fetch` stellen. + +Your code should use the fetched data to replace the inner HTML + +```js +const catData = "dummy data"; +const ref = fetch; +fetch = () => Promise.resolve({ json: () => catData }); +async () => { + try { + document.getElementById("getMessage").click(); + await new Promise((resolve, reject) => setTimeout(() => resolve(), 250)); + } catch (error) { + console.log(error); + } finally { + fetch = ref; + assert.equal( + document.getElementById("message").textContent, + JSON.stringify(catData) + ); + } +}; +``` + + +Your code should make a `GET` request with `fetch`. ```js assert(code.match(/fetch\s*\(\s*('|")\/json\/cats\.json\1\s*\)/g)); ``` -Dein Code sollte `then` verwenden, um die Antwort in JSON zu konvertieren. +Your code should use `then` to convert the response to JSON. ```js assert( @@ -54,13 +78,13 @@ assert( ); ``` -Dein Code sollte `then` verwenden, um die Daten zu verarbeiten, die von dem anderen `then` in JSON umgewandelt wurden. +Your code should use `then` to handle the data converted to JSON by the other `then`. ```js assert(__helpers.removeWhiteSpace(code).match(/\.then\(\(?\w+\)?=>{[^}]*}\)/g)); ``` -Dein Code sollte das Element mit der ID `message` erhalten und sein inneres HTML in den String der JSON-Daten ändern. +Your code should get the element with id `message` and change its inner HTML to the string of JSON data. ```js assert( diff --git a/curriculum/challenges/german/06-quality-assurance/quality-assurance-projects/american-british-translator.md b/curriculum/challenges/german/06-quality-assurance/quality-assurance-projects/american-british-translator.md index 70d83bf2b6e..7ebf38ca39d 100644 --- a/curriculum/challenges/german/06-quality-assurance/quality-assurance-projects/american-british-translator.md +++ b/curriculum/challenges/german/06-quality-assurance/quality-assurance-projects/american-british-translator.md @@ -69,7 +69,7 @@ Write the following tests in `tests/2_functional-tests.js`: # --hints-- -I can provide my own project, not the example URL. +You should provide your own project, not the example URL. ```js (getUserInput) => { diff --git a/curriculum/challenges/german/14-responsive-web-design-22/learn-css-grid-by-building-a-magazine/6148d3fff5186b57123d97e2.md b/curriculum/challenges/german/14-responsive-web-design-22/learn-css-grid-by-building-a-magazine/6148d3fff5186b57123d97e2.md index c7defed5fcf..3c8220b45e9 100644 --- a/curriculum/challenges/german/14-responsive-web-design-22/learn-css-grid-by-building-a-magazine/6148d3fff5186b57123d97e2.md +++ b/curriculum/challenges/german/14-responsive-web-design-22/learn-css-grid-by-building-a-magazine/6148d3fff5186b57123d97e2.md @@ -24,7 +24,7 @@ assert(new __helpers.CSSHelp(document).getStyle('.quote::before')); Your `.quote::before` selector should have a `content` property set to `'" '`. ```js -assert(new __helpers.CSSHelp(document).getStyle('.quote::before')?.content?.match(/\\?\"\s/)); +assert(new __helpers.CSSHelp(document).getStyle('.quote::before')?.content?.match(/\"\\"\s\"/)); ``` You should have a `.quote::after` selector. @@ -36,7 +36,7 @@ assert(new __helpers.CSSHelp(document).getStyle('.quote::after')); Your `.quote::after` selector should have a `content` property set to `' "'`. ```js -assert(new __helpers.CSSHelp(document).getStyle('.quote::after')?.content?.match(/\s\\?\"/)); +assert(new __helpers.CSSHelp(document).getStyle('.quote::after')?.content?.match(/\"\s\\""/)); ``` # --seed-- diff --git a/curriculum/challenges/german/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5f07be6ef7412fbad0c5626b.md b/curriculum/challenges/german/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5f07be6ef7412fbad0c5626b.md index 5ec3cce5acf..ec28935f4cd 100644 --- a/curriculum/challenges/german/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5f07be6ef7412fbad0c5626b.md +++ b/curriculum/challenges/german/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5f07be6ef7412fbad0c5626b.md @@ -22,7 +22,7 @@ assert(document.querySelector('section')); Your `section` element should have a closing tag. Closing tags have a `/` just after the `<` character. ```js -assert(code.match(/<\/section\>/)); +assert(code.match(/<\/section\s*>/i)); ``` The entire `section` element should be between the opening and closing tags of the `main` element. @@ -57,15 +57,15 @@ assert.isFalse(includesH1); --fcc-editable-region-- -

CatPhotoApp

+

Cat Photos

Click here to view more cat photos.

A cute orange cat lying on its back. -
+ --fcc-editable-region-- diff --git a/curriculum/challenges/italian/04-data-visualization/json-apis-and-ajax/get-json-with-the-javascript-fetch-method.md b/curriculum/challenges/italian/04-data-visualization/json-apis-and-ajax/get-json-with-the-javascript-fetch-method.md index fae71039df4..81cb8db7a52 100644 --- a/curriculum/challenges/italian/04-data-visualization/json-apis-and-ajax/get-json-with-the-javascript-fetch-method.md +++ b/curriculum/challenges/italian/04-data-visualization/json-apis-and-ajax/get-json-with-the-javascript-fetch-method.md @@ -38,13 +38,37 @@ Modifica il codice per creare e usare una richiesta `GET` all'API Cat Photo di f # --hints-- -Il tuo codice dobrebbe fare una richiesta `GET` usando `fetch`. + +Your code should use the fetched data to replace the inner HTML + +```js +const catData = "dummy data"; +const ref = fetch; +fetch = () => Promise.resolve({ json: () => catData }); +async () => { + try { + document.getElementById("getMessage").click(); + await new Promise((resolve, reject) => setTimeout(() => resolve(), 250)); + } catch (error) { + console.log(error); + } finally { + fetch = ref; + assert.equal( + document.getElementById("message").textContent, + JSON.stringify(catData) + ); + } +}; +``` + + +Your code should make a `GET` request with `fetch`. ```js assert(code.match(/fetch\s*\(\s*('|")\/json\/cats\.json\1\s*\)/g)); ``` -Il tuo codice dovrebbe usare `then` per convertire la risposta in JSON. +Your code should use `then` to convert the response to JSON. ```js assert( @@ -54,13 +78,13 @@ assert( ); ``` -Il tuo codice dovrebbe usare `then` per gestire i dati convertiti a JSON dall'altro `then`. +Your code should use `then` to handle the data converted to JSON by the other `then`. ```js assert(__helpers.removeWhiteSpace(code).match(/\.then\(\(?\w+\)?=>{[^}]*}\)/g)); ``` -Il tuo codice dovrebbe selezionare l'elemento con id `message` e cambiare il suo innerHTML con la stringa di dati JSON. +Your code should get the element with id `message` and change its inner HTML to the string of JSON data. ```js assert( diff --git a/curriculum/challenges/italian/06-quality-assurance/quality-assurance-projects/american-british-translator.md b/curriculum/challenges/italian/06-quality-assurance/quality-assurance-projects/american-british-translator.md index c39fc4c08b0..2d1b0b40862 100644 --- a/curriculum/challenges/italian/06-quality-assurance/quality-assurance-projects/american-british-translator.md +++ b/curriculum/challenges/italian/06-quality-assurance/quality-assurance-projects/american-british-translator.md @@ -69,7 +69,7 @@ Scrivi i seguenti test in `tests/2_functional-tests.js`: # --hints-- -È necessario fornire il proprio progetto, non l'URL di esempio. +You should provide your own project, not the example URL. ```js (getUserInput) => { diff --git a/curriculum/challenges/italian/14-responsive-web-design-22/learn-css-grid-by-building-a-magazine/6148d3fff5186b57123d97e2.md b/curriculum/challenges/italian/14-responsive-web-design-22/learn-css-grid-by-building-a-magazine/6148d3fff5186b57123d97e2.md index 6ee65ed0c65..1ea4ec03a83 100644 --- a/curriculum/challenges/italian/14-responsive-web-design-22/learn-css-grid-by-building-a-magazine/6148d3fff5186b57123d97e2.md +++ b/curriculum/challenges/italian/14-responsive-web-design-22/learn-css-grid-by-building-a-magazine/6148d3fff5186b57123d97e2.md @@ -24,7 +24,7 @@ assert(new __helpers.CSSHelp(document).getStyle('.quote::before')); Il selettore `.quote::before` dovrebbe avere una proprietà `content` impostata su `'" '`. ```js -assert(new __helpers.CSSHelp(document).getStyle('.quote::before')?.content?.match(/\\?\"\s/)); +assert(new __helpers.CSSHelp(document).getStyle('.quote::before')?.content?.match(/\"\\"\s\"/)); ``` Dovresti avere un selettore `.quote::after`. @@ -36,7 +36,7 @@ assert(new __helpers.CSSHelp(document).getStyle('.quote::after')); Il selettore `.quote::after` dovrebbe avere una proprietà `content` impostata su `' "'`. ```js -assert(new __helpers.CSSHelp(document).getStyle('.quote::after')?.content?.match(/\s\\?\"/)); +assert(new __helpers.CSSHelp(document).getStyle('.quote::after')?.content?.match(/\"\s\\""/)); ``` # --seed-- diff --git a/curriculum/challenges/italian/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5f07be6ef7412fbad0c5626b.md b/curriculum/challenges/italian/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5f07be6ef7412fbad0c5626b.md index e7d026d157c..1ee0069a6ce 100644 --- a/curriculum/challenges/italian/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5f07be6ef7412fbad0c5626b.md +++ b/curriculum/challenges/italian/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5f07be6ef7412fbad0c5626b.md @@ -22,7 +22,7 @@ assert(document.querySelector('section')); L'elemento `section` dovrebbe avere un tag di chiusura. I tag di chiusura hanno un carattere `/` subito dopo il carattere `<`. ```js -assert(code.match(/<\/section\>/)); +assert(code.match(/<\/section\s*>/i)); ``` L'intero elemento `section` dovrebbe essere compreso tra i tag di apertura e chiusura dell'elemento `main`. @@ -57,15 +57,15 @@ assert.isFalse(includesH1); --fcc-editable-region-- -

CatPhotoApp

+

Cat Photos

Click here to view more cat photos.

A cute orange cat lying on its back. -
+ --fcc-editable-region-- diff --git a/curriculum/challenges/japanese/04-data-visualization/json-apis-and-ajax/get-json-with-the-javascript-fetch-method.md b/curriculum/challenges/japanese/04-data-visualization/json-apis-and-ajax/get-json-with-the-javascript-fetch-method.md index 292bffd8683..e745aa57a93 100644 --- a/curriculum/challenges/japanese/04-data-visualization/json-apis-and-ajax/get-json-with-the-javascript-fetch-method.md +++ b/curriculum/challenges/japanese/04-data-visualization/json-apis-and-ajax/get-json-with-the-javascript-fetch-method.md @@ -38,13 +38,37 @@ fetch('/json/cats.json') # --hints-- -`fetch` で `GET` リクエストを行う必要があります。 + +Your code should use the fetched data to replace the inner HTML + +```js +const catData = "dummy data"; +const ref = fetch; +fetch = () => Promise.resolve({ json: () => catData }); +async () => { + try { + document.getElementById("getMessage").click(); + await new Promise((resolve, reject) => setTimeout(() => resolve(), 250)); + } catch (error) { + console.log(error); + } finally { + fetch = ref; + assert.equal( + document.getElementById("message").textContent, + JSON.stringify(catData) + ); + } +}; +``` + + +Your code should make a `GET` request with `fetch`. ```js assert(code.match(/fetch\s*\(\s*('|")\/json\/cats\.json\1\s*\)/g)); ``` -`then` を使用して応答を JSON に変換する必要があります。 +Your code should use `then` to convert the response to JSON. ```js assert( @@ -54,13 +78,13 @@ assert( ); ``` -`then` を使用して、他の `then` によって JSON に変換されたデータを処理する必要があります 。 +Your code should use `then` to handle the data converted to JSON by the other `then`. ```js assert(__helpers.removeWhiteSpace(code).match(/\.then\(\(?\w+\)?=>{[^}]*}\)/g)); ``` -`message` という id を持つ要素を取得し、内部の HTML を JSON データの文字列に変更する必要があります。 +Your code should get the element with id `message` and change its inner HTML to the string of JSON data. ```js assert( diff --git a/curriculum/challenges/japanese/06-quality-assurance/quality-assurance-projects/american-british-translator.md b/curriculum/challenges/japanese/06-quality-assurance/quality-assurance-projects/american-british-translator.md index e9b17a65b3f..bab292fdf01 100644 --- a/curriculum/challenges/japanese/06-quality-assurance/quality-assurance-projects/american-british-translator.md +++ b/curriculum/challenges/japanese/06-quality-assurance/quality-assurance-projects/american-british-translator.md @@ -69,7 +69,7 @@ Write the following tests in `tests/2_functional-tests.js`: # --hints-- -I can provide my own project, not the example URL. +You should provide your own project, not the example URL. ```js (getUserInput) => { diff --git a/curriculum/challenges/japanese/14-responsive-web-design-22/learn-css-grid-by-building-a-magazine/6148d3fff5186b57123d97e2.md b/curriculum/challenges/japanese/14-responsive-web-design-22/learn-css-grid-by-building-a-magazine/6148d3fff5186b57123d97e2.md index 0beba77f281..f9060b5f212 100644 --- a/curriculum/challenges/japanese/14-responsive-web-design-22/learn-css-grid-by-building-a-magazine/6148d3fff5186b57123d97e2.md +++ b/curriculum/challenges/japanese/14-responsive-web-design-22/learn-css-grid-by-building-a-magazine/6148d3fff5186b57123d97e2.md @@ -24,7 +24,7 @@ assert(new __helpers.CSSHelp(document).getStyle('.quote::before')); `.quote::before` セレクターの `content` プロパティを `'" '` に設定する必要があります。 ```js -assert(new __helpers.CSSHelp(document).getStyle('.quote::before')?.content?.match(/\\?\"\s/)); +assert(new __helpers.CSSHelp(document).getStyle('.quote::before')?.content?.match(/\"\\"\s\"/)); ``` `.quote::after` セレクターが必要です。 @@ -36,7 +36,7 @@ assert(new __helpers.CSSHelp(document).getStyle('.quote::after')); `.quote::after` セレクターの `content` プロパティを `' "'` に設定する必要があります。 ```js -assert(new __helpers.CSSHelp(document).getStyle('.quote::after')?.content?.match(/\s\\?\"/)); +assert(new __helpers.CSSHelp(document).getStyle('.quote::after')?.content?.match(/\"\s\\""/)); ``` # --seed-- diff --git a/curriculum/challenges/japanese/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5f07be6ef7412fbad0c5626b.md b/curriculum/challenges/japanese/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5f07be6ef7412fbad0c5626b.md index c2ef03ffc5c..a2919c41eef 100644 --- a/curriculum/challenges/japanese/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5f07be6ef7412fbad0c5626b.md +++ b/curriculum/challenges/japanese/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5f07be6ef7412fbad0c5626b.md @@ -22,7 +22,7 @@ assert(document.querySelector('section')); `section` 要素には終了タグが必要です。 終了タグは `<` の直後に `/` があります。 ```js -assert(code.match(/<\/section\>/)); +assert(code.match(/<\/section\s*>/i)); ``` `section` 要素全体が、`main` 要素の開始タグと終了タグの間にあるようにしてください。 @@ -57,15 +57,15 @@ assert.isFalse(includesH1); --fcc-editable-region-- -

CatPhotoApp

+

Cat Photos

Click here to view more cat photos.

A cute orange cat lying on its back. -
+ --fcc-editable-region-- diff --git a/curriculum/challenges/portuguese/04-data-visualization/json-apis-and-ajax/get-json-with-the-javascript-fetch-method.md b/curriculum/challenges/portuguese/04-data-visualization/json-apis-and-ajax/get-json-with-the-javascript-fetch-method.md index 6aceb78a9f5..3dfd4a9c668 100644 --- a/curriculum/challenges/portuguese/04-data-visualization/json-apis-and-ajax/get-json-with-the-javascript-fetch-method.md +++ b/curriculum/challenges/portuguese/04-data-visualization/json-apis-and-ajax/get-json-with-the-javascript-fetch-method.md @@ -38,13 +38,37 @@ Atualize o código para criar e enviar uma solicitação de `GET` para a API de # --hints-- -O código deve fazer uma solicitação de `GET` com `fetch`. + +Your code should use the fetched data to replace the inner HTML + +```js +const catData = "dummy data"; +const ref = fetch; +fetch = () => Promise.resolve({ json: () => catData }); +async () => { + try { + document.getElementById("getMessage").click(); + await new Promise((resolve, reject) => setTimeout(() => resolve(), 250)); + } catch (error) { + console.log(error); + } finally { + fetch = ref; + assert.equal( + document.getElementById("message").textContent, + JSON.stringify(catData) + ); + } +}; +``` + + +Your code should make a `GET` request with `fetch`. ```js assert(code.match(/fetch\s*\(\s*('|")\/json\/cats\.json\1\s*\)/g)); ``` -O código deve usar `then` para converter a resposta para JSON. +Your code should use `then` to convert the response to JSON. ```js assert( @@ -54,13 +78,13 @@ assert( ); ``` -O código deve usar `then` para lidar com os dados convertidos para JSON pelo outro `then`. +Your code should use `then` to handle the data converted to JSON by the other `then`. ```js assert(__helpers.removeWhiteSpace(code).match(/\.then\(\(?\w+\)?=>{[^}]*}\)/g)); ``` -O código deve obter o elemento com o id `message` e alterar seu HTML interno para a string de dados do JSON. +Your code should get the element with id `message` and change its inner HTML to the string of JSON data. ```js assert( diff --git a/curriculum/challenges/portuguese/06-quality-assurance/quality-assurance-projects/american-british-translator.md b/curriculum/challenges/portuguese/06-quality-assurance/quality-assurance-projects/american-british-translator.md index 2c18960dc48..c129b74e643 100644 --- a/curriculum/challenges/portuguese/06-quality-assurance/quality-assurance-projects/american-british-translator.md +++ b/curriculum/challenges/portuguese/06-quality-assurance/quality-assurance-projects/american-british-translator.md @@ -69,7 +69,7 @@ Escreva os testes a seguir em `tests/2_functional-tests.js`: # --hints-- -Eu posso fornecer meu próprio projeto, não o exemplo de URL. +You should provide your own project, not the example URL. ```js (getUserInput) => { diff --git a/curriculum/challenges/portuguese/14-responsive-web-design-22/learn-css-grid-by-building-a-magazine/6148d3fff5186b57123d97e2.md b/curriculum/challenges/portuguese/14-responsive-web-design-22/learn-css-grid-by-building-a-magazine/6148d3fff5186b57123d97e2.md index 4fa110e1a2e..8a0a6731df2 100644 --- a/curriculum/challenges/portuguese/14-responsive-web-design-22/learn-css-grid-by-building-a-magazine/6148d3fff5186b57123d97e2.md +++ b/curriculum/challenges/portuguese/14-responsive-web-design-22/learn-css-grid-by-building-a-magazine/6148d3fff5186b57123d97e2.md @@ -24,7 +24,7 @@ assert(new __helpers.CSSHelp(document).getStyle('.quote::before')); O seletor `.quote::before` deve ter a propriedade `content` definida como `'" '`. ```js -assert(new __helpers.CSSHelp(document).getStyle('.quote::before')?.content?.match(/\\?\"\s/)); +assert(new __helpers.CSSHelp(document).getStyle('.quote::before')?.content?.match(/\"\\"\s\"/)); ``` Você deve ter um seletor `.quote::after`. @@ -36,7 +36,7 @@ assert(new __helpers.CSSHelp(document).getStyle('.quote::after')); O seletor `.quote::after` deve ter a propriedade `content` definida como `' "'`. ```js -assert(new __helpers.CSSHelp(document).getStyle('.quote::after')?.content?.match(/\s\\?\"/)); +assert(new __helpers.CSSHelp(document).getStyle('.quote::after')?.content?.match(/\"\s\\""/)); ``` # --seed-- diff --git a/curriculum/challenges/portuguese/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5f07be6ef7412fbad0c5626b.md b/curriculum/challenges/portuguese/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5f07be6ef7412fbad0c5626b.md index 9412699b551..55de2a3abc8 100644 --- a/curriculum/challenges/portuguese/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5f07be6ef7412fbad0c5626b.md +++ b/curriculum/challenges/portuguese/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5f07be6ef7412fbad0c5626b.md @@ -22,7 +22,7 @@ assert(document.querySelector('section')); O elemento `section` deve ter uma tag de fechamento. As tags de fechamento têm um caractere `/` logo após o caractere `<`. ```js -assert(code.match(/<\/section\>/)); +assert(code.match(/<\/section\s*>/i)); ``` Todo o elemento `section` deve estar dentro das tags de abertura e fechamento do elemento `main`. @@ -57,15 +57,15 @@ assert.isFalse(includesH1); --fcc-editable-region-- -

CatPhotoApp

+

Cat Photos

Click here to view more cat photos.

A cute orange cat lying on its back. -
+ --fcc-editable-region-- diff --git a/curriculum/challenges/ukrainian/02-javascript-algorithms-and-data-structures/basic-algorithm-scripting/boo-who.md b/curriculum/challenges/ukrainian/02-javascript-algorithms-and-data-structures/basic-algorithm-scripting/boo-who.md index ae0e48f954c..604e6082a63 100644 --- a/curriculum/challenges/ukrainian/02-javascript-algorithms-and-data-structures/basic-algorithm-scripting/boo-who.md +++ b/curriculum/challenges/ukrainian/02-javascript-algorithms-and-data-structures/basic-algorithm-scripting/boo-who.md @@ -1,6 +1,6 @@ --- id: a77dbc43c33f39daa4429b4f -title: Хто такий Boo +title: Бу, ти хто? challengeType: 1 forumTopicId: 16000 dashedName: boo-who @@ -8,9 +8,9 @@ dashedName: boo-who # --description-- -Перевірте, чи значення відноситься булевого тиру (логічне значення). Функція має повертати `true` or `false`. +Перевірте, чи значення належить до булевого примітивного. Поверніть `true` або `false`. -Булеві примітиви - це коди `true` правда та `false` неправда. +Булеві примітивні значення: `true` (правда) та `false` (брехня). # --hints-- diff --git a/curriculum/challenges/ukrainian/02-javascript-algorithms-and-data-structures/basic-algorithm-scripting/chunky-monkey.md b/curriculum/challenges/ukrainian/02-javascript-algorithms-and-data-structures/basic-algorithm-scripting/chunky-monkey.md index 481ce106555..c56349090be 100644 --- a/curriculum/challenges/ukrainian/02-javascript-algorithms-and-data-structures/basic-algorithm-scripting/chunky-monkey.md +++ b/curriculum/challenges/ukrainian/02-javascript-algorithms-and-data-structures/basic-algorithm-scripting/chunky-monkey.md @@ -1,6 +1,6 @@ --- id: a9bd25c716030ec90084d8a1 -title: Алгоритм Chunky Monkey +title: Мавпочка Чанкі challengeType: 1 forumTopicId: 16005 dashedName: chunky-monkey @@ -8,11 +8,11 @@ dashedName: chunky-monkey # --description-- -Напишіть функцію, яка ділить масив (перший аргумент) у групи: довжина `size` (другий аргумент) і повертає їх у вигляді двовимірного масиву. +Напишіть функцію, яка ділить масив (перший аргумент) на групи довжиною `size` (другий аргумент) та повертає їх як двовимірний масив. # --hints-- -`chunkArrayInGroups(["a", "b", "c", "d"], 2)` повинен перетворюватися на `[["a", "b"], ["c", "d"]]`. +`chunkArrayInGroups(["a", "b", "c", "d"], 2)` повинен повертати `[["a", "b"], ["c", "d"]]`. ```js assert.deepEqual(chunkArrayInGroups(['a', 'b', 'c', 'd'], 2), [ @@ -21,7 +21,7 @@ assert.deepEqual(chunkArrayInGroups(['a', 'b', 'c', 'd'], 2), [ ]); ``` -`chunkArrayInGroups([0, 1, 2, 3, 4, 5], 3)` повинен перетворюватися на `[[0, 1, 2], [3, 4, 5]]`. +`chunkArrayInGroups([0, 1, 2, 3, 4, 5], 3)` повинен повертати `[[0, 1, 2], [3, 4, 5]]`. ```js assert.deepEqual(chunkArrayInGroups([0, 1, 2, 3, 4, 5], 3), [ @@ -30,7 +30,7 @@ assert.deepEqual(chunkArrayInGroups([0, 1, 2, 3, 4, 5], 3), [ ]); ``` -`chunkArrayInGroups([0, 1, 2, 3, 4, 5], 2)` повинен перетворюватися на `[[0, 1], [2, 3], [4, 5]]`. +`chunkArrayInGroups([0, 1, 2, 3, 4, 5], 2)` повинен повертати `[[0, 1], [2, 3], [4, 5]]`. ```js assert.deepEqual(chunkArrayInGroups([0, 1, 2, 3, 4, 5], 2), [ @@ -40,7 +40,7 @@ assert.deepEqual(chunkArrayInGroups([0, 1, 2, 3, 4, 5], 2), [ ]); ``` -`chunkArrayInGroups([0, 1, 2, 3, 4, 5], 4)` повинен перетворюватися на `[[0, 1, 2, 3], [4, 5]]`. +`chunkArrayInGroups([0, 1, 2, 3, 4, 5], 4)` повинен повертати `[[0, 1, 2, 3], [4, 5]]`. ```js assert.deepEqual(chunkArrayInGroups([0, 1, 2, 3, 4, 5], 4), [ @@ -49,7 +49,7 @@ assert.deepEqual(chunkArrayInGroups([0, 1, 2, 3, 4, 5], 4), [ ]); ``` -`chunkArrayInGroups([0, 1, 2, 3, 4, 5, 6], 3)` повинен перетворюватися на `[[0, 1, 2], [3, 4, 5], [6]]`. +`chunkArrayInGroups([0, 1, 2, 3, 4, 5, 6], 3)` повинен повертати `[[0, 1, 2], [3, 4, 5], [6]]`. ```js assert.deepEqual(chunkArrayInGroups([0, 1, 2, 3, 4, 5, 6], 3), [ @@ -59,7 +59,7 @@ assert.deepEqual(chunkArrayInGroups([0, 1, 2, 3, 4, 5, 6], 3), [ ]); ``` -`chunkArrayInGroups([0, 1, 2, 3, 4, 5, 6, 7, 8], 4)` повинен перетворюватися на `[[0, 1, 2, 3], [4, 5, 6, 7], [8]]`. +`chunkArrayInGroups([0, 1, 2, 3, 4, 5, 6, 7, 8], 4)` повинен повертати `[[0, 1, 2, 3], [4, 5, 6, 7], [8]]`. ```js assert.deepEqual(chunkArrayInGroups([0, 1, 2, 3, 4, 5, 6, 7, 8], 4), [ @@ -69,7 +69,7 @@ assert.deepEqual(chunkArrayInGroups([0, 1, 2, 3, 4, 5, 6, 7, 8], 4), [ ]); ``` -`chunkArrayInGroups([0, 1, 2, 3, 4, 5, 6, 7, 8], 2)` повинен перетворюватися на `[[0, 1], [2, 3], [4, 5], [6, 7], [8]]`. +`chunkArrayInGroups([0, 1, 2, 3, 4, 5, 6, 7, 8], 2)` повинен повертати `[[0, 1], [2, 3], [4, 5], [6, 7], [8]]`. ```js assert.deepEqual(chunkArrayInGroups([0, 1, 2, 3, 4, 5, 6, 7, 8], 2), [ diff --git a/curriculum/challenges/ukrainian/02-javascript-algorithms-and-data-structures/basic-algorithm-scripting/confirm-the-ending.md b/curriculum/challenges/ukrainian/02-javascript-algorithms-and-data-structures/basic-algorithm-scripting/confirm-the-ending.md index bfe4f0d6373..e0a940ce73e 100644 --- a/curriculum/challenges/ukrainian/02-javascript-algorithms-and-data-structures/basic-algorithm-scripting/confirm-the-ending.md +++ b/curriculum/challenges/ukrainian/02-javascript-algorithms-and-data-structures/basic-algorithm-scripting/confirm-the-ending.md @@ -1,6 +1,6 @@ --- id: acda2fb1324d9b0fa741e6b5 -title: Підтвердження Закінчення +title: Підтвердження закінчення challengeType: 1 forumTopicId: 16006 dashedName: confirm-the-ending @@ -10,29 +10,29 @@ dashedName: confirm-the-ending Перевірте, чи рядок (перший аргумент, `str`) закінчується заданим цільовим рядком (другий аргумент, `target`). -Цю проблему *can* можна вирішити за допомогою методу `.endsWith()`, який був введений в ES2015. Але, мета цього завдання передбачає використання одного із методів виділення підрядків JavaScript. +Це завдання *можна* вирішити за допомогою методу `.endsWith()`, який був введений в ES2015. Але ми б хотіли, щоб ви використали один із методів підрядків JavaScript. # --hints-- -`confirmEnding("Bastian", "n")` повинен перетворюватися на `true`. +`confirmEnding("Bastian", "n")` повинен повертати `true`. ```js assert(confirmEnding('Bastian', 'n') === true); ``` -`confirmEnding("Congratulation", "on")` повинен перетворюватися на `true`. +`confirmEnding("Congratulation", "on")` повинен повертати `true`. ```js assert(confirmEnding('Congratulation', 'on') === true); ``` -`confirmEnding("Connor", "n")` повинен перетворюватися на `false`. +`confirmEnding("Connor", "n")` повинен повертати `false`. ```js assert(confirmEnding('Connor', 'n') === false); ``` -`confirmEnding("Walking on water and developing software from a specification are easy if both are frozen", "specification")` повинен перетворюватися на `false`. +`confirmEnding("Walking on water and developing software from a specification are easy if both are frozen", "specification")` повинен повертати `false`. ```js assert( @@ -43,31 +43,31 @@ assert( ); ``` -`confirmEnding("He has to give me a new name", "name")` повинен перетворюватися на `true`. +`confirmEnding("He has to give me a new name", "name")` повинен повертати `true`. ```js assert(confirmEnding('He has to give me a new name', 'name') === true); ``` -`confirmEnding("Open sesame", "same")` повинен перетворюватися на `true`. +`confirmEnding("Open sesame", "same")` повинен повертати `true`. ```js assert(confirmEnding('Open sesame', 'same') === true); ``` -`confirmEnding("Open sesame", "sage")` повинен перетворюватися на `false`. +`confirmEnding("Open sesame", "sage")` повинен повертати `false`. ```js assert(confirmEnding('Open sesame', 'sage') === false); ``` -`confirmEnding("Open sesame", "game")` повинен перетворюватися на `false`. +`confirmEnding("Open sesame", "game")` повинен повертати `false`. ```js assert(confirmEnding('Open sesame', 'game') === false); ``` -`confirmEnding("If you want to save our world, you must hurry. We dont know how much longer we can withstand the nothing", "mountain")` повинен перетворюватися на `false`. +`confirmEnding("If you want to save our world, you must hurry. We dont know how much longer we can withstand the nothing", "mountain")` повинен повертати `false`. ```js assert( @@ -78,7 +78,7 @@ assert( ); ``` -`confirmEnding("Abstraction", "action")` повинен перетворюватися на `true`. +`confirmEnding("Abstraction", "action")` повинен повертати `true`. ```js assert(confirmEnding('Abstraction', 'action') === true); diff --git a/curriculum/challenges/ukrainian/02-javascript-algorithms-and-data-structures/basic-algorithm-scripting/convert-celsius-to-fahrenheit.md b/curriculum/challenges/ukrainian/02-javascript-algorithms-and-data-structures/basic-algorithm-scripting/convert-celsius-to-fahrenheit.md index e42086f5cc8..55aab04e1e0 100644 --- a/curriculum/challenges/ukrainian/02-javascript-algorithms-and-data-structures/basic-algorithm-scripting/convert-celsius-to-fahrenheit.md +++ b/curriculum/challenges/ukrainian/02-javascript-algorithms-and-data-structures/basic-algorithm-scripting/convert-celsius-to-fahrenheit.md @@ -1,6 +1,6 @@ --- id: 56533eb9ac21ba0edf2244b3 -title: Конвертація градусів за Цельсієм у градуси за Фаренгейтом +title: Цельсій у Фаренгейт challengeType: 1 forumTopicId: 16806 dashedName: convert-celsius-to-fahrenheit @@ -8,43 +8,43 @@ dashedName: convert-celsius-to-fahrenheit # --description-- -Формула для конвертації Цельсію до Фаренгейта: температура в Цельсіях помножена на `9/5` плюс `32`. +Формула для конвертації Цельсію у Фаренгейт: температура в Цельсіях × `9/5` + `32`. -Ви отримуєте змінну `celsius`, що відповідає температурі за Цельсієм. Використовуйте вже визначену змінну `fahrenheit` і призначте їй температуру за Фаренгейтом, еквівалентну заданій температурі за Цельсієм. Використовуйте запропоновану вище формулу для конвертації температури за Цельсієм у температуру за Фаренгейтом. +Вам надано змінну `celsius`, яка відповідає температурі за Цельсієм. Використайте вже визначену змінну `fahrenheit` та призначте їй температуру за Фаренгейтом, еквівалентну заданій температурі за Цельсієм. Використайте запропоновану вище формулу для конвертації температури за Цельсієм у температуру за Фаренгейтом. # --hints-- -`convertCtoF(0)` має повернути число +`convertCtoF(0)` повинен повертати число ```js assert(typeof convertCtoF(0) === 'number'); ``` -`convertCtoF(-30)` має повертати значення `-22` +`convertCtoF(-30)` повинен повертати значення `-22` ```js assert(convertCtoF(-30) === -22); ``` -`convertCtoF(-10)` має повертати значення `14` +`convertCtoF(-10)` повинен повертати значення `14` ```js assert(convertCtoF(-10) === 14); ``` -`convertCtoF(0)` має повертати значення `32` +`convertCtoF(0)` повинен повертати значення `32` ```js assert(convertCtoF(0) === 32); ``` -`convertCtoF(20)` має повертати значення `68` +`convertCtoF(20)` повинен повертати значення `68` ```js assert(convertCtoF(20) === 68); ``` -`convertCtoF(30)` має повертати значення `86` +`convertCtoF(30)` повинен повертати значення `86` ```js assert(convertCtoF(30) === 86); diff --git a/curriculum/challenges/ukrainian/02-javascript-algorithms-and-data-structures/basic-algorithm-scripting/factorialize-a-number.md b/curriculum/challenges/ukrainian/02-javascript-algorithms-and-data-structures/basic-algorithm-scripting/factorialize-a-number.md index 481d627aac2..d88dc31b050 100644 --- a/curriculum/challenges/ukrainian/02-javascript-algorithms-and-data-structures/basic-algorithm-scripting/factorialize-a-number.md +++ b/curriculum/challenges/ukrainian/02-javascript-algorithms-and-data-structures/basic-algorithm-scripting/factorialize-a-number.md @@ -8,43 +8,43 @@ dashedName: factorialize-a-number # --description-- -Повернути факторіал поданого цілого числа. +Поверніть факторіал поданого цілого числа. -Якщо ціле число позначається літерою `n`, факторіал - це добуток усіх додатних цілих чисел менших або рівних `n`. +Якщо ціле число позначається літерою `n`, то факторіал – це добуток усіх додатних цілих чисел, менших або рівних `n`. -Факторіали часто зображаються короткими позначеннями `n!` +Факторіали часто зображаються короткими позначеннями `n!` Наприклад: `5! = 1 * 2 * 3 * 4 * 5 = 120` -Тільки цілі числа, які більші або дорівнюють нулю, будуть задані функції. +Функції будуть задані тільки ті цілі числа, які більші або дорівнюють нулю. # --hints-- -`factorialize(5)` "" має повертати число. +`factorialize(5)` повинен повертати число. ```js assert(typeof factorialize(5) === 'number'); ``` -`factorialize(5)` має повернути `120`. +`factorialize(5)` повинен повертати `120`. ```js assert(factorialize(5) === 120); ``` -`factorialize(10)` має повернути число`3628800`. +`factorialize(10)` повинен повертати `3628800`. ```js assert(factorialize(10) === 3628800); ``` -`factorialize(20)` має повернути `2432902008176640000`. +`factorialize(20)` повинен повертати `2432902008176640000`. ```js assert(factorialize(20) === 2432902008176640000); ``` -`factorialize(0)` має повернути `1`. +`factorialize(0)` повинен повертати `1`. ```js assert(factorialize(0) === 1); diff --git a/curriculum/challenges/ukrainian/02-javascript-algorithms-and-data-structures/basic-algorithm-scripting/falsy-bouncer.md b/curriculum/challenges/ukrainian/02-javascript-algorithms-and-data-structures/basic-algorithm-scripting/falsy-bouncer.md index 06f4a95515c..36ad764fd06 100644 --- a/curriculum/challenges/ukrainian/02-javascript-algorithms-and-data-structures/basic-algorithm-scripting/falsy-bouncer.md +++ b/curriculum/challenges/ukrainian/02-javascript-algorithms-and-data-structures/basic-algorithm-scripting/falsy-bouncer.md @@ -1,6 +1,6 @@ --- id: adf08ec01beb4f99fc7a68f2 -title: Фільтрація помилкових значень масиву +title: Викидайло брехні challengeType: 1 forumTopicId: 16014 dashedName: falsy-bouncer @@ -8,39 +8,39 @@ dashedName: falsy-bouncer # --description-- -Remove all falsy values from an array. Return a new array; do not mutate the original array. +Видаліть всі неправильні значення з масиву. Поверніть новий масив; не змінюйте вихідний масив. -Неправильні значення в JavaScript: `false`, `null`, `0`, `""`, `undefined`, і `NaN`. +Неправильні значення в JavaScript: `false`, `null`, `0`, `""`, `undefined` та `NaN`. -Підказка: спробуйте перетворити кожне значення на логічне значення. +Підказка: спробуйте перетворити кожне значення у булеве. # --hints-- -`bouncer([7, "ate", "", false, 9])` має повернути `[7, "ate", 9]`. +`bouncer([7, "ate", "", false, 9])` повинен повертати `[7, "ate", 9]`. ```js assert.deepEqual(bouncer([7, 'ate', '', false, 9]), [7, 'ate', 9]); ``` -`bouncer(["a", "b", "c"])` має вертати `["a", "b", "c"]`. +`bouncer(["a", "b", "c"])` повинен повертати `["a", "b", "c"]`. ```js assert.deepEqual(bouncer(['a', 'b', 'c']), ['a', 'b', 'c']); ``` -`bouncer([false, null, 0, NaN, undefined, ""])` має повертати `[]`. +`bouncer([false, null, 0, NaN, undefined, ""])` повинен повертати `[]`. ```js assert.deepEqual(bouncer([false, null, 0, NaN, undefined, '']), []); ``` -`bouncer([null, NaN, 1, 2, undefined])` має повертати `[1, 2]`. +`bouncer([null, NaN, 1, 2, undefined])` повинен повертати `[1, 2]`. ```js assert.deepEqual(bouncer([null, NaN, 1, 2, undefined]), [1, 2]); ``` -You should not mutate `arr`. +Ви не повинні змінювати `arr`. ```js const arr = ['a', false, 0, 'Naomi']; diff --git a/curriculum/challenges/ukrainian/02-javascript-algorithms-and-data-structures/basic-algorithm-scripting/find-the-longest-word-in-a-string.md b/curriculum/challenges/ukrainian/02-javascript-algorithms-and-data-structures/basic-algorithm-scripting/find-the-longest-word-in-a-string.md index 833a3a349b9..4019c5daaf8 100644 --- a/curriculum/challenges/ukrainian/02-javascript-algorithms-and-data-structures/basic-algorithm-scripting/find-the-longest-word-in-a-string.md +++ b/curriculum/challenges/ukrainian/02-javascript-algorithms-and-data-structures/basic-algorithm-scripting/find-the-longest-word-in-a-string.md @@ -1,6 +1,6 @@ --- id: a26cbbe9ad8655a977e1ceb5 -title: Знайдіть найдовше слово в рядку +title: Пошук найдовшого слова в рядку challengeType: 1 forumTopicId: 16015 dashedName: find-the-longest-word-in-a-string @@ -14,7 +14,7 @@ dashedName: find-the-longest-word-in-a-string # --hints-- -`findLongestWordLength("The quick brown fox jumped over the lazy dog")` відповідь має бути числом. +`findLongestWordLength("The quick brown fox jumped over the lazy dog")` повинен повертати число. ```js assert( @@ -24,7 +24,7 @@ assert( ); ``` -`findLongestWordLength("The quick brown fox jumped over the lazy dog")` - результатом має бути `6`. +`findLongestWordLength("The quick brown fox jumped over the lazy dog")` повинен повертати `6`. ```js assert( @@ -32,19 +32,19 @@ assert( ); ``` -`findLongestWordLength("May the force be with you")` - результатом має бути `5`. +`findLongestWordLength("May the force be with you")` повинен повертати `5`. ```js assert(findLongestWordLength('May the force be with you') === 5); ``` -`findLongestWordLength("Google do a barrel roll")` - результатом має бути `6`. +`findLongestWordLength("Google do a barrel roll")` повинен повертати `6`. ```js assert(findLongestWordLength('Google do a barrel roll') === 6); ``` -`findLongestWordLength("What is the average airspeed velocity of an unladen swallow")` - результатом має бути `8`. +`findLongestWordLength("What is the average airspeed velocity of an unladen swallow")` повинен повертати `8`. ```js assert( @@ -54,7 +54,7 @@ assert( ); ``` -`findLongestWordLength("What if we try a super-long word such as otorhinolaryngology")` - результатом має бути `19`. +`findLongestWordLength("What if we try a super-long word such as otorhinolaryngology")` повинен повертати `19`. ```js assert( diff --git a/curriculum/challenges/ukrainian/02-javascript-algorithms-and-data-structures/basic-algorithm-scripting/finders-keepers.md b/curriculum/challenges/ukrainian/02-javascript-algorithms-and-data-structures/basic-algorithm-scripting/finders-keepers.md index edf0b576d8d..725fd877826 100644 --- a/curriculum/challenges/ukrainian/02-javascript-algorithms-and-data-structures/basic-algorithm-scripting/finders-keepers.md +++ b/curriculum/challenges/ukrainian/02-javascript-algorithms-and-data-structures/basic-algorithm-scripting/finders-keepers.md @@ -1,6 +1,6 @@ --- id: a6e40f1041b06c996f7b2406 -title: Що впало, те пропало +title: Раз знайшов, значить моє challengeType: 1 forumTopicId: 16016 dashedName: finders-keepers @@ -8,11 +8,11 @@ dashedName: finders-keepers # --description-- -Створіть функцію, яка переглядає масив `arr` і повертає перший елемент у ньому, який проходить перевірку на "істинність". Це означає, що даний елемент `x` пройшов перевірку на "істинність", якщо `func(x)` є `true`. Якщо жодний елемент не проходить перевірку, відповідь буде `undefined`. +Створіть функцію, яка переглядає масив `arr` та повертає перший елемент у ньому, який проходить тест на «істинність». Це означає, що даний елемент `x` пройшов тест на «істинність», якщо `func(x)` є `true`. Якщо жодний елемент не проходить тест, поверніть `undefined`. # --hints-- -`findElement([1, 3, 5, 8, 9, 10], function(num) { return num % 2 === 0; })` має повертати `8`. +`findElement([1, 3, 5, 8, 9, 10], function(num) { return num % 2 === 0; })` повинен повертати `8`. ```js assert.strictEqual( @@ -23,7 +23,7 @@ assert.strictEqual( ); ``` -`findElement([1, 3, 5, 9], function(num) { return num % 2 === 0; })` має повертати `undefined`. +`findElement([1, 3, 5, 9], function(num) { return num % 2 === 0; })` повинен повертати `undefined`. ```js assert.strictEqual( diff --git a/curriculum/challenges/ukrainian/02-javascript-algorithms-and-data-structures/basic-algorithm-scripting/mutations.md b/curriculum/challenges/ukrainian/02-javascript-algorithms-and-data-structures/basic-algorithm-scripting/mutations.md index 8a7647cc9f1..ad2125201c8 100644 --- a/curriculum/challenges/ukrainian/02-javascript-algorithms-and-data-structures/basic-algorithm-scripting/mutations.md +++ b/curriculum/challenges/ukrainian/02-javascript-algorithms-and-data-structures/basic-algorithm-scripting/mutations.md @@ -8,83 +8,83 @@ dashedName: mutations # --description-- -Повертає `true` якщо рядок у першому елементі масиву містить усі літери рядка у другому елементі масиву. +Поверніть `true`, якщо рядок у першому елементі масиву містить усі літери рядка у другому елементі масиву. -Наприклад, для `["hello", "Hello"]` має повертати `true` тому що всі літери у другому рядку присутні й у першому, незважаючи на їх регістр. +Наприклад, `["hello", "Hello"]` повинен повертати `true`, оскільки всі літери другого рядка наявні у першому, незважаючи на регістр. -Аргументи `["hello", "hey"]` мають повертати `false`, тому що рядок `hello` не містить літеру `y`. +Аргументи `["hello", "hey"]` повинні повертати `false`, оскільки рядок `hello` не містить `y`. -Зрештою, для `["Alien", "line"]` має повертати `true`, тому що всі літери слова`line` присутні у слові `Alien`. +`["Alien", "line"]` повинен повертати `true`, оскільки всі літери в `line` наявні в `Alien`. # --hints-- -`mutation(["hello", "hey"])` має повертати `false`. +`mutation(["hello", "hey"])` повинен повертати `false`. ```js assert(mutation(['hello', 'hey']) === false); ``` -`mutation(["hello", "Hello"])` має повертати `true`. +`mutation(["hello", "Hello"])` повинен повертати `true`. ```js assert(mutation(['hello', 'Hello']) === true); ``` -`mutation(["zyxwvutsrqponmlkjihgfedcba", "qrstu"])` має повертати `true`. +`mutation(["zyxwvutsrqponmlkjihgfedcba", "qrstu"])` повинен повертати `true`. ```js assert(mutation(['zyxwvutsrqponmlkjihgfedcba', 'qrstu']) === true); ``` -`mutation(["Mary", "Army"])` має повертати `true`. +`mutation(["Mary", "Army"])` повинен повертати `true`. ```js assert(mutation(['Mary', 'Army']) === true); ``` -`mutation(["Mary", "Aarmy"])` має повертати `true`. +`mutation(["Mary", "Aarmy"])` повинен повертати `true`. ```js assert(mutation(['Mary', 'Aarmy']) === true); ``` -`mutation(["Alien", "line"])` має повертати`true`. +`mutation(["Alien", "line"])` повинен повертати `true`. ```js assert(mutation(['Alien', 'line']) === true); ``` -`mutation(["floor", "for"])` має повертати `true`. +`mutation(["floor", "for"])` повинен повертати `true`. ```js assert(mutation(['floor', 'for']) === true); ``` -`mutation(["hello", "neo"])` має повертати `false`. +`mutation(["hello", "neo"])` повинен повертати `false`. ```js assert(mutation(['hello', 'neo']) === false); ``` -`mutation(["voodoo", "no"])` має повертати `false`. +`mutation(["voodoo", "no"])` повинен повертати `false`. ```js assert(mutation(['voodoo', 'no']) === false); ``` -`mutation(["ate", "date"])` має повертати `false`. +`mutation(["ate", "date"])` повинен повертати `false`. ```js assert(mutation(['ate', 'date']) === false); ``` -`mutation(["Tiger", "Zebra"])` має повертати `false`. +`mutation(["Tiger", "Zebra"])` повинен повертати `false`. ```js assert(mutation(['Tiger', 'Zebra']) === false); ``` -`mutation(["Noel", "Ole"])` має повертати `true`. +`mutation(["Noel", "Ole"])` повинен повертати `true`. ```js assert(mutation(['Noel', 'Ole']) === true); diff --git a/curriculum/challenges/ukrainian/02-javascript-algorithms-and-data-structures/basic-algorithm-scripting/repeat-a-string-repeat-a-string.md b/curriculum/challenges/ukrainian/02-javascript-algorithms-and-data-structures/basic-algorithm-scripting/repeat-a-string-repeat-a-string.md index f9bed066e72..4fc87bc4c67 100644 --- a/curriculum/challenges/ukrainian/02-javascript-algorithms-and-data-structures/basic-algorithm-scripting/repeat-a-string-repeat-a-string.md +++ b/curriculum/challenges/ukrainian/02-javascript-algorithms-and-data-structures/basic-algorithm-scripting/repeat-a-string-repeat-a-string.md @@ -1,6 +1,6 @@ --- id: afcc8d540bea9ea2669306b6 -title: Повторіть рядок Повторення рядка +title: Повторення рядка Повторення рядка challengeType: 1 forumTopicId: 16041 dashedName: repeat-a-string-repeat-a-string @@ -8,53 +8,53 @@ dashedName: repeat-a-string-repeat-a-string # --description-- -Повторити заданий рядок `str` (перший елемент) `num` разів (другий елемент). Повернути порожній рядок, якщо `num` не є додатнім числом. Для цього завдання *не* використовуйте вбудований `.repeat()` метод. +Повторіть заданий рядок `str` (перший аргумент) `num` разів (другий аргумент). Поверніть порожній рядок, якщо `num` не є додатним числом. *Не* використовуйте вбудований метод `.repeat()` для цього завдання. # --hints-- -`repeatStringNumTimes("*", 3)` має повернути рядок `***`. +`repeatStringNumTimes("*", 3)` повинен повертати рядок `***`. ```js assert(repeatStringNumTimes('*', 3) === '***'); ``` -`repeatStringNumTimes("abc", 3)` має повернути рядок `abcabcabc`. +`repeatStringNumTimes("abc", 3)` повинен повертати рядок `abcabcabc`. ```js assert(repeatStringNumTimes('abc', 3) === 'abcabcabc'); ``` -`repeatStringNumTimes("abc", 4)` має повернути рядок `abcabcabcabc`. +`repeatStringNumTimes("abc", 4)` повинен повертати рядок `abcabcabcabc`. ```js assert(repeatStringNumTimes('abc', 4) === 'abcabcabcabc'); ``` -`repeatStringNumTimes("abc", 1)` має повернути рядок `abc`. +`repeatStringNumTimes("abc", 1)` повинен повертати рядок `abc`. ```js assert(repeatStringNumTimes('abc', 1) === 'abc'); ``` -`repeatStringNumTimes("*", 8)` має повернути рядок `********`. +`repeatStringNumTimes("*", 8)` повинен повертати рядок `********`. ```js assert(repeatStringNumTimes('*', 8) === '********'); ``` -`repeatStringNumTimes("abc", -2)` має повернути порожній рядок (`""`). +`repeatStringNumTimes("abc", -2)` повинен повертати порожній рядок (`""`). ```js assert(repeatStringNumTimes('abc', -2) === ''); ``` -Вбудований метод `repeat()` не слід використовувати. +Не використовуйте вбудований метод `repeat()`. ```js assert(!/\.repeat/g.test(code)); ``` -`repeatStringNumTimes("abc", 0)` має повернути рядок `""`. +`repeatStringNumTimes("abc", 0)` повинен повертати `""`. ```js assert(repeatStringNumTimes('abc', 0) === ''); diff --git a/curriculum/challenges/ukrainian/02-javascript-algorithms-and-data-structures/basic-algorithm-scripting/return-largest-numbers-in-arrays.md b/curriculum/challenges/ukrainian/02-javascript-algorithms-and-data-structures/basic-algorithm-scripting/return-largest-numbers-in-arrays.md index 18ddd5e6f71..c7d5ae2b746 100644 --- a/curriculum/challenges/ukrainian/02-javascript-algorithms-and-data-structures/basic-algorithm-scripting/return-largest-numbers-in-arrays.md +++ b/curriculum/challenges/ukrainian/02-javascript-algorithms-and-data-structures/basic-algorithm-scripting/return-largest-numbers-in-arrays.md @@ -1,6 +1,6 @@ --- id: a789b3483989747d63b0e427 -title: Знайдіть найбільші числа в масивах +title: Пошук найбільших чисел у масивах challengeType: 1 forumTopicId: 16042 dashedName: return-largest-numbers-in-arrays @@ -8,13 +8,13 @@ dashedName: return-largest-numbers-in-arrays # --description-- -Повертає масив, що складається з найбільшого числа з кожного під-масиву. Для простоти, даний масив буде містити рівно 4 під-масиви. +Поверніть масив, який містить найбільше число з кожного наданого підмасиву. Для спрощення: наданий масив міститиме 4 підмасиви. -Пам'ятайте, ви можете перебирати масив за допомогою простого циклу, і мати доступ до кожного елемента через синтаксис масиву `arr[i]`. +Пам'ятайте, ви можете перебігтись по масиву за допомогою циклу for та мати доступ до кожного елемента завдяки синтаксису масиву `arr[i]`. # --hints-- -`largestOfFour([[4, 5, 1, 3], [13, 27, 18, 26], [32, 35, 37, 39], [1000, 1001, 857, 1]])` повинен повернути масив рядка. +`largestOfFour([[4, 5, 1, 3], [13, 27, 18, 26], [32, 35, 37, 39], [1000, 1001, 857, 1]])` повинен повертати масив. ```js assert( @@ -27,7 +27,7 @@ assert( ); ``` -`largestOfFour([[13, 27, 18, 26], [4, 5, 1, 3], [32, 35, 37, 39], [1000, 1001, 857, 1]])` повинен повернути `[27, 5, 39, 1001]`. +`largestOfFour([[13, 27, 18, 26], [4, 5, 1, 3], [32, 35, 37, 39], [1000, 1001, 857, 1]])` повинен повертати `[27, 5, 39, 1001]`. ```js assert.deepEqual( @@ -41,7 +41,7 @@ assert.deepEqual( ); ``` -`largestOfFour([[4, 9, 1, 3], [13, 35, 18, 26], [32, 35, 97, 39], [1000000, 1001, 857, 1]])` повинен повернути`[9, 35, 97, 1000000]`. +`largestOfFour([[4, 9, 1, 3], [13, 35, 18, 26], [32, 35, 97, 39], [1000000, 1001, 857, 1]])` повинен повертати `[9, 35, 97, 1000000]`. ```js assert.deepEqual( @@ -55,7 +55,7 @@ assert.deepEqual( ); ``` -`largestOfFour([[17, 23, 25, 12], [25, 7, 34, 48], [4, -10, 18, 21], [-72, -3, -17, -10]])` повинен повернути `[25, 48, 21, -3]`. +`largestOfFour([[17, 23, 25, 12], [25, 7, 34, 48], [4, -10, 18, 21], [-72, -3, -17, -10]])` повинен повертати `[25, 48, 21, -3]`. ```js assert.deepEqual( diff --git a/curriculum/challenges/ukrainian/02-javascript-algorithms-and-data-structures/basic-algorithm-scripting/reverse-a-string.md b/curriculum/challenges/ukrainian/02-javascript-algorithms-and-data-structures/basic-algorithm-scripting/reverse-a-string.md index 53ac0d49116..78623d3c89b 100644 --- a/curriculum/challenges/ukrainian/02-javascript-algorithms-and-data-structures/basic-algorithm-scripting/reverse-a-string.md +++ b/curriculum/challenges/ukrainian/02-javascript-algorithms-and-data-structures/basic-algorithm-scripting/reverse-a-string.md @@ -8,31 +8,31 @@ dashedName: reverse-a-string # --description-- -Reverse the provided string and return the reversed string. +Переверніть наданий рядок та поверніть рядок у зворотньому порядку. -For example, `"hello"` should become `"olleh"`. +Наприклад, `"hello"` повинен стати `"olleh"`. # --hints-- -`reverseString("hello")` should return a string. +`reverseString("hello")` повинен повертати рядок. ```js assert(typeof reverseString('hello') === 'string'); ``` -`reverseString("hello")` should return the string `olleh`. +`reverseString("hello")` повинен повертати рядок `olleh`. ```js assert(reverseString('hello') === 'olleh'); ``` -`reverseString("Howdy")` should return the string `ydwoH`. +`reverseString("Howdy")` повинен повертати рядок `ydwoH`. ```js assert(reverseString('Howdy') === 'ydwoH'); ``` -`reverseString("Greetings from Earth")` should return the string `htraE morf sgniteerG`. +`reverseString("Greetings from Earth")` повинен повертати рядок `htraE morf sgniteerG`. ```js assert(reverseString('Greetings from Earth') === 'htraE morf sgniteerG'); diff --git a/curriculum/challenges/ukrainian/02-javascript-algorithms-and-data-structures/basic-algorithm-scripting/slice-and-splice.md b/curriculum/challenges/ukrainian/02-javascript-algorithms-and-data-structures/basic-algorithm-scripting/slice-and-splice.md index 0a2fea6e2fc..9219369aca9 100644 --- a/curriculum/challenges/ukrainian/02-javascript-algorithms-and-data-structures/basic-algorithm-scripting/slice-and-splice.md +++ b/curriculum/challenges/ukrainian/02-javascript-algorithms-and-data-structures/basic-algorithm-scripting/slice-and-splice.md @@ -1,6 +1,6 @@ --- id: 579e2a2c335b9d72dd32e05c -title: Метод Slice та Splice. Метод Slice () копіює задану частину масиву і повертає цю скопійовану частина у вигляді нового масиву. Вихідний масив при цьому не змінюється. Метод Splice () додає і видаляє елементи з масиву, змінюючи його +title: Slice та Splice challengeType: 1 forumTopicId: 301148 dashedName: slice-and-splice @@ -8,29 +8,29 @@ dashedName: slice-and-splice # --description-- -Вам дано два масиви та індекс. +Вам надано два масиви та індекс. -Скопіюйте кожний елемент по порядку з першого масиву у другий. +Скопіюйте кожний елемент з першого масиву у другий за порядком. -Вставляйте елементи індексу `n` до другого масиву. +Розпочніть вставляти елементи з індексу `n` другого масиву. Поверніться до отриманого масиву. Вхідні масиви повинні залишатись незмінними після запуску функції. # --hints-- -`frankenSplice([1, 2, 3], [4, 5], 1)` має повертати `[4, 1, 2, 3, 5]`. +`frankenSplice([1, 2, 3], [4, 5], 1)` повинен повертати `[4, 1, 2, 3, 5]`. ```js assert.deepEqual(frankenSplice([1, 2, 3], [4, 5], 1), [4, 1, 2, 3, 5]); ``` -`frankenSplice([1, 2], ["a", "b"], 1)` має повертати `["a", 1, 2, "b"]`. +`frankenSplice([1, 2], ["a", "b"], 1)` повинен повертати `["a", 1, 2, "b"]`. ```js assert.deepEqual(frankenSplice(testArr1, testArr2, 1), ['a', 1, 2, 'b']); ``` -`frankenSplice(["claw", "tentacle"], ["head", "shoulders", "knees", "toes"], 2)` має повертати `["head", "shoulders", "claw", "tentacle", "knees", "toes"]`. +`frankenSplice(["claw", "tentacle"], ["head", "shoulders", "knees", "toes"], 2)` повинен повертати `["head", "shoulders", "claw", "tentacle", "knees", "toes"]`. ```js assert.deepEqual( @@ -43,20 +43,20 @@ assert.deepEqual( ); ``` -Додавайте усі елементи з першого масиву до другого в початковій послідовності. `frankenSplice([1, 2, 3, 4], [], 0)` має повертати `[1, 2, 3, 4]`. +Всі елементи з першого масиву повинні бути доданими до другого масиву за початковим порядком. `frankenSplice([1, 2, 3, 4], [], 0)` повинен повертати `[1, 2, 3, 4]`. ```js assert.deepEqual(frankenSplice([1, 2, 3, 4], [], 0), [1, 2, 3, 4]); ``` -Перший масив залишається незмінним після запуску функції. +Перший масив повинен залишатись незмінним після запуску функції. ```js frankenSplice(testArr1, testArr2, 1); assert.deepEqual(testArr1, [1, 2]); ``` -Другий масив залишається незмінним після запуску функції. +Другий масив повинен залишатись незмінним після запуску функції. ```js frankenSplice(testArr1, testArr2, 1); diff --git a/curriculum/challenges/ukrainian/02-javascript-algorithms-and-data-structures/basic-algorithm-scripting/title-case-a-sentence.md b/curriculum/challenges/ukrainian/02-javascript-algorithms-and-data-structures/basic-algorithm-scripting/title-case-a-sentence.md index 28b63dec7d2..b46898df0f3 100644 --- a/curriculum/challenges/ukrainian/02-javascript-algorithms-and-data-structures/basic-algorithm-scripting/title-case-a-sentence.md +++ b/curriculum/challenges/ukrainian/02-javascript-algorithms-and-data-structures/basic-algorithm-scripting/title-case-a-sentence.md @@ -1,6 +1,6 @@ --- id: ab6137d4e35944e21037b769 -title: Алгоритм Великі літери у реченнях +title: Слова З Великої Літери challengeType: 1 forumTopicId: 16088 dashedName: title-case-a-sentence @@ -8,31 +8,31 @@ dashedName: title-case-a-sentence # --description-- -Стрічка повинна починатись з великої літери в кожному слові. Переконайтесь, що решта букв написана у нижньому регістрі. +Поверніть заданий рядок, де кожне слово починається з великої літери. Переконайтеся, що інші літери написані в нижньому регістрі. -Для виконання завдання, вам також необхідно писати з великої літери сполучення слів `the` та `of`. +Сполучні слова, як-от `the` та `of`, також потрібно писати з великої літери. # --hints-- -`titleCase("I'm a little tea pot")` має повернути рядок. +`titleCase("I'm a little tea pot")` повинен повертати рядок. ```js assert(typeof titleCase("I'm a little tea pot") === 'string'); ``` -`titleCase("I'm a little tea pot")` має повернути рядок `I'm A Little Tea Pot`. +`titleCase("I'm a little tea pot")` повинен повертати рядок `I'm A Little Tea Pot`. ```js assert(titleCase("I'm a little tea pot") === "I'm A Little Tea Pot"); ``` -`titleCase("sHoRt AnD sToUt")` має повертати рядок `Short And Stout`. +`titleCase("sHoRt AnD sToUt")` повинен повертати рядок `Short And Stout`. ```js assert(titleCase('sHoRt AnD sToUt') === 'Short And Stout'); ``` -`titleCase("HERE IS MY HANDLE HERE IS MY SPOUT")` має повернути рядок `Here Is My Handle Here Is My Spout`. +`titleCase("HERE IS MY HANDLE HERE IS MY SPOUT")` повинен повертати рядок `Here Is My Handle Here Is My Spout`. ```js assert( diff --git a/curriculum/challenges/ukrainian/02-javascript-algorithms-and-data-structures/basic-algorithm-scripting/truncate-a-string.md b/curriculum/challenges/ukrainian/02-javascript-algorithms-and-data-structures/basic-algorithm-scripting/truncate-a-string.md index 37c3e27828f..65ea086ea54 100644 --- a/curriculum/challenges/ukrainian/02-javascript-algorithms-and-data-structures/basic-algorithm-scripting/truncate-a-string.md +++ b/curriculum/challenges/ukrainian/02-javascript-algorithms-and-data-structures/basic-algorithm-scripting/truncate-a-string.md @@ -1,6 +1,6 @@ --- id: ac6993d51946422351508a41 -title: Алгоритм Truncate a String (Скорочення рядка) +title: Скорочення рядка challengeType: 1 forumTopicId: 16089 dashedName: truncate-a-string @@ -8,11 +8,11 @@ dashedName: truncate-a-string # --description-- -Скоротіть рядок якщо перший аргумент довший ніж задана максимальна довжина рядка (другий аргумент). Перетворіть скорочений рядок на `...`. +Скоротіть рядок (перший аргумент), якщо він довший за максимальну довжину рядка (другий аргумент). Поверніть скорочений рядок із закінченням `...`. # --hints-- -`truncateString("A-tisket a-tasket A green and yellow basket", 8)` має повернути рядок `A-tisket...`. +`truncateString("A-tisket a-tasket A green and yellow basket", 8)` повинен повертати рядок `A-tisket...`. ```js assert( @@ -21,7 +21,7 @@ assert( ); ``` -`truncateString("Peter Piper picked a peck of pickled peppers", 11)` має повернути рядок `Peter Piper...`. +`truncateString("Peter Piper picked a peck of pickled peppers", 11)` повинен повертати рядок `Peter Piper...`. ```js assert( @@ -30,7 +30,7 @@ assert( ); ``` -`truncateString("A-tisket a-tasket A green and yellow basket", "A-tisket a-tasket A green and yellow basket".length)` має повернути рядок `A-tisket a-tasket A green and yellow basket`. +`truncateString("A-tisket a-tasket A green and yellow basket", "A-tisket a-tasket A green and yellow basket".length)` повинен повертати рядок `A-tisket a-tasket A green and yellow basket`. ```js assert( @@ -41,7 +41,7 @@ assert( ); ``` -`truncateString("A-tisket a-tasket A green and yellow basket", "A-tisket a-tasket A green and yellow basket".length + 2)` має повернути рядок `A-tisket a-tasket A green and yellow basket`. +`truncateString("A-tisket a-tasket A green and yellow basket", "A-tisket a-tasket A green and yellow basket".length + 2)` повинен повертати рядок `A-tisket a-tasket A green and yellow basket`. ```js assert( @@ -52,13 +52,13 @@ assert( ); ``` -`truncateString("A-", 1)` має повернути рядок `A...`. +`truncateString("A-", 1)` повинен повертати рядок `A...`. ```js assert(truncateString('A-', 1) === 'A...'); ``` -`truncateString("Absolutely Longer", 2)` має повернути рядок `Ab...`. +`truncateString("Absolutely Longer", 2)` повинен повертати рядок `Ab...`. ```js assert(truncateString('Absolutely Longer', 2) === 'Ab...'); diff --git a/curriculum/challenges/ukrainian/02-javascript-algorithms-and-data-structures/basic-algorithm-scripting/where-do-i-belong.md b/curriculum/challenges/ukrainian/02-javascript-algorithms-and-data-structures/basic-algorithm-scripting/where-do-i-belong.md index d1e2a916d34..1579e0db2c3 100644 --- a/curriculum/challenges/ukrainian/02-javascript-algorithms-and-data-structures/basic-algorithm-scripting/where-do-i-belong.md +++ b/curriculum/challenges/ukrainian/02-javascript-algorithms-and-data-structures/basic-algorithm-scripting/where-do-i-belong.md @@ -1,6 +1,6 @@ --- id: a24c1a4622e3c05097f71d67 -title: Куди я належу (Де моє місце) +title: Куди я належу challengeType: 1 forumTopicId: 16094 dashedName: where-do-i-belong @@ -8,105 +8,105 @@ dashedName: where-do-i-belong # --description-- -Поверніть найнижчий індекс, при якому значення (другий аргумент) слід вставити в масив (перший аргумент), після того, як він був відсортований. Отримане значення має бути числом. +Поверніть найменший індекс, при якому потрібно вставити значення (другий аргумент) в масив (перший аргумент), після того, як він був відсортований. Поверненим значенням повинне бути число. -Наприклад, `getIndexToIns([1,2,3,4], 1.5)`має дати відповідь `1`, тому що вона більша ніж `1` (індекс 0), але менша ніж `2` (індекс 1). +Наприклад, `getIndexToIns([1,2,3,4], 1.5)` повинен повертати `1`, тому що він більший за `1` (індекс 0), але менший за `2` (індекс 1). -Аналогічно, `getIndexToIns([20,3,5], 19)` має дати відповідь `2` тому що, як тільки масив буде відсортований, він виглядатиме як `[3,5,20]`, а `19` менше за `20` (індекс 2) та більше, ніж `5` (індекс 1). +Аналогічно, `getIndexToIns([20,3,5], 19)` повинен повертати `2`, оскільки після відсортування масиву він виглядатиме як `[3,5,20]`, а `19` менше за `20` (індекс 2) та більше за `5` (індекс 1). # --hints-- -`getIndexToIns([10, 20, 30, 40, 50], 35)` має повернути `3`. +`getIndexToIns([10, 20, 30, 40, 50], 35)` повинен повертати `3`. ```js assert(getIndexToIns([10, 20, 30, 40, 50], 35) === 3); ``` -`getIndexToIns([10, 20, 30, 40, 50], 35)` має дати відповідь числом. +`getIndexToIns([10, 20, 30, 40, 50], 35)` повинен повертати число. ```js assert(typeof getIndexToIns([10, 20, 30, 40, 50], 35) === 'number'); ``` -`getIndexToIns([10, 20, 30, 40, 50], 30)` має дати відповідь `2`. +`getIndexToIns([10, 20, 30, 40, 50], 30)` повинен повертати `2`. ```js assert(getIndexToIns([10, 20, 30, 40, 50], 30) === 2); ``` -`getIndexToIns([10, 20, 30, 40, 50], 30)` має дати відповідь числом. +`getIndexToIns([10, 20, 30, 40, 50], 30)` повинен повертати число. ```js assert(typeof getIndexToIns([10, 20, 30, 40, 50], 30) === 'number'); ``` -`getIndexToIns([40, 60], 50)` має дати відповідь `1`. +`getIndexToIns([40, 60], 50)` повинен повертати `1`. ```js assert(getIndexToIns([40, 60], 50) === 1); ``` -`getIndexToIns([40, 60], 50)` має дати відповідь числом. +`getIndexToIns([40, 60], 50)` повинен повертати число. ```js assert(typeof getIndexToIns([40, 60], 50) === 'number'); ``` -`getIndexToIns([3, 10, 5], 3)` має дати відповідь `0`. +`getIndexToIns([3, 10, 5], 3)` повинен повертати `0`. ```js assert(getIndexToIns([3, 10, 5], 3) === 0); ``` -`getIndexToIns([3, 10, 5], 3)` має дати відповідь числом. +`getIndexToIns([3, 10, 5], 3)` повинен повертати число. ```js assert(typeof getIndexToIns([3, 10, 5], 3) === 'number'); ``` -`getIndexToIns([5, 3, 20, 3], 5)` має дати відповідь `2`. +`getIndexToIns([5, 3, 20, 3], 5)` повинен повертати `2`. ```js assert(getIndexToIns([5, 3, 20, 3], 5) === 2); ``` -`getIndexToIns([5, 3, 20, 3], 5)` має дати відповідь числом. +`getIndexToIns([5, 3, 20, 3], 5)` повинен повертати число. ```js assert(typeof getIndexToIns([5, 3, 20, 3], 5) === 'number'); ``` -`getIndexToIns([2, 20, 10], 19)` має дати відповідь `2`. +`getIndexToIns([2, 20, 10], 19)` повинен повертати `2`. ```js assert(getIndexToIns([2, 20, 10], 19) === 2); ``` -`getIndexToIns([2, 20, 10], 19)` має дати відповідь числом. +`getIndexToIns([2, 20, 10], 19)` повинен повертати число. ```js assert(typeof getIndexToIns([2, 20, 10], 19) === 'number'); ``` -`getIndexToIns([2, 5, 10], 15)` має дати відповідь `3`. +`getIndexToIns([2, 5, 10], 15)` повинен повертати `3`. ```js assert(getIndexToIns([2, 5, 10], 15) === 3); ``` -`getIndexToIns([2, 5, 10], 15)` має дати відповідь числом. +`getIndexToIns([2, 5, 10], 15)` повинен повертати число. ```js assert(typeof getIndexToIns([2, 5, 10], 15) === 'number'); ``` -`getIndexToIns([], 1)` має дати відповідь `0`. +`getIndexToIns([], 1)` повинен повертати `0`. ```js assert(getIndexToIns([], 1) === 0); ``` -`getIndexToIns([], 1)` має дати відповідь числом. +`getIndexToIns([], 1)` повинен повертати число. ```js assert(typeof getIndexToIns([], 1) === 'number'); diff --git a/curriculum/challenges/ukrainian/02-javascript-algorithms-and-data-structures/intermediate-algorithm-scripting/arguments-optional.md b/curriculum/challenges/ukrainian/02-javascript-algorithms-and-data-structures/intermediate-algorithm-scripting/arguments-optional.md index 87e21dc3b9b..a987058e074 100644 --- a/curriculum/challenges/ukrainian/02-javascript-algorithms-and-data-structures/intermediate-algorithm-scripting/arguments-optional.md +++ b/curriculum/challenges/ukrainian/02-javascript-algorithms-and-data-structures/intermediate-algorithm-scripting/arguments-optional.md @@ -1,6 +1,6 @@ --- id: a97fd23d9b809dac9921074f -title: Необов'язкові аргументи +title: Додаткові аргументи challengeType: 1 forumTopicId: 14271 dashedName: arguments-optional @@ -8,53 +8,53 @@ dashedName: arguments-optional # --description-- -Створіть функцію, яка додає два аргументи. Якщо вказано лише один аргумент, то повертається функція, яка приймає один аргумент і повертає суму. +Створіть функцію, яка додає два аргументи. Якщо вказано лише один аргумент, то поверніть функцію, яка очікує один аргумент і повертає суму. -Наприклад, `addTogether(2, 3)` повинен повертатися як `5`, а `addTogether(2)` повинен повертати функцію. +Наприклад, `addTogether(2, 3)` повинен повертати `5`, а `addTogether(2)` повинен повертати функцію. -Якщо ви викличете цю функцію, повернуту з одним аргументом, ви отримаєте суму: +Якщо викликати функцію, повернуту з одним аргументом, то повернеться сума: ```js var sumTwoAnd = addTogether(2); ``` -`sumTwoAnd(3)` повертається `5`. +`sumTwoAnd(3)` повертає `5`. -Якщо один із аргументів не є дійсним числом, повертається невизначено. +Якщо жоден з аргументів не є дійсним числом, поверніть undefined. # --hints-- -`addTogether(2, 3)` повинен повертатися як 5. +`addTogether(2, 3)` повинен повертати 5. ```js assert.deepEqual(addTogether(2, 3), 5); ``` -`addTogether(23, 30)` повинен повертатися як 53. +`addTogether(23, 30)` повинен повертати 53. ```js assert.deepEqual(addTogether(23, 30), 53); ``` -`addTogether(5)(7)` повинен повертатися як 12. +`addTogether(5)(7)` повинен повертати 12. ```js assert.deepEqual(addTogether(5)(7), 12); ``` -`addTogether("https://www.youtube.com/watch?v=dQw4w9WgXcQ")` повинен повертатися як `undefined`. +`addTogether("https://www.youtube.com/watch?v=dQw4w9WgXcQ")` повинен повертати `undefined`. ```js assert.isUndefined(addTogether('https://www.youtube.com/watch?v=dQw4w9WgXcQ')); ``` -`addTogether(2, "3")` повинен повертатися як `undefined`. +`addTogether(2, "3")` повинен повертати `undefined`. ```js assert.isUndefined(addTogether(2, '3')); ``` -`addTogether(2)([3])` повинен повертатися як `undefined`. +`addTogether(2)([3])` повинен повертати `undefined`. ```js assert.isUndefined(addTogether(2)([3])); diff --git a/curriculum/challenges/ukrainian/02-javascript-algorithms-and-data-structures/intermediate-algorithm-scripting/binary-agents.md b/curriculum/challenges/ukrainian/02-javascript-algorithms-and-data-structures/intermediate-algorithm-scripting/binary-agents.md index ccab32e7473..acd1fb8a0a0 100644 --- a/curriculum/challenges/ukrainian/02-javascript-algorithms-and-data-structures/intermediate-algorithm-scripting/binary-agents.md +++ b/curriculum/challenges/ukrainian/02-javascript-algorithms-and-data-structures/intermediate-algorithm-scripting/binary-agents.md @@ -8,7 +8,7 @@ dashedName: binary-agents # --description-- -Повернути речення, перекладене англійською мовою даного бінарного рядка. +Поверніть переданий бінарний рядок, перекладений англійською мовою. Бінарний рядок буде розділений пробілом. diff --git a/curriculum/challenges/ukrainian/02-javascript-algorithms-and-data-structures/intermediate-algorithm-scripting/convert-html-entities.md b/curriculum/challenges/ukrainian/02-javascript-algorithms-and-data-structures/intermediate-algorithm-scripting/convert-html-entities.md index b546b62b0d8..e37583c15d6 100644 --- a/curriculum/challenges/ukrainian/02-javascript-algorithms-and-data-structures/intermediate-algorithm-scripting/convert-html-entities.md +++ b/curriculum/challenges/ukrainian/02-javascript-algorithms-and-data-structures/intermediate-algorithm-scripting/convert-html-entities.md @@ -1,6 +1,6 @@ --- id: a6b0bb188d873cb2c8729495 -title: Перетворення позначення символів HTML +title: Перетворення символів для HTML challengeType: 1 forumTopicId: 16007 dashedName: convert-html-entities @@ -8,7 +8,7 @@ dashedName: convert-html-entities # --description-- -Перетворити символи `&`, `<`, `>`, `"` (подвійні лапки), і `'` (апостроф), в рядок з відповідним позначенням символів HTML. +Перетворіть символи `&`, `<`, `>`, `"` (подвійні лапки) та `'` (апостроф) у відповідне позначення символів для HTML. # --hints-- diff --git a/curriculum/challenges/ukrainian/02-javascript-algorithms-and-data-structures/intermediate-algorithm-scripting/diff-two-arrays.md b/curriculum/challenges/ukrainian/02-javascript-algorithms-and-data-structures/intermediate-algorithm-scripting/diff-two-arrays.md index 9e0bc174233..55c5a2f92a0 100644 --- a/curriculum/challenges/ukrainian/02-javascript-algorithms-and-data-structures/intermediate-algorithm-scripting/diff-two-arrays.md +++ b/curriculum/challenges/ukrainian/02-javascript-algorithms-and-data-structures/intermediate-algorithm-scripting/diff-two-arrays.md @@ -8,19 +8,19 @@ dashedName: diff-two-arrays # --description-- -Порівняти два масиви і повернути новий масив з елементами, знайденими лише в одному з двох зазначених масивів, але не в обох. Іншими словами, повернути симетричну різницю двох масивів. +Порівняйте два масиви і поверніть новий масив з елементами, знайденими лише в одному з двох наданих масивів. Іншими словами, поверніть симетричну різницю двох масивів. -**Примітка:** Ви можете повернути масив з його елементами в будь-якому порядку. +**Примітка:** ви можете повернути масив з його елементами в будь-якому порядку. # --hints-- -`diffArray([1, 2, 3, 5], [1, 2, 3, 4, 5])` потрібно повернути масив. +`diffArray([1, 2, 3, 5], [1, 2, 3, 4, 5])` повинен повертати масив. ```js assert(typeof diffArray([1, 2, 3, 5], [1, 2, 3, 4, 5]) === 'object'); ``` -`["diorite", "andesite", "grass", "dirt", "pink wool", "dead shrub"], ["diorite", "andesite", "grass", "dirt", "dead shrub"]` потрібно повернути `["pink wool"]`. +`["diorite", "andesite", "grass", "dirt", "pink wool", "dead shrub"], ["diorite", "andesite", "grass", "dirt", "dead shrub"]` повинен повертати `["pink wool"]`. ```js assert.sameMembers( @@ -32,7 +32,7 @@ assert.sameMembers( ); ``` -`["diorite", "andesite", "grass", "dirt", "pink wool", "dead shrub"], ["diorite", "andesite", "grass", "dirt", "dead shrub"]` потрібно повернути масив з одним елементом. +`["diorite", "andesite", "grass", "dirt", "pink wool", "dead shrub"], ["diorite", "andesite", "grass", "dirt", "dead shrub"]` повинен повертати масив з одним елементом. ```js assert( @@ -43,7 +43,7 @@ assert( ); ``` -`["andesite", "grass", "dirt", "pink wool", "dead shrub"], ["diorite", "andesite", "grass", "dirt", "dead shrub"]` потрібно повернути `["diorite", "pink wool"]`. +`["andesite", "grass", "dirt", "pink wool", "dead shrub"], ["diorite", "andesite", "grass", "dirt", "dead shrub"]` повинен повертати `["diorite", "pink wool"]`. ```js assert.sameMembers( @@ -55,7 +55,7 @@ assert.sameMembers( ); ``` -`["andesite", "grass", "dirt", "pink wool", "dead shrub"], ["diorite", "andesite", "grass", "dirt", "dead shrub"]` потрібно повернути масив з двома елементами. +`["andesite", "grass", "dirt", "pink wool", "dead shrub"], ["diorite", "andesite", "grass", "dirt", "dead shrub"]` повинен повертати масив з двома елементами. ```js assert( @@ -66,7 +66,7 @@ assert( ); ``` -`["andesite", "grass", "dirt", "dead shrub"], ["andesite", "grass", "dirt", "dead shrub"]` потрібно повернути `[]`. +`["andesite", "grass", "dirt", "dead shrub"], ["andesite", "grass", "dirt", "dead shrub"]` повинен повертати `[]`. ```js assert.sameMembers( @@ -78,7 +78,7 @@ assert.sameMembers( ); ``` -`["andesite", "grass", "dirt", "dead shrub"], ["andesite", "grass", "dirt", "dead shrub"]` потрібно повернути пустий масив. +`["andesite", "grass", "dirt", "dead shrub"], ["andesite", "grass", "dirt", "dead shrub"]` повинен повертати порожній масив. ```js assert( @@ -89,19 +89,19 @@ assert( ); ``` -`[1, 2, 3, 5], [1, 2, 3, 4, 5]` потрібно повернути `[4]`. +`[1, 2, 3, 5], [1, 2, 3, 4, 5]` повинен повертати `[4]`. ```js assert.sameMembers(diffArray([1, 2, 3, 5], [1, 2, 3, 4, 5]), [4]); ``` -`[1, 2, 3, 5], [1, 2, 3, 4, 5]` потрібно повернути масив з одним елементом. +`[1, 2, 3, 5], [1, 2, 3, 4, 5]` повинен повертати масив з одним елементом. ```js assert(diffArray([1, 2, 3, 5], [1, 2, 3, 4, 5]).length === 1); ``` -`[1, "calf", 3, "piglet"], [1, "calf", 3, 4]` потрібно повернути `["piglet", 4]`. +`[1, "calf", 3, "piglet"], [1, "calf", 3, 4]` повинен повертати `["piglet", 4]`. ```js assert.sameMembers(diffArray([1, 'calf', 3, 'piglet'], [1, 'calf', 3, 4]), [ @@ -110,13 +110,13 @@ assert.sameMembers(diffArray([1, 'calf', 3, 'piglet'], [1, 'calf', 3, 4]), [ ]); ``` -`[1, "calf", 3, "piglet"], [1, "calf", 3, 4]` потрібно повернути масив з двома елементами. +`[1, "calf", 3, "piglet"], [1, "calf", 3, 4]` повинен повертати масив з двома елементами. ```js assert(diffArray([1, 'calf', 3, 'piglet'], [1, 'calf', 3, 4]).length === 2); ``` -`[], ["snuffleupagus", "cookie monster", "elmo"]` потрібно повернути `["snuffleupagus", "cookie monster", "elmo"]`. +`[], ["snuffleupagus", "cookie monster", "elmo"]` повинен повертати `["snuffleupagus", "cookie monster", "elmo"]`. ```js assert.sameMembers(diffArray([], ['snuffleupagus', 'cookie monster', 'elmo']), [ @@ -126,13 +126,13 @@ assert.sameMembers(diffArray([], ['snuffleupagus', 'cookie monster', 'elmo']), [ ]); ``` -`[], ["snuffleupagus", "cookie monster", "elmo"]` потрібно повернути масив з трьома елементами. +`[], ["snuffleupagus", "cookie monster", "elmo"]` повинен повертати масив з трьома елементами. ```js assert(diffArray([], ['snuffleupagus', 'cookie monster', 'elmo']).length === 3); ``` -`[1, "calf", 3, "piglet"], [7, "filly"]` потрібно повернути `[1, "calf", 3, "piglet", 7, "filly"]`. +`[1, "calf", 3, "piglet"], [7, "filly"]` повинен повертати `[1, "calf", 3, "piglet", 7, "filly"]`. ```js assert.sameMembers(diffArray([1, 'calf', 3, 'piglet'], [7, 'filly']), [ @@ -145,7 +145,7 @@ assert.sameMembers(diffArray([1, 'calf', 3, 'piglet'], [7, 'filly']), [ ]); ``` -`[1, "calf", 3, "piglet"], [7, "filly"]` потрібно повернути масив з шістьма елементами. +`[1, "calf", 3, "piglet"], [7, "filly"]` повинен повертати масив з шістьма елементами. ```js assert(diffArray([1, 'calf', 3, 'piglet'], [7, 'filly']).length === 6); diff --git a/curriculum/challenges/ukrainian/02-javascript-algorithms-and-data-structures/intermediate-algorithm-scripting/dna-pairing.md b/curriculum/challenges/ukrainian/02-javascript-algorithms-and-data-structures/intermediate-algorithm-scripting/dna-pairing.md index 3ac24484a7c..68cfac76173 100644 --- a/curriculum/challenges/ukrainian/02-javascript-algorithms-and-data-structures/intermediate-algorithm-scripting/dna-pairing.md +++ b/curriculum/challenges/ukrainian/02-javascript-algorithms-and-data-structures/intermediate-algorithm-scripting/dna-pairing.md @@ -8,13 +8,13 @@ dashedName: dna-pairing # --description-- -Пари ланцюгів ДНК складаються з пар нуклеотидних основ. Базові пари позначаються символами AT та CG, які утворюють будівельні блоки подвійної спіралі ДНК. +Пари ланцюжків ДНК складаються з нуклеотидів. Базові пари позначаються символами AT та CG, які утворюють будівельні блоки подвійної спіралі ДНК. -В ланцюжку ДНК бракує парного елементу. Напишіть функцію для пошуку відсутніх базових пар для наданого ланцюга ДНК. Для кожного символу в наданому рядку знайдіть символ базової пари. Поверніть результати як 2d-масив. +В ланцюжку ДНК відсутній один елемент. Напишіть функцію для пошуку відсутніх базових пар для наданого ланцюжка ДНК. Знайдіть відповідний символ для кожного символу в наданому рядку. Поверніть результати як 2d-масив. -Наприклад, при введенні `GCG`, повернути `[["G", "C"], ["C","G"], ["G", "C"]]` +Наприклад, при введенні `GCG` поверніть `[["G", "C"], ["C","G"], ["G", "C"]]` -Символ і його пара об'єднуються в масив, а всі масиви згруповані в один інкапсульований масив. +Символ та його пара об'єднуються в масив, і всі масиви згруповані в один інкапсульований масив. # --hints-- diff --git a/curriculum/challenges/ukrainian/02-javascript-algorithms-and-data-structures/intermediate-algorithm-scripting/drop-it.md b/curriculum/challenges/ukrainian/02-javascript-algorithms-and-data-structures/intermediate-algorithm-scripting/drop-it.md index 9eaa18466d9..e1323b524ac 100644 --- a/curriculum/challenges/ukrainian/02-javascript-algorithms-and-data-structures/intermediate-algorithm-scripting/drop-it.md +++ b/curriculum/challenges/ukrainian/02-javascript-algorithms-and-data-structures/intermediate-algorithm-scripting/drop-it.md @@ -14,7 +14,7 @@ dashedName: drop-it # --hints-- -`dropElements([1, 2, 3, 4], function(n) {return n >= 3;})` повинен повертатися як `[3, 4]`. +`dropElements([1, 2, 3, 4], function(n) {return n >= 3;})` повинен повертати `[3, 4]`. ```js assert.deepEqual( @@ -25,7 +25,7 @@ assert.deepEqual( ); ``` -`dropElements([0, 1, 0, 1], function(n) {return n === 1;})` повинен повертатися як `[1, 0, 1]`. +`dropElements([0, 1, 0, 1], function(n) {return n === 1;})` повинен повертати `[1, 0, 1]`. ```js assert.deepEqual( @@ -36,7 +36,7 @@ assert.deepEqual( ); ``` -`dropElements([1, 2, 3], function(n) {return n > 0;})` повинен повертатися як `[1, 2, 3]`. +`dropElements([1, 2, 3], function(n) {return n > 0;})` повинен повертати `[1, 2, 3]`. ```js assert.deepEqual( @@ -47,7 +47,7 @@ assert.deepEqual( ); ``` -`dropElements([1, 2, 3, 4], function(n) {return n > 5;})` повинен повертатися як `[]`. +`dropElements([1, 2, 3, 4], function(n) {return n > 5;})` повинен повертати `[]`. ```js assert.deepEqual( @@ -58,7 +58,7 @@ assert.deepEqual( ); ``` -`dropElements([1, 2, 3, 7, 4], function(n) {return n > 3;})` повинен повертатися як `[7, 4]`. +`dropElements([1, 2, 3, 7, 4], function(n) {return n > 3;})` повинен повертати `[7, 4]`. ```js assert.deepEqual( @@ -69,7 +69,7 @@ assert.deepEqual( ); ``` -`dropElements([1, 2, 3, 9, 2], function(n) {return n > 2;})` повинен повертатися як `[3, 9, 2]`. +`dropElements([1, 2, 3, 9, 2], function(n) {return n > 2;})` повинен повертати `[3, 9, 2]`. ```js assert.deepEqual( diff --git a/curriculum/challenges/ukrainian/02-javascript-algorithms-and-data-structures/intermediate-algorithm-scripting/make-a-person.md b/curriculum/challenges/ukrainian/02-javascript-algorithms-and-data-structures/intermediate-algorithm-scripting/make-a-person.md index 2ff6a730547..0d6c3397a40 100644 --- a/curriculum/challenges/ukrainian/02-javascript-algorithms-and-data-structures/intermediate-algorithm-scripting/make-a-person.md +++ b/curriculum/challenges/ukrainian/02-javascript-algorithms-and-data-structures/intermediate-algorithm-scripting/make-a-person.md @@ -23,7 +23,7 @@ setFullName(firstAndLast) # --hints-- -Не треба додавати жодних властивостей. `Object.keys(bob).length` повинен завжди повертатися як 6. +Не треба додавати жодних властивостей. `Object.keys(bob).length` завжди повинен повертати 6. ```js assert.strictEqual( @@ -38,19 +38,19 @@ assert.strictEqual( ); ``` -`bob instanceof Person` повинен повертатися як `true`. +`bob instanceof Person` повинен повертати `true`. ```js assert.deepEqual(bob instanceof Person, true); ``` -`bob.firstName` повинен повертатися як `undefined`. +`bob.firstName` повинен повертати `undefined`. ```js assert.deepEqual(bob.firstName, undefined); ``` -`bob.lastName` повинен повертатися як `undefined`. +`bob.lastName` повинен повертати `undefined`. ```js assert.deepEqual(bob.lastName, undefined); diff --git a/curriculum/challenges/ukrainian/02-javascript-algorithms-and-data-structures/intermediate-algorithm-scripting/missing-letters.md b/curriculum/challenges/ukrainian/02-javascript-algorithms-and-data-structures/intermediate-algorithm-scripting/missing-letters.md index 574dc7368df..1d8fa9fd663 100644 --- a/curriculum/challenges/ukrainian/02-javascript-algorithms-and-data-structures/intermediate-algorithm-scripting/missing-letters.md +++ b/curriculum/challenges/ukrainian/02-javascript-algorithms-and-data-structures/intermediate-algorithm-scripting/missing-letters.md @@ -38,7 +38,7 @@ assert.deepEqual(fearNotLetter('stvwx'), 'u'); assert.deepEqual(fearNotLetter('bcdf'), 'e'); ``` -`fearNotLetter("abcdefghijklmnopqrstuvwxyz")` повинен повертати рядок `undefined`. +`fearNotLetter("abcdefghijklmnopqrstuvwxyz")` повинен повертати `undefined`. ```js assert.isUndefined(fearNotLetter('abcdefghijklmnopqrstuvwxyz')); diff --git a/curriculum/challenges/ukrainian/02-javascript-algorithms-and-data-structures/intermediate-algorithm-scripting/seek-and-destroy.md b/curriculum/challenges/ukrainian/02-javascript-algorithms-and-data-structures/intermediate-algorithm-scripting/seek-and-destroy.md index cecf8ecffdc..ec658e9f6ad 100644 --- a/curriculum/challenges/ukrainian/02-javascript-algorithms-and-data-structures/intermediate-algorithm-scripting/seek-and-destroy.md +++ b/curriculum/challenges/ukrainian/02-javascript-algorithms-and-data-structures/intermediate-algorithm-scripting/seek-and-destroy.md @@ -14,31 +14,31 @@ dashedName: seek-and-destroy # --hints-- -`destroyer([1, 2, 3, 1, 2, 3], 2, 3)` повинен повертатися як `[1, 1]`. +`destroyer([1, 2, 3, 1, 2, 3], 2, 3)` повинен повертати `[1, 1]`. ```js assert.deepEqual(destroyer([1, 2, 3, 1, 2, 3], 2, 3), [1, 1]); ``` -`destroyer([1, 2, 3, 5, 1, 2, 3], 2, 3)` повинен повертатися як `[1, 5, 1]`. +`destroyer([1, 2, 3, 5, 1, 2, 3], 2, 3)` повинен повертати `[1, 5, 1]`. ```js assert.deepEqual(destroyer([1, 2, 3, 5, 1, 2, 3], 2, 3), [1, 5, 1]); ``` -`destroyer([3, 5, 1, 2, 2], 2, 3, 5)` повинен повертатися як `[1]`. +`destroyer([3, 5, 1, 2, 2], 2, 3, 5)` повинен повертати `[1]`. ```js assert.deepEqual(destroyer([3, 5, 1, 2, 2], 2, 3, 5), [1]); ``` -`destroyer([2, 3, 2, 3], 2, 3)` повинен повертатися як `[]`. +`destroyer([2, 3, 2, 3], 2, 3)` повинен повертати `[]`. ```js assert.deepEqual(destroyer([2, 3, 2, 3], 2, 3), []); ``` -`destroyer(["tree", "hamburger", 53], "tree", 53)` повинен повертатися як `["hamburger"]`. +`destroyer(["tree", "hamburger", 53], "tree", 53)` повинен повертати `["hamburger"]`. ```js assert.deepEqual(destroyer(['tree', 'hamburger', 53], 'tree', 53), [ @@ -46,7 +46,7 @@ assert.deepEqual(destroyer(['tree', 'hamburger', 53], 'tree', 53), [ ]); ``` -`destroyer(["possum", "trollo", 12, "safari", "hotdog", 92, 65, "grandma", "bugati", "trojan", "yacht"], "yacht", "possum", "trollo", "safari", "hotdog", "grandma", "bugati", "trojan")` повинен повертатися як `[12,92,65]`. +`destroyer(["possum", "trollo", 12, "safari", "hotdog", 92, 65, "grandma", "bugati", "trojan", "yacht"], "yacht", "possum", "trollo", "safari", "hotdog", "grandma", "bugati", "trojan")` повинен повертати `[12,92,65]`. ```js assert.deepEqual( diff --git a/curriculum/challenges/ukrainian/02-javascript-algorithms-and-data-structures/intermediate-algorithm-scripting/sorted-union.md b/curriculum/challenges/ukrainian/02-javascript-algorithms-and-data-structures/intermediate-algorithm-scripting/sorted-union.md index 774a5f4bc05..3eb1df7de0d 100644 --- a/curriculum/challenges/ukrainian/02-javascript-algorithms-and-data-structures/intermediate-algorithm-scripting/sorted-union.md +++ b/curriculum/challenges/ukrainian/02-javascript-algorithms-and-data-structures/intermediate-algorithm-scripting/sorted-union.md @@ -18,19 +18,19 @@ dashedName: sorted-union # --hints-- -`uniteUnique([1, 3, 2], [5, 2, 1, 4], [2, 1])` повинен повертатися як `[1, 3, 2, 5, 4]`. +`uniteUnique([1, 3, 2], [5, 2, 1, 4], [2, 1])` повинен повертати `[1, 3, 2, 5, 4]`. ```js assert.deepEqual(uniteUnique([1, 3, 2], [5, 2, 1, 4], [2, 1]), [1, 3, 2, 5, 4]); ``` -`uniteUnique([1, 2, 3], [5, 2, 1])` повинен повертатися як `[1, 2, 3, 5]`. +`uniteUnique([1, 2, 3], [5, 2, 1])` повинен повертати `[1, 2, 3, 5]`. ```js assert.deepEqual(uniteUnique([1, 2, 3], [5, 2, 1]), [1, 2, 3, 5]); ``` -`uniteUnique([1, 2, 3], [5, 2, 1, 4], [2, 1], [6, 7, 8])` повинен повертатися як `[1, 2, 3, 5, 4, 6, 7, 8]`. +`uniteUnique([1, 2, 3], [5, 2, 1, 4], [2, 1], [6, 7, 8])` повинен повертати `[1, 2, 3, 5, 4, 6, 7, 8]`. ```js assert.deepEqual(uniteUnique([1, 2, 3], [5, 2, 1, 4], [2, 1], [6, 7, 8]), [ diff --git a/curriculum/challenges/ukrainian/02-javascript-algorithms-and-data-structures/intermediate-algorithm-scripting/steamroller.md b/curriculum/challenges/ukrainian/02-javascript-algorithms-and-data-structures/intermediate-algorithm-scripting/steamroller.md index ad2dbf65380..f875a7b2c86 100644 --- a/curriculum/challenges/ukrainian/02-javascript-algorithms-and-data-structures/intermediate-algorithm-scripting/steamroller.md +++ b/curriculum/challenges/ukrainian/02-javascript-algorithms-and-data-structures/intermediate-algorithm-scripting/steamroller.md @@ -12,25 +12,25 @@ dashedName: steamroller # --hints-- -`steamrollArray([[["a"]], [["b"]]])` повинен повертатися як `["a", "b"]`. +`steamrollArray([[["a"]], [["b"]]])` повинен повертати `["a", "b"]`. ```js assert.deepEqual(steamrollArray([[['a']], [['b']]]), ['a', 'b']); ``` -`steamrollArray([1, [2], [3, [[4]]]])` повинен повертатися як `[1, 2, 3, 4]`. +`steamrollArray([1, [2], [3, [[4]]]])` повинен повертати `[1, 2, 3, 4]`. ```js assert.deepEqual(steamrollArray([1, [2], [3, [[4]]]]), [1, 2, 3, 4]); ``` -`steamrollArray([1, [], [3, [[4]]]])` повинен повертатися як `[1, 3, 4]`. +`steamrollArray([1, [], [3, [[4]]]])` повинен повертати `[1, 3, 4]`. ```js assert.deepEqual(steamrollArray([1, [], [3, [[4]]]]), [1, 3, 4]); ``` -`steamrollArray([1, {}, [3, [[4]]]])` повинен повертатися як `[1, {}, 3, 4]`. +`steamrollArray([1, {}, [3, [[4]]]])` повинен повертати `[1, {}, 3, 4]`. ```js assert.deepEqual(steamrollArray([1, {}, [3, [[4]]]]), [1, {}, 3, 4]); diff --git a/curriculum/challenges/ukrainian/02-javascript-algorithms-and-data-structures/intermediate-algorithm-scripting/sum-all-numbers-in-a-range.md b/curriculum/challenges/ukrainian/02-javascript-algorithms-and-data-structures/intermediate-algorithm-scripting/sum-all-numbers-in-a-range.md index 92479c30173..21d576ab590 100644 --- a/curriculum/challenges/ukrainian/02-javascript-algorithms-and-data-structures/intermediate-algorithm-scripting/sum-all-numbers-in-a-range.md +++ b/curriculum/challenges/ukrainian/02-javascript-algorithms-and-data-structures/intermediate-algorithm-scripting/sum-all-numbers-in-a-range.md @@ -20,25 +20,25 @@ dashedName: sum-all-numbers-in-a-range assert(typeof sumAll([1, 4]) === 'number'); ``` -`sumAll([1, 4])` повинен повернутися як 10. +`sumAll([1, 4])` повинен повертати 10. ```js assert.deepEqual(sumAll([1, 4]), 10); ``` -`sumAll([4, 1])` повинен повернутися як 10. +`sumAll([4, 1])` повинен повертати 10. ```js assert.deepEqual(sumAll([4, 1]), 10); ``` -`sumAll([5, 10])` повинен повернутися як 45. +`sumAll([5, 10])` повинен повертати 45. ```js assert.deepEqual(sumAll([5, 10]), 45); ``` -`sumAll([10, 5])` повинен повернутися як 45. +`sumAll([10, 5])` повинен повертати 45. ```js assert.deepEqual(sumAll([10, 5]), 45); diff --git a/curriculum/challenges/ukrainian/02-javascript-algorithms-and-data-structures/intermediate-algorithm-scripting/sum-all-odd-fibonacci-numbers.md b/curriculum/challenges/ukrainian/02-javascript-algorithms-and-data-structures/intermediate-algorithm-scripting/sum-all-odd-fibonacci-numbers.md index a9ef960613f..68af2b5b400 100644 --- a/curriculum/challenges/ukrainian/02-javascript-algorithms-and-data-structures/intermediate-algorithm-scripting/sum-all-odd-fibonacci-numbers.md +++ b/curriculum/challenges/ukrainian/02-javascript-algorithms-and-data-structures/intermediate-algorithm-scripting/sum-all-odd-fibonacci-numbers.md @@ -16,37 +16,37 @@ dashedName: sum-all-odd-fibonacci-numbers # --hints-- -`sumFibs(1)` потрібно повернути число. +`sumFibs(1)` повинен повертати число. ```js assert(typeof sumFibs(1) === 'number'); ``` -`sumFibs(1000)` потрібно повернути 1785. +`sumFibs(1000)` повинен повертати 1785. ```js assert(sumFibs(1000) === 1785); ``` -`sumFibs(4000000)` потрібно повернути 4613732. +`sumFibs(4000000)` повинен повертати 4613732. ```js assert(sumFibs(4000000) === 4613732); ``` -`sumFibs(4)` потрібно повернути 5. +`sumFibs(4)` повинен повертати 5. ```js assert(sumFibs(4) === 5); ``` -`sumFibs(75024)` потрібно повернути 60696. +`sumFibs(75024)` повинен повертати 60696. ```js assert(sumFibs(75024) === 60696); ``` -`sumFibs(75025)` потрібно повернути 135721. +`sumFibs(75025)` повинен повертати 135721. ```js assert(sumFibs(75025) === 135721); diff --git a/curriculum/challenges/ukrainian/02-javascript-algorithms-and-data-structures/intermediate-algorithm-scripting/sum-all-primes.md b/curriculum/challenges/ukrainian/02-javascript-algorithms-and-data-structures/intermediate-algorithm-scripting/sum-all-primes.md index 35abbb0b85e..d98741f46e6 100644 --- a/curriculum/challenges/ukrainian/02-javascript-algorithms-and-data-structures/intermediate-algorithm-scripting/sum-all-primes.md +++ b/curriculum/challenges/ukrainian/02-javascript-algorithms-and-data-structures/intermediate-algorithm-scripting/sum-all-primes.md @@ -14,19 +14,19 @@ dashedName: sum-all-primes # --hints-- -`sumPrimes(10)` потрібно повернути число. +`sumPrimes(10)` повинен повертати число. ```js assert.deepEqual(typeof sumPrimes(10), 'number'); ``` -`sumPrimes(10)` потрібно повертати 17. +`sumPrimes(10)` повинен повертати 17. ```js assert.deepEqual(sumPrimes(10), 17); ``` -`sumPrimes(977)` потрібно повертати 73156. +`sumPrimes(977)` повинен повертати 73156. ```js assert.deepEqual(sumPrimes(977), 73156); diff --git a/curriculum/challenges/ukrainian/02-javascript-algorithms-and-data-structures/intermediate-algorithm-scripting/wherefore-art-thou.md b/curriculum/challenges/ukrainian/02-javascript-algorithms-and-data-structures/intermediate-algorithm-scripting/wherefore-art-thou.md index aba6fdda1ed..46bd45f9069 100644 --- a/curriculum/challenges/ukrainian/02-javascript-algorithms-and-data-structures/intermediate-algorithm-scripting/wherefore-art-thou.md +++ b/curriculum/challenges/ukrainian/02-javascript-algorithms-and-data-structures/intermediate-algorithm-scripting/wherefore-art-thou.md @@ -14,7 +14,7 @@ dashedName: wherefore-art-thou # --hints-- -`whatIsInAName([{ first: "Romeo", last: "Montague" }, { first: "Mercutio", last: null }, { first: "Tybalt", last: "Capulet" }], { last: "Capulet" })` повинен повертатися як `[{ first: "Tybalt", last: "Capulet" }]`. +`whatIsInAName([{ first: "Romeo", last: "Montague" }, { first: "Mercutio", last: null }, { first: "Tybalt", last: "Capulet" }], { last: "Capulet" })` повинен повертати `[{ first: "Tybalt", last: "Capulet" }]`. ```js assert.deepEqual( @@ -30,7 +30,7 @@ assert.deepEqual( ); ``` -`whatIsInAName([{ "apple": 1 }, { "apple": 1 }, { "apple": 1, "bat": 2 }], { "apple": 1 })` повинен повертатися як `[{ "apple": 1 }, { "apple": 1 }, { "apple": 1, "bat": 2 }]`. +`whatIsInAName([{ "apple": 1 }, { "apple": 1 }, { "apple": 1, "bat": 2 }], { "apple": 1 })` повинен повертати `[{ "apple": 1 }, { "apple": 1 }, { "apple": 1, "bat": 2 }]`. ```js assert.deepEqual( @@ -41,7 +41,7 @@ assert.deepEqual( ); ``` -`whatIsInAName([{ "apple": 1, "bat": 2 }, { "bat": 2 }, { "apple": 1, "bat": 2, "cookie": 2 }], { "apple": 1, "bat": 2 })` повинен повертатися як `[{ "apple": 1, "bat": 2 }, { "apple": 1, "bat": 2, "cookie": 2 }]`. +`whatIsInAName([{ "apple": 1, "bat": 2 }, { "bat": 2 }, { "apple": 1, "bat": 2, "cookie": 2 }], { "apple": 1, "bat": 2 })` повинен повертати `[{ "apple": 1, "bat": 2 }, { "apple": 1, "bat": 2, "cookie": 2 }]`. ```js assert.deepEqual( @@ -56,7 +56,7 @@ assert.deepEqual( ); ``` -`whatIsInAName([{ "apple": 1, "bat": 2 }, { "apple": 1 }, { "apple": 1, "bat": 2, "cookie": 2 }], { "apple": 1, "cookie": 2 })` повинен повертатися як `[{ "apple": 1, "bat": 2, "cookie": 2 }]`. +`whatIsInAName([{ "apple": 1, "bat": 2 }, { "apple": 1 }, { "apple": 1, "bat": 2, "cookie": 2 }], { "apple": 1, "cookie": 2 })` повинен повертати `[{ "apple": 1, "bat": 2, "cookie": 2 }]`. ```js assert.deepEqual( @@ -68,7 +68,7 @@ assert.deepEqual( ); ``` -`whatIsInAName([{ "apple": 1, "bat": 2 }, { "apple": 1 }, { "apple": 1, "bat": 2, "cookie": 2 }, { "bat":2 }], { "apple": 1, "bat": 2 })` повинен повертатися як `[{ "apple": 1, "bat": 2 }, { "apple": 1, "bat": 2, "cookie":2 }]`. +`whatIsInAName([{ "apple": 1, "bat": 2 }, { "apple": 1 }, { "apple": 1, "bat": 2, "cookie": 2 }, { "bat":2 }], { "apple": 1, "bat": 2 })` повинен повертати `[{ "apple": 1, "bat": 2 }, { "apple": 1, "bat": 2, "cookie":2 }]`. ```js assert.deepEqual( @@ -88,7 +88,7 @@ assert.deepEqual( ); ``` -`whatIsInAName([{"a": 1, "b": 2, "c": 3}], {"a": 1, "b": 9999, "c": 3})` повинен повертатися як `[]` +`whatIsInAName([{"a": 1, "b": 2, "c": 3}], {"a": 1, "b": 9999, "c": 3})` повинен повертати `[]` ```js assert.deepEqual( diff --git a/curriculum/challenges/ukrainian/02-javascript-algorithms-and-data-structures/javascript-algorithms-and-data-structures-projects/caesars-cipher.md b/curriculum/challenges/ukrainian/02-javascript-algorithms-and-data-structures/javascript-algorithms-and-data-structures-projects/caesars-cipher.md index bb44107e0e6..1fcebeb22be 100644 --- a/curriculum/challenges/ukrainian/02-javascript-algorithms-and-data-structures/javascript-algorithms-and-data-structures-projects/caesars-cipher.md +++ b/curriculum/challenges/ukrainian/02-javascript-algorithms-and-data-structures/javascript-algorithms-and-data-structures-projects/caesars-cipher.md @@ -8,35 +8,35 @@ dashedName: caesars-cipher # --description-- -Одним з найпростіших і найпоширеніших шифрів є шифр Цезаря, також відомий як шифр зсуву. У шифрі зсуву кожна літера заміняється на ту, що віддалена від неї в алфавіті на сталу кількість позицій. +Одним з найпростіших і найпоширеніших шифрів є шифр Цезаря, також відомий як шифр зсуву. У шифрі зсуву значення літери зміщене на встановлену кількість. Часто використовують шифр ROT13, який зміщує літеру на 13 місць. Таким чином, `A ↔ N`, `B ↔ O` і так далі. Напишіть функцію, яка приймає закодований рядок ROT13 як вхідні дані та повертає декодований. -У шифрі використовуються тільки великі літери. Не потрібно замінювати неалфавітні символи (тобто, пробіли, знаки пунктуації), але їх треба переносити до шифру. +Всі літери повинні бути великими. Не замінюйте неалфавітні символи (пробіли, знаки пунктуації), але перенесіть їх. # --hints-- -`rot13("SERR PBQR PNZC")` розшифровується як `FREE CODE CAMP` +`rot13("SERR PBQR PNZC")` повинен розшифруватись як рядок `FREE CODE CAMP` ```js assert(rot13('SERR PBQR PNZC') === 'FREE CODE CAMP'); ``` -`rot13("SERR CVMMN!")` розшифровується як `FREE PIZZA!` +`rot13("SERR CVMMN!")` повинен розшифруватись як рядок `FREE PIZZA!` ```js assert(rot13('SERR CVMMN!') === 'FREE PIZZA!'); ``` -`rot13("SERR YBIR?")` розшифровується як `FREE LOVE?` +`rot13("SERR YBIR?")` повинен розшифруватись як рядок `FREE LOVE?` ```js assert(rot13('SERR YBIR?') === 'FREE LOVE?'); ``` -`rot13("GUR DHVPX OEBJA SBK WHZCF BIRE GUR YNML QBT.")` розшифровується як `THE QUICK BROWN FOX JUMPS OVER THE LAZY DOG.` +`rot13("GUR DHVPX OEBJA SBK WHZCF BIRE GUR YNML QBT.")` повинен розшифруватись як рядок `THE QUICK BROWN FOX JUMPS OVER THE LAZY DOG.` ```js assert( diff --git a/curriculum/challenges/ukrainian/02-javascript-algorithms-and-data-structures/javascript-algorithms-and-data-structures-projects/cash-register.md b/curriculum/challenges/ukrainian/02-javascript-algorithms-and-data-structures/javascript-algorithms-and-data-structures-projects/cash-register.md index a48415f17a0..c33901b2276 100644 --- a/curriculum/challenges/ukrainian/02-javascript-algorithms-and-data-structures/javascript-algorithms-and-data-structures-projects/cash-register.md +++ b/curriculum/challenges/ukrainian/02-javascript-algorithms-and-data-structures/javascript-algorithms-and-data-structures-projects/cash-register.md @@ -8,21 +8,21 @@ dashedName: cash-register # --description-- -Розробіть функцію касового апарату `checkCashRegister()`, у якій перший параметр - це сума покупки (`price`), другий параметр - сума платежу (`cash`), і сума готівки в касі (`cid`) - третій параметр. +Розробіть функцію касового апарату `checkCashRegister()`, яка приймає ціну покупки як перший аргумент (`price`), оплату як другий аргумент (`cash`) та суму готівки в касі як третій аргумент (`cid`). -`cid` - це двовимірний масив, що містить список доступних валют. +`cid` – це 2D масив, який містить список доступного обігу. -Функція `checkCashRegister()` завжди повинна повертатися як об'єкт з ключем `status` і ключем `change`. +Функція `checkCashRegister()` завжди повинна повертати об'єкт з ключем `status` та ключем `change`. -Повернути `{status: "INSUFFICIENT_FUNDS", change: []}` якщо сума готівки в касі менша ніж здача, або якщо ви не можете віддати без здачі. +Поверніть `{status: "INSUFFICIENT_FUNDS", change: []}`, якщо сума готівки в касі менша за здачу, або ви не можете віддати здачу. -Повернути `{status: "CLOSED", change: [...]}` сума готівки в касі є значенням для ключа `change` якщо вона дорівнює здачі. +Поверніть `{status: "CLOSED", change: [...]}` з сумою в касі як значення ключа `change`, якщо вона дорівнює здачі. -В іншому випадку, повернути `{status: "OPEN", change: [...]}`, здачу в монетах і банкнотах, в порядку від найбільшої до найменшої, так як значення ключа `change`. +В іншому випадку, поверніть `{status: "OPEN", change: [...]}` зі здачею в монетах і банкнотах, в порядку від найбільшої до найменшої, як значення ключа `change`. -
Грошова одиницяСума
Пенні$0.01 (ПЕННІ)
Нікель$0.05 (НІКЕЛЬ)
Дайм (монета у 10 центів)$0.1 (ДАЙМ)
Чверть$0.25 (ЧВЕРТЬ)
Долар$1 (ОДИН)
П'ять доларів$5 (П'ЯТЬ)
Десять доларів$10 (ДЕСЯТЬ)
Двадцять доларів$20 (ДВАДЦЯТЬ)
Сто доларів$100 (СТО)
+
Грошовий обігСума
Пенні$0.01 (ПЕННІ)
Нікель$0.05 (НІКЕЛЬ)
Дайм$0.1 (ДАЙМ)
Чверть$0.25 (ЧВЕРТЬ)
Долар$1 (ОДИН)
П'ять доларів$5 (П'ЯТЬ)
Десять доларів$10 (ДЕСЯТЬ)
Двадцять доларів$20 (ДВАДЦЯТЬ)
Сто доларів$100 (СТО)
-Подивіться нижче на приклад cid масиву: +Подивіться нижче на приклад масиву з сумою в касі: ```js [ @@ -40,7 +40,7 @@ dashedName: cash-register # --hints-- -`checkCashRegister(19.5, 20, [["PENNY", 1.01], ["NICKEL", 2.05], ["DIME", 3.1], ["QUARTER", 4.25], ["ONE", 90], ["FIVE", 55], ["TEN", 20], ["TWENTY", 60], ["ONE HUNDRED", 100]])` потрібно повернути об'єкт. +`checkCashRegister(19.5, 20, [["PENNY", 1.01], ["NICKEL", 2.05], ["DIME", 3.1], ["QUARTER", 4.25], ["ONE", 90], ["FIVE", 55], ["TEN", 20], ["TWENTY", 60], ["ONE HUNDRED", 100]])` повинен повертати об'єкт. ```js assert.deepEqual( @@ -61,7 +61,7 @@ assert.deepEqual( ); ``` -`checkCashRegister(19.5, 20, [["PENNY", 1.01], ["NICKEL", 2.05], ["DIME", 3.1], ["QUARTER", 4.25], ["ONE", 90], ["FIVE", 55], ["TEN", 20], ["TWENTY", 60], ["ONE HUNDRED", 100]])` потрібно повернути `{status: "OPEN", change: [["QUARTER", 0.5]]}`. +`checkCashRegister(19.5, 20, [["PENNY", 1.01], ["NICKEL", 2.05], ["DIME", 3.1], ["QUARTER", 4.25], ["ONE", 90], ["FIVE", 55], ["TEN", 20], ["TWENTY", 60], ["ONE HUNDRED", 100]])` повинен повертати `{status: "OPEN", change: [["QUARTER", 0.5]]}`. ```js assert.deepEqual( @@ -80,7 +80,7 @@ assert.deepEqual( ); ``` -`checkCashRegister(3.26, 100, [["PENNY", 1.01], ["NICKEL", 2.05], ["DIME", 3.1], ["QUARTER", 4.25], ["ONE", 90], ["FIVE", 55], ["TEN", 20], ["TWENTY", 60], ["ONE HUNDRED", 100]])` потрібно повернути `{status: "OPEN", change: [["TWENTY", 60], ["TEN", 20], ["FIVE", 15], ["ONE", 1], ["QUARTER", 0.5], ["DIME", 0.2], ["PENNY", 0.04]]}`. +`checkCashRegister(3.26, 100, [["PENNY", 1.01], ["NICKEL", 2.05], ["DIME", 3.1], ["QUARTER", 4.25], ["ONE", 90], ["FIVE", 55], ["TEN", 20], ["TWENTY", 60], ["ONE HUNDRED", 100]])` повинен повертати `{status: "OPEN", change: [["TWENTY", 60], ["TEN", 20], ["FIVE", 15], ["ONE", 1], ["QUARTER", 0.5], ["DIME", 0.2], ["PENNY", 0.04]]}`. ```js assert.deepEqual( @@ -110,7 +110,7 @@ assert.deepEqual( ); ``` -`checkCashRegister(19.5, 20, [["PENNY", 0.01], ["NICKEL", 0], ["DIME", 0], ["QUARTER", 0], ["ONE", 0], ["FIVE", 0], ["TEN", 0], ["TWENTY", 0], ["ONE HUNDRED", 0]])` потрібно повернути `{status: "INSUFFICIENT_FUNDS", change: []}`. +`checkCashRegister(19.5, 20, [["PENNY", 0.01], ["NICKEL", 0], ["DIME", 0], ["QUARTER", 0], ["ONE", 0], ["FIVE", 0], ["TEN", 0], ["TWENTY", 0], ["ONE HUNDRED", 0]])` повинен повертати `{status: "INSUFFICIENT_FUNDS", change: []}`. ```js assert.deepEqual( @@ -129,7 +129,7 @@ assert.deepEqual( ); ``` -`checkCashRegister(19.5, 20, [["PENNY", 0.01], ["NICKEL", 0], ["DIME", 0], ["QUARTER", 0], ["ONE", 1], ["FIVE", 0], ["TEN", 0], ["TWENTY", 0], ["ONE HUNDRED", 0]])` потрібно повернути `{status: "INSUFFICIENT_FUNDS", change: []}`. +`checkCashRegister(19.5, 20, [["PENNY", 0.01], ["NICKEL", 0], ["DIME", 0], ["QUARTER", 0], ["ONE", 1], ["FIVE", 0], ["TEN", 0], ["TWENTY", 0], ["ONE HUNDRED", 0]])` повинен повертати `{status: "INSUFFICIENT_FUNDS", change: []}`. ```js assert.deepEqual( @@ -148,7 +148,7 @@ assert.deepEqual( ); ``` -`checkCashRegister(19.5, 20, [["PENNY", 0.5], ["NICKEL", 0], ["DIME", 0], ["QUARTER", 0], ["ONE", 0], ["FIVE", 0], ["TEN", 0], ["TWENTY", 0], ["ONE HUNDRED", 0]])` потрібно повернути `{status: "CLOSED", change: [["PENNY", 0.5], ["NICKEL", 0], ["DIME", 0], ["QUARTER", 0], ["ONE", 0], ["FIVE", 0], ["TEN", 0], ["TWENTY", 0], ["ONE HUNDRED", 0]]}`. +`checkCashRegister(19.5, 20, [["PENNY", 0.5], ["NICKEL", 0], ["DIME", 0], ["QUARTER", 0], ["ONE", 0], ["FIVE", 0], ["TEN", 0], ["TWENTY", 0], ["ONE HUNDRED", 0]])` повинен повертати `{status: "CLOSED", change: [["PENNY", 0.5], ["NICKEL", 0], ["DIME", 0], ["QUARTER", 0], ["ONE", 0], ["FIVE", 0], ["TEN", 0], ["TWENTY", 0], ["ONE HUNDRED", 0]]}`. ```js assert.deepEqual( diff --git a/curriculum/challenges/ukrainian/02-javascript-algorithms-and-data-structures/javascript-algorithms-and-data-structures-projects/palindrome-checker.md b/curriculum/challenges/ukrainian/02-javascript-algorithms-and-data-structures/javascript-algorithms-and-data-structures-projects/palindrome-checker.md index cebf0a91253..041006696f0 100644 --- a/curriculum/challenges/ukrainian/02-javascript-algorithms-and-data-structures/javascript-algorithms-and-data-structures-projects/palindrome-checker.md +++ b/curriculum/challenges/ukrainian/02-javascript-algorithms-and-data-structures/javascript-algorithms-and-data-structures-projects/palindrome-checker.md @@ -8,137 +8,112 @@ dashedName: palindrome-checker # --description-- -Повернути `true` якщо заданий рядок є паліндромом. В іншому випадку, повернути `false`. +Поверніть `true`, якщо заданий рядок є паліндромом. В іншому випадку, поверніть `false`. -A palindrome +Паліндром – це слово чи речення, що однаково пишеться в обох напрямках (зліва направо та справа наліво), незважаючи на розділові знаки, велику/малу літеру чи пробіли. -

- Примітка: Вам потрібно буде прибрати усі неалфавітні символи (розділові знаки, пробіли та символи) і перетворити увесь текст в однаковий регістр (нижній або верхній регістр) для перевірки паліндромів. -

+**Примітка:** вам потрібно прибрати **всі неалфавітні символи** (розділові знаки, пробіли та символи) і написати весь текст одинаково (великими або малими літерами) для перевірки паліндромів. -

- Ми будемо пропускати рядки з різними форматами, наприклад racecar, RaceCar, і race CAR у числі інших. -

+Ми будемо передавати рядки з різними форматами, наприклад `racecar`, `RaceCar` та `race CAR` серед інших. -

- Ми також будемо пропускати рядки з спеціальними символами, наприклад 2A3*3a2, 2A3 3a2, і 2_A3*3#A2. -

+Ми також будемо передавати рядки з спеціальними символами, наприклад `2A3*3a2`, `2A3 3a2` та `2_A3*3#A2`. -

- --hints-- -

+# --hints-- -

- palindrome("eye") повинен повертатися як логічне значення. -

+`palindrome("eye")` повинен повертати булеве значення. -
assert(typeof palindrome('eye') === 'boolean');
-
+```js +assert(typeof palindrome('eye') === 'boolean'); +``` -

- palindrome("eye") повинен повертатися як true. -

+`palindrome("eye")` повинен повертати `true`. -
assert(palindrome('eye') === true);
-
+```js +assert(palindrome('eye') === true); +``` -

- palindrome("_eye") повинен повертатися як true. -

+`palindrome("_eye")` повинен повертати `true`. -
assert(palindrome('_eye') === true);
-
+```js +assert(palindrome('_eye') === true); +``` -

- palindrome("race car") повинен повертатися як true. -

+`palindrome("race car")` повинен повертати `true`. -
assert(palindrome('race car') === true);
-
+```js +assert(palindrome('race car') === true); +``` -

- palindrome("not a palindrome") повинен повертатися як false. -

+`palindrome("not a palindrome")` повинен повертати `false`. -
assert(palindrome('not a palindrome') === false);
-
+```js +assert(palindrome('not a palindrome') === false); +``` -

- palindrome("A man, a plan, a canal. Panama") повинен повертатися як true. -

+`palindrome("A man, a plan, a canal. Panama")` повинен повертати `true`. -
assert(palindrome('A man, a plan, a canal. Panama') === true);
-
+```js +assert(palindrome('A man, a plan, a canal. Panama') === true); +``` -

- palindrome("never odd or even") повинен повертатися як true. -

+`palindrome("never odd or even")` повинен повертати `true`. -
assert(palindrome('never odd or even') === true);
-
+```js +assert(palindrome('never odd or even') === true); +``` -

- palindrome("nope") повинен повертатися як false. -

+`palindrome("nope")` повинен повертати `false`. -
assert(palindrome('nope') === false);
-
+```js +assert(palindrome('nope') === false); +``` -

- palindrome("almostomla") повинен повертатися як false. -

+`palindrome("almostomla")` повинен повертати `false`. -
assert(palindrome('almostomla') === false);
-
+```js +assert(palindrome('almostomla') === false); +``` -

- palindrome("My age is 0, 0 si ega ym.") повинен повертатися як true. -

+`palindrome("My age is 0, 0 si ega ym.")` повинен повертати `true`. -
assert(palindrome('My age is 0, 0 si ega ym.') === true);
-
+```js +assert(palindrome('My age is 0, 0 si ega ym.') === true); +``` -

- palindrome("1 eye for of 1 eye.") повинен повертатися як false. -

+`palindrome("1 eye for of 1 eye.")` повинен повертати `false`. -
assert(palindrome('1 eye for of 1 eye.') === false);
-
+```js +assert(palindrome('1 eye for of 1 eye.') === false); +``` -

- palindrome("0_0 (: /-\ :) 0-0") повинен повертатися як true. -

+`palindrome("0_0 (: /-\ :) 0-0")` повинен повертати `true`. -
assert(palindrome('0_0 (: /- :) 0-0') === true);
-
+```js +assert(palindrome('0_0 (: /- :) 0-0') === true); +``` -

- palindrome("five|\_/|four") повинен повертатися як false. -

+`palindrome("five|\_/|four")` повинен повертати `false`. -
assert(palindrome('five|_/|four') === false);
-
+```js +assert(palindrome('five|_/|four') === false); +``` -

- --seed-- -

+# --seed-- -

- --seed-contents-- -

+## --seed-contents-- -
function palindrome(str) {
+```js
+function palindrome(str) {
   return true;
 }
 
 palindrome("eye");
-
+``` -

- --solutions-- -

+# --solutions-- -
function palindrome(str) {
+```js
+function palindrome(str) {
   var string = str.toLowerCase().split(/[^A-Za-z0-9]/gi).join('');
   var aux = string.split('');
   if (aux.join('') === aux.reverse().join('')){
@@ -147,4 +122,4 @@ palindrome("eye");
 
   return false;
 }
-
+``` diff --git a/curriculum/challenges/ukrainian/02-javascript-algorithms-and-data-structures/javascript-algorithms-and-data-structures-projects/roman-numeral-converter.md b/curriculum/challenges/ukrainian/02-javascript-algorithms-and-data-structures/javascript-algorithms-and-data-structures-projects/roman-numeral-converter.md index 35231937ef7..29493deb48c 100644 --- a/curriculum/challenges/ukrainian/02-javascript-algorithms-and-data-structures/javascript-algorithms-and-data-structures-projects/roman-numeral-converter.md +++ b/curriculum/challenges/ukrainian/02-javascript-algorithms-and-data-structures/javascript-algorithms-and-data-structures-projects/roman-numeral-converter.md @@ -1,6 +1,6 @@ --- id: a7f4d8f2483413a6ce226cac -title: Конвертер римських цифр +title: Конвертер римських чисел challengeType: 5 forumTopicId: 16044 dashedName: roman-numeral-converter @@ -8,7 +8,7 @@ dashedName: roman-numeral-converter # --description-- -Перетворити задане число у римську систему числення. +Перетворіть подане число в римське число. | Римські числа | Арабські числа | | ------------- | -------------- | diff --git a/curriculum/challenges/ukrainian/02-javascript-algorithms-and-data-structures/javascript-algorithms-and-data-structures-projects/telephone-number-validator.md b/curriculum/challenges/ukrainian/02-javascript-algorithms-and-data-structures/javascript-algorithms-and-data-structures-projects/telephone-number-validator.md index 99105d1013f..02b2d289263 100644 --- a/curriculum/challenges/ukrainian/02-javascript-algorithms-and-data-structures/javascript-algorithms-and-data-structures-projects/telephone-number-validator.md +++ b/curriculum/challenges/ukrainian/02-javascript-algorithms-and-data-structures/javascript-algorithms-and-data-structures-projects/telephone-number-validator.md @@ -1,6 +1,6 @@ --- id: aff0395860f5d3034dc0bfc9 -title: Валідатор телефонного номеру +title: Валідатор мобільного номера challengeType: 5 forumTopicId: 16090 dashedName: telephone-number-validator @@ -8,179 +8,179 @@ dashedName: telephone-number-validator # --description-- -Повернути `true`, якщо надісланий рядок виглядає як дійсний номер телефону США. +Поверніть `true`, якщо наданий рядок виглядає як дійсний мобільний номер США. -Користувач може заповнити поле форми в будь-який спосіб, тільки якщо він має формат дійсного номера США. Нижче наведені приклади припустимих форматів для номерів телефону США (для інших варіантів, зверніться до тестів нижче): +Користувач може заповнити поле форми в будь-який спосіб, тільки якщо він має формат дійсного номера США. Нижче наведені приклади дійсних форматів номерів США (для інших варіантів посилайтесь на тести, подані нижче):
555-555-5555
(555)555-5555
(555) 555-5555
555 555 5555
5555555555
1 555 555 5555
-У цьому завданні вам буде дано рядок, наприклад `800-692-7753` або `8oo-six427676;laskdjf`. Ваше завдання - підтвердити або визнати недійсним номер телефону США на основі будь-якої комбінації форматів, наданих вище. Телефонний код міста є обов'язковим. Якщо введено телефонний код країни, необхідно підтвердити, що телефонний код країни - `1`. Повернути `true`, якщо рядок є дійсним номером телефону США; в іншому випадку, повернути `false`. +У цьому завданні вам буде надано рядок, наприклад `800-692-7753` або `8oo-six427676;laskdjf`. Ваше завдання – підтвердити або відхилити мобільний номер США на основі будь-якої комбінації форматів, наданих вище. Код зони нумерації є обов'язковим. Якщо надано телефонний код країни, то ви повинні підтвердити, що телефонний код країни – `1`. Поверніть `true`, якщо рядок є дійсним мобільним номером США; в іншому випадку поверніть `false`. # --hints-- -`telephoneCheck("555-555-5555")` повинен повертатися як булеве значення. +`telephoneCheck("555-555-5555")` повинен повертати булеве значення. ```js assert(typeof telephoneCheck('555-555-5555') === 'boolean'); ``` -`telephoneCheck("1 555-555-5555")` повинен повертатися як `true`. +`telephoneCheck("1 555-555-5555")` повинен повертати `true`. ```js assert(telephoneCheck('1 555-555-5555') === true); ``` -`telephoneCheck("1 (555) 555-5555")` повинен повертатися як `true`. +`telephoneCheck("1 (555) 555-5555")` повинен повертати `true`. ```js assert(telephoneCheck('1 (555) 555-5555') === true); ``` -`telephoneCheck("5555555555")` повинен повертатися як `true`. +`telephoneCheck("5555555555")` повинен повертати `true`. ```js assert(telephoneCheck('5555555555') === true); ``` -`telephoneCheck("555-555-5555")` повинен повертатися як `true`. +`telephoneCheck("555-555-5555")` повинен повертати `true`. ```js assert(telephoneCheck('555-555-5555') === true); ``` -`telephoneCheck("(555)555-5555")` повинен повертатися як `true`. +`telephoneCheck("(555)555-5555")` повинен повертати `true`. ```js assert(telephoneCheck('(555)555-5555') === true); ``` -`telephoneCheck("1(555)555-5555")` повинен повертатися як `true`. +`telephoneCheck("1(555)555-5555")` повинен повертати `true`. ```js assert(telephoneCheck('1(555)555-5555') === true); ``` -`telephoneCheck("555-5555")` повинен повертатися як `false`. +`telephoneCheck("555-5555")` повинен повертати `false`. ```js assert(telephoneCheck('555-5555') === false); ``` -`telephoneCheck("5555555")` повинен повертатися як `false`. +`telephoneCheck("5555555")` повинен повертати `false`. ```js assert(telephoneCheck('5555555') === false); ``` -`telephoneCheck("1 555)555-5555")` повинен повертатися як `false`. +`telephoneCheck("1 555)555-5555")` повинен повертати `false`. ```js assert(telephoneCheck('1 555)555-5555') === false); ``` -`telephoneCheck("1 555 555 5555")` повинен повертатися як `true`. +`telephoneCheck("1 555 555 5555")` повинен повертати `true`. ```js assert(telephoneCheck('1 555 555 5555') === true); ``` -`telephoneCheck("1 456 789 4444")` повинен повертатися як `true`. +`telephoneCheck("1 456 789 4444")` повинен повертати `true`. ```js assert(telephoneCheck('1 456 789 4444') === true); ``` -`telephoneCheck("123**&!!asdf#")` повинен повертатися як `false`. +`telephoneCheck("123**&!!asdf#")` повинен повертати `false`. ```js assert(telephoneCheck('123**&!!asdf#') === false); ``` -`telephoneCheck("55555555")` повинен повертатися як `false`. +`telephoneCheck("55555555")` повинен повертати `false`. ```js assert(telephoneCheck('55555555') === false); ``` -`telephoneCheck("(6054756961)")` повинен повертатися як `false`. +`telephoneCheck("(6054756961)")` повинен повертати `false`. ```js assert(telephoneCheck('(6054756961)') === false); ``` -`telephoneCheck("2 (757) 622-7382")` повинен повертатися як `false`. +`telephoneCheck("2 (757) 622-7382")` повинен повертати `false`. ```js assert(telephoneCheck('2 (757) 622-7382') === false); ``` -`telephoneCheck("0 (757) 622-7382")` повинен повертатися як `false`. +`telephoneCheck("0 (757) 622-7382")` повинен повертати `false`. ```js assert(telephoneCheck('0 (757) 622-7382') === false); ``` -`telephoneCheck("-1 (757) 622-7382")` повинен повертатися як `false`. +`telephoneCheck("-1 (757) 622-7382")` повинен повертати `false`. ```js assert(telephoneCheck('-1 (757) 622-7382') === false); ``` -`telephoneCheck("2 757 622-7382")` повинен повертатися як `false`. +`telephoneCheck("2 757 622-7382")` повинен повертати `false`. ```js assert(telephoneCheck('2 757 622-7382') === false); ``` -`telephoneCheck("10 (757) 622-7382")` повинен повертатися як `false`. +`telephoneCheck("10 (757) 622-7382")` повинен повертати `false`. ```js assert(telephoneCheck('10 (757) 622-7382') === false); ``` -`telephoneCheck("27576227382")` повинен повертатися як `false`. +`telephoneCheck("27576227382")` повинен повертати `false`. ```js assert(telephoneCheck('27576227382') === false); ``` -`telephoneCheck("(275)76227382")` повинен повертатися як `false`. +`telephoneCheck("(275)76227382")` повинен повертати `false`. ```js assert(telephoneCheck('(275)76227382') === false); ``` -`telephoneCheck("2(757)6227382")` повинен повертатися як `false`. +`telephoneCheck("2(757)6227382")` повинен повертати `false`. ```js assert(telephoneCheck('2(757)6227382') === false); ``` -`telephoneCheck("2(757)622-7382")` повинен повертатися як `false`. +`telephoneCheck("2(757)622-7382")` повинен повертати `false`. ```js assert(telephoneCheck('2(757)622-7382') === false); ``` -`telephoneCheck("555)-555-5555")` повинен повертатися як `false`. +`telephoneCheck("555)-555-5555")` повинен повертати `false`. ```js assert(telephoneCheck('555)-555-5555') === false); ``` -`telephoneCheck("(555-555-5555")` повинен повертатися як `false`. +`telephoneCheck("(555-555-5555")` повинен повертати `false`. ```js assert(telephoneCheck('(555-555-5555') === false); ``` -`telephoneCheck("(555)5(55?)-5555")` повинен повертатися як `false`. +`telephoneCheck("(555)5(55?)-5555")` повинен повертати `false`. ```js assert(telephoneCheck('(555)5(55?)-5555') === false); ``` -`telephoneCheck("55 55-55-555-5")` повинен повертатися як `false`. +`telephoneCheck("55 55-55-555-5")` повинен повертати `false`. ```js assert(telephoneCheck('55 55-55-555-5') === false); diff --git a/curriculum/challenges/ukrainian/04-data-visualization/json-apis-and-ajax/get-json-with-the-javascript-fetch-method.md b/curriculum/challenges/ukrainian/04-data-visualization/json-apis-and-ajax/get-json-with-the-javascript-fetch-method.md index 98d66a0daf7..ac7a7b30ab7 100644 --- a/curriculum/challenges/ukrainian/04-data-visualization/json-apis-and-ajax/get-json-with-the-javascript-fetch-method.md +++ b/curriculum/challenges/ukrainian/04-data-visualization/json-apis-and-ajax/get-json-with-the-javascript-fetch-method.md @@ -38,13 +38,37 @@ fetch('/json/cats.json') # --hints-- -Щоб надіслати запит `GET`, використовуйте метод `fetch`. + +Your code should use the fetched data to replace the inner HTML + +```js +const catData = "dummy data"; +const ref = fetch; +fetch = () => Promise.resolve({ json: () => catData }); +async () => { + try { + document.getElementById("getMessage").click(); + await new Promise((resolve, reject) => setTimeout(() => resolve(), 250)); + } catch (error) { + console.log(error); + } finally { + fetch = ref; + assert.equal( + document.getElementById("message").textContent, + JSON.stringify(catData) + ); + } +}; +``` + + +Your code should make a `GET` request with `fetch`. ```js assert(code.match(/fetch\s*\(\s*('|")\/json\/cats\.json\1\s*\)/g)); ``` -Щоб конвертувати вхідні дані в JSON, використовуйте метод `then`. +Your code should use `then` to convert the response to JSON. ```js assert( @@ -54,13 +78,13 @@ assert( ); ``` -Щоб обробити конвертовані дані JSON методом `then`, використайте `then` у коді двічі. +Your code should use `then` to handle the data converted to JSON by the other `then`. ```js assert(__helpers.removeWhiteSpace(code).match(/\.then\(\(?\w+\)?=>{[^}]*}\)/g)); ``` -Щоб змінити внутрішній HTML на рядок з даними JSON, використовуйте у коді елемент з id `message`. +Your code should get the element with id `message` and change its inner HTML to the string of JSON data. ```js assert( diff --git a/curriculum/challenges/ukrainian/06-quality-assurance/quality-assurance-and-testing-with-chai/run-functional-tests-using-a-headless-browser-ii.md b/curriculum/challenges/ukrainian/06-quality-assurance/quality-assurance-and-testing-with-chai/run-functional-tests-using-a-headless-browser-ii.md index 6670e2142ba..f018b8a64eb 100644 --- a/curriculum/challenges/ukrainian/06-quality-assurance/quality-assurance-and-testing-with-chai/run-functional-tests-using-a-headless-browser-ii.md +++ b/curriculum/challenges/ukrainian/06-quality-assurance/quality-assurance-and-testing-with-chai/run-functional-tests-using-a-headless-browser-ii.md @@ -12,17 +12,17 @@ dashedName: run-functional-tests-using-a-headless-browser-ii # --instructions-- -Within `tests/2_functional-tests.js`, in the `'Submit the surname "Vespucci" in the HTML form'` test (`// #6`), automate the following: +У межах `tests/2_functional-tests.js` у тесті `'Submit the surname "Vespucci" in the HTML form'` (`// #6`) автоматизуйте наступне: 1. Впишіть у форму прізвище `Vespucci` 2. Натисніть кнопку підтвердження У межах кнопки зворотного виклику `pressButton`: -1. Підтвердьте, що статус – OK `200` -2. Підтвердьте, що текст всередині елемента `span#name` – це `'Amerigo'` -3. Підтвердьте, що текст всередині елемента `span#surname` – це `'Vespucci'` -4. Підтвердьте, що елемент(и) `span#dates` існують і їхній підрахунок дорівнює `1` +1. Підтвердьте, що статус становить OK `200` +2. Підтвердьте, що текстом всередині елемента `span#name` є `'Amerigo'` +3. Підтвердьте, що текстом всередині елемента `span#surname` є `'Vespucci'` +4. Підтвердьте, що елемент(и) `span#dates` існують та їхня кількість дорівнює `1` Не забудьте видалити виклик `assert.fail()`. @@ -42,7 +42,7 @@ Within `tests/2_functional-tests.js`, in the `'Submit the surname "Vespucci" in ); ``` -Вам слід підтвердити, що запит безголового браузера був успішним. +Ви повинні підтвердити, що запит headless браузера був успішним. ```js (getUserInput) => @@ -56,7 +56,7 @@ Within `tests/2_functional-tests.js`, in the `'Submit the surname "Vespucci" in ); ``` -Підтвердьте, що текст всередині елемента `span#name`> – це `'Amerigo'`. +Ви повинні підтвердити, що текстом всередині елемента `span#name` є `'Amerigo'`. ```js (getUserInput) => @@ -72,7 +72,7 @@ Within `tests/2_functional-tests.js`, in the `'Submit the surname "Vespucci" in ); ``` -Підтвердьте, що текст всередині елемента `span#surname` – це `'Vespucci'`. +Ви повинні підтвердити, що текстом всередині елемента `span#surname` є `'Vespucci'`. ```js (getUserInput) => @@ -88,7 +88,7 @@ Within `tests/2_functional-tests.js`, in the `'Submit the surname "Vespucci" in ); ``` -Підтвердьте, що елемент `span#dates` існує, а його підрахунок - 1. +Ви повинні підтвердити, що існує лише один елемент `span#dates`. ```js (getUserInput) => diff --git a/curriculum/challenges/ukrainian/06-quality-assurance/quality-assurance-and-testing-with-chai/run-functional-tests-using-a-headless-browser.md b/curriculum/challenges/ukrainian/06-quality-assurance/quality-assurance-and-testing-with-chai/run-functional-tests-using-a-headless-browser.md index 4f5ab2c12d2..0acda601506 100644 --- a/curriculum/challenges/ukrainian/06-quality-assurance/quality-assurance-and-testing-with-chai/run-functional-tests-using-a-headless-browser.md +++ b/curriculum/challenges/ukrainian/06-quality-assurance/quality-assurance-and-testing-with-chai/run-functional-tests-using-a-headless-browser.md @@ -45,7 +45,7 @@ test('Submit the surname "Polo" in the HTML form', function (done) { # --instructions-- -У межах `tests/2_functional-tests.js` у `'Submit the surname "Colombo" in the HTML form'` тесту `// #5` автоматизуйте наступне: +У межах `tests/2_functional-tests.js` у тесті `'Submit the surname "Colombo" in the HTML form'` `// #5` автоматизуйте наступне: 1. Впишіть у форму прізвище `Colombo` 2. Натисніть кнопку підтвердження @@ -89,7 +89,7 @@ test('Submit the surname "Polo" in the HTML form', function (done) { ); ``` -Ви повинні підтвердити, що текстом всередині елемента `span#name`> є `'Cristoforo'`. +Ви повинні підтвердити, що текстом всередині елемента `span#name` є `'Cristoforo'`. ```js (getUserInput) => @@ -105,7 +105,7 @@ test('Submit the surname "Polo" in the HTML form', function (done) { ); ``` -Підтвердьте, що текст всередині елемента `span#surname` – це `'Colombo'`. +Ви повинні підтвердити, що текстом всередині елемента `span#surname` є `'Colombo'`. ```js (getUserInput) => @@ -121,7 +121,7 @@ test('Submit the surname "Polo" in the HTML form', function (done) { ); ``` -Підтвердьте, що елемент `span#dates` існує, а його підрахунок - 1. +Ви повинні підтвердити, що існує лише один елемент `span#dates`. ```js (getUserInput) => diff --git a/curriculum/challenges/ukrainian/06-quality-assurance/quality-assurance-and-testing-with-chai/simulate-actions-using-a-headless-browser.md b/curriculum/challenges/ukrainian/06-quality-assurance/quality-assurance-and-testing-with-chai/simulate-actions-using-a-headless-browser.md index 970b547654e..26df2091214 100644 --- a/curriculum/challenges/ukrainian/06-quality-assurance/quality-assurance-and-testing-with-chai/simulate-actions-using-a-headless-browser.md +++ b/curriculum/challenges/ukrainian/06-quality-assurance/quality-assurance-and-testing-with-chai/simulate-actions-using-a-headless-browser.md @@ -9,19 +9,19 @@ dashedName: simulate-actions-using-a-headless-browser Нагадуємо, що цей проєкт створюється на основі наступного стартового проєкту на Replit або клонований з GitHub. -У наступних завданнях ви зможете імітувати взаємодію людини зі сторінкою за допомогою браузера без графічного інтерфейсу. +У наступних завданнях ви будете імітувати взаємодію людини зі сторінкою, використовуючи headless браузер. -Headless browsers - це веб-браузери без GUI (графічного інтерфейсу). Вони можуть візуалізувати та інтерпретувати HTML, CSS та JavaScript так само і звичайний браузер, що робить їх надзвичайно корисними для тестування веб-сторінок. +Headless браузери – це веббраузери без графічного інтерфейсу користувача. Вони можуть візуалізувати та інтерпретувати HTML, CSS та JavaScript так само, як і звичайний браузер, що робить їх надзвичайно корисними для тестування вебсторінок. -Для вирішення наступних завдань ви будете використовувати Zombie.js - це легкий браузер без графічного інтерфейсу, який не покладається на встановлення додаткових бінарних файлів. Ця функція робить його придатним для використання в обмежених середовищах, таких як Replit. Але є ще багато інших потужніших опцій браузера без графічного інтерфейсу. +Для вирішення наступних завдань ви будете використовувати Zombie.js – це легкий браузер без графічного інтерфейсу, який не покладається на встановлення додаткових двійкових файлів. Це робить його придатним для використання в обмежених середовищах, наприклад Replit. Але існує і багато інших потужніших опцій headless браузера. -Mocha дозволяє вам запустити певний код перед виконанням будь-якого реального тесту. Це може бути корисним для таких дій, як додавання записів до бази даних, які будуть використовуватися в решті тестів. +Mocha дозволяє вам запустити певний код перед виконанням самого тесту. Це може бути корисним для таких дій, як додавання записів до бази даних, які будуть використовуватися в решті тестів. У headless браузері перед запуском тестів вам потрібно **відвідати** сторінку, яку ви тестуватимете. -Хук `suiteSetup` виконується лише один раз, на початку тестового набору. +Хук `suiteSetup` виконується лише один раз, на початку набору тестів. -Існує кілька інших типів хуків, які можуть виконувати код перед кожним тестом, після кожного тесту або в кінці набору тестів. Для більш детальної інформації перегляньте документацію Mocha. +Існують й інші типи хуків, які можуть виконувати код перед кожним тестом, після кожного тесту або в кінці набору тестів. Для детальної інформації перегляньте документацію Mocha. # --instructions-- @@ -31,13 +31,13 @@ Mocha дозволяє вам запустити певний код перед Browser.site = 'https://boilerplate-mochachai.your-username.repl.co'; // Your URL here ``` -Потім на кореневому рівні `'Functional Tests with Zombie.js'`, створіть екземпляр нового об'єкта `Browser` з наступним кодом: +Потім на кореневому рівні набору `'Functional Tests with Zombie.js'` створіть новий екземпляр об'єкта `Browser` з наступним кодом: ```js const browser = new Browser(); ``` -І використовуйте хук `suiteSetup`, щоб направити `browser` до маршруту `/` за наступним кодом: +І використайте хук `suiteSetup`, щоб направити `browser` до маршруту `/` з наступним кодом: ```js suiteSetup(function(done) { diff --git a/curriculum/challenges/ukrainian/06-quality-assurance/quality-assurance-and-testing-with-chai/test-for-truthiness.md b/curriculum/challenges/ukrainian/06-quality-assurance/quality-assurance-and-testing-with-chai/test-for-truthiness.md index 63a49e8810f..0435c81ded3 100644 --- a/curriculum/challenges/ukrainian/06-quality-assurance/quality-assurance-and-testing-with-chai/test-for-truthiness.md +++ b/curriculum/challenges/ukrainian/06-quality-assurance/quality-assurance-and-testing-with-chai/test-for-truthiness.md @@ -10,7 +10,7 @@ dashedName: test-for-truthiness Нагадуємо, що цей проєкт створюється на основі наступного стартового проєкту на Replit або клонований з GitHub. -`isTrue()` протестує логічне значення `true` та `isNotTrue()` передасть дані, коли отримає будь-що окрім логічного значення `true`. +`isTrue()` перевірить булеве значення `true`, а `isNotTrue()` буде передане, якщо задано щось інше, а не `true`. ```js assert.isTrue(true, 'This will pass with the boolean value true'); @@ -18,7 +18,7 @@ assert.isTrue('true', 'This will NOT pass with the string value "true"'); assert.isTrue(1, 'This will NOT pass with the number value 1'); ``` -`isFalse()` та `isNotFalse()` також існують, і мають схожу поведінку до своїх true двійників, якщо тільки не шукають логічне значення `false`. +`isFalse()` та `isNotFalse()` також існують, і мають схожу поведінку до своїх true-двійників, але шукають булеве значення `false`. # --instructions-- diff --git a/curriculum/challenges/ukrainian/06-quality-assurance/quality-assurance-and-testing-with-chai/test-if-a-string-contains-a-substring.md b/curriculum/challenges/ukrainian/06-quality-assurance/quality-assurance-and-testing-with-chai/test-if-a-string-contains-a-substring.md index 93b7a7e9c9b..5b27cdd7a9d 100644 --- a/curriculum/challenges/ukrainian/06-quality-assurance/quality-assurance-and-testing-with-chai/test-if-a-string-contains-a-substring.md +++ b/curriculum/challenges/ukrainian/06-quality-assurance/quality-assurance-and-testing-with-chai/test-if-a-string-contains-a-substring.md @@ -10,7 +10,7 @@ dashedName: test-if-a-string-contains-a-substring Нагадуємо, що цей проєкт створюється на основі наступного стартового проєкту на Replit або клонований з GitHub. -`include()` та `notInclude()` також працює і для рядків! `include()` перевіряє, чи містить фактичний рядок очікуваний підрядок. +`include()` та `notInclude()` працюють й для рядків! `include()` підтверджує, що рядок містить очікуваний підрядок. # --instructions-- diff --git a/curriculum/challenges/ukrainian/06-quality-assurance/quality-assurance-and-testing-with-chai/test-if-a-value-falls-within-a-specific-range.md b/curriculum/challenges/ukrainian/06-quality-assurance/quality-assurance-and-testing-with-chai/test-if-a-value-falls-within-a-specific-range.md index 838e38a4d63..21ee1f5383c 100644 --- a/curriculum/challenges/ukrainian/06-quality-assurance/quality-assurance-and-testing-with-chai/test-if-a-value-falls-within-a-specific-range.md +++ b/curriculum/challenges/ukrainian/06-quality-assurance/quality-assurance-and-testing-with-chai/test-if-a-value-falls-within-a-specific-range.md @@ -14,13 +14,13 @@ dashedName: test-if-a-value-falls-within-a-specific-range .approximately(actual, expected, delta, [message]) ``` -Перевіряє, щоб `actual` дорівнював `expected`, у межах +/- `delta` діапазону. +Підтверджує, що `actual` рівний `expected`, у межах діапазону +/- `delta`. # --instructions-- У межах `tests/1_unit-tests.js` під тестом з міткою `#10` в наборі `Comparisons` змініть кожен `assert` на `assert.approximately`, щоб пройти тест (повинен дорівнювати `true`). -Виберіть мінімальний діапазон (третій параметр) для того, щоб тест можна було проходити завжди. Він має бути менше ніж 1. +Виберіть мінімальний діапазон (третій параметр) для того, щоб тест завжди проходив. Він повинен бути менший за 1. # --hints-- @@ -38,7 +38,7 @@ dashedName: test-if-a-value-falls-within-a-specific-range ); ``` -Оберіть правильний діапазон для першого твердження - `approximately(actual, expected, range)`. +Ви повинні обрати правильний діапазон для першого твердження: `approximately(actual, expected, range)`. ```js (getUserInput) => @@ -57,7 +57,7 @@ dashedName: test-if-a-value-falls-within-a-specific-range ); ``` -Оберіть правильний діапазон для другого твердження - `approximately(actual, expected, range)`. +Ви повинні обрати правильний діапазон для другого твердження: `approximately(actual, expected, range)`. ```js (getUserInput) => diff --git a/curriculum/challenges/ukrainian/06-quality-assurance/quality-assurance-and-testing-with-chai/test-if-a-value-is-a-string.md b/curriculum/challenges/ukrainian/06-quality-assurance/quality-assurance-and-testing-with-chai/test-if-a-value-is-a-string.md index cdce079b40a..54a2bd77648 100644 --- a/curriculum/challenges/ukrainian/06-quality-assurance/quality-assurance-and-testing-with-chai/test-if-a-value-is-a-string.md +++ b/curriculum/challenges/ukrainian/06-quality-assurance/quality-assurance-and-testing-with-chai/test-if-a-value-is-a-string.md @@ -10,7 +10,7 @@ dashedName: test-if-a-value-is-a-string Нагадуємо, що цей проєкт створюється на основі наступного стартового проєкту на Replit або клонований з GitHub. -`isString` або `isNotString` стверджує, що фактичне значення - це рядок. +`isString` або `isNotString` підтверджує, що значення є рядком. # --instructions-- diff --git a/curriculum/challenges/ukrainian/06-quality-assurance/quality-assurance-and-testing-with-chai/test-if-a-value-is-of-a-specific-data-structure-type.md b/curriculum/challenges/ukrainian/06-quality-assurance/quality-assurance-and-testing-with-chai/test-if-a-value-is-of-a-specific-data-structure-type.md index 3b604d3bce6..e4a861a9995 100644 --- a/curriculum/challenges/ukrainian/06-quality-assurance/quality-assurance-and-testing-with-chai/test-if-a-value-is-of-a-specific-data-structure-type.md +++ b/curriculum/challenges/ukrainian/06-quality-assurance/quality-assurance-and-testing-with-chai/test-if-a-value-is-of-a-specific-data-structure-type.md @@ -10,7 +10,7 @@ dashedName: test-if-a-value-is-of-a-specific-data-structure-type Нагадуємо, що цей проєкт створюється на основі наступного стартового проєкту на Replit або клонований з GitHub. -`#typeOf` стверджує, що тип значення - це заданий рядок, що визначено `Object.prototype.toString`. +`#typeOf` підтверджує, що типом значення є наданий рядок, визначений `Object.prototype.toString`. # --instructions-- @@ -104,7 +104,7 @@ dashedName: test-if-a-value-is-of-a-specific-data-structure-type ); ``` -Потрібно обрати правильний метод для п'ятого твердження –`typeOf` або `notTypeOf`. +Ви повинні обрати правильний метод для п'ятого твердження: `typeOf` або `notTypeOf`. ```js (getUserInput) => diff --git a/curriculum/challenges/ukrainian/06-quality-assurance/quality-assurance-and-testing-with-chai/test-if-an-object-has-a-property.md b/curriculum/challenges/ukrainian/06-quality-assurance/quality-assurance-and-testing-with-chai/test-if-an-object-has-a-property.md index 67f243a2f89..6f3a34377ea 100644 --- a/curriculum/challenges/ukrainian/06-quality-assurance/quality-assurance-and-testing-with-chai/test-if-an-object-has-a-property.md +++ b/curriculum/challenges/ukrainian/06-quality-assurance/quality-assurance-and-testing-with-chai/test-if-an-object-has-a-property.md @@ -10,7 +10,7 @@ dashedName: test-if-an-object-has-a-property Нагадуємо, що цей проєкт створюється на основі наступного стартового проєкту на Replit або клонований з GitHub. -`property` стверджує, що певний об'єкт має задану властивість. +`property` підтверджує, що об'єкт має надану властивість. # --instructions-- diff --git a/curriculum/challenges/ukrainian/06-quality-assurance/quality-assurance-and-testing-with-chai/test-if-an-object-is-an-instance-of-a-constructor.md b/curriculum/challenges/ukrainian/06-quality-assurance/quality-assurance-and-testing-with-chai/test-if-an-object-is-an-instance-of-a-constructor.md index a0a7c12ae8e..e29fdf03588 100644 --- a/curriculum/challenges/ukrainian/06-quality-assurance/quality-assurance-and-testing-with-chai/test-if-an-object-is-an-instance-of-a-constructor.md +++ b/curriculum/challenges/ukrainian/06-quality-assurance/quality-assurance-and-testing-with-chai/test-if-an-object-is-an-instance-of-a-constructor.md @@ -10,7 +10,7 @@ dashedName: test-if-an-object-is-an-instance-of-a-constructor Нагадуємо, що цей проєкт створюється на основі наступного стартового проєкту на Replit або клонований з GitHub. -`#instanceOf` стверджує, що об'єкт є екземпляром конструктора. +`#instanceOf` підтверджує, що об'єкт є екземпляром конструктора. # --instructions-- diff --git a/curriculum/challenges/ukrainian/06-quality-assurance/quality-assurance-and-testing-with-chai/use-assert.isok-and-assert.isnotok.md b/curriculum/challenges/ukrainian/06-quality-assurance/quality-assurance-and-testing-with-chai/use-assert.isok-and-assert.isnotok.md index 0e72b967f6f..7757a8edc8e 100644 --- a/curriculum/challenges/ukrainian/06-quality-assurance/quality-assurance-and-testing-with-chai/use-assert.isok-and-assert.isnotok.md +++ b/curriculum/challenges/ukrainian/06-quality-assurance/quality-assurance-and-testing-with-chai/use-assert.isok-and-assert.isnotok.md @@ -10,9 +10,9 @@ dashedName: use-assert-isok-and-assert-isnotok Нагадуємо, що цей проєкт створюється на основі наступного стартового проєкту на Replit або клонований з GitHub. -`isOk()` перевіряє правдиве значення, а `isNotOk()` перевіряє хибне значення. +`isOk()` перевіряє істинне значення, а `isNotOk()` перевіряє хибне значення. -To learn more about truthy and falsy values, try our Falsy Bouncer challenge. +Щоб дізнатися більше про істинні й хибні значення, див. наше завдання Falsy Bouncer. # --instructions-- diff --git a/curriculum/challenges/ukrainian/06-quality-assurance/quality-assurance-and-testing-with-chai/use-regular-expressions-to-test-a-string.md b/curriculum/challenges/ukrainian/06-quality-assurance/quality-assurance-and-testing-with-chai/use-regular-expressions-to-test-a-string.md index 0ed65cfcf29..8ff8c58f81b 100644 --- a/curriculum/challenges/ukrainian/06-quality-assurance/quality-assurance-and-testing-with-chai/use-regular-expressions-to-test-a-string.md +++ b/curriculum/challenges/ukrainian/06-quality-assurance/quality-assurance-and-testing-with-chai/use-regular-expressions-to-test-a-string.md @@ -10,7 +10,7 @@ dashedName: use-regular-expressions-to-test-a-string Нагадуємо, що цей проєкт створюється на основі наступного стартового проєкту на Replit або клонований з GitHub. -`match()` стверджує, що фактичне значення відповідає звичайному виразу другого аргументу. +`match()` підтверджує, що значення відповідає регулярному виразу другого аргументу. # --instructions-- diff --git a/curriculum/challenges/ukrainian/06-quality-assurance/quality-assurance-projects/american-british-translator.md b/curriculum/challenges/ukrainian/06-quality-assurance/quality-assurance-projects/american-british-translator.md index e0e01a56d57..7ada149a2c1 100644 --- a/curriculum/challenges/ukrainian/06-quality-assurance/quality-assurance-projects/american-british-translator.md +++ b/curriculum/challenges/ukrainian/06-quality-assurance/quality-assurance-projects/american-british-translator.md @@ -69,7 +69,7 @@ dashedName: american-british-translator # --hints-- -Я можу надати власний проєкт, а не URL-адресу прикладу. +You should provide your own project, not the example URL. ```js (getUserInput) => { diff --git a/curriculum/challenges/ukrainian/10-coding-interview-prep/rosetta-code/i-before-e-except-after-c.md b/curriculum/challenges/ukrainian/10-coding-interview-prep/rosetta-code/i-before-e-except-after-c.md index 7adb0768db6..34539ad219e 100644 --- a/curriculum/challenges/ukrainian/10-coding-interview-prep/rosetta-code/i-before-e-except-after-c.md +++ b/curriculum/challenges/ukrainian/10-coding-interview-prep/rosetta-code/i-before-e-except-after-c.md @@ -35,43 +35,43 @@ dashedName: i-before-e-except-after-c assert(typeof IBeforeExceptC == 'function'); ``` -`IBeforeExceptC("receive")` має повертати логічне значення. +`IBeforeExceptC("receive")` повинен повертати булеве значення. ```js assert(typeof IBeforeExceptC('receive') == 'boolean'); ``` -`IBeforeExceptC("receive")` має повертати `true`. +`IBeforeExceptC("receive")` повинен повертати `true`. ```js assert.equal(IBeforeExceptC('receive'), true); ``` -`IBeforeExceptC("science")` має повертати `false`. +`IBeforeExceptC("science")` повинен повертати `false`. ```js assert.equal(IBeforeExceptC('science'), false); ``` -`IBeforeExceptC("imperceivable")` має повертати `true`. +`IBeforeExceptC("imperceivable")` повинен повертати `true`. ```js assert.equal(IBeforeExceptC('imperceivable'), true); ``` -`IBeforeExceptC("inconceivable")` має повертати `true`. +`IBeforeExceptC("inconceivable")` повинен повертати `true`. ```js assert.equal(IBeforeExceptC('inconceivable'), true); ``` -`IBeforeExceptC("insufficient")` має повертати `false`. +`IBeforeExceptC("insufficient")` повинен повертати `false`. ```js assert.equal(IBeforeExceptC('insufficient'), false); ``` -`IBeforeExceptC("omniscient")` має повертати `false`. +`IBeforeExceptC("omniscient")` повинен повертати `false`. ```js assert.equal(IBeforeExceptC('omniscient'), false); diff --git a/curriculum/challenges/ukrainian/14-responsive-web-design-22/learn-css-grid-by-building-a-magazine/6148d3fff5186b57123d97e2.md b/curriculum/challenges/ukrainian/14-responsive-web-design-22/learn-css-grid-by-building-a-magazine/6148d3fff5186b57123d97e2.md index e9df03e4fa1..01da138b9d0 100644 --- a/curriculum/challenges/ukrainian/14-responsive-web-design-22/learn-css-grid-by-building-a-magazine/6148d3fff5186b57123d97e2.md +++ b/curriculum/challenges/ukrainian/14-responsive-web-design-22/learn-css-grid-by-building-a-magazine/6148d3fff5186b57123d97e2.md @@ -24,7 +24,7 @@ assert(new __helpers.CSSHelp(document).getStyle('.quote::before')); Ваш селектор `.quote::before` повинен мати властивість `content` зі значенням `'" '`. ```js -assert(new __helpers.CSSHelp(document).getStyle('.quote::before')?.content?.match(/\\?\"\s/)); +assert(new __helpers.CSSHelp(document).getStyle('.quote::before')?.content?.match(/\"\\"\s\"/)); ``` Ви повинні мати селектор `.quote::after`. @@ -36,7 +36,7 @@ assert(new __helpers.CSSHelp(document).getStyle('.quote::after')); Ваш селектор `.quote::after` повинен мати властивість `content` зі значенням `' "'`. ```js -assert(new __helpers.CSSHelp(document).getStyle('.quote::after')?.content?.match(/\s\\?\"/)); +assert(new __helpers.CSSHelp(document).getStyle('.quote::after')?.content?.match(/\"\s\\""/)); ``` # --seed-- diff --git a/curriculum/challenges/ukrainian/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5f07be6ef7412fbad0c5626b.md b/curriculum/challenges/ukrainian/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5f07be6ef7412fbad0c5626b.md index df6d4553fb0..0ac5a5ae246 100644 --- a/curriculum/challenges/ukrainian/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5f07be6ef7412fbad0c5626b.md +++ b/curriculum/challenges/ukrainian/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5f07be6ef7412fbad0c5626b.md @@ -22,7 +22,7 @@ assert(document.querySelector('section')); Ваш елемент `section` повинен мати кінцевий теґ. Кінцеві теґи мають `/` відразу після символу `<`. ```js -assert(code.match(/<\/section\>/)); +assert(code.match(/<\/section\s*>/i)); ``` Весь елемент `section` повинен бути між початковим та кінцевим теґами елемента `main`. @@ -57,15 +57,15 @@ assert.isFalse(includesH1); --fcc-editable-region-- -

CatPhotoApp

+

Cat Photos

Click here to view more cat photos.

A cute orange cat lying on its back. -
+ --fcc-editable-region-- diff --git a/curriculum/challenges/ukrainian/15-javascript-algorithms-and-data-structures-22/build-a-caesars-cipher-project/caesars-cipher.md b/curriculum/challenges/ukrainian/15-javascript-algorithms-and-data-structures-22/build-a-caesars-cipher-project/caesars-cipher.md index b4025c1a63a..f7506337043 100644 --- a/curriculum/challenges/ukrainian/15-javascript-algorithms-and-data-structures-22/build-a-caesars-cipher-project/caesars-cipher.md +++ b/curriculum/challenges/ukrainian/15-javascript-algorithms-and-data-structures-22/build-a-caesars-cipher-project/caesars-cipher.md @@ -18,25 +18,25 @@ dashedName: build-a-caesars-cipher # --hints-- -`rot13("SERR PBQR PNZC")` повинен декодувати рядок `FREE CODE CAMP` +`rot13("SERR PBQR PNZC")` повинен розшифруватись як рядок `FREE CODE CAMP` ```js assert(rot13('SERR PBQR PNZC') === 'FREE CODE CAMP'); ``` -`rot13("SERR CVMMN!")` повинен декодувати рядок `FREE PIZZA!` +`rot13("SERR CVMMN!")` повинен розшифруватись як рядок `FREE PIZZA!` ```js assert(rot13('SERR CVMMN!') === 'FREE PIZZA!'); ``` -`rot13("SERR YBIR?")` повинен декодувати рядок `FREE LOVE?` +`rot13("SERR YBIR?")` повинен розшифруватись як рядок `FREE LOVE?` ```js assert(rot13('SERR YBIR?') === 'FREE LOVE?'); ``` -`rot13("GUR DHVPX OEBJA SBK WHZCF BIRE GUR YNML QBT.")` повинен декодувати рядок `THE QUICK BROWN FOX JUMPS OVER THE LAZY DOG.` +`rot13("GUR DHVPX OEBJA SBK WHZCF BIRE GUR YNML QBT.")` повинен розшифруватись як рядок `THE QUICK BROWN FOX JUMPS OVER THE LAZY DOG.` ```js assert( diff --git a/curriculum/challenges/ukrainian/15-javascript-algorithms-and-data-structures-22/build-a-cash-register-project/cash-register.md b/curriculum/challenges/ukrainian/15-javascript-algorithms-and-data-structures-22/build-a-cash-register-project/cash-register.md index 379ef3ee991..d8a8eab534e 100644 --- a/curriculum/challenges/ukrainian/15-javascript-algorithms-and-data-structures-22/build-a-cash-register-project/cash-register.md +++ b/curriculum/challenges/ukrainian/15-javascript-algorithms-and-data-structures-22/build-a-cash-register-project/cash-register.md @@ -14,11 +14,11 @@ dashedName: build-a-cash-register Функція `checkCashRegister()` завжди повинна повертати об'єкт з ключем `status` та ключем `change`. -Повернути `{status: "INSUFFICIENT_FUNDS", change: []}`, якщо сума готівки в касі менша за здачу, або ви не можете віддати здачу. +Поверніть `{status: "INSUFFICIENT_FUNDS", change: []}`, якщо сума готівки в касі менша за здачу, або ви не можете віддати здачу. -Повернути `{status: "CLOSED", change: [...]}` з сумою в касі як значення ключа `change`, якщо вона дорівнює здачі. +Поверніть `{status: "CLOSED", change: [...]}` з сумою в касі як значення ключа `change`, якщо вона дорівнює здачі. -В іншому випадку, повернути `{status: "OPEN", change: [...]}` зі здачею в монетах і банкнотах, в порядку від найбільшої до найменшої, як значення ключа `change`. +В іншому випадку, поверніть `{status: "OPEN", change: [...]}` зі здачею в монетах і банкнотах, в порядку від найбільшої до найменшої, як значення ключа `change`.
Грошовий обігСума
Пенні$0.01 (ПЕННІ)
Нікель$0.05 (НІКЕЛЬ)
Дайм$0.1 (ДАЙМ)
Чверть$0.25 (ЧВЕРТЬ)
Долар$1 (ОДИН)
П'ять доларів$5 (П'ЯТЬ)
Десять доларів$10 (ДЕСЯТЬ)
Двадцять доларів$20 (ДВАДЦЯТЬ)
Сто доларів$100 (СТО)
diff --git a/curriculum/challenges/ukrainian/15-javascript-algorithms-and-data-structures-22/build-a-palindrome-checker-project/palindrome-checker.md b/curriculum/challenges/ukrainian/15-javascript-algorithms-and-data-structures-22/build-a-palindrome-checker-project/palindrome-checker.md index 1e14d4e283d..ca10feef64f 100644 --- a/curriculum/challenges/ukrainian/15-javascript-algorithms-and-data-structures-22/build-a-palindrome-checker-project/palindrome-checker.md +++ b/curriculum/challenges/ukrainian/15-javascript-algorithms-and-data-structures-22/build-a-palindrome-checker-project/palindrome-checker.md @@ -8,15 +8,15 @@ dashedName: build-a-palindrome-checker # --description-- -Повернути `true`, якщо заданий рядок є паліндромом. В іншому випадку, повернути `false`. +Поверніть `true`, якщо заданий рядок є паліндромом. В іншому випадку, поверніть `false`. Паліндром – це слово чи речення, що однаково пишеться в обох напрямках (зліва направо та справа наліво), незважаючи на розділові знаки, велику/малу літеру чи пробіли. **Примітка:** вам потрібно прибрати **всі неалфавітні символи** (розділові знаки, пробіли та символи) і написати весь текст одинаково (великими або малими літерами) для перевірки паліндромів. -Ми будемо пропускати рядки з різними форматами, наприклад `racecar`, `RaceCar` та `race CAR` серед інших. +Ми будемо передавати рядки з різними форматами, наприклад `racecar`, `RaceCar` та `race CAR` серед інших. -Ми також будемо пропускати рядки з спеціальними символами, наприклад `2A3*3a2`, `2A3 3a2` та `2_A3*3#A2`. +Ми також будемо передавати рядки з спеціальними символами, наприклад `2A3*3a2`, `2A3 3a2` та `2_A3*3#A2`. # --hints-- diff --git a/curriculum/challenges/ukrainian/15-javascript-algorithms-and-data-structures-22/build-a-telephone-number-validator-project/telephone-number-validator.md b/curriculum/challenges/ukrainian/15-javascript-algorithms-and-data-structures-22/build-a-telephone-number-validator-project/telephone-number-validator.md index e21555259ce..ae11c2dd9e4 100644 --- a/curriculum/challenges/ukrainian/15-javascript-algorithms-and-data-structures-22/build-a-telephone-number-validator-project/telephone-number-validator.md +++ b/curriculum/challenges/ukrainian/15-javascript-algorithms-and-data-structures-22/build-a-telephone-number-validator-project/telephone-number-validator.md @@ -8,13 +8,13 @@ dashedName: build-a-telephone-number-validator # --description-- -Повернути `true`, якщо наданий рядок виглядає як дійсний мобільний номер США. +Поверніть `true`, якщо наданий рядок виглядає як дійсний мобільний номер США. -Користувач може заповнити поле форми в будь-який спосіб, тільки якщо він має формат дійсного номера США. Нижче наведені приклади припустимих форматів номерів США (для інших варіантів посилайтесь на тести, подані нижче): +Користувач може заповнити поле форми в будь-який спосіб, тільки якщо він має формат дійсного номера США. Нижче наведені приклади дійсних форматів номерів США (для інших варіантів посилайтесь на тести, подані нижче):
555-555-5555
(555)555-5555
(555) 555-5555
555 555 5555
5555555555
1 555 555 5555
-В цьому челенджі вам буде надано рядок, наприклад `800-692-7753` або `8oo-six427676;laskdjf`. Ваше завдання – підтвердити або відхилити мобільний номер США на основі будь-якої комбінації форматів, наданих вище. Код зони нумерації є обов'язковим. Якщо надано телефонний код країни, то ви повинні підтвердити, що телефонний код країни – `1`. Повернути `true`, якщо рядок є дійсним мобільним номером США; в іншому випадку, повернути `false`. +У цьому завданні вам буде надано рядок, наприклад `800-692-7753` або `8oo-six427676;laskdjf`. Ваше завдання – підтвердити або відхилити мобільний номер США на основі будь-якої комбінації форматів, наданих вище. Код зони нумерації є обов'язковим. Якщо надано телефонний код країни, то ви повинні підтвердити, що телефонний код країни – `1`. Поверніть `true`, якщо рядок є дійсним мобільним номером США; в іншому випадку поверніть `false`. # --hints--