Adnane Kadri

الخطأ الذي تحتويه الرسالة يشير إلى عدم تطابق التوقيع (signature) لدالة الـ useReducer مع الـ reducer الخاص بك. يبدو أن هناك عدم تطابق في نوع المعاملات الممررة عبر الـ useReducer.
يحتمل أن يكون ذلك بسبب أن الوظيفة reducerFunction تعيد undefined بشكل افتراضي، أضف استعلام return الى عبارة default: 
default: return state;

حسن، فيما يلي الطريقة الصحيحة لذلك: 
عدل ملف directives.js ليصبح: 
const globalexternal = { mounted: function (el) { el.placeholder = 'Global Custom Directive from external file' } } export default globalexternal; في ملف main.js قم باستيراد الموجه وسجله باستعمال التابع directive: 
import globalexternal from './directives' const app = createApp(App) app.directive('globalexternal' ,globalexternal) app.mount('#app') استعمل الموجه في أي ملف فرعي: 
<input v-globalexternal style="width: 370px" />  

هاته ليست الطريقة الصحيحة لاستعراض مشروع لارافيل، كما أن تشغيل خادم vite لا يغني عن تشغيل خادم artisan أو تشغيل التطبيق من على xampp
عموما. قم بتشغيل الامر: 
php artisan serve مع الأمر: 
npm run dev ثم قم باستعراض المشروع من على الرابط المتحصل عليه من تشغيل الأمر الأول، هو عادة ما يكون: 
http://127.0.0.1:8000/ يفترض أن يعمل معك الآن.

مرحبا ابراهيم، 
يوجد فرق بين استيراد وحدات ES لاستعمالها و استعمال وتصريح دوال الجافاسكربت العادية، فالذي تقوم به هاهنا:
import Swal from 'sweetalert2'; هو اسيتراد وحدة Swal كاستيراد افتراضي من الوحدة النمطية sweetalert2 فقط. اذ لا يعني هذا بالضرورة تصريحها بشكل عالمي global حتى يتسنى استعمالها من أي ملف عرض. فـ vite هنا لا يعتبرها اكثر من وحدة نمطية معينة ما لم يتم استعمالها، ولن يعني له ذلك شيئا ان كنت تستعملها في ملف blade مثلا. فهي ستبقى رغم ذلك غير معرفة ككائن أو كدالة ضمن النطاق العالمي global scope، ولكنها تبقى مستوردة كوحدة يمكن استعمالها من داخل ملف app.js حصرا .. ولذلك فإننا لو أردنا استعمالها في سياق خارج سياق app.js أو اي ملف يستورد Swal كوحدة نمطية سيظهر لنا مثل ما ظهر معك، ولذلك فإنه يقترح تصريحها بشكل explicit مع الكائن window لكي يمكن استعمالها. 
ولو تلاحظ فإن هنالك طريقة أخرى لإستعمالها كأي مكتبة جافاسكربت عادية أخرى.
وتأتي ملفا مجمعا مصدريا يمكن استيراده كملف جافاسكربت واستعمال ما فيه، وهو ملف يتم تقديمه عن طلب السكربت: 
<script src="https://cdn.jsdelivr.net/npm/sweetalert2@11"></script> هذا الملف هو ما يحوي هذا التصريح. مثال عملي: 
<script src="https://cdn.jsdelivr.net/npm/sweetalert2@11"></script> <script> document.addEventListener('DOMContentLoaded' , () => { Swal.fire( 'Good job!', 'You clicked the button!', 'success' ) }) </script> هذه هي الطريقة التي اعتدنا على العمل بها مع مكتبات الجافاسكربت سابقا سنين 2017 و 2018 وقبلهما قبل شيوع استعمال الوحدات.
أما ما تحاول استيراده فهو مكتوب بسياق ES كوحدات ES لا يصلح لهذا الاستعمال المباشر. وذات الأمر الأمر ينطبق على أي وحدات أخرى. 
ان كنت تنوي التعامل مع دوال معينة بشكل ستاتيكي، قم بتجميعها في ملف public_js.js ضعه في مجلد public وقم بوصف مثل هاته الدوال به لكي يمكن استعمالها ضمن النطاق العالمي.

