Hikmat Jaafer

الكود الذي قمت بتقديمه لتشغيل الصوت والفيديو في صفحة HTML يعمل بشكل صحيح ويقوم بالمهمة بشكل أساسي. ولكن هناك بعض الإضافات التي يمكنك النظر فيها لتحسين تجربة المستخدم وتعزيز الوظائف. هنا بعض الاقتراحات: إضافة أزرار تشغيل/إيقاف مخصصة: يمكنك إضافة أزرار تشغيل وإيقاف خاصة بك بدلاً من الاعتماد على واجهة التحكم الافتراضية. يمكنك استخدام صورة أو رمز للأزرار وربطها بوظائف تشغيل/إيقاف الصوت والفيديو. إضافة الخيارات الإضافية للتحكم: يمكنك تحسين واجهة التحكم بإضافة خيارات إضافية مثل التقديم للأمام والترجيع وتعديل مستوى الصوت. يمكنك استخدام مكتبات JavaScript مثل "plyr" أو "video.js" لتوفير واجهة تحكم متقدمة ومخصصة. تحسين توافق المتصفح: قد يكون هناك اختلافات في توافق تشغيل الصوت والفيديو بين المتصفحات المختلفة. يمكنك استخدام مكتبات مثل "Modernizr" للاحتياط والتحقق من دعم المتصفح لتنسيقات الصوت والفيديو المحددة قبل عرض العناصر. تحسين تجربة الجوال: قم بتحسين تجربة المستخدم على الأجهزة المحمولة من خلال ضبط حجم الفيديو والتحكم في التنقل وزيادة الاستجابة للمس. إضافة رسائل الخطأ: يمكنك إضافة رسائل الخطأ المناسبة للمستخدم عندما لا يتمكن المتصفح من تحميل أو تشغيل الصوت أو الفيديو. يمكنك استخدام عنصر <p> لعرض رسالة الخطأ وتنسيقها بشكل مناسب. التحكم في التشغيل التلقائي: قد يكون من الضروري تعطيل تشغيل الصوت أو الفيديو تلقائيًا عند تحميل الصفحة، وذلك لتوفير تجربة مريحة للمستخدم وتقليل تحميل البيانات. التوافق مع متطلبات الإمكانيات الخاصة: قد يكون هناك حاجة للتوافق مع متطلبات الإمكانيات الخاصة، مثل التوجيه الصوتي أو المساعدات القرائية. تأكد من توفير تجربة يسهل الوصول إليها لجميع المستخدمين. هذه بعض الإضافات التي يمكنك النظر فيها لتحسينالكود الذي قدمته لتشغيل الصوت والفيديو في صفحة HTML جيد بشكل عام. ومع ذلك، هناك بعض الإضافات والتحسينات التي يمكنك النظر فيها لتحسين تجربة المستخدم وتعزيز الوظائف. هنا بعض الاقتراحات: تحسين توافق المتصفح: قد يكون هناك اختلافات في توافق تشغيل الصوت والفيديو بين المتصفحات المختلفة. يمكنك استخدام مكتبات مثل "plyr" أو "video.js" لتحسين تجربة التشغيل عبر المتصفحات المختلفة. استخدام تنسيقات فيديو متعددة: قد تواجه بعض المتصفحات صعوبة في تشغيل بعض تنسيقات الفيديو. يمكنك زيادة التوافقية عن طريق توفير ملفات الفيديو بتنسيقات متعددة، مثل MP4 وWebM وOgg، وذلك باستخدام عناصر <source> متعددة داخل عنصر <video>. إضافة صورة مصغرة للفيديو: يمكنك إضافة صورة مصغرة للفيديو باستخدام الخاصية poster في عنصر <video>، والتي ستعرض قبل تشغيل الفيديو. هذا يوفر تجربة أفضل للمستخدمين ويساعد على جذب انتباههم للفيديو. التحكم في التشغيل التلقائي: قد يكون من الضروري تعطيل تشغيل الصوت أو الفيديو تلقائيًا عند تحميل الصفحة، وذلك لتوفير تجربة مريحة للمستخدم وتقليل تحميل البيانات. إضافة العنوان والوصف: قم بإضافة عنوان ووصف للصوت والفيديو باستخدام العناص

