عمر قره محمد

الخطأ في عملية الاستيراد للبيانات، لاحظ : // الكود الخاص بك import { hp1 } from './../images/hp-1.png' import { asus1 } from '../images/asus-1.png' import { asus2 } from '../images/asus-3.png' import { dell1 } from '../images/dell-1.png' import { dell2 } from '../images/dell-2.png' import { dell3 } from '../images/dell-3.png' import { hp2 } from '../images/hp-2.png' import { hp3 } from '../images/hp-3.png' import { lenovo1 } from '../images/lenovo-1.png' import { lenovo2 } from '../images/lenovo-2.png' import { lenovo3 } from '../images/lenovo-3.png' import { toshiba1 } from '../images/toshiba-1.png' import { toshiba2 } from '../images/toshiba-2.png' import { toshiba3 } from '../images/toshiba-3.png' import { product1 } from '../images/product-1.png' import { product2 } from '../images/product-2.png' import { product3 } from '../images/product-3.png' import { product4 } from '../images/product-4.png' import { product5 } from '../images/product-5.png' import { product6 } from '../images/product-6.png' import { product7 } from '../images/product-7.png' import { product8 } from '../images/product-8.png' // الشكل الصحيح هو import hp1 from './../images/hp-1.png' import asus1 from '../images/asus-1.png' import asus2 from '../images/asus-3.png' import dell1 from '../images/dell-1.png' import dell2 from '../images/dell-2.png' import dell3 from '../images/dell-3.png' import hp2 from '../images/hp-2.png' import hp3 from '../images/hp-3.png' import lenovo1 from '../images/lenovo-1.png' import lenovo2 from '../images/lenovo-2.png' import lenovo3 from '../images/lenovo-3.png' import toshiba1 from '../images/toshiba-1.png' import toshiba2 from '../images/toshiba-2.png' import toshiba3 from '../images/toshiba-3.png' import product1 from '../images/product-1.png' import product2 from '../images/product-2.png' import product3 from '../images/product-3.png' import product4 from '../images/product-4.png' import product5 from '../images/product-5.png' import product6 from '../images/product-6.png' import product7 from '../images/product-7.png' import product8 from '../images/product-8.png'

هذه مشكلة مختلفة، هل يمكنك مشاركة ملفات المشروع بالكامل حتى استطيع الاطلاع على سبب المشكلة.

استدعي البيانات بالشكل import data from '../data' بدون الأقواس {} وذلك لانك قمت بتصدير الـ data كـ default في الملف data.js. اعرف اكثر عن الـ export والـ import من موسوعة حسوب

لا اعتقد انه هنالك طريقة مدمجة في bootstrab للقيام بذلك، ولكن يمكنك فعل ذلك باستخدام js بسهولة : <!-- Password field --> Password: <input type="password" value="FakePSW" id="myInput" /> <!-- An element to toggle between password visibility --> <input type="checkbox" onclick="myFunction()" />Show Password <script> function myFunction() { var x = document.getElementById("myInput"); if (x.type === "password") { x.type = "text"; } else { x.type = "password"; } } </script>

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

اطلعت على المشروع الخاص بك وملاحظاتي هي ملاحظات تصميمية بشكل رئيسي. حيث ان الموقع الخاص بك غير متوافق مع كل الشاشات ولا يراعي قواعد التصميم وتجربة المستخدم فمثلاً العناصر رقم 1 في الصورة يجب ان تكون اكبر حجماً وكذلك فإن العناصر رقم 2 ستكون افضل لو كانت كل واحدة منها بصفحة منفرده (عند النقر على ايقونة المصاريف يظهر لوحة ادخال المصاريف)، ورغم ذلك فأعتقد انه يمكنك تعديل المشروع بسهوله. اعرف اكثر عن تصميم واجهة المستخدم اعرف اكثر عن تصميم تجربة المستخدم كما لاحظت انك استدعيت الـ static قبل الـ routes وهذا خاطئ، حيث ينبغي ان يكون الـ static بعد الـ routes : // الكود الخاص بك app.use(express.static(path.join(__dirname, 'public'))); app.use(expressValidetor()); app.use('/', indexRouter); app.use('/', usersRouter); // الشكل الصحيح هو app.use(expressValidetor()); app.use('/', indexRouter); app.use('/', usersRouter); app.use(express.static(path.join(__dirname, 'public'))); كما لاحظت انك لم تضع title ولا favicon ولا description للمشروع وتركت الاعدادات الافتراضية : ويمكنك تعديلها من ملف الـ index.html : <link rel="icon" type="image/x-icon" href="مسار الصورة"> <meta name="description" content="الوصف الذي تريده" /> <title>العنوان الذي تريده</title> في النهاية لاحظت بعض الاخطاء الاملائية في الكود الخاص بك واعتقد انه من المفيد ان تستخدم اضافة لتصحيح الاخطاء الاملائية مثل Code Spell Checker.

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

