محمد_عاطف

أولا هنا نقوم بتعريف الدالة التي تسمى formatingTimes وهذه الدالة تأخذ معامل واحد وهو ال times . في هذا الجزء نتحقق من المعامل times فلو كان فارغا فسيتم إعادة القيمة "00:00" . فمثلا لو تم تمرير سلسلة فارغة "" فهنا الشرط سيتحقق وسيتم إعادة تلك القيمة. هنا يتم إستخدام الدالة split وتلك الدالة تقوم بفصل السلاسل النصية إلى أجزاء بناء على النص الذي نريد الفصل عنده وتقوم بإعادة مصفوفة بالنص المفصول . فمثلا لو تم تمرير "15:30" فهنا سيتم فصل السلسلة عند ":" وهكذا سيكون لدينا مصفوفة من عنصرين هما : ["15","30"] بعد نستخدم map لنقوم بتحويل النص إلى رقم ونقوم بعد ذلك بوضع كل جزء في متغير . أى سيتم وضع الساعات في المتغير hours والدقائق في المتغير minutes . هنا ننشأ متغير جديد pred وهو يحوي قيمة الوقت سواء كان PM أى مساءا أو AM أى صباحا . حيث نرى لو أن الساعات أكبر من أو تساوي 12 إذا نحن مساءا ونضع PM . هنا نحن نريد أن نحول الساعات من صيغة 24 إلى 12 ولهذا نقوم بأخذ باقي القسمة على 12 حيث الرمز % هو باقي القسمة وهكذا نستطيع تحويل أى رقم أكبر من 12 إلى 1 حتى 12 . فمثلا لو الساعات 14 سيكون الناتج هو 1 وباقي القسمة 2 إذا الساعة ستكون 2 مساء. وأخيرا هنا نعيد الوقت بعد تحويله إلى صيغة 12 ساعة .

يجب الضغط على الثلاث نقاط في أقصي اليسار من الأعلي وإختيار أى من الأيقونات الثلاثة التالية : فإما أن تجعل النافذة تظهر في يمين الشاشة أو في الأسفل أو في يسار الشاشة يمكنك إختيار ما تفضله.

وعليكم السلام ورحمة الله وبركاته. الشعور بالنسيان أمر طبيعي في البداية ولكن بما أنك أنهيت الدورة وما زالت تشعر بالنسيان فهذا إما بسبب أنك لم تطبق على ما تعملته كثيرا حتى تثبت المعلومات أو أنك قد تخطيت بعض الدروس دون فهمها بشكل كامل . ولاحظ أننا لا نعتمد بشكل كامل على الحفظ بل الأكثر على الفهم ولا ينبغي حفظ ال syntax أو شكل الكود لأن هذا الحفظ سيأتي مع التطبيق كثيرا ولكن الأهم هو فهم كل شئ فمثلا لو رأيت كود ما تعرف ما يفعله وكيف تقوم بالتعديل عليه لو فيه أخطاء وهكذا وهذا هو الذي أنت مطالب به . يفضل مراجعة الأساسيات سريعا ولو وجدت درس مثلا قد كنت نسيته أو لم تفهمه أن تقوم بإعادة مشاهدته بتركيز و التطبيق عليه حتى تتأكد من فهمك له بشكل كامل . وتوجد دروس على موسوعة حسوب لأساسيات بايثون يمكنك قرائتها إذ أردت مراجعة بشكل سريع : Python وأيضا يجب عليك فتح المشاريع الذي أنشأتها وأن تنظر إليها حيث سيتم سؤالك في تلك المشاريع أثناء الإختبار لتقيمك والتأكد من أنك قمت بتطبيق المشروع مع المدرب . وسيتم سؤالك أسألة بخصوص ذلك كما في أساسيات Django وغيرها . والإمتحان سيكون أولا عبارة عن محادثة صوتية لمدة 30 دقيقة يطرح المدرب فيها أسئلة متعلقة بالدورة والمسارات التي أتممتها فقط وسيناقشها معك و ما قمت بتنفيذه خلال الدورة لهذا يجب عليك التركيز كليا وعدم إهمال أى شئ والتأكد من فهمك 100% للدروس.