عندما تظهر رسالة "Compare & pull request" على صفحة مستودع الريبوزيتوري الخاص بك، فهذا يعني أن هناك تغييرات جديدة تم رفعها إلى الفرع الرئيسي (master) من قبلك أو من أحد الأعضاء الآخرين في الفريق. لتفعيل هذه التعديلات ودمجها في الفرع الرئيسي، يمكنك اتباع الخطوات التالية: قم بالنقر على الزر "Compare & pull request" على صفحة المستودع الخاص بك. ستتم توجيهك إلى صفحة جديدة لإنشاء طلب سحب (Pull Request)، والتي تعرض التغييرات التي تم رفعها إلى الفرع الرئيسي. قم بمراجعة التغييرات والتأكد من أنها تعكس التعديلات التي قمت بها وأنها صحيحة. إذا كنت راضيًا عن التغييرات وترغب في دمجها في الفرع الرئيسي، قم بالنقر على الزر "Create pull request" أو "Open pull request" (قد تختلف التسمية اعتمادًا على واجهة المستخدم المستخدمة). في صفحة طلب السحب، يمكنك إضافة تعليقات إضافية أو ملاحظات حول التغييرات التي تم رفعها. بعد تأكيد المراجعة والتعليقات، قم بالنقر على زر "Merge pull request" لدمج التغييرات في الفرع الرئيسي. بعد الدمج، ستصبح التغييرات متاحة ومدمجة في الفرع الرئيسي (master). يمكنك الآن استكمال العمل على المشروع وتحديث أي تغييرات أخرى ورفعها إلى الريبوزيتوري عند الحاجة. يرجى ملاحظة أنه قد يكون لديك اختلافات في واجهة المستخدم بناءً على خيارات الريبوزيتوري التي تم استخدامها. ومع ذلك، يجب أن تكون الخطوات العامة المذكورة أعلاه مشابهة وتساعدك في تفعيل التعديلات ودمجها في الفرع الرئيسي.

يبدو أن الخطأ الذي تواجهه أثناء عملية النشر في Digital Ocean يتعلق بقالب الموقع الخاص بك. تشير رسالة الخطأ إلى عدم وجود ملف القالب المناسب للصفحة الرئيسية والمشكلة محددة في السطر 5 والعمود 7 من ملف index.html. الخطأ الذي يظهر هو لحل هذه المشكلة، يُنصح بالتحقق من وجود الملفات اللازمة للقوالب في مشروعك. تأكد من وجود ملفات القوالب الضرورية للصفحة الرئيسية والأقسام والتصنيفات في المسارات الصحيحة داخل مشروعك. قد يتطلب الأمر إنشاء ملفات قوالب جديدة أو تعديل الملفات الحالية لتلبية متطلبات المشروع الخاص بك. قد تحتاج أيضًا إلى التحقق من إصدار Hugo المستخدم في Digital Ocean. يتم استخدام إصدار Hugo 0.118.2 بشكل افتراضي ويمكنك تعيين إصدار مختلف باستخدام متغير البيئة "HUGO_VERSION". تحقق من توافق إصدار Hugo الذي تستخدمه في مشروعك مع الإصدار المستخدم في Digital Ocean. أخيرًا، يُنصح بالاطلاع على الوثائق والمقالات التي يوفرها Digital Ocean حول استخدام Hugo في منصتهم. يمكنك زيارة الرابط التالي للحصول على مزيد من المعلومات والتوجيه: https://do.co/apps-buildpack-hugo. من المهم أن تتحقق من جميع هذه العوامل وتقوم بإصلاح أي مشكلة محتملة في قوالب مشروعك أو إصدار Hugo لحل مشكلة النشر في Digital Ocean.

