لوحة المتصدرين

السلام عليكم أريد القيام بanimation ل<svg></svg> التالية: <svg width="32px" height="32px" className="home__scroll-mouse" viewBox="0 0 247 390" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlnsXlink="http://www.w3.org/1999/xlink" style={{ fillRule: 'evenodd', clipRule: 'evenodd', strokeLinecap: 'round', strokeLinejoin: 'round', strokeMiterlimit: 1.5, }} > <path className="wheel" d="M123.359,79.775l0,72.843" style={{ fill: 'none', stroke: '#000', strokeWidth: '20px', }} id='wheel' ></path> <path id="mouse" d="M236.717,123.359c0,-62.565 -50.794,-113.359 -113.358,-113.359c-62.565,0 -113.359,50.794 -113.359,113.359l0,143.237c0,62.565 50.794,113.359 113.359,113.359c62.564,0 113.358,-50.794 113.358,-113.359l0,-143.237Z" style={{ fill: 'none', stroke: '#000', strokeWidth: '20px', }} ></path> </svg> الanimation تخص path.wheel قمت بالتجربة التالية (لم تنجح) .wheel { animation: scoll 2s ease infinite; } @keyframes scroll { 0% { transform: translateY(0); } 30% { transform: translateY(3.75rem); } } شكرا على المساعدة

سلام ، عندما اضفنا المدخلات num1 and num2 في الدالة لم نزد let function( num1,num2) لماذا لم نعطهم let function (let num1=0, let num2=0) شكرا

احتاج مساعدتكم عندي مشكلة في تصميم لما عم أعطي flex-direction:column عند media max width:991px ماعم يقبل خاصية column و تصيميم فيو مشاكل عند width 991px طبعا قسم مقسم بل flex اذا في امكانية تساعدوني

السلام عليكم ورحمة الله وبركاته ، أنا من مصر، هل استطيع الإعلان في دولة اخرى ؟ زي العراق أو الخليج ؟

السلام عليكم, لاحظت ان اصدار اطار العمل next الحالي قائم على النسخة رقم 11 في حين ان النسخة الحالية المستخدمة رقم 13. قمت بقراءة بعض الفروقات بينهم ووجدت ان الفرق شاسع حيث ان النسخة 13 بها تحسينات كثيرة!! لماذا لا يتم تحديث الفيديوهات بناء على هذه التغيرات؟ ارجو التوضيح و شكرا لكم

محتاج الكود اللي بيغير العرض بين الموبايل والتابلت والويندوز أنا استخدمت كود معين بس للأسف مش عاوز يظبط الكود كالتالي @media only screen and ( min-wigth 600px){background-color: Ex red } @media only screen and (min-wigth {background-color:Ex yellow} 768px) علي ال Sublime text مسموح تحط only / and علي ال visual studio code مش مسموح بالعكس لو كتبتهم بيغير كل الأوامر تاني وترجع زي ما كانت بس ملوش تأثير علي ال background-color اللي معموله للصفحه ممكن طريقه الكتابه الصحيحة علي ال visual studio code ، و إزاي بيكون في اختلافات كدا هل الطريقة دي قديمة مثلاً

السلام عليكم . أنا أعمل على تطبيق افلام للتعلم فقط , وأواجه مشكلة في موقع moviesdb الخاص ب API حيث ان key انتهت صلاحيته ولا أعرف كيف احدثه , من فضلكم من لديه علم . او دلوني على موقع مشابه لجلب API

?????????The Flutter directory is not a clone of the GitHub project. The flutter tool requires Git in order to operate properly;

ما تريده هو إضافة الـ animation إلى path.wheel، و يمكنك بذلك باستخدام خواص الـ CSS الخاصة بالـ stroke-dasharray و stroke-dashoffset مع الـ keyframes. حيث سيتم ربط الـ stroke-dasharray بطول الـ path والـ stroke-dashoffset سيتم استخدامه لتحديد موقع بدء الـ path. حاول تجربة الكود التالي: .wheel { stroke-dasharray: 80, 250; /* قيمة الطول الإجمالي للـ path وهي 250px */ stroke-dashoffset: 0; animation: scoll 2s ease infinite; } @keyframes scoll { 0% { stroke-dashoffset: 0; } 100% { stroke-dashoffset: -250; /* سيتم تحريك الـ path بطولها الإجمالي باتجاه الأعلى 250px */ } } لاحظ أن stroke-dasharray تأخذ مجموعة من الأرقام، وتحدد القيمة الأولى طول الـ dash (الخط المتقطع) والقيمة الثانية طول الـ gap (الفراغ)، وفي المثال تم استخدام 80 لطول الـ dash و 250 لطول الـ gap، والطول الإجمالي للـ path هو 250، بمعنى آخر، يتم رسم dash بطول 80، ثم رسم gap بطول 250 وهكذا. وفي keyframes يتم تحريك الـ stroke-dashoffset من 0 إلى -250، وهذا يعني أن الـ path سيتحرك باتجاه الأعلى بمقدار طول الـ path الإجمالي (250)، وسيتم تكرار هذه الحركة بلا نهاية باستخدام infinite في الـ animation.