يمكنك تنزيل الأداة في الرابط التالي ومن ثم فتحها . وسيتم إخبارك بالسماح بتثبيت أداة الإزالة : https://outlookdiagnostics.azureedge.net/sarasetup/SetupProd_OffScrub.exe بعد تثبيتها يرجى تحديد البرنامج لإزالته . أو يمكنك إتباع الخطوات التالية بناء على كيفية تثبيتك ل MicrosoftOneNote : https://support.microsoft.com/en-us/office/manually-uninstall-office-4e2904ea-25c8-4544-99ee-17696bb3027b

ما هي الرسالة أو الخطأ التي تظهر لك عند محاولة إلغاء تثبيت MicrosoftOneNote الموضح لك في رسالة الخطأ ؟ يمكنك حذفه من خلال الذهاب إلى "Control Panel" ومن ثم "Uninstall a program" ومن ثم البحث عنه في قائمة البرامج لديك ومن ثم حذفه . إذا ظهر هنا رسالة خطأ يمكنك إرفاقها. وتوجد أداة لحذف تثبيت برامج ال office لديك ولكن أولا لنقم بتجربة الخطوة السابقة وإخباري بالنتيجة.

أولا الدالة fetch تستخدم لإرسال الطلبات API في الخلفية وتقوم بإعادة Promise بالبيانات أو الرد الذي أتى إليك من الخادم. فقديما كان لإرسال الطلبات في المتصفح كان يتم إعادة تحديث الصفحة لإرسال الطلب سواء تم إرسال النموذج أو إحضار البيانات . ولكن من خلال fetch يمكنك إرسال الطلب في الخلفية دون إعادة تحديث الصفحة. مثال : fetch('https://jsonplaceholder.typicode.com/todos/1') .then(response => response.json()) // تحويل الرد إلى JSON .then(data => console.log(data)) // عرض البيانات بعد تحويلها إلى JSON .catch(error => console.error('حدث خطأ:', error)); // معالجة الأخطاء ستجد في المثال السابق أننا إستخدمنا ال fetch لإرسال الطلب API ومن ثم ستعيد إلينا البيانات . وبما أنها Promise كما وضحت لك يمكنك إستخدام then و catch لإستكمال الطلبات و معالجة الأخطاء . لاحظ أنه عند إستقبال الرد على الطلب نقوم بتحويل الرد إلى كائن json وذلك لنستطيع التعامل معه بسهولة في جافاسكريبت ويتم ذلك من خلال الدالة json. ثانيا : الدالة map تستخدم لإنشاء مصفوفة جديدة من خلال تطبيق دالة على كل عنصر في المصفوفة الأصلية فمثلا : const numbers = [1, 2, 3]; const doubled = numbers.map(num => return num * 2); console.log(doubled); //[2, 4, 6] لاحظ هنا نحن لدينا مصفوفة من الأرقام ولكننا نريد ضرب تلك الأرقام في 2 فماذا نفعل ؟ من الممكن أن تستخدم حلقة for وتقوم بإنشاء مصفوفة جديدة بداخلها . ولكن في map تقومهي بكل ذلك حيث تقوم بإستقبال دالة وتقوم بتنفيذ تلك الدالة على كل عنصر من العناصر في المصفوفة ولاحظ أننا في تلك الدالة يجب أن نعيد قيمة وتلك القيمة هي التي نريدها للعنصر الجديد. وستلاحظ كما في المثال السابق بمجرد تمرير دالة تقوم بضرب الرقم في * فستقوم الدالة map بتطبيق تلك الدالة على جميع العناصر وتعيد مصفوفة جديدة بالأرقام الجديدة.

