بلال زيادة

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

عندي بعض الاقتراحات اللي ممكن تساعدك تبني هذا الكوميونتي أو التيم: منصات التواصل الاجتماعي: جرب تنشر إعلان عن فكرتك في منصات زي X أو Reddit (مثل r/learnprogramming أو r/UI_Design). استخدم هاشتاغات زي #ComputerScience أو #UIUX أو #تعلم_البرمجة لجذب أشخاص مهتمين. في مجموعات على Facebook أو Discord مخصصة لتعليم البرمجة وعلوم الحاسوب، زي مجموعات "أكاديمية حسوب" أو مجموعات عالمية مثل "FreeCodeCamp Community". منصات الدورات التعليمية: إذا كنت مشترك في منصة زي أكاديمية حسوب أو Coursera أو Udemy، كثير من المنصات دي بيكون فيها منتديات أو قنوات تواصل للطلاب. جرب تشارك فكرتك هناك وتدعو الناس للانضمام لتيمك.

هل Vue أسهل من React؟ نعم، بشكل عام، يُعتبر Vue.js أسهل للتعلم مقارنة بـ React للمبتدئين للأسباب التالية: Vue لديه منحنى تعلم أقل حدة، خاصة إذا كنت معتادًا على HTML وCSS وJavaScript البسيط. بنية المكونات في Vue واضحة وتشبه القوالب التقليدية. Vue يوفر واجهة أكثر بساطة ومرونة مع ميزات مدمجة مثل الـ directives (مثل v-bind وv-if)، مما يقلل الحاجة إلى مكتبات إضافية. React يتطلب فهمًا أعمق لـ JavaScript (مثل JSX، وإدارة الحالة باستخدام Hooks أو Redux)، وقد يكون أكثر تعقيدًا للمبتدئين. الخلاصة: إذا كنت مبتدئًا في تطوير الواجهات الأمامية، قد يكون Vue خيارًا جيدًا للبدء لأنه أكثر سهولة ويتطلب وقتًا أقل لإتقان الأساسيات.

اختيار أفضل لغة برمجة لـ backend يعتمد على طبيعة المشروع، متطلباته، وخبرتك. لكن بشكل عام، دعني أقارن بين **PHP** و**Python** وبعض الخيارات الأخرى بناءً على عوامل مهمة: PHP مصممة خصيصًا لتطوير الويب، مما يجعلها قوية في بناء مواقع ديناميكية. سهلة التعلم نسبيًا للمبتدئين. مجتمع كبير ومكتبات قوية مثل **Laravel**، وهو إطار عمل حديث يسهل التطوير. أداء جيد في تطبيقات الويب، خصوصًا مع تحسينات PHP 8. دعم واسع من استضافات الويب (مثل cPanel). العيوب يُنظر إليها أحيانًا على أنها "قديمة" مقارنة بلغات أحدث. أقل مرونة في التطبيقات غير الويب مقارنة بـ Python. قد يكون كود PHP غير منظم إذا لم يتم استخدام إطار عمل جيد. الاستخدامات مثالية لتطوير مواقع مثل ووردبريس، دروبال، أو تطبيقات ويب بسيطة إلى متوسطة الحجم. مناسبة إذا كنت تبحث عن حل سريع ومدعوم من معظم الاستضافات. Python المميزات لغة مرنة جدًا، تُستخدم في الـ backend، الذكاء الاصطناعي، تحليل البيانات، والمزيد. سهلة القراءة والكتابة بفضل تركيبها البسيط. أطر عمل قوية مثل **Django** (للتطبيقات الكبيرة) و**Flask** (للمشاريع الأصغر). مجتمع ضخم ومكتبات غنية (مثل Requests، Pandas). دعم ممتاز للتكامل مع تقنيات حديثة مثل التعلم الآلي. العيوب أبطأ من PHP في معالجة طلبات الويب إذا لم يتم تهيئتها بشكل صحيح. تتطلب استضافة متخصصة (مثل VPS) أحيانًا، مما قد يكون معقدًا مقارنة بـ PHP. قد تكون زائدة عن الحاجة لمشاريع ويب بسيطة. الاستخدامات مثالية للتطبيقات المعقدة، مثل تلك التي تتطلب معالجة بيانات، ذكاء اصطناعي، أو تطبيقات قابلة للتوسع. مناسبة للشركات الناشئة التي تريد بناء منتجات حديثة. Node.js (JavaScript) يسمح باستخدام JavaScript في الـ backend والـ frontend، مما يقلل من تعلم لغات جديدة. سريع جدًا بفضل محرك V8 ومثالي للتطبيقات التي تعتمد على الوقت الفعلي (مثل الدردشة). العيوب قد يكون معقدًا في إدارة الكود الكبير، ويتطلب فهمًا جيدًا للبرمجة غير المتزامنة. الاستخدامات رائع لتطبيقات الوقت الفعلي أو المشاريع التي تحتاج إلى أداء عالٍ. Ruby (مع Ruby on Rails) المميزاتسهل الاستخدام، ويُركز على إنتاجية المطور. مناسب للمشاريع السريعة. العيوب أقل شيوعًا الآن مقارنة بـ Python أو Node.js، وأداؤه أبطأ في بعض الحالات. Go (Golang) المميزات سريع جدًا، مصمم للتوسع والأداء العالي. يُستخدم في الشركات الكبرى مثل Google. العيوبأقل مرونة من Python وPHP، ومجتمعه أصغر. Java (مع Spring) المميزات قوي ومستقر، يُستخدم في التطبيقات الكبيرة والمصرفية. العيوب معقد نسبيًا ويتطلب وقتًا أطول للتطوير.

