jprdonnelly/freeCodeCamp
1
0
Fork 0
mirror of https://github.com/freeCodeCamp/freeCodeCamp.git synced 2026-03-12 16:01:48 -04:00
Code Issues Projects Releases Wiki Activity

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

Browse Source
This commit is contained in:
freeCodeCamp's Camper Bot
2024-07-08 23:49:25 -05:00
committed by GitHub
parent 2dbddbc59d
commit eab495ffbd
2040 changed files with 61909 additions and 2896 deletions
Download Patch File Download Diff File Expand all files Collapse all files

14
curriculum/challenges/arabic/03-front-end-development-libraries/sass/create-reusable-css-with-mixins.md
View File

@@ -70,7 +70,7 @@ nav a {
Write a mixin named `shape` and give it 3 parameters: `$w`, `$h`, and `$bg-color`.
Use the `shape` mixin to give the `#square` element a width and height of `50px`, and the color `red`. For the `#rect-a` element add a width of `100px`, a height of `50px`, and the color `blue`. Finally, for the `#rect-b` element add a width of `50px`, a height of `100px`, and the color `orange`.
Use the `shape` mixin to give the `#square` element a width and height of `50px`, and the background color `red`. For the `#rect-a` element add a width of `100px`, a height of `50px`, and the background color `blue`. Finally, for the `#rect-b` element add a width of `50px`, a height of `100px`, and the background color `orange`.
# --hints--
@@ -98,22 +98,22 @@ Your mixin should include a `background-color` property that uses the `$bg-color
assert.match(__helpers.removeWhiteSpace(code), /background-color:\$bg\-color;/gi);
```
You should replace the styles inside the `#square` selector with a call to the `shape` mixin using the `@include` keyword. Setting a width and height of `50px`, and the color `red`.
You should replace the styles inside the `#square` selector with a call to the `shape` mixin using the `@include` keyword. Setting a width and height of `50px`, and the background color `red`.
```js
assert.match(code, /#square\s*{\s*@include\s+shape\(\s*50px,\s*50px,\s*red\s*\)\s*;\s*}/gi);
assert.match(code, /#square\s*{\s*@include\s+shape\s*\(\s*50px\s*,\s*50px\s*,\s*red\s*\)\s*;\s*}/gi);
```
You should replace the styles inside the `#rect-a` selector with a call to the `shape` mixin using the `@include` keyword. Setting a width of `100px`, a height of `50px`, and the color `blue`.
You should replace the styles inside the `#rect-a` selector with a call to the `shape` mixin using the `@include` keyword. Setting a width of `100px`, a height of `50px`, and the background color `blue`.
```js
assert.match(code, /#rect-a\s*{\s*@include\s+shape\(\s*100px,\s*50px,\s*blue\s*\)\s*;\s*}/gi);
assert.match(code, /#rect-a\s*{\s*@include\s+shape\s*\(\s*100px\s*,\s*50px\s*,\s*blue\s*\)\s*;\s*}/gi);
```
You should replace the styles inside the `#rect-b` selector with a call to the `shape` mixin using the `@include` keyword. Setting a width of `50px`, a height of `100px`, and the color `orange`.
You should replace the styles inside the `#rect-b` selector with a call to the `shape` mixin using the `@include` keyword. Setting a width of `50px`, a height of `100px`, and the background color `orange`.
```js
assert.match(code, /#rect-b\s*{\s*@include\s+shape\(\s*50px,\s*100px,\s*orange\s*\)\s*;\s*}/gi);
assert.match(code, /#rect-b\s*{\s*@include\s+shape\s*\(\s*50px\s*,\s*100px\s*,\s*orange\s*\)\s*;\s*}/gi);
```
# --seed--

18
curriculum/challenges/arabic/07-scientific-computing-with-python/build-a-budget-app-project/budget-app.md
View File

@@ -10,10 +10,10 @@ dashedName: build-a-budget-app-project
Complete the `Category` class. 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. The method should append an object to the ledger list in the form of `{'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.
- 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.
- A `check_funds` method that accepts an amount as an argument. It returns `False` if the amount is greater than the balance of the budget category and returns `True` otherwise. This method should be used by both the `withdraw` method and `transfer` method.
When the budget object is printed it should display:
@@ -25,11 +25,11 @@ When the budget object is printed it should display:
Here is an example usage:
```py
food = Category("Food")
food.deposit(1000, "deposit")
food.withdraw(10.15, "groceries")
food.withdraw(15.89, "restaurant and more food for dessert")
clothing = Category("Clothing")
food = Category('Food')
food.deposit(1000, 'deposit')
food.withdraw(10.15, 'groceries')
food.withdraw(15.89, 'restaurant and more food for dessert')
clothing = Category('Clothing')
food.transfer(50, clothing)
print(food)
```
@@ -47,7 +47,7 @@ Total: 923.96
Besides the `Category` class, create a function (outside of the class) called `create_spend_chart` that takes a list of categories as an argument. It should return a string that is a bar chart.
The chart should show the percentage spent in each category passed in to the function. The percentage spent should be calculated only with withdrawals and not with deposits. Down the left side of the chart should be labels 0 - 100. The "bars" in the bar chart should be made out of the "o" character. The height of each bar should be rounded down to the nearest 10. The horizontal line below the bars should go two spaces past the final bar. Each category name should be written vertically below the bar. There should be a title at the top that says "Percentage spent by category".
The chart should show the percentage spent in each category passed in to the function. The percentage spent should be calculated only with withdrawals and not with deposits. Down the left side of the chart should be labels 0 - 100. The 'bars' in the bar chart should be made out of the 'o' character. The height of each bar should be rounded down to the nearest 10. The horizontal line below the bars should go two spaces past the final bar. Each category name should be written vertically below the bar. There should be a title at the top that says 'Percentage spent by category'.
This function will be tested with up to four categories.
@@ -272,7 +272,7 @@ t.result.wasSuccessful()
})
```
Calling `food.deposit(900, "deposit")` and `food.withdraw(45.67, "milk, cereal, eggs, bacon, bread")` should return a balance of `854.33`.
Calling `food.deposit(900, 'deposit')` and `food.withdraw(45.67, 'milk, cereal, eggs, bacon, bread')` should return a balance of `854.33`.
```js
({

6
curriculum/challenges/arabic/07-scientific-computing-with-python/build-a-probability-calculator-project/probability-calculator.md
View File

@@ -20,14 +20,14 @@ hat2 = Hat(red=5, orange=4)
hat3 = Hat(red=5, orange=4, black=1, blue=0, pink=2, striped=9)
```
A hat will always be created with at least one ball. The arguments passed into the hat object upon creation should be converted to a `contents` instance variable. `contents` should be a list of strings containing one item for each ball in the hat. Each item in the list should be a color name representing a single ball of that color. For example, if your hat is `{"red": 2, "blue": 1}`, `contents` should be `["red", "red", "blue"]`.
A hat will always be created with at least one ball. The arguments passed into the hat object upon creation should be converted to a `contents` instance variable. `contents` should be a list of strings containing one item for each ball in the hat. Each item in the list should be a color name representing a single ball of that color. For example, if your hat is `{'red': 2, 'blue': 1}`, `contents` should be `['red', 'red', 'blue']`.
The `Hat` class should have a `draw` method that accepts an argument indicating the number of balls to draw from the hat. This method should remove balls at random from `contents` and return those balls as a list of strings. The balls should not go back into the hat during the draw, similar to an urn experiment without replacement. If the number of balls to draw exceeds the available quantity, return all the balls.
Next, create an `experiment` function in `main.py` (not inside the `Hat` class). This function should accept the following arguments:
- `hat`: A hat object containing balls that should be copied inside the function.
- `expected_balls`: An object indicating the exact group of balls to attempt to draw from the hat for the experiment. For example, to determine the probability of drawing 2 blue balls and 1 red ball from the hat, set `expected_balls` to `{"blue":2, "red":1}`.
- `expected_balls`: An object indicating the exact group of balls to attempt to draw from the hat for the experiment. For example, to determine the probability of drawing 2 blue balls and 1 red ball from the hat, set `expected_balls` to `{'blue':2, 'red':1}`.
- `num_balls_drawn`: The number of balls to draw out of the hat in each experiment.
- `num_experiments`: The number of experiments to perform. (The more experiments performed, the more accurate the approximate probability will be.)
@@ -40,7 +40,7 @@ Here is how you would call the `experiment` function based on the example above
```py
hat = Hat(black=6, red=4, green=3)
probability = experiment(hat=hat,
expected_balls={"red":2,"green":1},
expected_balls={'red':2,'green':1},
num_balls_drawn=5,
num_experiments=2000)
```

2
curriculum/challenges/arabic/07-scientific-computing-with-python/learn-data-structures-by-building-the-merge-sort-algorithm/6569c05b9166f9d5bb36c09e.md
View File

@@ -7,7 +7,7 @@ dashedName: step-30
# --description--
Use the `print()` function to print the string `Unsorted array:`.
Use the `print()` function to print the string `'Unsorted array:'`.
# --hints--

2
curriculum/challenges/arabic/07-scientific-computing-with-python/learn-data-structures-by-building-the-merge-sort-algorithm/6569c2cbf6c993ea8cd85682.md
View File

@@ -7,7 +7,7 @@ dashedName: step-33
# --description--
At this point, the `numbers` list has been sorted. Call the `print` function to print string `Sorted array:` and the sorted list.
At this point, the `numbers` list has been sorted. Call the `print` function to print string `'Sorted array: '` and the sorted list.
To do that, concatenate `'Sorted array: '` and `str(numbers)` in the `print()` call.

4
curriculum/challenges/arabic/07-scientific-computing-with-python/learn-lambda-functions-by-building-an-expense-tracker/65823ff0d4b991510fade1a8.md
View File

@@ -7,11 +7,11 @@ dashedName: step-21
# --description--
Within the `filter_expenses_by_category` function, replace `pass` with a `lambda` function. Use `expense` as the parameter and return the comparison between the value of the `'category'` key of the `expense` dictionary and `category` using the equality operator.
Within the `filter_expenses_by_category` function, replace `pass` with a `lambda` function. Use `expense` as the parameter and evaluate the comparison between the value of the `'category'` key of the `expense` dictionary and `category` using the equality operator.
# --hints--
You should create a `lambda` function that uses a parameter named `expense` and returns the expression `expense['category'] == category` inside the `filter_expenses_by_category` function.
You should create a `lambda` function that uses a parameter named `expense` and evaluates the expression `expense['category'] == category` inside the `filter_expenses_by_category` function.
```js
({ test: () => assert(runPython(`_Node(_code).find_function("filter_expenses_by_category").has_stmt("lambda expense: expense['category'] == category")`)) })

22
curriculum/challenges/arabic/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/614396f7ae83f20ea6f9f4b3.md
View File

@@ -9,7 +9,7 @@ dashedName: step-26
داخل عنصر `section` الثاني، قم بإضافة عنصرين `div` يحملين class بقيمة `question-block`.
ثم داخل كل عنصر `div.question-block`، قم بإضافة عنصر `p` مع نص للأرقام المتزايدة، بدءا من `1`، و `fieldset` واحد مع class بقيمة `question`.
Then, within each `div.question-block` element, add one `h3` element with text of incrementing numbers, starting at `1`, and one `fieldset` element with a class of `question`.
# --hints--
@@ -31,22 +31,22 @@ assert.equal(document.querySelectorAll('section:nth-of-type(2) > div')?.[0]?.cla
assert.equal(document.querySelectorAll('section:nth-of-type(2) > div')?.[1]?.className, 'question-block');
```
يجب عليك دمج عنصر `p` واحد داخل كل عنصر من عناصر `div.question-block`.
You should nest one `h3` element within each `div.question-block` element.
```js
assert.equal(document.querySelectorAll('section:nth-of-type(2) > div.question-block > p')?.length, 2);
assert.equal(document.querySelectorAll('section:nth-of-type(2) > div.question-block > h3')?.length, 2);
```
يجب عليك إعطاء أول عنصر `p` النص `1`.
You should give the first `h3` element text of `1`.
```js
assert.equal(document.querySelectorAll('section:nth-of-type(2) > div.question-block > p')?.[0]?.textContent, '1');
assert.equal(document.querySelectorAll('section:nth-of-type(2) > div.question-block > h3')?.[0]?.textContent, '1');
```
يجب عليك إعطاء ثاني عنصر `p` النص `2`.
You should give the second `h3` element text of `2`.
```js
assert.equal(document.querySelectorAll('section:nth-of-type(2) > div.question-block > p')?.[1]?.textContent, '2');
assert.equal(document.querySelectorAll('section:nth-of-type(2) > div.question-block > h3')?.[1]?.textContent, '2');
```
يجب عليك دمج عنصر `fieldset` واحد داخل كل عنصر من عناصر `div.question-block`.
@@ -55,16 +55,16 @@ assert.equal(document.querySelectorAll('section:nth-of-type(2) > div.question-bl
assert.equal(document.querySelectorAll('section:nth-of-type(2) > div.question-block > fieldset')?.length, 2);
```
يجب عليك وضع عنصر `fieldset` الأول بعد عنصر `p` الأول.
You should place the first `fieldset` element after the first `h3` element.
```js
assert.exists(document.querySelector('section:nth-of-type(2) > div.question-block > p + fieldset'));
assert.exists(document.querySelector('section:nth-of-type(2) > div.question-block > h3 + fieldset'));
```
يجب عليك وضع عنصر `fieldset` الثاني بعد عنصر `p` الثاني.
You should place the second `fieldset` element after the second `h3` element.
```js
assert.exists(document.querySelector('section:nth-of-type(2) > div.question-block:nth-of-type(2) > p + fieldset'));
assert.exists(document.querySelector('section:nth-of-type(2) > div.question-block:nth-of-type(2) > h3 + fieldset'));
```
يجب عليك إعطاء أول عنصر `fieldset` سمة class بقيمة `question`.

4
curriculum/challenges/arabic/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/6143cb26f7edff2dc28f7da5.md
View File

@@ -96,11 +96,11 @@ assert.equal(document.querySelectorAll('fieldset > ul')?.[1]?.querySelectorAll('
<section role="region" aria-labelledby="html-questions">
<h2 id="html-questions">HTML</h2>
<div class="question-block">
<p>1</p>
<h3>1</h3>
<fieldset class="question"></fieldset>
</div>
<div class="question-block">
<p>2</p>
<h3>2</h3>
<fieldset class="question"></fieldset>
</div>
</section>

4
curriculum/challenges/arabic/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/6144e818fd5ea704fe56081d.md
View File

@@ -102,7 +102,7 @@ assert.notEqual(document.querySelectorAll('legend')?.[0]?.textContent, document.
<section role="region" aria-labelledby="html-questions">
<h2 id="html-questions">HTML</h2>
<div class="question-block">
<p>1</p>
<h3>1</h3>
<fieldset class="question">
<legend></legend>
<ul>
@@ -112,7 +112,7 @@ assert.notEqual(document.querySelectorAll('legend')?.[0]?.textContent, document.
</fieldset>
</div>
<div class="question-block">
<p>2</p>
<h3>2</h3>
<fieldset class="question">
<legend></legend>
<ul>

4
curriculum/challenges/arabic/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/6144f8dc6849e405dd8bb829.md
View File

@@ -131,7 +131,7 @@ assert.equal(document.querySelectorAll('ul.answers-list > li > label > input')?.
<section role="region" aria-labelledby="html-questions">
<h2 id="html-questions">HTML</h2>
<div class="question-block">
<p>1</p>
<h3>1</h3>
<fieldset class="question" name="html-question-one">
<legend>
The legend element represents a caption for the content of its
@@ -145,7 +145,7 @@ assert.equal(document.querySelectorAll('ul.answers-list > li > label > input')?.
</fieldset>
</div>
<div class="question-block">
<p>2</p>
<h3>2</h3>
<fieldset class="question" name="html-question-two">
<legend>
A label element nesting an input element is required to have a

4
curriculum/challenges/arabic/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/6145e6eeaa66c605eb087fe9.md
View File

@@ -81,7 +81,7 @@ assert.equal(document.querySelectorAll('ul.answers-list > li > label > input')?.
<section role="region" aria-labelledby="html-questions">
<h2 id="html-questions">HTML</h2>
<div class="question-block">
<p>1</p>
<h3>1</h3>
<fieldset class="question" name="html-question-one">
<legend>
The legend element represents a caption for the content of its
@@ -103,7 +103,7 @@ assert.equal(document.querySelectorAll('ul.answers-list > li > label > input')?.
</fieldset>
</div>
<div class="question-block">
<p>2</p>
<h3>2</h3>
<fieldset class="question" name="html-question-two">
<legend>
A label element nesting an input element is required to have a

4
curriculum/challenges/arabic/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/6145e8b5080a5f06bb0223d0.md
View File

@@ -171,7 +171,7 @@ assert.equal(document.querySelectorAll('ul.answers-list > li > label')?.[3]?.tex
<section role="region" aria-labelledby="html-questions">
<h2 id="html-questions">HTML</h2>
<div class="question-block">
<p>1</p>
<h3>1</h3>
<fieldset class="question" name="html-question-one">
<legend>
The legend element represents a caption for the content of its
@@ -193,7 +193,7 @@ assert.equal(document.querySelectorAll('ul.answers-list > li > label')?.[3]?.tex
</fieldset>
</div>
<div class="question-block">
<p>2</p>
<h3>2</h3>
<fieldset class="question" name="html-question-two">
<legend>
A label element nesting an input element is required to have a

4
curriculum/challenges/arabic/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/6145eb5f08a38a0786c7a80c.md
View File

@@ -104,7 +104,7 @@ assert.notEqual(i(0), i(2));
<section role="region" aria-labelledby="html-questions">
<h2 id="html-questions">HTML</h2>
<div class="question-block">
<p>1</p>
<h3>1</h3>
<fieldset class="question" name="html-question-one">
<legend>
The legend element represents a caption for the content of its
@@ -128,7 +128,7 @@ assert.notEqual(i(0), i(2));
</fieldset>
</div>
<div class="question-block">
<p>2</p>
<h3>2</h3>
<fieldset class="question" name="html-question-two">
<legend>
A label element nesting an input element is required to have a

4
curriculum/challenges/arabic/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/6145ed1f22caab087630aaad.md
View File

@@ -69,7 +69,7 @@ assert.include(new __helpers.CSSHelp(document).getStyle('p::before')?.content, '
<section role="region" aria-labelledby="html-questions">
<h2 id="html-questions">HTML</h2>
<div class="question-block">
<p>1</p>
<h3>1</h3>
<fieldset class="question" name="html-question-one">
<legend>
The legend element represents a caption for the content of its
@@ -92,7 +92,7 @@ assert.include(new __helpers.CSSHelp(document).getStyle('p::before')?.content, '
</fieldset>
</div>
<div class="question-block">
<p>2</p>
<h3>2</h3>
<fieldset class="question" name="html-question-two">
<legend>
A label element nesting an input element is required to have a

4
curriculum/challenges/arabic/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/6145ee65e2e1530938cb594d.md
View File

@@ -107,7 +107,7 @@ assert.equal(document.querySelector('section:nth-of-type(3) > div.formrow > div:
<section role="region" aria-labelledby="html-questions">
<h2 id="html-questions">HTML</h2>
<div class="question-block">
<p>1</p>
<h3>1</h3>
<fieldset class="question" name="html-question-one">
<legend>
The legend element represents a caption for the content of its
@@ -130,7 +130,7 @@ assert.equal(document.querySelector('section:nth-of-type(3) > div.formrow > div:
</fieldset>
</div>
<div class="question-block">
<p>2</p>
<h3>1</h3>
<fieldset class="question" name="html-question-two">
<legend>
A label element nesting an input element is required to have a

4
curriculum/challenges/arabic/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/6145f02240ff8f09f7ec913c.md
View File

@@ -81,7 +81,7 @@ assert.isAtLeast(document.querySelectorAll('.formrow > .question-block')?.[1]?.q
<section role="region" aria-labelledby="html-questions">
<h2 id="html-questions">HTML</h2>
<div class="question-block">
<p>1</p>
<h3>1</h3>
<fieldset class="question" name="html-question-one">
<legend>
The legend element represents a caption for the content of its
@@ -104,7 +104,7 @@ assert.isAtLeast(document.querySelectorAll('.formrow > .question-block')?.[1]?.q
</fieldset>
</div>
<div class="question-block">
<p>2</p>
<h3>2</h3>
<fieldset class="question" name="html-question-two">
<legend>
A label element nesting an input element is required to have a

4
curriculum/challenges/arabic/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/6145f14f019a4b0adb94b051.md
View File

@@ -113,7 +113,7 @@ assert.isTrue(document.querySelector('div.answer > select')?.required);
<section role="region" aria-labelledby="html-questions">
<h2 id="html-questions">HTML</h2>
<div class="question-block">
<p>1</p>
<h3>1</h3>
<fieldset class="question" name="html-question-one">
<legend>
The legend element represents a caption for the content of its
@@ -136,7 +136,7 @@ assert.isTrue(document.querySelector('div.answer > select')?.required);
</fieldset>
</div>
<div class="question-block">
<p>2</p>
<h3>2</h3>
<fieldset class="question" name="html-question-two">
<legend>
A label element nesting an input element is required to have a

4
curriculum/challenges/arabic/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/6145f3a5cd9be60b9459cdd6.md
View File

@@ -81,7 +81,7 @@ assert.notEmpty(document.querySelector('.answer > select')?.name);
<section role="region" aria-labelledby="html-questions">
<h2 id="html-questions">HTML</h2>
<div class="question-block">
<p>1</p>
<h3>1</h3>
<fieldset class="question" name="html-question-one">
<legend>
The legend element represents a caption for the content of its
@@ -104,7 +104,7 @@ assert.notEmpty(document.querySelector('.answer > select')?.name);
</fieldset>
</div>
<div class="question-block">
<p>2</p>
<h3>2</h3>
<fieldset class="question" name="html-question-two">
<legend>
A label element nesting an input element is required to have a

4
curriculum/challenges/arabic/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/6145f47393fbe70c4d885f9c.md
View File

@@ -87,7 +87,7 @@ assert.notEmpty(document.querySelectorAll('div.answer')?.[1]?.querySelector('tex
<section role="region" aria-labelledby="html-questions">
<h2 id="html-questions">HTML</h2>
<div class="question-block">
<p>1</p>
<h3>1</h3>
<fieldset class="question" name="html-question-one">
<legend>
The legend element represents a caption for the content of its
@@ -110,7 +110,7 @@ assert.notEmpty(document.querySelectorAll('div.answer')?.[1]?.querySelector('tex
</fieldset>
</div>
<div class="question-block">
<p>2</p>
<h3>2</h3>
<fieldset class="question" name="html-question-two">
<legend>
A label element nesting an input element is required to have a

4
curriculum/challenges/arabic/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/6145f59029474c0d3dc1c8b8.md
View File

@@ -94,7 +94,7 @@ assert.match(document.querySelectorAll('.answer')?.[1]?.querySelector('textarea'
<section role="region" aria-labelledby="html-questions">
<h2 id="html-questions">HTML</h2>
<div class="question-block">
<p>1</p>
<h3>1</h3>
<fieldset class="question" name="html-question-one">
<legend>
The legend element represents a caption for the content of its
@@ -117,7 +117,7 @@ assert.match(document.querySelectorAll('.answer')?.[1]?.querySelector('textarea'
</fieldset>
</div>
<div class="question-block">
<p>2</p>
<h3>2</h3>
<fieldset class="question" name="html-question-two">
<legend>
A label element nesting an input element is required to have a

4
curriculum/challenges/arabic/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/6145f685797bd30df9784e8c.md
View File

@@ -88,7 +88,7 @@ assert.equal(document.querySelector('button[type="submit"]')?.textContent ?? doc
<section role="region" aria-labelledby="html-questions">
<h2 id="html-questions">HTML</h2>
<div class="question-block">
<p>1</p>
<h3>1</h3>
<fieldset class="question" name="html-question-one">
<legend>
The legend element represents a caption for the content of its
@@ -111,7 +111,7 @@ assert.equal(document.querySelector('button[type="submit"]')?.textContent ?? doc
</fieldset>
</div>
<div class="question-block">
<p>2</p>
<h3>2</h3>
<fieldset class="question" name="html-question-two">
<legend>
A label element nesting an input element is required to have a

4
curriculum/challenges/arabic/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/6145f829ac6a920ebf5797d7.md
View File

@@ -71,7 +71,7 @@ assert.exists(document.querySelector('footer > address'));
<section role="region" aria-labelledby="html-questions">
<h2 id="html-questions">HTML</h2>
<div class="question-block">
<p>1</p>
<h3>1</h3>
<fieldset class="question" name="html-question-one">
<legend>
The legend element represents a caption for the content of its
@@ -94,7 +94,7 @@ assert.exists(document.querySelector('footer > address'));
</fieldset>
</div>
<div class="question-block">
<p>2</p>
<h3>2</h3>
<fieldset class="question" name="html-question-two">
<legend>
A label element nesting an input element is required to have a

4
curriculum/challenges/arabic/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/6145f8f8bcd4370f6509078e.md
View File

@@ -72,7 +72,7 @@ assert.equal(document.querySelector('address')?.innerText, 'freeCodeCamp\nSan Fr
<section role="region" aria-labelledby="html-questions">
<h2 id="html-questions">HTML</h2>
<div class="question-block">
<p>1</p>
<h3>1</h3>
<fieldset class="question" name="html-question-one">
<legend>
The legend element represents a caption for the content of its
@@ -95,7 +95,7 @@ assert.equal(document.querySelector('address')?.innerText, 'freeCodeCamp\nSan Fr
</fieldset>
</div>
<div class="question-block">
<p>2</p>
<h3>2</h3>
<fieldset class="question" name="html-question-two">
<legend>
A label element nesting an input element is required to have a

4
curriculum/challenges/arabic/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/6145fb5018cb5b100cb2a88c.md
View File

@@ -78,7 +78,7 @@ assert.equal(document.querySelector('address')?.innerHTML?.match(/freeCodeCamp/g
<section role="region" aria-labelledby="html-questions">
<h2 id="html-questions">HTML</h2>
<div class="question-block">
<p>1</p>
<h3>1</h3>
<fieldset class="question" name="html-question-one">
<legend>
The legend element represents a caption for the content of its
@@ -101,7 +101,7 @@ assert.equal(document.querySelector('address')?.innerHTML?.match(/freeCodeCamp/g
</fieldset>
</div>
<div class="question-block">
<p>2</p>
<h3>2</h3>
<fieldset class="question" name="html-question-two">
<legend>
A label element nesting an input element is required to have a

4
curriculum/challenges/arabic/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/6145fc3707fc3310c277f5c8.md
View File

@@ -103,7 +103,7 @@ assert.equal(display, 'block');
<section role="region" aria-labelledby="html-questions">
<h2 id="html-questions">HTML</h2>
<div class="question-block">
<p>1</p>
<h3>1</h3>
<fieldset class="question" name="html-question-one">
<legend>
The legend element represents a caption for the content of its
@@ -126,7 +126,7 @@ assert.equal(display, 'block');
</fieldset>
</div>
<div class="question-block">
<p>2</p>
<h3>2</h3>
<fieldset class="question" name="html-question-two">
<legend>
A label element nesting an input element is required to have a

4
curriculum/challenges/arabic/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/614796cb8086be482d60e0ac.md
View File

@@ -111,7 +111,7 @@ for (let elem of document.querySelectorAll('li > a')) {
<section role="region" aria-labelledby="html-questions">
<h2 id="html-questions">HTML</h2>
<div class="question-block">
<p>1</p>
<h3>1</h3>
<fieldset class="question" name="html-question-one">
<legend>
The legend element represents a caption for the content of its
@@ -134,7 +134,7 @@ for (let elem of document.querySelectorAll('li > a')) {
</fieldset>
</div>
<div class="question-block">
<p>2</p>
<h3>2</h3>
<fieldset class="question" name="html-question-two">
<legend>
A label element nesting an input element is required to have a

4
curriculum/challenges/arabic/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/6147a14ef5668b5881ef2297.md
View File

@@ -96,7 +96,7 @@ assert.equal(cursor, 'pointer');
<section role="region" aria-labelledby="html-questions">
<h2 id="html-questions">HTML</h2>
<div class="question-block">
<p>1</p>
<h3>1</h3>
<fieldset class="question" name="html-question-one">
<legend>
The legend element represents a caption for the content of its
@@ -119,7 +119,7 @@ assert.equal(cursor, 'pointer');
</fieldset>
</div>
<div class="question-block">
<p>2</p>
<h3>2</h3>
<fieldset class="question" name="html-question-two">
<legend>
A label element nesting an input element is required to have a

4
curriculum/challenges/arabic/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/614878f7a412310647873015.md
View File

@@ -83,7 +83,7 @@ assert.equal(new __helpers.CSSHelp(document).getStyle('header')?.top, '0px');
<section role="region" aria-labelledby="html-questions">
<h2 id="html-questions">HTML</h2>
<div class="question-block">
<p>1</p>
<h3>1</h3>
<fieldset class="question" name="html-question-one">
<legend>
The legend element represents a caption for the content of its
@@ -106,7 +106,7 @@ assert.equal(new __helpers.CSSHelp(document).getStyle('header')?.top, '0px');
</fieldset>
</div>
<div class="question-block">
<p>2</p>
<h3>2</h3>
<fieldset class="question" name="html-question-two">
<legend>
A label element nesting an input element is required to have a

4
curriculum/challenges/arabic/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/61487b77d4a37707073a64e5.md
View File

@@ -85,7 +85,7 @@ assert.isEmpty(new __helpers.CSSHelp(document).getStyle('main')?.paddingRight);
<section role="region" aria-labelledby="html-questions">
<h2 id="html-questions">HTML</h2>
<div class="question-block">
<p>1</p>
<h3>1</h3>
<fieldset class="question" name="html-question-one">
<legend>
The legend element represents a caption for the content of its
@@ -108,7 +108,7 @@ assert.isEmpty(new __helpers.CSSHelp(document).getStyle('main')?.paddingRight);
</fieldset>
</div>
<div class="question-block">
<p>2</p>
<h3>2</h3>
<fieldset class="question" name="html-question-two">
<legend>
A label element nesting an input element is required to have a

4
curriculum/challenges/arabic/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/61487da611a65307e78d2c20.md
View File

@@ -96,7 +96,7 @@ assert.equal(new __helpers.CSSHelp(document).getStyle('nav > ul')?.height, '100%
<section role="region" aria-labelledby="html-questions">
<h2 id="html-questions">HTML</h2>
<div class="question-block">
<p>1</p>
<h3>1</h3>
<fieldset class="question" name="html-question-one">
<legend>
The legend element represents a caption for the content of its
@@ -119,7 +119,7 @@ assert.equal(new __helpers.CSSHelp(document).getStyle('nav > ul')?.height, '100%
</fieldset>
</div>
<div class="question-block">
<p>2</p>
<h3>2</h3>
<fieldset class="question" name="html-question-two">
<legend>
A label element nesting an input element is required to have a

4
curriculum/challenges/arabic/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/61487f703571b60899055cf9.md
View File

@@ -101,7 +101,7 @@ assert.equal(new __helpers.CSSHelp(document).getStyle('section')?.maxWidth, '600
<section role="region" aria-labelledby="html-questions">
<h2 id="html-questions">HTML</h2>
<div class="question-block">
<p>1</p>
<h3>1</h3>
<fieldset class="question" name="html-question-one">
<legend>
The legend element represents a caption for the content of its
@@ -124,7 +124,7 @@ assert.equal(new __helpers.CSSHelp(document).getStyle('section')?.maxWidth, '600
</fieldset>
</div>
<div class="question-block">
<p>2</p>
<h3>2</h3>
<fieldset class="question" name="html-question-two">
<legend>
A label element nesting an input element is required to have a

4
curriculum/challenges/arabic/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/614880dc16070e093e29bc56.md
View File

@@ -69,7 +69,7 @@ assert.equal(new __helpers.CSSHelp(document).getStyle('h2')?.paddingTop, '60px')
<section role="region" aria-labelledby="html-questions">
<h2 id="html-questions">HTML</h2>
<div class="question-block">
<p>1</p>
<h3>1</h3>
<fieldset class="question" name="html-question-one">
<legend>
The legend element represents a caption for the content of its
@@ -92,7 +92,7 @@ assert.equal(new __helpers.CSSHelp(document).getStyle('h2')?.paddingTop, '60px')
</fieldset>
</div>
<div class="question-block">
<p>2</p>
<h3>2</h3>
<fieldset class="question" name="html-question-two">
<legend>
A label element nesting an input element is required to have a

4
curriculum/challenges/arabic/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/614883b6fa720e09fb167de9.md
View File

@@ -87,7 +87,7 @@ assert.isAtLeast(Number(new __helpers.CSSHelp(document).getStyle('.info')?.paddi
<section role="region" aria-labelledby="html-questions">
<h2 id="html-questions">HTML</h2>
<div class="question-block">
<p>1</p>
<h3>1</h3>
<fieldset class="question" name="html-question-one">
<legend>
The legend element represents a caption for the content of its
@@ -110,7 +110,7 @@ assert.isAtLeast(Number(new __helpers.CSSHelp(document).getStyle('.info')?.paddi
</fieldset>
</div>
<div class="question-block">
<p>2</p>
<h3>2</h3>
<fieldset class="question" name="html-question-two">
<legend>
A label element nesting an input element is required to have a

4
curriculum/challenges/arabic/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/614884c1f5d6f30ab3d78cde.md
View File

@@ -167,7 +167,7 @@ assert.isAtLeast(valInPx, 13);
<section role="region" aria-labelledby="html-questions">
<h2 id="html-questions">HTML</h2>
<div class="question-block">
<p>1</p>
<h3>1</h3>
<fieldset class="question" name="html-question-one">
<legend>
The legend element represents a caption for the content of its
@@ -190,7 +190,7 @@ assert.isAtLeast(valInPx, 13);
</fieldset>
</div>
<div class="question-block">
<p>2</p>
<h3>2</h3>
<fieldset class="question" name="html-question-two">
<legend>
A label element nesting an input element is required to have a

4
curriculum/challenges/arabic/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/61488ecfd05e290b5712e6da.md
View File

@@ -80,7 +80,7 @@ assert.equal(textAlign, 'left');
<section role="region" aria-labelledby="html-questions">
<h2 id="html-questions">HTML</h2>
<div class="question-block">
<p>1</p>
<h3>1</h3>
<fieldset class="question" name="html-question-one">
<legend>
The legend element represents a caption for the content of its
@@ -103,7 +103,7 @@ assert.equal(textAlign, 'left');
</fieldset>
</div>
<div class="question-block">
<p>2</p>
<h3>2</h3>
<fieldset class="question" name="html-question-two">
<legend>
A label element nesting an input element is required to have a

4
curriculum/challenges/arabic/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/6148d99cdc7acd0c519862cb.md
View File

@@ -80,7 +80,7 @@ assert.equal(minWidth, '55px');
<section role="region" aria-labelledby="html-questions">
<h2 id="html-questions">HTML</h2>
<div class="question-block">
<p>1</p>
<h3>1</h3>
<fieldset class="question" name="html-question-one">
<legend>
The legend element represents a caption for the content of its
@@ -103,7 +103,7 @@ assert.equal(minWidth, '55px');
</fieldset>
</div>
<div class="question-block">
<p>2</p>
<h3>2</h3>
<fieldset class="question" name="html-question-two">
<legend>
A label element nesting an input element is required to have a

4
curriculum/challenges/arabic/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/6148da157cc0bd0d06df5c0a.md
View File

@@ -83,7 +83,7 @@ document.querySelectorAll('.info label').forEach(el => {
<section role="region" aria-labelledby="html-questions">
<h2 id="html-questions">HTML</h2>
<div class="question-block">
<p>1</p>
<h3>1</h3>
<fieldset class="question" name="html-question-one">
<legend>
The legend element represents a caption for the content of its
@@ -106,7 +106,7 @@ document.querySelectorAll('.info label').forEach(el => {
</fieldset>
</div>
<div class="question-block">
<p>2</p>
<h3>2</h3>
<fieldset class="question" name="html-question-two">
<legend>
A label element nesting an input element is required to have a

4
curriculum/challenges/arabic/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/6148dc095264000dce348bf5.md
View File

@@ -101,7 +101,7 @@ assert.equal(new __helpers.CSSHelp(document).getStyle('.question-block')?.textAl
<section role="region" aria-labelledby="html-questions">
<h2 id="html-questions">HTML</h2>
<div class="question-block">
<p>1</p>
<h3>1</h3>
<fieldset class="question" name="html-question-one">
<legend>
The legend element represents a caption for the content of its
@@ -124,7 +124,7 @@ assert.equal(new __helpers.CSSHelp(document).getStyle('.question-block')?.textAl
</fieldset>
</div>
<div class="question-block">
<p>2</p>
<h3>2</h3>
<fieldset class="question" name="html-question-two">
<legend>
A label element nesting an input element is required to have a

4
curriculum/challenges/arabic/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/6148dcaaf2e8750e6cb4501a.md
View File

@@ -87,7 +87,7 @@ assert.equal(new __helpers.CSSHelp(document).getStyle('p')?.fontSize, '20px');
<section role="region" aria-labelledby="html-questions">
<h2 id="html-questions">HTML</h2>
<div class="question-block">
<p>1</p>
<h3>1</h3>
<fieldset class="question" name="html-question-one">
<legend>
The legend element represents a caption for the content of its
@@ -110,7 +110,7 @@ assert.equal(new __helpers.CSSHelp(document).getStyle('p')?.fontSize, '20px');
</fieldset>
</div>
<div class="question-block">
<p>2</p>
<h3>2</h3>
<fieldset class="question" name="html-question-two">
<legend>
A label element nesting an input element is required to have a

4
curriculum/challenges/arabic/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/6148dd31d210990f0fb140f8.md
View File

@@ -77,7 +77,7 @@ assert.equal(new __helpers.CSSHelp(document).getStyle('.question')?.paddingBotto
<section role="region" aria-labelledby="html-questions">
<h2 id="html-questions">HTML</h2>
<div class="question-block">
<p>1</p>
<h3>1</h3>
<fieldset class="question" name="html-question-one">
<legend>
The legend element represents a caption for the content of its
@@ -100,7 +100,7 @@ assert.equal(new __helpers.CSSHelp(document).getStyle('.question')?.paddingBotto
</fieldset>
</div>
<div class="question-block">
<p>2</p>
<h3>2</h3>
<fieldset class="question" name="html-question-two">
<legend>
A label element nesting an input element is required to have a

4
curriculum/challenges/arabic/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/6148defa9c01520fb9d178a0.md
View File

@@ -83,7 +83,7 @@ assert.equal(new __helpers.CSSHelp(document).getStyle('.answers-list')?.padding,
<section role="region" aria-labelledby="html-questions">
<h2 id="html-questions">HTML</h2>
<div class="question-block">
<p>1</p>
<h3>1</h3>
<fieldset class="question" name="html-question-one">
<legend>
The legend element represents a caption for the content of its
@@ -106,7 +106,7 @@ assert.equal(new __helpers.CSSHelp(document).getStyle('.answers-list')?.padding,
</fieldset>
</div>
<div class="question-block">
<p>2</p>
<h3>2</h3>
<fieldset class="question" name="html-question-two">
<legend>
A label element nesting an input element is required to have a

4
curriculum/challenges/arabic/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/6148dfab9b54c110577de165.md
View File

@@ -115,7 +115,7 @@ assert.equal(new __helpers.CSSHelp(document).getStyle('button')?.border, '3px so
<section role="region" aria-labelledby="html-questions">
<h2 id="html-questions">HTML</h2>
<div class="question-block">
<p>1</p>
<h3>1</h3>
<fieldset class="question" name="html-question-one">
<legend>
The legend element represents a caption for the content of its
@@ -138,7 +138,7 @@ assert.equal(new __helpers.CSSHelp(document).getStyle('button')?.border, '3px so
</fieldset>
</div>
<div class="question-block">
<p>2</p>
<h3>2</h3>
<fieldset class="question" name="html-question-two">
<legend>
A label element nesting an input element is required to have a

4
curriculum/challenges/arabic/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/6148e0bcc13efd10f7d7a6a9.md
View File

@@ -81,7 +81,7 @@ assert.equal(new __helpers.CSSHelp(document).getStyle('footer')?.justifyContent,
<section role="region" aria-labelledby="html-questions">
<h2 id="html-questions">HTML</h2>
<div class="question-block">
<p>1</p>
<h3>1</h3>
<fieldset class="question" name="html-question-one">
<legend>
The legend element represents a caption for the content of its
@@ -104,7 +104,7 @@ assert.equal(new __helpers.CSSHelp(document).getStyle('footer')?.justifyContent,
</fieldset>
</div>
<div class="question-block">
<p>2</p>
<h3>2</h3>
<fieldset class="question" name="html-question-two">
<legend>
A label element nesting an input element is required to have a

4
curriculum/challenges/arabic/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/6148e161ecec9511941f8833.md
View File

@@ -95,7 +95,7 @@ assert.isAtLeast(contrast(backgroundColour, aColour), 7);
<section role="region" aria-labelledby="html-questions">
<h2 id="html-questions">HTML</h2>
<div class="question-block">
<p>1</p>
<h3>1</h3>
<fieldset class="question" name="html-question-one">
<legend>
The legend element represents a caption for the content of its
@@ -118,7 +118,7 @@ assert.isAtLeast(contrast(backgroundColour, aColour), 7);
</fieldset>
</div>
<div class="question-block">
<p>2</p>
<h3>2</h3>
<fieldset class="question" name="html-question-two">
<legend>
A label element nesting an input element is required to have a

4
curriculum/challenges/arabic/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/6148e28706b34912340fd042.md
View File

@@ -93,7 +93,7 @@ assert.isAtLeast(Number(window.getComputedStyle(document.querySelector('address'
<section role="region" aria-labelledby="html-questions">
<h2 id="html-questions">HTML</h2>
<div class="question-block">
<p>1</p>
<h3>1</h3>
<fieldset class="question" name="html-question-one">
<legend>
The legend element represents a caption for the content of its
@@ -116,7 +116,7 @@ assert.isAtLeast(Number(window.getComputedStyle(document.querySelector('address'
</fieldset>
</div>
<div class="question-block">
<p>2</p>
<h3>2</h3>
<fieldset class="question" name="html-question-two">
<legend>
A label element nesting an input element is required to have a

4
curriculum/challenges/arabic/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/6148e335c1edd512d00e4691.md
View File

@@ -71,7 +71,7 @@ assert.equal(new __helpers.CSSHelp(document).getStyle('*')?.scrollBehavior, 'smo
<section role="region" aria-labelledby="html-questions">
<h2 id="html-questions">HTML</h2>
<div class="question-block">
<p>1</p>
<h3>1</h3>
<fieldset class="question" name="html-question-one">
<legend>
The legend element represents a caption for the content of its
@@ -94,7 +94,7 @@ assert.equal(new __helpers.CSSHelp(document).getStyle('*')?.scrollBehavior, 'smo
</fieldset>
</div>
<div class="question-block">
<p>2</p>
<h3>2</h3>
<fieldset class="question" name="html-question-two">
<legend>
A label element nesting an input element is required to have a

4
curriculum/challenges/arabic/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/6148e41c728f65138addf9cc.md
View File

@@ -87,7 +87,7 @@ assert.notExists(new __helpers.CSSHelp(document).getStyle('*'));
<section role="region" aria-labelledby="html-questions">
<h2 id="html-questions">HTML</h2>
<div class="question-block">
<p>1</p>
<h3>1</h3>
<fieldset class="question" name="html-question-one">
<legend>
The legend element represents a caption for the content of its
@@ -110,7 +110,7 @@ assert.notExists(new __helpers.CSSHelp(document).getStyle('*'));
</fieldset>
</div>
<div class="question-block">
<p>2</p>
<h3>2</h3>
<fieldset class="question" name="html-question-two">
<legend>
A label element nesting an input element is required to have a

8
curriculum/challenges/arabic/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/6148e5aeb102e3142de026a2.md
View File

@@ -89,7 +89,7 @@ assert.equal(document.querySelectorAll('a')?.[2]?.getAttribute('accesskey')?.len
<section role="region" aria-labelledby="html-questions">
<h2 id="html-questions">HTML</h2>
<div class="question-block">
<p>1</p>
<h3>1</h3>
<fieldset class="question" name="html-question-one">
<legend>
The legend element represents a caption for the content of its
@@ -112,7 +112,7 @@ assert.equal(document.querySelectorAll('a')?.[2]?.getAttribute('accesskey')?.len
</fieldset>
</div>
<div class="question-block">
<p>2</p>
<h3>2</h3>
<fieldset class="question" name="html-question-two">
<legend>
A label element nesting an input element is required to have a
@@ -408,7 +408,7 @@ address {
<section role="region" aria-labelledby="html-questions">
<h2 id="html-questions">HTML</h2>
<div class="question-block">
<p>1</p>
<h3>1</h3>
<fieldset class="question" name="html-question-one">
<legend>
The legend element represents a caption for the content of its
@@ -431,7 +431,7 @@ address {
</fieldset>
</div>
<div class="question-block">
<p>2</p>
<h3>2</h3>
<fieldset class="question" name="html-question-two">
<legend>
A label element nesting an input element is required to have a

4
curriculum/challenges/arabic/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/6351e7a8684bf5377c4ee7f7.md
View File

@@ -111,7 +111,7 @@ assert.equal(htmlFor, document.querySelectorAll('ul.answers-list > li > label >
<section role="region" aria-labelledby="html-questions">
<h2 id="html-questions">HTML</h2>
<div class="question-block">
<p>1</p>
<h3>1</h3>
<fieldset class="question" name="html-question-one">
<legend>
The legend element represents a caption for the content of its
@@ -133,7 +133,7 @@ assert.equal(htmlFor, document.querySelectorAll('ul.answers-list > li > label >
</fieldset>
</div>
<div class="question-block">
<p>2</p>
<h3>2</h3>
<fieldset class="question" name="html-question-two">
<legend>
A label element nesting an input element is required to have a

14
curriculum/challenges/arabic/14-responsive-web-design-22/learn-basic-css-by-building-a-cafe-menu/5f331e55dfab7a896e53c3a1.md
View File

@@ -9,26 +9,32 @@ dashedName: step-3
يكون `title` واحد من عدة عناصر توفر معلومات إضافية غير مرئية على صفحة الويب، لكنه مفيد لمحركات البحث أو كيف يتم عرض الصفحة.
داخل عنصر `head`، قم بدمج عنصر `meta` مع سمة تسمى `charset` و تعيين قيمتها إلي `utf-8` لإخبار المتصفح كيفية ترميز الأحرف للصفحة. لاحظ أن عناصر `meta` مغلقة ذاتيا (self closing).
Inside the `head` element, nest a `meta` element with an attribute named `charset` set to the value `utf-8` to tell the browser how to encode characters for the page.
# --hints--
يجب أن يكون لديك وسم `meta`.
```js
assert(code.match(/<meta.*?\/?>/is));
assert.match(code, /<meta.*?\/?>/is);
```
The `meta` element is a void element, it should not have an end tag `</meta>`.
```js
assert.notMatch(code, /<\/meta>/i);
```
يجب أن يحتوي وسم `meta` الخاص بك علي سمة `charset`.
```js
assert(code.match(/<meta\s+charset\s*=/i));
assert.match(code, /<meta\s+charset\s*/i);
```
يجب أن تحتوي سمة `charset` الخاصة بك على القيمة `utf-8`.
```js
assert(code.match(/charset\s*=\s*('|")utf-8\1/i));
assert.match(code, /charset\s*=\s*('|")utf-8\1/i);
```
# --seed--

28
curriculum/challenges/arabic/14-responsive-web-design-22/learn-basic-css-by-building-a-cafe-menu/5f3477cb2e27333b1ab2b955.md
View File

@@ -15,42 +15,48 @@ Now you need to link the `styles.css` file, so the styles will be applied again.
```js
const link = document.querySelector('link');
assert(link);
assert.isNotNull(link);
```
The `link` element is a void element, it should not have an end tag `</link>`.
```js
assert.notMatch(code, /<\/link>/i);
```
لا يجب عليك تغيير عنصر `head` الحالي. تأكد من أنك لم تقم بحذف علامة الإغلاق (closing tag).
```js
assert($('head').length === 1);
const headElementCount = document.querySelectorAll('head')?.length;
assert.strictEqual(headElementCount, 1);
```
الكود الخاص بك يجب أن يحتوي على عنصر `link` مغلق ذاتيا.
You should have one `link` element.
```js
const link = document.querySelectorAll('link');
assert(link.length === 1);
const linkElementCount = document.querySelectorAll('link')?.length;
assert.strictEqual(linkElementCount, 1);
```
يجب أن يكون عنصر `link` الخاص بك داخل عنصر `head` الخاص بك.
```js
const link = document.querySelector('head > link');
assert(link);
assert.isNotNull(link);
```
يجب أن يكون عنصر `link` الخاص بك على سمة `rel` بقيمة `stylesheet`.
```js
const link = document.querySelector('link')
const rel = link.getAttribute('rel')
assert(rel == `stylesheet`)
const linkRelValue = document.querySelector('link')?.getAttribute('rel');
assert.strictEqual(linkRelValue, 'stylesheet');
```
عنصر `link` الخاص بك يجب أن يحتوي على سمة `href` بقيمة `styles.css`.
```js
const link = document.querySelector('link')
assert(link.dataset.href == 'styles.css')
const linkHrefValue = document.querySelector('link')?.dataset?.href;
assert.strictEqual(linkHrefValue, 'styles.css');
```

30
curriculum/challenges/arabic/14-responsive-web-design-22/learn-basic-css-by-building-a-cafe-menu/5f3ef6e01f288a026d709587.md
View File

@@ -9,34 +9,42 @@ dashedName: step-66
يمكنك استخدام عنصر `hr` لعرض مقطع بين أجزاء من محتوى مختلف.
أولاً، أضف عنصر `hr` بين عنصر `p` مع فئة (class) تسمى `established` و أول عنصر `section`. لاحظ أن عناصر `hr` مغلقة ذاتيا (self closing).
First, add an `hr` element between the `p` element with the class `established` and the first `section` element.
# --hints--
يجب عليك إضافة عنصر `hr`. عناصر `hr` مغلقة ذاتيا.
يجب عليك إضافة عنصر `hr`.
```js
assert(code.match(/<hr\s?\/?>/i));
assert(!code.match(/<\/hr>/i));
assert.match(code, /<hr\s?\/?>/i);
```
لا تغيير عنصرك `p` الموجود مع فئة (class) تسمى `established`.
The `hr` element is a void element, it should not have an end tag `</hr>`.
```js
assert($('p.established').length === 1);
assert.notMatch(code, /<\/hr>/i);
```
لا يجب عليك تغيير عنصر `main` الحالي.
You should not change your existing `p` element with the class `established`.
```js
assert($('main').length === 1);
const pElementCount = document.querySelectorAll('p.established')?.length;
assert.strictEqual(pElementCount, 1);
```
يجب أن يكون عنصرك `hr` بين عنصرك `p` وعنصرك `section`.
You should not change your existing `main` element.
```js
assert($('hr')[0].previousElementSibling.tagName === 'P');
assert($('hr')[0].nextElementSibling.tagName === 'SECTION');
const mainElementCount = document.querySelectorAll('main')?.length;
assert.strictEqual(mainElementCount, 1);
```
Your `hr` element should be between your `p` element and your `section` element.
```js
const hrElement = document.querySelector('hr');
assert.strictEqual(hrElement?.previousElementSibling?.tagName, 'P');
assert.strictEqual(hrElement?.nextElementSibling?.tagName, 'SECTION');
```
# --seed--

21
curriculum/challenges/arabic/14-responsive-web-design-22/learn-basic-css-by-building-a-cafe-menu/5f46e8284aae155c83015dee.md
View File

@@ -13,22 +13,31 @@ dashedName: step-88
# --hints--
يجب أن يكون لديك وسم `<img>`. تذكر أن عناصر `img` هي self-closing.
You should have an `<img>` tag.
```js
assert($('img').length === 1);
const imageElementCount = document.querySelectorAll('img')?.length;
assert.strictEqual(imageElementCount, 1);
```
يجب أن يكون لعنصر `img` الخاص بك سمة `src` بقيمة `https://cdn.freecodecamp.org/curriculum/css-cafe/coffee.jpg`.
The `img` element is a void element, it should not have an end tag `</img>`.
```js
assert($('img').attr('src') === 'https://cdn.freecodecamp.org/curriculum/css-cafe/coffee.jpg');
assert.notMatch(code, /<\/img>/i);
```
يجب أن يكون لعنصر `img` الخاص بك سمة `alt` بقيمة `coffee icon`.
Your `img` element should have a `src` attribute, with the value `"https://cdn.freecodecamp.org/curriculum/css-cafe/coffee.jpg"`.
```js
assert($('img').attr('alt').match(/coffee icon/i));
const imageSrcValue = document.querySelector('img')?.getAttribute('src');
assert.strictEqual(imageSrcValue, 'https://cdn.freecodecamp.org/curriculum/css-cafe/coffee.jpg');
```
Your `img` element should have an `alt` attribute, with the value `"coffee icon"`.
```js
const imageAltValue = document.querySelector('img')?.getAttribute('alt');
assert.match(imageAltValue, /coffee icon/i);
```
# --seed--

2
curriculum/challenges/arabic/14-responsive-web-design-22/learn-css-variables-by-building-a-city-skyline/5d822fd413a79914d39e98fb.md
View File

@@ -7,7 +7,7 @@ dashedName: step-51
# --description--
غالباً ما تتغير التحولات المتداخلة تدريجياً من لون إلى آخر. يمكنك أن تجعل التغيير خطاً صلباً مثل:
غالباً ما تتغير التحولات المتداخلة تدريجياً من لون إلى آخر. When a more abrupt change is required, the transition can be made with a hard stop like this:
```css
linear-gradient(

2
curriculum/challenges/arabic/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5dc23f9bf86c76b9248c6eba.md
View File

@@ -7,7 +7,7 @@ dashedName: step-7
# --description--
يمكنك إضافة صور إلى موقع الويب الخاص بك باستخدام عنصر `img`. `img` عناصر تحتوي على opening tag بدون closing tag. A tag for an element without a closing tag is known as a <dfn>void element</dfn>.
يمكنك إضافة صور إلى موقع الويب الخاص بك باستخدام عنصر `img`. `img` عناصر تحتوي على opening tag بدون closing tag. An element without a closing tag is known as a <dfn>void element</dfn>.
أضف عنصر `img` تحت عنصر `p`. في هذه المرحلة، لن تظهر أي صورة في المتصفح.

2
curriculum/challenges/arabic/14-responsive-web-design-22/learn-intermediate-css-by-building-a-cat-painting/646ceb843412c74edee27a79.md
View File

@@ -11,7 +11,7 @@ Now you will learn a CSS trick to draw triangles.
This will be used to draw ears on the cat.
Using a class selector, give the `.cat-right-ear` element `height` and `width` properties set to `100px`. Set the `background-color` to white. Set the left and right borders to `35px solid blue`. Set the top and bottom borders to `35px solid red`.
Using a class selector, give the `.cat-right-ear` element `height` and `width` properties set to `100px`. Set the `background-color` to `white`. Set the left and right borders to `35px solid blue`. Set the top and bottom borders to `35px solid red`.
# --hints--

2
curriculum/challenges/arabic/14-responsive-web-design-22/learn-intermediate-css-by-building-a-cat-painting/6476f7a4827bcc61682f2347.md
View File

@@ -9,7 +9,7 @@ dashedName: step-11
The next position property is `absolute`. When you use the `absolute` value for your `position` property, the element is taken out of the normal flow of the document, and then its position is determined by the `top`, `right`, `bottom`, and `left` properties.
Set the position property of your `.cat-head` element to `absolute`, then set `top` and `left` properties to any positive pixel value.
Set the `position` property of your `.cat-head` element to `absolute`, then set `top` and `left` properties to any positive pixel value.
<!-- **Note**: You can experiment with `top`, `left`, `bottom`, and `right` properties here, but the test would only pass for `top` of `300px`, and left of `400px`. -->

2
curriculum/challenges/arabic/14-responsive-web-design-22/learn-intermediate-css-by-building-a-cat-painting/6676a8a8d9861319ee901a90.md
View File

@@ -16,7 +16,7 @@ Using a class selector, give the `.cat-left-ear` element a left and right border
# --hints--
Your `.cat-right-ear` selector not should have a `height` property.
Your `.cat-right-ear` selector should not have a `height` property.
```js
assert(!new __helpers.CSSHelp(document).getStyle('.cat-right-ear')?.height)

2
curriculum/challenges/arabic/15-javascript-algorithms-and-data-structures-22/learn-basic-string-and-array-methods-by-building-a-music-player/655485321913feabbc5f00f8.md
View File

@@ -651,7 +651,7 @@ const playNextSong = () => {
}
};
const playPreviousSong = () =>{
const playPreviousSong = () => {
if (userData?.currentSong === null) return;
else {
const currentSongIndex = getCurrentSongIndex();

2
curriculum/challenges/arabic/15-javascript-algorithms-and-data-structures-22/learn-basic-string-and-array-methods-by-building-a-music-player/6555d458687cb3b357834df9.md
View File

@@ -657,7 +657,7 @@ const playNextSong = () => {
}
};
const playPreviousSong = () =>{
const playPreviousSong = () => {
if (userData?.currentSong === null) return;
else {
const currentSongIndex = getCurrentSongIndex();

2
curriculum/challenges/arabic/15-javascript-algorithms-and-data-structures-22/learn-basic-string-and-array-methods-by-building-a-music-player/6555dd138e70cae6b546966d.md
View File

@@ -654,7 +654,7 @@ const playNextSong = () => {
}
};
const playPreviousSong = () =>{
const playPreviousSong = () => {
if (userData?.currentSong === null) return;
else {
const currentSongIndex = getCurrentSongIndex();

2
curriculum/challenges/arabic/15-javascript-algorithms-and-data-structures-22/learn-basic-string-and-array-methods-by-building-a-music-player/6555de565387a2efe90a6ccc.md
View File

@@ -662,7 +662,7 @@ const playNextSong = () => {
}
};
const playPreviousSong = () =>{
const playPreviousSong = () => {
if (userData?.currentSong === null) return;
else {
const currentSongIndex = getCurrentSongIndex();

2
curriculum/challenges/arabic/15-javascript-algorithms-and-data-structures-22/learn-basic-string-and-array-methods-by-building-a-music-player/6555e04aeb225bfbae237344.md
View File

@@ -643,7 +643,7 @@ const playNextSong = () => {
}
};
const playPreviousSong = () =>{
const playPreviousSong = () => {
if (userData?.currentSong === null) return;
else {
const currentSongIndex = getCurrentSongIndex();

2
curriculum/challenges/arabic/15-javascript-algorithms-and-data-structures-22/learn-basic-string-and-array-methods-by-building-a-music-player/6555e0bfe4d69904410f7cd3.md
View File

@@ -661,7 +661,7 @@ const playNextSong = () => {
}
};
const playPreviousSong = () =>{
const playPreviousSong = () => {
if (userData?.currentSong === null) return;
else {
const currentSongIndex = getCurrentSongIndex();

2
curriculum/challenges/arabic/15-javascript-algorithms-and-data-structures-22/learn-basic-string-and-array-methods-by-building-a-music-player/6555e57d3e6d9d221c4735be.md
View File

@@ -651,7 +651,7 @@ const playNextSong = () => {
}
};
const playPreviousSong = () =>{
const playPreviousSong = () => {
if (userData?.currentSong === null) return;
else {
const currentSongIndex = getCurrentSongIndex();

2
curriculum/challenges/arabic/15-javascript-algorithms-and-data-structures-22/learn-basic-string-and-array-methods-by-building-a-music-player/6555e6cec786da2aadc11ea0.md
View File

@@ -667,7 +667,7 @@ const playNextSong = () => {
}
};
const playPreviousSong = () =>{
const playPreviousSong = () => {
if (userData?.currentSong === null) return;
else {
const currentSongIndex = getCurrentSongIndex();

2
curriculum/challenges/arabic/15-javascript-algorithms-and-data-structures-22/learn-basic-string-and-array-methods-by-building-a-music-player/65572399a8e16d50bc2c1ff3.md
View File

@@ -667,7 +667,7 @@ const playNextSong = () => {
}
};
const playPreviousSong = () =>{
const playPreviousSong = () => {
if (userData?.currentSong === null) return;
else {
const currentSongIndex = getCurrentSongIndex();

2
curriculum/challenges/arabic/15-javascript-algorithms-and-data-structures-22/learn-basic-string-and-array-methods-by-building-a-music-player/655724bac464795a0ad91082.md
View File

@@ -643,7 +643,7 @@ const playNextSong = () => {
}
};
const playPreviousSong = () =>{
const playPreviousSong = () => {
if (userData?.currentSong === null) return;
else {
const currentSongIndex = getCurrentSongIndex();

2
curriculum/challenges/arabic/15-javascript-algorithms-and-data-structures-22/learn-basic-string-and-array-methods-by-building-a-music-player/655729e68e49b277a6b448bd.md
View File

@@ -11,7 +11,7 @@ Now that you've created the `resetButton`, you need to assign it an `id` and `ar
For example, `element.id` would set an `id` attribute, and `element.ariaLabel` would set an `aria-label` attribute. Both of them accept their values as a string.
Set the `id` attribute of `resetButton` to `"reset"` and its `"aria-label"` attribute to `"Reset playlist"`.
Set the `id` attribute of the `resetButton` element to `"reset"` and its `aria-label` attribute to `"Reset playlist"`.
# --hints--

2
curriculum/challenges/arabic/15-javascript-algorithms-and-data-structures-22/learn-basic-string-and-array-methods-by-building-a-music-player/65572bb34a7e488224b937fc.md
View File

@@ -671,7 +671,7 @@ const playNextSong = () => {
}
};
const playPreviousSong = () =>{
const playPreviousSong = () => {
if (userData?.currentSong === null) return;
else {
const currentSongIndex = getCurrentSongIndex();

2
curriculum/challenges/arabic/15-javascript-algorithms-and-data-structures-22/learn-basic-string-and-array-methods-by-building-a-music-player/65572e5aaf022790fb4a81b1.md
View File

@@ -655,7 +655,7 @@ const playNextSong = () => {
}
};
const playPreviousSong = () =>{
const playPreviousSong = () => {
if (userData?.currentSong === null) return;
else {
const currentSongIndex = getCurrentSongIndex();

2
curriculum/challenges/arabic/15-javascript-algorithms-and-data-structures-22/learn-basic-string-and-array-methods-by-building-a-music-player/65573a97c59ddbbf028ca95e.md
View File

@@ -667,7 +667,7 @@ const playNextSong = () => {
}
};
const playPreviousSong = () =>{
const playPreviousSong = () => {
if (userData?.currentSong === null) return;
else {
const currentSongIndex = getCurrentSongIndex();

2
curriculum/challenges/arabic/15-javascript-algorithms-and-data-structures-22/learn-basic-string-and-array-methods-by-building-a-music-player/6557421eb6a7a0f0500e3106.md
View File

@@ -641,7 +641,7 @@ const playNextSong = () => {
}
};
const playPreviousSong = () =>{
const playPreviousSong = () => {
if (userData?.currentSong === null) return;
else {
const currentSongIndex = getCurrentSongIndex();

2
curriculum/challenges/arabic/15-javascript-algorithms-and-data-structures-22/learn-basic-string-and-array-methods-by-building-a-music-player/655b4c8f636d9675953a0388.md
View File

@@ -624,7 +624,7 @@ const playNextSong = () => {
}
};
const playPreviousSong = () =>{
const playPreviousSong = () => {
if (userData?.currentSong === null) return;
else {
const currentSongIndex = getCurrentSongIndex();

4
curriculum/challenges/arabic/15-javascript-algorithms-and-data-structures-22/learn-basic-string-and-array-methods-by-building-a-music-player/655b4dad1d38ff7cdd65cbfe.md
View File

@@ -665,7 +665,7 @@ const playNextSong = () => {
}
};
const playPreviousSong = () =>{
const playPreviousSong = () => {
if (userData?.currentSong === null) return;
else {
const currentSongIndex = getCurrentSongIndex();
@@ -1451,7 +1451,7 @@ const playNextSong = () => {
}
};
const playPreviousSong = () =>{
const playPreviousSong = () => {
if (userData?.currentSong === null) return;
else {
const currentSongIndex = getCurrentSongIndex();

14
curriculum/challenges/arabic/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/63c9e45519caf31b987fbb5f.md
View File

@@ -11,13 +11,7 @@ Your `getCaloriesFromInputs` function will set the global error flag to `true` i
# --hints--
Your `calculateCalories` function should have an `if` statement.
```js
assert.match(calculateCalories.toString(), /if\s*\(/);
```
Your `if` statement should check the truthiness of the `isError` variable.
Your `calculateCalories` function should have an `if` statement that checks the truthiness of the `isError` variable.
```js
assert.match(calculateCalories.toString(), /if\s*\(\s*isError\s*\)/);
@@ -29,6 +23,12 @@ Your `if` statement should use `return` to end the function execution.
assert.match(calculateCalories.toString(), /if\s*\(\s*isError\s*\)\s*\{?\s*return\s*;?\s*\}?\s*/);
```
Your `if` statement should be placed after the last `getCaloriesFromInputs` function call.
```js
assert.match(code, /if\s*\(\s*isError\s*\)\s*\{?\s*return\s*;?\s*\}?\s*\}\s*function\s+/);
```
# --seed--
## --seed-contents--

60
curriculum/challenges/arabic/16-the-odin-project/top-introduction-to-flexbox/introduction-flexbox-lesson-a.md Normal file
View File

@@ -0,0 +1,60 @@
---
id: 6571b2fccc1de61d7b4dd37f
title: Introduction to Flexbox Lesson A
challengeType: 15
dashedName: introduction-flexbox-lesson-a
---
# --description--
## Before we get started
Flexbox layouts can get a little complicated. In a previous lesson, you learned how to inspect and debug things using your browser’s developer tools. Those tools will be crucial for you in the following lessons. If something isn’t behaving the way you expect, inspecting it in the developer tools should be your first step every time.
Flexbox isn’t necessarily any more difficult than the other concepts that we’ve covered so far, but it does have a few more moving parts. It is going to be somewhat difficult to make use of any of the things you’re learning in these first lessons until you get to the end and can put it all together. As we go, do yourself a favor and <strong>play with all of the code examples.</strong>
You will almost definitely need to come back and reference these lessons (or a couple of the resources we share with you) when you get to the assignments at the end of the section, but if you take your time and experiment with all the code examples we provide, you’ll know better where to look when that time comes.
## Let’s flex
Flexbox is a way to arrange items into rows or columns. These items will flex (i.e. grow or shrink) based on some simple rules that you can define. To get started, let’s look at a simple demonstration.
> We’ve embedded a lot of interactive examples in these lessons. Take your time to experiment with them as you go to cement the concepts in your mind!
<iframe allowfullscreen="true" allowpaymentrequest="true" allowtransparency="true" frameborder="0" height="400" width="100%" name="cp_embed_1" scrolling="no" src="https://codepen.io/TheOdinProjectExamples/embed/QWgNxrp?height=400&amp;default-tab=html%2Cresult&amp;slug-hash=QWgNxrp&amp;editable=true&amp;user=TheOdinProjectExamples&amp;name=cp_embed_1" style="width: 100%; overflow:hidden; display:block;" title="CodePen Embed" loading="lazy"></iframe>
We’ll get into exactly what’s going on here soon enough. But for now, let’s uncomment the two flex related CSS declarations in the above Codepen by removing the `/*` and `*/` tags surrounding them, then check out the result.
> Comments prevent the browser from interpreting lines as code, and are wrapped between specific tags. CSS uses `/*` as an opening comment tag and `*/` as a closing comment tag, while HTML and JavaScript have their own syntax. Commented out lines of code can be re-enabled simply by removing the comment tags surrounding the code.
All 3 divs should now be arranged horizontally. If you resize the results frame with the `1x`, `.5x` and `.25x` buttons you’ll also see that the `div` elements will "flex". They will fill the available area and will each have equal width.
If you add another `div` to the HTML, inside of `.flex-container`, it will show up alongside the others, and everything will flex to fit within the available area.
> If it’s hard to see what's going on in the small embedded CodePen, feel free to click the "Edit on CodePen" or "Fork on CodePen" button. This will bring the example into a full-sized environment. Some of the later examples might especially benefit from doing this.
# --question--
## --text--
What happens when the two flex related CSS declarations in the CodePen are uncommented?
## --answers--
The `div` elements become hidden from view, losing their visibility within the container.
---
All 3 `div` elements are arranged horizontally, and they flex to fill the available area with equal width.
---
Each `div` element enlarges and covers the entire container, overlapping each other.
---
The `div` elements align vertically in a single column, ignoring the flex-related CSS declarations.
## --video-solution--
2

40
curriculum/challenges/arabic/16-the-odin-project/top-introduction-to-flexbox/introduction-flexbox-lesson-b.md Normal file
View File

@@ -0,0 +1,40 @@
---
id: 6571b2fecc1de61d7b4dd380
title: Introduction to Flexbox Lesson B
challengeType: 15
dashedName: introduction-flexbox-lesson-b
---
# --description--
As you’ve seen, flexbox is not just a single CSS property but a whole toolbox of properties that you can use to put things where you need them. Some of these properties belong on the flex container, while some go on the flex items. This is a simple yet important concept.
A flex container is any element that has `display: flex` on it. A flex item is any element that lives directly inside of a flex container.
<img src="https://cdn.freecodecamp.org/curriculum/odin-project/flex-box/flexbox-01.png" style="width: 95%; height: 95%;" alt="An outer rectangle representing a flex container encompassing three smaller inner rectangles lined up side by side, each representing a flex item." />
# --question--
## --text--
What’s the difference between a flex container and a flex item?
## --answers--
Flex containers are elements with `display: flex`, while flex items are elements within flex containers.
---
Flex containers are elements within flex items, while flex items define the overall layout.
---
Flex containers are elements using flexbox, and flex items are inline elements.
---
Flex containers are elements that define the layout structure, while flex items control the overall page design.
## --video-solution--
1

44
curriculum/challenges/arabic/16-the-odin-project/top-introduction-to-flexbox/introduction-flexbox-lesson-c.md Normal file
View File

@@ -0,0 +1,44 @@
---
id: 6571b2fecc1de61d7b4dd381
title: Introduction to Flexbox Lesson C
challengeType: 15
dashedName: introduction-flexbox-lesson-c
---
# --description--
Somewhat confusingly, any element can be both a flex container and a flex item. Said another way, you can also put `display: flex` on a flex item and then use flexbox to arrange its children.
<img src="https://cdn.freecodecamp.org/curriculum/odin-project/flex-box/flexbox-03.png" style="width: 95%; height: 95%;" alt="a flex container that has multiple flex items, within those flex items are nested flex items as well. Making the parent of those nested flex items also a flex container." />
Creating and nesting multiple flex containers and items is the primary way you will be building up complex layouts. The following image was achieved using only flexbox to arrange, size, and place the various elements. Flexbox is a very powerful tool.
<img src="https://cdn.freecodecamp.org/curriculum/odin-project/flex-box/flexbox-02.png" alt="a complex layout of flex items and flex containers. There are multiple flex containers nested into each other, thus making them flex items as well" />
Certainly, the image features a representation of a CSS Flexbox layout with nested flex containers. The outer container is denoted as "ALSO a flex container" highlighted in blue, and within it is another container marked as "with flex items" in red. Inside the red container, there are three items labeled as "flex items" in peach. This demonstrates that a flex container can be nested within another flex container and contain its own flex items, showcasing the recursive nature of Flexbox layout structures.
# --question--
## --text--
Which CSS property is applied to elements to make them flex containers?
## --answers--
`align-items`
---
`display: flex`
---
`justify-content`
---
`flex`
## --video-solution--
2

36
curriculum/challenges/arabic/16-the-odin-project/top-introduction-to-flexbox/introduction-flexbox-lesson-d.md Normal file
View File

@@ -0,0 +1,36 @@
---
id: 6571b2ffcc1de61d7b4dd382
title: Introduction to Flexbox Lesson D
challengeType: 15
dashedName: introduction-flexbox-lesson-d
---
# --description--
Now that you have a basic understanding of how flexbox works, what is the primairy role of a flex item in a `flexbox` layout? Try and answer the question below.
# --question--
## --text--
What role does a flex item play within a flex container?
## --answers--
Flex items define the overall layout structure.
---
Flex items set the background colors of flex containers.
---
Flex items allow the flex container to resize based on content.
---
Flex items are elements that reside directly within a flex container.
## --video-solution--
4

46
curriculum/challenges/arabic/16-the-odin-project/top-introduction-to-flexbox/introduction-flexbox-lesson-e.md Normal file
View File

@@ -0,0 +1,46 @@
---
id: 6571b300cc1de61d7b4dd383
title: Introduction to Flexbox Lesson E
challengeType: 15
dashedName: introduction-flexbox-lesson-e
---
# --description--
The `flex` declaration is actually a shorthand for 3 properties that you can set on a flex item. These properties affect how flex items size themselves within their container. You've seen some shorthand properties before, but you haven't officially defined them yet.
> Shorthand properties are CSS properties that let you set the values of multiple other CSS properties simultaneously. Using a shorthand property, you can write more concise (and often more readable) stylesheets, saving time and energy.
In this case, `flex` is actually a shorthand for `flex-grow`, `flex-shrink` and `flex-basis`.
<img src="https://cdn.freecodecamp.org/curriculum/odin-project/flex-box/flexbox-04.png" alt="CSS code setting the flex property to 1 for a div element." />
In the above screenshot, `flex: 1` equates to: `flex-grow: 1`, `flex-shrink: 1`, `flex-basis: 0`.
Very often, you see the flex shorthand defined with only one value. In that case, that value is applied to `flex-grow`. So when you put `flex: 1` on our divs, you were actually specifying a shorthand of `flex: 1 1 0`.
# --question--
## --text--
Which properties are set by the `flex` shorthand?
## --answers--
`flex-grow`, `flex-shrink`, and `flex`
---
`flex-basis`, `flex-wrap`, and `flex-direction`
---
`flex-grow`, `flex-shrink`, and `flex-basis`
---
`flex-direction`, `flex`, and `flex-wrap`
## --video-solution--
3

40
curriculum/challenges/arabic/16-the-odin-project/top-introduction-to-flexbox/introduction-flexbox-lesson-f.md Normal file
View File

@@ -0,0 +1,40 @@
---
id: 6571b300cc1de61d7b4dd384
title: Introduction to Flexbox Lesson F
challengeType: 15
dashedName: introduction-flexbox-lesson-f
---
# --description--
`flex-grow` expects a single number as its value, and that number is used as the flex-item's "growth factor". When you applied `flex: 1` to every div inside our container, you were telling every div to grow the same amount. The result of this is that every div ends up the exact same size. If you instead add `flex: 2` to just one of the divs, then that div would grow to 2x the size of the others.
In the following example the `flex` shorthand has values for `flex-shrink` and `flex-basis` specified with their default values.
<iframe allowfullscreen="true" allowpaymentrequest="true" allowtransparency="true" class="cp_embed_iframe " frameborder="0" height="300" width="100%" name="cp_embed_1" scrolling="no" src="https://codepen.io/TheOdinProjectExamples/embed/YzQqvgK?height=300&amp;default-tab=html%2Cresult&amp;slug-hash=YzQqvgK&amp;editable=true&amp;user=TheOdinProjectExamples&amp;name=cp_embed_1" style="width: 100%; overflow:hidden; display:block;" title="CodePen Embed" loading="lazy" id="cp_embed_YzQqvgK"></iframe>
# --question--
## --text--
What does setting `flex: 2` to one specific div inside a flex container, while other divs have `flex: 1`, imply?
## --answers--
The container will shrink to accommodate the larger div.
---
All divs will retain the same size due to conflicting `flex` values.
---
The specific div will grow to be twice the size of the others.
---
All divs will shrink equally to adjust to the new `flex` values.
## --video-solution--
3

45
curriculum/challenges/arabic/16-the-odin-project/top-introduction-to-flexbox/introduction-flexbox-lesson-g.md Normal file
View File

@@ -0,0 +1,45 @@
---
id: 6571c34568e4b3b17d3957f8
title: Introduction to Flexbox Lesson G
challengeType: 15
dashedName: introduction-flexbox-lesson-g
---
# --description--
`flex-shrink` is similar to `flex-grow`, but sets the "shrink factor" of a flex item. `flex-shrink` only ends up being applied if the size of all flex items is larger than their parent container. For example, if our 3 divs from above had a width declaration like: `width: 100px`, and `.flex-container` was smaller than `300px`, our divs would have to shrink to fit.
The default shrink factor is `flex-shrink: 1`, which means all items will shrink evenly. If you do not want an item to shrink then you can specify `flex-shrink: 0;`. You can also specify higher numbers to make certain items shrink at a higher rate than normal.
Here's an example. If you shrink your browser window you'll notice that `.two` never gets smaller than the given width of `250px`, even though the `flex-grow` rule would otherwise specify that each element should be equally sized.
<iframe allowfullscreen="true" allowpaymentrequest="true" allowtransparency="true" class="cp_embed_iframe " frameborder="0" height="300" width="100%" name="cp_embed_2" scrolling="no" src="https://codepen.io/TheOdinProjectExamples/embed/JjJXZVz?height=300&amp;default-tab=html%2Cresult&amp;slug-hash=JjJXZVz&amp;editable=true&amp;user=TheOdinProjectExamples&amp;name=cp_embed_2" style="width: 100%; overflow:hidden; display:block;" title="CodePen Embed" loading="lazy" id="cp_embed_JjJXZVz"></iframe>
An important implication to notice here is that when you specify `flex-grow` or `flex-shrink`, flex items do not necessarily respect your given values for `width`. In the above example, all 3 divs are given a `width` of `250px`, but when their parent is big enough, they grow to fill it. Likewise, when the parent is too small, the default behavior is for them to shrink to fit. This is not a bug, but it could be confusing behavior if you aren’t expecting it.
# --question--
## --text--
What is the default behavior of `flex-shrink` when applied to flex items?
## --answers--
It prevents any item from shrinking.
---
It makes all items shrink at an equal rate.
---
It causes only specific items to shrink.
---
It enlarges the items' sizes equally.
## --video-solution--
2

41
curriculum/challenges/arabic/16-the-odin-project/top-introduction-to-flexbox/introduction-flexbox-lesson-h.md Normal file
View File

@@ -0,0 +1,41 @@
---
id: 6571c34668e4b3b17d3957f9
title: Introduction to Flexbox Lesson H
challengeType: 15
dashedName: introduction-flexbox-lesson-h
---
# --description--
No matter which direction you're using, you need to think of your flex-containers as having 2 axes: the main axis and the cross axis. It is the direction of these axes that changes when the `flex-direction` is changed. In most circumstances, `flex-direction: row` puts the main axis horizontal (left-to-right), and `column` puts the main axis vertical (top-to-bottom).
In other words, in our very first example, you put `display: flex` on a div and it arranged its children horizontally. This is a demonstration of `flex-direction: row`, the default setting. The following example is very similar. If you uncomment the line that says `flex-direction: column`, those divs will stack vertically.
<iframe allowfullscreen="true" allowpaymentrequest="true" allowtransparency="true" class="cp_embed_iframe " frameborder="0" height="400" width="100%" name="cp_embed_1" scrolling="no" src="https://codepen.io/TheOdinProjectExamples/embed/BaZKPdw?height=400&amp;default-tab=html%2Cresult&amp;slug-hash=BaZKPdw&amp;editable=true&amp;user=TheOdinProjectExamples&amp;name=cp_embed_1" style="width: 100%; overflow:hidden; display:block;" title="CodePen Embed" loading="lazy" id="cp_embed_BaZKPdw"></iframe>
# --question--
## --text--
Which CSS property changes the main axis direction in flex containers to arrange items from top to bottom?
## --answers--
`align-items`
---
`flex-flow`
---
`flex-direction`
---
`justify-content`
## --video-solution--
3

45
curriculum/challenges/arabic/16-the-odin-project/top-introduction-to-flexbox/introduction-flexbox-lesson-i.md Normal file
View File

@@ -0,0 +1,45 @@
---
id: 6571c34768e4b3b17d3957fa
title: Introduction to Flexbox Lesson I
challengeType: 15
dashedName: introduction-flexbox-lesson-i
---
# --description--
<iframe allowfullscreen="true" allowpaymentrequest="true" allowtransparency="true" class="cp_embed_iframe " frameborder="0" height="400" width="100%" name="cp_embed_1" scrolling="no" src="https://codepen.io/TheOdinProjectExamples/embed/BaZKPdw?height=400&amp;default-tab=html%2Cresult&amp;slug-hash=BaZKPdw&amp;editable=true&amp;user=TheOdinProjectExamples&amp;name=cp_embed_1" style="width: 100%; overflow:hidden; display:block;" title="CodePen Embed" loading="lazy" id="cp_embed_BaZKPdw"></iframe>
One thing to note is that in this example, `flex-direction: column` would not work as expected if you used the shorthand `flex: 1`. Try it out now (i.e. go change the flex value on the `flex: 1 1 auto;` line). Can you figure out why it does not work if `flex: 1` is used? The divs collapse, even though they clearly have a height defined there.
The reason for this is that the flex shorthand expands `flex-basis` to `0`, which means that all `flex-growing` and `flex-shrinking` would begin their calculations from 0. Empty divs by default have 0 height, so for our flex items to fill up the height of their container, they don't actually need to have any height at all.
The example above fixed this by specifying `flex: 1 1 auto`, telling the flex items to default to their given height. You could also have fixed it by putting a `height` on the parent `.flex-container`, or by using `flex-grow: 1` instead of the shorthand.
Another detail to notice: when you changed the `flex-direction` to `column`, `flex-basis` refers to `height` instead of `width`. Given the context this may be obvious, but it's something to be aware of.
# --question--
## --text--
Why does using `flex: 1` shorthand with `flex-direction: column` lead to collapsed divs in the example described?
## --answers--
The `flex` shorthand defaults `flex-basis` to 0, disregarding the defined height of the divs.
---
The `flex` shorthand overrides the specified `flex-direction`, causing collapsing.
---
`flex: 1` only works in a row-based layout, not in a column-based one.
---
The `flex-basis` property becomes fixed to the width, ignoring the height in column layout.
## --video-solution--
1

52
curriculum/challenges/arabic/16-the-odin-project/top-introduction-to-flexbox/introduction-flexbox-lesson-j.md Normal file
View File

@@ -0,0 +1,52 @@
---
id: 6571c34868e4b3b17d3957fb
title: Introduction to Flexbox Lesson J
challengeType: 15
dashedName: introduction-flexbox-lesson-j
---
# --description--
Let's look at an example.
<iframe allowfullscreen="true" allowpaymentrequest="true" allowtransparency="true" class="cp_embed_iframe " frameborder="0" height="400" width="100%" name="cp_embed_1" scrolling="no" src="https://codepen.io/TheOdinProjectExamples/embed/MWoyBzR?height=400&amp;default-tab=html%2Cresult&amp;slug-hash=MWoyBzR&amp;editable=true&amp;user=TheOdinProjectExamples&amp;name=cp_embed_1" style="width: 100%; overflow:hidden; display:block;" title="CodePen Embed" loading="lazy" id="cp_embed_MWoyBzR"></iframe>
You should be able to predict what happens if you put `flex: 1` on the `.item` by now. Give it a shot before you move on!
Adding `flex: 1` to `.item` makes each of the items grow to fill the available space, but what if you wanted them to stay the same width, but distribute themselves differently inside the container? You can do this!
Remove `flex: 1` from `.item` and add `justify-content: space-between` to `.container`. Doing so should give you something like this:
<img src="https://cdn.freecodecamp.org/curriculum/odin-project/flex-box/flexbox-05.png" alt="Three small boxes within a much larger rectangle. The boxes are arranged in a single row, one close to the left edge of the container, one close to the right edge of the container, and the last directly in the middle of the container, placing as much space as possible between each box." />
`justify-content` aligns items across the **main axis**. There are a few values that you can use here. You'll learn the rest of them in the reading assignments, but for now try changing it to center, which should center the boxes along the main axis.
# --question--
## --assignment--
Before moving on to the next lesson, see what is possible with the `justify-content` property. Read this [interactive article on MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/justify-content) and play around with the different values of `justify-content` on the example.
## --text--
How does applying `justify-content: space-between` to a flex container affect the positioning of its items?
## --answers--
It evenly distributes space between items, pushing the first and last items to the edges.
---
It centers all items within the container.
---
It causes the items to grow to fill available space.
---
It aligns items to the left side while leaving excessive space on the right side.
## --video-solution--
1

48
curriculum/challenges/arabic/16-the-odin-project/top-introduction-to-flexbox/introduction-flexbox-lesson-k.md Normal file
View File

@@ -0,0 +1,48 @@
---
id: 6597b43d854b3fa8e35d66d7
title: Introduction to Flexbox Lesson K
challengeType: 15
dashedName: introduction-flexbox-lesson-k
---
# --description--
<iframe allowfullscreen="true" allowpaymentrequest="true"
style="width: 100%; overflow:hidden; display:block;"
allowtransparency="true" class="cp_embed_iframe " frameborder="0" height="400" width="100%" name="cp_embed_1" scrolling="no" src="https://codepen.io/TheOdinProjectExamples/embed/MWoyBzR?height=400&amp;default-tab=html%2Cresult&amp;slug-hash=MWoyBzR&amp;editable=true&amp;user=TheOdinProjectExamples&amp;name=cp_embed_1" title="CodePen Embed" loading="lazy" id="cp_embed_MWoyBzR"></iframe>
To change the placement of items along the cross axis use `align-items`. Try getting the boxes to the center of the container by adding `align-items: center` to `.container`. The desired result looks like this:
<img src="https://cdn.freecodecamp.org/curriculum/odin-project/flex-box/flexbox-06.png" alt="three blue squares centered in the middle of the flex container" style="margin: 15px 0" />
Because `justify-content` and `align-items` are based on the main and cross axis of your container, their behavior changes when you change the flex-direction of a flex-container. For example, when you change `flex-direction` to `column`, `justify-content` aligns vertically and `align-items` aligns horizontally. The most common behavior, however, is the default, i.e. `justify-content` aligns items horizontally (because the main axis defaults to horizontal), and `align-items` aligns them vertically. One of the biggest sticking points that beginners have with flexbox is confusion when this behavior changes.
# --question--
## --assignment--
Before moving on to the next lesson, see if you can figure out how `align-items` behaves when you change the `flex-direction` property to `column`.
## --text--
When changing the `flex-direction` property to `column` in a flex container, how does `align-items` behave in relation to the flex items?
## --answers--
It distributes space between items evenly.
---
It aligns items horizontally along the main axis.
---
It centers items vertically along the cross axis.
---
It aligns items to the start of the container along the cross axis.
## --video-solution--
3

44
curriculum/challenges/arabic/16-the-odin-project/top-learn-arrays-and-loops/learn-arrays-and-loops-lesson-a.md Normal file
View File

@@ -0,0 +1,44 @@
---
id: 661e27508602567c118451d1
title: Learn Arrays and Loops Lesson A
challengeType: 15
dashedName: learn-arrays-and-loops-lesson-a
---
# --description--
Strings and numbers may be our building blocks, but as your scripts get more complex, you're going to need a way to deal with large quantities of them. Luckily, JavaScript has a couple of data types that are used for just that. An Array is an ordered collection of items (Strings, numbers, or other things).
Arrays are a way to store multiple values in a single variable. They are a special type of object that has a length property and a series of numbered properties. Each numbered property is called an element, and each element can store a value of any type.
An Example of an array is:
```javascript
const fruits = ['apple', 'banana', 'orange'];
```
# --question--
## --text--
What is an array in JavaScript?
## --answers--
A function that stores multiple strings and numbers.
---
A data type used exclusively for numerical operations.
---
An ordered collection of items that can store values of any type, including strings and numbers.
---
A variable that can only store string values.
## --video-solution--
3

47
curriculum/challenges/arabic/16-the-odin-project/top-learn-arrays-and-loops/learn-arrays-and-loops-lesson-b.md Normal file
View File

@@ -0,0 +1,47 @@
---
id: 661e27568602567c118451d2
title: Learn Arrays and Loops Lesson B
challengeType: 15
dashedName: learn-arrays-and-loops-lesson-b
---
# --description--
To access the elements of an array, you can use the index number. The index number starts from 0, so the first element of an array is at index 0, the second element is at index 1, and so on.
For example, to access the first element of the `fruits` array, you can use the following code:
```javascript
const fruits = ['apple', 'banana', 'orange'];
console.log(fruits[0]); // Output: apple
console.log(fruits[2]); // Output: orange
```
If the index is out of range, JavaScript will return `undefined`. Meaning that if you try to access `fruits[3]` in the above example, it will return `undefined`.
# --question--
## --text--
What is the element at the fourth index of the `fruits` array?
## --answers--
`orange`
---
`apple`
---
`pineapple`
---
`undefined`
## --video-solution--
4

64
curriculum/challenges/arabic/16-the-odin-project/top-learn-arrays-and-loops/learn-arrays-and-loops-lesson-c.md Normal file
View File

@@ -0,0 +1,64 @@
---
id: 661e27578602567c118451d3
title: Learn Arrays and Loops Lesson C
challengeType: 15
dashedName: learn-arrays-and-loops-lesson-c
---
# --description--
One of the most common ways to add a new element to an array is by using the `push()` method. The `push()` method adds one or more elements to the end of an array and returns the new length of the array.
For example, to add a new element to the `pet` array, you can use the following code:
```javascript
const pet = ['cat', 'dog', 'bunny'];
pet.push('parrot');
console.log(pet); // Output: ['cat', 'dog', 'bunny', 'parrot']
```
To remove the last element of an array, you can use the `pop()` method. The `pop()` method removes the last element from an array and returns that element.
For example, to remove the last element from the `pet` array, you can use the following code:
```javascript
const pet = ['cat', 'dog', 'tiger'];
pet.pop();
console.log(pet); // Output: ['cat', 'dog']
```
# --question--
## --text--
Given the following JavaScript code, what will be the output after executing the code snippet?
```javascript
const animals = ['deer', 'whale', 'frog'];
animals.push('shark', 'bear');
const removed = animals.pop();
console.log(animals);
console.log(removed);
```
## --answers--
`['deer', 'whale', 'frog', 'shark', 'bear']` and `'bear'`
---
`['deer', 'whale', 'frog', 'shark']` and `'bear'`
---
`['deer', 'whale', 'frog', 'shark', 'bear']` and `null`
---
`['deer', 'whale', 'frog', 'shark', 'bear']` and `['deer', 'whale', 'frog', 'shark']`
## --video-solution--
2

67
curriculum/challenges/arabic/16-the-odin-project/top-learn-arrays-and-loops/learn-arrays-and-loops-lesson-d.md Normal file
View File

@@ -0,0 +1,67 @@
---
id: 661e27588602567c118451d4
title: Learn Arrays and Loops Lesson D
challengeType: 15
dashedName: learn-arrays-and-loops-lesson-d
---
# --description--
One of the more complex methods used with arrays are the `splice()` and `slice()` methods. The `splice()` method changes the contents of an array by removing or replacing an element in the array. The `slice()` method returns a shallow copy of a portion of an array into a new array object selected from `begin` to `end` (`end` not included). The original array will not be modified.
For example, to remove the second element from the `characters` array, you can use the following code:
```javascript
const characters = ['Harry', 'Ron', 'Hermione'];
characters.splice(1, 1);
console.log(characters); // Output: ['Harry', 'Hermione']
```
The above element removes the second element from the `characters` array. The `splice()` method takes two arguments: the index of the element to remove and the number of elements to remove.
To create a new array with the second element from the `character` array, you can use the following code:
```javascript
const characters = ['Harry', 'Ron', 'Hermione'];
const newCharacters = characters.slice(1, 2);
console.log(newCharacters); // Output: ['Ron']
```
The above code creates a new array `newCharacters` with the second element from the `characters` array. The `slice()` method takes two arguments: the index of the element to start the slice and the index of the element to end the slice (not included).
# --question--
## --text--
What will be the output of the following JavaScript code snippet?
```javascript
const numbers = [10, 20, 30, 40, 50];
numbers.splice(3, 1);
const slicedNumbers = numbers.slice(2, 4);
console.log(numbers);
console.log(slicedNumbers);
```
## --answers--
`numbers` output: `[10, 20, 30, 50]` and `slicedNumbers` output: `[30, 50]`
---
`numbers` output: `[10, 20, 30, 40]` and `slicedNumbers` output: `[30, 40]`
---
`numbers` output: `[10, 20, 50, 40]` and `slicedNumbers` output: `[20, 50]`
---
`numbers` output: `[10, 20, 30, 50, 40]` and `slicedNumbers` output: `[30, 50]`
## --video-solution--
1

63
curriculum/challenges/arabic/16-the-odin-project/top-learn-arrays-and-loops/learn-arrays-and-loops-lesson-e.md Normal file
View File

@@ -0,0 +1,63 @@
---
id: 661e27588602567c118451d5
title: Learn Arrays and Loops Lesson E
challengeType: 15
dashedName: learn-arrays-and-loops-lesson-e
---
# --description--
Now that you have a basic understanding about arrays, let's talk about loops. Loops are used to execute a block of code multiple times. One of those loops is the `while` loop. The `while` loop executes a block of code as long as the condition is true. The syntax of the `while` loop is as follows:
```javascript
while (condition) {
// code block to be executed
}
```
For example, the following code snippet prints the numbers from 1 to 5:
```javascript
let i = 1;
while (i <= 5) {
console.log(i);
i++;
}
```
The above code snippet initializes a variable `i` with the value `1`. The `while` loop executes the block of code as long as the value of `i` is less than or equal to `5`. The value of `i` is incremented by `1` in each iteration.
# --question--
## --text--
What will be the output of the following JavaScript code snippet?
```javascript
let i = 5;
while (i >= 0) {
console.log(i);
i--;
}
```
## --answers--
`5`, `4`, `3`, `2`, `1`, `0`
---
`5`, `4`, `3`, `2`, `1`
---
`5`, `4`, `3`, `2`, `1`, `0`, `-1`
---
`1`, `2`, `3`, `4`, `5`
## --video-solution--
1

82
curriculum/challenges/arabic/16-the-odin-project/top-learn-arrays-and-loops/learn-arrays-and-loops-lesson-f.md Normal file
View File

@@ -0,0 +1,82 @@
---
id: 661e27598602567c118451d6
title: Learn Arrays and Loops Lesson F
challengeType: 15
dashedName: learn-arrays-and-loops-lesson-f
---
# --description--
The `for` loop is another type of loop that is used to execute a block of code multiple times. The `for` loop is used when the number of iterations is known. The syntax of the `for` loop is as follows:
```javascript
for (initialization; condition; increment/decrement) {
// code block to be executed
}
```
For example, the following code snippet prints the numbers from 1 to 5:
```javascript
for (let i = 1; i <= 5; i++) {
console.log(i);
}
```
To iterate over an array using a `for` loop, you can use the array's length property. For example, the following code snippet prints the elements of an array:
```javascript
const arr = [1, 2, 3, 4, 5];
for (let i = 0; i < arr.length; i++) {
console.log(arr[i]);
}
```
# --question--
## --text--
What will be the output of the following JavaScript code snippet?
```javascript
const items = ['apple', 'banana', 'cherry', 'date'];
for (let i = 1; i < items.length; i++) {
console.log(items[i]);
}
```
## --answers--
```bash
apple
banana
cherry
date
```
---
```bash
banana
cherry
```
---
```bash
apple
banana
cherry
```
---
```bash
banana
cherry
date
```
## --video-solution--
4

57
curriculum/challenges/arabic/16-the-odin-project/top-learn-arrays-and-loops/learn-arrays-and-loops-lesson-g.md Normal file
View File

@@ -0,0 +1,57 @@
---
id: 661e275a8602567c118451d7
title: Learn Arrays and Loops Lesson G
challengeType: 15
dashedName: learn-arrays-and-loops-lesson-g
---
# --description--
Now that you know about the most common ways to iterate over values and arrays, there are a few more ways to iterate over arrays. Arrays have a built-in method called `map()`, which is used to create a new array by applying a function to each element of the original array. The `map()` method does not change the original array. The syntax of the `map()` method is as follows:
```javascript
const array = [1, 2, 3, 4, 5];
const newArray = array.map((arrayValue) => {
return arrayValue * 2;
});
console.log(newArray); // Output: [2, 4, 6, 8, 10]
```
The `map()` method creates a new array by applying the function `(arrayValue) => { return arrayValue * 2;` to each element of the original array. This is particularly useful when you want to transform the elements of an array without changing the original array.
# --question--
## --text--
What will be the output of the following JavaScript code snippet?
```javascript
const numbers = [1, 2, 3, 4, 5];
const newNumbers = numbers.map((number) => {
return number * 3;
});
console.log(newNumbers);
```
## --answers--
`[1, 2, 3, 4, 5]`
---
`[3, 6, 9, 12, 15]`
---
`[1, 3, 5, 7, 9]`
---
`[3, 6, 9, 12, 15, 18]`
## --video-solution--
2

58
curriculum/challenges/arabic/16-the-odin-project/top-learn-arrays-and-loops/learn-arrays-and-loops-lesson-h.md Normal file
View File

@@ -0,0 +1,58 @@
---
id: 661e275a8602567c118451d8
title: Learn Arrays and Loops Lesson H
challengeType: 15
dashedName: learn-arrays-and-loops-lesson-h
---
# --description--
One other useful array method is the `filter()` method. The `filter()` method creates a new array with all elements that pass the test implemented by the provided function. The syntax of the `filter()` method is as follows:
```javascript
const numbers = [2, 5, 6, 1, 9, -1]
const newNumbers = numbers.filter((number) => {
return number > 2;
});
console.log(newNumbers); // Output: [5, 6, 9]
```
The `filter()` method creates a new array with all elements that are greater than 2. The `filter()` method does not change the original array.
# --question--
## --text--
What will be the output of the following JavaScript code snippet?
```javascript
const strings = ['apple', 'banana', 'cherry', 'orange', 'kiwi', 'mango'];
const newStrings = strings.filter((string) => {
return string.length > 5;
});
console.log(newStrings);
```
## --answers--
`['apple', 'banana', 'cherry', 'orange', 'kiwi', 'mango']`
---
`['apple', 'banana', 'cherry', 'orange', 'kiwi']`
---
`['banana, 'cherry', 'orange']`
---
`['apple', 'banana', 'cherry', 'orange', 'kiwi']`
## --video-solution--
3

28
curriculum/challenges/arabic/16-the-odin-project/top-learn-block-and-inline/learn-block-and-inline-lesson-a.md Normal file
View File

@@ -0,0 +1,28 @@
---
id: 6570447ce7b02272663824df
title: Learn Block and Inline Lesson A
challengeType: 15
dashedName: learn-block-and-inline-lesson-a
---
# --description--
Most of the elements that you have learned about so far are block elements. In other words, their default style is `display: block`. By default, block elements will appear on the page stacked atop each other, each new element starting on a new line.
# --question--
## --text--
Which of the following statements about block elements is true?
## --answers--
Block elements take up only the space necessary for their content.
---
Block elements start on a new line and take up the full width available.
## --video-solution--
2

41
curriculum/challenges/arabic/16-the-odin-project/top-learn-block-and-inline/learn-block-and-inline-lesson-b.md Normal file
View File

@@ -0,0 +1,41 @@
---
id: 6570447de7b02272663824e0
title: Learn Block and Inline Lesson B
challengeType: 15
dashedName: learn-block-and-inline-lesson-b
---
# --description--
Inline elements, however, do not start on a new line. They appear in line with whatever elements they are placed beside. A clear example of an inline element is a link, or `<a>` tag. If you stick one of these in the middle of a paragraph of text, it will behave like a part of the paragraph. <a href="https://www.freecodecamp.org/" target="_blank">(Like this)</a> The link’s text will sit alongside other words in that paragraph. Additionally, padding and margin behave differently on inline elements. In general, you do not want to try to put extra padding or margin on inline elements.
# --question--
## --assignment--
Search the web for a list of `block` elements and a list of `inline` elements.
## --text--
What is the difference between a `block` element and an `inline` element?
## --answers--
`block` elements are displayed without line breaks, while `inline` elements are displayed with line breaks.
---
`block` elements take up the full width available, while `inline` elements only take up the space necessary for their content.
---
`block` elements are always positioned horizontally, while `inline` elements are positioned vertically.
---
`block` elements are used for small sections of text, while `inline` elements are used for larger chunks of content.
## --video-solution--
2

36
curriculum/challenges/arabic/16-the-odin-project/top-learn-block-and-inline/learn-block-and-inline-lesson-c.md Normal file
View File

@@ -0,0 +1,36 @@
---
id: 6570447ee7b02272663824e1
title: Learn Block and Inline Lesson C
challengeType: 15
dashedName: learn-block-and-inline-lesson-c
---
# --description--
Padding is used to create space around an element's content, inside of any defined borders. With inline elements, padding adds space to the left, right, top, and bottom of the content. However, it's important to note that while padding does affect the space around the content, it does not affect the layout of other elements around the inline element. This means that horizontal padding (left and right) is respected, but vertical padding (top and bottom) does not cause other elements to move away.
# --question--
## --text--
How does `padding` affect `inline` elements?
## --answers--
Padding has no effect on `inline` elements.
---
Padding increases the width and height of `inline` elements.
---
Padding only affects the horizontal spacing of `inline` elements.
---
Padding only affects the vertical spacing of `inline` elements.
## --video-solution--
3

36
curriculum/challenges/arabic/16-the-odin-project/top-learn-block-and-inline/learn-block-and-inline-lesson-d.md Normal file
View File

@@ -0,0 +1,36 @@
---
id: 6570447ee7b02272663824e2
title: Learn Block and Inline Lesson D
challengeType: 15
dashedName: learn-block-and-inline-lesson-d
---
# --description--
Now that you have a basic understanding on how adding width and height to `inline` elements works, what happens when you add a top margin to an `inline` element?
# --question--
## --text--
How does `margin-top` affect `inline` elements?
## --answers--
`margin-top` has no impact on the layout of `inline` elements
---
`margin-top` increases the height of `inline` elements.
---
`margin-top` adds space above the `inline` element.
---
`margin-top` only affects the horizontal spacing of `inline` elements.
## --video-solution--
1

36
curriculum/challenges/arabic/16-the-odin-project/top-learn-block-and-inline/learn-block-and-inline-lesson-e.md Normal file
View File

@@ -0,0 +1,36 @@
---
id: 6570447fe7b02272663824e3
title: Learn Block and Inline Lesson E
challengeType: 15
dashedName: learn-block-and-inline-lesson-e
---
# --description--
Inline-block elements behave like inline elements, but with block-style padding and margin. `display: inline-block` is a useful tool to know about, but in practice, you'll probably end up reaching for flexbox more often if you're trying to line up a bunch of boxes. Flexbox will be covered in-depth in the next lesson.
# --question--
## --text--
What is the difference between an `inline` element and an `inline-block` element?
## --answers--
`inline` elements are displayed without line breaks, while `inline-block` elements are displayed with line breaks.
---
`inline` elements do not allow setting width and height, while `inline-block` elements allow setting width and height.
---
`inline` elements are always positioned horizontally, while `inline-block` elements are positioned vertically.
---
`inline` elements can contain block-level elements, while `inline-block` elements cannot contain other elements.
## --video-solution--
2

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