عمر قره محمد

المشكلة تحدث لأن كل العناصر تتحكم في نفس الحالة qty. لحل المشكلة جرب تعديل الكود للشكل التالي، حيث ننشئ مكون جديد خاص بالعنصر الداخل ونضيف حالة qty لكل عنصر على حدى : import React,{useState} from 'react' function Cart({cartItems, setModal, removeFromCart, addToCart}) { return ( <div className='cart-modal'> { cartItems.length === 0 ? <h1 className='empty-cart'>Your Cart Is Empty</h1> : cartItems.map((cartItem,index) => ( <ItemComponent cartItem={cartItem} key={index} />)) } <div className="cart-summary"> <h2 className='cart-summary-title'>Total: {}$</h2> <button type='button' onClick={()=>setModal(false)}>CLOSE</button> </div> </div> ) } const ItemComponent = ({cartItem , removeFromCart})=>{ let [qty, setQty] = useState(1) return( <div className="cart-product"> <img src={cartItem.image} alt="" srcSet="" /> <div className="cart-product-info"> <h3 className='cart-price'>{cartItem.price}$</h3> <div className="quantity"> <button type='button' className='plus' onClick={()=>setQty(qty++)} >+</button> <h4 className='qty'>{qty}</h4> <button type='button' className='minus' disabled={cartItem.qty <= 1} onClick={()=>setQty(qty --)} >-</button> <button type='button' className='remove'> <i className="fa-solid fa-trash" onClick={()=>removeFromCart(cartItem.id)}></i> </button> </div> <h2 className='total'>{cartItem.price * qty}</h2> </div> </div> ) } export default Cart

هل يمكنك مشاركة جميع الملفات.

يجب اضافة package-lock.json إلى ملفات المشروع اثناء رفعه على GitHub وذلك من اجل الاسباب التالية : وصف تمثيل واحد لشجرة التبعية بحيث يضمن أعضاء الفريق وكذلك عمليات النشر و وعمليات التكامل المستمر أن تقوم بتثبيت نفس التبعيات تمامًا. يقوم بتوفير وسيلة للمستخدمين "للسفر عبر الزمن" إلى الحالات السابقة للوحدات node_modules دون الحاجة إلى الالتزام بالدليل نفسه. لتسهيل رؤية أكبر للتغييرات الشجرية من خلال عرض الاختلافات في مصدر قابل للقراءة. يحسّن عملية التثبيت من خلال السماح لـ npm بتخطي الحزم الفرعية المتكررة للحزم المثبتة مسبقًا.

جرب استخدام الـ em أو rem وبدلاً من تغيير القياسات لكل عنصر على حدا باستخدام الـ media query، تقوم بتغيير الـ font-size للأب فقط. حيث أن em هي قياس الـ font-size للعنصر الأب المباشر، بينما الـ rem هي قياس الـ font-size للعنصر الـ root للصفحة.

تشفير الصورة إلى base64 يجعلها اكبر من حجمها الطبيعي وبالتالي سيصبح لديك ضعف في الأداء أثناء جلب الصور. وكذلك الامر فإن السيرفر سيحتاج إلى جلب الصورة من قاعدة البيانات ومن ثم إرسالها إلى المستخدم بدلاً من ارسالها مباشرةً من نظام الملفات. الافضل هو استخدام الـ Api بالتأكيد، والافضل من ذلك هو استخدام Api من طرف خارجي مثل cloudinary. قد يفيدك النقاش التالي :

المشكلة في العنصر contact-content حيث اعطيته padding من اليمين واليسار بقيمة 600 بيكسل ولذلك فلن يكون متناسب مع جميع الشاشات ولاسيما الشاشات الاصغير من 600 بيكسل. لحل المشكلة جرب تعديل الكود للشكل التالي : .contact-content { display: flex; align-items: center; height: 300px; width: 200px; flex-wrap: wrap; justify-content: center; margin: auto; }

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

اعتقد ان سبب المشكلة هو انك تحاول إضافة after إلى العنصر من النوع img. وهذا غير صحيح في CSS. لحل المشكلة جرب الكود التالي : <div class="col"> <div class="imageContainer"> <img src="../images/a.jpg" alt=""> </div> </div> وفي css : .imageContainer { width: 260px; position: relative; text-align: center; } .imageContainer img { width: 100%; } .imageContainer::after { content: ""; display: block; width: 80px; height: 100%; background-color: var(--scolor); top: 0; right: 0; position: absolute; } حيث اضفنا حاوية جديدة تحتوي على الصورة و الـ after.