اعتقد انك تستخدمه على الحاسوب وذلك لأن chrome الحاسوب لا يدعم الخاصية بعد أيضاً، إنما كنت اتحدث عن chrome الجوال. اطلع على المتصفحات التي تدعم الـ theme-color

المشكلة غالباً في المتصفح الخاص بك حيث ان هذه الخاصية لا تعمل على كل المتصفحات وكذلك لا تعمل احياناً في themes من النوع dark. جرب فتح الموقع في متصفح مختلف مثل chrome.

ذلك لأن المسار الصحيح هو : ./to-do-img.ico.png وذلك لأن الصورة في نفس مستوى الملف index.html.

المسار الذي كتبته صحيح ولكن المشكلة أنه لا يمكنك الوصول إلى الصورة إذا كانت داخل مجلد الـ src وذلك بسبب عمليات التحزيم التي تجري في react. لحل المشكلة يمكنك وضع الصورة (أو نسخة منها) في مجلد الـ public.

مسارات الارشيف هي اقدم من المسارات الحالية، وذلك لأن الدورة تتجدد باستمرار ويتم إضافة مسارات جديدة بشكل دوري والمسارات القديمة توضع في الأرشيف حيث يمكنك الاطلاع عليها. و لست بحاجة لمشاهدة مسارات الأرشيف حتى تحصل على الشهادة وكل ما تحتاجه هو : إتمام أربعة مسارات تعليمية على الأقل التطبيق العملي مع المدرب، والاحتفاظ بالمشاريع العملية الناتجة لإرسالها للمراجعة رفع المشاريع على حسابك على GitHub أولًا بأول لمشاركتها معنا والنجاح بالامتحان النهائي. وكذلك فإن الأرشيف غير محسوب مع الـ 55 ساعة.

يجب ان يكون في الصفحة h1 واحد فقط وليس أكثر أو اقل، و يمكنك الاستغناء عنه في حال وجود title في الـ head الخاص بالصفحة. فإذا لم يكن هنالك h1 ولا title فهذا سيء للـ SEO بالفعل. والمقالات في العادة تحتوي على h1 وهو عنوان المقالة أما العناوين الفرعية والتي توجد ضمن المقالة فتكون h2 و العناوين الفرعية ضمن الفقرة الواحدة h3 وهكذا دواليك.

هنالك مشكلتان، الأولى في ملف الـ app وتحديداً في الوظيفة noteClicked : // الكود الخاص بك const noteClicked = (id) => { setCreating(false) let selectedNote = notes.find((note)=> note.id === id) setContent(selectedNote.content) setTitle(selectedNote.title) setShowNote(true) } // الكود الصحيح const noteClicked = (id) => { setCreating(false) // أو اي اسم آخر theClickedNote قم بتغير اسم المتغير إلى let theClickedNote = notes.find((note) => note.id === id) // selectedNote المسمات state قم بإضافته لل setSelectedNote(theClickedNote.id) setContent(selectedNote.content) setTitle(selectedNote.title) setShowNote(true) } حيث انك لم تكن تقوم بتعديل الـ state المسماة selectedNote في الوظيفة المسماة noteClicked. والمشكلة الثانية في ملف الـ Notes.js وتحديداً في السطر 13 حيث انك كتبت selectedNote بدلاً من note.id كباراميتر للوظيفة noteClicked الخاصة بتغيير الـ selectedNote وهذا ما سبب ان الـ selectedNote لا تتغير. // الكود الخاص بك noteClicked={() => noteClicked(selectedNote)} // الكود الصحيح هو noteClicked={() => noteClicked(note.id)}

