Add languages Russian, Arabic, Chinese, Portuguese (#18305)
This commit is contained in:
Beau Carnes
committed by
mrugesh mohapatra
mrugesh mohapatra
parent
09d3eca712
commit
2ca3a2093f
@@ -0,0 +1,77 @@
|
||||
---
|
||||
id: bad87fee1348bd9aedd08830
|
||||
title: Add a Submit Button to a Form
|
||||
challengeType: 0
|
||||
guideUrl: 'https://arabic.freecodecamp.org/guide/certificates/add-a-submit-button-to-a-form'
|
||||
videoUrl: ''
|
||||
localeTitle: إضافة زر إرسال إلى نموذج
|
||||
---
|
||||
|
||||
## Description
|
||||
<section id="description"> دعنا نضيف زر <code>submit</code> إلى النموذج الخاص بك. يؤدي النقر على هذا الزر إلى إرسال البيانات من النموذج إلى عنوان URL الذي حددته باستخدام سمة <code>action</code> للنموذج. في ما يلي مثال زر الإرسال: <code><button type="submit">this button submits the form</button></code> </section>
|
||||
|
||||
## Instructions
|
||||
<section id="instructions"> أضف زرًا باعتباره العنصر الأخير في عنصر <code>form</code> الخاص بك مع نوع <code>submit</code> ، و "إرسال" كنصه. </section>
|
||||
|
||||
## Tests
|
||||
<section id='tests'>
|
||||
|
||||
```yml
|
||||
tests:
|
||||
- text: يجب أن يحتوي النموذج الخاص بك على زر بداخله.
|
||||
testString: 'assert($("form").children("button").length > 0, "Your form should have a button inside it.");'
|
||||
- text: يجب أن يحتوي زر الإرسال على <code>type</code> السمة الذي تم تعيينه <code>submit</code> .
|
||||
testString: 'assert($("button").attr("type") === "submit", "Your submit button should have the attribute <code>type</code> set to <code>submit</code>.");'
|
||||
- text: يجب أن يحتوي زر الإرسال فقط على النص "إرسال".
|
||||
testString: 'assert($("button").text().match(/^\s*submit\s*$/gi), "Your submit button should only have the text "Submit".");'
|
||||
- text: تأكد من أن عنصر <code>button</code> يحتوي على علامة إغلاق.
|
||||
testString: 'assert(code.match(/<\/button>/g) && code.match(/<button/g) && code.match(/<\/button>/g).length === code.match(/<button/g).length, "Make sure your <code>button</code> element has a closing tag.");'
|
||||
|
||||
```
|
||||
|
||||
</section>
|
||||
|
||||
## Challenge Seed
|
||||
<section id='challengeSeed'>
|
||||
|
||||
<div id='html-seed'>
|
||||
|
||||
```html
|
||||
<h2>CatPhotoApp</h2>
|
||||
<main>
|
||||
<p>Click here to view more <a href="#">cat photos</a>.</p>
|
||||
|
||||
<a href="#"><img src="https://bit.ly/fcc-relaxing-cat" alt="A cute orange cat lying on its back."></a>
|
||||
|
||||
<p>Things cats love:</p>
|
||||
<ul>
|
||||
<li>cat nip</li>
|
||||
<li>laser pointers</li>
|
||||
<li>lasagna</li>
|
||||
</ul>
|
||||
<p>Top 3 things cats hate:</p>
|
||||
<ol>
|
||||
<li>flea treatment</li>
|
||||
<li>thunder</li>
|
||||
<li>other cats</li>
|
||||
</ol>
|
||||
<form action="/submit-cat-photo">
|
||||
<input type="text" placeholder="cat photo URL">
|
||||
</form>
|
||||
</main>
|
||||
|
||||
```
|
||||
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
</section>
|
||||
|
||||
## Solution
|
||||
<section id='solution'>
|
||||
|
||||
```js
|
||||
// solution required
|
||||
```
|
||||
</section>
|
||||
@@ -0,0 +1,60 @@
|
||||
---
|
||||
id: bad87fee1348bd9aedf08812
|
||||
title: Add Images to Your Website
|
||||
challengeType: 0
|
||||
guideUrl: 'https://arabic.freecodecamp.org/guide/certificates/add-images-to-your-website'
|
||||
videoUrl: ''
|
||||
localeTitle: إضافة الصور إلى موقع الويب الخاص بك
|
||||
---
|
||||
|
||||
## Description
|
||||
<section id="description"> يمكنك إضافة الصور إلى موقع الويب الخاص بك باستخدام عنصر <code>img</code> ، والإشارة إلى عنوان URL للصورة المحددة باستخدام السمة <code>src</code> . مثال على ذلك: <code><img src="https://www.your-image-source.com/your-image.jpg"></code> لاحظ أن عناصر <code>img</code> ذاتية الإغلاق. <strong>يجب أن</strong> تحتوي جميع عناصر <code>img</code> على سمة <code>alt</code> . يستخدم النص داخل سمة <code>alt</code> لقارئات الشاشة لتحسين إمكانية الوصول ويظهر في حالة فشل تحميل الصورة. ملاحظة: إذا كانت الصورة مزخرفة تمامًا ، فإن استخدام سمة <code>alt</code> فارغة هو أفضل ممارسة. من الناحية المثالية ، يجب ألا تحتوي سمة <code>alt</code> على أحرف خاصة ما لم تكن هناك حاجة إليها. دعنا نضيف سمة <code>alt</code> إلى مثال <code>img</code> بنا أعلاه: <code><img src="https://www.your-image-source.com/your-image.jpg" alt="Author standing on a beach with two thumbs up."></code> </section>
|
||||
|
||||
## Instructions
|
||||
<section id="instructions"> لنحاول إضافة صورة إلى موقعنا على الويب: إدراج علامة <code>img</code> ، قبل عنصر <code>h2</code> . الآن تعيين السمة <code>src</code> بحيث يشير إلى هذا العنوان: <code>https://bit.ly/fcc-relaxing-cat</code> أخيرا لا تنس أن تعطي صورتك نص <code>alt</code> . </section>
|
||||
|
||||
## Tests
|
||||
<section id='tests'>
|
||||
|
||||
```yml
|
||||
tests:
|
||||
- text: يجب أن تحتوي صفحتك على عنصر صورة.
|
||||
testString: 'assert($("img").length > 0, "Your page should have an image element.");'
|
||||
- text: يجب أن تحتوي صورتك على سمة <code>src</code> تشير إلى الصورة الصغيرة.
|
||||
testString: 'assert(new RegExp("\/\/bit.ly\/fcc-relaxing-cat|\/\/s3.amazonaws.com\/freecodecamp\/relaxing-cat.jpg", "gi").test($("img").attr("src")), "Your image should have a <code>src</code> attribute that points to the kitten image.");'
|
||||
- text: <strong>يجب أن</strong> يحتوي عنصر الصورة على سمة <code>alt</code> .
|
||||
testString: 'assert(code.match(/alt\s*?=\s*?(\"|\").*(\"|\")/), "Your image element <strong>must</strong> have an <code>alt</code> attribute.");'
|
||||
|
||||
```
|
||||
|
||||
</section>
|
||||
|
||||
## Challenge Seed
|
||||
<section id='challengeSeed'>
|
||||
|
||||
<div id='html-seed'>
|
||||
|
||||
```html
|
||||
<h2>CatPhotoApp</h2>
|
||||
<main>
|
||||
|
||||
|
||||
<p>Kitty ipsum dolor sit amet, shed everywhere shed everywhere stretching attack your ankles chase the red dot, hairball run catnip eat the grass sniff.</p>
|
||||
<p>Purr jump eat the grass rip the couch scratched sunbathe, shed everywhere rip the couch sleep in the sink fluffy fur catnip scratched.</p>
|
||||
</main>
|
||||
|
||||
```
|
||||
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
</section>
|
||||
|
||||
## Solution
|
||||
<section id='solution'>
|
||||
|
||||
```js
|
||||
// solution required
|
||||
```
|
||||
</section>
|
||||
@@ -0,0 +1,73 @@
|
||||
---
|
||||
id: bad87fee1348bd9aedf08830
|
||||
title: Add Placeholder Text to a Text Field
|
||||
challengeType: 0
|
||||
guideUrl: 'https://arabic.freecodecamp.org/guide/certificates/add-placeholder-text-to-a-text-field'
|
||||
videoUrl: ''
|
||||
localeTitle: إضافة نص العنصر النائب إلى حقل نص
|
||||
---
|
||||
|
||||
## Description
|
||||
<section id="description"> نص العنصر النائب هو ما يتم عرضه في عنصر <code>input</code> قبل قيام المستخدم <code>input</code> أي شيء. يمكنك إنشاء نص عنصر نائب مثل: <code><input type="text" placeholder="this is placeholder text"></code> </section>
|
||||
|
||||
## Instructions
|
||||
<section id="instructions"> <code>placeholder</code> قيمة <code>placeholder</code> <code>input</code> النص إلى "عنوان URL لصورة القط". </section>
|
||||
|
||||
## Tests
|
||||
<section id='tests'>
|
||||
|
||||
```yml
|
||||
tests:
|
||||
- text: أضف سمة <code>placeholder</code> لعنصر <code>input</code> النص الحالي.
|
||||
testString: 'assert($("input[placeholder]").length > 0, "Add a <code>placeholder</code> attribute to the existing text <code>input</code> element.");'
|
||||
- text: عيّن قيمة سمة العنصر النائب الخاصة بك إلى "عنوان URL لصورة القط".
|
||||
testString: 'assert($("input") && $("input").attr("placeholder") && $("input").attr("placeholder").match(/cat\s+photo\s+URL/gi), "Set the value of your placeholder attribute to "cat photo URL".");'
|
||||
- text: يجب أن يحتوي عنصر <code>input</code> النهائي على صيغة صحيحة.
|
||||
testString: 'assert($("input[type=text]").length > 0 && code.match(/<input((\s+\w+(\s*=\s*(?:".*?"|".*?"|[\^"">\s]+))?)+\s*|\s*)\/?>/gi), "The finished <code>input</code> element should have valid syntax.");'
|
||||
|
||||
```
|
||||
|
||||
</section>
|
||||
|
||||
## Challenge Seed
|
||||
<section id='challengeSeed'>
|
||||
|
||||
<div id='html-seed'>
|
||||
|
||||
```html
|
||||
<h2>CatPhotoApp</h2>
|
||||
<main>
|
||||
<p>Click here to view more <a href="#">cat photos</a>.</p>
|
||||
|
||||
<a href="#"><img src="https://bit.ly/fcc-relaxing-cat" alt="A cute orange cat lying on its back."></a>
|
||||
|
||||
<p>Things cats love:</p>
|
||||
<ul>
|
||||
<li>cat nip</li>
|
||||
<li>laser pointers</li>
|
||||
<li>lasagna</li>
|
||||
</ul>
|
||||
<p>Top 3 things cats hate:</p>
|
||||
<ol>
|
||||
<li>flea treatment</li>
|
||||
<li>thunder</li>
|
||||
<li>other cats</li>
|
||||
</ol>
|
||||
<input type="text">
|
||||
</main>
|
||||
|
||||
```
|
||||
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
</section>
|
||||
|
||||
## Solution
|
||||
<section id='solution'>
|
||||
|
||||
```js
|
||||
// solution required
|
||||
```
|
||||
</section>
|
||||
@@ -0,0 +1,78 @@
|
||||
---
|
||||
id: bad87fee1348bd9aedd08835
|
||||
title: Check Radio Buttons and Checkboxes by Default
|
||||
challengeType: 0
|
||||
videoUrl: ''
|
||||
localeTitle: تحقق من أزرار الراديو و Checkboxes حسب الافتراضي
|
||||
---
|
||||
|
||||
## Description
|
||||
<section id="description"> يمكنك تعيين مربع اختيار أو زر اختيار ليتم فحصه افتراضيًا باستخدام السمة <code>checked</code> . للقيام بذلك ، قم فقط بإضافة الكلمة "محدد" إلى داخل عنصر الإدخال. على سبيل المثال: <code><input type="radio" name="test-name" checked></code> </section>
|
||||
|
||||
## Instructions
|
||||
<section id="instructions"> عيّن أول <code>radio buttons</code> <code>checkboxes</code> وأول <code>checkboxes</code> على كلاهما يتم تحديدها افتراضيًا. </section>
|
||||
|
||||
## Tests
|
||||
<section id='tests'>
|
||||
|
||||
```yml
|
||||
tests:
|
||||
- text: يجب تحديد زر الاختيار الأول في النموذج بشكل افتراضي.
|
||||
testString: 'assert($("input[type="radio"]").prop("checked"), "Your first radio button on your form should be checked by default.");'
|
||||
- text: يجب تحديد مربع الاختيار الأول في النموذج بشكل افتراضي.
|
||||
testString: 'assert($("input[type="checkbox"]").prop("checked"), "Your first checkbox on your form should be checked by default.");'
|
||||
|
||||
```
|
||||
|
||||
</section>
|
||||
|
||||
## Challenge Seed
|
||||
<section id='challengeSeed'>
|
||||
|
||||
<div id='html-seed'>
|
||||
|
||||
```html
|
||||
<h2>CatPhotoApp</h2>
|
||||
<main>
|
||||
<p>Click here to view more <a href="#">cat photos</a>.</p>
|
||||
|
||||
<a href="#"><img src="https://bit.ly/fcc-relaxing-cat" alt="A cute orange cat lying on its back."></a>
|
||||
|
||||
<p>Things cats love:</p>
|
||||
<ul>
|
||||
<li>cat nip</li>
|
||||
<li>laser pointers</li>
|
||||
<li>lasagna</li>
|
||||
</ul>
|
||||
<p>Top 3 things cats hate:</p>
|
||||
<ol>
|
||||
<li>flea treatment</li>
|
||||
<li>thunder</li>
|
||||
<li>other cats</li>
|
||||
</ol>
|
||||
<form action="/submit-cat-photo">
|
||||
<label><input type="radio" name="indoor-outdoor"> Indoor</label>
|
||||
<label><input type="radio" name="indoor-outdoor"> Outdoor</label><br>
|
||||
<label><input type="checkbox" name="personality"> Loving</label>
|
||||
<label><input type="checkbox" name="personality"> Lazy</label>
|
||||
<label><input type="checkbox" name="personality"> Energetic</label><br>
|
||||
<input type="text" placeholder="cat photo URL" required>
|
||||
<button type="submit">Submit</button>
|
||||
</form>
|
||||
</main>
|
||||
|
||||
```
|
||||
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
</section>
|
||||
|
||||
## Solution
|
||||
<section id='solution'>
|
||||
|
||||
```js
|
||||
// solution required
|
||||
```
|
||||
</section>
|
||||
@@ -0,0 +1,63 @@
|
||||
---
|
||||
id: bad87fee1348bd9aedf08804
|
||||
title: Comment out HTML
|
||||
challengeType: 0
|
||||
videoUrl: ''
|
||||
localeTitle: تعليق من HTML
|
||||
---
|
||||
|
||||
## Description
|
||||
<section id="description"> تذكر أنه لبدء التعليق ، تحتاج إلى استخدام <code><!--</code> وإنهاء تعليق ، تحتاج إلى استخدام <code>--></code> هنا سوف تحتاج إلى إنهاء التعليق قبل بدء عنصر <code>h2</code> الخاص بك. </section>
|
||||
|
||||
## Instructions
|
||||
<section id="instructions"> قم بالتعليق على عنصر <code>h1</code> والعنصر <code>p</code> ، ولكن ليس عنصر <code>h2</code> الخاص بك. </section>
|
||||
|
||||
## Tests
|
||||
<section id='tests'>
|
||||
|
||||
```yml
|
||||
tests:
|
||||
- text: قم بالتعليق على عنصر <code>h1</code> بحيث لا يكون مرئيًا على صفحتك.
|
||||
testString: 'assert(($("h1").length === 0), "Comment out your <code>h1</code> element so that it is not visible on your page.");'
|
||||
- text: اترك عنصر <code>h2</code> مُعالج بحيث يكون مرئيًا على صفحتك.
|
||||
testString: 'assert(($("h2").length > 0), "Leave your <code>h2</code> element uncommented so that it is visible on your page.");'
|
||||
- text: قم بالتعليق على عنصر <code>p</code> الخاص بك بحيث لا يكون مرئيًا على صفحتك.
|
||||
testString: 'assert(($("p").length === 0), "Comment out your <code>p</code> element so that it is not visible on your page.");'
|
||||
- text: تأكد من إغلاق كل تعليقاتك باستخدام <code>--></code> .
|
||||
testString: 'assert(code.match(/[^fc]-->/g).length > 1, "Be sure to close each of your comments with <code>--></code>.");'
|
||||
- text: لا تقم بتغيير ترتيب <code>h1</code> <code>h2</code> أو <code>p</code> في التعليمة البرمجية.
|
||||
testString: 'assert((code.match(/<([a-z0-9]){1,2}>/g)[0]==="<h1>" && code.match(/<([a-z0-9]){1,2}>/g)[1]==="<h2>" && code.match(/<([a-z0-9]){1,2}>/g)[2]==="<p>") , "Do not change the order of the <code>h1</code> <code>h2</code> or <code>p</code> in the code.");'
|
||||
|
||||
```
|
||||
|
||||
</section>
|
||||
|
||||
## Challenge Seed
|
||||
<section id='challengeSeed'>
|
||||
|
||||
<div id='html-seed'>
|
||||
|
||||
```html
|
||||
<!--
|
||||
<h1>Hello World</h1>
|
||||
|
||||
<h2>CatPhotoApp</h2>
|
||||
|
||||
<p>Kitty ipsum dolor sit amet, shed everywhere shed everywhere stretching attack your ankles chase the red dot, hairball run catnip eat the grass sniff.</p>
|
||||
-->
|
||||
|
||||
```
|
||||
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
</section>
|
||||
|
||||
## Solution
|
||||
<section id='solution'>
|
||||
|
||||
```js
|
||||
// solution required
|
||||
```
|
||||
</section>
|
||||
@@ -0,0 +1,63 @@
|
||||
---
|
||||
id: bad87fee1348bd9aedf08827
|
||||
title: Create a Bulleted Unordered List
|
||||
challengeType: 0
|
||||
videoUrl: ''
|
||||
localeTitle: قم بإنشاء قائمة غير مرتبة بالعدادات
|
||||
---
|
||||
|
||||
## Description
|
||||
<section id="description"> يحتوي HTML على عنصر خاص لإنشاء <code>unordered lists</code> أو قوائم أنماط النقطة. تبدأ القوائم غير مرتبة باستخدام عنصر <code><ul></code> الافتتاحي ، متبوعًا بأي عدد من عناصر <code><li></code> . وأخيرًا ، تغلق القوائم غير المرتبة بـ <code></ul></code> على سبيل المثال: <blockquote style=";text-align:right;direction:rtl"> <UL> <br> <li> والحليب </ لى> <br> <li> والجبن </ لى> <br> </ UL> </blockquote> إنشاء قائمة نمط نقطي من "الحليب" و "الجبن". </section>
|
||||
|
||||
## Instructions
|
||||
<section id="instructions"> أزل آخر عنصرين من <code>p</code> وأنشئ قائمة غير مرتبة من ثلاثة أشياء تحبها القطط في أسفل الصفحة. </section>
|
||||
|
||||
## Tests
|
||||
<section id='tests'>
|
||||
|
||||
```yml
|
||||
tests:
|
||||
- text: إنشاء عنصر <code>ul</code> .
|
||||
testString: 'assert($("ul").length > 0, "Create a <code>ul</code> element.");'
|
||||
- text: يجب أن يكون لديك ثلاثة عناصر <code>li</code> داخل عنصر <code>ul</code> الخاص بك.
|
||||
testString: 'assert($("ul li").length > 2, "You should have three <code>li</code> elements within your <code>ul</code> element.");'
|
||||
- text: تأكد من أن عنصر <code>ul</code> لديه علامة إغلاق.
|
||||
testString: 'assert(code.match(/<\/ul>/gi) && code.match(/<ul/gi) && code.match(/<\/ul>/gi).length === code.match(/<ul/gi).length, "Make sure your <code>ul</code> element has a closing tag.");'
|
||||
- text: تأكد من أن عناصر <code>li</code> لديك علامات إغلاق.
|
||||
testString: 'assert(code.match(/<\/li>/gi) && code.match(/<li[\s>]/gi) && code.match(/<\/li>/gi).length === code.match(/<li[\s>]/gi).length, "Make sure your <code>li</code> elements have closing tags.");'
|
||||
|
||||
```
|
||||
|
||||
</section>
|
||||
|
||||
## Challenge Seed
|
||||
<section id='challengeSeed'>
|
||||
|
||||
<div id='html-seed'>
|
||||
|
||||
```html
|
||||
<h2>CatPhotoApp</h2>
|
||||
<main>
|
||||
<p>Click here to view more <a href="#">cat photos</a>.</p>
|
||||
|
||||
<a href="#"><img src="https://bit.ly/fcc-relaxing-cat" alt="A cute orange cat lying on its back."></a>
|
||||
|
||||
<p>Kitty ipsum dolor sit amet, shed everywhere shed everywhere stretching attack your ankles chase the red dot, hairball run catnip eat the grass sniff.</p>
|
||||
<p>Purr jump eat the grass rip the couch scratched sunbathe, shed everywhere rip the couch sleep in the sink fluffy fur catnip scratched.</p>
|
||||
</main>
|
||||
|
||||
```
|
||||
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
</section>
|
||||
|
||||
## Solution
|
||||
<section id='solution'>
|
||||
|
||||
```js
|
||||
// solution required
|
||||
```
|
||||
</section>
|
||||
@@ -0,0 +1,72 @@
|
||||
---
|
||||
id: bad87fee1348bd9aede08830
|
||||
title: Create a Form Element
|
||||
challengeType: 0
|
||||
videoUrl: ''
|
||||
localeTitle: إنشاء عنصر النموذج
|
||||
---
|
||||
|
||||
## Description
|
||||
<section id="description"> يمكنك إنشاء نماذج ويب تقوم بالفعل بإرسال البيانات إلى خادم لا يستخدم أكثر من HTML خالص. يمكنك القيام بذلك عن طريق تحديد إجراء على عنصر <code>form</code> الخاص بك. على سبيل المثال: <code><form action="/url-where-you-want-to-submit-form-data"></form></code> </section>
|
||||
|
||||
## Instructions
|
||||
<section id="instructions"> ضع حقل النص داخل عنصر <code>form</code> ، وأضف السمة <code>action="/submit-cat-photo"</code> إلى عنصر النموذج. </section>
|
||||
|
||||
## Tests
|
||||
<section id='tests'>
|
||||
|
||||
```yml
|
||||
tests:
|
||||
- text: ضع عنصر إدخال النص داخل عنصر <code>form</code> .
|
||||
testString: 'assert($("form") && $("form").children("input") && $("form").children("input").length > 0, "Nest your text input element within a <code>form</code> element.");'
|
||||
- text: تأكد من احتواء <code>form</code> على سمة <code>action</code> تم تعيينها على <code>/submit-cat-photo</code>
|
||||
testString: 'assert($("form").attr("action") === "/submit-cat-photo", "Make sure your <code>form</code> has an <code>action</code> attribute which is set to <code>/submit-cat-photo</code>");'
|
||||
- text: تأكد من أن عنصر <code>form</code> يحتوي على علامات فتح وغلق جيدة الإنشاء.
|
||||
testString: 'assert(code.match(/<\/form>/g) && code.match(/<form [^<]*>/g) && code.match(/<\/form>/g).length === code.match(/<form [^<]*>/g).length, "Make sure your <code>form</code> element has well-formed open and close tags.");'
|
||||
|
||||
```
|
||||
|
||||
</section>
|
||||
|
||||
## Challenge Seed
|
||||
<section id='challengeSeed'>
|
||||
|
||||
<div id='html-seed'>
|
||||
|
||||
```html
|
||||
<h2>CatPhotoApp</h2>
|
||||
<main>
|
||||
<p>Click here to view more <a href="#">cat photos</a>.</p>
|
||||
|
||||
<a href="#"><img src="https://bit.ly/fcc-relaxing-cat" alt="A cute orange cat lying on its back."></a>
|
||||
|
||||
<p>Things cats love:</p>
|
||||
<ul>
|
||||
<li>cat nip</li>
|
||||
<li>laser pointers</li>
|
||||
<li>lasagna</li>
|
||||
</ul>
|
||||
<p>Top 3 things cats hate:</p>
|
||||
<ol>
|
||||
<li>flea treatment</li>
|
||||
<li>thunder</li>
|
||||
<li>other cats</li>
|
||||
</ol>
|
||||
<input type="text" placeholder="cat photo URL">
|
||||
</main>
|
||||
|
||||
```
|
||||
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
</section>
|
||||
|
||||
## Solution
|
||||
<section id='solution'>
|
||||
|
||||
```js
|
||||
// solution required
|
||||
```
|
||||
</section>
|
||||
@@ -0,0 +1,79 @@
|
||||
---
|
||||
id: bad87fee1348bd9aedf08835
|
||||
title: Create a Set of Checkboxes
|
||||
challengeType: 0
|
||||
videoUrl: ''
|
||||
localeTitle: قم بإنشاء مجموعة من مربعات الاختيار
|
||||
---
|
||||
|
||||
## Description
|
||||
<section id="description"> تستخدم النماذج عادة <code>checkboxes</code> للأسئلة التي قد تحتوي على أكثر من إجابة واحدة. مربعات الاختيار هي نوع من <code>input</code> يمكن دمج كل مربعات الاختيار داخل عنصر <code>label</code> الخاص بها. من خلال لف عنصر <code>input</code> داخل عنصر <code>label</code> ، سيقوم تلقائيًا بربط إدخال مربع الاختيار مع عنصر التسمية المحيط به. يجب أن تحتوي جميع مدخلات خانة الاختيار ذات الصلة على سمة <code>name</code> نفسه. فهو يعتبر أفضل الممارسات لتحديد بشكل واضح على العلاقة بين مربع <code>input</code> والمناظرة <code>label</code> عن طريق تعيين <code>for</code> سمة على <code>label</code> عنصر لتتناسب مع <code>id</code> سمة من يرتبط <code>input</code> عنصر. في ما يلي مثال على مربع اختيار: <code><label for="loving"><input id="loving" type="checkbox" name="personality"> Loving</label></code> </section>
|
||||
|
||||
## Instructions
|
||||
<section id="instructions"> أضف إلى مجموعتك مجموعة من ثلاثة مربعات اختيار. يجب أن يكون كل مربع متداخل داخل عنصر <code>label</code> الخاص به. يجب على جميع الثلاثة تقاسم سمة <code>name</code> <code>personality</code> . </section>
|
||||
|
||||
## Tests
|
||||
<section id='tests'>
|
||||
|
||||
```yml
|
||||
tests:
|
||||
- text: يجب أن تحتوي صفحتك على ثلاثة عناصر من خانة الاختيار.
|
||||
testString: 'assert($("input[type="checkbox"]").length > 2, "Your page should have three checkbox elements.");'
|
||||
- text: يجب أن يكون كل عنصر من عناصر خانة الاختيار الثلاثة متداخلاً في عنصر <code>label</code> الخاص به.
|
||||
testString: 'assert($("label > input[type="checkbox"]:only-child").length > 2, "Each of your three checkbox elements should be nested in its own <code>label</code> element.");'
|
||||
- text: تأكد من أن كل عنصر من عناصر <code>label</code> لديه علامة إغلاق.
|
||||
testString: 'assert(code.match(/<\/label>/g) && code.match(/<label/g) && code.match(/<\/label>/g).length === code.match(/<label/g).length, "Make sure each of your <code>label</code> elements has a closing tag.");'
|
||||
- text: إعطاء مربعات الاختيار الخاصة بك سمة <code>name</code> <code>personality</code> .
|
||||
testString: 'assert($("label > input[type="checkbox"]").filter("[name="personality"]").length > 2, "Give your checkboxes the <code>name</code> attribute of <code>personality</code>.");'
|
||||
|
||||
```
|
||||
|
||||
</section>
|
||||
|
||||
## Challenge Seed
|
||||
<section id='challengeSeed'>
|
||||
|
||||
<div id='html-seed'>
|
||||
|
||||
```html
|
||||
<h2>CatPhotoApp</h2>
|
||||
<main>
|
||||
<p>Click here to view more <a href="#">cat photos</a>.</p>
|
||||
|
||||
<a href="#"><img src="https://bit.ly/fcc-relaxing-cat" alt="A cute orange cat lying on its back."></a>
|
||||
|
||||
<p>Things cats love:</p>
|
||||
<ul>
|
||||
<li>cat nip</li>
|
||||
<li>laser pointers</li>
|
||||
<li>lasagna</li>
|
||||
</ul>
|
||||
<p>Top 3 things cats hate:</p>
|
||||
<ol>
|
||||
<li>flea treatment</li>
|
||||
<li>thunder</li>
|
||||
<li>other cats</li>
|
||||
</ol>
|
||||
<form action="/submit-cat-photo">
|
||||
<label for="indoor"><input id="indoor" type="radio" name="indoor-outdoor"> Indoor</label>
|
||||
<label for="outdoor"><input id="outdoor" type="radio" name="indoor-outdoor"> Outdoor</label><br>
|
||||
<input type="text" placeholder="cat photo URL" required>
|
||||
<button type="submit">Submit</button>
|
||||
</form>
|
||||
</main>
|
||||
|
||||
```
|
||||
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
</section>
|
||||
|
||||
## Solution
|
||||
<section id='solution'>
|
||||
|
||||
```js
|
||||
// solution required
|
||||
```
|
||||
</section>
|
||||
@@ -0,0 +1,83 @@
|
||||
---
|
||||
id: bad87fee1348bd9aedf08834
|
||||
title: Create a Set of Radio Buttons
|
||||
challengeType: 0
|
||||
videoUrl: ''
|
||||
localeTitle: قم بإنشاء مجموعة من أزرار الراديو
|
||||
---
|
||||
|
||||
## Description
|
||||
<section id="description"> يمكنك استخدام <code>radio buttons</code> للإجابة على الأسئلة حيث تريد أن يمنحك المستخدم إجابة واحدة فقط من الخيارات المتعددة. أزرار الراديو هي نوع من <code>input</code> . يمكن تداخل كل زر من أزرار الراديو داخل عنصر <code>label</code> الخاص به. من خلال لف عنصر <code>input</code> داخل عنصر <code>label</code> ، سيقوم تلقائيًا بربط إدخال زر الراديو مع عنصر التسمية المحيط به. يجب أن يكون لكل أزرار الراديو ذات الصلة سمة <code>name</code> نفسه لإنشاء مجموعة أزرار الراديو. من خلال إنشاء مجموعة راديو ، سيؤدي تحديد أي زر راديو فردي إلى إلغاء تحديد الأزرار الأخرى في نفس المجموعة تلقائيًا ، مما يضمن إجابة واحدة فقط من قبل المستخدم. في ما يلي مثال على زر الاختيار: <blockquote style=";text-align:right;direction:rtl"> <التسمية> <br> <input type = "radio" name = "indoor-outdoor"> داخلي <br> </ التسمية> </blockquote> فهو يعتبر أفضل الممارسات لوضع <code>for</code> السمة على <code>label</code> عنصر، مع قيمة يطابق قيمة <code>id</code> السمة ل <code>input</code> عنصر. يسمح ذلك للتقنيات المساعدة لإنشاء علاقة مرتبطة بين الملصق وعنصر <code>input</code> الطفل. فمثلا: <blockquote style=";text-align:right;direction:rtl"> <label for = "indoor"> <br> <input id = "indoor" type = "radio" name = "indoor-outdoor"> داخلي <br> </ التسمية> </blockquote></section>
|
||||
|
||||
## Instructions
|
||||
<section id="instructions"> أضف زوجًا من أزرار التحديد إلى النموذج ، كل منها متداخل في عنصر التسمية الخاص به. ينبغي للمرء أن يكون خيار <code>indoor</code> والآخر ينبغي أن يكون خيار في <code>outdoor</code> . يجب أن يشترك كلاهما في خاصية <code>name</code> of <code>indoor-outdoor</code> لإنشاء مجموعة راديو. </section>
|
||||
|
||||
## Tests
|
||||
<section id='tests'>
|
||||
|
||||
```yml
|
||||
tests:
|
||||
- text: يجب أن تحتوي صفحتك على عنصري زر راديو.
|
||||
testString: 'assert($("input[type="radio"]").length > 1, "Your page should have two radio button elements.");'
|
||||
- text: امنح أزرار الاختيار الخاصة بك السمة <code>name</code> <code>indoor-outdoor</code> .
|
||||
testString: 'assert($("label > input[type="radio"]").filter("[name="indoor-outdoor"]").length > 1, "Give your radio buttons the <code>name</code> attribute of <code>indoor-outdoor</code>.");'
|
||||
- text: يجب أن يتداخل كل عنصر من عناصر زر الراديو في عنصر <code>label</code> الخاص به.
|
||||
testString: 'assert($("label > input[type="radio"]:only-child").length > 1, "Each of your two radio button elements should be nested in its own <code>label</code> element.");'
|
||||
- text: تأكد من أن كل عنصر من عناصر <code>label</code> لديه علامة إغلاق.
|
||||
testString: 'assert((code.match(/<\/label>/g) && code.match(/<label/g) && code.match(/<\/label>/g).length === code.match(/<label/g).length), "Make sure each of your <code>label</code> elements has a closing tag.");'
|
||||
- text: يجب أن يكون أحد أزرار الراديو لديك <code>indoor</code> .
|
||||
testString: 'assert($("label").text().match(/indoor/gi), "One of your radio buttons should have the label <code>indoor</code>.");'
|
||||
- text: يجب أن يحتوي أحد أزرار الراديو على الملصق <code>outdoor</code> .
|
||||
testString: 'assert($("label").text().match(/outdoor/gi), "One of your radio buttons should have the label <code>outdoor</code>.");'
|
||||
- text: يجب إضافة كل عنصر من عناصر زر الراديو داخل علامة <code>form</code> .
|
||||
testString: 'assert($("label").parent().get(0).tagName.match("FORM"), "Each of your radio button elements should be added within the <code>form</code> tag.");'
|
||||
|
||||
```
|
||||
|
||||
</section>
|
||||
|
||||
## Challenge Seed
|
||||
<section id='challengeSeed'>
|
||||
|
||||
<div id='html-seed'>
|
||||
|
||||
```html
|
||||
<h2>CatPhotoApp</h2>
|
||||
<main>
|
||||
<p>Click here to view more <a href="#">cat photos</a>.</p>
|
||||
|
||||
<a href="#"><img src="https://bit.ly/fcc-relaxing-cat" alt="A cute orange cat lying on its back."></a>
|
||||
|
||||
<p>Things cats love:</p>
|
||||
<ul>
|
||||
<li>cat nip</li>
|
||||
<li>laser pointers</li>
|
||||
<li>lasagna</li>
|
||||
</ul>
|
||||
<p>Top 3 things cats hate:</p>
|
||||
<ol>
|
||||
<li>flea treatment</li>
|
||||
<li>thunder</li>
|
||||
<li>other cats</li>
|
||||
</ol>
|
||||
<form action="/submit-cat-photo">
|
||||
<input type="text" placeholder="cat photo URL" required>
|
||||
<button type="submit">Submit</button>
|
||||
</form>
|
||||
</main>
|
||||
|
||||
```
|
||||
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
</section>
|
||||
|
||||
## Solution
|
||||
<section id='solution'>
|
||||
|
||||
```js
|
||||
// solution required
|
||||
```
|
||||
</section>
|
||||
@@ -0,0 +1,69 @@
|
||||
---
|
||||
id: bad87fee1348bd9aedf08829
|
||||
title: Create a Text Field
|
||||
challengeType: 0
|
||||
videoUrl: ''
|
||||
localeTitle: إنشاء حقل النص
|
||||
---
|
||||
|
||||
## Description
|
||||
undefined
|
||||
|
||||
## Instructions
|
||||
<section id="instructions"> أنشئ عنصر <code>input</code> من نوع <code>text</code> أسفل قوائمك. </section>
|
||||
|
||||
## Tests
|
||||
<section id='tests'>
|
||||
|
||||
```yml
|
||||
tests:
|
||||
- text: يجب أن يحتوي تطبيقك على عنصر <code>input</code> من نوع <code>text</code> .
|
||||
testString: 'assert($("input[type=text]").length > 0, "Your app should have an <code>input</code> element of type <code>text</code>.");'
|
||||
|
||||
```
|
||||
|
||||
</section>
|
||||
|
||||
## Challenge Seed
|
||||
<section id='challengeSeed'>
|
||||
|
||||
<div id='html-seed'>
|
||||
|
||||
```html
|
||||
<h2>CatPhotoApp</h2>
|
||||
<main>
|
||||
<p>Click here to view more <a href="#">cat photos</a>.</p>
|
||||
|
||||
<a href="#"><img src="https://bit.ly/fcc-relaxing-cat" alt="A cute orange cat lying on its back."></a>
|
||||
|
||||
<p>Things cats love:</p>
|
||||
<ul>
|
||||
<li>cat nip</li>
|
||||
<li>laser pointers</li>
|
||||
<li>lasagna</li>
|
||||
</ul>
|
||||
<p>Top 3 things cats hate:</p>
|
||||
<ol>
|
||||
<li>flea treatment</li>
|
||||
<li>thunder</li>
|
||||
<li>other cats</li>
|
||||
</ol>
|
||||
|
||||
|
||||
</main>
|
||||
|
||||
```
|
||||
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
</section>
|
||||
|
||||
## Solution
|
||||
<section id='solution'>
|
||||
|
||||
```js
|
||||
// solution required
|
||||
```
|
||||
</section>
|
||||
@@ -0,0 +1,79 @@
|
||||
---
|
||||
id: bad87fee1348bd9aedf08828
|
||||
title: Create an Ordered List
|
||||
challengeType: 0
|
||||
videoUrl: ''
|
||||
localeTitle: إنشاء قائمة مرتبة
|
||||
---
|
||||
|
||||
## Description
|
||||
<section id="description"> يحتوي HTML على عنصر خاص آخر لإنشاء <code>ordered lists</code> أو قوائم ذات تعداد رقمي. تبدأ القوائم التي يتم <code><ol></code> بعنصر فتح <code><ol></code> ، متبوعًا بأي عدد من عناصر <code><li></code> . وأخيرًا ، يتم إغلاق القوائم <code></ol></code> على سبيل المثال: <blockquote style=";text-align:right;direction:rtl"> <رأ> <br> <li> وغارفيلد </ لى> <br> <li> وسيلفستر </ لى> <br> </ OL> </blockquote> إنشاء قائمة مرقمة من "Garfield" و "Sylvester". </section>
|
||||
|
||||
## Instructions
|
||||
<section id="instructions"> إنشاء قائمة مرتبة من أهم 3 أشياء تكرهها القطط. </section>
|
||||
|
||||
## Tests
|
||||
<section id='tests'>
|
||||
|
||||
```yml
|
||||
tests:
|
||||
- text: 'يجب أن يكون لديك قائمة مرتبة لـ "أهم ثلاثة أشياء للقطط التي تكره:"'
|
||||
testString: 'assert((/Top 3 things cats hate:/i).test($("ol").prev().text()), "You should have an ordered list for "Top 3 things cats hate:"");'
|
||||
- text: ''
|
||||
testString: 'assert((/Things cats love:/i).test($("ul").prev().text()), "You should have an unordered list for "Things cats love:"");'
|
||||
- text: يجب أن يكون لديك عنصر <code>ul</code> واحد فقط.
|
||||
testString: 'assert.equal($("ul").length, 1, "You should have only one <code>ul</code> element.");'
|
||||
- text: يجب أن يكون لديك عنصر <code>ol</code> واحد فقط.
|
||||
testString: 'assert.equal($("ol").length, 1, "You should have only one <code>ol</code> element.");'
|
||||
- text: يجب أن يكون لديك ثلاثة عناصر <code>li</code> داخل عنصر <code>ul</code> الخاص بك.
|
||||
testString: 'assert.equal($("ul li").length, 3, "You should have three <code>li</code> elements within your <code>ul</code> element.");'
|
||||
- text: يجب أن يكون لديك ثلاثة عناصر <code>li</code> في عنصر <code>ol</code> الخاص بك.
|
||||
testString: 'assert.equal($("ol li").length, 3, "You should have three <code>li</code> elements within your <code>ol</code> element.");'
|
||||
- text: تأكد من أن عنصر <code>ul</code> لديه علامة إغلاق.
|
||||
testString: 'assert(code.match(/<\/ul>/g) && code.match(/<\/ul>/g).length === code.match(/<ul>/g).length, "Make sure your <code>ul</code> element has a closing tag.");'
|
||||
- text: تأكد من أن عنصر <code>ol</code> يحتوي على علامة إغلاق.
|
||||
testString: 'assert(code.match(/<\/ol>/g) && code.match(/<\/ol>/g).length === code.match(/<ol>/g).length, "Make sure your <code>ol</code> element has a closing tag.");'
|
||||
- text: تأكد من أن عنصر <code>li</code> يحتوي على علامة إغلاق.
|
||||
testString: 'assert(code.match(/<\/li>/g) && code.match(/<li>/g) && code.match(/<\/li>/g).length === code.match(/<li>/g).length, "Make sure your <code>li</code> element has a closing tag.");'
|
||||
|
||||
```
|
||||
|
||||
</section>
|
||||
|
||||
## Challenge Seed
|
||||
<section id='challengeSeed'>
|
||||
|
||||
<div id='html-seed'>
|
||||
|
||||
```html
|
||||
<h2>CatPhotoApp</h2>
|
||||
<main>
|
||||
<p>Click here to view more <a href="#">cat photos</a>.</p>
|
||||
|
||||
<a href="#"><img src="https://bit.ly/fcc-relaxing-cat" alt="A cute orange cat lying on its back."></a>
|
||||
|
||||
<p>Things cats love:</p>
|
||||
<ul>
|
||||
<li>cat nip</li>
|
||||
<li>laser pointers</li>
|
||||
<li>lasagna</li>
|
||||
</ul>
|
||||
<p>Top 3 things cats hate:</p>
|
||||
|
||||
</main>
|
||||
|
||||
```
|
||||
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
</section>
|
||||
|
||||
## Solution
|
||||
<section id='solution'>
|
||||
|
||||
```js
|
||||
// solution required
|
||||
```
|
||||
</section>
|
||||
@@ -0,0 +1,52 @@
|
||||
---
|
||||
id: 587d78aa367417b2b2512aed
|
||||
title: Declare the Doctype of an HTML Document
|
||||
challengeType: 0
|
||||
videoUrl: ''
|
||||
localeTitle: قم بتعريف Doctype من مستند HTML
|
||||
---
|
||||
|
||||
## Description
|
||||
<section id="description"> تغطي التحديات حتى الآن عناصر HTML محددة واستخداماتها. ومع ذلك ، هناك بعض العناصر التي تعطي الهيكل العام لصفحتك ، ويجب تضمينها في كل مستند HTML. في الجزء العلوي من المستند ، تحتاج إلى إخبار المتصفح بإصدار HTML الذي تستخدمه صفحتك. HTML هي لغة متطورة ، ويتم تحديثها بانتظام. تدعم معظم المتصفحات الرئيسية أحدث المواصفات ، وهي HTML5. ومع ذلك ، قد تستخدم صفحات الويب القديمة الإصدارات السابقة من اللغة. أنت تخبر المتصفح بهذه المعلومات عن طريق إضافة العلامة <code><!DOCTYPE ...></code> على السطر الأول ، حيث يكون الجزء " <code>...</code> " هو إصدار HTML. بالنسبة إلى HTML5 ، تستخدم <code><!DOCTYPE html></code> . <code>!</code> و <code>DOCTYPE</code> الكبيرة مهمة ، خاصة بالنسبة للمتصفحات القديمة. ليست <code>html</code> حساسة لحالة الأحرف. بعد ذلك ، يجب أن يتم لف بقية تعليمات HTML البرمجية الخاصة بك في علامات <code>html</code> . ينتقل الافتتاح <code><html></code> مباشرة أسفل السطر <code><!DOCTYPE html></code> ، ويذهب الإغلاق <code></html></code> في نهاية الصفحة. في ما يلي مثال على بنية الصفحة: <blockquote style=";text-align:right;direction:rtl"> <! DOCTYPE html> <br> <HTML> <br> <! - رمز HTML الخاص بك هنا -> <br> </ HTML> </blockquote></section>
|
||||
|
||||
## Instructions
|
||||
<section id="instructions"> أضف علامة <code>DOCTYPE</code> لـ HTML5 إلى أعلى مستند HTML الفارغ في محرر الشفرة. تحته ، إضافة علامات <code>html</code> فتح وإغلاق ، والتي التفاف حول عنصر <code>h1</code> . يمكن أن يتضمن العنوان أي نص. </section>
|
||||
|
||||
## Tests
|
||||
<section id='tests'>
|
||||
|
||||
```yml
|
||||
tests:
|
||||
- text: يجب أن تتضمن التعليمات البرمجية الخاصة بك علامة <code><!DOCTYPE html></code> .
|
||||
testString: 'assert(code.match(/<!DOCTYPE\s+?html\s*?>/gi), "Your code should include a <code><!DOCTYPE html></code> tag.");'
|
||||
- text: يجب أن يكون هناك عنصر <code>html</code> واحد.
|
||||
testString: 'assert($("html").length == 1, "There should be one <code>html</code> element.");'
|
||||
- text: يجب أن تلتف علامات <code>html</code> حول عنصر <code>h1</code> واحد.
|
||||
testString: 'assert(code.match(/<html>\s*?<h1>\s*?.*?\s*?<\/h1>\s*?<\/html>/gi), "The <code>html</code> tags should wrap around one <code>h1</code> element.");'
|
||||
|
||||
```
|
||||
|
||||
</section>
|
||||
|
||||
## Challenge Seed
|
||||
<section id='challengeSeed'>
|
||||
|
||||
<div id='html-seed'>
|
||||
|
||||
```html
|
||||
|
||||
```
|
||||
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
</section>
|
||||
|
||||
## Solution
|
||||
<section id='solution'>
|
||||
|
||||
```js
|
||||
// solution required
|
||||
```
|
||||
</section>
|
||||
@@ -0,0 +1,66 @@
|
||||
---
|
||||
id: 587d78aa367417b2b2512aec
|
||||
title: Define the Head and Body of an HTML Document
|
||||
challengeType: 0
|
||||
videoUrl: ''
|
||||
localeTitle: حدد رأس ونص مستند HTML
|
||||
---
|
||||
|
||||
## Description
|
||||
<section id="description"> يمكنك إضافة مستوى آخر من التنظيم في مستند HTML الخاص بك داخل علامات <code>html</code> مع عناصر <code>head</code> <code>body</code> . أي ترميز يحتوي على معلومات حول صفحتك ، سينتقل إلى علامة <code>head</code> . ثم أي الترميز مع محتوى الصفحة (ما يعرض للمستخدم) سيذهب الى <code>body</code> علامة. عادةً ما يتم إدخال عناصر البيانات <code>meta</code> ، مثل <code>link</code> والبيانات <code>meta</code> <code>title</code> <code>style</code> ، داخل عنصر <code>head</code> . إليك مثال لتخطيط الصفحة: <blockquote style=";text-align:right;direction:rtl"> <! DOCTYPE html> <br> <HTML> <br> <رئيس> <br> <! - عناصر البيانات التعريفية -> <br> </ head> <br> <body> <br> <! - محتويات الصفحة -> <br> </ body> <br> </ HTML> </blockquote></section>
|
||||
|
||||
## Instructions
|
||||
<section id="instructions"> تحرير الترميز بحيث يكون هناك <code>head</code> <code>body</code> . و <code>head</code> وينبغي أن تتضمن عنصرا فقط <code>title</code> ، و <code>body</code> عنصر يجب أن يشمل فقط <code>h1</code> و <code>p</code> . </section>
|
||||
|
||||
## Tests
|
||||
<section id='tests'>
|
||||
|
||||
```yml
|
||||
tests:
|
||||
- text: يجب أن يكون هناك عنصر <code>head</code> واحد فقط على الصفحة.
|
||||
testString: 'assert($("head").length == 1, "There should be only one <code>head</code> element on the page.");'
|
||||
- text: ''
|
||||
testString: 'assert($("body").length == 1, "There should be only one <code>body</code> element on the page.");'
|
||||
- text: ''
|
||||
testString: 'assert($("html").children("head").length == 1, "The <code>head</code> element should be a child of the <code>html</code> element.");'
|
||||
- text: في <code>body</code> يجب أن يكون العنصر طفل من <code>html</code> العنصر.
|
||||
testString: 'assert($("html").children("body").length == 1, "The <code>body</code> element should be a child of the <code>html</code> element.");'
|
||||
- text: يجب أن يلف عنصر <code>head</code> حول عنصر <code>title</code> .
|
||||
testString: 'assert(code.match(/<head>\s*?<title>\s*?.*?\s*?<\/title>\s*?<\/head>/gi), "The <code>head</code> element should wrap around the <code>title</code> element.");'
|
||||
- text: ''
|
||||
testString: 'assert($("body").children("h1").length == 1 && $("body").children("p").length == 1, "The <code>body</code> element should wrap around both the <code>h1</code> and <code>p</code> elements.");'
|
||||
|
||||
```
|
||||
|
||||
</section>
|
||||
|
||||
## Challenge Seed
|
||||
<section id='challengeSeed'>
|
||||
|
||||
<div id='html-seed'>
|
||||
|
||||
```html
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<title>The best page ever</title>
|
||||
|
||||
<h1>The best page ever</h1>
|
||||
<p>Cat ipsum dolor sit amet, jump launch to pounce upon little yarn mouse, bare fangs at toy run hide in litter box until treats are fed. Go into a room to decide you didn't want to be in there anyway. I like big cats and i can not lie kitty ipsum dolor sit amet, shed everywhere shed everywhere stretching attack your ankles chase the red dot, hairball run catnip eat the grass sniff. Meow i could pee on this if i had the energy for slap owner's face at 5am until human fills food dish yet scamper. Knock dish off table head butt cant eat out of my own dish scratch the furniture. Make meme, make cute face. Sleep in the bathroom sink chase laser but pee in the shoe. Paw at your fat belly licks your face and eat grass, throw it back up kitty ipsum dolor sit amet, shed everywhere shed everywhere stretching attack your ankles chase the red dot, hairball run catnip eat the grass sniff.</p>
|
||||
|
||||
</html>
|
||||
|
||||
```
|
||||
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
</section>
|
||||
|
||||
## Solution
|
||||
<section id='solution'>
|
||||
|
||||
```js
|
||||
// solution required
|
||||
```
|
||||
</section>
|
||||
@@ -0,0 +1,57 @@
|
||||
---
|
||||
id: bad87fed1348bd9aedf08833
|
||||
title: Delete HTML Elements
|
||||
challengeType: 0
|
||||
videoUrl: ''
|
||||
localeTitle: احذف عناصر HTML
|
||||
---
|
||||
|
||||
## Description
|
||||
<section id="description"> لا يمتلك هاتفنا مساحة عمودية كبيرة. دعونا نزيل العناصر غير الضرورية حتى نتمكن من البدء في بناء CatPhotoApp. </section>
|
||||
|
||||
## Instructions
|
||||
<section id="instructions"> احذف عنصر <code>h1</code> حتى نتمكن من تبسيط طريقة العرض الخاصة بنا. </section>
|
||||
|
||||
## Tests
|
||||
<section id='tests'>
|
||||
|
||||
```yml
|
||||
tests:
|
||||
- text: احذف عنصر <code>h1</code> .
|
||||
testString: 'assert(!code.match(/<h1>/gi) && !code.match(/<\/h1>/gi), "Delete your <code>h1</code> element.");'
|
||||
- text: اترك عنصر <code>h2</code> على الصفحة.
|
||||
testString: 'assert(code.match(/<h2>[\w\W]*<\/h2>/gi), "Leave your <code>h2</code> element on the page.");'
|
||||
- text: اترك عنصر <code>p</code> الخاص بك على الصفحة.
|
||||
testString: 'assert(code.match(/<p>[\w\W]*<\/p>/gi), "Leave your <code>p</code> element on the page.");'
|
||||
|
||||
```
|
||||
|
||||
</section>
|
||||
|
||||
## Challenge Seed
|
||||
<section id='challengeSeed'>
|
||||
|
||||
<div id='html-seed'>
|
||||
|
||||
```html
|
||||
<h1>Hello World</h1>
|
||||
|
||||
<h2>CatPhotoApp</h2>
|
||||
|
||||
<p>Kitty ipsum dolor sit amet, shed everywhere shed everywhere stretching attack your ankles chase the red dot, hairball run catnip eat the grass sniff.</p>
|
||||
|
||||
```
|
||||
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
</section>
|
||||
|
||||
## Solution
|
||||
<section id='solution'>
|
||||
|
||||
```js
|
||||
// solution required
|
||||
```
|
||||
</section>
|
||||
@@ -0,0 +1,53 @@
|
||||
---
|
||||
id: bad87fee1348bd9aedf08833
|
||||
title: Fill in the Blank with Placeholder Text
|
||||
challengeType: 0
|
||||
videoUrl: ''
|
||||
localeTitle: ''
|
||||
---
|
||||
|
||||
## Description
|
||||
undefined
|
||||
|
||||
## Instructions
|
||||
<section id="instructions"> استبدال النص داخل عنصر <code>p</code> مع الكلمات القليلة الأولى من هذا النص ipsum كيتي: <code>Kitty ipsum dolor sit amet, shed everywhere shed everywhere stretching attack your ankles chase the red dot, hairball run catnip eat the grass sniff.</code> </section>
|
||||
|
||||
## Tests
|
||||
<section id='tests'>
|
||||
|
||||
```yml
|
||||
tests:
|
||||
- text: ''
|
||||
testString: 'assert.isTrue((/Kitty(\s)+ipsum/gi).test($("p").text()), "Your <code>p</code> element should contain the first few words of the provided <code>kitty ipsum text</code>.");'
|
||||
|
||||
```
|
||||
|
||||
</section>
|
||||
|
||||
## Challenge Seed
|
||||
<section id='challengeSeed'>
|
||||
|
||||
<div id='html-seed'>
|
||||
|
||||
```html
|
||||
<h1>Hello World</h1>
|
||||
|
||||
<h2>CatPhotoApp</h2>
|
||||
|
||||
<p>Hello Paragraph</p>
|
||||
|
||||
```
|
||||
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
</section>
|
||||
|
||||
## Solution
|
||||
<section id='solution'>
|
||||
|
||||
```js
|
||||
// solution required
|
||||
```
|
||||
</section>
|
||||
@@ -0,0 +1,55 @@
|
||||
---
|
||||
id: bad87fee1348bd9aedf0887a
|
||||
title: Headline with the h2 Element
|
||||
challengeType: 0
|
||||
videoUrl: ''
|
||||
localeTitle: العنوان مع عنصر h2
|
||||
---
|
||||
|
||||
## Description
|
||||
undefined
|
||||
|
||||
## Instructions
|
||||
<section id="instructions"> إضافة علامة <code>h2</code> تقول "CatPhotoApp" لإنشاء <code>element</code> HTML ثاني أسفل عنصر <code>h1</code> "Hello World". </section>
|
||||
|
||||
## Tests
|
||||
<section id='tests'>
|
||||
|
||||
```yml
|
||||
tests:
|
||||
- text: قم بإنشاء عنصر <code>h2</code> .
|
||||
testString: 'assert(($("h2").length > 0), "Create an <code>h2</code> element.");'
|
||||
- text: ''
|
||||
testString: 'assert(code.match(/<\/h2>/g) && code.match(/<\/h2>/g).length === code.match(/<h2>/g).length, "Make sure your <code>h2</code> element has a closing tag.");'
|
||||
- text: ''
|
||||
testString: 'assert.isTrue((/cat(\s)?photo(\s)?app/gi).test($("h2").text()), "Your <code>h2</code> element should have the text "CatPhotoApp".");'
|
||||
- text: يجب أن يحتوي عنصر <code>h1</code> على النص "Hello World".
|
||||
testString: 'assert.isTrue((/hello(\s)+world/gi).test($("h1").text()), "Your <code>h1</code> element should have the text "Hello World".");'
|
||||
|
||||
```
|
||||
|
||||
</section>
|
||||
|
||||
## Challenge Seed
|
||||
<section id='challengeSeed'>
|
||||
|
||||
<div id='html-seed'>
|
||||
|
||||
```html
|
||||
<h1>Hello World</h1>
|
||||
|
||||
```
|
||||
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
</section>
|
||||
|
||||
## Solution
|
||||
<section id='solution'>
|
||||
|
||||
```js
|
||||
// solution required
|
||||
```
|
||||
</section>
|
||||
@@ -0,0 +1,54 @@
|
||||
---
|
||||
id: bad87fee1348bd9aedf08801
|
||||
title: Inform with the Paragraph Element
|
||||
challengeType: 0
|
||||
videoUrl: ''
|
||||
localeTitle: ''
|
||||
---
|
||||
|
||||
## Description
|
||||
<section id="description"> تعد العناصر <code>p</code> العنصر المفضل لنص الفقرة على مواقع الويب. <code>p</code> قصيرة في "الفقرة". يمكنك إنشاء عنصر فقرة مثل: <code><p>I'm ap tag!</p></code> </section>
|
||||
|
||||
## Instructions
|
||||
<section id="instructions"> قم بإنشاء عنصر <code>p</code> أسفل عنصر <code>h2</code> ، وأعطه النص "Hello Paragraph". </section>
|
||||
|
||||
## Tests
|
||||
<section id='tests'>
|
||||
|
||||
```yml
|
||||
tests:
|
||||
- text: قم بإنشاء عنصر <code>p</code> .
|
||||
testString: 'assert(($("p").length > 0), "Create a <code>p</code> element.");'
|
||||
- text: يجب أن يحتوي عنصر <code>p</code> على النص "Hello Paragraph".
|
||||
testString: 'assert.isTrue((/hello(\s)+paragraph/gi).test($("p").text()), "Your <code>p</code> element should have the text "Hello Paragraph".");'
|
||||
- text: تأكد من أن عنصر <code>p</code> لديه علامة إغلاق.
|
||||
testString: 'assert(code.match(/<\/p>/g) && code.match(/<\/p>/g).length === code.match(/<p/g).length, "Make sure your <code>p</code> element has a closing tag.");'
|
||||
|
||||
```
|
||||
|
||||
</section>
|
||||
|
||||
## Challenge Seed
|
||||
<section id='challengeSeed'>
|
||||
|
||||
<div id='html-seed'>
|
||||
|
||||
```html
|
||||
<h1>Hello World</h1>
|
||||
<h2>CatPhotoApp</h2>
|
||||
|
||||
```
|
||||
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
</section>
|
||||
|
||||
## Solution
|
||||
<section id='solution'>
|
||||
|
||||
```js
|
||||
// solution required
|
||||
```
|
||||
</section>
|
||||
@@ -0,0 +1,63 @@
|
||||
---
|
||||
id: bad87fee1348bd9aecf08801
|
||||
title: Introduction to HTML5 Elements
|
||||
challengeType: 0
|
||||
videoUrl: ''
|
||||
localeTitle: مقدمة إلى عناصر HTML5
|
||||
---
|
||||
|
||||
## Description
|
||||
<section id="description"> يقدم HTML5 مزيدًا من علامات HTML الوصفية. تشمل هذه <code>header</code> <code>footer</code> <code>nav</code> <code>video</code> <code>article</code> <code>section</code> وغيرها. تجعل هذه العلامات HTML أسهل في القراءة ، وتساعد أيضًا في تحسين محركات البحث (SEO) وإمكانية الوصول. تساعد علامة HTML5 <code>main</code> محركات البحث والمطورين الآخرين في العثور على المحتوى الرئيسي لصفحتك. <strong>ملحوظة</strong> <br> تتم تغطية العديد من علامات HTML5 الجديدة وفوائدها في قسم "إمكانية الوصول التطبيقي". </section>
|
||||
|
||||
## Instructions
|
||||
<section id="instructions"> إنشاء الثاني <code>p</code> العنصر بعد القائمة <code>p</code> عنصر مع النص كيتي هوز التالية: <code>Purr jump eat the grass rip the couch scratched sunbathe, shed everywhere rip the couch sleep in the sink fluffy fur catnip scratched.</code> التفاف الفقرات مع علامة <code>main</code> فتح وإغلاق. </section>
|
||||
|
||||
## Tests
|
||||
<section id='tests'>
|
||||
|
||||
```yml
|
||||
tests:
|
||||
- text: تحتاج 2 <code>p</code> العناصر مع النص كيتي هوز.
|
||||
testString: 'assert($("p").length > 1, "You need 2 <code>p</code> elements with Kitty Ipsum text.");'
|
||||
- text: تأكد من أن كل عنصر من عناصر <code>p</code> لديه علامة إغلاق.
|
||||
testString: 'assert(code.match(/<\/p>/g) && code.match(/<\/p>/g).length === code.match(/<p/g).length, "Make sure each of your <code>p</code> elements has a closing tag.");'
|
||||
- text: يجب أن يحتوي عنصر <code>p</code> على الكلمات القليلة الأولى من <code>kitty ipsum text</code> الإضافية المتوفرة.
|
||||
testString: 'assert.isTrue((/Purr\s+jump\s+eat/gi).test($("p").text()), "Your <code>p</code> element should contain the first few words of the provided additional <code>kitty ipsum text</code>.");'
|
||||
- text: يجب أن يحتوي <code>main</code> عنصر <code>main</code> واحد.
|
||||
testString: 'assert($("main").length === 1, "Your code should have one <code>main</code> element.");'
|
||||
- text: يجب أن يحتوي العنصر <code>main</code> على عنصرين فقرة كأطفال.
|
||||
testString: 'assert($("main").children("p").length === 2, "The <code>main</code> element should have two paragraph elements as children.");'
|
||||
- text: يجب أن تأتي العلامة الافتتاحية <code>main</code> قبل علامة الفقرة الأولى.
|
||||
testString: 'assert(code.match(/<main>\s*?<p>/g), "The opening <code>main</code> tag should come before the first paragraph tag.");'
|
||||
- text: يجب أن تأتي علامة الإغلاق <code>main</code> بعد علامة فقرة الإغلاق الثانية.
|
||||
testString: 'assert(code.match(/<\/p>\s*?<\/main>/g), "The closing <code>main</code> tag should come after the second closing paragraph tag.");'
|
||||
|
||||
```
|
||||
|
||||
</section>
|
||||
|
||||
## Challenge Seed
|
||||
<section id='challengeSeed'>
|
||||
|
||||
<div id='html-seed'>
|
||||
|
||||
```html
|
||||
<h2>CatPhotoApp</h2>
|
||||
|
||||
<p>Kitty ipsum dolor sit amet, shed everywhere shed everywhere stretching attack your ankles chase the red dot, hairball run catnip eat the grass sniff.</p>
|
||||
|
||||
```
|
||||
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
</section>
|
||||
|
||||
## Solution
|
||||
<section id='solution'>
|
||||
|
||||
```js
|
||||
// solution required
|
||||
```
|
||||
</section>
|
||||
@@ -0,0 +1,62 @@
|
||||
---
|
||||
id: bad87fee1348bd9aedf08816
|
||||
title: Link to External Pages with Anchor Elements
|
||||
challengeType: 0
|
||||
videoUrl: ''
|
||||
localeTitle: وصلة إلى الصفحات الخارجية مع عناصر مرساة
|
||||
---
|
||||
|
||||
## Description
|
||||
<section id="description"> يمكنك استخدام عناصر <code>anchor</code> للربط بمحتوى خارج صفحة الويب الخاصة بك. تحتاج عناصر <code>anchor</code> إلى عنوان ويب مقصود يسمى سمة <code>href</code> . هم أيضا بحاجة إلى مرساة النص. في ما يلي مثال: <code><a href="https://freecodecamp.org">this links to freecodecamp.org</a></code> ثم يعرض المتصفح النص <strong>"روابط إلى freecodecamp.org"</strong> كحلقة يمكنك النقر عليها. وسيأخذك هذا الرابط إلى عنوان الويب <strong>https://www.freecodecamp.org</strong> . </section>
|
||||
|
||||
## Instructions
|
||||
<section id="instructions"> إنشاء <code>a</code> العنصر الذي يربط <code>http://freecatphotoapp.com</code> ولديه "صور القط"، كما لها <code>anchor text</code> . </section>
|
||||
|
||||
## Tests
|
||||
<section id='tests'>
|
||||
|
||||
```yml
|
||||
tests:
|
||||
- text: الخاص بك <code>a</code> يجب أن يكون العنصر في <code>anchor text</code> من "صور القط".
|
||||
testString: 'assert((/cat photos/gi).test($("a").text()), "Your <code>a</code> element should have the <code>anchor text</code> of "cat photos".");'
|
||||
- text: 'تحتاج إلى <code>a</code> العنصر الذي يربط <code>http://freecatphotoapp .com</code>'
|
||||
testString: 'assert(/http:\/\/(www\.)?freecatphotoapp\.com/gi.test($("a").attr("href")), "You need an <code>a</code> element that links to <code>http://freecatphotoapp<wbr>.com</code>");'
|
||||
- text: تأكد من <code>a</code> عنصر يحتوي على علامة إغلاق.
|
||||
testString: 'assert(code.match(/<\/a>/g) && code.match(/<\/a>/g).length === code.match(/<a/g).length, "Make sure your <code>a</code> element has a closing tag.");'
|
||||
|
||||
```
|
||||
|
||||
</section>
|
||||
|
||||
## Challenge Seed
|
||||
<section id='challengeSeed'>
|
||||
|
||||
<div id='html-seed'>
|
||||
|
||||
```html
|
||||
<h2>CatPhotoApp</h2>
|
||||
<main>
|
||||
|
||||
|
||||
|
||||
<img src="https://bit.ly/fcc-relaxing-cat" alt="A cute orange cat lying on its back.">
|
||||
|
||||
<p>Kitty ipsum dolor sit amet, shed everywhere shed everywhere stretching attack your ankles chase the red dot, hairball run catnip eat the grass sniff.</p>
|
||||
<p>Purr jump eat the grass rip the couch scratched sunbathe, shed everywhere rip the couch sleep in the sink fluffy fur catnip scratched.</p>
|
||||
</main>
|
||||
|
||||
```
|
||||
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
</section>
|
||||
|
||||
## Solution
|
||||
<section id='solution'>
|
||||
|
||||
```js
|
||||
// solution required
|
||||
```
|
||||
</section>
|
||||
@@ -0,0 +1,73 @@
|
||||
---
|
||||
id: bad88fee1348bd9aedf08816
|
||||
title: Link to Internal Sections of a Page with Anchor Elements
|
||||
challengeType: 0
|
||||
videoUrl: ''
|
||||
localeTitle: رابط إلى الأقسام الداخلية لصفحة مع عناصر الارتساء
|
||||
---
|
||||
|
||||
## Description
|
||||
<section id="description"> يمكن أيضًا استخدام عناصر الربط لإنشاء روابط داخلية للانتقال إلى أقسام مختلفة داخل صفحة الويب. لإنشاء رابط داخلي ، يمكنك تعيين سمة <code>href</code> لرابط إلى رمز hash <code>#</code> plus وقيمة السمة <code>id</code> للعنصر الذي تريد ربطه داخليًا ، وعادةً ما يكون أسفل الصفحة. ستحتاج بعد ذلك إلى إضافة نفس سمة <code>id</code> إلى العنصر الذي تقوم بالارتباط إليه. <code>id</code> هو سمة تصف عنصرًا بشكل فريد. في ما يلي مثال لرابط الربط الداخلي والعنصر المستهدف: <blockquote style=";text-align:right;direction:rtl"> <a href="#contacts-header"> جهات الاتصال </a> <br> ... <br> <h2 id = "contacts-header"> جهات الاتصال </ h2> </blockquote> عندما ينقر المستخدمون على رابط جهات الاتصال ، سيتم نقلك إلى قسم صفحة الويب باستخدام عنصر عنوان <b>جهات الاتصال</b> . </section>
|
||||
|
||||
## Instructions
|
||||
<section id="instructions"> غيّر رابطك الخارجي إلى رابط داخلي عن طريق تغيير سمة <code>href</code> إلى "#footer" والنص من "صور القط" إلى "الانتقال إلى أسفل". أزل السمة <code>target="_blank"</code> من علامة الربط لأن هذا يؤدي إلى فتح المستند المرتبط في علامة تبويب نافذة جديدة. ثم أضف سمة <code>id</code> بقيمة "تذييل" إلى عنصر <code><footer></code> في أسفل الصفحة. </section>
|
||||
|
||||
## Tests
|
||||
<section id='tests'>
|
||||
|
||||
```yml
|
||||
tests:
|
||||
- text: يجب أن يكون هناك علامة ارتساء واحدة فقط على صفحتك.
|
||||
testString: 'assert($("a").length == 1, "There should be only one anchor tag on your page.");'
|
||||
- text: يجب أن يكون هناك علامة <code>footer</code> واحدة فقط على صفحتك.
|
||||
testString: 'assert($("footer").length == 1, "There should be only one <code>footer</code> tag on your page.");'
|
||||
- text: 'و <code>a</code> ينبغي أن يكون سمة ل <code>href</code> السمة تعيين "#footer".'
|
||||
testString: 'assert($("a").eq(0).attr("href") == "#footer", "The <code>a</code> tag should have an <code>href</code> attribute set to "#footer".");'
|
||||
- text: و <code>a</code> لا ينبغي أن يكون العلامة <code>target</code> السمة
|
||||
testString: 'assert(typeof $("a").eq(0).attr("target") == typeof undefined || $("a").eq(0).attr("target") == true, "The <code>a</code> tag should not have a <code>target</code> attribute");'
|
||||
- text: و <code>a</code> ينبغي أن يكون النص "الانتقال إلى أسفل".
|
||||
testString: 'assert($("a").eq(0).text().match(/Jump to Bottom/gi), "The <code>a</code> text should be "Jump to Bottom".");'
|
||||
- text: يجب أن تحتوي علامة <code>footer</code> سمة <code>id</code> تعيينها على "تذييل الصفحة".
|
||||
testString: 'assert($("footer").eq(0).attr("id") == "footer", "The <code>footer</code> tag should have an <code>id</code> attribute set to "footer".");'
|
||||
|
||||
```
|
||||
|
||||
</section>
|
||||
|
||||
## Challenge Seed
|
||||
<section id='challengeSeed'>
|
||||
|
||||
<div id='html-seed'>
|
||||
|
||||
```html
|
||||
<h2>CatPhotoApp</h2>
|
||||
<main>
|
||||
|
||||
<a href="http://freecatphotoapp.com" target="_blank">cat photos</a>
|
||||
|
||||
<img src="https://bit.ly/fcc-relaxing-cat" alt="A cute orange cat lying on its back.">
|
||||
|
||||
<p>Kitty ipsum dolor sit amet, shed everywhere shed everywhere stretching attack your ankles chase the red dot, hairball run catnip eat the grass sniff. Purr jump eat the grass rip the couch scratched sunbathe, shed everywhere rip the couch sleep in the sink fluffy fur catnip scratched. Kitty ipsum dolor sit amet, shed everywhere shed everywhere stretching attack your ankles chase the red dot, hairball run catnip eat the grass sniff.</p>
|
||||
<p>Purr jump eat the grass rip the couch scratched sunbathe, shed everywhere rip the couch sleep in the sink fluffy fur catnip scratched. Kitty ipsum dolor sit amet, shed everywhere shed everywhere stretching attack your ankles chase the red dot, hairball run catnip eat the grass sniff. Purr jump eat the grass rip the couch scratched sunbathe, shed everywhere rip the couch sleep in the sink fluffy fur catnip scratched.</p>
|
||||
<p>Meowwww loved it, hated it, loved it, hated it yet spill litter box, scratch at owner, destroy all furniture, especially couch or lay on arms while you're using the keyboard. Missing until dinner time toy mouse squeak roll over. With tail in the air lounge in doorway. Man running from cops stops to pet cats, goes to jail.</p>
|
||||
<p>Intently stare at the same spot poop in the plant pot but kitten is playing with dead mouse. Get video posted to internet for chasing red dot leave fur on owners clothes meow to be let out and mesmerizing birds leave fur on owners clothes or favor packaging over toy so purr for no reason. Meow to be let out play time intently sniff hand run outside as soon as door open yet destroy couch.</p>
|
||||
|
||||
</main>
|
||||
|
||||
<footer>Copyright Cat Photo App</footer>
|
||||
|
||||
```
|
||||
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
</section>
|
||||
|
||||
## Solution
|
||||
<section id='solution'>
|
||||
|
||||
```js
|
||||
// solution required
|
||||
```
|
||||
</section>
|
||||
@@ -0,0 +1,57 @@
|
||||
---
|
||||
id: bad87fee1348bd9aedf08817
|
||||
title: Make Dead Links Using the Hash Symbol
|
||||
challengeType: 0
|
||||
videoUrl: ''
|
||||
localeTitle: جعل الروابط الميتة باستخدام رمز التجزئة
|
||||
---
|
||||
|
||||
## Description
|
||||
<section id="description"> أحيانا كنت ترغب في إضافة <code>a</code> عناصر لموقع الويب الخاص بك قبل ان تعرفه حيث سيربط. هذا مفيد أيضًا عند تغيير سلوك الارتباط باستخدام <code>JavaScript</code> ، والذي سنتعرف عليه لاحقًا. </section>
|
||||
|
||||
## Instructions
|
||||
<section id="instructions"> القيمة الحالية لسمة <code>href</code> عبارة عن رابط يشير إلى "http://freecatphotoapp.com". استبدل قيمة السمة <code>href</code> بـ <code>#</code> ، والمعروف أيضًا باسم رمز التجزئة ، لإنشاء رابط ميت. على سبيل المثال: <code>href="#"</code> </section>
|
||||
|
||||
## Tests
|
||||
<section id='tests'>
|
||||
|
||||
```yml
|
||||
tests:
|
||||
- text: 'يجب أن يكون العنصر الخاص بك <code>a</code> وصلة ميتة مع تعيين قيمة <code>href</code> على "#".'
|
||||
testString: 'assert($("a").attr("href") === "#", "Your <code>a</code> element should be a dead link with the value of the <code>href</code> attribute set to "#".");'
|
||||
|
||||
```
|
||||
|
||||
</section>
|
||||
|
||||
## Challenge Seed
|
||||
<section id='challengeSeed'>
|
||||
|
||||
<div id='html-seed'>
|
||||
|
||||
```html
|
||||
<h2>CatPhotoApp</h2>
|
||||
<main>
|
||||
<p>Click here to view more <a href="http://freecatphotoapp.com" target="_blank">cat photos</a>.</p>
|
||||
|
||||
<img src="https://bit.ly/fcc-relaxing-cat" alt="A cute orange cat lying on its back.">
|
||||
|
||||
<p>Kitty ipsum dolor sit amet, shed everywhere shed everywhere stretching attack your ankles chase the red dot, hairball run catnip eat the grass sniff.</p>
|
||||
<p>Purr jump eat the grass rip the couch scratched sunbathe, shed everywhere rip the couch sleep in the sink fluffy fur catnip scratched.</p>
|
||||
</main>
|
||||
|
||||
```
|
||||
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
</section>
|
||||
|
||||
## Solution
|
||||
<section id='solution'>
|
||||
|
||||
```js
|
||||
// solution required
|
||||
```
|
||||
</section>
|
||||
@@ -0,0 +1,72 @@
|
||||
---
|
||||
id: bad87fee1348bd9aede08817
|
||||
title: Nest an Anchor Element within a Paragraph
|
||||
challengeType: 0
|
||||
videoUrl: ''
|
||||
localeTitle: عش عنصر الارتساء ضمن فقرة
|
||||
---
|
||||
|
||||
## Description
|
||||
<section id="description"> يمكنك تضمين الروابط داخل عناصر نصية أخرى. <blockquote style=";text-align:right;direction:rtl"> <P> <br> إليك <a target="_blank" href="http://freecodecamp.org"> رابط إلى freecodecamp.org </a> لتتبعه. <br> </ P> </blockquote> دعونا نقسم المثال: يتم التفاف النص العادي في عنصر <code>p</code> : <br> <code><p> Here's a ... for you to follow. </p></code> التالي هو عنصر <code>anchor</code> <code><a></code> (الذي يتطلب علامة إغلاق <code></a></code> ): <br> <code><a> ... </a></code> <code>target</code> عبارة عن سمة علامة ارتساء تحدد مكان فتح الرابط <code>"_blank"</code> القيمة <code>"_blank"</code> لفتح الرابط في علامة تبويب جديدة <code>href</code> عبارة عن سمة علامة ارتساء تحتوي على عنوان URL لـ الرابط: <br> <code><a href="http://freecodecamp.org"> ... </a></code> <strong>سيعرض</strong> النص <strong>"link to freecodecamp.org"</strong> ، داخل عنصر <code>anchor text</code> يدعى <code>anchor text</code> الرابط ، رابطًا للنقر: <br> <code><a href=" ... ">link to freecodecamp.org</a></code> الناتج النهائي للمثال كما يلي: <br><p style=";text-align:right;direction:rtl"> إليك <a target="_blank" href="http://freecodecamp.org">رابط لـ freecodecamp.org لتتبعه</a> . </p></section>
|
||||
|
||||
## Instructions
|
||||
<section id="instructions"> الآن عش الموجودة لديك <code>a</code> عنصر داخل الجديد <code>p</code> عنصر (فقط بعد القائمة <code>main</code> عنصر). يجب أن تحتوي الفقرة الجديدة على نص يقول "عرض المزيد من صور القط" ، حيث تكون "صور القط" ارتباطًا ، وبقية النص عبارة عن نص عادي. </section>
|
||||
|
||||
## Tests
|
||||
<section id='tests'>
|
||||
|
||||
```yml
|
||||
tests:
|
||||
- text: 'تحتاج إلى <code>a</code> العنصر الذي يربط "http://freecatphotoapp.com".'
|
||||
testString: 'assert(($("a[href=\"http://freecatphotoapp.com\"]").length > 0 || $("a[href=\"http://www.freecatphotoapp.com\"]").length > 0), "You need an <code>a</code> element that links to "http://freecatphotoapp.com".");'
|
||||
- text: الخاص بك <code>a</code> يجب أن يكون عنصر النص مرساة "صور القط"
|
||||
testString: 'assert($("a").text().match(/cat\sphotos/gi), "Your <code>a</code> element should have the anchor text of "cat photos"");'
|
||||
- text: إنشاء جديد <code>p</code> العنصر حول الخاص <code>a</code> العنصر. يجب أن يكون هناك 3 علامات <code>p</code> على الأقل في كود HTML الخاص بك.
|
||||
testString: 'assert($("p") && $("p").length > 2, "Create a new <code>p</code> element around your <code>a</code> element. There should be at least 3 total <code>p</code> tags in your HTML code.");'
|
||||
- text: ''
|
||||
testString: 'assert(($("a[href=\"http://freecatphotoapp.com\"]").parent().is("p") || $("a[href=\"http://www.freecatphotoapp.com\"]").parent().is("p")), "Your <code>a</code> element should be nested within your new <code>p</code> element.");'
|
||||
- text: يجب أن يحتوي عنصر <code>p</code> على النص "عرض المزيد" (مع وجود مسافة بعده).
|
||||
testString: 'assert(($("a[href=\"http://freecatphotoapp.com\"]").parent().text().match(/View\smore\s/gi) || $("a[href=\"http://www.freecatphotoapp.com\"]").parent().text().match(/View\smore\s/gi)), "Your <code>p</code> element should have the text "View more " (with a space after it).");'
|
||||
- text: الخاص بك <code>a</code> يجب أن <em>لا</em> يكون عنصر النص "عرض أكثر".
|
||||
testString: 'assert(!$("a").text().match(/View\smore/gi), "Your <code>a</code> element should <em>not</em> have the text "View more".");'
|
||||
- text: تأكد من أن كل عنصر من عناصر <code>p</code> لديه علامة إغلاق.
|
||||
testString: 'assert(code.match(/<\/p>/g) && code.match(/<p/g) && code.match(/<\/p>/g).length === code.match(/<p/g).length, "Make sure each of your <code>p</code> elements has a closing tag.");'
|
||||
- text: تأكد من أن كل <code>a</code> عناصرك لديه علامة إغلاق.
|
||||
testString: 'assert(code.match(/<\/a>/g) && code.match(/<a/g) && code.match(/<\/a>/g).length === code.match(/<a/g).length, "Make sure each of your <code>a</code> elements has a closing tag.");'
|
||||
|
||||
```
|
||||
|
||||
</section>
|
||||
|
||||
## Challenge Seed
|
||||
<section id='challengeSeed'>
|
||||
|
||||
<div id='html-seed'>
|
||||
|
||||
```html
|
||||
<h2>CatPhotoApp</h2>
|
||||
<main>
|
||||
|
||||
<a href="http://freecatphotoapp.com" target="_blank">cat photos</a>
|
||||
|
||||
<img src="https://bit.ly/fcc-relaxing-cat" alt="A cute orange cat lying on its back.">
|
||||
|
||||
<p>Kitty ipsum dolor sit amet, shed everywhere shed everywhere stretching attack your ankles chase the red dot, hairball run catnip eat the grass sniff.</p>
|
||||
<p>Purr jump eat the grass rip the couch scratched sunbathe, shed everywhere rip the couch sleep in the sink fluffy fur catnip scratched.</p>
|
||||
</main>
|
||||
|
||||
```
|
||||
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
</section>
|
||||
|
||||
## Solution
|
||||
<section id='solution'>
|
||||
|
||||
```js
|
||||
// solution required
|
||||
```
|
||||
</section>
|
||||
@@ -0,0 +1,83 @@
|
||||
---
|
||||
id: bad87fee1348bd9aede08835
|
||||
title: Nest Many Elements within a Single div Element
|
||||
challengeType: 0
|
||||
videoUrl: ''
|
||||
localeTitle: Nest العديد من العناصر داخل عنصر div مفرد
|
||||
---
|
||||
|
||||
## Description
|
||||
<section id="description"> عنصر <code>div</code> ، المعروف أيضًا باسم عنصر القسمة ، هو حاوية للأغراض العامة للعناصر الأخرى. ربما يكون عنصر <code>div</code> هو أكثر عناصر HTML شيوعًا على الإطلاق. تمامًا مثل أي عنصر آخر غير الإغلاق الذاتي ، يمكنك فتح عنصر <code>div</code> باستخدام <code><div></code> وإغلاقه في سطر آخر باستخدام <code></div></code> . </section>
|
||||
|
||||
## Instructions
|
||||
<section id="instructions"> اجعل "تحب قطط الأشياء" و "أشياء تكره القطط" تسرد كل عنصر <code>div</code> واحد. تلميح: حاول وضع الخاص بك افتتاح <code>div</code> العلامة فوق بك "القطط الأمور الحب" <code>p</code> العنصر الخاص بك وإغلاق <code>div</code> الوسم الخاص بك بعد إغلاق <code>ol</code> العلامة بحيث أن كلا من القوائم الخاصة بك هي واحدة ضمن <code>div</code> . </section>
|
||||
|
||||
## Tests
|
||||
<section id='tests'>
|
||||
|
||||
```yml
|
||||
tests:
|
||||
- text: ضع عناصر <code>p</code> داخل عنصر <code>div</code> الخاص بك.
|
||||
testString: 'assert($("div").children("p").length > 1, "Nest your <code>p</code> elements inside your <code>div</code> element.");'
|
||||
- text: عش <code>ul</code> داخل عنصر <code>div</code> الخاص بك.
|
||||
testString: 'assert($("div").children("ul").length > 0, "Nest your <code>ul</code> element inside your <code>div</code> element.");'
|
||||
- text: قم <code>ol</code> عنصر <code>ol</code> الخاص بك داخل عنصر <code>div</code> الخاص بك.
|
||||
testString: 'assert($("div").children("ol").length > 0, "Nest your <code>ol</code> element inside your <code>div</code> element.");'
|
||||
- text: تأكد من أن عنصر <code>div</code> يحتوي على علامة إغلاق.
|
||||
testString: 'assert(code.match(/<\/div>/g) && code.match(/<\/div>/g).length === code.match(/<div>/g).length, "Make sure your <code>div</code> element has a closing tag.");'
|
||||
|
||||
```
|
||||
|
||||
</section>
|
||||
|
||||
## Challenge Seed
|
||||
<section id='challengeSeed'>
|
||||
|
||||
<div id='html-seed'>
|
||||
|
||||
```html
|
||||
<h2>CatPhotoApp</h2>
|
||||
<main>
|
||||
<p>Click here to view more <a href="#">cat photos</a>.</p>
|
||||
|
||||
<a href="#"><img src="https://bit.ly/fcc-relaxing-cat" alt="A cute orange cat lying on its back."></a>
|
||||
|
||||
<p>Things cats love:</p>
|
||||
<ul>
|
||||
<li>cat nip</li>
|
||||
<li>laser pointers</li>
|
||||
<li>lasagna</li>
|
||||
</ul>
|
||||
<p>Top 3 things cats hate:</p>
|
||||
<ol>
|
||||
<li>flea treatment</li>
|
||||
<li>thunder</li>
|
||||
<li>other cats</li>
|
||||
</ol>
|
||||
|
||||
<form action="/submit-cat-photo">
|
||||
<label><input type="radio" name="indoor-outdoor" checked> Indoor</label>
|
||||
<label><input type="radio" name="indoor-outdoor"> Outdoor</label><br>
|
||||
<label><input type="checkbox" name="personality" checked> Loving</label>
|
||||
<label><input type="checkbox" name="personality"> Lazy</label>
|
||||
<label><input type="checkbox" name="personality"> Energetic</label><br>
|
||||
<input type="text" placeholder="cat photo URL" required>
|
||||
<button type="submit">Submit</button>
|
||||
</form>
|
||||
</main>
|
||||
|
||||
```
|
||||
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
</section>
|
||||
|
||||
## Solution
|
||||
<section id='solution'>
|
||||
|
||||
```js
|
||||
// solution required
|
||||
```
|
||||
</section>
|
||||
@@ -0,0 +1,49 @@
|
||||
---
|
||||
id: bd7123c8c441eddfaeb5bdef
|
||||
title: Say Hello to HTML Elements
|
||||
challengeType: 0
|
||||
videoUrl: ''
|
||||
localeTitle: ''
|
||||
---
|
||||
|
||||
## Description
|
||||
<section id="description"> مرحبًا بك في تحديات ترميز HTML لـ freeCodeCamp. ستوجهك هذه الخطوات من خلال تطوير الويب خطوة بخطوة. أولاً ، ستبدأ ببناء صفحة ويب بسيطة باستخدام HTML. يمكنك تحرير <code>code</code> في <code>code editor</code> الخاص بك ، والذي تم تضمينه في صفحة الويب هذه. هل ترى الرمز في محرر التعليمات البرمجية الذي يقول <code><h1>Hello</h1></code> ؟ هذا هو <code>element</code> HTML. تحتوي معظم عناصر HTML على <code>opening tag</code> <code>closing tag</code> . تبدو علامات الفتح بالشكل التالي: <code><h1></code> تبدو علامات الإغلاق كما يلي: <code></h1></code> الفرق الوحيد بين علامات الفتح والإغلاق هو شرطة مائلة للأمام بعد قوس الفتح لعلامة إغلاق. لكل تحد اختبارات يمكنك تشغيلها في أي وقت بالنقر فوق الزر "تشغيل الاختبارات". عندما تجتاز جميع الاختبارات ، ستتم مطالبتك بإرسال الحل والانتقال إلى التحدي التالي في الترميز. </section>
|
||||
|
||||
## Instructions
|
||||
<section id="instructions"> لتمرير الاختبار على هذا التحدي ، قم بتغيير نص عنصر <code>h1</code> ليقول "Hello World". </section>
|
||||
|
||||
## Tests
|
||||
<section id='tests'>
|
||||
|
||||
```yml
|
||||
tests:
|
||||
- text: ''
|
||||
testString: 'assert.isTrue((/hello(\s)+world/gi).test($("h1").text()), "Your <code>h1</code> element should have the text "Hello World".");'
|
||||
|
||||
```
|
||||
|
||||
</section>
|
||||
|
||||
## Challenge Seed
|
||||
<section id='challengeSeed'>
|
||||
|
||||
<div id='html-seed'>
|
||||
|
||||
```html
|
||||
<h1>Hello</h1>
|
||||
|
||||
```
|
||||
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
</section>
|
||||
|
||||
## Solution
|
||||
<section id='solution'>
|
||||
|
||||
```js
|
||||
// solution required
|
||||
```
|
||||
</section>
|
||||
@@ -0,0 +1,61 @@
|
||||
---
|
||||
id: bad87fee1348bd9aedf08820
|
||||
title: Turn an Image into a Link
|
||||
challengeType: 0
|
||||
videoUrl: ''
|
||||
localeTitle: تحويل صورة إلى رابط
|
||||
---
|
||||
|
||||
## Description
|
||||
<section id="description"> يمكنك جعل العناصر إلى روابط التي تعشش لهم داخل <code>a</code> عنصر. عش صورتك داخل <code>a</code> عنصر. في ما يلي مثال: <code><a href="#"><img src="https://bit.ly/fcc-running-cats" alt="Three kittens running towards the camera."></a></code> تذكر أن تستخدم <code>#</code> ك <code>a</code> العنصر <code>href</code> الملكية من أجل تحويله إلى رابط معطل. </section>
|
||||
|
||||
## Instructions
|
||||
<section id="instructions"> ضع عنصر الصورة الموجود داخل عنصر الارتساء. بعد الانتهاء من ذلك ، مرّر مؤشر الماوس فوق صورتك باستخدام المؤشر. يجب أن يصبح المؤشر الطبيعي لمؤشر المؤشر مؤشر النقر على الرابط. الصورة الآن رابط. </section>
|
||||
|
||||
## Tests
|
||||
<section id='tests'>
|
||||
|
||||
```yml
|
||||
tests:
|
||||
- text: ''
|
||||
testString: 'assert($("a").children("img").length > 0, "Nest the existing <code>img</code> element within an <code>a</code> element.");'
|
||||
- text: ''
|
||||
testString: 'assert(new RegExp("#").test($("a").children("img").parent().attr("href")), "Your <code>a</code> element should be a dead link with a <code>href</code> attribute set to <code>#</code>.");'
|
||||
- text: ''
|
||||
testString: 'assert(code.match(/<\/a>/g) && code.match(/<a/g) && code.match(/<\/a>/g).length === code.match(/<a/g).length, "Make sure each of your <code>a</code> elements has a closing tag.");'
|
||||
|
||||
```
|
||||
|
||||
</section>
|
||||
|
||||
## Challenge Seed
|
||||
<section id='challengeSeed'>
|
||||
|
||||
<div id='html-seed'>
|
||||
|
||||
```html
|
||||
<h2>CatPhotoApp</h2>
|
||||
<main>
|
||||
<p>Click here to view more <a href="#">cat photos</a>.</p>
|
||||
|
||||
<img src="https://bit.ly/fcc-relaxing-cat" alt="A cute orange cat lying on its back.">
|
||||
|
||||
<p>Kitty ipsum dolor sit amet, shed everywhere shed everywhere stretching attack your ankles chase the red dot, hairball run catnip eat the grass sniff.</p>
|
||||
<p>Purr jump eat the grass rip the couch scratched sunbathe, shed everywhere rip the couch sleep in the sink fluffy fur catnip scratched.</p>
|
||||
</main>
|
||||
|
||||
```
|
||||
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
</section>
|
||||
|
||||
## Solution
|
||||
<section id='solution'>
|
||||
|
||||
```js
|
||||
// solution required
|
||||
```
|
||||
</section>
|
||||
@@ -0,0 +1,61 @@
|
||||
---
|
||||
id: bad87fee1348bd9aedf08802
|
||||
title: Uncomment HTML
|
||||
challengeType: 0
|
||||
videoUrl: ''
|
||||
localeTitle: Uncomment HTML
|
||||
---
|
||||
|
||||
## Description
|
||||
undefined
|
||||
|
||||
## Instructions
|
||||
<section id="instructions"> إلغاء <code>h2</code> عناصر <code>h1</code> و <code>h2</code> و <code>p</code> . </section>
|
||||
|
||||
## Tests
|
||||
<section id='tests'>
|
||||
|
||||
```yml
|
||||
tests:
|
||||
- text: اجعل عنصر <code>h1</code> مرئيًا على صفحتك من خلال إلغاء تحميله.
|
||||
testString: 'assert($("h1").length > 0, "Make your <code>h1</code> element visible on your page by uncommenting it.");'
|
||||
- text: اجعل عنصر <code>h2</code> مرئيًا على صفحتك من خلال إلغاء تحميله.
|
||||
testString: 'assert($("h2").length > 0, "Make your <code>h2</code> element visible on your page by uncommenting it.");'
|
||||
- text: اجعل العنصر <code>p</code> مرئيًا على صفحتك من خلال إلغاء تحميله.
|
||||
testString: 'assert($("p").length > 0, "Make your <code>p</code> element visible on your page by uncommenting it.");'
|
||||
- text: تأكد من حذف جميع علامات التعليق الزائدة ، مثل <code>--></code> .
|
||||
testString: 'assert(!/[^fc]-->/gi.test(code.replace(/ *<!--[^fc]*\n/g,"")), "Be sure to delete all trailing comment tags, i.e. <code>--></code>.");'
|
||||
|
||||
```
|
||||
|
||||
</section>
|
||||
|
||||
## Challenge Seed
|
||||
<section id='challengeSeed'>
|
||||
|
||||
<div id='html-seed'>
|
||||
|
||||
```html
|
||||
<!--
|
||||
<h1>Hello World</h1>
|
||||
|
||||
<h2>CatPhotoApp</h2>
|
||||
|
||||
<p>Kitty ipsum dolor sit amet, shed everywhere shed everywhere stretching attack your ankles chase the red dot, hairball run catnip eat the grass sniff.</p>
|
||||
-->
|
||||
|
||||
```
|
||||
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
</section>
|
||||
|
||||
## Solution
|
||||
<section id='solution'>
|
||||
|
||||
```js
|
||||
// solution required
|
||||
```
|
||||
</section>
|
||||
@@ -0,0 +1,71 @@
|
||||
---
|
||||
id: bad87fee1348bd9aedc08830
|
||||
title: Use HTML5 to Require a Field
|
||||
challengeType: 0
|
||||
videoUrl: ''
|
||||
localeTitle: استخدم HTML5 لطلب حقل
|
||||
---
|
||||
|
||||
## Description
|
||||
<section id="description"> يمكنك طلب حقول نموذج محددة بحيث لا يتمكن المستخدم من إرسال النموذج الخاص بك حتى يقوم بملئها. على سبيل المثال ، إذا أردت إنشاء حقل إدخال نص مطلوب ، فيمكنك فقط إضافة السمة <code>required</code> داخل عنصر <code>input</code> ، مثل: <code><input type="text" required></code> </section>
|
||||
|
||||
## Instructions
|
||||
<section id="instructions"> اجعل <code>input</code> النص الخاص بك حقلًا <code>required</code> ، بحيث لا يمكن للمستخدم إرسال النموذج بدون إكمال هذا الحقل. ثم حاول إرسال النموذج دون إدخال أي نص. انظر كيف يعلمك نموذج HTML5 أن هذا الحقل مطلوب؟ </section>
|
||||
|
||||
## Tests
|
||||
<section id='tests'>
|
||||
|
||||
```yml
|
||||
tests:
|
||||
- text: يجب أن يحتوي عنصر <code>input</code> النص على السمة <code>required</code> .
|
||||
testString: 'assert($("input").prop("required"), "Your text <code>input</code> element should have the <code>required</code> attribute.");'
|
||||
|
||||
```
|
||||
|
||||
</section>
|
||||
|
||||
## Challenge Seed
|
||||
<section id='challengeSeed'>
|
||||
|
||||
<div id='html-seed'>
|
||||
|
||||
```html
|
||||
<h2>CatPhotoApp</h2>
|
||||
<main>
|
||||
<p>Click here to view more <a href="#">cat photos</a>.</p>
|
||||
|
||||
<a href="#"><img src="https://bit.ly/fcc-relaxing-cat" alt="A cute orange cat lying on its back."></a>
|
||||
|
||||
<p>Things cats love:</p>
|
||||
<ul>
|
||||
<li>cat nip</li>
|
||||
<li>laser pointers</li>
|
||||
<li>lasagna</li>
|
||||
</ul>
|
||||
<p>Top 3 things cats hate:</p>
|
||||
<ol>
|
||||
<li>flea treatment</li>
|
||||
<li>thunder</li>
|
||||
<li>other cats</li>
|
||||
</ol>
|
||||
<form action="/submit-cat-photo">
|
||||
<input type="text" placeholder="cat photo URL">
|
||||
<button type="submit">Submit</button>
|
||||
</form>
|
||||
</main>
|
||||
|
||||
```
|
||||
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
</section>
|
||||
|
||||
## Solution
|
||||
<section id='solution'>
|
||||
|
||||
```js
|
||||
// solution required
|
||||
```
|
||||
</section>
|
||||
Reference in New Issue
Block a user