أولا هنا في هذا السطر نحن نقوم بإستيراد المكون Prayer من مجلد components . وفي السطر الثاني نقوم بإستيراد الخطافات : useState: وهذا الخطاف يستخدم لإدارة حالة المكون. حيث يسمح لك بتخزين البيانات التي يمكن أن تتغير بمرور الوقت وتحديث الواجهة تلقائيا عندما تتغير هذه البيانات. useEffect: وهو يستخدم لتنفيذ تأثيرات جانبية في المكونات .و التأثيرات الجانبية هي الأمور التي تتم في الخلفية مثل جلب البيانات من API أو التعامل مع الأحداث المستمعين وغيرها. هنا في هذا الجزء نقوم بتريف المتغيرات التي نستخدمها في البرنامج مع إستخدام الخطاف useState لإدارة الحالة لتلك المتغيرات . والمتغير prayerTimes تقوم فيه بتخزين أوقات الصلاة ككائن والقيمة الأولية له هي كائن فارغ {} قبل إرسال الطلب API و setPrayerTimes دالة تستخدم لتحديث قيمة هذا المتغير prayerTimes. والمتغير dateTime هو لتخزين التاريخ الحالي كسلسلة نصية والقيمة الأولية له هي سلسلة فارغة "" وsetDateTime هي الدالة الخاصة بتحديث قيمة dateTime. والمتغير citi متغير لتخزين اسم المدينة التي تم إختيارها والقيمة الأولية هي Cairo و setCiti هي الدالة الخاصة بتحديث قيمة citi. وهنا أنت تقوم بتعريف المدن التي ستستخدمها لعرضها في القائمة المنسدلة ليختار المستخدم منها المدينة الخاصة لعرض أوقات الصلاة لها حيث تحتوي على : name: وهو الإسم العربي للمدينة والتي تقوم بعرضه للمستخدم. value: وهو الاسم الإنجليزي للمدينة والتي تقوم بإرساله إلى API. وفي هذا الجزء نستخدم الخطاف useEffect وهو المسؤول عن إعادة تحديث المكون عند تغير قيمة المتغير في مصفوفة الترابطات وهنا وضعت [citi] أى إنه ى تغير يحدث في القيمة citi سيتم تنفيذ ما بداخل الخطاف. وبعد ذلك قمت بتعريف الدالة fetchPrayerTime وهي دالة غير متزامنة (asynchronous) والتي تستخدمها لجلب البيانات من API. بعد ذلك تقوم بجلب البيانات من ال API من خلال إرسال طلب بإستخدام fetch وتقوم في الطلب بإرسال المتغير citi والذي إختاره المستخدم لجلب أوقات الصلاة لتلك المدينة وتقوم بوضع الرد في الثابت response. بعد ذلك تقوم بتحويل البيانات في response إلى json ووضعه في الثابت data_Prayar . بعد ذلك هنا تقوم بوضع قيم prayerTimes وتحديث حالتها بأوقات الصلاة التي إستلمناها من ال API وأيضا تحديث حالة dateTime بالتاريخ الميلادي المستلم من ال API. وإخيرا هنا تقوم بإستدعاء الدالة بداخل الخطاف حيث في كل تعديل لقيمة citi يتم إستدعاء هذه الدالة تلقائيا وإحضار البيانات من ال API ووضع النتائج في المتغيرات التي عرفناها في البداية. هنا في تلك الدالة تقوم بإستقبال معامل time و وهو وقت بصيغة 24 ساعة مثل "13:30" وتقوم بتحويله إلى صيغة 12 ساعة مع AM/PM أى صباحا/مساءا مثل "1:30 PM". وفي أول جزء نقوم بالتحقق من time وإذا كان فارغا أى وقت فارغ أو تم تمرير أى قيمة فارغة سيتم إعادة الوقت "00:00". بعد ذلك نقوم بفصل السلسلة النصية بناء على ":" . أى أنه سيتم فصل السلسلة إلى جزئين جزء قبل علامة : وهو الساعات ووضعه في المتغير hours وجزء بعد : وهو الدقائق ويتم وضع في المتغير minutes . بعد ذلك نتحقق من أن الساعات hours أكبر من أو تساوي 12 وبما أنها أكبر من 12 إذا الوقت هو مساءا ولهذا يتم إستخدام "PM" أما إذا لم تكن كذلك فإذا الوقت هو صباحا. بعد ذلك هنا نقوم بتحويل الساعات من صيغة 24 ساعة إلى 12 ساعة مثل 13 ستصبح 1. حيث أن علامة % تعني باقي القسمة أى أن 13%12 تعني أنه لدينا 1 باقي القيمة ويتم تحويلها إلى صيغة 24 . اما إذا كان باقة القسمة 0 فهذا يعني أن الساعه 0 أى 12 صباحا لهذا يتم إستخدام 12. وهنا يتم إعادة السلسلة النصية التي تعبر عن الساعة حيث يتم وضع الساعات والدقائق وبعدها AM أو PM . ولاحظ أننا ننظر إلى الدقائق فلو كانت أقل من 10 نريد وضع 0 قبلها فمثلا لو كانت 3 نريد أن تكون "03" وليس "3" والتي من الممكن أن يتم إعتبارها كأنها 30 وليس 3 في الوقت. وأخيرا نقوم بعرض عناصر ال HTML لدينا . وهنا نقوم بإنشاء القائمة المنسدلة بقيم المدن التي لدينا في المتغير citys حيث نستخدم الدالة map والتي تقوم بالتمرير على عناصر مصفوفة ما وتحويلها إلى شكل أخر وهنا نحن نريد تحويلها إلى عناصر option والتي سيتم إختيار المدينة بناء عليها. ولاحظ أننا في العنصر select إستخدمنا الدالة onChange والتي يتم تنفيذها عند كل تغير في قيمة select أى عند إختيار أى مدينة من القائمة المنسدلة وهكذا عند إختيار أى قيمة يتم تغير قيمة المتغير citi والتي بدورها تقوم بتشغيل الخطاف useEffect والتي تقوم بإرسال طلب API وإستقبال البيانات ووضعها لديك لعرضها في الموقع. وهنا تقوم بعرض المكون Prayer بعد تمرير أوقات الصلاة له وسيتم عرض الصلاة مع الوقت الذي تم إعادته من ال API.

