عمر قره محمد

يبدو ان المشكلة انك استخدمت state واحد من النوع isLike لكل العناصر وبالتالي كل العناصر اصبح مربوطة بالـ state نفسه. ولحل المشكلة قم بعمل state مخصص للـ isLike لكل عنصر على حدى، وذلك بنقل الاكواد : const [isLike,setIsLike] = useState(false) const toggleLikeBtn = () =>{ setIsLike(!isLike) } إلى داخل الـ CartProducts.js كالتالي : import React,{useState} from 'react' function CartProduct({id,price,src,title,detail}) { const [isLike,setIsLike] = useState(false) const toggleLikeBtn = () =>{ setIsLike(!isLike) } return ( <div className="card"> <div className='product-price'>{price} DT</div> <img src={src} className="card-img-top" alt="..."/> <div className="card-body"> <h5 className="card-title">{title}</h5> <p className="card-text">{detail}</p> <div className='cart-btns'> <div className='toggle-like'> <button type="button" className="btn btn-outline-danger" onClick={toggleLikeBtn}> {isLike ? "Dislike" : "Like"} </button> </div> <button type="button" className="btn btn-outline-primary">Add To Cart</button> </div> <div className='rating'> <i className="fa-solid fa-star"></i> <i className="fa-solid fa-star"></i> <i className="fa-solid fa-star"></i> <i className="fa-solid fa-star"></i> <i className="fa-solid fa-star"></i> </div> </div> </div> ) } export default CartProduct

نعم تماماً

تستطيع انشاء السيرفر backend وقاعدة البيانات و نظام التحقق و الوصول في firebase، وانت تتحدث هنا عن تطبيق شبيه بـ YouTube وهذا يعني فيديوهات كبيرة الحجم وبالتالي ستحتاج استخدام Cloud Storage المقدمة من firebase حتى تخزن هذه الفيديوهات. وهذه الاشياء كلها هي عبارة عن ادوات تسهل عليك بناء التطبيق الخاص بك ولكن لا تستطيع بناء التطبيق بالكامل باستخدام firebase ولذلك ستحتاج أن تتعلم بيئة عمل لبناء هذه التطبيقات و لتستخدم هذه الميزات التي تقدمها firebase. اي ان firebase تستطيع ان تعمل كبديل عن الـ backend لتطيقك ولكنها لا تستطيع العمل كبديل عن الـ frontend.

نعم بالتأكيد يمكنك فعل ذلك باستخدام Firebase Authentication التي تقدمها Firebase. ويمكنك الاطلاع على التوثيق الرسمي لـ Firebase Authentication من هنا

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

لقد اشرت لك في الرد الأول إلى توثيق موسوعة حسوب حول الاستيراد التصدير. ولكن باختصار، فإنه هنالك نوعين من التصدير وهما الـ export default و الـ export بدون default. فإذا كان التصدير باستخدام الـ export default تقوم بالاستيراد بدون المعقوفات وإذا كان باستخدام الـ export فقط عندها تقوم باستخدام المعقوفات. والـ export default تصدر متغير واحد فقط بينما الـ export تستطيع تصدير عدد غير محدود من المتغيرات. // إذا صدرت المتغير بالشكل export default example // تستورده بالشكل import example from "./example" // إذا صدرت المتغير بالشكل export example1; export example2; export example3; // تستورده بالشكل import {example1 , example2 , example3} from "./example" // وكذلك تستطيع تصديرالنوعين معاً export default example export example1; // والاستيراد يكون import example,{example1} from "./example"

الخطأ في عملية الاستيراد للبيانات، لاحظ : // الكود الخاص بك 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) }