اذهب إلى المحتوى

عمر قره محمد

الأعضاء
  • المساهمات

    4118
  • تاريخ الانضمام

  • تاريخ آخر زيارة

  • عدد الأيام التي تصدر بها

    40

كل منشورات العضو عمر قره محمد

  1. تضع في كل route الـ try catch وتضع بداخلها الكود الخاص بك وفي حال وجود خطأ ما ترسل رسالة الخطأ كما في المثال :: app.get('/', async (req, res) => { try { // تضع الكود الخاص بك هنا مثل const data = db.find(); // إذا كان عندك فلتر وتريد إرسال رسالة خطأ في حال عدم تحققه if("شرط ما") return res.status(400) .json({message : "bad request code ,There is missing information or the information is wrong"}) // في حال تم تنفيذ الكود بنجاح تعيد رسالة النجاح return res.status(200).json({message : "successs"} , data) } catch (error) { // في حال حدوث خطأ تطبع الخطأ console.error("error : / : get\n" , error); // وتقوم بإرسال استجابة بأن خطأ ما قد وقع return res.status(500).json({message : "internal server error"} , error) } })
  2. هل الكود لا يعمل لديك ؟ في حال كان يعمل ولكن لا يظهر لديك ان الوظيفة موجودة فقد تكون المشكلة في vs code ويمكن حلها بإعادة تشغيله. إما إذا لم يكن يعمل فقد تكون المشكلة في عملية التنزيل، ويفضل ان تقوم بمشاركة ملفات المشروع حتى نستطيع الاطلاع على المشكلة.
  3. الـ debugging in VSCode ليست مبنية لعرض الواجة بالشكل الذي تحاول استخدامها فيه، فهي عبارة عن اداة مساعدة لمعرفة مكان وجود خطأ ما في الكود، ويمكنك المعرفة اكثر عنها في هذا الفيديو أما لتنفيذ ما تحاول فعله فأنت تحتاج تحميل إضافة لـ vs code تسمى live Server وبعد تحميلها اذهب إلى صفحة الـ html التي تحاول تشغيلها واضغط على كلمة go live والتي يشير إليها السهم في الصورة. وهذه الإضافة ستقوم بتشغيل سيرفر يراقب ملف الـ html ويقوم بتحديث المتصفح عند كل تحديث لملف الـ html.
  4. إن كنت تقصد Loader اثناء تحميل البيانات فيمكنك عرض الـ gif باستخدام شرط مثل : {!data && <span>loader</span>} حيث ان السطر السابق يترجم إلى (إذا لم يكن هنالك data قم بعرض العنصر). والمتغير data هنا هو عبارة عن الـ state التي تخزن فيها البيانات بعد احضارها من السيرفر. وتجعلها null قبل احضار البيانات وبعد احضار البيانات تحفظ البيانات في الـ state المسماة data. ------- اما إذا كنت تقصد الـ loader التي تظهر بين الصفحات فيمكنك تنفيذها بنفس الطريقة ولكن تغيير الـ state إلى true من داخل الـ useEffect : const [showLoader, setShowLoader] = useState(true); useEffect(() => { setShowLoader(false) },[]); return( <div> {showLoader && <span>loader</span> </div> )
  5. هنالك عدة مشاكل وهي : 1- الوظيفة removeClass مكتوبة بشكل خاطئ حيث لم تضيفي الـ e للكلمة remove وكتبتها removClass وهذا خاطئ، ولحل المشكلة عدي الكود الخاص بالملف slider.js إلى الشكل التالي : var $links = $('.itemlinks'); $links.click(function (e) { $links.removeClass('active'); var clickedLink = $(e.target); var position = clickedLink.attr('data-pos'); var translateValue = "translateX(" + position * 25 + "%)"; $('#wrapper').css({ Transform: translateValue }); clickedLink.addClass('active'); }); $($links[0]).addClass('active'); 2- والمشكلة الثانية من CSS حيث يبدو ان الصور موضوعة تحت بعضها البعض في الصفحة و لذلك فعندما يقوم العارض بالتنقل نحو اليسار لا يظهر اي شيء، وهنالك عدة طرق لحل المشكلة واسهلها استخدام display: flex للعنصر #wrapper والذي يحوي كل الشرائح كالتالي : #wrapper { display: flex; width: 400%; height: 100%; transition: transform 0.5s ease-in-out; } 3- والمشكلة الثالثة هي في محدد الـ CSS لكل من الصورة والعنصر الذي يحوي الصورة حيث انك كتبتي المحدد بالشكل : #wrapper.content img{...} من دون ترك مسافة بن الـ wrapper و الـ content و CSS تفهم من ذلك أنك تريد تحديد الصورة الموجودة داخل العنصر الذي له كل من الصف content و المعرف wrapper وهذا خاطئ لأن ما تريده انت هو العنصر الذي له الصف content والموجود داخل العنصر صاحب المعرف wrapper والمحدد لهذا العنصر يكون بالشكل التالي : #wrapper .content img{...} 4- بعد سرد المشاكل الثلاثة فهنالك نصيحة، وهي ان تقومي بتعديل كود الـ CSS لكل من الصورة والعنصر الذي يحتويها إلى الشكل التالي : #wrapper .content { width: 100%; } #wrapper .content img { width: 100%; height: 100%; object-fit: cover; } وهذا عبارة عن تفضيل شخصي ويمكنك تجاهله.
  6. هل يمكنك الايضاح اكثر، كيف تقوم بعمل run
  7. قم بوضع كل من النص وليكن من النوع p و الصورة img داخل عنصر ما وليكن div. فيمكنك عمل المطلوب كالتالي : <body> <div> <img src="https://scontent-lhr8-1.xx.fbcdn.net/v/t31.18172-8/12194861_10153080948236813_6757042151481603403_o.jpg?_nc_cat=110&ccb=1-7&_nc_sid=9267fe&_nc_ohc=wBCQasVOygEAX81FHgh&_nc_ht=scontent-lhr8-1.xx&oh=00_AfCUZGNbXH2G8R8_DIAmMR-2EHIqv4BGg4XUMh7s0wgcDw&oe=63E210B8" alt="دلفين" /> <p>ساعد الدلافين فهي حيوانات جميلة</p> </div> <style> p { opacity: 0; transition: 0.2s; } div:hover p { opacity: 1; } </style> </body>
  8. هل يمكنك ذكر المزيد من التفاصيل عن المشكلة وكذلك مشاركة ملفات المشروع بعد التعديل.
  9. المشكلة في ملف الـ slider.js وتحديداً في السطر التالي : $links.removClass('active'); حيث انك كتبتي removClass بدون حرف الـ e في remove وهذا خاطئ والصحيح هو removeClass. $links.removeClass('active'); ولو فتحتي الـ inspect في المتصفح بعد النقر على احد النقاط الخاصة بالتنقل لوجدتي أن هنالك رسالة تقول لك بأن links.removClass غير معرفة. انصحك بتحميل اضافة للتصحيح الاملائي في vs code مثل spell checker.
  10. لا تخف فسيظل عليك التعامل مع css حتى بعد تعلم اطر العمل، وتعلم هذه الاطر هو افضل بالتأكيد وهو الخطوة التالية لتعلم الـ css.
  11. ماهي الخريطة التي تستخدمينها ؟
  12. يمكن تلخيص اهم المهارات في هذه الصورة : وقد يفيدك الاطلاع على المقالة التالية :
  13. لكل منهما ميزاته وعيوبه، ويمكنك بناء اي موقع باستخدام اي واحد بينهما. وهنالك العديد من النقاشات حول هذا الموضوع وانصحك ان تطلع عليها بالترتيب : ويمكنك الاطلاع على هذه : وبالنسبة للسوق العربية : المقارنة الاشمل :
  14. كلاهما يؤدي نفس الوظيفة ولكن ما يمزي الـ Button عن الـ Input هو ان الـ Button يقبل ان تضع داخله العناصر التي تريدها مثل : <button> زر تسليم مع صورة <img src="https://upload.wikimedia.org/wikipedia/commons/thumb/3/3d/Charaxes_brutus_natalensis.jpg/280px-Charaxes_brutus_natalensis.jpg" alt="صورة لزر التسليم"> </button> والنتيجة :
  15. لنفهم اولاً العبارة 2%i والتي تعني التالي : قم بتقسيم المتغير i على 2 وإذا كان هنالك باقي قم بإعادة الباقي. وهذه العبارة ستعيد 0 إذا لم يكن هنالك باقي. جرب الاكواد التالية : console.log(7%2); // 1 console.log(6%2); // 0 والآن إلى العبارة ( 0===2%i) والتي تعني التالي : إذا كان 2%i يساوي 0 قم بإعادة true ونفذ الشرط وإلا قم بإعادة false ولا تنفذ الشرط. جرب الكود التالي : console.log(7%2 === 0); // false console.log(6%2 === 0); // true
  16. جرب الـ query التالية : await Activities.find({'users.userId': id}) حيث اعتبرت ان الـ collection الخاصة بك اسمها Activities. وأن الـ id الخاص بالـ user اسمه id.
  17. يبدو ان المشكلة ليست من الكود الخاص بك ولكن من السيرفر الخاص بـ react وذلك لأن رسالة الخطأ تظهر كود مختلف عن الكود الخاص بك، وكذلك يبدو من الصورة انه هنالك سيرفرين يعملان لدي : جرب إعادة تشغيل السيرفر وحاول مرة ثانية. في حال استمرت المشكلة قم بمشاركة ملفات المشروع حتى استطيع الاطلاع عليها.
  18. يبدو انك لم تقم بمشاركة ملفات الـ firebase
  19. قد تكون المشكلة في اعدادات firebase. هل تأكدت من الـ console إن كانت الملفات الخاصة بك قد تم تحميلها بالفعل. هل يمكنك مشاركة ملفات المشروع حتى استطيع فحصها.
  20. هل يمكنك مشاركة الطريقة التي استخدمتها ؟ ويفضل مشاركة ملفات المشروع بالكامل.
  21. يبدو انه يوجد بيانات موجودة على ال repository الخاصة بك في GitHub ولكنها ليست موجودة على الجهاز الخاص بك، وبالتالي يجب عليك ان تقوم بسحب البيانات (pull) من الـ repository إلى حاسوبك أولاً ومن ثم إجراء التعديلات التي تريدها عليها ومن ثم إعادة إرسالها (push ).
  22. هنالك الكثير من الطرق للتعلم وكل شخص يستخدم الطريقة الافضل بالنسبة له للتعلم، ولكن سأشارك معك بعض التقنيات التي قد تساعدك في دراسة الدورة بالشكل الصحيح. التطبيق خلف المدرب باستمرار، والافضل بينها هو مشاهدة الدرس بالكامل ومن ثم محاولة التطبيق وفي حال وجدت اي مشكلة تعود للدرس وتتأكد من الكود. تلخيص الافكار التي تشاهدها في الدرس، وهذا سيساعدك في اتمام الخطوة 1 بشكل افضل ويساعد كذلك في تركيز المعلومات. الاحتفاظ بالاكواد التي تكتبها خلال التطبيق خلف المدرب و تنسيقها بشكل جيد واضافة ملاحظات لكل خطوة، وذلك حتى تستطيع العودة إليها بسهولة والاستفادة منها. مشاهدة الفيديوهات المعقدة اكثر من مرة، وذلك لأن بعض الدروس قد تحتوي مفاهيم جديدة بالكامل وهذا النوع من الدروس يحتاج تركيز اكبر. السؤال عن المواضيع الغامضة او التي تجد صعوبة في فهمها. مراجعة الملخصات التي تقوم بإنشائها بعد الانتهاء من كل مسار. وقد يفيدك الاطلاع على النقاش الآتي :
  23. اعتقد ان المشكلة بسبب الـ : e.preventDefault() الموجودة في الوظيفة handleToggle. جرب حذفها وحاول مرة ثانية.
  24. هل يمكنك مشاركة ملفات المشروع بعد ان اضفتي الـ padding ؟
  25. المشكلة ان النص يظهر خلف الـ header ولذلك فإنك لا ترينه. جربي اضافة padding-top وسيظهر العنصر ، لاحظي الصورة :
×
×
  • أضف...