عمر قره محمد

هي يمكنك إيضاح الذي تحاول ان تفعله حتى استطيع مساعدتك. هل تحاول فصل عناصر العمود الاول في السطر 5 وما بعد حتى تصبح في ثلاث عواميد مثل السطر 1 ؟ إذا كنت تحاول فعل ذلك فيمكنك القيام بالأمر باتباع الخطوات التالية : حدد الخلية أو العمود الذي يحتوي على النص الذي تريد تقسيمه. حدد البيانات > النص إلى أعمدة. في معالج تحويل النص إلى أعمدة،حدد محدد > التالي. حدد المحددات لبياناتك. وهي في حالتك المساحة. يمكنك الاطلاع على معاينة للبيانات في النافذة معاينة البيانات. حدد التالي. حدد الوجهة في ورقة العمل حيث تريد ظهور البيانات المنقسمة. حدد إنهاء.

هنالك طريقتين معروفتين لاستيراد الصور في رياكت، الأولى هي وضع الصور في ملف الـ src ومن ثم استيراد الصور داخل الصفحات واستخدامها مثل : import React from 'react'; import logo from './logo.png'; // استيراد الصورة هنا function Header() { // استخدام الصورة هنا return <img src={logo} alt="Logo" />; } export default Header; والطريقة الثانية هي التي شرحتها لك في التعليق السابق.

المشكلة هي انك وضعت ملف الصور في الملف src والصحيح ان يكون في الملف public، قم بنقل ملف الصور images إلى الملف public : ثم قم بتعديل روابط الصور إلى الشكل : const bannerImgs = [ { id: 1, src: "images/banner/img-1.jpg", }, { id: 2, src: "images/banner/img-2.jpg", }, { id: 3, src: "images/banner/img-3.jpg", }, { id: 4, src: "images/banner/img-4.jpg", }, { id: 5, src: "images/banner/img-5.jpg", }, { id: 6, src: "images/banner/img-6.jpg", }, ]; وبعدها يجب ان يعمل الكود.

هل تظهر أي رسالة خطأ في الكونسول ؟ هل يمكنك مشاركة ملفات المشروع.

