chore(i18n,learn): processed translations

curriculum/challenges/arabic/01-responsive-web-design/applied-accessibility/add-a-text-alternative-to-images-for-visually-impaired-accessibility.md

@@ -28,7 +28,7 @@ Camper Cat هو نينجا في البرمجة وهو أيضا نينجا حقي
 يجب أن يحتوي وسم `img` الخاص بك علي خاصية `alt` ويجب ألا يكون فارغا.
 
 ```js
-assert($('img').attr('alt'));
+assert.isNotEmpty(document.querySelector('img')?.getAttribute('alt'));
 ```
 
 # --seed--

curriculum/challenges/arabic/01-responsive-web-design/applied-accessibility/add-an-accessible-date-picker.md

@@ -31,25 +31,25 @@ dashedName: add-an-accessible-date-picker
 يجب أن يحتوي الكود علي علامة `input` واحد لخانة محدد التاريخ.
 
 ```js
-assert($('input').length == 2);
+assert.lengthOf(document.querySelectorAll('input'), 2);
 ```
 
 يجب أن يحتوي علامة `input` على سمة `type` بقيمة `date`.
 
 ```js
-assert($('input').attr('type') == 'date');
+assert.equal(document.querySelector('input')?.getAttribute('type'), 'date');
 ```
 
 يجب أن يحتوي علامة `input` على سمة `id` بقيمة `pickdate`.
 
 ```js
-assert($('input').attr('id') == 'pickdate');
+assert.equal(document.querySelector('input')?.getAttribute('id'),'pickdate');
 ```
 
 يجب أن يحتوي علامة `input` على سمة `name` بقيمة `date`.
 
 ```js
-assert($('input').attr('name') == 'date');
+assert.equal(document.querySelector('input')?.getAttribute('name'), 'date');
 ```
 
 # --seed--

curriculum/challenges/arabic/01-responsive-web-design/applied-accessibility/avoid-colorblindness-issues-by-carefully-choosing-colors-that-convey-information.md

@@ -26,7 +26,9 @@ dashedName: >-
 يجب أن يغير الكود الخاص بك لون نص `color` للزر `button` إلى اللون الأزرق الداكن.
 
 ```js
-assert($('button').css('color') == 'rgb(0, 51, 102)');
+const button = document.querySelector('button');
+const buttonColor = window.getComputedStyle(button).color; 
+assert.equal(buttonColor, 'rgb(0, 51, 102)');
 ```
 
 # --seed--

curriculum/challenges/arabic/01-responsive-web-design/applied-accessibility/avoid-colorblindness-issues-by-using-sufficient-contrast.md

@@ -26,13 +26,13 @@ dashedName: avoid-colorblindness-issues-by-using-sufficient-contrast
 يجب علي الكود الخاص بك فقط تغيير قيمة الخفة lightness لخاصية `color` للنص إلى قيمة 15%.
 
 ```js
-assert(code.match(/color:\s*?hsl\(0,\s*?55%,\s*?15%\)/gi));
+assert.match(code ,/color:\s*?hsl\(0,\s*?55%,\s*?15%\)/gi);
 ```
 
 يجب علي الكود الخاص بك فقط تغيير قيمة الخفة lightness لخاصية `background-color` إلى قيمة 55%.
 
 ```js
-assert(code.match(/background-color:\s*?hsl\(120,\s*?25%,\s*?55%\)/gi));
+assert.match(code ,/background-color:\s*?hsl\(120,\s*?25%,\s*?55%\)/gi);
 ```
 
 # --seed--

curriculum/challenges/arabic/01-responsive-web-design/applied-accessibility/give-links-meaning-by-using-descriptive-link-text.md

