` فارغ، مما يعني أنه لن يتم عرض أي شيء على الشاشة حتى نضيف بعض المحتوى إليه. كما نعطيه خاصية `id` حتى نتمكن من استرجاعه بسهولة باستخدام JavaScript. ارجع إلى ملف `app.js` وقم بإنشاء وظيفة مساعدة جديدة `updateElement`: ```js function updateElement(id, text) { const element = document.getElementById(id); element.textContent = text; } ``` هذه الوظيفة بسيطة للغاية: بالنظر إلى *id* العنصر و*النص*، ستقوم بتحديث محتوى النص للعنصر المطابق في DOM. لنستخدم هذه الطريقة بدلاً من رسالة الخطأ السابقة في وظيفة `login`: ```js if (data.error) { return updateElement('loginError', data.error); } ``` الآن إذا حاولت تسجيل الدخول باستخدام حساب غير صالح، يجب أن ترى شيئًا مثل هذا:  الآن لدينا نص خطأ يظهر بصريًا، ولكن إذا جربته باستخدام قارئ الشاشة ستلاحظ أنه لا يتم الإعلان عن أي شيء. لكي يتم الإعلان عن النص الذي يتم إضافته ديناميكيًا إلى الصفحة بواسطة قارئات الشاشة، سيحتاج إلى استخدام شيء يسمى [منطقة حية](https://developer.mozilla.org/docs/Web/Accessibility/ARIA/ARIA_Live_Regions). هنا سنستخدم نوعًا محددًا من المنطقة الحية يسمى تنبيه: ```html ``` قم بتنفيذ نفس السلوك لأخطاء وظيفة `register` (لا تنس تحديث HTML). ## عرض المعلومات على لوحة التحكم باستخدام نفس التقنيات التي رأيناها للتو، سنتولى أيضًا عرض معلومات الحساب على صفحة لوحة التحكم. هذا هو شكل كائن الحساب الذي يتم استلامه من الخادم: ```json { "user": "test", "currency": "$", "description": "Test account", "balance": 75, "transactions": [ { "id": "1", "date": "2020-10-01", "object": "Pocket money", "amount": 50 }, { "id": "2", "date": "2020-10-03", "object": "Book", "amount": -10 }, { "id": "3", "date": "2020-10-04", "object": "Sandwich", "amount": -5 } ], } ``` > ملاحظة: لتسهيل حياتك، يمكنك استخدام حساب `test` الموجود مسبقًا والذي يحتوي بالفعل على بيانات. ### المهمة لنبدأ باستبدال قسم "الرصيد" في HTML لإضافة عناصر نائب: ```html

Balance:

``` سنضيف أيضًا قسمًا جديدًا أسفل ذلك لعرض وصف الحساب: ```html

