محمود_سعداوي
-
المساهمات
578 -
تاريخ الانضمام
-
تاريخ آخر زيارة
نوع المحتوى
ريادة الأعمال
البرمجة
التصميم
DevOps
التسويق والمبيعات
العمل الحر
البرامج والتطبيقات
آخر التحديثات
قصص نجاح
أسئلة وأجوبة
كتب
دورات
كل منشورات العضو محمود_سعداوي
-
لاشك أن تعلم الunit testing مثل jest مهم للغاية. لكن متى يكون تعلمه لمن يتابع دورة تطبيقات الويب بلغة الجافا سكريبت. و هل هناك دورة تتيح تعلم الجاست.- 1 جواب
-
- 1
-
-
شكرا لك أخي الكريم على المساعدة. لكن أعتقد أنه عادة ما يقع تجنب إعتماد forEach داخل forEach لأنها تجعل المتصفح يستغرق الكثير من الوقت. هل يوجد حل أفضل. شكرا مسبقا.
-
تفضل <!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") }); });
- 7 اجابة
-
- 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'); }); }); شكرا لكم و أعتذر عن عدم وضوح السؤال
- 7 اجابة
-
- 1
-
-
هنا أيضا الصورة لا تظهر
-
السلام عليكم قمت بإنجاز img slide كالتالي: عند النقر على الأزرار الدائرية من اليسار إلى اليمين تظهر الصورة المناسبة و يصبح الدائرة ملونة (تمام) لكن عند النقر من اليمين إلى اليسار console يظهر الصورة المناسبة لكن الصورة لاتظهر. شيفرة html javascript شكرا جزيلا
- 7 اجابة
-
- 1
-
-
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]) }) }
-
تفضل Slider.rar
-
شكرا أخي الكريم الكود يعمل جيدا لكن أعتقد أن الكود ليس جيد i think that the code is not optimized. بصراحة يسرني معرفة رأيكم و تقديم نصائح إن وجدت ليكون الكود أكثر إختصارا و تنظيما شكرا
-
السلام عليكم. الرجاء توضيح الخطأ التالي ما أريده هو عند الضغط على الحلقة اليسرى يختفي لون اليمنى الشيفرة الشيفرة الكاملة: Slider.rar شكرا مسبقا
- 10 اجابة
-
- 1
-
-
شكرا.
-
السلام عليكم. أرجو توضيح الخطأ التالي في لغة html5 رغم أن المتصفح إستطاع قراءة الشيفرة لكن هذا الخطأ يعيقني عند كتابة الشيففرة بلغة الجافا سكريبت. شكرا.
- 2 اجابة
-
- 1
-
-
يعني في رياكت سوف يكون الإعتماد على الهوكس؟
- 3 اجابة
-
- 1
-
-
كم عدد المشاريع التي يمكن رفعها على منصة heroku. قد يكون سؤال غريب و لكن أود التحقق من هل أن علي فلترة المشاريع التي أرغب برفعها أم لا. شكرا.
- 1 جواب
-
- 1
-
-
السلام عليكم. غالبا ما نستعمل localStorage عند تخزين البيانات في لغة الجافاسكريبت و لكن كيف يكون الأمر إذا تعلق الأمر بمكتبة رياكت. هل سيواصل إستعمالها أم هناك تحديثات أخرى. شكرا.
- 3 اجابة
-
- 1
-
-
أرجو التوضيح حول ظهور session في cookies الشيفرة: علما و أن المتصفح إستطاع قراءة التاريخ شكرا.
- 1 جواب
-
- 1
-
-
السلام عليكم من وجهة نظري أخي الكريم الكورس هو ممهد فقط للمشاريع مثلا أنا أيضا أتابع دورة الجافا سكريبت حيث أن الكورس يقدم الأساسيات فقط و لكن لا يمكن أن يحل كافة المشاريع. شخصيا إنطلاقا من الكورس مع المحادثات و الرد السريع على أسئلتي تحسن أدائي كثيرا. لذلك أنصحك بعدم الإعتمد فقط على الكورس في إنجازك للمشاريع بل يجب البحث أكثر و طرح الأسئلة و مشاهدة اليوتيوب و .. و.. هذه وجهة نظري الشخصية كطالب مثلكم.
- 9 اجابة
-
- 1
-
-
نعم نعم أحيانا عندما يطول الكود يكثكر الإرتباك شكرا جزيلا
-
السلام عليكم. أرجو المساعدة في الخطأ التالي Uncaught TypeError: Cannot read properties of undefined (reading 'target') علما و أن الشيفرة هي التالية: const btns = document.querySelectorAll("button") btns.forEach(btn =>{ btn.addEventListener('click',btnAction) }) function btnAction(e) { let description = e.target.getAttribute("data-cookie") console.log(description); } btnAction() شكرا.
- 5 اجابة
-
- 1
-
-
تفضل <body> <h1>🍪 Le créateur de Cookies 🍪</h1> <input type="text" name="cookieName" value="pull" title="cookieName"> <input type="text" name="cookieValue" value="50" title="cookieValue"> <input type="date" id="date" name="cookieExpire" title="cookieExpire"> <div class="container-btns"> <button data-cookie="creer" class="btn1">Créer</button> <button data-cookie="toutAfficher" class="btn2">Afficher</button> </div> <p class="info-txt"></p> <ul class="affichage"></ul> <script src="script.js"></script> </body>
-
<form> <label for="Day">Day:</label> <input type="date" id="Day" name="Day"> </form>
-
السلام عليكم. كيف يمكنني معالجة المشكل التالي في لغة html5 بإمكاني تجاهل _ 'type='date _والشيفرة تعمل بصفة عادية لكن أريد ظهور وسم المذكرة لكي أختار التاريخ المناسب. شكرا.
- 6 اجابة
-
- 1
-
-
هل لديكم فيديو أو حتى آرتيكل يوضح من خلاله كيفية اإستعمال المتقدم أو المتعدد لposition (absolute,relative...) في لغة css3.
- 2 اجابة
-
- 1
-
-
أقدم لكم كمثال الكود التالي: في هذه الحالة الكود لا يعمل. بينما حين نستبدل "==" ب: "=" فإن يعمل. السؤال هو لماذا المتصفح لا يقرأ "==" في هذه الحالة. شكرا.
- 1 جواب
-
- 1
-