@@ -22,26 +22,19 @@ Screen reader users have various options for what type of content their device r
 Your code should move the anchor `a` tags from around the words `Click here` to wrap around the words `information about batteries`.
 
 ```js
-assert(
-  $('a')
-    .text()
-    .match(/^(information about batteries)$/g)
-);
+assert.match(document.querySelector('a')?.textContent, /^(information about batteries)$/g);
 ```
 
 The `a` element should have an `href` attribute with a value of an empty string `""`.
 
 ```js
-assert($('a').attr('href') === '');
+assert.isEmpty(document.querySelector('a')?.getAttribute('href'));
 ```
 
 The `a` element should have a closing tag.
 
 ```js
-assert(
-  code.match(/<\/a>/g) &&
-    code.match(/<\/a>/g).length === code.match(/<a href=(''|"")>/g).length
-);
+assert.isTrue(code.match(/<\/a>/g)?.length === code.match(/<a href=(''|"")>/g)?.length);
 ```
 
 # --seed--

curriculum/challenges/arabic/01-responsive-web-design/applied-accessibility/improve-accessibility-of-audio-content-with-the-audio-element.md

@@ -35,49 +35,49 @@ Here's an example:
 Your code should have one `audio` tag.
 
 ```js
-assert($('audio').length === 1);
+assert.lengthOf(document.querySelectorAll('audio'),1);
 ```
 
 Your `audio` element should have a closing tag.
 
 ```js
-assert(
-  code.match(/<\/audio>/g).length === 1 &&
-    code.match(/<audio.*>[\s\S]*<\/audio>/g)
-);
+assert.match(code,/<audio.*>[\s\S]*<\/audio>/g);
+assert.lengthOf(code.match(/<\/audio>/g),1);
 ```
 
 The `audio` tag should have the `controls` attribute.
 
 ```js
-assert($('audio').attr('controls'));
+assert.exists(document.querySelector('audio')?.getAttribute('controls'));
 ```
 
 Your code should have one `source` tag.
 
 ```js
-assert($('source').length === 1);
+assert.lengthOf(document.querySelectorAll('source'), 1);
 ```
 
 Your `source` tag should be inside the `audio` tags.
 
 ```js
-assert($('audio').children('source').length === 1);
+const audio = document.querySelector('audio');
+const children = audio.querySelectorAll(`:scope ${'source'}`);
+assert.lengthOf(children,1);
 ```
 
 The value for the `src` attribute on the `source` tag should match the link in the instructions exactly.
 
 ```js
-assert(
-  $('source').attr('src') ===
-    'https://cdn.freecodecamp.org/curriculum/applied-accessibility/screen-reader.mp3'
+assert.equal(
+  document.querySelector('source')?.getAttribute('src'),
+  'https://cdn.freecodecamp.org/curriculum/applied-accessibility/screen-reader.mp3'
 );
 ```
 
 Your code should include a `type` attribute on the `source` tag with a value of audio/mpeg.
 
 ```js
-assert($('source').attr('type') === 'audio/mpeg');
+assert.equal(document.querySelector('source')?.getAttribute('type'), 'audio/mpeg');
 ```
 
 # --seed--

curriculum/challenges/arabic/01-responsive-web-design/applied-accessibility/improve-chart-accessibility-with-the-figure-element.md

@@ -34,39 +34,40 @@ Camper Cat شاق في العمل لإنشاء مخطط أعمدة مكدسة ي
 Your code should have one `figure` tag.
 
 ```js
-assert($('figure').length == 1);
+assert.lengthOf(document.querySelectorAll('figure') , 1);
 ```
 
 Your code should have one `figcaption` tag.
 
 ```js
-assert($('figcaption').length == 1);
+assert.lengthOf(document.querySelectorAll('figcaption') , 1);
 ```
 
 Your code should not have any `div` tags.
 
 ```js
-assert($('div').length == 0);
+assert.lengthOf(document.querySelectorAll('div'), 0);
 ```
 
 Your code should not have any `p` tags.
 
 ```js
-assert($('p').length == 0);
+assert.lengthOf(document.querySelectorAll('p') , 0);
 ```
 
 The `figcaption` should be a child of the `figure` tag.
 
 ```js
-assert($('figure').children('figcaption').length == 1);
+const figure = document.querySelector('figure');
+const children = figure?.querySelectorAll(`:scope ${'figcaption'}`);
+assert.lengthOf(children, 1);
 ```
 
 Your `figure` element should have a closing tag.
 
 ```js
-assert(
-  code.match(/<\/figure>/g) &&
-    code.match(/<\/figure>/g).length === code.match(/<figure>/g).length
+assert.isTrue(
+    code.match(/<\/figure>/g)?.length === code.match(/<figure>/g)?.length
 );
 ```
 