``` ✅ نظرًا لأن وصف الحساب يعمل كعنوان للمحتوى الموجود تحته، يتم ترميزه دلاليًا كعنوان. تعرف على المزيد حول كيفية [هيكلة العناوين](https://www.nomensa.com/blog/2017/how-structure-headings-web-accessibility) وأهميتها لإمكانية الوصول، وألقِ نظرة نقدية على الصفحة لتحديد ما الذي يمكن أن يكون عنوانًا أيضًا. بعد ذلك، سنقوم بإنشاء وظيفة جديدة في `app.js` لملء العناصر النائبة: ```js function updateDashboard() { if (!account) { return navigate('/login'); } updateElement('description', account.description); updateElement('balance', account.balance.toFixed(2)); updateElement('currency', account.currency); } ``` أولاً، نتحقق من أن لدينا بيانات الحساب التي نحتاجها قبل المضي قدمًا. ثم نستخدم وظيفة `updateElement()` التي أنشأناها سابقًا لتحديث HTML. > لجعل عرض الرصيد أكثر جمالًا، نستخدم الطريقة [`toFixed(2)`](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Number/toFixed) لإجبار عرض القيمة مع رقمين بعد العلامة العشرية. الآن نحتاج إلى استدعاء وظيفة `updateDashboard()` في كل مرة يتم فيها تحميل صفحة لوحة التحكم. إذا كنت قد أكملت بالفعل [مهمة الدرس الأول](../1-template-route/assignment.md) يجب أن يكون هذا بسيطًا، وإلا يمكنك استخدام التنفيذ التالي. أضف هذا الكود إلى نهاية وظيفة `updateRoute()`: ```js if (typeof route.init === 'function') { route.init(); } ``` وقم بتحديث تعريف المسارات بـ: ```js const routes = { '/login': { templateId: 'login' }, '/dashboard': { templateId: 'dashboard', init: updateDashboard } }; ``` مع هذا التغيير، في كل مرة يتم فيها عرض صفحة لوحة التحكم، يتم استدعاء وظيفة `updateDashboard()`. بعد تسجيل الدخول، يجب أن تكون قادرًا على رؤية الرصيد، العملة والوصف الخاص بالحساب. ## إنشاء صفوف الجدول ديناميكيًا باستخدام قوالب HTML في [الدرس الأول](../1-template-route/README.md) استخدمنا قوالب HTML مع طريقة [`appendChild()`](https://developer.mozilla.org/docs/Web/API/Node/appendChild) لتنفيذ التنقل في تطبيقنا. يمكن أن تكون القوالب أصغر وتستخدم لملء أجزاء متكررة من الصفحة ديناميكيًا. سنستخدم نهجًا مشابهًا لعرض قائمة المعاملات في جدول HTML. ### المهمة أضف قالبًا جديدًا في `` لـ HTML: ```html ``` يمثل هذا القالب صفًا واحدًا في الجدول، مع الأعمدة الثلاثة التي نريد ملؤها: *التاريخ*، *العنصر* و*المبلغ* للمعاملة. ثم، أضف خاصية `id` إلى عنصر `` في الجدول داخل قالب لوحة التحكم لجعل العثور عليه أسهل باستخدام JavaScript: ```html ``` HTML جاهز، لننتقل إلى كود JavaScript وننشئ وظيفة جديدة `createTransactionRow`: ```js function createTransactionRow(transaction) { const template = document.getElementById('transaction'); const transactionRow = template.content.cloneNode(true); const tr = transactionRow.querySelector('tr'); tr.children[0].textContent = transaction.date; tr.children[1].textContent = transaction.object; tr.children[2].textContent = transaction.amount.toFixed(2); return transactionRow; } ``` تقوم هذه الوظيفة بالضبط بما يوحي به اسمها: باستخدام القالب الذي أنشأناه سابقًا، تقوم بإنشاء صف جديد في الجدول وتملأ محتوياته باستخدام بيانات المعاملة. سنستخدم هذا في وظيفة `updateDashboard()` لملء الجدول: ```js const transactionsRows = document.createDocumentFragment(); for (const transaction of account.transactions) { const transactionRow = createTransactionRow(transaction); transactionsRows.appendChild(transactionRow); } updateElement('transactions', transactionsRows); ``` هنا نستخدم طريقة [`document.createDocumentFragment()`](https://developer.mozilla.org/docs/Web/API/Document/createDocumentFragment) التي تنشئ جزءًا جديدًا من DOM يمكننا العمل عليه، قبل إرفاقه أخيرًا بجدول HTML الخاص بنا. لا يزال هناك شيء واحد علينا القيام به قبل أن يعمل هذا الكود، حيث أن وظيفة `updateElement()` الخاصة بنا تدعم حاليًا محتوى النص فقط. لنقم بتغيير الكود الخاص بها قليلاً: ```js function updateElement(id, textOrNode) { const element = document.getElementById(id); element.textContent = ''; // Removes all children element.append(textOrNode); } ``` نستخدم طريقة [`append()`](https://developer.mozilla.org/docs/Web/API/ParentNode/append) لأنها تتيح إرفاق النصوص أو [عُقد DOM](https://developer.mozilla.org/docs/Web/API/Node) إلى عنصر الأب، مما يجعلها مثالية لجميع حالات الاستخدام لدينا. إذا حاولت استخدام حساب `test` لتسجيل الدخول، يجب أن ترى الآن قائمة المعاملات على لوحة التحكم 🎉. --- ## تحدي GitHub Copilot Agent 🚀 استخدم وضع الوكيل لإكمال التحدي التالي: **الوصف:** قم بتحسين تطبيق البنك من خلال تنفيذ ميزة البحث والتصفية للمعاملات التي تتيح للمستخدمين العثور على معاملات محددة حسب نطاق التاريخ، المبلغ، أو وصف المعاملة. **المهمة:** قم بإنشاء وظيفة بحث لتطبيق البنك تتضمن: 1) نموذج بحث يحتوي على حقول إدخال لنطاق التاريخ (من/إلى)، الحد الأدنى/الأقصى للمبلغ، وكلمات مفتاحية لوصف المعاملة، 2) وظيفة `filterTransactions()` لتصفية مصفوفة account.transactions بناءً على معايير البحث، 3) تحديث وظيفة `updateDashboard()` لعرض النتائج المصفاة، و 4) إضافة زر "مسح الفلاتر" لإعادة العرض إلى حالته الأصلية. استخدم طرق حديثة لمصفوفات JavaScript مثل `filter()` وتعامل مع الحالات الخاصة بمعايير البحث الفارغة. ## 🚀 التحدي تعاونوا لجعل صفحة لوحة التحكم تبدو مثل تطبيق بنك حقيقي. إذا كنت قد قمت بتنسيق تطبيقك بالفعل، حاول استخدام [استعلامات الوسائط](https://developer.mozilla.org/docs/Web/CSS/Media_Queries) لإنشاء [تصميم متجاوب](https://developer.mozilla.org/docs/Web/Progressive_web_apps/Responsive/responsive_design_building_blocks) يعمل بشكل جيد على كل من أجهزة الكمبيوتر المكتبية والأجهزة المحمولة. إليك مثال لصفحة لوحة التحكم بعد التنسيق:  ## اختبار ما بعد المحاضرة [اختبار ما بعد المحاضرة](https://ff-quizzes.netlify.app/web/quiz/46) ## الواجب [إعادة هيكلة وتعليق الكود الخاص بك](assignment.md) --- **إخلاء المسؤولية**: تم ترجمة هذا المستند باستخدام خدمة الترجمة بالذكاء الاصطناعي [Co-op Translator](https://github.com/Azure/co-op-translator). بينما نسعى لتحقيق الدقة، يرجى العلم أن الترجمات الآلية قد تحتوي على أخطاء أو عدم دقة. يجب اعتبار المستند الأصلي بلغته الأصلية المصدر الرسمي. للحصول على معلومات حاسمة، يُوصى بالترجمة البشرية الاحترافية. نحن غير مسؤولين عن أي سوء فهم أو تفسيرات خاطئة ناتجة عن استخدام هذه الترجمة.