chore(i18n,learn): processed translations (#49203)

This commit is contained in:
camperbot
2023-01-30 18:58:54 +02:00
committed by GitHub
parent 4d5b0a871a
commit b97242ef47
210 changed files with 2963 additions and 1082 deletions
@@ -1,6 +1,6 @@
---
id: 56bbb991ad1ed5201cd392cc
title: Manipulate Arrays With pop Method
title: تغيير القوائم (Arrays) باستخدام طريقة pop
challengeType: 1
videoUrl: 'https://scrimba.com/c/cRbVZAB'
forumTopicId: 18236
@@ -1,6 +1,6 @@
---
id: 56bbb991ad1ed5201cd392cb
title: Manipulate Arrays With push Method
title: تغيير القوائم باستخدام طريقة push
challengeType: 1
videoUrl: 'https://scrimba.com/c/cnqmVtJ'
forumTopicId: 18237
@@ -1,6 +1,6 @@
---
id: 56bbb991ad1ed5201cd392cd
title: Manipulate Arrays With shift Method
title: تغيير القوائم باستخدام طريقة shift
challengeType: 1
videoUrl: 'https://scrimba.com/c/cRbVETW'
forumTopicId: 18238
@@ -1,6 +1,6 @@
---
id: 56bbb991ad1ed5201cd392ce
title: Manipulate Arrays With unshift Method
title: تغيير القوائم باستخدام طريقة unshift
challengeType: 1
videoUrl: 'https://scrimba.com/c/ckNDESv'
forumTopicId: 18239
@@ -10,9 +10,9 @@ dashedName: use-class-syntax-to-define-a-constructor-function
يوفر ES6 طريقة syntax جديدة لإنشاء objects، باستخدام كلمة <dfn>class</dfn>.
In ES5, an object can be created by defining a `constructor` function and using the `new` keyword to instantiate the object.
في ES5، ينشئ كائن (object) عند تحدد وظيفة (function) يسمى `constructor` واستخدام مصطلح `new` لتمثيل كائن.
In ES6, a `class` declaration has a `constructor` method that is invoked with the `new` keyword. If the `constructor` method is not explicitly defined, then it is implicitly defined with no arguments.
في ES6، يحتوي إعلان `class` على طريقة `constructor` التي تنفذ مع مصطلح `new` جديدة. إذا لم يتم تعريف طريقة `constructor` بوضوح، فعندها تعرّف ضمنيا دون أي معطيات (arguments).
```js
// Explicit constructor
@@ -41,21 +41,21 @@ const atlas = new Rocket();
atlas.launch();
```
It should be noted that the `class` keyword declares a new function, to which a constructor is added. This constructor is invoked when `new` is called to create a new object.
وتجدر الإشارة إلى أن كلمة `class` تعرف وظيفة جديد، تضاف المنشئ إليها. يستدعى هذا المنشئ عندما تنفيذ `new` لإنشاء كائن جديد.
**Note:** UpperCamelCase should be used by convention for ES6 class names, as in `SpaceShuttle` used above.
**ملاحظة:** يجب أن تستخدم UpperCamelCase لاسماء الفئات في ES6، كما في `SpaceShuttle` المستخدمة أعلاه.
The `constructor` method is a special method for creating and initializing an object created with a class. You will learn more about it in the Object Oriented Programming section of the JavaScript Algorithms And Data Structures Certification.
إن طريقة `constructor` خاصة لإنشاء وتهيئة كائن منشئ بواسطة فئة. سوف تتعلم المزيد عنها في قسم البرمجة الكائنية في شهادة خوارزميات JavaScript وهياكل البيانات.
# --instructions--
Use the `class` keyword and write a `constructor` to create the `Vegetable` class.
استخدم مصطلح `class` واكتب `constructor` لإنشاء فئة `Vegetable`.
The `Vegetable` class allows you to create a vegetable object with a property `name` that gets passed to the `constructor`.
تتيح فئة `Vegetable` لك إنشاء كائن vegetable مع خاصية `name` التي تمرر إلى الـ `constructor`.
# --hints--
`Vegetable` should be a `class` with a defined `constructor` method.
يجب أن تكون`Vegetable` بنوع `class` مع وظيفة `constructor` محددة.
```js
assert(
@@ -63,13 +63,13 @@ assert(
);
```
The `class` keyword should be used.
يجب استخدام مصطلح `class`.
```js
assert(code.match(/class/g));
```
`Vegetable` should be able to be instantiated.
يجب أن يمثل `Vegetable`.
```js
assert(() => {
@@ -78,7 +78,7 @@ assert(() => {
});
```
`carrot.name` should return `carrot`.
يجب أن ينتج `carrot.name` قيمة `carrot`.
```js
assert(carrot.name == 'carrot');
@@ -1,6 +1,6 @@
---
id: 587d7fb0367417b2b2512bee
title: Start a Working Express Server
title: بدء سيرفر Express مُفعل
challengeType: 2
forumTopicId: 301519
dashedName: start-a-working-express-server
@@ -8,9 +8,9 @@ dashedName: start-a-working-express-server
# --description--
In the first two lines of the file `myApp.js`, you can see how easy it is to create an Express app object. This object has several methods, and you will learn many of them in these challenges. One fundamental method is `app.listen(port)`. It tells your server to listen on a given port, putting it in running state. For testing reasons, we need the app to be running in the background so we added this method in the `server.js` file for you.
في السطر الأول من الملف `myApp.js`، يمكنك أن ترى مدى سهولة إنشاء كائن تطبيق Express. هذا الكائن لديه العديد من الطرق، وسوف تتعلم الكثير منها في هذه التحديات. إحدى الطرق الأساسية هي `app.listen(port)`. إنه يخبر سيرفرك أن يستمع إلى منفذ (port) معين، وأن يضعه في حالة تشغيل. لأسباب الاختبار، نحن بحاجة إلى أن يكون التطبيق قيد التشغيل في الخلفية لذلك أضفنا لك هذه الطريقة في ملف `server.js`.
Let’s serve our first string! In Express, routes takes the following structure: `app.METHOD(PATH, HANDLER)`. METHOD is an http method in lowercase. PATH is a relative path on the server (it can be a string, or even a regular expression). HANDLER is a function that Express calls when the route is matched. Handlers take the form `function(req, res) {...}`, where req is the request object, and res is the response object. For example, the handler
هيا نمدد المقطع النصي الأول! في Express، تأخذ المسارات البنية التالية: `app.METHOD(PATH, HANDLER)`. إن METHOD طريقة http مكتوبة بحروف صغيرة. إن PATH المنفذ نسبي في السيرفر (يمكن أن يكون مقطع نصي أو حتى عبارة (expression) عادية). إن HANDLER وظيفة معالجة ينفذها Express عند مطابقة ال route. تكتب تلك الوظائف المعالجة مثل `function(req, res) {...}`، حيث req هو كائن الطلب، و res هو كائن الاستجابة. على سبيل المثال المعالج
```js
function(req, res) {
@@ -18,17 +18,17 @@ function(req, res) {
}
```
will serve the string 'Response String'.
سوف يمدد المقطع النصي 'Response String'.
# --instructions--
Use the `app.get()` method to serve the string "Hello Express" to GET requests matching the `/` (root) path. Be sure that your code works by looking at the logs, then see the results in the preview if you are using Replit.
استخدم طريقة `app.get()` لتمديد المقطع "Hello Express" إلى طلبات GET المطابقة للمسار `/` (منفذ المصدر). أنظر إلى السجلات لتتأكد من أن الكود يعمل، ثم شاهد النتائج في علامة تبويب preview إذا كنت تستخدم Replit.
**Note:** All the code for these lessons should be added in between the few lines of code we have started you off with.
**ملاحظة:** يجب إضافة كل الكود لهذه الدروس بين سطور الكود التي بدأنا بها.
# --hints--
Your app should serve the string 'Hello Express'
يجب أن يخدم تطبيقك المقطع النصي 'Hello Express'
```js
(getUserInput) =>
@@ -1,6 +1,6 @@
---
id: 587d7fb3367417b2b2512bfc
title: Add a Description to Your package.json
title: إضافة وصف (Description) إلى package.json
challengeType: 2
forumTopicId: 301522
dashedName: add-a-description-to-your-package-json
@@ -8,11 +8,11 @@ dashedName: add-a-description-to-your-package-json
# --description--
The next part of a good package.json file is the `description` field; where a short, but informative description about your project belongs.
إن الجزء التالي من ملف package.json الجيد يكون خانة `description`؛ حيث يوجد وصف قصير ولكن زاخر بالمعلومات حول مشروعك.
If some day you plan to publish a package to npm, this is the string that should sell your idea to the user when they decide whether to install your package or not. However, that’s not the only use case for the description, it’s a great way to summarize what a project does. It’s just as important in any Node.js project to help other developers, future maintainers or even your future self understand the project quickly.
إذا خطط في يوم ما أن تنشر حزمة إلى npm، فهذا هو المقطع النصي الذي يشرح فكرتك للمستخدمون عندما يقررون تثبيت حزمتك أو لا. بالإضافة هذا ليس الاستخدام الوحيد لذلك الوصف. إنه طريقة رائعة لتلخيص وظيفة المشروع. وأيضا في أي مشروع Node.js فهو مهما بنفس القدر لمساعدة المطورين الآخرين، أو المشرفين في المستقبل، أو حتى لفهمك الخاص للمشروع بسرعة.
Regardless of what you plan for your project, a description is definitely recommended. Here's an example:
بغض النظر عن ما تخطط لمشروعك، فإن الوصف موصى به بكل تأكيد. إليك مثال:
```json
"description": "A project that does something awesome",
@@ -20,13 +20,13 @@ Regardless of what you plan for your project, a description is definitely recomm
# --instructions--
Add a `description` to the package.json file of your project.
أضف خانة الوصف `description` إلى ملف package.json لمشروعك.
**Note:** Remember to use double-quotes for field-names (") and commas (,) to separate fields.
**ملاحظة:** تذكر أن تستخدم علامات الاقتباس المزدوجة لأسماء الخانات، (") والفواصل (,) للفصل ما بينهم.
# --hints--
package.json should have a valid "description" key
يجب أن يحتوي package.json على هوية "description" صحيحة
```js
(getUserInput) =>
@@ -1,6 +1,6 @@
---
id: 587d7fb4367417b2b2512bfe
title: Add a License to Your package.json
title: إضافة ترخيص (License) إلى package.json
challengeType: 2
forumTopicId: 301523
dashedName: add-a-license-to-your-package-json
@@ -8,9 +8,9 @@ dashedName: add-a-license-to-your-package-json
# --description--
The `license` field is where you inform users of what they are allowed to do with your project.
إن خانة `license` المكان الذي تقوم فيه بإبلاغ المستخدمين بما يسمح لهم بفعله بمشروعك.
Some common licenses for open source projects include MIT and BSD. License information is not required, and copyright laws in most countries will give you ownership of what you create by default. However, it’s always a good practice to explicitly state what users can and can’t do. Here's an example of the license field:
وتشمل بعض التراخيص الشائعة للمشاريع المفتوحة المصدر (open source) ترخيص معهد ماساتشوستس للتكنولوجيا (MIT) وبرنامج بي اس دي (BSD). معلومات الترخيص غير مطلوبة، وقوانين حقوق التأليف والنشر (copyright laws) في معظم البلدان ستعطيك ملكية لما تنشئه بشكل افتراضي. ولكن يستحسن دائما أن نذكر صراحة ما يمكن للمستخدمين القيام به وما لا يمكنهم القيام به. إليك مثال لخانة الترخيص:
```json
"license": "MIT",
@@ -18,11 +18,11 @@ Some common licenses for open source projects include MIT and BSD. License infor
# --instructions--
Fill the `license` field in the package.json file of your project as you find suitable.
املأ خانة `license` في ملف package.json لمشروعك بما تجده مناسبا.
# --hints--
package.json should have a valid "license" key
يجب أن يحتوي package.json على هوية "license" صحيحة
```js
(getUserInput) =>
@@ -1,6 +1,6 @@
---
id: 587d7fb4367417b2b2512bff
title: Add a Version to Your package.json
title: إضافة رقم الإصدار (Version) إلى package.json
challengeType: 2
forumTopicId: 301525
dashedName: add-a-version-to-your-package-json
@@ -8,7 +8,7 @@ dashedName: add-a-version-to-your-package-json
# --description--
A `version` is one of the required fields of your package.json file. This field describes the current version of your project. Here's an example:
إن `version` أحد الخانات المطلوبة في ملفك package.json. هذه الخانة تصف الإصدار الحالي من مشروعك. إليك مثال:
```json
"version": "1.2.0",
@@ -16,11 +16,11 @@ A `version` is one of the required fields of your package.json file. This field
# --instructions--
Add a `version` to the package.json file of your project.
أضف `version` إلى ملف package.json لمشروعك.
# --hints--
package.json should have a valid "version" key
يجب أن يحتوي package.json على هوية "version" صحيحة
```js
(getUserInput) =>
@@ -1,6 +1,6 @@
---
id: 587d7fb4367417b2b2512bfd
title: Add Keywords to Your package.json
title: إضافة المصطلحات (keywords) إلى package.json
challengeType: 2
forumTopicId: 301526
dashedName: add-keywords-to-your-package-json
@@ -8,23 +8,23 @@ dashedName: add-keywords-to-your-package-json
# --description--
The `keywords` field is where you can describe your project using related keywords. Here's an example:
يمكنك الإضافة في خانة `keywords` وصف لمشروعك باستخدام مصطلحات مرتبطة. إليك مثال:
```json
"keywords": [ "descriptive", "related", "words" ],
```
As you can see, this field is structured as an array of double-quoted strings.
كما ترون، هذه الخانة منظمة مثل قائمة من النصوص المزدوجة الاقتباس.
# --instructions--
Add an array of suitable strings to the `keywords` field in the package.json file of your project.
أضف قائمة من النصوص المقطعية المناسبة إلى خانة `keywords` في ملف package.json الخاص بمشروعك.
One of the keywords should be "freecodecamp".
وينبغي أن تكون إحدى المصطلحات "freecodecamp".
# --hints--
package.json should have a valid "keywords" key
يجب أن يحتوي package.json على هوية "keywords" صحيحة
```js
(getUserInput) =>
@@ -39,7 +39,7 @@ package.json should have a valid "keywords" key
);
```
"keywords" field should be an Array
يجب أن تكون خانة "keywords" قائمة
```js
(getUserInput) =>
@@ -54,7 +54,7 @@ package.json should have a valid "keywords" key
);
```
"keywords" should include "freecodecamp"
يجب أن تحتوي "keywords" على "freecodecamp"
```js
(getUserInput) =>
@@ -1,6 +1,6 @@
---
id: 587d7fb4367417b2b2512c00
title: Expand Your Project with External Packages from npm
title: توسيع مشروعك مع الحزم الخارجية من npm
challengeType: 2
forumTopicId: 301527
dashedName: expand-your-project-with-external-packages-from-npm
@@ -8,9 +8,9 @@ dashedName: expand-your-project-with-external-packages-from-npm
# --description--
One of the biggest reasons to use a package manager, is their powerful dependency management. Instead of manually having to make sure that you get all dependencies whenever you set up a project on a new computer, npm automatically installs everything for you. But how can npm know exactly what your project needs? Meet the `dependencies` section of your package.json file.
إحدى الأسباب الأكبر لاستخدام مدير الحزم هي إدارة تبعياتك القوية. بدلاً من أن تتأكد يدوياً أنك حصلت على جميع التبعيات كلما أعددت مشروع على جهاز كمبيوتر جديد، npm يقوم بتثبيت كل شيء لك تلقائياً. ولكن كيف يعرف npm احتياجات مشروعك بالضبط؟ تعرَّف إلى قسم التبعيات `dependencies` من ملف package.json الخاص بك.
In this section, packages your project requires are stored using the following format:
في هذا القسم، يخزن اسم الحزم الذي يتطلبها مشروعك باستخدام التنسيق التالي:
```json
"dependencies": {
@@ -22,13 +22,13 @@ In this section, packages your project requires are stored using the following f
# --instructions--
Add version "1.1.0" of the `@freecodecamp/example` package to the `dependencies` field of your `package.json` file.
ضف الإصدار "1.1.0" من حزمة `@freecodecamp/example` إلى خانة `dependencies` من ملف `package.json`.
**Note:** `@freecodecamp/example` is a faux package used as a learning tool.
**ملاحظة:** إن `@freecodecamp/example` حزمة زائفة تستخدم كأداة للتعلم.
# --hints--
`"dependencies"` should include `"@freecodecamp/example"`.
`"dependencies"` يجب أن تتضمن `"@freecodecamp/example"`.
```js
(getUserInput) =>
@@ -47,7 +47,7 @@ Add version "1.1.0" of the `@freecodecamp/example` package to the `dependencies`
);
```
`"@freecodecamp/example"` version should be `"1.1.0"`.
يجب أن يكون إصدار `"@freecodecamp/example"` بقيمة `"1.1.0"`.
```js
(getUserInput) =>
@@ -1,6 +1,6 @@
---
id: 587d7fb3367417b2b2512bfb
title: 'How to Use package.json, the Core of Any Node.js Project or npm Package'
title: 'استخدام package.json، مركز أي مشروع Node.js أو حزمة npm'
challengeType: 2
forumTopicId: 301528
dashedName: how-to-use-package-json-the-core-of-any-node-js-project-or-npm-package
@@ -8,25 +8,25 @@ dashedName: how-to-use-package-json-the-core-of-any-node-js-project-or-npm-packa
# --description--
Working on these challenges will involve you writing your code using one of the following methods:
العمل على هذه التحديات سوف ينطوي على كتابة كودك باستخدام إحدى الطرق التالية:
- Clone <a href="https://github.com/freeCodeCamp/boilerplate-npm/" target="_blank" rel="noopener noreferrer nofollow">this GitHub repo</a> and complete these challenges locally.
- Use <a href="https://replit.com/github/freeCodeCamp/boilerplate-npm" target="_blank" rel="noopener noreferrer nofollow">our Replit starter project</a> to complete these challenges.
- Use a site builder of your choice to complete the project. Be sure to incorporate all the files from our GitHub repo.
- انسخ <a href="https://github.com/freeCodeCamp/boilerplate-npm/" target="_blank" rel="noopener noreferrer nofollow"> هذا المستودع من GitHub</a> واكمل مشروعك محلياً.
- استخدم <a href="https://replit.com/github/freeCodeCamp/boilerplate-npm" target="_blank" rel="noopener noreferrer nofollow">مشروعنا المبدئي على Replit</a> لإكمال هذه التحديات.
- استخدم أي منشئ موقع لإكمال المشروع. تحقق انك أضفت جميع الملفات من مستودعنا في GitHub في مشروعك.
If you use Replit, follow these steps to set up the project:
إذا استخدمت Replit، اتبع هذه الخطوات لإعداد المشروع:
- Start by importing the project on Replit.
- Next, you will see a `.replit` window.
- Select `Use run command` and click the `Done` button.
- ابدأ باستيراد (import) المشروع إلى Replit.
- بعد ذلك، سترى نافذة `.replit`.
- اختار `Use run command` وانقر على زر `Done`.
When you are done, make sure a working demo of your project is hosted somewhere public. Then submit the URL to it in the Solution Link field.
عند الانتهاء، تأكد من استضافة ديمو لمشروعك في مكان عام. ثم أرسل عنوانه (URL) في خانة "رابط الحل".
The `package.json` file is the center of any Node.js project or npm package. It stores information about your project, similar to how the &lt;head> section of an HTML document describes the content of a webpage. It consists of a single JSON object where information is stored in key-value pairs. There are only two required fields; "name" and "version", but it’s good practice to provide additional information about your project that could be useful to future users or maintainers.
إن ملف `package.json` مركز أي مشروع Node.js أو حزمة npm. وإنه يخزن معلومات حول مشروعك، مثلما يخزن قسم &lt;head> من مستند HTML محتوى صفحة ويب. ويتكون من كائن JSON واحد حيث يتم تخزين المعلومات في أزواج key-value. وهناك مجالان مطلوبان فقط؛ "name" و "version"، ولكن الممارسة الجيدة هي أن تقدِّم معلومات إضافية عن مشروعك، التي يمكن أن تكون مفيدة للمستخدمين أو المشرفين في المستقبل.
If you look at the file tree of your project, you will find the package.json file on the top level of the tree. This is the file that you will be improving in the next couple of challenges.
إذا نظرت إلى شجرة ملف مشروعك، سوف تجد ملف package.json في أعلى مستوى من الشجرة. هذا هو الملف الذي سوف تحسنه في التحديات القادمة.
One of the most common pieces of information in this file is the `author` field. It specifies who created the project, and can consist of a string or an object with contact or other details. An object is recommended for bigger projects, but a simple string like the following example will do for this project.
واحدة من أكثر المعلومات شيوعا في هذا الملف هي خانة `author`. تحدد اسم منشئ المشروع، وممكن أن يتكون من مقطع نصي أو كائن مع جهة اتصال أو تفاصيل أخرى. يوصى باستخدام كائن لمشاريع أكبر، ولكن مقطع نصي بسيط مثل المثال التالي ينفع لهذا المشروع.
```json
"author": "Jane Doe",
@@ -34,13 +34,13 @@ One of the most common pieces of information in this file is the `author` field.
# --instructions--
Add your name as the `author` of the project in the package.json file.
أضف اسمك كمؤلف للمشروع بداخل `author` في ملف المشروع package.json.
**Note:** Remember that you’re writing JSON, so all field names must use double-quotes (") and be separated with a comma (,).
**ملاحظة:** تذكر أنك تكتب JSON، لذلك يجب أن تستخدم جميع أسماء الخانات علامات اقتباس مزدوجة (") وأن تكون مفصولة بفاصلة (,).
# --hints--
package.json should have a valid "author" key
يجب أن يحتوي package.json على هوية "author" صحيحة
```js
(getUserInput) =>
@@ -1,6 +1,6 @@
---
id: 587d7fb5367417b2b2512c01
title: Manage npm Dependencies By Understanding Semantic Versioning
title: إدارة اعتمادات npm بفهم بالإصدار الدلالي لنُسخ البرمجيات (Semantic Versioning)
challengeType: 2
forumTopicId: 301529
dashedName: manage-npm-dependencies-by-understanding-semantic-versioning
@@ -8,23 +8,23 @@ dashedName: manage-npm-dependencies-by-understanding-semantic-versioning
# --description--
`Versions` of the npm packages in the dependencies section of your package.json file follow what’s called Semantic Versioning (SemVer), an industry standard for software versioning aiming to make it easier to manage dependencies. Libraries, frameworks or other tools published on npm should use SemVer in order to clearly communicate what kind of changes projects can expect if they update.
تتبع القيم في `Versions` من حزم npm في قسم التبعيات من الحُزْمَة الخاصة بك. النظام الذي يسمى بالإصدار الدلالي لنُسخ البرمجيات Semantic Versioning (SemVer)، وهو نمط صناعي لإصدار البرامج يهدف إلى تيسير إدارة الاعتمادات. كل من المكتبات، أو الأطر أو الأدوات الأخرى المنشورة على npm ينبغي أن تستخدم SemVer من أجل الإبلاغ بوضوح عن نوع التغييرات التي يمكن أن تتوقعها المشروعات إذا تم تحديثها.
Knowing SemVer can be useful when you develop software that uses external dependencies (which you almost always do). One day, your understanding of these numbers will save you from accidentally introducing breaking changes to your project without understanding why things that worked yesterday suddenly don’t work today. This is how Semantic Versioning works according to the official website:
معرفة SemVer مفيدة عند تطوير البرامج التي تستخدم التبعية الخارجية (التي تكاد تقوم بها دائما). يوما ما، فهمك لهذه الأرقام سوف يحفظك من إدخال تغييرات على مشروعك عن طريق الخطأ دون تفهم لماذا لا تعمل فجأة اليوم الأشياء التي عملت بالأمس. هذه هي الطريقة التي تعمل بها Semantic Versioning وفقا للموقع الرسمي على الإنترنت:
```json
"package": "MAJOR.MINOR.PATCH"
```
The MAJOR version should increment when you make incompatible API changes. The MINOR version should increment when you add functionality in a backwards-compatible manner. The PATCH version should increment when you make backwards-compatible bug fixes. This means that PATCHes are bug fixes and MINORs add new features but neither of them break what worked before. Finally, MAJORs add changes that won’t work with earlier versions.
يجب أن يزداد رَقَم الإصدار MAJOR عند إجراء تغييرات API غير متوافقة. يجب أن يزداد رَقَم إصدار MINOR عند إضافة وظيفة بطريقة متوافقة رجعياً. يجب أن يزداد رَقَم الإصدار PATCH عند إجراء تصليحات للأخطاء متوافقة رجعيا. وهذا يعني أن PATCHES هي إصلاحات للأخطاء و MINORs تضيف ميزات جديدة ولكن كلا منهما لا يكسر ما كان يعمل من قبل. وأخيراً، يضيف MAJORs تغييرات لن تعمل مع الإصدارات السابقة.
# --instructions--
In the dependencies section of your `package.json` file, change the version of `@freecodecamp/example` to match MAJOR version 1, MINOR version 2 and PATCH version 13
في قسم التبعيات من ملف الحزمة `package.json`، غيّر إصدار `@freecodecamp/example` لمطابقة قيمة إصدار 1 بنوع MAJOR وإصدار 2 بنوع MINOR وإصدار 13 بنوع PATCH
# --hints--
`"dependencies"` should include `"@freecodecamp/example"`.
يجب أن تتضمن `"dependencies"` مقطع `"@freecodecamp/example"`.
```js
(getUserInput) =>
@@ -43,7 +43,7 @@ In the dependencies section of your `package.json` file, change the version of `
);
```
`"@freecodecamp/example"` version should be `"1.2.13"`.
يجب أن يكون إصدار `"@freecodecamp/example"` بقيمة `"1.2.13"`.
```js
(getUserInput) =>
@@ -1,6 +1,6 @@
---
id: 587d7fb5367417b2b2512c04
title: Remove a Package from Your Dependencies
title: إزالة حزمة (Package) من تبعياتك (Dependency)
challengeType: 2
forumTopicId: 301530
dashedName: remove-a-package-from-your-dependencies
@@ -8,21 +8,21 @@ dashedName: remove-a-package-from-your-dependencies
# --description--
You have now tested a few ways you can manage dependencies of your project by using the package.json's dependencies section. You have also included external packages by adding them to the file and even told npm what types of versions you want, by using special characters such as the tilde or the caret.
لقد اختبرت الآن بعض الطرق الذي يمكنك بها إدارة التبعيات لمشروعك باستخدام قسم التبعيات في package.json. لقد قمت أيضا بإدراج حزم خارجية عن طريق إضافتها إلى الملف وأخبرت npm ما هي أنواع الإصدارات التي تريدها، باستخدام أحرف خاصة مثل tilde (~) أو caret (^).
But what if you want to remove an external package that you no longer need? You might already have guessed it, just remove the corresponding key-value pair for that package from your dependencies.
ولكن ماذا لو أردت إزالة حزمة خارجية لم تعد بحاجة إليها؟ ربما قد خمنتها فعلًا، عليك فقط أن تزيل زوج key-value المقابل لتلك الحزمة من تبعياتك (dependencies).
This same method applies to removing other fields in your package.json as well.
تنطبق نفس الطريقة على إزالة الخانات الأخرى في package.json أيضا.
# --instructions--
Remove the `@freecodecamp/example` package from your dependencies.
أزل حزمة `@freecodecamp/example` من تبعياتك.
**Note:** Make sure you have the right amount of commas after removing it.
**ملاحظة:** تأكد من أن لديك العدد الصحيح من الفواصل بعد إزالتها.
# --hints--
`"dependencies"` should not include `"@freecodecamp/example"`.
يجب ألا تتضمن `"dependencies"` مقطع `"@freecodecamp/example"`.
```js
(getUserInput) =>
@@ -1,6 +1,6 @@
---
id: 587d7fb5367417b2b2512c03
title: Use the Caret-Character to Use the Latest Minor Version of a Dependency
title: استخدم رمز Caret لاستخدام أحدث نسخة ثانوي من التبعية
challengeType: 2
forumTopicId: 301531
dashedName: use-the-caret-character-to-use-the-latest-minor-version-of-a-dependency
@@ -8,25 +8,25 @@ dashedName: use-the-caret-character-to-use-the-latest-minor-version-of-a-depende
# --description--
Similar to how the tilde we learned about in the last challenge allows npm to install the latest PATCH for a dependency, the caret (`^`) allows npm to install future updates as well. The difference is that the caret will allow both MINOR updates and PATCHes.
شبيهة بالطريقة التي تعلمنا بها عن tilde في التحدي الأخير وكيف يسمح لـ npm بتثبيت أحدث PATCH للاعتماد، يسمح رمز caret (`^`) إلى npm تثبيت التحديثات المستقبلية أيضًا. إن الفرق سيسمح رمز caret لكل من التحديثات من MINOR و PATCH.
Your current version of `@freecodecamp/example` should be "~1.2.13" which allows npm to install to the latest 1.2.x version. If you were to use the caret (^) as a version prefix instead, npm would be allowed to update to any 1.x.x version.
يجب أن يكون إصدار `@freecodecamp/example` الخاص بك الحالي من "~1.2.13" الذي يسمح npm بتثبيت أحدث إصدار 1.2.x. إذا كنت ستستخدم caret (^) كبادئة إصدار بدلاً من ذلك، سيسمح لـ npm بالتحديث إلى أي إصدار x.x.1.
```json
"package": "^1.3.8"
```
This would allow updates to any 1.x.x version of the package.
وهذا سيسمح بالتحديث إلى إي نسخة 1.x.x من الحزمة.
# --instructions--
Use the caret (`^`) to prefix the version of `@freecodecamp/example` in your dependencies and allow npm to update it to any new MINOR release.
استخدم رمز (`^`) لبادئة رَقَم إصدار `@freecodecamp/example` في تبعياتك (dependencies). ذلك يسمح ل npm بتحديثها إلى أي إصدار جديد نوع MINOR.
**Note:** The version numbers themselves should not be changed.
**ملاحظة:** لا تغيير أرقام الإصدار نفسها.
# --hints--
`"dependencies"` should include `"@freecodecamp/example"`.
يجب أن تتضمن `"dependencies"` مقطع `"@freecodecamp/example"`.
```js
(getUserInput) =>
@@ -45,7 +45,7 @@ Use the caret (`^`) to prefix the version of `@freecodecamp/example` in your dep
);
```
`"@freecodecamp/example"` version should match `"^1.x.x"`.
يجب أن تطابق `"@freecodecamp/example"` إصدارها `"^1.x.x"`.
```js
(getUserInput) =>
@@ -1,6 +1,6 @@
---
id: 587d7fb5367417b2b2512c02
title: Use the Tilde-Character to Always Use the Latest Patch Version of a Dependency
title: استخدم رمز Tilde لاستخدام أحدث نسخة patch من التبعية دائما
challengeType: 2
forumTopicId: 301532
dashedName: use-the-tilde-character-to-always-use-the-latest-patch-version-of-a-dependency
@@ -8,9 +8,9 @@ dashedName: use-the-tilde-character-to-always-use-the-latest-patch-version-of-a-
# --description--
In the last challenge, you told npm to only include a specific version of a package. That’s a useful way to freeze your dependencies if you need to make sure that different parts of your project stay compatible with each other. But in most use cases, you don’t want to miss bug fixes since they often include important security patches and (hopefully) don’t break things in doing so.
في التحدي الأخير، أخبرت npm أن يتضمن نسخة محددة فقط من الحزمة. هذه طريقة مفيدة لتجميد التبعية إذا كنت بحاجة إلى التأكد من أن أجزاء مختلفة من مشروعك تبقى متوافقة مع بعضها البعض. ولكن في معظم حالات الاستخدام، لا ترد أن تفوتك إصلاحات الأخطاء لأنها غالباً ما تتضمن التصحيحات الأمنية الهامة ومن الآمل أنها لا تتسبب لتخريب تطبيقك بذلك.
To allow an npm dependency to update to the latest PATCH version, you can prefix the dependency’s version with the tilde (`~`) character. Here's an example of how to allow updates to any 1.3.x version.
للسماح للتبعية npm للتحديث إلى أحدث إصدار PATCH، يمكنك أن تضيف رمز (`~`) في بداية الإصدار للتبعية. إليك مثال على كيفية السماح بالتحديثات لأي إصدار 1.3.x.
```json
"package": "~1.3.8"
@@ -18,15 +18,15 @@ To allow an npm dependency to update to the latest PATCH version, you can prefix
# --instructions--
In the package.json file, your current rule for how npm may upgrade `@freecodecamp/example` is to use a specific version (1.2.13). But now, you want to allow the latest 1.2.x version.
في ملف package.json، القاعدة الحالية لكيفية لترقية `@freecodecamp/example` بواسطة npm هي استخدام إصدار محدد (1.2.13). لكن الآن، تريد أن تسمح بأحدث إصدار 1.2.x.
Use the tilde (`~`) character to prefix the version of `@freecodecamp/example` in your dependencies, and allow npm to update it to any new _patch_ release.
استخدم رمز (`~`) لبادئة رقم إصدار `@freecodecamp/example` في تبعياتك (dependencies). ذلك يسمح ل npm بتحديثها إلى أي إصدار _patch_ جديد.
**Note:** The version numbers themselves should not be changed.
**ملاحظة:** لا تغيير أرقام الإصدار نفسها.
# --hints--
`"dependencies"` should include `"@freecodecamp/example"`.
يجب أن تتضمن `"dependencies"` مقطع `"@freecodecamp/example"`.
```js
(getUserInput) =>
@@ -45,7 +45,7 @@ Use the tilde (`~`) character to prefix the version of `@freecodecamp/example` i
);
```
`"@freecodecamp/example"` version should match `"~1.2.13"`.
يجب أن تطابق `"@freecodecamp/example"` إصدارها `"~1.2.13"`.
```js
(getUserInput) =>
@@ -19,7 +19,7 @@ You will be <a href="https://replit.com/github/freeCodeCamp/boilerplate-budget-a
Complete the `Category` class in `budget.py`. It should be able to instantiate objects based on different budget categories like *food*, *clothing*, and *entertainment*. When objects are created, they are passed in the name of the category. The class should have an instance variable called `ledger` that is a list. The class should also contain the following methods:
- A `deposit` method that accepts an amount and description. If no description is given, it should default to an empty string. The method should append an object to the ledger list in the form of `{"amount": amount, "description": description}`.
- A `deposit` method that accepts an amount and description. If no description is given, it should default to an empty string. يجب أن تضيف الوظيفة كائنً (object) إلى ledgerList بهذا الشكل `{"amount": amount, "description": description}`.
- A `withdraw` method that is similar to the `deposit` method, but the amount passed in should be stored in the ledger as a negative number. If there are not enough funds, nothing should be added to the ledger. This method should return `True` if the withdrawal took place, and `False` otherwise.
- A `get_balance` method that returns the current balance of the budget category based on the deposits and withdrawals that have occurred.
- A `transfer` method that accepts an amount and another budget category as arguments. The method should add a withdrawal with the amount and the description "Transfer to [Destination Budget Category]". The method should then add a deposit to the other budget category with the amount and the description "Transfer from [Source Budget Category]". If there are not enough funds, nothing should be added to either ledgers. This method should return `True` if the transfer took place, and `False` otherwise.
@@ -47,32 +47,33 @@ assert(typeof farey === 'function');
assert(Array.isArray(farey(3)));
```
`farey(3)` should return `["1/3","1/2","2/3"]`
`farey(3)` should return `['0/1','1/3','1/2','2/3','1/1']`
```js
assert.deepEqual(farey(3), ['1/3', '1/2', '2/3']);
assert.deepEqual(farey(3),['0/1', '1/3', '1/2', '2/3', '1/1']);
```
`farey(4)` should return `["1/4","1/3","1/2","2/4","2/3","3/4"]`
`farey(4)` should return `['0/1','1/4','1/3','1/2','2/3','3/4','1/1']`
```js
assert.deepEqual(farey(4), ['1/4', '1/3', '1/2', '2/4', '2/3', '3/4']);
assert.deepEqual(farey(4), ['0/1', '1/4', '1/3', '1/2', '2/3', '3/4', '1/1']);
```
`farey(5)` should return `["1/5","1/4","1/3","2/5","1/2","2/4","3/5","2/3","3/4","4/5"]`
`farey(5)` should return `['0/1','1/5','1/4','1/3','2/5','1/2','3/5','2/3','3/4','4/5','1/1']`
```js
assert.deepEqual(farey(5), [
'0/1',
'1/5',
'1/4',
'1/3',
'2/5',
'1/2',
'2/4',
'3/5',
'2/3',
'3/4',
'4/5'
'4/5',
'1/1'
]);
```
@@ -89,21 +90,17 @@ function farey(n) {
# --solutions--
```js
function farey(n){
let farSeq=[];
for(let den = 1; den <= n; den++){
for(let num = 1; num < den; num++){
farSeq.push({
str:num+"/"+den,
val:num/den});
}
function farey(n) {
const sequence = [{ string: "0/1", float: 0.0 }];
for (let i = 1; i < n; i++) {
for (let j = n; j >= i; j--) {
if (i === 1 || j % i > 0) {
sequence.push({ string: `${i}/${j}`, float: i / j });
}
}
farSeq.sort(function(a,b){
return a.val-b.val;
});
farSeq=farSeq.map(function(a){
return a.str;
});
return farSeq;
}
return sequence
.sort((a, b) => a.float - b.float)
.map(e => e.string)
}
```
@@ -0,0 +1,204 @@
---
id: 6391d1a4f7ac71efd0621380
title: Build a Recipe Page Project
challengeType: 14
dashedName: project-create-a-recipe-page
---
# --description--
The website will consist of a main index page which will have links to a few recipes. The website won’t look very pretty by the time you’ve finished.
**User Stories:**
1. Your recipe page should contain a `DOCTYPE` tag.
1. Your recipe page should include an `html` element with a `head` and `body` element as children.
1. You should have a `title` element within the `head` element with the text `The Odin Recipes`.
1. You should see an `h1` element that has the text `Creamy Chocolate Fudge`.
1. You should see an image with the url `*placeholder-fcc-cdn*` with a fitting `alt` text.
1. There should be an `h2` element with the text `Description` under the image.
1. You should see a couple of paragraphs under `Description` that describe the recipe.
1. There should be an `h2` element with the text `Ingredients`
1. Under the `Ingredients` heading there should be an unordered list with the ingredients needed for the recipe.
1. Under the list of ingredients add another heading called `Steps`.
1. You should see an ordered list with a couple of steps needed to complete the recipe.
1. Under the steps there should be an `h2` element with the text `More Recipes`
1. You should see a couple of links to other recipes inside an unordered list which has a couple of list items with anchor elements within.
1. These anchor elements should have `href` attribute with the value set to `#`
# --hints--
You should have a `DOCTYPE` tag.
```js
assert(code.match(/<!DOCTYPE\s+?html\s*?>/gi));
```
You should have a `html` element with `head` and `body` element.
```js
const html = document.querySelectorAll('html')[0];
const head = document.querySelectorAll('html > head')[0];
const body = document.querySelectorAll('html > body')[0];
assert(html && head && body);
```
You should have a `title` element within the `head` element that contains the text `The Odin Recipes`.
```js
assert(document.querySelectorAll('HEAD > TITLE')[0].innerText == 'The Odin Recipes');
```
You should have a `h1` element within your `body` element that contains the text `Creamy Chocolate Fudge`.
```js
assert(document.querySelectorAll('BODY > H1')[0].innerText == 'Creamy Chocolate Fudge');
```
You should have an image with the url `*placeholder-fcc-cdn*` with an `alt` attribute that has a fitting text.
```js
const img = document.querySelectorAll('IMG')[0];
assert(img && img.alt !='' && img.src === 'https://i.imgur.com/p0J5baJ.jpg')
```
You should have an `h2` element with the text `Description`.
```js
const h2 = document.querySelectorAll('H2')[0];
assert(h2.innerText == 'Description');
```
You should have at least two `p` elements describing the recipe.
```js
const paragraphs = document.querySelectorAll('P');
assert(paragraphs.length > 1);
```
You should have an `h2` element with the text `Ingredients`.
```js
const h2 = document.querySelectorAll('H2')[1];
assert(h2.innerText == 'Ingredients');
```
You should have an unordered list `<ul>` with some ingredients as the list items `<li>`.
```js
const unorderedList = document.querySelectorAll('UL')[0];
const listItems = document.querySelectorAll('UL > LI');
assert(unorderedList && listItems && listItems.length > 1);
```
You should have an `h2` element with the text `Steps`.
```js
const h2 = document.querySelectorAll('H2')[2];
assert(h2.innerText == 'Steps');
```
You should have a `<ol>` with the the steps as the list items `<li>`.
```js
const orderedList = document.querySelectorAll('OL')[0];
const listItems = document.querySelectorAll('OL > LI');
assert(orderedList && listItems && listItems.length > 1);
```
You should have an `h2` element with the text `More Recipes`.
```js
const h2 = document.querySelectorAll('H2')[3];
assert(h2.innerText == 'More Recipes');
```
You should have an unordered list `<ul>` element with list items `<li>` that contain `<a>` tags which lead to other recipes.
```js
const unorderedList = document.querySelectorAll('UL')[1];
const listItems = unorderedList.querySelectorAll('LI');
const allAreListItems = unorderedList.children.length == listItems.length;
const containsAnchors = [...listItems].every(function(listItem) {
return listItem.querySelector("a") !== null;
});
assert(unorderedList && allAreListItems && containsAnchors && listItems.length > 1);
```
Your anchor tags linking to the recipes should have a `href` attribute with the value set to `#`
```js
const anchorTags = document.querySelectorAll("a");
const allAnchorsHaveHrefHash = [...anchorTags].every(function(anchorTag) {
return anchorTag.hasAttribute("href") && anchorTag.getAttribute("href") === "#";
});
assert(allAnchorsHaveHrefHash && anchorTags.length > 0);
```
# --seed--
## --seed-contents--
```html
```
```css
```
## --solutions--
```html
<!DOCTYPE html>
<html>
<head>
<title>The Odin Recipes</title>
</head>
<body>
<h1>Creamy Chocolate Fudge</h1>
<img src="https://i.imgur.com/p0J5baJ.jpg" alt="A delicious chocolate fudge dessert">
<h2>Description</h2>
<p>This recipe is for a rich and creamy chocolate fudge that is sure to satisfy your sweet tooth. It's perfect for a special occasion or as a tasty treat for any time of the year.</p>
<p>This recipe is easy to follow and only requires a few simple ingredients. With just a few steps, you'll be able to create a delicious dessert that everyone will love.</p>
<h2>Ingredients</h2>
<ul>
<li>1 cup sugar</li>
<li>1/2 cup unsalted butter</li>
<li>1/4 cup milk</li>
<li>1/4 cup cocoa powder</li>
<li>1/4 cup chocolate chips</li>
<li>1/4 tsp salt</li>
<li>1 tsp vanilla extract</li>
</ul>
<h2>Steps</h2>
<ol>
<li>In a medium saucepan, melt the butter over medium heat.</li>
<li>Add the sugar, milk, cocoa powder, and salt to the saucepan and stir until well combined.</li>
<li>Bring the mixture to a boil, stirring constantly, and then reduce the heat to low and simmer for 5 minutes.</li>
<li>Remove the saucepan from the heat and stir in the chocolate chips and vanilla extract until the chocolate is melted and the mixture is smooth.</li>
<li>Pour the fudge into a greased 8-inch square pan and let it cool completely before cutting into squares.</li>
</ol>
<h2>More Recipes</h2>
<ul>
<li><a href="#">Peanut Butter Cookies</a></li>
<li><a href="#">Lemon Bars</a></li>
<li><a href="#">Chocolate Chip Pancakes</a></li>
</ul>
</body>
</html>
```
@@ -7,11 +7,13 @@ dashedName: step-15
# --description--
قم بتحويل الصورة إلى رابط عن طريق احاطتها بـ tags العنصر الضرورية. استخدم `https://freecatphotoapp.com` كقيمة السمة `href`.
In previous steps you used an anchor element to turn text into a link. Other types of content can also be turned into a link by wrapping it in anchor tags.
Turn the image into a link by surrounding it with necessary element tags. Use `https://freecatphotoapp.com` as the anchor's `href` attribute value.
# --hints--
يجب أن يكون لديك عنصر `img` بقيمة `src` من `https://cdn.freecodecamp.org/curriculum/cat-photo-app/relaxing-cat.jpg`. ربما قمت بحذفها عن طريق الخطأ.
You should have an `img` element with an `src` value of `https://cdn.freecodecamp.org/curriculum/cat-photo-app/relaxing-cat.jpg`. You may have accidentally deleted it.
```js
assert(
@@ -21,37 +23,37 @@ assert(
);
```
يجب أن يحتوي العنصر (`a`) على opening tag. Opening tags تكتب هكذا: `<elementName>`.
Your anchor (`a`) element should have an opening tag. Opening tags have this syntax: `<elementName>`.
```js
assert(document.querySelectorAll('a').length >= 2);
```
يجب عليك إضافة opening tag واحد فقط للـ (`a`). الرجاء إزالة أي زيادات.
You should only add one opening anchor (`a`) tag. Please remove any extras.
```js
assert(document.querySelectorAll('a').length === 2);
```
يجب أن يحتوي العنصر (`a`) على closing tag. Closing tags لها `/` مباشرة بعد رمز `<`.
Your anchor (`a`) element should have a closing tag. Closing tags have a `/` just after the `<` character.
```js
assert(code.match(/<\/a>/g).length >= 2);
```
يجب عليك إضافة closing tag واحد فقط للـ (`a`). الرجاء إزالة أي زيادات.
You should only add one closing anchor (`a`) tag. Please remove any extras.
```js
assert(code.match(/<\/a>/g).length === 2);
```
عنصر (`a`) الخاص بك ليس لديه سمة `href`. تحقق من وجود مسافة بعد اسم الـ opening tag و/أو ان هناك مسافات قبل جميع أسماء السمات.
Your anchor (`a`) element does not have an `href` attribute. Check that there is a space after the opening tag's name and/or there are spaces before all attribute names.
```js
assert(document.querySelector('a').hasAttribute('href'));
```
(`a`) الخاص بك يجب أن يحيل الي `https://freecatphotoapp.com`. إما أنك حذفت الـ URL أو لديك خطأ إملائي.
Your anchor (`a`) element should link to `https://freecatphotoapp.com`. You have either omitted the URL or have a typo.
```js
assert(
@@ -60,7 +62,7 @@ assert(
);
```
يجب أن يكون عنصر `img` الخاص بك متداخلا داخل عنصر الرابط (`a`). يجب أن يكون عنصر `img` بأكمله داخل الـ opening و الـ closing tags لعنصر الرابط (`a`).
Your `img` element should be nested within the anchor (`a`) element. The entire `img` element should be inside the opening and closing tags of the anchor (`a`) element.
```js
assert(document.querySelector('img').parentNode.nodeName === 'A');
@@ -55,6 +55,12 @@ assert.deepStrictEqual(
);
```
You should only have one `ol` element.
```js
assert([...document.querySelectorAll('ol')].length == 1);
```
# --seed--
## --seed-contents--
@@ -22,7 +22,7 @@ assert(
);
```
زر الراديو الأول مفتقد لسمة `checked`.
Your first radio button, with the `id` set to `indoor`, should have the `checked` attribute.
```js
assert($('input[type="radio"]')[0].hasAttribute('checked'));
@@ -7,7 +7,7 @@ dashedName: step-43
# --description--
بعد آخر عنصر `.divider`، أنشئ عنصر `p` وأعطيه النص `Total Fat 8g 10%`. قم بتغليف `Total Fat` في `span` مع `class` تم تعيينه إلى `bold`. غلف `10%` داخل عنصر `span` مع `class` بقيمة `bold`. Finally, nest the `Total Fat` `span` element and the text `8g` in an additional `span` element for alignment.
بعد آخر عنصر `.divider`، أنشئ عنصر `p` وأعطيه النص `Total Fat 8g 10%`. قم بتغليف `Total Fat` في `span` مع `class` تم تعيينه إلى `bold`. غلف `10%` داخل عنصر `span` مع `class` بقيمة `bold`. أخيراً، أدخل عنصر `span` الذي يحتوي على نص `Total Fat` مع نص `8g` في عنصر `span` إضافي للمحاذاة.
# --hints--
@@ -7,7 +7,7 @@ dashedName: step-53
# --description--
بعد آخر `.divider`، قم بإنشاء عنصر `p` آخر مع النص `Cholesterol 0mg 0%`. قم بتغليف النص `Cholesterol` في عنصر `span`، واعطي عنصر `span` هذا السمة `class` بقيمة `bold`. غلف نص `0%` داخل `span` أخرى، مع `class` بقيمة `bold`. Finally, nest the `Cholesterol` and `0mg` span elements inside an additional span element for alignment.
بعد آخر `.divider`، قم بإنشاء عنصر `p` آخر مع النص `Cholesterol 0mg 0%`. قم بتغليف النص `Cholesterol` في عنصر `span`، واعطي عنصر `span` هذا السمة `class` بقيمة `bold`. غلف نص `0%` داخل `span` أخرى، مع `class` بقيمة `bold`. Finally, nest the `Cholesterol` and `0mg` `span` elements inside an additional `span` element for alignment.
# --hints--
@@ -10,9 +10,9 @@ dashedName: use-class-syntax-to-define-a-constructor-function
ES6 提供了一個新的創建對象的語法,使用關鍵字 <dfn>class</dfn>。
In ES5, an object can be created by defining a `constructor` function and using the `new` keyword to instantiate the object.
在 ES5 裏面,我們通過定義一個函數 `constructor` 來創建一個對象,然後使用 `new` 關鍵字來實例化對象。
In ES6, a `class` declaration has a `constructor` method that is invoked with the `new` keyword. If the `constructor` method is not explicitly defined, then it is implicitly defined with no arguments.
在 ES6 裏,`class` 聲明有一個 `constructor` 方法,與 `new` 關鍵字一起被調用。 如果 `constructor` 方法沒有明確定義,那麼它就被含蓄地定義爲沒有參數。
```js
// Explicit constructor
@@ -41,21 +41,21 @@ const atlas = new Rocket();
atlas.launch();
```
It should be noted that the `class` keyword declares a new function, to which a constructor is added. This constructor is invoked when `new` is called to create a new object.
應該注意 `class` 關鍵字聲明瞭一個新的函數,裏面添加了一個構造函數。 當用 `new` 創建一個新的對象時,構造函數會被調用。
**Note:** UpperCamelCase should be used by convention for ES6 class names, as in `SpaceShuttle` used above.
**注意:**首字母大寫駝峯命名法 UpperCamelCase 是 ES6 class 命名的慣例,就像上面的 `SpaceShuttle`。
The `constructor` method is a special method for creating and initializing an object created with a class. You will learn more about it in the Object Oriented Programming section of the JavaScript Algorithms And Data Structures Certification.
`constructor` 方法是一個特殊方法,用於創建和初始化 class 創建的對象。 在 JavaScript 算法和數據結構認證的面向對象編程章節裏會更深入介紹它。
# --instructions--
Use the `class` keyword and write a `constructor` to create the `Vegetable` class.
使用 `class` 關鍵詞,寫一個 `constructor` 來創建 `Vegetable` class。
The `Vegetable` class allows you to create a vegetable object with a property `name` that gets passed to the `constructor`.
`Vegetable` 這個 class 可以創建 vegetable 對象,這個對象擁有一個在 `constructor` 中賦值的 `name` 屬性。
# --hints--
`Vegetable` should be a `class` with a defined `constructor` method.
`Vegetable` 應該是一個 `class`,並在其中定義了 `constructor` 方法。
```js
assert(
@@ -63,13 +63,13 @@ assert(
);
```
The `class` keyword should be used.
應使用 `class` 關鍵字。
```js
assert(code.match(/class/g));
```
`Vegetable` should be able to be instantiated.
`Vegetable` 可以被實例化。
```js
assert(() => {
@@ -78,7 +78,7 @@ assert(() => {
});
```
`carrot.name` should return `carrot`.
`carrot.name` 應該返回 `carrot`。
```js
assert(carrot.name == 'carrot');
@@ -47,32 +47,33 @@ assert(typeof farey === 'function');
assert(Array.isArray(farey(3)));
```
`farey(3)` should return `["1/3","1/2","2/3"]`
`farey(3)` should return `['0/1','1/3','1/2','2/3','1/1']`
```js
assert.deepEqual(farey(3), ['1/3', '1/2', '2/3']);
assert.deepEqual(farey(3),['0/1', '1/3', '1/2', '2/3', '1/1']);
```
`farey(4)` should return `["1/4","1/3","1/2","2/4","2/3","3/4"]`
`farey(4)` should return `['0/1','1/4','1/3','1/2','2/3','3/4','1/1']`
```js
assert.deepEqual(farey(4), ['1/4', '1/3', '1/2', '2/4', '2/3', '3/4']);
assert.deepEqual(farey(4), ['0/1', '1/4', '1/3', '1/2', '2/3', '3/4', '1/1']);
```
`farey(5)` should return `["1/5","1/4","1/3","2/5","1/2","2/4","3/5","2/3","3/4","4/5"]`
`farey(5)` should return `['0/1','1/5','1/4','1/3','2/5','1/2','3/5','2/3','3/4','4/5','1/1']`
```js
assert.deepEqual(farey(5), [
'0/1',
'1/5',
'1/4',
'1/3',
'2/5',
'1/2',
'2/4',
'3/5',
'2/3',
'3/4',
'4/5'
'4/5',
'1/1'
]);
```
@@ -89,21 +90,17 @@ function farey(n) {
# --solutions--
```js
function farey(n){
let farSeq=[];
for(let den = 1; den <= n; den++){
for(let num = 1; num < den; num++){
farSeq.push({
str:num+"/"+den,
val:num/den});
}
function farey(n) {
const sequence = [{ string: "0/1", float: 0.0 }];
for (let i = 1; i < n; i++) {
for (let j = n; j >= i; j--) {
if (i === 1 || j % i > 0) {
sequence.push({ string: `${i}/${j}`, float: i / j });
}
}
farSeq.sort(function(a,b){
return a.val-b.val;
});
farSeq=farSeq.map(function(a){
return a.str;
});
return farSeq;
}
return sequence
.sort((a, b) => a.float - b.float)
.map(e => e.string)
}
```
@@ -0,0 +1,204 @@
---
id: 6391d1a4f7ac71efd0621380
title: Build a Recipe Page Project
challengeType: 14
dashedName: project-create-a-recipe-page
---
# --description--
The website will consist of a main index page which will have links to a few recipes. The website won’t look very pretty by the time you’ve finished.
**User Stories:**
1. Your recipe page should contain a `DOCTYPE` tag.
1. Your recipe page should include an `html` element with a `head` and `body` element as children.
1. You should have a `title` element within the `head` element with the text `The Odin Recipes`.
1. You should see an `h1` element that has the text `Creamy Chocolate Fudge`.
1. You should see an image with the url `*placeholder-fcc-cdn*` with a fitting `alt` text.
1. There should be an `h2` element with the text `Description` under the image.
1. You should see a couple of paragraphs under `Description` that describe the recipe.
1. There should be an `h2` element with the text `Ingredients`
1. Under the `Ingredients` heading there should be an unordered list with the ingredients needed for the recipe.
1. Under the list of ingredients add another heading called `Steps`.
1. You should see an ordered list with a couple of steps needed to complete the recipe.
1. Under the steps there should be an `h2` element with the text `More Recipes`
1. You should see a couple of links to other recipes inside an unordered list which has a couple of list items with anchor elements within.
1. These anchor elements should have `href` attribute with the value set to `#`
# --hints--
You should have a `DOCTYPE` tag.
```js
assert(code.match(/<!DOCTYPE\s+?html\s*?>/gi));
```
You should have a `html` element with `head` and `body` element.
```js
const html = document.querySelectorAll('html')[0];
const head = document.querySelectorAll('html > head')[0];
const body = document.querySelectorAll('html > body')[0];
assert(html && head && body);
```
You should have a `title` element within the `head` element that contains the text `The Odin Recipes`.
```js
assert(document.querySelectorAll('HEAD > TITLE')[0].innerText == 'The Odin Recipes');
```
You should have a `h1` element within your `body` element that contains the text `Creamy Chocolate Fudge`.
```js
assert(document.querySelectorAll('BODY > H1')[0].innerText == 'Creamy Chocolate Fudge');
```
You should have an image with the url `*placeholder-fcc-cdn*` with an `alt` attribute that has a fitting text.
```js
const img = document.querySelectorAll('IMG')[0];
assert(img && img.alt !='' && img.src === 'https://i.imgur.com/p0J5baJ.jpg')
```
You should have an `h2` element with the text `Description`.
```js
const h2 = document.querySelectorAll('H2')[0];
assert(h2.innerText == 'Description');
```
You should have at least two `p` elements describing the recipe.
```js
const paragraphs = document.querySelectorAll('P');
assert(paragraphs.length > 1);
```
You should have an `h2` element with the text `Ingredients`.
```js
const h2 = document.querySelectorAll('H2')[1];
assert(h2.innerText == 'Ingredients');
```
You should have an unordered list `<ul>` with some ingredients as the list items `<li>`.
```js
const unorderedList = document.querySelectorAll('UL')[0];
const listItems = document.querySelectorAll('UL > LI');
assert(unorderedList && listItems && listItems.length > 1);
```
You should have an `h2` element with the text `Steps`.
```js
const h2 = document.querySelectorAll('H2')[2];
assert(h2.innerText == 'Steps');
```
You should have a `<ol>` with the the steps as the list items `<li>`.
```js
const orderedList = document.querySelectorAll('OL')[0];
const listItems = document.querySelectorAll('OL > LI');
assert(orderedList && listItems && listItems.length > 1);
```
You should have an `h2` element with the text `More Recipes`.
```js
const h2 = document.querySelectorAll('H2')[3];
assert(h2.innerText == 'More Recipes');
```
You should have an unordered list `<ul>` element with list items `<li>` that contain `<a>` tags which lead to other recipes.
```js
const unorderedList = document.querySelectorAll('UL')[1];
const listItems = unorderedList.querySelectorAll('LI');
const allAreListItems = unorderedList.children.length == listItems.length;
const containsAnchors = [...listItems].every(function(listItem) {
return listItem.querySelector("a") !== null;
});
assert(unorderedList && allAreListItems && containsAnchors && listItems.length > 1);
```
Your anchor tags linking to the recipes should have a `href` attribute with the value set to `#`
```js
const anchorTags = document.querySelectorAll("a");
const allAnchorsHaveHrefHash = [...anchorTags].every(function(anchorTag) {
return anchorTag.hasAttribute("href") && anchorTag.getAttribute("href") === "#";
});
assert(allAnchorsHaveHrefHash && anchorTags.length > 0);
```
# --seed--
## --seed-contents--
```html
```
```css
```
## --solutions--
```html
<!DOCTYPE html>
<html>
<head>
<title>The Odin Recipes</title>
</head>
<body>
<h1>Creamy Chocolate Fudge</h1>
<img src="https://i.imgur.com/p0J5baJ.jpg" alt="A delicious chocolate fudge dessert">
<h2>Description</h2>
<p>This recipe is for a rich and creamy chocolate fudge that is sure to satisfy your sweet tooth. It's perfect for a special occasion or as a tasty treat for any time of the year.</p>
<p>This recipe is easy to follow and only requires a few simple ingredients. With just a few steps, you'll be able to create a delicious dessert that everyone will love.</p>
<h2>Ingredients</h2>
<ul>
<li>1 cup sugar</li>
<li>1/2 cup unsalted butter</li>
<li>1/4 cup milk</li>
<li>1/4 cup cocoa powder</li>
<li>1/4 cup chocolate chips</li>
<li>1/4 tsp salt</li>
<li>1 tsp vanilla extract</li>
</ul>
<h2>Steps</h2>
<ol>
<li>In a medium saucepan, melt the butter over medium heat.</li>
<li>Add the sugar, milk, cocoa powder, and salt to the saucepan and stir until well combined.</li>
<li>Bring the mixture to a boil, stirring constantly, and then reduce the heat to low and simmer for 5 minutes.</li>
<li>Remove the saucepan from the heat and stir in the chocolate chips and vanilla extract until the chocolate is melted and the mixture is smooth.</li>
<li>Pour the fudge into a greased 8-inch square pan and let it cool completely before cutting into squares.</li>
</ol>
<h2>More Recipes</h2>
<ul>
<li><a href="#">Peanut Butter Cookies</a></li>
<li><a href="#">Lemon Bars</a></li>
<li><a href="#">Chocolate Chip Pancakes</a></li>
</ul>
</body>
</html>
```
@@ -7,11 +7,13 @@ dashedName: step-15
# --description--
用必要的元素標籤包裹圖片,把它變成一個鏈接。 使用 `https://freecatphotoapp.com` 作爲錨點元素中 `href` 屬性的值。
In previous steps you used an anchor element to turn text into a link. Other types of content can also be turned into a link by wrapping it in anchor tags.
Turn the image into a link by surrounding it with necessary element tags. Use `https://freecatphotoapp.com` as the anchor's `href` attribute value.
# --hints--
`img` 元素的 `src` 屬性應該指向「`https://cdn.freecodecamp.org/curriculum/cat-photo-app/relaxing-cat.jpg`」。 你可能不小心刪除了它。
You should have an `img` element with an `src` value of `https://cdn.freecodecamp.org/curriculum/cat-photo-app/relaxing-cat.jpg`. You may have accidentally deleted it.
```js
assert(
@@ -21,37 +23,37 @@ assert(
);
```
你的錨點元素(`a`)應該有一個起始標籤。 起始標籤的書寫語法爲:`<elementName>`。
Your anchor (`a`) element should have an opening tag. Opening tags have this syntax: `<elementName>`.
```js
assert(document.querySelectorAll('a').length >= 2);
```
你應該只添加一個錨點(`a`)的起始標籤。 請刪除多餘的。
You should only add one opening anchor (`a`) tag. Please remove any extras.
```js
assert(document.querySelectorAll('a').length === 2);
```
你的錨點元素(`a`)應該有一個閉合標籤。 結束標籤在 `<` 字符後面要有一個 `/`。
Your anchor (`a`) element should have a closing tag. Closing tags have a `/` just after the `<` character.
```js
assert(code.match(/<\/a>/g).length >= 2);
```
你應該只添加一個錨點(`a`)的結束標籤。 請刪除多餘的。
You should only add one closing anchor (`a`) tag. Please remove any extras.
```js
assert(code.match(/<\/a>/g).length === 2);
```
你的錨點元素(`a`)缺少 `href` 屬性。 請檢查在開始標籤的名稱後面要有一個空格,且所有的屬性名稱前面也要有一個空格。
Your anchor (`a`) element does not have an `href` attribute. Check that there is a space after the opening tag's name and/or there are spaces before all attribute names.
```js
assert(document.querySelector('a').hasAttribute('href'));
```
你的錨點元素(`a`)應該鏈接到 `https://freecatphotoapp.com`。 你可能省略了這個 URL 或者有拼寫錯誤。
Your anchor (`a`) element should link to `https://freecatphotoapp.com`. You have either omitted the URL or have a typo.
```js
assert(
@@ -60,7 +62,7 @@ assert(
);
```
你的 `img` 元素應該被嵌套在錨點元素(`a`)之中。 整個 `img` 元素應該置於錨點元素(`a`)的開始標籤和結束標籤之間。
Your `img` element should be nested within the anchor (`a`) element. The entire `img` element should be inside the opening and closing tags of the anchor (`a`) element.
```js
assert(document.querySelector('img').parentNode.nodeName === 'A');
@@ -55,6 +55,12 @@ assert.deepStrictEqual(
);
```
You should only have one `ol` element.
```js
assert([...document.querySelectorAll('ol')].length == 1);
```
# --seed--
## --seed-contents--
@@ -22,7 +22,7 @@ assert(
);
```
第一個單選按鈕缺少 `checked` 屬性。
Your first radio button, with the `id` set to `indoor`, should have the `checked` attribute.
```js
assert($('input[type="radio"]')[0].hasAttribute('checked'));
@@ -7,7 +7,7 @@ dashedName: step-53
# --description--
在最後一個 `.divider` 之後,使用文本 `Cholesterol 0mg 0%` 創建一個新的 `p` 元素。 將文本 `Cholesterol` 包裹在 `span` 元素中,並將 `span` 元素的 `class` 屬性設置爲 `bold`。 將文本 `0%` 包裹在另一個 `span` 元素中,並將 `class` 設置爲 `bold`。 最後,嵌套 `Cholesterol` 和 `0mg` span 元素在另一個 span 元素中,以實現對齊。
在最後一個 `.divider` 之後,使用文本 `Cholesterol 0mg 0%` 創建一個新的 `p` 元素。 將文本 `Cholesterol` 包裹在 `span` 元素中,並將 `span` 元素的 `class` 屬性設置爲 `bold`。 將文本 `0%` 包裹在另一個 `span` 元素中,並將 `class` 設置爲 `bold`。 Finally, nest the `Cholesterol` and `0mg` `span` elements inside an additional `span` element for alignment.
# --hints--
@@ -10,9 +10,9 @@ dashedName: use-class-syntax-to-define-a-constructor-function
ES6 提供了一个新的创建对象的语法,使用关键字 <dfn>class</dfn>。
In ES5, an object can be created by defining a `constructor` function and using the `new` keyword to instantiate the object.
在 ES5 里面,我们通过定义一个函数 `constructor` 来创建一个对象,然后使用 `new` 关键字来实例化对象。
In ES6, a `class` declaration has a `constructor` method that is invoked with the `new` keyword. If the `constructor` method is not explicitly defined, then it is implicitly defined with no arguments.
在 ES6 里,`class` 声明有一个 `constructor` 方法,与 `new` 关键字一起被调用。 如果 `constructor` 方法没有明确定义,那么它就被含蓄地定义为没有参数。
```js
// Explicit constructor
@@ -41,21 +41,21 @@ const atlas = new Rocket();
atlas.launch();
```
It should be noted that the `class` keyword declares a new function, to which a constructor is added. This constructor is invoked when `new` is called to create a new object.
应该注意 `class` 关键字声明了一个新的函数,里面添加了一个构造函数。 当用 `new` 创建一个新的对象时,构造函数会被调用。
**Note:** UpperCamelCase should be used by convention for ES6 class names, as in `SpaceShuttle` used above.
**注意:**首字母大写驼峰命名法 UpperCamelCase 是 ES6 class 命名的惯例,就像上面的 `SpaceShuttle`。
The `constructor` method is a special method for creating and initializing an object created with a class. You will learn more about it in the Object Oriented Programming section of the JavaScript Algorithms And Data Structures Certification.
`constructor` 方法是一个特殊方法,用于创建和初始化 class 创建的对象。 在 JavaScript 算法和数据结构认证的面向对象编程章节里会更深入介绍它。
# --instructions--
Use the `class` keyword and write a `constructor` to create the `Vegetable` class.
使用 `class` 关键词,写一个 `constructor` 来创建 `Vegetable` class。
The `Vegetable` class allows you to create a vegetable object with a property `name` that gets passed to the `constructor`.
`Vegetable` 这个 class 可以创建 vegetable 对象,这个对象拥有一个在 `constructor` 中赋值的 `name` 属性。
# --hints--
`Vegetable` should be a `class` with a defined `constructor` method.
`Vegetable` 应该是一个 `class`,并在其中定义了 `constructor` 方法。
```js
assert(
@@ -63,13 +63,13 @@ assert(
);
```
The `class` keyword should be used.
应使用 `class` 关键字。
```js
assert(code.match(/class/g));
```
`Vegetable` should be able to be instantiated.
`Vegetable` 可以被实例化。
```js
assert(() => {
@@ -78,7 +78,7 @@ assert(() => {
});
```
`carrot.name` should return `carrot`.
`carrot.name` 应该返回 `carrot`。
```js
assert(carrot.name == 'carrot');
@@ -47,32 +47,33 @@ assert(typeof farey === 'function');
assert(Array.isArray(farey(3)));
```
`farey(3)` should return `["1/3","1/2","2/3"]`
`farey(3)` should return `['0/1','1/3','1/2','2/3','1/1']`
```js
assert.deepEqual(farey(3), ['1/3', '1/2', '2/3']);
assert.deepEqual(farey(3),['0/1', '1/3', '1/2', '2/3', '1/1']);
```
`farey(4)` should return `["1/4","1/3","1/2","2/4","2/3","3/4"]`
`farey(4)` should return `['0/1','1/4','1/3','1/2','2/3','3/4','1/1']`
```js
assert.deepEqual(farey(4), ['1/4', '1/3', '1/2', '2/4', '2/3', '3/4']);
assert.deepEqual(farey(4), ['0/1', '1/4', '1/3', '1/2', '2/3', '3/4', '1/1']);
```
`farey(5)` should return `["1/5","1/4","1/3","2/5","1/2","2/4","3/5","2/3","3/4","4/5"]`
`farey(5)` should return `['0/1','1/5','1/4','1/3','2/5','1/2','3/5','2/3','3/4','4/5','1/1']`
```js
assert.deepEqual(farey(5), [
'0/1',
'1/5',
'1/4',
'1/3',
'2/5',
'1/2',
'2/4',
'3/5',
'2/3',
'3/4',
'4/5'
'4/5',
'1/1'
]);
```
@@ -89,21 +90,17 @@ function farey(n) {
# --solutions--
```js
function farey(n){
let farSeq=[];
for(let den = 1; den <= n; den++){
for(let num = 1; num < den; num++){
farSeq.push({
str:num+"/"+den,
val:num/den});
}
function farey(n) {
const sequence = [{ string: "0/1", float: 0.0 }];
for (let i = 1; i < n; i++) {
for (let j = n; j >= i; j--) {
if (i === 1 || j % i > 0) {
sequence.push({ string: `${i}/${j}`, float: i / j });
}
}
farSeq.sort(function(a,b){
return a.val-b.val;
});
farSeq=farSeq.map(function(a){
return a.str;
});
return farSeq;
}
return sequence
.sort((a, b) => a.float - b.float)
.map(e => e.string)
}
```
@@ -0,0 +1,204 @@
---
id: 6391d1a4f7ac71efd0621380
title: Build a Recipe Page Project
challengeType: 14
dashedName: project-create-a-recipe-page
---
# --description--
The website will consist of a main index page which will have links to a few recipes. The website won’t look very pretty by the time you’ve finished.
**User Stories:**
1. Your recipe page should contain a `DOCTYPE` tag.
1. Your recipe page should include an `html` element with a `head` and `body` element as children.
1. You should have a `title` element within the `head` element with the text `The Odin Recipes`.
1. You should see an `h1` element that has the text `Creamy Chocolate Fudge`.
1. You should see an image with the url `*placeholder-fcc-cdn*` with a fitting `alt` text.
1. There should be an `h2` element with the text `Description` under the image.
1. You should see a couple of paragraphs under `Description` that describe the recipe.
1. There should be an `h2` element with the text `Ingredients`
1. Under the `Ingredients` heading there should be an unordered list with the ingredients needed for the recipe.
1. Under the list of ingredients add another heading called `Steps`.
1. You should see an ordered list with a couple of steps needed to complete the recipe.
1. Under the steps there should be an `h2` element with the text `More Recipes`
1. You should see a couple of links to other recipes inside an unordered list which has a couple of list items with anchor elements within.
1. These anchor elements should have `href` attribute with the value set to `#`
# --hints--
You should have a `DOCTYPE` tag.
```js
assert(code.match(/<!DOCTYPE\s+?html\s*?>/gi));
```
You should have a `html` element with `head` and `body` element.
```js
const html = document.querySelectorAll('html')[0];
const head = document.querySelectorAll('html > head')[0];
const body = document.querySelectorAll('html > body')[0];
assert(html && head && body);
```
You should have a `title` element within the `head` element that contains the text `The Odin Recipes`.
```js
assert(document.querySelectorAll('HEAD > TITLE')[0].innerText == 'The Odin Recipes');
```
You should have a `h1` element within your `body` element that contains the text `Creamy Chocolate Fudge`.
```js
assert(document.querySelectorAll('BODY > H1')[0].innerText == 'Creamy Chocolate Fudge');
```
You should have an image with the url `*placeholder-fcc-cdn*` with an `alt` attribute that has a fitting text.
```js
const img = document.querySelectorAll('IMG')[0];
assert(img && img.alt !='' && img.src === 'https://i.imgur.com/p0J5baJ.jpg')
```
You should have an `h2` element with the text `Description`.
```js
const h2 = document.querySelectorAll('H2')[0];
assert(h2.innerText == 'Description');
```
You should have at least two `p` elements describing the recipe.
```js
const paragraphs = document.querySelectorAll('P');
assert(paragraphs.length > 1);
```
You should have an `h2` element with the text `Ingredients`.
```js
const h2 = document.querySelectorAll('H2')[1];
assert(h2.innerText == 'Ingredients');
```
You should have an unordered list `<ul>` with some ingredients as the list items `<li>`.
```js
const unorderedList = document.querySelectorAll('UL')[0];
const listItems = document.querySelectorAll('UL > LI');
assert(unorderedList && listItems && listItems.length > 1);
```
You should have an `h2` element with the text `Steps`.
```js
const h2 = document.querySelectorAll('H2')[2];
assert(h2.innerText == 'Steps');
```
You should have a `<ol>` with the the steps as the list items `<li>`.
```js
const orderedList = document.querySelectorAll('OL')[0];
const listItems = document.querySelectorAll('OL > LI');
assert(orderedList && listItems && listItems.length > 1);
```
You should have an `h2` element with the text `More Recipes`.
```js
const h2 = document.querySelectorAll('H2')[3];
assert(h2.innerText == 'More Recipes');
```
You should have an unordered list `<ul>` element with list items `<li>` that contain `<a>` tags which lead to other recipes.
```js
const unorderedList = document.querySelectorAll('UL')[1];
const listItems = unorderedList.querySelectorAll('LI');
const allAreListItems = unorderedList.children.length == listItems.length;
const containsAnchors = [...listItems].every(function(listItem) {
return listItem.querySelector("a") !== null;
});
assert(unorderedList && allAreListItems && containsAnchors && listItems.length > 1);
```
Your anchor tags linking to the recipes should have a `href` attribute with the value set to `#`
```js
const anchorTags = document.querySelectorAll("a");
const allAnchorsHaveHrefHash = [...anchorTags].every(function(anchorTag) {
return anchorTag.hasAttribute("href") && anchorTag.getAttribute("href") === "#";
});
assert(allAnchorsHaveHrefHash && anchorTags.length > 0);
```
# --seed--
## --seed-contents--
```html
```
```css
```
## --solutions--
```html
<!DOCTYPE html>
<html>
<head>
<title>The Odin Recipes</title>
</head>
<body>
<h1>Creamy Chocolate Fudge</h1>
<img src="https://i.imgur.com/p0J5baJ.jpg" alt="A delicious chocolate fudge dessert">
<h2>Description</h2>
<p>This recipe is for a rich and creamy chocolate fudge that is sure to satisfy your sweet tooth. It's perfect for a special occasion or as a tasty treat for any time of the year.</p>
<p>This recipe is easy to follow and only requires a few simple ingredients. With just a few steps, you'll be able to create a delicious dessert that everyone will love.</p>
<h2>Ingredients</h2>
<ul>
<li>1 cup sugar</li>
<li>1/2 cup unsalted butter</li>
<li>1/4 cup milk</li>
<li>1/4 cup cocoa powder</li>
<li>1/4 cup chocolate chips</li>
<li>1/4 tsp salt</li>
<li>1 tsp vanilla extract</li>
</ul>
<h2>Steps</h2>
<ol>
<li>In a medium saucepan, melt the butter over medium heat.</li>
<li>Add the sugar, milk, cocoa powder, and salt to the saucepan and stir until well combined.</li>
<li>Bring the mixture to a boil, stirring constantly, and then reduce the heat to low and simmer for 5 minutes.</li>
<li>Remove the saucepan from the heat and stir in the chocolate chips and vanilla extract until the chocolate is melted and the mixture is smooth.</li>
<li>Pour the fudge into a greased 8-inch square pan and let it cool completely before cutting into squares.</li>
</ol>
<h2>More Recipes</h2>
<ul>
<li><a href="#">Peanut Butter Cookies</a></li>
<li><a href="#">Lemon Bars</a></li>
<li><a href="#">Chocolate Chip Pancakes</a></li>
</ul>
</body>
</html>
```
@@ -7,11 +7,13 @@ dashedName: step-15
# --description--
用必要的元素标签包裹图片,把它变成一个链接。 使用 `https://freecatphotoapp.com` 作为锚点元素中 `href` 属性的值。
In previous steps you used an anchor element to turn text into a link. Other types of content can also be turned into a link by wrapping it in anchor tags.
Turn the image into a link by surrounding it with necessary element tags. Use `https://freecatphotoapp.com` as the anchor's `href` attribute value.
# --hints--
`img` 元素的 `src` 属性应该指向「`https://cdn.freecodecamp.org/curriculum/cat-photo-app/relaxing-cat.jpg`」。 你可能不小心删除了它。
You should have an `img` element with an `src` value of `https://cdn.freecodecamp.org/curriculum/cat-photo-app/relaxing-cat.jpg`. You may have accidentally deleted it.
```js
assert(
@@ -21,37 +23,37 @@ assert(
);
```
你的锚点元素(`a`)应该有一个起始标签。 起始标签的书写语法为:`<elementName>`。
Your anchor (`a`) element should have an opening tag. Opening tags have this syntax: `<elementName>`.
```js
assert(document.querySelectorAll('a').length >= 2);
```
你应该只添加一个锚点(`a`)的起始标签。 请删除多余的。
You should only add one opening anchor (`a`) tag. Please remove any extras.
```js
assert(document.querySelectorAll('a').length === 2);
```
你的锚点元素(`a`)应该有一个闭合标签。 结束标签在 `<` 字符后面要有一个 `/`。
Your anchor (`a`) element should have a closing tag. Closing tags have a `/` just after the `<` character.
```js
assert(code.match(/<\/a>/g).length >= 2);
```
你应该只添加一个锚点(`a`)的结束标签。 请删除多余的。
You should only add one closing anchor (`a`) tag. Please remove any extras.
```js
assert(code.match(/<\/a>/g).length === 2);
```
你的锚点元素(`a`)缺少 `href` 属性。 请检查在开始标签的名称后面要有一个空格,且所有的属性名称前面也要有一个空格。
Your anchor (`a`) element does not have an `href` attribute. Check that there is a space after the opening tag's name and/or there are spaces before all attribute names.
```js
assert(document.querySelector('a').hasAttribute('href'));
```
你的锚点元素(`a`)应该链接到 `https://freecatphotoapp.com`。 你可能省略了这个 URL 或者有拼写错误。
Your anchor (`a`) element should link to `https://freecatphotoapp.com`. You have either omitted the URL or have a typo.
```js
assert(
@@ -60,7 +62,7 @@ assert(
);
```
你的 `img` 元素应该被嵌套在锚点元素(`a`)之中。 整个 `img` 元素应该置于锚点元素(`a`)的开始标签和结束标签之间。
Your `img` element should be nested within the anchor (`a`) element. The entire `img` element should be inside the opening and closing tags of the anchor (`a`) element.
```js
assert(document.querySelector('img').parentNode.nodeName === 'A');
@@ -55,6 +55,12 @@ assert.deepStrictEqual(
);
```
You should only have one `ol` element.
```js
assert([...document.querySelectorAll('ol')].length == 1);
```
# --seed--
## --seed-contents--
@@ -22,7 +22,7 @@ assert(
);
```
第一个单选按钮缺少 `checked` 属性。
Your first radio button, with the `id` set to `indoor`, should have the `checked` attribute.
```js
assert($('input[type="radio"]')[0].hasAttribute('checked'));
@@ -7,7 +7,7 @@ dashedName: step-53
# --description--
在最后一个 `.divider` 之后,使用文本 `Cholesterol 0mg 0%` 创建一个新的 `p` 元素。 将文本 `Cholesterol` 包裹在 `span` 元素中,并将 `span` 元素的 `class` 属性设置为 `bold`。 将文本 `0%` 包裹在另一个 `span` 元素中,并将 `class` 设置为 `bold`。 最后,嵌套 `Cholesterol` 和 `0mg` span 元素在另一个 span 元素中,以实现对齐。
在最后一个 `.divider` 之后,使用文本 `Cholesterol 0mg 0%` 创建一个新的 `p` 元素。 将文本 `Cholesterol` 包裹在 `span` 元素中,并将 `span` 元素的 `class` 属性设置为 `bold`。 将文本 `0%` 包裹在另一个 `span` 元素中,并将 `class` 设置为 `bold`。 Finally, nest the `Cholesterol` and `0mg` `span` elements inside an additional `span` element for alignment.
# --hints--
@@ -47,32 +47,33 @@ assert(typeof farey === 'function');
assert(Array.isArray(farey(3)));
```
`farey(3)` should return `["1/3","1/2","2/3"]`
`farey(3)` should return `['0/1','1/3','1/2','2/3','1/1']`
```js
assert.deepEqual(farey(3), ['1/3', '1/2', '2/3']);
assert.deepEqual(farey(3),['0/1', '1/3', '1/2', '2/3', '1/1']);
```
`farey(4)` should return `["1/4","1/3","1/2","2/4","2/3","3/4"]`
`farey(4)` should return `['0/1','1/4','1/3','1/2','2/3','3/4','1/1']`
```js
assert.deepEqual(farey(4), ['1/4', '1/3', '1/2', '2/4', '2/3', '3/4']);
assert.deepEqual(farey(4), ['0/1', '1/4', '1/3', '1/2', '2/3', '3/4', '1/1']);
```
`farey(5)` should return `["1/5","1/4","1/3","2/5","1/2","2/4","3/5","2/3","3/4","4/5"]`
`farey(5)` should return `['0/1','1/5','1/4','1/3','2/5','1/2','3/5','2/3','3/4','4/5','1/1']`
```js
assert.deepEqual(farey(5), [
'0/1',
'1/5',
'1/4',
'1/3',
'2/5',
'1/2',
'2/4',
'3/5',
'2/3',
'3/4',
'4/5'
'4/5',
'1/1'
]);
```
@@ -89,21 +90,17 @@ function farey(n) {
# --solutions--
```js
function farey(n){
let farSeq=[];
for(let den = 1; den <= n; den++){
for(let num = 1; num < den; num++){
farSeq.push({
str:num+"/"+den,
val:num/den});
}
function farey(n) {
const sequence = [{ string: "0/1", float: 0.0 }];
for (let i = 1; i < n; i++) {
for (let j = n; j >= i; j--) {
if (i === 1 || j % i > 0) {
sequence.push({ string: `${i}/${j}`, float: i / j });
}
}
farSeq.sort(function(a,b){
return a.val-b.val;
});
farSeq=farSeq.map(function(a){
return a.str;
});
return farSeq;
}
return sequence
.sort((a, b) => a.float - b.float)
.map(e => e.string)
}
```
@@ -0,0 +1,204 @@
---
id: 6391d1a4f7ac71efd0621380
title: Build a Recipe Page Project
challengeType: 14
dashedName: project-create-a-recipe-page
---
# --description--
The website will consist of a main index page which will have links to a few recipes. The website won’t look very pretty by the time you’ve finished.
**User Stories:**
1. Your recipe page should contain a `DOCTYPE` tag.
1. Your recipe page should include an `html` element with a `head` and `body` element as children.
1. You should have a `title` element within the `head` element with the text `The Odin Recipes`.
1. You should see an `h1` element that has the text `Creamy Chocolate Fudge`.
1. You should see an image with the url `*placeholder-fcc-cdn*` with a fitting `alt` text.
1. There should be an `h2` element with the text `Description` under the image.
1. You should see a couple of paragraphs under `Description` that describe the recipe.
1. There should be an `h2` element with the text `Ingredients`
1. Under the `Ingredients` heading there should be an unordered list with the ingredients needed for the recipe.
1. Under the list of ingredients add another heading called `Steps`.
1. You should see an ordered list with a couple of steps needed to complete the recipe.
1. Under the steps there should be an `h2` element with the text `More Recipes`
1. You should see a couple of links to other recipes inside an unordered list which has a couple of list items with anchor elements within.
1. These anchor elements should have `href` attribute with the value set to `#`
# --hints--
You should have a `DOCTYPE` tag.
```js
assert(code.match(/<!DOCTYPE\s+?html\s*?>/gi));
```
You should have a `html` element with `head` and `body` element.
```js
const html = document.querySelectorAll('html')[0];
const head = document.querySelectorAll('html > head')[0];
const body = document.querySelectorAll('html > body')[0];
assert(html && head && body);
```
You should have a `title` element within the `head` element that contains the text `The Odin Recipes`.
```js
assert(document.querySelectorAll('HEAD > TITLE')[0].innerText == 'The Odin Recipes');
```
You should have a `h1` element within your `body` element that contains the text `Creamy Chocolate Fudge`.
```js
assert(document.querySelectorAll('BODY > H1')[0].innerText == 'Creamy Chocolate Fudge');
```
You should have an image with the url `*placeholder-fcc-cdn*` with an `alt` attribute that has a fitting text.
```js
const img = document.querySelectorAll('IMG')[0];
assert(img && img.alt !='' && img.src === 'https://i.imgur.com/p0J5baJ.jpg')
```
You should have an `h2` element with the text `Description`.
```js
const h2 = document.querySelectorAll('H2')[0];
assert(h2.innerText == 'Description');
```
You should have at least two `p` elements describing the recipe.
```js
const paragraphs = document.querySelectorAll('P');
assert(paragraphs.length > 1);
```
You should have an `h2` element with the text `Ingredients`.
```js
const h2 = document.querySelectorAll('H2')[1];
assert(h2.innerText == 'Ingredients');
```
You should have an unordered list `<ul>` with some ingredients as the list items `<li>`.
```js
const unorderedList = document.querySelectorAll('UL')[0];
const listItems = document.querySelectorAll('UL > LI');
assert(unorderedList && listItems && listItems.length > 1);
```
You should have an `h2` element with the text `Steps`.
```js
const h2 = document.querySelectorAll('H2')[2];
assert(h2.innerText == 'Steps');
```
You should have a `<ol>` with the the steps as the list items `<li>`.
```js
const orderedList = document.querySelectorAll('OL')[0];
const listItems = document.querySelectorAll('OL > LI');
assert(orderedList && listItems && listItems.length > 1);
```
You should have an `h2` element with the text `More Recipes`.
```js
const h2 = document.querySelectorAll('H2')[3];
assert(h2.innerText == 'More Recipes');
```
You should have an unordered list `<ul>` element with list items `<li>` that contain `<a>` tags which lead to other recipes.
```js
const unorderedList = document.querySelectorAll('UL')[1];
const listItems = unorderedList.querySelectorAll('LI');
const allAreListItems = unorderedList.children.length == listItems.length;
const containsAnchors = [...listItems].every(function(listItem) {
return listItem.querySelector("a") !== null;
});
assert(unorderedList && allAreListItems && containsAnchors && listItems.length > 1);
```
Your anchor tags linking to the recipes should have a `href` attribute with the value set to `#`
```js
const anchorTags = document.querySelectorAll("a");
const allAnchorsHaveHrefHash = [...anchorTags].every(function(anchorTag) {
return anchorTag.hasAttribute("href") && anchorTag.getAttribute("href") === "#";
});
assert(allAnchorsHaveHrefHash && anchorTags.length > 0);
```
# --seed--
## --seed-contents--
```html
```
```css
```
## --solutions--
```html
<!DOCTYPE html>
<html>
<head>
<title>The Odin Recipes</title>
</head>
<body>
<h1>Creamy Chocolate Fudge</h1>
<img src="https://i.imgur.com/p0J5baJ.jpg" alt="A delicious chocolate fudge dessert">
<h2>Description</h2>
<p>This recipe is for a rich and creamy chocolate fudge that is sure to satisfy your sweet tooth. It's perfect for a special occasion or as a tasty treat for any time of the year.</p>
<p>This recipe is easy to follow and only requires a few simple ingredients. With just a few steps, you'll be able to create a delicious dessert that everyone will love.</p>
<h2>Ingredients</h2>
<ul>
<li>1 cup sugar</li>
<li>1/2 cup unsalted butter</li>
<li>1/4 cup milk</li>
<li>1/4 cup cocoa powder</li>
<li>1/4 cup chocolate chips</li>
<li>1/4 tsp salt</li>
<li>1 tsp vanilla extract</li>
</ul>
<h2>Steps</h2>
<ol>
<li>In a medium saucepan, melt the butter over medium heat.</li>
<li>Add the sugar, milk, cocoa powder, and salt to the saucepan and stir until well combined.</li>
<li>Bring the mixture to a boil, stirring constantly, and then reduce the heat to low and simmer for 5 minutes.</li>
<li>Remove the saucepan from the heat and stir in the chocolate chips and vanilla extract until the chocolate is melted and the mixture is smooth.</li>
<li>Pour the fudge into a greased 8-inch square pan and let it cool completely before cutting into squares.</li>
</ol>
<h2>More Recipes</h2>
<ul>
<li><a href="#">Peanut Butter Cookies</a></li>
<li><a href="#">Lemon Bars</a></li>
<li><a href="#">Chocolate Chip Pancakes</a></li>
</ul>
</body>
</html>
```
@@ -7,11 +7,13 @@ dashedName: step-15
# --description--
Convierte la imagen en un enlace rodeándola con las etiquetas correctas. Utiliza `https://freecatphotoapp.com` como valor del atributo `href` del elemento archor.
In previous steps you used an anchor element to turn text into a link. Other types of content can also be turned into a link by wrapping it in anchor tags.
Turn the image into a link by surrounding it with necessary element tags. Use `https://freecatphotoapp.com` as the anchor's `href` attribute value.
# --hints--
Debes tener un elemento `img` cuyo valor del atributo `src` debe ser `https://cdn.freecodecamp.org/curriculum/cat-photo-app/relaxing-cat.jpg`. Puede que lo hayas borrado accidentalmente.
You should have an `img` element with an `src` value of `https://cdn.freecodecamp.org/curriculum/cat-photo-app/relaxing-cat.jpg`. You may have accidentally deleted it.
```js
assert(
@@ -21,37 +23,37 @@ assert(
);
```
Tu elemento (`a`) debe tener una etiqueta de apertura. Las etiquetas de apertura tienen esta sintaxis: `<elementName>`.
Your anchor (`a`) element should have an opening tag. Opening tags have this syntax: `<elementName>`.
```js
assert(document.querySelectorAll('a').length >= 2);
```
Solo debes añadir una etiqueta de apertura del elemento anchor (`a`). Elimina cualquier extra.
You should only add one opening anchor (`a`) tag. Please remove any extras.
```js
assert(document.querySelectorAll('a').length === 2);
```
Tu elemento anchor (`a`) debe tener una etiqueta de cierre. Las etiquetas de cierre tienen una `/` inmediatamente después del carácter `<`.
Your anchor (`a`) element should have a closing tag. Closing tags have a `/` just after the `<` character.
```js
assert(code.match(/<\/a>/g).length >= 2);
```
Solo debes añadir una etiqueta de cierre del elemento anchor (`a`). Elimina cualquier extra.
You should only add one closing anchor (`a`) tag. Please remove any extras.
```js
assert(code.match(/<\/a>/g).length === 2);
```
Tu elemento anchor (`a`) no tiene un atributo `href`. Comprueba que hay un espacio después del nombre de la etiqueta de apertura y/o que hay espacios antes de todos los nombres de los atributos.
Your anchor (`a`) element does not have an `href` attribute. Check that there is a space after the opening tag's name and/or there are spaces before all attribute names.
```js
assert(document.querySelector('a').hasAttribute('href'));
```
Tu elemento anchor (`a`) te debe de llevar a `https://freecatphotoapp.com`. Probablemente no has añadido la URL o tienes un error tipográfico.
Your anchor (`a`) element should link to `https://freecatphotoapp.com`. You have either omitted the URL or have a typo.
```js
assert(
@@ -60,7 +62,7 @@ assert(
);
```
Tu elemento `img` debe estar anidado dentro del elemento anchor (`a`). Todo el elemento `img` debe estar entre las etiquetas de apertura y cierre del elemento anchor (`a`).
Your `img` element should be nested within the anchor (`a`) element. The entire `img` element should be inside the opening and closing tags of the anchor (`a`) element.
```js
assert(document.querySelector('img').parentNode.nodeName === 'A');
@@ -55,6 +55,12 @@ assert.deepStrictEqual(
);
```
You should only have one `ol` element.
```js
assert([...document.querySelectorAll('ol')].length == 1);
```
# --seed--
## --seed-contents--
@@ -22,7 +22,7 @@ assert(
);
```
Al primer radio button le falta el atributo `checked`.
Your first radio button, with the `id` set to `indoor`, should have the `checked` attribute.
```js
assert($('input[type="radio"]')[0].hasAttribute('checked'));
@@ -7,7 +7,7 @@ dashedName: step-53
# --description--
Después de su último `.divider`, cree un nuevo elemento `p` con el texto `Cholesterol 0mg 0%`. Envuelve el texto `Cholesterol` en un elemento `span` y dale a ese elemento `span` el atributo `class` establecido en `bold`. Envuelva el texto `0%` en otro elemento `span`, con `class` establecido en `bold`. Por último, anida los elementos span `Cholesterol` y `0mg` en un span adicional para alineamiento.
Después de su último `.divider`, cree un nuevo elemento `p` con el texto `Cholesterol 0mg 0%`. Envuelve el texto `Cholesterol` en un elemento `span` y dale a ese elemento `span` el atributo `class` establecido en `bold`. Envuelva el texto `0%` en otro elemento `span`, con `class` establecido en `bold`. Finally, nest the `Cholesterol` and `0mg` `span` elements inside an additional `span` element for alignment.
# --hints--
@@ -47,32 +47,33 @@ assert(typeof farey === 'function');
assert(Array.isArray(farey(3)));
```
`farey(3)` should return `["1/3","1/2","2/3"]`
`farey(3)` should return `['0/1','1/3','1/2','2/3','1/1']`
```js
assert.deepEqual(farey(3), ['1/3', '1/2', '2/3']);
assert.deepEqual(farey(3),['0/1', '1/3', '1/2', '2/3', '1/1']);
```
`farey(4)` should return `["1/4","1/3","1/2","2/4","2/3","3/4"]`
`farey(4)` should return `['0/1','1/4','1/3','1/2','2/3','3/4','1/1']`
```js
assert.deepEqual(farey(4), ['1/4', '1/3', '1/2', '2/4', '2/3', '3/4']);
assert.deepEqual(farey(4), ['0/1', '1/4', '1/3', '1/2', '2/3', '3/4', '1/1']);
```
`farey(5)` should return `["1/5","1/4","1/3","2/5","1/2","2/4","3/5","2/3","3/4","4/5"]`
`farey(5)` should return `['0/1','1/5','1/4','1/3','2/5','1/2','3/5','2/3','3/4','4/5','1/1']`
```js
assert.deepEqual(farey(5), [
'0/1',
'1/5',
'1/4',
'1/3',
'2/5',
'1/2',
'2/4',
'3/5',
'2/3',
'3/4',
'4/5'
'4/5',
'1/1'
]);
```
@@ -89,21 +90,17 @@ function farey(n) {
# --solutions--
```js
function farey(n){
let farSeq=[];
for(let den = 1; den <= n; den++){
for(let num = 1; num < den; num++){
farSeq.push({
str:num+"/"+den,
val:num/den});
}
function farey(n) {
const sequence = [{ string: "0/1", float: 0.0 }];
for (let i = 1; i < n; i++) {
for (let j = n; j >= i; j--) {
if (i === 1 || j % i > 0) {
sequence.push({ string: `${i}/${j}`, float: i / j });
}
}
farSeq.sort(function(a,b){
return a.val-b.val;
});
farSeq=farSeq.map(function(a){
return a.str;
});
return farSeq;
}
return sequence
.sort((a, b) => a.float - b.float)
.map(e => e.string)
}
```
@@ -0,0 +1,204 @@
---
id: 6391d1a4f7ac71efd0621380
title: Build a Recipe Page Project
challengeType: 14
dashedName: project-create-a-recipe-page
---
# --description--
The website will consist of a main index page which will have links to a few recipes. The website won’t look very pretty by the time you’ve finished.
**User Stories:**
1. Your recipe page should contain a `DOCTYPE` tag.
1. Your recipe page should include an `html` element with a `head` and `body` element as children.
1. You should have a `title` element within the `head` element with the text `The Odin Recipes`.
1. You should see an `h1` element that has the text `Creamy Chocolate Fudge`.
1. You should see an image with the url `*placeholder-fcc-cdn*` with a fitting `alt` text.
1. There should be an `h2` element with the text `Description` under the image.
1. You should see a couple of paragraphs under `Description` that describe the recipe.
1. There should be an `h2` element with the text `Ingredients`
1. Under the `Ingredients` heading there should be an unordered list with the ingredients needed for the recipe.
1. Under the list of ingredients add another heading called `Steps`.
1. You should see an ordered list with a couple of steps needed to complete the recipe.
1. Under the steps there should be an `h2` element with the text `More Recipes`
1. You should see a couple of links to other recipes inside an unordered list which has a couple of list items with anchor elements within.
1. These anchor elements should have `href` attribute with the value set to `#`
# --hints--
You should have a `DOCTYPE` tag.
```js
assert(code.match(/<!DOCTYPE\s+?html\s*?>/gi));
```
You should have a `html` element with `head` and `body` element.
```js
const html = document.querySelectorAll('html')[0];
const head = document.querySelectorAll('html > head')[0];
const body = document.querySelectorAll('html > body')[0];
assert(html && head && body);
```
You should have a `title` element within the `head` element that contains the text `The Odin Recipes`.
```js
assert(document.querySelectorAll('HEAD > TITLE')[0].innerText == 'The Odin Recipes');
```
You should have a `h1` element within your `body` element that contains the text `Creamy Chocolate Fudge`.
```js
assert(document.querySelectorAll('BODY > H1')[0].innerText == 'Creamy Chocolate Fudge');
```
You should have an image with the url `*placeholder-fcc-cdn*` with an `alt` attribute that has a fitting text.
```js
const img = document.querySelectorAll('IMG')[0];
assert(img && img.alt !='' && img.src === 'https://i.imgur.com/p0J5baJ.jpg')
```
You should have an `h2` element with the text `Description`.
```js
const h2 = document.querySelectorAll('H2')[0];
assert(h2.innerText == 'Description');
```
You should have at least two `p` elements describing the recipe.
```js
const paragraphs = document.querySelectorAll('P');
assert(paragraphs.length > 1);
```
You should have an `h2` element with the text `Ingredients`.
```js
const h2 = document.querySelectorAll('H2')[1];
assert(h2.innerText == 'Ingredients');
```
You should have an unordered list `<ul>` with some ingredients as the list items `<li>`.
```js
const unorderedList = document.querySelectorAll('UL')[0];
const listItems = document.querySelectorAll('UL > LI');
assert(unorderedList && listItems && listItems.length > 1);
```
You should have an `h2` element with the text `Steps`.
```js
const h2 = document.querySelectorAll('H2')[2];
assert(h2.innerText == 'Steps');
```
You should have a `<ol>` with the the steps as the list items `<li>`.
```js
const orderedList = document.querySelectorAll('OL')[0];
const listItems = document.querySelectorAll('OL > LI');
assert(orderedList && listItems && listItems.length > 1);
```
You should have an `h2` element with the text `More Recipes`.
```js
const h2 = document.querySelectorAll('H2')[3];
assert(h2.innerText == 'More Recipes');
```
You should have an unordered list `<ul>` element with list items `<li>` that contain `<a>` tags which lead to other recipes.
```js
const unorderedList = document.querySelectorAll('UL')[1];
const listItems = unorderedList.querySelectorAll('LI');
const allAreListItems = unorderedList.children.length == listItems.length;
const containsAnchors = [...listItems].every(function(listItem) {
return listItem.querySelector("a") !== null;
});
assert(unorderedList && allAreListItems && containsAnchors && listItems.length > 1);
```
Your anchor tags linking to the recipes should have a `href` attribute with the value set to `#`
```js
const anchorTags = document.querySelectorAll("a");
const allAnchorsHaveHrefHash = [...anchorTags].every(function(anchorTag) {
return anchorTag.hasAttribute("href") && anchorTag.getAttribute("href") === "#";
});
assert(allAnchorsHaveHrefHash && anchorTags.length > 0);
```
# --seed--
## --seed-contents--
```html
```
```css
```
## --solutions--
```html
<!DOCTYPE html>
<html>
<head>
<title>The Odin Recipes</title>
</head>
<body>
<h1>Creamy Chocolate Fudge</h1>
<img src="https://i.imgur.com/p0J5baJ.jpg" alt="A delicious chocolate fudge dessert">
<h2>Description</h2>
<p>This recipe is for a rich and creamy chocolate fudge that is sure to satisfy your sweet tooth. It's perfect for a special occasion or as a tasty treat for any time of the year.</p>
<p>This recipe is easy to follow and only requires a few simple ingredients. With just a few steps, you'll be able to create a delicious dessert that everyone will love.</p>
<h2>Ingredients</h2>
<ul>
<li>1 cup sugar</li>
<li>1/2 cup unsalted butter</li>
<li>1/4 cup milk</li>
<li>1/4 cup cocoa powder</li>
<li>1/4 cup chocolate chips</li>
<li>1/4 tsp salt</li>
<li>1 tsp vanilla extract</li>
</ul>
<h2>Steps</h2>
<ol>
<li>In a medium saucepan, melt the butter over medium heat.</li>
<li>Add the sugar, milk, cocoa powder, and salt to the saucepan and stir until well combined.</li>
<li>Bring the mixture to a boil, stirring constantly, and then reduce the heat to low and simmer for 5 minutes.</li>
<li>Remove the saucepan from the heat and stir in the chocolate chips and vanilla extract until the chocolate is melted and the mixture is smooth.</li>
<li>Pour the fudge into a greased 8-inch square pan and let it cool completely before cutting into squares.</li>
</ol>
<h2>More Recipes</h2>
<ul>
<li><a href="#">Peanut Butter Cookies</a></li>
<li><a href="#">Lemon Bars</a></li>
<li><a href="#">Chocolate Chip Pancakes</a></li>
</ul>
</body>
</html>
```
@@ -7,6 +7,8 @@ dashedName: step-15
# --description--
In previous steps you used an anchor element to turn text into a link. Other types of content can also be turned into a link by wrapping it in anchor tags.
Turn the image into a link by surrounding it with necessary element tags. Use `https://freecatphotoapp.com` as the anchor's `href` attribute value.
# --hints--
@@ -55,6 +55,12 @@ assert.deepStrictEqual(
);
```
You should only have one `ol` element.
```js
assert([...document.querySelectorAll('ol')].length == 1);
```
# --seed--
## --seed-contents--
@@ -22,7 +22,7 @@ assert(
);
```
The first radio button is missing the `checked` attribute.
Your first radio button, with the `id` set to `indoor`, should have the `checked` attribute.
```js
assert($('input[type="radio"]')[0].hasAttribute('checked'));
@@ -7,7 +7,7 @@ dashedName: step-53
# --description--
After your last `.divider`, create a new `p` element with the text `Cholesterol 0mg 0%`. Wrap the text `Cholesterol` in a `span` element, and give that `span` element the `class` attribute set to `bold`. Wrap the text `0%` in another `span` element, with the `class` set to `bold`. Finally, nest the `Cholesterol` and `0mg` span elements inside an additional span element for alignment.
After your last `.divider`, create a new `p` element with the text `Cholesterol 0mg 0%`. Wrap the text `Cholesterol` in a `span` element, and give that `span` element the `class` attribute set to `bold`. Wrap the text `0%` in another `span` element, with the `class` set to `bold`. Finally, nest the `Cholesterol` and `0mg` `span` elements inside an additional `span` element for alignment.
# --hints--
@@ -47,32 +47,33 @@ assert(typeof farey === 'function');
assert(Array.isArray(farey(3)));
```
`farey(3)` dovrebbe restituire `["1/3","1/2","2/3"]`
`farey(3)` should return `['0/1','1/3','1/2','2/3','1/1']`
```js
assert.deepEqual(farey(3), ['1/3', '1/2', '2/3']);
assert.deepEqual(farey(3),['0/1', '1/3', '1/2', '2/3', '1/1']);
```
`farey(4)` dovrebbe restituire `["1/4","1/3","1/2","2/4","2/3","3/4"]`
`farey(4)` should return `['0/1','1/4','1/3','1/2','2/3','3/4','1/1']`
```js
assert.deepEqual(farey(4), ['1/4', '1/3', '1/2', '2/4', '2/3', '3/4']);
assert.deepEqual(farey(4), ['0/1', '1/4', '1/3', '1/2', '2/3', '3/4', '1/1']);
```
`farey(5)` dovrebbe restituire `["1/5","1/4","1/3","2/5","1/2","2/4","3/5","2/3","3/4","4/5"]`
`farey(5)` should return `['0/1','1/5','1/4','1/3','2/5','1/2','3/5','2/3','3/4','4/5','1/1']`
```js
assert.deepEqual(farey(5), [
'0/1',
'1/5',
'1/4',
'1/3',
'2/5',
'1/2',
'2/4',
'3/5',
'2/3',
'3/4',
'4/5'
'4/5',
'1/1'
]);
```
@@ -89,21 +90,17 @@ function farey(n) {
# --solutions--
```js
function farey(n){
let farSeq=[];
for(let den = 1; den <= n; den++){
for(let num = 1; num < den; num++){
farSeq.push({
str:num+"/"+den,
val:num/den});
}
function farey(n) {
const sequence = [{ string: "0/1", float: 0.0 }];
for (let i = 1; i < n; i++) {
for (let j = n; j >= i; j--) {
if (i === 1 || j % i > 0) {
sequence.push({ string: `${i}/${j}`, float: i / j });
}
}
farSeq.sort(function(a,b){
return a.val-b.val;
});
farSeq=farSeq.map(function(a){
return a.str;
});
return farSeq;
}
return sequence
.sort((a, b) => a.float - b.float)
.map(e => e.string)
}
```
@@ -0,0 +1,204 @@
---
id: 6391d1a4f7ac71efd0621380
title: Build a Recipe Page Project
challengeType: 14
dashedName: project-create-a-recipe-page
---
# --description--
The website will consist of a main index page which will have links to a few recipes. The website won’t look very pretty by the time you’ve finished.
**User Stories:**
1. Your recipe page should contain a `DOCTYPE` tag.
1. Your recipe page should include an `html` element with a `head` and `body` element as children.
1. You should have a `title` element within the `head` element with the text `The Odin Recipes`.
1. You should see an `h1` element that has the text `Creamy Chocolate Fudge`.
1. You should see an image with the url `*placeholder-fcc-cdn*` with a fitting `alt` text.
1. There should be an `h2` element with the text `Description` under the image.
1. You should see a couple of paragraphs under `Description` that describe the recipe.
1. There should be an `h2` element with the text `Ingredients`
1. Under the `Ingredients` heading there should be an unordered list with the ingredients needed for the recipe.
1. Under the list of ingredients add another heading called `Steps`.
1. You should see an ordered list with a couple of steps needed to complete the recipe.
1. Under the steps there should be an `h2` element with the text `More Recipes`
1. You should see a couple of links to other recipes inside an unordered list which has a couple of list items with anchor elements within.
1. These anchor elements should have `href` attribute with the value set to `#`
# --hints--
You should have a `DOCTYPE` tag.
```js
assert(code.match(/<!DOCTYPE\s+?html\s*?>/gi));
```
You should have a `html` element with `head` and `body` element.
```js
const html = document.querySelectorAll('html')[0];
const head = document.querySelectorAll('html > head')[0];
const body = document.querySelectorAll('html > body')[0];
assert(html && head && body);
```
You should have a `title` element within the `head` element that contains the text `The Odin Recipes`.
```js
assert(document.querySelectorAll('HEAD > TITLE')[0].innerText == 'The Odin Recipes');
```
You should have a `h1` element within your `body` element that contains the text `Creamy Chocolate Fudge`.
```js
assert(document.querySelectorAll('BODY > H1')[0].innerText == 'Creamy Chocolate Fudge');
```
You should have an image with the url `*placeholder-fcc-cdn*` with an `alt` attribute that has a fitting text.
```js
const img = document.querySelectorAll('IMG')[0];
assert(img && img.alt !='' && img.src === 'https://i.imgur.com/p0J5baJ.jpg')
```
You should have an `h2` element with the text `Description`.
```js
const h2 = document.querySelectorAll('H2')[0];
assert(h2.innerText == 'Description');
```
You should have at least two `p` elements describing the recipe.
```js
const paragraphs = document.querySelectorAll('P');
assert(paragraphs.length > 1);
```
You should have an `h2` element with the text `Ingredients`.
```js
const h2 = document.querySelectorAll('H2')[1];
assert(h2.innerText == 'Ingredients');
```
You should have an unordered list `<ul>` with some ingredients as the list items `<li>`.
```js
const unorderedList = document.querySelectorAll('UL')[0];
const listItems = document.querySelectorAll('UL > LI');
assert(unorderedList && listItems && listItems.length > 1);
```
You should have an `h2` element with the text `Steps`.
```js
const h2 = document.querySelectorAll('H2')[2];
assert(h2.innerText == 'Steps');
```
You should have a `<ol>` with the the steps as the list items `<li>`.
```js
const orderedList = document.querySelectorAll('OL')[0];
const listItems = document.querySelectorAll('OL > LI');
assert(orderedList && listItems && listItems.length > 1);
```
You should have an `h2` element with the text `More Recipes`.
```js
const h2 = document.querySelectorAll('H2')[3];
assert(h2.innerText == 'More Recipes');
```
You should have an unordered list `<ul>` element with list items `<li>` that contain `<a>` tags which lead to other recipes.
```js
const unorderedList = document.querySelectorAll('UL')[1];
const listItems = unorderedList.querySelectorAll('LI');
const allAreListItems = unorderedList.children.length == listItems.length;
const containsAnchors = [...listItems].every(function(listItem) {
return listItem.querySelector("a") !== null;
});
assert(unorderedList && allAreListItems && containsAnchors && listItems.length > 1);
```
Your anchor tags linking to the recipes should have a `href` attribute with the value set to `#`
```js
const anchorTags = document.querySelectorAll("a");
const allAnchorsHaveHrefHash = [...anchorTags].every(function(anchorTag) {
return anchorTag.hasAttribute("href") && anchorTag.getAttribute("href") === "#";
});
assert(allAnchorsHaveHrefHash && anchorTags.length > 0);
```
# --seed--
## --seed-contents--
```html
```
```css
```
## --solutions--
```html
<!DOCTYPE html>
<html>
<head>
<title>The Odin Recipes</title>
</head>
<body>
<h1>Creamy Chocolate Fudge</h1>
<img src="https://i.imgur.com/p0J5baJ.jpg" alt="A delicious chocolate fudge dessert">
<h2>Description</h2>
<p>This recipe is for a rich and creamy chocolate fudge that is sure to satisfy your sweet tooth. It's perfect for a special occasion or as a tasty treat for any time of the year.</p>
<p>This recipe is easy to follow and only requires a few simple ingredients. With just a few steps, you'll be able to create a delicious dessert that everyone will love.</p>
<h2>Ingredients</h2>
<ul>
<li>1 cup sugar</li>
<li>1/2 cup unsalted butter</li>
<li>1/4 cup milk</li>
<li>1/4 cup cocoa powder</li>
<li>1/4 cup chocolate chips</li>
<li>1/4 tsp salt</li>
<li>1 tsp vanilla extract</li>
</ul>
<h2>Steps</h2>
<ol>
<li>In a medium saucepan, melt the butter over medium heat.</li>
<li>Add the sugar, milk, cocoa powder, and salt to the saucepan and stir until well combined.</li>
<li>Bring the mixture to a boil, stirring constantly, and then reduce the heat to low and simmer for 5 minutes.</li>
<li>Remove the saucepan from the heat and stir in the chocolate chips and vanilla extract until the chocolate is melted and the mixture is smooth.</li>
<li>Pour the fudge into a greased 8-inch square pan and let it cool completely before cutting into squares.</li>
</ol>
<h2>More Recipes</h2>
<ul>
<li><a href="#">Peanut Butter Cookies</a></li>
<li><a href="#">Lemon Bars</a></li>
<li><a href="#">Chocolate Chip Pancakes</a></li>
</ul>
</body>
</html>
```
@@ -7,11 +7,13 @@ dashedName: step-15
# --description--
Trasforma l'immagine in un link circondandola con i tag appropriati. Usa `https://freecatphotoapp.com` come valore dell'attributo dell'elemento di ancoraggio `href`.
In previous steps you used an anchor element to turn text into a link. Other types of content can also be turned into a link by wrapping it in anchor tags.
Turn the image into a link by surrounding it with necessary element tags. Use `https://freecatphotoapp.com` as the anchor's `href` attribute value.
# --hints--
Dovresti avere un elemento `img` con un valore `src` di `https://cdn.freecodecamp.org/curriculum/cat-photo-app/relaxing-cat.jpg`. Potresti averlo eliminato accidentalmente.
You should have an `img` element with an `src` value of `https://cdn.freecodecamp.org/curriculum/cat-photo-app/relaxing-cat.jpg`. You may have accidentally deleted it.
```js
assert(
@@ -21,37 +23,37 @@ assert(
);
```
L'elemento di ancoraggio (`a`) dovrebbe avere un tag di apertura. I tag di apertura hanno questa sintassi: `<nomeElemento>`.
Your anchor (`a`) element should have an opening tag. Opening tags have this syntax: `<elementName>`.
```js
assert(document.querySelectorAll('a').length >= 2);
```
Dovresti aggiungere un solo tag di apertura di ancoraggio (`a`). Rimuovi quelli di troppo.
You should only add one opening anchor (`a`) tag. Please remove any extras.
```js
assert(document.querySelectorAll('a').length === 2);
```
L'elemento di ancoraggio (`a`) dovrebbe avere un tag di chiusura. I tag di chiusura hanno un `/` subito dopo il carattere `<`.
Your anchor (`a`) element should have a closing tag. Closing tags have a `/` just after the `<` character.
```js
assert(code.match(/<\/a>/g).length >= 2);
```
Dovresti aggiungere un solo tag di chiusura di ancoraggio (`a`). Per favore, rimuovi quelli di troppo.
You should only add one closing anchor (`a`) tag. Please remove any extras.
```js
assert(code.match(/<\/a>/g).length === 2);
```
Il tuo elemento di ancoraggio (`a`) non ha un attributo `href`. Controlla che ci sia uno spazio dopo il nome del tag di apertura e/o che ci siano spazi prima di tutti i nomi degli attributi.
Your anchor (`a`) element does not have an `href` attribute. Check that there is a space after the opening tag's name and/or there are spaces before all attribute names.
```js
assert(document.querySelector('a').hasAttribute('href'));
```
L'elemento di ancoraggio (`a`) dovrebbe essere link a `https://freecatphotoapp.com`. Hai omesso l'URL o hai un refuso.
Your anchor (`a`) element should link to `https://freecatphotoapp.com`. You have either omitted the URL or have a typo.
```js
assert(
@@ -60,7 +62,7 @@ assert(
);
```
L'elemento `img` dovrebbe essere annidato all'interno dell'elemento di ancoraggio (`a`. L'intero elemento `img` dovrebbe essere all'interno dei tag di apertura e chiusura dell'elemento di ancoraggio (`a`).
Your `img` element should be nested within the anchor (`a`) element. The entire `img` element should be inside the opening and closing tags of the anchor (`a`) element.
```js
assert(document.querySelector('img').parentNode.nodeName === 'A');
@@ -55,6 +55,12 @@ assert.deepStrictEqual(
);
```
You should only have one `ol` element.
```js
assert([...document.querySelectorAll('ol')].length == 1);
```
# --seed--
## --seed-contents--
@@ -22,7 +22,7 @@ assert(
);
```
Nel primo pulsante di opzione manca l'attributo `checked`.
Your first radio button, with the `id` set to `indoor`, should have the `checked` attribute.
```js
assert($('input[type="radio"]')[0].hasAttribute('checked'));
@@ -7,7 +7,7 @@ dashedName: step-53
# --description--
Dopo l'ultimo elemento `.divider`, crea un elemento `p` e dagli il testo `Cholesterol 0mg 0%`. Inserisci il testo `Cholesterol` in un elemento `span` e assegna a quest'elemento `span` un attributo `class` con il valore `bold`. Annida il testo `0%` in un altro elemento `span` con l'attributo `class` impostato su `bold`. Infine annida gli elementi span `Cholesterol` e `0mg` all'interno di un altro elemento span per l'allineamento.
Dopo l'ultimo elemento `.divider`, crea un elemento `p` e dagli il testo `Cholesterol 0mg 0%`. Inserisci il testo `Cholesterol` in un elemento `span` e assegna a quest'elemento `span` un attributo `class` con il valore `bold`. Annida il testo `0%` in un altro elemento `span` con l'attributo `class` impostato su `bold`. Finally, nest the `Cholesterol` and `0mg` `span` elements inside an additional `span` element for alignment.
# --hints--
@@ -47,32 +47,33 @@ assert(typeof farey === 'function');
assert(Array.isArray(farey(3)));
```
`farey(3)` は `["1/3","1/2","2/3"]` を返します。
`farey(3)` should return `['0/1','1/3','1/2','2/3','1/1']`
```js
assert.deepEqual(farey(3), ['1/3', '1/2', '2/3']);
assert.deepEqual(farey(3),['0/1', '1/3', '1/2', '2/3', '1/1']);
```
`farey(4)` は `["1/4","1/3","1/2","2/4","2/3","3/4"]` を返します。
`farey(4)` should return `['0/1','1/4','1/3','1/2','2/3','3/4','1/1']`
```js
assert.deepEqual(farey(4), ['1/4', '1/3', '1/2', '2/4', '2/3', '3/4']);
assert.deepEqual(farey(4), ['0/1', '1/4', '1/3', '1/2', '2/3', '3/4', '1/1']);
```
`farey(5)` は `["1/5","1/4","1/3","2/5","1/2","2/4","3/5","2/3","3/4","4/5"]` を返します。
`farey(5)` should return `['0/1','1/5','1/4','1/3','2/5','1/2','3/5','2/3','3/4','4/5','1/1']`
```js
assert.deepEqual(farey(5), [
'0/1',
'1/5',
'1/4',
'1/3',
'2/5',
'1/2',
'2/4',
'3/5',
'2/3',
'3/4',
'4/5'
'4/5',
'1/1'
]);
```
@@ -89,21 +90,17 @@ function farey(n) {
# --solutions--
```js
function farey(n){
let farSeq=[];
for(let den = 1; den <= n; den++){
for(let num = 1; num < den; num++){
farSeq.push({
str:num+"/"+den,
val:num/den});
}
function farey(n) {
const sequence = [{ string: "0/1", float: 0.0 }];
for (let i = 1; i < n; i++) {
for (let j = n; j >= i; j--) {
if (i === 1 || j % i > 0) {
sequence.push({ string: `${i}/${j}`, float: i / j });
}
}
farSeq.sort(function(a,b){
return a.val-b.val;
});
farSeq=farSeq.map(function(a){
return a.str;
});
return farSeq;
}
return sequence
.sort((a, b) => a.float - b.float)
.map(e => e.string)
}
```
@@ -0,0 +1,204 @@
---
id: 6391d1a4f7ac71efd0621380
title: Build a Recipe Page Project
challengeType: 14
dashedName: project-create-a-recipe-page
---
# --description--
The website will consist of a main index page which will have links to a few recipes. The website won’t look very pretty by the time you’ve finished.
**User Stories:**
1. Your recipe page should contain a `DOCTYPE` tag.
1. Your recipe page should include an `html` element with a `head` and `body` element as children.
1. You should have a `title` element within the `head` element with the text `The Odin Recipes`.
1. You should see an `h1` element that has the text `Creamy Chocolate Fudge`.
1. You should see an image with the url `*placeholder-fcc-cdn*` with a fitting `alt` text.
1. There should be an `h2` element with the text `Description` under the image.
1. You should see a couple of paragraphs under `Description` that describe the recipe.
1. There should be an `h2` element with the text `Ingredients`
1. Under the `Ingredients` heading there should be an unordered list with the ingredients needed for the recipe.
1. Under the list of ingredients add another heading called `Steps`.
1. You should see an ordered list with a couple of steps needed to complete the recipe.
1. Under the steps there should be an `h2` element with the text `More Recipes`
1. You should see a couple of links to other recipes inside an unordered list which has a couple of list items with anchor elements within.
1. These anchor elements should have `href` attribute with the value set to `#`
# --hints--
You should have a `DOCTYPE` tag.
```js
assert(code.match(/<!DOCTYPE\s+?html\s*?>/gi));
```
You should have a `html` element with `head` and `body` element.
```js
const html = document.querySelectorAll('html')[0];
const head = document.querySelectorAll('html > head')[0];
const body = document.querySelectorAll('html > body')[0];
assert(html && head && body);
```
You should have a `title` element within the `head` element that contains the text `The Odin Recipes`.
```js
assert(document.querySelectorAll('HEAD > TITLE')[0].innerText == 'The Odin Recipes');
```
You should have a `h1` element within your `body` element that contains the text `Creamy Chocolate Fudge`.
```js
assert(document.querySelectorAll('BODY > H1')[0].innerText == 'Creamy Chocolate Fudge');
```
You should have an image with the url `*placeholder-fcc-cdn*` with an `alt` attribute that has a fitting text.
```js
const img = document.querySelectorAll('IMG')[0];
assert(img && img.alt !='' && img.src === 'https://i.imgur.com/p0J5baJ.jpg')
```
You should have an `h2` element with the text `Description`.
```js
const h2 = document.querySelectorAll('H2')[0];
assert(h2.innerText == 'Description');
```
You should have at least two `p` elements describing the recipe.
```js
const paragraphs = document.querySelectorAll('P');
assert(paragraphs.length > 1);
```
You should have an `h2` element with the text `Ingredients`.
```js
const h2 = document.querySelectorAll('H2')[1];
assert(h2.innerText == 'Ingredients');
```
You should have an unordered list `<ul>` with some ingredients as the list items `<li>`.
```js
const unorderedList = document.querySelectorAll('UL')[0];
const listItems = document.querySelectorAll('UL > LI');
assert(unorderedList && listItems && listItems.length > 1);
```
You should have an `h2` element with the text `Steps`.
```js
const h2 = document.querySelectorAll('H2')[2];
assert(h2.innerText == 'Steps');
```
You should have a `<ol>` with the the steps as the list items `<li>`.
```js
const orderedList = document.querySelectorAll('OL')[0];
const listItems = document.querySelectorAll('OL > LI');
assert(orderedList && listItems && listItems.length > 1);
```
You should have an `h2` element with the text `More Recipes`.
```js
const h2 = document.querySelectorAll('H2')[3];
assert(h2.innerText == 'More Recipes');
```
You should have an unordered list `<ul>` element with list items `<li>` that contain `<a>` tags which lead to other recipes.
```js
const unorderedList = document.querySelectorAll('UL')[1];
const listItems = unorderedList.querySelectorAll('LI');
const allAreListItems = unorderedList.children.length == listItems.length;
const containsAnchors = [...listItems].every(function(listItem) {
return listItem.querySelector("a") !== null;
});
assert(unorderedList && allAreListItems && containsAnchors && listItems.length > 1);
```
Your anchor tags linking to the recipes should have a `href` attribute with the value set to `#`
```js
const anchorTags = document.querySelectorAll("a");
const allAnchorsHaveHrefHash = [...anchorTags].every(function(anchorTag) {
return anchorTag.hasAttribute("href") && anchorTag.getAttribute("href") === "#";
});
assert(allAnchorsHaveHrefHash && anchorTags.length > 0);
```
# --seed--
## --seed-contents--
```html
```
```css
```
## --solutions--
```html
<!DOCTYPE html>
<html>
<head>
<title>The Odin Recipes</title>
</head>
<body>
<h1>Creamy Chocolate Fudge</h1>
<img src="https://i.imgur.com/p0J5baJ.jpg" alt="A delicious chocolate fudge dessert">
<h2>Description</h2>
<p>This recipe is for a rich and creamy chocolate fudge that is sure to satisfy your sweet tooth. It's perfect for a special occasion or as a tasty treat for any time of the year.</p>
<p>This recipe is easy to follow and only requires a few simple ingredients. With just a few steps, you'll be able to create a delicious dessert that everyone will love.</p>
<h2>Ingredients</h2>
<ul>
<li>1 cup sugar</li>
<li>1/2 cup unsalted butter</li>
<li>1/4 cup milk</li>
<li>1/4 cup cocoa powder</li>
<li>1/4 cup chocolate chips</li>
<li>1/4 tsp salt</li>
<li>1 tsp vanilla extract</li>
</ul>
<h2>Steps</h2>
<ol>
<li>In a medium saucepan, melt the butter over medium heat.</li>
<li>Add the sugar, milk, cocoa powder, and salt to the saucepan and stir until well combined.</li>
<li>Bring the mixture to a boil, stirring constantly, and then reduce the heat to low and simmer for 5 minutes.</li>
<li>Remove the saucepan from the heat and stir in the chocolate chips and vanilla extract until the chocolate is melted and the mixture is smooth.</li>
<li>Pour the fudge into a greased 8-inch square pan and let it cool completely before cutting into squares.</li>
</ol>
<h2>More Recipes</h2>
<ul>
<li><a href="#">Peanut Butter Cookies</a></li>
<li><a href="#">Lemon Bars</a></li>
<li><a href="#">Chocolate Chip Pancakes</a></li>
</ul>
</body>
</html>
```
@@ -7,11 +7,13 @@ dashedName: step-15
# --description--
画像を適切な要素のタグで囲んで、リンクに変換してください。 アンカーの `href` 属性値には `https://freecatphotoapp.com` を使用してください。
In previous steps you used an anchor element to turn text into a link. Other types of content can also be turned into a link by wrapping it in anchor tags.
Turn the image into a link by surrounding it with necessary element tags. Use `https://freecatphotoapp.com` as the anchor's `href` attribute value.
# --hints--
`img` 要素および `src` の値 `https://cdn.freecodecamp.org/curriculum/cat-photo-app/relaxing-cat.jpg` が必要です。 誤って削除された可能性があります。
You should have an `img` element with an `src` value of `https://cdn.freecodecamp.org/curriculum/cat-photo-app/relaxing-cat.jpg`. You may have accidentally deleted it.
```js
assert(
@@ -21,37 +23,37 @@ assert(
);
```
アンカー (`a`) 要素には開始タグが必要です。 開始タグは `<elementName>` のような形式の構文です。
Your anchor (`a`) element should have an opening tag. Opening tags have this syntax: `<elementName>`.
```js
assert(document.querySelectorAll('a').length >= 2);
```
アンカー (`a`) の開始タグは 1 つだけ追加してください。 余分なものは削除してください。
You should only add one opening anchor (`a`) tag. Please remove any extras.
```js
assert(document.querySelectorAll('a').length === 2);
```
アンカー (`a`) 要素には終了タグが必要です。 終了タグは `<` の直後に `/` があります。
Your anchor (`a`) element should have a closing tag. Closing tags have a `/` just after the `<` character.
```js
assert(code.match(/<\/a>/g).length >= 2);
```
アンカー (`a`) の終了タグは 1 つだけ追加してください。 余分なものは削除してください。
You should only add one closing anchor (`a`) tag. Please remove any extras.
```js
assert(code.match(/<\/a>/g).length === 2);
```
アンカー (`a`) 要素に `href` 属性がありません。 開始タグのタグ名の後にスペースがあることと、すべての属性名の前にスペースがあることを確認してください。
Your anchor (`a`) element does not have an `href` attribute. Check that there is a space after the opening tag's name and/or there are spaces before all attribute names.
```js
assert(document.querySelector('a').hasAttribute('href'));
```
アンカー (`a`) 要素は `https://freecatphotoapp.com` にリンクされる必要があります。 URL が設定されていないか、誤字脱字があります。
Your anchor (`a`) element should link to `https://freecatphotoapp.com`. You have either omitted the URL or have a typo.
```js
assert(
@@ -60,7 +62,7 @@ assert(
);
```
`img` 要素はアンカー (`a`) 要素の中にネストされている必要があります。 `img` 要素全体が、アンカー (`a`) 要素の開始タグと終了タグの内側にあるようにしてください。
Your `img` element should be nested within the anchor (`a`) element. The entire `img` element should be inside the opening and closing tags of the anchor (`a`) element.
```js
assert(document.querySelector('img').parentNode.nodeName === 'A');
@@ -55,6 +55,12 @@ assert.deepStrictEqual(
);
```
You should only have one `ol` element.
```js
assert([...document.querySelectorAll('ol')].length == 1);
```
# --seed--
## --seed-contents--
@@ -22,7 +22,7 @@ assert(
);
```
1 つ目のラジオボタンに `checked` 属性が不足しています。
Your first radio button, with the `id` set to `indoor`, should have the `checked` attribute.
```js
assert($('input[type="radio"]')[0].hasAttribute('checked'));
@@ -7,7 +7,7 @@ dashedName: step-53
# --description--
最後の `.divider` の後に新しい `p` 要素を作成し、テキストを `Cholesterol 0mg 0%` にしてください。 `Cholesterol` というテキストを `span` 要素で囲み、その `span` 要素の `class` 属性を `bold` に設定してください。 Wrap the text `0%` in another `span` element, with the `class` set to `bold`. Finally, nest the `Cholesterol` and `0mg` span elements inside an additional span element for alignment.
最後の `.divider` の後に新しい `p` 要素を作成し、テキストを `Cholesterol 0mg 0%` にしてください。 `Cholesterol` というテキストを `span` 要素で囲み、その `span` 要素の `class` 属性を `bold` に設定してください。 Wrap the text `0%` in another `span` element, with the `class` set to `bold`. Finally, nest the `Cholesterol` and `0mg` `span` elements inside an additional `span` element for alignment.
# --hints--
@@ -47,32 +47,33 @@ assert(typeof farey === 'function');
assert(Array.isArray(farey(3)));
```
`farey(3)` deve retornar `["1/3","1/2","2/3"]`
`farey(3)` should return `['0/1','1/3','1/2','2/3','1/1']`
```js
assert.deepEqual(farey(3), ['1/3', '1/2', '2/3']);
assert.deepEqual(farey(3),['0/1', '1/3', '1/2', '2/3', '1/1']);
```
`farey(4)` deve retornar `["1/4","1/3","1/2","2/4","2/3","3/4"]`
`farey(4)` should return `['0/1','1/4','1/3','1/2','2/3','3/4','1/1']`
```js
assert.deepEqual(farey(4), ['1/4', '1/3', '1/2', '2/4', '2/3', '3/4']);
assert.deepEqual(farey(4), ['0/1', '1/4', '1/3', '1/2', '2/3', '3/4', '1/1']);
```
`farey(5)` deve retornar `["1/5","1/4","1/3","2/5","1/2","2/4","3/5","2/3","3/4","4/5"]`
`farey(5)` should return `['0/1','1/5','1/4','1/3','2/5','1/2','3/5','2/3','3/4','4/5','1/1']`
```js
assert.deepEqual(farey(5), [
'0/1',
'1/5',
'1/4',
'1/3',
'2/5',
'1/2',
'2/4',
'3/5',
'2/3',
'3/4',
'4/5'
'4/5',
'1/1'
]);
```
@@ -89,21 +90,17 @@ function farey(n) {
# --solutions--
```js
function farey(n){
let farSeq=[];
for(let den = 1; den <= n; den++){
for(let num = 1; num < den; num++){
farSeq.push({
str:num+"/"+den,
val:num/den});
}
function farey(n) {
const sequence = [{ string: "0/1", float: 0.0 }];
for (let i = 1; i < n; i++) {
for (let j = n; j >= i; j--) {
if (i === 1 || j % i > 0) {
sequence.push({ string: `${i}/${j}`, float: i / j });
}
}
farSeq.sort(function(a,b){
return a.val-b.val;
});
farSeq=farSeq.map(function(a){
return a.str;
});
return farSeq;
}
return sequence
.sort((a, b) => a.float - b.float)
.map(e => e.string)
}
```
@@ -0,0 +1,204 @@
---
id: 6391d1a4f7ac71efd0621380
title: Build a Recipe Page Project
challengeType: 14
dashedName: project-create-a-recipe-page
---
# --description--
The website will consist of a main index page which will have links to a few recipes. The website won’t look very pretty by the time you’ve finished.
**User Stories:**
1. Your recipe page should contain a `DOCTYPE` tag.
1. Your recipe page should include an `html` element with a `head` and `body` element as children.
1. You should have a `title` element within the `head` element with the text `The Odin Recipes`.
1. You should see an `h1` element that has the text `Creamy Chocolate Fudge`.
1. You should see an image with the url `*placeholder-fcc-cdn*` with a fitting `alt` text.
1. There should be an `h2` element with the text `Description` under the image.
1. You should see a couple of paragraphs under `Description` that describe the recipe.
1. There should be an `h2` element with the text `Ingredients`
1. Under the `Ingredients` heading there should be an unordered list with the ingredients needed for the recipe.
1. Under the list of ingredients add another heading called `Steps`.
1. You should see an ordered list with a couple of steps needed to complete the recipe.
1. Under the steps there should be an `h2` element with the text `More Recipes`
1. You should see a couple of links to other recipes inside an unordered list which has a couple of list items with anchor elements within.
1. These anchor elements should have `href` attribute with the value set to `#`
# --hints--
You should have a `DOCTYPE` tag.
```js
assert(code.match(/<!DOCTYPE\s+?html\s*?>/gi));
```
You should have a `html` element with `head` and `body` element.
```js
const html = document.querySelectorAll('html')[0];
const head = document.querySelectorAll('html > head')[0];
const body = document.querySelectorAll('html > body')[0];
assert(html && head && body);
```
You should have a `title` element within the `head` element that contains the text `The Odin Recipes`.
```js
assert(document.querySelectorAll('HEAD > TITLE')[0].innerText == 'The Odin Recipes');
```
You should have a `h1` element within your `body` element that contains the text `Creamy Chocolate Fudge`.
```js
assert(document.querySelectorAll('BODY > H1')[0].innerText == 'Creamy Chocolate Fudge');
```
You should have an image with the url `*placeholder-fcc-cdn*` with an `alt` attribute that has a fitting text.
```js
const img = document.querySelectorAll('IMG')[0];
assert(img && img.alt !='' && img.src === 'https://i.imgur.com/p0J5baJ.jpg')
```
You should have an `h2` element with the text `Description`.
```js
const h2 = document.querySelectorAll('H2')[0];
assert(h2.innerText == 'Description');
```
You should have at least two `p` elements describing the recipe.
```js
const paragraphs = document.querySelectorAll('P');
assert(paragraphs.length > 1);
```
You should have an `h2` element with the text `Ingredients`.
```js
const h2 = document.querySelectorAll('H2')[1];
assert(h2.innerText == 'Ingredients');
```
You should have an unordered list `<ul>` with some ingredients as the list items `<li>`.
```js
const unorderedList = document.querySelectorAll('UL')[0];
const listItems = document.querySelectorAll('UL > LI');
assert(unorderedList && listItems && listItems.length > 1);
```
You should have an `h2` element with the text `Steps`.
```js
const h2 = document.querySelectorAll('H2')[2];
assert(h2.innerText == 'Steps');
```
You should have a `<ol>` with the the steps as the list items `<li>`.
```js
const orderedList = document.querySelectorAll('OL')[0];
const listItems = document.querySelectorAll('OL > LI');
assert(orderedList && listItems && listItems.length > 1);
```
You should have an `h2` element with the text `More Recipes`.
```js
const h2 = document.querySelectorAll('H2')[3];
assert(h2.innerText == 'More Recipes');
```
You should have an unordered list `<ul>` element with list items `<li>` that contain `<a>` tags which lead to other recipes.
```js
const unorderedList = document.querySelectorAll('UL')[1];
const listItems = unorderedList.querySelectorAll('LI');
const allAreListItems = unorderedList.children.length == listItems.length;
const containsAnchors = [...listItems].every(function(listItem) {
return listItem.querySelector("a") !== null;
});
assert(unorderedList && allAreListItems && containsAnchors && listItems.length > 1);
```
Your anchor tags linking to the recipes should have a `href` attribute with the value set to `#`
```js
const anchorTags = document.querySelectorAll("a");
const allAnchorsHaveHrefHash = [...anchorTags].every(function(anchorTag) {
return anchorTag.hasAttribute("href") && anchorTag.getAttribute("href") === "#";
});
assert(allAnchorsHaveHrefHash && anchorTags.length > 0);
```
# --seed--
## --seed-contents--
```html
```
```css
```
## --solutions--
```html
<!DOCTYPE html>
<html>
<head>
<title>The Odin Recipes</title>
</head>
<body>
<h1>Creamy Chocolate Fudge</h1>
<img src="https://i.imgur.com/p0J5baJ.jpg" alt="A delicious chocolate fudge dessert">
<h2>Description</h2>
<p>This recipe is for a rich and creamy chocolate fudge that is sure to satisfy your sweet tooth. It's perfect for a special occasion or as a tasty treat for any time of the year.</p>
<p>This recipe is easy to follow and only requires a few simple ingredients. With just a few steps, you'll be able to create a delicious dessert that everyone will love.</p>
<h2>Ingredients</h2>
<ul>
<li>1 cup sugar</li>
<li>1/2 cup unsalted butter</li>
<li>1/4 cup milk</li>
<li>1/4 cup cocoa powder</li>
<li>1/4 cup chocolate chips</li>
<li>1/4 tsp salt</li>
<li>1 tsp vanilla extract</li>
</ul>
<h2>Steps</h2>
<ol>
<li>In a medium saucepan, melt the butter over medium heat.</li>
<li>Add the sugar, milk, cocoa powder, and salt to the saucepan and stir until well combined.</li>
<li>Bring the mixture to a boil, stirring constantly, and then reduce the heat to low and simmer for 5 minutes.</li>
<li>Remove the saucepan from the heat and stir in the chocolate chips and vanilla extract until the chocolate is melted and the mixture is smooth.</li>
<li>Pour the fudge into a greased 8-inch square pan and let it cool completely before cutting into squares.</li>
</ol>
<h2>More Recipes</h2>
<ul>
<li><a href="#">Peanut Butter Cookies</a></li>
<li><a href="#">Lemon Bars</a></li>
<li><a href="#">Chocolate Chip Pancakes</a></li>
</ul>
</body>
</html>
```
@@ -7,11 +7,13 @@ dashedName: step-15
# --description--
Transforme a imagem em um link, envolvendo-a com as tags dos elementos necessários. Use `https://freecatphotoapp.com` como valor do atributo `href` do elemento de âncora.
In previous steps you used an anchor element to turn text into a link. Other types of content can also be turned into a link by wrapping it in anchor tags.
Turn the image into a link by surrounding it with necessary element tags. Use `https://freecatphotoapp.com` as the anchor's `href` attribute value.
# --hints--
O valor do atributo `src` do elemento `img` deve estar definido como `https://cdn.freecodecamp.org/curriculum/cat-photo-app/relaxing-cat.jpg`. Você pode tê-lo excluído acidentalmente.
You should have an `img` element with an `src` value of `https://cdn.freecodecamp.org/curriculum/cat-photo-app/relaxing-cat.jpg`. You may have accidentally deleted it.
```js
assert(
@@ -21,37 +23,37 @@ assert(
);
```
O elemento de âncora (`a`) deve ter uma tag de abertura. As tags de abertura têm essa sintaxe: `<elementName>`.
Your anchor (`a`) element should have an opening tag. Opening tags have this syntax: `<elementName>`.
```js
assert(document.querySelectorAll('a').length >= 2);
```
Você deve adicionar apenas uma tag de abertura para o elemento de âncora (`a`). Remova as tags adicionais.
You should only add one opening anchor (`a`) tag. Please remove any extras.
```js
assert(document.querySelectorAll('a').length === 2);
```
O elemento de âncora (`a`) deve ter uma tag de fechamento. As tags de fechamento têm um caractere `/` logo após o caractere `<`.
Your anchor (`a`) element should have a closing tag. Closing tags have a `/` just after the `<` character.
```js
assert(code.match(/<\/a>/g).length >= 2);
```
Você deve adicionar apenas uma tag de fechamento para o elemento de âncora (`a`). Remova as tags adicionais.
You should only add one closing anchor (`a`) tag. Please remove any extras.
```js
assert(code.match(/<\/a>/g).length === 2);
```
O elemento de âncora (`a`) não tem um atributo `href`. Verifique se há um espaço depois do nome da tag de abertura e/ou se há espaços antes de todos os nomes dos atributos.
Your anchor (`a`) element does not have an `href` attribute. Check that there is a space after the opening tag's name and/or there are spaces before all attribute names.
```js
assert(document.querySelector('a').hasAttribute('href'));
```
O elemento de âncora (`a`) deve fazer um link para `https://freecatphotoapp.com`. Você omitiu o URL ou tem um erro de digitação.
Your anchor (`a`) element should link to `https://freecatphotoapp.com`. You have either omitted the URL or have a typo.
```js
assert(
@@ -60,7 +62,7 @@ assert(
);
```
O elemento `img` deve estar dentro do elemento de âncora (`a`). Todo o elemento `img` deve estar dentro das tags de abertura e fechamento do elemento de âncora (`a`).
Your `img` element should be nested within the anchor (`a`) element. The entire `img` element should be inside the opening and closing tags of the anchor (`a`) element.
```js
assert(document.querySelector('img').parentNode.nodeName === 'A');
@@ -55,6 +55,12 @@ assert.deepStrictEqual(
);
```
You should only have one `ol` element.
```js
assert([...document.querySelectorAll('ol')].length == 1);
```
# --seed--
## --seed-contents--
@@ -22,7 +22,7 @@ assert(
);
```
O primeiro botão de opção não tem o atributo `checked`.
Your first radio button, with the `id` set to `indoor`, should have the `checked` attribute.
```js
assert($('input[type="radio"]')[0].hasAttribute('checked'));
@@ -7,7 +7,7 @@ dashedName: step-53
# --description--
Após o último `.divider`, crie um elemento `p` com o texto `Cholesterol 0mg 0%`. Encapsule o texto `Cholesterol` em um elemento `span`, e dê a ele o elemento `span` com o atributo `class` definido como `bold`. Encapsule o texto `0%` em outro elemento `span`, com a `class` definida como `bold`. Por fim, coloque os elementos de span `Cholesterol` e `0mg` dentro de um elemento de span adicional para realizar o alinhamento.
Após o último `.divider`, crie um elemento `p` com o texto `Cholesterol 0mg 0%`. Encapsule o texto `Cholesterol` em um elemento `span`, e dê a ele o elemento `span` com o atributo `class` definido como `bold`. Encapsule o texto `0%` em outro elemento `span`, com a `class` definida como `bold`. Finally, nest the `Cholesterol` and `0mg` `span` elements inside an additional `span` element for alignment.
# --hints--
@@ -14,61 +14,61 @@ dashedName: boo-who
# --hints--
`booWho(true)` повинен повертати `true`.
`booWho(true)` має повертати `true`.
```js
assert.strictEqual(booWho(true), true);
```
`booWho(false)` повинен повертати `true`.
`booWho(false)` має повертати `true`.
```js
assert.strictEqual(booWho(false), true);
```
`booWho([1, 2, 3])` повинен повертати `false`.
`booWho([1, 2, 3])` має повертати `false`.
```js
assert.strictEqual(booWho([1, 2, 3]), false);
```
`booWho([].slice)` повинен повертати `false`.
`booWho([].slice)` має повертати `false`.
```js
assert.strictEqual(booWho([].slice), false);
```
`booWho({ "a": 1 })` повинен повертати `false`.
`booWho({ "a": 1 })` має повертати `false`.
```js
assert.strictEqual(booWho({ a: 1 }), false);
```
`booWho(1)` повинен повертати `false`.
`booWho(1)` має повертати `false`.
```js
assert.strictEqual(booWho(1), false);
```
`booWho(NaN)` повинен повертати `false`.
`booWho(NaN)` має повертати `false`.
```js
assert.strictEqual(booWho(NaN), false);
```
`booWho("a")` повинен повертати `false`.
`booWho("a")` має повертати `false`.
```js
assert.strictEqual(booWho('a'), false);
```
`booWho("true")` повинен повертати `false`.
`booWho("true")` має повертати `false`.
```js
assert.strictEqual(booWho('true'), false);
```
`booWho("false")` повинен повертати `false`.
`booWho("false")` має повертати `false`.
```js
assert.strictEqual(booWho('false'), false);
@@ -12,7 +12,7 @@ dashedName: chunky-monkey
# --hints--
`chunkArrayInGroups(["a", "b", "c", "d"], 2)` повинен повертати `[["a", "b"], ["c", "d"]]`.
`chunkArrayInGroups(["a", "b", "c", "d"], 2)` має повертати `[["a", "b"], ["c", "d"]]`.
```js
assert.deepEqual(chunkArrayInGroups(['a', 'b', 'c', 'd'], 2), [
@@ -21,7 +21,7 @@ assert.deepEqual(chunkArrayInGroups(['a', 'b', 'c', 'd'], 2), [
]);
```
`chunkArrayInGroups([0, 1, 2, 3, 4, 5], 3)` повинен повертати `[[0, 1, 2], [3, 4, 5]]`.
`chunkArrayInGroups([0, 1, 2, 3, 4, 5], 3)` має повертати `[[0, 1, 2], [3, 4, 5]]`.
```js
assert.deepEqual(chunkArrayInGroups([0, 1, 2, 3, 4, 5], 3), [
@@ -30,7 +30,7 @@ assert.deepEqual(chunkArrayInGroups([0, 1, 2, 3, 4, 5], 3), [
]);
```
`chunkArrayInGroups([0, 1, 2, 3, 4, 5], 2)` повинен повертати `[[0, 1], [2, 3], [4, 5]]`.
`chunkArrayInGroups([0, 1, 2, 3, 4, 5], 2)` має повертати `[[0, 1], [2, 3], [4, 5]]`.
```js
assert.deepEqual(chunkArrayInGroups([0, 1, 2, 3, 4, 5], 2), [
@@ -40,7 +40,7 @@ assert.deepEqual(chunkArrayInGroups([0, 1, 2, 3, 4, 5], 2), [
]);
```
`chunkArrayInGroups([0, 1, 2, 3, 4, 5], 4)` повинен повертати `[[0, 1, 2, 3], [4, 5]]`.
`chunkArrayInGroups([0, 1, 2, 3, 4, 5], 4)` має повертати `[[0, 1, 2, 3], [4, 5]]`.
```js
assert.deepEqual(chunkArrayInGroups([0, 1, 2, 3, 4, 5], 4), [
@@ -49,7 +49,7 @@ assert.deepEqual(chunkArrayInGroups([0, 1, 2, 3, 4, 5], 4), [
]);
```
`chunkArrayInGroups([0, 1, 2, 3, 4, 5, 6], 3)` повинен повертати `[[0, 1, 2], [3, 4, 5], [6]]`.
`chunkArrayInGroups([0, 1, 2, 3, 4, 5, 6], 3)` має повертати `[[0, 1, 2], [3, 4, 5], [6]]`.
```js
assert.deepEqual(chunkArrayInGroups([0, 1, 2, 3, 4, 5, 6], 3), [
@@ -59,7 +59,7 @@ assert.deepEqual(chunkArrayInGroups([0, 1, 2, 3, 4, 5, 6], 3), [
]);
```
`chunkArrayInGroups([0, 1, 2, 3, 4, 5, 6, 7, 8], 4)` повинен повертати `[[0, 1, 2, 3], [4, 5, 6, 7], [8]]`.
`chunkArrayInGroups([0, 1, 2, 3, 4, 5, 6, 7, 8], 4)` має повертати `[[0, 1, 2, 3], [4, 5, 6, 7], [8]]`.
```js
assert.deepEqual(chunkArrayInGroups([0, 1, 2, 3, 4, 5, 6, 7, 8], 4), [
@@ -69,7 +69,7 @@ assert.deepEqual(chunkArrayInGroups([0, 1, 2, 3, 4, 5, 6, 7, 8], 4), [
]);
```
`chunkArrayInGroups([0, 1, 2, 3, 4, 5, 6, 7, 8], 2)` повинен повертати `[[0, 1], [2, 3], [4, 5], [6, 7], [8]]`.
`chunkArrayInGroups([0, 1, 2, 3, 4, 5, 6, 7, 8], 2)` має повертати `[[0, 1], [2, 3], [4, 5], [6, 7], [8]]`.
```js
assert.deepEqual(chunkArrayInGroups([0, 1, 2, 3, 4, 5, 6, 7, 8], 2), [
@@ -14,25 +14,25 @@ dashedName: confirm-the-ending
# --hints--
`confirmEnding("Bastian", "n")` повинен повертати `true`.
`confirmEnding("Bastian", "n")` має повертати `true`.
```js
assert(confirmEnding('Bastian', 'n') === true);
```
`confirmEnding("Congratulation", "on")` повинен повертати `true`.
`confirmEnding("Congratulation", "on")` має повертати `true`.
```js
assert(confirmEnding('Congratulation', 'on') === true);
```
`confirmEnding("Connor", "n")` повинен повертати `false`.
`confirmEnding("Connor", "n")` має повертати `false`.
```js
assert(confirmEnding('Connor', 'n') === false);
```
`confirmEnding("Walking on water and developing software from a specification are easy if both are frozen", "specification")` повинен повертати `false`.
`confirmEnding("Walking on water and developing software from a specification are easy if both are frozen", "specification")` має повертати `false`.
```js
assert(
@@ -43,31 +43,31 @@ assert(
);
```
`confirmEnding("He has to give me a new name", "name")` повинен повертати `true`.
`confirmEnding("He has to give me a new name", "name")` має повертати `true`.
```js
assert(confirmEnding('He has to give me a new name', 'name') === true);
```
`confirmEnding("Open sesame", "same")` повинен повертати `true`.
`confirmEnding("Open sesame", "same")` має повертати `true`.
```js
assert(confirmEnding('Open sesame', 'same') === true);
```
`confirmEnding("Open sesame", "sage")` повинен повертати `false`.
`confirmEnding("Open sesame", "sage")` має повертати `false`.
```js
assert(confirmEnding('Open sesame', 'sage') === false);
```
`confirmEnding("Open sesame", "game")` повинен повертати `false`.
`confirmEnding("Open sesame", "game")` має повертати `false`.
```js
assert(confirmEnding('Open sesame', 'game') === false);
```
`confirmEnding("If you want to save our world, you must hurry. We dont know how much longer we can withstand the nothing", "mountain")` повинен повертати `false`.
`confirmEnding("If you want to save our world, you must hurry. We dont know how much longer we can withstand the nothing", "mountain")` має повертати `false`.
```js
assert(
@@ -78,13 +78,13 @@ assert(
);
```
`confirmEnding("Abstraction", "action")` повинен повертати `true`.
`confirmEnding("Abstraction", "action")` має повертати `true`.
```js
assert(confirmEnding('Abstraction', 'action') === true);
```
У вашому коді не повинен використовуватися вбудований метод `.endsWith()` для вирішення завдання.
Ваш код не повинен використовувати вбудований метод `.endsWith()`, щоб розв’язати це завдання.
```js
assert(!/\.endsWith\(.*?\)\s*?;?/.test(code) && !/\['endsWith'\]/.test(code));
@@ -14,37 +14,37 @@ dashedName: convert-celsius-to-fahrenheit
# --hints--
`convertCtoF(0)` повинен повертати число
`convertCtoF(0)` має повертати число
```js
assert(typeof convertCtoF(0) === 'number');
```
`convertCtoF(-30)` повинен повертати значення `-22`
`convertCtoF(-30)` має повертати значення `-22`
```js
assert(convertCtoF(-30) === -22);
```
`convertCtoF(-10)` повинен повертати значення `14`
`convertCtoF(-10)` має повертати значення `14`
```js
assert(convertCtoF(-10) === 14);
```
`convertCtoF(0)` повинен повертати значення `32`
`convertCtoF(0)` має повертати значення `32`
```js
assert(convertCtoF(0) === 32);
```
`convertCtoF(20)` повинен повертати значення `68`
`convertCtoF(20)` має повертати значення `68`
```js
assert(convertCtoF(20) === 68);
```
`convertCtoF(30)` повинен повертати значення `86`
`convertCtoF(30)` має повертати значення `86`
```js
assert(convertCtoF(30) === 86);
@@ -20,31 +20,31 @@ dashedName: factorialize-a-number
# --hints--
`factorialize(5)` повинен повертати число.
`factorialize(5)` має повертати число.
```js
assert(typeof factorialize(5) === 'number');
```
`factorialize(5)` повинен повертати `120`.
`factorialize(5)` має повертати `120`.
```js
assert(factorialize(5) === 120);
```
`factorialize(10)` повинен повертати `3628800`.
`factorialize(10)` має повертати `3628800`.
```js
assert(factorialize(10) === 3628800);
```
`factorialize(20)` повинен повертати `2432902008176640000`.
`factorialize(20)` має повертати `2432902008176640000`.
```js
assert(factorialize(20) === 2432902008176640000);
```
`factorialize(0)` повинен повертати `1`.
`factorialize(0)` має повертати `1`.
```js
assert(factorialize(0) === 1);
@@ -16,25 +16,25 @@ dashedName: falsy-bouncer
# --hints--
`bouncer([7, "ate", "", false, 9])` повинен повертати `[7, "ate", 9]`.
`bouncer([7, "ate", "", false, 9])` має повертати `[7, "ate", 9]`.
```js
assert.deepEqual(bouncer([7, 'ate', '', false, 9]), [7, 'ate', 9]);
```
`bouncer(["a", "b", "c"])` повинен повертати `["a", "b", "c"]`.
`bouncer(["a", "b", "c"])` має повертати `["a", "b", "c"]`.
```js
assert.deepEqual(bouncer(['a', 'b', 'c']), ['a', 'b', 'c']);
```
`bouncer([false, null, 0, NaN, undefined, ""])` повинен повертати `[]`.
`bouncer([false, null, 0, NaN, undefined, ""])` має повертати `[]`.
```js
assert.deepEqual(bouncer([false, null, 0, NaN, undefined, '']), []);
```
`bouncer([null, NaN, 1, 2, undefined])` повинен повертати `[1, 2]`.
`bouncer([null, NaN, 1, 2, undefined])` має повертати `[1, 2]`.
```js
assert.deepEqual(bouncer([null, NaN, 1, 2, undefined]), [1, 2]);
@@ -14,7 +14,7 @@ dashedName: find-the-longest-word-in-a-string
# --hints--
`findLongestWordLength("The quick brown fox jumped over the lazy dog")` повинен повертати число.
`findLongestWordLength("The quick brown fox jumped over the lazy dog")` має повертати число.
```js
assert(
@@ -24,7 +24,7 @@ assert(
);
```
`findLongestWordLength("The quick brown fox jumped over the lazy dog")` повинен повертати `6`.
`findLongestWordLength("The quick brown fox jumped over the lazy dog")` має повертати `6`.
```js
assert(
@@ -32,19 +32,19 @@ assert(
);
```
`findLongestWordLength("May the force be with you")` повинен повертати `5`.
`findLongestWordLength("May the force be with you")` має повертати `5`.
```js
assert(findLongestWordLength('May the force be with you') === 5);
```
`findLongestWordLength("Google do a barrel roll")` повинен повертати `6`.
`findLongestWordLength("Google do a barrel roll")` має повертати `6`.
```js
assert(findLongestWordLength('Google do a barrel roll') === 6);
```
`findLongestWordLength("What is the average airspeed velocity of an unladen swallow")` повинен повертати `8`.
`findLongestWordLength("What is the average airspeed velocity of an unladen swallow")` має повертати `8`.
```js
assert(
@@ -54,7 +54,7 @@ assert(
);
```
`findLongestWordLength("What if we try a super-long word such as otorhinolaryngology")` повинен повертати `19`.
`findLongestWordLength("What if we try a super-long word such as otorhinolaryngology")` має повертати `19`.
```js
assert(
@@ -12,7 +12,7 @@ dashedName: finders-keepers
# --hints--
`findElement([1, 3, 5, 8, 9, 10], function(num) { return num % 2 === 0; })` повинен повертати `8`.
`findElement([1, 3, 5, 8, 9, 10], function(num) { return num % 2 === 0; })` має повертати `8`.
```js
assert.strictEqual(
@@ -23,7 +23,7 @@ assert.strictEqual(
);
```
`findElement([1, 3, 5, 9], function(num) { return num % 2 === 0; })` повинен повертати `undefined`.
`findElement([1, 3, 5, 9], function(num) { return num % 2 === 0; })` має повертати `undefined`.
```js
assert.strictEqual(
@@ -10,81 +10,81 @@ dashedName: mutations
Поверніть `true`, якщо рядок у першому елементі масиву містить усі літери рядка у другому елементі масиву.
Наприклад, `["hello", "Hello"]` повинен повертати `true`, оскільки всі літери другого рядка наявні у першому, незважаючи на регістр.
Наприклад, `["hello", "Hello"]` має повертати `true`, оскільки всі літери другого рядка наявні у першому, незважаючи на регістр.
Аргументи `["hello", "hey"]` повинні повертати `false`, оскільки рядок `hello` не містить `y`.
Аргументи `["hello", "hey"]` мають повертати `false`, оскільки рядок `hello` не містить `y`.
`["Alien", "line"]` повинен повертати `true`, оскільки всі літери в `line` наявні в `Alien`.
`["Alien", "line"]` має повертати `true`, оскільки всі літери в `line` наявні в `Alien`.
# --hints--
`mutation(["hello", "hey"])` повинен повертати `false`.
`mutation(["hello", "hey"])` має повертати `false`.
```js
assert(mutation(['hello', 'hey']) === false);
```
`mutation(["hello", "Hello"])` повинен повертати `true`.
`mutation(["hello", "Hello"])` має повертати `true`.
```js
assert(mutation(['hello', 'Hello']) === true);
```
`mutation(["zyxwvutsrqponmlkjihgfedcba", "qrstu"])` повинен повертати `true`.
`mutation(["zyxwvutsrqponmlkjihgfedcba", "qrstu"])` має повертати `true`.
```js
assert(mutation(['zyxwvutsrqponmlkjihgfedcba', 'qrstu']) === true);
```
`mutation(["Mary", "Army"])` повинен повертати `true`.
`mutation(["Mary", "Army"])` має повертати `true`.
```js
assert(mutation(['Mary', 'Army']) === true);
```
`mutation(["Mary", "Aarmy"])` повинен повертати `true`.
`mutation(["Mary", "Aarmy"])` має повертати `true`.
```js
assert(mutation(['Mary', 'Aarmy']) === true);
```
`mutation(["Alien", "line"])` повинен повертати `true`.
`mutation(["Alien", "line"])` має повертати `true`.
```js
assert(mutation(['Alien', 'line']) === true);
```
`mutation(["floor", "for"])` повинен повертати `true`.
`mutation(["floor", "for"])` має повертати `true`.
```js
assert(mutation(['floor', 'for']) === true);
```
`mutation(["hello", "neo"])` повинен повертати `false`.
`mutation(["hello", "neo"])` має повертати `false`.
```js
assert(mutation(['hello', 'neo']) === false);
```
`mutation(["voodoo", "no"])` повинен повертати `false`.
`mutation(["voodoo", "no"])` має повертати `false`.
```js
assert(mutation(['voodoo', 'no']) === false);
```
`mutation(["ate", "date"])` повинен повертати `false`.
`mutation(["ate", "date"])` має повертати `false`.
```js
assert(mutation(['ate', 'date']) === false);
```
`mutation(["Tiger", "Zebra"])` повинен повертати `false`.
`mutation(["Tiger", "Zebra"])` має повертати `false`.
```js
assert(mutation(['Tiger', 'Zebra']) === false);
```
`mutation(["Noel", "Ole"])` повинен повертати `true`.
`mutation(["Noel", "Ole"])` має повертати `true`.
```js
assert(mutation(['Noel', 'Ole']) === true);
@@ -12,37 +12,37 @@ dashedName: repeat-a-string-repeat-a-string
# --hints--
`repeatStringNumTimes("*", 3)` повинен повертати рядок `***`.
`repeatStringNumTimes("*", 3)` має повертати рядок `***`.
```js
assert(repeatStringNumTimes('*', 3) === '***');
```
`repeatStringNumTimes("abc", 3)` повинен повертати рядок `abcabcabc`.
`repeatStringNumTimes("abc", 3)` має повертати рядок `abcabcabc`.
```js
assert(repeatStringNumTimes('abc', 3) === 'abcabcabc');
```
`repeatStringNumTimes("abc", 4)` повинен повертати рядок `abcabcabcabc`.
`repeatStringNumTimes("abc", 4)` має повертати рядок `abcabcabcabc`.
```js
assert(repeatStringNumTimes('abc', 4) === 'abcabcabcabc');
```
`repeatStringNumTimes("abc", 1)` повинен повертати рядок `abc`.
`repeatStringNumTimes("abc", 1)` має повертати рядок `abc`.
```js
assert(repeatStringNumTimes('abc', 1) === 'abc');
```
`repeatStringNumTimes("*", 8)` повинен повертати рядок `********`.
`repeatStringNumTimes("*", 8)` має повертати рядок `********`.
```js
assert(repeatStringNumTimes('*', 8) === '********');
```
`repeatStringNumTimes("abc", -2)` повинен повертати порожній рядок (`""`).
`repeatStringNumTimes("abc", -2)` має повертати порожній рядок (`""`).
```js
assert(repeatStringNumTimes('abc', -2) === '');
@@ -54,7 +54,7 @@ assert(repeatStringNumTimes('abc', -2) === '');
assert(!/\.repeat/g.test(code));
```
`repeatStringNumTimes("abc", 0)` повинен повертати `""`.
`repeatStringNumTimes("abc", 0)` має повертати `""`.
```js
assert(repeatStringNumTimes('abc', 0) === '');
@@ -1,6 +1,6 @@
---
id: a789b3483989747d63b0e427
title: Пошук найбільших чисел у масивах
title: Повернення найбільших чисел у масивах
challengeType: 1
forumTopicId: 16042
dashedName: return-largest-numbers-in-arrays
@@ -10,11 +10,11 @@ dashedName: return-largest-numbers-in-arrays
Поверніть масив, який містить найбільше число з кожного наданого підмасиву. Для спрощення: наданий масив міститиме 4 підмасиви.
Пам'ятайте, ви можете перебігтись по масиву за допомогою циклу for та мати доступ до кожного елемента завдяки синтаксису масиву `arr[i]`.
Пам’ятайте, ви можете перебрати масив за допомогою циклу for та мати доступ до кожного елемента завдяки синтаксису масиву `arr[i]`.
# --hints--
`largestOfFour([[4, 5, 1, 3], [13, 27, 18, 26], [32, 35, 37, 39], [1000, 1001, 857, 1]])` повинен повертати масив.
`largestOfFour([[4, 5, 1, 3], [13, 27, 18, 26], [32, 35, 37, 39], [1000, 1001, 857, 1]])` має повертати масив.
```js
assert(
@@ -27,7 +27,7 @@ assert(
);
```
`largestOfFour([[13, 27, 18, 26], [4, 5, 1, 3], [32, 35, 37, 39], [1000, 1001, 857, 1]])` повинен повертати `[27, 5, 39, 1001]`.
`largestOfFour([[13, 27, 18, 26], [4, 5, 1, 3], [32, 35, 37, 39], [1000, 1001, 857, 1]])` має повертати `[27, 5, 39, 1001]`.
```js
assert.deepEqual(
@@ -41,7 +41,7 @@ assert.deepEqual(
);
```
`largestOfFour([[4, 9, 1, 3], [13, 35, 18, 26], [32, 35, 97, 39], [1000000, 1001, 857, 1]])` повинен повертати `[9, 35, 97, 1000000]`.
`largestOfFour([[4, 9, 1, 3], [13, 35, 18, 26], [32, 35, 97, 39], [1000000, 1001, 857, 1]])` має повертати `[9, 35, 97, 1000000]`.
```js
assert.deepEqual(
@@ -55,7 +55,7 @@ assert.deepEqual(
);
```
`largestOfFour([[17, 23, 25, 12], [25, 7, 34, 48], [4, -10, 18, 21], [-72, -3, -17, -10]])` повинен повертати `[25, 48, 21, -3]`.
`largestOfFour([[17, 23, 25, 12], [25, 7, 34, 48], [4, -10, 18, 21], [-72, -3, -17, -10]])` має повертати `[25, 48, 21, -3]`.
```js
assert.deepEqual(
@@ -14,25 +14,25 @@ dashedName: reverse-a-string
# --hints--
`reverseString("hello")` повинен повертати рядок.
`reverseString("hello")` має повертати рядок.
```js
assert(typeof reverseString('hello') === 'string');
```
`reverseString("hello")` повинен повертати рядок `olleh`.
`reverseString("hello")` має повертати рядок `olleh`.
```js
assert(reverseString('hello') === 'olleh');
```
`reverseString("Howdy")` повинен повертати рядок `ydwoH`.
`reverseString("Howdy")` має повертати рядок `ydwoH`.
```js
assert(reverseString('Howdy') === 'ydwoH');
```
`reverseString("Greetings from Earth")` повинен повертати рядок `htraE morf sgniteerG`.
`reverseString("Greetings from Earth")` має повертати рядок `htraE morf sgniteerG`.
```js
assert(reverseString('Greetings from Earth') === 'htraE morf sgniteerG');
@@ -14,23 +14,23 @@ dashedName: slice-and-splice
Розпочніть вставляти елементи з індексу `n` другого масиву.
Поверніться до отриманого масиву. Вхідні масиви повинні залишатись незмінними після запуску функції.
Поверніть отриманий масив. Вхідні масиви повинні залишатись незмінними після запуску функції.
# --hints--
`frankenSplice([1, 2, 3], [4, 5], 1)` повинен повертати `[4, 1, 2, 3, 5]`.
`frankenSplice([1, 2, 3], [4, 5], 1)` має повертати `[4, 1, 2, 3, 5]`.
```js
assert.deepEqual(frankenSplice([1, 2, 3], [4, 5], 1), [4, 1, 2, 3, 5]);
```
`frankenSplice([1, 2], ["a", "b"], 1)` повинен повертати `["a", 1, 2, "b"]`.
`frankenSplice([1, 2], ["a", "b"], 1)` має повертати `["a", 1, 2, "b"]`.
```js
assert.deepEqual(frankenSplice(testArr1, testArr2, 1), ['a', 1, 2, 'b']);
```
`frankenSplice(["claw", "tentacle"], ["head", "shoulders", "knees", "toes"], 2)` повинен повертати `["head", "shoulders", "claw", "tentacle", "knees", "toes"]`.
`frankenSplice(["claw", "tentacle"], ["head", "shoulders", "knees", "toes"], 2)` має повертати `["head", "shoulders", "claw", "tentacle", "knees", "toes"]`.
```js
assert.deepEqual(
@@ -43,7 +43,7 @@ assert.deepEqual(
);
```
Всі елементи з першого масиву повинні бути доданими до другого масиву за початковим порядком. `frankenSplice([1, 2, 3, 4], [], 0)` повинен повертати `[1, 2, 3, 4]`.
Всі елементи з першого масиву повинні бути доданими до другого масиву за початковим порядком. `frankenSplice([1, 2, 3, 4], [], 0)` має повертати `[1, 2, 3, 4]`.
```js
assert.deepEqual(frankenSplice([1, 2, 3, 4], [], 0), [1, 2, 3, 4]);
@@ -14,25 +14,25 @@ dashedName: title-case-a-sentence
# --hints--
`titleCase("I'm a little tea pot")` повинен повертати рядок.
`titleCase("I'm a little tea pot")` має повертати рядок.
```js
assert(typeof titleCase("I'm a little tea pot") === 'string');
```
`titleCase("I'm a little tea pot")` повинен повертати рядок `I'm A Little Tea Pot`.
`titleCase("I'm a little tea pot")` має повертати рядок `I'm A Little Tea Pot`.
```js
assert(titleCase("I'm a little tea pot") === "I'm A Little Tea Pot");
```
`titleCase("sHoRt AnD sToUt")` повинен повертати рядок `Short And Stout`.
`titleCase("sHoRt AnD sToUt")` має повертати рядок `Short And Stout`.
```js
assert(titleCase('sHoRt AnD sToUt') === 'Short And Stout');
```
`titleCase("HERE IS MY HANDLE HERE IS MY SPOUT")` повинен повертати рядок `Here Is My Handle Here Is My Spout`.
`titleCase("HERE IS MY HANDLE HERE IS MY SPOUT")` має повертати рядок `Here Is My Handle Here Is My Spout`.
```js
assert(
@@ -12,7 +12,7 @@ dashedName: truncate-a-string
# --hints--
`truncateString("A-tisket a-tasket A green and yellow basket", 8)` повинен повертати рядок `A-tisket...`.
`truncateString("A-tisket a-tasket A green and yellow basket", 8)` має повертати рядок `A-tisket...`.
```js
assert(
@@ -21,7 +21,7 @@ assert(
);
```
`truncateString("Peter Piper picked a peck of pickled peppers", 11)` повинен повертати рядок `Peter Piper...`.
`truncateString("Peter Piper picked a peck of pickled peppers", 11)` має повертати рядок `Peter Piper...`.
```js
assert(
@@ -30,7 +30,7 @@ assert(
);
```
`truncateString("A-tisket a-tasket A green and yellow basket", "A-tisket a-tasket A green and yellow basket".length)` повинен повертати рядок `A-tisket a-tasket A green and yellow basket`.
`truncateString("A-tisket a-tasket A green and yellow basket", "A-tisket a-tasket A green and yellow basket".length)` має повертати рядок `A-tisket a-tasket A green and yellow basket`.
```js
assert(
@@ -41,7 +41,7 @@ assert(
);
```
`truncateString("A-tisket a-tasket A green and yellow basket", "A-tisket a-tasket A green and yellow basket".length + 2)` повинен повертати рядок `A-tisket a-tasket A green and yellow basket`.
`truncateString("A-tisket a-tasket A green and yellow basket", "A-tisket a-tasket A green and yellow basket".length + 2)` має повертати рядок `A-tisket a-tasket A green and yellow basket`.
```js
assert(
@@ -52,13 +52,13 @@ assert(
);
```
`truncateString("A-", 1)` повинен повертати рядок `A...`.
`truncateString("A-", 1)` має повертати рядок `A...`.
```js
assert(truncateString('A-', 1) === 'A...');
```
`truncateString("Absolutely Longer", 2)` повинен повертати рядок `Ab...`.
`truncateString("Absolutely Longer", 2)` має повертати рядок `Ab...`.
```js
assert(truncateString('Absolutely Longer', 2) === 'Ab...');
@@ -10,103 +10,103 @@ dashedName: where-do-i-belong
Поверніть найменший індекс, при якому потрібно вставити значення (другий аргумент) в масив (перший аргумент), після того, як він був відсортований. Поверненим значенням повинне бути число.
Наприклад, `getIndexToIns([1,2,3,4], 1.5)` повинен повертати `1`, тому що він більший за `1` (індекс 0), але менший за `2` (індекс 1).
Наприклад, `getIndexToIns([1,2,3,4], 1.5)` має повертати `1`, оскільки він більший за `1` (індекс 0), але менший за `2` (індекс 1).
Аналогічно, `getIndexToIns([20,3,5], 19)` повинен повертати `2`, оскільки після відсортування масиву він виглядатиме як `[3,5,20]`, а `19` менше за `20` (індекс 2) та більше за `5` (індекс 1).
Аналогічно, `getIndexToIns([20,3,5], 19)` має повертати `2`, оскільки після відсортування масиву він виглядатиме як `[3,5,20]`, а `19` менше за `20` (індекс 2) та більше за `5` (індекс 1).
# --hints--
`getIndexToIns([10, 20, 30, 40, 50], 35)` повинен повертати `3`.
`getIndexToIns([10, 20, 30, 40, 50], 35)` має повертати `3`.
```js
assert(getIndexToIns([10, 20, 30, 40, 50], 35) === 3);
```
`getIndexToIns([10, 20, 30, 40, 50], 35)` повинен повертати число.
`getIndexToIns([10, 20, 30, 40, 50], 35)` має повертати число.
```js
assert(typeof getIndexToIns([10, 20, 30, 40, 50], 35) === 'number');
```
`getIndexToIns([10, 20, 30, 40, 50], 30)` повинен повертати `2`.
`getIndexToIns([10, 20, 30, 40, 50], 30)` має повертати `2`.
```js
assert(getIndexToIns([10, 20, 30, 40, 50], 30) === 2);
```
`getIndexToIns([10, 20, 30, 40, 50], 30)` повинен повертати число.
`getIndexToIns([10, 20, 30, 40, 50], 30)` має повертати число.
```js
assert(typeof getIndexToIns([10, 20, 30, 40, 50], 30) === 'number');
```
`getIndexToIns([40, 60], 50)` повинен повертати `1`.
`getIndexToIns([40, 60], 50)` має повертати `1`.
```js
assert(getIndexToIns([40, 60], 50) === 1);
```
`getIndexToIns([40, 60], 50)` повинен повертати число.
`getIndexToIns([40, 60], 50)` має повертати число.
```js
assert(typeof getIndexToIns([40, 60], 50) === 'number');
```
`getIndexToIns([3, 10, 5], 3)` повинен повертати `0`.
`getIndexToIns([3, 10, 5], 3)` має повертати `0`.
```js
assert(getIndexToIns([3, 10, 5], 3) === 0);
```
`getIndexToIns([3, 10, 5], 3)` повинен повертати число.
`getIndexToIns([3, 10, 5], 3)` має повертати число.
```js
assert(typeof getIndexToIns([3, 10, 5], 3) === 'number');
```
`getIndexToIns([5, 3, 20, 3], 5)` повинен повертати `2`.
`getIndexToIns([5, 3, 20, 3], 5)` має повертати `2`.
```js
assert(getIndexToIns([5, 3, 20, 3], 5) === 2);
```
`getIndexToIns([5, 3, 20, 3], 5)` повинен повертати число.
`getIndexToIns([5, 3, 20, 3], 5)` має повертати число.
```js
assert(typeof getIndexToIns([5, 3, 20, 3], 5) === 'number');
```
`getIndexToIns([2, 20, 10], 19)` повинен повертати `2`.
`getIndexToIns([2, 20, 10], 19)` має повертати `2`.
```js
assert(getIndexToIns([2, 20, 10], 19) === 2);
```
`getIndexToIns([2, 20, 10], 19)` повинен повертати число.
`getIndexToIns([2, 20, 10], 19)` має повертати число.
```js
assert(typeof getIndexToIns([2, 20, 10], 19) === 'number');
```
`getIndexToIns([2, 5, 10], 15)` повинен повертати `3`.
`getIndexToIns([2, 5, 10], 15)` має повертати `3`.
```js
assert(getIndexToIns([2, 5, 10], 15) === 3);
```
`getIndexToIns([2, 5, 10], 15)` повинен повертати число.
`getIndexToIns([2, 5, 10], 15)` має повертати число.
```js
assert(typeof getIndexToIns([2, 5, 10], 15) === 'number');
```
`getIndexToIns([], 1)` повинен повертати `0`.
`getIndexToIns([], 1)` має повертати `0`.
```js
assert(getIndexToIns([], 1) === 0);
```
`getIndexToIns([], 1)` повинен повертати число.
`getIndexToIns([], 1)` має повертати число.
```js
assert(typeof getIndexToIns([], 1) === 'number');
@@ -32,11 +32,11 @@ const element = arr[3][0][1];
# --instructions--
Використовуючи дужкову нотацію, виберіть елемент із `myArray` таким чином, щоб `myData` дорівнював `8`.
Використовуючи дужкову нотацію, виберіть елемент із `myArray` таким чином, щоб значення `myData` дорівнювало `8`.
# --hints--
`myData` повинен дорівнювати `8`.
`myData` має дорівнювати `8`.
```js
assert(myData === 8);
@@ -9,7 +9,7 @@ dashedName: accessing-nested-arrays
# --description--
Як ми бачили в попередніх прикладах, об'єкти можуть містити і вкладені об'єкти, і вкладені масиви. Подібно до доступу до вкладених об'єктів, для доступу до вкладених масивів можна об'єднати дужкову нотацію.
Як ми бачили в попередніх прикладах, об’єкти можуть містити і вкладені об’єкти, і вкладені масиви. Подібно до доступу до вкладених об’єктів, для доступу до вкладених масивів можна об’єднати дужкову нотацію.
Ось приклад того, як отримати доступ до вкладеного масиву:
@@ -41,11 +41,11 @@ ourPets[1].names[0];
# --instructions--
Використовуючи точкову і дужкову нотацію, встановіть змінну `secondTree` на другий елемент в списку `trees` з об'єкта `myPlants`.
Використовуючи точкову і дужкову нотацію, встановіть змінну `secondTree` на другий елемент в списку `trees` з об’єкта `myPlants`.
# --hints--
`secondTree` повинен дорівнювати рядку `pine`.
`secondTree` має дорівнювати рядку `pine`.
```js
assert(secondTree === 'pine');
@@ -1,6 +1,6 @@
---
id: 56533eb9ac21ba0edf2244cc
title: Доступ до вкладених об'єктів
title: Доступ до вкладених об’єктів
challengeType: 1
videoUrl: 'https://scrimba.com/c/cRnRnfa'
forumTopicId: 16161
@@ -9,9 +9,9 @@ dashedName: accessing-nested-objects
# --description--
Доступ до підвластивостей об'єктів можна отримати завдяки ланцюжку точкової та дужкової нотацій.
Доступ до підвластивостей об’єктів можна отримати завдяки ланцюжку точкової та дужкової нотацій.
Ось вкладений об'єкт:
Ось вкладений об’єкт:
```js
const ourStorage = {
@@ -39,7 +39,7 @@ ourStorage.desk.drawer;
# --hints--
`gloveBoxContents` повинен дорівнювати рядку `maps`.
`gloveBoxContents` має дорівнювати рядку `maps`.
```js
assert(gloveBoxContents === 'maps');
@@ -1,6 +1,6 @@
---
id: 56533eb9ac21ba0edf2244c8
title: Доступ до властивостей об'єкту за допомогою дужкової нотації
title: Доступ до властивостей об’єкту за допомогою дужкової нотації
challengeType: 1
videoUrl: 'https://scrimba.com/c/cBvmEHP'
forumTopicId: 16163
@@ -9,11 +9,11 @@ dashedName: accessing-object-properties-with-bracket-notation
# --description--
Другим способом отримати доступ до властивостей об'єкта є дужкова нотація (`[]`). Якщо властивість об'єкта, до якої ви намагаєтеся отримати доступ, має пропуск у назві, потрібно використати дужкову нотацію.
Другим способом отримати доступ до властивостей об’єкта є дужкова нотація (`[]`). Якщо властивість об’єкта, до якої ви намагаєтеся отримати доступ, має пропуск у назві, потрібно використати дужкову нотацію.
Однак дужкову нотацію можна використовувати і для властивостей об'єкта без пропусків.
Однак дужкову нотацію можна використовувати і для властивостей об’єкта без пропусків.
Нижче наведено приклад дужкової нотації для прочитання властивостей об'єкта:
Нижче наведено приклад дужкової нотації для прочитання властивостей об’єкта:
```js
const myObj = {
@@ -1,6 +1,6 @@
---
id: 56533eb9ac21ba0edf2244c7
title: Доступ до властивостей об'єкту за допомогою точкової нотації
title: Доступ до властивостей об’єкту за допомогою точкової нотації
challengeType: 1
videoUrl: 'https://scrimba.com/c/cGryJs8'
forumTopicId: 16164
@@ -9,11 +9,11 @@ dashedName: accessing-object-properties-with-dot-notation
# --description--
Є два способи отримати доступ до властивостей об'єкту: точкова нотація (`.`) та дужкова нотація (`[]`), подібно до масиву.
Є два способи отримати доступ до властивостей об’єкту: точкова нотація (`.`) та дужкова нотація (`[]`), подібно до масиву.
Точкову нотацію використовують, якщо заздалегідь знають назву властивості, до якої намагаються отримати доступ.
Нижче наведено приклад точкової нотації (`.`) для прочитання властивостей об'єкта:
Нижче наведено приклад точкової нотації (`.`) для прочитання властивостей об’єкта:
```js
const myObj = {
@@ -29,7 +29,7 @@ const prop2val = myObj.prop2;
# --instructions--
Прочитайте значення властивостей `testObj`, використовуючи точкову нотацію. Встановіть змінну `hatValue` рівною властивостям об'єкта `hat` та встановіть змінну `shirtValue` рівною властивостям об'єкта `shirt`.
Прочитайте значення властивостей `testObj`, використовуючи точкову нотацію. Встановіть змінну `hatValue` рівною властивостям об’єкта `hat` та встановіть змінну `shirtValue` рівною властивостям об’єкта `shirt`.
# --hints--
@@ -1,6 +1,6 @@
---
id: 56533eb9ac21ba0edf2244c9
title: Доступ до властивостей об'єкту за допомогою змінних
title: Доступ до властивостей об’єкту за допомогою змінних
challengeType: 1
videoUrl: 'https://scrimba.com/c/cnQyKur'
forumTopicId: 16165
@@ -9,7 +9,7 @@ dashedName: accessing-object-properties-with-variables
# --description--
Дужкову нотацію також можна використати на об'єктах, щоб отримати доступ до властивостей, що зберігаються як значення змінної. Це може бути дуже корисно при ітерації властивостей об'єкта або при отриманні доступу до пошукової таблиці.
Дужкову нотацію також можна використати на об’єктах, щоб отримати доступ до властивостей, що зберігаються як значення змінної. Це може бути дуже корисно при ітерації властивостей об’єкта або при отриманні доступу до пошукової таблиці.
Ось приклад використання змінної для отримання доступу до властивостей:
@@ -1,6 +1,6 @@
---
id: 56bbb991ad1ed5201cd392d2
title: Додавання нових властивостей до об'єкта JavaScript
title: Додавання нових властивостей до об’єкта JavaScript
challengeType: 1
videoUrl: 'https://scrimba.com/c/cQe38UD'
forumTopicId: 301169
@@ -9,7 +9,7 @@ dashedName: add-new-properties-to-a-javascript-object
# --description--
Ви можете додати нові властивості до наявних об'єктів JavaScript так само, як ви б модифікували їх.
Ви можете додати нові властивості до наявних об’єктів JavaScript так само, як ви б модифікували їх.
Таким чином ми б додали властивість `bark` до `ourDog`:
@@ -1,6 +1,6 @@
---
id: cf1111c1c11feddfaeb3bdef
title: Додавання двох чисел за допомогою JavaScript
title: Додавання двох чисел з JavaScript
challengeType: 1
videoUrl: 'https://scrimba.com/c/cM2KBAG'
forumTopicId: 16650
@@ -29,7 +29,7 @@ const myVar = 5 + 10;
# --hints--
`sum` повинен дорівнювати `20`.
`sum` має дорівнювати `20`.
```js
assert(sum === 20);
@@ -38,31 +38,31 @@ switch (num) {
# --hints--
`switchOfStuff("a")` повинен повертати рядок `apple`
`switchOfStuff("a")` має повертати рядок `apple`
```js
assert(switchOfStuff('a') === 'apple');
```
`switchOfStuff("b")` повинен повертати рядок `bird`
`switchOfStuff("b")` має повертати рядок `bird`
```js
assert(switchOfStuff('b') === 'bird');
```
`switchOfStuff("c")` повинен повертати рядок `cat`
`switchOfStuff("c")` має повертати рядок `cat`
```js
assert(switchOfStuff('c') === 'cat');
```
`switchOfStuff("d")` повинен повертати рядок `stuff`
`switchOfStuff("d")` має повертати рядок `stuff`
```js
assert(switchOfStuff('d') === 'stuff');
```
`switchOfStuff(4)` повинен повертати рядок `stuff`
`switchOfStuff(4)` має повертати рядок `stuff`
```js
assert(switchOfStuff(4) === 'stuff');
@@ -27,7 +27,7 @@ ourStr += anAdjective;
# --hints--
`someAdjective` повинен бути встановлений як рядок з принаймні 3 символів.
`someAdjective` має бути встановлений як рядок з принаймні 3 символів.
```js
assert(typeof someAdjective !== 'undefined' && someAdjective.length > 2);
@@ -1,6 +1,6 @@
---
id: 56bbb991ad1ed5201cd392d0
title: Створення об'єктів JavaScript
title: Створення об’єктів JavaScript
challengeType: 1
videoUrl: 'https://scrimba.com/c/cWGkbtd'
forumTopicId: 16769
@@ -11,11 +11,11 @@ dashedName: build-javascript-objects
Можливо, ви вже чули термін `object`.
Об'єкти подібні до `arrays`, за винятком того, що для отримання доступу та зміни їхніх даних використовуються не індекси, а властивості (`properties`).
Об’єкти подібні до `arrays`, за винятком того, що для отримання доступу та зміни їхніх даних використовуються не індекси, а властивості (`properties`).
Об'єкти придатні для структурованого зберігання даних, і також можуть представляти реальні об'єкти, наприклад кота.
Об’єкти придатні для структурованого зберігання даних, і також можуть представляти реальні об’єкти (наприклад, кота).
Приклад об'єкта-кота:
Приклад об’єкта-кота:
```js
const cat = {
@@ -36,17 +36,17 @@ const anotherObject = {
};
```
Однак, якщо ваші об'єкти містять будь-які не рядкові властивості, JavaScript автоматично перетворить їх на рядки.
Однак, якщо ваші об’єкти містять будь-які не рядкові властивості, JavaScript автоматично перетворить їх на рядки.
# --instructions--
Створіть об'єкт, який представляє собаку, під назвою `myDog` і який має властивості `name` (рядок), `legs`, `tails` та `friends`.
Створіть об’єкт, який представляє собаку, під назвою `myDog` і який має властивості `name` (рядок), `legs`, `tails` та `friends`.
Ви можете встановити властивості на будь-яке значення, але `name` повинен бути рядком, `legs` та `tails` повинні бути числами, а `friends` повинен бути масивом.
Ви можете встановити властивості на будь-яке значення, але `name` має бути рядком, `legs` та `tails` мають бути числами, а `friends` має бути масивом.
# --hints--
`myDog` повинен містити властивість `name` і бути рядком (`string`).
`myDog` повинен містити властивість `name`, яка є рядком (`string`).
```js
assert(
@@ -64,7 +64,7 @@ assert(
);
```
`myDog` повинен містити властивість `legs` і бути числом (`number`).
`myDog` повинен містити властивість `legs`, яка є числом (`number`).
```js
assert(
@@ -82,7 +82,7 @@ assert(
);
```
`myDog` повинен містити властивість `tails` і бути числом (`number`).
`myDog` повинен містити властивість `tails`, яка є числом (`number`).
```js
assert(
@@ -100,7 +100,7 @@ assert(
);
```
`myDog` повинен містити властивість `friends` і бути масивом (`array`).
`myDog` повинен містити властивість `friends`, яка є масивом (`array`).
```js
assert(
@@ -118,7 +118,7 @@ assert(
);
```
`myDog` повинен містити всі задані властивості.
`myDog` має містити всі задані властивості.
```js
assert(
@@ -9,7 +9,7 @@ dashedName: chaining-if-else-statements
# --description--
Інструкції `if/else` можна об'єднати для складної логіки. Ось <dfn>псевдокод</dfn> декількох об'єднаних інструкцій `if` / `else if`:
Інструкції `if/else` можна об’єднати для складної логіки. Ось <dfn>псевдокод</dfn> декількох об’єднаних інструкцій `if` / `else if`:
```js
if (condition1) {
@@ -26,7 +26,7 @@ if (condition1) {
# --instructions--
Напишіть об'єднані інструкції `if`/`else if`, щоб виконати наступні умови:
Напишіть об’єднані інструкції `if`/`else if`, щоб виконати наступні умови:
`num < 5` повертає `Tiny`
`num < 10` повертає `Small`
@@ -54,61 +54,61 @@ assert(code.match(/if/g).length > 3);
assert(code.match(/return/g).length >= 1);
```
`testSize(0)` повинен повертати рядок `Tiny`
`testSize(0)` має повертати рядок `Tiny`
```js
assert(testSize(0) === 'Tiny');
```
`testSize(4)` повинен повертати рядок `Tiny`
`testSize(4)` має повертати рядок `Tiny`
```js
assert(testSize(4) === 'Tiny');
```
`testSize(5)` повинен повертати рядок `Small`
`testSize(5)` має повертати рядок `Small`
```js
assert(testSize(5) === 'Small');
```
`testSize(8)` повинен повертати рядок `Small`
`testSize(8)` має повертати рядок `Small`
```js
assert(testSize(8) === 'Small');
```
`testSize(10)` повинен повертати рядок `Medium`
`testSize(10)` має повертати рядок `Medium`
```js
assert(testSize(10) === 'Medium');
```
`testSize(14)` повинен повертати рядок `Medium`
`testSize(14)` має повертати рядок `Medium`
```js
assert(testSize(14) === 'Medium');
```
`testSize(15)` повинен повертати рядок `Large`
`testSize(15)` має повертати рядок `Large`
```js
assert(testSize(15) === 'Large');
```
`testSize(17)` повинен повертати рядок `Large`
`testSize(17)` має повертати рядок `Large`
```js
assert(testSize(17) === 'Large');
```
`testSize(20)` повинен повертати рядок `Huge`
`testSize(20)` має повертати рядок `Huge`
```js
assert(testSize(20) === 'Huge');
```
`testSize(25)` повинен повертати рядок `Huge`
`testSize(25)` має повертати рядок `Huge`
```js
assert(testSize(25) === 'Huge');
@@ -27,7 +27,7 @@ dashedName: comment-your-javascript-code
multi-line comment */
```
**ПРИМІТКА:** при написанні коду ви повинні часто додавати коментарі, щоб роз'яснити функції частин вашого коду. Хороші коментарі можуть передати мету вашого коду – як для інших людей, *так і* для себе в майбутньому.
**ПРИМІТКА:** при написанні коду ви повинні часто додавати коментарі, щоб роз’яснити функції частин вашого коду. Хороші коментарі можуть передати мету вашого коду – як для інших людей, *так і* для себе в майбутньому.
# --instructions--
@@ -35,13 +35,13 @@ multi-line comment */
# --hints--
Ви повинні створити коментар стилю `//`, який містить принаймні п'ять літер.
Ви повинні створити коментар стилю `//`, який містить принаймні п’ять літер.
```js
assert(code.match(/(\/\/)...../g));
```
Ви повинні створити коментар стилю `/* */`, який містить принаймні п'ять літер.
Ви повинні створити коментар стилю `/* */`, який містить принаймні п’ять літер.
```js
assert(code.match(/(\/\*)([^\/]{5,})(?=\*\/)/gm));
@@ -37,19 +37,19 @@ function equalityTest(myVal) {
# --hints--
`testEqual(10)` повинен повертати рядок `Not Equal`
`testEqual(10)` має повертати рядок `Not Equal`
```js
assert(testEqual(10) === 'Not Equal');
```
`testEqual(12)` повинен повертати рядок `Equal`
`testEqual(12)` має повертати рядок `Equal`
```js
assert(testEqual(12) === 'Equal');
```
`testEqual("12")` повинен повертати рядок `Equal`
`testEqual("12")` має повертати рядок `Equal`
```js
assert(testEqual('12') === 'Equal');
@@ -28,43 +28,43 @@ dashedName: comparison-with-the-greater-than-operator
# --hints--
`testGreaterThan(0)` повинен повертати рядок `10 or Under`
`testGreaterThan(0)` має повертати рядок `10 or Under`
```js
assert(testGreaterThan(0) === '10 or Under');
```
`testGreaterThan(10)` повинен повертати рядок `10 or Under`
`testGreaterThan(10)` має повертати рядок `10 or Under`
```js
assert(testGreaterThan(10) === '10 or Under');
```
`testGreaterThan(11)` повинен повертати рядок `Over 10`
`testGreaterThan(11)` має повертати рядок `Over 10`
```js
assert(testGreaterThan(11) === 'Over 10');
```
`testGreaterThan(99)` повинен повертати рядок `Over 10`
`testGreaterThan(99)` має повертати рядок `Over 10`
```js
assert(testGreaterThan(99) === 'Over 10');
```
`testGreaterThan(100)` повинен повертати рядок `Over 10`
`testGreaterThan(100)` має повертати рядок `Over 10`
```js
assert(testGreaterThan(100) === 'Over 10');
```
`testGreaterThan(101)` повинен повертати рядок `Over 100`
`testGreaterThan(101)` має повертати рядок `Over 100`
```js
assert(testGreaterThan(101) === 'Over 100');
```
`testGreaterThan(150)` повинен повертати рядок `Over 100`
`testGreaterThan(150)` має повертати рядок `Over 100`
```js
assert(testGreaterThan(150) === 'Over 100');
@@ -28,43 +28,43 @@ dashedName: comparison-with-the-greater-than-or-equal-to-operator
# --hints--
`testGreaterOrEqual(0)` повинен повертати рядок `Less than 10`
`testGreaterOrEqual(0)` має повертати рядок `Less than 10`
```js
assert(testGreaterOrEqual(0) === 'Less than 10');
```
`testGreaterOrEqual(9)` повинен повертати рядок `Less than 10`
`testGreaterOrEqual(9)` має повертати рядок `Less than 10`
```js
assert(testGreaterOrEqual(9) === 'Less than 10');
```
`testGreaterOrEqual(10)` повинен повертати рядок `10 or Over`
`testGreaterOrEqual(10)` має повертати рядок `10 or Over`
```js
assert(testGreaterOrEqual(10) === '10 or Over');
```
`testGreaterOrEqual(11)` повинен повертати рядок `10 or Over`
`testGreaterOrEqual(11)` має повертати рядок `10 or Over`
```js
assert(testGreaterOrEqual(11) === '10 or Over');
```
`testGreaterOrEqual(19)` повинен повертати рядок `10 or Over`
`testGreaterOrEqual(19)` має повертати рядок `10 or Over`
```js
assert(testGreaterOrEqual(19) === '10 or Over');
```
`testGreaterOrEqual(100)` повинен повертати рядок `20 or Over`
`testGreaterOrEqual(100)` має повертати рядок `20 or Over`
```js
assert(testGreaterOrEqual(100) === '20 or Over');
```
`testGreaterOrEqual(21)` повинен повертати рядок `20 or Over`
`testGreaterOrEqual(21)` має повертати рядок `20 or Over`
```js
assert(testGreaterOrEqual(21) === '20 or Over');

Some files were not shown because too many files have changed in this diff Show More