عمر قره محمد

يحدث ذلك لأن الشرط الذي كتبته داخل الـ 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) }  

في هذه الإجابة أفترض أنك تستخدم الـ functional component.
في البداية يجب ان تعرّف state باسم notes كالتالي :
const [notes, setNotes] = useState([]); وبعد ذلك قوم بإحضار البيانات من الـ AsyncStorage في الـ useEffect ونضيف الـ [] الفارغة كباراميتر لها حتى تستدعى مرة واحدة عند فتح الصفحة. كالتالي :
const [notes, setNotes] = useState([]); useEffect(() => { const value = await AsyncStorage.getItem("notes"); const parsed = JSON.parse(value) setNotes(parsed); }, []); وتقوم بتعديل الكود الخاص بحفظ الـ notes في الـ asyncStorage ليصبح بالشكل :
const saveNoteHandler = async()=> { . . . try{ const da = [...notes , body]; await AsyncStorage.setItem("notes" , d); setNotes(da); . . . } catch(e){ console.log(e) } . . . } ولقد اعتمدت على الكود الذي استخدمته أنت في سؤالك السابق :
حيث ان الكود التالي :
const da = [...notes , body]; يعني ان تقوم بتوزيع الـ array  المسمى notes داخل الـ array المسمى da ثم تضيف الـ الكائن body لها ليصبح لديك array يحتوي كل البيانات السابقة بالإضافة للمكون الجديد.
والـ 
setNotes(da); حتى نقوم بحفظ البيانات في الـ state بعد حفظها في الـ AsyncStorage.
ليصبح الكود بالكامل :
const [notes, setNotes] = useState([]); useEffect(() => { const value = await AsyncStorage.getItem("notes"); const parsed = JSON.parse(value) setNotes(parsed); }, []); const saveNoteHandler = async()=> { . . . try{ const da = [...notes , body]; await AsyncStorage.setItem("notes" , d); setNotes(da); . . . } catch(e){ console.log(e) } . . . } وحتى نعرض هذه البيانات المحفوظة في الـ state نكتب :
{notes?.map((note , index) =>{ return ( <View key={index}> <Text>{note.name}</Text> <Text>{note.email}</Text> <Text>{note.pass}</Text> </View> ) })} حيث نقوم بعمل map على الـ state المسماة notes ولكل note نقوم بإعادة view تحتوي التفاصيل.
والـ key مهمة حتى يستطيع react متابعة الكائن الذي انشأته.
واشارة الاستفهام في notes?.map من اجل التأكد من أن notes موجودة، فإذا لم تكن موجودة لا يقوم بعمل map.

الكود يجب ان يكون كالتالي :
const [note, setNote] = useState({}); useEffect(() => { const value = await AsyncStorage.getItem("note"); const parsed = JSON.parse(value) setNote(parsed); }, []); في الكود السابق أفترض أنك تستخدم الـ functional component.
وعرفنا state باسم note وذلك باستخدام الـ hook الخاصة بذلك useState.
والـ [] الفارغة في الـ useEffect هي من اجل ان ينفذ الكود عند فتح الصفحة مرة واحدة فقط.
والـ parse هي عكس الـ stringify التي قمت بعملها قبل حفظ البيانات.
و الـ setNote هي لإضافة البيانات القادمة إلى الـ state المسماة note.
وعند اضافة الكود السابق سيصبح لديك وصول للعنصر note والذي يحتوي البيانات، وذلك لتكتب الكود :
<View> <Text>{note.name}</Text> <Text>{note.email}</Text> <Text>{note.pass}</Text> </View>  

غير الكود التالي :
win2=window.open(popunder[Math.floor(Math.random()*(popunder.length))],"",winfeatures) إلى الشكل :
win2 = window.open(popunder[Math.floor(Math.random() * popunder.length)], "_self", winfeatures); وذلك بإضافة الـ self_ بدلاً من الـ "" في الباراميتر الثاني للوظيفة open.
توثيق لـ window.open.
قد يفيدك الاطلاع على :
 

استخدم الأمر  git log حتى تسطيع معرفة المعرف الخاص بالـ commit :