الله يسلمك , أفضل تمنياتي لك . -- بالنسبة للسؤال : لتحقيق ذلك، يمكنك إضافة شرط داخل حدث النقر (click) على عناصر الإدخال (input) للبحث. هذا الشرط يتحقق إذا كان القائمة غير مرئية (غير مضافة لها الصنف "active")، في هذه الحالة، لا تقم بإزالة الصنف "active" من القائمة. هنا هو الكود المعدل: // show menue const inputs = document.querySelectorAll(".input"); const menus = document.querySelectorAll(".menu"); inputs.forEach((input, index) => { input.addEventListener("click", function() { if (!menus[index].classList.contains("active")) { menus[index].classList.add("active"); } }); }); // hide menue inputs.forEach((input, index) => { input.addEventListener("focusout", function() { menus[index].classList.remove("active"); }); }); بهذا التعديل، عند النقر على عنصر الإدخال الموجود داخل القائمة، لن يتم إزالة صنف "active" من القائمة عند حدوث حدث focusout.

وعليكم السلام. وجود تأخير أو تعليق في التمرير (scroll) قد يكون ناتجًا عن عدة عوامل. هذه جميع الاسباب المحتملة التي قد تساعد في تحسين أداء التمرير في صفحتك ( متضمنة اجوبة الاستاذ عمر و الاستاذ مصطفى ليكون جواب شامل ) : تحسين الأداء العام للصفحة: التأكد من أن الصفحة بشكل عام مُحسّنة جيدًا. قد تحتاج إلى تحسين أداء العناصر الكبيرة أو العمليات الثقيلة الأخرى في الصفحة. تقليل العناصر المتحركة والتأثيرات الزائدة: العناصر المتحركة والتأثيرات الزائدة قد تؤدي إلى تأخير في التمرير. يمكنك محاولة تقليل استخدام التأثيرات الزائدة أو تحسينها لتحقيق أداء أفضل. تحميل المحتوى بشكل تدريجي: إذا كان لديك محتوى كبير مثل الصور أو الفيديوهات، يمكنك استخدام تقنيات تحميل المحتوى بشكل تدريجي (lazy loading) بحيث يتم تحميل المحتوى فقط عندما يكون مرئيًا في مجال العرض. استخدام التمرير الناعم: بعض المكتبات والإضافات توفر خيارات لتمكين التمرير الناعم (smooth scrolling) الذي يعطي تجربة تمرير أكثر سلاسة. يمكنك استخدام مكتبات مثل react-scroll إذا كنت تستخدم React، أو استخدام خاصية scroll-behavior في CSS. تجنب العمليات الثقيلة أثناء التمرير: قد يؤدي تنفيذ عمليات ثقيلة مثل الطلبات الشبكية (network requests) أو العمليات الحسابية المعقدة أثناء التمرير إلى تأخير في الاستجابة. حاول تجنب العمليات الثقيلة أو تنفيذها بعد انتهاء التمرير. مراجعة الأكواد والتحسينات: قم بمراجعة الأكواد الخاصة بك وتحليل المناطق التي تسبب تأخيرًا في التمرير. قد تحتاج إلى تحسين الأكواد أو إجراء تحسينات على العمليات المكلفة. يجب أن تأخذ في الاعتبار أن الأسباب المحتملة للتأخير في التمرير يمكن أن تكون متعددة وتعتمد على تفاصيل مشروعك الخاص. قد تحتاج إلى تحليل وفحص الصفحة الخاصة بك بشكل أكثر تفصيلاً لتحديد الأسباب الدقيقة للتأخير وتطبيق التحسينات المناسبة.من الممكن أن يكون لديك بعض العمليات الثقيلة أو العمليات التي تتطلب وقتًا طويلاً في كل صفحة، مما يؤدي إلى تأخير في التمرير. قد يكون هناك أسباب أخرى محتملة للتأخير في التمرير، مثل: حجم البيانات: إذا كان لديك كمية كبيرة من البيانات التي يجب تحميلها في كل صفحة، فقد يستغرق ذلك وقتًا طويلاً ويؤدي إلى تأخير في التمرير. في هذه الحالة، يمكنك استخدام تقنيات تحميل البيانات بشكل تدريجي أو تجزئتها لتحسين أداء التمرير. العمليات الحسابية المعقدة: إذا كان لديك العديد من العمليات الحسابية المعقدة التي تتم في كل تحديث للصفحة، فقد يستغرق ذلك وقتًا طويلاً ويؤثر على أداء التمرير. في هذه الحالة، يمكنك مراجعة العمليات ومحاولة تحسينها أو تحسين أداء الخوارزميات الخاصة بك. القواميس الكبيرة أو البيانات المخزنة: إذا كان لديك قواميس كبيرة أو بيانات مخزنة تحتفظ بها في الذاكرة أو في الحالة الخاصة بالتطبيق، فقد يستغرق تحميلها أو الوصول إليها وقتًا طويلاً ويسبب تأخيرًا في التمرير. في هذه الحالة، يمكنك مراجعة كيفية إدارة البيانات وتحسين الوصول إليها. الأداء العام للجهاز: قد يكون أداء الجهاز الذي تستخدمه هو السبب في التأخير في التمرير. إذا كان لديك جهاز قديم أو مواصفات ضعيفة، فقد يكون من الصعب على الجهاز تشغيل التطبيق بسلاسة. في هذه الحالة، يمكنك مراجعة متطلبات التشغيل الخاصة بتطبيقك وتحسين الأداء لتوفير تجربة أفضل على مجموعة متنوعة من الأجهزة. للتأكد من السبب الدقيق للتأخير، يمكنك استخدام أدوات مراقبة الأداء وتحليل الأداء مثل Flutter Performance أو Android Profiler لتحليل أداء التطبيق وتحديد العمليات أو العناصر التي تسبب تأخيرًا في التمرير. بالتالي، يمكنك اتخاذ إجراءات لتحسين الأداء بناءً على النتائج المستخرجة من