هل يمكنك مشاركة مجلد الـ src بالكامل حتى يسهل علي الاطلاع على المشروع الخاص بك.

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

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

المشكلة ليست في الـ find ولكن في الشيء الذي تبحث عنه، حيث انك لا توفر الـ id الذي تبحث عنه في الوظيفة. وبالتالي فالـ filter ستعطيك مشكلة شبيهة بالسابق

يحدث ذلك لأن الشرط الذي كتبته داخل الـ find : note.id === notes[i].id يكون صحيحاً من اجل اول عنصر في المصفوفة دائماً، ليس هذا فقط بل إنه صحيح لكل عناصر المصفوفة. ولأن الوظيفة find مصممة لتعيد اول عنصر يحقق الشرط فلذلك تعيد العنصر الأول دائماً. ولحل المشكلة يجب ان تحصل على الـ id بطريقة مختلفة، مثل إضافة الوظيفة التي تريدها عند انشاء العنصر وإضافة الـ id الخاص به لهذه الوظيفة كالتالي : Notes?.map(note => ( <dev onClick = {() => noteClicked(note.id) }> {note.text} </dev> )) const noteClicked = (id) => { setCreating(false) let selectedNote = notes.find((note,i)=> note.id === id) console.log(selectedNote) }

هذا يحدث لأن المتغير active في الكود : <h2 className={`note ${active && "active"} `} onClick={noteClicked}> {title} </h2> حيث ان الكود : active && "active" // غير معرف active يصبح كالتالي لأم الـ undefined && "active" لحل المشكلة قم بوضع الوظيفة noteClicked داخل الملف الخاص بالمكون Note ونضيف كذلك الـ state المسماة active كالتالي : import React, { useState } from "react"; function Note({ title }) { const [active, setActive] = useState(); const noteClicked = () => { setActive(true); }; return ( <h2 className={`note ${active ? "active" : ""} `} onClick={noteClicked}> {title} </h2> ); } export default Note; وكذلك يفضل ان نغير الـ "active && "active إلى الشكل : active ? "active" : "" والذي يعني إذا كان active صحيحاً قم بإعادة "active" وإلا قم بإعادة "" (نص فارغ). وذلك لأن الشكل "active && "active يعيد كلاس بالشكل "note false" بينما الشكل الثاني يعيد "note " عندما يكون المتغير active غير صحيح.

اعتقد ان ذلك لأنك لم تستخدم المكون Notes في الكود الخاص بك جرب إضافة الـ : <Notes notes={notes} /> وانظر كيف انها ستعمل بنجاح

إذا استخدم الطريقة الأولى : { notes?.map(note => { return <Note key={note.id} title={note.title} content={note.content}/> }) }

يمكنك كتابته بالشكل التالي لتجاوز المشكلة : { arr.map((el, i) => { if (i < count) {return <Note title={el} key={i} i={i} /> }else { return ""} }) }

مرحباً محمود، جرب وضع إشارة استفهام بين الـ notes و الـ map كالتالي : notes?.map وهذا يعني إذا كانت الـ notes موجودة، قم بعمل map وإلا قم بإعادة undefined. { notes?.map(note => { return <Note key={note.id} title={note.title} content={note.content}/> }) } // وشكل آخر هو notes.lenght !== 0 && notes.map(note => { return <Note key={note.id} title={note.title} content={note.content}/> }) حيث أن الـ && تعني إذا كان الأول صحيحاً أعد الثاني.

عدل الـ map لتتحقق من الـ count قبل ان تقوم بطباعة العناصر كالتالي : // الكود الخاص بك { arr.map((el,i)=> ( <Note title={el} key={i} i={i} /> )) } // الشكل الصحيح { arr.map((el, i) => { // () لاحظ اننا غيرنا الأقواس كذلك لـ {} وليس // واضفنا الشرط كالتالي if (i < count) return <Note title={el} key={i} i={i} />; }) } حيث سيكون الـ count يساوي الصفر في البداية وسيكون الشرط خاطئاً بالنسبة لكل العناصر التي سيمر عليها في ال map. وعندما تنقر على الزر سيصبح ال count يساوي 1 وبالتالي سيكون الشرط محقق بالنسبة للعنصر الأول في الـ map فقط وبالتالي سيعيد Note للعنصر الأول فقط.