أحمد رضا5

هنا المشكلة في الكود الآتي فأنت لم تقم بوضع العنصر img داخل الصفحة بعد عمله const test = document.createElement('img').src = icon_marker هذه الطريقة الصحيحة : const img = document.createElement('img'); img.src =icon_marker; document.getElementById('body').appendChild(img); والطريقة الصحيحة للصور svg سنحتاج الي تثبيت مكتبة svgo: npm install svgo --save-dev وفي ملف webpack.config.js سيكون الكود هكذا: const ImageMinimizerPlugin = require("image-minimizer-webpack-plugin"); module.exports = { module: { rules: [ // You need this, if you are using `import file from "file.ext"`, for `new URL(...)` syntax you don't need it { test: /\.(svg)$/i, type: "asset", }, ], }, optimization: { minimizer: [ "...", new ImageMinimizerPlugin({ minimizer: { implementation: ImageMinimizerPlugin.svgoMinify, options: { encodeOptions: { // Pass over SVGs multiple times to ensure all optimizations are applied. False by default multipass: true, plugins: [ // set of built-in plugins enabled by default // see: https://github.com/svg/svgo#default-preset "preset-default", ], }, },

الأمر build مخصص لتجهيز الموقع للرفع علي الاستضافة فالأفضل أن تقوم بتخصيص أمر لوضع التطوير لنفترض اننا سنسميه start فيكون الكود كالأتي: "start": "webpack serve --open" و Serve هي ما ستقوم بمتابعة أي تغيير في الكود

الأوامر صحيحة المشكلة في كود webpack لذلك سنقوم بفصل وضع التطوير عن وضع الإنتاج في ملفات منفصلة أولاً نحتاج الي تثبيت webpack-merge لربط الملفات ببعض : npm install --save-dev webpack-merge وسنقوم بعمل ثلاثة ملفات webpack.common.js وسيحتوي علي الأكواد المشتركة بين الوضعين const path = require('path'); const HtmlWebpackPlugin = require('html-webpack-plugin'); module.exports = { entry: { app: './src/index.js', }, plugins: [ new HtmlWebpackPlugin({ title: 'Production', }), ], output: { filename: '[name].bundle.js', path: path.resolve(__dirname, 'dist'), clean: true, }, }; webpack.dev.js وضع التطوير const { merge } = require('webpack-merge'); const common = require('./webpack.common.js'); module.exports = merge(common, { mode: 'development', devtool: 'inline-source-map', devServer: { static: './dist', }, }); webpack.prod.js وضع الإنتاج const { merge } = require('webpack-merge'); const common = require('./webpack.common.js'); module.exports = merge(common, { mode: 'production', });

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

قم بتصحيح الكود العنصر ليكون كالأتي: <title> </title>

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

يمكنك عمل معرض الأعمال الخاص بك بدون استخدام back-end عن طريق إضافة صور ورابط المشروع في معرض الأعمال، وعند عمل مشاريع جديدة سيتطلب ذلك تعديل الكود الخاص بك واضافة صور وروابط المشروع ويمكن جعل إضافة مشروع جديد أسهل وشبه ديناميكي دون الحاجة الي back-end عن طريق عمل ملف JSON أو ملف JavaScript يحتوي علي معلومات المشروع ورابطة وروابط الصور المرفقة ومن ثم ربطة بمعرض الأعمال مثال : data.js var data = [ {name:"sunil",age:"24",place:"delhi",avatar:"./image/abc.jpg",country:"India"}, {name:"sujan",age:"22",place:"assam,",avatar:"./image/abc.jpg",country:"India"}, {name:"abishek",age:"26",place:"kolkata",avatar:"./image/abc.jpg",country:"India"}, {name:"chiranjeev",age:"20",place:"bangalore",avatar:"./image/abc.jpg",country:"India"}, ] app.js var Usrdata = document.querySelector('.box'); document.getElementById('test1').innerHTML = userDetail.map(user => `<div> <div>Name: ${user.name}</div> <div>Age: ${user.age}</div> <div>Place: ${user.place}</div> <div>Country: ${user.country}</div> <div>Avatar: ${user.avatar}</div> </div>` ).join('') وعندما تريد إضافة مشروع جديد يمكنك بسهولة إضافته إلي ملف البيانات. أما اذا كنت تريد جعل الموقع ديناميكي بالكامل فعدها ستحتاج الي back-end وربطة مباشرة بمعرض الأعمال أو عن طريق API

لا يوجد قسم من فصل لتعلم ال git ولكن يتم شرح بعض الأوامر المهمة واستخدامها في التطبيقات العملية وإليك بعض المصادر التي يمكنك من ها تعلم ال git بشكل مفصل: وهذا فيديو عملي لاستخدام وشرح ال Git و ال Github:

هل يمكنك مشاركة محتوي رسالة الخطأ

أولاً تأكد من أنه تم تحويل صيغة الملف الي exe قد يكون مجرد إضافة الي الاسم وليست صيغة اذا لم يكن كذلك فمن المحتمل أن يكون فايروس اسم الفايروس :copy.exe الوصف :هذا الفايروس يقوم بنسخ ملفاته في كل بارتيشن بحيث يمنع فتحها بالضغط عليها وتعطبل ميزة القراءه التلقائيه والملفات هي: copy.exe autorun.inf host.exe ويأتي أحيانا من فلاش ميموري لجهازك او أي هارديسك فيه الفيروس سوف تجدها في كل بارتشن لا تمسحها لأنها ستعود ثانية. كيف تزيل الفايروس ؟ : ندخل على السي في مجلد الويندوز c:\windows نقوم بمسح الملفات التاليه : autorun.inf xcopy.exe svchost.exe وبعدين ندخل على الريجستري قائمة إبدأ start أمر التشغيل run اكتب الأمر محرر النظام regedit رح تفتح لك نافذة الريجيستري اضغط Ctrl+F ثم اكتب copy ثم اضغط Find Next وستجده بامتدادexe امسحه و بعدين انزل للأسفل الى أن تجد المسار C:\WINDOWS\svchost.exe امسحه أيضا من الريجيستري ثم قم بعمل ريستارت restart للجهاز.

السبب هو أنك تورث العنصر p كأبن <MainContent content_page = 'JavaScript Page' > <p>wellcome</p> </MainContent> فيتم توريثه مره اخري داخل عنصر p آخر في ال component <p>{props.children}</p> قم بحذف أحد واحد منهم <MainContent content_page = 'JavaScript Page' > wellcome </MainContent> والسبب في ان النص لونه أبيض هو أنك أعطيت جميع العناصر اللون الأبيض كما في الكود الأتي: * { margin: 0; padding: 0; color: white; font-family: sans-serif; text-decoration: none; list-style: none; letter-spacing: 1px; }

اعتقد أن هذا غير متوفر حالياً ستكون الطريقة الوحيدة هي بالشحن أو التحويل بنفسك عن طريق التطبيق الخاص بالشركة

قم بإرفاق تفاصيل أكثر أو موضوع الدرس أو قم بالسؤال اسفل الدرس لجواب أفضل

للأسف ، فودافون كاش في مصر ليس لديها أي بوابة دفع او واجهه برمجية API ، ولكن يمكنك استخدام هذا ال api من paymob لعمليات الدفع بالمحافظ الإلكترونية. وأيضا قم بالاطلاع علي هذا المنشور فيه بعض المعلومات التي قد تفيدك : https://docs.paymob.com/docs/mobile-wallets

المشكلة من الكلاس row نتيجة للترتيب الخاطئ للعناصر والحل سيكون بوضع العنصر بداخل عنصر آخر وإعطاء الكلاس sec للعنصر الأب بحيث يكون كالآتي: <div class="sec1 box"> <div class="row row-cols-1 "> .... </div> </div> وبهذا نكون قد حللنا المشكلة وهناك بعض التحسينات في الكود يجب عملها فمثلًا: لست بحاجة إلى استخدام الكلاس row وبالتالي الكلاس col في الأقسام التي تحتوي على عنصر واحد. لا تستخدم الكلاس row وcol إذا كان ترتيب العناصر أفقي فهذا هو الافتراضي ولا فائدة من ذلك. لاحظت أن ما تحاول عمله يمكن تنفيزه بسهولة باستخدام الكلاس container وسيعطي نتيجة أفضل جرب استخدامه ليكون الكود كالاتي: <div class="sec2 box"> <div class="container"> <h1 class="mt-3">...</h1> <p class="mb-5 text-center">...</p> </div> </div> انظر الروابط لمعرفة المزيد عن ال container و ال grid system: https://getbootstrap.com/docs/5.2/layout/containers/ https://getbootstrap.com/docs/5.2/layout/grid/

الكود يعمل يا صديقي 😂 يتم طباعة النص في أسفل الصفحة علي اليسار ولكن المشكلة هي أن لون النص أبيض فلا يظهر

السبب يرجع إلى تفضيلات CSS حيث إن العنصر <select> لديه تنسيق محدد أكثر، مثلاً عندما قمت بإعطاء ألوان للعناصر ليظهر الفرق بوضوح وفحص الكود بأدوات المطور تجد الأتي: والسبب هو أن العنصر <select> لديه تنسيق افتراضي معطي للعنصر بشكل محدد وسبب حدوث هذه المشكلة مع بعض العناصر عن غيرها هو ان ليست كل العناصر القيمة الافتراضية لبعض خواصها هي استيرادها من الأب ، وأفضل طريقة لحل هذه المشكلة هي باستخدام الكود التالي لإعطاء الخصائص لكل العناصر : * { /* your css code */ } أو بكتابة كود أكثر تحديداً عن طريق استخدام class او غيرها .

فعلياً لا يمكنك تغير تنسيقات الخاصية title. لكن هناك بعض الطرق التي تعطي نفس النتيجة المطلوبة: a { position: relative; display: inline-block; margin-top: 20px; } a[title]:hover::after { content: attr(title); position: absolute; top: -100%; left: 0; } ولكن هناك طريقة أفضل عن طريق استخدام خاصية مخصصة (custom attribute) مثلا : data-title وإعطائه بعض التنسيقات باستخدام css [data-title]:hover:after { opacity: 1; transition: all 0.1s ease 0.5s; visibility: visible; } [data-title]:after { content: attr(data-title); background-color: blue; color: #111; font-size: 150%; position: absolute; padding: 1px 5px 2px 5px; bottom: -1.6em; left: 100%; white-space: nowrap; box-shadow: 1px 1px 3px #222222; opacity: 0; border: 1px solid #111111; z-index: 99999; visibility: hidden; } [data-title] { position: relative; } <a href="example.com" data-title="My site"> Link </a> with styled tooltip (bigger and with a different background color, as requested in the question)<br/> <a href="example.com" title="My site"> Link </a> with normal tooltip لمطلوب عمله معروف باسم pseudo-tooltip يمكنك البحث عنه إذا أردت رؤية المزيد من الطرق.

المشكلة ليست في كود JavaScript يمكنك جعلها تلتصق بالجزئ العلوي عن طريق إضافة: top: 0; فيكون الكود كالتالي : .menu.sticky { position: fixed; top: 0; display: flex; z-index: 999; }

انت لم تستخدم children من الأساس طريقة استخدامها تكون كالمثال التالي : App.jsx import { RowList, Row } from './RowList.js'; export default function App() { return ( <RowList> <Row> <p>This is the first item.</p> </Row> <MoreRows /> </RowList> ); } function MoreRows() { return ( <> <Row> <p>This is the second item.</p> </Row> <Row> <p>This is the third item.</p> </Row> </> ); } RowList.jsx import { RowList, Row } from './RowList.js'; export default function App() { return ( <RowList> <Row> <p>This is the first item.</p> </Row> <MoreRows /> </RowList> ); } function MoreRows() { return ( <> <Row> <p>This is the second item.</p> </Row> <Row> <p>This is the third item.</p> </Row> </> ); } أما إن كنت تقصد ال props فالطريقة التي قمت بها من المفترض أنها صحيحة. المشكلة قد تكون من طريقة استخدامك react-router. جرب طباعة بعض النصوص دون استخدام props للتأكد من أنها تعمل. أو قم بمشاركة ملفات المشروع حتى مكنني مساعدتك.

يوجد بعض المشاكل البسيطة في الكود وهي ما تمنع عملة اولها هو خطأ كتابي في onclik="closeNav()" // right way onclick="closeNav()" الخطأ الثاني <script type="javascript/text"> نوع الملف خاطئ والصحيح هو application/javascript ولكن انتي لست بحاجة الي اضافة type فهذا هو القيمة الإفتراضية الخطأ الثالث هو الحرف الأول من كلمة function يجب ان يكون small <script type="javascript/text"> Function openNav(){ document.getElementById("mysidenav").style.width="250px"; document.getElementById("main").style.width="250px"; } Function closeNav(){ document.getElementById("mysidenav").style.width="0px"; document.getElementById("main").style.width="0px"; } </script> <!-- the right way --> <script type="application/javascript"> function openNav() { document.getElementById("mysidenav").style.width = "250px"; document.getElementById("main").style.width = "250px"; } function closeNav() { document.getElementById("mysidenav").style.width = "0px"; document.getElementById("main").style.width = "0px"; } </script> من المفترض ان كود الجافا سكريبت يعمل الآن ولكن هناك بعض المشاكل في ال css يجب حلها .sidenav { /* height: 100 %; */ height: 100%; width: 0; position: fixed; z-index: 1; top: 0; left: 0; /* background-color: #ffdlla; */ background-color: #ffd11a; overflow-x: hidden; transition: 0.5s; padding-top: 60px; } والآن الكود يعمل بدون أي مشاكل

للأسف node.js لا يدعم linux 32 امامك حلين اما ان تقوم بتغير النسخة الي 64bit او ان تستخدم react بدون تثبيتها جهازك يمكنك استخدام react عن طريق اضافة روابط CDN من الموقع الرسمي <script crossorigin src="https://unpkg.com/react@18/umd/react.production.min.js"></script> <script crossorigin src="https://unpkg.com/react-dom@18/umd/react-dom.production.min.js"></script> رابط الموقع ان كنت ما تزال في بداية الدورة فأقترح عليك هذه الطريقة لأنك ستقوم ببناء كل شيء بنفسك وهذا افضل لمزيد من الفهم والتمكن من الفريم ورك ولكن لا اقترح هذه الطريقة في المشاريع الحقيقية لأنه هناك طرق اسهل عن طريق استخدام مواقع مثل : https://codesandbox.io/ https://playcode.io/react https://codedamn.com/online-compiler/reactjs#start فيمكن بناء مشاريع كاملة علي هذه المواقع وتثبيت أي مكتبات او اضافات للمحرر وكل ما تريد بدون الحاجة الي التنزيل ولن تشعر بالفرق ويمكنك أيضا مشاركة المشاريع والتسجيل في الموقع لحفظ تقدمك والمزيد من المميزات التي ستكتشفها بنفسك

اضافة اللغة العربية لا يلزم ان تقوم بفص الصفحات التي تدعم العربية عن الأنجليزية افضل طريقه هي بعمل العناصر الموقع بالكامل اوكل قسم باللغه الأنجليزية اولا ثم العربيه لأن التغيرات ستكون بسيطه اما عن استخدام rtl في bootstrap فكما ذكر الأستاذ محمد الخطيب في التعليق السابق وهو بالتحكم في اتجاة الصفحه عن طريق الأب بدلاً من كل عنصر بمفرده وستقوم بعمل ملف css للتعديلات التي ستحتاجها عند التحويل الي العربية ويتم ربطه بنفس الطريقه وبالنسبة للمحتوي نفسه فسنجعله ديناميكي بأن نقوم بعمل ملف js لكل لغه في كل ملف object في ه جميع النصوص التي ستتخدم في الموقع ومن ثم قم بإستدعائها وربطها const data = { title: "hello", link: "google.com", }; export default data; او اجعل نوع الملف json او قم بعمل fetch ان كان سيتم ربط الموقع في المستقبل بال back-end لا تهم الطريقه النتيجه واحدة

علي العكس تماماً ف Chatgpt وغيرة من تطبيقات الذكاء الاصطناعي يساعد المطورين بشكل كبير فمثلا في مجال ال front-end يمكن ان يساعدك في امور كثيرة منها : كتابة كود فمثلاً قد يكون لديك بعض الأكواد التي تتكرر كثيراً فيمكنه كتابتة نيابة عنك حل المشاكل خاصة في مجال الفرونت اند يكون هناك الكثير من المشاكل الغريبة والتي قد تأخذ منك ساعات لحلها ويكون السبب بسيط يمكنه المساعدة في حل الأخطاء في اسرع وقت وبدون أي مجهود هذا مثال لحل ChatGpt لأحدي المشاكل في React.js // original code with error function List(props) { const items = props.items; // error: items is undefined return ( <ul> {items.map(item => ( <li key={item.id}>{item.name}</li> ))} </ul> ); } // fixed code with ChatGPT's suggestion function List(props) { const items = props.items || []; // fixed: items is now initialized return ( <ul> {items.map(item => ( <li key={item.id}>{item.name}</li> ))} </ul> ); } اختبار الكود ممكن ان يساعدك في اختبار الكود عن طريق اعطائة حالات تجريبة والنتائج المتوقعة //create a test for the case (your message) const testCases = [ {length: 2, width: 3, expected: 6}, {length: 4, width: 5, expected: 20}, {length: 6, width: 7, expected: 42}, ]; //ChatGPT's answer for (const testCase of testCases) { const {length, width, expected} = testCase; const result = calculateArea(length, width); const isCorrect = result === expected; console.log(`Test case (length=${length}, width=${width}): ${isCorrect ? "PASS" : "FAIL"}`); } يوجد الكثير من الطرق التي يمكنك الأستفاده منة ويمكنك البحث عن هذة الطرق او ابتكار طرق بنفسك وفي النهاية لا اعتقد ان أي من تطبيقات الذكاء الأصطناعي يمكنها استبدال المطورين , علي العكس اري انها ستسهل عملنا كثيراً وتفتح الأبواب الي مزيد من الإبتكارات في مجال الويب وغيرة من المجالات

موقع GitHub لا يدعم الدومين المخصص فالطريقه الوحيدة تكون كالأتي :https://rayenbnhafsi.github.io/[your-repo's-name]/ اما استخدام دومين مجاني فيمكنك استخدام مواقع مثل: Netlify فيكون شكل الرابط كالأتي https://{ site-name }.netlify.app/ vercel Heroku ويمكنك رفع المواقع بسهولة عن طريق التسجيل بحساب GitHub وبذلك يمكنك استيراد المشاريع من حسابك واستضافتها بسهولة ويمكنك تغير اسم الموقع ليظهر في الرابط كما تريد وكلهم يعملون بنفس الطريقة واذا كنت تحتاج الي اضافة دومين احترافي ليظهر بالشكل الذي تريد مثلاً: http://willdone.io/ فعليك بشراء دومين مخصص وربطة بالموقع الذي انشأتة ويمكنك شراء الدومين من احدي المنصات المتخصصة مثل : Namecheap.com GoDaddy.com وأخيراً اذا ما كان لديك المزيد من الأسئلة فلا تترد في السؤال