عمر قره محمد

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

جرب تعديل الكود للشكل التالي : let date1 = moment(date).fromNow(); بدلاً من الـ : let date1 = moment(date, "YYYY-MM-DD").fromNow();

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

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

بالتأكيد سيكون ثابت بما انه بالساعات، ستحتاج للإنظار لساعة حتى يتغير.

قم بتعريف المتغير خارج الدالة ولكن لا تعطيه أي قيمة ثم في داخل الدالة تقوم بإعطائه المعلومات التي تريدها، مثل : let firstName; // عرفنا المتغير خار ج الدوال جميعاً const fun1 = (data)=>{ firstName=data; // نسند القيمة للمتغير من الدالة الأولى } const fun2 = (data)=>{ console.log(firstName); // data سيعيد الـ } ولكن هذه الطريقة لن تعمل بالنسبة لك لأن الدالة الثانية لديك قد تحدث قبل ان تحدث الدالة الاولى وبالتالي سيكون المتغير firstName فارغاً أو يحتوي على معلومات المستخدم السابق. والشكل الاصح للعملية هو إضافة middleware تقوم بإحضار هذه البيانات من قاعدة البيانات في كل من الطلبين، والشكل الاعتيادي ان تستخدم هذه الـ middleware البيانات المخزنة في الـ token بعد التحقق منه لتقوم بإحضار بيانات المستخدم ثم تمرر هذه البيانات لكل الطلبات.

هنالك مكاتب جاهزة للقيام بهذه العملية lمثل : momentjs وتحصل على الوقت مثل الصورة التي شاركتها بالشكل : npm install moment --save import moment from 'moment'; moment('2013-03-01', 'YYYY-MM-DD').fromNow();

جرب حذف الحزمة live server وأعادة تنزيلها، وفي حال لم يعمل جرب اعادة تشغيل vs، وفي حال لم يعمل جرب إعادة تشغيل الحاسوب. في حال لم تفد الطرق السابقة، قم بمشاركة ملفات المشروع

هل يمكنك مشاركة ملفات المشروع بصيغة اخرى

جرب إضافة الـ effect التالي والذي يقوم بتعديل الحالة setQtyArray عند كل تعديل على الحالة cartItems في اللمف Cart.jsx : useEffect(() => { const ids = cartItems.map((item) => { return item.id; }); const filteredCartItems = qtyArray.filter((item) => ids.indexOf(item.id) !== -1); setQtyArray(filteredCartItems); }, [cartItems]);

