mirror of
https://github.com/freeCodeCamp/freeCodeCamp.git
synced 2025-12-30 12:05:39 -05:00
chore(i18n,learn): processed translations (#48481)
This commit is contained in:
camperbot
@@ -1,6 +1,6 @@
|
||||
---
|
||||
id: 587d7fa8367417b2b2512bca
|
||||
title: تغيير تقديم مخطط بياني للأعمدة (Bar Chart)
|
||||
title: تغيير مخطط بياني شريطي (Bar Chart)
|
||||
challengeType: 6
|
||||
forumTopicId: 301481
|
||||
dashedName: change-the-presentation-of-a-bar-chart
|
||||
@@ -8,21 +8,21 @@ dashedName: change-the-presentation-of-a-bar-chart
|
||||
|
||||
# --description--
|
||||
|
||||
وأنشأ التحدي السابق مخطط بياني للأعمدة (bar chart)، ولكن هناك بعض التغييرات في التنسيق الذي يمكن أن تحسن:
|
||||
وأنشأ التحدي السابق مخطط بياني شريطي (bar chart)، ولكن هناك بعض التغييرات في التنسيق الذي يمكن أن تحسن:
|
||||
|
||||
1) إضافة مساحة بين كل عمود لفصله بصرياً، عن طريق إضافة هامش (margin) إلى CSS لفئة تسمى `bar`
|
||||
1) إضافة مساحة بين كل شريط لفصله بصرياً، عن طريق إضافة هامش (margin) إلى CSS لفئة تسمى `bar`
|
||||
|
||||
2) زيادة ارتفاع (height) الأعمدة لإظهار الفرق في القيم بشكل أفضل، عن طريق ضرب (multiplying) القيمة في عدد لزيادة الارتفاع
|
||||
2) زيادة ارتفاع (height) الأشرطة لإظهار الفرق في القيم بشكل أفضل، عن طريق ضرب (multiplying) القيمة في عدد لزيادة الارتفاع
|
||||
|
||||
# --instructions--
|
||||
|
||||
أولاً، أضف `margin` بقيمة `2px` إلى قئة `bar` في علامة `style`. Next, change the callback function in the `style()` method so it returns a value `10` times the original data value (plus the `px`).
|
||||
أولاً، أضف `margin` بقيمة `2px` إلى قئة `bar` في علامة `style`. بعد ذلك، غيّر وظيفة تعيد تفعيل في `style()` بحيث تنتج `10` أضعاف قيمة البيانات الأصلية (بالإضافة إلى `px`).
|
||||
|
||||
**Note:** Multiplying each data point by the *same* constant only alters the scale. It's like zooming in, and it doesn't change the meaning of the underlying data.
|
||||
**ملاحظة:** ضرب كل نقطة بيانات *بنفس* الثابت فقط يغيّر الحجم. إنه مثل تكبير الصورة، الذي لا يغير المقصود من البيانات الأساسية.
|
||||
|
||||
# --hints--
|
||||
|
||||
The first `div` should have a `height` of `120` pixels and a `margin` of `2` pixels.
|
||||
يجب أن يحتوي أول `div` على `height` بقيمة `120` بكسل (px) و `margin` بقيمة `2` بكسل (px).
|
||||
|
||||
```js
|
||||
assert(
|
||||
@@ -31,7 +31,7 @@ assert(
|
||||
);
|
||||
```
|
||||
|
||||
The second `div` should have a `height` of `310` pixels and a `margin` of `2` pixels.
|
||||
يجب أن يحتوي ثاني `div` على `height` بقيمة `310` بكسل (px) و `margin` بقيمة `2` بكسل (px).
|
||||
|
||||
```js
|
||||
assert(
|
||||
@@ -40,7 +40,7 @@ assert(
|
||||
);
|
||||
```
|
||||
|
||||
The third `div` should have a `height` of `220` pixels and a `margin` of `2` pixels.
|
||||
يجب أن يحتوي ثالث `div` على `height` بقيمة `220` بكسل (px) و `margin` بقيمة `2` بكسل (px).
|
||||
|
||||
```js
|
||||
assert(
|
||||
@@ -49,7 +49,7 @@ assert(
|
||||
);
|
||||
```
|
||||
|
||||
The fourth `div` should have a `height` of `170` pixels and a `margin` of `2` pixels.
|
||||
يجب أن يحتوي رابع `div` على `height` بقيمة `170` بكسل (px) و `margin` بقيمة `2` بكسل (px).
|
||||
|
||||
```js
|
||||
assert(
|
||||
@@ -58,7 +58,7 @@ assert(
|
||||
);
|
||||
```
|
||||
|
||||
The fifth `div` should have a `height` of `250` pixels and a `margin` of `2` pixels.
|
||||
يجب أن يحتوي خامس `div` على `height` بقيمة `250` بكسل (px) و `margin` بقيمة `2` بكسل (px).
|
||||
|
||||
```js
|
||||
assert(
|
||||
@@ -67,7 +67,7 @@ assert(
|
||||
);
|
||||
```
|
||||
|
||||
The sixth `div` should have a `height` of `180` pixels and a `margin` of `2` pixels.
|
||||
يجب أن يحتوي سادس `div` على `height` بقيمة `180` بكسل (px) و `margin` بقيمة `2` بكسل (px).
|
||||
|
||||
```js
|
||||
assert(
|
||||
@@ -76,7 +76,7 @@ assert(
|
||||
);
|
||||
```
|
||||
|
||||
The seventh `div` should have a `height` of `290` pixels and a `margin` of `2` pixels.
|
||||
يجب أن يحتوي سابع `div` على `height` بقيمة `290` بكسل (px) و `margin` بقيمة `2` بكسل (px).
|
||||
|
||||
```js
|
||||
assert(
|
||||
@@ -85,7 +85,7 @@ assert(
|
||||
);
|
||||
```
|
||||
|
||||
The eighth `div` should have a `height` of `140` pixels and a `margin` of `2` pixels.
|
||||
يجب أن يحتوي ثامن `div` على `height` بقيمة `140` بكسل (px) و `margin` بقيمة `2` بكسل (px).
|
||||
|
||||
```js
|
||||
assert(
|
||||
@@ -94,7 +94,7 @@ assert(
|
||||
);
|
||||
```
|
||||
|
||||
The ninth `div` should have a `height` of `90` pixels and a `margin` of `2` pixels.
|
||||
يجب أن يحتوي تاسع `div` على `height` بقيمة `90` بكسل (px) و `margin` بقيمة `2` بكسل (px).
|
||||
|
||||
```js
|
||||
assert(
|
||||
|
||||
@@ -1,6 +1,6 @@
|
||||
---
|
||||
id: 587d7fab367417b2b2512bda
|
||||
title: Create a Linear Scale with D3
|
||||
title: إنشاء مقياس خطي مع D3
|
||||
challengeType: 6
|
||||
forumTopicId: 301483
|
||||
dashedName: create-a-linear-scale-with-d3
|
||||
@@ -8,11 +8,11 @@ dashedName: create-a-linear-scale-with-d3
|
||||
|
||||
# --description--
|
||||
|
||||
The bar and scatter plot charts both plotted data directly onto the SVG canvas. However, if the height of a bar or one of the data points were larger than the SVG height or width values, it would go outside the SVG area.
|
||||
يملأ البيانات المرسومة كل من مخطط بياني شريطي وانسياب (النِّقَاط المبعثرة) على لوحة SVG قاصدًا. بيد أنه إذا كان ارتفاع الشريط أو إحدى نِقَاط البيانات أكبر من الارتفاع أو العرض SVG، ستذهب خارج نطاق SVG.
|
||||
|
||||
In D3, there are scales to help plot data. `scales` are functions that tell the program how to map a set of raw data points onto the pixels of the SVG canvas.
|
||||
في D3، هناك مقاييس للمساعدة في ملأ البيانات. تكون `scales` وظائف (functions) تخبر البرنامَج كيفية ملأ مجموعة من نِقَاط البيانات الخام على البكسلات (px) في لوحة SVG.
|
||||
|
||||
For example, say you have a 100x500-sized SVG canvas and you want to plot Gross Domestic Product (GDP) for a number of countries. The set of numbers would be in the billion or trillion-dollar range. You provide D3 a type of scale to tell it how to place the large GDP values into that 100x500-sized area.
|
||||
على سبيل المثال، قل أن لديك لوحة SVG بحجم 100x500، وأنت تريد ملأ الناتج إجمال المحلي (Gross Domestic Product) لعدد من الدول. The set of numbers would be in the billion or trillion-dollar range. You provide D3 a type of scale to tell it how to place the large GDP values into that 100x500-sized area.
|
||||
|
||||
It's unlikely you would plot raw data as-is. Before plotting it, you set the scale for your entire data set, so that the `x` and `y` values fit your canvas width and height.
|
||||
|
||||
|
||||
@@ -1,6 +1,6 @@
|
||||
---
|
||||
id: 587d7fa9367417b2b2512bce
|
||||
title: تعيين الإحداثيات ديناميكيا لكل عمود
|
||||
title: تعيين الإحداثيات ديناميكيا لكل شريط
|
||||
challengeType: 6
|
||||
forumTopicId: 301487
|
||||
dashedName: dynamically-set-the-coordinates-for-each-bar
|
||||
@@ -8,11 +8,11 @@ dashedName: dynamically-set-the-coordinates-for-each-bar
|
||||
|
||||
# --description--
|
||||
|
||||
التحدي السابق أنشئت وألحقت مستطيل بعنصر `svg` لكل نقطة في `dataset` لتستعرض عمود. لسوء الحظ، كانوا مكدسين بعضَهم فوق بعض.
|
||||
التحدي السابق أنشئت وألحقت مستطيل بعنصر `svg` لكل نقطة في `dataset` لتستعرض شريط. لسوء الحظ، كانوا مكدسين بعضَهم فوق بعض.
|
||||
|
||||
يمكنك تحكم في موضع المستطيل بواسطة أستخدام سمات (attributes) تسمى `x` و `y`. لتخبر D3 أين يبدأ في رسم الشكل في منطقة `svg`. قام التحدي السابق بتحديدهم إلى صفر، لذلك تم وضع كل عمود (bar) في الزاوية العلوية اليسرى.
|
||||
|
||||
للحصول على مخطط بياني للأعمدة (bar chart)، يجب أن تجلس جميع الأعمدة على نفس المستوى العمودي، مما يعني أن قيمة `y` تبقى هي نفسها (عند 0) لجميع الأعمدة. ومع ذلك، تحتاج قيمة `x` إلى التغيير عند إضافة أعمدة جديد. تذكر أن أكبر قيم من `x` تدفع العناصر إلى أقصى اليمين. عندما تمر عبر عناصر القائمة في `dataset`، يجب أن تزيد قيمة `x`.
|
||||
للحصول على مخطط بياني شريطي (bar chart)، يجب أن تجلس جميع الشريط على نفس المستوى العمودي، مما يعني أن قيمة `y` تبقى هي نفسها (عند 0) لجميع الأشرطة. ومع ذلك، تحتاج قيمة `x` إلى التغيير عند إضافة الشريط جديد. تذكر أن أكبر قيم من `x` تدفع العناصر إلى أقصى اليمين. عندما تمر عبر عناصر القائمة في `dataset`، يجب أن تزيد قيمة `x`.
|
||||
|
||||
تقبل طريقة (method) تسمى `attr()` في D3 الوظيفة تعيد تفعيل (callback functon) التي تعيين تلك السمة ديناميكيا. وظيفة تعيد تفعيل (callback functon) تأخذ حجيتين (arguments)، واحد لنقطة البيانات نفسها (عادة `d`) وواحد لترتيب نقطة البيانات في القائمة (array). أما الحِجَّة (argument) الثانية تدل على الترتيب فهي حِجَّة اختيارية. إليك التنسيق:
|
||||
|
||||
@@ -28,7 +28,7 @@ selection.attr("property", (d, i) => {
|
||||
|
||||
غيّر سمة `x` في وظيفة تعيد تفعيل بحيث ترجع الترتيب 30 مرة.
|
||||
|
||||
**ملاحظة:** كل عمود له عرض (width) بقيمة 25، لذا زيادة كل قيمة `x` بمقدار 30 تضيف بعض المساحة بين الأعمدة. أي قيمة أكبر من 25 ستنجح في هذا المثال.
|
||||
**ملاحظة:** كل عمود له عرض (width) بقيمة 25، لذا زيادة كل قيمة `x` بمقدار 30 تضيف بعض المساحة بين الأشرطة. أي قيمة أكبر من 25 ستنجح في هذا المثال.
|
||||
|
||||
# --hints--
|
||||
|
||||
|
||||
@@ -20,7 +20,7 @@ Build an API endpoint, mounted at `GET /name`. Respond with a JSON document, tak
|
||||
|
||||
# --hints--
|
||||
|
||||
Test 1 : Your API endpoint should respond with the correct name
|
||||
Test 1 : Your API endpoint should respond with `{ "name": "Mick Jagger" }` when the `/name` endpoint is called with `?first=Mick&last=Jagger`
|
||||
|
||||
```js
|
||||
(getUserInput) =>
|
||||
@@ -38,7 +38,7 @@ Test 1 : Your API endpoint should respond with the correct name
|
||||
);
|
||||
```
|
||||
|
||||
Test 2 : Your API endpoint should respond with the correct name
|
||||
Test 2 : Your API endpoint should respond with `{ "name": "Keith Richards" }` when the `/name` endpoint is called with `?first=Keith&last=Richards`
|
||||
|
||||
```js
|
||||
(getUserInput) =>
|
||||
|
||||
@@ -313,8 +313,8 @@ async (getUserInput) => {
|
||||
|
||||
let res = await fetch(`${url}/api/threads/fcc_test`);
|
||||
const threads = await res.json();
|
||||
const report_id = threads[0]._id;
|
||||
const data = { report_id };
|
||||
const thread_id = threads[0]._id;
|
||||
const data = { thread_id };
|
||||
|
||||
res = await fetch(`${url}/api/threads/fcc_test`, {
|
||||
method: 'PUT',
|
||||
|
||||
@@ -20,7 +20,7 @@ dashedName: get-query-parameter-input-from-the-client
|
||||
|
||||
# --hints--
|
||||
|
||||
測試 1：你的 API 應該用正確的名字來響應
|
||||
Test 1 : Your API endpoint should respond with `{ "name": "Mick Jagger" }` when the `/name` endpoint is called with `?first=Mick&last=Jagger`
|
||||
|
||||
```js
|
||||
(getUserInput) =>
|
||||
@@ -38,7 +38,7 @@ dashedName: get-query-parameter-input-from-the-client
|
||||
);
|
||||
```
|
||||
|
||||
測試 2：你的 API 應該用正確的名字來響應
|
||||
Test 2 : Your API endpoint should respond with `{ "name": "Keith Richards" }` when the `/name` endpoint is called with `?first=Keith&last=Richards`
|
||||
|
||||
```js
|
||||
(getUserInput) =>
|
||||
|
||||
@@ -313,8 +313,8 @@ async (getUserInput) => {
|
||||
|
||||
let res = await fetch(`${url}/api/threads/fcc_test`);
|
||||
const threads = await res.json();
|
||||
const report_id = threads[0]._id;
|
||||
const data = { report_id };
|
||||
const thread_id = threads[0]._id;
|
||||
const data = { thread_id };
|
||||
|
||||
res = await fetch(`${url}/api/threads/fcc_test`, {
|
||||
method: 'PUT',
|
||||
|
||||
@@ -20,7 +20,7 @@ dashedName: get-query-parameter-input-from-the-client
|
||||
|
||||
# --hints--
|
||||
|
||||
测试 1：你的 API 应该用正确的名字来响应
|
||||
Test 1 : Your API endpoint should respond with `{ "name": "Mick Jagger" }` when the `/name` endpoint is called with `?first=Mick&last=Jagger`
|
||||
|
||||
```js
|
||||
(getUserInput) =>
|
||||
@@ -38,7 +38,7 @@ dashedName: get-query-parameter-input-from-the-client
|
||||
);
|
||||
```
|
||||
|
||||
测试 2：你的 API 应该用正确的名字来响应
|
||||
Test 2 : Your API endpoint should respond with `{ "name": "Keith Richards" }` when the `/name` endpoint is called with `?first=Keith&last=Richards`
|
||||
|
||||
```js
|
||||
(getUserInput) =>
|
||||
|
||||
@@ -313,8 +313,8 @@ async (getUserInput) => {
|
||||
|
||||
let res = await fetch(`${url}/api/threads/fcc_test`);
|
||||
const threads = await res.json();
|
||||
const report_id = threads[0]._id;
|
||||
const data = { report_id };
|
||||
const thread_id = threads[0]._id;
|
||||
const data = { thread_id };
|
||||
|
||||
res = await fetch(`${url}/api/threads/fcc_test`, {
|
||||
method: 'PUT',
|
||||
|
||||
@@ -19,7 +19,7 @@ dashedName: build-a-survey-form
|
||||
1. Dentro del elemento form debe ser **obligatorio** (required) ingresar tu nombre en un campo de `input` que tenga un `id` de `email`
|
||||
1. Si introduces un correo electrónico que no tiene el formato correcto, tú debes ver una alerta de validación en THML5
|
||||
1. Dentro de tu form, tu puedes introducir un número en un campo `input` que tenga un `id` de `number`
|
||||
1. The number input should not accept non-numbers, either by preventing you from typing them or by showing an HTML5 validation error (depending on your browser).
|
||||
1. Las entradas de números no deben aceptar caracteres no numéricos, ya sea impidiendo escribirlos o mostrando un error de validación HTML5 (dependiendo del navegador).
|
||||
1. Si introduces un número fuera del rango de la entrada de números, los cuales están definidos por los atributos `min` y `max`, debes ver una alerta de validación en HTML5
|
||||
1. Para los campos de entrada de nombre, correo electrónico y número, podrás ver los correspondientes elementos `label` en el formulario, que describen el propósito de cada campo con los siguientes ids: `id="name-label"`, `id="email-label"`, y `id="number-label"`
|
||||
1. Para los campos de entrada de nombre, correo electrónico y número, podrás ver un texto provisional que da una descripción o instrucciones para cada campo
|
||||
|
||||
@@ -9,7 +9,7 @@ dashedName: access-multi-dimensional-arrays-with-indexes
|
||||
|
||||
# --description--
|
||||
|
||||
Se puede pensar que un arreglo <dfn>multidimensional</dfn> es como un *arreglo de arreglos*. When you use brackets to access your array, the first set of brackets refers to the entries in the outermost (the first level) array, and each additional pair of brackets refers to the next level of entries inside.
|
||||
Se puede pensar que un arreglo <dfn>multidimensional</dfn> es como un *arreglo de arreglos*. Cuando usas corchetes para acceder a un arreglo, el primer par de corchetes hace referencia a los elementos del arreglo más externo (el primer nivel), y cada par adicional va haciendo referencia a un nivel más interno.
|
||||
|
||||
**Ejemplo**
|
||||
|
||||
|
||||
@@ -11,7 +11,7 @@ dashedName: using-objects-for-lookups
|
||||
|
||||
Los objetos pueden ser considerados como un almacenamiento clave/valor, como un diccionario. Si tienes datos tabulares, puedes utilizar un objeto para hacer una búsqueda de valores en lugar de una declaración `switch` o encadenar `if/else`. Esto es de mucha utilidad cuando se sabe que los datos de entrada están limitados a un cierto rango.
|
||||
|
||||
Here is an example of an article object:
|
||||
Este es un ejemplo de un objeto de artículo:
|
||||
|
||||
```js
|
||||
const article = {
|
||||
@@ -30,7 +30,7 @@ const value = "title";
|
||||
const valueLookup = article[value];
|
||||
```
|
||||
|
||||
`articleAuthor` is the string `Kaashan Hussain`, `articleLink` is the string `https://www.freecodecamp.org/news/a-complete-guide-to-creating-objects-in-javascript-b0e2450655e8/`, and `valueLookup` is the string `How to create objects in JavaScript`.
|
||||
`articleAuthor` es la cadena `Kaashan Hussain`, `articleLink` es la cadena `https://www.freecodecamp.org/news/a-complete-guide-to-creating-objects-in-javascript-b0e2450655e8/`, y `valueLookup` es la cadena `How to create objects in JavaScript`.
|
||||
|
||||
# --instructions--
|
||||
|
||||
|
||||
@@ -24,7 +24,7 @@ Comprueba la ortografía de las dos variables utilizadas en el cálculo de netWo
|
||||
assert(netWorkingCapital === 2);
|
||||
```
|
||||
|
||||
There should be no instances of misspelled variables in the code.
|
||||
No debe haber casos de variables mal escritas en el código.
|
||||
|
||||
```js
|
||||
assert(!code.match(/recievables/g));
|
||||
@@ -36,7 +36,7 @@ La variable `receivables` debe ser declarada y utilizada correctamente en el có
|
||||
assert(code.match(/receivables/g).length == 2);
|
||||
```
|
||||
|
||||
There should be no instances of misspelled variables in the code.
|
||||
No debe haber casos de variables mal escritas en el código.
|
||||
|
||||
```js
|
||||
assert(!code.match(/payable;/g));
|
||||
|
||||
@@ -26,11 +26,11 @@ Las variables `a` y `b` toman el primer y segundo valor del arreglo. Después de
|
||||
|
||||
# --instructions--
|
||||
|
||||
Use a destructuring assignment with the rest parameter to emulate the behavior of `Array.prototype.slice()`. `removeFirstTwo()` should return a sub-array of the original array `list` with the first two elements omitted.
|
||||
Utiliza una asignación de desestructuración con el parámetro rest para emular el comportamiento de `Array.prototype.slice()`. `removeFirstTwo()` debe devolver un sub-arreglo del arreglo original `list` sin los dos primeros elementos.
|
||||
|
||||
# --hints--
|
||||
|
||||
`removeFirstTwo([1, 2, 3, 4, 5])` should be `[3, 4, 5]`
|
||||
`removeFirstTwo([1, 2, 3, 4, 5])` debe devolver `[3, 4, 5]`
|
||||
|
||||
```js
|
||||
const testArr_ = [1, 2, 3, 4, 5];
|
||||
@@ -38,7 +38,7 @@ const testArrWORemoved_ = removeFirstTwo(testArr_);
|
||||
assert(testArrWORemoved_.every((e, i) => e === i + 3) && testArrWORemoved_.length === 3);
|
||||
```
|
||||
|
||||
`removeFirstTwo()` should not modify `list`
|
||||
`removeFirstTwo()` no debe modificar `list`
|
||||
|
||||
```js
|
||||
const testArr_ = [1, 2, 3, 4, 5];
|
||||
|
||||
@@ -58,27 +58,27 @@ myRegex.lastIndex = 0;
|
||||
assert(!myRegex.test('Frank Roosevelt'));
|
||||
```
|
||||
|
||||
Your regex `myRegex` should return `false` for the string `FranklinRoosevelt`
|
||||
Tu expresión regular `myRegex` debe devolver `false` para la cadena `FranklinRoosevelt`
|
||||
|
||||
```js
|
||||
myRegex.lastIndex = 0;
|
||||
assert(!myRegex.test('FranklinRoosevelt'));
|
||||
```
|
||||
|
||||
Your regex `myRegex` should return `false` for the string `EleanorRoosevelt`
|
||||
Tu expresión regular `myRegex` debe devolver `false` para la cadena `EleanorRoosevelt`
|
||||
|
||||
```js
|
||||
myRegex.lastIndex = 0;
|
||||
assert(!myRegex.test('EleanorRoosevelt'));
|
||||
```
|
||||
|
||||
You should use `.test()` to test the regex.
|
||||
Debes usar `.test()` para probar la expresión regular.
|
||||
|
||||
```js
|
||||
assert(code.match(/myRegex.test\(\s*myString\s*\)/));
|
||||
```
|
||||
|
||||
Your result should return `true`.
|
||||
Tu resultado debe devolver `true`.
|
||||
|
||||
```js
|
||||
assert(result === true);
|
||||
|
||||
@@ -14,7 +14,7 @@ En la última lección, el componente que conectaste a Redux se llamó `Presenta
|
||||
|
||||
# --instructions--
|
||||
|
||||
El editor tiene todo el código que has escrito hasta ahora en esta sección. El único cambio es que el componente React se renombra a `Presentational`. Crea un nuevo componente en una constante llamada `Container` que usa `connect` para conectar el componente `Presentational` a Redux. Luego, en el `AppWrapper`, renderiza el componente `Provider` de React Redux. Pasa a `Provider` el `store` Redux como una prop y renderiza `Container` como un hijo. Once everything is set up, you will see the messages app rendered to the page again.
|
||||
El editor tiene todo el código que has escrito hasta ahora en esta sección. El único cambio es que el componente React se renombra a `Presentational`. Crea un nuevo componente en una constante llamada `Container` que usa `connect` para conectar el componente `Presentational` a Redux. Luego, en el `AppWrapper`, renderiza el componente `Provider` de React Redux. Pasa a `Provider` el `store` Redux como una prop y renderiza `Container` como un hijo. Una vez que todo esté configurado, verás que la aplicación de mensajes vuelve a aparecer en la página.
|
||||
|
||||
# --hints--
|
||||
|
||||
|
||||
@@ -20,7 +20,7 @@ Construye un endpoint para el API, montado en `GET /name`. Responde con un docum
|
||||
|
||||
# --hints--
|
||||
|
||||
Prueba 1: El endpoint de tu API debe responder con el nombre correcto
|
||||
Test 1 : Your API endpoint should respond with `{ "name": "Mick Jagger" }` when the `/name` endpoint is called with `?first=Mick&last=Jagger`
|
||||
|
||||
```js
|
||||
(getUserInput) =>
|
||||
@@ -38,7 +38,7 @@ Prueba 1: El endpoint de tu API debe responder con el nombre correcto
|
||||
);
|
||||
```
|
||||
|
||||
Prueba 2: El endpoint de tu API debe responder con el nombre correcto
|
||||
Test 2 : Your API endpoint should respond with `{ "name": "Keith Richards" }` when the `/name` endpoint is called with `?first=Keith&last=Richards`
|
||||
|
||||
```js
|
||||
(getUserInput) =>
|
||||
|
||||
@@ -10,7 +10,7 @@ dashedName: add-a-description-to-your-package-json
|
||||
|
||||
La siguiente parte de un buen archivo package.json es el campo `description`; donde pertenece una descripción corta, pero informativa de tu proyecto.
|
||||
|
||||
If some day you plan to publish a package to npm, this is the string that should sell your idea to the user when they decide whether to install your package or not. Sin embargo, ese no es el único caso de uso para la descripción, es una buena manera de resumir lo que hace un proyecto. Es igual de importante en cualquier proyecto Node.js para ayudar a otros desarrolladores, futuros mantenedores o incluso a tu yo del futuro a entender el proyecto rápidamente.
|
||||
Si algún día planeas publicar un paquete en npm, esta es la cadena que debe vender tu idea al usuario cuando decida si instalar tu paquete o no. Sin embargo, ese no es el único caso de uso para la descripción, es una buena manera de resumir lo que hace un proyecto. Es igual de importante en cualquier proyecto Node.js para ayudar a otros desarrolladores, futuros mantenedores o incluso a tu yo del futuro a entender el proyecto rápidamente.
|
||||
|
||||
Independientemente de lo que planees para tu proyecto, definitivamente se recomienda una descripción. He aquí un ejemplo:
|
||||
|
||||
|
||||
@@ -313,8 +313,8 @@ async (getUserInput) => {
|
||||
|
||||
let res = await fetch(`${url}/api/threads/fcc_test`);
|
||||
const threads = await res.json();
|
||||
const report_id = threads[0]._id;
|
||||
const data = { report_id };
|
||||
const thread_id = threads[0]._id;
|
||||
const data = { thread_id };
|
||||
|
||||
res = await fetch(`${url}/api/threads/fcc_test`, {
|
||||
method: 'PUT',
|
||||
|
||||
@@ -20,7 +20,7 @@ Erstelle einen API-Endpunkt, der unter `GET /name` eingebunden ist. Antworte mit
|
||||
|
||||
# --hints--
|
||||
|
||||
Test 1: Dein API-Endpunkt sollte mit dem richtigen Namen antworten
|
||||
Test 1 : Your API endpoint should respond with `{ "name": "Mick Jagger" }` when the `/name` endpoint is called with `?first=Mick&last=Jagger`
|
||||
|
||||
```js
|
||||
(getUserInput) =>
|
||||
@@ -38,7 +38,7 @@ Test 1: Dein API-Endpunkt sollte mit dem richtigen Namen antworten
|
||||
);
|
||||
```
|
||||
|
||||
Test 2: Dein API-Endpunkt sollte mit dem richtigen Namen antworten
|
||||
Test 2 : Your API endpoint should respond with `{ "name": "Keith Richards" }` when the `/name` endpoint is called with `?first=Keith&last=Richards`
|
||||
|
||||
```js
|
||||
(getUserInput) =>
|
||||
|
||||
@@ -313,8 +313,8 @@ async (getUserInput) => {
|
||||
|
||||
let res = await fetch(`${url}/api/threads/fcc_test`);
|
||||
const threads = await res.json();
|
||||
const report_id = threads[0]._id;
|
||||
const data = { report_id };
|
||||
const thread_id = threads[0]._id;
|
||||
const data = { thread_id };
|
||||
|
||||
res = await fetch(`${url}/api/threads/fcc_test`, {
|
||||
method: 'PUT',
|
||||
|
||||
@@ -20,7 +20,7 @@ Costruisci un endpoint API, montato su `GET /name`. Rispondi con un documento JS
|
||||
|
||||
# --hints--
|
||||
|
||||
Test 1: Il tuo endpoint API dovrebbe rispondere con il nome corretto
|
||||
Test 1 : Your API endpoint should respond with `{ "name": "Mick Jagger" }` when the `/name` endpoint is called with `?first=Mick&last=Jagger`
|
||||
|
||||
```js
|
||||
(getUserInput) =>
|
||||
@@ -38,7 +38,7 @@ Test 1: Il tuo endpoint API dovrebbe rispondere con il nome corretto
|
||||
);
|
||||
```
|
||||
|
||||
Test 2: Il tuo endpoint API dovrebbe rispondere con il nome corretto
|
||||
Test 2 : Your API endpoint should respond with `{ "name": "Keith Richards" }` when the `/name` endpoint is called with `?first=Keith&last=Richards`
|
||||
|
||||
```js
|
||||
(getUserInput) =>
|
||||
|
||||
@@ -313,8 +313,8 @@ async (getUserInput) => {
|
||||
|
||||
let res = await fetch(`${url}/api/threads/fcc_test`);
|
||||
const threads = await res.json();
|
||||
const report_id = threads[0]._id;
|
||||
const data = { report_id };
|
||||
const thread_id = threads[0]._id;
|
||||
const data = { thread_id };
|
||||
|
||||
res = await fetch(`${url}/api/threads/fcc_test`, {
|
||||
method: 'PUT',
|
||||
|
||||
@@ -20,7 +20,7 @@ API エンドポイントを構築し、`GET /name` でマウントしてくだ
|
||||
|
||||
# --hints--
|
||||
|
||||
テスト 1: API エンドポイントは、正しい名前で応答する必要があります。
|
||||
Test 1 : Your API endpoint should respond with `{ "name": "Mick Jagger" }` when the `/name` endpoint is called with `?first=Mick&last=Jagger`
|
||||
|
||||
```js
|
||||
(getUserInput) =>
|
||||
@@ -38,7 +38,7 @@ API エンドポイントを構築し、`GET /name` でマウントしてくだ
|
||||
);
|
||||
```
|
||||
|
||||
テスト 2: API エンドポイントは、正しい名前で応答する必要があります。
|
||||
Test 2 : Your API endpoint should respond with `{ "name": "Keith Richards" }` when the `/name` endpoint is called with `?first=Keith&last=Richards`
|
||||
|
||||
```js
|
||||
(getUserInput) =>
|
||||
|
||||
@@ -313,8 +313,8 @@ async (getUserInput) => {
|
||||
|
||||
let res = await fetch(`${url}/api/threads/fcc_test`);
|
||||
const threads = await res.json();
|
||||
const report_id = threads[0]._id;
|
||||
const data = { report_id };
|
||||
const thread_id = threads[0]._id;
|
||||
const data = { thread_id };
|
||||
|
||||
res = await fetch(`${url}/api/threads/fcc_test`, {
|
||||
method: 'PUT',
|
||||
|
||||
@@ -7,7 +7,7 @@ dashedName: step-1
|
||||
|
||||
# --description--
|
||||
|
||||
ぱたぱたと動く楽しそうなペンギンを作成しながら、CSS の座標変換とアニメーションについてより深く学びましょう。
|
||||
楽しそうにぱたぱたと翼を動かすペンギンを作成しながら、CSS の座標変換とアニメーションについてより深く学びましょう。
|
||||
|
||||
基本的な HTML ボイラープレートから始めましょう。 `DOCTYPE` 宣言、言語を英語に設定した `html` 要素、適切な `meta` タグ一式、`head` 要素、`body` 要素、`title` 要素を追加してください。 また、スタイルシートをページにリンクしてください。
|
||||
|
||||
|
||||
@@ -7,7 +7,7 @@ dashedName: step-3
|
||||
|
||||
# --description--
|
||||
|
||||
`body` 要素の `margin` と `padding` を除去することで、異なるブラウザ間のページの表示を統一してください。
|
||||
異なるブラウザ間のページの表示を統一するため、`body` 要素の `margin` と `padding` を除去してください。
|
||||
|
||||
# --hints--
|
||||
|
||||
|
||||
@@ -7,7 +7,7 @@ dashedName: step-10
|
||||
|
||||
# --description--
|
||||
|
||||
`.ground` 要素の上に `class` が `penguin` の `div` を 1 つ追加してください。 この `div` にペンギンを入れます。
|
||||
`.ground` 要素の上に `class` が `penguin` の `div` を 1 つ追加してください。 この `div` の中にペンギンが入ります。
|
||||
|
||||
# --hints--
|
||||
|
||||
|
||||
@@ -7,7 +7,7 @@ dashedName: step-15
|
||||
|
||||
# --description--
|
||||
|
||||
山が `.ground` 要素を押し下げてしまうのを防ぐために、`position` を適切に設定してページレイアウトのスペースを占有しないようにしてください。
|
||||
山が `.ground` 要素を押し下げてしまうのを防ぐために、`position` を適切に設定して、ページレイアウトのスペースを占有しないようにしてください。
|
||||
|
||||
# --hints--
|
||||
|
||||
|
||||
@@ -7,7 +7,7 @@ dashedName: step-17
|
||||
|
||||
# --description--
|
||||
|
||||
山の要素に重ね合わせレベルを設定して、`.ground` 要素のすぐ後ろにとどまるようにしてください。
|
||||
山の要素に重ね合わせレベルを設定して、`.ground` 要素のすぐ後ろに重なるようにしてください。
|
||||
|
||||
# --hints--
|
||||
|
||||
|
||||
@@ -7,7 +7,7 @@ dashedName: step-31
|
||||
|
||||
# --description--
|
||||
|
||||
_ほとんどの_ペンギンの頭は四角ではありませんね。
|
||||
_だいたいの_ ペンギンの頭は四角ではありませんね。
|
||||
|
||||
ペンギンの頭を少し楕円形にするために、上側の角の半径を `70%`、下側の角の半径を `65%` に設定してください。
|
||||
|
||||
|
||||
@@ -7,7 +7,7 @@ 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. その疑似要素の `content` プロパティを空の文字列に設定してください。
|
||||
ペンギンに胸元の模様をつけるために、`.penguin-body` 要素の最初の子要素になる疑似要素を作成してください。 その疑似要素の `content` プロパティを空の文字列に設定してください。
|
||||
|
||||
# --hints--
|
||||
|
||||
|
||||
@@ -7,7 +7,7 @@ dashedName: step-39
|
||||
|
||||
# --description--
|
||||
|
||||
疑似要素を、直近の位置指定された (positioned) 祖先要素に対して相対配置してください。
|
||||
疑似要素を、直近の位置指定された (つまり position が初期値から変更されている) 祖先要素に対して相対配置してください。
|
||||
|
||||
# --hints--
|
||||
|
||||
|
||||
@@ -7,7 +7,7 @@ dashedName: step-51
|
||||
|
||||
# --description--
|
||||
|
||||
`.face.right` 要素の下に `div` 要素を追加して、 `class` を `chin` に設定してください。
|
||||
`.face.right` 要素の下に `div` 要素を追加して、 `class` を `chin` (あご) に設定してください。
|
||||
|
||||
# --hints--
|
||||
|
||||
|
||||
@@ -7,17 +7,17 @@ dashedName: step-60
|
||||
|
||||
# --description--
|
||||
|
||||
各 `.eye` 要素内に、`class` が `eye-lid` の `div` を 1 つずつ追加してください。
|
||||
各 `.eye` 要素内に、`class` が `eye-lid` (まぶた) の `div` を 1 つずつ追加してください。
|
||||
|
||||
# --hints--
|
||||
|
||||
`.eye.left` 内に `div` 要素を 1 つ追加する必要がありますが、 `--fcc-actual--` 個が見つかりました。
|
||||
`.eye.left` 内に `div` 要素を 1 個追加する必要がありますが、`--fcc-actual--` 個が見つかりました。
|
||||
|
||||
```js
|
||||
assert.equal(document.querySelectorAll('.eye.left > div')?.length ?? 0, 1);
|
||||
```
|
||||
|
||||
`.eye.right` 内に `div` 要素を 1 つ追加する必要がありますが、 `--fcc-actual--` 個が見つかりました。
|
||||
`.eye.right` 内に `div` 要素を 1 個追加する必要がありますが、`--fcc-actual--` 個が見つかりました。
|
||||
|
||||
```js
|
||||
assert.equal(document.querySelectorAll('.eye.right > div')?.length ?? 0, 1);
|
||||
|
||||
@@ -7,7 +7,7 @@ dashedName: step-63
|
||||
|
||||
# --description--
|
||||
|
||||
`.eye.right` 要素の下に `div` 要素を 2 つ追加して、`class` を `blush` に設定してください。 さらに、1 つ目の `.blush` 要素の `class` には `left`、2 つ目の `.blush` 要素の `class` には `right` を追加してください。
|
||||
`.eye.right` 要素の下に `div` 要素を 2 つ追加して、`class` を `blush` (頬の赤らみ) に設定してください。 さらに、1 つ目の `.blush` 要素の `class` には `left`、2 つ目の `.blush` 要素の `class` には `right` を追加してください。
|
||||
|
||||
# --hints--
|
||||
|
||||
|
||||
@@ -7,7 +7,7 @@ dashedName: step-67
|
||||
|
||||
# --description--
|
||||
|
||||
`.blush.right` 要素の下に `div` 要素を 2 つ追加して、それぞれ `class` を `beak` に設定してください。 さらに、1 つ目の `.beak` 要素の `class` には `top`、2 つ目の `.beak` 要素の `class` には `bottom` を追加してください。
|
||||
`.blush.right` 要素の下に `div` 要素を 2 つ追加して、それぞれ `class` を `beak` (くちばし) に設定してください。 さらに、1 つ目の `.beak` 要素の `class` には `top`、2 つ目の `.beak` 要素の `class` には `bottom` を追加してください。
|
||||
|
||||
# --hints--
|
||||
|
||||
|
||||
@@ -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.
|
||||
ペンギンの体が少し地味に見えますね。 おしゃれなペンギンにするために、まずは `class` が `shirt` の `div` 要素を `.penguin-body` 要素の直前に追加してください。
|
||||
|
||||
# --hints--
|
||||
|
||||
You should add a `div` element within `.penguin`. Expected `--fcc-expected--` `div` elements, found `--fcc-actual--`.
|
||||
`.penguin` 内に `div` 要素を 1 つ加える必要があります。 `--fcc-expected--` 個の `div` 要素があるはずですが、`--fcc-actual--` 個となっています。
|
||||
|
||||
```js
|
||||
assert.equal(document.querySelectorAll('.penguin > div')?.length, 3);
|
||||
```
|
||||
|
||||
You should give the new `div` a `class` of `shirt`.
|
||||
新しい `div` の `class` を `shirt` に設定する必要があります。
|
||||
|
||||
```js
|
||||
assert.exists(document.querySelector('.penguin > div.shirt'));
|
||||
```
|
||||
|
||||
You should place the new `div` before `.penguin-body`.
|
||||
新しい `div` は `.penguin-body` の前に置く必要があります。
|
||||
|
||||
```js
|
||||
assert.exists(document.querySelector('.shirt + .penguin-body'));
|
||||
|
||||
@@ -7,17 +7,17 @@ dashedName: step-72
|
||||
|
||||
# --description--
|
||||
|
||||
Within the `.shirt` element, add a `div` with the following emoji as content: 💜
|
||||
`.shirt` 要素内に `div` を追加して、その中に次の絵文字を入れてください: 💜
|
||||
|
||||
# --hints--
|
||||
|
||||
You should add a `div` element within `div.shirt`. Expected `--fcc-expected--` `div` element, found `--fcc-actual--`.
|
||||
`div.shirt` 内に `div` 要素を 1 つ加える必要があります。 `--fcc-expected--` 個の `div` 要素があるはずですが、`--fcc-actual--` 個となっています。
|
||||
|
||||
```js
|
||||
assert.equal(document.querySelectorAll('.shirt > div')?.length, 1);
|
||||
```
|
||||
|
||||
You should give the new `div` a content of `💜`, but found `--fcc-actual--`.
|
||||
新しい `div` の中身は `💜` にする必要がありますが、`--fcc-actual--` となっています。
|
||||
|
||||
```js
|
||||
assert.equal(document.querySelector('.shirt > div')?.textContent, '💜');
|
||||
|
||||
@@ -7,17 +7,17 @@ dashedName: step-73
|
||||
|
||||
# --description--
|
||||
|
||||
Within `.shirt`, after the `div` element, add a `p` element with the following content: `I CSS`
|
||||
`.shirt` 内の `div` 要素の後に、`p` 要素を追加して、中に次のテキストを入れてください: `I CSS`
|
||||
|
||||
# --hints--
|
||||
|
||||
You should add one `p` element within `.shirt`, but found `--fcc-actual--`.
|
||||
`.shirt` 内に `p` 要素を 1 個追加する必要がありますが、`--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--`.
|
||||
`p` 要素の中身を `I CSS` にする必要がありますが、`--fcc-actual--` となっています。
|
||||
|
||||
```js
|
||||
assert.equal(document.querySelector('.shirt > p')?.textContent, 'I CSS');
|
||||
|
||||
@@ -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`.
|
||||
`.shirt` 要素を指定し、`font-size` を `25px` に設定して、`font-family` には `Helvetica` とフォールバックとして `sans-serif` を、`font-weight` には `bold` を設定してください。
|
||||
|
||||
# --hints--
|
||||
|
||||
You should use the `.shirt` selector.
|
||||
`.shirt` セレクターを使用する必要があります。
|
||||
|
||||
```js
|
||||
assert.match(code, /\.shirt\s*\{/);
|
||||
```
|
||||
|
||||
You should give `.shirt` a `font-size` of `--fcc-expected--`, but found `--fcc-actual--`.
|
||||
`.shirt` の `font-size` を `--fcc-expected--` に設定する必要がありますが、`--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--`.
|
||||
`.shirt` の `font-family` を `--fcc-expected--` に設定する必要がありますが、`--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--`.
|
||||
`.shirt` の `font-weight` を `--fcc-expected--` に設定する必要がありますが、`--fcc-actual--` となっています。
|
||||
|
||||
```js
|
||||
assert.equal(new __helpers.CSSHelp(document).getStyle('.shirt')?.fontWeight, 'bold');
|
||||
|
||||
@@ -7,19 +7,19 @@ dashedName: step-75
|
||||
|
||||
# --description--
|
||||
|
||||
If you look closely, the _heart_ emoji is slightly different. This is because some of the character's properties were overridden by the `font-weight` style of `bold`.
|
||||
If you look closely, the _heart_ emoji is slightly different. これは、文字のプロパティの一部が `font-weight` スタイルの `bold` に上書きされたためです。
|
||||
|
||||
Fix this, by targeting the `div` with the heart emoji, and setting its `font-weight` to its original value.
|
||||
ハートの絵文字を含む `div` を選択し、`font-weight` を初期値に設定することでこれを修正してください。
|
||||
|
||||
# --hints--
|
||||
|
||||
You should use the `.shirt div` selector to target the `div` with the heart emoji.
|
||||
`.shirt div` セレクターを使用してハートの絵文字を含む `div` 要素を選択する必要があります。
|
||||
|
||||
```js
|
||||
assert.match(code, /\.shirt div\s*\{/);
|
||||
```
|
||||
|
||||
You should give the `.shirt div` a `font-weight` of `initial` or `normal`.
|
||||
`.shirt div` の `font-weight` を `initial` もしくは `normal` に設定する必要があります。
|
||||
|
||||
```js
|
||||
assert.include(['normal', 'initial'], new __helpers.CSSHelp(document).getStyle('.shirt div')?.fontWeight);
|
||||
|
||||
@@ -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.
|
||||
ハートの絵文字を含む `div` を親要素の上端から `22.5px`、左端から `12px` の位置に配置してください。
|
||||
|
||||
# --hints--
|
||||
|
||||
You should give `.shirt div` a `top` of `--fcc-expected--`, but found `--fcc-actual--`.
|
||||
`.shirt div` の `top` を `--fcc-expected--` に設定する必要がありますが、`--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--`.
|
||||
`.shirt div` の `left` を `--fcc-expected--` に設定する必要がありますが、`--fcc-actual--` が設定されています。
|
||||
|
||||
```js
|
||||
assert.equal(new __helpers.CSSHelp(document).getStyle('.shirt div')?.left, '12px');
|
||||
|
||||
@@ -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.
|
||||
`.shirt` 要素を親要素の上端から `165px`、左端から `127.5px` の位置に配置してください。 また、重ね合わせ順を上げて `.penguin-body` 要素の上に重なって表示されるようにしてください。
|
||||
|
||||
# --hints--
|
||||
|
||||
You should give `.shirt` a `top` of `--fcc-expected--`, but found `--fcc-actual--`.
|
||||
`.shirt` の `top` を `--fcc-expected--` に設定する必要がありますが、`--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--`.
|
||||
`.shirt` の `left` を `--fcc-expected--` に設定する必要がありますが、`--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`.
|
||||
`.shirt` 要素の `z-index` を `1` に設定する必要があります。
|
||||
|
||||
```js
|
||||
assert.equal(new __helpers.CSSHelp(document).getStyle('.shirt')?.zIndex, '1');
|
||||
|
||||
@@ -7,11 +7,11 @@ dashedName: step-78
|
||||
|
||||
# --description--
|
||||
|
||||
For the shirt's final touch, set the `color` to `#6a6969`.
|
||||
シャツの最後の仕上げに、`color` を `#6a6969` に設定してください。
|
||||
|
||||
# --hints--
|
||||
|
||||
You should give `.shirt` a `color` of `#6a6969`.
|
||||
`.shirt` の `color` を `#6a6969` に設定する必要があります。
|
||||
|
||||
```js
|
||||
assert.equal(new __helpers.CSSHelp(document).getStyle('.shirt')?.color, 'rgb(106, 105, 105)');
|
||||
|
||||
@@ -7,43 +7,43 @@ dashedName: step-79
|
||||
|
||||
# --description--
|
||||
|
||||
Fun fact: Penguins cannot stand without at least two feet.
|
||||
豆知識: ペンギンは 2 本の足がないと立てません。
|
||||
|
||||
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`.
|
||||
`.penguin-body` 要素内に `class` を `foot` にした `div` 要素を 2 つ追加してください。 最初の `.foot` の `class` には `left`、2 つ目の `.foot` の `class` には `right` を追加してください。
|
||||
|
||||
# --hints--
|
||||
|
||||
You should add two `div` elements within `.penguin-body`. Expected `--fcc-expected--` `div` elements, found `--fcc-actual--`.
|
||||
`.penguin-body` 内に `div` 要素を 2 つ加える必要があります。 `--fcc-expected--` 個の `div` 要素があるはずですが、`--fcc-actual--` 個となっています。
|
||||
|
||||
```js
|
||||
assert.equal(document.querySelectorAll('.penguin-body > div')?.length, 2);
|
||||
```
|
||||
|
||||
You should give the first new `div` a `class` of `foot`.
|
||||
1 つ目の新しい `div` の `class` に `foot` を設定する必要があります。
|
||||
|
||||
```js
|
||||
assert.exists(document.querySelector('.penguin-body > div.foot'));
|
||||
```
|
||||
|
||||
You should give the second new `div` a `class` of `foot`.
|
||||
2 つ目の新しい `div` の `class` に `foot` を設定する必要があります。
|
||||
|
||||
```js
|
||||
assert.equal(document.querySelectorAll('.penguin-body > div.foot')?.length, 2);
|
||||
```
|
||||
|
||||
You should give one `div` a `class` of `left`.
|
||||
`div` の 1 つに `left` という `class` を設定する必要があります。
|
||||
|
||||
```js
|
||||
assert.exists(document.querySelector('.penguin-body > div.foot.left'));
|
||||
```
|
||||
|
||||
You should give the other `div` a `class` of `right`.
|
||||
もう 1 つの `div` に `right` という `class` を設定する必要があります。
|
||||
|
||||
```js
|
||||
assert.exists(document.querySelector('.penguin-body > div.foot.right'));
|
||||
```
|
||||
|
||||
You should place `.foot.right` after `.foot.left`.
|
||||
`.foot.right` は `.foot.left` の後に置く必要があります。
|
||||
|
||||
```js
|
||||
assert.exists(document.querySelector('.foot.left + .foot.right'));
|
||||
|
||||
@@ -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`.
|
||||
`.foot` 要素を指定し、`width` を `15%`、`height` を `30%`、`background-color` を `orange` に設定してください。
|
||||
|
||||
# --hints--
|
||||
|
||||
You should use the `.foot` selector.
|
||||
`.foot` セレクターを使用してください。
|
||||
|
||||
```js
|
||||
assert.match(code, /\.foot\s*\{/);
|
||||
```
|
||||
|
||||
You should give `.foot` a `width` of `--fcc-expected--`, found `--fcc-actual--`.
|
||||
`.foot` の `width` を `--fcc-expected--` に設定する必要がありますが、`--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--`.
|
||||
`.foot` の `height` を `--fcc-expected--` に設定する必要がありますが、`--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--`.
|
||||
`.foot` の `background-color` を `--fcc-expected--` に設定する必要がありますが、`--fcc-actual--` が設定されています。
|
||||
|
||||
```js
|
||||
assert.equal(new __helpers.CSSHelp(document).getStyle('.foot')?.backgroundColor, 'orange');
|
||||
|
||||
@@ -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%`.
|
||||
`.foot` 要素を親要素の上端から `85%` の位置に配置し、全ての角の半径を `50%` に設定してください。
|
||||
|
||||
# --hints--
|
||||
|
||||
You should give `.foot` a `top` of `--fcc-expected--`, but found `--fcc-actual--`.
|
||||
`.foot` の `top` プロパティを `--fcc-expected--` に設定する必要がありますが、`--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--`.
|
||||
`.foot` の `border-radius` を `--fcc-expected--` に設定する必要がありますが、`--fcc-actual--` が設定されています。
|
||||
|
||||
```js
|
||||
assert.equal(new __helpers.CSSHelp(document).getStyle('.foot')?.borderRadius, '50%');
|
||||
|
||||
@@ -7,31 +7,31 @@ dashedName: step-82
|
||||
|
||||
# --description--
|
||||
|
||||
The penguin's beak and feet share the same `color`.
|
||||
ペンギンのくちばしと足には同じ `color` が割り当てられています。
|
||||
|
||||
Create a new custom CSS variable named `--penguin-picorna`, and replace all relavant property values with it.
|
||||
新たに `--penguin-picorna` という名前のカスタム CSS 変数を作成し、上記の色に関係するプロパティの値をすべて変数に置き換えてください。
|
||||
|
||||
# --hints--
|
||||
|
||||
You should give `:root` a `--penguin-picorna` property.
|
||||
`:root` には `--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--`.
|
||||
`--penguin-picorna` には `orange` という値を設定する必要がありますが、`--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--`.
|
||||
`.beak` の `background-color` を `var(--penguin-picorna)` に設定する必要がありますが、`--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--`.
|
||||
`.foot` の `background-color` を `var(--penguin-picorna)` に設定する必要がありますが、`--fcc-actual--` が設定されています。
|
||||
|
||||
```js
|
||||
assert.equal(new __helpers.CSSHelp(document).getStyle('.foot')?.getPropVal('background-color', true), 'var(--penguin-picorna)');
|
||||
|
||||
@@ -7,7 +7,7 @@ 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.
|
||||
`class` に `left` を含む `.foot` 要素を選択し、親要素の左端から `25%` の位置に配置してください。 さらに、`class` に `right` を含む `.foot` 要素を選択し、親要素の右端から `25%` の位置に配置してください。
|
||||
|
||||
# --hints--
|
||||
|
||||
@@ -17,7 +17,7 @@ Target the `.foot` element with a `class` of `left`, and position it `25%` left
|
||||
assert.match(code, /\.foot\.left\s*\{/);
|
||||
```
|
||||
|
||||
You should give `.foot.left` a `left` of `--fcc-expected--`, but found `--fcc-actual--`.
|
||||
`.foot.left` の `left` を `--fcc-expected--` に設定する必要がありますが、`--fcc-actual--` が設定されています。
|
||||
|
||||
```js
|
||||
assert.equal(new __helpers.CSSHelp(document).getStyle('.foot.left')?.left, '25%');
|
||||
@@ -29,7 +29,7 @@ assert.equal(new __helpers.CSSHelp(document).getStyle('.foot.left')?.left, '25%'
|
||||
assert.match(code, /\.foot\.right\s*\{/);
|
||||
```
|
||||
|
||||
You should give `.foot.right` a `right` of `--fcc-expected--`, but found `--fcc-actual--`.
|
||||
`.foot.right` の `right` を `--fcc-expected--` に設定する必要がありますが、`--fcc-actual--` が設定されています。
|
||||
|
||||
```js
|
||||
assert.equal(new __helpers.CSSHelp(document).getStyle('.foot.right')?.right, '25%');
|
||||
|
||||
@@ -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`.
|
||||
ペンギンの足をもっとペンギン _らしく_ 見せるために、左足を `80deg`、右足を `-80deg` 回転させてください。
|
||||
|
||||
# --hints--
|
||||
|
||||
You should give `.foot.left` a `transform` of `rotate(80deg)`.
|
||||
`.foot.left` の `transform` を `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)`.
|
||||
`.foot.right` の `transform` を `rotate(-80deg)` に設定する必要があります。
|
||||
|
||||
```js
|
||||
assert.equal(new __helpers.CSSHelp(document).getStyle('.foot.right').getPropVal('transform', true), 'rotate(-80deg)');
|
||||
|
||||
@@ -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.
|
||||
`.foot` 要素の重ね合わせレベルを変更して、`.penguin-body` 要素の下に重なって表示されるようにしてください。
|
||||
|
||||
# --hints--
|
||||
|
||||
You should give `.foot` a `z-index` of `--fcc-expected--`, but found `--fcc-actual--`.
|
||||
`.foot` の `z-index` を `--fcc-expected--` に設定する必要がありますが、`--fcc-actual--` が設定されています。
|
||||
|
||||
```js
|
||||
assert.equal(new __helpers.CSSHelp(document).getStyle('.foot')?.zIndex, '-1');
|
||||
|
||||
@@ -7,7 +7,7 @@ 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)`.
|
||||
`.arm` 要素を指定し、`width` を `30%`、`height` を `60%` に設定し、さらに角度が時計回りに `90deg` で、`gray` で始まり `rgb(209, 210, 199)` で終わる linear gradient (線形グラデーション) を、`background` に設定してください。
|
||||
|
||||
# --hints--
|
||||
|
||||
|
||||
@@ -7,7 +7,7 @@ dashedName: step-4
|
||||
|
||||
# --description--
|
||||
|
||||
`width` を `100%` に、`height` を `100vh` に設定することで、異なるブラウザ間のページの表示を統一してください。
|
||||
異なるブラウザ間のページの表示を統一するため、`width` を `100%` に、`height` を `100vh` に設定してください。
|
||||
|
||||
# --hints--
|
||||
|
||||
|
||||
@@ -11,7 +11,7 @@ dashedName: using-objects-for-lookups
|
||||
|
||||
Objetos podem ser pensados como armazenamento de chave/valor, como um dicionário. Se você tem um dado tabular, você pode usar um objeto para pesquisar valores ao invés de uma instrução `switch` ou uma cadeia de `if/else`. Isso é mais útil quando você sabe que o seu dado de entrada é limitado para um certo intervalo.
|
||||
|
||||
Here is an example of an article object:
|
||||
Aqui está um exemplo de um objeto de artigo:
|
||||
|
||||
```js
|
||||
const article = {
|
||||
@@ -30,7 +30,7 @@ const value = "title";
|
||||
const valueLookup = article[value];
|
||||
```
|
||||
|
||||
`articleAuthor` is the string `Kaashan Hussain`, `articleLink` is the string `https://www.freecodecamp.org/news/a-complete-guide-to-creating-objects-in-javascript-b0e2450655e8/`, and `valueLookup` is the string `How to create objects in JavaScript`.
|
||||
`articleAuthor` é a string `Kaashan Hussain`, `articleLink` é a string `https://www.freecodecamp.org/news/a-complete-guide-to-creating-objects-in-javascript-b0e2450655e8/` e `valueLookup` é a string `How to create objects in JavaScript`.
|
||||
|
||||
# --instructions--
|
||||
|
||||
|
||||
@@ -20,7 +20,7 @@ Faça uma API de endpoint (URL), montada em `GET /name`. Responda com um documen
|
||||
|
||||
# --hints--
|
||||
|
||||
Teste 1: O endpoint (URL) da API deverá responder com o nome correto
|
||||
Test 1 : Your API endpoint should respond with `{ "name": "Mick Jagger" }` when the `/name` endpoint is called with `?first=Mick&last=Jagger`
|
||||
|
||||
```js
|
||||
(getUserInput) =>
|
||||
@@ -38,7 +38,7 @@ Teste 1: O endpoint (URL) da API deverá responder com o nome correto
|
||||
);
|
||||
```
|
||||
|
||||
Teste 2 : O endpoint (URL) da API deve responder com o nome correto
|
||||
Test 2 : Your API endpoint should respond with `{ "name": "Keith Richards" }` when the `/name` endpoint is called with `?first=Keith&last=Richards`
|
||||
|
||||
```js
|
||||
(getUserInput) =>
|
||||
|
||||
@@ -313,8 +313,8 @@ async (getUserInput) => {
|
||||
|
||||
let res = await fetch(`${url}/api/threads/fcc_test`);
|
||||
const threads = await res.json();
|
||||
const report_id = threads[0]._id;
|
||||
const data = { report_id };
|
||||
const thread_id = threads[0]._id;
|
||||
const data = { thread_id };
|
||||
|
||||
res = await fetch(`${url}/api/threads/fcc_test`, {
|
||||
method: 'PUT',
|
||||
|
||||
@@ -7,7 +7,7 @@ dashedName: step-17
|
||||
|
||||
# --description--
|
||||
|
||||
Adicione um elemento `input` dentro do elemento `label`. Não se esqueça de adicionar os elementos `input` após o texto `label` e de incluir um espaço após a vírgula.
|
||||
Adicione um elemento `input` dentro do elemento `label`. Não se esqueça de adicionar os elementos `input` após o texto da `label` e de incluir um espaço após os dois-pontos.
|
||||
|
||||
# --hints--
|
||||
|
||||
|
||||
@@ -20,7 +20,7 @@ dashedName: get-query-parameter-input-from-the-client
|
||||
|
||||
# --hints--
|
||||
|
||||
Тест 1: Ваша кінцева точка API повинна співпадати з правильним іменем
|
||||
Test 1 : Your API endpoint should respond with `{ "name": "Mick Jagger" }` when the `/name` endpoint is called with `?first=Mick&last=Jagger`
|
||||
|
||||
```js
|
||||
(getUserInput) =>
|
||||
@@ -38,7 +38,7 @@ dashedName: get-query-parameter-input-from-the-client
|
||||
);
|
||||
```
|
||||
|
||||
Тест 2: Ваша кінцева точка API повинна співпадати з правильним іменем
|
||||
Test 2 : Your API endpoint should respond with `{ "name": "Keith Richards" }` when the `/name` endpoint is called with `?first=Keith&last=Richards`
|
||||
|
||||
```js
|
||||
(getUserInput) =>
|
||||
|
||||
@@ -313,8 +313,8 @@ async (getUserInput) => {
|
||||
|
||||
let res = await fetch(`${url}/api/threads/fcc_test`);
|
||||
const threads = await res.json();
|
||||
const report_id = threads[0]._id;
|
||||
const data = { report_id };
|
||||
const thread_id = threads[0]._id;
|
||||
const data = { thread_id };
|
||||
|
||||
res = await fetch(`${url}/api/threads/fcc_test`, {
|
||||
method: 'PUT',
|
||||
|
||||
Reference in New Issue
Block a user