mirror of
https://github.com/freeCodeCamp/freeCodeCamp.git
synced 2026-06-19 21:09:51 +08:00
chore(i18n,learn): processed translations (#48578)
This commit is contained in:
camperbot
GitHub
parent
6ba84c091a
commit
7bc2ba4a91
@ -34,7 +34,7 @@ dashedName: build-a-25--5-clock
|
||||
|
||||
**قصة المستخدم #10:** يمكنني رؤية عنصر قابل للنقر مع `id="reset"`.
|
||||
|
||||
**قصة المستخدم #11:** عندما أنقر على العنصر مع معرف `reset`، أي مؤقت قيد التشغيل يجب إيقافه، القيمة ضمن `id="break-length"` يجب أن تنتج `5`، القيمة ضمن `id="session-length"` يجب أن تعود إلى 25، والعنصر مع `id="time-left"` يجب أن يعاد تعيينه إلى حالته الافتراضية.
|
||||
**قصة المستخدم #11:** عندما أنقر على العنصر مع معرف `reset`، أي مؤقت قيد التشغيل يجب إيقافه، القيمة ضمن `id="break-length"` يجب أن تنتج `5`، القيمة ضمن `id="session-length"` يجب أن تعود إلى 25، والعنصر مع `id="time-left"` يجب أن يعاد تعيينه إلى حالته (state) الافتراضية.
|
||||
|
||||
**قصة المستخدم #12:** عندما أنقر على العنصر مع معرف `break-decrement`، القيمة ضمن `id="break-length"` مراسيم بقيمة 1، ويمكنني أن أرى القيمة المحدثة.
|
||||
|
||||
|
||||
@ -10,7 +10,7 @@ dashedName: connect-redux-to-the-messages-app
|
||||
|
||||
الآن بعد أن فهمت كيفية استخدام `connect` لتوصيل React إلى Redux، يمكنك تطبيق ما تعلمته على مكون React الخاص بك الذي يتعامل مع الرسائل.
|
||||
|
||||
في الدرس الأخير، المكون الذي يتصل إلى Redux يسما `Presentational`، وهذا لم يكن غير مقصود. هذا المصطلح *عمومًا* يشير إلى مكونات React غير متصلة قاصدًا إلى Redux. وهم ببساطة مسؤولون عن عرض واجهة المستخدم ويفعلون ذلك كوظيفة (function) من الميزات (props) التي يتلقُها. وعلى النقيض من ذلك، فإن مكونات المحتوي موصولة إلى Redux. وعادة ما تكون هذه المؤسسات مسؤولة عن إرسال الإجراءات إلى المتجر (store) وكثيراً ما تنقل إلى مكونات الفرعية كميزات (props).
|
||||
في الدرس الأخير، المكون الذي يتصل إلى Redux يسما `Presentational`، وهذا لم يكن غير مقصود. هذا المصطلح *عمومًا* يشير إلى مكونات React غير متصلة قاصدًا إلى Redux. وهم ببساطة مسؤولون عن عرض واجهة المستخدم ويفعلون ذلك كوظيفة (function) من الميزات (props) التي يتلقُها. وعلى النقيض من ذلك، فإن مكونات المحتوي موصولة إلى Redux. وعادة ما تكون هذه المؤسسات مسؤولة عن إرسال (dispatching) الإجراءات (actions) إلى المتجر (store) وكثيراً ما تنقل إلى مكونات (components) الفرعية كميزات (props).
|
||||
|
||||
# --instructions--
|
||||
|
||||
|
||||
@ -8,7 +8,7 @@ dashedName: map-dispatch-to-props
|
||||
|
||||
# --description--
|
||||
|
||||
تستخدم الوظيفة `mapDispatchToProps()` لتوفير منشئي إجراءات (action creators) محددة لمكونات React الخاصة بك حتى يتمكنوا من إرسال إجراءات (dispatch actions) ضد متجر Redux. إنها مشابهة في التركيب الوظيفة `mapStateToProps()` التي كتبتها في التحدي الأخير. إنها ترسل كائنا يركّب إجراءات الإرسال (dispatch) إلى أسماء الخواص، التي تصبح مكونا `props`. مع ذلك، بدلاً من إعادة قطعة من `state`، ترجع كل خاصية وظيفة تستدعي `dispatch` مع منشئ العمل وأي بيانات عمل ذات صلة. لديك حق الوصول إلى هذا `dispatch` لأنه يُمرر إلى `mapDispatchToProps()` كحجة عند تعريف الوظيفة، تماما كما مررت `state` إلى `mapStateToProps()`. خلف المشاهد, React المرتبط إلى Redux يستخدم `store.dispatch()` في Redux لإجراء هذه الرسائل مع `mapDispatchToProps()`. يشبه هذه كيفية أستخدام `store.subscribe()` إلى المكونات التي تركب في `state`.
|
||||
تستخدم الوظيفة `mapDispatchToProps()` لتوفير منشئي إجراءات (action creators) محددة لمكونات React الخاصة بك حتى يتمكنوا من إرسال إجراءات (dispatch actions) ضد متجر Redux. إنها مشابهة في التركيب الوظيفة `mapStateToProps()` التي كتبتها في التحدي الأخير. إنها ترسل كائنا يركّب إجراءات الإرسال (dispatch) إلى أسماء الخواص، التي تصبح مكونا `props`. مع ذلك، بدلاً من إعادة قطعة من `state`، ترجع كل خاصية وظيفة (function) تستدعي `dispatch` مع منشئ (action creator) العمل وأي بيانات عمل ذات صلة. لديك حق الوصول إلى هذا `dispatch` لأنه يُمرر إلى `mapDispatchToProps()` كحجة عند تعريف الوظيفة، تماما كما مررت `state` إلى `mapStateToProps()`. خلف المشاهد, React المرتبط إلى Redux يستخدم `store.dispatch()` في Redux لإجراء هذه الرسائل مع `mapDispatchToProps()`. يشبه هذه كيفية أستخدام `store.subscribe()` إلى المكونات (components) التي تركب في `state`.
|
||||
|
||||
على سبيل المثال، لديك منشئ إجراء `loginUser()` يأخذ `username` كحمولة للإجراء. هذا الكائن ينتج من `mapDispatchToProps()` لمنشئ هذا الإجراء سيبدو شيئا مثل:
|
||||
|
||||
|
||||
@ -10,13 +10,13 @@ dashedName: bind-this-to-a-class-method
|
||||
|
||||
بالإضافة إلى إعداد وتحديث `state`، يمكنك أيضًا تحديد طرق (methods) لفئة مكوناتك (component class). عادة ما تحتاج طريقة الفئة (class method) إلى استخدام مصطلح `this` حتى تتمكن من الوصول إلى الخصائص في الفئة (class) (مثل `state` و `props`) داخل نطاق الطريقة (method). هناك بعض الطرق للسماح لطرقية الفئة الخاص بك بالوصول إلى `this`.
|
||||
|
||||
إحدى الطرق الشائعة هي ربط `this` صراحة في الإنشاء لذلك يصبح `this` مرتبطاً بأساليب الفئة (class method) عندما يتم تهيئة المكون. ربما لاحظت التحدي الأخير المستخدم `this.handleClick = this.handleClick.bind(this)` لطريقة `handleClick` في البناء. بعد ذلك، عندما تتصل بالوظيفة مثل `this.setState()` ضمن طريقة الفئة الخاص بك، `this` يشير إلى الفئة ولن يكون `undefined`.
|
||||
إحدى الطرق الشائعة هي ربط `this` صراحة في الإنشاء لذلك يصبح `this` مرتبطاً بأساليب الفئة (class method) عندما يتم تهيئة المكون. ربما لاحظت التحدي الأخير المستخدم `this.handleClick = this.handleClick.bind(this)` لطريقة `handleClick` في البناء. بعد ذلك، عندما تتصل بالوظيفة (function) مثل `this.setState()` ضمن طريقتك لفئة (class method)، يشير `this` إلى الفئة (class) ولن يكون `undefined`.
|
||||
|
||||
**ملاحظة:** الكلمة المفتاحية `this` هي واحدة من أكثر الجوانب ارتباكاً في JavaScript ولكنها تؤدي دوراً هاماً في React. مع أنّ أن سلوكها هنا طبيعي تماما، هذه الدروس ليست المكان المناسب لإجراء استعراض متعمق لكلمة `this` لذا يرجى الرجوع إلى الدروس الأخرى إذا كان ما ورد أعلا مثيرا للارتباك!
|
||||
|
||||
# --instructions--
|
||||
|
||||
يحتوي محرر التعليمات البرمجية على مكون مع `state` التي تتابع حالة النص. ثم أن لديها طريقة تسمح لك بتعيين النص إلى `You clicked!`. ومع ذلك، فإن الطريقة لا تعمل لأنها تستخدم الكلمة المفتاحية `this` التي لم يتم تعريفها. أصلحة بواسطة ربط `this` بشكل معتمد للطريقة `handleClick()` في بناء المكوّن.
|
||||
يحتوي محرر كود على مكون (component) مع `state` التي تتابع حالة النص. ثم أن لديها طريقة تسمح لك بتعيين النص إلى `You clicked!`. ومع ذلك، فإن الطريقة لا تعمل لأنها تستخدم الكلمة المفتاحية `this` التي لم يتم تعريفها. أصلحة بواسطة ربط `this` بشكل معتمد للطريقة `handleClick()` في بناء المكوّن.
|
||||
|
||||
بعد ذلك، أضف معالج النقر (click handler) إلى عنصر `button` في طريقة التقديم. يجب أن تشغل طريقة `handleClick()` عندما يتلقى الزر حدثا بالنقر عليه. تذكر أن الطريقة التي تمررها إلى معالج `onClick` تحتاج إلى أقواس غريبة لأنه يجب أن تفسر قاصدًا على أنها JavaScript.
|
||||
|
||||
@ -40,7 +40,7 @@ assert(
|
||||
);
|
||||
```
|
||||
|
||||
حالة `MyComponent` يجب أن تهيئ مع زوج القيمة الرئيسة `{ text: "Hello" }`.
|
||||
يجب أن تهيئ حالة (state) تسمى `MyComponent` مع هُوِيَّة (key) القيمة الرئيسة `{ text: "Hello" }`.
|
||||
|
||||
```js
|
||||
assert(
|
||||
@ -48,7 +48,7 @@ assert(
|
||||
);
|
||||
```
|
||||
|
||||
النقر على `button` يجب تشغيل طريقة `handleClick` وتعيين `text` إلى `You clicked!`.
|
||||
النقر على `button` يجب تشغيل طريقة (method) تسمى `handleClick` وتعيين حالة (state) تسمى `text` بقيمة `You clicked!`.
|
||||
|
||||
```js
|
||||
async () => {
|
||||
|
||||
@ -53,7 +53,7 @@ assert(
|
||||
);
|
||||
```
|
||||
|
||||
`GameOfChance` يجب تبدئ حالة تحتوي على خاصية `counter` بقيمة `1`.
|
||||
`GameOfChance` يجب تبدئ حالة (state) تحتوي على خاصية `counter` بقيمة `1`.
|
||||
|
||||
```js
|
||||
assert.strictEqual(
|
||||
@ -71,7 +71,7 @@ assert.strictEqual(
|
||||
);
|
||||
```
|
||||
|
||||
في كل مرة يتم النقر على الزر، يجب زيادة حالة counter بقيمة 1، وينبغي تقديم عنصر واحد `p` إلى DOM الذي يحتوي على نص `Turn: N`، حيث `N` هي قيمة الحالة counter.
|
||||
في كل مرة يتم النقر على الزر، يجب زيادة حالة (state) برنامَج counter بقيمة 1، وينبغي تقديم عنصر واحد `p` إلى DOM الذي يحتوي على نص `Turn: N`، حيث `N` هي قيمة حالة (state) برنامَج counter.
|
||||
|
||||
```js
|
||||
(() => {
|
||||
|
||||
@ -8,7 +8,7 @@ dashedName: use-a-ternary-expression-for-conditional-rendering
|
||||
|
||||
# --description--
|
||||
|
||||
قبل الانتقال إلى تقنيات العرض الديناميكي، هناك طريقة أخيرة لاستخدام اشتراطات JavaScript المدمجة لتقديم ما تريده, تسمى: <dfn>ternary operator</dfn>. غالباً ما يستخدم ternary operator كاختصار لتعبيرات `if/else` في JavaScript. إنها ليست قوية تماما مثل تعبيرات `if/else` التقليدية، لكنها تحظى بشعبية كبيرة بين مطوري React. أحد أسباب هذا هو بسبب كيفية تجميع JSX، أن `if/else` البيانات لا يمكن إدراجها قاصدًا في تعليمات البرمجية JSX. ربما كنت قد لاحظت هذا في تحديين السابقين - عندما يكون تعبير `if/else` مطلوب، كان دائماً *خارج* كلمة `return`. Ternary expressions يمكن أن تكون بديلا ممتازا إذا كنت تريد تنفيذ المنطق الشرط (conditional logic) داخل JSX. تذكر أن ternary operator له ثلاث أجزاء، ولكن يمكنك الجمع بين عدة ternary expressions. إليك الجملة الأساسية:
|
||||
قبل الانتقال إلى تقنيات العرض الديناميكي، هناك طريقة أخيرة لاستخدام اشتراطات JavaScript المدمجة لتقديم ما تريده, تسمى: <dfn>ternary operator</dfn>. غالباً ما يستخدم ternary operator كاختصار لتعبيرات `if/else` في JavaScript. إنها ليست قوية تماما مثل تعبيرات `if/else` التقليدية، لكنها تحظى بشعبية كبيرة بين مطوري React. أحد أسباب هذا هو بسبب كيفية تجميع JSX، أن تعبيرات `if/else` لا يمكن إدراجها في كود JSX مباشرة. ربما كنت قد لاحظت هذا في تحديين السابقين - عندما يكون تعبير `if/else` مطلوب، كان دائماً *خارج* كلمة `return`. Ternary expressions يمكن أن تكون بديلا ممتازا إذا كنت تريد تنفيذ المنطق الشرط (conditional logic) داخل JSX. تذكر أن ternary operator له ثلاث أجزاء، ولكن يمكنك الجمع بين عدة ternary expressions. إليك الجملة الأساسية:
|
||||
|
||||
```jsx
|
||||
condition ? expressionIfTrue : expressionIfFalse;
|
||||
@ -16,7 +16,7 @@ condition ? expressionIfTrue : expressionIfFalse;
|
||||
|
||||
# --instructions--
|
||||
|
||||
يحتوي محرر التعليمات البرمجية على ثلاث ثوابت تُعرف في مكون `CheckUserAge` داخل طريقة `render()`. يطلق عليهم `buttonOne`, و `buttonTwo`, و `buttonThree`. يتم تعيين كل من هذه عبارة JSX بسيطة تمثل عنصر الزر (button). أولا، تهيئة حالة `CheckUserAge` مع `input` و `userAge` وكلاهما مجموعة string بقيم فارغة.
|
||||
يحتوي محرر التعليمات البرمجية على ثلاث ثوابت تُعرف في مكون `CheckUserAge` داخل طريقة `render()`. يطلق عليهم `buttonOne`, و `buttonTwo`, و `buttonThree`. يتم تعيين كل من هذه عبارة JSX بسيطة تمثل عنصر الزر (button). أولا، هيّئ حالة (state) بقيمة `CheckUserAge` مع `input` و `userAge` وكلاهما مجموعة مقطع نصي (string) فارغة.
|
||||
|
||||
وبمجرد أن يقدم المكون المعلومات إلى الصفحة، ينبغي أن يكون لدى المستخدمين طريقة للتفاعل معها. ضمن تعبير `return` للمكون، أنشئ ternary expression يطبق المنطق التالي: عند تحميل الصفحة أول مرة، يعرض زر الإرسال (submit button)، باسم `buttonOne`، إلى الصفحة. بعد ذلك، عندما يدخل المستخدم عمره وينقر على الزر، ينتج زر مختلف تبعاً لعمره. إذا دخل المستخدم رقماً أقل من `18`، أنشئ `buttonThree`. إذا دخل المستخدم رقما أكبر من أو يساوي `18`، أنشئ `buttonTwo`.
|
||||
|
||||
@ -33,7 +33,7 @@ assert(
|
||||
);
|
||||
```
|
||||
|
||||
يجب تهيئة حالة المكون `CheckUserAge` بخاصية `userAge` وخاصية `input`، كل منما يحمل string بقيمة فارغة.
|
||||
يجب تهيئة حالة (state) المكون (component) مسمى `CheckUserAge` بخاصية `userAge` وخاصية `input`، كل منهما يحمل مقطع نصي (string) فارغ.
|
||||
|
||||
```js
|
||||
assert(
|
||||
@ -156,7 +156,7 @@ assert(
|
||||
})();
|
||||
```
|
||||
|
||||
يجب ألا يحتوي تعليماتك البرمجية على أي تعبيرات `if/else`.
|
||||
يجب ألا يحتوي كودك على أي تعبيرات `if/else`.
|
||||
|
||||
```js
|
||||
assert(
|
||||
|
||||
@ -8,7 +8,7 @@ dashedName: use-state-to-toggle-an-element
|
||||
|
||||
# --description--
|
||||
|
||||
في بعض الأحيان قد تحتاج إلى معرفة الحالة السابقة عند تحديث الحالة (state). ومع ذلك، قد تكون تعديلات الحالة غير متزامنة - وهذا يعني أن React قد إجراء مكالمات متعددة `setState()` في تحديث واحد. وهذا يعني أنه لا يمكنك الاعتماد على القيمة السابقة في `this.state` أو `this.props` عند حساب القيمة التالية. لذلك يجب ألا تستخدم التعليمات البرمجية مثل:
|
||||
في بعض الأحيان قد تحتاج إلى معرفة الحالة (state) السابقة عند تحديث الحالة (state). ومع ذلك، قد تكون تعديلات الحالة (state) غير متزامنة - وهذا يعني أن React قد إجراء مكالمات متعددة `setState()` في تحديث واحد. وهذا يعني أنه لا يمكنك الاعتماد على القيمة السابقة في `this.state` أو `this.props` عند حساب القيمة التالية. لذلك يجب ألا تستخدم التعليمات البرمجية مثل:
|
||||
|
||||
```jsx
|
||||
this.setState({
|
||||
@ -16,7 +16,7 @@ this.setState({
|
||||
});
|
||||
```
|
||||
|
||||
بدلاً من ذلك، يجب عليك تمرير وظيفة `setState` تسمح لك بالوصول إلى الحالة ومِيزات. استخدام الحالة مع `setState` يضمن لك العمل مع أكثر القيم حداثة من الحالة والمِيزات. وهذا يعني أنه ينبغي إعادة كتابة ما ورد أعلاه على النحو التالي:
|
||||
بدلاً من ذلك، يجب عليك تمرير وظيفة `setState` تسمح لك بالوصول إلى الحالة (state) ومِيزات (props). استخدام وظيفة (function) مع `setState` يضمن لك العمل مع أكثر القيم حداثة من الحالة (state) والمِيزات (props). وهذا يعني أنه ينبغي إعادة كتابة ما ورد أعلاه على النحو التالي:
|
||||
|
||||
```jsx
|
||||
this.setState((state, props) => ({
|
||||
@ -24,7 +24,7 @@ this.setState((state, props) => ({
|
||||
}));
|
||||
```
|
||||
|
||||
يمكنك أيضًا استخدام نموذج دون `props` إذا كنت بحاجة فقط إلى `state`:
|
||||
يمكنك أيضًا استخدام نموذج (form) دون `props` إذا كنت بحاجة فقط إلى `state`:
|
||||
|
||||
```jsx
|
||||
this.setState(state => ({
|
||||
@ -38,7 +38,7 @@ this.setState(state => ({
|
||||
|
||||
`MyComponent` لها خاصية `visibility` التي تم تهيئتها إلى `false`. تنتج طريقة العرض طريقة عرض واحدة إذا كانت قيمة `visibility` صحيحة، وعرضًا مختلفًا إذا كانت خاطئة (false).
|
||||
|
||||
حاليا، لا توجد طريقة لتحديث خاصية `visibility` في المكون `state`. يجب أن تبديل القيمة ذهابا وإيابا بين الحقيقة (true) والخاطئة (false). هناك معالج ضغط على الزر الذي يشغل طريقة فئة تسمى `toggleVisibility()`. مرر الوظيفة إلى `setState` لتعريف هذه الطريقة بحيث تبديل `state` بقيمة `visibility` إلى القيمة المضادة عند تشغيل الطريقة. إذا كان `visibility` يكون `false`، فالطريقة تغيره إلى `true`، والعكس كذلك.
|
||||
حاليا، لا توجد طريقة لتحديث خاصية `visibility` في `state` المكون (component). يجب أن تبديل القيمة ذهابا وإيابا بين الحقيقة (true) والخاطئة (false). هناك معالج ضغط على الزر الذي يشغل طريقة فئة تسمى `toggleVisibility()`. مرر الوظيفة (function) إلى `setState` لتعريف هذه الطريقة (method) بحيث تبديل `state` بقيمة `visibility` إلى القيمة المضادة عند تشغيل الطريقة (method). إذا كان `visibility` يكون `false`، فالطريقة تغيره إلى `true`، والعكس كذلك.
|
||||
|
||||
وأخيراً، انقر على الزر لرؤية العرض المشروط (conditional rendering) للمكون استناداً إلى `state`.
|
||||
|
||||
@ -56,7 +56,7 @@ assert.strictEqual(
|
||||
);
|
||||
```
|
||||
|
||||
حالة `MyComponent` يجب أن تَبدء بخاصية `visibility` محددة إلى سلسلة `false`.
|
||||
يجب أن تَبدء حالة (state) في `MyComponent` بخاصية `visibility` يرجع حالة `false`.
|
||||
|
||||
```js
|
||||
assert.strictEqual(
|
||||
@ -65,7 +65,7 @@ assert.strictEqual(
|
||||
);
|
||||
```
|
||||
|
||||
النقر على عنصر الزر يجب أن يغير خاصية `visibility` في الحالة بين `true` و `false`.
|
||||
النقر على عنصر الزر يجب أن يغير خاصية `visibility` في الحالة (state) بين `true` و `false`.
|
||||
|
||||
```js
|
||||
(() => {
|
||||
@ -104,7 +104,7 @@ assert(
|
||||
);
|
||||
```
|
||||
|
||||
`this` يجب عدم استخدامه داخل `setState`
|
||||
يجب عدم استخدام `this` داخل `setState`
|
||||
|
||||
```js
|
||||
assert(!/this\.setState\([^}]*this/.test(code));
|
||||
|
||||
@ -8,13 +8,13 @@ dashedName: use-a-switch-statement-to-handle-multiple-actions
|
||||
|
||||
# --description--
|
||||
|
||||
يمكنك إخبار متجر Redux كيفية التعامل مع أنواع متعددة من الإجراءات. قل أنك إدارة توثيق المستخدم (user authentication) في متجرك Redux. تريد أن يكون لديك تمثيل للحالة عندما يتم تسجيل دخول المستخدمين وعندما يتم تسجيل خروجهم. أنت تمثل هذا مع كائن حالة (state) واحد مع الخاصية `authenticated`. تحتاج أيضًا إلى منشئي الإجراءات الذين ينشئ إجراءات مناظرة لتسجيل دخول المستخدم وتسجيل خروجه، إلى جانب كائنات الإجراء نفسها.
|
||||
يمكنك إخبار متجر Redux كيفية التعامل مع أنواع متعددة من الإجراءات. قل أنك إدارة توثيق المستخدم (user authentication) في متجرك Redux. تريد أن يكون لديك تمثيل للحالة (state) عندما يتم تسجيل دخول المستخدمين وعندما يتم تسجيل خروجهم. أنت تمثل هذا مع كائن (object) حالة (state) واحد مع الخاصية `authenticated`. تحتاج أيضًا إلى منشئي الإجراءات الذين ينشئ إجراءات مناظرة لتسجيل دخول المستخدم وتسجيل خروجه، إلى جانب كائنات الإجراء نفسها.
|
||||
|
||||
# --instructions--
|
||||
|
||||
يحتوي محرر التعليمات البرمجية على متجر، وإجراءات، وناشئ إجراءات تم إعدادهم لك. املأ الوظيفة `reducer` للتعامل مع إجراءات الموثقة المتعددة. استخدم تعبير `switch` من JavaScript في `reducer` للرد على أحداث الإجراء مختلفة. هذا نمط قياسي في كتابة reducers في Redux. يجب أن يبدل تعبير التبديل إلى `action.type` وأن يعيد حالة التوثيق المناسبة.
|
||||
يحتوي محرر التعليمات البرمجية على متجر، وإجراءات، وناشئ إجراءات تم إعدادهم لك. املأ الوظيفة `reducer` للتعامل مع إجراءات الموثقة المتعددة. استخدم تعبير `switch` من JavaScript في `reducer` للرد على أحداث الإجراء (action events) مختلفة. هذا نمط قياسي في كتابة reducers في Redux. يجب أن يبدل تعبير التبديل (switch) إلى `action.type` وأن يعيد حالة التوثيق (state authentication) المناسبة.
|
||||
|
||||
**ملاحظة:** في هذه المرحلة، لا تقلق حول عدم قدرة الحالة على التغيير، لأنها صغيرة وبسيطة في هذا المثال. لكل إجراء، يمكنك إعادة كائن جديد - على سبيل المثال `{authenticated: true}`. كما لا تنس كتابة قاعدة (case) باسم `default` في تعبير التبديل الخاص بك الذي يعيد الحالة `state`. هذا مهم لأنه بمجرد أن يكون التطبيق الخاص بك يحتوي على reducers متعددة، يتم تشغيلها جميعا في أي وقت يتم فيه إرسال إجراء، حتى عندما لا يكون الإجراء متصلا بذلك reducer. في مثل هذه الحالة، تريد التأكد من إعادة `state` الحالية.
|
||||
**ملاحظة:** في هذه المرحلة، لا تقلق حول عدم قدرة الحالة (state) على التغيير، لأنها صغيرة وبسيطة في هذا المثال. لكل إجراء، يمكنك إعادة كائن جديد - على سبيل المثال `{authenticated: true}`. كما لا تنس كتابة قاعدة (case) باسم `default` في تعبيرك لتبديل الذي ينتج `state`. هذا مهم لأنه بمجرد أن يكون التطبيق الخاص بك يحتوي على reducers متعددة، يتم تشغيلها جميعا في أي وقت يتم فيه إرسال إجراء، حتى عندما لا يكون الإجراء متصلا بذلك reducer. في هذا الإطار، تريد التأكد من أنشاء `state` الحالية.
|
||||
|
||||
# --hints--
|
||||
|
||||
@ -36,7 +36,7 @@ assert(logoutUser().type === 'LOGOUT');
|
||||
assert(store.getState().authenticated === false);
|
||||
```
|
||||
|
||||
إرسال `loginUser` يجب أن تحديث خاصية `authenticated` في حالة المتجر إلى `true`.
|
||||
إرسال `loginUser` يجب أن تحديث خاصية `authenticated` في حالة (state) المتجر (store) إلى `true`.
|
||||
|
||||
```js
|
||||
assert(
|
||||
@ -51,7 +51,7 @@ assert(
|
||||
);
|
||||
```
|
||||
|
||||
إرسال `logoutUser` يجب أن تحديث خاصية `authenticated` في حالة المتجر إلى `false`.
|
||||
إرسال `logoutUser` يجب أن تحديث خاصية `authenticated` في حالة (state) المتجر (store) إلى `false`.
|
||||
|
||||
```js
|
||||
assert(
|
||||
|
||||
@ -36,7 +36,7 @@ assert(logoutUser().type === 'LOGOUT');
|
||||
assert(store.getState().authenticated === false);
|
||||
```
|
||||
|
||||
إرسال `loginUser` يجب أن تحديث خاصية `login` في حالة المتجر إلى `true`.
|
||||
إرسال `loginUser` يجب أن تحديث خاصية `login` في حالة (state) المتجر (store) إلى `true`.
|
||||
|
||||
```js
|
||||
assert(
|
||||
@ -51,7 +51,7 @@ assert(
|
||||
);
|
||||
```
|
||||
|
||||
إرسال `logoutUser` يجب أن تحديث خاصية `login` في حالة المتجر إلى `false`.
|
||||
إرسال `logoutUser` يجب أن تحديث خاصية `login` في حالة (state) المتجر (store) إلى `false`.
|
||||
|
||||
```js
|
||||
assert(
|
||||
@ -67,7 +67,7 @@ assert(
|
||||
);
|
||||
```
|
||||
|
||||
يجب أن تتعامل وظيفة `authReducer` مع أنواع متعددة من الإجراءات مع تعبير switch.
|
||||
يجب أن تتعامل وظيفة `authReducer` مع أنواع متعددة من الإجراءات (actions) مع تعبير switch.
|
||||
|
||||
```js
|
||||
(getUserInput) =>
|
||||
|
||||
@ -7,7 +7,7 @@ dashedName: step-43
|
||||
|
||||
# --description--
|
||||
|
||||
Increase the pseudo-element's transparency by `30%`.
|
||||
Aumenta la trasparenza dello pseudo-elemento del `30%`.
|
||||
|
||||
# --hints--
|
||||
|
||||
|
||||
@ -11,7 +11,7 @@ dashedName: step-2
|
||||
|
||||
適切な `charset` の値を持つ `meta` 要素を 1 つ、ページに加えてください。
|
||||
|
||||
`charset` 属性はページの文字エンコーディングを指定します。現状、ほとんどのブラウザーでサポートされている唯一のエンコーディングは `UTF-8` です。
|
||||
`charset` 属性はページの文字エンコーディングを指定します。今日では `UTF-8` が、大半のブラウザーでサポートされている唯一のエンコーディングとなっています。
|
||||
|
||||
# --hints--
|
||||
|
||||
|
||||
@ -9,7 +9,7 @@ dashedName: step-8
|
||||
|
||||
_SVG_ (scalable vector graphics) の便利な特徴として、SVG は、画像の解像度に影響を与えずに拡大縮小することを可能にする `path` 属性を含みます。
|
||||
|
||||
Currently, the `img` is assuming its default size, which is too large. 正しく表示するため、`id` をセレクターとして使用し、`width` の値を `max(100px, 18vw)` に設定して画像を縮小してください。
|
||||
今、`img` 要素はデフォルトのサイズが使われていますが、大きすぎるようです。 正しく表示するため、`id` をセレクターとして使用し、`width` の値を `max(100px, 18vw)` に設定して画像を縮小してください。
|
||||
|
||||
# --hints--
|
||||
|
||||
|
||||
@ -7,7 +7,7 @@ dashedName: step-10
|
||||
|
||||
# --description--
|
||||
|
||||
Make the `header` take up the full width of its parent container, set its `height` to `50px`, and set the `background-color` to `#1b1b32`. 次に、`display` の設定で_フレックスボックス_が使われるようにします。
|
||||
`header` 要素について、幅が親コンテナーの幅全体に広がるよう設定し、`height` は `50px`、`background-color` は `#1b1b32` に設定してください。 次に、`display` の設定で_フレックスボックス_が使われるようにします。
|
||||
|
||||
# --hints--
|
||||
|
||||
|
||||
@ -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.
|
||||
ラベルを関連付けられるように、ラジオボタンの `input` 要素すべてに `id` を追加しましょう。 1 つ目の `id` は `q1-a1` としてください。 残りの `id` は順に `q1-a2`、`q2-a1`、`q2-a2` としてください。
|
||||
|
||||
# --hints--
|
||||
|
||||
You should give the first `input` element an `id` of `q1-a1`.
|
||||
1 番目の `input` 要素の `id` を `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`.
|
||||
2 番目の `input` 要素の `id` を `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`.
|
||||
3 番目の `input` 要素の `id` を `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`.
|
||||
4 番目の `input` 要素の `id` を `q2-a2` に設定する必要があります。
|
||||
|
||||
```js
|
||||
assert.equal(document.querySelectorAll('ul.answers-list > li > label > input')?.[3]?.id, "q2-a2");
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
---
|
||||
id: 6145e8b5080a5f06bb0223d0
|
||||
title: Step 32
|
||||
title: ステップ 32
|
||||
challengeType: 0
|
||||
dashedName: step-32
|
||||
---
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
---
|
||||
id: 6145eb5f08a38a0786c7a80c
|
||||
title: Step 33
|
||||
title: ステップ 33
|
||||
challengeType: 0
|
||||
dashedName: step-33
|
||||
---
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
---
|
||||
id: 6145ed1f22caab087630aaad
|
||||
title: Step 34
|
||||
title: ステップ 34
|
||||
challengeType: 0
|
||||
dashedName: step-34
|
||||
---
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
---
|
||||
id: 6145ee65e2e1530938cb594d
|
||||
title: Step 35
|
||||
title: ステップ 35
|
||||
challengeType: 0
|
||||
dashedName: step-35
|
||||
---
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
---
|
||||
id: 6145f02240ff8f09f7ec913c
|
||||
title: Step 36
|
||||
title: ステップ 36
|
||||
challengeType: 0
|
||||
dashedName: step-36
|
||||
---
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
---
|
||||
id: 6145f14f019a4b0adb94b051
|
||||
title: Step 37
|
||||
title: ステップ 37
|
||||
challengeType: 0
|
||||
dashedName: step-37
|
||||
---
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
---
|
||||
id: 6145f3a5cd9be60b9459cdd6
|
||||
title: Step 38
|
||||
title: ステップ 38
|
||||
challengeType: 0
|
||||
dashedName: step-38
|
||||
---
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
---
|
||||
id: 6145f47393fbe70c4d885f9c
|
||||
title: Step 39
|
||||
title: ステップ 39
|
||||
challengeType: 0
|
||||
dashedName: step-39
|
||||
---
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
---
|
||||
id: 6145f59029474c0d3dc1c8b8
|
||||
title: Step 40
|
||||
title: ステップ 40
|
||||
challengeType: 0
|
||||
dashedName: step-40
|
||||
---
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
---
|
||||
id: 6145f685797bd30df9784e8c
|
||||
title: Step 41
|
||||
title: ステップ 41
|
||||
challengeType: 0
|
||||
dashedName: step-41
|
||||
---
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
---
|
||||
id: 6145f829ac6a920ebf5797d7
|
||||
title: Step 42
|
||||
title: ステップ 42
|
||||
challengeType: 0
|
||||
dashedName: step-42
|
||||
---
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
---
|
||||
id: 6145f8f8bcd4370f6509078e
|
||||
title: Step 43
|
||||
title: ステップ 43
|
||||
challengeType: 0
|
||||
dashedName: step-43
|
||||
---
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
---
|
||||
id: 6145fb5018cb5b100cb2a88c
|
||||
title: Step 44
|
||||
title: ステップ 44
|
||||
challengeType: 0
|
||||
dashedName: step-44
|
||||
---
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
---
|
||||
id: 6145fc3707fc3310c277f5c8
|
||||
title: Step 45
|
||||
title: ステップ 45
|
||||
challengeType: 0
|
||||
dashedName: step-45
|
||||
---
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
---
|
||||
id: 614796cb8086be482d60e0ac
|
||||
title: Step 46
|
||||
title: ステップ 46
|
||||
challengeType: 0
|
||||
dashedName: step-46
|
||||
---
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
---
|
||||
id: 6147a14ef5668b5881ef2297
|
||||
title: Step 47
|
||||
title: ステップ 47
|
||||
challengeType: 0
|
||||
dashedName: step-47
|
||||
---
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
---
|
||||
id: 614878f7a412310647873015
|
||||
title: Step 48
|
||||
title: ステップ 48
|
||||
challengeType: 0
|
||||
dashedName: step-48
|
||||
---
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
---
|
||||
id: 61487b77d4a37707073a64e5
|
||||
title: Step 49
|
||||
title: ステップ 49
|
||||
challengeType: 0
|
||||
dashedName: step-49
|
||||
---
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
---
|
||||
id: 61487da611a65307e78d2c20
|
||||
title: Step 50
|
||||
title: ステップ 50
|
||||
challengeType: 0
|
||||
dashedName: step-50
|
||||
---
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
---
|
||||
id: 61487f703571b60899055cf9
|
||||
title: Step 51
|
||||
title: ステップ 51
|
||||
challengeType: 0
|
||||
dashedName: step-51
|
||||
---
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
---
|
||||
id: 614880dc16070e093e29bc56
|
||||
title: Step 52
|
||||
title: ステップ 52
|
||||
challengeType: 0
|
||||
dashedName: step-52
|
||||
---
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
---
|
||||
id: 614883b6fa720e09fb167de9
|
||||
title: Step 53
|
||||
title: ステップ 53
|
||||
challengeType: 0
|
||||
dashedName: step-53
|
||||
---
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
---
|
||||
id: 614884c1f5d6f30ab3d78cde
|
||||
title: Step 54
|
||||
title: ステップ 54
|
||||
challengeType: 0
|
||||
dashedName: step-54
|
||||
---
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
---
|
||||
id: 61488ecfd05e290b5712e6da
|
||||
title: Step 55
|
||||
title: ステップ 55
|
||||
challengeType: 0
|
||||
dashedName: step-55
|
||||
---
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
---
|
||||
id: 6148d99cdc7acd0c519862cb
|
||||
title: Step 56
|
||||
title: ステップ 56
|
||||
challengeType: 0
|
||||
dashedName: step-56
|
||||
---
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
---
|
||||
id: 6148da157cc0bd0d06df5c0a
|
||||
title: Step 57
|
||||
title: ステップ 57
|
||||
challengeType: 0
|
||||
dashedName: step-57
|
||||
---
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
---
|
||||
id: 6148dc095264000dce348bf5
|
||||
title: Step 58
|
||||
title: ステップ 58
|
||||
challengeType: 0
|
||||
dashedName: step-58
|
||||
---
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
---
|
||||
id: 6148dcaaf2e8750e6cb4501a
|
||||
title: Step 59
|
||||
title: ステップ 59
|
||||
challengeType: 0
|
||||
dashedName: step-59
|
||||
---
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
---
|
||||
id: 6148dd31d210990f0fb140f8
|
||||
title: Step 60
|
||||
title: ステップ 60
|
||||
challengeType: 0
|
||||
dashedName: step-60
|
||||
---
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
---
|
||||
id: 6148defa9c01520fb9d178a0
|
||||
title: Step 61
|
||||
title: ステップ 61
|
||||
challengeType: 0
|
||||
dashedName: step-61
|
||||
---
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
---
|
||||
id: 6148dfab9b54c110577de165
|
||||
title: Step 62
|
||||
title: ステップ 62
|
||||
challengeType: 0
|
||||
dashedName: step-62
|
||||
---
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
---
|
||||
id: 6148e0bcc13efd10f7d7a6a9
|
||||
title: Step 63
|
||||
title: ステップ 63
|
||||
challengeType: 0
|
||||
dashedName: step-63
|
||||
---
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
---
|
||||
id: 6148e161ecec9511941f8833
|
||||
title: Step 64
|
||||
title: ステップ 64
|
||||
challengeType: 0
|
||||
dashedName: step-64
|
||||
---
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
---
|
||||
id: 6148e28706b34912340fd042
|
||||
title: Step 65
|
||||
title: ステップ 65
|
||||
challengeType: 0
|
||||
dashedName: step-65
|
||||
---
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
---
|
||||
id: 6148e335c1edd512d00e4691
|
||||
title: Step 66
|
||||
title: ステップ 66
|
||||
challengeType: 0
|
||||
dashedName: step-66
|
||||
---
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
---
|
||||
id: 6148e41c728f65138addf9cc
|
||||
title: Step 67
|
||||
title: ステップ 67
|
||||
challengeType: 0
|
||||
dashedName: step-67
|
||||
---
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
---
|
||||
id: 6148e5aeb102e3142de026a2
|
||||
title: Step 68
|
||||
title: ステップ 68
|
||||
challengeType: 0
|
||||
dashedName: step-68
|
||||
---
|
||||
|
||||
@ -1,64 +1,64 @@
|
||||
---
|
||||
id: 6351e7a8684bf5377c4ee7f7
|
||||
title: Step 31
|
||||
title: ステップ 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.
|
||||
`input` 要素がネストされている `label` 要素の場合は必須ではないものの、`label` は対応する `input` 要素と明示的に関連付けることがベストプラクティスです。
|
||||
|
||||
Now, add a `for` attribute to each of your four `label`s that links the `label` to its corresponding radio `input`.
|
||||
4 つの `label` 要素にそれぞれ `for` 属性を追加して、`label` を 対応するラジオボタンの `input` 要素に関連付けてください。
|
||||
|
||||
# --hints--
|
||||
|
||||
You should give the first `label` a `for` attribute.
|
||||
1 つ目の `label` に `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.
|
||||
1 つ目の `label` に、対応する `input` 要素の `id` と一致する `for` 属性を設定してください。
|
||||
|
||||
```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.
|
||||
2 つ目の `label` に `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.
|
||||
2 つ目の `label` に、対応する `input` 要素の `id` と一致する `for` 属性を設定してください。
|
||||
|
||||
```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.
|
||||
3 つ目の `label` に `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.
|
||||
3 つ目の `label` に、対応する `input` 要素の `id` と一致する `for` 属性を設定してください。
|
||||
|
||||
```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.
|
||||
4 つ目の `label` に `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.
|
||||
4 つ目の `label` に、対応する `input` 要素の `id` と一致する `for` 属性を設定してください。
|
||||
|
||||
```js
|
||||
const htmlFor = document.querySelectorAll('ul.answers-list > li > label')?.[3]?.htmlFor;
|
||||
|
||||
@ -7,29 +7,29 @@ dashedName: step-5
|
||||
|
||||
# --description--
|
||||
|
||||
It's time to add some menu content. Add a `main` element within the existing `body` element. It will eventually contain pricing information about coffee and desserts offered by the cafe.
|
||||
メニューの中身を追加しましょう。 `main` 要素を、既存の `body` 要素の中に追加してください。 後ほど、カフェが提供するコーヒーとデザートの値段をここに入れます。
|
||||
|
||||
# --hints--
|
||||
|
||||
Your code should have an opening `<main>` tag.
|
||||
`<main>` の開始タグが 1 つ必要です。
|
||||
|
||||
```js
|
||||
assert(code.match(/<main>/i));
|
||||
```
|
||||
|
||||
Your code should have a closing `</main>` tag.
|
||||
終了タグ `</main>` が 1 つ必要です。
|
||||
|
||||
```js
|
||||
assert(code.match(/<\/main>/i));
|
||||
```
|
||||
|
||||
You should not change your `body` element. Make sure you don't accidentally delete your closing tag.
|
||||
`body` 要素を変更しないでください。 誤って終了タグを削除していないか確認してください。
|
||||
|
||||
```js
|
||||
assert($('body').length === 1);
|
||||
```
|
||||
|
||||
Your `main` tag should be within your `body` tag.
|
||||
`main` タグは `body` タグの中に置く必要があります。
|
||||
|
||||
```js
|
||||
const main = document.querySelector('main');
|
||||
|
||||
@ -7,35 +7,35 @@ dashedName: step-6
|
||||
|
||||
# --description--
|
||||
|
||||
The name of the cafe is `CAMPER CAFE`. Add an `h1` element within your `main` element. Give it the name of the cafe in capitalized letters to make it stand out.
|
||||
カフェの名前は `CAMPER CAFE` です。 `h1` 要素を `main` 要素内に 1 つ追加してください。 そこにカフェの名前を、目立つように大文字で入れてください。
|
||||
|
||||
# --hints--
|
||||
|
||||
You should have an opening `<h1>` tag.
|
||||
`<h1>` の開始タグが 1 つ必要です。
|
||||
|
||||
```js
|
||||
assert(code.match(/<h1>/i));
|
||||
```
|
||||
|
||||
You should have a closing `</h1>` tag.
|
||||
終了タグ `</h1>` が 1 つ必要です。
|
||||
|
||||
```js
|
||||
assert(code.match(/<\/h1>/i));
|
||||
```
|
||||
|
||||
You should not change your existing `main` element.
|
||||
既存の `main` 要素を変更しないでください。
|
||||
|
||||
```js
|
||||
assert($('main').length === 1);
|
||||
```
|
||||
|
||||
Your `h1` element should be nested in your `main` element.
|
||||
`h1` 要素は `main` 要素の中にネストされている必要があります。
|
||||
|
||||
```js
|
||||
assert($('h1')[0].parentElement.tagName === "MAIN");
|
||||
```
|
||||
|
||||
Your `h1` element should have the text `CAMPER CAFE`.
|
||||
`h1` 要素は `CAMPER CAFE` というテキストをもつ必要があります。
|
||||
|
||||
```js
|
||||
assert(code.match(/<h1>CAMPER CAFE<\/h1>/));
|
||||
|
||||
@ -7,35 +7,35 @@ 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`.
|
||||
カフェが 2020 年にオープンしたということを訪問者に知らせるために、`p` 要素を `h1` 要素の下に追加して、そのテキストを `Est. 2020` にしてください。
|
||||
|
||||
# --hints--
|
||||
|
||||
You should have an opening `<p>` tag.
|
||||
`<p>` の開始タグが 1 つ必要です。
|
||||
|
||||
```js
|
||||
assert(code.match(/<p>/i));
|
||||
```
|
||||
|
||||
You should have a closing `</p>` tag.
|
||||
終了タグ `</p>` が 1 つ必要です。
|
||||
|
||||
```js
|
||||
assert(code.match(/<\/p>/i));
|
||||
```
|
||||
|
||||
You should not change your existing `h1` element. Make sure you did not delete the closing tag.
|
||||
既存の `h1` 要素を変更しないでください。 終了タグを削除していないか確認してください。
|
||||
|
||||
```js
|
||||
assert($('h1').length === 1);
|
||||
```
|
||||
|
||||
Your `p` element should be below your `h1` element.
|
||||
`p` 要素は `h1` 要素の下に置く必要があります。
|
||||
|
||||
```js
|
||||
assert($('p')[0].previousElementSibling.tagName === 'H1');
|
||||
```
|
||||
|
||||
Your `p` element should have the text `Est. 2020`.
|
||||
`p` 要素は `Est. 2020` というテキストをもつ必要があります。
|
||||
|
||||
```js
|
||||
assert(document.querySelector("p").innerText === "Est. 2020");
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
---
|
||||
id: 5f344f9c805cd193c33d829c
|
||||
title: Step 11
|
||||
title: ステップ 11
|
||||
challengeType: 0
|
||||
dashedName: step-11
|
||||
---
|
||||
@ -15,7 +15,7 @@ element {
|
||||
}
|
||||
```
|
||||
|
||||
`h1` 要素の `text-align` プロパティを `center` に設定して、中央に配置してください。
|
||||
`h1` 要素の `text-align` プロパティを `center` に設定して、中央揃えにしてください。
|
||||
|
||||
# --hints--
|
||||
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
---
|
||||
id: 5f344fad8bf01691e71a30eb
|
||||
title: Step 10
|
||||
title: ステップ 10
|
||||
challengeType: 0
|
||||
dashedName: step-10
|
||||
---
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
---
|
||||
id: 5f344fbc22624a2976425065
|
||||
title: Step 9
|
||||
title: ステップ 9
|
||||
challengeType: 0
|
||||
dashedName: step-9
|
||||
---
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
---
|
||||
id: 5f344fc1520b6719f2e35605
|
||||
title: Step 8
|
||||
title: ステップ 8
|
||||
challengeType: 0
|
||||
dashedName: step-8
|
||||
---
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
---
|
||||
id: 5f3477ae34c1239cafe128be
|
||||
title: Step 13
|
||||
title: ステップ 13
|
||||
challengeType: 0
|
||||
dashedName: step-13
|
||||
---
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
---
|
||||
id: 5f3477ae8466a9a3d2cc953c
|
||||
title: Step 15
|
||||
title: ステップ 15
|
||||
challengeType: 0
|
||||
dashedName: step-15
|
||||
---
|
||||
|
||||
@ -1,13 +1,13 @@
|
||||
---
|
||||
id: 5f3477ae9675db8bb7655b30
|
||||
title: Step 12
|
||||
title: ステップ 12
|
||||
challengeType: 0
|
||||
dashedName: step-12
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
前のステップで、<dfn>要素型セレクター</dfn>を使用して `h1` 要素にスタイルを適用しました。 Center the `h2` and `p` elements by adding a new type selector for each one to the existing `style` element.
|
||||
前のステップで、<dfn>要素型セレクター</dfn>を使用して `h1` 要素にスタイルを適用しました。 同じ `style` 要素内に、今度は `h2` 要素と `p` 要素にそれぞれ対応する要素型セレクターを新しく追加して、中央揃えにしてください。
|
||||
|
||||
# --hints--
|
||||
|
||||
@ -18,42 +18,42 @@ const hasH1 = new __helpers.CSSHelp(document).getStyle('h1');
|
||||
assert(hasH1);
|
||||
```
|
||||
|
||||
You should not add a new `style` tag. Add the new CSS rules to the existing `style` tag.
|
||||
`style` タグは新しく追加しないでください。 既存の `style` タグの中に、新しい CSS ルールを追加してください。
|
||||
|
||||
```js
|
||||
const hasManyStyleTags = document.querySelectorAll('style').length > 1;
|
||||
assert(!hasManyStyleTags);
|
||||
```
|
||||
|
||||
You should add a new `h2` selector.
|
||||
`h2` セレクターを新しく追加してください。
|
||||
|
||||
```js
|
||||
const hasH2 = new __helpers.CSSHelp(document).getStyle('h2');
|
||||
assert(hasH2);
|
||||
```
|
||||
|
||||
You should add a new `p` selector.
|
||||
`p` セレクターを新しく追加してください。
|
||||
|
||||
```js
|
||||
const hasP = new __helpers.CSSHelp(document).getStyle('p');
|
||||
assert(hasP);
|
||||
```
|
||||
|
||||
Your `h1` element should have a `text-align` of `center`.
|
||||
`h1` 要素の `text-align` を `center` に設定する必要があります。
|
||||
|
||||
```js
|
||||
const h1TextAlign = new __helpers.CSSHelp(document).getStyle('h1')?.getPropertyValue('text-align');
|
||||
assert(h1TextAlign === 'center');
|
||||
```
|
||||
|
||||
Your `h2` element should have a `text-align` of `center`.
|
||||
`h2` 要素の `text-align` を `center` に設定する必要があります。
|
||||
|
||||
```js
|
||||
const h2TextAlign = new __helpers.CSSHelp(document).getStyle('h2')?.getPropertyValue('text-align');
|
||||
assert(h2TextAlign === 'center');
|
||||
```
|
||||
|
||||
Your `p` element should have a `text-align` of `center`.
|
||||
`p` 要素の `text-align` を `center` に設定する必要があります。
|
||||
|
||||
```js
|
||||
const pTextAlign = new __helpers.CSSHelp(document).getStyle('p')?.getPropertyValue('text-align');
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
---
|
||||
id: 5f3477aefa51bfc29327200b
|
||||
title: Step 14
|
||||
title: ステップ 14
|
||||
challengeType: 0
|
||||
dashedName: step-14
|
||||
---
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
---
|
||||
id: 5f3477cb2e27333b1ab2b955
|
||||
title: Step 16
|
||||
title: ステップ 16
|
||||
challengeType: 0
|
||||
dashedName: step-16
|
||||
---
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
---
|
||||
id: 5f3477cb303c5cb61b43aa9b
|
||||
title: Step 18
|
||||
title: ステップ 18
|
||||
challengeType: 0
|
||||
dashedName: step-18
|
||||
---
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
---
|
||||
id: 5f3477cbcb6ba47918c1da92
|
||||
title: Step 17
|
||||
title: ステップ 17
|
||||
challengeType: 0
|
||||
dashedName: step-17
|
||||
---
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
---
|
||||
id: 5f34a1fd611d003edeafd681
|
||||
title: Step 19
|
||||
title: ステップ 19
|
||||
challengeType: 0
|
||||
dashedName: step-19
|
||||
---
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
---
|
||||
id: 5f356ed60785e1f3e9850b6e
|
||||
title: Step 24
|
||||
title: ステップ 24
|
||||
challengeType: 0
|
||||
dashedName: step-24
|
||||
---
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
---
|
||||
id: 5f356ed60a5decd94ab66986
|
||||
title: Step 22
|
||||
title: ステップ 22
|
||||
challengeType: 0
|
||||
removeComments: false
|
||||
dashedName: step-22
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
---
|
||||
id: 5f356ed6199b0cdef1d2be8f
|
||||
title: Step 26
|
||||
title: ステップ 26
|
||||
challengeType: 0
|
||||
dashedName: step-26
|
||||
---
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
---
|
||||
id: 5f356ed63c7807a4f1e6d054
|
||||
title: Step 21
|
||||
title: ステップ 21
|
||||
challengeType: 0
|
||||
dashedName: step-21
|
||||
---
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
---
|
||||
id: 5f356ed63e0fa262326eef05
|
||||
title: Step 23
|
||||
title: ステップ 23
|
||||
challengeType: 0
|
||||
dashedName: step-23
|
||||
---
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
---
|
||||
id: 5f356ed656a336993abd9f7c
|
||||
title: Step 25
|
||||
title: ステップ 25
|
||||
challengeType: 0
|
||||
dashedName: step-25
|
||||
---
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
---
|
||||
id: 5f356ed69db0a491745e2bb6
|
||||
title: Step 27
|
||||
title: ステップ 27
|
||||
challengeType: 0
|
||||
dashedName: step-27
|
||||
---
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
---
|
||||
id: 5f356ed6cf6eab5f15f5cfe6
|
||||
title: Step 20
|
||||
title: ステップ 20
|
||||
challengeType: 0
|
||||
dashedName: step-20
|
||||
---
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
---
|
||||
id: 5f35e5c4321f818cdc4bed30
|
||||
title: Step 29
|
||||
title: ステップ 29
|
||||
challengeType: 0
|
||||
dashedName: step-29
|
||||
---
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
---
|
||||
id: 5f35e5c44359872a137bd98f
|
||||
title: Step 28
|
||||
title: ステップ 28
|
||||
challengeType: 0
|
||||
dashedName: step-28
|
||||
---
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
---
|
||||
id: 5f3c866d0fc037f7311b4ac8
|
||||
title: Step 38
|
||||
title: ステップ 38
|
||||
challengeType: 0
|
||||
dashedName: step-38
|
||||
---
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
---
|
||||
id: 5f3c866d28d7ad0de6470505
|
||||
title: Step 32
|
||||
title: ステップ 32
|
||||
challengeType: 0
|
||||
dashedName: step-32
|
||||
---
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
---
|
||||
id: 5f3c866d5414453fc2d7b480
|
||||
title: Step 31
|
||||
title: ステップ 31
|
||||
challengeType: 0
|
||||
dashedName: step-31
|
||||
---
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
---
|
||||
id: 5f3c866daec9a49519871816
|
||||
title: Step 30
|
||||
title: ステップ 30
|
||||
challengeType: 0
|
||||
dashedName: step-30
|
||||
---
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
---
|
||||
id: 5f3c866dbf362f99b9a0c6d0
|
||||
title: Step 37
|
||||
title: ステップ 37
|
||||
challengeType: 0
|
||||
dashedName: step-37
|
||||
---
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
---
|
||||
id: 5f3c866dd0d0275f01d4d847
|
||||
title: Step 39
|
||||
title: ステップ 39
|
||||
challengeType: 0
|
||||
dashedName: step-39
|
||||
---
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
---
|
||||
id: 5f3c866de7a5b784048f94b1
|
||||
title: Step 36
|
||||
title: ステップ 36
|
||||
challengeType: 0
|
||||
dashedName: step-36
|
||||
---
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
---
|
||||
id: 5f3cade94c6576e7f7b7953f
|
||||
title: Step 41
|
||||
title: ステップ 41
|
||||
challengeType: 0
|
||||
dashedName: step-41
|
||||
---
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
---
|
||||
id: 5f3cade9993019e26313fa8e
|
||||
title: Step 42
|
||||
title: ステップ 42
|
||||
challengeType: 0
|
||||
dashedName: step-42
|
||||
---
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
---
|
||||
id: 5f3cade99dda4e6071a85dfd
|
||||
title: Step 46
|
||||
title: ステップ 46
|
||||
challengeType: 0
|
||||
dashedName: step-46
|
||||
---
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
---
|
||||
id: 5f3cade9fa77275d9f4efe62
|
||||
title: Step 40
|
||||
title: ステップ 40
|
||||
challengeType: 0
|
||||
dashedName: step-40
|
||||
---
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
---
|
||||
id: 5f3ef6e01f288a026d709587
|
||||
title: Step 66
|
||||
title: ステップ 66
|
||||
challengeType: 0
|
||||
dashedName: step-66
|
||||
---
|
||||
@ -9,7 +9,7 @@ dashedName: step-66
|
||||
|
||||
`hr` 要素を使用して、コンテンツが異なるセクション間に区切り線を表示できます。
|
||||
|
||||
First, add an `hr` element between the `p` element with the class `established` and the first `section` element. `hr` 要素は自己終了要素であることに注意してください。
|
||||
まずは `hr` 要素を 1 つ、`established` というクラスの `p` 要素と最初の `section` 要素の間に追加してください。 `hr` 要素は自己終了要素であることに注意してください。
|
||||
|
||||
# --hints--
|
||||
|
||||
@ -20,7 +20,7 @@ assert(code.match(/<hr\s?\/?>/i));
|
||||
assert(!code.match(/<\/hr>/i));
|
||||
```
|
||||
|
||||
You should not change your existing `p` element with the class `established`.
|
||||
既存の、`established` というクラスの `p` 要素は変更しないでください。
|
||||
|
||||
```js
|
||||
assert($('p.established').length === 1);
|
||||
@ -32,7 +32,7 @@ assert($('p.established').length === 1);
|
||||
assert($('main').length === 1);
|
||||
```
|
||||
|
||||
Your `hr` element should be between your `p` element and your `section` element.
|
||||
`hr` 要素は `p` 要素と `section` 要素の間にある必要があります。
|
||||
|
||||
```js
|
||||
assert($('hr')[0].previousElementSibling.tagName === 'P');
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
---
|
||||
id: 5f3ef6e03d719d5ac4738993
|
||||
title: Step 56
|
||||
title: ステップ 56
|
||||
challengeType: 0
|
||||
dashedName: step-56
|
||||
---
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
---
|
||||
id: 5f3ef6e04559b939080db057
|
||||
title: Step 55
|
||||
title: ステップ 55
|
||||
challengeType: 0
|
||||
dashedName: step-55
|
||||
---
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
---
|
||||
id: 5f3ef6e050279c7a4a7101d3
|
||||
title: Step 54
|
||||
title: ステップ 54
|
||||
challengeType: 0
|
||||
dashedName: step-54
|
||||
---
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
---
|
||||
id: 5f3ef6e05473f91f948724ab
|
||||
title: Step 57
|
||||
title: ステップ 57
|
||||
challengeType: 0
|
||||
dashedName: step-57
|
||||
---
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
---
|
||||
id: 5f3ef6e056bdde6ae6892ba2
|
||||
title: Step 58
|
||||
title: ステップ 58
|
||||
challengeType: 0
|
||||
dashedName: step-58
|
||||
---
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
---
|
||||
id: 5f3ef6e06d34faac0447fc44
|
||||
title: Step 60
|
||||
title: ステップ 60
|
||||
challengeType: 0
|
||||
dashedName: step-60
|
||||
---
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
---
|
||||
id: 5f3ef6e07276f782bb46b93d
|
||||
title: Step 63
|
||||
title: ステップ 63
|
||||
challengeType: 0
|
||||
dashedName: step-63
|
||||
---
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
---
|
||||
id: 5f3ef6e0819d4f23ca7285e6
|
||||
title: Step 48
|
||||
title: ステップ 48
|
||||
challengeType: 0
|
||||
dashedName: step-48
|
||||
---
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
---
|
||||
id: 5f3ef6e087d56ed3ffdc36be
|
||||
title: Step 61
|
||||
title: ステップ 61
|
||||
challengeType: 0
|
||||
dashedName: step-61
|
||||
---
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
---
|
||||
id: 5f3ef6e0a81099d9a697b550
|
||||
title: Step 64
|
||||
title: ステップ 64
|
||||
challengeType: 0
|
||||
dashedName: step-64
|
||||
---
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
---
|
||||
id: 5f3ef6e0b431cc215bb16f55
|
||||
title: Step 65
|
||||
title: ステップ 65
|
||||
challengeType: 0
|
||||
dashedName: step-65
|
||||
---
|
||||
|
||||
Some files were not shown because too many files have changed in this diff Show More
Loading…
Reference in New Issue
Block a user