يوجد مشكلتين : الاولى هي انك اخطأت في استيراد الملفات، ولحل المشكلة يجب اضافة : ./css/ قبل اسم الملف في الـ href الخاصة بكل من ملفات الـ font awesome. جرب تعديل الكود للشكل : <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>ayman's first project</title> <!-- main css file --> <link rel="stylesheet" href="./css/style.css"> <!-- normalize the css --> <link rel="stylesheet" href="./css/normalize.css"> <!-- google fonts --> <link rel=" preconnect" href="https://fonts.googleapis.com"> <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin> <!-- icon css --> <link rel="stylesheet" href="./css/all.min.css"> </head> <body> <i class="fa-solid fa-mustache"></i> <i class="fa-duotone fa-pen-nib"></i> </body> </html> والمشكلة الثانية هي ان الايقونات التي استخدمتها هي ايقونات غير مجانية، وإذا اردت استخدام الايقونات المجانية يجب ان تحدد على علامة free في محرك البحث الخاص بـ fontawesome.

هل يمكنك مشاركة ملفات المشروع بالكامل ؟

جرب بناء موقع متكامل خاص بك، وما بعد ذلك فهو يعتمد على المجال الذي تريد التوجه إليه، إذا كنت تريد الاكمال في مجال تطوير الواجهات يمكنك تعلم react، بينما إذا كنت تريد الالتفات إلى تطوير الواجهات الخلفية فيمكنك البدء في node. قد يفيدك الاطلاع على المقال التالي :

لا يوجد مدة زمنية محددة لإنهاء الكورس، والسؤال الاصح هو متى استطيع التقدم إلى الامتحان والحصول على الشهادة ؟ ويمكنك التقدم إلى الامتحان بمجرد تجاوزك 4 مسارات من مسارات الدورة ولكن بشرط أن تكون قد رفعت المشاريع التي تقوم بالتطبيق عليها خلف المدرب على حسابك على GitHub، حيث سيتم طلب هذه المشاريع عند التقدم إلى الامتحان. ويمكنك الاستمرار في التقدم للامتحان حتى تحصل على الشهادة. وحتى بعد الحصول على الشهادة، فسيظل بإمكانك الوصول إلى الدورات والمسارات الجديدة التي يتم إضافتها كل فترة.

جرب تعديل الكود للشكل التالي : const handelColor=(colorr)=>{ setDatacolor(colorr) document.documentElement.style.setProperty('--main-color',colorr) } بحيث يتم استخدام الـ colorr بدلاً من الـ color في اعطاء اللون.

