MoJaffer

تستطيع فعل ذلك عن طريق FlatList componnet حيث ستسمح لك بعرض البيانات بالشكل الذي تريده سواء افقي أو عمودي طبعاً في البداية ستحتاج لعمل import للـ FlatList import { FlatList } from "react-native" الآن سنقوم بعمل بعض التعديلات على الكود الخاص بك : export default function CoulumnsInMap() { const renderItem = ({ item }) => ( <Card id={item.id} name={item.name} /> ); return ( <FlatList data={data} /* هنا سنضغ البيانات الخاصة بك */ renderItem={renderItem} /* تأخذ كل عنصر من البيانات وتقوم بعرضه */ keyExtractor={item => item.id} /* تحديد المعرق */ horizontal={false} /* هنا سنقوم بجعل عرض البيانات بشكل عرضي */ numColumns={2} /* عدد الصفوف */ /> ); } معاينة

من الأفضل إرفاق ملفات المشروع

بعد اضافة position: fixed تقوم بتحديد تموقع العنصر بالنسبة للمتصفح دون التأثير على أي عنصر اخر في الصفحة فقبل اضافة position: fixed كان sidebar يأخذ جزء من الصفحة (30%) قما قمت بتحديدها أنت لذلك الـ content كان يتأثر بهذا بـ sidebar وكان يتموقع بعده مباشرة في الصفحة الآن بعد أن قمت بإضافة position: fixed لم يعد content يتأثر بعرض الـ sidebar الذي حددته بـ (30%) لذلك ستجده يعود إلى اقصى يسار الصفحة سيكون خلف الـ sidebar مباشرة الحل هنا بعد أن تقوم بإضافة position: fixed ستذهب إلى الـ content وتقوم بإعطائه margin-left: 30% وستحل مشكلتك نصيحة : حاول تعلم كيفية عمل position Property في CSS