اختيار بين PyCharm وGoogle Colab يعتمد على احتياجاتك وطريقة عملك. Google Colab مجاني ويعمل على السحابة، مما يعني أنك لا تحتاج إلى جهاز قوي. يوفر وصولاً إلى وحدات معالجة الرسوميات (GPUs) مجاناً، وهي مفيدة لتدريب نماذج التعلم الآلي. سهل الاستخدام للمشاريع التعاونية، حيث يمكن مشاركة الملفات بسهولة. مناسب للمبتدئين أو لتجربة الأكواد بسرعة دون تثبيت برامج. PyCharm بيئة تطوير متكاملة (IDE) قوية مع أدوات متقدمة للتصحيح، إكمال التعليمات البرمجية، وإدارة المشاريع. يعمل دون الحاجة إلى الإنترنت، مما يجعله موثوقاً في جميع الظروف. مثالي للمشاريع الكبيرة والمعقدة، خاصة إذا كنت تعمل على تطبيقات أو برامج تحتاج إلى هيكلية قوية. يدعم العديد من الإضافات والتخصيصات. إذا كنت مبتدئاً أو تعمل على مشاريع صغيرة/تعلم آلي، Google Colab قد يكون كافياً، لأنه سهل الاستخدام ومجاني ولا يتطلب تثبيت برامج. إذا كنت تعمل على مشاريع كبيرة أو تطبيقات معقدة، PyCharm هو الخيار الأفضل لأنه يوفر أدوات قوية لإدارة المشاريع وتصحيح الأخطاء. امتلاك الاثنين: قد يكون مفيداً إذا كنت تريد المرونة. يمكنك استخدام Colab للتجارب السريعة أو عند الحاجة إلى GPU، وPyCharm للمشاريع التي تحتاج إلى هيكلية قوية أو العمل دون إنترنت.

نعم، الكود الذي قدمته يقرّب جميع القيم في البيانات (بما في ذلك القيم التي تم تعويضها والقيم الأصلية) إلى رقم عشري واحد بعد الفاصلة باستخدام data.round(1) قبل حفظ البيانات إلى ملف CSV. لكن إذا كنت تريد تقريب القيم التي تم تعويضها فقط (أي القيم التي أُنتجت من IterativeImputer) دون التأثير على القيم الأصلية، فإن الكود الحالي لا يحقق ذلك. لتقريب القيم التي تم تعويضها فقط، تحتاج إلى تتبع الأماكن التي تحتوي على قيم مفقودة في البيانات الأصلية (مثل NaN)، ثم تطبيق التقريب فقط على تلك القيم بعد عملية التعويض. يمكن تحقيق ذلك بالطريقة التالية: import pandas as pd import numpy as np from sklearn.compose import ColumnTransformer from sklearn.impute import IterativeImputer def handle_missing_values(data, save_path): # تحديد الأعمدة الرقمية والنصية numeric_features = data.select_dtypes(include=['number']).columns.tolist() text_features = data.select_dtypes(include=['object']).columns.tolist() # تخزين قناع القيم المفقودة في الأعمدة الرقمية missing_mask = data[numeric_features].isna() # إعداد المعالج preprocessor = ColumnTransformer( transformers=[ ('num', IterativeImputer(), numeric_features), ('text', 'passthrough', text_features), ] ) # تحويل البيانات df_transformed = preprocessor.fit_transform(data) # إنشاء DataFrame جديد بالأسماء features_names = numeric_features + text_features data_transformed = pd.DataFrame(df_transformed, columns=features_names) # تقريب القيم التي تم تعويضها فقط إلى رقم عشري واحد for col in numeric_features: # تطبيق التقريب فقط على القيم التي كانت مفقودة data_transformed.loc[missing_mask[col], col] = data_transformed.loc[missing_mask[col], col].round(1) # حفظ البيانات إذا تم توفير مسار if save_path is not None: data_transformed.to_csv(save_path, index=False) return data_transformed قبل التعويض، يتم إنشاء (missing_mask) باستخدام isna() لتحديد مواقع القيم المفقودة (NaN) في الأعمدة الرقمية. بعد التحويل باستخدام ColumnTransformer، يتم تطبيق round(1) فقط على القيم في الأعمدة الرقمية التي كانت مفقودة (باستخدام القناع missing_mask)، القيم التي لم تكن مفقودة (غير NaN) تبقى دون تغيير. إذا كانت لديك بيانات مثل data = pd.DataFrame({ 'A': [1.234, np.nan, 3.456], 'B': ['x', 'y', 'z'] }) فإن الكود المعدل سيُعوض القيمة المفقودة في العمود A (مثلًا تصبح 2.34567) ثم يقربها إلى 2.3، بينما تبقى القيم الأصلية (1.234 و3.456) دون تغيير.

لجعل العناصر في قسم "Services" تظهر كصف واحد بدلاً من الأعمدة، يمكنك تعديل خاصية grid-template-columns في CSS. بدلاً من استخدام repeat(3, 1fr) التي تقوم بتقسيم العناصر إلى 3 أعمدة، يمكنك تعيين قيمة واحدة فقط لتحويلها إلى صف واحد. قم بتغيير الـ CSS كالتالي: .services { display: grid; grid-template-columns: 1fr; /* تغيير إلى صف واحد */ flex-direction: row; margin-top: 50px; gap: 1rem; padding: 0 20px; }

