gaspersic/freeCodeCamp
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

Unwanted underscores in search result and incorrect URL - fixing #24573 (#28441)

Browse Source 
* fixing #24573

fixing #24573 - Guide: Let and Const - Unwanted underscores in search result and incorrect URL

- changed underscore to hyphen, same problem was also happening with arrow_functions

https://github.com/freeCodeCamp/freeCodeCamp/issues/24573

* fix: added 3 backticks for code sections
This commit is contained in:
lau626
2018-11-11 23:47:08 -08:00
committed by Randell Dawson
parent beaa90038a
commit a2ed0103ec
5 changed files with 32 additions and 24 deletions
Download Patch File Download Diff File Expand all files Collapse all files

40
guide/arabic/javascript/tutorials/how-to-create-a-dropdown-menu-with-css-and-javascript/index.md
View File

@ -28,7 +28,7 @@ localeTitle: كيفية إنشاء قائمة منسدلة باستخدام CSS
في هذا القسم ، سنناقش تنفيذ شفرة HTML للصفحة التجريبية. للبدء ، دعنا نرى الرمز `<head>` في هذا القسم ، سنناقش تنفيذ شفرة HTML للصفحة التجريبية. للبدء ، دعنا نرى الرمز `<head>`
` ```html
<!DOCTYPE html> <!DOCTYPE html>
<html lang="en"> <html lang="en">
<head> <head>
@ -40,13 +40,13 @@ localeTitle: كيفية إنشاء قائمة منسدلة باستخدام CSS
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/'-awesome/4.7.0/css/font-awesome.min.css"> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/'-awesome/4.7.0/css/font-awesome.min.css">
<link rel="stylesheet" href="styles.css"> <link rel="stylesheet" href="styles.css">
</head> </head>
` ```
هذا هو الأساس الأساسي لنموذج HTML الرئيسي ، باستثناء علامات `link` تحمّل صحيفتي أنماط CSS التي سنستخدمها في هذا البرنامج التعليمي: الأنماط `styles.css` ، وملف `styles.css` ، حيث `styles.css` أنماط هذه الصفحة. هذا هو الأساس الأساسي لنموذج HTML الرئيسي ، باستثناء علامات `link` تحمّل صحيفتي أنماط CSS التي سنستخدمها في هذا البرنامج التعليمي: الأنماط `styles.css` ، وملف `styles.css` ، حيث `styles.css` أنماط هذه الصفحة.
ثم ، ما تبقى من ملف HTML ، الجسم: ثم ، ما تبقى من ملف HTML ، الجسم:
` ```html
<body> <body>
<div class='dropdown'> <div class='dropdown'>
<div class='title pointerCursor'>Select an option <i class="fa fa-angle-right"></i></div> <div class='title pointerCursor'>Select an option <i class="fa fa-angle-right"></i></div>
@ -65,7 +65,7 @@ localeTitle: كيفية إنشاء قائمة منسدلة باستخدام CSS
</script> </script>
</body> </body>
</html> </html>
` ```
يمكن تقسيم هذا القسم إلى 3 أجزاء رئيسية: يمكن تقسيم هذا القسم إلى 3 أجزاء رئيسية:
@ -83,7 +83,9 @@ localeTitle: كيفية إنشاء قائمة منسدلة باستخدام CSS
يرجى الانتباه إلى تعريفات `.dropdown` . يتم استخدام هذه لتحديد تخطيط مكون الحاوية القائمة المنسدلة بالإضافة إلى عناصرها الداخلية ، مثل `.title` و `.option` الخاص به. يرجى الانتباه إلى تعريفات `.dropdown` . يتم استخدام هذه لتحديد تخطيط مكون الحاوية القائمة المنسدلة بالإضافة إلى عناصرها الداخلية ، مثل `.title` و `.option` الخاص به.
`body{ ```html
body{
font-family: 'Lucida Sans', 'Lucida Sans Regular', 'Lucida Grande', 'Lucida Sans Unicode', Geneva, Verdana, sans-serif; font-family: 'Lucida Sans', 'Lucida Sans Regular', 'Lucida Grande', 'Lucida Sans Unicode', Geneva, Verdana, sans-serif;
} }
@ -130,7 +132,7 @@ localeTitle: كيفية إنشاء قائمة منسدلة باستخدام CSS
.rotate-90{ .rotate-90{
transform: rotate(90deg); transform: rotate(90deg);
} }
` ```
#### جافا سكريبت: #### جافا سكريبت:
@ -146,7 +148,9 @@ localeTitle: كيفية إنشاء قائمة منسدلة باستخدام CSS
#### 1\. النقر على عنصر القائمة المنسدلة #### 1\. النقر على عنصر القائمة المنسدلة
`function toggleClass(elem,className){ ```js
function toggleClass(elem,className){
if (elem.className.indexOf(className) !== -1){ if (elem.className.indexOf(className) !== -1){
elem.className = elem.className.replace(className,''); elem.className = elem.className.replace(className,'');
} }
@ -177,13 +181,15 @@ localeTitle: كيفية إنشاء قائمة منسدلة باستخدام CSS
toggleClass(menu,'hide'); toggleClass(menu,'hide');
toggleClass(icon,'rotate-90'); toggleClass(icon,'rotate-90');
} }
` ```
عند النقر فوق عنصر القائمة المنسدلة ، يتم فتحه (إذا كان مغلقًا) أو إغلاق (في حالة فتحه). يحدث ذلك عن طريق ربط `toggleMenuDisplay` الإصغاء على عنصر القائمة المنسدلة. هذه الوظيفة تبديل عرض عنصر `menu` به عن طريق استخدام `toggleDisplay` و `toggleClass` . عند النقر فوق عنصر القائمة المنسدلة ، يتم فتحه (إذا كان مغلقًا) أو إغلاق (في حالة فتحه). يحدث ذلك عن طريق ربط `toggleMenuDisplay` الإصغاء على عنصر القائمة المنسدلة. هذه الوظيفة تبديل عرض عنصر `menu` به عن طريق استخدام `toggleDisplay` و `toggleClass` .
#### 2\. اختيار واحد من خيارات القائمة المنسدلة #### 2\. اختيار واحد من خيارات القائمة المنسدلة
`function handleOptionSelected(e){ ```js
function handleOptionSelected(e){
toggleClass(e.target.parentNode, 'hide'); toggleClass(e.target.parentNode, 'hide');
const id = e.target.id; const id = e.target.id;
@ -200,22 +206,24 @@ localeTitle: كيفية إنشاء قائمة منسدلة باستخدام CSS
//setTimeout is used so transition is properly shown //setTimeout is used so transition is properly shown
setTimeout(() => toggleClass(icon,'rotate-90',0)); setTimeout(() => toggleClass(icon,'rotate-90',0));
} }
` ```
#### 3\. تغيير الخيار المحدد حاليا #### 3\. تغيير الخيار المحدد حاليا
`function handleTitleChange(e){ ```js
function handleTitleChange(e){
const result = document.getElementById('result'); const result = document.getElementById('result');
result.innerHTML = 'The result is: ' + e.target.textContent; result.innerHTML = 'The result is: ' + e.target.textContent;
} }
` ```
يرتبط `handleTitleChange` الدالة `handleTitleChange` بحدث `change` المخصص على عنصر `.title` ، لتغيير محتوى عنصر `#result` كلما تغير عنصر العنوان. يتم إجراء هذا الحدث على القسم السابق. يرتبط `handleTitleChange` الدالة `handleTitleChange` بحدث `change` المخصص على عنصر `.title` ، لتغيير محتوى عنصر `#result` كلما تغير عنصر العنوان. يتم إجراء هذا الحدث على القسم السابق.
#### كود الرئيسي #### كود الرئيسي
`//get elements ```js
//get elements
const dropdownTitle = document.querySelector('.dropdown .title'); const dropdownTitle = document.querySelector('.dropdown .title');
const dropdownOptions = document.querySelectorAll('.dropdown .option'); const dropdownOptions = document.querySelectorAll('.dropdown .option');
@ -223,7 +231,7 @@ localeTitle: كيفية إنشاء قائمة منسدلة باستخدام CSS
dropdownTitle.addEventListener('click', toggleMenuDisplay); dropdownTitle.addEventListener('click', toggleMenuDisplay);
dropdownOptions.forEach(option => option.addEventListener('click',handleOptionSelected)); dropdownOptions.forEach(option => option.addEventListener('click',handleOptionSelected));
document.querySelector('.dropdown .title').addEventListener('change',handleTitleChange); document.querySelector('.dropdown .title').addEventListener('change',handleTitleChange);
` ```
في القسم الرئيسي ، هناك بعض الكودات البسيطة للحصول على عنوان القائمة المنسدلة وعناصر الخيارات لربطها بالأحداث التي تمت مناقشتها في القسم الأخير. في القسم الرئيسي ، هناك بعض الكودات البسيطة للحصول على عنوان القائمة المنسدلة وعناصر الخيارات لربطها بالأحداث التي تمت مناقشتها في القسم الأخير.
@ -234,5 +242,5 @@ localeTitle: كيفية إنشاء قائمة منسدلة باستخدام CSS
## معلومات اكثر ## معلومات اكثر
* [مقدمة ES6](https://guide.freecodecamp.org/javascript/es6) * [مقدمة ES6](https://guide.freecodecamp.org/javascript/es6)
* [وظائف السهم](https://guide.freecodecamp.org/javascript/es6/arrow_functions/) * [وظائف السهم](https://guide.freecodecamp.org/javascript/es6/arrow-functions/)
* [واسمحوا Const](https://guide.freecodecamp.org/javascript/es6/let_and_const/) * [واسمحوا Const](https://guide.freecodecamp.org/javascript/es6/let-and-const/)

4
guide/english/javascript/tutorials/how-to-create-a-dropdown-menu-with-css-and-javascript/index.md
View File

@ -229,5 +229,5 @@ This application's full code and demo can be found [here](https://codepen.io/GCr
## More Information ## More Information
* [ES6 introduction](https://guide.freecodecamp.org/javascript/es6) * [ES6 introduction](https://guide.freecodecamp.org/javascript/es6)
* [Arrow functions](https://guide.freecodecamp.org/javascript/es6/arrow_functions/) * [Arrow functions](https://guide.freecodecamp.org/javascript/es6/arrow-functions/)
* [Let and Const](https://guide.freecodecamp.org/javascript/es6/let_and_const/) * [Let and Const](https://guide.freecodecamp.org/javascript/es6/let-and-const/)

4
guide/portuguese/javascript/tutorials/how-to-create-a-dropdown-menu-with-css-and-javascript/index.md
View File

@ -241,5 +241,5 @@ O código completo e a demonstração deste aplicativo podem ser encontrados [aq
## Mais Informações ## Mais Informações
* [Introdução ao ES6](https://guide.freecodecamp.org/javascript/es6) * [Introdução ao ES6](https://guide.freecodecamp.org/javascript/es6)
* [Funções de seta](https://guide.freecodecamp.org/javascript/es6/arrow_functions/) * [Funções de seta](https://guide.freecodecamp.org/javascript/es6/arrow-functions/)
* [Deixe e Const](https://guide.freecodecamp.org/javascript/es6/let_and_const/) * [Deixe e Const](https://guide.freecodecamp.org/javascript/es6/let-and-const/)

4
guide/russian/javascript/tutorials/how-to-create-a-dropdown-menu-with-css-and-javascript/index.md
View File

@ -241,5 +241,5 @@ function handleTitleChange(e){
## Больше информации ## Больше информации
* [Введение ES6](https://guide.freecodecamp.org/javascript/es6) * [Введение ES6](https://guide.freecodecamp.org/javascript/es6)
* [Функции стрелок](https://guide.freecodecamp.org/javascript/es6/arrow_functions/) * [Функции стрелок](https://guide.freecodecamp.org/javascript/es6/arrow-functions/)
* [Let и Const](https://guide.freecodecamp.org/javascript/es6/let_and_const/) * [Let и Const](https://guide.freecodecamp.org/javascript/es6/let-and-const/)

4
guide/spanish/javascript/tutorials/how-to-create-a-dropdown-menu-with-css-and-javascript/index.md
View File

@ -241,5 +241,5 @@ El código completo y la demostración de esta aplicación se pueden encontrar [
## Más información ## Más información
* [ES6 introducción](https://guide.freecodecamp.org/javascript/es6) * [ES6 introducción](https://guide.freecodecamp.org/javascript/es6)
* [Funciones de flecha](https://guide.freecodecamp.org/javascript/es6/arrow_functions/) * [Funciones de flecha](https://guide.freecodecamp.org/javascript/es6/arrow-functions/)
* [Let y Const](https://guide.freecodecamp.org/javascript/es6/let_and_const/) * [Let y Const](https://guide.freecodecamp.org/javascript/es6/let-and-const/)