عندما تستخدم خاصية opacity على عنصر معين فإن جميع العناصر (childs) ستتأثر بذلك في حالتك أنا بصراحة لا اعلم لماذا تريد استخدام خاصية opacity من الأساس هل ذلك من اجل تخفيف اللون الأسود ؟ الأفضل لك هنا هو أن تقوم بتقليل شفافية اللون الأسود وليس شفافية العنصر نفسه احذف خاصية opacity واستبدل اللون الأسود (black) باللون (#0000007a) هنا قمت بتغيير شفافية اللون الأسود نفسه وليس العنصر وبهذا لن تتأثر بقية العناصر بالشفافية

بعد تسجيل الدخول ستستطيع الوصول لبيانات user عن طريق req.user بهذا الشكل الآن أنت تحتاج أن تتحقق من أن هذا user قد قام بتسجيل الدخول من خلال views لعمل ذلك ستحتاج إلى عمل متغيير تقوم فيه بتخزين بيانات user ومن ثم تمريرها للـ views تستطيع عمل ذلك بالشكل التالي : app.use((req, res, next) => { res.locals.user = req.user; next(); }); هنا req.locals.user ستسمح لنا بقراءة المتغيير user على أي ملف من ملفات veiws الآن بكل بساطة بداخل اي ملف view (if user) <button>logout</button> (else) <button>login</button> <button>register</button>

لماذا تحتاج تمرير المتغيير app إلى ملف controllers ؟

في البداية انصحك بإستخدام اطار عمل مثل vue.js أو React.js لتسهيل العمل ولكن في حالتك إن اردت فعل ذلك بإمكانك فعلها بإستخدام الجافاسكريبت الفكرة هنا هي تعريف متغييرين اثنين الأول ستسميه مثلاً ar والآخر ستسميه مثلاً en وبداخل كل متغيير ستضيف كائن وفي كل كائن ستضيف عدة Properties ستضيف فيها جميع النصوص الكلمات التي تريدها بعدها سنقوم بتعريف متغيير اخر وهذا المتغيير سيتم فيه تحديد اللغة التي تريدها واخيراً بعدها ستقوم بإنشاء دالة من خلالها ستقوم بتغيير هذا المتغيير دعنا نأخذ المثال للتضح لك الصورة بشكل افضل اولاً HTML <h2 id="hello"></h2> <!-- هنا سيظهر النص --> <p id="text"></p> <!-- هنا لتتغير اللغة عند الضغط --> <button onclick="setLang('en')">English</button> <button onclick="setLang('ar')">عربي</button> ثانياً : الجافاسكريت // هنا حيث نقوم بتخزين الكلمات والعبارات التي نريدها لكل لغة في متغيير منفصلين var ar = { hello: "مرحباً!!", text: 'تغيير اللغة' }; var en = { hello: 'Hello!!', text: 'Change language' }; var language = ar; // تحديد اللغة // تغيير نص HTML function changeText(){ for (const key in language) { document.getElementById(key).innerText = language[key]; } } changeText(); // تغيير اللغة عند الضغط على ازرار تغيير اللغة var setLang = function (lang){ lang === 'ar' ? language = ar : language = en; changeText(); }

في النسخة الـ 4 من Express لم تعد بحاجة لإستخدام كل من app.configure & app.use لإعداد الـ middleware المطلوبة فقد تم حذف جيمع تلك الـ middleware الآن حيث اصبح بالإمكان تحديثها وصيانتها بشكل مستقل من Express Core وهنا في الملف www سيكون المكان الذي ستقوم فيه بإنشاء السيرفر وتمرير التطبيق من خلاله (ملف app.js) حيث سيكون ملف app.js الملف الذي يحتوي على الـ middlewares & routes

لا يمكنك تثبت الحزمة globally حيث يجب عليك تثبيت حزمة express داخل ملفات المشروع locally ولعمل ذلك ادخل واكتب في سطر الأوامر الأمر التالي : npm install express

اسرع طريقة لفعل ذلك هي بإضافة app.disable('x-powered-by'); بإمكانك ايضاً اضافة middleware لإزلة header بهذه الطريقة : app.use(function (req, res, next) { res.removeHeader("X-Powered-By"); next(); });

لقد قمت بنسيان اضافة كل من passport.serializeUser & passport.deserializeUser كل ما عليك فعله هو اضافتها passport.serializeUser(function(user, done) { done(null, user.id); }); passport.deserializeUser(function(id, done) { User.findById(id, function(err, user) { done(err, user); }); });

في البداية عليك معرفة ماهية وكيفة عمل "npm start" "npm start" تقوم بتشغيل امر محدد مسقباً في الخاصية start داخل الكائن scripts في ملف package.json وبما أن الخطأ الذي ظهر لك هو "missing script: start" فهذا يعني أنك لم تقم بإضفة خاصية start في ملف package.json لذلك كل ما عليك فعله هو الدخول إلى ملف package.json واضافتها كما يلي : "scripts": { "start": "node YOUR_FILE.js" } وسيعمل معك الخادم اذا فهنا الأمر npm start وكأنك تقوم بكتابة الأمر "node YOUR_FILE.js" في سطر الأوامر

لو قمت بطابعة المتغير y عن طريق console.log سترى بأن نتيجة المتغيير هي عبارة عن مصفوفة ستكون بهذا الشكل [div.col, div.col, div.col, ...] وطبعاً هنا أخي عندما قمت بإستخدام الشرط if للتحقق من قيمة المتغير y فمن المستحيل أن يتحقق الشرط "وهو أن تكون القيمة اكبر من أو يساوي ثمانية" وهنا الحل بسيط جدا أخي أنت في الإساس لست بحاجة بالتحقق من قيمة المتغيير y وفي الإساس ليس هناك حاجة في انشاء هذا المتغيير إذا انه يمكنك التحقق من قيمة المتغيير t الذي قمت بإنشائه بدلا من ذلك كما في التالي : function ik() { var t = Math.round(Math.random() * 10); alert("this is column: " + t) if (t >= 8) { alert("YOU WON"); } else { alert("YOU LOST"); } } للإضافة : don't repeat yourself هناك طريقة اكثر احترافية لكتابة الكود الخاص بك فبدلاً من تكرار كتابة onclick في كل عنصر من عناصر (div) تستطيع بدلاً من ذلك استعمال الدالة addEventListener عند الضغط على اي عنصر يحوي كلاس بإسم (col) سنعود هنا لإستخدم document.getElementsByClassName كما استخدمتها في الكود الخاص بك وكما تذكر فإن هذا سيعود لنا بمصفوفة عن طريقها سنستطيع عمل عملية تكرار بسيطة بإستخدام for ومن ثم استخدام addEventListener للإستماع للحدث عند الضغط على أي عنصر لديه كلاس (col) سيمنحك هذا كود نظيف ولن تحتاج لتكرار كتابة onclick عند كل عنصر كما في التالي : var elements = document.getElementsByClassName("col"); var ik = function(){ var randomNum = Math.round(Math.random() * 10); alert("this is column" + "=" + randomNum); console.log('Number is:', randomNum); if (randomNum >= 8) { alert("YOU WON"); } else { alert("YOU LOST"); } } for(var i = 0; i < elements.length; i++){ elements[i].addEventListener('click', ik) } لا تنسى حذف onclick من على العناصر في الرابط التالي ستجد الكود بشكل كامل : اضغط هنا

للدخول إلى مجال العمل الحر في الإنترنت عليك أن تمتلك مهارة في مجال معين وفي عالم الربح من الإنترنت هناك الكثير من المجالات قد لا استطيع ذكرها جميعا 1 - البرمجة : وهناك عدة مجالات في البرمجة منها : تطوير تطبيقات الويب تطوير تطبيقات الهواتف الذكية تطوير برامج الحاسوب وكل مجال من هذه المجالات ينقسم لعدة مجالات اخرى 2- تصميم الجرافيك : وطبعاً هذا المجال ينقسم لعدة أقسام منها : تصميم الهويات البصرية والشعارات تصميم منشورات التواصل الإجتماعي تصميم واجهات المواقع الإلكترونية تصميم الإعلانات تصميم المطبوعات الموشن جرافيك 3 - مونتاج الفيدو 4 - الكتابة والترجمة 5 - التسويق الإلكتروني 6 - تسجيل الصوتيات

بكل سهولة بإمكانك اضافة مسار في النهاية بهذا الشكل app.use('*', (req, res) => res.render('YOUR_TEMPLET_NAME') );