الكود جيد جداً، واستخدام الـ grid جيد كذلك، جرب اضافة التنسيق التالي : * { box-sizing: border-box; } وتعديل التنسيقات التي تعطيها للـ div كالتالي : div { width: 100%; height: 200vh; background-color: #eee; padding: 50px; display: grid; grid-template-columns: repeat(4, 1fr); grid-template-rows: repeat(3, 2fr) 1.5fr; grid-template-areas: "osama osama ahmed shady" "moh-i moh-moh moh-moh shady" "moh-i ezz ezz shady" "moh-s ibra gamal eman"; gap: 5px; } لجعل ال grid على مقاس الشاشة. سيكون من الجميل ان تقوم بعمل dynamic grid بحيث يقوم بإنشاء صفوف بشكل تلقائي وذلك إن اردت التدرب بشكل اعمق على الـ grid.

يبدو انك لم تقم بمشاركة الكود الخاص بك

ال (DOM) Document Object Model هو تمثيل لل Document بشكل Objects حتى يسهل التعامل معه بشكل برمجي، أي انه يمثل كل ما تراه على صفحة الويب بشكل Objects تستطيع الوصول له وتعديله برمجياً. مثال عليها document.getElementById("p1").innerHTML = "New text!"; اطلع اكثر عن الـ dom من خلال هذه المقالة :

هل يمكنك مشاركة المجلد الحاوي على المشروع بالكامل

مرحباً محمود عدل الوظائف الخاصة بإضافة مستخدم جديد للشكل التالي : async function fetchRandomUsers() { const response = await fetch('https://randomuser.me/api') const responseData = await response.json() const newUser = { user: `${responseData.results[0].name.first} ${responseData.results[0].name.first}`, // money: formatMoney(Math.floor(Math.random() * 1000000)) الكود القديم *************** money: Math.floor(Math.random() * 1000000) // الكود الجديد **************** } setData([newUser]); } // Add User const handleAdd = async () => { const response = await fetch('https://randomuser.me/api'); const responseData = await response.json(); const newUser = { user: `${responseData.results[0].name.first} ${responseData.results[0].name.last}`, // money: formatMoney(Math.floor(Math.random() * 1000000)) الكود القديم *************** money: Math.floor(Math.random() * 1000000) // الكود الجديد **************** }; setData([...data, newUser]); }; بحيث لا تقوم بفرمتت المال في هذه المرحلة، وإنما تقوم بفرمتته عند عرضه وذلك في المكون Main.jsx : import React from "react"; function Main({ data }) { // Format number as money function formatMoney(number) { return "$" + number.toFixed(2).replace(/\d(?=(\d{3})+\.)/g, "$&,"); } return ( <div className='main'> <h2> <strong>Person</strong> Wealth </h2> {data.map((user, index) => ( <div key={index}> <h4 className='person'> <strong>{user.user}</strong> {formatMoney(user.money)} </h4> </div> ))} </div> ); } export default Main;

NaN تنتج عن اجراء عملية حسابية بين نص ورقم وهي تعني (ليس رقماً) جرب تعديل الكود للشكل : // Double Money const doubleMoney = () => { const newData = data.map(user => { return {...user, money: Number(user.money) * 2} }); setData(newData); }; وجرب طباعة الـ user.money فإذا كانت تحتوي نصوص مثل $ أو غيرها فإنك بحاجة لحذف هذه النصوص قبل ضربها بـ 2. أما في هذه فالصفحة ترجع فارغة و لايظهر أي خطأ في الكونسول اعتقد ان سبب المشكلة هنا هو نفسه، حيث يبدو أن الـ item.money ليست رقماً قابل للمقارنة بل هي عبارة عن نص، ويجب عليك ان تقوم بطباعة الـ item.money للتأكد من اهنها رقم، وفي حال لم تكن رقماً يجب ان تحاول ان تحولها إلى رقم بحذف النصوص ثم استخدام الوظيفة : Number(item.money) واعتقد ان باقي المشاكل جميعها ترجع لنفس السبب، فعليك تحويل الـ money إلى رقم قبل اجراء كل هذه العمليات الحسابية. في حال لم تنجح بتحويل الـ money إلى رقم، ربما يكون من الافضل مشاركة ملفات المشروع بالكامل.

نعم جيد، وسيكوف افضل إذا قمت بتعديل النص بحيث يصبح اكثر قابلة للقراءة، مثل تغيير لونه و تعديل التباعد بين السطور والاحرف وتغيير الخط وكذلك جعل لون الارقام الموجودة في الزوايا اكثر تبايناً حتى يظهر. وسيكون جميلاً لو قمت بتعديل الوان المشروع وإضافة بعض الـ border-radius لكل من العناصر المستخدمة.

جرب تعديل الكود للشكل التالي : const [data, setData] = useState([]); async function fetchRandomUsers() { const response = await fetch("https://randomuser.me/api"); const responseData = await response.json(); // data عدلت اسم المتغير حتى لا يكون بنفس اسم الحال; const newUser = { user: `${responseData.results[0].name.first} ${responseData.results[0].name.first}`, money: Math.floor(Math.random() * 1000000), }; setData([...data, newUser]); return newUser; } useEffect(() => { // اضفت حلقة تتكرر 5 مرات ليتم اضافة 5 مستخدمين (async () => { const users = []; for (let i = 0; i < 5; i++) { const newUser = await fetchRandomUsers(); users.push(newUser); } setData(users); })(); }, []);

عدل الكود للشكل : function App() { const [data, setData] = useState([]); async function fetchRandomUsers() { const response = await fetch('https://randomuser.me/api') const responseData = await response.json() // data عدلت اسم المتغير حتى لا يكون بنفس اسم الحالة const newUser = [ ...data, // الكود المضاف { user: `${responseData.results[0].name.first} ${responseData.results[0].name.first}`, money: Math.floor(Math.random() * 1000000) } ] setData(newUser) } useEffect(() => { // اضفت حلقة تتكرر 5 مرات ليتم اضافة 5 مستخدمين for (let i = 0; i < 5; i++) { fetchRandomUsers(); } }, []); وسيتم اضافة اكثر من يوزر والافضل هو ان تحضر عدد من المستخدمين العشوائيين في طلب واحد باستخدام الـ api : https://randomuser.me/api?results=10 بدلاً من احضار مستخدم عشوائي واحد اكثر من مرة

لست بحاجة لمعرفة HTML , CSS قبل تعلم JavaScript الخاصة بدورة علوم الحاسوب، وذلك لأن JavaScript يتم شرحها في سياق أساسيات البرمجة وليس في سياق تطوير واجهات المستخدم، فلن تتعامل مع المتصفح و الـ HTML , CSS في هذا المسار وإن كنت تريد تعلم تطوير واجهات المستخدم فربما عليك التفكير بدورة تطوير واجهات المستخدم أو دورة تطوير التطبيقات باستخدام JavaScript.

لقد قمت بالاطلاع على الـ api الذي قمت بمشاركته وهو يحتوي على user واحد فقط جرب الذهاب للرابط ومشاهدة النتيجة : https://randomuser.me/api أما إذا اردت احضار اكثر من user فأنت بحاجة لاستخدام الرابط التالي : https://randomuser.me/api/?results=20 حيث تضيف ال query المسماة results و تعطيها عدد المستخدمين الذين تريد الحصول عليهم وفي الرابط السابق اضفت العدد 20. جرب فتح الرابط السابق وستلاحظ ان الـ results هي مصفوفة تحتوي على 20 مستخدم مختلف.

لم يتم ارفاق الsrc