curriculum/challenges/arabic/01-responsive-web-design/applied-accessibility/improve-form-field-accessibility-with-the-label-element.md

@@ -33,13 +33,13 @@ The value of the `for` attribute must be the same as the value of the `id` attri
 Your code should have a `for` attribute on the `label` tag that is not empty.
 
 ```js
-assert($('label').attr('for'));
+assert.isNotEmpty(document.querySelector('label')?.getAttribute('for'));
 ```
 
 Your `for` attribute value should match the `id` value on the email `input`.
 
 ```js
-assert($('label').attr('for') == 'email');
+assert.equal(document.querySelector('label')?.getAttribute('for'), 'email');
 ```
 
 # --seed--

curriculum/challenges/arabic/01-responsive-web-design/applied-accessibility/improve-readability-with-high-contrast-text.md

@@ -22,13 +22,17 @@ The Web Content Accessibility Guidelines (WCAG) recommend at least a 4.5 to 1 co
 Your code should change the text `color` for the `body` to the darker gray.
 
 ```js
-assert($('body').css('color') == 'rgb(99, 99, 99)');
+const body = document.querySelector('body');
+const bodyColor = window.getComputedStyle(body).color; 
+assert(bodyColor == 'rgb(99, 99, 99)');
 ```
 
 Your code should not change the `background-color` for the `body`.
 
 ```js
-assert($('body').css('background-color') == 'rgb(255, 255, 255)');
+const body = document.querySelector('body');
+const backgroundColor = window.getComputedStyle(body).backgroundColor; 
+assert.equal(backgroundColor , 'rgb(255, 255, 255)');
 ```
 
 # --seed--

curriculum/challenges/arabic/01-responsive-web-design/applied-accessibility/jump-straight-to-the-content-using-the-main-element.md

@@ -26,13 +26,13 @@ Camper Cat لديه بعض الأفكار الكبيرة لصفحة أسلحة 
 Your code should have one `main` tag.
 
 ```js
-assert($('main').length == 1);
+assert.lengthOf(document.querySelectorAll('main'),1);
 ```
 
 The `main` tags should be between the closing `header` tag and the opening `footer` tag.
 
 ```js
-assert(code.match(/<\/header>\s*?<main>\s*?<\/main>/gi));
+assert.match(code,/<\/header>\s*?<main>\s*?<\/main>/gi);
 ```
 
 # --seed--

curriculum/challenges/arabic/01-responsive-web-design/applied-accessibility/know-when-alt-text-should-be-left-blank.md

@@ -30,13 +30,13 @@ Background images usually fall under the 'decorative' label as well. However, th
 Your `img` tag should have an `alt` attribute.
 
 ```js
-assert(!($('img').attr('alt') == undefined));
+assert.isTrue(document.querySelector('img')?.hasAttribute('alt'));
 ```
 
 The `alt` attribute should be set to an empty string.
 
 ```js
-assert($('img').attr('alt') == '');
+assert.isEmpty(document.querySelector('img')?.getAttribute('alt'));
 ```
 
 # --seed--

curriculum/challenges/arabic/01-responsive-web-design/applied-accessibility/make-elements-only-visible-to-a-screen-reader-by-using-custom-css.md

@@ -42,25 +42,29 @@ Here's an example of the CSS rules that accomplish this:
 Your code should set the `position` property of the `sr-only` class to a value of `absolute`.
 
 ```js
-assert($('.sr-only').css('position') == 'absolute');
+const srOnly = document.querySelector('.sr-only');
+const position = window.getComputedStyle(srOnly).position; 
+assert.equal(position, 'absolute');
 ```
 
 Your code should set the `left` property of the `sr-only` class to a value of `-10000px`.
 
 ```js
-assert($('.sr-only').css('left') == '-10000px');
+const srOnly = document.querySelector('.sr-only');
+const left = window.getComputedStyle(srOnly).left;
+assert.equal(left, '-10000px');
 ```
 
 Your code should set the `width` property of the `sr-only` class to a value of `1` pixel.
 
 ```js
-assert(code.match(/width:\s*?1px/gi));
+assert.match(code , /width:\s*?1px/gi);
 ```
 
 Your code should set the `height` property of the `sr-only` class to a value of `1` pixel.
 
 ```js
-assert(code.match(/height:\s*?1px/gi));
+assert.match(code , /height:\s*?1px/gi);
 ```
 
 # --seed--