جرب تعديل كود الـ login للشكل التالي : import { ChangeEvent, FormEvent, useRef, useState } from "react"; import { Link, Navigate } from "react-router-dom"; import "../scss/styles.scss"; import { UilEye, UilEyeSlash } from "@iconscout/react-unicons"; import api_key from "../Services/Api_Url"; import { LoginType, SignupType } from "../../types/mainTypes"; import axios from "axios"; import { useLogin } from "../Context/Login"; let emailReg = /^(([^<>()[\]\\.,;:\s@"]+(\.[^<>()[\]\\.,;:\s@"]+)*)|(".+"))@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\])|(([a-zA-Z\-0-9]+\.)+[a-zA-Z]{2,}))$/; export default function Login() { let { jwt, setJwt, setIsLoggedIn, isLoggedIn } = useLogin(); // email error message const emailRef = useRef<HTMLInputElement>(null); const emailErrorMessage = useRef<HTMLParagraphElement>(null); // email error message const passwordRef = useRef<HTMLInputElement>(null); const passwordErrorMessage = useRef<HTMLParagraphElement>(null); const [isShowPassword, setIsShowPassword] = useState(false); const LoginReq = async ({ email, password }: LoginType) => { const res = await axios.post(`${api_key}/auth/login`, { data: { email, password, }, }); let data = res.data; setJwt(data.data.accessToken); localStorage.setItem("jwt", data.data.accessToken); setIsLoggedIn(true); localStorage.setItem("isLoggedin", "true"); window.location.href = window.location.origin; // الكود المضاف }; function handleSubmit(e: FormEvent<HTMLFormElement>) { e.preventDefault(); // validate email if (emailRef.current.value.toLowerCase().match(emailReg) === null) { emailErrorMessage.current.innerText = "Please Enter A Valid Email !"; emailRef.current.classList.add("invalid"); } else { emailErrorMessage.current.innerText = ""; emailRef.current.classList.remove("invalid"); } // validate password if (passwordRef.current.value.length <= 6) { passwordErrorMessage.current.innerText = "Password Is Too Short !"; passwordRef.current.classList.add("invalid"); } else { passwordErrorMessage.current.innerText = ""; passwordRef.current.classList.remove("invalid"); } let inputs = [emailRef.current, passwordRef.current]; let invalidInputs = []; for (let i = 0; i < inputs.length; i++) { if (inputs[i].classList.contains("invalid")) { invalidInputs.push(inputs[i]); } } if (invalidInputs.length === 0) { // send req console.log(typeof emailRef.current.value); console.log(typeof passwordRef.current.value); LoginReq({ email: emailRef.current.value, password: passwordRef.current.value, }); } } const validateEmail = (e: ChangeEvent<HTMLInputElement>) => { const inputValue = e.target.value; const errorMessage = emailErrorMessage.current; // validate email if (inputValue.toLowerCase().match(emailReg) === null) errorMessage.innerText = "Please Enter A Valid Email !"; else errorMessage.innerText = ""; }; const validatePassword = (e: ChangeEvent<HTMLInputElement>) => { if (e.target.value.length <= 6) { passwordErrorMessage.current.innerText = "Password Is Too Short !"; } else { passwordErrorMessage.current.innerText = ""; } }; document.body.classList.add("login-page"); return ( <> {/* {isLoggedIn ? <Navigate to={"/"} /> : ""} الغي الكود التالي */} <div className='about'> <h1>Mohamed Montaser's Social Media</h1> <p style={{ textTransform: "capitalize" }}> Hello I'm mohamed montaser, I'm Building This Project To Improve my Fullstack Skills. I Hope You Enjoy With My Social Media Website </p> </div> <form id='form' className='form-container' onSubmit={handleSubmit} spellCheck='false'> <div className='form-control form-username'> <label htmlFor='email' className='label'> Email: </label> <input type='text' onChange={(e) => validateEmail(e)} id='email' ref={emailRef} autoFocus /> <p className='error-msg' ref={emailErrorMessage}></p> </div> <div className='form-control form-username'> <label htmlFor='password' className='label'> Password: </label> <div className='input'> <input type={isShowPassword ? "text" : "password"} id='password' ref={passwordRef} onChange={(e) => validatePassword(e)} /> <button type='button' onClick={(e) => setIsShowPassword(!isShowPassword)}> {isShowPassword ? <UilEyeSlash /> : <UilEye />} </button> </div> <p ref={passwordErrorMessage} className='error-msg'></p> </div> <input type='submit' value='Submit' /> <p className='register-link'> You Have Already An Account ? <Link to={"/register"}>Sign up</Link> </p> </form> </> ); }

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

جرب عمل reload بشكل تلقائي بعد عملية تسجيل الدخول : windows.location.reload() بحيث يتم إعادة تحميل الصفحة بعد عملية تسجيل الدخول بدلاً من ان تقوم بفعلها تلقائياً.

جرب الذهاب إلى File > Preferences > Settings ثم اكتب color في خانة البحث وحاول تعديل اللون من الخصائص التي ستظهر لك.

ليس لدي فكرة

الافضل برأيي أن تكمل دراستك في بلدك، فالدراسة الأكاديمية افضل دائماً ول كان التعليم ليس على قدر المستوى، ويمكنك متابعة الدورات فيما بعد دخول الجامعة.

نستخدمه عندما نريد ان نجعل العناصر تطفو بجانب بعضها البعض. يطبق على الـ header فقط ولا يطبق على العناصر التي تأتي بعده، ولكن عليك استخدام الـ clear على العنصر الذي يأتيب بعده مثل : <style> div { padding: 15px; } .div1 { background: red; float: left; } .div2 { clear: left; background: yellow; } .div3 { background: green; } </style> <body> <h2>Float and clear</h2> <div class="div1">Div 1</div> <div class="div2">Div 2</div> <div class="div3">Div 3</div> </body> انصحك بنسخ الكود السابق والتعديل عليه اكثر من مرة حتى تتعرف على الـ float بشكل افضل.

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

لحل مشاكل CSS لابد من ان تكون متمرس بشكل جيد في استخدم الـ developer tool الخاصة بالمتصفح. بحيث تتمكن بسهولة من تغيير اعدادات CSS التي تقوم بتطبيقها على العنصر وكذلك تستطيع التأكد بسهولة من ان التنسيقات التي اضفتها تم إضافتها بنجاح للعنصر. فأغلب مشاكل CSS تأتي من وجود مشكلة في الـ selector أو من وجود تنسيقات سابقة تمنع ظهور التنسيقات الحالية، وهنالك نوع ثالث من المشاكل وهي المشاكل المتعلقة بالجهل في الية عمل CSS ولحل هذه المشكلة يجب ان يكون لديك المهارة الكافية للبحث عن المشكلة، فإذا اردت توسيط عنصر من النوع inline يجب ان تضيف للأب text-align: center بينما إذا اردت ان توسيط عنصر من النوع block فيجب ان تعطيه width ومن ثم margin: auto وهذا النوع من الحلول بحاجة لخبرة ولن تستطيع حل هذه المشاكل بدون ان تملك مهارة في البحث. فمثلاً للبحث عن المشكلة السابقة يمكن ان نكتب how to center inline elements in CSS.

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

المشكلة تحدث لأن كل العناصر تتحكم في نفس الحالة 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. قد يفيدك النقاش التالي :