إذا كنت تقصد في دورة الذكاء الإصطناعي فهي مختلفة قليلا عن باقي الدورات. حيث هنا بالفعل في بعض المسارات مثل الأساسيات يتم إعطاء تمارين عند إنتهاء كل درس وإذا لم يوجد تمرين يمكنك دائما أسفل الدرس الذي تريده أن تطلب تمارين وسيتم توفير تمارين لك . ولكن في المسارات الأخرى يتم التطبيق أثناء الشرح معا أى يشرح المدرب أثناء التطبيق على مشروع . وفي نهاية المسار يتم إنشاء مشروع عملي حقيقي أو أن المشروع يكون في مسار كامل منفصل يأتي بعد مسار الشرح الخاص به. في هذا الأمر يمكنك محادثة مركز مساعدة الأكاديمية حيث الأمور المالية وأمور الإشتراكات تتم من خلال مركز المساعدة . ولكن من الممكن أن يتأخر الرد قليلا حيث يوجد حاليا ضغط على مركز المساعدة. بالنسبة لهذا السؤال فالأمر يعتمد على ما تريد تحقيقه أنت . أولا إذا لم يكن لديك خبرة مسبقة عن البرمجة أو مجال التكنولوجيا عموما فالأفضل لك دورة علوم الحاسوب أولا قبل دورة الذكاء الإصطناعي . أما إذا كنت ملما ببعض الأمور فالإجابة التالية مناسبة لك يمكنك النظر إليها : أيضا هذا الأمر يعتمد على ما تريد العمل عليه حيث الدورة تتعامل مع الكثير من المجالات حيث لكل مجال وظيفة معينة لهذا إذا أنهيت المسارات مثلا الخاصة بالذكاء الإصطناعي فيمكنك العمل في هذا المجال أو لو أنهيت مجال تعلم الآلة فيمكنك العمل كمهندس تعلم آلى وهكذا ولكن الأفضل بالطبع الإنتهاء من الدورة بأكلمها وإليك الإجابات التالية لمزيد من التفاصيل : أما بعد الإنتهاء من الدورة والحصول على الشهادة فإن هناك مدرب من الأكاديمية سيقوم بتوفير الدعم لك و مساعدتك حتى تحصل على الوظيفة ويمكنك أيضا محادثة الدعم بهذا الشأن وسيخبرونك بكل شئ عن العمل بشكل مفصل.

نعم الأمر طبيعي للغاية فما زلت أنت في بدايات التعلم ومسارك المهني لهذا ستواجه الكثير من المشاكل. ولكن يجب عليك أن تتعلم من المشاكل التي تظهر لك وأخطائك . حيث يجب أن تعرف ما هو سبب المشكلة وما الحل لها وهكذا إذا واجهتك تلك المشكلة مرة أخرى تستطيع حلها أو تتجنب الوقوع فيها مجددا. وإذا كانت المشاكل في التنسيق والتصميم فإذا هنا المشكلة لديك في الأساسيات حيث يحب أن تكون ملم بشكل كبير بها لتستطيع الوصول لسبب المشكلة وحلها .

الأسطر الذي أخبرك بها هي الأسطر الأصلية للملف . إذا حذفت أو عدلت سطر ستختلف . ما أخبرتك بحذفه هو السطر الخاص بال marign حيث إستخدمنا الخاصية justify-content: center وهكذا سيتم توسيط العنصر ولهذا لا نحتاج إلى أى margin . يرجى إستخدام الملف الذي أرفقته لك مباشرة .