curriculum/challenges/arabic/01-responsive-web-design/applied-accessibility/make-links-navigable-with-html-access-keys.md

@@ -28,25 +28,25 @@ Here's an example:
 Your code should add an `accesskey` attribute to the `a` tag with the `id` of `first`.
 
 ```js
-assert($('#first').attr('accesskey'));
+assert.isTrue(document.querySelector('#first')?.hasAttribute('accesskey'));
 ```
 
 Your code should add an `accesskey` attribute to the `a` tag with the `id` of `second`.
 
 ```js
-assert($('#second').attr('accesskey'));
+assert.isTrue(document.querySelector('#second')?.hasAttribute('accesskey'));
 ```
 
 Your code should set the `accesskey` attribute on the `a` tag with the `id` of `first` to `g`. Note that case matters.
 
 ```js
-assert($('#first').attr('accesskey') == 'g');
+assert.equal(document.querySelector('#first')?.getAttribute('accesskey'), 'g');
 ```
 
 Your code should set the `accesskey` attribute on the `a` tag with the `id` of `second` to `c`. Note that case matters.
 
 ```js
-assert($('#second').attr('accesskey') == 'c');
+assert.equal(document.querySelector('#second')?.getAttribute('accesskey'), 'c');
 ```
 
 # --seed--

curriculum/challenges/arabic/01-responsive-web-design/applied-accessibility/make-screen-reader-navigation-easier-with-the-footer-landmark.md

@@ -20,19 +20,19 @@ Similar to `header` and `nav`, the `footer` element has a built-in landmark feat
 Your code should have one `footer` tag.
 
 ```js
-assert($('footer').length == 1);
+assert.lengthOf(document.querySelectorAll('footer') ,1);
 ```
 
 Your code should not have any `div` tags.
 
 ```js
-assert($('div').length == 0);
+assert.lengthOf(document.querySelectorAll('div'), 0);
 ```
 
 Your code should have an opening and closing `footer` tag.
 
 ```js
-assert(code.match(/<footer>\s*&copy; 2018 Camper Cat\s*<\/footer>/g));
+assert.match(code,/<footer>\s*&copy; 2018 Camper Cat\s*<\/footer>/g);
 ```
 
 # --seed--

curriculum/challenges/arabic/01-responsive-web-design/applied-accessibility/make-screen-reader-navigation-easier-with-the-header-landmark.md

@@ -24,28 +24,27 @@ dashedName: make-screen-reader-navigation-easier-with-the-header-landmark
 يجب أن يحتوي الكود الخاص بك على علامة `header` واحدة فقط.
 
 ```js
-assert($('header').length == 1);
+assert.lengthOf(document.querySelectorAll('header'),1);
 ```
 
 يجب أن يحتوي عنصر `header` على عنصر `h1`.
 
 ```js
-assert($('header').children('h1').length == 1);
+const header = document.querySelector('header');
+const children = header?.querySelectorAll(`:scope ${'h1'}`);
+assert.lengthOf(children , 1);
 ```
 
 يجب ألا يحتوي الكود الخاص بك على أي عنصر `div`.
 
 ```js
-assert($('div').length == 0);
+assert.lengthOf(document.querySelectorAll('div') , 0);
 ```
 
 يجب أن يحتوي عنصر `header` الخاص بك على علامة إغلاق.
 
 ```js
-assert(
-  code.match(/<\/header>/g) &&
-    code.match(/<\/header>/g).length === code.match(/<header>/g).length
-);
+assert.isTrue(code.match(/<\/header>/g)?.length === code.match(/<header>/g)?.length);
 ```
 
 # --seed--