Mustafa Suleiman

401 يعني وصول غير مُصرح، أرى api.openweather بالتالي ستحتاج إلى تسجيل حساب والحصول على مفتاح API للتمكن من الإتصال، التسجيل من هنا: https://home.openweathermap.org/users/sign_up ثم الحصول على المفتاح من هنا: https://home.openweathermap.org/api_keys ثم تضمينه في الطلب الخاص بك وإليك مثال: https://api.openweathermap.org/data/3.0/onecall?lat=33.44&lon=-94.04&exclude=hourly,daily&appid={API key} لاحظ عليك استبدال API key بالمفتاح الخاص بك، والأفضل وضعه في ملف env. ثم استيراده منه كمتغير بيئة

ملف env. في أي مشروع هو لإضافة المتغيرات البيئية الخاصة بالمشروع، وتلك المتغيرات بها معلومات حساسة لا نريد تضمينها في الكود، مثل رابط قاعدة البيانات ومفتاح الـ API للخدمات التي نستخدمها والكلمات السرية وأي معلومات لا تريد للغير الإطلاع عليها عند تصفح الكود. ويتم إضافة اسم الملف .env إلى ملف آخر اسمه .gitignore. والذي يمنع رفع الملف الذي يحتوي على الأسرار إلى GitHub، وبذلك لا يراها أي شخص آخر. كذلك تستطيع إنشاء ملف .env مختلف لكل بيئة عمل، فكل ما ستحتاجه هو تغيير قيمة المتغيرات التي به فقط، ففي بيئة التطوير سقوم باستخدام قاعدة بيانات محلية، وفي بيئة الإنتاج ستستخدم قاعدة البيانات الحقيقية على الخادم. بالنسبة لما في الملف لديك فهو VITE_APP_ID متغير بيئي خاصة بأداة التحزيم Vite، وهو مُعرف التطبيق لتكوين إعدادات التطبيق وللتمييز بين التطبيقات المختلفة وللاتصال بالخدمات الخارجية -مثل قواعد البيانات أو APIs.

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

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

