محمود سعداوي2

ما الفرق بين الطريقتين التاليتن في الربط بقواعد البيانات mongo db 1. mongoose.connect('mongodb://127.0.0.1:27017/my_db') .then( () => { console.log("connected to db") } ) .catch( (err) => { console.log(err) } ) 2. mongoose.connect('mongodb://localhost:27017/my_db') .then( () => { console.log("connected to db") } ) .catch( (err) => { console.log(err) } ) مع العلم أن الطريقة الثانية لم تنجح معي. شكرا.

السلام عليكم. أود رأيكم حول مشاريع متكاملة بلغة javascript(mern) ( واجهة أمامية و خلفية) يتم فيها استعمال معظم المفاهيم و تساعد تطور قدرات المبرمج. أنا فكرت في بناء الواجهة الخلفية لمشروع تطبيق ملاحظات الذي تم إنشاؤه بواسطة react في دورة البرمجة بلغة الجافا سكريبت. شكرا لكم.

السلام عليكم. كيف يمكن الحصول على كلمة مرور عند استخدام mongo db. و هل أن كل قاعدة بيانات لها كلمة مرور خاصة أم يقع اعتماد كلمة مرور واحدة لكل قواعد البيانات. شكرا.

في الواقع و جدت الحل بفضلكما في الأول كان يجب إضافة const cors = require("cors") app.use(cors()) ثم قمت بإضافة async await داخل الخطاف useEffect() لم أقم بتغيير Axios أستاذ @Mustafa Suleiman في كل الحالات شكرا لكما أستاذ @Mustafa Suleiman @عمر قره محمد