الأيقونات في قسم "Skills" تظهر بشكل غير مرتب عند عرض الموقع على شاشة هاتف (أقل من 900 بكسل) بسبب طريقة تعريف الـ CSS في الـ media query. في الكود الحالي، يتم تحويل الأيقونات إلى شبكة (grid) باستخدام grid-template-columns: repeat(4, 1fr) لكن هذا قد يؤدي إلى توزيع غير متناسق على شاشات صغيرة. لتحسين الترتيب، يمكنك تعديل الـ CSS كالتالي: @media(max-width: 900px){ .skills .icon { display: grid; grid-template-columns: repeat(2, 1fr); /* تقليل الأعمدة إلى 2 */ gap: 10px; /* إضافة مسافة بين الأيقونات */ text-align: center; } }

أولا قم بتعديل الكلمة لانها خطأ يجب أن تكون FRONT END ثم إذا كنت تريد وضعها في بداية السطر بشكل مستقل، يمكنك تعديل الـ HTML لتكون في سطر جديد، مثل: <h2>front-end</h2> <span>create website like a pro</span> أو في الـ CSS، أضف display: block; إلى .hero h2 لضمان أن تكون في سطر منفصل.

في الكود الحالي، لقد أنشأت متغير numbers ولكن لم تعرف قيمته مسبقًا، مما يسبب خطأ أيضا يجب تهيئة المتغير numbers بقيمة بادئة (مثل 0) وتحديثه بشكل صحيح. إليك كودًا مقترحًا يعمل: let button = document.getElementById('button'); let contnue = document.querySelector('.contnue'); let numbers = 0; // تهيئة المتغير numbers بقيمة 0 button.addEventListener('click', function(event) { numbers += 1; // زيادة القيمة بمقدار 1 عند كل ضغطة contnue.innerHTML = `${numbers}`; // تحديث النص بالقيمة الجديدة }); تأكد من أن لديك زرًا في HTML بمعرف button <button id="button">اضغط هنا</button> ثم أضف عنصرًا في HTML بعلامة <span class="contnue">0</span> لعرض العداد.

