لوحة المتصدرين

انا اريد ان اتعلم مع الرياكت مكتبة tailwindcss هل في الدوره فيه شرح لها ؟

السلام عليكم ماهو الفرق بين let و var و const شكراً لكم

يمكن أن يكون السبب في عدم تعيين ارتفاع الـ container الخاص بالـ footer بشكل صحيح، مما يؤدي إلى تغيير توزيع المحتوى. يمكن حل المشكلة عن طريق تحديد ارتفاع الـ container بشكل صحيح، ويمكن القيام بذلك باستخدام الخاصية "height" مع CSS، مثلاً: .footer { height: 100px; } ويمكن تعديل قيمة 100px وفقًا لاحتياجات التصميم. كما يجب التأكد من استخدام الأدوات المناسبة لتحليل التصميم والتأكد من تطابق النتائج مع التصميم الأصلي. بعض الأسباب الأخرى التي يمكن أن تؤدي إلى عدم توافق التصميم مع الواجهة النهائية على الموقع تشمل: استخدام العرض والارتفاع بنسبة مئوية بدلاً من القيم الثابتة. استخدام خصائص CSS مثل transform و rotate و translate بشكل غير صحيح. عدم تحديد وحدات القياس بشكل صحيح، مثل استخدام البكسل بدلاً من النسبة المئوية. استخدام العناصر المطلقة (absolute) بشكل غير صحيح، مما يؤدي إلى عدم وضوح الموقع على الشاشات المختلفة. استخدام القيم الافتراضية للخصائص في CSS دون تعديلها وفقًا لاحتياجات التصميم. ومن الصعب الجزم بسبب المشكلة، إلا بعض رؤية الكود الخاص بالـ Footer ويجب أن يكود كود HTML و CSS.

أخي مصطفى جزاك الله خيراً وبارك لك في أهلك ومالك وعلمك..... يقال زكاة العلم نشرة وما قمت به يعتبر في هذا الجانب ....وللفايدة حبيت أقول أنه تم حل المشكلة بعد تنزيل ملف الاندرويد وملف جرادل بداخله لكن المشكلة لم تحل الا بعد تغيير لغة الونيدوز الى الانجليزية وهذا شيئ مهم جداً لضبط تنسيق الوقت والتاريخ كانت تظهر المشكلة .. فشل في بناء التطبيق: Cause: invalid date string: Unparseable date: "bc`c`bafdhefGMT+00:00" ولحلها يجب تغيير لغة الويندوز الى الانجليزية هام