قم بنسخ المعرف ثم كتابة الأمر :
git checkout المعرف_الذي_نسخته وبعدها قم بإنشاء branch جديد كالتالي :
git checkout -b newBranch حيث newBranch هو اسم ال branch الذي ستنشئه ويمكنك استخدام اي اسم تريده.
وبعدها تقوم برفع ال newBranch على GitHub :
git push origin newBranch:master حيث انني اعتبر ان الـ branch الأصلي هو الـ master.
وإذا أردت العودة إلى ال branch الأصلي الذي يحتوي كل الـ commits تستطيع فعل ذلك باستخدام الأمر :
git checkout master  

المشكلة أنك استخدمت نفس الـ key مرتين لاحظ :
[ { question : 'Q1', answer : 'answer1 our technology and expanding our product offering to stay at the cutting edge of technology', isOpen : false, }, { question : 'Q2', answer : 'answer2 our technology and expanding our product offering to stay at the cutting edge', isOpen : false, }, { // هنا key استخدمت نفس الـ // مرتين Q2 حيث كررت الـ question : 'Q2', answer : 'answer2 our technology and expanding our product offering to stay at the cutting edge of', isOpen : false, }, ] عدل الـ Q2 إلى Q3 وستحل المشكلة.

دورة JavaScript فيها شرح لكل من MongoDB و Express و React و Node والتي تختصر بـ MERN بالإضافة للمزيد من المهارات وتحتوي على مشاريع مبنية بهذا التقنية.
كما فيها شرح للـ  NEXT JS وهو يجمع كل من Express و React و Node.

هل تحاول تفعيل تسجيل الدخول باستخدام جوجل على موقعك ؟
فهو بالعادة يحتاج إلى ادخال الدومين الخاص بك بالإضافة إلى الصفحة التي سيتم منها تسجيل الدخول.
ضع في بالك بأن تطبيق جوجل حساس لحالة الرابط فـ http:// ليست مثل https:// و الرابط (/http://example.com)  ليس مثل الرابط (http://example.com) فقد يكون السلاش "/" الموجود اخر الرابط هو الذي يسبب المشكلة.
في حال كانت الروابط تعمل بشكل جيد، فتأكد من كونك استخدمت الـ client ID والـ client secret الخاصين بالتطبيق بشكل صحيح في موقعك.
 

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

قم في البداية بعمل build لملفات المشروع حتى تحصل على الملفات التي تقوم webpack ببنائها وهي غالباً تكون داخل مجلد يسمى dist أو build.
والآن ما تحتاج رفعه على GitHub هو ملف الـ dist فقط بحيث يكون ملف الـ index.html داخل مستودع الـ GitHub وليس داخل أي ملف. ولفعل ذلك قم بالتالي :
أنشئ مستودع جديد على GitHub.
1- قم بفتح ملف الـ dist داخل vs code بدون باقي الملفات لأننا لا نريد ان نتحكم بالمستودع المحلي الخاص بملفات المشروع كلها.
2- ثم قم بإنشاء مستودع git جديد عبر كتابة الأمر :
git init 3- ثم قم بكتابة الأوامر التالية بالترتيب :
git add. git commit -m "my first commit" git branch -M main git remote add origin <رابط المستودع على جيت هوب> git push origin main ستحصل على الأوامر السابقة مع الرابط الخاص بالمستودع عند انشاء المستودع.
4- بعد ذلك اذهب إلى Settings كما في الصورة :

5- بعد ذلك انتظر قليلاً وستحصل على رابط الـ page الخاصة بك بعد حوالي 5 دقائق، حيث يظهر الرابط في اعلى الصفحة نفسها.

لاحظ الموقع الذي رفعته ف المثال السابق : https://omarqra.github.io/test250/.
والمستودع الخاص به https://github.com/omarqra/test250.
في حال كنت تريد رفع كل ملفات المشروع كلها، سيتوجب عليك رفع مجلد الـ dist مع باقي الملفات وفي هذه الحالة يمكنك القيام بالخطوات 4 و 5 فقط في المستودع الخاص بالمشروع وسيصبح الرابط كالتالي :https://omarqra.github.io/test250/dist حيث تضيف اسم المجلد dist إلى الرابط.
 

وضعناها لكتابة المتغير داخل النص، ولكن طريقة كتابتك للنص في الـ prompt خاطئة لاحظ :
// الطريقة الخاطئة prompt ('Youre total $ {total}') // الطريقة الصحيحة prompt (`Youre total ${total}`) حيث نستخدم الـ ` بدلاً من الـ ' .
والنصوص التي توضع بين ` ` تسمى بالـ Template strings وهي تمكنك من كتابة النص على اكثر من سطر و كذلك تمكنك من كتابة متغيرات داخل النص.
// "" في الطريقة التقليدية باستخدام الـ prompt ("Youre total " + total + "dollar") // `` أما باستخدام الـ prompt (`Youre total ${total} dollar`) اعرف اكثر عن الـ Template strings من موسوعة حسوب

جرب الكود التالي :
let dateToday= $("#dateToday").val() // date نحوله للنوع const date = new Date(dateToday); // نقوم باستخراج الايام const days = date.getUTCDate() + 1; // setDate نقوم بإضافة الايام التي نريدها باستخدام الوظيفة date.setDate(days + 6); // نحول التاريخ لنص مرة ثانية const newDate = date.toISOString(); // ****-***-**T****:**.***Z // نقص الجزء الاول من التاريخ حتى يصبح بالشكل الذي تريده console.log(newDate.slice(0, 10)); // ****-***-**  

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

لا ادري لماذا المبرمجين يقولون عنه اطار عمل وربما ذلك لأنهم يقارنونه بأطر العمل مثل Angular و Vue، وقد يكون بسبب React Native ولكن اعتقد انهم يسمونه إطار عمل لكوننا نستطيع بناء اطار العمل الذي نريده باستخدام React.
والمكتبة هي التي تقوم بتقديم خدمة معينة في مجال معين مثل axios وهي مكتبة تستخدم لجلب البيانات من السيرفر أو Jest وهي مكتبة متخصصة بالـ testing.
بينما إطار العمل هو مجموعة متكاملة من المكاتب تشمل جميع الأدوات التي تحتاجها للقيام بمشروعك.
فبعد قول ذلك فإنه باستخدام React بالإضافة لباقي الأدوات التي تحتاجها لبناء مشروعك بإمكانك بناء إطار العمل الخاص بك، وكذلك يوجد العديد من اطر العمل المبنية على React بالفعل ومنها next.js.

b في الحالتين تساوي 0 لأنك لم تغيير قيمة الـ b في أي مكان في الكود الخاص بك،
والشكل الصحيح للكود الذي تحاول تطبيقه هو :
let a = true let b = 0 if (a) { // b الكود التالي لا يقوم بإسناد اي قيمة للـ // b === 1 // كيفية الاسناد الصحيحة b = 1 console.log(b); // 1 } console.log(b) // 1 لأن b === 1 هي عبارة عن وظيفة تعيد true إذا كان b يساوي 1 في القيمة والنوع، وإلا فإنها تعيد false.
تعرف اكثر عن المعامل "===" من موسوعة حسوب
أما  b = 1 فهي عبارة عن اسناد القيمة 1 للمتغير b.
لاحظ الكود التالي :
let a = true let b = 0 if (a) { console.log(b === 1) // false b = 1 console.log(b === 1) // true }  

بحسب الصورة التي أرفقتها فأظن انك تريد موقع يقدم أيقونات ملونة وبجودة عالية،
و يوجد العديد من مواقع  التي تقدم هذه الايقونات ومن اشهرها :
svgrepo freesvg flaticon icons8 iconfinder

يمكنك تنفيذ ذلك بالشكل التالي :
classes = [] for element in soup.find_all(class_=True): classes.extend(element["class"]) أو :
classes = [value for element in soup.find_all(class_=True) for value in element["class"]] مثال تطبيقي :
from bs4 import BeautifulSoup data = """ <div class="class1"> <span class="class2">some text</span> <span class="class3">some text</span> <span class="class4">some text</span> </div> """ soup = BeautifulSoup(data, "html.parser") classes = [value for element in soup.find_all(class_=True) for value in element["class"]] print(classes) # Returns # ['class1', 'class2', 'class3', 'class4']  

يمكنك وضعه ك parameter في الطلب كالتالي :
r = requests.get('https://github.com', timeout=5) يمكنك الاطلاع على الـ documentation  الخاصة بالمكتبة للاستفادة اكثر.
أو يمكنك استخدام eventlet :
import requests import eventlet eventlet.monkey_patch() with eventlet.Timeout(10): requests.get("http://ipv4.download.thinkbroadband.com/1GB.zip", verify=False)  

ملف الـ desktop.ini  هو عبارة عن ملف يعطي بعض الخصائص للمجلد الذي يوجد فيه، فمثلاً قد يستخدم لإعطاء المجلد ايقونة خاصة أو لإظهار بعض التعليمات الخاصة بالمجلد وبشكل مختصر فإنه يستخدم لحفظ تعديلات العرض التي تتم على المجلد "view customization".
وهو ملف مخفي في العادة ويتم انشائه بشكل تلقائي على نظام Windows 11/10، ولكن يبدو انك قد فعلت خاصية اظهار الملفات المخفية حتى ظهر لك.
مالذي سيحدث عند حذف الـ desktop.ini ؟ سيتم اعادة انشاؤه مرة ثانية عندما تقوم بتعديل اعدادات العرض الخاصة بالمجلد.
اعرف اكثر عن Desktop.ini

يبدو انه لديك عدة مشاكل والشكل الصحيح لملف الـ js يجب ان يكون كالتالي :
const bt = document.querySelectorAll(".bt") bt.forEach(item => { item.addEventListener("click", () => { item.innerHTML = "✔ Done" item.append.innerText = "ss" item.style.backgroundColor = "rgb(0, 188, 44)" item.style.color = "white" const body = document.getElementById("bodyy") const creat = document.createElement("h1") creat.innerText = "مبرووووووووووك " body.prepend(creat) creat.classList.add("ccreat") setTimeout(() => { creat.style.transform = "translateX(-200vw)" }, 1000); setTimeout(() => { creat.remove() }, 4000); const show = document.createElement("h3") show.innerText = "عرض المشنريات " body.prepend(show) // لست بحاجة لاعطاء اي كلاس // show.classList.add("sshow") // نضيف الحدث من هنا مباشرةً // show وذلك لأن الكود الخاص بإضافة الحدث معتمد على وجود العنصر // موجوداً اصلاً show في الشكل السابق كنت تضيف الـحدث قبل ان يكون الـ // اما هنا لن يضاف الحدث إلا عندما يتم انشاء العنصر show.addEventListener("click", () => { // قبل استخدامه foterdiv لم تقم بتعريف المتغير // foterdiv.style.transform = " translateX(100vw) " // console.log("sshddow"); // الشكل الصحيح هو const bigdiv = document.querySelector(".bigdiv") const foterdiv = document.querySelector(".foterdiv") bigdiv.style.transform = " translateX(-100vw) " foterdiv.style.transform = " translateX(-100vw) " }) }) }) const x = document.querySelector(".x") x.addEventListener("click", () => { const bigdiv = document.querySelector(".bigdiv") const foterdiv = document.querySelector(".foterdiv") bigdiv.style.transform = " translateX(-100vw) " foterdiv.style.transform = " translateX(-100vw) " }) // بعد .sshow هنا لا يوجد اي عنصر يحتوي الكلاس المسمى // bt وذلك لأنه يتم تعريفه عند النقر على العنصر صاحب الكلاس // bt و هذا الكود يتم تنفيذه لمرة واحدة وقبل النقر على العنصر صاحب الكلاس // غير موجود .sshow ولذلك يعطي الخطأ الذي يقول ان العنصر // const sshow = document.querySelector(".sshow") // sshow.addEventListener("click", () => { // foterdiv.style.transform = " translateX(100vw) " // console.log("sshddow"); // })  
 

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

اشهر انواع للمواقع الالكترونية والاكثر طلباً :
مدونة موقع اخباري موقع تعريفي لشركة موقع خاص بتطبيق موبايل أو تطبيق للحاسوب موقع تعريفي لشركة مع مدونة موقع تعليمي موقع افلام ومسلسلات موقع تواصل اجتماعي موقع بيع خدمات الكترونية sass  متجر الكتروني موقع خدمات مصرفية موقع حكومي

من اجل الكتابة على الصورة نستخدم ما يسمى بالـ hero Image وهي كالتالي :
نضع div ولنسميه hero-image وداخله div آخر ولنسمية hero-text ولنضع داخله النص الخاص بنا.
ونعطي الـ hero-image الخاصية  position: relative ونعطيه طول معين، ونعطيه الخلفية :
background-image:url(myImagePath) و يمكن ان نعطيه طبقة سوداء فاتحة امام الصور كي يظهر النص بشكل جيد كما في المثال القادم بالاسفل.
ونعطي الـ hero-text الخاصية position: absolute فيصبح النص امام الصورة ونتحكم بموضعه بالنسبة للصورة بالخصائص top "والذي يمثل بعد النص عن اعلى الـ hero-image والذي يمثل الصورة" و left "والذي يمثل بعد النص عن يسار الـ hero-image".
لاحظ المثال :
<div class="hero-image"> <div class="hero-text"> <h1>I am John Doe</h1> <p>And I'm a Photographer</p> <button>Hire me</button> </div> </div> body, html { height: 100%; } /* The hero image */ .hero-image { /* لإضافة طبقة من السواد امام الصورة، وهذا سيجعل النص اسهل للقراءة "linear-gradient" استخدم */ /* url بعده نضيف الصورة كخلفية */ background-image: linear-gradient(rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5)), url("photographer.jpg"); /* بعض الخصائص للصورة لتظهر بشكل مناسبة */ background-position: center; background-repeat: no-repeat; background-size: cover; /* هذه الخطوتين هم الاهم ولا يجب اهمالهما */ /* relative خصاية الـ */ position: relative; /* اعط العنصر طول معين */ height: 50%; } /* خصائص النص */ .hero-text { text-align: center; /* هذه الخاصية هي الاهم */ position: absolute; /* هذه الخصائص لتوسيط النص بالنسبة للصورة */ top: 50%; left: 50%; transform: translate(-50%, -50%); color: white; } النتيجة النهائية :

يمكنك البحث عن مستقلين يقومون ببناء الـ backend على موقع مستقل .
أما في اكادمية حسوب فإننا نقوم بمساعدة المبرمجين الذي يحتاجون مساعدة في تعلم البرمجة وليس بناء التطبيقات بالكامل.

إضافة الـ 
con.innerHTML = ""; قبل إضافة الامراض سيكون كفيل بحل المشكلة، لاحظ :
let h = document.createElement("h2"); let con = document.querySelector("#Diseases"); // لست بحاجة لتعريف المتغير التالي من هنا بل نعرفه من داخال الحلقة // let l; let head = $("#head"); ipcRenderer.on("data-Maladie", function (e, data, NamePath) { let text = `(${NamePath})`; h.innerHTML = text; head[0].appendChild(h); // السطر المضاف ************* con.innerHTML = ""; // نهاية السطر المضاف ********* for (let i = 0; i < data.length; i++) { // الكود التالي غير ضروري لأنك عرفته سابقاً // let con = document.querySelector("#Diseases"); let l; l = document.createElement("li"); let li = ` ${data[i]}`; l.innerHTML = li; l.classList.add("maladie"); l.style.cssText = "color: #133764;border: 2px solid #007bff; margin: 10px; padding: 10px 12px;font-size: 15px;font-weight: bold;border: 1px solid rgba(0,0,0,.125)!important;border-radius: 5px; background-color: rgba(227, 230, 230, 0.226);box-shadow: rgb(99 99 99 / 20%) 0px 2px 8px 0px;cursor: pointer;"; con.appendChild(l); } }); // لم افهم مالذي تريده من الاكواد التالية **************** let ret = document.getElementById("Ret"); // جلب العنصر الحاوي لعناصر الصفحة // مرة ثانية Diseases لست بحاجة لإعادة تعريف العنصر صاحب الايدي ************ // نفسه مرة اخرى con بل يمكنك استخدام المتغير let list = document.getElementById("Diseases"); ret.addEventListener("click", function () { // As long as <ul> has a child node, remove it while (list.hasChildNodes()) { list.removeChild(list.firstChild); } ipcRenderer.send("retour"); }); لان هذه الحلقة تقوم بإضافة الامراض للعنصر، واضافة الـ innerHTML = "" يضمن لك كونه فارغ قبل اضافة اي عناصر جديدة
لم استطع تجريب الكود، في حال لم يعمل قم بمشاركة ملفات المشروع بالكامل.