addEventListener هي دالة تُستخدم في JavaScript لربط حدث (Event) بعنصر معين في صفحة الـ HTML، بحيث يتم تنفيذ كود معين عند وقوع هذا الحدث. الحدث يمكن أن يكون نقرة زر، تحريك الفأرة، إدخال نص، أو أي تفاعل آخر مع الصفحة. تُستخدم لإضافة مُستمع (Listener) للحدث على عنصر معين (مثل زر أو نموذج). تتيح لك تحديد نوع الحدث (مثل click، mouseover، submit) والدالة التي ستُنفّذ عند وقوع الحدث. يمكن إضافة أكثر من مستمع لنفس العنصر دون التأثير على المستمعين الآخرين. <button id="myButton">اضغط هنا</button> <script> const button = document.getElementById("myButton"); button.addEventListener("click", function() { alert("تم النقر على الزر!"); }); </script> preventDefault هي دالة تُستخدم داخل مستمع الحدث لمنع السلوك الافتراضي للحدث في المتصفح. بعض الأحداث في المتصفح لها سلوكيات افتراضية، مثل إرسال نموذج عند النقر على زر الإرسال أو تحميل صفحة جديدة عند النقر على رابط. تُستخدم لإيقاف السلوك الافتراضي لعنصر معين عند وقوع حدث. تُستخدم غالبًا مع النماذج (Forms)، الروابط (Links)، أو الأحداث التي تؤدي إلى إجراءات افتراضية في المتصفح. لا تمنع الحدث نفسه من الحدوث، بل تمنع فقط الإجراء الافتراضي المرتبط به. <form id="myForm"> <input type="text" name="username"> <button type="submit">إرسال</button> </form> <script> const form = document.getElementById("myForm"); form.addEventListener("submit", function(event) { event.preventDefault(); // منع إرسال النموذج console.log("تم منع إرسال النموذج!"); }); </script>

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

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

الأسئلة التي يتم طرحها في مقابلات توظيف المبرمجين تختلف حسب الشركة، مستوى الوظيفة (مبتدئ، متوسط، خبير)، والتقنيات المطلوبة. ومع ذلك، هناك أنواع رئيسية من الأسئلة التي تتكرر عادةً في مثل هذه المقابلات. الأسئلة السلوكية (Behavioral Questions) تُستخدم لتقييم شخصيتك، مهاراتك الشخصية، وقدرتك على العمل ضمن فريق. تحدث عن نفسك وعن خلفيتك التقنية. صف موقفًا واجهت فيه تحديًا تقنيًا وكيف تعاملت معه. كيف تدير الخلافات مع زملاء العمل أو أعضاء الفريق؟ ما الذي يحفزك للعمل في مجال البرمجة؟ الهدف هو تقييم مهارات التواصل، حل المشكلات، والعمل الجماعي. الأسئلة التقنية (Technical Questions) تركز على معرفتك بالمفاهيم الأساسية للبرمجة والتقنيات المطلوبة للوظيفة: أسئلة حول أساسيات البرمجة: شرح مفاهيم مثل OOP (البرمجة الكائنية)، Data Structures (هياكل البيانات)، Algorithms (الخوارزميات). ما الفرق بين Array و LinkedList؟ شرح مفهوم Big-O Notation وأمثلة عليه. أسئلة خاصة باللغة أو التقنية: إذا كانت الوظيفة تتطلب Python، قد يُطلب منك شرح مفاهيم مثل list comprehension أو decorators. إذا كانت تتطلب JavaScript، قد يُسأل عن async/await أو closures. أسئلة حول إطار عمل معين (مثل React، Django، Spring). أسئلة حول قواعد البيانات: كيف تصمم قاعدة بيانات لنظام معين (مثل متجر إلكتروني)؟ ما الفرق بين SQL و NoSQL؟ أسئلة DevOps أو الأدوات: كيف تستخدم Git في مشاريعك؟ شرح مفاهيم CI/CD أو Docker.

في index.html، سأضيف data attributes لأزرار "أضف إلى السلة" لتسهيل إضافتها إلى السلة مع الصور، ثم سأضيف معرفًا (ID) لزر "الخروج الآن" لتسهيل التعامل معه في JavaScript. <script type="text/javascript"> var gk_isXlsx = false; var gk_xlsxFileLookup = {}; var gk_fileData = {}; function filledCell(cell) { return cell !== '' && cell != null; } function loadFileData(filename) { if (gk_isXlsx && gk_xlsxFileLookup[filename]) { try { var workbook = XLSX.read(gk_fileData[filename], { type: 'base64' }); var firstSheetName = workbook.SheetNames[0]; var worksheet = workbook.Sheets[firstSheetName]; // Convert sheet to JSON to filter blank rows var jsonData = XLSX.utils.sheet_to_json(worksheet, { header: 1, blankrows: false, defval: '' }); // Filter out blank rows (rows where all cells are empty, null, or undefined) var filteredData = jsonData.filter(row => row.some(filledCell)); // Heuristic to find the header row by ignoring rows with fewer filled cells than the next row var headerRowIndex = filteredData.findIndex((row, index) => row.filter(filledCell).length >= filteredData[index + 1]?.filter(filledCell).length ); // Fallback if (headerRowIndex === -1 || headerRowIndex > 25) { headerRowIndex = 0; } // Convert filtered JSON back to CSV var csv = XLSX.utils.aoa_to_sheet(filteredData.slice(headerRowIndex)); // Create a new sheet from filtered array of arrays csv = XLSX.utils.sheet_to_csv(csv, { header: 1 }); return csv; } catch (e) { console.error(e); return ""; } } return gk_fileData[filename] || ""; } </script><!DOCTYPE html> <html lang="ar"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Coffee Shopping</title> <link rel="stylesheet" href="style.css"> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0/css/all.min.css"> </head> <body> <header class="header"> <a href="#" class="logo"><img src="logo.png" alt="Logo"></a> <nav class="navbar"> <a href="#home">الرئيسية</a> <a href="#about">معلومات</a> <a href="#products">المنتجات</a> <a href="#menu">قائمة</a> <a href="#review">مراجعة</a> <a href="#blogs">المدونات</a> </nav> <div class="icons"> <div id="menu-btn" class="fas fa-bars"></div> <div id="search-btn" class="fas fa-search"></div> <div id="cart-btn" class="fas fa-shopping-cart"></div> </div> <div class="search-form"> <input type="search" id="search-box" placeholder="ابحث هنا..."> <label for="search-box" class="fas fa-search"></label> </div> <div class="cart-items-container"> <div class="cart-item" id="cart-item-1"> <span class="fas fa-times"></span> <img src="coffee-cup.png" alt=""> <div class="content"> <h3>عنصر العربة 01</h3> <div class="price">$15.99/-</div> </div> </div> <div class="cart-item" id="cart-item-2"> <span class="fas fa-times"></span> <img src="coffee-cup.png" alt=""> <div class="content"> <h3>عنصر العربة 02</h3> <div class="price">$15.99/-</div> </div> </div> <div class="cart-item" id="cart-item-3"> <span class="fas fa-times"></span> <img src="coffee-cup.png" alt=""> <div class="content"> <h3>عنصر العربة 03</h3> <div class="price">$15.99/-</div> </div> </div> <div class="cart-item" id="cart-item-4"> <span class="fas fa-times"></span> <img src="coffee-cup.png" alt=""> <div class="content"> <h3>عنصر العربة 04</h3> <div class="price">$15.99/-</div> </div> </div> <a href="#" class="btn" id="checkout-btn">الخروج الان</a> </div> </header> <section class="home" id="home"> <div class="content"> <h3>قهوة طازجة في الصباح</h3> <p>Coffee Shopping اهلا وسهلا بكم في متجر</p> <a href="#menu" class="btn">احصل على منتجك الان</a> </div> </section> <section class="about" id="about"> <h1 class="heading"><span>معلومات</span></h1> <div class="row"> <div class="image"> <img src="about-img.jpeg" alt=""> </div> <div class="content"> <h3>ما الذي يجعل قهوتنا مميزة ؟</h3> <p>قهوتنا بشكل عام رائعا ومذاقهة يعيدك الى الحياة بشكل ايجابي وعلماً</p> <p>Lorem ipsum, dolor sit amet consectetur adipisicing elit. Placeat rem explicabo ipsam eaque repudiandae voluptas molestiae. Velit consequatur tempora cum tempore? Vel doloribus earum saepe debitis odio iusto ipsum ut.</p> <a href="#" class="btn">ابحث اكثر</a> </div> </div> </section> <section class="menu" id="menu"> <h1 class="heading"><span>القائمة لدينا</span></h1> <div class="box-container"> <div class="box"> <img src="menu-1.png" alt=""> <h3>لذيذ و طازج</h3> <div class="price">$15.99 <span>$20.99</span></div> <button class="btn add-to-cart" data-name="لذيذ و طازج" data-price="15.99" data-img="menu-1.png">أضف الى السلة</button> </div> <div class="box"> <img src="menu-2.png" alt=""> <h3>لذيذ وصحي</h3> <div class="price">$15.99 <span>$20.99</span></div> <button class="btn add-to-cart" data-name="لذيذ وصحي 2" data-price="15.99" data-img="menu-2.png">أضف الى السلة</button> </div> <div class="box"> <img src="menu-3.png" alt=""> <h3>لذيذ وصحي</h3> <div class="price">$15.99 <span>$20.99</span></div> <button class="btn add-to-cart" data-name="لذيذ وصحي 3" data-price="15.99" data-img="menu-3.png">أضف الى السلة</button> </div> <div class="box"> <img src="menu-4.png" alt=""> <h3>لذيذ وصحي</h3> <div class="price">$15.99 <span>$20.99</span></div> <button class="btn add-to-cart" data-name="لذيذ وصحي 4" data-price="15.99" data-img="menu-4.png">أضف الى السلة</button> </div> <div class="box"> <img src="menu-5.png" alt=""> <h3>لذيذ وصحي</h3> <div class="price">$15.99 <span>$20.99</span></div> <button class="btn add-to-cart" data-name="لذيذ وصحي 5" data-price="15.99" data-img="menu-5.png">أضف الى السلة</button> </div> <div class="box"> <img src="menu-6.png" alt=""> <h3>لذيذ وصحي</h3> <div class="price">$15.99 <span>$20.99</span></div> <button class="btn add-to-cart" data-name="لذيذ وصحي 6" data-price="15.99" data-img="menu-6.png">أضف الى السلة</button> </div> </div> </section> <section class="products" id="products"> <h1 class="heading"><span>منتجاتنا</span></h1> <div class="box-container"> <div class="box"> <div class="icons"> <a href="#" class="fas fa-shopping-cart"></a> <a href="#" class="fas fa-heart"></a> <a href="#" class="fas fa-eye"></a> </div> <div class="image"> <img src="p-1.jpg" alt=""> </div> <div class="content"> <h3>قهوة طازجة</h3> <div class="stars"> <i class="fas fa-star"></i> <i class="fas fa-star"></i> <i class="fas fa-star"></i> <i class="fas fa-star"></i> <i class="fas fa-star-half-alt"></i> </div> <div class="price">$15.99 <span>$20.99</span></div> </div> </div> <div class="box"> <div class="icons"> <a href="#" class="fas fa-shopping-cart"></a> <a href="#" class="fas fa-heart"></a> <a href="#" class="fas fa-eye"></a> </div> <div class="image"> <img src="p-2.jpg" alt=""> </div> <div class="content"> <h3>قهوة طازجة</h3> <div class="stars"> <i class="fas fa-star"></i> <i class="fas fa-star"></i> <i class="fas fa-star"></i> <i class="fas fa-star"></i> <i class="fas fa-star-half-alt"></i> </div> <div class="price">$15.99 <span>$20.99</span></div> </div> </div> <div class="box"> <div class="icons"> <a href="#" class="fas fa-shopping-cart"></a> <a href="#" class="fas fa-heart"></a> <a href="#" class="fas fa-eye"></a> </div> <div class="image"> <img src="p-3.jpg" alt=""> </div> <div class="content"> <h3>قهوة طازجة</h3> <div class="stars"> <i class="fas fa-star"></i> <i class="fas fa-star"></i> <i class="fas fa-star"></i> <i class="fas fa-star"></i> <i class="fas fa-star-half-alt"></i> </div> <div class="price">$15.99 <span>$20.99</span></div> </div> </div> </div> </section> <section class="review" id="review"> <h1 class="heading"><span>مراجعة العملاء</span></h1> <div class="box-container"> <div class="box"> <p>مرحباً عند تجربتي لهذه القهوة الرائعة احسست بتركيز عال في العمل وزيادة الانتاجية وفعلا من افضل القهوة التي جربتها</p> <img src="pic-1.png" class="user" alt=""> <h3>Jhon deo</h3> <div class="stars"> <i class="fas fa-star"></i> <i class="fas fa-star"></i> <i class="fas fa-star"></i> <i class="fas fa-star"></i> <i class="fas fa-star-half-alt"></i> </div> </div> <div class="box"> <p>مرحبا عند استيقاظ في الصباح وشرب تلك القهوة احسست بنشاط ومرونة وزيادة السعادة و الابداع فعلا تستحق الشراء</p> <img src="pic-2.png" class="user" alt=""> <h3>Abbe rodz</h3> <div class="stars"> <i class="fas fa-star"></i> <i class="fas fa-star"></i> <i class="fas fa-star"></i> <i class="fas fa-star"></i> <i class="fas fa-star-half-alt"></i> </div> </div> <div class="box"> <p>مرحباً كنت بصراحة دائماً حزين لكن عند تجربت تلك القهوة احسست وكأني عدت الى الحياة مرة اخرى فعلا تجربة كانت رائعة</p> <img src="pic-3.png" class="user" alt=""> <h3>Smith Owen</h3> <div class="stars"> <i class="fas fa-star"></i> <i class="fas fa-star"></i> <i class="fas fa-star"></i> <i class="fas fa-star"></i> <i class="fas fa-star-half-alt"></i> </div> </div> </div> </section> <section class="contact" id="contact"> <h1 class="heading"><span>تواصل معنا</span></h1> <a href="#" class="btn">لنبدأ بالتواصل</a> </section> <section class="blogs" id="blogs"> <h1 class="heading"><span>مدونتنا</span></h1> <div class="box-container"> <div class="box"> <div class="image"> <img src="blog-1.jpg" alt=""> </div> <div class="content"> <a href="#" class="title">قهوة لذيذة ومنعشة</a> <span>تطوير المتجر من قبل ZN99</span> <p>Lorem, ipsum dolor sit amet consectetur adipisicing elit. Iusto saepe laboriosam nulla unde qui. Veritatis, error pariatur autem consequuntur deserunt voluptatum aspernatur, illo natus provident dolorum similique qui officiis unde.</p> <a href="#" class="btn">أقرأ المزيد</a> </div> </div> <div class="box"> <div class="image"> <img src="blog-2.jpg" alt=""> </div> <div class="content"> <a href="#" class="title">قهوة لذيذة ومنعشة</a> <span>تطوير المتجر من قبل ZN99</span> <p>Lorem, ipsum dolor sit amet consectetur adipisicing elit. Iusto saepe laboriosam nulla unde qui. Veritatis, error pariatur autem consequuntur deserunt voluptatum aspernatur, illo natus provident dolorum similique qui officiis unde.</p> <a href="#" class="btn">أقرأ المزيد</a> </div> </div> <div class="box"> <div class="image"> <img src="blog-3.jpg" alt=""> </div> <div class="content"> <a href="#" class="title">قهوة لذيذة ومنعشة</a> <span>تطوير المتجر من قبل ZN99</span> <p>Lorem, ipsum dolor sit amet consectetur adipisicing elit. Iusto saepe laboriosam nulla unde qui. Veritatis, error pariatur autem consequuntur deserunt voluptatum aspernatur, illo natus provident dolorum similique qui officiis unde.</p> <a href="#" class="btn">أقرأ المزيد</a> </div> </div> </div> </section> <div class="footer"> <div class="links"> <a href="#home">الرئيسية</a> <a href="#about">معلومات</a> <a href="#products">المنتجات</a> <a href="#menu">قائمة</a> <a href="#review">مراجعة</a> <a href="#blogs">المدونات</a> </div> <div class="credit">ZN99 تم انشاء المتجر بواسطة <span></span></div> </div> <script src="index.js"></script> </body> </html> في index.js، سأحتفظ بوظيفة إضافة العناصر إلى السلة، ثم سأضيف وظيفة لحذف العنصر عند الضغط على أيقونة "X"، ثم سأضيف وظيفة لإفراغ السلة بالكامل عند الضغط على زر "الخروج الآن". let navbar = document.querySelector('.navbar'); document.querySelector('#menu-btn').onclick = () => { navbar.classList.toggle('active'); searchForm.classList.remove('active'); cartItem.classList.remove('active'); } let searchForm = document.querySelector('.search-form'); document.querySelector('#search-btn').onclick = () => { searchForm.classList.toggle('active'); navbar.classList.remove('active'); cartItem.classList.remove('active'); } let cartItem = document.querySelector('.cart-items-container'); document.querySelector('#cart-btn').onclick = () => { cartItem.classList.toggle('active'); navbar.classList.remove('active'); searchForm.classList.remove('active'); } window.onscroll = () => { navbar.classList.remove('active'); searchForm.classList.remove('active'); cartItem.classList.remove('active'); } // إضافة وظيفة "أضف إلى السلة" const addToCartButtons = document.querySelectorAll('.add-to-cart'); const cartItemsContainer = document.querySelector('.cart-items-container'); addToCartButtons.forEach(button => { button.addEventListener('click', () => { const itemName = button.getAttribute('data-name'); const itemPrice = button.getAttribute('data-price'); const itemImage = button.getAttribute('data-img'); const cartItem = document.createElement('div'); cartItem.classList.add('cart-item'); cartItem.innerHTML = ` <span class="fas fa-times"></span> <img src="${itemImage}" alt=""> <div class="content"> <h3>${itemName}</h3> <div class="price">$${itemPrice}/-</div> </div> `; cartItemsContainer.insertBefore(cartItem, cartItemsContainer.querySelector('#checkout-btn')); // إضافة وظيفة الحذف عند الضغط على "X" const removeButton = cartItem.querySelector('.fa-times'); removeButton.addEventListener('click', () => { cartItem.remove(); }); cartItemsContainer.classList.add('active'); navbar.classList.remove('active'); searchForm.classList.remove('active'); }); }); // وظيفة إفراغ السلة عند الضغط على "الخروج الآن" const checkoutButton = document.querySelector('#checkout-btn'); checkoutButton.addEventListener('click', (e) => { e.preventDefault(); // منع السلوك الافتراضي للرابط const cartItems = cartItemsContainer.querySelectorAll('.cart-item'); cartItems.forEach(item => item.remove()); });

يرجى إرفاق الملفات و اخر ما توصلت إليه من تحديثات

يمكنك المحاولة في تنفيذ حذف العنصر و إذا واجهتك أي مشكلة يمكنك ارفاقها لنقوم بمساعدتك في حلها

هذه هي الملفات index.html index.js style.css

سنحتاج إلى تعديل ملف index.js وإضافة بعض التعديلات على ملف index.html للتأكد من أن كل زر "أضف إلى السلة" مرتبط بالعنصر الصحيح. نحتاج إلى إضافة معرفات أو بيانات (data attributes) لكل زر "أضف إلى السلة" لتحديد العنصر الذي سيتم إضافته إلى السلة. سنضيف data attributes لتخزين اسم العنصر والسعر. في قسم القائمة <section class="menu" id="menu"> قم بتعديل كل زر "أضف إلى السلة" كالتالي: <button class="btn add-to-cart" data-name="لذيذ وصحي" data-price="15.99">أضف الى السلة</button> كرر هذا لكل عنصر في القائمة. يمكنك تغيير data-name إذا كنت تريد أسماء مختلفة لكل عنصر، لكن في حالتك جميعها نفس الاسم "لذيذ وصحي". إذا كنت تريد تمييز العناصر، يمكنك إعطاء كل واحد اسمًا فريدًا، مثل: <button class="btn add-to-cart" data-name="لذيذ وصحي 1" data-price="15.99">أضف الى السلة</button> <button class="btn add-to-cart" data-name="لذيذ وصحي 2" data-price="15.99">أضف الى السلة</button> <!-- وهكذا --> سنضيف كودًا في index.js للتعامل مع النقر على زر "أضف إلى السلة"، وإضافة العنصر إلى السلة في الأعلى. أضف الكود التالي إلى نهاية ملف index.js: // اختيار جميع أزرار "أضف إلى السلة" const addToCartButtons = document.querySelectorAll('.add-to-cart'); // اختيار حاوية العناصر في السلة const cartItemsContainer = document.querySelector('.cart-items-container'); // عند الضغط على أي زر "أضف إلى السلة" addToCartButtons.forEach(button => { button.addEventListener('click', () => { // استخراج اسم العنصر والسعر من الـ data attributes const itemName = button.getAttribute('data-name'); const itemPrice = button.getAttribute('data-price'); // إنشاء عنصر جديد في السلة const cartItem = document.createElement('div'); cartItem.classList.add('cart-item'); // إضافة محتوى العنصر (الصورة، الاسم، السعر، زر الحذف) cartItem.innerHTML = ` <span class="fas fa-times"></span> <img src="coffee-cup.png" alt=""> <!-- تأكد من وجود الصورة الصحيحة --> <div class="content"> <h3>${itemName}</h3> <div class="price">$${itemPrice}/-</div> </div> `; // إضافة العنصر إلى السلة cartItemsContainer.insertBefore(cartItem, cartItemsContainer.querySelector('.btn')); // إضافة وظيفة الحذف عند الضغط على زر "fa-times" const removeButton = cartItem.querySelector('.fa-times'); removeButton.addEventListener('click', () => { cartItem.remove(); }); // فتح السلة تلقائيًا بعد الإضافة cartItemsContainer.classList.add('active'); navbar.classList.remove('active'); searchForm.classList.remove('active'); }); }); في الكود استخدمنا coffee-cup.png كصورة افتراضية للعنصر المضاف إلى السلة، إذا كنت تريد استخدام نفس الصور الموجودة في القائمة، يمكنك إضافة data-img إلى زر "أضف إلى السلة" كالتالي <button class="btn add-to-cart" data-name="لذيذ وصحي 1" data-price="15.99" data-img="path/to/image.jpg">أضف الى السلة</button> ثم قم بتعديل الكود في index.js لاستخدام الصورة const itemImage = button.getAttribute('data-img'); cartItem.innerHTML = ` <span class="fas fa-times"></span> <img src="${itemImage}" alt=""> <div class="content"> <h3>${itemName}</h3> <div class="price">$${itemPrice}/-</div> </div> `;

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

هل الذكاء الاصطناعي يهدد وظائف المبرمجين؟ الذكاء الاصطناعي (AI) بالفعل أصبح أداة قوية جدًا، وقد أحدث تغييرات كبيرة في العديد من المجالات، بما في ذلك البرمجة. لكن الفكرة القائلة بأن الذكاء الاصطناعي سيحل محل المبرمجين بشكل كامل ليست دقيقة تمامًا. الذكاء الاصطناعي كأداة مساعدة وليس بديلًا كاملًا الذكاء الاصطناعي، مثل أدوات كتابة الأكواد (مثل GitHub Copilot أو ChatGPT)، يساعد المبرمجين على كتابة الأكواد بشكل أسرع، تصحيح الأخطاء، وأتمتة المهام الروتينية مثل بناء واجهات مواقع بسيطة أو كتابة أكواد متكررة. لكنه لا يمتلك القدرة على فهم السياق الكامل لمشروع معقد أو تصميم حلول مبتكرة دون توجيه بشري. المبرمجون المحترفون لا يكتبون الأكواد فقط، بل يقومون بتحليل المشكلات، تصميم الأنظمة، اتخاذ قرارات معمارية، وضمان الأمان والأداء العالي، وهذه مهام تتطلب مهارات إبداعية وتحليلية لا يمكن للذكاء الاصطناعي (حتى الآن) أن يحل محلها بالكامل. تأثير الذكاء الاصطناعي على المبرمجين المبتدئين صحيح أن الذكاء الاصطناعي قد أثر على الوظائف التي تعتمد على كتابة أكواد بسيطة أو متكررة، مثل بناء مواقع إلكترونية أساسية أو تطبيقات قياسية. أدوات مثل Wix أو Squarespace (التي تستخدم الذكاء الاصطناعي جزئيًا) جعلت إنشاء مواقع بسيطة أمرًا لا يتطلب مبرمجًا. هذا يعني أن الطلب على المبرمجين المبتدئين الذين يقومون بمهام روتينية قد يقل، لكن هذا لا يعني أن البرمجة ككل أصبحت غير ضرورية. بدلاً من ذلك، يُطلب من المبرمجين المبتدئين الآن تطوير مهارات إضافية مثل فهم الذكاء الاصطناعي نفسه، أو التخصص في مجالات أكثر تعقيدًا مثل تطوير الأنظمة، الأمن السيبراني، أو تحليل البيانات. هل الشركات تستغني عن المبرمجين؟ هناك أمثلة على شركات استخدمت الذكاء الاصطناعي لتقليل الاعتماد على فرق كبيرة من المبرمجين، خاصة في المهام المتكررة. لكن هذا لا يعني أن الشركات تستغني عن المبرمجين بشكل عام. بدلاً من ذلك، تغيرت طبيعة الوظائف: الشركات تحتاج إلى مبرمجين يمتلكون مهارات عالية في مجالات مثل الذكاء الاصطناعي، تعلم الآلة، تطوير الأنظمة الموزعة، أو بناء تطبيقات معقدة. المبرمجون الآن يعملون على دمج أدوات الذكاء الاصطناعي في منتجاتهم، مما يتطلب فهمًا عميقًا لكيفية عمل هذه الأدوات. المبرمجون المحترفون يشرفون على الأنظمة التي ينتجها الذكاء الاصطناعي، للتأكد من جودتها، أمانها، وقابليتها للتوسع.

عشان تعرض كل الأعمدة الـ 341 في إخراج data_train.isna().sum() باستخدام Pandas، لأن Pandas بيختصر الإخراج افتراضيًا لما يكون فيه عدد كبير من الأعمدة، تقدر تغيّر إعدادات العرض باستخدام pd.set_option هذا هيخلي Pandas يعرض كل الأعمدة من غير اختزال. import pandas as pd # إعداد Pandas لعرض كل الأعمدة pd.set_option('display.max_columns', None) pd.set_option('display.max_rows', None) # لو عايز تعرض كل الصفوف كمان # عرض عدد القيم المفقودة لكل عمود print(data_train.isna().sum()) pd.set_option('display.max_columns', None) بيخلي Pandas يعرض كل الأعمدة بغض النظر عن عددها. pd.set_option('display.max_rows', None) اختياري، لو عايز تعرض كل الصفوف من غير اختزال. لما تشغل data_train.isna().sum() هتشوف عدد القيم المفقودة لكل عمود من الـ 341 عمود. لو عايز تعيد الإعدادات للوضع الافتراضي بعدين، استخدم: pd.reset_option('display.max_columns') pd.reset_option('display.max_rows')

الكود الذي قدمته في الملفات (index.html, main.js, style.css)، ويبدو أن هناك عدة مشاكل في الكود تمنع عملية توليد الصور باستخدام واجهة برمجة التطبيقات (API) الخاصة بـ OpenAI لتحقيق هدف إدخال نص في حقل، ثم إرسال طلب إلى OpenAI API لتوليد صور بناءً على النص، وعرضها في عنصر div. هناك مشكلة في index.html حيث أن الملف غير مكتمل ويحتوي على أجزاء ناقصة (مثل عدم وجود وسم <body> مكتمل أو روابط لملفات CSS وJavaScript) ثم يجب إضافة زر أو حدث لتشغيل دالة getImage عند إدخال النص والضغط على الزر. <!DOCTYPE html> <html lang="ar"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>مولد الصور بالذكاء الاصطناعي</title> <link rel="stylesheet" href="style.css"> </head> <body> <h2>مولد الصور بالذكاء الاصطناعي</h2> <div class="prompt"> <input type="text" id="input" placeholder="أدخل وصف الصورة..."> <button onclick="getImage()">توليد</button> </div> <div class="images"></div> <script src="main.js"></script> </body> </html> مشاكل في main.js حيث السطر img.photo.url غير صحيح. الصياغة الصحيحة للوصول إلى رابط الصورة هي photo.url، ويجب تعيينه إلى خاصية src لعنصر img، لا يتم التعامل مع الأخطاء المحتملة من الـ API (مثل إدخال مفتاح API غير صالح أو استجابة غير متوقعة). دالة getImage لا ترتبط بأي حدث (مثل النقر على الزر). لم يتم التحقق من إدخال المستخدم قبل إرسال الطلب. <!DOCTYPE html> <html lang="ar"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>مولد الصور بالذكاء الاصطناعي</title> <link rel="stylesheet" href="style.css"> </head> <body> <h2>مولد الصور بالذكاء الاصطناعي</h2> <div class="prompt"> <input type="text" id="input" placeholder="أدخل وصف الصورة..."> <button onclick="getImage()">توليد</button> </div> <div class="images"></div> <script src="main.js"></script> </body> </html> const apiKey = "YOUR_OPENAI_API_KEY"; // استبدل بمفتاح API صالح const input = document.getElementById('input'); const imagesContainer = document.querySelector('.images'); const getImage = async () => { // التحقق من إدخال المستخدم if (!input.value.trim()) { alert("يرجى إدخال وصف للصورة"); return; } // عرض حالة التحميل imagesContainer.innerHTML = '<p>جارٍ التحميل...</p>'; try { const response = await fetch("https://api.openai.com/v1/images/generations", { method: "POST", headers: { "Content-Type": "application/json", "Authorization": `Bearer ${apiKey}` }, body: JSON.stringify({ prompt: input.value, n: 3, // عدد الصور size: "256x256" // حجم الصورة }) }); // التحقق من نجاح الطلب if (!response.ok) { throw new Error(`خطأ في الطلب: ${response.status}`); } const data = await response.json(); // التحقق من وجود بيانات الصور if (!data.data || !Array.isArray(data.data)) { throw new Error("لم يتم العثور على صور في الاستجابة"); } // إفراغ الحاوية imagesContainer.innerHTML = ''; // إضافة الصور إلى DOM data.data.forEach(photo => { const container = document.createElement('div'); const img = document.createElement('img'); img.src = photo.url; img.alt = input.value; container.appendChild(img); imagesContainer.appendChild(container); }); } catch (error) { console.error("Error:", error); imagesContainer.innerHTML = `<p style="color: red;">حدث خطأ: ${error.message}</p>`; } }; // ربط حدث الضغط على زر Enter input.addEventListener('keypress', (e) => { if (e.key === 'Enter') { getImage(); } });

يرجى التواصل مع مركز المساعدة من هنا و تقديم تذكرة لهم و سيعملون على مساعدتك بشكل كبير. بالتوفيق

return، هي جزء مهم في الدوال لأنها تُستخدم لإرجاع قيمة من الدالة إلى المكان الذي استُدعيت منه. بدون return، الدالة قد تنفذ مهمتها لكنها لن تعطيك نتيجة تستطيع استخدامها لاحقًا. دعني أوضح بمثال بسيط: def add(a, b): return a + b # يرجع مجموع a و b result = add(3, 4) # الدالة ترجع 7، وتُخزن في result print(result) # يطبع: 7 بدون return، لو كتبت فقط a + b داخل الدالة، لن تتمكن من تخزين النتيجة في result، وسيكون الناتج None.