إذا كنت تستخدم Webpack وترغب في استخدام jQuery في مشروعك، يجب التأكد من تضمين jQuery في ملف الـ JavaScript الخاص بك وتكوين Webpack بشكل صحيح لدمج jQuery في حزمة الإخراج. لتثبيت jQuery باستخدام npm، يمكنك استخدام الأمر التالي في مجلد المشروع الخاص بك: npm install jquery ثم يمكنك استيراد jQuery في ملف الـ JavaScript الخاص بك بواسطة السطر التالي: import $ from 'jquery'; أو يمكنك استخدام الاستيراد التقليدي: const $ = require('jquery'); بالنسبة للخطأ الذي تحدث بسبب removeClass، يمكن أن يكون السبب هو عدم تحميل jQuery بشكل صحيح أو عدم وجود العنصر الذي يحمل #navBar في صفحتك. تأكد من تضمين jQuery والتأكد من أن العنصر #navBar موجود في صفحتك بشكل صحيح وبنفس الهيكل كما هو موجود في الكود الذي قدمته.

وجزاك الله الخير سيد احمد . يمكنك فعل ذلك بوضع حدث click لnewInput قبل إضافته الى الinputs , أي سوف يكون ملف javascript كالتالي : const inputs = document.querySelectorAll(".input"); const menus = document.querySelectorAll(".menu"); inputs.forEach((input, index) => { input.addEventListener("click", function() { menus[index].classList.toggle("active"); }); }); const addRowButton = document.querySelector("#add-row"); addRowButton.addEventListener("click", function() { const newRow = document.createElement("tr"); const newCell = document.createElement("td"); const newDropdown = document.createElement("div"); const newSearchInput = document.createElement("div"); const newInput = document.createElement("input"); const newMenu = document.createElement("div"); newDropdown.className = "dropdown"; newSearchInput.className = "search_input"; newInput.className = "input"; newInput.type = "text"; newInput.placeholder = "search"; newMenu.className = "menu"; newMenu.innerHTML = ` <p>html</p> <p>CSS</p> <p>js</p> `; newDropdown.appendChild(newSearchInput); newSearchInput.appendChild(newInput); newDropdown.appendChild(newMenu); newCell.appendChild(newDropdown); newRow.appendChild(newCell); newInput.addEventListener("click", function() { newMenu.classList.toggle("active"); }); const tbody = document.querySelector("tbody"); tbody.appendChild(newRow); inputs.push(newInput); menus.push(newMenu); });