يوجد لديك الكثير من المشاكل في التنسيقات حيث لم تقم بجعل الموقع والتصميم متجاوب. حيث المشكلة في قسم top-section حيث ال city و ال date يأخذان مساحات كبيرة والتي تظهر تلك المشكلة. في ملف src\index.css في قسم section في سطر 16 يجب وضع الخاصية justify-content: center; ويحب حذف سطر 33 وبعد سطر 86 يجب وضع الكود التالي : section .top-section{ flex-wrap: wrap; justify-content: center; text-align: center; } وهذا هو الملف بعد تعديل التنسيقات لك . إذا لاحظت أى تغير في التنسيقات يمكنك تعديلها لتنساب حجم الشاشات لكل عنصر. index.css

لاحظ أنك تريد الحصول على تاريخ اليوم بتنسيق DD-MM-YYYY لتقوم بإرساله في العنوان لديك كما تقوم أنت . ولكن تقوم بوضع التاريخ يدويا . وللحصول على التاريخ بهذا التنسيق يمكنك إستخدام : const today = new Date(); const formattedDate = today.toLocaleDateString('en-US', { year: 'numeric', month: '2-digit', day: '2-digit', }).split('/'); const current_date = `${formattedDate[1]}-${formattedDate[0]}-${formattedDate[2]}` والآن يمكنك إستخدام current_date في العنوان كما تريد هكذا في دالة fetchPrayerTimer : useEffect(() => { const fetchPrayerTimer = async () => { try { const today = new Date(); const formattedDate = today.toLocaleDateString('en-US', { year: 'numeric', month: '2-digit', day: '2-digit', }).split('/'); const current_date = `${formattedDate[1]}-${formattedDate[0]}-${formattedDate[2]}` const response = await fetch(`https://api.aladhan.com/v1/timingsByCity/${current_date}?city=Tr&country=${city}`) const data_Prayar = await response.json() setPrayerTime(data_Prayar.data.timings) setDataTime(data_Prayar.data.date.gregorian.date) console.log(data_Prayar.data.date.gregorian.date) } catch (e) { console.log(e) } } fetchPrayerTimer() }, [city])

نعم بالفعل ما تقوله صحيح وهو ما يتوقعه ويجزم به العديد من الأشخاص الخبراء حاليا. فحاليا لقد وصل الذكاء الإصطناعي إلى تطور رهيب وسريع جدا ويوجد حاليا نماذج تقوم بإنشاء أكواد ومشاريع بسيطة ومتوسطة في وقت بسيط جدا والذي كان سابقا يحتاج إلى الكثير من الوقت والعديد من المبرمجين . ولهذا فإن كتابة الأكواد من الممكن أن تكون من الماضي في غضون الخمس السنوات التالية . حيث من المحتمل بشكل كبير أن يأخذ الذكاء الإصطناعي العديد من الوظائف ولكن بالفعل سيوفر وظائف أخرى. ولهذا حاليا ينبغي على المبرمجين التركيز ليس على كتابة الكود بل بشكل أكبر على الأنظمة وهياكل البيانات والخوارزميات وغيرها والتي تساعد على إنشاء أنظمة قوية وسريعة . وترك مهمة كتابة الكود إلى الذكاء الإصطناعي وتقيم الكود الذي يخرجه . ولهذا مهارة قراءة الكود وفهمه وإكتشاف المشاكل أعتقد هي المهارة التالية التي ينبغى على أى مبرمج أن يتعلمها . ويمكنك قراءة التالي لمزيد من التفاصيل حول هذا الأمر :

عند عدم تجاوز الإختبار فلا توجد أى مشكلة سيقوم المدرب الذي قام بإختبارك بإرشادك إلى مكان القصور والمشاكل التي لديك لتقوم بتحسينها. وبعد ذلك يمكنك التقدم مرة أخرى للإختبار بعد مراجعة ومذاكرة ما تم توضيحه لك لمعالجة المشاكل التي لديك.