حاولت جميع طرق لم تعمل وتصميم داخل مع بعضها البعض

لا يمكن استخدام "let" في تعريف مدخلات الدالة، لأن مدخلات الدالة تعتبر بالفعل متغيرات محلية (local variables) داخل نطاق (scope) الدالة. عند تعريف دالة، يمكننا تحديد المدخلات التي يمكن للمستخدم إدخالها عن طريق وضعها بين القوسين (). ويمكنك تفسير هذا كأن هذه المدخلات تم تحديدها مسبقًا، وليس من الضروري تعريفها مرة أخرى باستخدام let في داخل دالة. وبمجرد تمرير القيم لهذه المدخلات، تصبح هذه المتغيرات محليةًً داخل النطاق(scope) الخاص بالدالة، ويمكن الوصول إليها داخل الدالة دون الحاجة لتحديدها مرة أخرى باستخدام let. يمكن الاستفادة من الدالة التالية كمثال يوضح ذلك: function addition(num1, num2) { let result = num1 + num2; return result; } let value = addition(5+4) console.log(value) // 9 في هذا المثال، يتم تحديد مدخلين (num1 و num2) دون استخدام let، ويتم تعريف متغير محلي (result) داخل الدالة بمجرد إنشائها. ولن يتمكن المستخدم من الوصول إلى هذه المتغيرات من خارج الدالة. يفضل أن تعرف كيفية إنشاء المتغيرات في لغة جافا سكربت (JavaScript) وما الفرق بين let و var و const في الأعلان عن المتغير. في لغة جافا سكربت (JavaScript)، هناك ثلاثة أنواع من الأوامر(الكلمات مفتاحية) التي تستخدم لإعلان المتغيرات، وهذه ننظرة علي كلٍ منها: 1. var: هي الطريقة القديمة لتعريف المتغيرات في جافا سكربت، يمكن استخدامها لتعريف متغير في أي مكان في البرنامج. قبل ES6 (ECMAScript 2015)، كان var الأمر الوحيد المستخدم لتعريف متغيرات في جافا سكربت. الكود: var a = 5; function testFunc() { var b = 10; console.log(a); // 5 console.log(b); // 10 } testFunc(); console.log(a); // 5 console.log(b); // ReferenceError: b is not defined 2. let: هي الطريقة الجديدة في ES6 لتعريف المتغيرات، يمكن استخدامها لتعريف المتغيرات داخل أي كتلة(نطاق) {...} في البرنامج (على عكس var الذي يمكن استخدامه داخل وخارج الكتلة {}). عند استخدام let، لا يمكن استخدام إعلان نفس الاسم مرتين في نفس الكتلة. الكود: let x = 10; if (x === 10) { let x = 20; console.log(x); // 20 } console.log(x); // 10 في هذا المثال، تم تعريف متغير x باستخدام let عندما تم اختبار قيمته في الشرط، تم تغير قيمة x على قيمة جديدة 20. ولكن هذا التعريف يكون فقط مع المحدد الداخلي للشرط، بمعنى آخر، متغير x الذي تم تعريفه خارج الشرط لن يتأثر بأي تغيير يتم إجراؤه داخل الشرط. وهذا يعني أن القيمة المطبوعة لـ x خارج الشروط ستكون 10، بينما القيمة المطبوعة داخل الشرط ستكون 20. هذا هو ما يعنيه let - إنه يعرف مجالًا محددًا للمتغيرات التي يمكن تغييرها فقط في المحدد المعين. 3. const: هي طريقة لتعريف المتغيرات التي لا يمكن تغيير قيمتها بعد الإعلان عنها. يجب تعيين القيمة الأولية للمتغير عند إعلانه، ولا يمكن إعادة تعيين القيمة لاحقًا. الكود: const a = 5; function testFunc() { const b = 10; console.log(a); // 5 console.log(b); // 10 } testFunc(); console.log(a); // 5 a = 6; // TypeError: Assignment to constant variable.

التعديلات التي يجب تنفيذها نتيجة الإصدار الأحدث react-router-dom v6.10 هي كالتالي استخدام العنصر element بدلاً من component في Route: في react-router-dom v6، استخدمت العناصر element بدلاً من component في Route. لذلك، يجب تعديل الكود ليستخدم العنصر element على النحو التالي: <Route path="/" element={<App />} /> <Route path="/btn_test" element={<BtnTest />} /> يفضل تعديل اسم الملف: تم استخدام اسم ملف btn_test لمكون BtnTest. ومن المفترض أن يتبع معايير تسمية الملفات في React والتي تفرض أن يتم استخدام CamelCase لتسمية الملفات. لذلك، يجب تغيير اسم الملف إلى BtnTest. استخدام Navigate بدلاً من Redirect: في react-router-dom v6، يجب استخدام Navigate بدلاً من Redirect. لذلك، يجب تعديل الكود ليستخدم Navigate على النحو التالي: <Route path="*" element={<Navigate to="/" replace />} /> في react-router-dom v6، تم إلغاء Switch واستبداله بـ Routes، والذي يعمل بطريقة مشابهة لكنه يستخدم بنية أكثر تركيزًا على العناصر الفرعية والتحكم في المسارات.

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