var تستعمل هذه الكلمة لإنشاء متغيرات داخل الكائن العلوي window وهذه المتغيرات إما أن تكون عامة global يمكن الوصول إليها في جميع أنحاء التطبيق أو قد تكون في نطاق محدد وهو نطاق دالة معينة (function-scoped) بحيث لا يمكن الوصول إليها خارج هذه الدالة (private variables). هذه الكلمة المفتاحية موجودة منذ الإصدارات الأولى لجافاسكريبت ولكن الوقت جاء لإضافة بدائل عنها تكون أكثر مرونة وأمانا حتى تساير هذه اللغة الإيقاع السريع الذي يتقدم به مجال برمجيات الويب والجافاسكريبت بصفة عامة. ولهذا ظهر let في الإصدار الأخير من الجافاسكريبت. function varTest() { var x = 1; if (true) { var x = 2; // نفس المتغير console.log(x); // 2 } console.log(x); // 2 } let بعكس var فإن let تمكننا من إنشاء متغيرات تابعة لنطاقات أضيق قد تكون دوال أو فقط تعابير شرطية أو حلقات متكررة وغيرها ولهذا تسمى هذه المتغيرات بالإنجليزية block-scoped أي أنك لا تستطيع الوصول إليها خارج ال block الذي صُرِّح بها فيه. function letTest() { let x = 1; if (true) { let x = 2; // متغير آخر console.log(x); // 2 } console.log(x); // 1 } وعندما تحاول استعمال متغير قبل التصريح به فإنك ستحصل على خطأ جميل في برمجيتك من نوع ReferenceError على عكس ما اعتدنا علينا مع الكلمة المفتاحية var حيث كانت تعطى لكل متغير قيمة افتراضية وهي undefined حتى قبل إنشاء هذا المتغير. const هذه الكلمة تعمل تماما بنفس خصائص let أي أنها block-scoped كذلك إلا أنها، كما يدل على ذلك اسمها، تستعمل فقط للتصريح بالثوابت Constants التي تأخذ قيمة واحدة فقط طيلة حياة البرنامج ولا يمكن تغييرها. function constTest() { let x = true; if (x) { const P = 3.14; console.log(P); // 3.14 } console.log(P); // ReferenceError } من خصائص const أنه من الضروري إعطاء قيمة للثابتة فور التصريح بها وهذا الأمر طبيعي كون الثابتة يصرح بها عند الحاجة إليها فقط ولا يمكن تغييرها فيما بعد في ذات النطاق scope الذي أنشأت فيه. const P = 3.14; P = 3.142; // Uncaught TypeError

توجد ثلاث كلمات رئيسية في JavaScript يمكن استخدامها للإعلان عن المتغيرات: let و var و const. لكل كلمة رئيسية قواعد وتأثيرات مختلفة على كيفية استخدام المتغيرات التي تنشئها. let: تعلن الكلمة الأساسية let عن متغير محلي محدد النطاق ، وتهيئته اختياريًا إلى قيمة.تعني Block-scoped أن المتغير متاح فقط داخل الكتلة التي تم الإعلان عنها فيها ، والذي يُشار إليه عادةً بأقواس معقوفة {}. var: الكلمة الأساسية var تعلن عن متغير عام أو نطاق وظيفي ، وتهيئته اختياريًا إلى قيمة.نطاق الوظيفة يعني أن المتغير متاح فقط داخل الوظيفة التي تم الإعلان عنها فيها. المتغيرات العامة متاحة في جميع أنحاء التعليمات البرمجية الخاصة بك. const: تعلن الكلمة الأساسية const عن متغير ثابت محدد النطاق وغير قابل للتغيير ، أي متغير لا يمكن إعادة تعيينه.تسمى الثوابت أيضًا "المتغيرات غير القابلة للتغيير" ، ولكن هذا تسمية خاطئة نوعًا ما لأنها في الواقع متغيرات - فقط متغيرات لا يمكن إعادة تعيينها. للمزيد من التفاصيل والمعلومات يفضل الإطلاع على موسوعة حسوب حيث يوجد توثيق لل javascript ويوجد شرح لل let و var و const من خلال هذا الرابط

Taskaty.rar

إذا أردت إنشاء slider مماثل للصورة في سؤالك، يمكنك استخدام الكود التالي مه شرح التفاصيل الخاصة به. أولاً ، سنبدأ بإنشاء هيكل HTML للمتزلج. يجب علينا إنشاء عناصر HTML لكل شريحة من الشرائح وتجميعها داخل العنصر الرئيسي الذي سيحتوي على جميع الشرائح. سنستخدم عنصر div لتقسيم الصفحة إلى عناصر أصغر. الهيكل الأساسي للشريحة يجب أن يكون على هذا النحو: <div class="slider"> <div class="slide active"> <img src="image1.jpg" alt="Slide 1"> </div> <div class="slide"> <img src="image2.jpg" alt="Slide 2"> </div> <div class="slide"> <img src="image3.jpg" alt="Slide 3"> </div> <button class="prev-btn">Prev</button> <button class="next-btn">Next</button> </div> يجب علينا إنشاء عناصر div داخل عنصر الشريحة. العنصر الأول هو الصورة التي سيتم عرضها في الشريحة. يجب أن يكون لدينا أيضًا عنصر آخر يحتوي على عناصر نصية مثل العنوان والوصف. يمكنك تخصيص هذه العناصر بشكل كامل وفقًا لتصميمك. الآن ، يجب علينا استخدام CSS لتصميم الشرائح وإظهارها بشكل جيد. يمكننا استخدام position و display و z-index لإظهار الشرائح في المكان المناسب على الصفحة. .slider { position: relative; width: 100%; height: 500px; overflow: hidden; } .slide { position: absolute; width: 100%; height: 100%; opacity: 0; transition: opacity 0.5s ease-in-out; } .slide.active { opacity: 1; } .slide img { width: 100%; height: 100%; object-fit: cover; } .prev-btn, .next-btn { position: absolute; top: 50%; transform: translateY(-50%); width: 50px; height: 50px; background-color: #000; color: #fff; border: none; cursor: pointer; } .prev-btn { left: 20px; } .next-btn { right: 20px; } تم تعيين position: relative على العنصر الرئيسي للمتزلج لأننا سنستخدم position: absolute على العناصر الفرعية لتحديد مكانها. تم تعيين العرض والارتفاع على العنصر الرئيسي للتحكم في حجم المتزلج على الصفحة. تم تعيين position: absolute و top: 0 و left: 0 على الشرائح لأننا نريد عرضها في المكان الصحيح في المتزلج. تم تعيين opacity إلى 0 لكي يتم إخفاء جميع الشرائح غير النشطة. تم تعيين transition على opacity لإضافة تأثير تحويل عند تغيير الشريحة. تم تعيين z-index إلى -1 لجعل جميع الشرائح مخفية خلف العنصر النشط. عندما تصبح الشريحة نشطة ، يتم تعيين z-index إلى 1 لجعلها تظهر فوق الشرائح الأخرى. تم تعيين object-fit: cover على الصورة لجعلها تملأ المساحة المتاحة بالشريحة بشكل كامل. تم تعيين position: absolute و bottom: 0 و left: 0 و width: 100٪ على العنصر النصي لجعله يظهر في الجزء السفلي من الشريحة. تم تعيين خصائص النص (font-size و margin) لتخصيص النص وفقًا لتصميمك. أخيرًا ، سنستخدم JavaScript لتغيير الشريحة النشطة بعد فترة زمنية معينة. const slides = document.querySelectorAll('.slide'); const prevBtn = document.querySelector('.prev-btn'); const nextBtn = document.querySelector('.next-btn'); let currentSlide = 0; // Show the first slide slides[currentSlide].classList.add('active'); function prevSlide() { slides[currentSlide].classList.remove('active'); currentSlide = (currentSlide - 1 + slides.length) % slides.length; slides[currentSlide].classList.add('active'); } function nextSlide() { slides[currentSlide].classList.remove('active'); currentSlide = (currentSlide + 1) % slides.length; slides[currentSlide].classList.add('active'); } prevBtn.addEventListener('click', prevSlide); nextBtn.addEventListener('click', nextSlide); كود JavaScript، يقوم بتحديد الشرائح (slides) وأزرار التحكم (previous و next)، ثم يعطي الوظيفة (function) للزر السابق (previous) والتالي (next) للتحكم في الشرائح. في البداية، يتم تحديد الشرائح عن طريق استخدام document.querySelectorAll()، الذي يبحث عن جميع العناصر التي تحتوي على الكلاس (class) المعطى، في هذه الحالة هو .slide، ويتم حفظها في متغير slides باستخدام const. ثم يتم تحديد الأزرار عن طريق استخدام document.querySelector()، الذي يبحث عن أول عنصر يحتوي على الكلاس المعطى، في هذه الحالة هم .prev-btn و .next-btn، ويتم حفظهما في متغيرات prevBtn و nextBtn باستخدام const. ثم يتم تعيين الوظيفة (function) لكل زر بواسطة .addEventListener()، الذي يقوم بتحديد الحدث (event) الذي يتم الاستماع إليه، في هذه الحالة هو click، والوظيفة التي يتم تشغيلها عند حدوث هذا الحدث. لتحديد الشريحة الحالية وإظهارها، يتم تعيين متغير currentSlide إلى القيمة 0، ويتم إظهار الشريحة الأولى باستخدام .classList.add() وإضافة الكلاس active. لتبديل الشرائح بواسطة الأزرار، يتم إنشاء وظائف (functions) prevSlide() و nextSlide() التي تزيل الكلاس active من الشريحة الحالية وتحديد الشريحة التي ستظهر، بحيث يتم تطبيق العملية الحسابية (currentSlide - 1 + slides.length) % slides.length للحصول على الشريح

يوجد أمثلة كثيره على ال slider من خلال ال javascript بدون مكتبات جاهزة ما عليك فقط غير البحث مثال على ذلك موقع codepen يوفر الكثير من الأكواد الخاصة بال frontend ما عليك غير البحث . هذا الرابط يحتوي على أمثلة لل slider وحاول فهم طريقة العمل بنفسك سأشرح لك طريقة العمل أولاً ال html <div class="slider"> <div class="item"> <img src="https://s3.tproger.ru/uploads/2020/07/field.jpg"> </div> <div class="item"> <img src="https://s3.tproger.ru/uploads/2020/07/rose.jpg"> </div> <div class="item"> <img src="https://s3.tproger.ru/uploads/2020/07/leaf.jpg"> </div> <a class="previous" onclick="previousSlide()">&#10094;</a> <a class="next" onclick="nextSlide()">&#10095;</a> </div> قمنا ببناء ال slider وإضافة الصور والأسهم تم إضافة الدوال previousSlide وnextSlide لها ال javascript /* رقم الصور الإفتراضية */ let slideIndex = 1; /*showSlides نقوم باستدعاء الدالة */ showSlides(slideIndex); /*slideIndex يزيد ال nextSlide عند الضغط على الزر */ function nextSlide() { showSlides(slideIndex += 1); } /* slideIndex يقل ال previousSlide عند الضغط على الزر */ function previousSlide() { showSlides(slideIndex -= 1); } /* الصورة الإفتراضية */ function currentSlide(n) { showSlides(slideIndex = n); } function showSlides(n) { let i; /*slides نحدد الصور بالمتغير */ let slides = document.getElementsByClassName("item"); /* إذا وصلنا لآخر صورة نقوم بإعادة الصور من الأول أو العكس*/ if (n > slides.length) { slideIndex = 1 } if (n < 1) { slideIndex = slides.length } /* نقوم بإخفاء جميع الصور أولاً */ for (let slide of slides) { slide.style.display = "none"; } /* ثم إظهار الصورة المفترض أن تكون موجودة فقط */ slides[slideIndex - 1].style.display = "block"; } أما بالنسبة لل css هي تنسيقات قم بإضافتها كما يناسبك

يمكنك إنشاء سلايدر من خلال html , css , js بحيث يمكن إنشاء كود html بهذا الشكل <div class="slider-container"> <div class="slider"> <div class="slide"><img src="slide1.jpg"></div> <div class="slide"><img src="slide2.jpg"></div> <div class="slide"><img src="slide3.jpg"></div> </div> <button class="prev">Prev</button> <button class="next">Next</button> </div> ثم يجب تنسيق هذا السلايدر باستخدام css .slider-container { position: relative; width: 100%; height: 400px; overflow: hidden; } .slider { position: absolute; width: 300%; height: 100%; display: flex; transition: transform 0.5s ease; } .slide { width: 33.333%; height: 100%; display: flex; justify-content: center; align-items: center; } .slide img { max-width: 100%; max-height: 100%; } button { position: absolute; top: 50%; transform: translateY(-50%); background: transparent; border: none; color: #fff; font-size: 24px; cursor: pointer; } .prev { left: 10px; } .next { right: 10px; } ثم لاستكمال أحداث السلايدر من زر التالي و زر السابق و تحريك الصور يجب استخدام جافاسكربت بهذا الشكل const slider = document.querySelector('.slider'); const prevBtn = document.querySelector('.prev'); const nextBtn = document.querySelector('.next'); let counter = 0; nextBtn.addEventListener('click', () => { counter++; if (counter > 2) { counter = 0; } slider.style.transform = `translateX(-${counter * 33.333}%)`; }); prevBtn.addEventListener('click', () => { counter--; if (counter < 0) { counter = 2; } slider.style.transform = `translateX(-${counter * 33.333}%)`; });

انشئ كود html كالتالي : <!-- الحاوية الكبيرة والتي تحتوي على السليدر --> <div class="slideshow-container"> <!-- صور بالحجم الكامل مع رقم و نص --> <div class="mySlides fade"> <div class="numbertext">1 / 3</div> <img src="img1.jpg" style="width:100%"> <div class="text">Caption Text</div> </div> <div class="mySlides fade"> <div class="numbertext">2 / 3</div> <img src="img2.jpg" style="width:100%"> <div class="text">Caption Two</div> </div> <div class="mySlides fade"> <div class="numbertext">3 / 3</div> <img src="img3.jpg" style="width:100%"> <div class="text">Caption Three</div> </div> <!-- ازرار السليدر --> <a class="prev" onclick="plusSlides(-1)">&#10094;</a> <a class="next" onclick="plusSlides(1)">&#10095;</a> </div> <br> <!-- النقاط التنقل التي تظهر في منتصف السليدر --> <div style="text-align:center"> <span class="dot" onclick="currentSlide(1)"></span> <span class="dot" onclick="currentSlide(2)"></span> <span class="dot" onclick="currentSlide(3)"></span> </div> كود الـ css : * {box-sizing:border-box} /* تنسيق الحاوية */ .slideshow-container { max-width: 1000px; position: relative; margin: auto; } /* اخفاء الصور بالحالة الافتراضية */ .mySlides { display: none; } /* تنسيقات زر السابق والتالي */ .prev, .next { cursor: pointer; position: absolute; top: 50%; width: auto; margin-top: -22px; padding: 16px; color: white; font-weight: bold; font-size: 18px; transition: 0.6s ease; border-radius: 0 3px 3px 0; user-select: none; } /* تنسيق موضع زر التالي */ .next { right: 0; border-radius: 3px 0 0 3px; } /* على ازرار التنقل hover التنسيقات الخاصة بالـ */ .prev:hover, .next:hover { background-color: rgba(0,0,0,0.8); } /* تنسيق النص الموجود بالسلايدات */ .text { color: #f2f2f2; font-size: 15px; padding: 8px 12px; position: absolute; bottom: 8px; width: 100%; text-align: center; } /* تنسيق الارقام الموجودة بالسلايدات */ .numbertext { color: #f2f2f2; font-size: 12px; padding: 8px 12px; position: absolute; top: 0; } /* تنسيق نقاط التنقل الموجودة في منتصف السلايدر */ .dot { cursor: pointer; height: 15px; width: 15px; margin: 0 2px; background-color: #bbb; border-radius: 50%; display: inline-block; transition: background-color 0.6s ease; } .active, .dot:hover { background-color: #717171; } /* الانميشن الخاص بحركة السليدر */ .fade { animation-name: fade; animation-duration: 1.5s; } @keyframes fade { from {opacity: .4} to {opacity: 1} } اكواد الـ js : let slideIndex = 1; showSlides(slideIndex); // التحكم بازرار السابق والتالي function plusSlides(n) { showSlides(slideIndex += n); } // التحكم بنقاط التنقل الموجودة في المنتصف function currentSlide(n) { showSlides(slideIndex = n); } function showSlides(n) { let i; let slides = document.getElementsByClassName("mySlides"); let dots = document.getElementsByClassName("dot"); if (n > slides.length) {slideIndex = 1} if (n < 1) {slideIndex = slides.length} for (i = 0; i < slides.length; i++) { slides[i].style.display = "none"; } for (i = 0; i < dots.length; i++) { dots[i].className = dots[i].className.replace(" active", ""); } slides[slideIndex-1].style.display = "block"; dots[slideIndex-1].className += " active"; } وهذا مثال حي عن الـ slider الذي قمت بمشاركة الكود الخاص به معك : https://www.w3schools.com/howto/tryit.asp?filename=tryhow_js_slideshow