يرجى مستقبلا إرفاق مجلد المشورع كاملا وليس مجلد src فقط. وذلك للحصول على ملف package.json الخاص بالحزم والملفات الموجودة في public. المشكلة لديك في مكون Prayer في ملف src\components\index.jsx حيث لاحظ أنك إستقبلت معاملين وهذا خاطئ حيث يتم إستقبال معامل واحد فقط وهو props . أما إذا إردت أن تستخدم object destruction في js فيجب وضع الأقواس المعقوفة {} هكذا : export default function Prayer({ name, time }) { ويجب أن تقوم بتمريرهم للمكون Prayer عند إستدعاءه.

إن أغلب المشاريع والشروحات هنا في الدورة تركز على استخدام أداة Create React App لإنشاء مشاريع React والتي تستخدم react-scripts وليس Vite. أن أداة Vite هي أداة حديثة وسريعة لبناء تطبيقات React وواجهات الويب وتعتبر بديل حديث عن Create React App و react-scripts وهي المسؤولة عن تحزيم الملفات. ولكن لا يوجد إختلاف في إستخدام الأداتين لهذا يمكنك إستخدام vite بما أنها أحدث وأفضل من react-scripts.

أولا height (الارتفاع) : يحدد الارتفاع الثابت للعنصر إذا كان المحتوى أكبر من الارتفاع المحدد فسيخرج باقى المحتوى عن العنصر المثال التالي سيعطي العنصر ارتفاع ثابتًا قدره 200 بكسل : div { height: 200px; } أما min-height (الحد الأدنى للارتفاع) : فمكا يظهر من إسمه أنه يحدد الحد الأدنى للارتفاع الذي يمكن أن يكون عليه العنصر. حيث إذا كان المحتوى أقل من طول min-height سيلتزم طول العنصر بال min-height ولو كان أكبر من min-height سيتوسع العنصر ليتناسب مع المحتوى. إذا هو يضمن أن العنصر لن يكون أبدا أصغر من القيمة المحددة. المثال التالي يعني أن العنصر سيكون على الأقل 200 بكسل، ولكن يمكن أن يكون أطول إذا لزم الأمر : div { min-height: 200px; } إذا فإن height طول ثابت لا يتغير بتغير محتوى العنصر أما min-height مرن حيث الطول لا يقل عن الطول المحدد ولكنه يمكن أن يتوسع ويطول عند الحاجة. ولذلك فإن min-height أكثر مرونة في التصميمات المتجاوبة.

يمثل العنصر <select> عنصر من عناصر النماذج (Forms) حيث يوفر لك قائمة من الخيارات للإختيار منها ويمكنك إختيار خيارات متعددة أو خيار واحد. وإليك شرح مفصل له من خلال موسوعة حسوب : العنصر <select>

في vs code لإضافة مؤشر جديد بالإضافة إلى المؤشر الأساسي يمكنك الضغط على زر ALT مع الضغط بالفأرة على المكان الذي تريد إضافة المؤشر فيه .

هل يمكن توضيح سؤالك ؟ أى أسطر تقصد وكيف في نفس الوقت ؟

لاحظ أنك أخطأت ووضعت ال id في المكان الخاطئ حيث يجب وضعه في العنصر img بداخل <div class="img"> وليس الصور الأخرى . هذا هو كود HTML الصحيح كاملا : <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <link rel="stylesheet" href="index.css"> <title>ِApple</title> </head> <body> <div class="container"> <header> <a href="#"><img src="logo.png" class="logo" alt=""></a> <ul> <li><a href="#">Home</a></li> <li><a href="#">Project</a></li> <li><a href="#">News</a></li> <li><a href="#">About</a></li> <li><a href="#">Contact</a></li> </ul> </header> <div class="content"> <div class="text"> <h2>iPhone 13 pro max</h2> <p>Lorem ipsum dolor sit amet consectetur adipisicing elit.</p> <a href="">All Products</a> </div> <div class="img"> <img id="img-preview" src="0.png"> </div> </div> <div class="icons"> <img onclick="phones(this.src); colors('#000')" src="0.png"> <img onclick="phones(this.src); colors('#000')" src="1.png"> <img onclick="phones(this.src); colors('#247ec8')" src="2.png"> <img onclick="phones(this.src); colors('#1e1e1e')" src="3.png"> <img onclick="phones(this.src); colors('green')" src="4.png"> </div> </div> <script src="index.js"></script> </body> </html>

لاحظ أنك تقوم بوضع ال src الخاص بالصورة الخاطئة حيث يجب وضعها في مكان الصورة التي تظهر في المتصفح . لهذا في السطر السابق يجب وضع id لهذا العنصر لتسهيل الوصول إليه هكذا : <img id="img-preview" src="0.png"> والآن في js لنقم بتعديل الكود ليصبح كالتالي : let images = document.querySelector('.icons') let container = document.querySelector('.container') let image = document.getElementById('img-preview') function phones(phone){ image.src = phone; } function colors(color){ container.style.background = color; } والآن عند الضغط عليه سيظهر في المتصفح لديك.

إذا كنت تقصد التطبيق بنفسك بعد إنتهاء الدرس فهذا الأمر جيد للتدريب أكثر وللتأكد من معرفة مدى فهمك للدرس .ولكن هذا الأمر ليس ضروريا إذا كان التمرين بسيط أو بالفعل قد فهمت الدرس تماما . ولكن في التمارين العملية الكبيرة يفضل بعد الإنتهاء من التطبيق مع المدرب أن تقوم بإنشاء التطبيق بنفسك لقياس مدى فهمك وإستيعابك وأيضا لقدرتك على التطبيق بمفردك في مشروع حقيقي. وإليك النصائح التالية لطرق مذاكرة الدورة :

أولا ينبغي عليك معرفة أنه ليس بمجرد إنهاء مشروع واحد أو أكثر أنك قد ألممت بكل شئ في إطار العمل سواء React أو غيره وأيضا يجب عليك الإنتباه إلى أنك ستظل دائما تذاكر وتبحث وتطور نفسك حيث المكتبات واللغات ما تتطور بشكل دائم وسريع ولا يتوقفان أبدا لهذا ينبغي عليك أن تكون مطلع دائما. ثانيا إن مشروع تطبيق ملاحظات ما هو إلا تطبيق عملي على أساسيات React إذا ما تم إنهاءه ما هي إلا الأساسيات أو البدايات ففقط في React ولكن يوجد الكثير جدا من الخصائص الأخرى التي لم يتم التطرق إليها هنا . والتي سيتم الحديث عنها وشرحها في المسارات التالية وأهمها هو إدارة الحالات (States) وغيرها من الأمور المتقدمة . حيث يتم التدرج والشرح بشكل تدريجي لمراعاة مستويات الطلاب . لهذا بإنتهاء هذا المشروع لا يمكنك القول بأنك أنهيت React بشكل كامل . لهذا أنصحك حاليا أن تتأكد أولا من فهم الأساسيات التي تم شرحها بشكل كامل وعدم تخطي أى جزء دون فهمه . وبعد إنهاء مشروع تطبيق ملاحظات مع المدرب أن تقوم بإنشاء المشروع بنفسك دون مساعدة وأنظر هل إستطعت تطبيق كل شئ بنفسك أم لا . فإذا وجدت ذلك فهذا يعني أنك تمكنت وفهمت جميع الأساسيات وبهذا يمكنك إكمال المسارات التالية دون أى مشاكل في التقدم في المستويات التي تليها . أما إذا وجدت مشاكل أثناء تطبيق المشروع بنفسك فيجب عليك حينها الرجوع إلى الدرس الذي توجد به مشكلتك والتأكد من مراجعته بشكل كامل.

أولا splice() تستخدم لتعديل المصفوفة الأصلية بحذف أو إضافة عناصر. وهي تؤثر بشكل مباشر على المصفوفة الأصلية وتعيد لك مصفوفة تحتوي على العناصر التي تم حذفها من المصفوفة الأصلية . وهذه هي طريقة إستخدامها : array.splice(startIndex, deleteCount, item1, item2, ...) مثال : let arr = [1, 2, 3, 4, 5]; let removed = arr.splice(1, 2); // من index 1، حذف عنصرين console.log(arr); // [1, 4, 5] console.log(removed); // [2, 3] وإليك الشرح التالي من موسوعة حسوب . أما filter() تستخدم لإنشاء مصفوفة جديدة تحتوي فقط على العناصر التي تحقق شرط معين.ولا يؤثر على المصفوفة الأصلية كما في splice وتعيد مصفوفة جديدة بالعناصر المحققة للشرط . مثال : let arr = [1, 2, 3, 4, 5]; let filtered = arr.filter(num => num > 2); console.log(arr); // [1, 2, 3, 4, 5] console.log(filtered); // [3, 4, 5] وإليك الشرح التالي من موسوعة حسوب .