مرحبًا محمد، أرجو منك طرح السؤال أسفل فيديو الدورة الخاص به حتى يتم الإجابة عليه، ويتم طرح الأسئلة العامة الغير متعلقة بالدورة في قسم أسئلة البرمجة هنا. وبخصوص ترتيب المسارات إذا فهمت سؤالك بشكل صحيح، فنعم يتم إتباعها بالتسلسل. ولا مشكلة إذا كانت بعض الأمور أو المصطلحات غير واضحة لك، عليك بالاستيعاب بنسبة 70% وسيتضح لك الباقي عند التطبيق من خلال لغة البرمجة الأولى لك. وقد يفيدك الإطلاع على النقاش التالي بخصوص دورة علوم الحاسب.

بالنسبة لإصدار react-router-dom": "^6.10.0 الذي تقوم باستخدامه، فالطريقة الصحيحة لكتابة الكود في ذلك الإصدار هي كالتالي: استيراد المكتبة في الملف الرئيسي لتطبيق React باستخدام الأمر التالي: import { BrowserRouter as Router, Routes, Route } from 'react-router-dom'; الآن، يمكن استخدام Routes component لتحديد المسارات والعناوين المطابقة لها، ن خلال استخدام Route component داخل Routes لتحديد مكان عرض المكون الخاص بالمسار المحدد. ولاحظ أنه تم استيراد BrowserRouter as Router. ويمكن استخدام BrowserRouter أو HashRouter كمكون رئيسي لتحديد أسلوب توجيه المسارات في تطبيق React. حيث BrowserRouter يعتمد على تاريخ المتصفح ويستخدم رابط URL كمفتاح رئيسي لتوجيه المستخدمين إلى الصفحات المحددة. ولكن يجب على المستخدمين الذين يريدون الوصول إلى صفحة محددة في التطبيق مشاركة الرابط URL الذي يحتوي على المسار. أما HashRouter يستخدم التجزئة (#) في عنوان URL لتوجيه المستخدمين إلى الصفحات المحددة ولا يتطلب مشاركة رابط URL كامل للصفحة. function App() { return ( <Router> <Routes> <Route path="/" element={<Home />} /> <Route path="/about" element={<About />} /> <Route path="/contact" element={<Contact />} /> <Route path="*" element={<NotFound />} /> </Routes> </Router> ); } يتم تحديد مسار الصفحة الرئيسية باستخدام العنوان '/' وعرض المكون Home. ومسار الصفحة About بواسطة العنوان '/about' ويعرض المكون About. ومسار الصفحة Contact بواسطة العنوان '/contact' ويتم عرض المكون Contact، وأخيراً، يتم تحديد مسار الصفحة التي لا تتطابق مع أي من المسارات السابقة باستخدام العنوان '*' وعرض المكون NotFound. علاوة على ذلك، باستطاعتك استخدام Navigate component بدلاً من Redirect component في React Router v6 لتحويل المستخدمين إلى صفحات أخرى. import { Navigate } from 'react-router-dom'; function Home() { return <Navigate to="/about" />; } استخدمت Navigate component لتحويل المستخدمين إلى صفحة About باستخدام العنوان '/about'.

المشكلة انك تستخدم اصدار حديث من react-router-dom والذي لم يعد يدعم الوظيفة Switch ولا Redirect، ونستخدم Routes بدلاً عنها ولذلك يجب ان تقوم بتعديل الكود : import React from 'react'; import { BrowserRouter,Switch, Route } from 'react-router-dom'; import HomePage from './HomePage'; import './App.css'; function App() { return ( <BrowserRouter> <Switch> <Route exact path="/" component={HomePage} /> {/* Other routes here */} </Switch> </BrowserRouter> ); } export default App; للشكل التالي : import React from 'react'; import { BrowserRouter, Routes, Route, Navigate } from 'react-router-dom'; import HomePage from './pages/HomePage'; import './App.css'; function App() { return ( <BrowserRouter> <Routes> <Route exact path="/" element={HomePage} /> <Route path="*" element={<Navigate replace to="/" />} /> {/* Other routes here */} </Routes> </BrowserRouter> ); } export default App; وكذلك هنالك مشكلة في الـ HomePage.jsx حيث لا يمكن استخدام الـ Routes اكثر من مرة داخل التطبيق، وكذلك هنالك مشكلة ثانية وهي انك كنت تستدعي الـ App داخل الـ HomePage والـ HomePage داخل الـ App. ولحل المشكلة جرب تعديل الكود في HomePage للشكل : import React from 'react'; import ButtonTest from './btnPage'; const HomePage = () => { return ( <div> <ButtonTest /> </div> ); }; export default HomePage;