بشكل أساسي، gulpjs يعتبر في الأصل مشغل مهام task runner في حين أن vite يعتبر بيئة تطوير متكاملة web-based IDE 
استعمال gulp سيختصر علينا الكثير من الجهد الذي نبذله في العمليات المكررة من مثل :الدمج وتقليل ملفات الجافاسكربت (minifying)، ترجمة سياقات sass أو Less، ضغط الصور والملفات ونحوهما من المهام التي تتكرر في الويب بشكل دائم .. gulp يحتوي على وحدات خاصة تهتم بالتعامل مع كل من هاته المهام بشكل مؤتمت بشكل مباشر دون الحاجة الى كتابة الشيفرة المسؤولة كل مرة. هذا بجانب أنه يوفر لك إمكانية إنشاء مهام مخصصة لإستعمالها في اجزاء التطبيق وكل هذا من أجل توفير وقت التطوير وكتابة الشيفرة .. وميزة هذا الاستعمال هو أنه يجعل كل أكوادك تتبع نمطا واحدا بشكل standard يخدم مفاهيم الشيفرة النظيفة. 
أما vite فهو لا يهتم بذلك أبدا، فهو لا يتوفر على وحدات تمكنك من تنفيذ مهام معينة مثلا او اسيتراد شيفرات مكافئة لها. وما يقوم به هو التعامل مع وحدات ESM وتقديمها عند الحاجة إليها من طرف المتصفح، فهو خادم تطوير development server ومجمع وحدات module bundler.
بشكل مختصر:
gulp هو تجميعة من الأدوات toolkit التي تتوفر على مهام متكررة وشائع استعمالها في الويب، نستعمله لاختصار الوقت والجهد ولتوحيد نمط الشيفرات code standarization. vite يعتبر بيئة وخادم تطوير بالإضافة إلى إمكانيته في العمل مثل ويب باك كجمع وحدات module bundler، نستعمله لتسريع عملية التطوير وتحسين تجربتها.

نعم ولما لا،
أجد أنك تمتلك خبرة لا بأس في تجميعة لا بأس بها من كل من المهارات الصلبة Hard skills والمهارات الخفيفة Soft skills. هذا بجانب أنك على إلمام بواحدة من أشهر معماريات التصميم وهي MVVM. فيما يلي بعض الملاحظات التي قد تخص الملف المرفق: 
يوجد فراغات في الفقرة الثانية تأكد من ازالتها.  الروابط تظهر صغيرة.  قم باختصار الفقرة التعريفية أكثر. وهاته كتوجيهات بخصوص التصميم والتنظيم فقط، قد لا نتفق في بعضها وقد نتفق.
أما نصيحتي لك بعد النظر في مهاراتك، فهي البدء والخروج من دوامة الدورات والكورسات بعيدا عن ما يعرف بجحيم الكورسات tutorial hell. فما ستتعلمه خلال الطريق سيكون أكثر نفعا لك وأكثر ترسخا في ذهنك، أيضا لا يجب عليك الاعتماد على سيرتك الذاتية بشكل أولي في العمل على منصات العمل الحر. فأغلب العملاء لن يكون مهتما بتفحص سيرتك الذاتية لمجرد التعرف عليك. اعتمد على شروحات مقتضبة عنك وعن معرض أعمال يحمل أعمالك بشكل مصور بدل ان تكون شروحات مكتوبة.
أما الباقي فستتعمله وتلتقطه في الطريق من تجربة ذاتية وشخصية، ولن تجده في غير العمل. 

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

المشكلة التي تحدث في شيفرتك هو انه لا يتم تجاوز قيمة result وانما يتم طباعة مجموع result و الرقم الذي تتوفر فيه الشروط فقط.
جرب تعديل الكود ليصبح:
#include <iostream> using namespace std; int main() { int result = 0; int num1, num2, num3, num4; cout << "Please Type 5 Number In A Row\n"; cout << "Only Even Numbers Smaller Than 20 Will Be Counted\n"; cin >> num1 >> num2 >> num3 >> num4; if (num1 < 20 && num1 % 2 == 0) { result += num1; } if (num2 < 20 && num2 % 2 == 0) { result += num2; } if (num3 < 20 && num3 % 2 == 0) { result += num3; } if (num4 < 20 && num4 % 2 == 0) { result += num4; } cout << "The sum of even numbers smaller than 20 is: " << result << endl; return 0; } تطلب الشيفرة من المستخدم إدخال 4 أرقام، ثم تقوم بفحص كل عدد إذا كان عددًا زوجيًا أقل من 20 وإذا كانت الشروط متوفرة فإنه يتم إضافة قيمة العدد إلى المتغير result. وفي الاخير طباعة هذا المجموع.

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