كلا Context API و Redux هما أدوات لإدارة حالة التطبيق (state management) في تطبيقات React. ولكنهما يختلفان في العديد من الجوانب. تعقيد الاستخدام: Context API: هي ميزة مدمجة في React ويمكن استخدامها بدون تثبيت حزمة إضافية. يتضمن استخدامها إنشاء مزود (Provider) ومستهلك (Consumer) للحصول على البيانات وتحديثها . Redux: يتطلب تثبيت حزمة Redux وإعداد مجموعة من المفاهيم والكائنات مثل المتجر (store) والأعمال (actions) والمخزن (reducers) والموصل (connect). هذا يعني أنه يمكن أن يكون أكثر تعقيدًا في البداية. توزيع الحالة: Context API: يوفر حاويات (containers) متعددة للحالة ويمكن استخدامها لتحديد الجزء المحدد من التطبيق الذي يحتاج إلى الوصول إلى الحالة. يمكن توزيع الحالة بشكل أفضل على مستوى المكونات العمودية (vertical components). Redux: يتم توزيع الحالة في متجر واحد مركزي (centralized store) يمكن الوصول إليه من أي مكان في التطبيق. يعني ذلك أنه يمكن استخدام الحالة بسهولة في مكونات مختلفة وفي أماكن متعددة دون الحاجة إلى تمريرها بشكل صريح. أداء: Context API: في الإصدارات القديمة من React (قبل 16.3)، كانت Context API تعاني من أداء أسوأ بالمقارنة مع Redux. ومع ذلك، في الإصدارات الحديثة، تم تحسين أداء Context API بشكل كبير، ولا يوجد فرق كبير في الأداء بينها وبين Redux. Redux: Redux يعتبر أداءه ممتازًا، حيث يستخدم خوارزميات فعالة لتحديث الحالة وتنبيه المكونات المشتركة بالتغييرات. يتمتع بأداء جيد حتى عند التعامل مع حالات كبيرة وتعقيد عالي. إدارة الحالة المتقدمة: Context API: توفر Context API بعض الميزات المتقدمة مثل استخدام السمات (hooks) واستخدام عناصر JSX كمستهلكين. يمكن تخصيصها بسهولة لتلبية احتياجات التطبيق الخاصة. Redux: Redux يوفر أدوات متقدمة لإدارة الحالة مثل وجود الوقت المسبق والتأريخ (time travel)، والقابلية للتوصيل بأدوات التصحيح (debugging tools) مثل Redux DevTools. في النهاية،يمكن استخدام كل من Context API و Redux لإدارة حالة التطبيق في React، والاختيار بينهما يعتمد على عدة عوامل مثل تعقيد التطبيق، حجم الحالة، ومتطلبات التوزيع والأداء. إذا كانت تطبيقاتك بسيطة وغير معقدة، فقد يكون استخدام Context API أمراً مناسباً. وإذا كانت تطبيقاتك أكثر تعقيدًا وتحتاج إلى إدارة حالة مركزية وأدوات متقدمة، فقد يكون Redux خيارًا أفضل. في بعض المشاريع الكبيرة , يتم استخدام كلا من Redux و Context API ضمن المشروع . حيث تبقى Redux للحالات العامة والتي نصل إليها من عدة components ونقوم بالتحكم فيها . ويكون Context API خاص بكل feature ضمن المشروع والتي لا تحتاج مشاركة بياناتها مع عدد كبير من الcomponents .

أهلاً مصطفى , هل يمكنك تزويدنا بالكود لنتمكن من مساعدتك .

يمكنك تجهيزه الواجهات الامامية في الوقت الحالي , ولاحقة تقوم بربطها مع backend لاحقاً . يمكنك إتباع الخطوات التالية لتنفيذ برمجة الواجهات الامامية لمشروعك , وتجهيزه لربطه مع الbackend في خطوات لاحقة : أولاً يجب عليك معرفة ما سوف تحتاجه من backend كمبرمج واجهات أمامية , فمثلاً لنفترض أنه لدينا جدول يعرض غيابات الطلاب وله تصميم محدد ( اسم الطالب , ايميل الطالب , رقم الطالب ....) , في هذه الحالة سوف تحتاج الى بيانات الطلاب من قاعدة البيانات ( من api backend ) هنا يمكنك أن تنشئ في الواجهات الامامية function تقوم بإعادة seed data ( بيانات تجريبية عن الطلاب ) , التي سوف تستخدمها لاحقاً لتقوم بجلب البيانات من قاعدة البيانات بدلاً من إرجاع مصفوفة من معلومات الطلاب . بهذه الطريقة تكون حصلت على بيانات الطلاب تجريبية كأنه ترجع من الbackend . هنا يمكنك أن تكمل برمجة الواجهات الأمامية لتصميم الجدول و الحصول على النتيجة المطلوبة . ويمكنك تطبيق ذلك في جميع الصفحات . أخيرأ , عندما تنتهي من دورة برمجة backend , سوف تعلم جيداً كيف تقوم بإصدار هذه البيانات كapi , وبالتالي يمكنك أستقبال هذه البيانات في الواجهات الأمامية.

