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

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

الأعضاء
 عرض الملف الشخصي  تصفح المحتوى

  • المساهمات

    604

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

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

 نوع المحتوى 

ريادة الأعمال

البرمجة

التصميم

DevOps

التسويق والمبيعات

العمل الحر

البرامج والتطبيقات

آخر التحديثات

قصص نجاح

أسئلة وأجوبة

كتب

دورات

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

  1. محمود سعداوي2
    السّلام عليكم. الرجاء تقديم آراؤكم و ملاحظاتكم في الموقع الذي قمت بإنشائه. الموقع: https://saadaoui-forkan.github.io/Foods/ شكرا لكم.
  2. محمود سعداوي2
    لدي مشكلة في ربط حسابات git hub مختلفة في مشاريعي وعند محاولة دفع ملفات من حساب آخر تفشل المحاولة هل يعني ذلك أنه لا يمكنني الإعتماد على حسابين لرفع المشاريع.
  3. محمود سعداوي2
    شكرا جزيلا شكرا جزيلا. في الواقع أملك حساب قديم git huh و المشكلة كانت في عدم تطابق user-name. هل يعني ذلك أنه لا يمكنني الإعتماد على حسابين لرفع المشاريع.
  4. محمود سعداوي2
    لدي مشكلة في الاتصال لمستودع غيت هاب المشكل: $ 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
  5. محمود سعداوي2
    لم أدر بالضبط سبب المشكل
  6. محمود سعداوي2
    السلام عليكم. لكي أرفع مشروع على 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 شكرا على المساعدة
  7. محمود سعداوي2
    شكرا. وقع تطبيق التأثير إلا عندما قمت بتحديد قيمة محددة للخاصية height. height: auto; لم تعمل في حين height:100px; وقع تفعيل التأثير شكرا مجددا. شكرا. وقع تطبيق التأثير إلا عندما قمت بتحديد قيمة محددة للخاصية height. height: auto; لم تعمل في حين height:100px; وقع تفعيل التأثير شكرا مجددا.
  8. محمود سعداوي2
    في الواقع أخي لاتوجد مشكلة و لكن الخاصية 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> الأمر محير صديقي.
  9. محمود سعداوي2
    السلام عليكم. أود التوضيح حول عدم تفعيل الخاصية 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; } شكرا جزيلا.
  10. محمود سعداوي2
    شكرا. المشكلة كانت في الكروم على ما أعتقد لأني عندما أعدت تشغيل الحاسوب عمل البرانمج جيدا (إستعملت flex-wrap و margin)
  11. محمود سعداوي2
    في الواقع قمت بتجربة space around ; space between; و النتيجة: كما أن margin لم تعمل عندما قمت بتجربتها.
  12. محمود سعداوي2
    السلام عليكم. كيف يمكني أن أجعل تنسيق الصفحة الألى مثل تنسيق الصفحة الثانية باستعمال flexbox علما و أني جربت flex-wrap ولم تنجح الصفحة الأولى الصفحة الثانية شكرا.
  13. محمود سعداوي2
    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)
  14. محمود سعداوي2
    شيفرة 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; }
  15. محمود سعداوي2
    نفس المشكل. مثلما تلاحظون لم يعالج مشكل الخلفية
  16. محمود سعداوي2
    السلام عليكم و عيد مبارك. لماذا الصفحة في console غير مطابقة للصفحة على شاشة الحاسوب. الصفحة الأصلية الصفحة عند إستعمال console ملاحظة: الرجاء عدم التركيز في الصورة بذاتها لأنها تتغير كل 3 ثواني. شكرا.
  17. محمود سعداوي2
    السلام عليكم. للحصول على شهادة يجب إتمام 4 مسارات. طيب لو كانت الدورة تحتوي أكثر من 8 مسارات مثل دورة تعلم التطبيقات بلغة الجافا سكريبت هل يمكن الحصول على شهادتين كمطور ويب بلغة الجافا سكريبت و مطور تطبيقات الجوال مثلا.
  18. محمود سعداوي2
    لاشك أن تعلم الunit testing مثل jest مهم للغاية. لكن متى يكون تعلمه لمن يتابع دورة تطبيقات الويب بلغة الجافا سكريبت. و هل هناك دورة تتيح تعلم الجاست.
  19. محمود سعداوي2
    شكرا لك أخي الكريم على المساعدة. لكن أعتقد أنه عادة ما يقع تجنب إعتماد forEach داخل forEach لأنها تجعل المتصفح يستغرق الكثير من الوقت. هل يوجد حل أفضل. شكرا مسبقا.
  20. محمود سعداوي2
    تفضل <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Slider JS</title> <link rel="stylesheet" href="style.css"> </head> <body> <div class="slider"> <div class="cont-slides"> <img src="imgs/img1.jpg" class="active" alt="1"> <img src="imgs/img2.jpg" alt="2"> <img src="imgs/img3.jpg" alt="3"> <img src="imgs/img4.jpg" alt="4"> <img src="imgs/img5.jpg" alt="5"> <img src="imgs/img6.jpg" alt="6"> </div> <div class="commandes"> <button class="left" type="button" title="left"> <img src="imgs/left.svg" alt=""> </button> <button class="right" type="button" title="right"> <img src="imgs/right.svg" alt=""> </button> </div> <div class="cercles"> <button data-clic="1" class="cercle active-cercle" type="button" title="cercle1"></button> <button data-clic="2" class="cercle" type="button" title="cercle2"></button> <button data-clic="3" class="cercle" type="button" title="cercle3"></button> <button data-clic="4" class="cercle" type="button" title="cercle4"></button> <button data-clic="5" class="cercle" type="button" title="cercle5"></button> <button data-clic="6" class="cercle" type="button" title="cercle6"></button> </div> </div> <script src="script.js"></script> </body> </html> أعتقد أني وجدت الحل عندما أقوم بالنقر على دائرة معينة يجب علي إخفاء كافة الصور ثم إظهار الصورة المعنية الشيفرة صارت إذا cercles.forEach((item, i) => { item.addEventListener('click', (element) => { // console.log(cercles[i].getAttribute('data-clic')) // console.log(imgs[i].getAttribute('alt')) // if(cercles[i].getAttribute('data-clic') === imgs[i].getAttribute('alt')) { // imgs[i].classList.add("active") // } else{ // imgs[i].classList.remove("active") // } cercles.forEach(option => { // console.log(option) option.classList.remove('active-cercle'); }) imgs.forEach(img => { // console.log(option) img.classList.remove('active'); }) item.classList.add('active-cercle'); imgs[i].classList.add("active") }); });
  21. محمود سعداوي2
    هذه واجهة التطبيق الذي أنا بصدد القيام به: ما أريده هو عند الضغط على أي دائرة في الأسفل تصبح الدائرة ملونة و تظهر الصورة المناسبة. المشكل الذي أواجهه هو ظهور الصورة المناسبة عند الضغط الدائرة (ليست لدي مشكلة في لون الدائرة عند الضغط عليها) بحيث: إذا كانت الدائرة رقم 1 هي الدائرة من اليسار و هكذا دواليك، في هذه الحالة الكود يعمل بشكل جيد لو فرضنا أنني الآن مستوى الدائرة رقم 5، في هذه الحالة عندما أقوم بالضغط على الدائرة 2 (كمثال) فإن console يفهم أني مستوى الصورة الثانية لكن الصورة لا تظهر الشيفرة: const imgs = document.querySelectorAll(".cont-slides img") const precedent = document.querySelector(".left") const suivant = document.querySelector(".right") const cercles = document.querySelectorAll(".cercle") let index = 0 suivant.addEventListener("click", imgSuivante) function imgSuivante() { if (index < 5) { imgs[index].classList.remove("active") index ++ imgs[index].classList.add("active") } else if(index == 5){ imgs[index].classList.remove("active") index = 0 imgs[index].classList.add("active") } for (let i = 0; i < cercles.length; i++) { if (cercles[i].getAttribute('data-clic')-1 === index) { cercles[i].classList.add("active-cercle") } else{ cercles[i].classList.remove("active-cercle") } } } precedent.addEventListener("click", imgPrecedente) function imgPrecedente() { if (index > 0) { imgs[index].classList.remove("active") index -- imgs[index].classList.add("active") } else if(index == 0){ imgs[index].classList.remove("active") index = 5 imgs[index].classList.add("active") } for (let i = 0; i < cercles.length; i++) { if (cercles[i].getAttribute('data-clic')-1 === index) { cercles[i].classList.add("active-cercle") } else{ cercles[i].classList.remove("active-cercle") } } } // console.log(cercles) cercles.forEach((item, i) => { item.addEventListener('click', (element) => { console.log(cercles[i].getAttribute('data-clic')) console.log(imgs[i].getAttribute('alt')) if(cercles[i].getAttribute('data-clic') === imgs[i].getAttribute('alt')) { imgs[i].classList.add("active") } cercles.forEach(option => { // console.log(option) option.classList.remove('active-cercle'); }) item.classList.add('active-cercle'); }); }); شكرا لكم و أعتذر عن عدم وضوح السؤال
  22. محمود سعداوي2
    هنا أيضا الصورة لا تظهر
  23. محمود سعداوي2
    السلام عليكم قمت بإنجاز img slide كالتالي: عند النقر على الأزرار الدائرية من اليسار إلى اليمين تظهر الصورة المناسبة و يصبح الدائرة ملونة (تمام) لكن عند النقر من اليمين إلى اليسار console يظهر الصورة المناسبة لكن الصورة لاتظهر. شيفرة html javascript شكرا جزيلا
  24. محمود سعداوي2
    const imgs = document.querySelectorAll(".cont-slides img") const precedent = document.querySelector(".left") const suivant = document.querySelector(".right") const cercles = document.querySelectorAll(".cercle") let index = 0 suivant.addEventListener("click", imgSuivante) function imgSuivante() { if (index < 2) { imgs[index].classList.remove("active") index ++ imgs[index].classList.add("active") } else if(index == 2){ imgs[index].classList.remove("active") index = 0 imgs[index].classList.add("active") } for (let i = 0; i < cercles.length; i++) { if (cercles[i].getAttribute('data-clic')-1 === index) { cercles[i].classList.add("active-cercle") } else{ cercles[i].classList.remove("active-cercle") } } } precedent.addEventListener("click", imgPrecedente) function imgPrecedente() { if (index > 0) { imgs[index].classList.remove("active") index -- imgs[index].classList.add("active") } else if(index == 0){ imgs[index].classList.remove("active") index = 2 imgs[index].classList.add("active") } for (let i = 0; i < cercles.length; i++) { if (cercles[i].getAttribute('data-clic')-1 === index) { cercles[i].classList.add("active-cercle") } else{ cercles[i].classList.remove("active-cercle") } } } for (let i=0; i<cercles.length; i++) { cercles[i].addEventListener("click", ()=>{ if (i>0){ cercles[i].classList.add("active-cercle") cercles[i-1].classList.remove("active-cercle") imgs[i].classList.add("active") imgs[i-1].classList.remove("active") } if (i===0){ cercles[cercles.length-1].classList.remove("active-cercle") cercles[0].classList.add("active-cercle") imgs[0].classList.add("active") imgs[cercles.length-1].classList.remove("active") // console.log(imgs[i]) } // console.log(imgs[i]) }) }
  25. محمود سعداوي2
    تفضل Slider.rar
×
×
  • أضف...