انصحك بالطلاع على المقالة التي رشحتها لك في التعليق السابق فهي تجيب على تساؤلاتك، لاحظ المثال التالي والذي يوضح الفرق : class MySelect extends React.Component { constructor(){ // إضافة الحالة الافتراضية super(); this.state = {selected: false}; // this.state.selected = false; this.select = this.select.bind(this); // لفهم السطر التالي راجع المقالة كاملةً } // لاحظ كيف نضيف المتغيرات هنا select(event){ // select إضافة الدالة if(event.target.textContent === this.state.selected){ // إزالة التحديد this.setState({selected: false}); // تحديث الحالة }else{ // إضافة التحديد this.setState({selected: event.target.textContent}); // تحديث الحالة } } render(){ // لاحظ كيف نضيف المتغيرات هنا var mySelectStyle = { border: '1px solid #999', display: 'inline-block', padding: '5px' }; return ( // render لاحظ كيف نستخدم المتغيرات المعرفة في الـ <div style={mySelectStyle}> <MyOption value="Volvo"></MyOption> <MyOption value="Saab"></MyOption> <MyOption value="Mercedes"></MyOption> <MyOption value="Audi"></MyOption> </div> ); } }; class MyOption extends React.Component { render(){ return <div>{this.props.value}</div>; } };

الفرق هو كالتالي : class app extends Component { render(){ // render تستطيع هنا كتابة اكواد جافاسكريبت التقليدية والتي سيتم إعادة تنفيذها عند كل عملية تحميل return( // في رياكت html وهي اللغة البديلة عن jsx هنا تكتب اكواد // render قد نعتمد احياناً على الاكواد التي يتم توليدها في القسم // سيتم اعادة توليدها عند كل تحميل كذلك ) } } قد يفيدك الاطلاع على المقالة التالية والتي تتحدث عن اساسيات react

هل يمكنك مشاركة ملفات المشروع حتى استطيع فحص الكود،

يظهر في الصورة المرفقة ان الملف الخاص بك لا يملك الامتداد py قد تكون المشكلة ان البرنامج لم يتعرف على الكود الخاص بك على انه كود python. لاحظ ان الملف رقم 1 لايملك الامتداد py بينما الملف رقم 2 بملك الامتداد py : جرب تعديل اسم الملف وإضافة الامتداد py والمحاولة مرة ثانية.

المشكلة انك اضفت النقطة قبل اسم الكلاس، ولكننا كما تعلم لا نضيف نقطة لاسم الكلاس في الـ html . جرب اضافة اسم الكلاس بدون نقطة وحاول مرة ثانية : const animateNav = () => { nav === 'navbar-links' ? setNav('navbar-links active-navbar') : setNav('navbar-links') }

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

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

اعتقد ان المشكلة في الكود : const randomnumber = Math.floor(Math.random * memesarray.length) حيث يبدو انك نسيت ان تستدعي الدالة random والشكل الصحيح هو const randomnumber = Math.floor(Math.random() * memesarray.length)

قم بإضافة z-index للنص : .text-v { position: absolute; top: 20%; left: 20%; color: white; z-index: 3; }

الطريقة صحيحة وليس فيها اي اشكال، ويمكنك استخدام كل من الطريقتين والفرق بينهما هو في طريقة الكتابة. انصحك بالاطلاع على التوثيق الرسمي من حسوب والذي يشرح الامر بشكل مفصل استخدام الكائن Promise في JavaScript

لكل منهما ميزاته المختلفة، وبشكل عام فإن الـ functional component افضل وانصحك بالاطلاع على النقاش التالي :

هل يمكنك مشاركة رابط الدرس الذي تتحدث عنه، وكذلك يفضل ان تكتب سؤالاً يحتوي المشكلة الخاصة بك في قسم التعليقات تحت الدرس.

اعتقد ان حل مشكلتك في المتابعة إلى الدرس التالي والذي يقوم فيه المدرب بإعداد القائمة الجانبية لعرض الملاحظات الجديدة. في المرة القادمة قم بكتابة سؤالك في التعليقات تحت الدرس حتى نعرف ماهو الدرس الذي تتحدث عنه.

لقد اطلعت على الكود الخاص بك ويبدو ان المشكلة الاصلية قد تم حلها بنجاح ولذلك لن اتطرق لها في هذا التعليق، ولكن على ما يبدو انه هنالك مشكلة ثانية تواجهها وهي في الوظيفة selectNoteHandler والمشكلة انك وضعت الوظيفة selectNoteHandler داخل النطاق الخاص بالوظيفة saveNoteHandler ، لاحظ : // حفظ الملاحظة const saveNoteHandler = () => { const note = { id: new Date(), title: title, content: content } const updatedNotes = [...notes, note]; setNotes(updatedNotes); setCreating(false); setSelectedNote(note.id); setTitle(''); setContent(''); // اختيار ملاحظة const selectNoteHandler = noteId => { } } ولهذا فلن تتمكن من الوصول إليها إلا من داخل الوظيفة saveNoteHandler، أما إذا اردت الوصول إليها من الخارج فيجب عليك كتابتها خارج الوظيفة saveNoteHandler كالتالي : // حفظ الملاحظة const saveNoteHandler = () => { const note = { id: new Date(), title: title, content: content } const updatedNotes = [...notes, note]; setNotes(updatedNotes); setCreating(false); setSelectedNote(note.id); setTitle(''); setContent(''); } // اختيار ملاحظة const selectNoteHandler = noteId => { } وقد لاحظت من خلال السؤالين الماضين انك لديك ضعف في موضوع النطاقات scope للمتغيرات وانصحك بالاطلاع على المقالة التالية وتحديداً على الفقرة التي تتحدث عن النطاقات :

ماهي المشكلة التي تواجهها الآن ؟

تضع في كل 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) } })

هل الكود لا يعمل لديك ؟ في حال كان يعمل ولكن لا يظهر لديك ان الوظيفة موجودة فقد تكون المشكلة في vs code ويمكن حلها بإعادة تشغيله. إما إذا لم يكن يعمل فقد تكون المشكلة في عملية التنزيل، ويفضل ان تقوم بمشاركة ملفات المشروع حتى نستطيع الاطلاع على المشكلة.

الـ debugging in VSCode ليست مبنية لعرض الواجة بالشكل الذي تحاول استخدامها فيه، فهي عبارة عن اداة مساعدة لمعرفة مكان وجود خطأ ما في الكود، ويمكنك المعرفة اكثر عنها في هذا الفيديو أما لتنفيذ ما تحاول فعله فأنت تحتاج تحميل إضافة لـ vs code تسمى live Server وبعد تحميلها اذهب إلى صفحة الـ html التي تحاول تشغيلها واضغط على كلمة go live والتي يشير إليها السهم في الصورة. وهذه الإضافة ستقوم بتشغيل سيرفر يراقب ملف الـ html ويقوم بتحديث المتصفح عند كل تحديث لملف الـ html.

إن كنت تقصد 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> )

هنالك عدة مشاكل وهي : 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; } وهذا عبارة عن تفضيل شخصي ويمكنك تجاهله.

هل يمكنك الايضاح اكثر، كيف تقوم بعمل run