حضور الدورات يعطيك مبادئ اللغة وكافة ما تحتاجه تعلمه من لغة البرمجة , وهذا ما يضعك على بداية الطريق . لكن ما يجعلك متمكن منها هو إنشاء مشاريع حقيقية على أرض الواقع . بالنسبة لمسار Frontend يمكنك إتباع الخطوات التالية : تعلم HTML و CSS تعلم JS تعلم React js بالإضافة لتعلم مكتبة تصميم ( bootstrap 5 أو material ui ) قم ببناء مشاريع صغيرة مثل : صفحات تعريفية لشركات أو Notes , ومن ثم مشاريع أكثر تعقيد مثل مشاريع e-commerce . بناء مشروع حقيقي . يمكنك تصفح موقع مستقل وتقديم عرض لمشروع frontend . كما يجب عليك تعلم مكاتب مهمة مثل Axios و React Query أثناء بناء المشاريع التدريبية في حال تعاملت مع API . في مرحلة متقدمة أكثر , سوف تحتاج إلى تعلم state management مثل Redux و Redux toolkit .

* أحد أهم النقاط التي تساعد المبرمجين في أي اختصاص هي فهم كيف البرمجة تعمل . فهي بالحقيقة محاكاة لطريقة تفكير الانسان. فإن ما نفعله في البرمجة , هو محاكاة لدماغ الانسان , أو بكلمة أخرة , لطريقة تفكير الانسان في حل مشاكله. فإذا دققت في طريقة تفكيرك لحل مشكلة وحاولت فهم نفسك كيف تفكر , ومن ثم حولت هذا التفكير لخوارزمية برمجية , فسوف تتمكن من حل المشكلة . * مثال بسيط عما أقصده : لشخص مبتدأ في البرمجة ( يعلم مفاهيم الاساسية للبرمجة من شروط وحلقات تكرار ) . تخيل أن لدينا الارقام التالية وطلب من هذا الشخص فرزها ( كتفكير أو كتابة وليس كود أو برمجة ) : ستجد أن ذلك لن يأخد منه إلا بضع ثواني لترتيبها . حسناً , إذا طلبنا من هذا الشخص كتابة خوارزمية الفرز لهذه العناصر , فستجد أنه سوف يكون من الصعب عليه في البداية معرفة خوارزمية فرز هذه العناصر ككود أو كتابة خوارزمية الكود على الرغم من أنه يعلم جميع التعليمات التي سوف يستخدمها من شروط وحلقات تكرار وتعريف متغيرات . لكن إن دقق هذا الشخص في طريقة تفكيره , فسوف يجد أنه يأخد أصغر عدد من العناصر ويضعه في البداية , وثم الأصغر ومن ثم الأصغر . فإذا حول هذا التفكير إلى خوارزمية ,ستكون كالتالي : يقوم بالتحقق من العناصر أيها أصغر . يأخذ أصغر عدد ويضيفه الى سطر النتيجة ( المصفوفة الجديدة ). يكرر هذه العملية حتى يحصل على جميع الارقام . وبالتالي , ستجد أنه يكتب خوارزمية الفرز selection sort الشهيرة . فإن حل أي مشكلة في الحقيقة يكون هو محاكاة لطريقة تفكير الانسان , يمكنك تجريب ذلك في عدة أمثلة أخرى .

مرحباً , هل يمكنك إرفاق ملفات الكود لمساعدتك في حل المشكلة ؟