يفترض أن يتم مباشرة حقن القيمة الموافقة للغة المفعلة عند قراءة الخاصية، فان كانت الخاصية name تحمل قيما متعددة اللغات فإن قراءتها في ملفات العروض سيكون وفق:
$item->name وهذا بشكل مباشر، أما ان كنت تقوم باستعمال التابع getTranslations في ملف العرض، فسيقوم بطبيعة الحال بإعادة مصفوفة ترابطية تعرف كل مفتاح لغة والقيمة الموافقة له. وهذا ما يحدث معك في الأرجح، لا تقم باستعمال السياق التالي:
$item->getTranslations('name') بل استعمل السياق:
$item->name وسيصلح هذا المشكلة معك.

يحدث هذا لأنك أصلا تعيد كائن JSON من موجه Node في Show_Link تابع المتحكم linksController:
exports.Show_Link = (req,res,next)=>{ const data = { short:req.params.id } Links.findOne(data).then(link =>{ if(!link){ res.status(404).send("ERROR") } else{ res.send({link:link.link}); ^^^^^^^^^^^^^^^^^^^^^^^^^ } }).catch(err =>{ res.status(400).send(err) console.log(err) }) } وهو الخرج الطبيعي ومن العادي ان يظهر رد كـ:

فالخادم هو الأولى بعملية التوجيه، وان كان كل من الخادم والعميل يعيدان خرجا ما عن المسار id:/ فإنه سيتم اعتبار ذلك الخاص بالخادم بطبيعة الحال، لأن العميل لا يزال يحتاج حقن ملف التوجيه في المتصفح لتولي عملية التوجيه، ولحد قيامه ذلك سيحتاج من الخادم تصيير المكون الذي يتولى ذلك، فإن كان الخادم يعيد JSON فلا العميل ولا الخادم يتوصلان للصفحة الفرعية التي يصيرها العميل. وهو ما يحدث معك ببساطة. وذات المشكلة تحدث في كثير من المرات في تطبيقات SPA من مختلف التقنيات.
لحل مثل هاته المشكلة،ينصح بفصل عمليتي التوجيه، ومن الأحسن تسبيق مسارات الخادم بسابقة ولتكن api/ فيكون في ملف app.js تطبيق express كـ:
app.use('/api', linksRouter); ثم لنصلح المسارات المعنية في جزء العميل ولنعتبر اضافة هاته السابقة، اي في تطبيق React. 
في ملف Home.jsx:
if(Link !=='' && Link.length > 3){ axios.post("/api/create" , data).then(links =>{ في ملف shortCut.jsx: 
axios.get(`/api/` + data.short) .then(links =>{ أعد البناء عن طريق تنفيذ npm run build وانقل مجلد build الى مجلد public في تطبيق express مرة أخرى.
وكخطوة أخيرة تماما، سنحتاج اخبار موجه express ان يقوم بتوجيه اي طلب يختلف عن طلبيات ال api الى ملف index.html داخل مجلد public/build وذلك حتى يمكن لتطبيق react ان يحمل موجهه على المتصفح ويتولى عملية التوجيه بدلا عن express. ولفعل ذلك اضف السطر التالي في ملف app.js في تطبيق الخادم: 
app.use('/api', linksRouter); app.use(express.static(path.join(__dirname, '/public/build'))); app.get('*', (req, res) => { res.sendFile(path.join(__dirname + '/public/build/index.html')); }); انتبه الى ترتيب تصريح الموجهات في هذا الملف، أعد تشغيل الامر npm run start على تطبيق الخادم وسيشتغل معك بشكل طبيعي.

بالطبع فإنه هذا يخضع بدرجة أولى لمسار حفظ هاته الصور في قرص التخزين الخاص بخادمك، فإن كنت تستخدم قرص التخزين المحلي في لارافيل فإنك ستحتاج أولا انشاء الوصلة الرمزية عن طريق تنفيذ الامر: 
php artisan storage:link ثم بعد ذلك، استعمال الوظيفة asset لتكوين رابط أصول كامل يشير الى مسار الصورة الكاملة. على سبيل:
$path = asset($user->avatar); فإن كانت مسارات الصور تخزن في مجلد avatars في مجلد storage/app/public/ وفي قاعدة البيانات كـ:
avatars/image_file_name_1.ext avatars/image_file_name_2.ext avatars/image_file_name_3.ext فإن طريق قراءة المسار ستكون وفق السابق: 
$path = asset($user->avatar); فإن كانت قيمة user->avatar توافق avatars/image_file_name_1.ext فإن المعاد عن الوظيفة asset سيكون السلسلة النصية:
https://your_domain.co/avatars/image_file_name_1.ext وهكذا..

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

ليس تماما، الاستعلام يحدث بالفعل ويتم تنفيذه غير أنه لا يتم التقاط عائده من على خارج الدالة.
فالمشكلة هنا هي أنك تحاول الوصول الى متغير محلي local variable من على خارج نطاق الدالة function scope. وللوصول اليه اظنك ستحتاج ضبطه كعائد للدالة التي تقوم بتوصيفها. فيكون ذلك كـ:
function connecting($order_table,$table){ global $order_id ; global $conn; $query_var = 'SELECT '.$order_table.'.*, '.$order_table.'.price AS price, admins.name AS user, patron_colors.color_name AS color_name, patron_colors.color_count FROM '.$order_table.' LEFT JOIN admins ON '.$order_table.'.user = admins.id JOIN '.$table.' ON '.$order_table.'.'.$order_table.'_id = '.$table.'.id JOIN patron_colors ON '.$order_table.'.color_select = patron_colors.id WHERE '.$order_table.'.order_id=' .$order_id . ' ORDER BY '.$order_table.'.id ASC;'; $run = $conn->query($query_var); return $run; } الآن ستحتاج استقبال عائد الدالة وتخزينه في متغير:
$run = connecting('order_bracelet','bracelet'); وأخيرا استعماله في المرور على الصفوف الناتجة:
foreach ($run AS $row ){ // code here }  

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

تكملة لما أشار اليه المدرب @Kais Hasan يمكنك عمل escape للرمز المستهدف في SQL عن طريق العبارة ESCAPE مرفقة بالرمز:
SELECT * FROM my_table WHERE my_column LIKE '%&|&%' ESCAPE '|'; سيتم التعامل مع اي ما يلحق بالرمز كمحرف عادي literal characters بدل رموز خاصة special characters

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

استعمل العبارة LIMIT مع ترتيب النتائج بشكل تنازلي بحسب المعرف ID:
SELECT * FROM users ORDER BY id DESC LIMIT 5; مجموعة مقالات SQL
دليل SQL بحسب توثيق حسوب

هل يمكنك الاشارة الى اطار العمل او اللغة التي تستعملها؟
ربما تبحث عن أحد مكتبات faker. مثل fakerphp في PHP أو fakerjs في جافاسكربت أو Faker في بايثون. وموجودة حتى في Perl و Ruby.
على اختلاف هاته اللغات، كل هاته المكتبات توفر تابعا email يهتم بتوليد عناوين بريد الكتروني مزيفة او اختبارية. يمكنك بذرها الى قواعد البيانات واستعمالها لذات الغرض. قد تحتاج ايضا خادم SMTP اختباري من مثل Mailtrap، لاستقبال هاته الرسائل.

كتطبيق عملي للوصف السابق يمكنك القيام بالتالي:
عند تقديم طلب من طرف الراكب او العميل يتم االتالي.
<?php ... class RideController extends controller { /** * حجز رحلة * * @return void */ public function book(){ // انشاء رحلة جديدة وسائق معين $ride = Ride::create([ 'user_id' => auth()->id() , 'driver_id' => 'RANDOM_DRIVER_ID']); // انشاءرحلة مجدولة ScheduledRide::create([ 'ride_id' => $ride->id ]); // تنبيه السائق عن رحلة جديدة event(new NotifyDriverByRideEvent($scheduledRides->ride)); } } لاحظ وجود انموذج بيانات Ride يعبر عن الرحلة التي قام المستخدم بحجزها. في ذات الوقت تم انشاء رحلة مجدولة تعبر عن مهمة جدولة الرحلة. ويتم تمثيل ذلك بانموذج ببيانات آخر هو ScheduledRide
سنحتاج الآن جعل هاته الرحلات المجدولة مهام يتم تحميلها بشكل ديناميكي من طرف المجدول. ليمكن التحقق مثلا من ما ان كانت الرحلة قبلت من السائق خلال الخمس دقائق الماضية او هي معلقة.
بملف app/Console/Kernel.php سنحتاج عرض كامل الرحلات المعلقة او المجدولة والتحقق مثلا من ما ان قام السائق بقبول الرحلة أو لا:
/** * Define the application's command schedule. * * @param \Illuminate\Console\Scheduling\Schedule $schedule * @return void */ protected function schedule(Schedule $schedule) { /* جلب كاملة الرحلات المجدولة */ $scheduledRides = ScheduledRide::all(); // المرور على كامل الرحلات المجدولة foreach ($scheduledRides as $scheduledRide) { $schedule->call(function() use($scheduledRide) { // التحقق من ما ان قبلت الرحلة من طرف السائق if($scheduledRide->ride->is_approved_by_driver){ // ان كانت الرحلة قد قبلت لن نحتاج ان تكون الرحلة مجدولة او معلقة فهي تامة $scheduledRide->delete(); }else{ // اما في غير ذلك // سنعدل الرحلة التي تمثل الرحلة المجدولة هاته ونسندها لسائق جديد $scheduledRide->ride->update(['driver_id' => 'NEW_DRIVER_ID']); // وبالطبع ننبه السائق الجديد ايضا event(new NotifyDriverByRideEvent($scheduledRide->ride)); // .. ولما لا اخبار السائق السابق بان الرحلة قد فاتته // او استعمال ذلك في حساب معدل ادائه في التطبيق } })->everyTenMinutes(); // ضع اي خيار تواتر يوافق حاجتك او حاجة العملاء } } طبعا الفكرة تحتاج تنظيما وتنظيفا اكثر، ولكن ستتجه بشكل او بآخر نحو ذات المفاهيم.

تحدث المشكلة في الغالب بسبب ان المصفوفة sizes تحتوي على مصفوفة اخرى متداخلة nested فهي مصفوفة multi dimensional. وللمرور على عناصر مصفوفة مثل التي لديك اظن انك تحتاج المرور على الكائنات بداخل اول مصفوفة. فيكون:
foreach ($sizes[0] as $size) { .. الباقي أيضا قد تحتاج طباعة size من داخل حلقة foreach لفهم كيفية المرور على عناصره.

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

هذا لأن التابع appendChild يفترض أن يمرر عبره كمعامل أول مرجع العقدة التي نحاول حقنها في الوثيقة وليس سلسلة نصية. 
لا يجب عليك وضع overly بين علامتي تنصيص:
// show my favorite products const favorites = document.querySelector(".favorite-products") favorites.addEventListener('click', ()=>{ // create a popup overly = document.createElement('div') overly.setAttribute("class", "popup-overly") let body = document.getElementsByTagName('body') document.body.appendChild(overly) })  ،body أيضا لا يبدوا هنالك أي حاجة من تعريف المتغير
:يمكنك التخلص من هذا السطر:
let body = document.getElementsByTagName('body') Document.body
 

بما أن لديك الوصول الى phpmyadmin فيمكنك تعديل كلمة المرور عن طريق حقن أخرى مشفرة بذات الخوارزمية التي هي BCrypt.
يمكنك مثلا استعمال موقع bcrypt-generator لتوليد كلمة مرور مشفرة ابتداءا من واحدة تختارها. 
قم لاحقا بلصق الناتج في حقل password في الجدول المستهدف في phpmyadmin لديك.
سيمكنك بعد هذا استعمال الكلمة الغير مشفرة لتسجيل دخولك بشكل عادي.

يمكنك من هذا السلوك فهم أن الحاوية الخاصة بالصورة والخاصة بالنص لا يتم اخفاءهما وإنما يتم حقن الصورة والفقرة فوقهما بشكل مباشر. بشكل يجعلها تظهر وكأنها فوق بعضها. ولتلافي هاته المشكلة، لنبحث عن السطر الذي نقوم فيه بحقن محتوى الى الحاوية بهما ونتأكد من تفريغها من اي محتوى سابق قبل حقنها بالمحتوى الجديد.
من ملف main.js نبحث عن: 
sliderContainer.innerHTML += arrimg[i]; sliderContainer.innerHTML += `<p id="p-${i}">${i + 1} / ${arrimg.length}</p>`; ونكتب قبلهما مباشرة السطر:
sliderContainer.innerHTML = ''; // ++++++++++++++++ sliderContainer.innerHTML += arrimg[i]; sliderContainer.innerHTML += `<p id="p-${i}">${i + 1} / ${arrimg.length}</p>`; ستلاحظ اختفاء المشكلة عند الضغط على زر next ولكن نفس الشيء سيبقى مستمرا عند الضغط على زر pre. 
نتفحص الشيفرات الخاصة بهما ونرى أننا لا نحقن اصلا اي محتوى في الحاوية، أرى أنك تقوم بتعليق الأسطر الخاصة بها لسبب ما:
// sliderContainer.innerHTML += arrimg[i]; // sliderContainer.innerHTML += ` <p id="p-${i}"> ${i + 1} / ${ // arrimg.length // }</p> `; الغ تعليق هاته الأسطر، ولا تنسى اضافة السطر:
sliderContainer.innerHTML = ''; قبلهما مباشرة ايضا. 
يفترض ان يحل هذا المشكل لديك.