السلام عليكم. يظهر لي الخطأ التالي Uncaught runtime errors: × ERROR Network Error AxiosError: Network Error at XMLHttpRequest.handleError (http://localhost:3000/static/js/bundle.js:40937:14) الكود import Axios from "axios" import { useEffect, useState} from 'react' const [users, setUsers] = useState([]) useEffect(()=> { Axios.get("http://localhost:5000/users") .then(res => setUsers(res.data)) } ,[]) مع العلم أن السيرفر يعمل بشكل جيد يعني تظهر كافة البيانات عند إدخال الرابط التالي http://localhost:5000/users شكرا

السلام عليكم. في كورس تطوير المواقع بلغة الجافاسكريبت نستخدم mongodb. لكن يوجد الكثير ممن يستخدم mongodb atlas. هل يوجد الكثير من الفروقات بينهما. أم أنهما يشبهان بعضهما إلى حد كبير . شكرا.

السلام عليكم. أريد رفع رفع مشروع ريآكت على منصة netlify عن طريق المستودع github مثلما هو مبين بالرابط التالي. المشكل هو أن الموقع لم يرفع منذ أكثر من 45 دقيقة. قمت بإعادة الرفع أكثر من مرة. هذا رابط المشروع على github. شكرا على التوضيح.

السلام عليكم. أود القيام بtimer قصد حساب وقت محدد. المشكل الذي إعترضني هو زيادة 2ثواني في كل مرة. لم أدر لماذا. الكود const [timer, setTimer] = useState(0) const format = (time) => { let hours = Math.floor((time / 60 / 60) % 24); let minutes = Math.floor((time / 60) % 60); let secondes = Math.floor(time % 60); hours = hours < 10 ? "0" + hours : hours; minutes = minutes < 10 ? "0" + minutes : minutes; secondes = secondes < 10 ? "0" + secondes : secondes; return hours + ":" + minutes + ":" + secondes; }; useEffect(() => { setInterval(() => { setTimer(timer => timer + 1); }, 1000); }, []); شكرا

تفضلsrc.zip

السلام عليكم. أواجه مشكل في عدم ظهور الصور على صفحة الويب. الصورة التالية توضح كيفية تموضع الملفات قمت بوضع الصور في ملف projects.js export const projects = [ { id: 0, title: "Animated Navigation", description: 'animated navbar without any library using react hooks', image: '../../assets/project-images/animated-navigation.jpg', demo: 'https://react-animated-navigation.netlify.app', }, { id: 1, title: "Netflix Navigation", description: 'animated navbar without any library using react hooks', image: '../../assets/project-images/netflix-navigation.JPG', demo: 'https://react-netflix-navigation.netlify.app', }, { id: 2, title: "Netflix Navigation", description: 'rotating animated navbar using only react hooks without any library', image: '../../assets/project-images/rotating-animation.JPG', demo: 'https://react-js-rotating-navigation.netlify.app', }, { id: 3, title: "Music Player", description: 'rotating animated navbar using only react hooks without any library', image: '../../assets/project-images/music-player.JPG', demo: 'https://audio-player-with-react.netlify.app', }, { id: 4, title: "Music Player", description: 'animated search input using only react hooks without any library', image: '../../assets/project-images/hidden-search-widget.JPG', demo: 'https://animated-search-react.netlify.app', }, { id: 5, title: "Music Player", description: 'basic project to understand array methods like filter sort and reduce using react js', image: '../../assets/project-images/array-methods.JPG', demo: 'https://react-array-methods.netlify.app/', }, ] ملاحظة: عندما أضع الماوس على image تظهر الصورة. قمت بالتثبت من مسميات الصور و لم أجد أي خلل. الرجاء المساعدة.

السلام عليكم. عند النقر على الزر الأيمن للماوس لملف ما أريد أن يظهر لي خيار الفتح بواسطة vs code. شكرا.

السلام عليكم. قمت بإنشاء مشروع قمت فيه بتنفيذ json-server (implementing). بحيث: في البداية قمت بتنزيل json server ثم قمت بإنشاء db.json ثم قمت بطلب البيانات (api request) "scripts": { "start": "react-scripts start", "json-server": "json-server --watch db.json --port 5000", "test": "react-scripts test", "eject": "react-scripts eject", "predeploy" : "npm run build", "deploy" : "gh-pages -d build" }, مثلما تلاحظون يوجد port5000 . كيف يمكنني رفع هذا المشروع على منصة netlify. مع العلم أنني قمت برفع المشروع بالطريقة الكلاسيكية (npm build) لكن دون أن تظهر المنتجات. الرابط: https://affariyett.netlify.app شكرا لكم.

السلام عليكم. من المعلوم أن مكتبة ريآكت تعتمد على react-router-dom في الربط بين الصفحات (روابط خارجية) لكن كيف الحال إذا تعلق الأمر بصفحة ويب واحدة (landing page مثلا). هل الأمر يعتمد على anchor مثلما هو الحال في الجافاسكريبت أم يوجد نوع آخر من الروابط التي توفرها react-router-dom. شكرا.

السلام عليكم و عيد مبارك. أريد القيام بanimation عند الscroll في صفحة الويب كما يلي: المشكل الحاصل هو في القيمة percentage لكل عنصر حيث تمت إعادة نفس القيمة لكل العناصر (35%). الكود الذي قمت به: function App() { const skills = [ { id: 1, language: 'html', progress: 70, }, { id: 2, language: 'css', progress: 65, }, { id: 3, language: 'javascript', progress: 50, }, { id: 4, language: 'github', progress: 40, }, { id: 5, language: 'jest', progress: 35, }, ] const progressAnim = useRef() const [percentage, setPercentage] = useState(1) window.onscroll = function () { if (window.scrollY >= progressAnim.current.offsetTop - 300) { skills.map(skill => setPercentage(skill.progress)) } } return ( <div className="App"> <Section src = {img_1}/> <Section src = {img_2}/> <div className="skills" ref={progressAnim}> { skills.map(skill => ( <Progress key = {skill.id} percentage = {percentage} circleWidth = "200" name = {skill.language} /> )) } </div> </div> ); }

السلام عليكم. لدي ملف يحتوي صور و أيقونات و نص بصيغة pdf. هل من الأفضل وضع هذا الملف داخل public أو src. شكرا.

السلام عليكم أريد القيام ب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); } } شكرا على المساعدة

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

السلام عليكم. في المشروع التالي: https://audio-player-with-react.netlify.app/ عندما أضغط على previoud btn أو next btn (في حالة الموسيقى شغالة) الموسيقى لاتعمل إلا بعد النقر على زر التشغيل. الرجاء المساعدة شكرا.

تم التوجه للرابط الخارجي دون التحقق من البيانات للأسف نفس المشكل

السلام عليكم. في الكود التالي يقع التوجة للرابط الخارجي إلا بعد النقر مرتين. لماذا. الكود: // form validation const [validate, setValidate] = useState([]) const [validMessage, setValidMessage] = useState(false) const user_regex = /^[A-Za-z]{3,10}$/; const password_regex = /^(?=.*[0-9])(?=.*[a-zA-Z])(?=.*[!@#$%^&*])[a-zA-Z0-9!@#$%^&*]{8,20}$/; const email_regex = /^(([^<>()\[\]\\.,;:\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,}))$/; const validated = () => { return <ValidateMessage/> } const formValidation = () => { const validate = [] if (!user_regex.test(values.username)) { validate.push("Username should be 3-10 characters and shouldn't include ni special character ni numbers ni spaces!") } if (!email_regex.test(values.email)) { validate.push('Invalid email: The email should be like aaa@aa.aa') } if (!password_regex.test(values.password)) { validate.push("Password should be 8-20 characters and include at least 1 letter, 1 number and 1 special character!") } setValidate(validate) if (validate.length === 0) { setValidMessage(true) } } const handleClick = (e) => { e.preventDefault(); formValidation() if (validMessage) { setTimeout(() => window.open("https://github.com/Saadaoui-Forkan/react-forms/tree/main/responsive_form", '_self'), 1500) } } شكرا جزيلا.