الأمر سيتم من خلال CSS فقط عن طريق الـ animation والتحكم في الـ keyframes كالتالي: .animated-sale-button { transition: all 0.3s ease; background: linear-gradient(to right, #f72585, #b5179e, #7209b7, #f72585); background-size: 200% auto; animation: gradient-animation 3s linear infinite; } } @keyframes gradient-animation { 0% { background-position: 0% 50%; } 100% { background-position: 100% 50%; } } بالطبع افترضت أنّ اسم الكلاس الخاص بالزر هو animated-sale-button، ولاحظ أضفت background-size: 200% auto فذلك الجزء الأهم، لجعل صورة الخلفية أي التدرج اللوني أعرض بمرتين من الزر نفسه. ثم من خلال @keyframes gradient-animation نحدد ما تفعله الحركة، وهو تغيير موضع الخلفية background-position من 0% أي البداية إلى 100% وهي النهاية على المحور الأفقي، وبما أن حجم الخلفية 200%، فتحريكها بنسبة 100% سيُظهر الجزء المخفي من التدرج اللوني، وذلك يخلق وهم الحركة.

بشكل مُبسط المكونات الأصناف تعتمد على الكلاسات في بنيتها، لذا نلتزم بالـ Syntax الخاصة بالكلاسات في جافاسكريبت ونقوم بإنشاء الدوال الخاصة بالمكون بداخل الكلاس الخاص به، وبالتالي تصبح ميثودز وكذلك الحالة state يتم تهيئها داخل الكلاس فتصبح خواص. ما سبق يحتاج إلى استيعاب OOP في جافاسكريبت لتتمكن من فهمه ،وحاليًا أصبحت الطريقة السابقة غير مستخدمة، ومنذ سنوات تم إعتماد المكونات الوظيفية أي الـ Function Components. لكونها أسهل وأفضل بشكل مُختصر دونّ تعقيد. ستجد تفصيل هنا:

أرجو توضيح ما تريد تنفيذه، حسب ما فهمت تريد إنشاء صفحة جديدة، وفي React ذلك يتم من خلال المكونات، ثم ربط ذلك المكون بموجه router ليتم التوجيه إليه عن زيارة المسار الخاص به أو الضغط على الرابط الخاص به. بالطبع ستحتاج إلى مكتبة react-router-dom npm install react-router-dom وليكن اسم المكون About.js ونضعه في مجلد باسم pages: import React from 'react'; const About = () => { return ( <div> <p> نص تجريبي</p> </div> ); }; export default About; ثم في ملف App.js قم بإعداد التوجيه باستخدام react-router-dom. // src/App.js import React from 'react'; import { BrowserRouter as Router, Routes, Route, Link } from 'react-router-dom'; import NewPage from './pages/About'; import Home from './pages/Home'; const App = () => { return ( <Router> <div> <nav> <ul> <li> <Link to="/">الصفحة الرئيسية</Link> </li> <li> <Link to="/about">الصفحة الجديدة</Link> </li> </ul> </nav> <Routes> <Route path="/" element={<Home />} /> <Route path="/about" element={<About />} /> </Routes> </div> </Router> ); }; export default App;

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

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

لم يتم التطرق إلى ذلك الإطار، ما تم شرحه هو Flask و Django، ولن تحتاج سواهما في البداية إلا إذا أردت FastAPI لغرض معين تعلمه، وللعلم هو مستوحى بشكل كبير من Flask، بالتالي لو استوعب Flask، فسيصبح تعلم FastAPI سهل، فكلاهما إطار عمل صغير وستبدأ المشروع بشكل بسيط جدًا ثم تضيف إليه المكونات التي تحتاجها. مثلاً لتحديد المسارات، ففي Flask ستكتب: @app.route("/items/", methods=["GET"]) def get_items(): return {"items": ["item1", "item2"]} بينما في FastAPI: @app.get("/items/") def get_items(): return {"items": ["item1", "item2"]} أي كلاهما يعتمد على الـ Decorators والتي سيتم شرحها بالدورة. الفكرة من FastAPI هو أنه مناسب لو المشروع عبارة عن API لتطبيق جوال، أو واجهة أمامية حديثة مثل React/Vue، أو لخدمات أخرى، وتريد تطوير المشروع بسرعة، بمعنى يوجد واجهة أمامية منفصلة.

هل قمت بتحديث الصفحة؟ عامًة تفقد ما هي البيانات التي يتم جلبها من التخزين من خلال الكونسول كالتالي: useEffect(() => { const storedTodos = localStorage.getItem("todos"); console.log("القيمة المخزنة التي تمت قراءتها:", storedTodos); //هنا if (storedTodos) { setTodos(JSON.parse(storedTodos)); } }, []); وتفقد المشكلة، ثم تستطيع إرفاق مجلد المشروع لتفقده.

المشكلة في دالة الدالة JSON.parse()، فالنص الذي تستقبله ليس بصيغة JSON صحيحة، أي هنا: setTodos(JSON.parse(storedTodos)); غالبًا قمت بتخزين بيانات غير صحيحة في التخزين المحلي من قبل، حيث يوجد دالة في Local Storage بدلاً من قائمة المهام. اضغط على F12 ثم توجه إلى تبويب Application في أدوات المطور، ثم اختر Local Storage وستجد التخزين الخاص بعنوان localhost:3000 مثلاً، فاضغط عليه ثم قم بالحذف بالضغط على الزر التالي: بعد ذلك أعد تحديث الصفحة وقم بحفظ البيانات والتجربة من جديد.

وما سبب الرفض لم يتم توضيح ذلك؟ وما هو حجم المشروع؟ وهل متطلبات المشروع واضحة له؟، عامًة تتوفر الكثير من الأدوات التي تقوم بتوليد ذلك فلا أرى سبب لرفضه، لديك مثلاً: https://dbdiagram.io/home https://www.lucidchart.com/pages MySQL Workbench miro.com في حال سيقدم بدائل مثل Migrations أو وثيقة مبسطة ووضع جدولاً زمنياً للتوثيق فلا مشكلة، لكن رفض أي نوع من التوثيق أو التخطيط نهائياً دونّ سبب وجيه، فقم بالبحث عن مطور آخر، فيجب دائمًا توضيح الأمور لك وليس الرفض بشكل مُبهم، على الأقل يجب توفير قائمة بسيطة بالجداول الرئيسية ووصف العلاقات الأساسية من خلال نص أو رسم سريع. ولإختباره اطلب منه رسمة سريعة في مدة أقصاها نصف ساعة للجداول الرئيسية، ورد فعله سيخبرك الكثير عن احترافيته. عامًة الـ ERD ليس ضرورياً للمشاريع الصغيرة أي 10 جداول أو أقل، وتستطيع البدء من دونه في حال وجود خبرة من قبل المطور، لكن ضروري جدًا للمشاريع المتوسطة والكبيرة، فسيوفر عليك 50-70% من وقت إصلاح المشاكل المستقبلية وتكلفة التعديلات. والأمر يعتمد على خبرة المطور في الأساس، بمعنى لو يمتلك سنوات خبرة، فسيرسم مخطط بسيط في أول إجتماع من خلال الأدوات السابقة dbdiagram.io أو draw.io ثم تحديثه مع كل تغيير كبير. في حال سنوات خبرة أقل، فسيبدأ مباشرة بكتابة Models وMigrations بواسطة أدوات ORM (Laravel, Django, Prisma) وغيرهم، ثم بعد أسبوعين يولد ERD تلقائيًا من قاعدة البيانات ويحدث المخطط عند الحاجة فقط، ولكن البدء مباشرًة في مشروع متوسط أو كبير بدون تخطيط أمر غير جيد بالمرة.

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

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

عبارة عن مكتبة مكونات جاهزة للاستخدام مع React، بالتالي هي لبناء واجهات المستخدم بسرعة وسهولة، لكونها توفر مكونات مصممة مسبقًا مثل الأزرار والنماذج والقوائم، أي ليست تصاميم فقط بل مكونات جاهزة تعمل مع المنطق البرمجي الخاص بها. وستجدها مناسبة من حيث سرعة التطوير والحصول على تصميم احترافي ومتناسق دون عناء مثل لوحات التحكم، بينما Tailwind CSS أفضل لبناء تصاميم مخصصة بالكامل من الصفر، بسبب مرونتها المرتفعة في التخصيص، وللعلم يوجد مكونات جاهزة من خلال Tailwind لكنها تصاميم فقط ولا تحتوي على أي منطق برمجي. في حين Styled Components جيدة لعزل التنسيقات داخل كل مكون على حدة والتحكم الكامل في الـ CSS ديناميكيًا. أي لا يوجد ما هو أفضل في البرمجة، بل الأداة المناسبة في المكان المناسب حسب المشروع.

رمز الخطأ 9009 مفاده أن الأمر python لا يتم التعرف عليه في محرر الأكواد vscode، لاحظ رسالة التنبيه الظاهرة في الشريط السفلي على اليمين باللون الأصفر Select Interpreter والخاصة باختيار مُفسر اللغة الذي يقوم بقراءة الأكواد وترجمتها. وحاليًا لم تقم بتحديد أي مُفسر للغة بايثون، لذا اضغط على Select Interpreter ثم اختر مُفسر بايثون الذي ستجد بجانبه كلمة Recommended أو Global. وذلك في حال أنك قمت بالفعل بتثبيت بايثون على حاسوبك، وإن لم تقم إليك رابط التحميل: https://www.python.org/ftp/python/3.11.0/python-3.11.0-amd64.exe

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

تحتاج إلى استيعاب ما هو الـ DOM وكيف تتلاعب جافاسكريبت به، ببساطة أنت تربط عنصر HTML سواء عن طريق الكلاس، أو الـ ID، أو اسم الـ Tag أي العنصر بالجافاسكريبت فقط عندما تحتاج إلى التفاعل مع ذاك العنصر بشكل ديناميكي. أي في حال مثلاً تريد تغيير نص عنصر عند النقر على زر، إخفاء أو إظهار قائمة عند مرور الفأرة فوقها، إضافة أو إزالة عنصر من الصفحة بعد تحميلها، التحقق من صحة البيانات في حقل إدخال قبل إرسال النموذج أو تريد تغيير لون عنصر بناءًا على إجراء معين. لكن لو لدينا عنصر <p> يعرض نص ثابت لا يتغير أبدًا فلا حاجة لربطه، أو لديك كلاس CSS اسمه .main-title يُستخدم فقط لتنسيق العنوان من خلال ملف CSS، ولا توجد أي نية لتغييره عبر الجافاسكريبت. أي الكلاس في HTML له وظيفتان أساسيتان، الأولى التنسيق باستهدافه من خلال CSS لتطبيق الأنماط، والثانية التحديد باستهدافه من خلال جافاسكريبت للتحكم فيه والتلاعب به. وذلك يتم عبر الـ DOM لتستوعبه، تخيل أن ملف الـ HTML ا هو مخطط بناء لعمارة سكنية مثلاً، وعند تشغيله في المتصفح، فهو لا يقرأه كنص عادي فقط، بل يقوم ببناء نموذج حي وتفاعلي من ذلك المخطط ووضعه في الذاكرة. بالتالي الـ DOM هو تمثيل هيكلي على شكل شجرة لمستند الـ HTML، فكل شيء في صفحة الويب من العناصر <p> و<div>، السمات مثل class و src، والنصوص يصبح جزءًا من الشجرة. والجافاسكريبت لا تستطيع قراءة أو تعديل ملف الـ index.html الأصلي مباشرة، بل المتصفح هو ما يمنح الجافاسكريبت واجهة برمجية API للوصول إلى شجرة الـ DOM التي بناها، وهنا يأتي دور الكلاس والـ ID، لكون جافاسكريبت تحتاج إلى عنوان لتجد العنصر الذي تريد التلاعب به.

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

عليك بعرض التخصصات بطريقة تسهل المقارنة والاختيار، عن طريق تصميم بطاقات تفاعلية، ابحث عن cards ui، بالإضافة إلى جدول للمقارنة السريعة يسمح بمقارنة حتى 4 تخصصات جنبًا إلى جنب، وتوفير معايير المقارنة من حيث التكلفة، المدة، فرص العمل، متطلبات القبول، وأضف ميزة تصدير المقارنة كـ PDF أو مشاركتها. والتصنيف الهرمي هو الأفضل، بمعنى اعرض المجالات الرئيسية ثم الكليات ثم التخصصات، واستخدام مؤشرات بصرية بما في ذلك أيقونات ملونة، شارات خاصة بالأكثر طلباً أو الجديد. ومعلومات أساسية فورية توضح المدة، التكلفة التقريبية، نسبة التوظيف، مع زر أضف للمفضلة للحفظ والمراجعة لاحقًا. بالنسبة للفلاتر والبحث الذكي، فالأفضل توفير كليهما، فالبحث للاستعلامات السريعة مثل صيدلة عين شمس، أما الفلاتر للاستكشاف في حال عندما لا يعلم الطالب ما يريد بالضبط. وأضف ميزة حفظ عمليات البحث للعودة إليه لاحقًا، ويا حبذا لو قمت بتضمين الذكاء الاصطناعي لتوفير اقتراحات بناءًا على سلوك المستخدم أو معلوماته وتفضيلاته. في القسم الأول عنوان رئيسي يوضح القيمة أو هدف المنصة ووصف مختصر، ثم شريط بحث مركزي وواضح وأزرار للإجراءات الرئيسية، والتصنيفات السريعة. ثم قسم الأكثر بحثاً وبه أفضل 6-8 تخصصات مطلوبة مع تحديث ديناميكي حسب الموسم، وقم بعرض أسئلة لتوجيه الزائر بمعنى زر لست متأكداً من اختيارك؟ 2 أجب عن 5 أسئلة بسيطة لنساعدك. ثم قسم عرض الإحصائيات الحية مثل +15,000 طالب استخدموا الموقع 150+ جامعة مسجلة 500+ تخصص متاح. وقسم آخر التحديثات به مواعيد التقديم القادمة، تغييرات في شروط القبول ومنح دراسية جديدة. ثم قسم تقييمات أو آراء الطلاب، مثلاً ساعدني الموقع في اختيار تخصص الهندسة المدنية، أحمد، طالب بجامعة القاهرة. واهتم بالتخصيص الشخصي، بمعنى عرض رسالة مثل مرحباً أحمد، إليك تخصصات قد تهمك، وحفظ التفضيلات والبحث السابق وتنبيهات لمواعيد التقديم، وضع في اعتبارك أنّ % من المستخدمين يستخدمون الهاتف. كذلك فيديوهات توضيحية قصيرة.

عليك بتوجيه الأداة لاستخدام Intl.DateTimeFormat API المتاحة في المتصفح، وبمثال بسيط ستكتب السكريبت التالي: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> </head> <body> <div id="dual-calendar-container"> <p class="gregorian-date"></p> <p class="hijri-date"></p> </div> <script> document.addEventListener('DOMContentLoaded', function() { const today = new Date(); const gregorianOptions = { weekday: 'long', year: 'numeric', month: 'long', day: 'numeric' }; const gregorianDateFormatter = new Intl.DateTimeFormat('ar-EG', gregorianOptions); const gregorianDateString = gregorianDateFormatter.format(today); const hijriOptions = { weekday: 'long', year: 'numeric', month: 'long', day: 'numeric', }; const hijriDateFormatter = new Intl.DateTimeFormat('ar-SA-u-ca-islamic-umalqura', hijriOptions); const hijriDateString = hijriDateFormatter.format(today); const container = document.getElementById('dual-calendar-container'); if (container) { container.querySelector('.gregorian-date').textContent = `الميلادي: ${gregorianDateString}`; container.querySelector('.hijri-date').textContent = `الهجري: ${hijriDateString}`; } }); </script> </body> </html>

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

الأمر يعتمد على ظروفك الشخصية، هل أنت بحاجة إلى العمل عما قريب؟ في حال لديك وقت كافي وعمرك صغير ولا تحتاج إلى العمل بأسرع وقت، فالأفضل دراسة دورة علوم الحاسوب بشكل كامل، وذلك للتأسيس في مجال البرمجة بشكل جيد. وفي حال ليس لديك وقت، فبحد أدنى ستحتاج إلى دراسة المسارات التالية في دورة علوم الحاسوب للاستعداد لدراسة دورة PHP: مدخل إلى علوم الحاسوب أساسيات البرمجة قواعد البيانات إلى عالم الويب أساسيات هندسة البرمجيات إعادة تصميم البرمجيات Refactoring وبقية المسارات تستطيع العودة إليها لاحقًا ودراستها. وكذلك ستحتاج إلى دراسة HTML و CSS وقد ذكرت أنك قمت بذلك بالفعل.

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