diff --git a/curriculum/challenges/arabic/03-front-end-development-libraries/front-end-development-libraries-projects/build-a-25-5-clock.md b/curriculum/challenges/arabic/03-front-end-development-libraries/front-end-development-libraries-projects/build-a-25-5-clock.md index 53b184801e3..b2ea6063eda 100644 --- a/curriculum/challenges/arabic/03-front-end-development-libraries/front-end-development-libraries-projects/build-a-25-5-clock.md +++ b/curriculum/challenges/arabic/03-front-end-development-libraries/front-end-development-libraries-projects/build-a-25-5-clock.md @@ -8,71 +8,73 @@ dashedName: build-a-25--5-clock # --description-- -**متطلبات:** أنشئ تطبيق يشبه وظيفيا إلي https://25--5-clock.freecodecamp.rocks. +**Note:** **React 18 has known incompatibilities with the tests for this project (see [issue](https://github.com/freeCodeCamp/freeCodeCamp/issues/45922))** -أكمل قصص المستخدم بالأسفل وأجتاز جميع الاختبارات للنجاح. استخدم أي libraries أو APIs تحتاج إليها. أعطيها أسلوبك الشخصي الخاص. +**Objective:** Build an app that is functionally similar to this: https://25--5-clock.freecodecamp.rocks. -يمكنك استخدام أي مزيج من HTML و JavaScript و CSS و Bootstrap و SASS و React و Redux و jQuery لإكمال هذا المشروع. يجب عليك استخدام frontend framework (مثل React على سبيل المثال) لأن هذا القسم يدور حول تعلم frontend framework. لا ينصح باستخدام التكنولوجيات الإضافية غير المدرجة أعلاه و استخدامها على مسؤوليتك الخاصة. ونحن ننظر في دعم frontend frameworks أخرى، مثل Angular و Vue، ولكنها غير مدعومة حاليا. سنقبل ونحاول إصلاح جميع تقارير المشكلات التي تستخدم حُزْمَة التكنولوجيات المقترحة لهذا المشروع. برمجة سعيدة! +Fulfill the below user stories and get all of the tests to pass. Use whichever libraries or APIs you need. Give it your own personal style. -**قصة المستخدم #1:** يمكنني رؤية عنصر مع `id="break-label"` الذي يحتوي على سلسلة (على سبيل المثال "Break Length"). +You can use any mix of HTML, JavaScript, CSS, Bootstrap, SASS, React, Redux, and jQuery to complete this project. You should use a frontend framework (like React for example) because this section is about learning frontend frameworks. Additional technologies not listed above are not recommended and using them is at your own risk. We are looking at supporting other frontend frameworks like Angular and Vue, but they are not currently supported. We will accept and try to fix all issue reports that use the suggested technology stack for this project. Happy coding! -**قصة المستخدم #2:** يمكنني رؤية عنصر مع `id="session-label"` الذي يحتوي على سلسلة (على سبيل المثال "Session Length"). +**User Story #1:** I can see an element with `id="break-label"` that contains a string (e.g. "Break Length"). -**قصة المستخدم #3:** يمكنني أن أرى عنصرين يمكن النقر عليهما معرفين بشكل: `id="break-decrement"` و `id="session-decrement"`. +**User Story #2:** I can see an element with `id="session-label"` that contains a string (e.g. "Session Length"). -**قصة المستخدم #4:** يمكنني أن أرى عنصرين يمكن النقر عليهما معرفين بشكل: `id="break-increment"` و `id="session-increment"`. +**User Story #3:** I can see two clickable elements with corresponding IDs: `id="break-decrement"` and `id="session-decrement"`. -**قصة المستخدم #5:** يمكنني مشاهدة عنصر مع `id="break-length"`, الذي يعرض (display) بشكل افتراضي (في التحميل) بقيمة 5. +**User Story #4:** I can see two clickable elements with corresponding IDs: `id="break-increment"` and `id="session-increment"`. -**قصة المستخدم #6:** يمكنني أن أرى عنصرا مع `id="session-length"`، الذي يعرض بشكل افتراضي بقيمة 25. +**User Story #5:** I can see an element with a corresponding `id="break-length"`, which by default (on load) displays a value of 5. -**قصة المستخدم #7:** يمكنني أن أرى عنصرا مع `id="timer-label"`، يحتوي على سلسلة تشير إلى أن الجَلسة تم تهيئتها ("e.g. "Session). +**User Story #6:** I can see an element with a corresponding `id="session-length"`, which by default displays a value of 25. -**قصة المستخدم #8:** يمكنني مشاهدة عنصر مع `id="time-left"`. ملاحظة: أيقاف أو تشغيل القيمة في هذا الحقل يجب أن تظهر دائما بصيغة `mm:ss` (مثل 25:00). +**User Story #7:** I can see an element with a corresponding `id="timer-label"`, that contains a string indicating a session is initialized (e.g. "Session"). -**قصة المستخدم #9:** يمكنني رؤية عنصر قابل للنقر مع `id="start_stop"`. +**User Story #8:** I can see an element with corresponding `id="time-left"`. NOTE: Paused or running, the value in this field should always be displayed in `mm:ss` format (i.e. 25:00). -**قصة المستخدم #10:** يمكنني رؤية عنصر قابل للنقر مع `id="reset"`. +**User Story #9:** I can see a clickable element with a corresponding `id="start_stop"`. -**قصة المستخدم #11:** عندما أنقر على العنصر مع معرف `reset`، أي مؤقت قيد التشغيل يجب إيقافه، القيمة ضمن `id="break-length"` يجب أن تنتج `5`، القيمة ضمن `id="session-length"` يجب أن تعود إلى 25، والعنصر مع `id="time-left"` يجب أن يعاد تعيينه إلى حالته (state) الافتراضية. +**User Story #10:** I can see a clickable element with a corresponding `id="reset"`. -**قصة المستخدم #12:** عندما أنقر على العنصر مع معرف `break-decrement`، القيمة ضمن `id="break-length"` مراسيم بقيمة 1، ويمكنني أن أرى القيمة المحدثة. +**User Story #11:** When I click the element with the id of `reset`, any running timer should be stopped, the value within `id="break-length"` should return to `5`, the value within `id="session-length"` should return to 25, and the element with `id="time-left"` should reset to its default state. -**قصة المستخدم #13:** عندما أنقر على العنصر مع معرف `break-increment`، القيمة ضمن `id="break-length"` زيادة بقيمة 1، ويمكنني أن أرى القيمة المحدثة. +**User Story #12:** When I click the element with the id of `break-decrement`, the value within `id="break-length"` decrements by a value of 1, and I can see the updated value. -**قصة المستخدم #14:** عندما أنقر على العنصر مع معرف `session-decrement`، القيمة ضمن `id="session-length"` تقل بقيمة 1، ويمكنني أن أرى القيمة المحدثة. +**User Story #13:** When I click the element with the id of `break-increment`, the value within `id="break-length"` increments by a value of 1, and I can see the updated value. -**قصة المستخدم #15:** عندما أنقر على العنصر مع معرف `session-increment`، القيمة ضمن `id="session-length"` تزداد بقيمة 1، ويمكنني أن أرى القيمة المحدثة. +**User Story #14:** When I click the element with the id of `session-decrement`, the value within `id="session-length"` decrements by a value of 1, and I can see the updated value. -**قصة المستخدم #16:** يجب ألا أكون قادرا على تعيين جَلسة أو طول الاستراحة إلى <= 0. +**User Story #15:** When I click the element with the id of `session-increment`, the value within `id="session-length"` increments by a value of 1, and I can see the updated value. -**قصة المستخدم #17:** يجب ألا أكون قادرا على تعيين جَلسة أو طول الاستراحة إلى > 60. +**User Story #16:** I should not be able to set a session or break length to <= 0. -**قصة المستخدم #18:** عندما أنقر أول مرة على العنصر باستخدام `id="start_stop"`، يجب أن يبدأ المؤقت تشغيل من القيمة المعروضة حاليا في `id="session-length"`، حتى إذا تم زيادة القيمة أو تخفيضها من القيمة الأصلية البالغة 25. +**User Story #17:** I should not be able to set a session or break length to > 60. -**قصة المستخدم #19:** إذا كان المؤقت قيد التشغيل، يجب أن يعرض العنصر الذي يحتوي على معرف `time-left` الوقت المتبقي في تنسيق `mm:ss` (قلل القيمة مرة 1 وتحديث العرض كل 1000ms). +**User Story #18:** When I first click the element with `id="start_stop"`, the timer should begin running from the value currently displayed in `id="session-length"`, even if the value has been incremented or decremented from the original value of 25. -**قصة المستخدم #20:** إذا كان المؤقت قيد التشغيل وانقر على العنصر مع `id="start_stop"`، يجب أن يتوقف العد التنازلي. +**User Story #19:** If the timer is running, the element with the id of `time-left` should display the remaining time in `mm:ss` format (decrementing by a value of 1 and updating the display every 1000ms). -**قصة المستخدم #21:** إذا تم إيقاف مؤقت وانقر على العنصر مع `id="start_stop"`، وينبغي أن يستأنف العد التنازلي من النقطة التي توقف عندها العد. +**User Story #20:** If the timer is running and I click the element with `id="start_stop"`, the countdown should pause. -**قصة المستخدم #22:** عندما يصل العد التنازلي للجلسات إلى صفر (لاحظ: مؤقت يصل إلى 00:00)، ويبدأ العد التنازلي جديد، يجب أن يعرض العنصر الذي يحتوي على معرف `timer-label` سلسلة تشير إلى أن مدّة الاستراحة قد بدأت. +**User Story #21:** If the timer is paused and I click the element with `id="start_stop"`, the countdown should resume running from the point at which it was paused. -**قصة المستخدم #23:** عندما يصل العد التنازلي للجلسات إلى صفر (لاحظ: مؤقت يصل إلى 00:00)، ينبغي أن يبدأ العد التنازلي الجديد في الاستراحة، مع العد التنازلي من القيمة المعروضة حاليا في عنصر `id="break-length"`. +**User Story #22:** When a session countdown reaches zero (NOTE: timer MUST reach 00:00), and a new countdown begins, the element with the id of `timer-label` should display a string indicating a break has begun. -**قصة المستخدم #24:** عندما يصل العد التنازلي للاستراحة إلى صفر (لاحظ: مؤقت يصل إلى 00:00)، ويبدأ العد التنازلي جديد، يجب أن يعرض العنصر الذي يحتوي على معرف `timer-label` سلسلة تشير إلى أن مدّة للجلسات قد بدأت. +**User Story #23:** When a session countdown reaches zero (NOTE: timer MUST reach 00:00), a new break countdown should begin, counting down from the value currently displayed in the `id="break-length"` element. -**قصة المستخدم #25:** عندما يصل العد التنازلي للاستراحة إلى صفر (لاحظ: مؤقت يصل إلى 00:00)، ينبغي أن يبدأ العد التنازلي الجديد في الجلسات، مع العد التنازلي من القيمة المعروضة حاليا في عنصر `id="session-length"`. +**User Story #24:** When a break countdown reaches zero (NOTE: timer MUST reach 00:00), and a new countdown begins, the element with the id of `timer-label` should display a string indicating a session has begun. -**قصة المستخدم #26:** عندما يصل العد التنازلي إلى صفر (لاحظ: المؤقت يجب أن يصل إلى 00:00)، يجب تشغيل صوت يشير إلى أن الوقت في الأعلى. يجب أن تستخدم هذا وسم `audio` في HTML5 وأن يحتوي على `id="beep"`. +**User Story #25:** When a break countdown reaches zero (NOTE: timer MUST reach 00:00), a new session countdown should begin, counting down from the value currently displayed in the `id="session-length"` element. -**قصة المستخدم #27:** عنصر الصوت مع `id="beep"` يجب أن يكون ثانية واحدة أو أكثر. +**User Story #26:** When a countdown reaches zero (NOTE: timer MUST reach 00:00), a sound indicating that time is up should play. This should utilize an HTML5 `audio` tag and have a corresponding `id="beep"`. -**قصة المستخدم #28:** عنصر الصوت مع معرف `beep` يجب أن يتوقف عن التشغيل وأن يعاد جرح إلى البداية عند النقر على العنصر مع معرف `reset`. +**User Story #27:** The audio element with `id="beep"` must be 1 second or longer. -يمكنك بناء مشروعك عن طريق استخدام هذا نموذج CodePen والنقر على `Save` لإنشاء طبقيك الخاص بك. أو يمكنك استخدام رابط CDN هذا لتشغيل الاختبارات في أي بيئة تفضلها: `https://cdn.freecodecamp.org/testable-projects-fcc/v1/bundle.js` +**User Story #28:** The audio element with id of `beep` must stop playing and be rewound to the beginning when the element with the id of `reset` is clicked. -بمجرد أن تنتهي، إرسال عنوان URL لمشروع العمل الخاص بك مع اجتياز جميع الاختبارات. +You can build your project by using this CodePen template and clicking `Save` to create your own pen. Or you can use this CDN link to run the tests in any environment you like: `https://cdn.freecodecamp.org/testable-projects-fcc/v1/bundle.js` + +Once you're done, submit the URL to your working project with all its tests passing. # --solutions-- diff --git a/curriculum/challenges/arabic/03-front-end-development-libraries/front-end-development-libraries-projects/build-a-drum-machine.md b/curriculum/challenges/arabic/03-front-end-development-libraries/front-end-development-libraries-projects/build-a-drum-machine.md index d113b307ab5..4842a8af6dd 100644 --- a/curriculum/challenges/arabic/03-front-end-development-libraries/front-end-development-libraries-projects/build-a-drum-machine.md +++ b/curriculum/challenges/arabic/03-front-end-development-libraries/front-end-development-libraries-projects/build-a-drum-machine.md @@ -7,28 +7,29 @@ dashedName: build-a-drum-machine --- # --description-- +**Note:** **React 18 has known incompatibilities with the tests for this project (see [issue](https://github.com/freeCodeCamp/freeCodeCamp/issues/45922))** -**متطلبات:** أنشئ تطبيق يشبه وظيفيا إلي https://drum-machine.freecodecamp.rocks/. +**Objective:** Build an app that is functionally similar to this: https://drum-machine.freecodecamp.rocks/. -أكمل قصص المستخدم بالأسفل وأجتاز جميع الاختبارات للنجاح. استخدم أي libraries أو APIs تحتاج إليها. أعطيها أسلوبك الشخصي الخاص. +Fulfill the below user stories and get all of the tests to pass. Use whichever libraries or APIs you need. Give it your own personal style. -يمكنك استخدام أي مزيج من HTML و JavaScript و CSS و Bootstrap و SASS و React و Redux و jQuery لإكمال هذا المشروع. يجب عليك استخدام frontend framework (مثل React على سبيل المثال) لأن هذا القسم يدور حول تعلم frontend framework. لا ينصح باستخدام التكنولوجيات الإضافية غير المدرجة أعلاه و استخدامها على مسؤوليتك الخاصة. ونحن ننظر في دعم frontend frameworks أخرى، مثل Angular و Vue، ولكنها غير مدعومة حاليا. سنقبل ونحاول إصلاح جميع تقارير المشكلات التي تستخدم حُزْمَة التكنولوجيات المقترحة لهذا المشروع. برمجة سعيدة! +You can use any mix of HTML, JavaScript, CSS, Bootstrap, SASS, React, Redux, and jQuery to complete this project. You should use a frontend framework (like React for example) because this section is about learning frontend frameworks. Additional technologies not listed above are not recommended and using them is at your own risk. We are looking at supporting other frontend frameworks like Angular and Vue, but they are not currently supported. We will accept and try to fix all issue reports that use the suggested technology stack for this project. Happy coding! -**قصة المستخدم #1:** يجب أن أكون قادرا على رؤية حاوية خارجية ذات `id="drum-machine"` تحتوي على جميع العناصر الأخرى. +**User Story #1:** I should be able to see an outer container with a corresponding `id="drum-machine"` that contains all other elements. -**قصة المستخدم #2:** في `#drum-machine` يمكنني رؤية عنصر يحمل `id="display"`. +**User Story #2:** Within `#drum-machine` I can see an element with a corresponding `id="display"`. -**قصة المستخدم #3:** في `#drum-machine` يمكنني أن أرى 9 عناصر لوحة الطبل القابلة للنقر، كل منها يحمل اسم فئة من `drum-pad`, معرف فريد يصف مقطع الصوت الذي سيتم إعداد لوحة الطبل للتشغيل، ونص داخلي يقابل أحد المفاتيح التالية على لوحة المفاتيح: `Q`، و`W`، و`E`، و`A`، و`S`، و`D`، و`Z`، و`X`، و`C`. لوحات الطبل (drum pads) تكن بهذا الترتيب. +**User Story #3:** Within `#drum-machine` I can see 9 clickable drum pad elements, each with a class name of `drum-pad`, a unique id that describes the audio clip the drum pad will be set up to trigger, and an inner text that corresponds to one of the following keys on the keyboard: `Q`, `W`, `E`, `A`, `S`, `D`, `Z`, `X`, `C`. The drum pads MUST be in this order. -**قصة المستخدم #4:** داخل كل `.drum-pad`، يجب أن يكون هناك عنصر HTML5 صوتي `audio` يحتوي على سمة `src` يشير إلى قالب صوتي، اسم فئة من `clip` ومعرف موافق النص الداخلي لأبيه `.drum-pad` (على سبيل المثال `id="Q"`، و`id="W"`، و`id="E"`، إلخ. +**User Story #4:** Within each `.drum-pad`, there should be an HTML5 `audio` element which has a `src` attribute pointing to an audio clip, a class name of `clip`, and an id corresponding to the inner text of its parent `.drum-pad` (e.g. `id="Q"`, `id="W"`, `id="E"` etc.). -**قصة المستخدم #4:** عندما أضغت على عنصر `.drum-pad`, يشتغل الصوت المسجل في عنصر `audio` الإبن. +**User Story #5:** When I click on a `.drum-pad` element, the audio clip contained in its child `audio` element should be triggered. -**قصة المستخدم #6:** عندما أضغط على مفتاح المشغل المرتبط بكل `.drum-pad`، يجب تشغيل المقطع الصوتي الموجود في عنصر صوت `audio` الأبن (مثلاً الضغط على مفتاح `Q` يجب أن يفعل لوحة الطبل الذي تحتوي على السلسلة `Q`، الضغط على مفتاح `W` يجب أن يطلق لوحة الطبل الذي تحتوي على السلسلة `W` وما إلى ذلك). +**User Story #6:** When I press the trigger key associated with each `.drum-pad`, the audio clip contained in its child `audio` element should be triggered (e.g. pressing the `Q` key should trigger the drum pad which contains the string `Q`, pressing the `W` key should trigger the drum pad which contains the string `W`, etc.). -**قصة المستخدم #7:** عندما `.drum-pad`، يتم عرض سلسلة تصف مقطع الصوت المرتبط به كالنص الداخلي لعنصر `#display` (يجب أن تكون كل سلسلة فريدة من نوعها). +**User Story #7:** When a `.drum-pad` is triggered, a string describing the associated audio clip is displayed as the inner text of the `#display` element (each string must be unique). -فيما يلي بعض العينات الصوتية التي يمكنك استخدامها لآلة الطبل الخاصة بك: +Here are some audio samples you can use for your drum machine: - [Heater 1](https://s3.amazonaws.com/freecodecamp/drums/Heater-1.mp3) - [Heater 2](https://s3.amazonaws.com/freecodecamp/drums/Heater-2.mp3) @@ -40,9 +41,9 @@ dashedName: build-a-drum-machine - [Kick](https://s3.amazonaws.com/freecodecamp/drums/RP4_KICK_1.mp3) - [Closed-HH](https://s3.amazonaws.com/freecodecamp/drums/Cev_H2.mp3) -يمكنك بناء مشروعك عن طريق استخدام هذا نموذج CodePen والنقر على `Save` لإنشاء طبقيك الخاص بك. أو يمكنك استخدام رابط CDN هذا لتشغيل الاختبارات في أي بيئة تفضلها: `https://cdn.freecodecamp.org/testable-projects-fcc/v1/bundle.js` +You can build your project by using this CodePen template and clicking `Save` to create your own pen. Or you can use this CDN link to run the tests in any environment you like: `https://cdn.freecodecamp.org/testable-projects-fcc/v1/bundle.js` -بمجرد أن تنتهي، ارسل عنوان URL لمشروع العمل الخاص بك مع اجتياز جميع الاختبارات. +Once you're done, submit the URL to your working project with all its tests passing. # --solutions-- diff --git a/curriculum/challenges/arabic/03-front-end-development-libraries/front-end-development-libraries-projects/build-a-javascript-calculator.md b/curriculum/challenges/arabic/03-front-end-development-libraries/front-end-development-libraries-projects/build-a-javascript-calculator.md index 119c29cdf6c..20c9aa4349c 100644 --- a/curriculum/challenges/arabic/03-front-end-development-libraries/front-end-development-libraries-projects/build-a-javascript-calculator.md +++ b/curriculum/challenges/arabic/03-front-end-development-libraries/front-end-development-libraries-projects/build-a-javascript-calculator.md @@ -7,53 +7,54 @@ dashedName: build-a-javascript-calculator --- # --description-- +**Note:** **React 18 has known incompatibilities with the tests for this project (see [issue](https://github.com/freeCodeCamp/freeCodeCamp/issues/45922))** -**متطلبات:** أنشئ تطبيق يشبه وظيفيا إلي https://javascript-calculator.freecodecamp.rocks/. +**Objective:** Build an app that is functionally similar to this: https://javascript-calculator.freecodecamp.rocks/. -أكمل قصص المستخدم بالأسفل وأجتاز جميع الاختبارات للنجاح. استخدم أي libraries أو APIs تحتاج إليها. أعطيها أسلوبك الشخصي الخاص. +Fulfill the below user stories and get all of the tests to pass. Use whichever libraries or APIs you need. Give it your own personal style. -يمكنك استخدام أي مزيج من HTML و JavaScript و CSS و Bootstrap و SASS و React و Redux و jQuery لإكمال هذا المشروع. يجب عليك استخدام frontend framework (مثل React على سبيل المثال) لأن هذا القسم يدور حول تعلم frontend framework. لا ينصح باستخدام التكنولوجيات الإضافية غير المدرجة أعلاه و استخدامها على مسؤوليتك الخاصة. ونحن ننظر في دعم frontend frameworks أخرى، مثل Angular و Vue، ولكنها غير مدعومة حاليا. سنقبل ونحاول إصلاح جميع تقارير المشكلات التي تستخدم حُزْمَة التكنولوجيات المقترحة لهذا المشروع. برمجة سعيدة! +You can use any mix of HTML, JavaScript, CSS, Bootstrap, SASS, React, Redux, and jQuery to complete this project. You should use a frontend framework (like React for example) because this section is about learning frontend frameworks. Additional technologies not listed above are not recommended and using them is at your own risk. We are looking at supporting other frontend frameworks like Angular and Vue, but they are not currently supported. We will accept and try to fix all issue reports that use the suggested technology stack for this project. Happy coding! -**قصة المستخدم #1:** آلة حاسبة يجب أن تحتوي على عنصر قابل للنقر يحتوي على `=` (علامة متساوية) مع ما يقابلها `id="equals"`. +**User Story #1:** My calculator should contain a clickable element containing an `=` (equal sign) with a corresponding `id="equals"`. -**قصة المستخدم #2:** آلة حاسبة الخاصة بي يجب أن تحتوي على 10 عناصر قابلة للنقر تحتوي على أرقام تبدأ من 0 ألى 9 مع المعرف المقابل التالي: `id="zero"`، و`id="one"`, و`id="two"`, و`id="three"`, و`id="four"`, و`id="five"`, و`id="six"`، و`id="seven"`, و`id="eight"`، و`id="nine"`. +**User Story #2:** My calculator should contain 10 clickable elements containing one number each from 0-9, with the following corresponding IDs: `id="zero"`, `id="one"`, `id="two"`, `id="three"`, `id="four"`, `id="five"`, `id="six"`, `id="seven"`, `id="eight"`, and `id="nine"`. -**قصة المستخدم #3:** آلة حاسبة الخاصة بي يجب أن تحتوي على 4 عناصر قابلة للنقر يحتوي كل منها على واحد من أربع عمليات رياضية أساسية لهم المعرفات المطابقة التالية: `id="add"`، و`id="subtract"`، و`id="multiply"`، و`id="divide"`. +**User Story #3:** My calculator should contain 4 clickable elements each containing one of the 4 primary mathematical operators with the following corresponding IDs: `id="add"`, `id="subtract"`, `id="multiply"`, `id="divide"`. -**قصة المستخدم #4:** آلة حاسبة يجب أن تحتوي على عنصر قابل للنقر يحتوي على `.` رمز (النقطة العشرية) مع ما مطابقه `id="decimal"`. +**User Story #4:** My calculator should contain a clickable element containing a `.` (decimal point) symbol with a corresponding `id="decimal"`. -**قصة المستخدم #5:** آلة حاسبة الخاصة بي يجب أن تحتوي على عنصر قابل للنقر مع `id="clear"`. +**User Story #5:** My calculator should contain a clickable element with an `id="clear"`. -**قصة المستخدم #6:** آلة حاسبة الخاصة بي يجب أن تحتوي على عنصر لعرض القيم مع مطابقه `id="display"`. +**User Story #6:** My calculator should contain an element to display values with a corresponding `id="display"`. -**قصة المستخدم #7:** في أي وقت، الضغط على زر `clear` يؤدي إلى مسح قيم الإدخال (input) والإخراج (output)، ويعيد الآلة الحاسبة إلى state المبدئية الخاصة بها؛ 0 يجب أن يظهر في العنصر بمعرف `display`. +**User Story #7:** At any time, pressing the `clear` button clears the input and output values, and returns the calculator to its initialized state; 0 should be shown in the element with the id of `display`. -**قصة المستخدم #8:** مع إدخال الأرقام، يجب أن أكون قادراً على رؤية مدخلاتي في العنصر مع معرف `display`. +**User Story #8:** As I input numbers, I should be able to see my input in the element with the id of `display`. -**قصة المستخدم #9:** في أي ترتيب، يجب أن أكون قادرا على الإضافة، طرح ضرب وقسم سلسلة من الأعداد من أي كَمَيَّة، وعندما ضغط على `=`، النتيجة الصحيحة يجب أن تظهر في العنصر مع معرف `display`. +**User Story #9:** In any order, I should be able to add, subtract, multiply and divide a chain of numbers of any length, and when I hit `=`, the correct result should be shown in the element with the id of `display`. -**قصة المستخدم #10:** عند إدخال الأرقام، يجب ألا تسمح آلة الحاسبة الخاصة بي لعدد أن يبدأ بعدة أصفار. +**User Story #10:** When inputting numbers, my calculator should not allow a number to begin with multiple zeros. -**قصة المستخدم #11:** عند النقر على العنصر العشري، `.` يجب إلحاق القيمة المعروضة حالياً؛ اثنان `.` في رَقْم واحد يجب عدم قبوله. +**User Story #11:** When the decimal element is clicked, a `.` should append to the currently displayed value; two `.` in one number should not be accepted. -**قصة المستخدم #12:** يجب أن أكون قادرا على تنفيذ أي عملية (`+`، و`-`, و`*`, و`/`) على الأرقام التي تحتوي على النُّقَط العشرية. +**User Story #12:** I should be able to perform any operation (`+`, `-`, `*`, `/`) on numbers containing decimal points. -**قصة المستخدم #13:** إذا تم إدخال عملتين اثنين أو أكثر على التوالي، يجب أن تكون العملية المنفذة هي آخر عملية أُدخلت (باستثناء علامة السالب (`-`). على سبيل المثال، إذا تم إدخال `5 + * 7 =`، يجب أن تكون النتيجة `35` (بمعنى `5 * 7`)؛ إذا تم إدخال `5 * - 5 =`، ينبغي أن تكون النتيجة `-25` (مثل `5 * (-5)`). +**User Story #13:** If 2 or more operators are entered consecutively, the operation performed should be the last operator entered (excluding the negative (`-`) sign). For example, if `5 + * 7 =` is entered, the result should be `35` (i.e. `5 * 7`); if `5 * - 5 =` is entered, the result should be `-25` (i.e. `5 * (-5)`). -**قصة المستخدم #14:** الضغط على المشغل مباشرة بعد `=` يجب أن يبدأ حساب جديد يعمل بناء على نتيجة التقييم السابق. +**User Story #14:** Pressing an operator immediately following `=` should start a new calculation that operates on the result of the previous evaluation. -**قصة المستخدم #15:** آلة حاسبة الخاصة بي يجب أن تكون دقيقة بالنسبة لعدد أرقام عشرية عندما يتعلق الأمر بالتقريب (لاحظ أنه لا يوجد معيار دقيق، ولكن يجب أن تكون قادراً على التعامل مع حسابات مثل `2 / 7` بدقة معقولة إلى 4 أرقام عشرية في الأقل). +**User Story #15:** My calculator should have several decimal places of precision when it comes to rounding (note that there is no exact standard, but you should be able to handle calculations like `2 / 7` with reasonable precision to at least 4 decimal places). -**ملاحظة على منطق الحاسبة:** لاحظ إلى أن هناك مدرستين فكريتين رئيستين على منطق إدخال الحاسبة: منطق التنفيذ الفوري (immediate execution logic) و منطق الصيغة (formula logic). ويستخدم مثالنا منطق الصيغة ويراعي ترتيب الأسبقية في العمليات، ولا يطبق التنفيذ الفوري. أحدهما مقبول، ولكن يرجى ملاحظة ذلك اعتمادا على أختيارك، الحاسبة الخاصة بك قد تنتج نتائج مختلفة عن النتائج الخاصة بنا في معادلات معينة (انظر أدناه على سبيل المثال). مادام أنه يمكن التحقق من حساباتك بواسطة آلة حاسبة إنتاج أخرى، يرجى عدم اعتبار هذا خطأ. +**Note On Calculator Logic:** It should be noted that there are two main schools of thought on calculator input logic: immediate execution logic and formula logic. Our example utilizes formula logic and observes order of operation precedence, immediate execution does not. Either is acceptable, but please note that depending on which you choose, your calculator may yield different results than ours for certain equations (see below example). As long as your math can be verified by another production calculator, please do not consider this a bug. -**مثال:** `3 + 5 x 6 - 2 / 4 =` +**EXAMPLE:** `3 + 5 x 6 - 2 / 4 =` - **منطق التنفيذ الفوري:** `11.5` - **الصيغة/منطق التعبير:** `32.5` -يمكنك بناء مشروعك عن طريق استخدام هذا نموذج CodePen والنقر على `Save` لإنشاء طبقيك الخاص بك. أو يمكنك استخدام رابط الـ CDN هذا لتشغيل الاختبارات في أي بيئة تفضلها: `https://cdn.freecodecamp.org/testable-projects-fcc/v1/bundle.js` +You can build your project by using this CodePen template and clicking `Save` to create your own pen. Or you can use this CDN link to run the tests in any environment you like: `https://cdn.freecodecamp.org/testable-projects-fcc/v1/bundle.js` -بمجرد أن تنتهي، ارسل عنوان URL لمشروع العمل الخاص بك مع اجتياز جميع الاختبارات. +Once you're done, submit the URL to your working project with all its tests passing. # --solutions-- diff --git a/curriculum/challenges/arabic/03-front-end-development-libraries/front-end-development-libraries-projects/build-a-markdown-previewer.md b/curriculum/challenges/arabic/03-front-end-development-libraries/front-end-development-libraries-projects/build-a-markdown-previewer.md index 086d7482991..fc7d960108e 100644 --- a/curriculum/challenges/arabic/03-front-end-development-libraries/front-end-development-libraries-projects/build-a-markdown-previewer.md +++ b/curriculum/challenges/arabic/03-front-end-development-libraries/front-end-development-libraries-projects/build-a-markdown-previewer.md @@ -7,30 +7,31 @@ dashedName: build-a-markdown-previewer --- # --description-- +**Note:** **React 18 has known incompatibilities with the tests for this project (see [issue](https://github.com/freeCodeCamp/freeCodeCamp/issues/45922))** -**متطلبات:** أنشئ تطبيق يشبه وظيفيا إلي https://markdown-previewer.freecodecamp.rocks/. +**Objective:** Build an app that is functionally similar to this: https://markdown-previewer.freecodecamp.rocks/. -أكمل قصص المستخدم بالأسفل وأجتاز جميع الاختبارات للنجاح. استخدم أي libraries أو APIs تحتاج إليها. أعطيها أسلوبك الشخصي الخاص. +Fulfill the below user stories and get all of the tests to pass. Use whichever libraries or APIs you need. Give it your own personal style. -يمكنك استخدام أي مزيج من HTML و JavaScript و CSS و Bootstrap و SASS و React و Redux و jQuery لإكمال هذا المشروع. يجب عليك استخدام frontend framework (مثل React على سبيل المثال) لأن هذا القسم يدور حول تعلم frontend framework. لا ينصح باستخدام التكنولوجيات الإضافية غير المدرجة أعلاه و استخدامها على مسؤوليتك الخاصة. ونحن ننظر في دعم frontend frameworks أخرى، مثل Angular و Vue، ولكنها غير مدعومة حاليا. سنقبل ونحاول إصلاح جميع تقارير المشكلات التي تستخدم حُزْمَة التكنولوجيات المقترحة لهذا المشروع. برمجة سعيدة! +You can use any mix of HTML, JavaScript, CSS, Bootstrap, SASS, React, Redux, and jQuery to complete this project. You should use a frontend framework (like React for example) because this section is about learning frontend frameworks. Additional technologies not listed above are not recommended and using them is at your own risk. We are looking at supporting other frontend frameworks like Angular and Vue, but they are not currently supported. We will accept and try to fix all issue reports that use the suggested technology stack for this project. Happy coding! -**قصة المستخدم #1:** يمكنني أن أرى عنصر `textarea` مع مطابقة `id="editor"`. +**User Story #1:** I can see a `textarea` element with a corresponding `id="editor"`. -**قصة المستخدم #2:** يمكنني رؤية عنصر مع `id="preview"`. +**User Story #2:** I can see an element with a corresponding `id="preview"`. -**قصة المستخدم #3:** عندما أدخل النص في `#editor` عنصر, يتم تحديث عنصر `#preview` عندما أكتب لعرض محتوى النصوص. +**User Story #3:** When I enter text into the `#editor` element, the `#preview` element is updated as I type to display the content of the textarea. -**قصة المستخدم #4:** عندما أدخل علامة GitHub في `#editor`، يتم تقديم النص كعنصر HTML في `#preview` كما أكتبه (تلميح: لا تحتج إلى تحليل Markdown بنفسك - يمكنك استيراد المكتبة المعلَّمة لهذا الغرض: ). +**User Story #4:** When I enter GitHub flavored markdown into the `#editor` element, the text is rendered as HTML in the `#preview` element as I type (HINT: You don't need to parse Markdown yourself - you can import the Marked library for this: ). -**قصة المستخدم #5:** عندما تقوم معاينة العلامات بالتحميل أول مرة، النص الافتراضي في `#editor` الحقل يجب أن يحتوي على علامة صحيحة تمثل في الأقل واحدا من كل عنصر من العناصر التالية: عنصر العنوان (H1 size)، عنصر عنوان فرعي (H2 size)، ورابط (link)، ورمز داخلي (inline code)، وكتلة رموز (code block)، وعنصر قائمة (list item)، وكتلة (blockquote)، صورة (image) ونص بحروف داكنة (bolded text). +**User Story #5:** When my markdown previewer first loads, the default text in the `#editor` field should contain valid markdown that represents at least one of each of the following elements: a heading element (H1 size), a sub heading element (H2 size), a link, inline code, a code block, a list item, a blockquote, an image, and bolded text. -**قصة المستخدم #6:** عندما تقوم معاينة العلامات (markdown previewer) بالتحميل أول مرة، يجب تقديم العلامات (markdown) الافتراضية في الحقل `#editor` تتكون من HTML في عنصر `#preview`. +**User Story #6:** When my markdown previewer first loads, the default markdown in the `#editor` field should be rendered as HTML in the `#preview` element. -**أختبار اختياري (أنت لست بحاجة إلى اجتياز هذا الاختبار):** عينة العرض الخاص بي تفسر إرجاع النقل وتجعلها كعناصر `br` (راحة سطر). +**Optional Bonus (you do not need to make this test pass):** My markdown previewer interprets carriage returns and renders them as `br` (line break) elements. -يمكنك بناء مشروعك عن طريق استخدام هذا نموذج CodePen والنقر على `Save` لإنشاء طبقيك الخاص بك. أو يمكنك استخدام رابط CDN هذا لتشغيل الاختبارات في أي بيئة تفضلها: `https://cdn.freecodecamp.org/testable-projects-fcc/v1/bundle.js` +You can build your project by using this CodePen template and clicking `Save` to create your own pen. Or you can use this CDN link to run the tests in any environment you like: `https://cdn.freecodecamp.org/testable-projects-fcc/v1/bundle.js` -بمجرد أن تنتهي، أرسل عنوان URL لمشروع العمل الخاص بك مع اجتياز جميع الاختبارات. +Once you're done, submit the URL to your working project with all its tests passing. # --solutions-- diff --git a/curriculum/challenges/arabic/03-front-end-development-libraries/front-end-development-libraries-projects/build-a-random-quote-machine.md b/curriculum/challenges/arabic/03-front-end-development-libraries/front-end-development-libraries-projects/build-a-random-quote-machine.md index f1cc8a5f07e..4ee3073a878 100644 --- a/curriculum/challenges/arabic/03-front-end-development-libraries/front-end-development-libraries-projects/build-a-random-quote-machine.md +++ b/curriculum/challenges/arabic/03-front-end-development-libraries/front-end-development-libraries-projects/build-a-random-quote-machine.md @@ -7,40 +7,41 @@ dashedName: build-a-random-quote-machine --- # --description-- +**Note:** **React 18 has known incompatibilities with the tests for this project (see [issue](https://github.com/freeCodeCamp/freeCodeCamp/issues/45922))** -**متطلبات:** أنشئ تطبيق يشبه وظيفيا إلي https://random-quote-machine.freecodecamp.rocks/. +**Objective:** Build an app that is functionally similar to this: https://random-quote-machine.freecodecamp.rocks/. -أكمل قصص المستخدم بالأسفل وأجتاز جميع الاختبارات للنجاح. استخدم أي libraries أو APIs تحتاج إليها. أعطيها أسلوبك الشخصي الخاص. +Fulfill the below user stories and get all of the tests to pass. Use whichever libraries or APIs you need. Give it your own personal style. -يمكنك استخدام أي مزيج من HTML و JavaScript و CSS و Bootstrap و SASS و React و Redux و jQuery لإكمال هذا المشروع. يجب عليك استخدام frontend framework (مثل React على سبيل المثال) لأن هذا القسم يدور حول تعلم frontend framework. لا ينصح باستخدام التكنولوجيات الإضافية غير المدرجة أعلاه و استخدامها على مسؤوليتك الخاصة. ونحن ننظر في دعم frontend frameworks أخرى، مثل Angular و Vue، ولكنها غير مدعومة حاليا. سنقبل ونحاول إصلاح جميع تقارير المشكلات التي تستخدم حُزْمَة التكنولوجيات المقترحة لهذا المشروع. برمجة سعيدة! +You can use any mix of HTML, JavaScript, CSS, Bootstrap, SASS, React, Redux, and jQuery to complete this project. You should use a frontend framework (like React for example) because this section is about learning frontend frameworks. Additional technologies not listed above are not recommended and using them is at your own risk. We are looking at supporting other frontend frameworks like Angular and Vue, but they are not currently supported. We will accept and try to fix all issue reports that use the suggested technology stack for this project. Happy coding! -**قصة المستخدم #1:** يمكنني رؤية عنصر تغليف مع `id="quote-box"`. +**User Story #1:** I can see a wrapper element with a corresponding `id="quote-box"`. -**قصة المستخدم #2:** في `#quote-box`، يمكنني أن أرى عنصرا يحتوي `id="text"`. +**User Story #2:** Within `#quote-box`, I can see an element with a corresponding `id="text"`. -**قصة المستخدم #3:** في `#quote-box`، يمكنني أن أرى عنصرا يحتوي `id="author"`. +**User Story #3:** Within `#quote-box`, I can see an element with a corresponding `id="author"`. -**قصة المستخدم #4:** في `#quote-box`، يمكنني رؤية عنصر قابل للنقر مع `id="new-quote"`. +**User Story #4:** Within `#quote-box`, I can see a clickable element with a corresponding `id="new-quote"`. -**قصة المستخدم #5:** في `#quote-box`، يمكنني رؤية عنصر قابل للنقر `a` مع عنصر يحتوي `id="tweet-quote"`. +**User Story #5:** Within `#quote-box`, I can see a clickable `a` element with a corresponding `id="tweet-quote"`. -**قصة المستخدم #6:** عند التحميل ألأوله، تعرض آلة الاقتباس الخاصة بي اقتباس عشوائي في العنصر مع `id="text"`. +**User Story #6:** On first load, my quote machine displays a random quote in the element with `id="text"`. -**قصة المستخدم #7:** عند التحميل الأول، تعرض آلة الاقتباس الخاصة بي مؤلف الاقتباس العشوائي في العنصر مع `id="author"`. +**User Story #7:** On first load, my quote machine displays the random quote's author in the element with `id="author"`. -**قصة المستخدم #8:** عندما يتم النقر على زر `#new-quote`، آلة الاقتباس الخاصة بي يجب أن تجلب اقتباساً جديداً وأن تعرضه في عنصر `#text`. +**User Story #8:** When the `#new-quote` button is clicked, my quote machine should fetch a new quote and display it in the `#text` element. -**قصة المستخدم #9:** آلة الاقتباس الخاصة بي يجب أن تجلب مؤلف الاقتباس الجديد عندما يتم النقر على زر `#new-quote` وعرضه في عنصر `#author`. +**User Story #9:** My quote machine should fetch the new quote's author when the `#new-quote` button is clicked and display it in the `#author` element. -**قصة المستخدم #10:** يمكنني تغليف الاقتباس الحالي بالنقر على `#tweet-quote` في `a` عنصر. هذا عنصر `a` يجب أن يتضمن `"twitter.com/intent/tweet"` في السمة `href` لتغريد الاقتباس الحالي. +**User Story #10:** I can tweet the current quote by clicking on the `#tweet-quote` `a` element. This `a` element should include the `"twitter.com/intent/tweet"` path in its `href` attribute to tweet the current quote. -**قصة المستخدم #11:** عنصر تغليف `#quote-box` يجب أن يكون مركزيا أفقيا. يرجى إجراء الاختبارات مع تكبير مستوى المتصفح بنسبة 100% وتعظيم الصفحة. +**User Story #11:** The `#quote-box` wrapper element should be horizontally centered. Please run tests with browser's zoom level at 100% and page maximized. -يمكنك بناء مشروعك عن طريق استخدام هذا نموذج CodePen والنقر على `Save` لإنشاء طبقيك الخاص بك. أو يمكنك استخدام رابط الـ CDN هذا لتشغيل الاختبارات في أي بيئة تفضلها: `https://cdn.freecodecamp.org/testable-projects-fcc/v1/bundle.js` +You can build your project by using this CodePen template and clicking `Save` to create your own pen. Or you can use this CDN link to run the tests in any environment you like: `https://cdn.freecodecamp.org/testable-projects-fcc/v1/bundle.js` -بمجرد أن تنتهي، ارسل عنوان URL لمشروع العمل الخاص بك مع اجتياز جميع الاختبارات. +Once you're done, submit the URL to your working project with all its tests passing. -**ملاحظة:** twitter لا يسمح بتحميل الروابط في iframe. حاول استخدام `target="_blank"` أو `target="_top"` سمة على عنصر `#tweet-quote` إذا لم يتم تحميل التغريدة الخاصة بك. `target="_top"` سوف يحل محل علامة التبويب الحالية لتتيقن من حفظ عملك. +**Note:** Twitter does not allow links to be loaded in an iframe. Try using the `target="_blank"` or `target="_top"` attribute on the `#tweet-quote` element if your tweet won't load. `target="_top"` will replace the current tab so make sure your work is saved. # --solutions-- diff --git a/curriculum/challenges/chinese-traditional/03-front-end-development-libraries/front-end-development-libraries-projects/build-a-25-5-clock.md b/curriculum/challenges/chinese-traditional/03-front-end-development-libraries/front-end-development-libraries-projects/build-a-25-5-clock.md index 7aa18a08e21..9103d35b9ce 100644 --- a/curriculum/challenges/chinese-traditional/03-front-end-development-libraries/front-end-development-libraries-projects/build-a-25-5-clock.md +++ b/curriculum/challenges/chinese-traditional/03-front-end-development-libraries/front-end-development-libraries-projects/build-a-25-5-clock.md @@ -8,71 +8,73 @@ dashedName: build-a-25--5-clock # --description-- -**目標：** 構建一個應用，功能和 https://25--5-clock.freecodecamp.rocks 類似。 +**Note:** **React 18 has known incompatibilities with the tests for this project (see [issue](https://github.com/freeCodeCamp/freeCodeCamp/issues/45922))** -完成以下需求，並且通過所有測試。 可以使用你需要的任何庫或 API。 賦予它你自己的個人風格。 +**Objective:** Build an app that is functionally similar to this: https://25--5-clock.freecodecamp.rocks. -可以使用 HTML、JavaScript、CSS、Bootstrap、SASS、React、Redux、jQuery 來完成這個挑戰。 但鑑於這個章節的學習內容與前端框架相關，推薦使用一款前端框架（比如 React）來完成這個挑戰；不推薦使用前面沒有提到的技術，否則風險自負。 不推薦使用前面沒有提到的技術，否則風險自擔。 我們有計劃新增其他前端框架課程，例如 Angular 和 Vue，不過目前還沒有這些內容。 我們會接受並嘗試修復你在使用推薦技術棧創建項目時報告的問題。 編碼愉快！ +Fulfill the below user stories and get all of the tests to pass. Use whichever libraries or APIs you need. Give it your own personal style. -**需求 1：** 應該能看到一個具有`id="break-label"`屬性的元素，這個元素的內容應該是一個字符串（例如："Break Length"）。 +You can use any mix of HTML, JavaScript, CSS, Bootstrap, SASS, React, Redux, and jQuery to complete this project. You should use a frontend framework (like React for example) because this section is about learning frontend frameworks. Additional technologies not listed above are not recommended and using them is at your own risk. We are looking at supporting other frontend frameworks like Angular and Vue, but they are not currently supported. We will accept and try to fix all issue reports that use the suggested technology stack for this project. Happy coding! -**需求 2：** 應該能看到一個具有`id="session-label"`屬性的元素，這個元素的內容應該是一個字符串（例如："Session Length"）。 +**User Story #1:** I can see an element with `id="break-label"` that contains a string (e.g. "Break Length"). -**需求 3：** 應該能看到兩個可以點擊的元素，他們分別具有如下 id：`id="break-decrement"` 和 `id="session-decrement"`。 +**User Story #2:** I can see an element with `id="session-label"` that contains a string (e.g. "Session Length"). -**需求 4：** 應該能看到兩個可以點擊的元素，它們分別具有如下 id：`id="break-increment"` 和 `id="session-increment"`。 +**User Story #3:** I can see two clickable elements with corresponding IDs: `id="break-decrement"` and `id="session-decrement"`. -**需求 5：** 應該能看到一個具有 `id="break-length"` 屬性的元素，這個元素默認展示數值應該爲 5（加載後）。 +**User Story #4:** I can see two clickable elements with corresponding IDs: `id="break-increment"` and `id="session-increment"`. -**需求 6：** 應該能看到一個具有 `id="session-length"` 屬性的元素，這個元素默認展示數值應該爲 25（加載後）。 +**User Story #5:** I can see an element with a corresponding `id="break-length"`, which by default (on load) displays a value of 5. -**需求 7：** 應該能看到一個具有 `id="timer-label"` 屬性的元素，這個元素包含一個表示當前狀態的字符串（例如："Session"）。 +**User Story #6:** I can see an element with a corresponding `id="session-length"`, which by default displays a value of 25. -**需求 8：** 應該能看到一個具有 `id="time-left"` 屬性的元素。 注意：暫停或者運行時，該元素的內容應始終以 `mm:ss` 格式顯示（如 25:00）。 +**User Story #7:** I can see an element with a corresponding `id="timer-label"`, that contains a string indicating a session is initialized (e.g. "Session"). -**需求 9：** 應該能看到一個具有 `id="start_stop"` 屬性的可點擊的元素。 +**User Story #8:** I can see an element with corresponding `id="time-left"`. NOTE: Paused or running, the value in this field should always be displayed in `mm:ss` format (i.e. 25:00). -**需求 10：** 應該能看到一個具有 `id="reset"` 屬性的可點擊的元素。 +**User Story #9:** I can see a clickable element with a corresponding `id="start_stop"`. -**需求 11：** 當點擊 id 屬性爲 `reset` 的元素時，運行中的計時器都應該停止，`id="break-length"` 元素中的值應該重新回到 `5`，`id="session-length"` 元素中的值應該重新回到 25，且 `id="time-left"` 元素應該重置爲默認狀態。 +**User Story #10:** I can see a clickable element with a corresponding `id="reset"`. -**需求 12：** 當點擊 id 屬性爲 `break-decrement` 的元素時，`id="break-length"` 元素的值應該減去 1，且我應該能看到更新後的值。 +**User Story #11:** When I click the element with the id of `reset`, any running timer should be stopped, the value within `id="break-length"` should return to `5`, the value within `id="session-length"` should return to 25, and the element with `id="time-left"` should reset to its default state. -**需求 13：** 當點擊 id 屬性爲 `break-increment` 的元素時，`id="break-length"` 元素的值應該增加 1，且應該能看到更新後的值。 +**User Story #12:** When I click the element with the id of `break-decrement`, the value within `id="break-length"` decrements by a value of 1, and I can see the updated value. -**需求 14：** 當點擊 id 屬性爲 `session-decrement` 的元素時，`id="session-length"` 元素的值應該減去 1，且應該能看到更新後的值。 +**User Story #13:** When I click the element with the id of `break-increment`, the value within `id="break-length"` increments by a value of 1, and I can see the updated value. -**需求 15：** 當點擊 id 屬性爲 `session-increment` 的元素時，`id="session-length"` 元素的值應該增加 1，且應該能看到更新後的值。 +**User Story #14:** When I click the element with the id of `session-decrement`, the value within `id="session-length"` decrements by a value of 1, and I can see the updated value. -**需求 16：** 工作或者休息長度不應該可以設置爲 <= 0 的值。 +**User Story #15:** When I click the element with the id of `session-increment`, the value within `id="session-length"` increments by a value of 1, and I can see the updated value. -**需求 17：** 工作或者休息長度比應該可以設置爲 > 60 的值。 +**User Story #16:** I should not be able to set a session or break length to <= 0. -**需求 18：** 當首次點擊具有 `id="start_stop"` 屬性的元素時，計時器應該根據 `id="session-length"` 元素當前顯示的值開始運行，即使該值已從原始值 25 遞增過或遞減過。 +**User Story #17:** I should not be able to set a session or break length to > 60. -**需求 19：** 如果計時器正在運行，id 屬性爲 `time-left` 的元素應該以 `mm:ss` 的格式展示剩餘的時間（按1遞減並且每秒更新一次顯示的值）。 +**User Story #18:** When I first click the element with `id="start_stop"`, the timer should begin running from the value currently displayed in `id="session-length"`, even if the value has been incremented or decremented from the original value of 25. -**需求 20：** 如果計時器正在運行，當點擊 `id="start_stop"` 元素時，倒計時應該暫停。 +**User Story #19:** If the timer is running, the element with the id of `time-left` should display the remaining time in `mm:ss` format (decrementing by a value of 1 and updating the display every 1000ms). -**需求 21：** 如果計時器已經暫停，當點擊 `id="start_stop"` 元素時，倒計時應該從暫停的時間點恢復運行。 +**User Story #20:** If the timer is running and I click the element with `id="start_stop"`, the countdown should pause. -**需求 22：** 當一個工作倒計時結束（注意：計時器必須達到 00:00），並且新的倒計時開始運行時，id 屬性爲 `timer-label` 的元素應該顯示一個表示已經開始休息的字符串。 +**User Story #21:** If the timer is paused and I click the element with `id="start_stop"`, the countdown should resume running from the point at which it was paused. -**需求 23：** 當一個工作倒計時結束（注意：計時器必須達到 00:00），應該開始一個新的休息倒計時，時間應該從 `id="break-length"` 元素中當前顯示的值開始計算。 +**User Story #22:** When a session countdown reaches zero (NOTE: timer MUST reach 00:00), and a new countdown begins, the element with the id of `timer-label` should display a string indicating a break has begun. -**需求 24：** 當一個休息倒計時結束（注意：計時器必須達到 00:00），並且新的倒計時開始運行時，id 屬性爲 `timer-label` 的元素應該顯示一個表示已經開始工作的字符串。 +**User Story #23:** When a session countdown reaches zero (NOTE: timer MUST reach 00:00), a new break countdown should begin, counting down from the value currently displayed in the `id="break-length"` element. -**需求 25：** 當一個休息倒計時結束（注意：計時器必須達到 00:00），應該開始一個新的工作倒計時，時間應該從 `id="session-length"` 元素中當前顯示的值開始計算。 +**User Story #24:** When a break countdown reaches zero (NOTE: timer MUST reach 00:00), and a new countdown begins, the element with the id of `timer-label` should display a string indicating a session has begun. -**需求 26：** 當一個倒計時結束（注意：計時器必須達到 00:00），應該播放一個表示時間到了的聲音提示。 這個提示音應該使用 HTML5 的 `audio`標籤並有一個 `id="beep"` 屬性。 +**User Story #25:** When a break countdown reaches zero (NOTE: timer MUST reach 00:00), a new session countdown should begin, counting down from the value currently displayed in the `id="session-length"` element. -**需求 27：** 具有`id="beep"`屬性的音頻元素時長應該至少有一秒。 +**User Story #26:** When a countdown reaches zero (NOTE: timer MUST reach 00:00), a sound indicating that time is up should play. This should utilize an HTML5 `audio` tag and have a corresponding `id="beep"`. -**需求 28：** 當點擊 id 屬性爲 `reset` 的元素時，id 屬性爲 `beep` 的音頻元素必須停止播放並回到開頭。 +**User Story #27:** The audio element with `id="beep"` must be 1 second or longer. -你可以使用 CodePen 模版創建你的新項目，點擊 `Save` 即可創建你的新項目。 或者你可以在任何你喜歡的環境中使用以下 CDN 鏈接來運行測試：`https://cdn.freecodecamp.org/testable-projects-fcc/v1/bundle.js`。 +**User Story #28:** The audio element with id of `beep` must stop playing and be rewound to the beginning when the element with the id of `reset` is clicked. -當你完成了本項目，並且該項目所有測試運行通過， 請提交項目的 URL。 +You can build your project by using this CodePen template and clicking `Save` to create your own pen. Or you can use this CDN link to run the tests in any environment you like: `https://cdn.freecodecamp.org/testable-projects-fcc/v1/bundle.js` + +Once you're done, submit the URL to your working project with all its tests passing. # --solutions-- diff --git a/curriculum/challenges/chinese-traditional/03-front-end-development-libraries/front-end-development-libraries-projects/build-a-drum-machine.md b/curriculum/challenges/chinese-traditional/03-front-end-development-libraries/front-end-development-libraries-projects/build-a-drum-machine.md index 4c71d344f0a..6e7ea87fb88 100644 --- a/curriculum/challenges/chinese-traditional/03-front-end-development-libraries/front-end-development-libraries-projects/build-a-drum-machine.md +++ b/curriculum/challenges/chinese-traditional/03-front-end-development-libraries/front-end-development-libraries-projects/build-a-drum-machine.md @@ -7,28 +7,29 @@ dashedName: build-a-drum-machine --- # --description-- +**Note:** **React 18 has known incompatibilities with the tests for this project (see [issue](https://github.com/freeCodeCamp/freeCodeCamp/issues/45922))** -**目標：** 構建一個應用，功能和 https://drum-machine.freecodecamp.rocks/ 類似。 +**Objective:** Build an app that is functionally similar to this: https://drum-machine.freecodecamp.rocks/. -完成以下需求，並且通過所有測試。 可以使用你需要的任何庫或 API。 賦予它你自己的個人風格。 +Fulfill the below user stories and get all of the tests to pass. Use whichever libraries or APIs you need. Give it your own personal style. -可以使用 HTML、JavaScript、CSS、Bootstrap、SASS、React、Redux、jQuery 來完成這個挑戰。 但鑑於這個章節的學習內容與前端框架相關，推薦使用一款前端框架（比如 React）來完成這個挑戰。 不推薦使用前面沒有提到的技術，否則風險自擔。 我們有計劃新增其他前端框架課程，例如 Angular 和 Vue，不過目前還沒有這些內容。 我們會接受並嘗試修復你在使用推薦技術棧創建項目時報告的問題。 編碼愉快！ +You can use any mix of HTML, JavaScript, CSS, Bootstrap, SASS, React, Redux, and jQuery to complete this project. You should use a frontend framework (like React for example) because this section is about learning frontend frameworks. Additional technologies not listed above are not recommended and using them is at your own risk. We are looking at supporting other frontend frameworks like Angular and Vue, but they are not currently supported. We will accept and try to fix all issue reports that use the suggested technology stack for this project. Happy coding! -**需求 1：** 應該可以看到一個具有 `id="drum-machine"` 屬性的外層容器，該容器包含了其它所有元素。 +**User Story #1:** I should be able to see an outer container with a corresponding `id="drum-machine"` that contains all other elements. -**需求 2：** 在具有 `#drum-machine` 屬性的元素內，應該能看到一個具有 `id="display"` 屬性的元素。 +**User Story #2:** Within `#drum-machine` I can see an element with a corresponding `id="display"`. -**需求 3：** 在具有 `#drum-machine` 屬性的元素內，應該能看到 9 個可以點擊的鼓墊元素，且每個鼓墊元素都應該有一個值爲 `drum-pad` 的 class 屬性， 一個用於描述觸發鼓墊音頻片段的特殊 id，以及以下鍵值之一的文本內容：`Q`、`W`、`E`、`A`、`S`、`D`、`Z`、`X`、`C`。 這些鼓墊必須按照以上順序排列。 +**User Story #3:** Within `#drum-machine` I can see 9 clickable drum pad elements, each with a class name of `drum-pad`, a unique id that describes the audio clip the drum pad will be set up to trigger, and an inner text that corresponds to one of the following keys on the keyboard: `Q`, `W`, `E`, `A`, `S`, `D`, `Z`, `X`, `C`. The drum pads MUST be in this order. -**需求 4：** 在每一個具有 `.drum-pad` 屬性的元素內，應該有一個具有指向音頻片段地址的 `src` 屬性的 HTML5 `audio` 元素，一個值爲 `clip` 的 class 屬性，以及一個 id 屬性，它的值應該是其父元素 `.drum-pad` 的文本內容（例如 `id="Q"`、`id="W"`、`id="E"` 等等）。 +**User Story #4:** Within each `.drum-pad`, there should be an HTML5 `audio` element which has a `src` attribute pointing to an audio clip, a class name of `clip`, and an id corresponding to the inner text of its parent `.drum-pad` (e.g. `id="Q"`, `id="W"`, `id="E"` etc.). -**需求 5：** 當點擊一個具有 `.drum-pad` 屬性的元素時，應該觸發它的子元素 `audio` 包含的音頻片段。 +**User Story #5:** When I click on a `.drum-pad` element, the audio clip contained in its child `audio` element should be triggered. -**需求 6：** 當按下每一個 `.drum-pad` 元素的關聯鍵時，應該觸發其子元素 `audio` 包含的音頻片段（例如：按下 `Q` 鍵應該觸發包含字符串 `Q` 的鼓墊，按下 `W` 鍵應該觸發包含字符串 `W` 的鼓墊等等）。 +**User Story #6:** When I press the trigger key associated with each `.drum-pad`, the audio clip contained in its child `audio` element should be triggered (e.g. pressing the `Q` key should trigger the drum pad which contains the string `Q`, pressing the `W` key should trigger the drum pad which contains the string `W`, etc.). -**需求 7：** 當觸發一個具有 `.drum-pad` 屬性的元素時，`#display` 元素內應該展示這個觸發元素關聯音頻片段的描述字符串（每一個字符串都應該是獨一無二的）。 +**User Story #7:** When a `.drum-pad` is triggered, a string describing the associated audio clip is displayed as the inner text of the `#display` element (each string must be unique). -以下是一些可用於鼓機的音頻樣本： +Here are some audio samples you can use for your drum machine: - [Heater 1](https://s3.amazonaws.com/freecodecamp/drums/Heater-1.mp3) - [Heater 2](https://s3.amazonaws.com/freecodecamp/drums/Heater-2.mp3) @@ -40,9 +41,9 @@ dashedName: build-a-drum-machine - [Kick](https://s3.amazonaws.com/freecodecamp/drums/RP4_KICK_1.mp3) - [Closed-HH](https://s3.amazonaws.com/freecodecamp/drums/Cev_H2.mp3) -你可以使用 CodePen 模版創建你的新項目，點擊 `Save` 即可創建你的新項目。 或者你可以在任何你喜歡的環境中使用以下 CDN 鏈接來運行測試：`https://cdn.freecodecamp.org/testable-projects-fcc/v1/bundle.js`。 +You can build your project by using this CodePen template and clicking `Save` to create your own pen. Or you can use this CDN link to run the tests in any environment you like: `https://cdn.freecodecamp.org/testable-projects-fcc/v1/bundle.js` -當你完成了本項目，並且項目通過所有測試，請提交項目的 URL。 +Once you're done, submit the URL to your working project with all its tests passing. # --solutions-- diff --git a/curriculum/challenges/chinese-traditional/03-front-end-development-libraries/front-end-development-libraries-projects/build-a-javascript-calculator.md b/curriculum/challenges/chinese-traditional/03-front-end-development-libraries/front-end-development-libraries-projects/build-a-javascript-calculator.md index e60ca5202ae..9058916ba44 100644 --- a/curriculum/challenges/chinese-traditional/03-front-end-development-libraries/front-end-development-libraries-projects/build-a-javascript-calculator.md +++ b/curriculum/challenges/chinese-traditional/03-front-end-development-libraries/front-end-development-libraries-projects/build-a-javascript-calculator.md @@ -7,53 +7,54 @@ dashedName: build-a-javascript-calculator --- # --description-- +**Note:** **React 18 has known incompatibilities with the tests for this project (see [issue](https://github.com/freeCodeCamp/freeCodeCamp/issues/45922))** -**目標：** 構建一個應用，功能和 https://javascript-calculator.freecodecamp.rocks/ 類似。 +**Objective:** Build an app that is functionally similar to this: https://javascript-calculator.freecodecamp.rocks/. -完成以下需求，並且通過所有測試。 可以使用你需要的任何庫或 API。 賦予它你自己的個人風格。 +Fulfill the below user stories and get all of the tests to pass. Use whichever libraries or APIs you need. Give it your own personal style. -可以使用 HTML、JavaScript、CSS、Bootstrap、SASS、React、Redux、jQuery 來完成這個挑戰。 但鑑於這個章節的學習內容與前端框架相關，推薦使用一款前端框架（比如 React）來完成這個挑戰；不推薦使用前面沒有提到的技術，否則風險自負。 不推薦使用前面沒有提到的技術，否則風險自擔。 我們有計劃新增其他前端框架課程，例如 Angular 和 Vue，不過目前還沒有這些內容。 我們會接受並嘗試修復你在使用推薦技術棧創建項目時報告的問題。 編碼愉快！ +You can use any mix of HTML, JavaScript, CSS, Bootstrap, SASS, React, Redux, and jQuery to complete this project. You should use a frontend framework (like React for example) because this section is about learning frontend frameworks. Additional technologies not listed above are not recommended and using them is at your own risk. We are looking at supporting other frontend frameworks like Angular and Vue, but they are not currently supported. We will accept and try to fix all issue reports that use the suggested technology stack for this project. Happy coding! -**需求 1：** 計算器應該包含一個具有 `id="equals"` 屬性的可以點擊的元素，元素的文本內容爲 `=`（等於符號）。 +**User Story #1:** My calculator should contain a clickable element containing an `=` (equal sign) with a corresponding `id="equals"`. -**需求 2：** 計算器應該包含 10 個具有如下 id 屬性的可以點擊的元素，每個元素的文本內容對應 0-9 的數字：`id="zero"`、`id="one"`、`id="two"`、`id="three"`、`id="four"`、`id="five"`、`id="six"`、`id="seven"`、`id="eight"`、`id="nine"`。 +**User Story #2:** My calculator should contain 10 clickable elements containing one number each from 0-9, with the following corresponding IDs: `id="zero"`, `id="one"`, `id="two"`, `id="three"`, `id="four"`, `id="five"`, `id="six"`, `id="seven"`, `id="eight"`, and `id="nine"`. -**需求 3：** 計算器應該包含四個可以點擊的元素，文本內容對應4個主要數學運算符，且應具有如下 id 屬性： `id="add"`, `id="subtract"`, `id="multiply"`, `id="divide"`。 +**User Story #3:** My calculator should contain 4 clickable elements each containing one of the 4 primary mathematical operators with the following corresponding IDs: `id="add"`, `id="subtract"`, `id="multiply"`, `id="divide"`. -**需求 4：** 計算器應該包含一個可點擊的 `.`（小數點）符號，對應的 `id="decimal"`。 +**User Story #4:** My calculator should contain a clickable element containing a `.` (decimal point) symbol with a corresponding `id="decimal"`. -**需求 5：** 計算器應該包含一個具有 `id="clear"` 屬性的可以點擊的元素。 +**User Story #5:** My calculator should contain a clickable element with an `id="clear"`. -**需求 6：** 我的計算器應該包含一個用於展示數值的元素，這個元素具有 `id="display"` 屬性。 +**User Story #6:** My calculator should contain an element to display values with a corresponding `id="display"`. -**需求 7：** 在任何時候按下 `clear` 鍵，都會清空輸入和輸出的數值並且使計算器回到初始狀態；此時在 id 爲 `display` 的元素中應該顯示數字 0。 +**User Story #7:** At any time, pressing the `clear` button clears the input and output values, and returns the calculator to its initialized state; 0 should be shown in the element with the id of `display`. -**需求 8：** 在輸入數字的同時，應該能看到輸入的數字展示在 id 爲 `display` 的元素中。 +**User Story #8:** As I input numbers, I should be able to see my input in the element with the id of `display`. -**需求 9：** 應該可以在任意順序下對一串任意長度的數字執行加、減、乘、除操作，並且當按下 `=` 時，正確答案應該顯示在 id 爲 `display` 的元素中。 +**User Story #9:** In any order, I should be able to add, subtract, multiply and divide a chain of numbers of any length, and when I hit `=`, the correct result should be shown in the element with the id of `display`. -**需求 10：** 在輸入數字的同時，計算器應該不允許一個數字以多個零開頭。 +**User Story #10:** When inputting numbers, my calculator should not allow a number to begin with multiple zeros. -**需求 11：** 當點擊小數點元素時，當前展示的數值後面應該添加一個 `.` 符號；數字中不允許出現兩個 `.` 符號。 +**User Story #11:** When the decimal element is clicked, a `.` should append to the currently displayed value; two `.` in one number should not be accepted. -**需求 12：** 我可以對包含小數點的數字執行任何四則運算（`+`、`-`、`*`、`/`）。 +**User Story #12:** I should be able to perform any operation (`+`, `-`, `*`, `/`) on numbers containing decimal points. -**需求 13：** 如果連續鍵入了兩個及以上的運算符，應該執行最後一次鍵入的運算符（負數（`-`）運算符除外）。 例如，如果輸入 `5 + * 7 =`，結果應該是 `35` （等同於 `5 * 7`）；如果輸入 `5 * - 5 =`，結果應該是 `-25`（等同於 `5 * (-5)`）。 +**User Story #13:** If 2 or more operators are entered consecutively, the operation performed should be the last operator entered (excluding the negative (`-`) sign). For example, if `5 + * 7 =` is entered, the result should be `35` (i.e. `5 * 7`); if `5 * - 5 =` is entered, the result should be `-25` (i.e. `5 * (-5)`). -**需求 14：** 如果在按下 `=` 符號後繼續按一個運算符，則應該在上一次計算結果的基礎上進行新的計算。 +**User Story #14:** Pressing an operator immediately following `=` should start a new calculation that operates on the result of the previous evaluation. -**需求 15：** 當需要四捨五入時，計算器可以處理結果的精度（注意：處理到多少位沒有一個準確的標準，但是至少能處理類似 `2 / 7` 這樣的計算，使之至少有 4 位小數的精度）。 +**User Story #15:** My calculator should have several decimal places of precision when it comes to rounding (note that there is no exact standard, but you should be able to handle calculations like `2 / 7` with reasonable precision to at least 4 decimal places). -**注意計算器的邏輯：** 應當注意的是，計算器輸入邏輯主要有兩種思路：立即執行邏輯 和 公式邏輯。 我們的示例使用公式邏輯並遵守運算優先順序，而立即執行則不然。 兩者都是可以接受的，但請注意，根據你的選擇，你的計算器對於某些算式可能會得到與示例不同的計算結果（參見下面的示例）。 只要數學計算可以通過其它現實中計算器的驗證，那麼代碼就是合理的。 +**Note On Calculator Logic:** It should be noted that there are two main schools of thought on calculator input logic: immediate execution logic and formula logic. Our example utilizes formula logic and observes order of operation precedence, immediate execution does not. Either is acceptable, but please note that depending on which you choose, your calculator may yield different results than ours for certain equations (see below example). As long as your math can be verified by another production calculator, please do not consider this a bug. -**示例：** `3 + 5 x 6 - 2 / 4 =` +**EXAMPLE:** `3 + 5 x 6 - 2 / 4 =` - **立即執行邏輯：** `11.5` - **公式／表達式邏輯：** `32.5` -你可以使用 CodePen 模版創建你的新項目，點擊 `Save` 即可創建你的新項目。 或者可以在任何喜歡的環境中使用以下 CDN 鏈接來運行測試：`https://cdn.freecodecamp.org/testable-projects-fcc/v1/bundle.js`。 +You can build your project by using this CodePen template and clicking `Save` to create your own pen. Or you can use this CDN link to run the tests in any environment you like: `https://cdn.freecodecamp.org/testable-projects-fcc/v1/bundle.js` -當你完成了本項目，並且該項目所有測試運行通過，請提交項目的 URL。 +Once you're done, submit the URL to your working project with all its tests passing. # --solutions-- diff --git a/curriculum/challenges/chinese-traditional/03-front-end-development-libraries/front-end-development-libraries-projects/build-a-markdown-previewer.md b/curriculum/challenges/chinese-traditional/03-front-end-development-libraries/front-end-development-libraries-projects/build-a-markdown-previewer.md index 8c3658cf9cd..25e8b056095 100644 --- a/curriculum/challenges/chinese-traditional/03-front-end-development-libraries/front-end-development-libraries-projects/build-a-markdown-previewer.md +++ b/curriculum/challenges/chinese-traditional/03-front-end-development-libraries/front-end-development-libraries-projects/build-a-markdown-previewer.md @@ -7,30 +7,31 @@ dashedName: build-a-markdown-previewer --- # --description-- +**Note:** **React 18 has known incompatibilities with the tests for this project (see [issue](https://github.com/freeCodeCamp/freeCodeCamp/issues/45922))** -**目標：** 構建一個應用，功能和 https://markdown-previewer.freecodecamp.rocks/ 類似。 +**Objective:** Build an app that is functionally similar to this: https://markdown-previewer.freecodecamp.rocks/. -完成以下需求，並且通過所有測試。 可以使用你需要的任何庫或 API。 賦予它你自己的個人風格。 +Fulfill the below user stories and get all of the tests to pass. Use whichever libraries or APIs you need. Give it your own personal style. -可以使用 HTML、JavaScript、CSS、Bootstrap、SASS、React、Redux、jQuery 來完成這個挑戰。 但鑑於這個章節的學習內容與前端框架相關，推薦使用一款前端框架（比如 React）來完成這個挑戰；不推薦使用前面沒有提到的技術，否則風險自負。 不推薦使用前面沒有提到的技術，否則風險自擔。 我們有計劃新增其他前端框架課程，例如 Angular 和 Vue，不過目前還沒有這些內容。 我們會接受並嘗試修復你在使用推薦技術棧創建項目時報告的問題。 編碼愉快！ +You can use any mix of HTML, JavaScript, CSS, Bootstrap, SASS, React, Redux, and jQuery to complete this project. You should use a frontend framework (like React for example) because this section is about learning frontend frameworks. Additional technologies not listed above are not recommended and using them is at your own risk. We are looking at supporting other frontend frameworks like Angular and Vue, but they are not currently supported. We will accept and try to fix all issue reports that use the suggested technology stack for this project. Happy coding! -**需求 1：** 應該能看到一個具有 `id="editor"` 屬性的 `textarea` 元素。 +**User Story #1:** I can see a `textarea` element with a corresponding `id="editor"`. -**需求 2：** 應該能看到一個具有 `id="preview"` 屬性的元素。 +**User Story #2:** I can see an element with a corresponding `id="preview"`. -**需求 3：** 當在具有 `#editor` 屬性的元素內輸入文本時，具有 `#preview` 屬性的元素應該同步更新展示鍵入的內容。 +**User Story #3:** When I enter text into the `#editor` element, the `#preview` element is updated as I type to display the content of the textarea. -**需求 4：** 當在具有 `#editor` 屬性的元素內輸入 GitHub 風格的 markdown 內容時，文本應該以 HTML 的形式，把所鍵入的內容渲染在具有 `#preview` 屬性的元素中（提示：不需要自己解析 Markdown——可以引入一個叫做 Marked 的庫來完成這項工作：）。 +**User Story #4:** When I enter GitHub flavored markdown into the `#editor` element, the text is rendered as HTML in the `#preview` element as I type (HINT: You don't need to parse Markdown yourself - you can import the Marked library for this: ). -**需求 5：** 當 Markdown 預覽器首次加載時，具有 `#editor` 屬性的元素內的默認內容應該包含以下每個種類的至少一段有效的 Markdown 代碼：標題元素（H1 標籤）、次級標題元素（H2 標籤）、鏈接、行內代碼、代碼塊、列表、引用塊、圖片、加粗文本。 +**User Story #5:** When my markdown previewer first loads, the default text in the `#editor` field should contain valid markdown that represents at least one of each of the following elements: a heading element (H1 size), a sub heading element (H2 size), a link, inline code, a code block, a list item, a blockquote, an image, and bolded text. -**需求 6：** 當 Markdown 預覽器首次加載時，具有 `#editor` 屬性的元素內容應該以 HTML 的形式渲染在具有 `#preview` 屬性的元素中。 +**User Story #6:** When my markdown previewer first loads, the default markdown in the `#editor` field should be rendered as HTML in the `#preview` element. -**可選需求（你無需通過這項測試）：** Markdown 預覽器能夠解析回車符並且將他們以 `br`（換行）元素的形式渲染出來。 +**Optional Bonus (you do not need to make this test pass):** My markdown previewer interprets carriage returns and renders them as `br` (line break) elements. -你可以使用 CodePen 模版創建你的新項目，點擊 `Save` 即可創建你的新項目。 或者可以在任何喜歡的環境中使用以下 CDN 鏈接來運行測試：`https://cdn.freecodecamp.org/testable-projects-fcc/v1/bundle.js`。 +You can build your project by using this CodePen template and clicking `Save` to create your own pen. Or you can use this CDN link to run the tests in any environment you like: `https://cdn.freecodecamp.org/testable-projects-fcc/v1/bundle.js` -當你完成了本項目，並且該項目所有測試運行通過，請提交項目的 URL。 +Once you're done, submit the URL to your working project with all its tests passing. # --solutions-- diff --git a/curriculum/challenges/chinese-traditional/03-front-end-development-libraries/front-end-development-libraries-projects/build-a-random-quote-machine.md b/curriculum/challenges/chinese-traditional/03-front-end-development-libraries/front-end-development-libraries-projects/build-a-random-quote-machine.md index 7b2fc07ec7b..119a2fc37cd 100644 --- a/curriculum/challenges/chinese-traditional/03-front-end-development-libraries/front-end-development-libraries-projects/build-a-random-quote-machine.md +++ b/curriculum/challenges/chinese-traditional/03-front-end-development-libraries/front-end-development-libraries-projects/build-a-random-quote-machine.md @@ -7,40 +7,41 @@ dashedName: build-a-random-quote-machine --- # --description-- +**Note:** **React 18 has known incompatibilities with the tests for this project (see [issue](https://github.com/freeCodeCamp/freeCodeCamp/issues/45922))** -**目標：** 構建一個應用，功能和 https://random-quote-machine.freecodecamp.rocks/ 類似。 +**Objective:** Build an app that is functionally similar to this: https://random-quote-machine.freecodecamp.rocks/. -完成以下需求，並且通過所有測試。 可以使用你需要的任何庫或 API。 賦予它你自己的個人風格。 +Fulfill the below user stories and get all of the tests to pass. Use whichever libraries or APIs you need. Give it your own personal style. -可以使用 HTML、JavaScript、CSS、Bootstrap、SASS、React、Redux、jQuery 來完成這個挑戰。 但鑑於這個章節的學習內容與前端框架相關，推薦使用一款前端框架（比如 React）來完成這個挑戰；不推薦使用前面沒有提到的技術，否則風險自負。 不推薦使用前面沒有提到的技術，否則風險自擔。 我們有計劃新增其他前端框架課程，例如 Angular 和 Vue，不過目前還沒有這些內容。 我們會接受並嘗試修復你在使用推薦技術棧創建項目時報告的問題。 編碼愉快！ +You can use any mix of HTML, JavaScript, CSS, Bootstrap, SASS, React, Redux, and jQuery to complete this project. You should use a frontend framework (like React for example) because this section is about learning frontend frameworks. Additional technologies not listed above are not recommended and using them is at your own risk. We are looking at supporting other frontend frameworks like Angular and Vue, but they are not currently supported. We will accept and try to fix all issue reports that use the suggested technology stack for this project. Happy coding! -**需求 1：** 應該能看到一個具有 `id="quote-box"` 屬性的包裹元素。 +**User Story #1:** I can see a wrapper element with a corresponding `id="quote-box"`. -**需求 2：** 在 `#quote-box` 元素內，應該能看到一個具有 `id="text"` 屬性的元素。 +**User Story #2:** Within `#quote-box`, I can see an element with a corresponding `id="text"`. -**需求 3：** 在 `#quote-box` 元素內，應該能看到一個具有 `id="author"` 屬性的元素。 +**User Story #3:** Within `#quote-box`, I can see an element with a corresponding `id="author"`. -**需求 4：** 在 `#quote-box` 元素內，應該能看到一個具有 `id="new-quote"` 屬性的可點擊元素。 +**User Story #4:** Within `#quote-box`, I can see a clickable element with a corresponding `id="new-quote"`. -**需求 5：** 在 `#quote-box` 元素內，應該能看到一個具有 `id="tweet-quote"` 屬性的可點擊 `a` 元素。 +**User Story #5:** Within `#quote-box`, I can see a clickable `a` element with a corresponding `id="tweet-quote"`. -**需求 6：** 首次加載時，App 應該在具有 `id="text"` 屬性的元素內展示一條隨機引語。 +**User Story #6:** On first load, my quote machine displays a random quote in the element with `id="text"`. -**需求 7：** 首次加載時，App 應該在具有 `id="author"` 屬性的元素內展示該條隨機引語的作者。 +**User Story #7:** On first load, my quote machine displays the random quote's author in the element with `id="author"`. -**需求 8：** 當點擊具有 `#new-quote` 屬性的按鈕時，App 應該得到一條新的引語並在具有 `#text` 屬性的元素內展示出來。 +**User Story #8:** When the `#new-quote` button is clicked, my quote machine should fetch a new quote and display it in the `#text` element. -**需求 9：** 當點擊具有 `#new-quote` 屬性的按鈕時，App 應該得到新引語的作者並在具有 `#author` 屬性的元素內展示出來。 +**User Story #9:** My quote machine should fetch the new quote's author when the `#new-quote` button is clicked and display it in the `#author` element. -**需求 10：** 可以通過點擊具有 `#tweet-quote` 屬性的 `a` 標籤將當前引語發送到推特。 該 `a` 標籤的 `href` 屬性應該是 `"twitter.com/intent/tweet"`，以便成功發送。 +**User Story #10:** I can tweet the current quote by clicking on the `#tweet-quote` `a` element. This `a` element should include the `"twitter.com/intent/tweet"` path in its `href` attribute to tweet the current quote. -**需求 11：** 具有 `#quote-box` 屬性的包裹元素應該水平居中。 請在瀏覽器縮放尺寸爲 100% 且頁面窗口最大化時運行測試。 +**User Story #11:** The `#quote-box` wrapper element should be horizontally centered. Please run tests with browser's zoom level at 100% and page maximized. -你可以使用 CodePen 模版創建你的新項目，點擊 `Save` 即可創建你的新項目。 或者可以在任何喜歡的環境中使用以下 CDN 鏈接來運行測試：`https://cdn.freecodecamp.org/testable-projects-fcc/v1/bundle.js`。 +You can build your project by using this CodePen template and clicking `Save` to create your own pen. Or you can use this CDN link to run the tests in any environment you like: `https://cdn.freecodecamp.org/testable-projects-fcc/v1/bundle.js` -一旦完成了本項目並且該項目所有測試運行通過，請提交項目的 URL。 +Once you're done, submit the URL to your working project with all its tests passing. -**注意：** Twitter 不允許在 iframe 里加載鏈接。 如果 tweet 不能加載，嘗試在 `#tweet-quote` 元素上使用 `target="_blank"` 或者 `target="_top"` 屬性。 `target="_top"` 會替換當前 tab 頁的內容，所以確保當前內容已經保存了。 +**Note:** Twitter does not allow links to be loaded in an iframe. Try using the `target="_blank"` or `target="_top"` attribute on the `#tweet-quote` element if your tweet won't load. `target="_top"` will replace the current tab so make sure your work is saved. # --solutions-- diff --git a/curriculum/challenges/chinese/03-front-end-development-libraries/front-end-development-libraries-projects/build-a-25-5-clock.md b/curriculum/challenges/chinese/03-front-end-development-libraries/front-end-development-libraries-projects/build-a-25-5-clock.md index 40ee0089735..211022141eb 100644 --- a/curriculum/challenges/chinese/03-front-end-development-libraries/front-end-development-libraries-projects/build-a-25-5-clock.md +++ b/curriculum/challenges/chinese/03-front-end-development-libraries/front-end-development-libraries-projects/build-a-25-5-clock.md @@ -8,71 +8,73 @@ dashedName: build-a-25--5-clock # --description-- -**目标：** 构建一个应用，功能和 https://25--5-clock.freecodecamp.rocks 类似。 +**Note:** **React 18 has known incompatibilities with the tests for this project (see [issue](https://github.com/freeCodeCamp/freeCodeCamp/issues/45922))** -完成以下需求，并且通过所有测试。 可以使用你需要的任何库或 API。 赋予它你自己的个人风格。 +**Objective:** Build an app that is functionally similar to this: https://25--5-clock.freecodecamp.rocks. -可以使用 HTML、JavaScript、CSS、Bootstrap、SASS、React、Redux、jQuery 来完成这个挑战。 但鉴于这个章节的学习内容与前端框架相关，推荐使用一款前端框架（比如 React）来完成这个挑战；不推荐使用前面没有提到的技术，否则风险自负。 不推荐使用前面没有提到的技术，否则风险自担。 我们有计划新增其他前端框架课程，例如 Angular 和 Vue，不过目前还没有这些内容。 我们会接受并尝试修复你在使用推荐技术栈创建项目时报告的问题。 编码愉快！ +Fulfill the below user stories and get all of the tests to pass. Use whichever libraries or APIs you need. Give it your own personal style. -**需求 1：** 应该能看到一个具有`id="break-label"`属性的元素，这个元素的内容应该是一个字符串（例如："Break Length"）。 +You can use any mix of HTML, JavaScript, CSS, Bootstrap, SASS, React, Redux, and jQuery to complete this project. You should use a frontend framework (like React for example) because this section is about learning frontend frameworks. Additional technologies not listed above are not recommended and using them is at your own risk. We are looking at supporting other frontend frameworks like Angular and Vue, but they are not currently supported. We will accept and try to fix all issue reports that use the suggested technology stack for this project. Happy coding! -**需求 2：** 应该能看到一个具有`id="session-label"`属性的元素，这个元素的内容应该是一个字符串（例如："Session Length"）。 +**User Story #1:** I can see an element with `id="break-label"` that contains a string (e.g. "Break Length"). -**需求 3：** 应该能看到两个可以点击的元素，他们分别具有如下 id：`id="break-decrement"` 和 `id="session-decrement"`。 +**User Story #2:** I can see an element with `id="session-label"` that contains a string (e.g. "Session Length"). -**需求 4：** 应该能看到两个可以点击的元素，它们分别具有如下 id：`id="break-increment"` 和 `id="session-increment"`。 +**User Story #3:** I can see two clickable elements with corresponding IDs: `id="break-decrement"` and `id="session-decrement"`. -**需求 5：** 应该能看到一个具有 `id="break-length"` 属性的元素，这个元素默认展示数值应该为 5（加载后）。 +**User Story #4:** I can see two clickable elements with corresponding IDs: `id="break-increment"` and `id="session-increment"`. -**需求 6：** 应该能看到一个具有 `id="session-length"` 属性的元素，这个元素默认展示数值应该为 25（加载后）。 +**User Story #5:** I can see an element with a corresponding `id="break-length"`, which by default (on load) displays a value of 5. -**需求 7：** 应该能看到一个具有 `id="timer-label"` 属性的元素，这个元素包含一个表示当前状态的字符串（例如："Session"）。 +**User Story #6:** I can see an element with a corresponding `id="session-length"`, which by default displays a value of 25. -**需求 8：** 应该能看到一个具有 `id="time-left"` 属性的元素。 注意：暂停或者运行时，该元素的内容应始终以 `mm:ss` 格式显示（如 25:00）。 +**User Story #7:** I can see an element with a corresponding `id="timer-label"`, that contains a string indicating a session is initialized (e.g. "Session"). -**需求 9：** 应该能看到一个具有 `id="start_stop"` 属性的可点击的元素。 +**User Story #8:** I can see an element with corresponding `id="time-left"`. NOTE: Paused or running, the value in this field should always be displayed in `mm:ss` format (i.e. 25:00). -**需求 10：** 应该能看到一个具有 `id="reset"` 属性的可点击的元素。 +**User Story #9:** I can see a clickable element with a corresponding `id="start_stop"`. -**需求 11：** 当点击 id 属性为 `reset` 的元素时，运行中的计时器都应该停止，`id="break-length"` 元素中的值应该重新回到 `5`，`id="session-length"` 元素中的值应该重新回到 25，且 `id="time-left"` 元素应该重置为默认状态。 +**User Story #10:** I can see a clickable element with a corresponding `id="reset"`. -**需求 12：** 当点击 id 属性为 `break-decrement` 的元素时，`id="break-length"` 元素的值应该减去 1，且我应该能看到更新后的值。 +**User Story #11:** When I click the element with the id of `reset`, any running timer should be stopped, the value within `id="break-length"` should return to `5`, the value within `id="session-length"` should return to 25, and the element with `id="time-left"` should reset to its default state. -**需求 13：** 当点击 id 属性为 `break-increment` 的元素时，`id="break-length"` 元素的值应该增加 1，且应该能看到更新后的值。 +**User Story #12:** When I click the element with the id of `break-decrement`, the value within `id="break-length"` decrements by a value of 1, and I can see the updated value. -**需求 14：** 当点击 id 属性为 `session-decrement` 的元素时，`id="session-length"` 元素的值应该减去 1，且应该能看到更新后的值。 +**User Story #13:** When I click the element with the id of `break-increment`, the value within `id="break-length"` increments by a value of 1, and I can see the updated value. -**需求 15：** 当点击 id 属性为 `session-increment` 的元素时，`id="session-length"` 元素的值应该增加 1，且应该能看到更新后的值。 +**User Story #14:** When I click the element with the id of `session-decrement`, the value within `id="session-length"` decrements by a value of 1, and I can see the updated value. -**需求 16：** 工作或者休息长度不应该可以设置为 <= 0 的值。 +**User Story #15:** When I click the element with the id of `session-increment`, the value within `id="session-length"` increments by a value of 1, and I can see the updated value. -**需求 17：** 工作或者休息长度比应该可以设置为 > 60 的值。 +**User Story #16:** I should not be able to set a session or break length to <= 0. -**需求 18：** 当首次点击具有 `id="start_stop"` 属性的元素时，计时器应该根据 `id="session-length"` 元素当前显示的值开始运行，即使该值已从原始值 25 递增过或递减过。 +**User Story #17:** I should not be able to set a session or break length to > 60. -**需求 19：** 如果计时器正在运行，id 属性为 `time-left` 的元素应该以 `mm:ss` 的格式展示剩余的时间（按1递减并且每秒更新一次显示的值）。 +**User Story #18:** When I first click the element with `id="start_stop"`, the timer should begin running from the value currently displayed in `id="session-length"`, even if the value has been incremented or decremented from the original value of 25. -**需求 20：** 如果计时器正在运行，当点击 `id="start_stop"` 元素时，倒计时应该暂停。 +**User Story #19:** If the timer is running, the element with the id of `time-left` should display the remaining time in `mm:ss` format (decrementing by a value of 1 and updating the display every 1000ms). -**需求 21：** 如果计时器已经暂停，当点击 `id="start_stop"` 元素时，倒计时应该从暂停的时间点恢复运行。 +**User Story #20:** If the timer is running and I click the element with `id="start_stop"`, the countdown should pause. -**需求 22：** 当一个工作倒计时结束（注意：计时器必须达到 00:00），并且新的倒计时开始运行时，id 属性为 `timer-label` 的元素应该显示一个表示已经开始休息的字符串。 +**User Story #21:** If the timer is paused and I click the element with `id="start_stop"`, the countdown should resume running from the point at which it was paused. -**需求 23：** 当一个工作倒计时结束（注意：计时器必须达到 00:00），应该开始一个新的休息倒计时，时间应该从 `id="break-length"` 元素中当前显示的值开始计算。 +**User Story #22:** When a session countdown reaches zero (NOTE: timer MUST reach 00:00), and a new countdown begins, the element with the id of `timer-label` should display a string indicating a break has begun. -**需求 24：** 当一个休息倒计时结束（注意：计时器必须达到 00:00），并且新的倒计时开始运行时，id 属性为 `timer-label` 的元素应该显示一个表示已经开始工作的字符串。 +**User Story #23:** When a session countdown reaches zero (NOTE: timer MUST reach 00:00), a new break countdown should begin, counting down from the value currently displayed in the `id="break-length"` element. -**需求 25：** 当一个休息倒计时结束（注意：计时器必须达到 00:00），应该开始一个新的工作倒计时，时间应该从 `id="session-length"` 元素中当前显示的值开始计算。 +**User Story #24:** When a break countdown reaches zero (NOTE: timer MUST reach 00:00), and a new countdown begins, the element with the id of `timer-label` should display a string indicating a session has begun. -**需求 26：** 当一个倒计时结束（注意：计时器必须达到 00:00），应该播放一个表示时间到了的声音提示。 这个提示音应该使用 HTML5 的 `audio`标签并有一个 `id="beep"` 属性。 +**User Story #25:** When a break countdown reaches zero (NOTE: timer MUST reach 00:00), a new session countdown should begin, counting down from the value currently displayed in the `id="session-length"` element. -**需求 27：** 具有`id="beep"`属性的音频元素时长应该至少有一秒。 +**User Story #26:** When a countdown reaches zero (NOTE: timer MUST reach 00:00), a sound indicating that time is up should play. This should utilize an HTML5 `audio` tag and have a corresponding `id="beep"`. -**需求 28：** 当点击 id 属性为 `reset` 的元素时，id 属性为 `beep` 的音频元素必须停止播放并回到开头。 +**User Story #27:** The audio element with `id="beep"` must be 1 second or longer. -你可以使用 CodePen 模版创建你的新项目，点击 `Save` 即可创建你的新项目。 或者你可以在任何你喜欢的环境中使用以下 CDN 链接来运行测试：`https://cdn.freecodecamp.org/testable-projects-fcc/v1/bundle.js`。 +**User Story #28:** The audio element with id of `beep` must stop playing and be rewound to the beginning when the element with the id of `reset` is clicked. -当你完成了本项目，并且该项目所有测试运行通过， 请提交项目的 URL。 +You can build your project by using this CodePen template and clicking `Save` to create your own pen. Or you can use this CDN link to run the tests in any environment you like: `https://cdn.freecodecamp.org/testable-projects-fcc/v1/bundle.js` + +Once you're done, submit the URL to your working project with all its tests passing. # --solutions-- diff --git a/curriculum/challenges/chinese/03-front-end-development-libraries/front-end-development-libraries-projects/build-a-drum-machine.md b/curriculum/challenges/chinese/03-front-end-development-libraries/front-end-development-libraries-projects/build-a-drum-machine.md index 5464dead53f..7222ad07800 100644 --- a/curriculum/challenges/chinese/03-front-end-development-libraries/front-end-development-libraries-projects/build-a-drum-machine.md +++ b/curriculum/challenges/chinese/03-front-end-development-libraries/front-end-development-libraries-projects/build-a-drum-machine.md @@ -7,28 +7,29 @@ dashedName: build-a-drum-machine --- # --description-- +**Note:** **React 18 has known incompatibilities with the tests for this project (see [issue](https://github.com/freeCodeCamp/freeCodeCamp/issues/45922))** -**目标：** 构建一个应用，功能和 https://drum-machine.freecodecamp.rocks/ 类似。 +**Objective:** Build an app that is functionally similar to this: https://drum-machine.freecodecamp.rocks/. -完成以下需求，并且通过所有测试。 可以使用你需要的任何库或 API。 赋予它你自己的个人风格。 +Fulfill the below user stories and get all of the tests to pass. Use whichever libraries or APIs you need. Give it your own personal style. -可以使用 HTML、JavaScript、CSS、Bootstrap、SASS、React、Redux、jQuery 来完成这个挑战。 但鉴于这个章节的学习内容与前端框架相关，推荐使用一款前端框架（比如 React）来完成这个挑战。 不推荐使用前面没有提到的技术，否则风险自担。 我们有计划新增其他前端框架课程，例如 Angular 和 Vue，不过目前还没有这些内容。 我们会接受并尝试修复你在使用推荐技术栈创建项目时报告的问题。 编码愉快！ +You can use any mix of HTML, JavaScript, CSS, Bootstrap, SASS, React, Redux, and jQuery to complete this project. You should use a frontend framework (like React for example) because this section is about learning frontend frameworks. Additional technologies not listed above are not recommended and using them is at your own risk. We are looking at supporting other frontend frameworks like Angular and Vue, but they are not currently supported. We will accept and try to fix all issue reports that use the suggested technology stack for this project. Happy coding! -**需求 1：** 应该可以看到一个具有 `id="drum-machine"` 属性的外层容器，该容器包含了其它所有元素。 +**User Story #1:** I should be able to see an outer container with a corresponding `id="drum-machine"` that contains all other elements. -**需求 2：** 在具有 `#drum-machine` 属性的元素内，应该能看到一个具有 `id="display"` 属性的元素。 +**User Story #2:** Within `#drum-machine` I can see an element with a corresponding `id="display"`. -**需求 3：** 在具有 `#drum-machine` 属性的元素内，应该能看到 9 个可以点击的鼓垫元素，且每个鼓垫元素都应该有一个值为 `drum-pad` 的 class 属性， 一个用于描述触发鼓垫音频片段的特殊 id，以及以下键值之一的文本内容：`Q`、`W`、`E`、`A`、`S`、`D`、`Z`、`X`、`C`。 这些鼓垫必须按照以上顺序排列。 +**User Story #3:** Within `#drum-machine` I can see 9 clickable drum pad elements, each with a class name of `drum-pad`, a unique id that describes the audio clip the drum pad will be set up to trigger, and an inner text that corresponds to one of the following keys on the keyboard: `Q`, `W`, `E`, `A`, `S`, `D`, `Z`, `X`, `C`. The drum pads MUST be in this order. -**需求 4：** 在每一个具有 `.drum-pad` 属性的元素内，应该有一个具有指向音频片段地址的 `src` 属性的 HTML5 `audio` 元素，一个值为 `clip` 的 class 属性，以及一个 id 属性，它的值应该是其父元素 `.drum-pad` 的文本内容（例如 `id="Q"`、`id="W"`、`id="E"` 等等）。 +**User Story #4:** Within each `.drum-pad`, there should be an HTML5 `audio` element which has a `src` attribute pointing to an audio clip, a class name of `clip`, and an id corresponding to the inner text of its parent `.drum-pad` (e.g. `id="Q"`, `id="W"`, `id="E"` etc.). -**需求 5：** 当点击一个具有 `.drum-pad` 属性的元素时，应该触发它的子元素 `audio` 包含的音频片段。 +**User Story #5:** When I click on a `.drum-pad` element, the audio clip contained in its child `audio` element should be triggered. -**需求 6：** 当按下每一个 `.drum-pad` 元素的关联键时，应该触发其子元素 `audio` 包含的音频片段（例如：按下 `Q` 键应该触发包含字符串 `Q` 的鼓垫，按下 `W` 键应该触发包含字符串 `W` 的鼓垫等等）。 +**User Story #6:** When I press the trigger key associated with each `.drum-pad`, the audio clip contained in its child `audio` element should be triggered (e.g. pressing the `Q` key should trigger the drum pad which contains the string `Q`, pressing the `W` key should trigger the drum pad which contains the string `W`, etc.). -**需求 7：** 当触发一个具有 `.drum-pad` 属性的元素时，`#display` 元素内应该展示这个触发元素关联音频片段的描述字符串（每一个字符串都应该是独一无二的）。 +**User Story #7:** When a `.drum-pad` is triggered, a string describing the associated audio clip is displayed as the inner text of the `#display` element (each string must be unique). -以下是一些可用于鼓机的音频样本： +Here are some audio samples you can use for your drum machine: - [Heater 1](https://s3.amazonaws.com/freecodecamp/drums/Heater-1.mp3) - [Heater 2](https://s3.amazonaws.com/freecodecamp/drums/Heater-2.mp3) @@ -40,9 +41,9 @@ dashedName: build-a-drum-machine - [Kick](https://s3.amazonaws.com/freecodecamp/drums/RP4_KICK_1.mp3) - [Closed-HH](https://s3.amazonaws.com/freecodecamp/drums/Cev_H2.mp3) -你可以使用 CodePen 模版创建你的新项目，点击 `Save` 即可创建你的新项目。 或者你可以在任何你喜欢的环境中使用以下 CDN 链接来运行测试：`https://cdn.freecodecamp.org/testable-projects-fcc/v1/bundle.js`。 +You can build your project by using this CodePen template and clicking `Save` to create your own pen. Or you can use this CDN link to run the tests in any environment you like: `https://cdn.freecodecamp.org/testable-projects-fcc/v1/bundle.js` -当你完成了本项目，并且项目通过所有测试，请提交项目的 URL。 +Once you're done, submit the URL to your working project with all its tests passing. # --solutions-- diff --git a/curriculum/challenges/chinese/03-front-end-development-libraries/front-end-development-libraries-projects/build-a-javascript-calculator.md b/curriculum/challenges/chinese/03-front-end-development-libraries/front-end-development-libraries-projects/build-a-javascript-calculator.md index 6a1b7a71f0a..baf05f0136a 100644 --- a/curriculum/challenges/chinese/03-front-end-development-libraries/front-end-development-libraries-projects/build-a-javascript-calculator.md +++ b/curriculum/challenges/chinese/03-front-end-development-libraries/front-end-development-libraries-projects/build-a-javascript-calculator.md @@ -7,53 +7,54 @@ dashedName: build-a-javascript-calculator --- # --description-- +**Note:** **React 18 has known incompatibilities with the tests for this project (see [issue](https://github.com/freeCodeCamp/freeCodeCamp/issues/45922))** -**目标：** 构建一个应用，功能和 https://javascript-calculator.freecodecamp.rocks/ 类似。 +**Objective:** Build an app that is functionally similar to this: https://javascript-calculator.freecodecamp.rocks/. -完成以下需求，并且通过所有测试。 可以使用你需要的任何库或 API。 赋予它你自己的个人风格。 +Fulfill the below user stories and get all of the tests to pass. Use whichever libraries or APIs you need. Give it your own personal style. -可以使用 HTML、JavaScript、CSS、Bootstrap、SASS、React、Redux、jQuery 来完成这个挑战。 但鉴于这个章节的学习内容与前端框架相关，推荐使用一款前端框架（比如 React）来完成这个挑战；不推荐使用前面没有提到的技术，否则风险自负。 不推荐使用前面没有提到的技术，否则风险自担。 我们有计划新增其他前端框架课程，例如 Angular 和 Vue，不过目前还没有这些内容。 我们会接受并尝试修复你在使用推荐技术栈创建项目时报告的问题。 编码愉快！ +You can use any mix of HTML, JavaScript, CSS, Bootstrap, SASS, React, Redux, and jQuery to complete this project. You should use a frontend framework (like React for example) because this section is about learning frontend frameworks. Additional technologies not listed above are not recommended and using them is at your own risk. We are looking at supporting other frontend frameworks like Angular and Vue, but they are not currently supported. We will accept and try to fix all issue reports that use the suggested technology stack for this project. Happy coding! -**需求 1：** 计算器应该包含一个具有 `id="equals"` 属性的可以点击的元素，元素的文本内容为 `=`（等于符号）。 +**User Story #1:** My calculator should contain a clickable element containing an `=` (equal sign) with a corresponding `id="equals"`. -**需求 2：** 计算器应该包含 10 个具有如下 id 属性的可以点击的元素，每个元素的文本内容对应 0-9 的数字：`id="zero"`、`id="one"`、`id="two"`、`id="three"`、`id="four"`、`id="five"`、`id="six"`、`id="seven"`、`id="eight"`、`id="nine"`。 +**User Story #2:** My calculator should contain 10 clickable elements containing one number each from 0-9, with the following corresponding IDs: `id="zero"`, `id="one"`, `id="two"`, `id="three"`, `id="four"`, `id="five"`, `id="six"`, `id="seven"`, `id="eight"`, and `id="nine"`. -**需求 3：** 计算器应该包含四个可以点击的元素，文本内容对应4个主要数学运算符，且应具有如下 id 属性： `id="add"`, `id="subtract"`, `id="multiply"`, `id="divide"`。 +**User Story #3:** My calculator should contain 4 clickable elements each containing one of the 4 primary mathematical operators with the following corresponding IDs: `id="add"`, `id="subtract"`, `id="multiply"`, `id="divide"`. -**需求 4：** 计算器应该包含一个可点击的 `.`（小数点）符号，对应的 `id="decimal"`。 +**User Story #4:** My calculator should contain a clickable element containing a `.` (decimal point) symbol with a corresponding `id="decimal"`. -**需求 5：** 计算器应该包含一个具有 `id="clear"` 属性的可以点击的元素。 +**User Story #5:** My calculator should contain a clickable element with an `id="clear"`. -**需求 6：** 我的计算器应该包含一个用于展示数值的元素，这个元素具有 `id="display"` 属性。 +**User Story #6:** My calculator should contain an element to display values with a corresponding `id="display"`. -**需求 7：** 在任何时候按下 `clear` 键，都会清空输入和输出的数值并且使计算器回到初始状态；此时在 id 为 `display` 的元素中应该显示数字 0。 +**User Story #7:** At any time, pressing the `clear` button clears the input and output values, and returns the calculator to its initialized state; 0 should be shown in the element with the id of `display`. -**需求 8：** 在输入数字的同时，应该能看到输入的数字展示在 id 为 `display` 的元素中。 +**User Story #8:** As I input numbers, I should be able to see my input in the element with the id of `display`. -**需求 9：** 应该可以在任意顺序下对一串任意长度的数字执行加、减、乘、除操作，并且当按下 `=` 时，正确答案应该显示在 id 为 `display` 的元素中。 +**User Story #9:** In any order, I should be able to add, subtract, multiply and divide a chain of numbers of any length, and when I hit `=`, the correct result should be shown in the element with the id of `display`. -**需求 10：** 在输入数字的同时，计算器应该不允许一个数字以多个零开头。 +**User Story #10:** When inputting numbers, my calculator should not allow a number to begin with multiple zeros. -**需求 11：** 当点击小数点元素时，当前展示的数值后面应该添加一个 `.` 符号；数字中不允许出现两个 `.` 符号。 +**User Story #11:** When the decimal element is clicked, a `.` should append to the currently displayed value; two `.` in one number should not be accepted. -**需求 12：** 我可以对包含小数点的数字执行任何四则运算（`+`、`-`、`*`、`/`）。 +**User Story #12:** I should be able to perform any operation (`+`, `-`, `*`, `/`) on numbers containing decimal points. -**需求 13：** 如果连续键入了两个及以上的运算符，应该执行最后一次键入的运算符（负数（`-`）运算符除外）。 例如，如果输入 `5 + * 7 =`，结果应该是 `35` （等同于 `5 * 7`）；如果输入 `5 * - 5 =`，结果应该是 `-25`（等同于 `5 * (-5)`）。 +**User Story #13:** If 2 or more operators are entered consecutively, the operation performed should be the last operator entered (excluding the negative (`-`) sign). For example, if `5 + * 7 =` is entered, the result should be `35` (i.e. `5 * 7`); if `5 * - 5 =` is entered, the result should be `-25` (i.e. `5 * (-5)`). -**需求 14：** 如果在按下 `=` 符号后继续按一个运算符，则应该在上一次计算结果的基础上进行新的计算。 +**User Story #14:** Pressing an operator immediately following `=` should start a new calculation that operates on the result of the previous evaluation. -**需求 15：** 当需要四舍五入时，计算器可以处理结果的精度（注意：处理到多少位没有一个准确的标准，但是至少能处理类似 `2 / 7` 这样的计算，使之至少有 4 位小数的精度）。 +**User Story #15:** My calculator should have several decimal places of precision when it comes to rounding (note that there is no exact standard, but you should be able to handle calculations like `2 / 7` with reasonable precision to at least 4 decimal places). -**注意计算器的逻辑：** 应当注意的是，计算器输入逻辑主要有两种思路：立即执行逻辑 和 公式逻辑。 我们的示例使用公式逻辑并遵守运算优先顺序，而立即执行则不然。 两者都是可以接受的，但请注意，根据你的选择，你的计算器对于某些算式可能会得到与示例不同的计算结果（参见下面的示例）。 只要数学计算可以通过其它现实中计算器的验证，那么代码就是合理的。 +**Note On Calculator Logic:** It should be noted that there are two main schools of thought on calculator input logic: immediate execution logic and formula logic. Our example utilizes formula logic and observes order of operation precedence, immediate execution does not. Either is acceptable, but please note that depending on which you choose, your calculator may yield different results than ours for certain equations (see below example). As long as your math can be verified by another production calculator, please do not consider this a bug. -**示例：** `3 + 5 x 6 - 2 / 4 =` +**EXAMPLE:** `3 + 5 x 6 - 2 / 4 =` - **立即执行逻辑：** `11.5` - **公式／表达式逻辑：** `32.5` -你可以使用 CodePen 模版创建你的新项目，点击 `Save` 即可创建你的新项目。 或者可以在任何喜欢的环境中使用以下 CDN 链接来运行测试：`https://cdn.freecodecamp.org/testable-projects-fcc/v1/bundle.js`。 +You can build your project by using this CodePen template and clicking `Save` to create your own pen. Or you can use this CDN link to run the tests in any environment you like: `https://cdn.freecodecamp.org/testable-projects-fcc/v1/bundle.js` -当你完成了本项目，并且该项目所有测试运行通过，请提交项目的 URL。 +Once you're done, submit the URL to your working project with all its tests passing. # --solutions-- diff --git a/curriculum/challenges/chinese/03-front-end-development-libraries/front-end-development-libraries-projects/build-a-markdown-previewer.md b/curriculum/challenges/chinese/03-front-end-development-libraries/front-end-development-libraries-projects/build-a-markdown-previewer.md index bd14696f435..ae1dfb1386e 100644 --- a/curriculum/challenges/chinese/03-front-end-development-libraries/front-end-development-libraries-projects/build-a-markdown-previewer.md +++ b/curriculum/challenges/chinese/03-front-end-development-libraries/front-end-development-libraries-projects/build-a-markdown-previewer.md @@ -7,30 +7,31 @@ dashedName: build-a-markdown-previewer --- # --description-- +**Note:** **React 18 has known incompatibilities with the tests for this project (see [issue](https://github.com/freeCodeCamp/freeCodeCamp/issues/45922))** -**目标：** 构建一个应用，功能和 https://markdown-previewer.freecodecamp.rocks/ 类似。 +**Objective:** Build an app that is functionally similar to this: https://markdown-previewer.freecodecamp.rocks/. -完成以下需求，并且通过所有测试。 可以使用你需要的任何库或 API。 赋予它你自己的个人风格。 +Fulfill the below user stories and get all of the tests to pass. Use whichever libraries or APIs you need. Give it your own personal style. -可以使用 HTML、JavaScript、CSS、Bootstrap、SASS、React、Redux、jQuery 来完成这个挑战。 但鉴于这个章节的学习内容与前端框架相关，推荐使用一款前端框架（比如 React）来完成这个挑战；不推荐使用前面没有提到的技术，否则风险自负。 不推荐使用前面没有提到的技术，否则风险自担。 我们有计划新增其他前端框架课程，例如 Angular 和 Vue，不过目前还没有这些内容。 我们会接受并尝试修复你在使用推荐技术栈创建项目时报告的问题。 编码愉快！ +You can use any mix of HTML, JavaScript, CSS, Bootstrap, SASS, React, Redux, and jQuery to complete this project. You should use a frontend framework (like React for example) because this section is about learning frontend frameworks. Additional technologies not listed above are not recommended and using them is at your own risk. We are looking at supporting other frontend frameworks like Angular and Vue, but they are not currently supported. We will accept and try to fix all issue reports that use the suggested technology stack for this project. Happy coding! -**需求 1：** 应该能看到一个具有 `id="editor"` 属性的 `textarea` 元素。 +**User Story #1:** I can see a `textarea` element with a corresponding `id="editor"`. -**需求 2：** 应该能看到一个具有 `id="preview"` 属性的元素。 +**User Story #2:** I can see an element with a corresponding `id="preview"`. -**需求 3：** 当在具有 `#editor` 属性的元素内输入文本时，具有 `#preview` 属性的元素应该同步更新展示键入的内容。 +**User Story #3:** When I enter text into the `#editor` element, the `#preview` element is updated as I type to display the content of the textarea. -**需求 4：** 当在具有 `#editor` 属性的元素内输入 GitHub 风格的 markdown 内容时，文本应该以 HTML 的形式，把所键入的内容渲染在具有 `#preview` 属性的元素中（提示：不需要自己解析 Markdown——可以引入一个叫做 Marked 的库来完成这项工作：）。 +**User Story #4:** When I enter GitHub flavored markdown into the `#editor` element, the text is rendered as HTML in the `#preview` element as I type (HINT: You don't need to parse Markdown yourself - you can import the Marked library for this: ). -**需求 5：** 当 Markdown 预览器首次加载时，具有 `#editor` 属性的元素内的默认内容应该包含以下每个种类的至少一段有效的 Markdown 代码：标题元素（H1 标签）、次级标题元素（H2 标签）、链接、行内代码、代码块、列表、引用块、图片、加粗文本。 +**User Story #5:** When my markdown previewer first loads, the default text in the `#editor` field should contain valid markdown that represents at least one of each of the following elements: a heading element (H1 size), a sub heading element (H2 size), a link, inline code, a code block, a list item, a blockquote, an image, and bolded text. -**需求 6：** 当 Markdown 预览器首次加载时，具有 `#editor` 属性的元素内容应该以 HTML 的形式渲染在具有 `#preview` 属性的元素中。 +**User Story #6:** When my markdown previewer first loads, the default markdown in the `#editor` field should be rendered as HTML in the `#preview` element. -**可选需求（你无需通过这项测试）：** Markdown 预览器能够解析回车符并且将他们以 `br`（换行）元素的形式渲染出来。 +**Optional Bonus (you do not need to make this test pass):** My markdown previewer interprets carriage returns and renders them as `br` (line break) elements. -你可以使用 CodePen 模版创建你的新项目，点击 `Save` 即可创建你的新项目。 或者可以在任何喜欢的环境中使用以下 CDN 链接来运行测试：`https://cdn.freecodecamp.org/testable-projects-fcc/v1/bundle.js`。 +You can build your project by using this CodePen template and clicking `Save` to create your own pen. Or you can use this CDN link to run the tests in any environment you like: `https://cdn.freecodecamp.org/testable-projects-fcc/v1/bundle.js` -当你完成了本项目，并且该项目所有测试运行通过，请提交项目的 URL。 +Once you're done, submit the URL to your working project with all its tests passing. # --solutions-- diff --git a/curriculum/challenges/chinese/03-front-end-development-libraries/front-end-development-libraries-projects/build-a-random-quote-machine.md b/curriculum/challenges/chinese/03-front-end-development-libraries/front-end-development-libraries-projects/build-a-random-quote-machine.md index 05b0de4c82e..1f7c376114b 100644 --- a/curriculum/challenges/chinese/03-front-end-development-libraries/front-end-development-libraries-projects/build-a-random-quote-machine.md +++ b/curriculum/challenges/chinese/03-front-end-development-libraries/front-end-development-libraries-projects/build-a-random-quote-machine.md @@ -7,40 +7,41 @@ dashedName: build-a-random-quote-machine --- # --description-- +**Note:** **React 18 has known incompatibilities with the tests for this project (see [issue](https://github.com/freeCodeCamp/freeCodeCamp/issues/45922))** -**目标：** 构建一个应用，功能和 https://random-quote-machine.freecodecamp.rocks/ 类似。 +**Objective:** Build an app that is functionally similar to this: https://random-quote-machine.freecodecamp.rocks/. -完成以下需求，并且通过所有测试。 可以使用你需要的任何库或 API。 赋予它你自己的个人风格。 +Fulfill the below user stories and get all of the tests to pass. Use whichever libraries or APIs you need. Give it your own personal style. -可以使用 HTML、JavaScript、CSS、Bootstrap、SASS、React、Redux、jQuery 来完成这个挑战。 但鉴于这个章节的学习内容与前端框架相关，推荐使用一款前端框架（比如 React）来完成这个挑战；不推荐使用前面没有提到的技术，否则风险自负。 不推荐使用前面没有提到的技术，否则风险自担。 我们有计划新增其他前端框架课程，例如 Angular 和 Vue，不过目前还没有这些内容。 我们会接受并尝试修复你在使用推荐技术栈创建项目时报告的问题。 编码愉快！ +You can use any mix of HTML, JavaScript, CSS, Bootstrap, SASS, React, Redux, and jQuery to complete this project. You should use a frontend framework (like React for example) because this section is about learning frontend frameworks. Additional technologies not listed above are not recommended and using them is at your own risk. We are looking at supporting other frontend frameworks like Angular and Vue, but they are not currently supported. We will accept and try to fix all issue reports that use the suggested technology stack for this project. Happy coding! -**需求 1：** 应该能看到一个具有 `id="quote-box"` 属性的包裹元素。 +**User Story #1:** I can see a wrapper element with a corresponding `id="quote-box"`. -**需求 2：** 在 `#quote-box` 元素内，应该能看到一个具有 `id="text"` 属性的元素。 +**User Story #2:** Within `#quote-box`, I can see an element with a corresponding `id="text"`. -**需求 3：** 在 `#quote-box` 元素内，应该能看到一个具有 `id="author"` 属性的元素。 +**User Story #3:** Within `#quote-box`, I can see an element with a corresponding `id="author"`. -**需求 4：** 在 `#quote-box` 元素内，应该能看到一个具有 `id="new-quote"` 属性的可点击元素。 +**User Story #4:** Within `#quote-box`, I can see a clickable element with a corresponding `id="new-quote"`. -**需求 5：** 在 `#quote-box` 元素内，应该能看到一个具有 `id="tweet-quote"` 属性的可点击 `a` 元素。 +**User Story #5:** Within `#quote-box`, I can see a clickable `a` element with a corresponding `id="tweet-quote"`. -**需求 6：** 首次加载时，App 应该在具有 `id="text"` 属性的元素内展示一条随机引语。 +**User Story #6:** On first load, my quote machine displays a random quote in the element with `id="text"`. -**需求 7：** 首次加载时，App 应该在具有 `id="author"` 属性的元素内展示该条随机引语的作者。 +**User Story #7:** On first load, my quote machine displays the random quote's author in the element with `id="author"`. -**需求 8：** 当点击具有 `#new-quote` 属性的按钮时，App 应该得到一条新的引语并在具有 `#text` 属性的元素内展示出来。 +**User Story #8:** When the `#new-quote` button is clicked, my quote machine should fetch a new quote and display it in the `#text` element. -**需求 9：** 当点击具有 `#new-quote` 属性的按钮时，App 应该得到新引语的作者并在具有 `#author` 属性的元素内展示出来。 +**User Story #9:** My quote machine should fetch the new quote's author when the `#new-quote` button is clicked and display it in the `#author` element. -**需求 10：** 可以通过点击具有 `#tweet-quote` 属性的 `a` 标签将当前引语发送到推特。 该 `a` 标签的 `href` 属性应该是 `"twitter.com/intent/tweet"`，以便成功发送。 +**User Story #10:** I can tweet the current quote by clicking on the `#tweet-quote` `a` element. This `a` element should include the `"twitter.com/intent/tweet"` path in its `href` attribute to tweet the current quote. -**需求 11：** 具有 `#quote-box` 属性的包裹元素应该水平居中。 请在浏览器缩放尺寸为 100% 且页面窗口最大化时运行测试。 +**User Story #11:** The `#quote-box` wrapper element should be horizontally centered. Please run tests with browser's zoom level at 100% and page maximized. -你可以使用 CodePen 模版创建你的新项目，点击 `Save` 即可创建你的新项目。 或者可以在任何喜欢的环境中使用以下 CDN 链接来运行测试：`https://cdn.freecodecamp.org/testable-projects-fcc/v1/bundle.js`。 +You can build your project by using this CodePen template and clicking `Save` to create your own pen. Or you can use this CDN link to run the tests in any environment you like: `https://cdn.freecodecamp.org/testable-projects-fcc/v1/bundle.js` -一旦完成了本项目并且该项目所有测试运行通过，请提交项目的 URL。 +Once you're done, submit the URL to your working project with all its tests passing. -**注意：** Twitter 不允许在 iframe 里加载链接。 如果 tweet 不能加载，尝试在 `#tweet-quote` 元素上使用 `target="_blank"` 或者 `target="_top"` 属性。 `target="_top"` 会替换当前 tab 页的内容，所以确保当前内容已经保存了。 +**Note:** Twitter does not allow links to be loaded in an iframe. Try using the `target="_blank"` or `target="_top"` attribute on the `#tweet-quote` element if your tweet won't load. `target="_top"` will replace the current tab so make sure your work is saved. # --solutions-- diff --git a/curriculum/challenges/espanol/00-certifications/example-certification/example-certifcation.yml b/curriculum/challenges/espanol/00-certifications/example-certification/example-certifcation.yml index e887e489d8b..9c4a9529ba8 100644 --- a/curriculum/challenges/espanol/00-certifications/example-certification/example-certifcation.yml +++ b/curriculum/challenges/espanol/00-certifications/example-certification/example-certifcation.yml @@ -1,10 +1,10 @@ --- id: 64514fda6c245de4d11eb7bb -title: Example Certification +title: Ejemplo de certificación certification: example-certification challengeType: 7 isPrivate: true tests: - id: 645147516c245de4d11eb7ba - title: Certification Exam + title: Examen de certificación diff --git a/curriculum/challenges/espanol/00-certifications/foundational-c-sharp-with-microsoft-certification/foundational-c-sharp-with-microsoft.yml b/curriculum/challenges/espanol/00-certifications/foundational-c-sharp-with-microsoft-certification/foundational-c-sharp-with-microsoft.yml index a145a188e77..43c45d970ac 100644 --- a/curriculum/challenges/espanol/00-certifications/foundational-c-sharp-with-microsoft-certification/foundational-c-sharp-with-microsoft.yml +++ b/curriculum/challenges/espanol/00-certifications/foundational-c-sharp-with-microsoft-certification/foundational-c-sharp-with-microsoft.yml @@ -1,10 +1,10 @@ --- id: 647f7da207d29547b3bee1ba -title: 'Foundational C# with Microsoft Certification' +title: 'C# básico con certificación de Microsoft' certification: foundational-c-sharp-with-microsoft challengeType: 7 isPrivate: true tests: - id: 647e22d18acb466c97ccbef8 - title: 'Foundational C# with Microsoft Certification Exam' + title: 'C# básico con examen de certificación de Microsoft' diff --git a/curriculum/challenges/espanol/00-certifications/upcoming-python-certification/upcoming-python-certification.yml b/curriculum/challenges/espanol/00-certifications/upcoming-python-certification/upcoming-python-certification.yml index 71963dffb54..9b8de78b909 100644 --- a/curriculum/challenges/espanol/00-certifications/upcoming-python-certification/upcoming-python-certification.yml +++ b/curriculum/challenges/espanol/00-certifications/upcoming-python-certification/upcoming-python-certification.yml @@ -1,10 +1,10 @@ --- id: 64afc4e8f3b37856e035b85f -title: Upcoming Python Certification +title: Próxima certificación de Python certification: upcoming-python-certification challengeType: 7 isPrivate: true tests: - id: 64afc37bf3b37856e035b85e - title: Upcoming Python Project + title: Próximo proyecto Python diff --git a/curriculum/challenges/espanol/01-responsive-web-design/applied-accessibility/improve-accessibility-of-audio-content-with-the-audio-element.md b/curriculum/challenges/espanol/01-responsive-web-design/applied-accessibility/improve-accessibility-of-audio-content-with-the-audio-element.md index 04d374c050f..946a4e361af 100644 --- a/curriculum/challenges/espanol/01-responsive-web-design/applied-accessibility/improve-accessibility-of-audio-content-with-the-audio-element.md +++ b/curriculum/challenges/espanol/01-responsive-web-design/applied-accessibility/improve-accessibility-of-audio-content-with-the-audio-element.md @@ -26,7 +26,7 @@ Acá tenemos un ejemplo: # --instructions-- -Es hora de salir del Camper Cat y conocer a nuestro compañero Zersiax (@zersiax), un campeón en accesibilidad y un usuario de lector de pantalla. To hear a clip of his screen reader in action, add an `audio` element after the `p` element. Incluye el atributo `controls`. Then place a `source` element inside the `audio` tags with the `src` attribute set to `https://s3.amazonaws.com/freecodecamp/screen-reader.mp3` and `type` attribute set to `"audio/mpeg"`. +Es hora de salir del Camper Cat y conocer a nuestro compañero Zersiax (@zersiax), un campeón en accesibilidad y un usuario de lector de pantalla. Para escuchar el fragmento de audio de su lector de pantalla en acción, agregue un elemento `audio` después del elemento `p`. Incluye el atributo `controls`. Luego coloque un elemento `source` dentro de las etiquetas `audio` con el atributo `src` establecido en `https://s3.amazonaws.com/freecodecamp /screen-reader.mp3` y el atributo `type` establecido en `"audio/mpeg"`. **Note:** El clip del audio puede sonar rápido y quizás sea difícil de entender pero esta velocidad es normal para los lectores de pantalla. diff --git a/curriculum/challenges/espanol/02-javascript-algorithms-and-data-structures/basic-data-structures/iterate-through-the-keys-of-an-object-with-a-for...in-statement.md b/curriculum/challenges/espanol/02-javascript-algorithms-and-data-structures/basic-data-structures/iterate-through-the-keys-of-an-object-with-a-for...in-statement.md index d7fce651824..7d5d5ff9450 100644 --- a/curriculum/challenges/espanol/02-javascript-algorithms-and-data-structures/basic-data-structures/iterate-through-the-keys-of-an-object-with-a-for...in-statement.md +++ b/curriculum/challenges/espanol/02-javascript-algorithms-and-data-structures/basic-data-structures/iterate-through-the-keys-of-an-object-with-a-for...in-statement.md @@ -8,7 +8,7 @@ dashedName: iterate-through-the-keys-of-an-object-with-a-for---in-statement # --description-- -Sometimes you need to iterate through all the keys within an object. You can use a for...in loop to do this. The for...in loop looks like: +En ocasiones, necesitas iterar todas las claves de un objeto. Puedes usar un bucle for...in para hacerlo. Un bucle for...in se ve así: ```javascript const refrigerator = { @@ -21,15 +21,15 @@ for (const food in refrigerator) { } ``` -This code logs `milk 1` and `eggs 12`, with each key-value pair on its own line. +Este código saca por consola `milk 1` y `eggs 12`, cada par clave-valor en su propia línea. -We defined the variable `food` in the loop head and this variable was set to each of the object's keys on each iteration, resulting in each food's name being printed to the console. +Definimos una variable `food` en la declaración del bucle, en cada iteración el valor de esta variable toma el valor una de las claves del objeto. De esta manera cada nombre de comida se escribe en la consola. **NOTA:** Los objetos no mantienen un orden para las claves almacenadas como lo hacen los arreglos; por lo tanto, la posición de una clave en un objeto, o el orden relativo en el que aparece, es irrelevante cuando se hace referencia o se accede a esa clave. # --instructions-- -We've defined a function `countOnline` which accepts one argument, `allUsers`. Use a for...in statement inside this function to loop through the `allUsers` object and return the number of users whose `online` property is set to `true`. An example of an object which could be passed to `countOnline` is shown below. Each user will have an `online` property set to either `true` or `false`. +Hemos definido una función `countOnline` que acepta un argumento, `allUsers`. Usa una sentencia for...in dentro de esta función para recorrer el objeto `allUsers` y devolver el número de usuarios que tienen la propiedad `online` igual a `true`. Un ejemplo del tipo de objeto que podría ser pasado a `countOnline` se muestra a continuación. Cada usuario tendrá una propiedad `online` con su valor igual a `true` o `false`. ```js { diff --git a/curriculum/challenges/espanol/02-javascript-algorithms-and-data-structures/basic-javascript/accessing-nested-objects.md b/curriculum/challenges/espanol/02-javascript-algorithms-and-data-structures/basic-javascript/accessing-nested-objects.md index 5d36725b4b3..3865c7b5849 100644 --- a/curriculum/challenges/espanol/02-javascript-algorithms-and-data-structures/basic-javascript/accessing-nested-objects.md +++ b/curriculum/challenges/espanol/02-javascript-algorithms-and-data-structures/basic-javascript/accessing-nested-objects.md @@ -51,7 +51,7 @@ Tu código debe utilizar notación de puntos y de corchetes para acceder a `mySt assert(/=\s*myStorage\.car\.inside\[\s*("|')glove box\1\s*\]/g.test(code)); ``` -`gloveBoxContents` should still be declared with `const`. +`gloveBoxContents` debe ser declarado como `const`. ```js assert.match(code, /const\s+gloveBoxContents\s*=/) diff --git a/curriculum/challenges/espanol/02-javascript-algorithms-and-data-structures/basic-javascript/record-collection.md b/curriculum/challenges/espanol/02-javascript-algorithms-and-data-structures/basic-javascript/record-collection.md index 771bc42fe55..fab6e92667e 100644 --- a/curriculum/challenges/espanol/02-javascript-algorithms-and-data-structures/basic-javascript/record-collection.md +++ b/curriculum/challenges/espanol/02-javascript-algorithms-and-data-structures/basic-javascript/record-collection.md @@ -22,7 +22,7 @@ Completa la función utilizando las reglas siguientes para modificar el objeto p - Tu función debe devolver siempre el objeto `records` completo. - Si `value` es una cadena vacía, elimina la propiedad `prop` dada del álbum. - Si `prop` no es `tracks` y `value` no es una cadena vacía, asigna el `value` a la `prop` de ese álbum. -- If `prop` is `tracks` and `value` isn't an empty string, you need to update the album's `tracks` array. First, if the album does not have a `tracks` property, assign it an empty array. Then add the `value` as the last item in the album's `tracks` array. +- Si `prop` es `tracks` y `value` no es una cadena vacía, agrega `value` al final del array de `tracks` existentes del álbum. Primero, si el álbum no tiene una propiedad `tracks`, asigne un array vacío. Luego añade el `valor` como el último elemento en el array `de pistas` del álbum. **Nota:** Para las pruebas se utiliza una copia del objeto `recordCollection`. No debes modificar directamente el objeto `recordCollection`. diff --git a/curriculum/challenges/espanol/02-javascript-algorithms-and-data-structures/basic-javascript/testing-objects-for-properties.md b/curriculum/challenges/espanol/02-javascript-algorithms-and-data-structures/basic-javascript/testing-objects-for-properties.md index 4e9e5739669..2a4f2b494be 100644 --- a/curriculum/challenges/espanol/02-javascript-algorithms-and-data-structures/basic-javascript/testing-objects-for-properties.md +++ b/curriculum/challenges/espanol/02-javascript-algorithms-and-data-structures/basic-javascript/testing-objects-for-properties.md @@ -8,7 +8,7 @@ dashedName: testing-objects-for-properties # --description-- -To check if a property on a given object exists or not, you can use the `.hasOwnProperty()` method. `someObject.hasOwnProperty(someProperty)` returns `true` or `false` depending on if the property is found on the object or not. +Para verificar si una propiedad de un objeto dado existe o no, puedes utilizar el método `.hasOwnProperty()`. `someObject.hasOwnProperty(someProperty)` devuelve `true` o `false`, dependiendo si la propiedad es encontrada en el objeto o no. **Por ejemplo** @@ -21,11 +21,11 @@ checkForProperty({ top: 'hat', bottom: 'pants' }, 'top'); // true checkForProperty({ top: 'hat', bottom: 'pants' }, 'middle'); // false ``` -The first `checkForProperty` function call returns `true`, while the second returns `false`. +La primera llamada a la función `checkForProperty` devuelve `true`, mientras que la segunda llamada a la función devuelve `false`. # --instructions-- -Modify the function `checkObj` to test if the object passed to the function parameter `obj` contains the specific property passed to the function parameter `checkProp`. If the property passed to `checkProp` is found on `obj`, return that property's value. If not, return `Not Found`. +Modifica la función `checkObj` para probar si el objeto enviado al parámetro de función `obj` contiene la propiedad específica enviada al parámetro de función `checkProp`. Si la propiedad enviada a `checkProp` es encontrada en `obj`, devuelve el valor de esa propiedad. De lo contrario, devuelve `Not Found`. # --hints-- diff --git a/curriculum/challenges/espanol/03-front-end-development-libraries/front-end-development-libraries-projects/build-a-25-5-clock.md b/curriculum/challenges/espanol/03-front-end-development-libraries/front-end-development-libraries-projects/build-a-25-5-clock.md index 4fd531e79b8..fff200916dc 100644 --- a/curriculum/challenges/espanol/03-front-end-development-libraries/front-end-development-libraries-projects/build-a-25-5-clock.md +++ b/curriculum/challenges/espanol/03-front-end-development-libraries/front-end-development-libraries-projects/build-a-25-5-clock.md @@ -8,71 +8,73 @@ dashedName: build-a-25--5-clock # --description-- -**Objetivo:** Construye una aplicación que sea funcionalmente similar a esta: https://25--5-clock.freecodecamp.rocks. +**Note:** **React 18 has known incompatibilities with the tests for this project (see [issue](https://github.com/freeCodeCamp/freeCodeCamp/issues/45922))** -Completa las historias de usuario a continuación y obtén todas las pruebas para aprobar. Utiliza cualquier librería o API que necesites. Dale tu propio estilo. +**Objective:** Build an app that is functionally similar to this: https://25--5-clock.freecodecamp.rocks. -Puedes utilizar cualquier combinación de HTML, JavaScript, CSS, Bootstrap, SASS, React, Redux y jQuery para completar este proyecto. Debes usar un framework frontend (como React por ejemplo), ya que esta sección trata sobre el aprendizaje de frameworks frontend. No se recomienda utilizar tecnologías adicionales que no estén enlistadas, su uso corre bajo tu propio riesgo. Estamos buscando apoyar otros frameworks de frontend como Angular y Vue, pero actualmente no están soportados. Aceptaremos e intentaremos arreglar todos los informes de problemas que utilicen el stack de tecnologías sugeridas para este proyecto. ¡Feliz día programando! +Fulfill the below user stories and get all of the tests to pass. Use whichever libraries or APIs you need. Give it your own personal style. -**Historia de usuario #1:** Puedo ver un elemento con `id="break-label"` que contiene una cadena (por ejemplo: "Break Length"). +You can use any mix of HTML, JavaScript, CSS, Bootstrap, SASS, React, Redux, and jQuery to complete this project. You should use a frontend framework (like React for example) because this section is about learning frontend frameworks. Additional technologies not listed above are not recommended and using them is at your own risk. We are looking at supporting other frontend frameworks like Angular and Vue, but they are not currently supported. We will accept and try to fix all issue reports that use the suggested technology stack for this project. Happy coding! -**Historia de usuario #2:** Puedo ver un elemento con `id="session-label"` que contiene una cadena (p.ej "Session Length"). +**User Story #1:** I can see an element with `id="break-label"` that contains a string (e.g. "Break Length"). -**Historia de usuario #3:** Puedo ver dos elementos cliqueables con los siguientes IDs: `id="break-decrement"` y `id="session-decrement"`. +**User Story #2:** I can see an element with `id="session-label"` that contains a string (e.g. "Session Length"). -**Historia de usuario #4:** Puedo ver dos elemento cliqueables con los siguientes IDs: `id="break-increment"` y `id="session-increment"`. +**User Story #3:** I can see two clickable elements with corresponding IDs: `id="break-decrement"` and `id="session-decrement"`. -**Historia de usuario #5:** Puedo ver un elemento con el correspondiente `id="break-length"` que por defecto (al cargarse) muestra el valor 5. +**User Story #4:** I can see two clickable elements with corresponding IDs: `id="break-increment"` and `id="session-increment"`. -**Historia de usuario #6:** Puedo ver un elemento con el correspondiente `id="session-length"`, que por defecto muestra el valor 25. +**User Story #5:** I can see an element with a corresponding `id="break-length"`, which by default (on load) displays a value of 5. -**Historia de usuario #7:** Puedo ver un elemento con el correspondiente `id="timer-label"`, que contiene una cadena indicando si la sesión esta inicializada (p.ej. "Session"). +**User Story #6:** I can see an element with a corresponding `id="session-length"`, which by default displays a value of 25. -**Historia de usuario #8:** Puedo ver un elemento con el correspondiente `id="time-left"`. NOTA: En pausa o en ejecución, el valor en este campo debe mostrarse siempre en formato `mm:ss` (es decir: 25:00). +**User Story #7:** I can see an element with a corresponding `id="timer-label"`, that contains a string indicating a session is initialized (e.g. "Session"). -**User Story #9:** Puedo ver un elemento cliqueable con el correspondiente `id="start_stop"`. +**User Story #8:** I can see an element with corresponding `id="time-left"`. NOTE: Paused or running, the value in this field should always be displayed in `mm:ss` format (i.e. 25:00). -**User Story #10:** Puedo ver un elemento cliqueable con el correspondiente `id="reset"`. +**User Story #9:** I can see a clickable element with a corresponding `id="start_stop"`. -**Historia de usuario #11:** Cuando hago clic en el elemento con el id: `reset`, cualquier temporizador en ejecución debe detenerse. El valor en el `id="break-length"` debe regresar a `5`, el valor en el `id="session-length"` debe regresar a 25 y el elemento con `id="time-left"` debe reiniciarse a su estado predeterminado. +**User Story #10:** I can see a clickable element with a corresponding `id="reset"`. -**Historia de usuario #12:** Cuando hago clic en el elemento con id: `break-decrement`, el valor en `id="break-length"` se reduce en 1, y puedo ver el valor actualizado. +**User Story #11:** When I click the element with the id of `reset`, any running timer should be stopped, the value within `id="break-length"` should return to `5`, the value within `id="session-length"` should return to 25, and the element with `id="time-left"` should reset to its default state. -**Historia de usuario #13:** Cuando hago clic en el elemento con id: `break-increment`, el valor en `id="break-length"` se incrementa en 1 y puedo ver el valor actualizado. +**User Story #12:** When I click the element with the id of `break-decrement`, the value within `id="break-length"` decrements by a value of 1, and I can see the updated value. -**Historia de usuario #14:** Cuando hago clic en el elemento con id: `session-decrement`, el valor en `id="session-length"` se reduce en 1 y puedo ver el valor actualizado. +**User Story #13:** When I click the element with the id of `break-increment`, the value within `id="break-length"` increments by a value of 1, and I can see the updated value. -**Historia de usuario #15:** Cuando hago clic en el elemento con id: `session-increment`, el valor en `id="session-length"` se incrementa en 1 y puedo ver el valor actualizado. +**User Story #14:** When I click the element with the id of `session-decrement`, the value within `id="session-length"` decrements by a value of 1, and I can see the updated value. -**Historia de usuario #16:** No debo ser capaz de establecer una duración de la sesión o pausa <= 0. +**User Story #15:** When I click the element with the id of `session-increment`, the value within `id="session-length"` increments by a value of 1, and I can see the updated value. -**Historia de usuario #17:** No debo poder establecer una duración de la sesión o pausa > 60. +**User Story #16:** I should not be able to set a session or break length to <= 0. -**Historia de usuario #18:** Cuando hago clic por primera vez en el elemento con el correspondiente `id="start_stop"`, el temporizador debe comenzar a correr desde el valor mostrado actualmente en `id="session-length"`, incluso si el valor se incrementó o se redujo respecto al valor original 25. +**User Story #17:** I should not be able to set a session or break length to > 60. -**Historia de usuario #19:** Si el temporizador se está ejecutando, el elemento con el id: `time-left` debe mostrar el tiempo restante en formato `mm:ss` (reduciendo 1 y actualizando el valor mostrado cada 1000ms). +**User Story #18:** When I first click the element with `id="start_stop"`, the timer should begin running from the value currently displayed in `id="session-length"`, even if the value has been incremented or decremented from the original value of 25. -**Historia de usuario #20:** Si el temporizador se está ejecutando y hago clic en el elemento `id="start_stop"`, la cuenta atrás debe pausarse. +**User Story #19:** If the timer is running, the element with the id of `time-left` should display the remaining time in `mm:ss` format (decrementing by a value of 1 and updating the display every 1000ms). -**Historia de usuario #21:** Si el temporizador está pausado y hago clic en el elemento `id="start_stop"`, la cuenta atrás debe reanudarse desde el punto en el que fue pausada. +**User Story #20:** If the timer is running and I click the element with `id="start_stop"`, the countdown should pause. -**Historia de usuario #22:** Cuando la cuenta atrás de la sesión llega a cero (NOTA: el temporizador DEBE llegar a 00:00) y una nueva cuenta atrás comienza, el elemento cuyo id es `timer-label` debería mostrar una cadena en la que se indica que el descanso (break) ha comenzado. +**User Story #21:** If the timer is paused and I click the element with `id="start_stop"`, the countdown should resume running from the point at which it was paused. -**Historia de usuario #23:** Cuando la cuenta atrás de la sesión llega a cero (NOTA: el temporizador DEBE llegar a 00:00), una nueva cuenta atrás comienza para el periodo de descanso (break) y se inicia desde el valor mostrado actualmente por el elemento `id="break-length"`. +**User Story #22:** When a session countdown reaches zero (NOTE: timer MUST reach 00:00), and a new countdown begins, the element with the id of `timer-label` should display a string indicating a break has begun. -**Historia de usuario #24:** Cuando la cuenta atrás en el periodo de descanso (break) llega a cero (NOTA: el temporizador DEBE llegar a 00:00) y una nueva cuenta atrás debe comenzar, el elemento cuyo id es `timer-label` debe mostrar una cadena en la que se indica que la sesión ha comenzado. +**User Story #23:** When a session countdown reaches zero (NOTE: timer MUST reach 00:00), a new break countdown should begin, counting down from the value currently displayed in the `id="break-length"` element. -**Historia de usuario #25:** Cuando la cuenta atrás en el periodo de descanso (break) llega a cero (NOTA: el temporizador DEBE llegar a 00:00), una nueva cuenta atrás debe comenzar para la sesión, la cual se inicia desde el valor mostrado actualmente por el elemento `id="session-length"`. +**User Story #24:** When a break countdown reaches zero (NOTE: timer MUST reach 00:00), and a new countdown begins, the element with the id of `timer-label` should display a string indicating a session has begun. -**Historia de usuario #26:** Cuando una cuenta atrás llega a cero (NOTA: el temporizador DEBE llegar a 00:00), debe reproducirse un sonido que indica que el tiempo se ha agotado. Se debe utilizar una etiqueta HTML5 `audio` y tener un `id="beep"`. +**User Story #25:** When a break countdown reaches zero (NOTE: timer MUST reach 00:00), a new session countdown should begin, counting down from the value currently displayed in the `id="session-length"` element. -**Historia de usuario #27:** El elemento de audio `id="beep"` debe ser de 1 segundo o mayor. +**User Story #26:** When a countdown reaches zero (NOTE: timer MUST reach 00:00), a sound indicating that time is up should play. This should utilize an HTML5 `audio` tag and have a corresponding `id="beep"`. -**Historia de usuario #28:** El elemento de audio con id: `beep` dejará de reproducirse y se reiniciará al hacer clic en el elemento con id: `reset`. +**User Story #27:** The audio element with `id="beep"` must be 1 second or longer. -Puedes construir tu proyecto usando esta plantilla CodePen y haciendo clic en `Save` para crear tu propio entorno. O puedes utilizar este enlace CDN para ejecutar las pruebas en cualquier entorno que desees: `https://cdn.freecodecamp.org/testable-projects-fcc/v1/bundle.js` +**User Story #28:** The audio element with id of `beep` must stop playing and be rewound to the beginning when the element with the id of `reset` is clicked. -Una vez que hayas terminado, envía la URL de tu proyecto funcional con todas las pruebas pasadas. +You can build your project by using this CodePen template and clicking `Save` to create your own pen. Or you can use this CDN link to run the tests in any environment you like: `https://cdn.freecodecamp.org/testable-projects-fcc/v1/bundle.js` + +Once you're done, submit the URL to your working project with all its tests passing. # --solutions-- diff --git a/curriculum/challenges/espanol/03-front-end-development-libraries/front-end-development-libraries-projects/build-a-drum-machine.md b/curriculum/challenges/espanol/03-front-end-development-libraries/front-end-development-libraries-projects/build-a-drum-machine.md index 592b8c4df58..44d89428ab5 100644 --- a/curriculum/challenges/espanol/03-front-end-development-libraries/front-end-development-libraries-projects/build-a-drum-machine.md +++ b/curriculum/challenges/espanol/03-front-end-development-libraries/front-end-development-libraries-projects/build-a-drum-machine.md @@ -7,28 +7,29 @@ dashedName: build-a-drum-machine --- # --description-- +**Note:** **React 18 has known incompatibilities with the tests for this project (see [issue](https://github.com/freeCodeCamp/freeCodeCamp/issues/45922))** -**Objetivo:**Construye una aplicación que sea funcionalmente similar a esta: https://drum-machine.freecodecamp.rocks/. +**Objective:** Build an app that is functionally similar to this: https://drum-machine.freecodecamp.rocks/. -Completa las historias de usuario a continuación y obtén todas las pruebas para aprobar. Utiliza cualquier librería o API que necesites. Dale tu propio estilo. +Fulfill the below user stories and get all of the tests to pass. Use whichever libraries or APIs you need. Give it your own personal style. -Puedes utilizar cualquier combinación de HTML, JavaScript, CSS, Bootstrap, SASS, React, Redux y jQuery para completar este proyecto. Debe usar un framework frontend (como React por ejemplo), ya que esta sección trata sobre el aprendizaje de frameworks frontend. No se recomienda utilizar tecnologías adicionales que no estén enlistadas, su uso corre bajo tu propio riesgo. Estamos buscando apoyar otros frameworks de frontend como Angular y Vue, pero actualmente no están soportados. Aceptaremos e intentaremos arreglar todos los informes de problemas que utilicen el stack de tecnologías sugeridas para este proyecto. ¡Feliz día programando! +You can use any mix of HTML, JavaScript, CSS, Bootstrap, SASS, React, Redux, and jQuery to complete this project. You should use a frontend framework (like React for example) because this section is about learning frontend frameworks. Additional technologies not listed above are not recommended and using them is at your own risk. We are looking at supporting other frontend frameworks like Angular and Vue, but they are not currently supported. We will accept and try to fix all issue reports that use the suggested technology stack for this project. Happy coding! -**Historia de usuario #1:** Debe ser capaz de ver un contenedor externo con un correspondiente `id="drum-machine"` que contiene todos los demás elementos. +**User Story #1:** I should be able to see an outer container with a corresponding `id="drum-machine"` that contains all other elements. -**Historia de usuario #2:** Dentro de `#drum-machine` Puedo ver un elemento con un `id="display"` correspondiente. +**User Story #2:** Within `#drum-machine` I can see an element with a corresponding `id="display"`. -**Historia de usuario #3:** Dentro de `#drum-machine`Puedo ver 9 elementos de drum pad en los que se puede hacer clic, cada uno con un nombre de clase de `drum-pad`, un identificador único que describe el clip de audio que el pad de tambor será configurado para activar, y un texto interno que corresponde a una de las siguientes teclas del teclado: `Q`, `W`, `E`, `A`, `S`, `D`, `Z`, `X`, `C`. Los pads de la batería DEBEN estar en este orden. +**User Story #3:** Within `#drum-machine` I can see 9 clickable drum pad elements, each with a class name of `drum-pad`, a unique id that describes the audio clip the drum pad will be set up to trigger, and an inner text that corresponds to one of the following keys on the keyboard: `Q`, `W`, `E`, `A`, `S`, `D`, `Z`, `X`, `C`. The drum pads MUST be in this order. -**Historia de usuario #4:** Dentro de cada `.drum-pad`, debe haber un elemento HTML5 `audio` que tenga un atributo `src` apuntando a un clip de audio, un nombre de clase `clip`, y un id correspondiente al texto interno de su padre `.drum-pad` (e.g. `id="Q"`, `id="W"`, `id="E"` etc.). +**User Story #4:** Within each `.drum-pad`, there should be an HTML5 `audio` element which has a `src` attribute pointing to an audio clip, a class name of `clip`, and an id corresponding to the inner text of its parent `.drum-pad` (e.g. `id="Q"`, `id="W"`, `id="E"` etc.). -**Historia de usuario #5:** Cuando hago clic en `.drum-pad` elemento, el clip de audio contenido en su elemento hijo `audio` debe ser activado. +**User Story #5:** When I click on a `.drum-pad` element, the audio clip contained in its child `audio` element should be triggered. -**Historia de usuario #6:** Cuando presione la tecla de activación asociada con cada `.drum-pad`, el clip de audio contenido en su elemento hijo `audio` debe ser activado (p. ej. pulsando la tecla `Q` debería activar el tambor que contiene la cadena `Q`, pulsando la tecla `W` debería activar la tecla Tambor que contiene la cadena `W`, etc.). +**User Story #6:** When I press the trigger key associated with each `.drum-pad`, the audio clip contained in its child `audio` element should be triggered (e.g. pressing the `Q` key should trigger the drum pad which contains the string `Q`, pressing the `W` key should trigger the drum pad which contains the string `W`, etc.). -**Historia de usuario #7:** Cuando es un `.drum-pad` es activado, una cadena que describe el clip de audio asociado se muestra como el texto interior del elemento `#display` (cada cadena debe ser única). +**User Story #7:** When a `.drum-pad` is triggered, a string describing the associated audio clip is displayed as the inner text of the `#display` element (each string must be unique). -Aquí tienes algunas muestras de audio que puedes usar para tu batería electrónica: +Here are some audio samples you can use for your drum machine: - [Heater 1](https://s3.amazonaws.com/freecodecamp/drums/Heater-1.mp3) - [Heater 2](https://s3.amazonaws.com/freecodecamp/drums/Heater-2.mp3) @@ -40,9 +41,9 @@ Aquí tienes algunas muestras de audio que puedes usar para tu batería electró - [Kick](https://s3.amazonaws.com/freecodecamp/drums/RP4_KICK_1.mp3) - [Closed-HH](https://s3.amazonaws.com/freecodecamp/drums/Cev_H2.mp3) -Puedes crear tu proyecto usando esta plantilla de CodePen y dando clic en `Save` para crear la tuya. O puedes usar este enlace CDN para ejecutar las pruebas en el ambiente que más te guste: `https://cdn.freecodecamp.org/testable-projects-fcc/v1/bundle.js` +You can build your project by using this CodePen template and clicking `Save` to create your own pen. Or you can use this CDN link to run the tests in any environment you like: `https://cdn.freecodecamp.org/testable-projects-fcc/v1/bundle.js` -Una vez que hayas terminado, envía la URL a tu proyecto de trabajo con todas sus pruebas verificadas. +Once you're done, submit the URL to your working project with all its tests passing. # --solutions-- diff --git a/curriculum/challenges/espanol/03-front-end-development-libraries/front-end-development-libraries-projects/build-a-javascript-calculator.md b/curriculum/challenges/espanol/03-front-end-development-libraries/front-end-development-libraries-projects/build-a-javascript-calculator.md index 036c4cd75b1..3eea4a76657 100644 --- a/curriculum/challenges/espanol/03-front-end-development-libraries/front-end-development-libraries-projects/build-a-javascript-calculator.md +++ b/curriculum/challenges/espanol/03-front-end-development-libraries/front-end-development-libraries-projects/build-a-javascript-calculator.md @@ -7,53 +7,54 @@ dashedName: build-a-javascript-calculator --- # --description-- +**Note:** **React 18 has known incompatibilities with the tests for this project (see [issue](https://github.com/freeCodeCamp/freeCodeCamp/issues/45922))** -**Objetivo:** Construye una aplicación que sea funcionalmente similar a esta: https://javascript-calculator.freecodecamp.rocks/. +**Objective:** Build an app that is functionally similar to this: https://javascript-calculator.freecodecamp.rocks/. -Completa las historias de usuario a continuación y obtén todas las pruebas para aprobar. Utiliza cualquier librería o API que necesites. Dale tu propio estilo. +Fulfill the below user stories and get all of the tests to pass. Use whichever libraries or APIs you need. Give it your own personal style. -Puedes utilizar cualquier combinación de HTML, JavaScript, CSS, Bootstrap, SASS, React, Redux y jQuery para completar este proyecto. Debes usar un framework frontend (como React por ejemplo), ya que esta sección trata sobre el aprendizaje de frameworks frontend. No se recomienda utilizar tecnologías adicionales que no estén enlistadas, su utilización corre bajo tu propio riesgo. Estamos buscando apoyar otros frameworks de frontend como Angular y Vue, pero actualmente no están soportados. Aceptaremos e intentaremos arreglar todos los informes de problemas que utilicen el stack de tecnologías sugeridas para este proyecto. ¡Feliz día programando! +You can use any mix of HTML, JavaScript, CSS, Bootstrap, SASS, React, Redux, and jQuery to complete this project. You should use a frontend framework (like React for example) because this section is about learning frontend frameworks. Additional technologies not listed above are not recommended and using them is at your own risk. We are looking at supporting other frontend frameworks like Angular and Vue, but they are not currently supported. We will accept and try to fix all issue reports that use the suggested technology stack for this project. Happy coding! -**Historia de usuario #1:** Mi calculadora debe contener un elemento en el que se pueda hacer clic que contenga un `=` (signo igual) con un correspondiente `id="equals"`. +**User Story #1:** My calculator should contain a clickable element containing an `=` (equal sign) with a corresponding `id="equals"`. -**Historia de usuario #2:** Mi calculadora debe contener 10 elementos que puedan hacer clic, que contengan un número cada uno de 0-9, con los siguientes ID correspondientes: `id="zero"`, `id="one"`, `id="two"`, `id="three"`, `id="four"`, `id="five"`, `id="six"`, `id="seven"`, `id="eight"`, y `id="nine"`. +**User Story #2:** My calculator should contain 10 clickable elements containing one number each from 0-9, with the following corresponding IDs: `id="zero"`, `id="one"`, `id="two"`, `id="three"`, `id="four"`, `id="five"`, `id="six"`, `id="seven"`, `id="eight"`, and `id="nine"`. -**Historia de usuario #3:** Mi calculadora debe contener 4 elementos que se puedan hacer clic que contengan uno de los 4 operadores matemáticos primarios con los siguientes identificadores correspondientes: `id="add"` `id="subtract"`, `id="multiply"`, `id="divide"`. +**User Story #3:** My calculator should contain 4 clickable elements each containing one of the 4 primary mathematical operators with the following corresponding IDs: `id="add"`, `id="subtract"`, `id="multiply"`, `id="divide"`. -**Historia de usuario #4:** Mi calculadora debe contener un elemento que se pueda hacer clic que contenga un `.` (punto decimal) símbolo con el correspondiente `id="decimal"`. +**User Story #4:** My calculator should contain a clickable element containing a `.` (decimal point) symbol with a corresponding `id="decimal"`. -**Historia de usuario #5:** Mi calculadora debe contener un elemento que se pueda hacer clic con un `id="clear"`. +**User Story #5:** My calculator should contain a clickable element with an `id="clear"`. -**Historia de usuario #6:** Mi calculadora debe contener un elemento para mostrar valores con un correspondiente `id="display"`. +**User Story #6:** My calculator should contain an element to display values with a corresponding `id="display"`. -**Historia de usuario #7:** En cualquier momento, pulsando el botón `clear` elimina los valores de entrada y salida. Luego devuelve la calculadora a su estado inicial; debe mostrar 0 en el elemento con el id `display`. +**User Story #7:** At any time, pressing the `clear` button clears the input and output values, and returns the calculator to its initialized state; 0 should be shown in the element with the id of `display`. -**Historia de usuario #8:** Al introducir números, debo ser capaz de ver mi entrada en el elemento con el id `display`. +**User Story #8:** As I input numbers, I should be able to see my input in the element with the id of `display`. -**Historia de usuario #9:** En cualquier orden, debo poder añadir, restar, multiplicar y dividir una cadena de números de cualquier longitud. Además cuando presione `=`, el resultado correcto debe mostrarse en el elemento con el id de `display`. +**User Story #9:** In any order, I should be able to add, subtract, multiply and divide a chain of numbers of any length, and when I hit `=`, the correct result should be shown in the element with the id of `display`. -**Historia de usuario #10:** Al introducir números, mi calculadora no debe permitir que un número comience con varios ceros. +**User Story #10:** When inputting numbers, my calculator should not allow a number to begin with multiple zeros. -**Historia de usuario #11:** Cuando se hace clic en el elemento decimal, un `.` debe añadirse al valor mostrado actualmente; dos `.` en un número no debe ser aceptado. +**User Story #11:** When the decimal element is clicked, a `.` should append to the currently displayed value; two `.` in one number should not be accepted. -**Historia de usuario #12:** Debe ser capaz de realizar cualquier operación (`+`, `-`, `*`, `/`) en números que contienen puntos decimales. +**User Story #12:** I should be able to perform any operation (`+`, `-`, `*`, `/`) on numbers containing decimal points. -**Historia de usuario #13:** Si se introducen 2 o más operadores consecutivamente, la operación realizada debe ser el último operador introducido (excluyendo el signo negativo (`-`). Por ejemplo, si `5 + * 7 =` es introducido, el resultado debe ser `35` (p.e. `5 * 7`); si `5 * - 5 =` es introducido, el resultado debe ser `-25` (p.e `5 * (-5)`). +**User Story #13:** If 2 or more operators are entered consecutively, the operation performed should be the last operator entered (excluding the negative (`-`) sign). For example, if `5 + * 7 =` is entered, the result should be `35` (i.e. `5 * 7`); if `5 * - 5 =` is entered, the result should be `-25` (i.e. `5 * (-5)`). -**Historia de usuario #14:** Presionando un operador inmediatamente después de `=` debe comenzar un nuevo cálculo que opere sobre el resultado de la evaluación anterior. +**User Story #14:** Pressing an operator immediately following `=` should start a new calculation that operates on the result of the previous evaluation. -**Historia de usuario #15:** Mi calculadora debe tener varios decimales de precisión a la hora de redondear (tenga en cuenta que no hay un estándar exacto, pero debe ser capaz de manejar cálculos como `2 / 7` con una precisión razonable de al menos 4 decimales. +**User Story #15:** My calculator should have several decimal places of precision when it comes to rounding (note that there is no exact standard, but you should be able to handle calculations like `2 / 7` with reasonable precision to at least 4 decimal places). -**Nota sobre la lógica de la calculadora:** Debe tener en cuenta que hay dos escuelas principales de pensamiento sobre la lógica de entrada de las calculadoras: lógica de ejecución inmediata y lógica de la fórmula. Nuestro ejemplo utiliza lógica de la fórmula. Observa el orden de precedencia de la operación, la ejecución inmediata no lo hace. Ambas son aceptables, pero ten en cuenta que dependiendo de cuál elijas, tu calculadora puede producir resultados diferentes a los nuestros para ciertas ecuaciones (ver ejemplo a continuación). Mientras tus matemáticas puedan ser verificadas por otra calculadora de producción, por favor no consideres esto un error. +**Note On Calculator Logic:** It should be noted that there are two main schools of thought on calculator input logic: immediate execution logic and formula logic. Our example utilizes formula logic and observes order of operation precedence, immediate execution does not. Either is acceptable, but please note that depending on which you choose, your calculator may yield different results than ours for certain equations (see below example). As long as your math can be verified by another production calculator, please do not consider this a bug. **EXAMPLE:** `3 + 5 x 6 - 2 / 4 =` - **Lógica de ejecución inmediata:** `11.5` - **Fórmula/Expresión lógica:** `32.5` -Puedes construir tu proyecto utilizando esta plantilla CodePen y haciendo clic en `Save` para crear tu propio bolígrafo. O puedes utilizar este enlace CDN para ejecutar las pruebas en cualquier entorno que desees: `https://cdn.freecodecamp.org/testable-projects-fcc/v1/bundle.js` +You can build your project by using this CodePen template and clicking `Save` to create your own pen. Or you can use this CDN link to run the tests in any environment you like: `https://cdn.freecodecamp.org/testable-projects-fcc/v1/bundle.js` -Una vez que hayas terminado, envía la URL de tu proyecto funcional con todas las pruebas pasadas. +Once you're done, submit the URL to your working project with all its tests passing. # --solutions-- diff --git a/curriculum/challenges/espanol/03-front-end-development-libraries/front-end-development-libraries-projects/build-a-markdown-previewer.md b/curriculum/challenges/espanol/03-front-end-development-libraries/front-end-development-libraries-projects/build-a-markdown-previewer.md index d82b46795c5..a17278b3620 100644 --- a/curriculum/challenges/espanol/03-front-end-development-libraries/front-end-development-libraries-projects/build-a-markdown-previewer.md +++ b/curriculum/challenges/espanol/03-front-end-development-libraries/front-end-development-libraries-projects/build-a-markdown-previewer.md @@ -7,30 +7,31 @@ dashedName: build-a-markdown-previewer --- # --description-- +**Note:** **React 18 has known incompatibilities with the tests for this project (see [issue](https://github.com/freeCodeCamp/freeCodeCamp/issues/45922))** -**Objetivo:** Construye una aplicación que sea funcionalmente similar a esta: https://markdown-previewer.freecodecamp.rocks/. +**Objective:** Build an app that is functionally similar to this: https://markdown-previewer.freecodecamp.rocks/. -Completa las historias de usuario a continuación y obtén todas las pruebas para aprobar. Utiliza cualquier librería o API que necesites. Dale tu propio estilo. +Fulfill the below user stories and get all of the tests to pass. Use whichever libraries or APIs you need. Give it your own personal style. -Puedes utilizar cualquier combinación de HTML, JavaScript, CSS, Bootstrap, SASS, React, Redux y jQuery para completar este proyecto. Debes usar un framework frontend (como React por ejemplo), ya que esta sección trata sobre el aprendizaje de frameworks frontend. No se recomienda utilizar tecnologías adicionales que no estén enlistadas, su utilización corre bajo tu propio riesgo. Estamos buscando apoyar otros frameworks de frontend como Angular y Vue, pero actualmente no están soportados. Aceptaremos e intentaremos arreglar todos los informes de problemas que utilicen el stack de tecnologías sugeridas para este proyecto. ¡Feliz día programando! +You can use any mix of HTML, JavaScript, CSS, Bootstrap, SASS, React, Redux, and jQuery to complete this project. You should use a frontend framework (like React for example) because this section is about learning frontend frameworks. Additional technologies not listed above are not recommended and using them is at your own risk. We are looking at supporting other frontend frameworks like Angular and Vue, but they are not currently supported. We will accept and try to fix all issue reports that use the suggested technology stack for this project. Happy coding! -**Historia de usuario #1:** Debo ver un elemento `textarea` con el correspondiente `id="editor"`. +**User Story #1:** I can see a `textarea` element with a corresponding `id="editor"`. -**Historia de usuario #2:** Debo ver un elemento con el correspondiente `id="preview"`. +**User Story #2:** I can see an element with a corresponding `id="preview"`. -**Historia de usuario #3** Cuando introduzco texto dentro del elemento `#editor`, el elemento `#preview` se actualiza mientras escribo, para mostrar el contenido del textarea. +**User Story #3:** When I enter text into the `#editor` element, the `#preview` element is updated as I type to display the content of the textarea. -**Historia de usuario #4:** Cuando introduzco markdown tipo GitHub en el elemento `#editor`, el texto es renderizado como HTML en el elemento `#preview` mientras escribo (PISTA: No necesitas analizar markdown tú mismo: puedes importar la librería "Marked" ). +**User Story #4:** When I enter GitHub flavored markdown into the `#editor` element, the text is rendered as HTML in the `#preview` element as I type (HINT: You don't need to parse Markdown yourself - you can import the Marked library for this: ). -**Historia de usuario #5:** Cuando la primera vez que mi previsualizador de lenguaje de marcado se carga, el texto por defecto en el campo `#editor` debe contener un lenguaje de marcado válido que represente al menos uno de los siguientes elementos: un encabezado (tamaño H1), un subencabezado (tamaño H2), un enlace, código en línea, un bloque de código, un elemento de lista, una cita en bloque, una imagen y texto en negrita. +**User Story #5:** When my markdown previewer first loads, the default text in the `#editor` field should contain valid markdown that represents at least one of each of the following elements: a heading element (H1 size), a sub heading element (H2 size), a link, inline code, a code block, a list item, a blockquote, an image, and bolded text. -**Historia de usuario #6:** Cuando mi previsualizador de markdown se carga, el markdown predeterminado en el campo `#editor` debe ser renderizado como HTML en el elemento `#preview`. +**User Story #6:** When my markdown previewer first loads, the default markdown in the `#editor` field should be rendered as HTML in the `#preview` element. -**Bonus opcional (No necesitas hacer esto para pasar esta prueba):** Mi previsualizador de markdown interpreta los retornos de carro y las renderiza como elementos `br` (salto de línea). +**Optional Bonus (you do not need to make this test pass):** My markdown previewer interprets carriage returns and renders them as `br` (line break) elements. -Puedes crear tu proyecto usando esta plantilla, haciendo clic en `Save` para crear tu propio proyecto CodePen. O puedes utilizar este enlace CDN para ejecutar las pruebas en cualquier entorno que desees: `https://cdn.freecodecamp.org/testable-projects-fcc/v1/bundle.js` +You can build your project by using this CodePen template and clicking `Save` to create your own pen. Or you can use this CDN link to run the tests in any environment you like: `https://cdn.freecodecamp.org/testable-projects-fcc/v1/bundle.js` -Una vez que hayas terminado, envía la URL de tu proyecto funcional con todas las pruebas pasadas. +Once you're done, submit the URL to your working project with all its tests passing. # --solutions-- diff --git a/curriculum/challenges/espanol/03-front-end-development-libraries/front-end-development-libraries-projects/build-a-random-quote-machine.md b/curriculum/challenges/espanol/03-front-end-development-libraries/front-end-development-libraries-projects/build-a-random-quote-machine.md index f6ee0575de0..f00d755552a 100644 --- a/curriculum/challenges/espanol/03-front-end-development-libraries/front-end-development-libraries-projects/build-a-random-quote-machine.md +++ b/curriculum/challenges/espanol/03-front-end-development-libraries/front-end-development-libraries-projects/build-a-random-quote-machine.md @@ -7,40 +7,41 @@ dashedName: build-a-random-quote-machine --- # --description-- +**Note:** **React 18 has known incompatibilities with the tests for this project (see [issue](https://github.com/freeCodeCamp/freeCodeCamp/issues/45922))** -**Objetivo:** Construye una aplicación que sea funcionalmente similar a esta: https://random-quote-machine.freecodecamp.rocks/. +**Objective:** Build an app that is functionally similar to this: https://random-quote-machine.freecodecamp.rocks/. -Completa las historias de usuario a continuación y obtén todas las pruebas para aprobar. Utiliza cualquier librería o API que necesites. Dale tu propio estilo. +Fulfill the below user stories and get all of the tests to pass. Use whichever libraries or APIs you need. Give it your own personal style. -Puedes utilizar cualquier combinación de HTML, JavaScript, CSS, Bootstrap, SASS, React, Redux y jQuery para completar este proyecto. Debes usar un framework frontend (como React por ejemplo), ya que esta sección trata sobre el aprendizaje de frameworks frontend. No se recomienda utilizar tecnologías adicionales que no estén enlistadas, su utilización corre bajo tu propio riesgo. Estamos buscando apoyar otros frameworks de frontend como Angular y Vue, pero actualmente no están soportados. Aceptaremos e intentaremos arreglar todos los informes de problemas que utilicen el stack de tecnologías sugeridas para este proyecto. ¡Feliz día programando! +You can use any mix of HTML, JavaScript, CSS, Bootstrap, SASS, React, Redux, and jQuery to complete this project. You should use a frontend framework (like React for example) because this section is about learning frontend frameworks. Additional technologies not listed above are not recommended and using them is at your own risk. We are looking at supporting other frontend frameworks like Angular and Vue, but they are not currently supported. We will accept and try to fix all issue reports that use the suggested technology stack for this project. Happy coding! -**Historia de usuario #1:** Puedo ver un elemento contenedor con un archivo `id="quote-box"`. +**User Story #1:** I can see a wrapper element with a corresponding `id="quote-box"`. -**Historia de usuario #2:** Dentro de `#quote-box`, puedo ver un elemento con su correspondiente `id="text"`. +**User Story #2:** Within `#quote-box`, I can see an element with a corresponding `id="text"`. -**Historia de usuario #3:** Dentro de `#quote-box`, puedo ver un elemento con su correspondiente `id="author"`. +**User Story #3:** Within `#quote-box`, I can see an element with a corresponding `id="author"`. -**Historia de usuario #4:** Dentro de `#quote-box`, puedo ver un elemento en el que se puede hacer clic con su correspondiente `id="new-quote"`. +**User Story #4:** Within `#quote-box`, I can see a clickable element with a corresponding `id="new-quote"`. -**Historia de usuario #5:** Dentro de `#quote-box`, puedo ver un elemento clickeable `a` con su correspondiente `id="tweet-quote"`. +**User Story #5:** Within `#quote-box`, I can see a clickable `a` element with a corresponding `id="tweet-quote"`. -**Historia de usuario #6:** En la primer carga, mi máquina de frases muestra una frase aleatoria en el elemento con `id="text"`. +**User Story #6:** On first load, my quote machine displays a random quote in the element with `id="text"`. -**Historia de usuario #7:**En el primer cargado, mi máquina de frases muestra al autor de la frase aleatoria en el elemento con `id="author"`. +**User Story #7:** On first load, my quote machine displays the random quote's author in the element with `id="author"`. -**Historia de usuario #8:** Cuando se hace clic en el botón `#new-quote`, mi máquina de frases debe buscar una nueva frase y mostrarla en el elemento `#text`. +**User Story #8:** When the `#new-quote` button is clicked, my quote machine should fetch a new quote and display it in the `#text` element. -**Historia de usuario #9:** Mi máquina de frases debe buscar al autor de la nueva frase cuando se hace clic en el botón `#new-quote` y mostrarlo en el elemento `#author`. +**User Story #9:** My quote machine should fetch the new quote's author when the `#new-quote` button is clicked and display it in the `#author` element. -**Historia de usuario #10:** Puedo tuitear la frase actual haciendo clic en `#tweet-quote` del elemento `a`. Este elemento `a` debe incluir la ruta `"twitter.com/intent/tweet"` en su atributo `href` para tuitear la frase actual. +**User Story #10:** I can tweet the current quote by clicking on the `#tweet-quote` `a` element. This `a` element should include the `"twitter.com/intent/tweet"` path in its `href` attribute to tweet the current quote. -**Historia de usuario #11:** El elemento contenedor `#quote-box` debe estar centrado horizontalmente. Ejecuta las pruebas con el nivel de zoom del navegador al 100% y la página maximizada. +**User Story #11:** The `#quote-box` wrapper element should be horizontally centered. Please run tests with browser's zoom level at 100% and page maximized. -Puedes construir tu proyecto utilizando esta plantilla CodePen y haciendo clic en `Save` para crear tu propio proyecto CodePen. O puedes utilizar este enlace CDN para ejecutar las pruebas en cualquier entorno que desees: `https://cdn.freecodecamp.org/testable-projects-fcc/v1/bundle.js` +You can build your project by using this CodePen template and clicking `Save` to create your own pen. Or you can use this CDN link to run the tests in any environment you like: `https://cdn.freecodecamp.org/testable-projects-fcc/v1/bundle.js` -Una vez que hayas terminado, envía la URL de tu proyecto funcional con todas las pruebas pasadas. +Once you're done, submit the URL to your working project with all its tests passing. -**Nota:** Twitter no permite que se carguen enlaces en un iframe. Intenta usar el atributo `target="_blank"` o `target="_top"` en el elemento `#tweet-quote` si tu tweet no se carga. `target="_top"` reemplazará la pestaña actual, así que asegúrate de que tu trabajo esté guardado. +**Note:** Twitter does not allow links to be loaded in an iframe. Try using the `target="_blank"` or `target="_top"` attribute on the `#tweet-quote` element if your tweet won't load. `target="_top"` will replace the current tab so make sure your work is saved. # --solutions-- diff --git a/curriculum/challenges/german/03-front-end-development-libraries/front-end-development-libraries-projects/build-a-25-5-clock.md b/curriculum/challenges/german/03-front-end-development-libraries/front-end-development-libraries-projects/build-a-25-5-clock.md index 42d24f10f43..f8d18917260 100644 --- a/curriculum/challenges/german/03-front-end-development-libraries/front-end-development-libraries-projects/build-a-25-5-clock.md +++ b/curriculum/challenges/german/03-front-end-development-libraries/front-end-development-libraries-projects/build-a-25-5-clock.md @@ -8,71 +8,73 @@ dashedName: build-a-25--5-clock # --description-- -**Aufgabe:** Erstelle eine Anwendung, die eine ähnliche Funktionalität wie https://25--5-clock.freecodecamp.rocks aufweist. +**Note:** **React 18 has known incompatibilities with the tests for this project (see [issue](https://github.com/freeCodeCamp/freeCodeCamp/issues/45922))** -Erfülle die folgenden User Stories und bestehe alle Tests. Verwende Bibliotheken und APIs deiner Wahl. Gib dem Ganzen deinen persönlichen Stil. +**Objective:** Build an app that is functionally similar to this: https://25--5-clock.freecodecamp.rocks. -Du kannst jede Mischung aus HTML, JavaScript, CSS, Bootstrap, SASS, React, Redux und jQuery verwenden, um dieses Projekt abzuschließen. Du solltest ein Frontend-Framework (wie zum Beispiel React) verwenden, da es in diesem Abschnitt um das Lernen von Frontend Frameworks geht. Zusätzliche Technologien, die oben nicht aufgeführt sind, werden nicht empfohlen und die Verwendung erfolgt auf eigene Gefahr. Wir prüfen die Unterstützung anderer Frontend-Frameworks wie Angular und Vue, aber sie werden derzeit nicht unterstützt. Wir sind offen für Fehlermeldungen und kümmern uns um all jene, die die vorgeschlagenen Technologien für dieses Projekt verwenden. Viel Spaß beim Programmieren! +Fulfill the below user stories and get all of the tests to pass. Use whichever libraries or APIs you need. Give it your own personal style. -**User Story #1:** Ich kann ein Element mit `id="break-label"` sehen, das einen String enthält (z. B. "Pausenlänge"). +You can use any mix of HTML, JavaScript, CSS, Bootstrap, SASS, React, Redux, and jQuery to complete this project. You should use a frontend framework (like React for example) because this section is about learning frontend frameworks. Additional technologies not listed above are not recommended and using them is at your own risk. We are looking at supporting other frontend frameworks like Angular and Vue, but they are not currently supported. We will accept and try to fix all issue reports that use the suggested technology stack for this project. Happy coding! -**User Story #2:** Ich kann ein Element mit `id="session-label"` sehen, das einen String enthält (z. B. "Sitzungslänge"). +**User Story #1:** I can see an element with `id="break-label"` that contains a string (e.g. "Break Length"). -**User Story #3:** Ich kann zwei anklickbare Elemente mit entsprechenden IDs sehen: `id="break-decrement"` und `id="session-decrement"`. +**User Story #2:** I can see an element with `id="session-label"` that contains a string (e.g. "Session Length"). -**User Story #4:** Ich sehe zwei anklickbare Elemente mit entsprechenden IDs: `id="break-increment"` und `id="session-increment"`. +**User Story #3:** I can see two clickable elements with corresponding IDs: `id="break-decrement"` and `id="session-decrement"`. -**User Story #5:** Ich kann ein Element mit einer entsprechenden `id="break-length"` sehen, das standardmäßig (beim Laden) einen Wert von 5 anzeigt. +**User Story #4:** I can see two clickable elements with corresponding IDs: `id="break-increment"` and `id="session-increment"`. -**User Story #6:** Ich kann ein Element mit einer entsprechenden `id="session-length"` sehen, das standardmäßig einen Wert von 25 anzeigt. +**User Story #5:** I can see an element with a corresponding `id="break-length"`, which by default (on load) displays a value of 5. -**User Story #7:** Ich kann ein Element mit einem entsprechenden `id="timer-label"` sehen, das einen String enthält, der anzeigt, dass eine Sitzung begonnen wurde (z. B. "Sitzung"). +**User Story #6:** I can see an element with a corresponding `id="session-length"`, which by default displays a value of 25. -**User Story #8:** Ich kann ein Element mit dem entsprechenden `id="time-left"` sehen. HINWEIS: Ob angehalten oder ausgeführt, der Wert in diesem Feld sollte immer im Format `mm:ss` angezeigt werden (z. B. 25:00). +**User Story #7:** I can see an element with a corresponding `id="timer-label"`, that contains a string indicating a session is initialized (e.g. "Session"). -**User Story #9:** Ich kann ein anklickbares Element mit einem entsprechenden `id="start_stop"` sehen. +**User Story #8:** I can see an element with corresponding `id="time-left"`. NOTE: Paused or running, the value in this field should always be displayed in `mm:ss` format (i.e. 25:00). -**User Story Nr. 10:** Ich sehe ein anklickbares Element mit einem entsprechenden `id="reset"`. +**User Story #9:** I can see a clickable element with a corresponding `id="start_stop"`. -**User Story #11:** Wenn ich auf das Element mit der ID `reset` klicke, sollte jeder laufende Timer gestoppt werden, der Wert innerhalb von ` id="break-length"` sollte auf `5` zurück gestellt werden, der Wert in `id="session-length"` sollte auf 25 zurück gestellt werden und das Element mit < code>id="time-left" sollte auf den Standardwert zurückgesetzt werden. +**User Story #10:** I can see a clickable element with a corresponding `id="reset"`. -**User Story #12:** Wenn ich auf das Element mit der ID `break-decrement` klicke, wird der Wert innerhalb von `id="break- length"` um einen Wert von 1 verringert und ich kann den aktualisierten Wert sehen. +**User Story #11:** When I click the element with the id of `reset`, any running timer should be stopped, the value within `id="break-length"` should return to `5`, the value within `id="session-length"` should return to 25, and the element with `id="time-left"` should reset to its default state. -**User Story #13:** Wenn ich auf das Element mit der ID `break-increment` klicke, wird der Wert innerhalb von `id="break- length"` um den Wert 1 erhöht, und ich kann den aktualisierten Wert sehen. +**User Story #12:** When I click the element with the id of `break-decrement`, the value within `id="break-length"` decrements by a value of 1, and I can see the updated value. -**User Story #14:** Wenn ich auf das Element mit der ID von `session-decrement` klicke, wird der Wert in `id="session- length"` um einen Wert von 1 verringert, und ich kann den aktualisierten Wert sehen. +**User Story #13:** When I click the element with the id of `break-increment`, the value within `id="break-length"` increments by a value of 1, and I can see the updated value. -**User Story #15:** Wenn ich auf das Element mit der ID von `session-increment` klicke, wird der Wert in `id="session- length"` um den Wert 1 erhöht, und ich kann den aktualisierten Wert sehen. +**User Story #14:** When I click the element with the id of `session-decrement`, the value within `id="session-length"` decrements by a value of 1, and I can see the updated value. -**User Story #16:** Ich sollte nicht in der Lage sein, eine Sitzungs- oder Pausenlänge auf <= 0 zu setzen. +**User Story #15:** When I click the element with the id of `session-increment`, the value within `id="session-length"` increments by a value of 1, and I can see the updated value. -**User Story #17:** Ich sollte nicht in der Lage sein, eine Sitzungs- oder Pausenlänge auf > 60 zu setzen. +**User Story #16:** I should not be able to set a session or break length to <= 0. -**User Story #18:** Wenn ich zum ersten Mal auf das Element mit `id="start_stop"` klicke, sollte der Timer mit dem aktuell angezeigten Wert beginnen `id="session-length"`, auch wenn der Wert vom ursprünglichen Wert 25 erhöht oder verringert wurde. +**User Story #17:** I should not be able to set a session or break length to > 60. -**User Story #19:** Wenn der Timer läuft, sollte das Element mit der ID `time-left` die verbleibende Zeit im `mm:ss`-Format anzeigen ( Verminderung um einen Wert von 1 und Aktualisierung der Anzeige alle 1000ms). +**User Story #18:** When I first click the element with `id="start_stop"`, the timer should begin running from the value currently displayed in `id="session-length"`, even if the value has been incremented or decremented from the original value of 25. -**User Story #20:** Wenn der Timer läuft und ich auf das Element mit `id="start_stop"` klicke, sollte der Countdown pausieren. +**User Story #19:** If the timer is running, the element with the id of `time-left` should display the remaining time in `mm:ss` format (decrementing by a value of 1 and updating the display every 1000ms). -**User Story #21:** Wenn der Timer pausiert ist und ich auf das Element mit `id="start_stop"` klicke, sollte der Countdown ab dem Punkt weiterlaufen, an dem es pausiert wurde. +**User Story #20:** If the timer is running and I click the element with `id="start_stop"`, the countdown should pause. -**User Story #22:** Wenn ein Sitzungs-Countdown Null erreicht (HINWEIS: Der Timer MUSS 00:00 erreichen) und ein neuer Countdown beginnt, sollte das Element mit der ID `timer-label` einen String anzeigen, der angibt, dass eine Pause begonnen hat. +**User Story #21:** If the timer is paused and I click the element with `id="start_stop"`, the countdown should resume running from the point at which it was paused. -**User Story #23:** Wenn ein Sitzungs-Countdown Null erreicht (HINWEIS: Der Timer MUSS 00:00 erreichen), sollte ein neuer Pausen-Countdown beginnen, der von dem `id="break-length"`-Element angezeigten Wert herunterzählt. +**User Story #22:** When a session countdown reaches zero (NOTE: timer MUST reach 00:00), and a new countdown begins, the element with the id of `timer-label` should display a string indicating a break has begun. -**User Story #24:** Wenn ein Pausen-Countdown Null erreicht (HINWEIS: Der Timer MUSS 00:00 erreichen) und ein neuer Countdown beginnt, sollte das Element mit der ID `timer-label` einen String anzeigen, der anzeigt, dass eine Sitzung begonnen hat. +**User Story #23:** When a session countdown reaches zero (NOTE: timer MUST reach 00:00), a new break countdown should begin, counting down from the value currently displayed in the `id="break-length"` element. -**User Story #25:** Wenn ein Pausen-Countdown Null erreicht (HINWEIS: Der Timer MUSS 00:00 erreichen), sollte ein neuer Sitzungs-Countdown beginnen, der von dem aktuell angezeigten Wert im `id="session-length"`-Element herunterzählt. +**User Story #24:** When a break countdown reaches zero (NOTE: timer MUST reach 00:00), and a new countdown begins, the element with the id of `timer-label` should display a string indicating a session has begun. -**User Story #26:** Wenn ein Countdown Null erreicht (HINWEIS: Der Timer MUSS 00:00 erreichen), sollte ein Ton abgespielt werden, dass die Zeit abgelaufen ist. Dieser sollte ein HTML5-`audio`-Tag verwenden und einen entsprechenden `id="beep"` haben. +**User Story #25:** When a break countdown reaches zero (NOTE: timer MUST reach 00:00), a new session countdown should begin, counting down from the value currently displayed in the `id="session-length"` element. -**User Story #27:** Das Audioelement mit `id="beep"` sollte 1 Sekunde oder länger sein. +**User Story #26:** When a countdown reaches zero (NOTE: timer MUST reach 00:00), a sound indicating that time is up should play. This should utilize an HTML5 `audio` tag and have a corresponding `id="beep"`. -**User Story #28:** Das Audioelement mit der ID `beep` sollte aufhören zu ertönen und zum Anfang zurückgespult werden, wenn das Element mit der ID `reset` angeklickt wird. +**User Story #27:** The audio element with `id="beep"` must be 1 second or longer. -Du kannst dein Projekt erstellen, indem du diese CodePen Vorlage verwendest und `Save` klickst, um deinen eigenen Pen zu erstellen. Oder du kannst diesen CDN-Link verwenden, um die Tests in jeder beliebigen Umgebung auszuführen: `https://cdn.freecodecamp.org/testable-projects-fcc/v1/bundle.js` +**User Story #28:** The audio element with id of `beep` must stop playing and be rewound to the beginning when the element with the id of `reset` is clicked. -Sobald du fertig bist, übermittle die URL zu deinem Arbeitsprojekt, wenn alle Tests bestanden sind. +You can build your project by using this CodePen template and clicking `Save` to create your own pen. Or you can use this CDN link to run the tests in any environment you like: `https://cdn.freecodecamp.org/testable-projects-fcc/v1/bundle.js` + +Once you're done, submit the URL to your working project with all its tests passing. # --solutions-- diff --git a/curriculum/challenges/german/03-front-end-development-libraries/front-end-development-libraries-projects/build-a-drum-machine.md b/curriculum/challenges/german/03-front-end-development-libraries/front-end-development-libraries-projects/build-a-drum-machine.md index 464472988ce..a43412c8376 100644 --- a/curriculum/challenges/german/03-front-end-development-libraries/front-end-development-libraries-projects/build-a-drum-machine.md +++ b/curriculum/challenges/german/03-front-end-development-libraries/front-end-development-libraries-projects/build-a-drum-machine.md @@ -7,28 +7,29 @@ dashedName: build-a-drum-machine --- # --description-- +**Note:** **React 18 has known incompatibilities with the tests for this project (see [issue](https://github.com/freeCodeCamp/freeCodeCamp/issues/45922))** -**Aufgabe:** Erstelle eine Anwendung, die eine ähnliche Funktionalität wie https://drum-machine.freecodecamp.rocks/ aufweist. +**Objective:** Build an app that is functionally similar to this: https://drum-machine.freecodecamp.rocks/. -Erfülle die folgenden User Stories und bestehe alle Tests. Verwende Bibliotheken und APIs deiner Wahl. Gib dem Ganzen deinen persönlichen Stil. +Fulfill the below user stories and get all of the tests to pass. Use whichever libraries or APIs you need. Give it your own personal style. -Du kannst eine beliebige Mischung aus HTML, JavaScript, CSS, Bootstrap, SASS, React, Redux und jQuery verwenden, um dieses Projekt fertigzustellen. Du solltest ein Frontend-Framework (wie zum Beispiel React) verwenden, da es in diesem Abschnitt um das Lernen von Frontend-Frameworks geht. Zusätzliche Technologien, die oben nicht aufgeführt sind, werden nicht empfohlen und ihre Verwendung erfolgt auf eigene Gefahr. Wir prüfen die Unterstützung anderer Frontend-Frameworks wie Angular und Vue, aber sie werden derzeit nicht unterstützt. Wir sind offen für Fehlermeldungen und kümmern uns um all jene, die die vorgeschlagenen Technologien für dieses Projekt verwenden. Viel Spaß beim Programmieren! +You can use any mix of HTML, JavaScript, CSS, Bootstrap, SASS, React, Redux, and jQuery to complete this project. You should use a frontend framework (like React for example) because this section is about learning frontend frameworks. Additional technologies not listed above are not recommended and using them is at your own risk. We are looking at supporting other frontend frameworks like Angular and Vue, but they are not currently supported. We will accept and try to fix all issue reports that use the suggested technology stack for this project. Happy coding! -**User Story #1:** Ich sollte einen äußeren Container mit einer zugehörigen `id="drum-machine"` sehen, der alle anderen Elemente enthält. +**User Story #1:** I should be able to see an outer container with a corresponding `id="drum-machine"` that contains all other elements. -**User Story #2:** Innerhalb `#drum-machine` kann ich ein Element mit der entsprechenden `id="display"` sehen. +**User Story #2:** Within `#drum-machine` I can see an element with a corresponding `id="display"`. -**User Story #3:** Innerhalb von `#drum-machine` sehe ich 9 klickbare Drum-Pad-Elemente, jedes mit einem Klassennamen `drum-pad`, einer eindeutigen ID, die den Audioclip beschreibt, den das Drum-Pad auslösen soll, und einem inneren Text, der einer der folgenden Tasten auf der Tastatur entspricht: `Q`, `W`, `E`, `A`, `S`, `D`, `Z`, `X`, `C`. Die Drum Pads MÜSSEN in dieser Reihenfolge angeordnet sein. +**User Story #3:** Within `#drum-machine` I can see 9 clickable drum pad elements, each with a class name of `drum-pad`, a unique id that describes the audio clip the drum pad will be set up to trigger, and an inner text that corresponds to one of the following keys on the keyboard: `Q`, `W`, `E`, `A`, `S`, `D`, `Z`, `X`, `C`. The drum pads MUST be in this order. -**User Story #4:** Innerhalb von jedem `.drum-pad`, sollte es ein HTML5 `audio`-Element geben, das ein `src`-Attribute hat, das auf einen Audio Clip hinweist, mit dem Klassenname `clip`, und einer ID, die dem inneren Text seines übergeordneten Elements `.drum-pad` entspricht (e.g. `id="Q"`, `id="W"`, `id="E"` etc.). +**User Story #4:** Within each `.drum-pad`, there should be an HTML5 `audio` element which has a `src` attribute pointing to an audio clip, a class name of `clip`, and an id corresponding to the inner text of its parent `.drum-pad` (e.g. `id="Q"`, `id="W"`, `id="E"` etc.). -**User Story#5:** Wenn ich auf ein `.drum-pad`-Element klicke, sollte der Audioclip, der in seinem untergeordneten `audio`-Element enthalten ist, ausgelöst werden. +**User Story #5:** When I click on a `.drum-pad` element, the audio clip contained in its child `audio` element should be triggered. -**User Story #6:** Wenn ich die Trigger-Taste drücke, die mit jedem `.drum-pad` verbunden ist, sollte der Audio-Clip, der in seinem untergeordneten `audio`-Element enthalten ist, ausgelöst werden (z.B. sollte das Drücken der `Q`-Taste das Drum-Pad auslösen, das den String `Q` enthält, das Drücken der `W`-Taste sollte das Drum-Pad auslösen, das den String `W` enthält, usw.). +**User Story #6:** When I press the trigger key associated with each `.drum-pad`, the audio clip contained in its child `audio` element should be triggered (e.g. pressing the `Q` key should trigger the drum pad which contains the string `Q`, pressing the `W` key should trigger the drum pad which contains the string `W`, etc.). -**User Story #7:** Wenn ein `.drum-pad` ausgelöst wird, wird ein String, der den zugehörigen Audioclip beschreibt, als innerer Text des `#display`-Elements angezeigt (jede Zeichenfolge muss eindeutig sein). +**User Story #7:** When a `.drum-pad` is triggered, a string describing the associated audio clip is displayed as the inner text of the `#display` element (each string must be unique). -Hier sind einige Beispiele, die du für deine Schlagzeug-Maschine verwenden kannst: +Here are some audio samples you can use for your drum machine: - [Heater 1](https://s3.amazonaws.com/freecodecamp/drums/Heater-1.mp3) - [Heater 2](https://s3.amazonaws.com/freecodecamp/drums/Heater-2.mp3) @@ -40,9 +41,9 @@ Hier sind einige Beispiele, die du für deine Schlagzeug-Maschine verwenden kann - [Kick](https://s3.amazonaws.com/freecodecamp/drums/RP4_KICK_1.mp3) - [Geschlossene Hi-Hat](https://s3.amazonaws.com/freecodecamp/drums/Cev_H2.mp3) -Du kannst dein Projekt erstellen, indem du diese CodePen-Vorlage verwendest und auf `Save` klickst, um deinen eigenen Pen zu erstellen. Oder du kannst diesen CDN-Link verwenden, um die Tests in jeder beliebigen Umgebung auszuführen: `https://cdn.freecodecamp.org/testable-projects-fcc/v1/bundle.js` +You can build your project by using this CodePen template and clicking `Save` to create your own pen. Or you can use this CDN link to run the tests in any environment you like: `https://cdn.freecodecamp.org/testable-projects-fcc/v1/bundle.js` -Sobald du fertig bist, übermittle die URL an dein Arbeitsprojekt, wenn alle Tests bestanden sind. +Once you're done, submit the URL to your working project with all its tests passing. # --solutions-- diff --git a/curriculum/challenges/german/03-front-end-development-libraries/front-end-development-libraries-projects/build-a-javascript-calculator.md b/curriculum/challenges/german/03-front-end-development-libraries/front-end-development-libraries-projects/build-a-javascript-calculator.md index 7bdff22326f..d47111234e5 100644 --- a/curriculum/challenges/german/03-front-end-development-libraries/front-end-development-libraries-projects/build-a-javascript-calculator.md +++ b/curriculum/challenges/german/03-front-end-development-libraries/front-end-development-libraries-projects/build-a-javascript-calculator.md @@ -7,53 +7,54 @@ dashedName: build-a-javascript-calculator --- # --description-- +**Note:** **React 18 has known incompatibilities with the tests for this project (see [issue](https://github.com/freeCodeCamp/freeCodeCamp/issues/45922))** -**Aufgabe:** Erstelle eine Anwendung, die eine ähnliche Funktionalität wie https://javascript-calculator.freecodecamp.rocks/ aufweist. +**Objective:** Build an app that is functionally similar to this: https://javascript-calculator.freecodecamp.rocks/. -Erfülle die folgenden User Stories und bestehe alle Tests. Verwende Bibliotheken und APIs deiner Wahl. Gib dem Ganzen deinen persönlichen Stil. +Fulfill the below user stories and get all of the tests to pass. Use whichever libraries or APIs you need. Give it your own personal style. -Du kannst jede Mischung aus HTML, JavaScript, CSS, Bootstrap, SASS, React, Redux und jQuery verwenden, um dieses Projekt abzuschließen. Du solltest ein Frontend-Framework (wie zum Beispiel React) verwenden, da es in diesem Abschnitt um das Lernen von Frontend Frameworks geht. Zusätzliche Technologien, die oben nicht aufgeführt sind, werden nicht empfohlen und die Verwendung erfolgt auf eigene Gefahr. Wir prüfen die Unterstützung anderer Frontend-Frameworks wie Angular und Vue, aber sie werden derzeit nicht unterstützt. Wir sind offen für Fehlermeldungen und kümmern uns um all jene, die die vorgeschlagenen Technologien für dieses Projekt verwenden. Viel Spaß beim Programmieren! +You can use any mix of HTML, JavaScript, CSS, Bootstrap, SASS, React, Redux, and jQuery to complete this project. You should use a frontend framework (like React for example) because this section is about learning frontend frameworks. Additional technologies not listed above are not recommended and using them is at your own risk. We are looking at supporting other frontend frameworks like Angular and Vue, but they are not currently supported. We will accept and try to fix all issue reports that use the suggested technology stack for this project. Happy coding! -**User Story #1:** Mein Rechner sollte ein anklickbares Element enthalten, das ein `=` (Gleichheitszeichen) mit einem entsprechenden `id="equals"` enthält. +**User Story #1:** My calculator should contain a clickable element containing an `=` (equal sign) with a corresponding `id="equals"`. -**User Story #2:** Mein Rechner sollte 10 anklickbare Elemente enthalten, die jeweils eine Zahl von 0-9 enthalten, mit den folgenden IDs: `id="zero"`, `id="one"`, `id="two"`, `id="three"`, `id="four"`, `id="five"`, `id="six"`, `id="seven"`, `id="eight"`, und `id="nine"`. +**User Story #2:** My calculator should contain 10 clickable elements containing one number each from 0-9, with the following corresponding IDs: `id="zero"`, `id="one"`, `id="two"`, `id="three"`, `id="four"`, `id="five"`, `id="six"`, `id="seven"`, `id="eight"`, and `id="nine"`. -**User Story #3:** Mein Rechner sollte 4 anklickbare Elemente enthalten, die jeweils einen der 4 primären mathematischen Operatoren mit den folgenden IDs enthalten: `id="add"`, `id="subtract"`, `id="multiply"`, `id="divide"`. +**User Story #3:** My calculator should contain 4 clickable elements each containing one of the 4 primary mathematical operators with the following corresponding IDs: `id="add"`, `id="subtract"`, `id="multiply"`, `id="divide"`. -**User Story #4:** Mein Rechner sollte ein anklickbares Element enthalten, das ein `.` (Dezimalpunkt) Symbol mit einem entsprechenden `id="decimal"` enthält. +**User Story #4:** My calculator should contain a clickable element containing a `.` (decimal point) symbol with a corresponding `id="decimal"`. -**User Story #5:** Mein Rechner sollte ein anklickbares Element mit einer `id="clear"` enthalten. +**User Story #5:** My calculator should contain a clickable element with an `id="clear"`. -**User Story #6:** Mein Rechner sollte ein Element zur Anzeige von Werten mit einer entsprechenden `id="display"` enthalten. +**User Story #6:** My calculator should contain an element to display values with a corresponding `id="display"`. -**User Story #7:** Durch Drücken des `clear`-Buttons können jederzeit die Eingabe- und Ausgabewerte gelöscht werden und der Rechner wird in den Ausgangszustand zurückgesetzt; im Element mit der ID `display` sollte 0 angezeigt werden. +**User Story #7:** At any time, pressing the `clear` button clears the input and output values, and returns the calculator to its initialized state; 0 should be shown in the element with the id of `display`. -**User Story #8:** Wenn ich Zahlen eingebe, sollte ich in der Lage sein, meine Eingabe in dem Element mit der ID `display` zu sehen. +**User Story #8:** As I input numbers, I should be able to see my input in the element with the id of `display`. -**User Story #9:** Ich sollte in der Lage sein, eine Zahlenkette beliebiger Länge in beliebiger Reihenfolge zu addieren, subtrahieren, multiplizieren und dividieren, und wenn ich auf `=` klicke, sollte das korrekte Ergebnis in dem Element mit der ID `display` angezeigt werden. +**User Story #9:** In any order, I should be able to add, subtract, multiply and divide a chain of numbers of any length, and when I hit `=`, the correct result should be shown in the element with the id of `display`. -**User Story #10:** Bei der Eingabe von Zahlen sollte mein Rechner nicht zulassen, dass eine Zahl mit mehreren Nullen beginnt. +**User Story #10:** When inputting numbers, my calculator should not allow a number to begin with multiple zeros. -**User Story #11:** Wenn das Dezimalelement angeklickt wird, sollte ein `.` an den aktuell angezeigten Wert angehängt werden; zwei `.` in einer Zahl sollten nicht akzeptiert werden. +**User Story #11:** When the decimal element is clicked, a `.` should append to the currently displayed value; two `.` in one number should not be accepted. -**User Story #12:** Ich sollte in der Lage sein, jede beliebige Operation (`+`, `-`, `*`, `/`) mit Zahlen durchzuführen, die Dezimalstellen enthalten. +**User Story #12:** I should be able to perform any operation (`+`, `-`, `*`, `/`) on numbers containing decimal points. -**User Story #13:** Wenn 2 oder mehr Operatoren nacheinander eingegeben werden, wird die Operation mit dem zuletzt eingegebenen Operator ausgeführt (das Negative ausgeschlossen (`-`) Zeichen). Wird zum Beispiel `5 + * 7 =` eingegeben, sollte das Ergebnis `35` (i.e. `5 * 7`) sein; wird `5 * - 5 =` eingegeben, sollte das Ergebnis `-25` sein (i.e. <`5 * (-5)`). +**User Story #13:** If 2 or more operators are entered consecutively, the operation performed should be the last operator entered (excluding the negative (`-`) sign). For example, if `5 + * 7 =` is entered, the result should be `35` (i.e. `5 * 7`); if `5 * - 5 =` is entered, the result should be `-25` (i.e. `5 * (-5)`). -**User Story #14:** Wenn du einen Operator unmittelbar nach `=` drückst, wird eine neue Berechnung gestartet, die auf dem Ergebnis der vorherigen Auswertung basiert. +**User Story #14:** Pressing an operator immediately following `=` should start a new calculation that operates on the result of the previous evaluation. -**User Story #15:** Mein Rechner sollte mehrere Dezimalstellen genau sein, wenn es ums Runden geht (Beachte, dass es keinen exakten Standard gibt, aber du solltest in der Lage sein, Berechnungen wie `2 / 7` mit angemessener Genauigkeit auf mindestens 4 Dezimalstellen durchzuführen). +**User Story #15:** My calculator should have several decimal places of precision when it comes to rounding (note that there is no exact standard, but you should be able to handle calculations like `2 / 7` with reasonable precision to at least 4 decimal places). -**Anmerkung zur Logik des Rechners:** Es ist anzumerken, dass es zwei wesentliche Denkansätze zur Logik der Rechnereingabe gibt: immediate execution logic und formula logic. Unser Beispiel verwendet Formellogik und beachtet die Rangfolge der Operationen, die unmittelbare Ausführung jedoch nicht. Beides ist möglich, aber beachte bitte, dass dein Rechner je nach Wahl für bestimmte Gleichungen andere Ergebnisse liefern kann als unser Rechner (siehe Beispiel unten). Solange deine Berechnungen mit einem anderen Produktionsrechner überprüft werden können, betrachte dies bitte nicht als Fehler. +**Note On Calculator Logic:** It should be noted that there are two main schools of thought on calculator input logic: immediate execution logic and formula logic. Our example utilizes formula logic and observes order of operation precedence, immediate execution does not. Either is acceptable, but please note that depending on which you choose, your calculator may yield different results than ours for certain equations (see below example). As long as your math can be verified by another production calculator, please do not consider this a bug. -**BEISPIEL:** `3 + 5 x 6 - 2 / 4 =` +**EXAMPLE:** `3 + 5 x 6 - 2 / 4 =` - **Unmittelbare Ausführungslogik:** `11.5` - **Formel-/Ausdrucklogik:** `32.5` -Du kannst dein Projekt aufbauen, indem du diese CodePen-Vorlage verwendest und auf `Save` klickst, um deinen eigenen Pen zu erstellen. Oder du kannst diesen CDN-Link verwenden, um die Tests in jeder beliebigen Umgebung auszuführen: `https://cdn.freecodecamp.org/testable-projects-fcc/v1/bundle.js` +You can build your project by using this CodePen template and clicking `Save` to create your own pen. Or you can use this CDN link to run the tests in any environment you like: `https://cdn.freecodecamp.org/testable-projects-fcc/v1/bundle.js` -Sobald du fertig bist, übermittle die URL zu deinem Arbeitsprojekt, wenn alle Tests bestanden sind. +Once you're done, submit the URL to your working project with all its tests passing. # --solutions-- diff --git a/curriculum/challenges/german/03-front-end-development-libraries/front-end-development-libraries-projects/build-a-markdown-previewer.md b/curriculum/challenges/german/03-front-end-development-libraries/front-end-development-libraries-projects/build-a-markdown-previewer.md index 829714197ab..564169cbe5e 100644 --- a/curriculum/challenges/german/03-front-end-development-libraries/front-end-development-libraries-projects/build-a-markdown-previewer.md +++ b/curriculum/challenges/german/03-front-end-development-libraries/front-end-development-libraries-projects/build-a-markdown-previewer.md @@ -7,30 +7,31 @@ dashedName: build-a-markdown-previewer --- # --description-- +**Note:** **React 18 has known incompatibilities with the tests for this project (see [issue](https://github.com/freeCodeCamp/freeCodeCamp/issues/45922))** -**Aufgabe:** Erstelle eine Anwendung, die eine ähnliche Funktionalität wie https://markdown-previewer.freecodecamp.rocks/ aufweist. +**Objective:** Build an app that is functionally similar to this: https://markdown-previewer.freecodecamp.rocks/. -Erfülle die folgenden User Stories und bestehe alle Tests. Verwende Bibliotheken und APIs deiner Wahl. Gib dem Ganzen deinen persönlichen Stil. +Fulfill the below user stories and get all of the tests to pass. Use whichever libraries or APIs you need. Give it your own personal style. -Du kannst jede Mischung aus HTML, JavaScript, CSS, Bootstrap, SASS, React, Redux und jQuery verwenden, um dieses Projekt abzuschließen. Du solltest ein Frontend-Framework (wie zum Beispiel React) verwenden, da es in diesem Abschnitt um das Lernen von Frontend Frameworks geht. Zusätzliche Technologien, die oben nicht aufgeführt sind, werden nicht empfohlen und die Verwendung erfolgt auf eigene Gefahr. Wir prüfen die Unterstützung anderer Frontend-Frameworks wie Angular und Vue, aber sie werden derzeit nicht unterstützt. Wir sind offen für Fehlermeldungen und kümmern uns um all jene, die die vorgeschlagenen Technologien für dieses Projekt verwenden. Viel Spaß beim Programmieren! +You can use any mix of HTML, JavaScript, CSS, Bootstrap, SASS, React, Redux, and jQuery to complete this project. You should use a frontend framework (like React for example) because this section is about learning frontend frameworks. Additional technologies not listed above are not recommended and using them is at your own risk. We are looking at supporting other frontend frameworks like Angular and Vue, but they are not currently supported. We will accept and try to fix all issue reports that use the suggested technology stack for this project. Happy coding! -**User Story #1:** Ich kann ein `textarea`-Element mit einem entsprechenden `id="editor"` sehen. +**User Story #1:** I can see a `textarea` element with a corresponding `id="editor"`. -**User Story #2:** Ich kann ein Element mit einem entsprechenden `id="preview"` sehen. +**User Story #2:** I can see an element with a corresponding `id="preview"`. -**User Story #3:** Wenn ich Text in das `#editor`-Element eingebe, wird das `#preview`-Element während der Eingabe aktualisiert, um den Inhalt des Textfeldes anzuzeigen. +**User Story #3:** When I enter text into the `#editor` element, the `#preview` element is updated as I type to display the content of the textarea. -**User Story #4:** Wenn ich GitHub-Markdown in das `#editor`-Element eingebe, wird der Text als HTML im `#preview`-Element wiedergegeben, während ich tippe (TIPP: Du brauchst Markdown nicht selbst zu parsen - du kannst die Marked-Bibliothek dafür importieren: ). +**User Story #4:** When I enter GitHub flavored markdown into the `#editor` element, the text is rendered as HTML in the `#preview` element as I type (HINT: You don't need to parse Markdown yourself - you can import the Marked library for this: ). -**User Story #5:** Wenn mein Markdown-Previewer zum ersten Mal geladen wird, sollte der Standardtext im `#editor`-Feld gültiges Markdown enthalten, das mindestens eines der folgenden Elemente darstellt: ein Überschriftenelement (H1-Größe), ein Unterüberschriftenelement (H2-Größe), einen Link, Inline-Code, einen Codeblock, ein Listenelement, ein Blockquote, ein Bild und fettgedruckten Text. +**User Story #5:** When my markdown previewer first loads, the default text in the `#editor` field should contain valid markdown that represents at least one of each of the following elements: a heading element (H1 size), a sub heading element (H2 size), a link, inline code, a code block, a list item, a blockquote, an image, and bolded text. -**User Story #6:** Wenn mein Markdown-Previewer zum ersten Mal geladen wird, sollte das Standard-Markdown im `#editor`-Feld als HTML im `#preview`-Element dargestellt werden. +**User Story #6:** When my markdown previewer first loads, the default markdown in the `#editor` field should be rendered as HTML in the `#preview` element. -**Optionaler Bonus (du musst diesen Test nicht bestehen):** Mein Markdown-Previewer interpretiert Zeilenumbrüche und gibt sie als `br`-(Zeilenumbruch) Elemente aus. +**Optional Bonus (you do not need to make this test pass):** My markdown previewer interprets carriage returns and renders them as `br` (line break) elements. -Du kannst dein Projekt aufbauen, indem du diese CodePen-Vorlage verwendest und auf `Save` klickst, um deinen eigenen Pen zu erstellen. Oder du kannst diesen CDN-Link verwenden, um die Tests in jeder beliebigen Umgebung auszuführen: `https://cdn.freecodecamp.org/testable-projects-fcc/v1/bundle.js` +You can build your project by using this CodePen template and clicking `Save` to create your own pen. Or you can use this CDN link to run the tests in any environment you like: `https://cdn.freecodecamp.org/testable-projects-fcc/v1/bundle.js` -Sobald du fertig bist, übermittle die URL zu deinem Arbeitsprojekt, wenn alle Tests bestanden sind. +Once you're done, submit the URL to your working project with all its tests passing. # --solutions-- diff --git a/curriculum/challenges/german/03-front-end-development-libraries/front-end-development-libraries-projects/build-a-random-quote-machine.md b/curriculum/challenges/german/03-front-end-development-libraries/front-end-development-libraries-projects/build-a-random-quote-machine.md index 25dbea55022..632feeb6233 100644 --- a/curriculum/challenges/german/03-front-end-development-libraries/front-end-development-libraries-projects/build-a-random-quote-machine.md +++ b/curriculum/challenges/german/03-front-end-development-libraries/front-end-development-libraries-projects/build-a-random-quote-machine.md @@ -7,40 +7,41 @@ dashedName: build-a-random-quote-machine --- # --description-- +**Note:** **React 18 has known incompatibilities with the tests for this project (see [issue](https://github.com/freeCodeCamp/freeCodeCamp/issues/45922))** -**Aufgabe:** Erstelle eine Anwendung, die eine ähnliche Funktionalität wie https://random-quote-machine.freecodecamp.rocks/ aufweist. +**Objective:** Build an app that is functionally similar to this: https://random-quote-machine.freecodecamp.rocks/. -Erfülle die folgenden User Stories und bestehe alle Tests. Verwende Bibliotheken und APIs deiner Wahl. Gib dem Ganzen deinen persönlichen Stil. +Fulfill the below user stories and get all of the tests to pass. Use whichever libraries or APIs you need. Give it your own personal style. -Du kannst jede Mischung aus HTML, JavaScript, CSS, Bootstrap, SASS, React, Redux und jQuery verwenden, um dieses Projekt abzuschließen. Du solltest ein Frontend-Framework (wie zum Beispiel React) verwenden, da es in diesem Abschnitt um das Lernen von Frontend Frameworks geht. Zusätzliche Technologien, die oben nicht aufgeführt sind, werden nicht empfohlen und die Verwendung erfolgt auf eigene Gefahr. Wir prüfen die Unterstützung anderer Frontend-Frameworks wie Angular und Vue, aber sie werden derzeit nicht unterstützt. Wir sind offen für Fehlermeldungen und kümmern uns um all jene, die die vorgeschlagenen Technologien für dieses Projekt verwenden. Viel Spaß beim Programmieren! +You can use any mix of HTML, JavaScript, CSS, Bootstrap, SASS, React, Redux, and jQuery to complete this project. You should use a frontend framework (like React for example) because this section is about learning frontend frameworks. Additional technologies not listed above are not recommended and using them is at your own risk. We are looking at supporting other frontend frameworks like Angular and Vue, but they are not currently supported. We will accept and try to fix all issue reports that use the suggested technology stack for this project. Happy coding! -**User Story #1:** Ich kann ein Wrapper-Element mit einer entsprechenden `id="quote-box"` sehen. +**User Story #1:** I can see a wrapper element with a corresponding `id="quote-box"`. -**User Story #2:** Innerhalb `#quote-box` sehe ich ein Element mit einer entsprechenden `id="text"`. +**User Story #2:** Within `#quote-box`, I can see an element with a corresponding `id="text"`. -**User Story #3:** Innerhalb `#quote-box` sehe ich ein Element mit einer entsprechenden `id="author"`. +**User Story #3:** Within `#quote-box`, I can see an element with a corresponding `id="author"`. -**User Story #4:** Innerhalb von `#quote-box` sehe ich ein klickbares Element mit einer entsprechenden `id="new-quote"`. +**User Story #4:** Within `#quote-box`, I can see a clickable element with a corresponding `id="new-quote"`. -**User Story #5:** Innerhalb der `#quote-box` sehe ich ein klickbares `a`-Element mit einer entsprechenden `id="tweet-quote"`. +**User Story #5:** Within `#quote-box`, I can see a clickable `a` element with a corresponding `id="tweet-quote"`. -**User Story #6:** Beim ersten Laden zeigt meine Zitatmaschine ein zufälliges Zitat in dem Element mit `id="text"` an. +**User Story #6:** On first load, my quote machine displays a random quote in the element with `id="text"`. -**User Story #7:** Beim ersten Laden zeigt meine Zitatmaschine den Autor des zufälligen Zitats in dem Element mit `id="author"` an. +**User Story #7:** On first load, my quote machine displays the random quote's author in the element with `id="author"`. -**User Story #8:** Wenn der `#new-quote` Button angeklickt wird, soll meine Zitatmaschine ein neues Zitat holen und es im `#text`-Element anzeigen. +**User Story #8:** When the `#new-quote` button is clicked, my quote machine should fetch a new quote and display it in the `#text` element. -**User Story #9:** Meine Zitatmaschine soll den Autor des neuen Zitats holen, wenn der Button `#new-quote` angeklickt wird, und ihn im Element `#author` anzeigen. +**User Story #9:** My quote machine should fetch the new quote's author when the `#new-quote` button is clicked and display it in the `#author` element. -**User Story #10:** Ich kann das aktuelle Zitat tweeten, indem ich auf das `#tweet-quote` `a`-Element klicke. Dieses `a`-Element sollte den Pfad `"twitter.com/intent/tweet"` in seinem `href`-Attribut enthalten, um das aktuelle Zitat zu twittern. +**User Story #10:** I can tweet the current quote by clicking on the `#tweet-quote` `a` element. This `a` element should include the `"twitter.com/intent/tweet"` path in its `href` attribute to tweet the current quote. -**User Story #11:** Das `#quote-box`-Wrapper-Element sollte horizontal zentriert sein. Bitte führe die Tests mit einer Zoomstufe von 100% und maximierter Seite durch. +**User Story #11:** The `#quote-box` wrapper element should be horizontally centered. Please run tests with browser's zoom level at 100% and page maximized. -Du kannst dein Projekt aufbauen, indem du diese CodePen-Vorlage verwendest und auf `Save` klickst, um deinen eigenen Pen zu erstellen. Oder du kannst diesen CDN-Link verwenden, um die Tests in einer beliebigen Umgebung auszuführen: `https://cdn.freecodecamp.org/testable-projects-fcc/v1/bundle.js` +You can build your project by using this CodePen template and clicking `Save` to create your own pen. Or you can use this CDN link to run the tests in any environment you like: `https://cdn.freecodecamp.org/testable-projects-fcc/v1/bundle.js` -Sobald du fertig bist, sende die URL an dein Arbeitsprojekt mit all seinen Tests. +Once you're done, submit the URL to your working project with all its tests passing. -**Hinweis:** Twitter erlaubt es nicht, Links in einem iframe zu laden. Versuche es mit dem `target="_blank"` oder `target="_top"`-Attribut im `#tweet-quote`-Element, wenn dein Tweet nicht geladen werden kann. `target="_top"` ersetzt den aktuellen Tab, also stelle sicher, dass deine Arbeit gespeichert ist. +**Note:** Twitter does not allow links to be loaded in an iframe. Try using the `target="_blank"` or `target="_top"` attribute on the `#tweet-quote` element if your tweet won't load. `target="_top"` will replace the current tab so make sure your work is saved. # --solutions-- diff --git a/curriculum/challenges/italian/03-front-end-development-libraries/front-end-development-libraries-projects/build-a-25-5-clock.md b/curriculum/challenges/italian/03-front-end-development-libraries/front-end-development-libraries-projects/build-a-25-5-clock.md index c65ebfa0e25..57901d8ba69 100644 --- a/curriculum/challenges/italian/03-front-end-development-libraries/front-end-development-libraries-projects/build-a-25-5-clock.md +++ b/curriculum/challenges/italian/03-front-end-development-libraries/front-end-development-libraries-projects/build-a-25-5-clock.md @@ -8,71 +8,73 @@ dashedName: build-a-25--5-clock # --description-- -**Obiettivo:** crea un'app funzionalmente simile a: https://25--5-clock.freecodecamp.rocks. +**Note:** **React 18 has known incompatibilities with the tests for this project (see [issue](https://github.com/freeCodeCamp/freeCodeCamp/issues/45922))** -Soddisfa le user story qui sotto e supera tutti i test. Utilizza le librerie o le API di cui hai bisogno. Usa il tuo stile personale. +**Objective:** Build an app that is functionally similar to this: https://25--5-clock.freecodecamp.rocks. -Puoi utilizzare qualsiasi mix di HTML, JavaScript, CSS, Bootstrap, SASS, React, Redux e jQuery per completare questo progetto. Dovresti usare un framework frontend (come React per esempio) perché questa sezione riguarda l'apprendimento dei framework per il frontend. Ulteriori tecnologie non elencate sopra non sono raccomandate e usarle è a tuo rischio. Stiamo cercando di supportare altri framework per il frontend come Angular e Vue, ma attualmente non sono supportati. Accetteremo e cercheremo di risolvere tutte le segnalazioni di problemi che utilizzano lo stack tecnologico suggerito per questo progetto. Happy coding! +Fulfill the below user stories and get all of the tests to pass. Use whichever libraries or APIs you need. Give it your own personal style. -**User Story #1:** Posso vedere un elemento con `id="break-label"` che contiene una stringa (ad esempio "Break Length"). +You can use any mix of HTML, JavaScript, CSS, Bootstrap, SASS, React, Redux, and jQuery to complete this project. You should use a frontend framework (like React for example) because this section is about learning frontend frameworks. Additional technologies not listed above are not recommended and using them is at your own risk. We are looking at supporting other frontend frameworks like Angular and Vue, but they are not currently supported. We will accept and try to fix all issue reports that use the suggested technology stack for this project. Happy coding! -**User Story #2:** Posso vedere un elemento con `id="session-label"` che contiene una stringa (ad esempio "Session Length"). +**User Story #1:** I can see an element with `id="break-label"` that contains a string (e.g. "Break Length"). -**User Story #3:** Posso vedere due elementi cliccabili con gli id rispettivamente: `id="break-decrement"` e `id="session-decrement"`. +**User Story #2:** I can see an element with `id="session-label"` that contains a string (e.g. "Session Length"). -**User Story #4:** Posso vedere due elementi cliccabili con gli id rispettivamente: `id="break-increment"` e `id="session-increment"`. +**User Story #3:** I can see two clickable elements with corresponding IDs: `id="break-decrement"` and `id="session-decrement"`. -**User Story #5:** Posso vedere un elemento con un corrispondente `id="break-length"`, che per impostazione predefinita (al caricamento) visualizza un valore di 5. +**User Story #4:** I can see two clickable elements with corresponding IDs: `id="break-increment"` and `id="session-increment"`. -**User Story #6:** Posso vedere un elemento con un corrispondente `id="session-length"`, che per impostazione predefinita visualizza un valore di 25. +**User Story #5:** I can see an element with a corresponding `id="break-length"`, which by default (on load) displays a value of 5. -**User Story #7:** Posso vedere un elemento con un corrispondente `id="timer-label"`, che contiene una stringa che indica che una sessione è inizializzata (es. "Session"). +**User Story #6:** I can see an element with a corresponding `id="session-length"`, which by default displays a value of 25. -**User Story #8:** Posso vedere un elemento con corrispondente `id="time-left"`. NOTA: In pausa o in esecuzione, il valore in questo campo deve essere sempre visualizzato in formato `mm:ss` (cioè 25:00). +**User Story #7:** I can see an element with a corresponding `id="timer-label"`, that contains a string indicating a session is initialized (e.g. "Session"). -**User Story #9:** Posso vedere un elemento cliccabile con un corrispondente `id="start_stop"`. +**User Story #8:** I can see an element with corresponding `id="time-left"`. NOTE: Paused or running, the value in this field should always be displayed in `mm:ss` format (i.e. 25:00). -**User Story #10:** Posso vedere un elemento cliccabile con un corrispondente `id="reset"`. +**User Story #9:** I can see a clickable element with a corresponding `id="start_stop"`. -**User Story #11:** Quando clicco sull'elemento con l'id di `reset`, qualsiasi timer in esecuzione deve essere fermato, il valore in `id="break-length"` dovrebbe tornare a `5`, il valore in `id="session-length"` dovrebbe ritornare a 25, e l'elemento con `id="time-left"` dovrebbe tornare al suo stato predefinito. +**User Story #10:** I can see a clickable element with a corresponding `id="reset"`. -**User Story #12:** Quando clicco sull'elemento con l'id `break-decrement`, il valore all'interno di `id="break-length"` diminuisce di 1, e posso vedere il valore aggiornato. +**User Story #11:** When I click the element with the id of `reset`, any running timer should be stopped, the value within `id="break-length"` should return to `5`, the value within `id="session-length"` should return to 25, and the element with `id="time-left"` should reset to its default state. -**User Story #13:** Quando clicco sull'elemento con l'id di `break-increment`, il valore all'interno di `id="break-length"` aumenta di 1, e posso vedere il valore aggiornato. +**User Story #12:** When I click the element with the id of `break-decrement`, the value within `id="break-length"` decrements by a value of 1, and I can see the updated value. -**User Story #14:** Quando clicco sull'elemento con l'id di `session-decrement`, il valore in `id="session-length"` diminuisce di 1, e riesco a vedere il valore aggiornato. +**User Story #13:** When I click the element with the id of `break-increment`, the value within `id="break-length"` increments by a value of 1, and I can see the updated value. -**User Story #15:** Quando clicco sull'elemento con l'id di `session-increment`, il valore all'interno di `id="session-length"` aumenta di 1, e posso vedere il valore aggiornato. +**User Story #14:** When I click the element with the id of `session-decrement`, the value within `id="session-length"` decrements by a value of 1, and I can see the updated value. -**User Story #16:** Non dovrei essere in grado di impostare la lunghezza di una sessione o di una pausa <= 0. +**User Story #15:** When I click the element with the id of `session-increment`, the value within `id="session-length"` increments by a value of 1, and I can see the updated value. -**User Story #17:** Non dovrei essere in grado di impostare la lunghezza di una sessione o di una pausa > 60. +**User Story #16:** I should not be able to set a session or break length to <= 0. -**User Story #18:** Quando faccio click per la prima volta sull'elemento con `id="start_stop"`, il timer dovrebbe iniziare dal valore attualmente visualizzato in `id="session-length"`, anche se il valore è stato incrementato o diminuito rispetto al valore originario di 25. +**User Story #17:** I should not be able to set a session or break length to > 60. -**User Story #19:** Se il timer è in esecuzione, l'elemento con l'id di `time-left` dovrebbe visualizzare il tempo rimanente nel formato `mm:ss` (decrementando di un valore di 1 e aggiornando il display ogni 1000ms). +**User Story #18:** When I first click the element with `id="start_stop"`, the timer should begin running from the value currently displayed in `id="session-length"`, even if the value has been incremented or decremented from the original value of 25. -**User Story #20:** Se il timer è in esecuzione e clicco sull'elemento con `id="start_stop"`, il conto alla rovescia dovrebbe andare in pausa. +**User Story #19:** If the timer is running, the element with the id of `time-left` should display the remaining time in `mm:ss` format (decrementing by a value of 1 and updating the display every 1000ms). -**User Story #21:** Se il timer è in pausa e clicco sull'elemento con `id="start_stop"`, il conto alla rovescia dovrebbe riprendere dal punto in cui è stato messo in pausa. +**User Story #20:** If the timer is running and I click the element with `id="start_stop"`, the countdown should pause. -**User Story #22:** Quando un conto alla rovescia di una sessione raggiunge lo zero (NOTA: il timer DEVE raggiungere le 00:00), e inizia un nuovo conto alla rovescia, l'elemento con l'id di `timer-label` dovrebbe mostrare una stringa che indica che è iniziata una pausa. +**User Story #21:** If the timer is paused and I click the element with `id="start_stop"`, the countdown should resume running from the point at which it was paused. -**User Story #23:** Quando il conto alla rovescia di una sessione raggiunge lo zero (NOTA: il timer DEVE raggiungere le 00:00), dovrebbe iniziare un nuovo conto alla rovescia, contando alla rovescia dal valore attualmente visualizzato nell'elemento `id="break-length"`. +**User Story #22:** When a session countdown reaches zero (NOTE: timer MUST reach 00:00), and a new countdown begins, the element with the id of `timer-label` should display a string indicating a break has begun. -**User Story #24:** Quando un conto alla rovescia raggiunge lo zero (NOTA: il timer DEVE raggiungere le 00:00), e inizia un nuovo conto alla rovescia, l'elemento con l'id di `timer-label` dovrebbe mostrare una stringa che indica che è iniziata una sessione. +**User Story #23:** When a session countdown reaches zero (NOTE: timer MUST reach 00:00), a new break countdown should begin, counting down from the value currently displayed in the `id="break-length"` element. -**User Story #25:** Quando il conto alla rovescia della pausa raggiunge lo zero (NOTA: il timer DEVE raggiungere le 00:00), dovrebbe iniziare un nuovo conto alla rovescia, contando alla rovescia dal valore attualmente visualizzato nell'elemento `id="session-length"`. +**User Story #24:** When a break countdown reaches zero (NOTE: timer MUST reach 00:00), and a new countdown begins, the element with the id of `timer-label` should display a string indicating a session has begun. -**User Story #26:** Quando un conto alla rovescia raggiunge lo zero (NOTA: il timer DEVE raggiungere le 00:00), dovrebbe essere riprodotto un suono che indica che il tempo è scaduto. Questo dovrebbe utilizzare un tag HTML5 `audio` e avere un corrispondente `id="beep"`. +**User Story #25:** When a break countdown reaches zero (NOTE: timer MUST reach 00:00), a new session countdown should begin, counting down from the value currently displayed in the `id="session-length"` element. -**User Story #27:** L'elemento audio con `id="beep"` deve essere lungo un secondo o più. +**User Story #26:** When a countdown reaches zero (NOTE: timer MUST reach 00:00), a sound indicating that time is up should play. This should utilize an HTML5 `audio` tag and have a corresponding `id="beep"`. -**User Story #28:** L'elemento audio con id di `beep` deve terminare la riproduzione e tornare all'inizio quando viene cliccato l'elemento con l'id `reset`. +**User Story #27:** The audio element with `id="beep"` must be 1 second or longer. -Puoi costruire il tuo progetto usando questo modello CodePen e facendo click su `Save` per creare il tuo pen. Oppure puoi usare questo link CDN per eseguire i test in qualsiasi ambiente tu voglia: `https://cdn.freecodecamp.org/testable-projects-fcc/v1/bundle.js` +**User Story #28:** The audio element with id of `beep` must stop playing and be rewound to the beginning when the element with the id of `reset` is clicked. -Una volta fatto, invia l'URL del tuo progetto di lavoro con tutti i suoi test passati. +You can build your project by using this CodePen template and clicking `Save` to create your own pen. Or you can use this CDN link to run the tests in any environment you like: `https://cdn.freecodecamp.org/testable-projects-fcc/v1/bundle.js` + +Once you're done, submit the URL to your working project with all its tests passing. # --solutions-- diff --git a/curriculum/challenges/italian/03-front-end-development-libraries/front-end-development-libraries-projects/build-a-drum-machine.md b/curriculum/challenges/italian/03-front-end-development-libraries/front-end-development-libraries-projects/build-a-drum-machine.md index c30d0bf197d..9ec3486a1dd 100644 --- a/curriculum/challenges/italian/03-front-end-development-libraries/front-end-development-libraries-projects/build-a-drum-machine.md +++ b/curriculum/challenges/italian/03-front-end-development-libraries/front-end-development-libraries-projects/build-a-drum-machine.md @@ -7,28 +7,29 @@ dashedName: build-a-drum-machine --- # --description-- +**Note:** **React 18 has known incompatibilities with the tests for this project (see [issue](https://github.com/freeCodeCamp/freeCodeCamp/issues/45922))** -**Obiettivo:** crea un'app funzionalmente simile a: https://drum-machine.freecodecamp.rocks/. +**Objective:** Build an app that is functionally similar to this: https://drum-machine.freecodecamp.rocks/. -Soddisfa le user story qui sotto e supera tutti i test. Utilizza le librerie o le API di cui hai bisogno. Usa il tuo stile personale. +Fulfill the below user stories and get all of the tests to pass. Use whichever libraries or APIs you need. Give it your own personal style. -Puoi utilizzare qualsiasi mix di HTML, JavaScript, CSS, Bootstrap, SASS, React, Redux e jQuery per completare questo progetto. Dovresti usare un framework frontend (come React per esempio) perché questa sezione riguarda l'apprendimento dei framework per il frontend. Ulteriori tecnologie non elencate sopra non sono raccomandate e usarle è a tuo rischio. Stiamo cercando di supportare altri framework per il frontend come Angular e Vue, ma attualmente non sono supportati. Accetteremo e cercheremo di risolvere tutte le segnalazioni di problemi che utilizzano lo stack tecnologico suggerito per questo progetto. Happy coding! +You can use any mix of HTML, JavaScript, CSS, Bootstrap, SASS, React, Redux, and jQuery to complete this project. You should use a frontend framework (like React for example) because this section is about learning frontend frameworks. Additional technologies not listed above are not recommended and using them is at your own risk. We are looking at supporting other frontend frameworks like Angular and Vue, but they are not currently supported. We will accept and try to fix all issue reports that use the suggested technology stack for this project. Happy coding! -**User Story #1:** Dovrei essere in grado di vedere un contenitore esterno con un corrispondente `id="drum-machine"` che contiene tutti gli altri elementi. +**User Story #1:** I should be able to see an outer container with a corresponding `id="drum-machine"` that contains all other elements. -**User Story #2:** All'interno di `#drum-machine` posso vedere un elemento con un corrispondente `id="display"`. +**User Story #2:** Within `#drum-machine` I can see an element with a corresponding `id="display"`. -**User Story #3:** Dentro a `#drum-machine` posso vedere 9 elementi tamburo cliccabili, ognuno di classe `drum-pad`, con un id univoco che descrive la clip audio che l'elemento dovrà avviare, e un testo interno che corrisponde a uno dei seguenti tasti sulla tastiera: `Q`, `W`, `E`, `A`, `S`, `D`, `Z`, `X`, `C`. I tamburi DEVONO essere in questo ordine. +**User Story #3:** Within `#drum-machine` I can see 9 clickable drum pad elements, each with a class name of `drum-pad`, a unique id that describes the audio clip the drum pad will be set up to trigger, and an inner text that corresponds to one of the following keys on the keyboard: `Q`, `W`, `E`, `A`, `S`, `D`, `Z`, `X`, `C`. The drum pads MUST be in this order. -**User Story #4:** All'interno di ogni `.drum-pad`, ci dovrebbe essere un elemento HTML5 `audio` che ha un attributo `src` che indica una clip audio, un nome di classe `clip` e un id corrispondente al testo interno del `.drum-pad` genitore (ad es. `id="Q"`, `id="W"`, `id="E"` ecc.). +**User Story #4:** Within each `.drum-pad`, there should be an HTML5 `audio` element which has a `src` attribute pointing to an audio clip, a class name of `clip`, and an id corresponding to the inner text of its parent `.drum-pad` (e.g. `id="Q"`, `id="W"`, `id="E"` etc.). -**User Story #5:** Quando clicco su un elemento `.drum-pad`, la clip audio contenuta nell'elemento figlio `audio` dovrebbe essere attivata. +**User Story #5:** When I click on a `.drum-pad` element, the audio clip contained in its child `audio` element should be triggered. -**User Story #6:** Quando premo il tasto di attivazione associato a ogni `.drum-pad`, la clip audio contenuta nell'elemento figlio `audio` dovrebbe essere attivata (ad es. premendo il tasto `Q` si dovrebbe attivare il tamburo che contiene la stringa `Q`, premendo il tasto `W` si dovrebbe attivare il tamburo che contiene la stringa `W`, ecc.). +**User Story #6:** When I press the trigger key associated with each `.drum-pad`, the audio clip contained in its child `audio` element should be triggered (e.g. pressing the `Q` key should trigger the drum pad which contains the string `Q`, pressing the `W` key should trigger the drum pad which contains the string `W`, etc.). -**User Story #7:** Quando un `.drum-pad` viene attivato, viene visualizzata una stringa che descrive la clip audio associata come testo interno dell'elemento `#display` (ogni stringa deve essere unica). +**User Story #7:** When a `.drum-pad` is triggered, a string describing the associated audio clip is displayed as the inner text of the `#display` element (each string must be unique). -Ecco alcuni campioni audio che puoi usare per la tua batteria: +Here are some audio samples you can use for your drum machine: - [Heater 1](https://s3.amazonaws.com/freecodecamp/drums/Heater-1.mp3) - [Heater 2](https://s3.amazonaws.com/freecodecamp/drums/Heater-2.mp3) @@ -40,9 +41,9 @@ Ecco alcuni campioni audio che puoi usare per la tua batteria: - [Kick](https://s3.amazonaws.com/freecodecamp/drums/RP4_KICK_1.mp3) - [Closed-HH](https://s3.amazonaws.com/freecodecamp/drums/Cev_H2.mp3) -Puoi costruire il tuo progetto usando questo modello CodePen e facendo click su `Save` per creare il tuo pen. Oppure puoi usare questo link CDN per eseguire i test in qualsiasi ambiente tu voglia: `https://cdn.freecodecamp.org/testable-projects-fcc/v1/bundle.js` +You can build your project by using this CodePen template and clicking `Save` to create your own pen. Or you can use this CDN link to run the tests in any environment you like: `https://cdn.freecodecamp.org/testable-projects-fcc/v1/bundle.js` -Una volta fatto, invia l'URL del tuo progetto di lavoro con tutti i suoi test superati. +Once you're done, submit the URL to your working project with all its tests passing. # --solutions-- diff --git a/curriculum/challenges/italian/03-front-end-development-libraries/front-end-development-libraries-projects/build-a-javascript-calculator.md b/curriculum/challenges/italian/03-front-end-development-libraries/front-end-development-libraries-projects/build-a-javascript-calculator.md index 30df9a5a355..739cfbc7985 100644 --- a/curriculum/challenges/italian/03-front-end-development-libraries/front-end-development-libraries-projects/build-a-javascript-calculator.md +++ b/curriculum/challenges/italian/03-front-end-development-libraries/front-end-development-libraries-projects/build-a-javascript-calculator.md @@ -7,53 +7,54 @@ dashedName: build-a-javascript-calculator --- # --description-- +**Note:** **React 18 has known incompatibilities with the tests for this project (see [issue](https://github.com/freeCodeCamp/freeCodeCamp/issues/45922))** -**Obiettivo:** crea un'app funzionalmente simile a: https://javascript-calculator.freecodecamp.rocks/. +**Objective:** Build an app that is functionally similar to this: https://javascript-calculator.freecodecamp.rocks/. -Soddisfa le user story qui sotto e supera tutti i test. Utilizza le librerie o le API di cui hai bisogno. Usa il tuo stile personale. +Fulfill the below user stories and get all of the tests to pass. Use whichever libraries or APIs you need. Give it your own personal style. -Puoi utilizzare qualsiasi mix di HTML, JavaScript, CSS, Bootstrap, SASS, React, Redux e jQuery per completare questo progetto. Dovresti usare un framework frontend (come React per esempio) perché questa sezione riguarda l'apprendimento dei framework per il frontend. Ulteriori tecnologie non elencate sopra non sono raccomandate e usarle è a tuo rischio. Stiamo cercando di supportare altri framework per il frontend come Angular e Vue, ma attualmente non sono supportati. Accetteremo e cercheremo di risolvere tutte le segnalazioni di problemi che utilizzano lo stack tecnologico suggerito per questo progetto. Happy coding! +You can use any mix of HTML, JavaScript, CSS, Bootstrap, SASS, React, Redux, and jQuery to complete this project. You should use a frontend framework (like React for example) because this section is about learning frontend frameworks. Additional technologies not listed above are not recommended and using them is at your own risk. We are looking at supporting other frontend frameworks like Angular and Vue, but they are not currently supported. We will accept and try to fix all issue reports that use the suggested technology stack for this project. Happy coding! -**User Story #1:** La mia calcolatrice dovrebbe contenere un elemento cliccabile contenente un `=` (segno uguale) con un corrispondente `id="equals"`. +**User Story #1:** My calculator should contain a clickable element containing an `=` (equal sign) with a corresponding `id="equals"`. -**User Story #2:** La mia calcolatrice dovrebbe contenere 10 elementi cliccabili contenenti ciascuno un numero da 0-9, con i seguenti ID corrispondenti: `id="zero"`, `id="one"`, `id="two"`, `id="three"`, `id="four"`, `id="five"`, `id="six"` `id="seven"`, `id="eight"` e `id="nine"`. +**User Story #2:** My calculator should contain 10 clickable elements containing one number each from 0-9, with the following corresponding IDs: `id="zero"`, `id="one"`, `id="two"`, `id="three"`, `id="four"`, `id="five"`, `id="six"`, `id="seven"`, `id="eight"`, and `id="nine"`. -**User Story #3:** La mia calcolatrice dovrebbe contenere 4 elementi cliccabili contenenti ognuno uno degli operatori matematici primari con i seguenti ID corrispondenti: `id="add"`, `id="subtract"`, `id="multiply"`, `id="divide"`. +**User Story #3:** My calculator should contain 4 clickable elements each containing one of the 4 primary mathematical operators with the following corresponding IDs: `id="add"`, `id="subtract"`, `id="multiply"`, `id="divide"`. -**User Story #4:** La mia calcolatrice dovrebbe contenere un elemento cliccabile contenente un simbolo `.` (punto decimale) con un corrispondente `id="decimal"`. +**User Story #4:** My calculator should contain a clickable element containing a `.` (decimal point) symbol with a corresponding `id="decimal"`. -**User Story #5:** La mia calcolatrice dovrebbe contenere un elemento cliccabile con un `id="clear"`. +**User Story #5:** My calculator should contain a clickable element with an `id="clear"`. -**User Story #6:** La mia calcolatrice dovrebbe contenere un elemento per visualizzare i valori con un corrispondente `id="display"`. +**User Story #6:** My calculator should contain an element to display values with a corresponding `id="display"`. -**User Story #7:** In qualsiasi momento, premendo il pulsante `clear` dovrebbero essere cancellati i valori di input e output, e la calcolatrice dovrebbe tornare al suo stato iniziale; nell'elemento con l'id `display` dovrebbe essere mostrato 0. +**User Story #7:** At any time, pressing the `clear` button clears the input and output values, and returns the calculator to its initialized state; 0 should be shown in the element with the id of `display`. -**User Story #8:** Quando inserisco dei numeri, dovrei essere in grado di vedere il mio input nell'elemento con l'id `display`. +**User Story #8:** As I input numbers, I should be able to see my input in the element with the id of `display`. -**User Story #9:** Dovrei essere in grado di aggiungere, sottrarre, moltiplicare e dividere una catena di numeri di qualsiasi lunghezza e in qualsiasi ordine, e quando premo `=`, il risultato corretto dovrebbe essere mostrato nell'elemento con l'id `display`. +**User Story #9:** In any order, I should be able to add, subtract, multiply and divide a chain of numbers of any length, and when I hit `=`, the correct result should be shown in the element with the id of `display`. -**User Story #10:** La mia calcolatrice non dovrebbe consentire a un numero di iniziare con zeri multipli. +**User Story #10:** When inputting numbers, my calculator should not allow a number to begin with multiple zeros. -**User Story #11:** Quando l'elemento decimale viene cliccato, un `.` dovrebbe essere accodato al valore attualmente visualizzato; non dovrebbero essere accettati due `.` in un numero. +**User Story #11:** When the decimal element is clicked, a `.` should append to the currently displayed value; two `.` in one number should not be accepted. -**User Story #12:** Dovrei essere in grado di eseguire qualsiasi operazione (`+`, `-`, `*`, `/`) sui numeri contenenti punti decimali. +**User Story #12:** I should be able to perform any operation (`+`, `-`, `*`, `/`) on numbers containing decimal points. -**User Story #13:** Se 2 o più operatori sono inseriti consecutivamente, l'operazione effettuata dovrebbe essere l'ultimo operatore inserito (escluso il segno meno (`-`). Ad esempio, se viene inserito `5 + * 7 =`, il risultato dovrebbe essere `35` (cioè `5 * 7`); se viene inserito `5 * - 5 =`, il risultato dovrebbe essere `-25` (cioè `5 * (-5)`). +**User Story #13:** If 2 or more operators are entered consecutively, the operation performed should be the last operator entered (excluding the negative (`-`) sign). For example, if `5 + * 7 =` is entered, the result should be `35` (i.e. `5 * 7`); if `5 * - 5 =` is entered, the result should be `-25` (i.e. `5 * (-5)`). -**User Story #14:** Premere un operatore immediatamente dopo `=` dovrebbe avviare un nuovo calcolo che funzioni sul risultato dell'elaborazione precedente. +**User Story #14:** Pressing an operator immediately following `=` should start a new calculation that operates on the result of the previous evaluation. -**User Story #15:** La mia calcolatrice dovrebbe avere diversi decimali di precisione quando si tratta di arrotondamento (nota che non c'è uno standard esatto, ma si dovrebbe essere in grado di gestire calcoli come `2 / 7` con ragionevole precisione ad almeno 4 decimali). +**User Story #15:** My calculator should have several decimal places of precision when it comes to rounding (note that there is no exact standard, but you should be able to handle calculations like `2 / 7` with reasonable precision to at least 4 decimal places). -**Nota sulla logica della calcolatrice:** Va notato che ci sono due principali scuole di pensiero sulla logica dell'input della calcolatrice: logica a esecuzione immediata e logica della formula. Il nostro esempio utilizza la logica della formula e osserva l'ordine di precedenza degli operatori, mentre l'esecuzione immediata non lo fa. Entrambe sono accettabili, ma nota che a seconda di quale sceglierai, la calcolatrice potrà produrre risultati diversi rispetto ai nostri per alcune equazioni (vedi l'esempio in basso). Finché la matematica può essere verificata da un altro calcolatore di produzione, non considerarlo un bug. +**Note On Calculator Logic:** It should be noted that there are two main schools of thought on calculator input logic: immediate execution logic and formula logic. Our example utilizes formula logic and observes order of operation precedence, immediate execution does not. Either is acceptable, but please note that depending on which you choose, your calculator may yield different results than ours for certain equations (see below example). As long as your math can be verified by another production calculator, please do not consider this a bug. -**ESEMPIO:** `3 + 5 x 6 - 2 / 4 =` +**EXAMPLE:** `3 + 5 x 6 - 2 / 4 =` - **Logica a esecuzione immediata:** `11.5` - **Logica della formula:** `32.5` -Puoi costruire il tuo progetto usando questo modello CodePen e facendo click su `Save` per creare il tuo pen. Oppure puoi usare questo link CDN per eseguire i test in qualsiasi ambiente tu voglia: `https://cdn.freecodecamp.org/testable-projects-fcc/v1/bundle.js` +You can build your project by using this CodePen template and clicking `Save` to create your own pen. Or you can use this CDN link to run the tests in any environment you like: `https://cdn.freecodecamp.org/testable-projects-fcc/v1/bundle.js` -Una volta fatto, invia l'URL del tuo progetto di lavoro con tutti i suoi test passati. +Once you're done, submit the URL to your working project with all its tests passing. # --solutions-- diff --git a/curriculum/challenges/italian/03-front-end-development-libraries/front-end-development-libraries-projects/build-a-markdown-previewer.md b/curriculum/challenges/italian/03-front-end-development-libraries/front-end-development-libraries-projects/build-a-markdown-previewer.md index ef37214783a..223c92ea3f7 100644 --- a/curriculum/challenges/italian/03-front-end-development-libraries/front-end-development-libraries-projects/build-a-markdown-previewer.md +++ b/curriculum/challenges/italian/03-front-end-development-libraries/front-end-development-libraries-projects/build-a-markdown-previewer.md @@ -7,30 +7,31 @@ dashedName: build-a-markdown-previewer --- # --description-- +**Note:** **React 18 has known incompatibilities with the tests for this project (see [issue](https://github.com/freeCodeCamp/freeCodeCamp/issues/45922))** -**Obiettivo:** crea un'app funzionalmente simile a: https://markdown-previewer.freecodecamp.rocks/. +**Objective:** Build an app that is functionally similar to this: https://markdown-previewer.freecodecamp.rocks/. -Soddisfa le user story qui sotto e supera tutti i test. Utilizza le librerie o le API di cui hai bisogno. Usa il tuo stile personale. +Fulfill the below user stories and get all of the tests to pass. Use whichever libraries or APIs you need. Give it your own personal style. -Puoi utilizzare qualsiasi mix di HTML, JavaScript, CSS, Bootstrap, SASS, React, Redux e jQuery per completare questo progetto. Dovresti usare un framework frontend (come React per esempio) perché questa sezione riguarda l'apprendimento dei framework per il frontend. Ulteriori tecnologie non elencate sopra non sono raccomandate e usarle è a tuo rischio. Stiamo cercando di supportare altri framework per il frontend come Angular e Vue, ma attualmente non sono supportati. Accetteremo e cercheremo di risolvere tutte le segnalazioni di problemi che utilizzano lo stack tecnologico suggerito per questo progetto. Happy coding! +You can use any mix of HTML, JavaScript, CSS, Bootstrap, SASS, React, Redux, and jQuery to complete this project. You should use a frontend framework (like React for example) because this section is about learning frontend frameworks. Additional technologies not listed above are not recommended and using them is at your own risk. We are looking at supporting other frontend frameworks like Angular and Vue, but they are not currently supported. We will accept and try to fix all issue reports that use the suggested technology stack for this project. Happy coding! -**User Story #1:** Posso vedere un elemento `textarea` con un corrispondente `id="editor"`. +**User Story #1:** I can see a `textarea` element with a corresponding `id="editor"`. -**User Story #2:** Posso vedere un elemento con un corrispondente `id="preview"`. +**User Story #2:** I can see an element with a corresponding `id="preview"`. -**User Story #3:** Quando inserisco del testo nell'elemento `#editor`, l'elemento `#preview` viene aggiornato mentre scrivo per visualizzare il contenuto della textarea. +**User Story #3:** When I enter text into the `#editor` element, the `#preview` element is updated as I type to display the content of the textarea. -**User Story #4:** Quando inserisco markdown in stile GitHub nell'elemento `#editor`, il testo viene presentato come HTML nell'elemento `#preview` mentre digito (SUGGERIMENTO: Non è necessario che analizzi tu stesso il Markdown - puoi importare la libreria Marked per questo: [https://cdnjs. om/libraries/marked](https://cdnjs.com/libraries/marked)). +**User Story #4:** When I enter GitHub flavored markdown into the `#editor` element, the text is rendered as HTML in the `#preview` element as I type (HINT: You don't need to parse Markdown yourself - you can import the Marked library for this: ). -**User Story #5:** Quando il mio visualizzatore di markdown viene caricato inizialmente, il testo predefinito nel campo `#editor` dovrebbe contenere del markdown valido che rappresenti almeno uno dei seguenti elementi: un'intestazione (dimensione H1), una sotto-intestazione (formato H2), un collegamento, del codice in linea, un blocco di codice, un elemento di lista, un blockquote, un'immagine e un testo in grassetto. +**User Story #5:** When my markdown previewer first loads, the default text in the `#editor` field should contain valid markdown that represents at least one of each of the following elements: a heading element (H1 size), a sub heading element (H2 size), a link, inline code, a code block, a list item, a blockquote, an image, and bolded text. -**User Story #6:** Quando il mio visualizzatore di markdown viene caricato inizialmente, il markdown predefinito nel campo `#editor` dovrebbe essere presentato come HTML nell'elemento `#preview`. +**User Story #6:** When my markdown previewer first loads, the default markdown in the `#editor` field should be rendered as HTML in the `#preview` element. -**Bonus opzionale (non è necessario superare questo test):** Il mio visualizzatore di markdown interpreta i ritorni a capo e li presenta come elementi `br` (interruzione di riga). +**Optional Bonus (you do not need to make this test pass):** My markdown previewer interprets carriage returns and renders them as `br` (line break) elements. -Puoi costruire il tuo progetto usando questo modello CodePen e facendo click su `Save` per creare il tuo pen. Oppure puoi usare questo link CDN per eseguire i test in qualsiasi ambiente tu voglia: `https://cdn.freecodecamp.org/testable-projects-fcc/v1/bundle.js` +You can build your project by using this CodePen template and clicking `Save` to create your own pen. Or you can use this CDN link to run the tests in any environment you like: `https://cdn.freecodecamp.org/testable-projects-fcc/v1/bundle.js` -Una volta fatto, invia l'URL del tuo progetto di lavoro con tutti i suoi test passati. +Once you're done, submit the URL to your working project with all its tests passing. # --solutions-- diff --git a/curriculum/challenges/italian/03-front-end-development-libraries/front-end-development-libraries-projects/build-a-random-quote-machine.md b/curriculum/challenges/italian/03-front-end-development-libraries/front-end-development-libraries-projects/build-a-random-quote-machine.md index b52590cbf0e..648d22215a7 100644 --- a/curriculum/challenges/italian/03-front-end-development-libraries/front-end-development-libraries-projects/build-a-random-quote-machine.md +++ b/curriculum/challenges/italian/03-front-end-development-libraries/front-end-development-libraries-projects/build-a-random-quote-machine.md @@ -7,40 +7,41 @@ dashedName: build-a-random-quote-machine --- # --description-- +**Note:** **React 18 has known incompatibilities with the tests for this project (see [issue](https://github.com/freeCodeCamp/freeCodeCamp/issues/45922))** -**Obiettivo:** crea un'app funzionalmente simile a: https://random-quote-machine.freecodecamp.rocks/. +**Objective:** Build an app that is functionally similar to this: https://random-quote-machine.freecodecamp.rocks/. -Soddisfa le user story qui sotto e supera tutti i test. Utilizza le librerie o le API di cui hai bisogno. Usa il tuo stile personale. +Fulfill the below user stories and get all of the tests to pass. Use whichever libraries or APIs you need. Give it your own personal style. -Puoi utilizzare qualsiasi mix di HTML, JavaScript, CSS, Bootstrap, SASS, React, Redux e jQuery per completare questo progetto. Dovresti usare un framework frontend (come React per esempio) perché questa sezione riguarda l'apprendimento dei framework per il frontend. Ulteriori tecnologie non elencate sopra non sono raccomandate e usarle è a tuo rischio. Stiamo cercando di supportare altri framework per il frontend come Angular e Vue, ma attualmente non sono supportati. Accetteremo e cercheremo di risolvere tutte le segnalazioni di problemi che utilizzano lo stack tecnologico suggerito per questo progetto. Happy coding! +You can use any mix of HTML, JavaScript, CSS, Bootstrap, SASS, React, Redux, and jQuery to complete this project. You should use a frontend framework (like React for example) because this section is about learning frontend frameworks. Additional technologies not listed above are not recommended and using them is at your own risk. We are looking at supporting other frontend frameworks like Angular and Vue, but they are not currently supported. We will accept and try to fix all issue reports that use the suggested technology stack for this project. Happy coding! -**User Story #1:** Posso vedere un elemento wrapper con un corrispondente `id="quote-box"`. +**User Story #1:** I can see a wrapper element with a corresponding `id="quote-box"`. -**User Story #2:** Dentro a `#quote-box` posso vedere un elemento con un corrispondente `id="text"`. +**User Story #2:** Within `#quote-box`, I can see an element with a corresponding `id="text"`. -**User Story #3:** Dentro a `#quote-box` posso vedere un elemento con un corrispondente `id="author"`. +**User Story #3:** Within `#quote-box`, I can see an element with a corresponding `id="author"`. -**User Story #4:** Dentro a `#quote-box`, posso vedere un elemento cliccabile con un corrispondente `id="new-quote"`. +**User Story #4:** Within `#quote-box`, I can see a clickable element with a corresponding `id="new-quote"`. -**User Story #5:** Dentro a `#quote-box`, posso vedere un elemento cliccabile `a` con un corrispondente `id="tweet-quote"`. +**User Story #5:** Within `#quote-box`, I can see a clickable `a` element with a corresponding `id="tweet-quote"`. -**User Story #6:** Al caricamento iniziale, la mia macchina per le citazioni visualizza una citazione casuale nell'elemento con `id="text"`. +**User Story #6:** On first load, my quote machine displays a random quote in the element with `id="text"`. -**User Story #7:** Al caricamento iniziale, la mia macchina per le citazioni visualizza l'autore della citazione casuale nell'elemento con `id="author"`. +**User Story #7:** On first load, my quote machine displays the random quote's author in the element with `id="author"`. -**User Story #8:** Quando si clicca sul pulsante `#new-quote`, la mia macchina per le citazioni dovrebbe andare a prendere una nuova citazione e visualizzarla nell'elemento `#text`. +**User Story #8:** When the `#new-quote` button is clicked, my quote machine should fetch a new quote and display it in the `#text` element. -**User Story #9:** La mia macchina per le citazioni dovrebbe andare a prendere l'autore della nuova citazione quando viene cliccato il pulsante `#new-quote` e visualizzarlo nell'elemento `#author`. +**User Story #9:** My quote machine should fetch the new quote's author when the `#new-quote` button is clicked and display it in the `#author` element. -**User Story #10:** Posso twittare la citazione corrente cliccando sull'elemento `a` `#tweet-quote`. Questo elemento `a` dovrebbe includere il percorso `"twitter.com/intent/tweet"` nel suo attributo `href` per twittare la citazione corrente. +**User Story #10:** I can tweet the current quote by clicking on the `#tweet-quote` `a` element. This `a` element should include the `"twitter.com/intent/tweet"` path in its `href` attribute to tweet the current quote. -**User Story #11:** L'elemento contenitore `#quote-box` dovrebbe essere centrato orizzontalmente. Ti preghiamo di eseguire i test con un livello di zoom del browser al 100% e la pagina massimizzata. +**User Story #11:** The `#quote-box` wrapper element should be horizontally centered. Please run tests with browser's zoom level at 100% and page maximized. -Puoi costruire il tuo progetto usando questo modello CodePen e facendo click su `Save` per creare il tuo pen. Oppure puoi usare questo link CDN per eseguire i test in qualsiasi ambiente tu voglia: `https://cdn.freecodecamp.org/testable-projects-fcc/v1/bundle.js` +You can build your project by using this CodePen template and clicking `Save` to create your own pen. Or you can use this CDN link to run the tests in any environment you like: `https://cdn.freecodecamp.org/testable-projects-fcc/v1/bundle.js` -Una volta fatto, invia l'URL del tuo progetto di lavoro con tutti i suoi test superati. +Once you're done, submit the URL to your working project with all its tests passing. -**Nota:** Twitter non consente di caricare i link in un iframe. Prova a usare l'attributo `target="_blank"` o `target="_top"` nell'elemento `#tweet-quote` se il tuo tweet non viene caricato. `target="_top"` sostituirà la scheda corrente quindi assicurati che il tuo lavoro sia stato salvato. +**Note:** Twitter does not allow links to be loaded in an iframe. Try using the `target="_blank"` or `target="_top"` attribute on the `#tweet-quote` element if your tweet won't load. `target="_top"` will replace the current tab so make sure your work is saved. # --solutions-- diff --git a/curriculum/challenges/japanese/03-front-end-development-libraries/front-end-development-libraries-projects/build-a-25-5-clock.md b/curriculum/challenges/japanese/03-front-end-development-libraries/front-end-development-libraries-projects/build-a-25-5-clock.md index d0ff59cdacf..fd983efb633 100644 --- a/curriculum/challenges/japanese/03-front-end-development-libraries/front-end-development-libraries-projects/build-a-25-5-clock.md +++ b/curriculum/challenges/japanese/03-front-end-development-libraries/front-end-development-libraries-projects/build-a-25-5-clock.md @@ -8,71 +8,73 @@ dashedName: build-a-25--5-clock # --description-- -**目標:** こちらと似た機能を持つアプリを構築してください: https://25--5-clock.freecodecamp.rocks +**Note:** **React 18 has known incompatibilities with the tests for this project (see [issue](https://github.com/freeCodeCamp/freeCodeCamp/issues/45922))** -以下のユーザーストーリーを満たし、すべてのテストが成功するようにしてください。 必要に応じて、どのようなライブラリあるいは API を使用してもかまいません。 あなた独自のアレンジを加えましょう。 +**Objective:** Build an app that is functionally similar to this: https://25--5-clock.freecodecamp.rocks. -このプロジェクトを完了するために、HTML、JavaScript、CSS、Bootstrap、SASS、React、Redux、および jQuery を自在に組み合わせて利用することができます。 このセクションはフロントエンドフレームワークの学習を目的としていますので、React などのフロントエンドフレームワークを使用してください。 上記以外の他のテクノロジーは推奨されません。使用する場合は自己責任で行ってください。 Angular や Vue などの他のフロントエンドフレームワークのサポートを検討していますが、現時点ではサポートされていません。 このプロジェクトで推奨される一連のテクノロジーを使用している場合の不具合報告については、freeCodeCamp にて報告を受け入れ、修正するよう努めます。 コーディングの成功を祈ります！ +Fulfill the below user stories and get all of the tests to pass. Use whichever libraries or APIs you need. Give it your own personal style. -**ユーザーストーリー 1:** 文字列 ("Break Length" など) が含まれている `id="break-label"` を持つ要素を表示できます。 +You can use any mix of HTML, JavaScript, CSS, Bootstrap, SASS, React, Redux, and jQuery to complete this project. You should use a frontend framework (like React for example) because this section is about learning frontend frameworks. Additional technologies not listed above are not recommended and using them is at your own risk. We are looking at supporting other frontend frameworks like Angular and Vue, but they are not currently supported. We will accept and try to fix all issue reports that use the suggested technology stack for this project. Happy coding! -**ユーザーストーリー 2:** 文字列 ("Session Length" など) が含まれている `id="session-label"` を持つ要素を表示できます。 +**User Story #1:** I can see an element with `id="break-label"` that contains a string (e.g. "Break Length"). -**ユーザー ストーリー 3:** 対応する ID (`id="break-decrement"` と `id="session-decrement"`) を持つクリック可能な要素を 2 つ表示できます。 +**User Story #2:** I can see an element with `id="session-label"` that contains a string (e.g. "Session Length"). -**ユーザー ストーリー 4:** 対応する ID (`id="break-increment"` と `id="session-increment"`) を持つクリック可能な要素を 2 つ表示できます。 +**User Story #3:** I can see two clickable elements with corresponding IDs: `id="break-decrement"` and `id="session-decrement"`. -**ユーザー ストーリー 5:** 対応する `id="break-length"` を持ち、デフォルトで (読み込み時に) 値 5 を表示する要素を表示できます。 +**User Story #4:** I can see two clickable elements with corresponding IDs: `id="break-increment"` and `id="session-increment"`. -**ユーザー ストーリー 6:** 対応する `id="session-length"` を持ち、デフォルトで値 25 を表示する要素を表示できます。 +**User Story #5:** I can see an element with a corresponding `id="break-length"`, which by default (on load) displays a value of 5. -**ユーザー ストーリー 7:** 対応する `id="timer-label"` を持ち、セッションの初期化を示す文字列 ("Session" など) が含まれている要素を表示できます。 +**User Story #6:** I can see an element with a corresponding `id="session-length"`, which by default displays a value of 25. -**ユーザー ストーリー 8:** 対応する `id="time-left"` を持つ要素を表示できます。 注: 一時停止中または実行中は、このフィールドの値を `mm:ss` 形式で常に表示します (例: 25:00)。 +**User Story #7:** I can see an element with a corresponding `id="timer-label"`, that contains a string indicating a session is initialized (e.g. "Session"). -**ユーザーストーリー 9:** 対応する `id="start_stop"` を持つクリック可能な要素を表示できます。 +**User Story #8:** I can see an element with corresponding `id="time-left"`. NOTE: Paused or running, the value in this field should always be displayed in `mm:ss` format (i.e. 25:00). -**ユーザーストーリー 10:** 対応する `id="reset"` を持つクリック可能な要素を表示できます。 +**User Story #9:** I can see a clickable element with a corresponding `id="start_stop"`. -**ユーザーストーリー 11:** ID が `reset` の要素をクリックすると、実行中のタイマーがすべて停止し、`id="break-length"` 内の値が `5` に戻り、`id="session-length"` の値が 25 に戻り、`id="time-left"` を持つ要素がデフォルトの状態にリセットされます。 +**User Story #10:** I can see a clickable element with a corresponding `id="reset"`. -**ユーザーストーリー 12:** ID が `break-decrement` の要素をクリックすると、`id="break-length"` 内の値が 1 減り、値が更新されるのを確認できます。 +**User Story #11:** When I click the element with the id of `reset`, any running timer should be stopped, the value within `id="break-length"` should return to `5`, the value within `id="session-length"` should return to 25, and the element with `id="time-left"` should reset to its default state. -**ユーザーストーリー 13:** ID が `break-increment` の要素をクリックすると、`id="break-length"` 内の値が 1 増え、値が更新されるのを確認できます。 +**User Story #12:** When I click the element with the id of `break-decrement`, the value within `id="break-length"` decrements by a value of 1, and I can see the updated value. -**ユーザーストーリー 14:** ID が `session-decrement` の要素をクリックすると、`id="session-length"` 内の値が 1 減り、値が更新されるのを確認できます。 +**User Story #13:** When I click the element with the id of `break-increment`, the value within `id="break-length"` increments by a value of 1, and I can see the updated value. -**ユーザーストーリー 15:** ID が `session-increment` の要素をクリックすると、`id="session-length"` 内の値が 1 増え、値が更新されるのを確認できます。 +**User Story #14:** When I click the element with the id of `session-decrement`, the value within `id="session-length"` decrements by a value of 1, and I can see the updated value. -**ユーザーストーリー 16:** セッションまたはブレイクの長さを 0 以下に設定できないようにします。 +**User Story #15:** When I click the element with the id of `session-increment`, the value within `id="session-length"` increments by a value of 1, and I can see the updated value. -**ユーザーストーリー 17:** セッションまたはブレイクの長さを 60 を超えて設定できないようにします。 +**User Story #16:** I should not be able to set a session or break length to <= 0. -**ユーザーストーリー 18:** `id="start_stop"` を持つ要素を初めてクリックすると、現在 `id="session-length"` に表示されている値から、たとえその値が元の値である 25 から増加または減少していても、タイマーの実行が開始されます。 +**User Story #17:** I should not be able to set a session or break length to > 60. -**ユーザーストーリー 19:** タイマーが実行中の場合、ID が `time-left` の要素には残り時間が `mm:ss` 形式で表示されます (値が 1 だけ減り、1000ms ごとに表示が更新されます)。 +**User Story #18:** When I first click the element with `id="start_stop"`, the timer should begin running from the value currently displayed in `id="session-length"`, even if the value has been incremented or decremented from the original value of 25. -**ユーザー ストーリー 20:** タイマーの実行中に、`id="start_stop"` を持つ要素をクリックすると、カウントダウンが一時停止します。 +**User Story #19:** If the timer is running, the element with the id of `time-left` should display the remaining time in `mm:ss` format (decrementing by a value of 1 and updating the display every 1000ms). -**ユーザー ストーリー 21:** タイマーの一時停止中に、`id="start_stop"` を持つ要素をクリックすると、一時停止した時点からカウントダウンの実行が再開されます。 +**User Story #20:** If the timer is running and I click the element with `id="start_stop"`, the countdown should pause. -**ユーザーストーリー 22:** セッションカウントダウンがゼロに達し (注: タイマーが 00:00 に達する必要があります)、新しいカウントダウンが開始されると、ID が `timer-label` の要素に、ブレイクが開始されたことを示す文字列が表示されます。 +**User Story #21:** If the timer is paused and I click the element with `id="start_stop"`, the countdown should resume running from the point at which it was paused. -**ユーザーストーリー 23:** セッションカウントダウンがゼロに達すると (注: タイマーが 00:00 に達する必要があります)、新しいブレイクカウントダウンが開始され、現在 `id="break-length"` の要素に表示されている値からカウントダウンします。 +**User Story #22:** When a session countdown reaches zero (NOTE: timer MUST reach 00:00), and a new countdown begins, the element with the id of `timer-label` should display a string indicating a break has begun. -**ユーザーストーリー 24:** ブレイクカウントダウンがゼロに達し (注: タイマーが 00:00 に達する必要があります)、新しいカウントダウンが開始されると、ID が `timer-label` の要素に、セッションが開始されたことを示す文字列が表示されます。 +**User Story #23:** When a session countdown reaches zero (NOTE: timer MUST reach 00:00), a new break countdown should begin, counting down from the value currently displayed in the `id="break-length"` element. -**ユーザーストーリー 25:** ブレイクカウントダウンがゼロに達すると (注: タイマーが 00:00 に達する必要があります)、新しいセッションカウントダウンが開始され、現在 `id="session-length"` の要素に表示されている値からカウントダウンします。 +**User Story #24:** When a break countdown reaches zero (NOTE: timer MUST reach 00:00), and a new countdown begins, the element with the id of `timer-label` should display a string indicating a session has begun. -**ユーザーストーリー 26:** カウントダウンがゼロに達すると (注: タイマーが 00:00 に達する必要があります)、時間切れになったことを示すサウンドが再生されます。 これには HTML5 の `audio` タグを使用し、対応する `id="beep"` を付けます。 +**User Story #25:** When a break countdown reaches zero (NOTE: timer MUST reach 00:00), a new session countdown should begin, counting down from the value currently displayed in the `id="session-length"` element. -**ユーザー ストーリー 27:** `id="beep"` を持つ audio 要素は 1 秒以上にする必要があります。 +**User Story #26:** When a countdown reaches zero (NOTE: timer MUST reach 00:00), a sound indicating that time is up should play. This should utilize an HTML5 `audio` tag and have a corresponding `id="beep"`. -**ユーザーストーリー 28:** ID が `reset` の要素がクリックされたとき、ID が `beep` の audio 要素の再生を停止して、最初まで巻き戻す必要があります。 +**User Story #27:** The audio element with `id="beep"` must be 1 second or longer. -この CodePen テンプレートを使用して あなたのプロジェクトを構築することができます。`Save` をクリックすると、あなた用の pen を作成することができます。 または、下記の CDN リンクを使用して、使い慣れている環境でテストを実行することもできます: `https://cdn.freecodecamp.org/testable-projects-fcc/v1/bundle.js` +**User Story #28:** The audio element with id of `beep` must stop playing and be rewound to the beginning when the element with the id of `reset` is clicked. -完了したら、すべてのテストが成功する状態の作業プロジェクトの URL を送信してください。 +You can build your project by using this CodePen template and clicking `Save` to create your own pen. Or you can use this CDN link to run the tests in any environment you like: `https://cdn.freecodecamp.org/testable-projects-fcc/v1/bundle.js` + +Once you're done, submit the URL to your working project with all its tests passing. # --solutions-- diff --git a/curriculum/challenges/japanese/03-front-end-development-libraries/front-end-development-libraries-projects/build-a-drum-machine.md b/curriculum/challenges/japanese/03-front-end-development-libraries/front-end-development-libraries-projects/build-a-drum-machine.md index c11545ebcf0..c0b8d835432 100644 --- a/curriculum/challenges/japanese/03-front-end-development-libraries/front-end-development-libraries-projects/build-a-drum-machine.md +++ b/curriculum/challenges/japanese/03-front-end-development-libraries/front-end-development-libraries-projects/build-a-drum-machine.md @@ -7,28 +7,29 @@ dashedName: build-a-drum-machine --- # --description-- +**Note:** **React 18 has known incompatibilities with the tests for this project (see [issue](https://github.com/freeCodeCamp/freeCodeCamp/issues/45922))** -**目標:** こちらと似た機能を持つアプリを構築してください: https://drum-machine.freecodecamp.rocks +**Objective:** Build an app that is functionally similar to this: https://drum-machine.freecodecamp.rocks/. -以下のユーザーストーリーを満たし、すべてのテストが成功するようにしてください。 必要に応じて、どのようなライブラリあるいは API を使用してもかまいません。 あなた独自のアレンジを加えましょう。 +Fulfill the below user stories and get all of the tests to pass. Use whichever libraries or APIs you need. Give it your own personal style. -このプロジェクトを完了するために、HTML、JavaScript、CSS、Bootstrap、SASS、React、Redux、および jQuery を自在に組み合わせて利用することができます。 このセクションはフロントエンドフレームワークの学習を目的としていますので、React などのフロントエンドフレームワークを使用してください。 上記以外の他のテクノロジーは推奨されません。使用する場合は自己責任で行ってください。 Angular や Vue などの他のフロントエンドフレームワークのサポートを検討していますが、現時点ではサポートされていません。 このプロジェクトで推奨される一連のテクノロジーを使用している場合の不具合報告については、freeCodeCamp にて報告を受け入れ、修正するよう努めます。 コーディングの成功を祈ります！ +You can use any mix of HTML, JavaScript, CSS, Bootstrap, SASS, React, Redux, and jQuery to complete this project. You should use a frontend framework (like React for example) because this section is about learning frontend frameworks. Additional technologies not listed above are not recommended and using them is at your own risk. We are looking at supporting other frontend frameworks like Angular and Vue, but they are not currently supported. We will accept and try to fix all issue reports that use the suggested technology stack for this project. Happy coding! -**ユーザーストーリー 1:** 対応する `id="drum-machine"` を持ち、他のすべての要素を収める、外側のコンテナーを表示できます。 +**User Story #1:** I should be able to see an outer container with a corresponding `id="drum-machine"` that contains all other elements. -**ユーザーストーリー 2:** `#drum-machine` の中に、対応する `id="display"` を持つ要素を表示できます。 +**User Story #2:** Within `#drum-machine` I can see an element with a corresponding `id="display"`. -**ユーザーストーリー 3:** `#drum-machine` の中に、9 つのクリック可能なドラムパッド要素を表示できます。要素はそれぞれ、クラス名 `drum-pad` と、ドラムパットのトリガー用に準備されるオーディオクリップを示す一意の ID、および、キーボードの `Q`、`W`、`E`、`A`、`S`、`D`、`Z`、`X`、`C` のいずれかのキーに対応する内側のテキストを持ちます。 ドラムパッドはこの順序にする必要があります。 +**User Story #3:** Within `#drum-machine` I can see 9 clickable drum pad elements, each with a class name of `drum-pad`, a unique id that describes the audio clip the drum pad will be set up to trigger, and an inner text that corresponds to one of the following keys on the keyboard: `Q`, `W`, `E`, `A`, `S`, `D`, `Z`, `X`, `C`. The drum pads MUST be in this order. -**ユーザーストーリー 4:** それぞれの `.drum-pad` の中に、HTML5 の `audio` 要素を配置します。この要素は、オーディオクリップを指し示す `src` 属性、クラス名 `clip`、および、自身の親である `.drum-pad` の内側のテキストに対応する ID を持ちます (`id="Q"`、`id="W"`、`id="E"` など)。 +**User Story #4:** Within each `.drum-pad`, there should be an HTML5 `audio` element which has a `src` attribute pointing to an audio clip, a class name of `clip`, and an id corresponding to the inner text of its parent `.drum-pad` (e.g. `id="Q"`, `id="W"`, `id="E"` etc.). -**ユーザーストーリー 5:** `.drum-pad` 要素をクリックすると、その子の `audio` 要素に含まれているオーディオクリップがトリガーされます。 +**User Story #5:** When I click on a `.drum-pad` element, the audio clip contained in its child `audio` element should be triggered. -**ユーザーストーリー 6:** それぞれの `.drum-pad` に関連付けられているトリガーキーを押すと、その子の `audio` 要素に含まれているオーディオクリップがトリガーされます。たとえば、`Q` キーを押すと文字列 `Q` を含むドラムパッドがトリガーされ、`W` キーを押すと文字列 `W` を含むドラムパッドがトリガーされる、などとなります。 +**User Story #6:** When I press the trigger key associated with each `.drum-pad`, the audio clip contained in its child `audio` element should be triggered (e.g. pressing the `Q` key should trigger the drum pad which contains the string `Q`, pressing the `W` key should trigger the drum pad which contains the string `W`, etc.). -**ユーザーストーリー 7:** `.drum-pad` がトリガーされると、関連するオーディオクリップを説明する文字列が、`#display` 要素の内側のテキストとして表示されます (文字列はそれぞれ一意にする必要があります)。 +**User Story #7:** When a `.drum-pad` is triggered, a string describing the associated audio clip is displayed as the inner text of the `#display` element (each string must be unique). -ドラムマシンに使用できるオーディオサンプルの例は次のとおりです。 +Here are some audio samples you can use for your drum machine: - [Heater 1](https://s3.amazonaws.com/freecodecamp/drums/Heater-1.mp3) - [Heater 2](https://s3.amazonaws.com/freecodecamp/drums/Heater-2.mp3) @@ -40,9 +41,9 @@ dashedName: build-a-drum-machine - [Kick](https://s3.amazonaws.com/freecodecamp/drums/RP4_KICK_1.mp3) - [Closed-HH](https://s3.amazonaws.com/freecodecamp/drums/Cev_H2.mp3) -この CodePen テンプレートを使用して あなたのプロジェクトを構築することができます。`Save` をクリックすると、あなた用の pen を作成することができます。 または、下記の CDN リンクを使用して、使い慣れている環境でテストを実行することもできます: `https://cdn.freecodecamp.org/testable-projects-fcc/v1/bundle.js` +You can build your project by using this CodePen template and clicking `Save` to create your own pen. Or you can use this CDN link to run the tests in any environment you like: `https://cdn.freecodecamp.org/testable-projects-fcc/v1/bundle.js` -完了したら、すべてのテストが成功する状態の作業プロジェクトの URL を送信してください。 +Once you're done, submit the URL to your working project with all its tests passing. # --solutions-- diff --git a/curriculum/challenges/japanese/03-front-end-development-libraries/front-end-development-libraries-projects/build-a-javascript-calculator.md b/curriculum/challenges/japanese/03-front-end-development-libraries/front-end-development-libraries-projects/build-a-javascript-calculator.md index 05162b892f5..09704038c7f 100644 --- a/curriculum/challenges/japanese/03-front-end-development-libraries/front-end-development-libraries-projects/build-a-javascript-calculator.md +++ b/curriculum/challenges/japanese/03-front-end-development-libraries/front-end-development-libraries-projects/build-a-javascript-calculator.md @@ -7,53 +7,54 @@ dashedName: build-a-javascript-calculator --- # --description-- +**Note:** **React 18 has known incompatibilities with the tests for this project (see [issue](https://github.com/freeCodeCamp/freeCodeCamp/issues/45922))** -**目標:** こちらと似た機能を持つアプリを構築してください: https://javascript-calculator.freecodecamp.rocks +**Objective:** Build an app that is functionally similar to this: https://javascript-calculator.freecodecamp.rocks/. -以下のユーザーストーリーを満たし、すべてのテストが成功するようにしてください。 必要に応じて、どのようなライブラリあるいは API を使用してもかまいません。 あなた独自のアレンジを加えましょう。 +Fulfill the below user stories and get all of the tests to pass. Use whichever libraries or APIs you need. Give it your own personal style. -このプロジェクトを完了するために、HTML、JavaScript、CSS、Bootstrap、SASS、React、Redux、および jQuery を自在に組み合わせて利用することができます。 このセクションはフロントエンドフレームワークの学習を目的としていますので、React などのフロントエンドフレームワークを使用してください。 上記以外の他のテクノロジーは推奨されません。使用する場合は自己責任で行ってください。 Angular や Vue などの他のフロントエンドフレームワークのサポートを検討していますが、現時点ではサポートされていません。 このプロジェクトで推奨される一連のテクノロジーを使用している場合の不具合報告については、freeCodeCamp にて報告を受け入れ、修正するよう努めます。 コーディングの成功を祈ります！ +You can use any mix of HTML, JavaScript, CSS, Bootstrap, SASS, React, Redux, and jQuery to complete this project. You should use a frontend framework (like React for example) because this section is about learning frontend frameworks. Additional technologies not listed above are not recommended and using them is at your own risk. We are looking at supporting other frontend frameworks like Angular and Vue, but they are not currently supported. We will accept and try to fix all issue reports that use the suggested technology stack for this project. Happy coding! -**ユーザーストーリー 1:** `=` (等号) を含み、対応する `id="equals"` を持つ、クリック可能な要素が電卓にあります。 +**User Story #1:** My calculator should contain a clickable element containing an `=` (equal sign) with a corresponding `id="equals"`. -**ユーザーストーリー 2:** 0～9 の各数字を含み、次の対応する ID を持つ、10 個のクリック可能な要素が電卓にあります: `id="zero"`、`id="one"`、`id="two"`、`id="three"`、`id="four"`、`id="five"`、`id="six"`、`id="seven"`、`id="eight"`、`id="nine"`。 +**User Story #2:** My calculator should contain 10 clickable elements containing one number each from 0-9, with the following corresponding IDs: `id="zero"`, `id="one"`, `id="two"`, `id="three"`, `id="four"`, `id="five"`, `id="six"`, `id="seven"`, `id="eight"`, and `id="nine"`. -**ユーザーストーリー 3:** 4 つのクリック可能な要素が電卓にあり、各要素は、4 つの基本的な算術演算子のいずれかと、対応する ID (`id="add"`、`id="subtract"`、`id="multiply"`、`id="divide"`) を持ちます。 +**User Story #3:** My calculator should contain 4 clickable elements each containing one of the 4 primary mathematical operators with the following corresponding IDs: `id="add"`, `id="subtract"`, `id="multiply"`, `id="divide"`. -**ユーザーストーリー 4:** `.` (小数点) を含み、対応する `id="decimal"` を持つ、クリック可能な要素が電卓にあります。 +**User Story #4:** My calculator should contain a clickable element containing a `.` (decimal point) symbol with a corresponding `id="decimal"`. -**ユーザーストーリー 5:** `id="clear"` を持つクリック可能な要素が電卓にあります。 +**User Story #5:** My calculator should contain a clickable element with an `id="clear"`. -**ユーザーストーリー 6:** 値を表示するための要素が電卓にあり、対応する `id="display"` を持ちます。 +**User Story #6:** My calculator should contain an element to display values with a corresponding `id="display"`. -**ユーザーストーリー 7:** いつでも `clear` ボタンを押すと入力値と出力値がクリアされ、電卓が初期化後の状態に戻り、ID `display` を持つ要素に 0 が表示されます。 +**User Story #7:** At any time, pressing the `clear` button clears the input and output values, and returns the calculator to its initialized state; 0 should be shown in the element with the id of `display`. -**ユーザーストーリー 8:** 数字を入力すると、ID `display` を持つ要素に入力が表示されます。 +**User Story #8:** As I input numbers, I should be able to see my input in the element with the id of `display`. -**ユーザーストーリー 9:** 任意の長さの一連の数字について、任意の順序で加算・減算・乗算・除算ができ、`=` を押すと、ID `display` を持つ要素に正しい結果が表示されます。 +**User Story #9:** In any order, I should be able to add, subtract, multiply and divide a chain of numbers of any length, and when I hit `=`, the correct result should be shown in the element with the id of `display`. -**ユーザーストーリー 10:** 電卓に数字を入力する際、複数のゼロで始まる数字は入力できません。 +**User Story #10:** When inputting numbers, my calculator should not allow a number to begin with multiple zeros. -**ユーザーストーリー 11:** 小数点要素をクリックすると、現在表示されている値の後ろに `.` が追加されます。1 つの数字に 2 つの `.` を付けることはできません。 +**User Story #11:** When the decimal element is clicked, a `.` should append to the currently displayed value; two `.` in one number should not be accepted. -**ユーザーストーリー 12:** 小数点を含む数字の計算 (`+`、`-`、`*`、`/`) ができます。 +**User Story #12:** I should be able to perform any operation (`+`, `-`, `*`, `/`) on numbers containing decimal points. -**ユーザーストーリー 13:** 演算子を同時に 2 つ以上入力した場合は、最後に入力した演算 (負の記号 (`-`) を除く) が実行されます。 たとえば、`5 + * 7 =` と入力した場合の結果は `35` (`5 * 7`) になります。`5 * - 5 =` と入力した場合の結果は `-25` (`5 * (-5)`) になります。 +**User Story #13:** If 2 or more operators are entered consecutively, the operation performed should be the last operator entered (excluding the negative (`-`) sign). For example, if `5 + * 7 =` is entered, the result should be `35` (i.e. `5 * 7`); if `5 * - 5 =` is entered, the result should be `-25` (i.e. `5 * (-5)`). -**ユーザーストーリー 14:** `=` の直後に演算子を押すと、前の計算結果に対する新しい計算が開始されます。 +**User Story #14:** Pressing an operator immediately following `=` should start a new calculation that operates on the result of the previous evaluation. -**ユーザーストーリー 15:** 四捨五入については、小数点以下の桁数の精度になります (厳密な基準はありませんが、たとえば `2 / 7` のような計算を小数点以下 4 桁以上の適切な精度で処理することができます)。 +**User Story #15:** My calculator should have several decimal places of precision when it comes to rounding (note that there is no exact standard, but you should be able to handle calculations like `2 / 7` with reasonable precision to at least 4 decimal places). -**電卓のロジックについての注意:** 電卓の入力ロジックには、主に即時実行ロジックと数式ロジックの 2 つの考え方があります。 この例では数式ロジックを利用して計算の優先順位を確認しており、即時実行はしていません。 どちらも有効ですが、選択するロジックによっては、特定の式についてこの例と異なる結果になる場合があることに注意してください (下記の例を参照してください)。 別の計算機で計算を検証できる限り、こうしたバグについては考慮しないようお願いします。 +**Note On Calculator Logic:** It should be noted that there are two main schools of thought on calculator input logic: immediate execution logic and formula logic. Our example utilizes formula logic and observes order of operation precedence, immediate execution does not. Either is acceptable, but please note that depending on which you choose, your calculator may yield different results than ours for certain equations (see below example). As long as your math can be verified by another production calculator, please do not consider this a bug. -**例:** `3 + 5 x 6 - 2 / 4 =` +**EXAMPLE:** `3 + 5 x 6 - 2 / 4 =` - **即時実行ロジック:** `11.5` - **数式ロジック:** `32.5` -この CodePen テンプレートを使用して あなたのプロジェクトを構築することができます。`Save` をクリックすると、あなた用の pen を作成することができます。 または、下記の CDN リンクを使用して、使い慣れている環境でテストを実行することもできます: `https://cdn.freecodecamp.org/testable-projects-fcc/v1/bundle.js` +You can build your project by using this CodePen template and clicking `Save` to create your own pen. Or you can use this CDN link to run the tests in any environment you like: `https://cdn.freecodecamp.org/testable-projects-fcc/v1/bundle.js` -完了したら、すべてのテストが成功する状態の作業プロジェクトの URL を送信してください。 +Once you're done, submit the URL to your working project with all its tests passing. # --solutions-- diff --git a/curriculum/challenges/japanese/03-front-end-development-libraries/front-end-development-libraries-projects/build-a-markdown-previewer.md b/curriculum/challenges/japanese/03-front-end-development-libraries/front-end-development-libraries-projects/build-a-markdown-previewer.md index f458d0a2997..04c5214970b 100644 --- a/curriculum/challenges/japanese/03-front-end-development-libraries/front-end-development-libraries-projects/build-a-markdown-previewer.md +++ b/curriculum/challenges/japanese/03-front-end-development-libraries/front-end-development-libraries-projects/build-a-markdown-previewer.md @@ -7,30 +7,31 @@ dashedName: build-a-markdown-previewer --- # --description-- +**Note:** **React 18 has known incompatibilities with the tests for this project (see [issue](https://github.com/freeCodeCamp/freeCodeCamp/issues/45922))** -**目標:** こちらと似た機能を持つアプリを構築してください: https://markdown-previewer.freecodecamp.rocks +**Objective:** Build an app that is functionally similar to this: https://markdown-previewer.freecodecamp.rocks/. -以下のユーザーストーリーを満たし、すべてのテストが成功するようにしてください。 必要に応じて、どのようなライブラリあるいは API を使用してもかまいません。 あなた独自のアレンジを加えましょう。 +Fulfill the below user stories and get all of the tests to pass. Use whichever libraries or APIs you need. Give it your own personal style. -このプロジェクトを完了するために、HTML、JavaScript、CSS、Bootstrap、SASS、React、Redux、および jQuery を自在に組み合わせて利用することができます。 このセクションはフロントエンドフレームワークの学習を目的としていますので、React などのフロントエンドフレームワークを使用してください。 上記以外の他のテクノロジーは推奨されません。使用する場合は自己責任で行ってください。 Angular や Vue などの他のフロントエンドフレームワークのサポートを検討していますが、現時点ではサポートされていません。 このプロジェクトで推奨される一連のテクノロジーを使用している場合の不具合報告については、freeCodeCamp にて報告を受け入れ、修正するよう努めます。 コーディングの成功を祈ります！ +You can use any mix of HTML, JavaScript, CSS, Bootstrap, SASS, React, Redux, and jQuery to complete this project. You should use a frontend framework (like React for example) because this section is about learning frontend frameworks. Additional technologies not listed above are not recommended and using them is at your own risk. We are looking at supporting other frontend frameworks like Angular and Vue, but they are not currently supported. We will accept and try to fix all issue reports that use the suggested technology stack for this project. Happy coding! -**ユーザーストーリー 1:** 対応する `id="editor"` を持つ `textarea` 要素を表示できます。 +**User Story #1:** I can see a `textarea` element with a corresponding `id="editor"`. -**ユーザーストーリー 2:** 対応する `id="preview"` を持つ要素を表示できます。 +**User Story #2:** I can see an element with a corresponding `id="preview"`. -**ユーザーストーリー 3:** `#editor` 要素にテキストを入力すると、入力に応じて `#preview` 要素が更新され、テキストエリアの内容が表示されます。 +**User Story #3:** When I enter text into the `#editor` element, the `#preview` element is updated as I type to display the content of the textarea. -**ユーザーストーリー 4:** GitHub 対応のマークダウンを `#editor` 要素に入力すると、入力に応じて `#preview` 要素にテキストが HTML としてレンダーされます (ヒント: マークダウンを自分で解析する必要はありません。この処理のための Marked ライブラリをインポートできます: )。 +**User Story #4:** When I enter GitHub flavored markdown into the `#editor` element, the text is rendered as HTML in the `#preview` element as I type (HINT: You don't need to parse Markdown yourself - you can import the Marked library for this: ). -**ユーザーストーリー 5:** マークダウンプレビューアプリが初めて読み込まれるとき、`#editor` フィールドのデフォルトのテキストには、見出し要素 (H1 サイズ)、小見出し要素 (H2 サイズ)、リンク、インラインコード、コードブロック、リストアイテム、ブロッククォート、画像、太字テキストの各要素のうち少なくとも 1 つを表す有効なマークダウンが含まれている必要があります。 +**User Story #5:** When my markdown previewer first loads, the default text in the `#editor` field should contain valid markdown that represents at least one of each of the following elements: a heading element (H1 size), a sub heading element (H2 size), a link, inline code, a code block, a list item, a blockquote, an image, and bolded text. -**ユーザーストーリー 6:** マークダウンプレビューアプリが初めて読み込まれるとき、`#editor` フィールドのデフォルトのマークダウンが `#preview` 要素に HTML としてレンダーされます。 +**User Story #6:** When my markdown previewer first loads, the default markdown in the `#editor` field should be rendered as HTML in the `#preview` element. -**オプションボーナス (このテストを成功させる必要はありません):** マークダウンプレビューアプリは、キャリッジリターンを解釈し、それらを `br` (改行) 要素としてレンダーします。 +**Optional Bonus (you do not need to make this test pass):** My markdown previewer interprets carriage returns and renders them as `br` (line break) elements. -この CodePen テンプレートを使用して あなたのプロジェクトを構築することができます。`Save` をクリックすると、あなた用の pen を作成することができます。 または、下記の CDN リンクを使用して、使い慣れている環境でテストを実行することもできます: `https://cdn.freecodecamp.org/testable-projects-fcc/v1/bundle.js` +You can build your project by using this CodePen template and clicking `Save` to create your own pen. Or you can use this CDN link to run the tests in any environment you like: `https://cdn.freecodecamp.org/testable-projects-fcc/v1/bundle.js` -完了したら、すべてのテストが成功する状態の作業プロジェクトの URL を送信してください。 +Once you're done, submit the URL to your working project with all its tests passing. # --solutions-- diff --git a/curriculum/challenges/japanese/03-front-end-development-libraries/front-end-development-libraries-projects/build-a-random-quote-machine.md b/curriculum/challenges/japanese/03-front-end-development-libraries/front-end-development-libraries-projects/build-a-random-quote-machine.md index b374596b5a9..21a8ecbedbd 100644 --- a/curriculum/challenges/japanese/03-front-end-development-libraries/front-end-development-libraries-projects/build-a-random-quote-machine.md +++ b/curriculum/challenges/japanese/03-front-end-development-libraries/front-end-development-libraries-projects/build-a-random-quote-machine.md @@ -7,40 +7,41 @@ dashedName: build-a-random-quote-machine --- # --description-- +**Note:** **React 18 has known incompatibilities with the tests for this project (see [issue](https://github.com/freeCodeCamp/freeCodeCamp/issues/45922))** -**目標:** こちらと似た機能を持つアプリを構築してください: https://random-quote-machine.freecodecamp.rocks +**Objective:** Build an app that is functionally similar to this: https://random-quote-machine.freecodecamp.rocks/. -以下のユーザーストーリーを満たし、すべてのテストが成功するようにしてください。 必要に応じて、どのようなライブラリあるいは API を使用してもかまいません。 あなた独自のアレンジを加えましょう。 +Fulfill the below user stories and get all of the tests to pass. Use whichever libraries or APIs you need. Give it your own personal style. -このプロジェクトを完了するために、HTML、JavaScript、CSS、Bootstrap、SASS、React、Redux、および jQuery を自在に組み合わせて利用することができます。 このセクションはフロントエンドフレームワークの学習を目的としていますので、React などのフロントエンドフレームワークを使用してください。 上記以外の他のテクノロジーは推奨されません。使用する場合は自己責任で行ってください。 Angular や Vue などの他のフロントエンドフレームワークのサポートを検討していますが、現時点ではサポートされていません。 このプロジェクトで推奨される一連のテクノロジーを使用している場合の不具合報告については、freeCodeCamp にて報告を受け入れ、修正するよう努めます。 コーディングの成功を祈ります！ +You can use any mix of HTML, JavaScript, CSS, Bootstrap, SASS, React, Redux, and jQuery to complete this project. You should use a frontend framework (like React for example) because this section is about learning frontend frameworks. Additional technologies not listed above are not recommended and using them is at your own risk. We are looking at supporting other frontend frameworks like Angular and Vue, but they are not currently supported. We will accept and try to fix all issue reports that use the suggested technology stack for this project. Happy coding! -**ユーザーストーリー 1:** 対応する `id="quote-box"` を持つラッパー要素を表示できます。 +**User Story #1:** I can see a wrapper element with a corresponding `id="quote-box"`. -**ユーザーストーリー 2:** `#quote-box` の中に、対応する `id="text"` を持つ要素を表示できます。 +**User Story #2:** Within `#quote-box`, I can see an element with a corresponding `id="text"`. -**ユーザーストーリー 3:** `#quote-box` の中に、対応する `id="author"` を持つ要素を表示できます。 +**User Story #3:** Within `#quote-box`, I can see an element with a corresponding `id="author"`. -**ユーザーストーリー 4:** `#quote-box` の中に、対応する `id="new-quote"` を持つ要素を表示できます。 +**User Story #4:** Within `#quote-box`, I can see a clickable element with a corresponding `id="new-quote"`. -**ユーザーストーリー 5:** `#quote-box` の中に、対応する `id="tweet-quote"` を持つクリック可能な `a` 要素を表示できます。 +**User Story #5:** Within `#quote-box`, I can see a clickable `a` element with a corresponding `id="tweet-quote"`. -**ユーザーストーリー 6:** クォートマシンの初回読み込み時に、`id="text"` を持つ要素に、ランダムクォートが表示されます。 +**User Story #6:** On first load, my quote machine displays a random quote in the element with `id="text"`. -**ユーザーストーリー 7:** クォートマシンの初回読み込み時に、`id="author"` を持つ要素に、ランダムクォートの作成者が表示されます。 +**User Story #7:** On first load, my quote machine displays the random quote's author in the element with `id="author"`. -**ユーザーストーリー 8:** クォートマシンの `#new-quote` ボタンをクリックすると、新しいクォートが取得されて `#text` 要素に表示されます。 +**User Story #8:** When the `#new-quote` button is clicked, my quote machine should fetch a new quote and display it in the `#text` element. -**ユーザーストーリー 9:** クォートマシンの `#new-quote` ボタンをクリックすると、新しいクォートの作成者が取得されて `#author` 要素に表示されます。 +**User Story #9:** My quote machine should fetch the new quote's author when the `#new-quote` button is clicked and display it in the `#author` element. -**ユーザーストーリー 10:** `#tweet-quote` の `a` 要素をクリックして現在のクォートをツイートできます。 この `a` 要素の `href` 属性には、現在のクォートをツイートするための `"twitter.com/intent/tweet"` パスが含まれています。 +**User Story #10:** I can tweet the current quote by clicking on the `#tweet-quote` `a` element. This `a` element should include the `"twitter.com/intent/tweet"` path in its `href` attribute to tweet the current quote. -**ユーザーストーリー 11:** `#quote-box` ラッパー要素は水平方向に中央寄せされます。 ブラウザのズームレベルを 100% にし、ページを最大化してテストしてください。 +**User Story #11:** The `#quote-box` wrapper element should be horizontally centered. Please run tests with browser's zoom level at 100% and page maximized. -この CodePen テンプレートを使用して あなたのプロジェクトを構築することができます。`Save` をクリックすると、あなた用の pen (CodePen 上の作品) を作成することができます。 または、下記の CDN リンクを使用して、使い慣れている環境でテストを実行することもできます: `https://cdn.freecodecamp.org/testable-projects-fcc/v1/bundle.js` +You can build your project by using this CodePen template and clicking `Save` to create your own pen. Or you can use this CDN link to run the tests in any environment you like: `https://cdn.freecodecamp.org/testable-projects-fcc/v1/bundle.js` -完了したら、すべてのテストが成功する状態の作業プロジェクトの URL を送信してください。 +Once you're done, submit the URL to your working project with all its tests passing. -**注:** Twitterでは、iframe にリンクを読み込むことはできません。 ツイートが読み込まれない場合は、`#tweet-quote` 要素で `target="_blank"` または `target="_top"` 属性を使用してみてください。 `target="_top"` は現在のタブを置き換えるので、作業が保存されていることを確認してください。 +**Note:** Twitter does not allow links to be loaded in an iframe. Try using the `target="_blank"` or `target="_top"` attribute on the `#tweet-quote` element if your tweet won't load. `target="_top"` will replace the current tab so make sure your work is saved. # --solutions-- diff --git a/curriculum/challenges/portuguese/03-front-end-development-libraries/front-end-development-libraries-projects/build-a-25-5-clock.md b/curriculum/challenges/portuguese/03-front-end-development-libraries/front-end-development-libraries-projects/build-a-25-5-clock.md index 18b7f725877..3d38dd0b380 100644 --- a/curriculum/challenges/portuguese/03-front-end-development-libraries/front-end-development-libraries-projects/build-a-25-5-clock.md +++ b/curriculum/challenges/portuguese/03-front-end-development-libraries/front-end-development-libraries-projects/build-a-25-5-clock.md @@ -8,71 +8,73 @@ dashedName: build-a-25--5-clock # --description-- -**Objetivo:** criar uma aplicação que funcione de modo semelhante ao que vemos em: https://25--5-clock.freecodecamp.rocks. +**Note:** **React 18 has known incompatibilities with the tests for this project (see [issue](https://github.com/freeCodeCamp/freeCodeCamp/issues/45922))** -Atenda às histórias de usuário abaixo e faça com que todos os testes passem. Use quaisquer bibliotecas ou APIs de que você precisar. Dê ao projeto o seu próprio estilo pessoal. +**Objective:** Build an app that is functionally similar to this: https://25--5-clock.freecodecamp.rocks. -Você pode usar qualquer mistura de HTML, JavaScript, CSS, Bootstrap, SASS, React, Redux e JQuery para completar este projeto. Você deve usar um framework de front-end (como React por exemplo) porque essa seção trata de aprender frameworks de front-end. Tecnologias adicionais não listadas acima não são recomendadas e usá-las é por sua conta e risco. Estamos buscando apoiar outros frameworks de front-end, como Angular e Vue, mas eles não são atualmente suportados. Vamos aceitar e tentar corrigir todos os relatórios de problemas que usem o conjunto de tecnologias sugeridas para esse projeto. Boa programação! +Fulfill the below user stories and get all of the tests to pass. Use whichever libraries or APIs you need. Give it your own personal style. -**História de usuário nº 1:** eu consigo ver um elemento com `id="break-label"` que contém uma string (por exemplo, "Duração do intervalo"). +You can use any mix of HTML, JavaScript, CSS, Bootstrap, SASS, React, Redux, and jQuery to complete this project. You should use a frontend framework (like React for example) because this section is about learning frontend frameworks. Additional technologies not listed above are not recommended and using them is at your own risk. We are looking at supporting other frontend frameworks like Angular and Vue, but they are not currently supported. We will accept and try to fix all issue reports that use the suggested technology stack for this project. Happy coding! -**História de usuário nº 2:** eu consigo ver um elemento com `id="session-label"` que contém uma string (por exemplo, "Duração da sessão"). +**User Story #1:** I can see an element with `id="break-label"` that contains a string (e.g. "Break Length"). -**História de usuário nº 3:** eu consigo ver dois elementos clicáveis com os IDs correspondentes: `id="break-decrement"` e `id="session-decrement"`. +**User Story #2:** I can see an element with `id="session-label"` that contains a string (e.g. "Session Length"). -**História de usuário nº 4:** eu consigo ver dois elementos clicáveis com os IDs correspondentes: `id="break-increment"` e `id="session-increment"`. +**User Story #3:** I can see two clickable elements with corresponding IDs: `id="break-decrement"` and `id="session-decrement"`. -**História de usuário nº 5:** eu consigo ver um elemento com um `id="break-length"` correspondente, e que, por padrão (no carregamento), exibe o valor de 5. +**User Story #4:** I can see two clickable elements with corresponding IDs: `id="break-increment"` and `id="session-increment"`. -**História de usuário nº 6:** eu consigo ver um elemento com um `id="session-length"` correspondente, e que, por padrão, exibe o valor de 25. +**User Story #5:** I can see an element with a corresponding `id="break-length"`, which by default (on load) displays a value of 5. -**História de usuário nº 7:** eu consigo ver um elemento com um `id="timer-label"` correspondente, e que contém a string indicando que uma sessão foi inicializada (por exemplo, "Sessão"). +**User Story #6:** I can see an element with a corresponding `id="session-length"`, which by default displays a value of 25. -**História de usuário nº 8:** eu consigo ver um elemento com `id="time-left"` correspondente. OBSERVAÇÃO: pausado ou em execução, o valor nesse campo deve sempre ser exibido no formato `mm:ss` (por exemplo, 25:00). +**User Story #7:** I can see an element with a corresponding `id="timer-label"`, that contains a string indicating a session is initialized (e.g. "Session"). -**História de usuário nº 9:** eu consigo ver um elemento clicável com `id="start_stop"` correspondente. +**User Story #8:** I can see an element with corresponding `id="time-left"`. NOTE: Paused or running, the value in this field should always be displayed in `mm:ss` format (i.e. 25:00). -**História de usuário nº 10:** eu consigo ver um elemento clicável com `id="reset"` correspondente. +**User Story #9:** I can see a clickable element with a corresponding `id="start_stop"`. -**História de usuário nº 11:** quando eu clico no elemento com id `reset`, qualquer temporizador em execução deve ser parado. O valor dentro de `id="break-length"` deve retornar `5`, o valor dentro de `id="session-length"` deve retornar 25, e o elemento com `id="time-left"` deve ser redefinido para o seu estado padrão. +**User Story #10:** I can see a clickable element with a corresponding `id="reset"`. -**História de usuário nº 12:** quando eu clico no elemento com o id `break-decrement`, o valor dentro de `id="break-length"` decrementa 1, e eu consigo ver o valor atualizado. +**User Story #11:** When I click the element with the id of `reset`, any running timer should be stopped, the value within `id="break-length"` should return to `5`, the value within `id="session-length"` should return to 25, and the element with `id="time-left"` should reset to its default state. -**História de usuário nº 13:** quando eu clico no elemento com id `break-increment`, o valor dentro de `id="break-length"` incrementa 1, e eu consigo ver o valor atualizado. +**User Story #12:** When I click the element with the id of `break-decrement`, the value within `id="break-length"` decrements by a value of 1, and I can see the updated value. -**História de usuário nº 14:** quando eu clico no elemento com id `session-decrement`, o valor dentro de `id="session-length"` decrementa 1, e eu consigo ver o valor atualizado. +**User Story #13:** When I click the element with the id of `break-increment`, the value within `id="break-length"` increments by a value of 1, and I can see the updated value. -**História de usuário nº 15:** quando eu clico no elemento com id `session-increment`, o valor dentro de `id="session-length"` incrementa 1, e eu consigo ver o valor atualizado. +**User Story #14:** When I click the element with the id of `session-decrement`, the value within `id="session-length"` decrements by a value of 1, and I can see the updated value. -**História de usuário nº 16:** eu não devo poder definir um comprimento de sessão ou de intervalo para <= 0. +**User Story #15:** When I click the element with the id of `session-increment`, the value within `id="session-length"` increments by a value of 1, and I can see the updated value. -**História de usuário nº 17:** eu não devo ser capaz de definir um comprimento de sessão ou de intervalo para > 60. +**User Story #16:** I should not be able to set a session or break length to <= 0. -**História de usuário nº 18:** quando eu clico pela primeira vez no elemento com `id="start_stop"`, o temporizador deve começar a correr a partir do valor exibido atualmente em `id="session-length"`, mesmo se o valor foi incrementado ou decrementado do valor original 25. +**User Story #17:** I should not be able to set a session or break length to > 60. -**História de usuário nº 19:** se o temporizador estiver em execução, o elemento com id `time-left` deve exibir o tempo restante no formato `mm:ss` (decrementando 1 e atualizando a saída a cada 1000ms). +**User Story #18:** When I first click the element with `id="start_stop"`, the timer should begin running from the value currently displayed in `id="session-length"`, even if the value has been incremented or decremented from the original value of 25. -**História de usuário nº 20:** se o timer estiver em execução e eu clicar no elemento com `id="start_stop"`, a contagem regressiva deve pausar. +**User Story #19:** If the timer is running, the element with the id of `time-left` should display the remaining time in `mm:ss` format (decrementing by a value of 1 and updating the display every 1000ms). -**História de usuário nº 21:** se o temporizador estiver pausado e eu clicar no elemento com `id="start_stop"`, a contagem regressiva deve continuar rodando a partir do ponto no qual foi pausado. +**User Story #20:** If the timer is running and I click the element with `id="start_stop"`, the countdown should pause. -**História de usuário nº 22:** quando a contagem regressiva de sessão chegar a zero (OBSERVAÇÃO: o temporizador DEVE alcançar 00:00), e uma nova contagem regressiva iniciar, o elemento com id `timer-label` deve exibir uma string indicando que um intervalo foi iniciado. +**User Story #21:** If the timer is paused and I click the element with `id="start_stop"`, the countdown should resume running from the point at which it was paused. -**História de usuário nº 23:** quando a contagem regressiva de sessão alcançar zero (OBSERVAÇÃO: o temporizador DEVE alcançar 00:00), uma nova contagem regressiva de intervalo deve iniciar, contando regressivamente a partir do valor atualmente exibido no elemento `id="break-length"`. +**User Story #22:** When a session countdown reaches zero (NOTE: timer MUST reach 00:00), and a new countdown begins, the element with the id of `timer-label` should display a string indicating a break has begun. -**História de usuário nº 24:** quando a contagem regressiva de intervalo alcançar zero (OBSERVAÇÃO: o temporizador DEVE alcançar 00:00) e uma nova contagem regressiva iniciar, o elemento com o id `timer-label` deve exibir a string indicando que uma sessão foi iniciada. +**User Story #23:** When a session countdown reaches zero (NOTE: timer MUST reach 00:00), a new break countdown should begin, counting down from the value currently displayed in the `id="break-length"` element. -**História de usuário nº 25:** quando a contagem regressiva de intervalo alcançar zero (OBSERVAÇÃO: o temporizador DEVE alcançar 00:00), uma nova contagem regressiva de sessão deve iniciar, contando regressivamente a partir do valor atualmente exibido no elemento com `id="session-length"`. +**User Story #24:** When a break countdown reaches zero (NOTE: timer MUST reach 00:00), and a new countdown begins, the element with the id of `timer-label` should display a string indicating a session has begun. -**História de usuário nº 26:** quando uma contagem regressiva alcançar zero (OBSERVAÇÃO: o temporizador DEVE alcançar 00:00), um som indicando que o tempo acabou deve ser reproduzido. Isso deve utilizar uma tag HTML5 `audio` e ter um id correspondente a `id="beep"`. +**User Story #25:** When a break countdown reaches zero (NOTE: timer MUST reach 00:00), a new session countdown should begin, counting down from the value currently displayed in the `id="session-length"` element. -**História de usuário nº 27:** o elemento audio com `id="beep"` deve ter 1 segundo ou mais de duração. +**User Story #26:** When a countdown reaches zero (NOTE: timer MUST reach 00:00), a sound indicating that time is up should play. This should utilize an HTML5 `audio` tag and have a corresponding `id="beep"`. -**História de usuário nº 28:** o elemento audio com id `beep` deve parar de reproduzir e ser rebobinado para começar quando o elemento com o id `reset` for clicado. +**User Story #27:** The audio element with `id="beep"` must be 1 second or longer. -Você pode fazer o seu projeto usando este modelo da CodePen e clicando em `Save` para criar seu próprio pen. Como alternativa, use este link da nossa CDN para executar os testes em qualquer ambiente que você preferir: `https://cdn.freecodecamp.org/testable-projects-fcc/v1/bundle.js` +**User Story #28:** The audio element with id of `beep` must stop playing and be rewound to the beginning when the element with the id of `reset` is clicked. -Quando tiver terminado, envie o URL do seu projeto depois de ele haver passado em todos os testes. +You can build your project by using this CodePen template and clicking `Save` to create your own pen. Or you can use this CDN link to run the tests in any environment you like: `https://cdn.freecodecamp.org/testable-projects-fcc/v1/bundle.js` + +Once you're done, submit the URL to your working project with all its tests passing. # --solutions-- diff --git a/curriculum/challenges/portuguese/03-front-end-development-libraries/front-end-development-libraries-projects/build-a-drum-machine.md b/curriculum/challenges/portuguese/03-front-end-development-libraries/front-end-development-libraries-projects/build-a-drum-machine.md index 9c0bfe1a48d..133040e68f1 100644 --- a/curriculum/challenges/portuguese/03-front-end-development-libraries/front-end-development-libraries-projects/build-a-drum-machine.md +++ b/curriculum/challenges/portuguese/03-front-end-development-libraries/front-end-development-libraries-projects/build-a-drum-machine.md @@ -7,28 +7,29 @@ dashedName: build-a-drum-machine --- # --description-- +**Note:** **React 18 has known incompatibilities with the tests for this project (see [issue](https://github.com/freeCodeCamp/freeCodeCamp/issues/45922))** -**Objetivo:** criar uma aplicação que funcione de modo semelhante ao que vemos em: https://drum-machine.freecodecamp.rocks/. +**Objective:** Build an app that is functionally similar to this: https://drum-machine.freecodecamp.rocks/. -Atenda às histórias de usuário abaixo e faça com que todos os testes passem. Use quaisquer bibliotecas ou APIs de que você precisar. Dê ao projeto o seu próprio estilo pessoal. +Fulfill the below user stories and get all of the tests to pass. Use whichever libraries or APIs you need. Give it your own personal style. -Você pode usar qualquer mistura de HTML, JavaScript, CSS, Bootstrap, SASS, React, Redux e JQuery para completar este projeto. Você deve usar um framework de front-end (como React por exemplo) porque essa seção trata de aprender frameworks de front-end. Tecnologias adicionais não listadas acima não são recomendadas e usá-las é por sua conta e risco. Estamos buscando apoiar outros frameworks de front-end, como Angular e Vue, mas eles não são atualmente suportados. Vamos aceitar e tentar corrigir todos os relatórios de problemas que usem o conjunto de tecnologias sugeridas para esse projeto. Boa programação! +You can use any mix of HTML, JavaScript, CSS, Bootstrap, SASS, React, Redux, and jQuery to complete this project. You should use a frontend framework (like React for example) because this section is about learning frontend frameworks. Additional technologies not listed above are not recommended and using them is at your own risk. We are looking at supporting other frontend frameworks like Angular and Vue, but they are not currently supported. We will accept and try to fix all issue reports that use the suggested technology stack for this project. Happy coding! -**História de usuário nº 1:** eu devo ser capaz de ver um contêiner externo com um `id="drum-machine"` correspondente que contém todos os outros elementos. +**User Story #1:** I should be able to see an outer container with a corresponding `id="drum-machine"` that contains all other elements. -**História de usuário nº 2:** dentro de `#drum-machine`, eu consigo ver um elemento com um `id="display"` correspondente. +**User Story #2:** Within `#drum-machine` I can see an element with a corresponding `id="display"`. -**História de usuário nº 3:** dentro de `#drum-machine`, eu consigo ver 9 elementos de tambores clicáveis, cada um com o nome de classe `drum-pad`, um id único que descreve o clipe de áudio que o tambor será definido para executar, e um texto interno que corresponde a uma das teclas do teclado a seguir: `Q`, `W`, `E`, `A`, `S`, `D`, `Z`, `X`, `C`. Os tambores DEVEM estar nesta ordem. +**User Story #3:** Within `#drum-machine` I can see 9 clickable drum pad elements, each with a class name of `drum-pad`, a unique id that describes the audio clip the drum pad will be set up to trigger, and an inner text that corresponds to one of the following keys on the keyboard: `Q`, `W`, `E`, `A`, `S`, `D`, `Z`, `X`, `C`. The drum pads MUST be in this order. -**História de usuário nº 4:** dentro de cada `.drum-pad`, deve haver um elemento HTML5 `audio`, que tem o atributo `src` apontando para um clipe de áudio, o nome de classe `clip`, e um id correspondendo ao texto interno do seu `.drum-pad` pai (por exemplo, `id="Q"`, `id="W"`, `id="E"` e assim por diante). +**User Story #4:** Within each `.drum-pad`, there should be an HTML5 `audio` element which has a `src` attribute pointing to an audio clip, a class name of `clip`, and an id corresponding to the inner text of its parent `.drum-pad` (e.g. `id="Q"`, `id="W"`, `id="E"` etc.). -**História de usuário nº 5:** quando eu clico em um elemento `.drum-pad`, o clipe de áudio dentro do seu elemento filho `audio` deve ser ativado. +**User Story #5:** When I click on a `.drum-pad` element, the audio clip contained in its child `audio` element should be triggered. -**História de usuário nº 6:** quando eu pressionar a tecla de disparo associada a cada `.drum-pad`, o clipe de áudio dentro do elemento filho `audio` deve ser ativado (por exemplo, ao pressionar a tecla `Q`, deve ser acionado o tambor que tem a string `Q`, ao pressionar a tecla `W`, deve ser acionado o tambor que contém a string `W` e assim por diante). +**User Story #6:** When I press the trigger key associated with each `.drum-pad`, the audio clip contained in its child `audio` element should be triggered (e.g. pressing the `Q` key should trigger the drum pad which contains the string `Q`, pressing the `W` key should trigger the drum pad which contains the string `W`, etc.). -**História de usuário nº 7:** quando um `.drum-pad` é acionado, uma string descrevendo o clipe de áudio associado é exibido como o texto interno do elemento `#display` (cada string precisa ser única). +**User Story #7:** When a `.drum-pad` is triggered, a string describing the associated audio clip is displayed as the inner text of the `#display` element (each string must be unique). -Aqui estão algumas amostras de áudio que você pode usar para sua bateria eletrônica: +Here are some audio samples you can use for your drum machine: - [Heater 1](https://s3.amazonaws.com/freecodecamp/drums/Heater-1.mp3) - [Heater 2](https://s3.amazonaws.com/freecodecamp/drums/Heater-2.mp3) @@ -40,9 +41,9 @@ Aqui estão algumas amostras de áudio que você pode usar para sua bateria elet - [Kick](https://s3.amazonaws.com/freecodecamp/drums/RP4_KICK_1.mp3) - [Closed-HH](https://s3.amazonaws.com/freecodecamp/drums/Cev_H2.mp3) -Você pode fazer o seu projeto usando este modelo da CodePen e clicando em `Save` para criar seu próprio pen. Ou você pode usar esse link CDN para rodar os testes em qualquer ambiente que você goste:`https://cdn.freecodecamp.org/testable-projects-fcc/v1/bundle.js` +You can build your project by using this CodePen template and clicking `Save` to create your own pen. Or you can use this CDN link to run the tests in any environment you like: `https://cdn.freecodecamp.org/testable-projects-fcc/v1/bundle.js` -Quando você terminar, envie o URL do seu projeto depois de ele haver passado em todos os testes. +Once you're done, submit the URL to your working project with all its tests passing. # --solutions-- diff --git a/curriculum/challenges/portuguese/03-front-end-development-libraries/front-end-development-libraries-projects/build-a-javascript-calculator.md b/curriculum/challenges/portuguese/03-front-end-development-libraries/front-end-development-libraries-projects/build-a-javascript-calculator.md index cc76954a625..19b059af5dd 100644 --- a/curriculum/challenges/portuguese/03-front-end-development-libraries/front-end-development-libraries-projects/build-a-javascript-calculator.md +++ b/curriculum/challenges/portuguese/03-front-end-development-libraries/front-end-development-libraries-projects/build-a-javascript-calculator.md @@ -7,53 +7,54 @@ dashedName: build-a-javascript-calculator --- # --description-- +**Note:** **React 18 has known incompatibilities with the tests for this project (see [issue](https://github.com/freeCodeCamp/freeCodeCamp/issues/45922))** -**Objetivo:** criar uma aplicação que funcione de modo semelhante ao que vemos em: https://javascript-calculator.freecodecamp.rocks/. +**Objective:** Build an app that is functionally similar to this: https://javascript-calculator.freecodecamp.rocks/. -Atenda às histórias de usuário abaixo e faça com que todos os testes passem. Use quaisquer bibliotecas ou APIs de que você precisar. Dê ao projeto o seu próprio estilo pessoal. +Fulfill the below user stories and get all of the tests to pass. Use whichever libraries or APIs you need. Give it your own personal style. -Você pode usar qualquer mistura de HTML, JavaScript, CSS, Bootstrap, SASS, React, Redux e JQuery para completar este projeto. Você deve usar um framework de front-end (como React por exemplo) porque essa seção trata de aprender frameworks de front-end. Tecnologias adicionais não listadas acima não são recomendadas e usá-las é por sua conta e risco. Estamos buscando apoiar outros frameworks de front-end, como Angular e Vue, mas eles não são atualmente suportados. Vamos aceitar e tentar corrigir todos os relatórios de problemas que usem o conjunto de tecnologias sugeridas para esse projeto. Boa programação! +You can use any mix of HTML, JavaScript, CSS, Bootstrap, SASS, React, Redux, and jQuery to complete this project. You should use a frontend framework (like React for example) because this section is about learning frontend frameworks. Additional technologies not listed above are not recommended and using them is at your own risk. We are looking at supporting other frontend frameworks like Angular and Vue, but they are not currently supported. We will accept and try to fix all issue reports that use the suggested technology stack for this project. Happy coding! -**História de usuário nº 1:** minha calculadora deve conter um elemento clicável contendo um `=` (sinal de igualdade) com o `id="equals"` correspondente. +**User Story #1:** My calculator should contain a clickable element containing an `=` (equal sign) with a corresponding `id="equals"`. -**História de usuário nº 2:** minha calculadora deve conter 10 elementos clicáveis contendo um número cada, de 0 até 9, com os ids correspondentes a seguir: `id="zero"`, `id="one"`, `id="two"`, `id="three"`, `id="four"`, `id="five"`, `id="six"`, `id="seven"`, `id="eight"` e `id="nine"`. +**User Story #2:** My calculator should contain 10 clickable elements containing one number each from 0-9, with the following corresponding IDs: `id="zero"`, `id="one"`, `id="two"`, `id="three"`, `id="four"`, `id="five"`, `id="six"`, `id="seven"`, `id="eight"`, and `id="nine"`. -**História de usuário nº 3:** minha calculadora deve conter 4 elementos clicáveis, cada um contendo uma das 4 operações matemáticas primárias com os ids correspondentes a seguir: `id="add"`, `id="subtract"`, `id="multiply"`, `id="divide"`. +**User Story #3:** My calculator should contain 4 clickable elements each containing one of the 4 primary mathematical operators with the following corresponding IDs: `id="add"`, `id="subtract"`, `id="multiply"`, `id="divide"`. -**História de usuário nº 4:** minha calculadora deve conter um elemento clicável contendo o símbolo `.` (ponto decimal) com o `id="decimal"` correspondente. +**User Story #4:** My calculator should contain a clickable element containing a `.` (decimal point) symbol with a corresponding `id="decimal"`. -**História de usuário nº 5:** minha calculadora deve conter um elemento clicável com um `id="clear"`. +**User Story #5:** My calculator should contain a clickable element with an `id="clear"`. -**História de usuário nº 6:** minha calculadora deve conter um elemento para exibir valores com o `id="display"` correspondente. +**User Story #6:** My calculator should contain an element to display values with a corresponding `id="display"`. -**História de usuário nº 7:** a qualquer momento, pressionar o botão `clear` limpará os valores de entrada e saída, e retornará a calculadora ao seu estado inicial. "0" deve ser mostrado no elemento com o id `display`. +**User Story #7:** At any time, pressing the `clear` button clears the input and output values, and returns the calculator to its initialized state; 0 should be shown in the element with the id of `display`. -**História de usuário nº 8:** enquanto eu coloco números de entrada, eu devo ser capaz de ver a minha entrada no elemento com id `display`. +**User Story #8:** As I input numbers, I should be able to see my input in the element with the id of `display`. -**História de usuário nº 9:** em qualquer ordem, eu devo ser capaz de adicionar, subtrair, multiplicar e dividir uma cadeia de números de qualquer tamanho, e quando eu pressionar `=`, o resultado correto deve ser mostrado no elemento com id `display`. +**User Story #9:** In any order, I should be able to add, subtract, multiply and divide a chain of numbers of any length, and when I hit `=`, the correct result should be shown in the element with the id of `display`. -**História de usuário nº 10:** ao inserir números, minha calculadora não deve permitir um número de começar com múltiplos zeros. +**User Story #10:** When inputting numbers, my calculator should not allow a number to begin with multiple zeros. -**História de usuário nº 11:** quando o elemento decimal for clicado, um `.` deve ser adicionado ao valor atualmente exibido. Dois `.` em um número não devem ser aceitos. +**User Story #11:** When the decimal element is clicked, a `.` should append to the currently displayed value; two `.` in one number should not be accepted. -**História de usuário nº 12:** eu devo ser capaz de executar qualquer operação (`+`, `-`, `*`, `/`) em números contendo pontos decimais. +**User Story #12:** I should be able to perform any operation (`+`, `-`, `*`, `/`) on numbers containing decimal points. -**História de usuário nº 13:** Se 2 ou mais operadores forem inseridos consecutivamente, a operação executada deve ser o último operador inserido, excluindo o símbolo de negação (`-`). Por exemplo, se `5 + * 7 =` for inserido, o resultado deve ser `35` (ou seja, `5 * 7`); se `5 * - 5 =` for inserido, o resultado deve ser `-25` (ou seja, `5 * (-5)`). +**User Story #13:** If 2 or more operators are entered consecutively, the operation performed should be the last operator entered (excluding the negative (`-`) sign). For example, if `5 + * 7 =` is entered, the result should be `35` (i.e. `5 * 7`); if `5 * - 5 =` is entered, the result should be `-25` (i.e. `5 * (-5)`). -**História de usuário nº 14:** pressionar um operador imediatamente após um `=` deve iniciar um novo cálculo que opera no resultado da avaliação anterior. +**User Story #14:** Pressing an operator immediately following `=` should start a new calculation that operates on the result of the previous evaluation. -**História de usuário nº 15:** minha calculadora deve ter diversas casas decimais de precisão ao se tratar de arredondamento (note que não há um padrão exato, mas você deve ser capaz de lidar com cálculos como `2 / 7` com precisão razoável de pelo menos 4 casas decimais). +**User Story #15:** My calculator should have several decimal places of precision when it comes to rounding (note that there is no exact standard, but you should be able to handle calculations like `2 / 7` with reasonable precision to at least 4 decimal places). -**Nota para a lógica da calculadora:** deve-se notar que há duas principais escolas de pensamento na lógica de entrada da calculadora: a lógica da execução imediata e a lógica da fórmula. Nosso exemplo utiliza a lógica da fórmula e observa a ordem de precedência de operação. A lógica de execução imediata não faz isso. Qualquer uma é aceitável, mas observe que, dependendo de qual você escolher, sua calculadora pode alcançar diferentes resultados do que os nossos para certas equações (veja abaixo um exemplo). Desde que sua matemática possa ser verificada por outra calculadora em produção, não considere isso um bug. +**Note On Calculator Logic:** It should be noted that there are two main schools of thought on calculator input logic: immediate execution logic and formula logic. Our example utilizes formula logic and observes order of operation precedence, immediate execution does not. Either is acceptable, but please note that depending on which you choose, your calculator may yield different results than ours for certain equations (see below example). As long as your math can be verified by another production calculator, please do not consider this a bug. -**EXEMPLO:** `3 + 5 x 6 - 2 / 4 =` +**EXAMPLE:** `3 + 5 x 6 - 2 / 4 =` - **Lógica de execução imediata:** `11.5` - **Lógica de fórmula/expressão:** `32.5` -Você pode fazer o seu projeto usando este modelo da CodePen e clicando em `Save` para criar seu próprio pen. Como alternativa, use este link da nossa CDN para executar os testes em qualquer ambiente que você preferir: `https://cdn.freecodecamp.org/testable-projects-fcc/v1/bundle.js` +You can build your project by using this CodePen template and clicking `Save` to create your own pen. Or you can use this CDN link to run the tests in any environment you like: `https://cdn.freecodecamp.org/testable-projects-fcc/v1/bundle.js` -Quando tiver terminado, envie o URL do seu projeto depois de ele haver passado em todos os testes. +Once you're done, submit the URL to your working project with all its tests passing. # --solutions-- diff --git a/curriculum/challenges/portuguese/03-front-end-development-libraries/front-end-development-libraries-projects/build-a-markdown-previewer.md b/curriculum/challenges/portuguese/03-front-end-development-libraries/front-end-development-libraries-projects/build-a-markdown-previewer.md index 0a3c172cce9..ff6f04977f3 100644 --- a/curriculum/challenges/portuguese/03-front-end-development-libraries/front-end-development-libraries-projects/build-a-markdown-previewer.md +++ b/curriculum/challenges/portuguese/03-front-end-development-libraries/front-end-development-libraries-projects/build-a-markdown-previewer.md @@ -7,30 +7,31 @@ dashedName: build-a-markdown-previewer --- # --description-- +**Note:** **React 18 has known incompatibilities with the tests for this project (see [issue](https://github.com/freeCodeCamp/freeCodeCamp/issues/45922))** -**Objetivo:** criar uma aplicação que funcione de modo semelhante ao que vemos em: https://markdown-previewer.freecodecamp.rocks/. +**Objective:** Build an app that is functionally similar to this: https://markdown-previewer.freecodecamp.rocks/. -Atenda às histórias de usuário abaixo e faça com que todos os testes passem. Use quaisquer bibliotecas ou APIs de que você precisar. Dê ao projeto o seu próprio estilo pessoal. +Fulfill the below user stories and get all of the tests to pass. Use whichever libraries or APIs you need. Give it your own personal style. -Você pode usar qualquer mistura de HTML, JavaScript, CSS, Bootstrap, SASS, React, Redux e JQuery para completar este projeto. Você deve usar um framework de front-end (como React por exemplo) porque essa seção trata de aprender frameworks de front-end. Tecnologias adicionais não listadas acima não são recomendadas e usá-las é por sua conta e risco. Estamos buscando apoiar outros frameworks de front-end, como Angular e Vue, mas eles não são atualmente suportados. Vamos aceitar e tentar corrigir todos os relatórios de problemas que usem o conjunto de tecnologias sugeridas para esse projeto. Boa programação! +You can use any mix of HTML, JavaScript, CSS, Bootstrap, SASS, React, Redux, and jQuery to complete this project. You should use a frontend framework (like React for example) because this section is about learning frontend frameworks. Additional technologies not listed above are not recommended and using them is at your own risk. We are looking at supporting other frontend frameworks like Angular and Vue, but they are not currently supported. We will accept and try to fix all issue reports that use the suggested technology stack for this project. Happy coding! -**História de usuário nº 1:** eu consigo ver um elemento `textarea` com o `id="editor"` correspondente. +**User Story #1:** I can see a `textarea` element with a corresponding `id="editor"`. -**História de usuário nº 2:** eu consigo ver um elemento com o `id="preview"` correspondente. +**User Story #2:** I can see an element with a corresponding `id="preview"`. -**História de usuário nº 3:** quando eu insiro texto no elemento `#editor`, o elemento `#preview` é atualizado enquanto eu escrevo para exibir o conteúdo do textarea. +**User Story #3:** When I enter text into the `#editor` element, the `#preview` element is updated as I type to display the content of the textarea. -**História de usuário nº 4:** quando insiro marcação do GitHub no elemento `#editor`, o texto é renderizado como HTML no elemento `#preview` enquanto eu escrevo (DICA: você não precisa analisar a marcação você mesmo - você pode importar a biblioteca Marked para isso: ). +**User Story #4:** When I enter GitHub flavored markdown into the `#editor` element, the text is rendered as HTML in the `#preview` element as I type (HINT: You don't need to parse Markdown yourself - you can import the Marked library for this: ). -**História de usuário nº 5:** quando meu pré-visualizador de marcação carregar pela primeira vez, o texto padrão no campo `#editor` deve conter uma marcação válida que represente pelo menos um de cada um dos elementos a seguir: um elemento (tamanho H1), um subelemento de título (tamanho H2), um link, um código em linha, um código de bloco, uma lista de item, um blockquote, uma imagem e um texto em negrito. +**User Story #5:** When my markdown previewer first loads, the default text in the `#editor` field should contain valid markdown that represents at least one of each of the following elements: a heading element (H1 size), a sub heading element (H2 size), a link, inline code, a code block, a list item, a blockquote, an image, and bolded text. -**História de usuário nº 6:** quando meu pré-visualizador de marcação carregar pela primeira vez, a marcação padrão no campo `#editor` deve ser renderizada como HTML no elemento `#preview`. +**User Story #6:** When my markdown previewer first loads, the default markdown in the `#editor` field should be rendered as HTML in the `#preview` element. -**Bônus opcional (você não precisa de aprovação nesse teste):** meu pré-visualizador de marcação interpreta o retorno de carro e o renderiza como elementos `br` (quebra de linha). +**Optional Bonus (you do not need to make this test pass):** My markdown previewer interprets carriage returns and renders them as `br` (line break) elements. -Você pode fazer o seu projeto usando este modelo da CodePen e clicando em `Save` para criar seu próprio pen. Ou você pode usar esse link CDN para rodar os testes em qualquer ambiente que você goste:`https://cdn.freecodecamp.org/testable-projects-fcc/v1/bundle.js` +You can build your project by using this CodePen template and clicking `Save` to create your own pen. Or you can use this CDN link to run the tests in any environment you like: `https://cdn.freecodecamp.org/testable-projects-fcc/v1/bundle.js` -Quando você terminar, envie a URL para o seu projeto em trabalho com todos os testes passando. +Once you're done, submit the URL to your working project with all its tests passing. # --solutions-- diff --git a/curriculum/challenges/portuguese/03-front-end-development-libraries/front-end-development-libraries-projects/build-a-random-quote-machine.md b/curriculum/challenges/portuguese/03-front-end-development-libraries/front-end-development-libraries-projects/build-a-random-quote-machine.md index d9200a5fbdf..02af616bd39 100644 --- a/curriculum/challenges/portuguese/03-front-end-development-libraries/front-end-development-libraries-projects/build-a-random-quote-machine.md +++ b/curriculum/challenges/portuguese/03-front-end-development-libraries/front-end-development-libraries-projects/build-a-random-quote-machine.md @@ -7,40 +7,41 @@ dashedName: build-a-random-quote-machine --- # --description-- +**Note:** **React 18 has known incompatibilities with the tests for this project (see [issue](https://github.com/freeCodeCamp/freeCodeCamp/issues/45922))** -**Objetivo:** criar uma aplicação que funcione de modo semelhante ao que vemos em: https://random-quote-machine.freecodecamp.rocks/. +**Objective:** Build an app that is functionally similar to this: https://random-quote-machine.freecodecamp.rocks/. -Atenda às histórias de usuário abaixo e faça com que todos os testes passem. Use quaisquer bibliotecas ou APIs de que você precisar. Dê ao projeto o seu próprio estilo pessoal. +Fulfill the below user stories and get all of the tests to pass. Use whichever libraries or APIs you need. Give it your own personal style. -Você pode usar qualquer mistura de HTML, JavaScript, CSS, Bootstrap, SASS, React, Redux e JQuery para completar este projeto. Você deve usar um framework de front-end (como React por exemplo) porque essa seção trata de aprender frameworks de front-end. Tecnologias adicionais não listadas acima não são recomendadas e usá-las é por sua conta e risco. Estamos buscando apoiar outros frameworks de front-end, como Angular e Vue, mas eles não são atualmente suportados. Vamos aceitar e tentar corrigir todos os relatórios de problemas que usem o conjunto de tecnologias sugeridas para esse projeto. Boa programação! +You can use any mix of HTML, JavaScript, CSS, Bootstrap, SASS, React, Redux, and jQuery to complete this project. You should use a frontend framework (like React for example) because this section is about learning frontend frameworks. Additional technologies not listed above are not recommended and using them is at your own risk. We are looking at supporting other frontend frameworks like Angular and Vue, but they are not currently supported. We will accept and try to fix all issue reports that use the suggested technology stack for this project. Happy coding! -**História de usuário nº 1:** eu consigo ver um elemento wrapper com o `id="quote-box"` correspondente. +**User Story #1:** I can see a wrapper element with a corresponding `id="quote-box"`. -**História de usuário nº 2:** dentro de `#quote-box`, eu consigo ver um elemento com o `id="text"` correspondente. +**User Story #2:** Within `#quote-box`, I can see an element with a corresponding `id="text"`. -**História de usuário nº 3:** dentro de `#quote-box`, eu consigo ver um elemento com o `id="author"` correspondente. +**User Story #3:** Within `#quote-box`, I can see an element with a corresponding `id="author"`. -**História de usuário nº 4:** dentro de `#quote-box`, eu consigo ver um elemento clicável com o `id="new-quote"` correspondente. +**User Story #4:** Within `#quote-box`, I can see a clickable element with a corresponding `id="new-quote"`. -**História de usuário nº 5:** dentro de `#quote-box`, eu consigo ver um elemento clicável `a` com o `id="tweet-quote"` correspondente. +**User Story #5:** Within `#quote-box`, I can see a clickable `a` element with a corresponding `id="tweet-quote"`. -**História de usuário nº 6:** ao carregar pela primeira vez, minha máquina de citação exibe uma citação aleatória no elemento com `id="text"`. +**User Story #6:** On first load, my quote machine displays a random quote in the element with `id="text"`. -**História de usuário nº 7:** ao carregar pela primeira vez, minha máquina de citação exibe o autor da citação aleatória no elemento com `id="author"`. +**User Story #7:** On first load, my quote machine displays the random quote's author in the element with `id="author"`. -**História de usuário nº 8:** quando o botão `#new-quote` é clicado, minha máquina de citação deve buscar uma nova citação e exibi-la no elemento `#text`. +**User Story #8:** When the `#new-quote` button is clicked, my quote machine should fetch a new quote and display it in the `#text` element. -**História de usuário nº 9:** minha máquina de citação deve buscar o novo autor da citação quando o botão `#new-quote` for clicado e o exibir no elemento `#author`. +**User Story #9:** My quote machine should fetch the new quote's author when the `#new-quote` button is clicked and display it in the `#author` element. -**História de usuário nº 10:** eu posso tweetar a citação atual ao clicar no elemento `#tweet-quote` `a`. Esse elemento `a` deve incluir o caminho `"twitter.com/intent/tweet"` no seu atributo `href` para tweetar a citação atual. +**User Story #10:** I can tweet the current quote by clicking on the `#tweet-quote` `a` element. This `a` element should include the `"twitter.com/intent/tweet"` path in its `href` attribute to tweet the current quote. -**História de usuário nº 11:** o elemento wrapper `#quote-box` deve ser centralizado horizontalmente. Execute testes com o zoom do navegador em 100% e com a página maximizada. +**User Story #11:** The `#quote-box` wrapper element should be horizontally centered. Please run tests with browser's zoom level at 100% and page maximized. -Você pode fazer o seu projeto usando este modelo da CodePen e clicando em `Save` para criar seu próprio pen. Ou você pode usar esse link CDN para rodar os testes em qualquer ambiente que você goste:`https://cdn.freecodecamp.org/testable-projects-fcc/v1/bundle.js` +You can build your project by using this CodePen template and clicking `Save` to create your own pen. Or you can use this CDN link to run the tests in any environment you like: `https://cdn.freecodecamp.org/testable-projects-fcc/v1/bundle.js` -Quando você terminar, envie a URL para o seu projeto em trabalho com todos os testes passando. +Once you're done, submit the URL to your working project with all its tests passing. -**Observação:** o Twitter não permite que links sejam carregados em um iframe. Tente usar o atributo `target="_blank"` ou `target="_top"` no elemento `#tweet-quote` se o seu tweet não carregar. `target="_top"` vai substituir a aba atual para garantir que o seu trabalho foi salvo. +**Note:** Twitter does not allow links to be loaded in an iframe. Try using the `target="_blank"` or `target="_top"` attribute on the `#tweet-quote` element if your tweet won't load. `target="_top"` will replace the current tab so make sure your work is saved. # --solutions-- diff --git a/curriculum/challenges/portuguese/14-responsive-web-design-22/learn-intermediate-css-by-building-a-cat-painting/646c47867800472a4ed5d2ea.md b/curriculum/challenges/portuguese/14-responsive-web-design-22/learn-intermediate-css-by-building-a-cat-painting/646c47867800472a4ed5d2ea.md index 3d897404664..9cd4e62258e 100644 --- a/curriculum/challenges/portuguese/14-responsive-web-design-22/learn-intermediate-css-by-building-a-cat-painting/646c47867800472a4ed5d2ea.md +++ b/curriculum/challenges/portuguese/14-responsive-web-design-22/learn-intermediate-css-by-building-a-cat-painting/646c47867800472a4ed5d2ea.md @@ -1,13 +1,13 @@ --- id: 646c47867800472a4ed5d2ea -title: Step 1 +title: Passo 1 challengeType: 0 dashedName: step-1 --- # --description-- -Begin with the basic HTML structure. Add a `DOCTYPE` reference of `html` and an `html` element with its `lang` attribute set to `en`. Also, add a `head` and a `body` element within the `html` element. +Comece com a estrutura HTML básica. Add a `DOCTYPE` reference of `html` and an `html` element with its `lang` attribute set to `en`. Also, add a `head` and a `body` element within the `html` element. # --hints-- @@ -17,7 +17,7 @@ You should have the `DOCTYPE` declaration of `html`. assert(code.match(//i)); ``` -Your `DOCTYPE` declaration should be at the beginning of your HTML. +A declaração `DOCTYPE` deve ser no início do HTML. ```js assert(__helpers.removeHtmlComments(code).match(/^\s*/i)); @@ -35,25 +35,25 @@ You should have a closing `html` tag. assert(code.match(/<\/html>/i)); ``` -You should have an opening `head` tag. +Você deve acrescentar uma tag de abertura `head`. ```js assert(code.match(//i)); ``` -You should have a closing `head` tag. +Você deve ter uma tag de fechamento para `head`. ```js assert(code.match(/<\/head>/i)); ``` -You should have an opening `body` tag. +Você deve ter uma tag de abertura para `body`. ```js assert(code.match(//i)); ``` -You should have a closing `body` tag. +Você deve ter uma tag de fechamento para `body`. ```js assert(code.match(/<\/body>/i)); diff --git a/curriculum/challenges/portuguese/14-responsive-web-design-22/learn-intermediate-css-by-building-a-cat-painting/646c48df8674cf2b91020ecb.md b/curriculum/challenges/portuguese/14-responsive-web-design-22/learn-intermediate-css-by-building-a-cat-painting/646c48df8674cf2b91020ecb.md index 4995d5116e9..576a5327c11 100644 --- a/curriculum/challenges/portuguese/14-responsive-web-design-22/learn-intermediate-css-by-building-a-cat-painting/646c48df8674cf2b91020ecb.md +++ b/curriculum/challenges/portuguese/14-responsive-web-design-22/learn-intermediate-css-by-building-a-cat-painting/646c48df8674cf2b91020ecb.md @@ -1,6 +1,6 @@ --- id: 646c48df8674cf2b91020ecb -title: Step 2 +title: Passo 2 challengeType: 0 dashedName: step-2 --- @@ -17,7 +17,7 @@ You should add a single `meta` element. assert(document.querySelectorAll('meta').length === 1); ``` -Your `meta` element should have a `charset` attribute set to `utf-8`. +O elemento `meta` deve ter o atributo `charset` com o valor `utf-8`. ```js assert(document.querySelector('meta')?.getAttribute('charset')?.toLowerCase() === 'utf-8'); @@ -29,7 +29,7 @@ You should add a single `title` element. assert(document.querySelectorAll('title').length === 1); ``` -Your `title` element should have the text `fCC Cat Painting`. Note that spelling and casing matter. +Your `title` element should have the text `fCC Cat Painting`. Atente-se a ortografia e letras maiúsculas. ```js assert(document.querySelector('title')?.innerText === 'fCC Cat Painting'); diff --git a/curriculum/challenges/portuguese/14-responsive-web-design-22/learn-intermediate-css-by-building-a-cat-painting/646c48df8674cf2b91020ecc.md b/curriculum/challenges/portuguese/14-responsive-web-design-22/learn-intermediate-css-by-building-a-cat-painting/646c48df8674cf2b91020ecc.md index 16fcfd166a3..a5c06c25ef5 100644 --- a/curriculum/challenges/portuguese/14-responsive-web-design-22/learn-intermediate-css-by-building-a-cat-painting/646c48df8674cf2b91020ecc.md +++ b/curriculum/challenges/portuguese/14-responsive-web-design-22/learn-intermediate-css-by-building-a-cat-painting/646c48df8674cf2b91020ecc.md @@ -1,13 +1,13 @@ --- id: 646c48df8674cf2b91020ecc -title: Step 3 +title: Passo 3 challengeType: 0 dashedName: step-3 --- # --description-- -Add a `link` element within your `head` element. For that `link` element, set the `rel` attribute to `stylesheet` and the `href` to `./styles.css`. +Adicione um elemento `link` dentro do elemento `head`. Para esse elemento `link`, defina o atributo `rel` como `stylesheet` e `href` como `./styles.css`. # --hints-- diff --git a/curriculum/challenges/portuguese/14-responsive-web-design-22/learn-intermediate-css-by-building-a-cat-painting/646c586be7180e40ddf74ff6.md b/curriculum/challenges/portuguese/14-responsive-web-design-22/learn-intermediate-css-by-building-a-cat-painting/646c586be7180e40ddf74ff6.md index 1757ddb08e0..c06a86c76db 100644 --- a/curriculum/challenges/portuguese/14-responsive-web-design-22/learn-intermediate-css-by-building-a-cat-painting/646c586be7180e40ddf74ff6.md +++ b/curriculum/challenges/portuguese/14-responsive-web-design-22/learn-intermediate-css-by-building-a-cat-painting/646c586be7180e40ddf74ff6.md @@ -1,6 +1,6 @@ --- id: 646c586be7180e40ddf74ff6 -title: Step 5 +title: Passo 5 challengeType: 0 dashedName: step-5 --- @@ -11,7 +11,7 @@ Give your `body` element a `background-color` of `#c9d2fc`. # --hints-- -You should have a `body` selector. +Você deve ter um seletor `body`. ```js assert(new __helpers.CSSHelp(document).getStyle('body')); diff --git a/curriculum/challenges/portuguese/14-responsive-web-design-22/learn-intermediate-css-by-building-a-cat-painting/646c59e942f35541923104bf.md b/curriculum/challenges/portuguese/14-responsive-web-design-22/learn-intermediate-css-by-building-a-cat-painting/646c59e942f35541923104bf.md index c605ff01e1d..58fbb75fb47 100644 --- a/curriculum/challenges/portuguese/14-responsive-web-design-22/learn-intermediate-css-by-building-a-cat-painting/646c59e942f35541923104bf.md +++ b/curriculum/challenges/portuguese/14-responsive-web-design-22/learn-intermediate-css-by-building-a-cat-painting/646c59e942f35541923104bf.md @@ -1,6 +1,6 @@ --- id: 646c59e942f35541923104bf -title: Step 6 +title: Passo 6 challengeType: 0 dashedName: step-6 --- @@ -11,13 +11,13 @@ Back in your HTML, create a `main` element. Inside that `main` element, add a `d # --hints-- -You should have a `main` element. +Você deve ter apenas um elemento `main`. ```js assert(document.querySelectorAll('main').length === 1); ``` -You should have a `div` element. +Você deve ter um elemento `div`. ```js assert(document.querySelectorAll('div').length === 1); diff --git a/curriculum/challenges/portuguese/14-responsive-web-design-22/learn-intermediate-css-by-building-a-cat-painting/646c5ace05e4be4211407935.md b/curriculum/challenges/portuguese/14-responsive-web-design-22/learn-intermediate-css-by-building-a-cat-painting/646c5ace05e4be4211407935.md index 81eb5c83f27..954a05c12ff 100644 --- a/curriculum/challenges/portuguese/14-responsive-web-design-22/learn-intermediate-css-by-building-a-cat-painting/646c5ace05e4be4211407935.md +++ b/curriculum/challenges/portuguese/14-responsive-web-design-22/learn-intermediate-css-by-building-a-cat-painting/646c5ace05e4be4211407935.md @@ -1,6 +1,6 @@ --- id: 646c5ace05e4be4211407935 -title: Step 8 +title: Passo 8 challengeType: 0 dashedName: step-8 --- diff --git a/curriculum/challenges/portuguese/14-responsive-web-design-22/learn-intermediate-css-by-building-a-cat-painting/646c5d7057c45f432fcdd46c.md b/curriculum/challenges/portuguese/14-responsive-web-design-22/learn-intermediate-css-by-building-a-cat-painting/646c5d7057c45f432fcdd46c.md index 98afa6c6b3b..ee7511ff540 100644 --- a/curriculum/challenges/portuguese/14-responsive-web-design-22/learn-intermediate-css-by-building-a-cat-painting/646c5d7057c45f432fcdd46c.md +++ b/curriculum/challenges/portuguese/14-responsive-web-design-22/learn-intermediate-css-by-building-a-cat-painting/646c5d7057c45f432fcdd46c.md @@ -1,6 +1,6 @@ --- id: 646c5d7057c45f432fcdd46c -title: Step 7 +title: Passo 7 challengeType: 0 dashedName: step-7 --- diff --git a/curriculum/challenges/portuguese/14-responsive-web-design-22/learn-intermediate-css-by-building-a-cat-painting/646c5e727e56e743c9aed4a1.md b/curriculum/challenges/portuguese/14-responsive-web-design-22/learn-intermediate-css-by-building-a-cat-painting/646c5e727e56e743c9aed4a1.md index 7c88ce9baa8..8fc0e7ddee7 100644 --- a/curriculum/challenges/portuguese/14-responsive-web-design-22/learn-intermediate-css-by-building-a-cat-painting/646c5e727e56e743c9aed4a1.md +++ b/curriculum/challenges/portuguese/14-responsive-web-design-22/learn-intermediate-css-by-building-a-cat-painting/646c5e727e56e743c9aed4a1.md @@ -1,6 +1,6 @@ --- id: 646c5e727e56e743c9aed4a1 -title: Step 9 +title: Passo 9 challengeType: 0 dashedName: step-9 --- diff --git a/curriculum/challenges/portuguese/14-responsive-web-design-22/learn-intermediate-css-by-building-a-cat-painting/646c5ffef5598d449b52ec12.md b/curriculum/challenges/portuguese/14-responsive-web-design-22/learn-intermediate-css-by-building-a-cat-painting/646c5ffef5598d449b52ec12.md index 9c460caa45f..455a8781fb6 100644 --- a/curriculum/challenges/portuguese/14-responsive-web-design-22/learn-intermediate-css-by-building-a-cat-painting/646c5ffef5598d449b52ec12.md +++ b/curriculum/challenges/portuguese/14-responsive-web-design-22/learn-intermediate-css-by-building-a-cat-painting/646c5ffef5598d449b52ec12.md @@ -1,6 +1,6 @@ --- id: 646c5ffef5598d449b52ec12 -title: Step 19 +title: Passo 19 challengeType: 0 dashedName: step-19 --- diff --git a/curriculum/challenges/portuguese/14-responsive-web-design-22/learn-intermediate-css-by-building-a-cat-painting/646ce8bb4b35544d501c7184.md b/curriculum/challenges/portuguese/14-responsive-web-design-22/learn-intermediate-css-by-building-a-cat-painting/646ce8bb4b35544d501c7184.md index 356b443cc39..bed7492c68b 100644 --- a/curriculum/challenges/portuguese/14-responsive-web-design-22/learn-intermediate-css-by-building-a-cat-painting/646ce8bb4b35544d501c7184.md +++ b/curriculum/challenges/portuguese/14-responsive-web-design-22/learn-intermediate-css-by-building-a-cat-painting/646ce8bb4b35544d501c7184.md @@ -1,6 +1,6 @@ --- id: 646ce8bb4b35544d501c7184 -title: Step 20 +title: Passo 20 challengeType: 0 dashedName: step-20 --- diff --git a/curriculum/challenges/portuguese/14-responsive-web-design-22/learn-intermediate-css-by-building-a-cat-painting/646ce9d790d2a44de5f99e04.md b/curriculum/challenges/portuguese/14-responsive-web-design-22/learn-intermediate-css-by-building-a-cat-painting/646ce9d790d2a44de5f99e04.md index f868fcd598d..01d066e9351 100644 --- a/curriculum/challenges/portuguese/14-responsive-web-design-22/learn-intermediate-css-by-building-a-cat-painting/646ce9d790d2a44de5f99e04.md +++ b/curriculum/challenges/portuguese/14-responsive-web-design-22/learn-intermediate-css-by-building-a-cat-painting/646ce9d790d2a44de5f99e04.md @@ -1,6 +1,6 @@ --- id: 646ce9d790d2a44de5f99e04 -title: Step 21 +title: Passo 21 challengeType: 0 dashedName: step-21 --- diff --git a/curriculum/challenges/portuguese/14-responsive-web-design-22/learn-intermediate-css-by-building-a-cat-painting/646ceae4d57c214e6b03576c.md b/curriculum/challenges/portuguese/14-responsive-web-design-22/learn-intermediate-css-by-building-a-cat-painting/646ceae4d57c214e6b03576c.md index deb18782568..ba9356f5705 100644 --- a/curriculum/challenges/portuguese/14-responsive-web-design-22/learn-intermediate-css-by-building-a-cat-painting/646ceae4d57c214e6b03576c.md +++ b/curriculum/challenges/portuguese/14-responsive-web-design-22/learn-intermediate-css-by-building-a-cat-painting/646ceae4d57c214e6b03576c.md @@ -1,6 +1,6 @@ --- id: 646ceae4d57c214e6b03576c -title: Step 22 +title: Passo 22 challengeType: 0 dashedName: step-22 --- diff --git a/curriculum/challenges/portuguese/14-responsive-web-design-22/learn-intermediate-css-by-building-a-cat-painting/646ceb843412c74edee27a79.md b/curriculum/challenges/portuguese/14-responsive-web-design-22/learn-intermediate-css-by-building-a-cat-painting/646ceb843412c74edee27a79.md index ae13eae4db7..30af3a1bb32 100644 --- a/curriculum/challenges/portuguese/14-responsive-web-design-22/learn-intermediate-css-by-building-a-cat-painting/646ceb843412c74edee27a79.md +++ b/curriculum/challenges/portuguese/14-responsive-web-design-22/learn-intermediate-css-by-building-a-cat-painting/646ceb843412c74edee27a79.md @@ -1,6 +1,6 @@ --- id: 646ceb843412c74edee27a79 -title: Step 23 +title: Passo 23 challengeType: 0 dashedName: step-23 --- diff --git a/curriculum/challenges/portuguese/14-responsive-web-design-22/learn-intermediate-css-by-building-a-cat-painting/646cecc9eb5c4f4f73dafd07.md b/curriculum/challenges/portuguese/14-responsive-web-design-22/learn-intermediate-css-by-building-a-cat-painting/646cecc9eb5c4f4f73dafd07.md index 60b4d9ebfde..c61e8c3ff13 100644 --- a/curriculum/challenges/portuguese/14-responsive-web-design-22/learn-intermediate-css-by-building-a-cat-painting/646cecc9eb5c4f4f73dafd07.md +++ b/curriculum/challenges/portuguese/14-responsive-web-design-22/learn-intermediate-css-by-building-a-cat-painting/646cecc9eb5c4f4f73dafd07.md @@ -1,6 +1,6 @@ --- id: 646cecc9eb5c4f4f73dafd07 -title: Step 24 +title: Passo 24 challengeType: 0 dashedName: step-24 --- diff --git a/curriculum/challenges/portuguese/14-responsive-web-design-22/learn-intermediate-css-by-building-a-cat-painting/646cef0c2b98915094df7099.md b/curriculum/challenges/portuguese/14-responsive-web-design-22/learn-intermediate-css-by-building-a-cat-painting/646cef0c2b98915094df7099.md index a0b737ac3d9..ed03a9964cc 100644 --- a/curriculum/challenges/portuguese/14-responsive-web-design-22/learn-intermediate-css-by-building-a-cat-painting/646cef0c2b98915094df7099.md +++ b/curriculum/challenges/portuguese/14-responsive-web-design-22/learn-intermediate-css-by-building-a-cat-painting/646cef0c2b98915094df7099.md @@ -1,6 +1,6 @@ --- id: 646cef0c2b98915094df7099 -title: Step 25 +title: Passo 25 challengeType: 0 dashedName: step-25 --- diff --git a/curriculum/challenges/portuguese/14-responsive-web-design-22/learn-intermediate-css-by-building-a-cat-painting/646cf1206cac5f51804f49cf.md b/curriculum/challenges/portuguese/14-responsive-web-design-22/learn-intermediate-css-by-building-a-cat-painting/646cf1206cac5f51804f49cf.md index 3bcd393bf42..d24036bfc59 100644 --- a/curriculum/challenges/portuguese/14-responsive-web-design-22/learn-intermediate-css-by-building-a-cat-painting/646cf1206cac5f51804f49cf.md +++ b/curriculum/challenges/portuguese/14-responsive-web-design-22/learn-intermediate-css-by-building-a-cat-painting/646cf1206cac5f51804f49cf.md @@ -1,6 +1,6 @@ --- id: 646cf1206cac5f51804f49cf -title: Step 26 +title: Passo 26 challengeType: 0 dashedName: step-26 --- diff --git a/curriculum/challenges/portuguese/14-responsive-web-design-22/learn-intermediate-css-by-building-a-cat-painting/646cf2249f02ca5233d9af7c.md b/curriculum/challenges/portuguese/14-responsive-web-design-22/learn-intermediate-css-by-building-a-cat-painting/646cf2249f02ca5233d9af7c.md index 51bb049e2dd..7f4889505c1 100644 --- a/curriculum/challenges/portuguese/14-responsive-web-design-22/learn-intermediate-css-by-building-a-cat-painting/646cf2249f02ca5233d9af7c.md +++ b/curriculum/challenges/portuguese/14-responsive-web-design-22/learn-intermediate-css-by-building-a-cat-painting/646cf2249f02ca5233d9af7c.md @@ -1,6 +1,6 @@ --- id: 646cf2249f02ca5233d9af7c -title: Step 27 +title: Passo 27 challengeType: 0 dashedName: step-27 --- diff --git a/curriculum/challenges/portuguese/14-responsive-web-design-22/learn-intermediate-css-by-building-a-cat-painting/646cf48d8f8e1f535a1821d3.md b/curriculum/challenges/portuguese/14-responsive-web-design-22/learn-intermediate-css-by-building-a-cat-painting/646cf48d8f8e1f535a1821d3.md index dfce258d838..a62d50467b3 100644 --- a/curriculum/challenges/portuguese/14-responsive-web-design-22/learn-intermediate-css-by-building-a-cat-painting/646cf48d8f8e1f535a1821d3.md +++ b/curriculum/challenges/portuguese/14-responsive-web-design-22/learn-intermediate-css-by-building-a-cat-painting/646cf48d8f8e1f535a1821d3.md @@ -1,6 +1,6 @@ --- id: 646cf48d8f8e1f535a1821d3 -title: Step 28 +title: Passo 28 challengeType: 0 dashedName: step-28 --- diff --git a/curriculum/challenges/portuguese/14-responsive-web-design-22/learn-intermediate-css-by-building-a-cat-painting/646cf6cbca98e258da65c979.md b/curriculum/challenges/portuguese/14-responsive-web-design-22/learn-intermediate-css-by-building-a-cat-painting/646cf6cbca98e258da65c979.md index d4525731d1f..6ba9ae87bca 100644 --- a/curriculum/challenges/portuguese/14-responsive-web-design-22/learn-intermediate-css-by-building-a-cat-painting/646cf6cbca98e258da65c979.md +++ b/curriculum/challenges/portuguese/14-responsive-web-design-22/learn-intermediate-css-by-building-a-cat-painting/646cf6cbca98e258da65c979.md @@ -1,6 +1,6 @@ --- id: 646cf6cbca98e258da65c979 -title: Step 29 +title: Passo 29 challengeType: 0 dashedName: step-29 --- diff --git a/curriculum/challenges/portuguese/14-responsive-web-design-22/learn-intermediate-css-by-building-a-cat-painting/646cf88aa884405a11ea5bcc.md b/curriculum/challenges/portuguese/14-responsive-web-design-22/learn-intermediate-css-by-building-a-cat-painting/646cf88aa884405a11ea5bcc.md index bbd36a62759..9ff85827531 100644 --- a/curriculum/challenges/portuguese/14-responsive-web-design-22/learn-intermediate-css-by-building-a-cat-painting/646cf88aa884405a11ea5bcc.md +++ b/curriculum/challenges/portuguese/14-responsive-web-design-22/learn-intermediate-css-by-building-a-cat-painting/646cf88aa884405a11ea5bcc.md @@ -1,6 +1,6 @@ --- id: 646cf88aa884405a11ea5bcc -title: Step 30 +title: Passo 30 challengeType: 0 dashedName: step-30 --- diff --git a/curriculum/challenges/portuguese/14-responsive-web-design-22/learn-intermediate-css-by-building-a-cat-painting/646cfc2b8e6fe95c20a819d5.md b/curriculum/challenges/portuguese/14-responsive-web-design-22/learn-intermediate-css-by-building-a-cat-painting/646cfc2b8e6fe95c20a819d5.md index bb200fd1069..c718fb113fa 100644 --- a/curriculum/challenges/portuguese/14-responsive-web-design-22/learn-intermediate-css-by-building-a-cat-painting/646cfc2b8e6fe95c20a819d5.md +++ b/curriculum/challenges/portuguese/14-responsive-web-design-22/learn-intermediate-css-by-building-a-cat-painting/646cfc2b8e6fe95c20a819d5.md @@ -1,6 +1,6 @@ --- id: 646cfc2b8e6fe95c20a819d5 -title: Step 31 +title: Passo 31 challengeType: 0 dashedName: step-31 --- diff --git a/curriculum/challenges/portuguese/14-responsive-web-design-22/learn-intermediate-css-by-building-a-cat-painting/646cfd853634255d02b64cc1.md b/curriculum/challenges/portuguese/14-responsive-web-design-22/learn-intermediate-css-by-building-a-cat-painting/646cfd853634255d02b64cc1.md index 7f2be20c198..7a4cc4c28c8 100644 --- a/curriculum/challenges/portuguese/14-responsive-web-design-22/learn-intermediate-css-by-building-a-cat-painting/646cfd853634255d02b64cc1.md +++ b/curriculum/challenges/portuguese/14-responsive-web-design-22/learn-intermediate-css-by-building-a-cat-painting/646cfd853634255d02b64cc1.md @@ -1,6 +1,6 @@ --- id: 646cfd853634255d02b64cc1 -title: Step 32 +title: Passo 32 challengeType: 0 dashedName: step-32 --- diff --git a/curriculum/challenges/portuguese/14-responsive-web-design-22/learn-intermediate-css-by-building-a-cat-painting/646cfde6ac612e5d60391f50.md b/curriculum/challenges/portuguese/14-responsive-web-design-22/learn-intermediate-css-by-building-a-cat-painting/646cfde6ac612e5d60391f50.md index b892d61ca1d..b449d8daeba 100644 --- a/curriculum/challenges/portuguese/14-responsive-web-design-22/learn-intermediate-css-by-building-a-cat-painting/646cfde6ac612e5d60391f50.md +++ b/curriculum/challenges/portuguese/14-responsive-web-design-22/learn-intermediate-css-by-building-a-cat-painting/646cfde6ac612e5d60391f50.md @@ -1,6 +1,6 @@ --- id: 646cfde6ac612e5d60391f50 -title: Step 33 +title: Passo 33 challengeType: 0 dashedName: step-33 --- diff --git a/curriculum/challenges/portuguese/14-responsive-web-design-22/learn-intermediate-css-by-building-a-cat-painting/646dd556d524bc61c0139bd6.md b/curriculum/challenges/portuguese/14-responsive-web-design-22/learn-intermediate-css-by-building-a-cat-painting/646dd556d524bc61c0139bd6.md index 1d7411ad660..29fc0e8ca8e 100644 --- a/curriculum/challenges/portuguese/14-responsive-web-design-22/learn-intermediate-css-by-building-a-cat-painting/646dd556d524bc61c0139bd6.md +++ b/curriculum/challenges/portuguese/14-responsive-web-design-22/learn-intermediate-css-by-building-a-cat-painting/646dd556d524bc61c0139bd6.md @@ -1,6 +1,6 @@ --- id: 646dd556d524bc61c0139bd6 -title: Step 34 +title: Passo 34 challengeType: 0 dashedName: step-34 --- diff --git a/curriculum/challenges/portuguese/14-responsive-web-design-22/learn-intermediate-css-by-building-a-cat-painting/646dd6f9caa862627dd87772.md b/curriculum/challenges/portuguese/14-responsive-web-design-22/learn-intermediate-css-by-building-a-cat-painting/646dd6f9caa862627dd87772.md index 8be0ea3110e..7457a08858e 100644 --- a/curriculum/challenges/portuguese/14-responsive-web-design-22/learn-intermediate-css-by-building-a-cat-painting/646dd6f9caa862627dd87772.md +++ b/curriculum/challenges/portuguese/14-responsive-web-design-22/learn-intermediate-css-by-building-a-cat-painting/646dd6f9caa862627dd87772.md @@ -1,6 +1,6 @@ --- id: 646dd6f9caa862627dd87772 -title: Step 35 +title: Passo 35 challengeType: 0 dashedName: step-35 --- diff --git a/curriculum/challenges/portuguese/14-responsive-web-design-22/learn-intermediate-css-by-building-a-cat-painting/646dd7cfd0cfac630c1dd520.md b/curriculum/challenges/portuguese/14-responsive-web-design-22/learn-intermediate-css-by-building-a-cat-painting/646dd7cfd0cfac630c1dd520.md index 7e24c8e937c..f7d16417653 100644 --- a/curriculum/challenges/portuguese/14-responsive-web-design-22/learn-intermediate-css-by-building-a-cat-painting/646dd7cfd0cfac630c1dd520.md +++ b/curriculum/challenges/portuguese/14-responsive-web-design-22/learn-intermediate-css-by-building-a-cat-painting/646dd7cfd0cfac630c1dd520.md @@ -1,6 +1,6 @@ --- id: 646dd7cfd0cfac630c1dd520 -title: Step 36 +title: Passo 36 challengeType: 0 dashedName: step-36 --- diff --git a/curriculum/challenges/portuguese/14-responsive-web-design-22/learn-intermediate-css-by-building-a-cat-painting/646dd8c79ec23463a3d0e356.md b/curriculum/challenges/portuguese/14-responsive-web-design-22/learn-intermediate-css-by-building-a-cat-painting/646dd8c79ec23463a3d0e356.md index ba3b89e07d1..df047edf454 100644 --- a/curriculum/challenges/portuguese/14-responsive-web-design-22/learn-intermediate-css-by-building-a-cat-painting/646dd8c79ec23463a3d0e356.md +++ b/curriculum/challenges/portuguese/14-responsive-web-design-22/learn-intermediate-css-by-building-a-cat-painting/646dd8c79ec23463a3d0e356.md @@ -1,6 +1,6 @@ --- id: 646dd8c79ec23463a3d0e356 -title: Step 37 +title: Passo 37 challengeType: 0 dashedName: step-37 --- diff --git a/curriculum/challenges/portuguese/14-responsive-web-design-22/learn-intermediate-css-by-building-a-cat-painting/646dd9d9a729916460724f16.md b/curriculum/challenges/portuguese/14-responsive-web-design-22/learn-intermediate-css-by-building-a-cat-painting/646dd9d9a729916460724f16.md index f48ba0bd881..3d76731dd25 100644 --- a/curriculum/challenges/portuguese/14-responsive-web-design-22/learn-intermediate-css-by-building-a-cat-painting/646dd9d9a729916460724f16.md +++ b/curriculum/challenges/portuguese/14-responsive-web-design-22/learn-intermediate-css-by-building-a-cat-painting/646dd9d9a729916460724f16.md @@ -1,6 +1,6 @@ --- id: 646dd9d9a729916460724f16 -title: Step 38 +title: Passo 38 challengeType: 0 dashedName: step-38 --- diff --git a/curriculum/challenges/portuguese/14-responsive-web-design-22/learn-intermediate-css-by-building-a-cat-painting/646ddab8afd73764f5241bbf.md b/curriculum/challenges/portuguese/14-responsive-web-design-22/learn-intermediate-css-by-building-a-cat-painting/646ddab8afd73764f5241bbf.md index 12d8b78a661..140ad189b35 100644 --- a/curriculum/challenges/portuguese/14-responsive-web-design-22/learn-intermediate-css-by-building-a-cat-painting/646ddab8afd73764f5241bbf.md +++ b/curriculum/challenges/portuguese/14-responsive-web-design-22/learn-intermediate-css-by-building-a-cat-painting/646ddab8afd73764f5241bbf.md @@ -1,6 +1,6 @@ --- id: 646ddab8afd73764f5241bbf -title: Step 39 +title: Passo 39 challengeType: 0 dashedName: step-39 --- diff --git a/curriculum/challenges/portuguese/14-responsive-web-design-22/learn-intermediate-css-by-building-a-cat-painting/646ddb61ff08366570cc5902.md b/curriculum/challenges/portuguese/14-responsive-web-design-22/learn-intermediate-css-by-building-a-cat-painting/646ddb61ff08366570cc5902.md index 5a2488dca6b..71027e56d31 100644 --- a/curriculum/challenges/portuguese/14-responsive-web-design-22/learn-intermediate-css-by-building-a-cat-painting/646ddb61ff08366570cc5902.md +++ b/curriculum/challenges/portuguese/14-responsive-web-design-22/learn-intermediate-css-by-building-a-cat-painting/646ddb61ff08366570cc5902.md @@ -1,6 +1,6 @@ --- id: 646ddb61ff08366570cc5902 -title: Step 40 +title: Passo 40 challengeType: 0 dashedName: step-40 --- diff --git a/curriculum/challenges/portuguese/14-responsive-web-design-22/learn-intermediate-css-by-building-a-cat-painting/646ddd3f9f97a0667b964bdb.md b/curriculum/challenges/portuguese/14-responsive-web-design-22/learn-intermediate-css-by-building-a-cat-painting/646ddd3f9f97a0667b964bdb.md index 9b995228d29..4769500a609 100644 --- a/curriculum/challenges/portuguese/14-responsive-web-design-22/learn-intermediate-css-by-building-a-cat-painting/646ddd3f9f97a0667b964bdb.md +++ b/curriculum/challenges/portuguese/14-responsive-web-design-22/learn-intermediate-css-by-building-a-cat-painting/646ddd3f9f97a0667b964bdb.md @@ -1,6 +1,6 @@ --- id: 646ddd3f9f97a0667b964bdb -title: Step 41 +title: Passo 41 challengeType: 0 dashedName: step-41 --- diff --git a/curriculum/challenges/portuguese/14-responsive-web-design-22/learn-intermediate-css-by-building-a-cat-painting/646dddfb3a301c66ec513c56.md b/curriculum/challenges/portuguese/14-responsive-web-design-22/learn-intermediate-css-by-building-a-cat-painting/646dddfb3a301c66ec513c56.md index 5bad715a154..3d86b147c9e 100644 --- a/curriculum/challenges/portuguese/14-responsive-web-design-22/learn-intermediate-css-by-building-a-cat-painting/646dddfb3a301c66ec513c56.md +++ b/curriculum/challenges/portuguese/14-responsive-web-design-22/learn-intermediate-css-by-building-a-cat-painting/646dddfb3a301c66ec513c56.md @@ -1,6 +1,6 @@ --- id: 646dddfb3a301c66ec513c56 -title: Step 42 +title: Passo 42 challengeType: 0 dashedName: step-42 --- diff --git a/curriculum/challenges/portuguese/14-responsive-web-design-22/learn-intermediate-css-by-building-a-cat-painting/646dde7dc20dc167489faa69.md b/curriculum/challenges/portuguese/14-responsive-web-design-22/learn-intermediate-css-by-building-a-cat-painting/646dde7dc20dc167489faa69.md index 9cf9b19e226..514f2c3031c 100644 --- a/curriculum/challenges/portuguese/14-responsive-web-design-22/learn-intermediate-css-by-building-a-cat-painting/646dde7dc20dc167489faa69.md +++ b/curriculum/challenges/portuguese/14-responsive-web-design-22/learn-intermediate-css-by-building-a-cat-painting/646dde7dc20dc167489faa69.md @@ -1,6 +1,6 @@ --- id: 646dde7dc20dc167489faa69 -title: Step 43 +title: Passo 43 challengeType: 0 dashedName: step-43 --- diff --git a/curriculum/challenges/portuguese/14-responsive-web-design-22/learn-intermediate-css-by-building-a-cat-painting/646ddf888632fa67f1180940.md b/curriculum/challenges/portuguese/14-responsive-web-design-22/learn-intermediate-css-by-building-a-cat-painting/646ddf888632fa67f1180940.md index 45ed732e12d..7d11d21fb9d 100644 --- a/curriculum/challenges/portuguese/14-responsive-web-design-22/learn-intermediate-css-by-building-a-cat-painting/646ddf888632fa67f1180940.md +++ b/curriculum/challenges/portuguese/14-responsive-web-design-22/learn-intermediate-css-by-building-a-cat-painting/646ddf888632fa67f1180940.md @@ -1,6 +1,6 @@ --- id: 646ddf888632fa67f1180940 -title: Step 44 +title: Passo 44 challengeType: 0 dashedName: step-44 --- diff --git a/curriculum/challenges/portuguese/14-responsive-web-design-22/learn-intermediate-css-by-building-a-cat-painting/646de5dc8988076a1d992afd.md b/curriculum/challenges/portuguese/14-responsive-web-design-22/learn-intermediate-css-by-building-a-cat-painting/646de5dc8988076a1d992afd.md index 38088bba67e..8dac64e7955 100644 --- a/curriculum/challenges/portuguese/14-responsive-web-design-22/learn-intermediate-css-by-building-a-cat-painting/646de5dc8988076a1d992afd.md +++ b/curriculum/challenges/portuguese/14-responsive-web-design-22/learn-intermediate-css-by-building-a-cat-painting/646de5dc8988076a1d992afd.md @@ -1,6 +1,6 @@ --- id: 646de5dc8988076a1d992afd -title: Step 45 +title: Passo 45 challengeType: 0 dashedName: step-45 --- diff --git a/curriculum/challenges/portuguese/14-responsive-web-design-22/learn-intermediate-css-by-building-a-cat-painting/646de6a97b50a86ac487de86.md b/curriculum/challenges/portuguese/14-responsive-web-design-22/learn-intermediate-css-by-building-a-cat-painting/646de6a97b50a86ac487de86.md index b9dc455e5b1..4490894281a 100644 --- a/curriculum/challenges/portuguese/14-responsive-web-design-22/learn-intermediate-css-by-building-a-cat-painting/646de6a97b50a86ac487de86.md +++ b/curriculum/challenges/portuguese/14-responsive-web-design-22/learn-intermediate-css-by-building-a-cat-painting/646de6a97b50a86ac487de86.md @@ -1,6 +1,6 @@ --- id: 646de6a97b50a86ac487de86 -title: Step 46 +title: Passo 46 challengeType: 0 dashedName: step-46 --- diff --git a/curriculum/challenges/portuguese/14-responsive-web-design-22/learn-intermediate-css-by-building-a-cat-painting/646de7b64467e96b7d35b5cd.md b/curriculum/challenges/portuguese/14-responsive-web-design-22/learn-intermediate-css-by-building-a-cat-painting/646de7b64467e96b7d35b5cd.md index 1cae6709360..cba488a8108 100644 --- a/curriculum/challenges/portuguese/14-responsive-web-design-22/learn-intermediate-css-by-building-a-cat-painting/646de7b64467e96b7d35b5cd.md +++ b/curriculum/challenges/portuguese/14-responsive-web-design-22/learn-intermediate-css-by-building-a-cat-painting/646de7b64467e96b7d35b5cd.md @@ -1,6 +1,6 @@ --- id: 646de7b64467e96b7d35b5cd -title: Step 47 +title: Passo 47 challengeType: 0 dashedName: step-47 --- diff --git a/curriculum/challenges/portuguese/14-responsive-web-design-22/learn-intermediate-css-by-building-a-cat-painting/646de8478d6f796bfbdccfb2.md b/curriculum/challenges/portuguese/14-responsive-web-design-22/learn-intermediate-css-by-building-a-cat-painting/646de8478d6f796bfbdccfb2.md index b376c539f32..786a4c0b840 100644 --- a/curriculum/challenges/portuguese/14-responsive-web-design-22/learn-intermediate-css-by-building-a-cat-painting/646de8478d6f796bfbdccfb2.md +++ b/curriculum/challenges/portuguese/14-responsive-web-design-22/learn-intermediate-css-by-building-a-cat-painting/646de8478d6f796bfbdccfb2.md @@ -1,6 +1,6 @@ --- id: 646de8478d6f796bfbdccfb2 -title: Step 48 +title: Passo 48 challengeType: 0 dashedName: step-48 --- diff --git a/curriculum/challenges/portuguese/14-responsive-web-design-22/learn-intermediate-css-by-building-a-cat-painting/646de8d204a3426c7d184372.md b/curriculum/challenges/portuguese/14-responsive-web-design-22/learn-intermediate-css-by-building-a-cat-painting/646de8d204a3426c7d184372.md index 74ba34db408..095482dfc39 100644 --- a/curriculum/challenges/portuguese/14-responsive-web-design-22/learn-intermediate-css-by-building-a-cat-painting/646de8d204a3426c7d184372.md +++ b/curriculum/challenges/portuguese/14-responsive-web-design-22/learn-intermediate-css-by-building-a-cat-painting/646de8d204a3426c7d184372.md @@ -1,6 +1,6 @@ --- id: 646de8d204a3426c7d184372 -title: Step 49 +title: Passo 49 challengeType: 0 dashedName: step-49 --- diff --git a/curriculum/challenges/portuguese/14-responsive-web-design-22/learn-intermediate-css-by-building-a-cat-painting/646dea1c98c2426d43a705c3.md b/curriculum/challenges/portuguese/14-responsive-web-design-22/learn-intermediate-css-by-building-a-cat-painting/646dea1c98c2426d43a705c3.md index b0243121123..7d67168271a 100644 --- a/curriculum/challenges/portuguese/14-responsive-web-design-22/learn-intermediate-css-by-building-a-cat-painting/646dea1c98c2426d43a705c3.md +++ b/curriculum/challenges/portuguese/14-responsive-web-design-22/learn-intermediate-css-by-building-a-cat-painting/646dea1c98c2426d43a705c3.md @@ -1,6 +1,6 @@ --- id: 646dea1c98c2426d43a705c3 -title: Step 50 +title: Passo 50 challengeType: 0 dashedName: step-50 --- diff --git a/curriculum/challenges/portuguese/14-responsive-web-design-22/learn-intermediate-css-by-building-a-cat-painting/646deb169847f86df0f95bfc.md b/curriculum/challenges/portuguese/14-responsive-web-design-22/learn-intermediate-css-by-building-a-cat-painting/646deb169847f86df0f95bfc.md index 1b344dc94cc..05854fc11a7 100644 --- a/curriculum/challenges/portuguese/14-responsive-web-design-22/learn-intermediate-css-by-building-a-cat-painting/646deb169847f86df0f95bfc.md +++ b/curriculum/challenges/portuguese/14-responsive-web-design-22/learn-intermediate-css-by-building-a-cat-painting/646deb169847f86df0f95bfc.md @@ -1,6 +1,6 @@ --- id: 646deb169847f86df0f95bfc -title: Step 51 +title: Passo 51 challengeType: 0 dashedName: step-51 --- diff --git a/curriculum/challenges/portuguese/14-responsive-web-design-22/learn-intermediate-css-by-building-a-cat-painting/646dec359bef3b7811fba5a6.md b/curriculum/challenges/portuguese/14-responsive-web-design-22/learn-intermediate-css-by-building-a-cat-painting/646dec359bef3b7811fba5a6.md index f7933f8c3dc..220ef75c063 100644 --- a/curriculum/challenges/portuguese/14-responsive-web-design-22/learn-intermediate-css-by-building-a-cat-painting/646dec359bef3b7811fba5a6.md +++ b/curriculum/challenges/portuguese/14-responsive-web-design-22/learn-intermediate-css-by-building-a-cat-painting/646dec359bef3b7811fba5a6.md @@ -1,6 +1,6 @@ --- id: 646dec359bef3b7811fba5a6 -title: Step 52 +title: Passo 52 challengeType: 0 dashedName: step-52 --- diff --git a/curriculum/challenges/portuguese/14-responsive-web-design-22/learn-intermediate-css-by-building-a-cat-painting/646dedbcba062079128b2ecc.md b/curriculum/challenges/portuguese/14-responsive-web-design-22/learn-intermediate-css-by-building-a-cat-painting/646dedbcba062079128b2ecc.md index 143f0179cfe..9bb10338880 100644 --- a/curriculum/challenges/portuguese/14-responsive-web-design-22/learn-intermediate-css-by-building-a-cat-painting/646dedbcba062079128b2ecc.md +++ b/curriculum/challenges/portuguese/14-responsive-web-design-22/learn-intermediate-css-by-building-a-cat-painting/646dedbcba062079128b2ecc.md @@ -1,6 +1,6 @@ --- id: 646dedbcba062079128b2ecc -title: Step 53 +title: Passo 53 challengeType: 0 dashedName: step-53 --- @@ -11,7 +11,7 @@ It's time to work on the nose. In your HTML, create a `div` element with the cla # --hints-- -You should create a `div` element. +Você deve criar um elemento `div`. ```js assert(document.querySelectorAll('div').length === 12) diff --git a/curriculum/challenges/portuguese/14-responsive-web-design-22/learn-intermediate-css-by-building-a-cat-painting/646def5e863abf7a14501421.md b/curriculum/challenges/portuguese/14-responsive-web-design-22/learn-intermediate-css-by-building-a-cat-painting/646def5e863abf7a14501421.md index bf02b9cf8fc..e89458e7446 100644 --- a/curriculum/challenges/portuguese/14-responsive-web-design-22/learn-intermediate-css-by-building-a-cat-painting/646def5e863abf7a14501421.md +++ b/curriculum/challenges/portuguese/14-responsive-web-design-22/learn-intermediate-css-by-building-a-cat-painting/646def5e863abf7a14501421.md @@ -1,6 +1,6 @@ --- id: 646def5e863abf7a14501421 -title: Step 54 +title: Passo 54 challengeType: 0 dashedName: step-54 --- diff --git a/curriculum/challenges/portuguese/14-responsive-web-design-22/learn-intermediate-css-by-building-a-cat-painting/646df03c8f79337ab46f148b.md b/curriculum/challenges/portuguese/14-responsive-web-design-22/learn-intermediate-css-by-building-a-cat-painting/646df03c8f79337ab46f148b.md index ef9238633b8..876692507a8 100644 --- a/curriculum/challenges/portuguese/14-responsive-web-design-22/learn-intermediate-css-by-building-a-cat-painting/646df03c8f79337ab46f148b.md +++ b/curriculum/challenges/portuguese/14-responsive-web-design-22/learn-intermediate-css-by-building-a-cat-painting/646df03c8f79337ab46f148b.md @@ -1,6 +1,6 @@ --- id: 646df03c8f79337ab46f148b -title: Step 55 +title: Passo 55 challengeType: 0 dashedName: step-55 --- diff --git a/curriculum/challenges/portuguese/14-responsive-web-design-22/learn-intermediate-css-by-building-a-cat-painting/646df0cf26413a7b35e4b8b3.md b/curriculum/challenges/portuguese/14-responsive-web-design-22/learn-intermediate-css-by-building-a-cat-painting/646df0cf26413a7b35e4b8b3.md index 0318f9d7f46..33c575e159d 100644 --- a/curriculum/challenges/portuguese/14-responsive-web-design-22/learn-intermediate-css-by-building-a-cat-painting/646df0cf26413a7b35e4b8b3.md +++ b/curriculum/challenges/portuguese/14-responsive-web-design-22/learn-intermediate-css-by-building-a-cat-painting/646df0cf26413a7b35e4b8b3.md @@ -1,6 +1,6 @@ --- id: 646df0cf26413a7b35e4b8b3 -title: Step 56 +title: Passo 56 challengeType: 0 dashedName: step-56 --- diff --git a/curriculum/challenges/portuguese/14-responsive-web-design-22/learn-intermediate-css-by-building-a-cat-painting/646df1d1aa4ae57bdf1869c4.md b/curriculum/challenges/portuguese/14-responsive-web-design-22/learn-intermediate-css-by-building-a-cat-painting/646df1d1aa4ae57bdf1869c4.md index 9d8231e174b..d4c8241aeab 100644 --- a/curriculum/challenges/portuguese/14-responsive-web-design-22/learn-intermediate-css-by-building-a-cat-painting/646df1d1aa4ae57bdf1869c4.md +++ b/curriculum/challenges/portuguese/14-responsive-web-design-22/learn-intermediate-css-by-building-a-cat-painting/646df1d1aa4ae57bdf1869c4.md @@ -1,6 +1,6 @@ --- id: 646df1d1aa4ae57bdf1869c4 -title: Step 57 +title: Passo 57 challengeType: 0 dashedName: step-57 --- diff --git a/curriculum/challenges/portuguese/14-responsive-web-design-22/learn-intermediate-css-by-building-a-cat-painting/646dffd8ce9ac77ec1906f2e.md b/curriculum/challenges/portuguese/14-responsive-web-design-22/learn-intermediate-css-by-building-a-cat-painting/646dffd8ce9ac77ec1906f2e.md index 3ef80ee39bb..d183b634fe3 100644 --- a/curriculum/challenges/portuguese/14-responsive-web-design-22/learn-intermediate-css-by-building-a-cat-painting/646dffd8ce9ac77ec1906f2e.md +++ b/curriculum/challenges/portuguese/14-responsive-web-design-22/learn-intermediate-css-by-building-a-cat-painting/646dffd8ce9ac77ec1906f2e.md @@ -1,6 +1,6 @@ --- id: 646dffd8ce9ac77ec1906f2e -title: Step 58 +title: Passo 58 challengeType: 0 dashedName: step-58 --- diff --git a/curriculum/challenges/portuguese/14-responsive-web-design-22/learn-intermediate-css-by-building-a-cat-painting/646f0417322c0e04983a5149.md b/curriculum/challenges/portuguese/14-responsive-web-design-22/learn-intermediate-css-by-building-a-cat-painting/646f0417322c0e04983a5149.md index a561360c7e9..65cdf8346f5 100644 --- a/curriculum/challenges/portuguese/14-responsive-web-design-22/learn-intermediate-css-by-building-a-cat-painting/646f0417322c0e04983a5149.md +++ b/curriculum/challenges/portuguese/14-responsive-web-design-22/learn-intermediate-css-by-building-a-cat-painting/646f0417322c0e04983a5149.md @@ -1,6 +1,6 @@ --- id: 646f0417322c0e04983a5149 -title: Step 61 +title: Passo 61 challengeType: 0 dashedName: step-61 --- diff --git a/curriculum/challenges/portuguese/14-responsive-web-design-22/learn-intermediate-css-by-building-a-cat-painting/646f08293804a30685533c6f.md b/curriculum/challenges/portuguese/14-responsive-web-design-22/learn-intermediate-css-by-building-a-cat-painting/646f08293804a30685533c6f.md index 46ce69b8f2c..c625d56506b 100644 --- a/curriculum/challenges/portuguese/14-responsive-web-design-22/learn-intermediate-css-by-building-a-cat-painting/646f08293804a30685533c6f.md +++ b/curriculum/challenges/portuguese/14-responsive-web-design-22/learn-intermediate-css-by-building-a-cat-painting/646f08293804a30685533c6f.md @@ -1,6 +1,6 @@ --- id: 646f08293804a30685533c6f -title: Step 62 +title: Passo 62 challengeType: 0 dashedName: step-62 --- diff --git a/curriculum/challenges/portuguese/14-responsive-web-design-22/learn-intermediate-css-by-building-a-cat-painting/646f09293eb3230723a62f77.md b/curriculum/challenges/portuguese/14-responsive-web-design-22/learn-intermediate-css-by-building-a-cat-painting/646f09293eb3230723a62f77.md index 03853c3938b..32995a8525a 100644 --- a/curriculum/challenges/portuguese/14-responsive-web-design-22/learn-intermediate-css-by-building-a-cat-painting/646f09293eb3230723a62f77.md +++ b/curriculum/challenges/portuguese/14-responsive-web-design-22/learn-intermediate-css-by-building-a-cat-painting/646f09293eb3230723a62f77.md @@ -1,6 +1,6 @@ --- id: 646f09293eb3230723a62f77 -title: Step 63 +title: Passo 63 challengeType: 0 dashedName: step-63 --- diff --git a/curriculum/challenges/portuguese/14-responsive-web-design-22/learn-intermediate-css-by-building-a-cat-painting/646f0c9a1e3360092d1bbd33.md b/curriculum/challenges/portuguese/14-responsive-web-design-22/learn-intermediate-css-by-building-a-cat-painting/646f0c9a1e3360092d1bbd33.md index 2a01ed169d2..ae97b323f08 100644 --- a/curriculum/challenges/portuguese/14-responsive-web-design-22/learn-intermediate-css-by-building-a-cat-painting/646f0c9a1e3360092d1bbd33.md +++ b/curriculum/challenges/portuguese/14-responsive-web-design-22/learn-intermediate-css-by-building-a-cat-painting/646f0c9a1e3360092d1bbd33.md @@ -1,6 +1,6 @@ --- id: 646f0c9a1e3360092d1bbd33 -title: Step 64 +title: Passo 64 challengeType: 0 dashedName: step-64 --- diff --git a/curriculum/challenges/portuguese/14-responsive-web-design-22/learn-intermediate-css-by-building-a-cat-painting/646f0ce5737243098ad6e494.md b/curriculum/challenges/portuguese/14-responsive-web-design-22/learn-intermediate-css-by-building-a-cat-painting/646f0ce5737243098ad6e494.md index 3d75bf77a02..170b67b279b 100644 --- a/curriculum/challenges/portuguese/14-responsive-web-design-22/learn-intermediate-css-by-building-a-cat-painting/646f0ce5737243098ad6e494.md +++ b/curriculum/challenges/portuguese/14-responsive-web-design-22/learn-intermediate-css-by-building-a-cat-painting/646f0ce5737243098ad6e494.md @@ -1,6 +1,6 @@ --- id: 646f0ce5737243098ad6e494 -title: Step 65 +title: Passo 65 challengeType: 0 dashedName: step-65 --- @@ -13,7 +13,7 @@ Create a `div` element with the class `cat-whiskers`. # --hints-- -You should create a `div` element. +Você deve criar um elemento `div`. ```js assert(document.querySelectorAll('div').length === 16) diff --git a/curriculum/challenges/portuguese/14-responsive-web-design-22/learn-intermediate-css-by-building-a-cat-painting/646f0ef13604420a8744f7d4.md b/curriculum/challenges/portuguese/14-responsive-web-design-22/learn-intermediate-css-by-building-a-cat-painting/646f0ef13604420a8744f7d4.md index 6e28a86659a..d471abec9a1 100644 --- a/curriculum/challenges/portuguese/14-responsive-web-design-22/learn-intermediate-css-by-building-a-cat-painting/646f0ef13604420a8744f7d4.md +++ b/curriculum/challenges/portuguese/14-responsive-web-design-22/learn-intermediate-css-by-building-a-cat-painting/646f0ef13604420a8744f7d4.md @@ -1,6 +1,6 @@ --- id: 646f0ef13604420a8744f7d4 -title: Step 66 +title: Passo 66 challengeType: 0 dashedName: step-66 --- diff --git a/curriculum/challenges/portuguese/14-responsive-web-design-22/learn-intermediate-css-by-building-a-cat-painting/646f0f7c5933560af8e7e380.md b/curriculum/challenges/portuguese/14-responsive-web-design-22/learn-intermediate-css-by-building-a-cat-painting/646f0f7c5933560af8e7e380.md index 291e0fbd52d..4e62321899b 100644 --- a/curriculum/challenges/portuguese/14-responsive-web-design-22/learn-intermediate-css-by-building-a-cat-painting/646f0f7c5933560af8e7e380.md +++ b/curriculum/challenges/portuguese/14-responsive-web-design-22/learn-intermediate-css-by-building-a-cat-painting/646f0f7c5933560af8e7e380.md @@ -1,6 +1,6 @@ --- id: 646f0f7c5933560af8e7e380 -title: Step 67 +title: Passo 67 challengeType: 0 dashedName: step-67 --- diff --git a/curriculum/challenges/portuguese/14-responsive-web-design-22/learn-intermediate-css-by-building-a-cat-painting/646f102bf87b350b593baa72.md b/curriculum/challenges/portuguese/14-responsive-web-design-22/learn-intermediate-css-by-building-a-cat-painting/646f102bf87b350b593baa72.md index 820cbd44d12..ac5b5f2e1bd 100644 --- a/curriculum/challenges/portuguese/14-responsive-web-design-22/learn-intermediate-css-by-building-a-cat-painting/646f102bf87b350b593baa72.md +++ b/curriculum/challenges/portuguese/14-responsive-web-design-22/learn-intermediate-css-by-building-a-cat-painting/646f102bf87b350b593baa72.md @@ -1,6 +1,6 @@ --- id: 646f102bf87b350b593baa72 -title: Step 68 +title: Passo 68 challengeType: 0 dashedName: step-68 --- diff --git a/curriculum/challenges/portuguese/14-responsive-web-design-22/learn-intermediate-css-by-building-a-cat-painting/646f107abb89d00bb99f387a.md b/curriculum/challenges/portuguese/14-responsive-web-design-22/learn-intermediate-css-by-building-a-cat-painting/646f107abb89d00bb99f387a.md index 741c609e6b3..3d78357c999 100644 --- a/curriculum/challenges/portuguese/14-responsive-web-design-22/learn-intermediate-css-by-building-a-cat-painting/646f107abb89d00bb99f387a.md +++ b/curriculum/challenges/portuguese/14-responsive-web-design-22/learn-intermediate-css-by-building-a-cat-painting/646f107abb89d00bb99f387a.md @@ -1,6 +1,6 @@ --- id: 646f107abb89d00bb99f387a -title: Step 69 +title: Passo 69 challengeType: 0 dashedName: step-69 --- diff --git a/curriculum/challenges/portuguese/14-responsive-web-design-22/learn-intermediate-css-by-building-a-cat-painting/646f12da0b4c5d0ca162834a.md b/curriculum/challenges/portuguese/14-responsive-web-design-22/learn-intermediate-css-by-building-a-cat-painting/646f12da0b4c5d0ca162834a.md index b1c107c9c2e..a083ab6eca7 100644 --- a/curriculum/challenges/portuguese/14-responsive-web-design-22/learn-intermediate-css-by-building-a-cat-painting/646f12da0b4c5d0ca162834a.md +++ b/curriculum/challenges/portuguese/14-responsive-web-design-22/learn-intermediate-css-by-building-a-cat-painting/646f12da0b4c5d0ca162834a.md @@ -1,6 +1,6 @@ --- id: 646f12da0b4c5d0ca162834a -title: Step 71 +title: Passo 71 challengeType: 0 dashedName: step-71 --- diff --git a/curriculum/challenges/portuguese/14-responsive-web-design-22/learn-intermediate-css-by-building-a-cat-painting/646f135eab69d90d0c6d4e9b.md b/curriculum/challenges/portuguese/14-responsive-web-design-22/learn-intermediate-css-by-building-a-cat-painting/646f135eab69d90d0c6d4e9b.md index 9ae2339b4dc..58d0efeb53b 100644 --- a/curriculum/challenges/portuguese/14-responsive-web-design-22/learn-intermediate-css-by-building-a-cat-painting/646f135eab69d90d0c6d4e9b.md +++ b/curriculum/challenges/portuguese/14-responsive-web-design-22/learn-intermediate-css-by-building-a-cat-painting/646f135eab69d90d0c6d4e9b.md @@ -1,6 +1,6 @@ --- id: 646f135eab69d90d0c6d4e9b -title: Step 72 +title: Passo 72 challengeType: 0 dashedName: step-72 --- diff --git a/curriculum/challenges/portuguese/14-responsive-web-design-22/learn-intermediate-css-by-building-a-cat-painting/646f159b2cffb21150b927cb.md b/curriculum/challenges/portuguese/14-responsive-web-design-22/learn-intermediate-css-by-building-a-cat-painting/646f159b2cffb21150b927cb.md index c0b941997a6..4367526308b 100644 --- a/curriculum/challenges/portuguese/14-responsive-web-design-22/learn-intermediate-css-by-building-a-cat-painting/646f159b2cffb21150b927cb.md +++ b/curriculum/challenges/portuguese/14-responsive-web-design-22/learn-intermediate-css-by-building-a-cat-painting/646f159b2cffb21150b927cb.md @@ -1,6 +1,6 @@ --- id: 646f159b2cffb21150b927cb -title: Step 73 +title: Passo 73 challengeType: 0 dashedName: step-73 --- diff --git a/curriculum/challenges/portuguese/14-responsive-web-design-22/learn-intermediate-css-by-building-a-cat-painting/646f164bf100dd11d226161f.md b/curriculum/challenges/portuguese/14-responsive-web-design-22/learn-intermediate-css-by-building-a-cat-painting/646f164bf100dd11d226161f.md index 0a537b0812d..3d23cd902ee 100644 --- a/curriculum/challenges/portuguese/14-responsive-web-design-22/learn-intermediate-css-by-building-a-cat-painting/646f164bf100dd11d226161f.md +++ b/curriculum/challenges/portuguese/14-responsive-web-design-22/learn-intermediate-css-by-building-a-cat-painting/646f164bf100dd11d226161f.md @@ -1,6 +1,6 @@ --- id: 646f164bf100dd11d226161f -title: Step 74 +title: Passo 74 challengeType: 0 dashedName: step-74 --- diff --git a/curriculum/challenges/portuguese/14-responsive-web-design-22/learn-intermediate-css-by-building-a-cat-painting/646f1764e2f1d212ba9785a7.md b/curriculum/challenges/portuguese/14-responsive-web-design-22/learn-intermediate-css-by-building-a-cat-painting/646f1764e2f1d212ba9785a7.md index 651a9405914..8d5a2611eeb 100644 --- a/curriculum/challenges/portuguese/14-responsive-web-design-22/learn-intermediate-css-by-building-a-cat-painting/646f1764e2f1d212ba9785a7.md +++ b/curriculum/challenges/portuguese/14-responsive-web-design-22/learn-intermediate-css-by-building-a-cat-painting/646f1764e2f1d212ba9785a7.md @@ -1,6 +1,6 @@ --- id: 646f1764e2f1d212ba9785a7 -title: Step 75 +title: Passo 75 challengeType: 0 dashedName: step-75 --- diff --git a/curriculum/challenges/portuguese/14-responsive-web-design-22/learn-intermediate-css-by-building-a-cat-painting/646f1802a09a171332e14630.md b/curriculum/challenges/portuguese/14-responsive-web-design-22/learn-intermediate-css-by-building-a-cat-painting/646f1802a09a171332e14630.md index bc03c983374..a02b887f6a5 100644 --- a/curriculum/challenges/portuguese/14-responsive-web-design-22/learn-intermediate-css-by-building-a-cat-painting/646f1802a09a171332e14630.md +++ b/curriculum/challenges/portuguese/14-responsive-web-design-22/learn-intermediate-css-by-building-a-cat-painting/646f1802a09a171332e14630.md @@ -1,6 +1,6 @@ --- id: 646f1802a09a171332e14630 -title: Step 76 +title: Passo 76 challengeType: 0 dashedName: step-76 --- diff --git a/curriculum/challenges/portuguese/14-responsive-web-design-22/learn-intermediate-css-by-building-a-cat-painting/646f4d6c42dc5f214f4e7444.md b/curriculum/challenges/portuguese/14-responsive-web-design-22/learn-intermediate-css-by-building-a-cat-painting/646f4d6c42dc5f214f4e7444.md index e365b97d693..d1423c28ae8 100644 --- a/curriculum/challenges/portuguese/14-responsive-web-design-22/learn-intermediate-css-by-building-a-cat-painting/646f4d6c42dc5f214f4e7444.md +++ b/curriculum/challenges/portuguese/14-responsive-web-design-22/learn-intermediate-css-by-building-a-cat-painting/646f4d6c42dc5f214f4e7444.md @@ -1,6 +1,6 @@ --- id: 646f4d6c42dc5f214f4e7444 -title: Step 77 +title: Passo 77 challengeType: 0 dashedName: step-77 --- diff --git a/curriculum/challenges/portuguese/14-responsive-web-design-22/learn-intermediate-css-by-building-a-cat-painting/646f4e46e81f7021d5fd9c1d.md b/curriculum/challenges/portuguese/14-responsive-web-design-22/learn-intermediate-css-by-building-a-cat-painting/646f4e46e81f7021d5fd9c1d.md index 9df724448e7..fe02b644619 100644 --- a/curriculum/challenges/portuguese/14-responsive-web-design-22/learn-intermediate-css-by-building-a-cat-painting/646f4e46e81f7021d5fd9c1d.md +++ b/curriculum/challenges/portuguese/14-responsive-web-design-22/learn-intermediate-css-by-building-a-cat-painting/646f4e46e81f7021d5fd9c1d.md @@ -1,6 +1,6 @@ --- id: 646f4e46e81f7021d5fd9c1d -title: Step 78 +title: Passo 78 challengeType: 0 dashedName: step-78 --- diff --git a/curriculum/challenges/portuguese/14-responsive-web-design-22/learn-intermediate-css-by-building-a-cat-painting/646f4f6a14e3c522d130a0d2.md b/curriculum/challenges/portuguese/14-responsive-web-design-22/learn-intermediate-css-by-building-a-cat-painting/646f4f6a14e3c522d130a0d2.md index 2f79cbf9301..aec5e86af1d 100644 --- a/curriculum/challenges/portuguese/14-responsive-web-design-22/learn-intermediate-css-by-building-a-cat-painting/646f4f6a14e3c522d130a0d2.md +++ b/curriculum/challenges/portuguese/14-responsive-web-design-22/learn-intermediate-css-by-building-a-cat-painting/646f4f6a14e3c522d130a0d2.md @@ -1,6 +1,6 @@ --- id: 646f4f6a14e3c522d130a0d2 -title: Step 79 +title: Passo 79 challengeType: 0 dashedName: step-79 --- diff --git a/curriculum/challenges/portuguese/14-responsive-web-design-22/learn-intermediate-css-by-building-a-cat-painting/646f4fe12b7985232bf475a5.md b/curriculum/challenges/portuguese/14-responsive-web-design-22/learn-intermediate-css-by-building-a-cat-painting/646f4fe12b7985232bf475a5.md index a7d861a1258..7254433efb9 100644 --- a/curriculum/challenges/portuguese/14-responsive-web-design-22/learn-intermediate-css-by-building-a-cat-painting/646f4fe12b7985232bf475a5.md +++ b/curriculum/challenges/portuguese/14-responsive-web-design-22/learn-intermediate-css-by-building-a-cat-painting/646f4fe12b7985232bf475a5.md @@ -1,6 +1,6 @@ --- id: 646f4fe12b7985232bf475a5 -title: Step 80 +title: Passo 80 challengeType: 0 dashedName: step-80 --- diff --git a/curriculum/challenges/portuguese/14-responsive-web-design-22/learn-intermediate-css-by-building-a-cat-painting/646f507e4d1cd323f17db4fc.md b/curriculum/challenges/portuguese/14-responsive-web-design-22/learn-intermediate-css-by-building-a-cat-painting/646f507e4d1cd323f17db4fc.md index d0cf2b64a3f..f772d6fb19d 100644 --- a/curriculum/challenges/portuguese/14-responsive-web-design-22/learn-intermediate-css-by-building-a-cat-painting/646f507e4d1cd323f17db4fc.md +++ b/curriculum/challenges/portuguese/14-responsive-web-design-22/learn-intermediate-css-by-building-a-cat-painting/646f507e4d1cd323f17db4fc.md @@ -1,6 +1,6 @@ --- id: 646f507e4d1cd323f17db4fc -title: Step 81 +title: Passo 81 challengeType: 0 dashedName: step-81 --- diff --git a/curriculum/challenges/portuguese/14-responsive-web-design-22/learn-intermediate-css-by-building-a-cat-painting/646f516dbfc1342495515625.md b/curriculum/challenges/portuguese/14-responsive-web-design-22/learn-intermediate-css-by-building-a-cat-painting/646f516dbfc1342495515625.md index 3bf9207660e..612b7be2270 100644 --- a/curriculum/challenges/portuguese/14-responsive-web-design-22/learn-intermediate-css-by-building-a-cat-painting/646f516dbfc1342495515625.md +++ b/curriculum/challenges/portuguese/14-responsive-web-design-22/learn-intermediate-css-by-building-a-cat-painting/646f516dbfc1342495515625.md @@ -1,6 +1,6 @@ --- id: 646f516dbfc1342495515625 -title: Step 82 +title: Passo 82 challengeType: 0 dashedName: step-82 --- diff --git a/curriculum/challenges/portuguese/14-responsive-web-design-22/learn-intermediate-css-by-building-a-cat-painting/6476f5c17f99146071ee884c.md b/curriculum/challenges/portuguese/14-responsive-web-design-22/learn-intermediate-css-by-building-a-cat-painting/6476f5c17f99146071ee884c.md index 03ea4e8598b..dd58f7dc2f6 100644 --- a/curriculum/challenges/portuguese/14-responsive-web-design-22/learn-intermediate-css-by-building-a-cat-painting/6476f5c17f99146071ee884c.md +++ b/curriculum/challenges/portuguese/14-responsive-web-design-22/learn-intermediate-css-by-building-a-cat-painting/6476f5c17f99146071ee884c.md @@ -1,6 +1,6 @@ --- id: 6476f5c17f99146071ee884c -title: Step 10 +title: Passo 10 challengeType: 0 dashedName: step-10 --- diff --git a/curriculum/challenges/portuguese/14-responsive-web-design-22/learn-intermediate-css-by-building-a-cat-painting/6476f7a4827bcc61682f2347.md b/curriculum/challenges/portuguese/14-responsive-web-design-22/learn-intermediate-css-by-building-a-cat-painting/6476f7a4827bcc61682f2347.md index 0c28f0f242e..2fec224fdda 100644 --- a/curriculum/challenges/portuguese/14-responsive-web-design-22/learn-intermediate-css-by-building-a-cat-painting/6476f7a4827bcc61682f2347.md +++ b/curriculum/challenges/portuguese/14-responsive-web-design-22/learn-intermediate-css-by-building-a-cat-painting/6476f7a4827bcc61682f2347.md @@ -1,6 +1,6 @@ --- id: 6476f7a4827bcc61682f2347 -title: Step 11 +title: Passo 10 challengeType: 0 dashedName: step-11 --- diff --git a/curriculum/challenges/portuguese/14-responsive-web-design-22/learn-intermediate-css-by-building-a-cat-painting/6476fb7cbaafa36d65e9cf35.md b/curriculum/challenges/portuguese/14-responsive-web-design-22/learn-intermediate-css-by-building-a-cat-painting/6476fb7cbaafa36d65e9cf35.md index 85259f8c8bf..90397fcfbd6 100644 --- a/curriculum/challenges/portuguese/14-responsive-web-design-22/learn-intermediate-css-by-building-a-cat-painting/6476fb7cbaafa36d65e9cf35.md +++ b/curriculum/challenges/portuguese/14-responsive-web-design-22/learn-intermediate-css-by-building-a-cat-painting/6476fb7cbaafa36d65e9cf35.md @@ -1,6 +1,6 @@ --- id: 6476fb7cbaafa36d65e9cf35 -title: Step 12 +title: Passo 12 challengeType: 0 dashedName: step-12 --- @@ -13,7 +13,7 @@ You'll have to do some more markups to see how `fixed` positioning works. In you # --hints-- -You should have a `div` element. +Você deve ter um elemento `div`. ```js assert(document.querySelectorAll('div').length === 2); diff --git a/curriculum/challenges/portuguese/14-responsive-web-design-22/learn-intermediate-css-by-building-a-cat-painting/6476fc5cf14b276e6d04e82a.md b/curriculum/challenges/portuguese/14-responsive-web-design-22/learn-intermediate-css-by-building-a-cat-painting/6476fc5cf14b276e6d04e82a.md index a8a137321fe..8dd0dec9282 100644 --- a/curriculum/challenges/portuguese/14-responsive-web-design-22/learn-intermediate-css-by-building-a-cat-painting/6476fc5cf14b276e6d04e82a.md +++ b/curriculum/challenges/portuguese/14-responsive-web-design-22/learn-intermediate-css-by-building-a-cat-painting/6476fc5cf14b276e6d04e82a.md @@ -1,6 +1,6 @@ --- id: 6476fc5cf14b276e6d04e82a -title: Step 13 +title: Passo 13 challengeType: 0 dashedName: step-13 --- diff --git a/curriculum/challenges/portuguese/14-responsive-web-design-22/learn-intermediate-css-by-building-a-cat-painting/6476fd4213318f6ee211028a.md b/curriculum/challenges/portuguese/14-responsive-web-design-22/learn-intermediate-css-by-building-a-cat-painting/6476fd4213318f6ee211028a.md index bd1a9049d86..5ff19f3e502 100644 --- a/curriculum/challenges/portuguese/14-responsive-web-design-22/learn-intermediate-css-by-building-a-cat-painting/6476fd4213318f6ee211028a.md +++ b/curriculum/challenges/portuguese/14-responsive-web-design-22/learn-intermediate-css-by-building-a-cat-painting/6476fd4213318f6ee211028a.md @@ -1,6 +1,6 @@ --- id: 6476fd4213318f6ee211028a -title: Step 14 +title: Passo 14 challengeType: 0 dashedName: step-14 --- diff --git a/curriculum/challenges/portuguese/14-responsive-web-design-22/learn-intermediate-css-by-building-a-cat-painting/64770351e8586671ec0911f0.md b/curriculum/challenges/portuguese/14-responsive-web-design-22/learn-intermediate-css-by-building-a-cat-painting/64770351e8586671ec0911f0.md index 1c8891e4304..fb1d358d3fd 100644 --- a/curriculum/challenges/portuguese/14-responsive-web-design-22/learn-intermediate-css-by-building-a-cat-painting/64770351e8586671ec0911f0.md +++ b/curriculum/challenges/portuguese/14-responsive-web-design-22/learn-intermediate-css-by-building-a-cat-painting/64770351e8586671ec0911f0.md @@ -1,6 +1,6 @@ --- id: 64770351e8586671ec0911f0 -title: Step 15 +title: Passo 15 challengeType: 0 dashedName: step-15 --- diff --git a/curriculum/challenges/portuguese/14-responsive-web-design-22/learn-intermediate-css-by-building-a-cat-painting/6477062778c85972eb648030.md b/curriculum/challenges/portuguese/14-responsive-web-design-22/learn-intermediate-css-by-building-a-cat-painting/6477062778c85972eb648030.md index a7597864564..81a7524e394 100644 --- a/curriculum/challenges/portuguese/14-responsive-web-design-22/learn-intermediate-css-by-building-a-cat-painting/6477062778c85972eb648030.md +++ b/curriculum/challenges/portuguese/14-responsive-web-design-22/learn-intermediate-css-by-building-a-cat-painting/6477062778c85972eb648030.md @@ -1,6 +1,6 @@ --- id: 6477062778c85972eb648030 -title: Step 16 +title: Passo 16 challengeType: 0 dashedName: step-16 --- diff --git a/curriculum/challenges/portuguese/14-responsive-web-design-22/learn-intermediate-css-by-building-a-cat-painting/647d821de0d97b3283c72b36.md b/curriculum/challenges/portuguese/14-responsive-web-design-22/learn-intermediate-css-by-building-a-cat-painting/647d821de0d97b3283c72b36.md index 806db219734..84e6ab86a09 100644 --- a/curriculum/challenges/portuguese/14-responsive-web-design-22/learn-intermediate-css-by-building-a-cat-painting/647d821de0d97b3283c72b36.md +++ b/curriculum/challenges/portuguese/14-responsive-web-design-22/learn-intermediate-css-by-building-a-cat-painting/647d821de0d97b3283c72b36.md @@ -1,6 +1,6 @@ --- id: 647d821de0d97b3283c72b36 -title: Step 18 +title: Passo 18 challengeType: 0 dashedName: step-18 --- diff --git a/curriculum/challenges/portuguese/14-responsive-web-design-22/learn-intermediate-css-by-building-a-cat-painting/647d855ac12cd436059acd39.md b/curriculum/challenges/portuguese/14-responsive-web-design-22/learn-intermediate-css-by-building-a-cat-painting/647d855ac12cd436059acd39.md index 6e039d20c5c..09a91a9ac34 100644 --- a/curriculum/challenges/portuguese/14-responsive-web-design-22/learn-intermediate-css-by-building-a-cat-painting/647d855ac12cd436059acd39.md +++ b/curriculum/challenges/portuguese/14-responsive-web-design-22/learn-intermediate-css-by-building-a-cat-painting/647d855ac12cd436059acd39.md @@ -1,6 +1,6 @@ --- id: 647d855ac12cd436059acd39 -title: Step 4 +title: Passo 4 challengeType: 0 dashedName: step-4 --- diff --git a/curriculum/challenges/portuguese/14-responsive-web-design-22/learn-intermediate-css-by-building-a-cat-painting/649353647c44ef4867ab4935.md b/curriculum/challenges/portuguese/14-responsive-web-design-22/learn-intermediate-css-by-building-a-cat-painting/649353647c44ef4867ab4935.md index a7a70f95a81..fba89b981be 100644 --- a/curriculum/challenges/portuguese/14-responsive-web-design-22/learn-intermediate-css-by-building-a-cat-painting/649353647c44ef4867ab4935.md +++ b/curriculum/challenges/portuguese/14-responsive-web-design-22/learn-intermediate-css-by-building-a-cat-painting/649353647c44ef4867ab4935.md @@ -1,6 +1,6 @@ --- id: 649353647c44ef4867ab4935 -title: Step 17 +title: Passo 17 challengeType: 0 dashedName: step-17 --- diff --git a/curriculum/challenges/portuguese/14-responsive-web-design-22/learn-intermediate-css-by-building-a-cat-painting/64a2687ef267e5934a2f93e3.md b/curriculum/challenges/portuguese/14-responsive-web-design-22/learn-intermediate-css-by-building-a-cat-painting/64a2687ef267e5934a2f93e3.md index 04963838659..b0048f72617 100644 --- a/curriculum/challenges/portuguese/14-responsive-web-design-22/learn-intermediate-css-by-building-a-cat-painting/64a2687ef267e5934a2f93e3.md +++ b/curriculum/challenges/portuguese/14-responsive-web-design-22/learn-intermediate-css-by-building-a-cat-painting/64a2687ef267e5934a2f93e3.md @@ -1,6 +1,6 @@ --- id: 64a2687ef267e5934a2f93e3 -title: Step 59 +title: Passo 59 challengeType: 0 dashedName: step-59 --- diff --git a/curriculum/challenges/portuguese/14-responsive-web-design-22/learn-intermediate-css-by-building-a-cat-painting/64a26ac5540c5493f4641f10.md b/curriculum/challenges/portuguese/14-responsive-web-design-22/learn-intermediate-css-by-building-a-cat-painting/64a26ac5540c5493f4641f10.md index d46fbf6da0d..fabf5c91138 100644 --- a/curriculum/challenges/portuguese/14-responsive-web-design-22/learn-intermediate-css-by-building-a-cat-painting/64a26ac5540c5493f4641f10.md +++ b/curriculum/challenges/portuguese/14-responsive-web-design-22/learn-intermediate-css-by-building-a-cat-painting/64a26ac5540c5493f4641f10.md @@ -1,6 +1,6 @@ --- id: 64a26ac5540c5493f4641f10 -title: Step 60 +title: Passo 60 challengeType: 0 dashedName: step-60 --- diff --git a/curriculum/challenges/portuguese/14-responsive-web-design-22/learn-intermediate-css-by-building-a-cat-painting/64a3bcbc83e574b58c8ed048.md b/curriculum/challenges/portuguese/14-responsive-web-design-22/learn-intermediate-css-by-building-a-cat-painting/64a3bcbc83e574b58c8ed048.md index 4f3a8d2de51..34578cb275c 100644 --- a/curriculum/challenges/portuguese/14-responsive-web-design-22/learn-intermediate-css-by-building-a-cat-painting/64a3bcbc83e574b58c8ed048.md +++ b/curriculum/challenges/portuguese/14-responsive-web-design-22/learn-intermediate-css-by-building-a-cat-painting/64a3bcbc83e574b58c8ed048.md @@ -1,6 +1,6 @@ --- id: 64a3bcbc83e574b58c8ed048 -title: Step 70 +title: Passo 70 challengeType: 0 dashedName: step-70 --- diff --git a/curriculum/challenges/swahili/03-front-end-development-libraries/front-end-development-libraries-projects/build-a-25-5-clock.md b/curriculum/challenges/swahili/03-front-end-development-libraries/front-end-development-libraries-projects/build-a-25-5-clock.md index 85e20712b47..4810f83e98b 100644 --- a/curriculum/challenges/swahili/03-front-end-development-libraries/front-end-development-libraries-projects/build-a-25-5-clock.md +++ b/curriculum/challenges/swahili/03-front-end-development-libraries/front-end-development-libraries-projects/build-a-25-5-clock.md @@ -8,6 +8,8 @@ dashedName: build-a-25--5-clock # --description-- +**Note:** **React 18 has known incompatibilities with the tests for this project (see [issue](https://github.com/freeCodeCamp/freeCodeCamp/issues/45922))** + **Objective:** Build an app that is functionally similar to this: https://25--5-clock.freecodecamp.rocks. Fulfill the below user stories and get all of the tests to pass. Use whichever libraries or APIs you need. Give it your own personal style. diff --git a/curriculum/challenges/swahili/03-front-end-development-libraries/front-end-development-libraries-projects/build-a-drum-machine.md b/curriculum/challenges/swahili/03-front-end-development-libraries/front-end-development-libraries-projects/build-a-drum-machine.md index d4cfa0eb265..662e7e75cb7 100644 --- a/curriculum/challenges/swahili/03-front-end-development-libraries/front-end-development-libraries-projects/build-a-drum-machine.md +++ b/curriculum/challenges/swahili/03-front-end-development-libraries/front-end-development-libraries-projects/build-a-drum-machine.md @@ -7,6 +7,7 @@ dashedName: build-a-drum-machine --- # --description-- +**Note:** **React 18 has known incompatibilities with the tests for this project (see [issue](https://github.com/freeCodeCamp/freeCodeCamp/issues/45922))** **Objective:** Build an app that is functionally similar to this: https://drum-machine.freecodecamp.rocks/. diff --git a/curriculum/challenges/swahili/03-front-end-development-libraries/front-end-development-libraries-projects/build-a-javascript-calculator.md b/curriculum/challenges/swahili/03-front-end-development-libraries/front-end-development-libraries-projects/build-a-javascript-calculator.md index 410481d8e9e..e496902366e 100644 --- a/curriculum/challenges/swahili/03-front-end-development-libraries/front-end-development-libraries-projects/build-a-javascript-calculator.md +++ b/curriculum/challenges/swahili/03-front-end-development-libraries/front-end-development-libraries-projects/build-a-javascript-calculator.md @@ -7,6 +7,7 @@ dashedName: build-a-javascript-calculator --- # --description-- +**Note:** **React 18 has known incompatibilities with the tests for this project (see [issue](https://github.com/freeCodeCamp/freeCodeCamp/issues/45922))** **Objective:** Build an app that is functionally similar to this: https://javascript-calculator.freecodecamp.rocks/. diff --git a/curriculum/challenges/swahili/03-front-end-development-libraries/front-end-development-libraries-projects/build-a-markdown-previewer.md b/curriculum/challenges/swahili/03-front-end-development-libraries/front-end-development-libraries-projects/build-a-markdown-previewer.md index c8f241e9d58..1118b05ccd8 100644 --- a/curriculum/challenges/swahili/03-front-end-development-libraries/front-end-development-libraries-projects/build-a-markdown-previewer.md +++ b/curriculum/challenges/swahili/03-front-end-development-libraries/front-end-development-libraries-projects/build-a-markdown-previewer.md @@ -7,6 +7,7 @@ dashedName: build-a-markdown-previewer --- # --description-- +**Note:** **React 18 has known incompatibilities with the tests for this project (see [issue](https://github.com/freeCodeCamp/freeCodeCamp/issues/45922))** **Objective:** Build an app that is functionally similar to this: https://markdown-previewer.freecodecamp.rocks/. diff --git a/curriculum/challenges/swahili/03-front-end-development-libraries/front-end-development-libraries-projects/build-a-random-quote-machine.md b/curriculum/challenges/swahili/03-front-end-development-libraries/front-end-development-libraries-projects/build-a-random-quote-machine.md index 5f3f47ba7ff..843db92d694 100644 --- a/curriculum/challenges/swahili/03-front-end-development-libraries/front-end-development-libraries-projects/build-a-random-quote-machine.md +++ b/curriculum/challenges/swahili/03-front-end-development-libraries/front-end-development-libraries-projects/build-a-random-quote-machine.md @@ -7,6 +7,7 @@ dashedName: build-a-random-quote-machine --- # --description-- +**Note:** **React 18 has known incompatibilities with the tests for this project (see [issue](https://github.com/freeCodeCamp/freeCodeCamp/issues/45922))** **Objective:** Build an app that is functionally similar to this: https://random-quote-machine.freecodecamp.rocks/. diff --git a/curriculum/challenges/ukrainian/03-front-end-development-libraries/front-end-development-libraries-projects/build-a-25-5-clock.md b/curriculum/challenges/ukrainian/03-front-end-development-libraries/front-end-development-libraries-projects/build-a-25-5-clock.md index 726a86db379..b9ecbd4284b 100644 --- a/curriculum/challenges/ukrainian/03-front-end-development-libraries/front-end-development-libraries-projects/build-a-25-5-clock.md +++ b/curriculum/challenges/ukrainian/03-front-end-development-libraries/front-end-development-libraries-projects/build-a-25-5-clock.md @@ -8,71 +8,73 @@ dashedName: build-a-25--5-clock # --description-- -**Мета:** створити застосунок, функціонально схожий до https://25--5-clock.freecodecamp.rocks. +**Note:** **React 18 has known incompatibilities with the tests for this project (see [issue](https://github.com/freeCodeCamp/freeCodeCamp/issues/45922))** -Виконайте історію користувача та пройдіть тести. Використовуйте необхідні вам бібліотеки або API. Оформте за власним стилем. +**Objective:** Build an app that is functionally similar to this: https://25--5-clock.freecodecamp.rocks. -Для виконання цього проєкту можна використати різне поєднання HTML, JavaScript, CSS, Bootstrap, SASS, React, Redux та jQuery. Потрібно використати фронтенд фреймворк (наприклад, React), оскільки цей розділ стосується їх вивчення. Додаткові технології, що не перераховані вище, не рекомендовані і використовуються на власний ризик. Ми розглядаємо використання інших фронтенд фреймворків, серед яких Angular та Vue, але наразі вони не підтримуються. Ми приймемо та спробуємо виправити помилки всіх звітів, у яких використано запропонований стек. Щасливого програмування! +Fulfill the below user stories and get all of the tests to pass. Use whichever libraries or APIs you need. Give it your own personal style. -**Історія користувача #1:** Я можу побачити елемент з `id="break-label"`, який містить рядок (наприклад, "Break Length"). +You can use any mix of HTML, JavaScript, CSS, Bootstrap, SASS, React, Redux, and jQuery to complete this project. You should use a frontend framework (like React for example) because this section is about learning frontend frameworks. Additional technologies not listed above are not recommended and using them is at your own risk. We are looking at supporting other frontend frameworks like Angular and Vue, but they are not currently supported. We will accept and try to fix all issue reports that use the suggested technology stack for this project. Happy coding! -**Історія користувача #2:** Я можу побачити елемент з `id="session-label"`, який містить рядок (наприклад, "Session Length"). +**User Story #1:** I can see an element with `id="break-label"` that contains a string (e.g. "Break Length"). -**Історія користувача #3:** Я бачу два клікабельні елементи із відповідними ID: `id="break-decrement"` та `id="session-decrement"`. +**User Story #2:** I can see an element with `id="session-label"` that contains a string (e.g. "Session Length"). -**Історія користувач #4:** Я можу побачити два клікабельні елементи із відповідними ID: `id="break-increment"` та `id="session-increment"`. +**User Story #3:** I can see two clickable elements with corresponding IDs: `id="break-decrement"` and `id="session-decrement"`. -**Історія користувача #5:** Я можу побачити елемент з відповідним `id="break-length"`, який за замовчуванням (при завантаженні) показує значення 5. +**User Story #4:** I can see two clickable elements with corresponding IDs: `id="break-increment"` and `id="session-increment"`. -**Історія користувача #6:** Я можу побачити елемент із відповідним `id="session-length"`, який за замовчуванням показує значення 25. +**User Story #5:** I can see an element with a corresponding `id="break-length"`, which by default (on load) displays a value of 5. -**Історія користувача #7:** Я можу побачити елемент з відповідним `id="timer-label"`, який містить рядок, який вказує, що сесія ініціалізована (наприклад, «Session»). +**User Story #6:** I can see an element with a corresponding `id="session-length"`, which by default displays a value of 25. -**Історія користувача #8:** Я можу побачити елемент із відповідним `id="time-left"`. ПРИМІТКА: при зупинці чи в процесі, значення в цьому полі завжди має зображатися в форматі `mm:ss` (тобто 25:00). +**User Story #7:** I can see an element with a corresponding `id="timer-label"`, that contains a string indicating a session is initialized (e.g. "Session"). -**Історія користувача #9:** Я можу побачити клікабельний елемент із відповідним `id="start_stop"`. +**User Story #8:** I can see an element with corresponding `id="time-left"`. NOTE: Paused or running, the value in this field should always be displayed in `mm:ss` format (i.e. 25:00). -**Історія користувача #10:** Я можу побачити клікабельний елемент із відповідним `id="reset"`. +**User Story #9:** I can see a clickable element with a corresponding `id="start_stop"`. -**Історія користувача #11:** Коли я натискаю на елемент з id `reset`, усі таймери повинні зупинитися, значення в `id="break-length"` повинне повернутися до `5`, а значення в `id="session-length"` - до 25, а елемент в `id="time-left"` повинен повернутися до стану за замовчуванням. +**User Story #10:** I can see a clickable element with a corresponding `id="reset"`. -**Історія користувача #12:** Коли натискати на елемент з id `break-decrement`, значення у `id="break-length"` зменшується на значення 1, і тоді можна побачити оновлене значення. +**User Story #11:** When I click the element with the id of `reset`, any running timer should be stopped, the value within `id="break-length"` should return to `5`, the value within `id="session-length"` should return to 25, and the element with `id="time-left"` should reset to its default state. -**Історія користувача #13:** Коли натискати на елемент з id `break-increment`, значення у `id="break-length"` збільшується на значення 1, і тоді можна побачити оновлене значення. +**User Story #12:** When I click the element with the id of `break-decrement`, the value within `id="break-length"` decrements by a value of 1, and I can see the updated value. -**Історія користувача #14:** Коли натискати на елемент з id `session-decrement`, значення у `id="session-length"` зменшується на значення 1, і тоді можна побачити оновлене значення. +**User Story #13:** When I click the element with the id of `break-increment`, the value within `id="break-length"` increments by a value of 1, and I can see the updated value. -**Історія користувача #15:** Коли я натискаю на елемент з id `session-increment`, значення у `id="session-length"` збільшується на значення 1, і тоді можна побачити оновлене значення. +**User Story #14:** When I click the element with the id of `session-decrement`, the value within `id="session-length"` decrements by a value of 1, and I can see the updated value. -**Історія користувача #16:** Я не маю можливості встановити тривалість сеансу або перерви <= 0. +**User Story #15:** When I click the element with the id of `session-increment`, the value within `id="session-length"` increments by a value of 1, and I can see the updated value. -**Історія користувача #17:** Я не зможу встановити тривалість сеансу або перерви > 60. +**User Story #16:** I should not be able to set a session or break length to <= 0. -**Історія користувача #18:** Коли я клацаю на елемент із `id="start_stop"`, таймер повинен запрацювати з поточного значення, що зображується в `id="session-length"`, навіть якщо значення зменшилось чи збільшилось від початкового значення 25. +**User Story #17:** I should not be able to set a session or break length to > 60. -**Історія користувача #19:** Якщо таймер запущений, елемент з id `time-left` повинен показувати час, що залишився у форматі `mm:ss` (зменшуючись на значення 1, і оновлюючи зображення кожні 1000 мс). +**User Story #18:** When I first click the element with `id="start_stop"`, the timer should begin running from the value currently displayed in `id="session-length"`, even if the value has been incremented or decremented from the original value of 25. -**Історія користувача #20** Якщо таймер запущений, і я клацаю на елемент з `id="start_stop"`, зворотний відлік повинен припинитися. +**User Story #19:** If the timer is running, the element with the id of `time-left` should display the remaining time in `mm:ss` format (decrementing by a value of 1 and updating the display every 1000ms). -**Історія користувача #21:** Якщо таймер призупинено, і я клацаю на елемент з `id="start_stop"`, зворотний відлік повинен відновитися з моменту, на якому він був припинений. +**User Story #20:** If the timer is running and I click the element with `id="start_stop"`, the countdown should pause. -**Історія користувача #22:** Коли зворотний відлік сеансу досягає нуля (ПРИМІТКА: таймер ПОВИНЕН досягти 00:00), і зворотний відлік починається знову, елемент з id `timer-label` повинен показувати рядок, що вказує на початок перерви. +**User Story #21:** If the timer is paused and I click the element with `id="start_stop"`, the countdown should resume running from the point at which it was paused. -**Історія користувача #23:** Коли сесія зворотного відліку перерви досягає нуля (ПРИМІТКА: таймер ПОВИНЕН досягти 00:00), повинна розпочатися нова сесія зворотного відліку часу перерви, яка відраховується від поточного зображуваного значення елемента `id="break-length"`. +**User Story #22:** When a session countdown reaches zero (NOTE: timer MUST reach 00:00), and a new countdown begins, the element with the id of `timer-label` should display a string indicating a break has begun. -**Історія користувача #24:** Коли зворотний відлік перерви досягає нуля (ПРИМІТКА: таймер ПОВИНЕН досягти 00:00), і розпочинається новий зворотний відлік, елемент з id `timer-label` повинен зображати рядок, що вказує на початок сеансу. +**User Story #23:** When a session countdown reaches zero (NOTE: timer MUST reach 00:00), a new break countdown should begin, counting down from the value currently displayed in the `id="break-length"` element. -**Історія користувача #25:** Коли зворотний відлік перерви досягає нуля (ПРИМІТКА: таймер ПОВИНЕН досягти 00:00), повинен розпочатися зворотний відлік нової сесії, який відраховується від поточного зображуваного значення елемента `id="session-length"`. +**User Story #24:** When a break countdown reaches zero (NOTE: timer MUST reach 00:00), and a new countdown begins, the element with the id of `timer-label` should display a string indicating a session has begun. -**Історія користувача #26:** Коли зворотний відлік досягає нуля (ПРИМІТКА: таймер ПОВИНЕН досягти 00:00), повинен прозвучати сигнал, який вказує, що час вичерпано. Він повинен використовувати HTML5 `audio` тег і мати відповідний `id="beep"`. +**User Story #25:** When a break countdown reaches zero (NOTE: timer MUST reach 00:00), a new session countdown should begin, counting down from the value currently displayed in the `id="session-length"` element. -**Історія користувача #27:** Аудіо елемент з `id="beep"` повинен тривати 1 секунду чи довше. +**User Story #26:** When a countdown reaches zero (NOTE: timer MUST reach 00:00), a sound indicating that time is up should play. This should utilize an HTML5 `audio` tag and have a corresponding `id="beep"`. -**Історія користувача #28:** Аудіо елемент з id `beep` повинен припинити відтворення і бути перемотаний до початку, при натисканні на елемент з id `reset`. +**User Story #27:** The audio element with `id="beep"` must be 1 second or longer. -Ви можете створити свій проєкт, використовуючи цей шаблон CodePen і натиснувши `Save`. Або ж ви можете скористатися цим посиланням CDN, щоб виконати тести в будь-якому середовищі: `https://cdn.freecodecamp.org/testable-projects-fcc/v1/bundle.js` +**User Story #28:** The audio element with id of `beep` must stop playing and be rewound to the beginning when the element with the id of `reset` is clicked. -Як тільки закінчите, надайте посилання на свій проєкт з усіма пройденими тестами. +You can build your project by using this CodePen template and clicking `Save` to create your own pen. Or you can use this CDN link to run the tests in any environment you like: `https://cdn.freecodecamp.org/testable-projects-fcc/v1/bundle.js` + +Once you're done, submit the URL to your working project with all its tests passing. # --solutions-- diff --git a/curriculum/challenges/ukrainian/03-front-end-development-libraries/front-end-development-libraries-projects/build-a-drum-machine.md b/curriculum/challenges/ukrainian/03-front-end-development-libraries/front-end-development-libraries-projects/build-a-drum-machine.md index 3be938fc4b3..2f429fc1241 100644 --- a/curriculum/challenges/ukrainian/03-front-end-development-libraries/front-end-development-libraries-projects/build-a-drum-machine.md +++ b/curriculum/challenges/ukrainian/03-front-end-development-libraries/front-end-development-libraries-projects/build-a-drum-machine.md @@ -7,28 +7,29 @@ dashedName: build-a-drum-machine --- # --description-- +**Note:** **React 18 has known incompatibilities with the tests for this project (see [issue](https://github.com/freeCodeCamp/freeCodeCamp/issues/45922))** -**Мета:** створити застосунок, функціонально схожий до цього: https://drum-machine.freecodecamp.rocks/. +**Objective:** Build an app that is functionally similar to this: https://drum-machine.freecodecamp.rocks/. -Виконайте історію користувача та пройдіть тести. Використовуйте необхідні вам бібліотеки або API. Оформте за власним стилем. +Fulfill the below user stories and get all of the tests to pass. Use whichever libraries or APIs you need. Give it your own personal style. -Для виконання цього проєкту можна використати різне поєднання HTML, JavaScript, CSS, Bootstrap, SASS, React, Redux та jQuery. Потрібно використати фронтенд фреймворк (наприклад, React), оскільки цей розділ стосується їх вивчення. Додаткові технології, що не перераховані вище, не рекомендовані і використовуються на власний ризик. Ми розглядаємо використання інших фронтенд фреймворків, серед яких Angular та Vue, але наразі вони не підтримуються. Ми приймемо та спробуємо виправити помилки всіх звітів, у яких використано запропонований стек. Щасливого програмування! +You can use any mix of HTML, JavaScript, CSS, Bootstrap, SASS, React, Redux, and jQuery to complete this project. You should use a frontend framework (like React for example) because this section is about learning frontend frameworks. Additional technologies not listed above are not recommended and using them is at your own risk. We are looking at supporting other frontend frameworks like Angular and Vue, but they are not currently supported. We will accept and try to fix all issue reports that use the suggested technology stack for this project. Happy coding! -**Історія користувача #1:** Я маю бачити зовнішній контейнер з відповідним `id="drum-machine"`, який містить всі інші елементи. +**User Story #1:** I should be able to see an outer container with a corresponding `id="drum-machine"` that contains all other elements. -**Історія користувача #2:** У межах `#drum-machine` я можу бачити елемент з відповідним `id="display"`. +**User Story #2:** Within `#drum-machine` I can see an element with a corresponding `id="display"`. -**Історія користувача #3:** У межах `#drum-machine` я бачу 9 клікабельних елементів барабанних педів, кожен з іменем класу `drum-pad`, унікальним ідентифікатором, що описує звукозапис, який барабанні педи приводить в дію, та внутрішнім текстом, що відповідає одній з наступних клавіш на клавіатурі: `Q`, `W`, `E`, `A`, `S`, `D`, `Z`, `X`, `C`. Барабанні педи ПОВИННІ бути саме в цьому порядку. +**User Story #3:** Within `#drum-machine` I can see 9 clickable drum pad elements, each with a class name of `drum-pad`, a unique id that describes the audio clip the drum pad will be set up to trigger, and an inner text that corresponds to one of the following keys on the keyboard: `Q`, `W`, `E`, `A`, `S`, `D`, `Z`, `X`, `C`. The drum pads MUST be in this order. -**Історія користувача #4:** У межах кожного `.drum-pad` має бути елемент HTML5 `audio`, який має атрибут `src`, що вказує на звукозапис, ім’я класу `clip` та ідентифікатор, що відповідає внутрішньому тексту головного `.drum-pad` (наприклад, `id="Q"`, `id="W"`, `id="E"` тощо). +**User Story #4:** Within each `.drum-pad`, there should be an HTML5 `audio` element which has a `src` attribute pointing to an audio clip, a class name of `clip`, and an id corresponding to the inner text of its parent `.drum-pad` (e.g. `id="Q"`, `id="W"`, `id="E"` etc.). -**Історія користувача #5:** Коли я натискаю на елемент `.drum-pad`, звукозапис у його дочірньому елементі `audio` повинен бути запущеним. +**User Story #5:** When I click on a `.drum-pad` element, the audio clip contained in its child `audio` element should be triggered. -**Історія користувача #6:** Коли я натискаю кнопку запуску, пов'язану з кожним `.drum-pad`, звукозапис у його дочірньому елементі `audio` повинен бути запущеним (наприклад, натискання ключа доступу `Q` має запускати барабанний пед, що містить рядок `Q`, натискання ключа доступу `W` має запускати барабанний пед, що містить рядок `W`, тощо). +**User Story #6:** When I press the trigger key associated with each `.drum-pad`, the audio clip contained in its child `audio` element should be triggered (e.g. pressing the `Q` key should trigger the drum pad which contains the string `Q`, pressing the `W` key should trigger the drum pad which contains the string `W`, etc.). -**Історія користувача #7:** Коли `.drum-pad` запускається, рядок, що описує відповідний звуковий запис, відображається як внутрішній текст елемента `#display` (кожен рядок має бути унікальним). +**User Story #7:** When a `.drum-pad` is triggered, a string describing the associated audio clip is displayed as the inner text of the `#display` element (each string must be unique). -Ось декілька зразків аудіо, які можна використовувати для драм-машини: +Here are some audio samples you can use for your drum machine: - [Heater 1](https://s3.amazonaws.com/freecodecamp/drums/Heater-1.mp3) - [Heater 2](https://s3.amazonaws.com/freecodecamp/drums/Heater-2.mp3) @@ -40,9 +41,9 @@ dashedName: build-a-drum-machine - [Kick](https://s3.amazonaws.com/freecodecamp/drums/RP4_KICK_1.mp3) - [Closed-HH](https://s3.amazonaws.com/freecodecamp/drums/Cev_H2.mp3) -Ви можете створити свій проєкт, використовуючи цей шаблон CodePen і натиснувши `Save`. Або ж ви можете скористатися цим посиланням CDN, щоб виконати тести в будь-якому середовищі: `https://cdn.freecodecamp.org/testable-projects-fcc/v1/bundle.js` +You can build your project by using this CodePen template and clicking `Save` to create your own pen. Or you can use this CDN link to run the tests in any environment you like: `https://cdn.freecodecamp.org/testable-projects-fcc/v1/bundle.js` -Як тільки закінчите, надайте посилання на свій проєкт з усіма пройденими тестами. +Once you're done, submit the URL to your working project with all its tests passing. # --solutions-- diff --git a/curriculum/challenges/ukrainian/03-front-end-development-libraries/front-end-development-libraries-projects/build-a-javascript-calculator.md b/curriculum/challenges/ukrainian/03-front-end-development-libraries/front-end-development-libraries-projects/build-a-javascript-calculator.md index 7dab2e0b791..df9677e4443 100644 --- a/curriculum/challenges/ukrainian/03-front-end-development-libraries/front-end-development-libraries-projects/build-a-javascript-calculator.md +++ b/curriculum/challenges/ukrainian/03-front-end-development-libraries/front-end-development-libraries-projects/build-a-javascript-calculator.md @@ -7,53 +7,54 @@ dashedName: build-a-javascript-calculator --- # --description-- +**Note:** **React 18 has known incompatibilities with the tests for this project (see [issue](https://github.com/freeCodeCamp/freeCodeCamp/issues/45922))** -**Мета:** створити застосунок, функціонально схожий до цього: https://javascript-calculator.freecodecamp.rocks/. +**Objective:** Build an app that is functionally similar to this: https://javascript-calculator.freecodecamp.rocks/. -Виконайте історію користувача та пройдіть тести. Використовуйте необхідні вам бібліотеки або API. Оформте за власним стилем. +Fulfill the below user stories and get all of the tests to pass. Use whichever libraries or APIs you need. Give it your own personal style. -Для виконання цього проєкту можна використати різне поєднання HTML, JavaScript, CSS, Bootstrap, SASS, React, Redux та jQuery. Потрібно використати фронтенд фреймворк (наприклад, React), оскільки цей розділ стосується їх вивчення. Додаткові технології, що не перераховані вище, не рекомендовані і використовуються на власний ризик. Ми розглядаємо використання інших фронтенд фреймворків, серед яких Angular та Vue, але наразі вони не підтримуються. Ми приймемо та спробуємо виправити помилки всіх звітів, у яких використано запропонований стек. Щасливого програмування! +You can use any mix of HTML, JavaScript, CSS, Bootstrap, SASS, React, Redux, and jQuery to complete this project. You should use a frontend framework (like React for example) because this section is about learning frontend frameworks. Additional technologies not listed above are not recommended and using them is at your own risk. We are looking at supporting other frontend frameworks like Angular and Vue, but they are not currently supported. We will accept and try to fix all issue reports that use the suggested technology stack for this project. Happy coding! -**User Story #1:** Калькулятор повинен містити активний елемент інтерфейсу, що позначає `=` (equal sign) із відповідним `id="equals"`. +**User Story #1:** My calculator should contain a clickable element containing an `=` (equal sign) with a corresponding `id="equals"`. -**User Story#2:** Калькулятор має налічувати 10 активних елементів, кожний із яких має відповідати одному числу від 0-9, із наступними відповідними ID: `id="zero"`, `id="one"`, `id="two"`, `id="three"`, `id="four"`, `id="five"`, `id="six"`, `id="seven"`, `id="eight"`, and `id="nine"`. +**User Story #2:** My calculator should contain 10 clickable elements containing one number each from 0-9, with the following corresponding IDs: `id="zero"`, `id="one"`, `id="two"`, `id="three"`, `id="four"`, `id="five"`, `id="six"`, `id="seven"`, `id="eight"`, and `id="nine"`. -**User Story #3:** Калькулятор повинен мати 4 активних елементи, кожен із яких позначає одну із 4 арифметичних дій із відповідними ID: `id="add"`, `id="subtract"`, `id="multiply"`, `id="divide"`. +**User Story #3:** My calculator should contain 4 clickable elements each containing one of the 4 primary mathematical operators with the following corresponding IDs: `id="add"`, `id="subtract"`, `id="multiply"`, `id="divide"`. -**User Story #4:** У калькуляторі має бути активний елемент для позначення символу `.` (десяткової коми) із відповідним `id="decimal"`. +**User Story #4:** My calculator should contain a clickable element containing a `.` (decimal point) symbol with a corresponding `id="decimal"`. -**User Story #5:** У калькуляторі неодмінно має бути активний елемент інтерфейсу, який позначається `id="clear"`. +**User Story #5:** My calculator should contain a clickable element with an `id="clear"`. -**User Story #6:** У калькуляторі має бути активний елемент для відображення величин із відповідним `id="display"`. +**User Story #6:** My calculator should contain an element to display values with a corresponding `id="display"`. -**User Story #7:** Кожного разу, натискаючи `clear` кнопка видаляє вхідні та вихідні дані, та повертає калькулятор до його вихідного стану; 0 має перебувати поруч із ідентифікатором `display`. +**User Story #7:** At any time, pressing the `clear` button clears the input and output values, and returns the calculator to its initialized state; 0 should be shown in the element with the id of `display`. -**User Story #8:** Я повинен бачити вхідні дані поруч із кнопкою `display`. щоразу як я вводжу необхідні числа. +**User Story #8:** As I input numbers, I should be able to see my input in the element with the id of `display`. -**User Story #9:** Калькулятор повинен бути здатним додавати, віднімати, множити та ділити числа будь-якої величини кожного разу коли натискають кнопку дорівнює, незалежно від того в порядку в кому ці числа вводились`=`, вірний результат має висвічуватись на панелі поруч із ідентифікатором `display`. +**User Story #9:** In any order, I should be able to add, subtract, multiply and divide a chain of numbers of any length, and when I hit `=`, the correct result should be shown in the element with the id of `display`. -**User Story #10:** Під час вводу чисел калькулятор не повинен дозволяти число, яке розпочинається із декількох нулів. +**User Story #10:** When inputting numbers, my calculator should not allow a number to begin with multiple zeros. -**User Story #11:** Під час натискання десяткової коми `.` має приєднуватися до поточного відображеного значення; використання двох `.` в одному числі не дозволяється. +**User Story #11:** When the decimal element is clicked, a `.` should append to the currently displayed value; two `.` in one number should not be accepted. -**User Story #12:** Я повинен мати здатність виконувати будь-які дії (`+`, `-`, `*`, `/`) над числами, що містять десяткову кому. +**User Story #12:** I should be able to perform any operation (`+`, `-`, `*`, `/`) on numbers containing decimal points. -**User Story #13:** У випадку якщо послідовно проводяться 2 або більше дій, повинна виконуватися та дія, яку було введено останньою (окрім від'ємного знаку (`-`)). Наприклад, якщо ввели `5 + * 7 =`, результатом буде `35` (тобто `5 * 7`); якщо ввели `5 * - 5 =`, то в результаті має вийти `-25` (оскільки `5 * (-5)`). +**User Story #13:** If 2 or more operators are entered consecutively, the operation performed should be the last operator entered (excluding the negative (`-`) sign). For example, if `5 + * 7 =` is entered, the result should be `35` (i.e. `5 * 7`); if `5 * - 5 =` is entered, the result should be `-25` (i.e. `5 * (-5)`). -**Історія користувача #14:** Натискаючи на кнопку арифметичної дії відразу після натиснення `=` має розпочинатися нове обчислення, яке здійснюється на основі результату попереднього розрахунку. +**User Story #14:** Pressing an operator immediately following `=` should start a new calculation that operates on the result of the previous evaluation. -**Вимоги Користувача #15:** Калькулятор повинен мати простір для декількох знаків, що йдуть після коми, коли мова йде про округлення числа (Пам'ятайте, що не існує точного стандарту, але вам слід вміти виконувати обчислення подібні цьому `2 / 7` із необхідною точністю, принаймні до 4 знаків після коми). +**User Story #15:** My calculator should have several decimal places of precision when it comes to rounding (note that there is no exact standard, but you should be able to handle calculations like `2 / 7` with reasonable precision to at least 4 decimal places). -**Примітка щодо закономірності калькулятора:** Слід зазначити, що існує 2 основних наукових напрямки, які стосуються логіки вводу: логіка негайного виконання та логіка формул. Ми використовуємо закономірність формул та дотримуємося порядку пріоритетності дій, а не негайне виконання. Обидва методи є прийнятними, але зважайте, що залежно від того способу, який ви оберете, ваші обчислення можуть давати відмінні від наших результати для деяких рівнянь. (див. приклади нижче). Не розглядайте це як баг, у випадку якщо ваші розрахунки можуть бути підтверджені іншим робочим калькулятором. +**Note On Calculator Logic:** It should be noted that there are two main schools of thought on calculator input logic: immediate execution logic and formula logic. Our example utilizes formula logic and observes order of operation precedence, immediate execution does not. Either is acceptable, but please note that depending on which you choose, your calculator may yield different results than ours for certain equations (see below example). As long as your math can be verified by another production calculator, please do not consider this a bug. -**Приклад:** `3 + 5 x 6 - 2 / 4 =` +**EXAMPLE:** `3 + 5 x 6 - 2 / 4 =` - **Логіка Негайного Виконання:** `11.5` - **Логіка Формул/Виразу:** `32.5` -Ви можете створити свій проєкт, використовуючи цей шаблон CodePen і натиснувши `Save`. Або ж ви можете скористатися цим посиланням CDN, щоб виконати тести в будь-якому середовищі: `https://cdn.freecodecamp.org/testable-projects-fcc/v1/bundle.js` +You can build your project by using this CodePen template and clicking `Save` to create your own pen. Or you can use this CDN link to run the tests in any environment you like: `https://cdn.freecodecamp.org/testable-projects-fcc/v1/bundle.js` -Як тільки закінчите, надайте посилання на свій проєкт з усіма пройденими тестами. +Once you're done, submit the URL to your working project with all its tests passing. # --solutions-- diff --git a/curriculum/challenges/ukrainian/03-front-end-development-libraries/front-end-development-libraries-projects/build-a-markdown-previewer.md b/curriculum/challenges/ukrainian/03-front-end-development-libraries/front-end-development-libraries-projects/build-a-markdown-previewer.md index cccaba9c2f6..c03e574653c 100644 --- a/curriculum/challenges/ukrainian/03-front-end-development-libraries/front-end-development-libraries-projects/build-a-markdown-previewer.md +++ b/curriculum/challenges/ukrainian/03-front-end-development-libraries/front-end-development-libraries-projects/build-a-markdown-previewer.md @@ -7,30 +7,31 @@ dashedName: build-a-markdown-previewer --- # --description-- +**Note:** **React 18 has known incompatibilities with the tests for this project (see [issue](https://github.com/freeCodeCamp/freeCodeCamp/issues/45922))** -**Мета:** створити застосунок, функціонально схожий до цього: https://markdown-previewer.freecodecamp.rocks/. +**Objective:** Build an app that is functionally similar to this: https://markdown-previewer.freecodecamp.rocks/. -Виконайте історію користувача та пройдіть тести. Використовуйте необхідні вам бібліотеки або API. Оформте за власним стилем. +Fulfill the below user stories and get all of the tests to pass. Use whichever libraries or APIs you need. Give it your own personal style. -Для виконання цього проєкту можна використати різне поєднання HTML, JavaScript, CSS, Bootstrap, SASS, React, Redux та jQuery. Потрібно використати фронтенд фреймворк (наприклад, React), оскільки цей розділ стосується їх вивчення. Додаткові технології, що не перераховані вище, не рекомендовані і використовуються на власний ризик. Ми розглядаємо використання інших фронтенд фреймворків, серед яких Angular та Vue, але наразі вони не підтримуються. Ми приймемо та спробуємо виправити помилки всіх звітів, у яких використано запропонований стек. Щасливого програмування! +You can use any mix of HTML, JavaScript, CSS, Bootstrap, SASS, React, Redux, and jQuery to complete this project. You should use a frontend framework (like React for example) because this section is about learning frontend frameworks. Additional technologies not listed above are not recommended and using them is at your own risk. We are looking at supporting other frontend frameworks like Angular and Vue, but they are not currently supported. We will accept and try to fix all issue reports that use the suggested technology stack for this project. Happy coding! -**Історія користувача №1:** Я бачу `textarea` елемент з відповідним `id="editor"`. +**User Story #1:** I can see a `textarea` element with a corresponding `id="editor"`. -**Історія користувача №2:** Я бачу елемент з відповідним `id="preview"`. +**User Story #2:** I can see an element with a corresponding `id="preview"`. -**Історія користувача №3:** Коли я вводжу текст до елемента `#editor`, елемент `#preview` оновлюється, коли я вводжу текст для відображення у textarea. +**User Story #3:** When I enter text into the `#editor` element, the `#preview` element is updated as I type to display the content of the textarea. -**Історія користувача №4:** Коли я вводжу позначку GitHub в елемент `#editor`, текст відображається як HTML у `#preview` елементі під час введення тексту (ПОРАДА: Вам не потрібно самостійно аналізувати Markdown, бо для цього можна імпортувати бібліотеку Marked:). +**User Story #4:** When I enter GitHub flavored markdown into the `#editor` element, the text is rendered as HTML in the `#preview` element as I type (HINT: You don't need to parse Markdown yourself - you can import the Marked library for this: ). -**Історія користувача №5:** Коли моя програма попереднього перегляду Markdown вперше завантажується, текст у `#editor` полі повинен містити дійсну розмітку, що представляє принаймні одну кожного з наступних елементів: заголовок (H1), підзаголовок (H2), посилання, вбудований код, блок коду, елемент списку, цитата в блоці, зображення та жирний текст. +**User Story #5:** When my markdown previewer first loads, the default text in the `#editor` field should contain valid markdown that represents at least one of each of the following elements: a heading element (H1 size), a sub heading element (H2 size), a link, inline code, a code block, a list item, a blockquote, an image, and bolded text. -**Історія користувача №6:** Коли моя програма попереднього перегляду Markdown вперше завантажується, автоматична розмітка в `#editor` полі має бути відображена як HTML у `#preview` елементі. +**User Story #6:** When my markdown previewer first loads, the default markdown in the `#editor` field should be rendered as HTML in the `#preview` element. -**Необов'язковий бонус (вам не потрібно проходити цей тест):** Моя програма попереднього перегляду Markdown інтерпретує повернення каретки та відображає їх як `br` (розрив рядка) елементів. +**Optional Bonus (you do not need to make this test pass):** My markdown previewer interprets carriage returns and renders them as `br` (line break) elements. -Ви можете створити свій проєкт, використовуючи цей шаблон CodePen і натиснувши `Save`. Або ж ви можете скористатися цим посиланням CDN, щоб виконати тести в будь-якому середовищі: `https://cdn.freecodecamp.org/testable-projects-fcc/v1/bundle.js` +You can build your project by using this CodePen template and clicking `Save` to create your own pen. Or you can use this CDN link to run the tests in any environment you like: `https://cdn.freecodecamp.org/testable-projects-fcc/v1/bundle.js` -Як тільки закінчите, надайте посилання на свій проєкт з усіма пройденими тестами. +Once you're done, submit the URL to your working project with all its tests passing. # --solutions-- diff --git a/curriculum/challenges/ukrainian/03-front-end-development-libraries/front-end-development-libraries-projects/build-a-random-quote-machine.md b/curriculum/challenges/ukrainian/03-front-end-development-libraries/front-end-development-libraries-projects/build-a-random-quote-machine.md index 0be8d399632..b3be5b15454 100644 --- a/curriculum/challenges/ukrainian/03-front-end-development-libraries/front-end-development-libraries-projects/build-a-random-quote-machine.md +++ b/curriculum/challenges/ukrainian/03-front-end-development-libraries/front-end-development-libraries-projects/build-a-random-quote-machine.md @@ -7,40 +7,41 @@ dashedName: build-a-random-quote-machine --- # --description-- +**Note:** **React 18 has known incompatibilities with the tests for this project (see [issue](https://github.com/freeCodeCamp/freeCodeCamp/issues/45922))** -**Мета:** створити застосунок, функціонально схожий до цього: https://random-quote-machine.freecodecamp.rocks/. +**Objective:** Build an app that is functionally similar to this: https://random-quote-machine.freecodecamp.rocks/. -Виконайте історію користувача та пройдіть тести. Використовуйте необхідні вам бібліотеки або API. Оформте за власним стилем. +Fulfill the below user stories and get all of the tests to pass. Use whichever libraries or APIs you need. Give it your own personal style. -Для виконання цього проєкту можна використати різне поєднання HTML, JavaScript, CSS, Bootstrap, SASS, React, Redux та jQuery. Потрібно використати фронтенд фреймворк (наприклад, React), оскільки цей розділ стосується їх вивчення. Додаткові технології, що не перераховані вище, не рекомендовані і використовуються на власний ризик. Ми розглядаємо використання інших фронтенд фреймворків, серед яких Angular та Vue, але наразі вони не підтримуються. Ми приймемо та спробуємо виправити помилки всіх звітів, у яких використано запропонований стек. Щасливого програмування! +You can use any mix of HTML, JavaScript, CSS, Bootstrap, SASS, React, Redux, and jQuery to complete this project. You should use a frontend framework (like React for example) because this section is about learning frontend frameworks. Additional technologies not listed above are not recommended and using them is at your own risk. We are looking at supporting other frontend frameworks like Angular and Vue, but they are not currently supported. We will accept and try to fix all issue reports that use the suggested technology stack for this project. Happy coding! -**Історія користувача #1:** Я бачу оболонковий елемент з відповідним `id="quote-box"`. +**User Story #1:** I can see a wrapper element with a corresponding `id="quote-box"`. -**Історія користувача #2:** У межах `#quote-box`, я бачу елемент з відповідним `id="text"`. +**User Story #2:** Within `#quote-box`, I can see an element with a corresponding `id="text"`. -**Історія користувача #3:** У межах `#quote-box`, я бачу елемент з відповідним `id="author"`. +**User Story #3:** Within `#quote-box`, I can see an element with a corresponding `id="author"`. -**Історія користувача #4:** У межах `#quote-box`, я бачу клікабельний елемент з відповідним `id="new-quote"`. +**User Story #4:** Within `#quote-box`, I can see a clickable element with a corresponding `id="new-quote"`. -**Історія користувача #5:** У межах `#quote-box`,, я бачу клікабельний елемент `a` з відповідним `id="tweet-quote"`. +**User Story #5:** Within `#quote-box`, I can see a clickable `a` element with a corresponding `id="tweet-quote"`. -**Історія користувача #6:** При першому завантаженні, генератор відображає випадкову цитату в елементі з `id="text"`. +**User Story #6:** On first load, my quote machine displays a random quote in the element with `id="text"`. -**Історія користувача #7:** При першому завантаженні, генератор відображає автора випадкової цитати в елементі з `id="author"`. +**User Story #7:** On first load, my quote machine displays the random quote's author in the element with `id="author"`. -**Історія користувача #8:** При натисканні на кнопку `#new-quote`, генератор повинен отримати нову цитату та відобразити її в елементі `#text`. +**User Story #8:** When the `#new-quote` button is clicked, my quote machine should fetch a new quote and display it in the `#text` element. -**Історія користувача #9:** Генератор повинен отримати нового автора цитати при натисканні кнопки `#new-quote` та відобразити її в елементі `#author`. +**User Story #9:** My quote machine should fetch the new quote's author when the `#new-quote` button is clicked and display it in the `#author` element. -**Історія користувача #10:** Я можу твітнути поточну цитату, натискаючи на елемент `#tweet-quote` `a`. Цей елемент `a` повинен включати шлях `"twitter.com/intent/tweet"` у своєму атрибуті `href`, щоб твітнути поточну цитату. +**User Story #10:** I can tweet the current quote by clicking on the `#tweet-quote` `a` element. This `a` element should include the `"twitter.com/intent/tweet"` path in its `href` attribute to tweet the current quote. -**Історія користувача #11:** Оболонковий елемент `#quote-box` повинен мати горизонтальне центрування. Будь ласка, запустіть тести з рівнем масштабування браузера 100% і розгорнутою сторінкою. +**User Story #11:** The `#quote-box` wrapper element should be horizontally centered. Please run tests with browser's zoom level at 100% and page maximized. -Ви можете створити свій проєкт, використовуючи цей шаблон CodePen і натиснувши `Save`. Або ж ви можете скористатися цим посиланням CDN, щоб виконати тести в будь-якому середовищі:: `https://cdn.freecodecamp.org/testable-projects-fcc/v1/bundle.js` +You can build your project by using this CodePen template and clicking `Save` to create your own pen. Or you can use this CDN link to run the tests in any environment you like: `https://cdn.freecodecamp.org/testable-projects-fcc/v1/bundle.js` -Як тільки закінчите, надайте посилання на свій проєкт з усіма пройденими тестами. +Once you're done, submit the URL to your working project with all its tests passing. -**Примітка:** Twitter може перешкоджати завантаженню посилання в iframe. Спробуйте використати атрибут `target="_blank"` or `target="_top"` на `#tweet-quote` якщо ваш твіт не завантажуватиметься. `target="_top"` замінить поточну вкладку, тому переконайтеся, що ви зберегли роботу. +**Note:** Twitter does not allow links to be loaded in an iframe. Try using the `target="_blank"` or `target="_top"` attribute on the `#tweet-quote` element if your tweet won't load. `target="_top"` will replace the current tab so make sure your work is saved. # --solutions-- diff --git a/curriculum/challenges/ukrainian/03-front-end-development-libraries/react/add-event-listeners.md b/curriculum/challenges/ukrainian/03-front-end-development-libraries/react/add-event-listeners.md index 742d135bb60..5bc3649891a 100644 --- a/curriculum/challenges/ukrainian/03-front-end-development-libraries/react/add-event-listeners.md +++ b/curriculum/challenges/ukrainian/03-front-end-development-libraries/react/add-event-listeners.md @@ -1,6 +1,6 @@ --- id: 5a24c314108439a4d403617e -title: Додати слухачів події +title: Додайте слухачів події challengeType: 6 forumTopicId: 301377 dashedName: add-event-listeners @@ -10,17 +10,17 @@ dashedName: add-event-listeners Метод `componentDidMount()` також є найкращим місцем для додавання усіх слухачів події, які вам необхідні для конкретної функціональності. React надає систему синтетичних подій, яка охоплює систему початкової події, наявної у браузерах. Це означає, що синтетична система подій поводиться саме так, незалежно від браузера користувача, навіть якщо початкові події можуть поводитись по-різному між різними браузерами. -Ви вже використовуєте деякі з цих синтетичних обробників подій, на приклад `onClick()`. Система синтетичної події React є зручною для більшості взаємодій, якими ви зможете керувати у DOM елементах. Однак, якщо ви хочете прикріпити обробник подій до документа або об'єктів вікна, ви повинні зробити це напряму. +Ви вже використовували деякі з цих синтетичних обробників подій, наприклад, `onClick()`. Система синтетичної події в React є зручною для більшості взаємодій, якими ви керуєте в елементах DOM. Однак, якщо ви хочете прикріпити обробника подій до документа або об’єктів вікна, ви повинні зробити це напряму. # --instructions-- -Прикріпіть слухача подій у метод `componentDidMount()` для `keydown` подій і отримайте ці події, здійснивши зворотній виклик `handleKeyPress()`. Ви можете використовувати `document.addEventListener()`, який приймає подію (в лапках), в якості першого аргументу і зворотній виклик у якості другого. +Прикріпіть слухача подій в методі `componentDidMount()` для подій `keydown` та зробіть так, щоб ці події запустили зворотний виклик `handleKeyPress()`. Ви можете використати `document.addEventListener()`, що приймає подію (в лапках) як перший аргумент та зворотний виклик як другий аргумент. -Потім у `componentWillUnmount()` видаліть цього слухача подій. Ви можете передати ті ж аргументи до `document.removeEventListener()`. Хорошою практикою для використання цього методу життєвого циклу є очистка компонентів React перед тим, як вони будуть розмонтовані та знищені. Видалення слухачів подій є прикладом однієї з таких дій очистки. +Потім видаліть цього слухача подій в `componentWillUnmount()`. Ви можете передати ті ж аргументи до `document.removeEventListener()`. Цей метод життєвого циклу добре використовувати для чистки компонентів React перед тим, як їх буде демонтовано та знищено. Одним з прикладів чистки є видалення слухачів подій. # --hints-- -`MyComponent` повинен відображати `div` елемент, який обгортає тег `h1`. +`MyComponent` має відтворити елемент `div`, що охоплює тег `h1`. ```js assert( @@ -31,7 +31,7 @@ assert( ); ``` -`keydown` слухач повинен бути підключений до документу у `componentDidMount`. +Слухач `keydown` має бути приєднаним до документа в `componentDidMount`. ```js assert( @@ -47,7 +47,7 @@ assert( ); ``` -`keydown` слухач повинен бути видалений з документу у `componentWillUnmount`. +Слухач `keydown` має бути видаленим з документа в `componentWillUnmount`. ```js assert( @@ -63,7 +63,7 @@ assert( ); ``` -Як тільки компонент змонтовано, натискання клавіші `enter` змусить його оновитися та відобразити тег `h1`. +Як тільки компонент змонтовано, натискання клавіші `enter` оновить його стан та відтворений тег `h1`. ```js async () => { diff --git a/curriculum/challenges/ukrainian/03-front-end-development-libraries/react/add-inline-styles-in-react.md b/curriculum/challenges/ukrainian/03-front-end-development-libraries/react/add-inline-styles-in-react.md index 635782ffc3c..c0f34518e02 100644 --- a/curriculum/challenges/ukrainian/03-front-end-development-libraries/react/add-inline-styles-in-react.md +++ b/curriculum/challenges/ukrainian/03-front-end-development-libraries/react/add-inline-styles-in-react.md @@ -1,6 +1,6 @@ --- id: 5a24c314108439a4d4036182 -title: Додавання вбудованих стилів у React +title: Додайте вбудовані стилі в React challengeType: 6 forumTopicId: 301378 dashedName: add-inline-styles-in-react @@ -8,41 +8,41 @@ dashedName: add-inline-styles-in-react # --description-- -В останньому завданні можна було помітити декілька інших синтаксичних відмінностей від вбудованих стилів HTML на додаток до атрибуту `style`, встановленого на об'єкт JavaScript. По-перше, у назвах певних властивостей стилю CSS використовується "горбатий регістр" (camel case). Наприклад, в останньому завданні, замість розміру шрифту `font-size` було встановлено `fontSize`. Написання слів через дефіс, як-то `font-size`, є недопустимим для властивостей об’єктів JavaScript, тому у React використовують camel case. Як правило, будь-які властивості стилю, що містять дефіс, написані в JSX camel case. +Можливо, ви помітили, що в попередньому завданні було декілька відмінностей синтаксису від вбудованих стилів HTML, додатково до атрибута `style` зі значенням об’єкта JavaScript. По-перше, у назвах певних властивостей стилю CSS використовується верблюдячийРегістр. Наприклад, в попередньому завданні, ми налаштували розміру шрифту завдяки `fontSize`, а не `font-size`. Написання слів через дефіс (наприклад, `font-size`) не працює для властивостей об’єктів JavaScript, тому в React використовують верблюдячийРегістр. Як правило, будь-які властивості стилю, що містять дефіс, записані верблюдячимРегістром в JSX. -Вважається, що усі одиниці довжини властивості (наприклад, `height`, `width`, і `fontSize`) мають значення `px`, якщо не вказано інше. Наприклад, якщо виникає бажання використати `em`, то візьміть значення й одиниці у лапки, як `{fontSize: "4em"}`. Крім значень довжини, які за замовчуванням мають значення `px`, усі інші значення властивостей слід ставити у лапки. +Вважається, що всі одиниці властивості довжини (наприклад, `height`, `width` та `fontSize`) мають значення `px`, якщо не вказано інше. Якщо ви хочете використати `em`, напишіть значення та одиниці в лапках: `{fontSize: "4em"}`. Окрім значень довжини, які за замовчуванням становлять `px`, всі інші значення властивостей потрібно писати в лапках. # --instructions-- -Якщо у вас є великий перелік стилів, то за стилем `object` можна закріпити константу, щоб код залишався структурованим. Опишіть константу ваших стилів як глобальну змінну у верхній частині файлу. Ініціалізуйте константу `styles` та призначте `object` з трьома властивостями стилю та їх значеннями до неї. Надайте `div` колір `purple`, розмір шрифту `40` та рамку `2px solid purple`. Потім встановіть атрибут `style` рівний константі `styles`. +Якщо у вас великий перелік стилів, ви можете призначити об’єкт стилю (`object`) до константи, щоб код залишався організованим. Оголосіть константу стилю як глобальну змінну зверху файлу. Ініціалізуйте константу `styles` та призначте до неї об’єкт з трьома властивостями стилю і їхніми значеннями. Надайте `div` колір зі значенням `purple`, розмір шрифту зі значенням `40` та кордон зі значенням `2px solid purple`. Потім встановіть значення атрибута `style` на константу `styles`. # --hints-- -Змінна `styles` має бути `object` з трьома властивостями. +Змінна `styles` має бути об’єктом (`object`) з трьома властивостями. ```js assert(Object.keys(styles).length === 3); ``` -Змінна `styles` повинна мати властивість `color` налаштовану до значення `purple`. +Змінна `styles` повинна мати властивість `color` зі значенням `purple`. ```js assert(styles.color === 'purple'); ``` -Змінна `styles` повинна мати властивість `fontSize` налаштовану до значення `40`. +Змінна `styles` повинна мати властивість `fontSize` зі значенням `40`. ```js assert(styles.fontSize == 40); ``` -Змінна `styles` повинна мати властивість `border` налаштовану до значення `2px solid purple`. +Змінна `styles` повинна мати властивість `border` зі значенням `2px solid purple`. ```js assert(styles.border === '2px solid purple'); ``` -Компонент повинен відображати елемент `div`. +Компонент має відтворити елемент `div`. ```js assert( @@ -53,7 +53,7 @@ assert( ); ``` -Стилі елементу `div` мають визначатися об'єктом `styles`. +Об’єкт `styles` має визначити стилі елемента `div`. ```js assert( diff --git a/curriculum/challenges/ukrainian/03-front-end-development-libraries/react/bind-this-to-a-class-method.md b/curriculum/challenges/ukrainian/03-front-end-development-libraries/react/bind-this-to-a-class-method.md index ecf32a2ded8..7abb80f642e 100644 --- a/curriculum/challenges/ukrainian/03-front-end-development-libraries/react/bind-this-to-a-class-method.md +++ b/curriculum/challenges/ukrainian/03-front-end-development-libraries/react/bind-this-to-a-class-method.md @@ -10,7 +10,7 @@ dashedName: bind-this-to-a-class-method Окрім налаштування та оновлення стану, ви можете визначити методи для класового компонента. Методу класу зазвичай потрібне ключове слово `this`, щоб отримати доступ до властивостей класу (серед яких стан та пропси) в межах області методу. Існує декілька способів, щоб дозволити методам класу отримати доступ до `this`. -Один із найпоширеніших способів — прив’язати `this` в конструкторі. Таким чином `this` стає прив’язаним до методів класу, коли компонент ініціалізовано. Мабуть, ви помітили, що в останньому завданні використано `this.handleClick = this.handleClick.bind(this)` до методу `handleClick` в конструкторі. Потім, коли ви викликаєте функцію (наприклад, `this.setState()`), в межах методу класу, `this` посилається на клас та не буде `undefined`. +Один із найпоширеніших способів — прив’язати `this` в конструкторі. Таким чином `this` стає прив’язаним до методів класу, коли компонент ініціалізовано. Мабуть, ви помітили, що в попередньому завданні використано `this.handleClick = this.handleClick.bind(this)` до методу `handleClick` в конструкторі. Потім, коли ви викликаєте функцію (наприклад, `this.setState()`), в межах методу класу, `this` посилається на клас та не буде `undefined`. **Примітка:** ключове слово `this` є одним з найскладніших аспектів JavaScript, але воно грає важливу роль в React. Хоча його поведінка цілком нормальна, ці уроки не містять детальної інформації про `this`. Тому, будь ласка, зверніться до інших уроків, якщо вам важко! diff --git a/curriculum/challenges/ukrainian/03-front-end-development-libraries/react/change-inline-css-conditionally-based-on-component-state.md b/curriculum/challenges/ukrainian/03-front-end-development-libraries/react/change-inline-css-conditionally-based-on-component-state.md index 2b25428e555..de95c738a20 100644 --- a/curriculum/challenges/ukrainian/03-front-end-development-libraries/react/change-inline-css-conditionally-based-on-component-state.md +++ b/curriculum/challenges/ukrainian/03-front-end-development-libraries/react/change-inline-css-conditionally-based-on-component-state.md @@ -1,6 +1,6 @@ --- id: 5a24c314108439a4d4036189 -title: Зміна вбудованих CSS умовно на основі стану компонента +title: Змініть вбудований CSS умовно на основі стану компонента challengeType: 6 forumTopicId: 301380 dashedName: change-inline-css-conditionally-based-on-component-state @@ -8,17 +8,17 @@ dashedName: change-inline-css-conditionally-based-on-component-state # --description-- -На цьому етапі вже було опрацьовано декілька додатків умовної візуалізації та використання вбудованих стилів. Розглянемо ще один приклад, що поєднує ці дві теми. Також можна відтворити CSS умовно на основі стану компонента React. Для цього необхідно перевірити умову, і якщо вона виконана, змінити об’єкт стилів, призначений для елементів JSX методом візуалізації. +Ви вже бачили декілька застосувань умовного відтворення та використання вбудованих стилів. Розглянемо ще один приклад, який поєднує обидві теми. CSS можна відтворити умовно на основі стану компонента React. Для цього необхідно перевірити умову, та, якщо вона виконана, змінити об’єкт стилів, призначений до елементів JSX в методі відтворення. -Цю парадигму важливо зрозуміти, оскільки вона є різкою зміною від більш традиційного підходу до застосування стилів шляхом безпосередньої зміни елементів DOM (що дуже часто зустрічається, наприклад, з jQuery). При такому підході необхідно відстежувати момент зміни елементів, а також безпосередньо обробляти фактичне керування. При відстежуванні змін можуть виникнути складнощі, що потенційно робить ваш інтерфейс непередбачуваним. Встановлюючи об’єкт стилю на основі умови, опишіть, що інтерфейс має виглядати як функція стану додатку. Існує чіткий потік інформації, який рухається тільки в одному напрямку. Це найбільш прийнятний метод під час написання програм з React. +Цю парадигму важливо зрозуміти, оскільки вона є різкою зміною від більш традиційного підходу застосування стилів шляхом безпосередньої зміни елементів DOM (що дуже часто зустрічається, наприклад, в jQuery). При такому підході необхідно відстежувати час зміни елементів, а також безпосередньо обробляти керування. Іноді важко відслідковувати зміни, що може зробити UI непередбачуваним. Встановлюючи об’єкт стилю на основі умови, потрібно описувати UI у вигляді функції стану застосунку. Існує чіткий потік інформації, який рухається тільки в одному напрямку. Це найбільш прийнятний метод під час написання застосунків з React. # --instructions-- -Редактор коду має простий керований компонент введення зі стилізованою рамкою. У разі застосування користувачем понад 15 символів тексту у полі введення, можна оформити цю рамку у червоний колір. Для перевірки, додайте умову, і, вона є дійсною, встановіть стиль введення меж для `3px solid red`. Щоб спробувати його, введіть текст у відповідне поле. +Редактор коду містить простий керований компонент введення зі стилізованим кордоном. Зробіть цей кордон червоним, якщо користувач вводить понад 15 символів у полі введення. Додайте умову для перевірки та, якщо умова дійсна, встановіть стиль кордону на `3px solid red`. Здійсніть перевірку, ввівши текст у поле. # --hints-- -Компонент `GateKeeper` повинен відображати елемент `div`. +Компонент `GateKeeper` має відтворити елемент `div`. ```js assert( @@ -40,7 +40,7 @@ assert( ); ``` -Компонент `GateKeeper` повинен відображати тег `h3` і тег `input`. +Компонент `GateKeeper` має відтворити теги `h3` та `input`. ```js assert( @@ -54,7 +54,7 @@ assert( ); ``` -Теґ `input` спочатку повинен мати стиль `1px solid black` для властивості `border`. +Спочатку тег `input` повинен мати властивість `border` зі значенням `1px solid black`. ```js assert( @@ -67,7 +67,7 @@ assert( ); ``` -Теґ `input` має бути оформлений з рамкою `3px solid red`, якщо введене значення в стані перевищує 15 символів. +Якщо введене значення в стані містить понад 15 символів, тег `input` повинен мати кордон зі значенням `3px solid red`. ```js async () => { diff --git a/curriculum/challenges/ukrainian/03-front-end-development-libraries/react/create-a-complex-jsx-element.md b/curriculum/challenges/ukrainian/03-front-end-development-libraries/react/create-a-complex-jsx-element.md index 4a882eb9a85..cfa1b261403 100644 --- a/curriculum/challenges/ukrainian/03-front-end-development-libraries/react/create-a-complex-jsx-element.md +++ b/curriculum/challenges/ukrainian/03-front-end-development-libraries/react/create-a-complex-jsx-element.md @@ -70,7 +70,7 @@ assert(JSX.props.children[1].type === 'p'); assert(JSX.props.children[2].type === 'ul'); ``` -`ul` має містити три елемент `li`. +`ul` має містити три елементи `li`. ```js assert( diff --git a/curriculum/challenges/ukrainian/03-front-end-development-libraries/react/create-a-controlled-form.md b/curriculum/challenges/ukrainian/03-front-end-development-libraries/react/create-a-controlled-form.md index 262c534fef6..375fd513600 100644 --- a/curriculum/challenges/ukrainian/03-front-end-development-libraries/react/create-a-controlled-form.md +++ b/curriculum/challenges/ukrainian/03-front-end-development-libraries/react/create-a-controlled-form.md @@ -16,7 +16,7 @@ dashedName: create-a-controlled-form Ми додали кнопку, яка надсилає форму. Як бачите, вона має `type` зі значенням `submit`, тобто ця кнопка контролює форму. Додайте елемент `input` до `form` і встановіть його атрибути `value` та `onChange()` як в попередньому завданні. Потім завершіть метод `handleSubmit`, щоб він налаштовував властивість стану компонента `submit` на поточне значення введення в локальному стані. -**Примітка:** ви також маєте викликати `event.preventDefault()` в обробнику надсилання, щоб уникнути поведінку надсилання форми за замочуванням, що оновлює сторінку. Ми відключили поведінку за замовчуванням для вашої зручності, щоб уникнути оновлення та скидання завдання. +**Примітка:** ви також маєте викликати `event.preventDefault()` в обробнику надсилання, щоб уникнути поведінки надсилання форми за замочуванням, що оновлює сторінку. Ми відключили поведінку за замовчуванням для вашої зручності, щоб уникнути оновлення та скидання завдання. Вкінці створіть тег `h1` після `form`, що відтворює значення `submit` зі стану компонента. Після цього ви можете писати у формі та натиснути кнопку (або enter), і побачите відтворене введення на сторінці. diff --git a/curriculum/challenges/ukrainian/03-front-end-development-libraries/react/create-a-simple-jsx-element.md b/curriculum/challenges/ukrainian/03-front-end-development-libraries/react/create-a-simple-jsx-element.md index 73cc220ef93..3ab2dc1c938 100644 --- a/curriculum/challenges/ukrainian/03-front-end-development-libraries/react/create-a-simple-jsx-element.md +++ b/curriculum/challenges/ukrainian/03-front-end-development-libraries/react/create-a-simple-jsx-element.md @@ -8,7 +8,7 @@ dashedName: create-a-simple-jsx-element # --description-- -React — це бібліотека з відкритим вихідним кодом, яку підтримує Facebook. Це хороший інструмент для візуалізації інтерфейсу користувача (UI) у сучасних вебпрограмах. +React — це бібліотека з відкритим вихідним кодом, яку підтримує Facebook. Це хороший інструмент для візуалізації інтерфейсу користувача (UI) у сучасних вебзастосунках. React використовує розширення синтаксису JavaScript під назвою JSX, що дозволяє писати HTML одразу в JavaScript. JSX має декілька переваг. JSX дозволяє використовувати усі програмні можливості JavaScript у HTML, а також допомагає з читабельністю коду. JSX подібний до HTML, який ви вже вивчали, хоча є декілька ключових відмінностей, які ми розглянемо протягом завдань. diff --git a/curriculum/challenges/ukrainian/03-front-end-development-libraries/react/give-sibling-elements-a-unique-key-attribute.md b/curriculum/challenges/ukrainian/03-front-end-development-libraries/react/give-sibling-elements-a-unique-key-attribute.md index 681ea7e76d4..93d3ec86180 100644 --- a/curriculum/challenges/ukrainian/03-front-end-development-libraries/react/give-sibling-elements-a-unique-key-attribute.md +++ b/curriculum/challenges/ukrainian/03-front-end-development-libraries/react/give-sibling-elements-a-unique-key-attribute.md @@ -1,6 +1,6 @@ --- id: 5a24c314108439a4d403618b -title: Надання однорівневим елементам унікального атрибута key +title: Надайте братським елементам унікальний атрибут key challengeType: 6 forumTopicId: 301394 dashedName: give-sibling-elements-a-unique-key-attribute @@ -8,19 +8,19 @@ dashedName: give-sibling-elements-a-unique-key-attribute # --description-- -Останнє завдання показало як метод `map` використовується для динамічної візуалізації ряду елементів на основі вводу користувача. Однак у цьому прикладі була пропущена важлива частина. Коли ви створюєте масив елементів, кожний з них потребує атрибут `key` з унікальним значенням. React використовує такі ключі, щоб відстежувати, які елементи додаються, змінюються або видаляються. Це допомагає зробити процес повторної візуалізації більш ефективним, коли список змінюється будь-яким чином. +У попередньому завданні показано, як використовувати метод `map`, щоб динамічно відтворити елементи на основі введення користувача. Однак у цьому прикладі була пропущена важлива частина. Коли ви створюєте масив елементів, кожний з них потребує атрибут `key` з унікальним значенням. React використовує такі ключі, щоб відстежувати, які елементи додаються, змінюються або видаляються. Це допомагає зробити процес повторного відтворення ефективнішим, якщо список змінюється. -**Примітка:** Ключі мають бути унікальними лише між елементами одного рівня, вони не повинні бути глобально унікальними в вашому застосунку. +**Примітка:** ключі мають бути унікальними лише між братськими елементами, вони не повинні бути глобально унікальними в застосунку. # --instructions-- -Редактор коду має масив з деякими інтерфейсними фреймворками та функціональним компонентом без збереження стану з назвою `Frameworks()`. `Frameworks()` потребує перетворення масиву у невпорядкований список, так само як в останньому завданні. Завершіть запис функції зворотного виклику `map`, щоб повернути елемент `li` для кожного фреймворку в масиві `frontEndFrameworks`. Цього разу переконайтесь, що надали кожному `li` атрибут `key` з унікальним значенням. Елементи `li` також повинні містити текст з `frontEndFrameworks`. +Редактор коду містить масив з деякими фреймворками та функціональний компонент без стану `Frameworks()`. `Frameworks()` має перетворити масив у невпорядкований список, так само як в попередньому завданні. Завершіть запис функції зворотного виклику `map`, щоб повернути елемент `li` для кожного фреймворку в масиві `frontEndFrameworks`. Цього разу переконайтесь, що надали кожному `li` атрибут `key` з унікальним значенням. Елементи `li` також повинні містити текст з `frontEndFrameworks`. -Зазвичай, ви хочете зробити ключем те, що однозначно ідентифікує візуалізований елемент. В крайньому разі може бути використаний індекс масиву, але зазвичай слід намагатися використовувати унікальну ідентифікацію. +Зазвичай ключем потрібно робити те, що однозначно ідентифікує відтворений елемент. В крайньому разі можна використати індекс масиву, але варто використовувати унікальну ідентифікацію. # --hints-- -Компонент `Frameworks` має існувати та відображатися на сторінці. +Компонент `Frameworks` має існувати та відтворюватись на сторінці. ```js assert( @@ -28,19 +28,19 @@ assert( ); ``` -`Frameworks` має відображати елемент `h1`. +`Frameworks` має відтворити елемент `h1`. ```js assert(Enzyme.mount(React.createElement(Frameworks)).find('h1').length === 1); ``` -`Frameworks` має відображати елемент `ul`. +`Frameworks` має відтворити елемент `ul`. ```js assert(Enzyme.mount(React.createElement(Frameworks)).find('ul').length === 1); ``` -Тег `ul` має відображати 6 дочірніх елементів `li`. +Тег `ul` має відтворити 6 дочірніх елементів `li`. ```js assert( @@ -73,7 +73,7 @@ assert( ); ``` -Кожний елемент зі списку повинен містити текст із `frontEndFrameworks`. +Кожен елемент зі списку повинен містити текст із `frontEndFrameworks`. ```js assert( diff --git a/curriculum/challenges/ukrainian/03-front-end-development-libraries/react/introducing-inline-styles.md b/curriculum/challenges/ukrainian/03-front-end-development-libraries/react/introducing-inline-styles.md index 0f13babe6c8..1178aec22ec 100644 --- a/curriculum/challenges/ukrainian/03-front-end-development-libraries/react/introducing-inline-styles.md +++ b/curriculum/challenges/ukrainian/03-front-end-development-libraries/react/introducing-inline-styles.md @@ -1,6 +1,6 @@ --- id: 5a24c314108439a4d4036181 -title: Представляємо вбудовані стилі +title: Вступ до вбудованих стилів challengeType: 6 forumTopicId: 301395 dashedName: introducing-inline-styles @@ -8,32 +8,32 @@ dashedName: introducing-inline-styles # --description-- -Наявні інші складні концепції, що додають потужних можливостей для вашого коду React. Проте вас може зацікавити, більш проста задача, як стилізувати ті JSX елементи, які ви створюєте в React. Ви, можливо, знаєте, що це не буде в точності теж саме, що і робота з HTML, тому що є способом, за допомогою якого ви застосовуєте класи до JSX елементів. +Існують й інші складні поняття, які додають потужні можливості до коду React. Але вас може цікавити простіше завдання: як стилізувати елементи JSX, створені в React. Ви, можливо, знаєте, що це не буде в точності те ж саме, що і робота з HTML, через спосіб, за допомогою якого ви застосовуєте класи до елементів JSX. -Якщо ви імпортували стилі із таблиці стилів, то не суттєво відрізняється. Ви застосовуєте класи для вашого JSX елементу, користуючись `className` атрибута, також використовуєте стилі класу до вашої таблиці стилів. Інший варіант – це застосувати вбудовані стилі, які дуже поширені в розробці ReactJS. +Якщо ви імпортуєте стилі із таблиці стилів, то суттєвої різниці немає. Ви застосовуєте класи до елемента JSX за допомогою атрибута `className`, та застосовуєте стилі до класу в таблиці стилів. Інший варіант — застосувати вбудовані стилі, які дуже поширені в розробці ReactJS. -Ви застосовуєте вбудовані стилі до елементів JSX подібно до того, як це робиться в HTML, але з деякими відмінностями в JSX. Ось приклад вбудованого стилю в HTML: +Вбудовані стилі застосовують до елементів JSX схоже до того, як це роблять в HTML, але з декількома відмінностями JSX. Ось приклад вбудованого стилю в HTML: ```jsx
Mellow Yellow
``` -Елементи JSX використовують атрибут `style`, але через шлях передачі JSX ви не можете встановити значення `string`. Замість цього зробіть його таким самим, як JavaScript `object`. Наприклад: +Елементи JSX використовують атрибут `style`, але ви не можете встановити значення на `string` через спосіб транспіляції JSX. Натомість його можна встановити на об’єкт JavaScript (`object`). Наприклад: ```jsx
Mellow Yellow
``` -Зверніть увагу, як ми зібрали значення `fontSize` у шрифті? Це тому, що React не буде приймати ключі кеба-регістру в об'єкті стилю. React може застосувати ім'я з правильними властивостями для нас у HTML. +Помітили, як ми використали верблюдячийРегістр у властивості `fontSize`? Причина в тому, що React не приймає ключі в-шашличному-регістрі в об’єкті стилю. React застосує правильну назву властивості в HTML за нас. # --instructions-- -Додайте атрибут `style` до `div` в редактор коду, щоб надати тексту червоного кольору а шрифту розміру `72px`. +Додайте атрибут `style` до `div` в редакторі коду, щоб надати тексту червоний колір та розмір шрифту `72px`. -Note that you can optionally set the font size to be a number, omitting the units `px`, or write it as `"72px"`. +Зверніть увагу, що за бажанням ви можете встановити розмір шрифту на число, опустивши одиниці виміру `px`, або написати як `"72px"`. # --hints-- -Компонент повинен відображати елемент `div`. +Компонент має відтворити елемент `div`. ```js assert( @@ -44,7 +44,7 @@ assert( ); ``` -Елемент `div` повинен мати `red` колір. +Елемент `div` повинен мати колір зі значенням `red`. ```js assert( @@ -55,7 +55,7 @@ assert( ); ``` -Елемент `div` повинен мати розмір шрифту `72px`. +Елемент `div` повинен мати розмір шрифту зі значенням `72px`. ```js assert( diff --git a/curriculum/challenges/ukrainian/03-front-end-development-libraries/react/optimize-re-renders-with-shouldcomponentupdate.md b/curriculum/challenges/ukrainian/03-front-end-development-libraries/react/optimize-re-renders-with-shouldcomponentupdate.md index a922642eff1..a86431a5cbf 100644 --- a/curriculum/challenges/ukrainian/03-front-end-development-libraries/react/optimize-re-renders-with-shouldcomponentupdate.md +++ b/curriculum/challenges/ukrainian/03-front-end-development-libraries/react/optimize-re-renders-with-shouldcomponentupdate.md @@ -1,6 +1,6 @@ --- id: 5a24c314108439a4d4036180 -title: Оптимізація Re-Renders з shouldComponentUpdate +title: Оптимізуйте повторне відтворення з shouldComponentUpdate challengeType: 6 forumTopicId: 301398 dashedName: optimize-re-renders-with-shouldcomponentupdate @@ -8,17 +8,17 @@ dashedName: optimize-re-renders-with-shouldcomponentupdate # --description-- -Тепер, коли компонент переходить у новий `state` або отримує новий `props`, він повторно перетворює себе і свої дочірні елементи. Як правило, це нормально. Але React надає метод, що можна викликати, коли дочірній елемент отримує новий `state` або `props` і встановлює, чи потрібно його оновлювати. Цей метод називається `shouldComponentUpdate()`, він створює параметри `nextProps` й `nextState`. +Наразі, якщо компонент отримує новий стан чи пропс, він повторно відтворює себе та свої дочірні компоненти. Як правило, це нормально. Але React надає метод життєвого циклу, який можна викликати, коли дочірні компоненти отримують новий стан чи пропс, та оголосити, чи компонентам потрібне оновлення. Цей метод називається `shouldComponentUpdate()`, і він приймає `nextProps` та `nextState` як параметри. -Цей метод допомагає оптимізувати роботу програми. Наприклад, при звичайному процесі компоненти ререндеряться, коли вони отримують нові `props`, навіть якщо `props` не змінювались. Можете скористатися `shouldComponentUpdate()`, щоб запобігти цьому, шляхом порівняння `props`. Метод має видати `boolean` значення, що говорить React, чи потрібно обновити компонент. Можете порівняти поточні props (`this.props`) з новими props (`nextProps`), щоб визначити, чи потрібно їх оновити, та відповідно повернути сигнал `true` або `false`. +Цей метод допомагає оптимізувати роботу застосунку. Наприклад, при звичайному процесі компоненти повторно відтворюються, коли отримують нові пропси, навіть якщо пропси не змінювались. Ви можете використати `shouldComponentUpdate()`, щоб уникнути цього, порівнявши пропси. Метод має повернути булеве значення (`boolean`), яке повідомляє React, чи потрібно оновити компонент. Ви можете порівняти поточні пропси (`this.props`) з наступними пропсами (`nextProps`), щоб визначити, чи потрібне оновлення, та відповідно повернути `true` чи `false`. # --instructions-- -Метод `shouldComponentUpdate()` додається до компонента `OnlyEvens`. Зараз цей метод повертає `true`, тому `OnlyEvens` ререндерить щоразу, як він отримує нові `props`. Змініть метод так, щоб `OnlyEvens` оновлювався лише коли `value` нового props парна. Натисніть `Add` кнопку та перегляньте порядок дій у консолі браузера, в той час, як працює цикл. +Метод `shouldComponentUpdate()` додано до компонента під назвою `OnlyEvens`. Зараз цей метод повертає `true`, тому `OnlyEvens` повторно відтворюється кожен раз, коли отримує новий пропс. Змініть метод так, щоб `OnlyEvens` оновлювався лише тоді, коли значення нового пропсу є парним. Натисніть кнопку `Add` та перегляньте порядок подій в консолі браузера, коли запущено хуки життєвого циклу. # --hints-- -Компонент `Controller` має показувати компонент `OnlyEvens` як дочірній елемент. +Компонент `Controller` має відтворити компонент `OnlyEvens` як дочірній. ```js assert( @@ -32,7 +32,7 @@ assert( ); ``` -Метод `shouldComponentUpdate` має бути визначеним у компоненті `OnlyEvens`. +Метод `shouldComponentUpdate` має бути визначеним в компоненті `OnlyEvens`. ```js assert( @@ -45,7 +45,7 @@ assert( ); ``` -Компонент `OnlyEvens` має повертати тег `h1`, що рендерить значення `this.props.value`. +Компонент `OnlyEvens` має повернути тег `h1`, який відтворює значення `this.props.value`. ```js (() => { @@ -64,7 +64,7 @@ assert( })(); ``` -`OnlyEvens` має ререндерити лише тоді, коли `nextProps.value` парна. +`OnlyEvens` має повторно відтворюватись лише тоді, коли значення `nextProps.value` є парним. ```js (() => { diff --git a/curriculum/challenges/ukrainian/03-front-end-development-libraries/react/pass-a-callback-as-props.md b/curriculum/challenges/ukrainian/03-front-end-development-libraries/react/pass-a-callback-as-props.md index a324af22013..85f64fb9eb2 100644 --- a/curriculum/challenges/ukrainian/03-front-end-development-libraries/react/pass-a-callback-as-props.md +++ b/curriculum/challenges/ukrainian/03-front-end-development-libraries/react/pass-a-callback-as-props.md @@ -1,6 +1,6 @@ --- id: 5a24c314108439a4d403617b -title: Передача зворотного виклику в якості пропсів +title: Передайте зворотний виклик як пропс challengeType: 6 forumTopicId: 301400 dashedName: pass-a-callback-as-props @@ -8,13 +8,13 @@ dashedName: pass-a-callback-as-props # --description-- -Можна передавати `state` у якості пропсів дочірнім компонентам, але ви необмежені у передачі даних. Також можна передати функції обробника або будь-який метод, який визначений у компоненті React, дочірньому компоненту. Саме таким чином, дочірнім компонентам надають дозвіл на взаємодію з їхніми батьківськими компонентами. Відбувається передача методів дочірньому елементу, як звичайному пропсу. Він отримує назву, а ви - доступ до назви цього методу у розділі `this.props` у дочірньому компоненті. +Ви можете передати стан до дочірніх компонентів як пропс, але ви необмежені в передачі даних. Ви також можете передавати функції обробника або будь-який метод, визначений в компоненті React, до дочірнього компонента. Саме таким чином ви дозволяєте дочірнім компонентам взаємодіяти з їхніми батьківськими компонентами. Методи передають до дочірнього компонента так само, як і звичайні пропси. Йому призначено назву, а ви маєте доступ до цієї назви методу під `this.props` в дочірньому компоненті. # --instructions-- -У редакторі коду виділено три компоненти. Компонент `MyApp` є батьківським, що відображає дочірні компоненти `GetInput` та `RenderInput`. Додайте компонент `GetInput` до методу візуалізації у `MyApp`, а потім надайте йому пропс з назвою `input`, призначений для `inputValue` із `MyApp`'s `state`. Також створіть пропс під назвою `handleChange` і передайте йому обробника введення даних `handleChange`. +У редакторі коду виділено три компоненти. Компонент `MyApp` є батьківським, який відтворюватиме дочірні компоненти `GetInput` та `RenderInput`. Додайте компонент `GetInput` до методу відтворення в `MyApp`, а потім передайте йому пропс під назвою `input`, призначений до значення `inputValue` зі стану `MyApp`. Також створіть пропс під назвою `handleChange` і передайте йому обробника введення даних `handleChange`. -Далі, додайте `RenderInput` до методу візуалізації в `MyApp`, після цього створіть пропс під назвою `input` і передайте йому `inputValue` із `state`. Після завершення з'являється можливість вводити інформацію у поле `input` у компоненті `GetInput`, який потім викликає метод обробника у своєму батьківському компоненті за допомогою пропсів. Це оновлює вхідні дані у `state` батьківського компонента, які передаються в якості пропсів обом дочірнім елементам. Зверніть увагу, як передаються дані між компонентами і як єдиним джерелом достовірних даних залишається `state` батьківського компонента. Слід визнати, що цей приклад не є повністю правдивим, але він повинен слугувати ілюстрацією того, як дані та зворотні виклики можуть передаватися між компонентами React. +Далі додайте `RenderInput` до методу відтворення в `MyApp`, потім створіть пропс під назвою `input` та передайте до нього `inputValue` зі стану. Після цього ви зможете писати в полі `input` в компоненті `GetInput`, що потім викликає метод обробника в батьківському компоненті через пропс. Це оновлює введені дані у стані батьківського компонента, які передаються як пропси обом дочірнім компонентам. Зверніть увагу, як між компонентами передаються дані, а єдиним джерелом істини залишається стан батьківського компонента. Варто визнати, що цей приклад не є повністю правдивим, але він повинен слугувати ілюстрацією того, як дані та зворотні виклики можуть передаватися між компонентами React. # --hints-- diff --git a/curriculum/challenges/ukrainian/03-front-end-development-libraries/react/render-conditionally-from-props.md b/curriculum/challenges/ukrainian/03-front-end-development-libraries/react/render-conditionally-from-props.md index 61aa8855b8c..d1421b7e15b 100644 --- a/curriculum/challenges/ukrainian/03-front-end-development-libraries/react/render-conditionally-from-props.md +++ b/curriculum/challenges/ukrainian/03-front-end-development-libraries/react/render-conditionally-from-props.md @@ -1,6 +1,6 @@ --- id: 5a24c314108439a4d4036188 -title: Умовний рендеринг з пропс +title: Умовне відтворення з пропсів challengeType: 6 forumTopicId: 301405 dashedName: render-conditionally-from-props @@ -8,21 +8,21 @@ dashedName: render-conditionally-from-props # --description-- -Наразі ви бачили, як використовувати `if/else`, `&&` та тернарний оператор (`condition ? expressionIfTrue : expressionIfFalse`), щоб приймати умовні рішення про те, що і коли відображати. Проте залишилася ще одна важлива для огляду тема, вивчення якої дозволить поєднувати всі ці поняття з іншою потужною функцією React: пропси. Використання пропсів для умовного рендерингу коду є дуже поширеним явищем серед React-розробників: вони використовують значення даного пропсу для автоматичного прийняття рішень про те, що відображати. +Наразі ви бачили, як використовувати `if/else`, `&&` та тернарний оператор (`condition ? expressionIfTrue : expressionIfFalse`), щоб приймати умовні рішення про те, що і коли відтворювати. Проте залишилася ще одна важлива для огляду тема, вивчення якої дозволить поєднувати всі ці поняття з іншою потужною функцією React: пропси. Використання пропсів для умовного відтворення коду є дуже поширеним явищем серед розробників React: вони використовують значення даного пропсу для автоматичного прийняття рішень про те, що відтворювати. -В цьому завданні вам доведеться налаштовувати дочірній компонент задля прийняття рішень на основі пропс стосовно рендерингу. Також ви зіштовхнетеся з використанням трикомпонентного оператора та побачите, як деякі з інших, описаних у минулих завданнях, понять можуть бути настільки ж корисними у даному контексті. +У цьому завданні ви встановите дочірній компонент, щоб приймати рішення щодо відтворення на основі пропсів. Ви також використовуватимете тернарний оператор та побачите деякі інші корисні поняття, описані в попередніх завданнях. # --instructions-- -Редактор коду складається з двох компонентів, які частково для вас визначені: батьківський, з назвою `GameOfChance`, та дочірній - `Results`. Вони використовуються при створенні простих ігор, де користувач натискає клавішу, аби перевірити, виграв він або вона чи ні. +Редактор коду містить два компоненти, частково визначені за вас: батьківський компонент `GameOfChance` та дочірній компонент `Results`. Їх використовують для створення простої гри, в якій користувач натискає кнопку, щоб дізнатись про свою перемогу чи поразку. -Перш за все, вам знадобиться простий вираз, який випадковим чином повертає різні значення при кожному запуску. Можна використати `Math.random()`. Цей метод повертає значення між `0` (включно) та `1` (виключно) кожного разу, коли він викликається. Таким чином, для шансу 50/50 використовуйте у своєму виразі `Math.random() >= .5`. З точки зору статистики, цей вираз поверне `true` в 50% випадків та `false` - в інших 50%. В методі рендерингу, замініть `null` на вираз, наведений вище, задля завершення оголошення змінної. +Перш за все, вам знадобиться простий вираз, який випадковим чином повертає різні значення при кожному запуску. Можна використати `Math.random()`. Цей метод повертає значення між `0` (включно) та `1` (виключно) кожного разу, коли він викликається. Тому для шансів 50/50 використайте `Math.random() >= .5` у виразі. З точки зору статистики, цей вираз поверне `true` в 50% випадків та `false` в інших 50%. В методі відтворення замініть `null` на вираз, наведений вище, щоб завершити оголошення змінної. -Тепер у вас є вираз, здатний приймати випадкове рішення у коді. Наступне, що треба - це впровадити його. Відрендеріть компонент `Results` як дочірний від `GameOfChance` та передайте `expression` як пропс з назвою `fiftyFifty`. В компоненті `Results` напишіть трикомпонентний вираз на основі пропсу `fiftyFifty`, взятого з `GameOfChance`, для рендерингу елементу `h1` з текстом `You Win!` або `You Lose!`. Вкінці переконайтеся, що метод `handleClick()` правильно обчислює кожний хід, щоб користувач знав скільки разів він зіграв. Це також дозволить користувачеві дізнатися, що компонент дійсно оновився, коли він виграв або програв двічі поспіль. +Тепер у вас є вираз, здатний приймати випадкове рішення у коді. Тепер потрібно впровадити його. Відтворіть компонент `Results` як дочірній компонент компонента `GameOfChance` та передайте `expression` як пропс під назвою `fiftyFifty`. У компоненті `Results` напишіть тернарний вираз, щоб відтворити елемент `h1` з текстом `You Win!` або `You Lose!`, залежно від пропсу `fiftyFifty`, переданого від `GameOfChance`. Вкінці переконайтеся, що метод `handleClick()` правильно обчислює кожний хід, щоб користувач знав скільки разів він зіграв. Це також дозволить користувачеві дізнатися, що компонент дійсно оновився, коли він виграв або програв двічі поспіль. # --hints-- -Компонент `GameOfChance` має існувати та рендеритися на сторінці. +Компонент `GameOfChance` має існувати та відтворюватись на сторінці. ```js assert.strictEqual( @@ -31,7 +31,7 @@ assert.strictEqual( ); ``` -`GameOfChance` має повертати окремий елемент `button`. +`GameOfChance` має повернути єдиний елемент `button`. ```js assert.strictEqual( @@ -62,7 +62,7 @@ assert.strictEqual( ); ``` -Якщо компонент `GameOfChance` вперше відображається в DOM, елемент `p` має повернутися із внутрішнім текстом `Turn: 1`. +Коли компонент `GameOfChance` вперше відтворено в DOM, має повернутись елемент `p` з внутрішнім текстом `Turn: 1`. ```js assert.strictEqual( @@ -71,7 +71,7 @@ assert.strictEqual( ); ``` -Кожного разу, коли натискається кнопка, стан лічильника має збільшуватися на значення 1, а одинарний елемент `p` повинен бути відображений у DOM, що містить текст text `Turn: N`, де `N` - це значення стану лічильника. +При кожному натисканні кнопки стан лічильника має збільшуватись на одиницю, а єдиний елемент `p` має відтворюватись в DOM з текстом `Turn: N`, де `N` є значенням стану лічильника. ```js (() => { @@ -123,7 +123,7 @@ assert.strictEqual( })(); ``` -Коли компонент `GameOfChance` підключається спочатку до DOM і після того, як натискають на кнопку, має повертатися одинарний елемент `h1`, який випадковим чином показує `You Win!` або `You Lose!`. Примітка: це може випадково вийти з ладу. Якщо це сталося, спробуйте ще раз. +Коли компонент `GameOfChance` вперше встановлений в DOM і після кожного натискання кнопки, має повернутись єдиний елемент `h1`, який випадково відтворює `You Win!` або `You Lose!`. Примітка: випадково може виникнути помилка. Якщо це сталося, спробуйте ще раз. ```js (() => { diff --git a/curriculum/challenges/ukrainian/03-front-end-development-libraries/react/render-react-on-the-server-with-rendertostring.md b/curriculum/challenges/ukrainian/03-front-end-development-libraries/react/render-react-on-the-server-with-rendertostring.md index a9fceeeb5de..cc0353509bb 100644 --- a/curriculum/challenges/ukrainian/03-front-end-development-libraries/react/render-react-on-the-server-with-rendertostring.md +++ b/curriculum/challenges/ukrainian/03-front-end-development-libraries/react/render-react-on-the-server-with-rendertostring.md @@ -1,6 +1,6 @@ --- id: 5a24c314108439a4d403618d -title: Візуалізація React на сервері з renderToString +title: Відтворіть React на сервері за допомогою renderToString challengeType: 6 forumTopicId: 301407 dashedName: render-react-on-the-server-with-rendertostring @@ -8,17 +8,17 @@ dashedName: render-react-on-the-server-with-rendertostring # --description-- -Отже, ви вже візуалізували компоненти React для клієнтів. Звичайно, це є те, що ви будете робити завжди. Однак, є деякі випадки, де є сенс в тому, щоб візуалізувати компонент React на сервері. Це є можливим, оскільки React є бібліотекою для перегляду JavaScript і ви можете запустити JavaScript на сервері з Node. Дійсно, React надає метод `renderToString()`, який ви можете використовувати для цієї мети. +Ви вже відтворювали компоненти React для клієнтів. Зазвичай, ви завжди будете це робити. Однак існують випадки, коли компонент React краще відтворити на сервері. Це можливо, оскільки React є бібліотекою JavaScript і ви можете запустити JavaScript на сервері з Node. Насправді React надає метод `renderToString()`, який ви можете використовувати для цієї мети. -Існує дві ключові причини, чому візуалізація на сервері може використовуватися в додатках, якими користується весь світ. По-перше, якщо цього не робити, то ваші React додатки будуть складатися з відносно порожнього файлу HTML і великого набору JavaScript, коли він початково завантажений у браузер. Це може бути не ідеальним для пошукової системи, яка намагається індексувати вміст ваших сторінок, тож люди зможуть вас знайти. Якщо ви візуалізуєте початкову HTML розмітку на сервері та надішлете це клієнту, то початкове завантаження сторінки буде містити усі розмітки сторінки, які можуть бути переглянуті пошуковими системами. По-друге, це створює досвід швидшого початкового завантаження сторінки, тому що візуалізований HTML є меншим, ніж JavaScript код всього додатку. React все ще зможе розпізнати ваш додаток і керувати ним після початкового завантаження. +Існує дві ключові причини, чому відтворення на сервері може використовуватися в реальних застосунках. По-перше, якщо цього не робити, то застосунки React будуть складатися з відносно порожнього файлу HTML і великого набору JavaScript, коли він початково завантажений у браузер. Це погано для пошукової системи, яка намагається індексувати вміст сторінок, щоб люди змогли знайти вас. Якщо відтворити розмітку початкового HTML на сервері та надіслати її клієнту, то початкове завантаження сторінки міститиме всю розмітку, що може бути переглянуто пошуковими системами. По-друге, це створює швидше початкове завантаження сторінки, оскільки відтворений HTML менший, ніж JavaScript всього застосунку. React досі зможе розпізнати ваш застосунок і керувати ним після початкового завантаження. # --instructions-- -Метод `renderToString()` надається на `ReactDOMServer`, який є доступним, як глобальний об'єкт. Метод приймає один аргумент, який є елементом React. Використовуйте це для того, щоб візуалізувати `App` в рядку. +Метод `renderToString()` надано до `ReactDOMServer`, що доступний як глобальний об’єкт. Метод приймає один аргумент, який є елементом React. Використайте його, щоб відтворити `App` у вигляді рядка. # --hints-- -Компонент `App` має візуалізувати рядок використовуючи `ReactDOMServer.renderToString`. +Компонент `App` має відтворитись як рядок за допомогою `ReactDOMServer.renderToString`. ```js (getUserInput) => diff --git a/curriculum/challenges/ukrainian/03-front-end-development-libraries/react/render-state-in-the-user-interface.md b/curriculum/challenges/ukrainian/03-front-end-development-libraries/react/render-state-in-the-user-interface.md index 3917d132807..de60f1e281b 100644 --- a/curriculum/challenges/ukrainian/03-front-end-development-libraries/react/render-state-in-the-user-interface.md +++ b/curriculum/challenges/ukrainian/03-front-end-development-libraries/react/render-state-in-the-user-interface.md @@ -18,7 +18,7 @@ dashedName: render-state-in-the-user-interface # --instructions-- -`MyComponent` в редакторі коду вже має стан. Визначте тег `h1` у методі відтворення компонента, який відтворює значення `name` за стану компонента. +`MyComponent` в редакторі коду вже має стан. Визначте тег `h1` у методі відтворення компонента, який відтворює значення `name` зі стану компонента. **Примітка:** `h1` має відтворювати лише значення зі `state` та нічого більше. Будь-який код у фігурних дужках `{ }` в JSX сприйматиметься як JavaScript. Тому, щоб отримати доступ до значення зі `state`, просто візьміть посилання у фігурні дужки. diff --git a/curriculum/challenges/ukrainian/03-front-end-development-libraries/react/render-with-an-if-else-condition.md b/curriculum/challenges/ukrainian/03-front-end-development-libraries/react/render-with-an-if-else-condition.md index affd71f9e55..559f0ca0e1c 100644 --- a/curriculum/challenges/ukrainian/03-front-end-development-libraries/react/render-with-an-if-else-condition.md +++ b/curriculum/challenges/ukrainian/03-front-end-development-libraries/react/render-with-an-if-else-condition.md @@ -1,6 +1,6 @@ --- id: 5a24c314108439a4d4036184 -title: Візуалізація за допомогою умови If-Else +title: Відтворення за допомогою умови if else challengeType: 6 forumTopicId: 301410 dashedName: render-with-an-if-else-condition @@ -8,13 +8,13 @@ dashedName: render-with-an-if-else-condition # --description-- -Інший додаток для використовування JavaScript, щоб контролювати наданий вами вид, полягає у тому, щоб зв'язати елементи, які візуалізуються в умові. Коли умова є правдивою, один вид візуалізується. Коли він є хибним, то це вже є інший вид. Ви можете робити це із стандартним реченням `if/else` в методі `render()` React компонента. +Інше застосування JavaScript для контролю відтвореного вигляду — поєднати елементи, які відтворюються відповідно умови. Якщо умова правдива, відтворюється один вигляд. Якщо хибна, відтворюється інший вигляд. Це можна зробити за допомогою звичайної інструкції `if/else` в методі `render()` компонента React. # --instructions-- -MyComponent містить `boolean` у стані, який відстежує, чи хочете ви відтворити деякі елементи в UI, чи ні. `button` перемикає стан цього значення. На даний момент, він візуалізує той самий UI кожного разу. Якщо переписати метод `render()` із реченням `if/else`, і тоді `display` є `true`, то ви повернете поточну розмітку. В іншому випадку, це поверне розмітку без елемента `h1`. +MyComponent містить `boolean` у стані, що відстежує, чи потрібно відтворювати певні елементи в UI. `button` перемикає стан цього значення. Наразі він відтворює однаковий UI кожного разу. Перепишіть метод `render()` за допомогою інструкції `if/else`, і якщо значенням `display` є `true`, повертається поточна розмітка. В іншому випадку поверніть розмітку без елемента `h1`. -**Note:** Ви маєте написати `if/else`, щоб пройти тести. Використання потрійного оператора в даному випадку не проходить. +**Примітка:** ви повинні написати `if/else`, щоб пройти тести. Тернарний оператор в цьому випадку не працює. # --hints-- @@ -29,7 +29,7 @@ assert( ); ``` -Коли `display` встановити на `true`, то має візуалізуватися `div`, `button`, `h1`. +Якщо значенням `display` є `true`, мають відтворюватись `div`, `button` та `h1`. ```js async () => { @@ -50,7 +50,7 @@ async () => { }; ``` -Коли `display` встановити на `false`, то має візуалізуватися тільки `div` і `button`. +Якщо значенням `display` є `false`, мають відтворюватись лише `div` та `button`. ```js async () => { @@ -71,7 +71,7 @@ async () => { }; ``` -Метод візуалізації має використовувати речення `if/else` для того, щоб перевірити умови `this.state.display`. +Метод відтворення має використати інструкцію `if/else`, щоб перевірити умову `this.state.display`. ```js (getUserInput) => diff --git a/curriculum/challenges/ukrainian/03-front-end-development-libraries/react/review-using-props-with-stateless-functional-components.md b/curriculum/challenges/ukrainian/03-front-end-development-libraries/react/review-using-props-with-stateless-functional-components.md index 9fc70db2e90..b8fab20225c 100644 --- a/curriculum/challenges/ukrainian/03-front-end-development-libraries/react/review-using-props-with-stateless-functional-components.md +++ b/curriculum/challenges/ukrainian/03-front-end-development-libraries/react/review-using-props-with-stateless-functional-components.md @@ -8,7 +8,7 @@ dashedName: review-using-props-with-stateless-functional-components # --description-- -За винятком попереднього завдання, ви передавали пропси до функціональних компонентів без стану. Ці компоненти діють як чисті функції. Вони отримують пропси як вхідні дані і повертають той самий вид кожен раз, коли передаються однакові пропси. У наступному завданні ми детальніше розглянемо, що таке стан. Перед цим розглянемо термінологію компонентів. +За винятком попереднього завдання, ви передавали пропси до функціональних компонентів без стану. Ці компоненти діють як чисті функції. Вони отримують пропси як вхідні дані і повертають той самий вигляд кожен раз, коли передаються однакові пропси. У наступному завданні ми детальніше розглянемо, що таке стан. Перед цим розглянемо термінологію компонентів. *Функціональний компонент без стану* — це будь-яка написана функція, яка приймає пропси та повертає JSX. *Компонент без стану* — це клас, який розширює `React.Component`, але не використовує внутрішній стан (описано в наступному завданні). Зрештою, *компонент зі станом* — це класовий компонент, який підтримує власний внутрішній стан. Часто компоненти зі станом називають просто компонентами або компонентами React. diff --git a/curriculum/challenges/ukrainian/03-front-end-development-libraries/react/use--for-a-more-concise-conditional.md b/curriculum/challenges/ukrainian/03-front-end-development-libraries/react/use--for-a-more-concise-conditional.md index 8a981c9a54d..95be11e6b8a 100644 --- a/curriculum/challenges/ukrainian/03-front-end-development-libraries/react/use--for-a-more-concise-conditional.md +++ b/curriculum/challenges/ukrainian/03-front-end-development-libraries/react/use--for-a-more-concise-conditional.md @@ -1,6 +1,6 @@ --- id: 5a24c314108439a4d4036185 -title: Використання && для більш стислого умовного значення +title: Використайте && для скороченої умови challengeType: 6 forumTopicId: 301413 dashedName: use--for-a-more-concise-conditional @@ -8,17 +8,17 @@ dashedName: use--for-a-more-concise-conditional # --description-- -В останньому завданні спрацювали оператори `if/else`, але є більш стислий спосіб досягти того ж самого результату. Уявіть, що ви відстежуєте кілька умов в компоненті та хочете, щоб різні елементи відображались залежно від кожної з цих умов. Якщо ви створюєте багато операторів `else if`, щоб повернути дещо інші інтерфейси користувачів, то в такому випадку ви можете повторювати код, а це залишає можливість помилки. Замість цього, ви можете використовувати логічний оператор `&&` для виконання умовної логіки в більш стислому вигляді. Це можливо, тому що ви хочете перевірити, чи є умова `true`, і якщо так, то повернути деяку розмітку. Ось приклад: +Умови `if/else` працювали в попередньому завданні, але для досягнення того ж результату існує коротший спосіб. Уявіть, що ви відстежуєте декілька умов в компоненті та хочете, щоб різні елементи відтворювались залежно від кожної умови. Якщо ви напишете багато інструкцій `else if` для відтворення трішки різних UI, код може повторюватись, через що можуть виникнути помилки. Натомість ви можете використати логічний оператор `&&`, який виконує умовну логіку в коротшому вигляді. Це можливо, оскільки потрібно перевірити, чи умовою є `true`, і якщо так, то повернути розмітку. Ось приклад: ```jsx {condition &&

markup

} ``` -Якщо `condition` встановлено `true`, тоді повертається розмітка. Якщо умова встановлена `false`, то операція одразу поверне `false` після оцінки `condition`, і тоді нічого не повертається. Ви можете включати ці оператори безпосередньо в ваш JSX та об'єднувати кілька умов, записуючи `&&` після кожної з них. Це дозволяє обробляти більш складну умовну логіку в вашому методі `render()` без повторення великої кількості коду. +Якщо `condition` є `true`, повернеться розмітка. Якщо умовою є `false`, операція одразу поверне `false` після обчислення `condition` та не поверне нічого. Ці інструкції можна помістити одразу в JSX та поєднати декілька умов, написавши `&&` після кожної з них. Це дозволяє обробити складнішу умовну логіку в методі `render()` без повторень коду. # --instructions-- -Розв'яжіть попередній приклад ще раз, так щоб `h1` відображався тільки, якщо `display` встановлено `true`, але використовуйте логічний оператор `&&` замість оператора `if/else`. +Розв’яжіть попередній приклад ще раз, щоб `h1` відтворювався лише тоді, коли `display` є `true`, але використайте логічний оператор `&&`, а не інструкцію `if/else`. # --hints-- @@ -33,7 +33,7 @@ assert( ); ``` -Коли `display` встановлено на `true`, то мають виводитись `div`, `button`, та `h1`. +Якщо значенням `display` є `true`, мають відтворюватись `div`, `button` та `h1`. ```js async () => { @@ -54,7 +54,7 @@ async () => { }; ``` -Коли `display` встановлено на `false`, то мають виводитись тільки `div` та `button`. +Якщо значенням `display` є `false`, мають відтворюватись лише `div` та `button`. ```js async () => { @@ -75,7 +75,7 @@ async () => { }; ``` -Метод візуалізації має використовувати логічний оператор `&&` для перевірки умови `this.state.display`. +Метод відтворення має використати логічний оператор `&&`, щоб перевірити умову `this.state.display`. ```js (getUserInput) => assert(getUserInput('index').includes('&&')); diff --git a/curriculum/challenges/ukrainian/03-front-end-development-libraries/react/use-a-ternary-expression-for-conditional-rendering.md b/curriculum/challenges/ukrainian/03-front-end-development-libraries/react/use-a-ternary-expression-for-conditional-rendering.md index f9d954ee1e0..fe70b544990 100644 --- a/curriculum/challenges/ukrainian/03-front-end-development-libraries/react/use-a-ternary-expression-for-conditional-rendering.md +++ b/curriculum/challenges/ukrainian/03-front-end-development-libraries/react/use-a-ternary-expression-for-conditional-rendering.md @@ -1,6 +1,6 @@ --- id: 5a24c314108439a4d4036187 -title: Використовуйте трикомпонентний вираз для умовної візуалізації +title: Використайте тернарний вираз для умовного відтворення challengeType: 6 forumTopicId: 301414 dashedName: use-a-ternary-expression-for-conditional-rendering @@ -8,7 +8,7 @@ dashedName: use-a-ternary-expression-for-conditional-rendering # --description-- -Перед переходом до техніки динамічного малювання, існує останній спосіб використання вбудованих умов JavaScript для відображення вашого бажання: Зовнішній оператор. Зовнішній оператор часто використовується як ярлик для тверджень `if/else` у JavaScript. Вони не такі надійні, як традиційні `if/else`, але вони дуже популярні серед розробників React. Причиною цього є те, що компілювання JSX операційної системи `if/else` операторів не можна вставляти безпосередньо в код JSX. Можливо, ви помітили це раніше — коли потрібен оператор `if/else`, він завжди був *поза* ключовим словом `return`. Трикомпонентні вирази можуть бути чудовою альтернативою, якщо ви хочете реалізувати умовну логіку в межах вашої JSX. Нагадаємо, що трикомпонентний оператор має три частини, але ви можете поєднати декілька трикомпонентних вирази разом. Ось тут основний синтаксис: +Перед тим, як перейти до динамічних технік, потрібно розібрати ще один спосіб використання вбудованих умов JavaScript: тернарний оператор. Тернарний оператор часто використовують як скорочення інструкцій `if/else` в JavaScript. Ці оператори не такі надійні, як традиційні інструкції `if/else`, але дуже популярні серед розробників React. Однією з причин є компіляція JSX, тому інструкції `if/else` не можна вставити одразу в код JSX. Можливо, ви помітили це раніше: коли потрібна інструкція `if/else`, вона завжди була *поза* інструкцією `return`. Тернарні вирази можуть стати чудовою альтернативою, якщо ви хочете імплементувати умовну логіку в JSX. Нагадаємо, що тернарний оператор має три частини, але ви можете поєднати декілька тернарних виразів. Ось основний синтаксис: ```jsx condition ? expressionIfTrue : expressionIfFalse; @@ -16,13 +16,13 @@ condition ? expressionIfTrue : expressionIfFalse; # --instructions-- -Редактор коду має три константи, визначені в межах методу `CheckUserAge` component's `render()`. Вони називаються `buttonOne`, `buttonTwo`, і `buttonThree`. Кожному із них призначено простий вираз JSX, що представляє елемент кнопки. Спочатку ініціалізувати стан `CheckUserAge` з `input` і `userAge`, обидва задані значенням пустого рядка. +Редактор коду має три константи, визначені в межах методу `render()` компонента `CheckUserAge`. Вони називаються `buttonOne`, `buttonTwo` та `buttonThree`. Кожному з них призначено простий вираз JSX, що представляє кнопку. Спочатку ініціалізуйте стан `CheckUserAge` з `input` та `userAge` зі значеннями порожнього рядка. -Як тільки компонент відображає інформацію на сторінці, користувачі повинні мати спосіб взаємодіяти з нею. У межах `return` компонента, встановіть трикомпонентний вираз, який реалізує наступну логіку: коли сторінка вперше завантажується, відобразити кнопку підтвердження, `buttonOne` на сторінці. Потім, коли користувач введе свій вік та натисне кнопку, відобразіть іншу кнопку з урахуванням віку. Якщо користувач вводить число менше за `18`, відобразіть `buttonThree`. Якщо користувач вводить число більше або рівне `18`, відобразіть `buttonTwo`. +Як тільки компонент відтворює інформацію на сторінці, користувачі повинні мати спосіб взаємодіяти з нею. В межах інструкції `return` компонента, встановіть тернарний вираз, який імплементує таку логіку: коли сторінка завантажується вперше, відтворіть кнопку надсилання `buttonOne` на сторінці. Потім, коли користувач введе свій вік та натисне кнопку, відтворіть іншу кнопку на основі віку. Якщо користувач вводить число менше за `18`, відтворіть `buttonThree`. Якщо користувач вводить число більше або рівне `18`, відтворіть `buttonTwo`. # --hints-- -Компонент `CheckUserAge` має візуалізувати один елемент `input` і один елемент `button`. +Компонент `CheckUserAge` має відтворюватись з єдиним елементом `input` та єдиним елементом `button`. ```js assert( @@ -42,7 +42,7 @@ assert( ); ``` -Коли компонент `CheckUserAge` першим візуалізовано в DOM, то текст `button` має бути Submit. +Коли компонент `CheckUserAge` вперше відтворено в DOM, внутрішнім текстом `button` має бути `Submit`. ```js assert( @@ -51,7 +51,7 @@ assert( ); ``` -Коли вводиться число менше 18 в `input` і натискається `button`, внутрішній текст `button` має бути `You Shall Not Pass`. +Коли число менше за 18 введено в елементі `input` та натиснуто `button`, внутрішнім текстом `button` має бути `You Shall Not Pass`. ```js (() => { @@ -83,7 +83,7 @@ assert( })(); ``` -Коли вводиться число більше або рівне 18-и в `input` і натискається `button`, внутрішній текст `button` має бути `You May Enter`. +Коли число більше або рівне 18 введено в елементі `input` та натиснуто `button`, внутрішнім текстом `button` має бути `You May Enter`. ```js (() => { @@ -115,7 +115,7 @@ assert( })(); ``` -Після того, як число було прийнято, і значення `input` знову змінилося, текст `button` повинен повернутися до `Submit`. +Як тільки число було надіслано, а значення `input` знову було змінено, `button` має повернутись до читання `Submit`. ```js (() => { @@ -156,7 +156,7 @@ assert( })(); ``` -Ваш код не повинен містити конструкцій `if/else`. +Код не повинен містити інструкцій `if/else`. ```js assert( diff --git a/curriculum/challenges/ukrainian/03-front-end-development-libraries/react/use-advanced-javascript-in-react-render-method.md b/curriculum/challenges/ukrainian/03-front-end-development-libraries/react/use-advanced-javascript-in-react-render-method.md index c1b25cd3199..019c6b52b22 100644 --- a/curriculum/challenges/ukrainian/03-front-end-development-libraries/react/use-advanced-javascript-in-react-render-method.md +++ b/curriculum/challenges/ukrainian/03-front-end-development-libraries/react/use-advanced-javascript-in-react-render-method.md @@ -1,6 +1,6 @@ --- id: 5a24c314108439a4d4036183 -title: Використовуйте розширений JavaScript у методі React Render +title: Використайте розширений JavaScript в методі відтворення React challengeType: 6 forumTopicId: 301415 dashedName: use-advanced-javascript-in-react-render-method @@ -8,17 +8,17 @@ dashedName: use-advanced-javascript-in-react-render-method # --description-- -Під час попередніх занять, ви вивчили, як вводити код JavaScript у код JSX, за допомогою фігурних дужок, `{ }`, для таких завдань, як отримання доступу до ресурсів, передачі ресурсів, перегляду поточного стану, додавання коментарів до вашого коду, і зовсім нещодавно – для стилізації ваших компонентів. Усі вони є поширеними варіантами використання JavaScript у JSX, проте це не єдиний спосіб використання коду JavaScript у ваших компонентах React. +У попередніх завданнях ви дізнались, як вставити код JavaScript в код JSX за допомогою фігурних дужок `{ }`, щоб отримати доступ до пропсів, передати пропси, отримати доступ до стану, написати коментарі в коді та стилізувати компоненти. Це поширені варіанти використання JavaScript в JSX, але це не єдиний спосіб використання коду JavaScript в компонентах React. -Ви також можете прямо вписати ваші методи JavaScript у `render`, перед командою `return`,, *** без ***, вставляючи їх у фігурні дужки. Це тому, що це ще не у межах коду JSX. Якщо ви захочете використати змінну пізніше у коді JSX * всередині команди * the `return`, потрібно помістити назву змінної у фігурні дужки. +Ви можете писати JavaScript одразу в методах `render`, перед інструкцією `return`, ***не*** вставляючи його в фігурні дужки. Причина в тому, що його поки немає в коді JSX. Якщо пізніше ви захочете використати змінну в коді JSX *всередині* інструкції `return`, назву змінної потрібно писати в фігурних дужках. # --instructions-- -У даному коді, метод `render` складається з бази, що містить 20 аспектів, для представлення відповідей, знайдених у класичній іграшці 1980's Magic Eight Ball. Процес натискання кнопки пов'язаний з методом `ask`, тому при кожному натисканні на кнопку, відбудеться генерування випадкового номеру та його збереження у стані як `randomIndex`. На рядку 52, видаліть рядок `change me!` та перепризначте the `answer` const, аби ваш код випадковим чином організовував інший індекс з масиву `possibleAnswers` кожного разу, коли коли компонент оновлюється. Наостанок, вставте константу `answer` всередину `p` теґів. +У наданому коді метод `render` має масив, який містить 20 можливих фраз популярної іграшки «Magic Eight Ball». Подія натискання кнопки пов’язана з методом `ask`, тому при кожному натисканні кнопки генерується випадкове число, яке буде збережене як `randomIndex` в стані. Видаліть рядок `change me!` в рядку №52 та повторно призначте константу `answer`, щоб код випадково отримував доступ до різного індексу масиву `possibleAnswers` при кожному оновленні компонента. Вкінці вставте константу `answer` всередині тегів `p`. # --hints-- -Компонент `MagicEightBall` повинен існувати та відображатися на сторінці. +Компонент `MagicEightBall` має існувати та відтворюватись на сторінці. ```js assert.strictEqual( @@ -28,7 +28,7 @@ assert.strictEqual( ); ``` -Перший дочірній елемент `MagicEightBall` повинен бути елементом `input`. +Першим дочірнім компонентом `MagicEightBall` має бути елемент `input`. ```js assert.strictEqual( @@ -40,7 +40,7 @@ assert.strictEqual( ); ``` -Третій дочірній елемент `MagicEightBall` повинен бути елементом `button`. +Третім дочірнім компонентом `MagicEightBall` має бути елемент `button`. ```js assert.strictEqual( @@ -62,7 +62,7 @@ assert( ); ``` -Коли `MagicEightBall` вперше піднімається до DOM, він повинен повернутися до пустого елементу `p`. +Коли `MagicEightBall` вперше встановлений в DOM, він має повернути порожній елемент `p`. ```js assert( @@ -71,7 +71,7 @@ assert( ); ``` -Коли текст введено у елемент `input` та кнопку натиснуто, компонент `MagicEightBall` має повернутися до елементу a `p`, що містить випадковий елемент із масиву `possibleAnswers`. +Коли в елементі `input` введено текст та натиснуто кнопку, компонент `MagicEightBall` має повернути елемент `p`, який містить випадковий елемент з масиву `possibleAnswers`. ```js (() => { diff --git a/curriculum/challenges/ukrainian/03-front-end-development-libraries/react/use-array.filter-to-dynamically-filter-an-array.md b/curriculum/challenges/ukrainian/03-front-end-development-libraries/react/use-array.filter-to-dynamically-filter-an-array.md index 8c8986c5a95..c4ef86a1996 100644 --- a/curriculum/challenges/ukrainian/03-front-end-development-libraries/react/use-array.filter-to-dynamically-filter-an-array.md +++ b/curriculum/challenges/ukrainian/03-front-end-development-libraries/react/use-array.filter-to-dynamically-filter-an-array.md @@ -1,6 +1,6 @@ --- id: 5a24c314108439a4d403618c -title: Використання Array.filter() для динамічної фільтрації масиву +title: Використайте Array.filter(), щоб динамічно відфільтрувати масив challengeType: 6 forumTopicId: 301416 dashedName: use-array-filter-to-dynamically-filter-an-array @@ -8,7 +8,7 @@ dashedName: use-array-filter-to-dynamically-filter-an-array # --description-- -Метод масиву `map` - це потужний інструмент, який ви будете часто використовувати під час роботи з React. Інший метод, пов'язаний з `map`, - це `filter`, який фільтрує зміст масиву на основі умови, а потім повертає новий масив. Наприклад, якщо у вас є масив користувачів і всі вони мають властивість `online`, яку можна встановити як `true` або `false`, то ви можете відфільтрувати тільки тих користувачів, які знаходяться в мережі, за допомогою запису: +Метод масиву `map` — це потужний інструмент, який ви будете часто використовувати під час роботи з React. Інший метод, пов’язаний з `map`, — це `filter`, який фільтрує зміст масиву на основі умови, а потім повертає новий масив. Наприклад, якщо у вас є масив користувачів і всі вони мають властивість `online`, яку можна встановити як `true` або `false`, то ви можете відфільтрувати тільки тих користувачів, які знаходяться в мережі: ```js let onlineUsers = users.filter(user => user.online); @@ -16,11 +16,11 @@ let onlineUsers = users.filter(user => user.online); # --instructions-- -В редакторі коду, `state` у `MyComponent` ініціалізується масивом користувачів. Деякі з користувачів знаходяться в мережі, а деякі ні. Відфільтруйте масив, щоб побачити лише користувачів, які знаходяться в мережі. Для цього, спочатку скористайтеся `filter`, щоб повернути новий масив, що містить лише тих користувачів, у котрих властивість `online` встановлена `true`. Потім у змінній `renderOnline` застосуйте відфільтрований масив та поверніть елемент `li` для кожного користувача, що містить текст їх `username`. Обов'язково вкажіть унікальний `key`, як і в останніх завданнях. +Стан `MyComponent` ініціалізовано масивом користувачів у редакторі коду. Деякі з користувачів знаходяться в мережі, а деякі ні. Відфільтруйте масив, щоб побачити лише користувачів, які знаходяться в мережі. Для цього спочатку скористайтеся `filter`, щоб повернути новий масив, який містить лише тих користувачів, значення властивості `online` яких становить `true`. Потім у змінній `renderOnline` застосуйте відфільтрований масив та поверніть елемент `li` для кожного користувача, що містить текст їхніх `username`. Обов’язково вкажіть унікальний `key`, як і в попередніх завданнях. # --hints-- -`MyComponent` має існувати та відображатись. +`MyComponent` має існувати та відтворюватись на сторінці. ```js assert.strictEqual( @@ -29,7 +29,7 @@ assert.strictEqual( ); ``` -стан `MyComponent` має бути ініціалізовано для масиву з шести користувачів. +Стан `MyComponent` має ініціалізуватися масивом з шести користувачів. ```js assert( @@ -40,7 +40,7 @@ assert( ); ``` -`MyComponent` має повернути `div`, `h1`, а потім невпорядкований список, що містить елементи `li` для кожного користувача, чий онлайн-статус встановлено `true`. +`MyComponent` має повернути `div`, `h1`, а потім невпорядкований список, що містить елементи `li` для кожного користувача, значення статусу яких становить `true`. ```js (() => { @@ -83,7 +83,7 @@ assert( })(); ``` -`MyComponent` має виводити елемент `li`, що містить `username` кожного користувача, який знаходиться в мережі. +`MyComponent` має відтворити елементи `li`, які містять `username` кожного користувача, який знаходиться в мережі. ```js (() => { diff --git a/curriculum/challenges/ukrainian/03-front-end-development-libraries/react/use-array.map-to-dynamically-render-elements.md b/curriculum/challenges/ukrainian/03-front-end-development-libraries/react/use-array.map-to-dynamically-render-elements.md index 6b0125b932f..04e30a8808a 100644 --- a/curriculum/challenges/ukrainian/03-front-end-development-libraries/react/use-array.map-to-dynamically-render-elements.md +++ b/curriculum/challenges/ukrainian/03-front-end-development-libraries/react/use-array.map-to-dynamically-render-elements.md @@ -1,6 +1,6 @@ --- id: 5a24c314108439a4d403618a -title: Використовуйте Array.map() для динамічної візуалізації елементів +title: Використайте Array.map(), щоб відтворити елементи динамічно challengeType: 6 forumTopicId: 301417 dashedName: use-array-map-to-dynamically-render-elements @@ -8,21 +8,21 @@ dashedName: use-array-map-to-dynamically-render-elements # --description-- -Умовне відображення зручне, але компоненти мають відображати невідому кількість елементів. Часто під час реактивного програмування у програміста не має можливості дізнатися стан додатку до запуску, бо дуже багато залежить від взаємодії користувача з програмою. Програміст має написати код, щоб правильно обробити цей невідомий стан до запуску. Використання `Array.map()` в React ілюструє це поняття. +Умовне відтворення зручне, але іноді компоненти мають відтворювати невідому кількість елементів. Часто під час реактивного програмування у програміста немає можливості дізнатися стан застосунку до запуску, оскільки багато чого залежить від взаємодії користувача. Програміст має написати код, щоб правильно обробити цей невідомий стан до запуску. Метод `Array.map()` в React ілюструє це поняття. -Наприклад, ви створюєте простий додаток "To Do List". Як програміст, ви не можете знати, скільки пунктів має бути у переліку користувача. Треба вам потрібно налаштувати компонент на динамічний показ вірної кількості елементів переліку задовго до того, як користувач вирішить присвятити день пранню. +Наприклад, ви створюєте простий застосунок «To Do List». Як програміст, ви не можете знати, скільки пунктів буде в списку користувача. Вам потрібно встановити компонент так, щоб він динамічно відтворював правильну кількість пунктів списку ще до того, як користувач вирішить, що сьогодні день прання. # --instructions-- -У редакторі вже встановлено більшість компонентів `MyToDoList`. Дещо з цього коду може виглядати знайомо, якщо ви виконали завдання з контрольованої форми. Можна помітити `textarea` і `button`, так само як і кільки методів, що відстежують стан, але на сторінці ще нічого немає. +Компонент `MyToDoList` здебільшого вже налаштовано. Дещо з цього коду може виглядати знайомо, якщо ви виконали завдання з контрольованої форми. Можна помітити `textarea` та `button`, а також декілька методів, які відстежують стан, але на сторінці нічого немає. -У `constructor` створіть об'єкт `this.state` і виділіть 2 стани: `userInput` має ініціалізуватися як порожній рядок, а `toDoList`- як порожній масив. Далі видаліть значення `null` з методу `render()` поруч зі змінною `items`. Натомість нанесіть на карту масив `toDoList`, збережений у внутрішньому стані компонента і динамічно виведіть `li` для кожного об'єкта. Спробуйте відобразити рядок `eat, code, sleep, repeat` у `textarea`, а потім натисніть на кнопку і подивіться, що трапиться. +Всередині `constructor` створіть об’єкт `this.state` та визначте 2 стани: `userInput` має ініціалізуватися як порожній рядок, а `toDoList` як порожній масив. Далі видаліть значення `null` з методу `render()` поруч зі змінною `items`. У цьому місці мапуйте масив `toDoList`, збережений у внутрішньому стані компонента, та динамічно відтворіть `li` для кожного пункту. Спробуйте ввести рядок `eat, code, sleep, repeat` в `textarea`, а потім натисніть кнопку та гляньте на результат. -**Note:** Ви, можливо, знаєте, що всі дочірні елементи, створені за допомогою такої операції, мають бути оснащені унікальним атрибутом `key`. Не хвилюйтесь, це тема наступного завдання. +**Примітка:** можливо, ви знаєте, що всі братські дочірні елементи, створені завдяки мапуванню, потребують унікальний атрибут `key`. Не хвилюйтесь, це тема наступного завдання. # --hints-- -Компонент MyToDoList має існувати і відображатися на сторінці. +Компонент MyToDoList має існувати та відтворюватись на сторінці. ```js assert( @@ -33,7 +33,7 @@ assert( ); ``` -Перший дочірній елемент `MyToDoList` має бути елементом `textarea`. +Першим дочірнім компонентом `MyToDoList` має бути елемент `textarea`. ```js assert( @@ -47,7 +47,7 @@ assert( ); ``` -Другим дочірнім елементом `MyToDoList` має бути елемент `br`. +Другим дочірнім компонентом `MyToDoList` має бути елемент `br`. ```js assert( @@ -60,7 +60,7 @@ assert( ); ``` -Третім дочірнім елементом `MyToDoList` має стати елемент `button`. +Третім дочірнім компонентом `MyToDoList` має бути елемент `button`. ```js assert( @@ -104,7 +104,7 @@ assert( ); ``` -Коли натиснуто кнопку `Create List`, компонент `MyToDoList` має динамічно видати невпорядкований перелік, що містить елемент частини списку для кожної відокремленої комою частини списку, що вводиться в елемент `textarea`. +Коли натиснуто кнопку `Create List`, компонент `MyToDoList` має динамічно повернути невпорядкований список з елементів, які позначають пункти списку, введених в елементі `textarea` та розділених комами. ```js (() => { diff --git a/curriculum/challenges/ukrainian/03-front-end-development-libraries/react/use-the-lifecycle-method-componentdidmount.md b/curriculum/challenges/ukrainian/03-front-end-development-libraries/react/use-the-lifecycle-method-componentdidmount.md index bf945983232..e423e13a14c 100644 --- a/curriculum/challenges/ukrainian/03-front-end-development-libraries/react/use-the-lifecycle-method-componentdidmount.md +++ b/curriculum/challenges/ukrainian/03-front-end-development-libraries/react/use-the-lifecycle-method-componentdidmount.md @@ -1,6 +1,6 @@ --- id: 5a24c314108439a4d403617d -title: Використання методу componentDidMount +title: Використайте метод життєвого циклу componentDidMount challengeType: 6 forumTopicId: 301422 dashedName: use-the-lifecycle-method-componentdidmount @@ -8,17 +8,17 @@ dashedName: use-the-lifecycle-method-componentdidmount # --description-- -Більшість веб-розробників в якийсь момент мають викликати кінцеву точку API, щоб отримати дані. Якщо ви працюєте у React, потрібно розуміти як виконати цю дію. +Більшості веброзробників в якийсь момент потрібно викликати кінцеву точку API, щоб отримати дані. Якщо ви працюєте в React, потрібно знати, як виконати цю дію. -Найкращим рішенням буде розмістити виклик API, або будь-які інші виклики направлені до сервера у методі життєвого циклу `componentDidMount()`. Цей метод викликають після того, як компонент встановлено в DOM. Будь-які виклики `setState()` активують ререндер вашого компонента. Коли ви викликаєте API у цьому методі й встановлюєте стан відповідно до вихідних API даних, цей метод автоматично запустить оновлення. +У випадку з React, виклики API або будь-які виклики до сервера найкраще розміщувати в методі життєвого циклу `componentDidMount()`. Цей метод викликають після того, як компонент встановлено в DOM. Будь-які виклики до `setState()` активують повторне відтворення компонента. Коли ви викликаєте API у цьому методі та встановлюєте стан відповідно до повернених даних API, цей метод автоматично запустить оновлення, як тільки ви отримаєте дані. # --instructions-- -В `componentDidMount()` є імітація виклику API. Через 2.5 секунди він симулює виклик до сервера для отримання даних. У цьому прикладі йде запит на кількість поточних активних користувачів сайту. У рендер методі покажіть значення `activeUsers` у `h1` після тексту `Active Users:`. Подивіться, що відбувається при попередньому перегляді та спробуйте змінити таймаут, щоб побачити різні ефекти. +В `componentDidMount()` є імітація виклику API. Після 2,5 секунд він встановлює стан, щоб симулювати виклик сервера для отримання даних. Цей приклад запитує кількість поточних активних користувачів сайту. У методі відтворення відтворіть значення `activeUsers` в `h1` після тексту `Active Users:`. Подивіться, що відбувається в попередньому перегляді та спробуйте змінити тайм-аут, щоб побачити різні ефекти. # --hints-- -`MyComponent` має рендерити елемент `div`, що охоплює `h1` тег. +`MyComponent` має відтворити елемент `div`, що охоплює тег `h1`. ```js assert( @@ -32,7 +32,7 @@ assert( ); ``` -Стан компонентів має оновлюватися функцією таймаут у `componentDidMount`. +Стан компонента має бути оновлено за допомогою функції тайм-ауту в `componentDidMount`. ```js assert( @@ -45,7 +45,7 @@ assert( ); ``` -Тег `h1` має рендерити значення `activeUsers` зі стану `MyComponent`. +Тег `h1` має відтворити значення `activeUsers` зі стану `MyComponent`. ```js (() => { diff --git a/curriculum/challenges/ukrainian/03-front-end-development-libraries/react/use-the-lifecycle-method-componentwillmount.md b/curriculum/challenges/ukrainian/03-front-end-development-libraries/react/use-the-lifecycle-method-componentwillmount.md index 665b958666b..f88eb158c06 100644 --- a/curriculum/challenges/ukrainian/03-front-end-development-libraries/react/use-the-lifecycle-method-componentwillmount.md +++ b/curriculum/challenges/ukrainian/03-front-end-development-libraries/react/use-the-lifecycle-method-componentwillmount.md @@ -1,6 +1,6 @@ --- id: 5a24c314108439a4d403617c -title: Використання методу життєвого циклу componentWillMount +title: Використайте метод життєвого циклу componentWillMount challengeType: 6 forumTopicId: 301423 dashedName: use-the-lifecycle-method-componentwillmount @@ -8,17 +8,17 @@ dashedName: use-the-lifecycle-method-componentwillmount # --description-- -Компоненти у React мають декілька спеціальних методів, що забезпечують можливість виконувати дії у визначений час у їхньому життєвому циклі. Вони називаються методами життєвого циклу, чи перехоплювачами життєвого циклу і дозволяють виловити компонент у визначений час. Це може бути до того, як вони будуть показані, перш ніж вони оновляться, перш ніж вони отримають реквізити, перш ніж від'єднати і так далі. Ось список декількох методів життєвого циклу: `componentWillMount()` `componentDidMount()` `shouldComponentUpdate()` `componentDidUpdate()` `componentWillUnmount()`. Протягом наступних уроків розглянемо деякі основні випадки використання даних методів. +Компоненти React мають декілька спеціальних методів, які надають можливість виконувати дії у визначений час їхнього життєвого циклу. Вони називаються методами життєвого циклу, або перехоплювачами життєвого циклу, і дозволяють виловити компонент у визначений час. Це може бути перед відтворенням, оновленням, отриманням пропсу, від’єднанням тощо. Ось список декількох головних методів життєвого циклу: `componentWillMount()` `componentDidMount()` `shouldComponentUpdate()` `componentDidUpdate()` `componentWillUnmount()`. В наступнних уроках ми розглянемо деякі основні випадки їх використання. -**Примітка:** метод життєвого циклу `componentWillMount` буде виключено з майбутньої версії 16.X і видалено з версії 17. Дізнайтесь більше у цій публікації +**Примітка:** метод життєвого циклу `componentWillMount` буде нерекомендований у майбутній версії 16.X і видалений з версії 17. Дізнайтесь більше у цій публікації # --instructions-- -Метод `componentWillMount()` викликається перед методом `render()`, коли компонент підключений до DOM. Запишіть щось в консоль в межах `componentWillMount()`; щоб побачити результат - відкрийте консоль вашого браузера. +Метод `componentWillMount()` викликається перед методом `render()`, коли компонент підключений до DOM. Напишіть щось на консолі в межах `componentWillMount()` (можливо, вам знадобиться відкрити консоль браузера, щоб побачити вивід). # --hints-- -`MyComponent` має відобразити `div` елемент. +`MyComponent` має відтворити елемент `div`. ```js assert( @@ -29,7 +29,7 @@ assert( ); ``` -`console.log` слід викликати у `componentWillMount`. +`console.log` потрібно викликати в `componentWillMount`. ```js assert( diff --git a/curriculum/dictionaries/espanol/comments.json b/curriculum/dictionaries/espanol/comments.json index 4b93f9e5f79..32080ab7045 100644 --- a/curriculum/dictionaries/espanol/comments.json +++ b/curriculum/dictionaries/espanol/comments.json @@ -8,7 +8,7 @@ "c24by8": "Agrega tu código debajo de esta línea", "jbrt8k": "Agrega la fila número m a newArray", "zkh12d": "Después de pasar el desafío experimenta con myString y observa cómo funciona la agrupación", - "mobihi": "Assign 5 to oopsGlobal here", + "mobihi": "Asigna 5 a oopsGlobal aquí", "v3ups9": "Llama scale con un argumento aquí", "iw4a3a": "Caso 1: El objetivo no tiene hijo", "463xp8": "Caso 2: El objetivo tiene un hijo", @@ -66,7 +66,7 @@ "cvh4x7": "Cambia solo el código debajo de esta línea", "lvmnm7": "Abre una nueva pestaña para memes de gatos", "avpx79": "Abre la consola de tu navegador.", - "0b5ps6": "Padding between the SVG boundary and the plot", + "0b5ps6": "Relleno entre el límite del SVG y el trazado", "uemoej": "Inserta n ceros a la fila actual para crear las columnas", "lm86nf": "Inserta la fila actual, que ahora contiene n ceros, al arreglo", "qscelx": "Los métodos Redux están disponibles desde un objeto Redux", @@ -98,8 +98,8 @@ "bheu99": "Esto almacenará el conjunto", "x1djjr": "Usa console.clear() en la siguiente línea para limpiar la consola del navegador.", "22ta95": "Usa console.log() para imprimir la variable output.", - "owgrP6": "Use the classes ABOVE this line", - "oszrtn": "Use the classes BELOW this line", + "owgrP6": "Usa las clases por encima de esta línea", + "oszrtn": "Usa las clases bajo esta línea", "w43c7l": "Usar s = [2, 5, 7] sería inválido", "pgckoj": "Asignación de variables", "2xiqvv": "Declaración de variables",