السلام عليكم. في المثال التالي: عند القيام بfocus لأي عنصر تصعد label إلى الأعلى و أكتب أنا ما أريد. المشكل الذي حصل لي هو في إستخدام onBlur حيث ترجع label إلى الأسفل دائما (ما أريده هو إذا كانت input فارغة ترجع إلى الأسفل أما إذا كانت input غير فارغة تبقى label في الأعلى. قمت بالتجربة التالية const [focus, setFocus] = useState(false) const [idx, setIdx] = useState(null) const handleFocus = (id) => { setFocus(true) setIdx(id) } const handleBlur = (e) => { console.log(e.target.value) if (values.email.length !== 0) { setFocus(false) } } <FormInput key = {wrap.id} {...wrap} value = {values[wrap.name]} handleChange = {handleChange} handleFocus = {handleFocus} focus = {focus} idx = {idx} handleBlur = {handleBlur} /> ***************************************** FormInput.js ------------ <h5>{inputProps.title}</h5> <input name = {inputProps.name} type = {inputProps.type} className = "input" onChange = {handleChange} onFocus = {()=>handleFocus(inputProps.id)} onBlur = {handleBlur} /> شكرا لكم

كيف يكون ذلك. أنا قمت بالطريقة و لكن لم يتغير شيء extend: { screens: { 'xs': '480px', 'sm': '640px', 'md': '768px', 'lg': '1024px', 'xl': '1280px', '2xl': '1536px', },

السلام عليكم. في المثال التالي أريد أن يكون هناك اثنين كارد في الشاشات المتوسطة و كارد واحد في الشاشات الصغيرة الكود الجي قمت به: App <div className=" container flex gap-3 xl:gap-8 items-center justify-center "> <Card icon = {<AiFillFacebook size={30}/>} cardClass = 'card before:bg-facebook' iconClass = 'text-facebook' /> <Card icon = {<AiFillTwitterSquare size={30}/>} cardClass = 'card before:bg-twitter ' iconClass = 'text-twitter' /> <Card icon = {<AiFillInstagram size={30}/>} cardClass = 'card before:bg-gradient-to-r before:from-amber-500 before:via-orange-600 before:to-purple-600' iconClass = 'text-instagram' /> <Card icon = {<AiFillYoutube size={30}/>} cardClass = 'card before:bg-youtube' iconClass = 'text-youtube' /> </div> Card <div className={cardClass}> <div className=" flex gap-1 items-center justify-center"> <span className={iconClass}> {icon} </span> <span className="">@abcd</span> </div> <h2 className=" text-center font-bold text-5xl pt-6"> 1987 </h2> <p className=" text-center text-md uppercase tracking-[3px] text-stone-400 pb-6"> Followers </p> <div className=" flex gap-1 items-center justify-center text-mainGreen"> <span> <RiArrowUpSFill size={22}/> </span> <span>Today</span> </div> </div> index.css .card { @apply container mt-6 bg-stone-200 rounded py-6 before:content-[''] before:w-full before:h-1 relative before:absolute before:left-0 before:top-0 overflow-hidden w-1/4 md:w-1/2 sm:w-full } المشكل أنه لم يتم تفعيل md:w-1/2 sm:w-full حيث أن عدد الكارد لا يتغير في الشاشات الصغيرة و المتوسطة شكرا لكم

السلام عليكم. كيف يمكن تمرير <Icon /> داخل مكون في react js إستعملت الكود التالي <Card Icon = '<AiFillFacebook size={22}/>' /> <Card Icon = '<AiFillTwitterSquare size={22}/>' /> <Card Icon = '<AiFillInstagram size={22}/>' /> <Card Icon = "<AiFillYoutube size={22}/>" /> المتصفح لم يستطع قراءة Icon شكرا على المساعدة

السلام عليكم. هل من توضيح حول الفرق بين npm start و npm run start. و ماهو الظرف الأنسب لاستعمالهما. ( في الواقع أنا إعتدت فقط على إستعمال npm start في مشاريع react js) شكرا لكم.