اذهب إلى المحتوى

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

الأعضاء
  • المساهمات

    578
  • تاريخ الانضمام

  • تاريخ آخر زيارة

كل منشورات العضو محمود_سعداوي

  1. السلام عليكم. كيف يمكن تنزيل محرر الأكواد vs code للحواسيب 32bit. شكرا.
  2. ما مدى صحة الشيفرة التالية: <!-- <div class="relative"> <div class="absolute"></div> <div class="absolute"></div> <div class="absolute"></div> </div> --> علما و أن class="relative أو class="absolute" تعني أن position:relative أو position:absolute شكرا
  3. السلام عليكم. أنا بصدد بكتابة كود تقييمي. التقييم يظههر من خلال عدد النجمات. مثلا: التقييم 5 يظهر 5 نجمات التقييم 3.2 يظهر 3 نجمات و نصف نجمة. الكود: // adding the rate let rate = (customer.rating * 100)/5; if (rate <= 10){ customersCardRate.innerHTML = `<i class="fa-solid fa-star-half-stroke"></i>` } else if( 11 <= rate <= 20) { customersCardRate.innerHTML = `<i class="fa-solid fa-star"></i>` } else if (21 <= rate <= 30) { customersCardRate.innerHTML = `<i class="fa-solid fa-star"></i> <i class="fa-solid fa-star-half-stroke"></i>` } else if (31 <= rate <= 40) { customersCardRate.innerHTML = `<i class="fa-solid fa-star"></i> <i class="fa-solid fa-star"></i>` } else if (41 <= rate <= 50) { customersCardRate.innerHTML = `<i class="fa-solid fa-star"></i> <i class="fa-solid fa-star"></i> <i class="fa-solid fa-star-half-stroke"></i>` } else if (51 <= rate <= 60) { customersCardRate.innerHTML = `<i class="fa-solid fa-star"></i> <i class="fa-solid fa-star"></i> <i class="fa-solid fa-star"></i>` } else if (61 <= rate <= 70) { customersCardRate.innerHTML = `<i class="fa-solid fa-star"></i> <i class="fa-solid fa-star"></i> <i class="fa-solid fa-star"></i> <i class="fa-solid fa-star-half-stroke"></i>` } else if (71 <= rate <= 80) { customersCardRate.innerHTML = `<i class="fa-solid fa-star"></i> <i class="fa-solid fa-star"></i> <i class="fa-solid fa-star"></i> <i class="fa-solid fa-star"></i>` } else if (81 <= rate <= 90) { customersCardRate.innerHTML = `<i class="fa-solid fa-star"></i> <i class="fa-solid fa-star"></i> <i class="fa-solid fa-star"></i> <i class="fa-solid fa-star"></i> <i class="fa-solid fa-star-half-stroke"></i>` } else if (91 <= rate <= 100) { customersCardRate.innerHTML = `<i class="fa-solid fa-star"></i> <i class="fa-solid fa-star"></i> <i class="fa-solid fa-star"></i> <i class="fa-solid fa-star"></i> <i class="fa-solid fa-star"></i>` } المشكلة هو أن الكود يقف مباشرة بعد if الأولى. يعني يظهر مباشرة نجمة واحدة. عندما أضع else if التي تليها في شكل comment يمر مباشرة للتي تليها. شكرا لكم. ملاحظة: console لايظهر أي أخطاء
  4. تفضّل <!-- section-1 --> <div class="section-1"> <div class="navbar"> <a href="#" class="navbar-link">Design</a> <a href="#" class="navbar-link">Customers</a> <a href="#" class="navbar-link">Team</a> <a href="#" class="navbar-link">Contact</a> </div> <div class="floating-bg"></div> <div class="logo"> <!-- i.fa-bezier-curve --> </div> </div>
  5. السلام عليكم. قمت بإنشاء navbar كالآتي: شيفرة css .navbar{ position: relative; display: flex; justify-content: center; z-index: 20; } .navbar a{ color: #fff; margin: 20px 50px; font-weight: bold; font-size: 20px; word-wrap: break-word; width: 2%; letter-spacing: 3px; padding: 5px; /* transition: all 0.5s; */ } أريد أن تكون navbar عندما أضع الماوس عاى عنصر معين كالتالي شيفرة css3 .navbar{ position: relative; display: flex; justify-content: center; z-index: 20; } .navbar a{ color: #fff; margin: 20px 50px; font-weight: bold; font-size: 20px; word-wrap: break-word; width: 2%; letter-spacing: 3px; padding: 5px; /* transition: all 0.5s; */ } المشكلة التي إعترضتني هو أني عندما أضفت التحريك بواسطة transition (مثلما هو مبيّن في comment ) هو أن الhover تعمل فقط إذا قمت بوضع الماوس على الحرف الأول من العنصر. الرجاء المساعدة شكرا
  6. السّلام عليكم. الرجاء تقديم آراؤكم و ملاحظاتكم في الموقع الذي قمت بإنشائه. الموقع: https://saadaoui-forkan.github.io/Foods/ شكرا لكم.
  7. لدي مشكلة في ربط حسابات git hub مختلفة في مشاريعي وعند محاولة دفع ملفات من حساب آخر تفشل المحاولة هل يعني ذلك أنه لا يمكنني الإعتماد على حسابين لرفع المشاريع.
  8. شكرا جزيلا شكرا جزيلا. في الواقع أملك حساب قديم git huh و المشكلة كانت في عدم تطابق user-name. هل يعني ذلك أنه لا يمكنني الإعتماد على حسابين لرفع المشاريع.
  9. لدي مشكلة في الاتصال لمستودع غيت هاب المشكل: $ git push-u origin master remote: Permission to Saadaoui -Forkan/Food.git denied to saadaoui-mahmoud. fatal: unable to access 'https://github.com/Saadaoui-Forkan/Food.git/': The requested URL returned error: 403
  10. السلام عليكم. لكي أرفع مشروع على github قمت بتنفيذ الأوامر التالية: git add . git commit -m "first commit" git branch -M master git remote add origin <url> git push -u origin master ظهرت لي الرسالة التالية: fatal: unable to access <url> The requested URL returned error: 403 شكرا على المساعدة
  11. شكرا. وقع تطبيق التأثير إلا عندما قمت بتحديد قيمة محددة للخاصية height. height: auto; لم تعمل في حين height:100px; وقع تفعيل التأثير شكرا مجددا. شكرا. وقع تطبيق التأثير إلا عندما قمت بتحديد قيمة محددة للخاصية height. height: auto; لم تعمل في حين height:100px; وقع تفعيل التأثير شكرا مجددا.
  12. في الواقع أخي لاتوجد مشكلة و لكن الخاصية transition إذا قمنا بتطبيقها على navbar-section فهي لاتعمل. <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Foods</title> <link rel="stylesheet" href="style.css"> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.1.1/css/all.min.css" integrity="sha512-KfkfwYDsLkIlwQp6LFnl8zNdLGxu9YAA1QvwINks4PhcElQSvqcyVLLD9aMhXd13uQjoXtEKNosOWaZqXgel0g==" crossorigin="anonymous" /> </head> <body> <!-- navbar --> <div class="header-section"> <div class="navbar-section"> <div class="navbar-link"> <i class="fas fa-home"></i> <span>Home</span> </div> <div class="navbar-link"> <i class="fas fa-utensils"></i> <span>Meals</span> </div> <div class="navbar-link"> <i class="fas fa-hamburger"></i> <span>Burger</span> </div> <div class="navbar-link"> <i class="fas fa-pizza-slice"></i> <span>Pizza</span> </div> <div class="navbar-link"> <i class="fas fa-blender-phone"></i> <span>Contact</span> </div> </div> <div class="menu"></div> </div> <script src="script.js"></script> </body> </html> الأمر محير صديقي.
  13. السلام عليكم. أود التوضيح حول عدم تفعيل الخاصية transition في الحالة الأولى في حين م تفعيلها في الحالة الثانية. الحالة الأولى .navbar-section{ display: flex; flex-direction: row; align-items: center; justify-content: center; background-color: var(--color4); height: 0; transition: height 2s; } الحالة الثانية .navbar-link{ padding: 20px; display: flex; flex-direction: column; align-items: center; color: var(--color1); opacity: 0; transition: opacity 1s; } شكرا جزيلا.
  14. شكرا. المشكلة كانت في الكروم على ما أعتقد لأني عندما أعدت تشغيل الحاسوب عمل البرانمج جيدا (إستعملت flex-wrap و margin)
  15. في الواقع قمت بتجربة space around ; space between; و النتيجة: كما أن margin لم تعمل عندما قمت بتجربتها.
  16. السلام عليكم. كيف يمكني أن أجعل تنسيق الصفحة الألى مثل تنسيق الصفحة الثانية باستعمال flexbox علما و أني جربت flex-wrap ولم تنجح الصفحة الأولى الصفحة الثانية شكرا.
  17. code html <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Foods</title> <link rel="stylesheet" href="style.css"> </head> <body> <!--section1 --> <div class="section-1"> <h1 class="section-1-heading"> Variety of Foods </h1> <div class="section-1-img"> <img src="./img/img2.png" alt="" class="active"> <img src="./img/img4.png" alt=""> <img src="./img/img5.png" alt=""> <img src="./img/img7.png" alt=""> <img src="./img/img8.png" alt=""> <img src="./img/img9.png" alt=""> </div> </div> <script src="script.js"></script> </body> </html> code css @import url('https://fonts.googleapis.com/css2?family=Fredoka:wght@400;500&family=Oleo+Script+Swash+Caps:wght@400;700&display=swap'); /* font-family: 'Oleo Script Swash Caps', cursive; */ :root{ --color1:#E5E3C9; --color2:#B4CFB0; --color3:#94B49F; --color4:#789395; } *{ margin: 0; padding: 0; box-sizing: border-box; } .section-1{ background-color: var(--color3); color: #fff; font-family: 'Oleo Script Swash Caps', cursive; height: 100vh; position: relative; width: 100%; } .section-1-heading{ font-weight: bold; font-size: 50px; text-align: center; padding-top: 90px; } .section-1-img { width: 100%; margin-left: 40%; margin-top: 10%; } .section-1-img img{ width: 300px; height: 180px; position: absolute; opacity: 0; transition: opacity 1s; } .section-1-img img.active{ opacity: 1; } @media (max-width: 320px){ .section-1-heading { font-size: 40px; } .section-1-img { margin-left: 20%; margin-top: 40%; } .section-1-img img { width: 200px; height: 100px; } } @media (min-width: 321px) and (max-width: 425px){ .section-1-heading { font-size: 45px; } .section-1-img { margin-left: 20%; margin-top: 30%; } .section-1-img img { width: 250px; height: 130px; } } @media (min-width: 426px) and (max-width: 768px){ .section-1-img { margin-left: 30%; } } code javascript let slideImg = Array.from(document.querySelectorAll('.section-1-img img')) let counter = 0 let timer = 3000 setInterval(()=>{ // function that gives the next image (with the class "active") if(counter < slideImg.length -1){ counter ++ slideImg[counter].classList.add("active") slideImg[counter-1].classList.remove("active") } else{ counter = 0 slideImg[counter].classList.add("active") slideImg[slideImg.length -1].classList.remove("active") } },timer)
  18. شيفرة html css *{ margin: 0; padding: 0; box-sizing: border-box; } .section-1{ background-color: var(--color3); color: #fff; font-family: 'Oleo Script Swash Caps', cursive; height: 100vh; position: relative; width: 100%; } .section-1-heading{ font-weight: bold; font-size: 50px; text-align: center; padding-top: 90px; } .section-1-img { width: 100%; margin-left: 40%; margin-top: 10%; } .section-1-img img{ width: 300px; height: 180px; position: absolute; opacity: 0; transition: opacity 1s; } .section-1-img img.active{ opacity: 1; }
  19. السلام عليكم و عيد مبارك. لماذا الصفحة في console غير مطابقة للصفحة على شاشة الحاسوب. الصفحة الأصلية الصفحة عند إستعمال console ملاحظة: الرجاء عدم التركيز في الصورة بذاتها لأنها تتغير كل 3 ثواني. شكرا.
  20. السلام عليكم. للحصول على شهادة يجب إتمام 4 مسارات. طيب لو كانت الدورة تحتوي أكثر من 8 مسارات مثل دورة تعلم التطبيقات بلغة الجافا سكريبت هل يمكن الحصول على شهادتين كمطور ويب بلغة الجافا سكريبت و مطور تطبيقات الجوال مثلا.
×
×
  • أضف...