يمكنك فعل ذلك مثل ما قال استاذ سمير , لكن يجب عليك اضافة ذلك عند اضافة سطر جديد , الكود التالي يوضح ذلك : ملف HTML : <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <link rel="stylesheet" href="style.css"> <style> .dropdown { width: 180px; position: relative; margin: 5px; } .menu { position: absolute; width: 100%; display: none; border: blue; background-color: lightgray; z-index: 1; } .active { display: block; } </style> </head> <body> <table> <thead></thead> <tbody> <tr> <td> <div class="dropdown"> <div class="search_input"> <input class="input" type="text" placeholder="search"> </div> <div class="menu"> <p>html</p> <p>CSS</p> <p>js</p> </div> </div> </td> </tr> <tr> <td> <div class="dropdown"> <div class="search_input"> <input class="input" type="text" placeholder="search"> </div> <div class="menu"> <p>html</p> <p>CSS</p> <p>js</p> </div> </div> </td> </tr> </tbody> <tfoot></tfoot> </table> <button id="add-row">add new row</button> <script src="main.js"></script> </body> </html> ملف main.js : // main.js const inputs = document.querySelectorAll(".input"); const menus = document.querySelectorAll(".menu"); inputs.forEach((input, index) => { input.addEventListener("click", function() { menus[index].classList.toggle("active"); }); }); const addRowButton = document.querySelector("#add-row"); addRowButton.addEventListener("click", function() { const newRow = document.createElement("tr"); const newCell = document.createElement("td"); const newDropdown = document.createElement("div"); const newSearchInput = document.createElement("div"); const newInput = document.createElement("input"); const newMenu = document.createElement("div"); newDropdown.className = "dropdown"; newSearchInput.className = "search_input"; newInput.className = "input"; newInput.type = "text"; newInput.placeholder = "search"; newMenu.className = "menu"; newMenu.innerHTML = ` <p>html</p> <p>CSS</p> <p>js</p> `; newDropdown.appendChild(newSearchInput); newSearchInput.appendChild(newInput); newDropdown.appendChild(newMenu); newCell.appendChild(newDropdown); newRow.appendChild(newCell); const tbody = document.querySelector("tbody"); tbody.appendChild(newRow); inputs.push(newInput); menus.push(newMenu); newInput.addEventListener("click", function() { newMenu.classList.toggle("active"); }); }); تمت إضافة زر "add new row" لإضافة صف جديد إلى الجدول، وعند النقر على الزر، سيتم إنشاء عناصر HTML جديدة وإضافتها إلى الجدول، مع تعيين استماع الحدث على المدخل الجديد المنشئ لتبديل الفئة النشطة على القائمة الجديدة.

لتمرير القائمة المحدثة للغرف من مكون AddRoom إلى مكون ListRoom، يمكنك استخدام React Navigation للانتقال إلى شاشة ListRoom وتمرير القائمة المحدثة كمعلمة. فيما يلي نسخة محدثة من التعليمات البرمجية الخاصة بك تتضمن التغييرات الضرورية: في AddRoom Component : 1. قم باستيراد useNavigation من React Navigation. import { useNavigation } from '@react-navigation/native'; 2. قم بتحديث السطر الذي تنتقل فيه إلى شاشة ListRoom لتمرير القائمة المحدثة كمعلمة. const navigation = useNavigation(); // ... navigation.navigate('ListRoom', { updatedList: updateList }); في ListRoom Component : 1. قم بالوصول إلى القائمة المحدثة من معلمات التنقل. import { useRoute } from '@react-navigation/native'; // ... const route = useRoute(); const { updatedList } = route.params; 2. استخدم القائمة المحدثة في المكون الخاص بك لعرض الغرف المحدثة. <View style={styles.container}> {updatedList.map(room => ( <TouchableOpacity key={room.id}> <List text={room.NameOfroom} date={room.date} number={room.Numberofroom} /> </TouchableOpacity> ))} </View> مع هذه التغييرات، سيتلقى مكون ListRoom القائمة المحدثة للغرف من مكون AddRoom ويعرضها وفقًا لذلك. ملاحظة: تأكد من إعداد React Navigation بشكل صحيح في مشروعك حتى يعمل هذا الحل.