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

السلام عليكم. في الكود التالي let arr = ["ahmed","mohamed","mahmoud","ali","omar"] const btn = document.querySelector('button') function sayHello() { let i=0 btn.addEventListener('click', ()=>{ console.log(`Hello I'm ${arr[i]}`) i++ }) } setTimeout(sayHello,3000) عندما أضغط على الزر تظهر الرسالة مباشرة و ليس بعد 3 ثواني. الرجاء المساعدة و شكرا.

في الكود التالي قيمة b في الحالتين تساوي 0. الرجاء التوضيح. الكود: let a = true let b = 0 if (a) { b === 1 console.log(b); } console.log(b)

عند تعلم الجافا سكريبت من الضرورة التطرق إلى الBOM و لكن عند البدء باستخدام react هل يقع الاستغناء عن BOM أم أن hooks ستكون بديلا عنها. شكرا.

شكرا. أنا فقط أردت القيام بنفس ما تقوم به components في react js.

السلام عليكم. لنفترض أني قمت بإنشاء صفحة ويب كاملة تحتوي على index.html و style.css و script.js. في نفس الوقت قمت بإنجاز ملف آخر لنفترض contact. هذا الملف هو أيضا يحتوي على contact.html contact.css contact.js. سؤالي كيف يمكن ربط هذا الملف contact بindex.html. شكرا.

*, ::after, ::before{ margin: 0; padding: 0; box-sizing: border-box; outline: none; list-style: none; } نعم بالتأكيد. قبل بداية تنسيق العناصر دائما أكتب الكود النالي *, ::after, ::before{ margin: 0; padding: 0; box-sizing: border-box; outline: none; list-style: none; }

تفضل كود css .section-2{ overflow: hidden; background-color: #222020; } .parag-wrapper{ margin: 50px auto; max-width: 310px; height: auto; color: #fff; position: relative; } .parag-wrapper i{ font-size: 20px; } .parag-wrapper .fa-quote-right{ position: absolute; right: 0; } .parag-wrapper p{ margin: 10px auto; font-size: 18px; text-align: justify; font-family: 'Oswald', sans-serif; } .parag-wrapper p::after{ content: ""; position: absolute; width: 90%; height: 2px; background-color: #fff; top: 5%; right: 0; } .parag-wrapper p::before{ content: ""; position: absolute; width: 90%; height: 2px; background-color: #fff; bottom: -9%; left: 0; } /* end of section-2 */ /* section 3 ==> Pricing */ /* #222020 */ .section-3{ background-color: #03070e; margin-top:0; } .pricing-cards-wrapper{ display: flex; flex-direction: column; align-items: center; } كود html <section class="section-2"> <h1 class="section-heading">About Us</h1> <div class="parag-wrapper"> <i class="fa-solid fa-quote-left"></i> <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Tempora totam nam quasi officia, voluptatum deleniti provident natus temporibus molestiae quae ratione fugit placeat voluptatibus, deserunt repellat dicta, optio quo quisquam libero tempore veritatis? Veritatis nam magnam omnis nobis iusto recusandae minus odit eligendi maxime dolorem, eos id! Fugiat, adipisci perspiciatis!</p> <i class="fa-solid fa-quote-right"></i> </div> </section> <!-- end of section-2 --> <!-- section 3 ==> Pricing --> <section class="section-3"> <h1 class="section-heading">Pricing</h1> <div class="pricing-cards-wrapper"> <div class="pricing-card"> <div class="pricing-card-front"> <h2 class="pricing-card-heading">Free</h2> <h3 class="pricing-card-price">$0</h3> <ul class="pricing-card-list free-list"> <li> <i class="fa-solid fa-check"></i> <span>Lorem ipsum dolor</span> <i class="fa-solid fa-check"></i> <span>Lorem ipsum dolor</span> <i class="fa-solid fa-xmark"></i> <span>Lorem ipsum dolor</span> <i class="fa-solid fa-xmark"></i> <span>Lorem ipsum dolor</span> <i class="fa-solid fa-xmark"></i> <span>Lorem ipsum dolor</span> </li> </ul> <button class="pricing-card-btn btn-free" type="button"> CHOOSE PLAN </button> </div> <div class="back-free pricing-card-back"> <a href="#">Order Now</a> </div> </div> <div class="pricing-card"> <div class="pricing-card-front"> <h2 class="pricing-card-heading">Basic</h2> <h3 class="pricing-card-price">$299</h3> <ul class="pricing-card-list basic-list"> <li> <i class="fa-solid fa-check"></i> <span>Lorem ipsum dolor</span> <i class="fa-solid fa-check"></i> <span>Lorem ipsum dolor</span> <i class="fa-solid fa-check"></i> <span>Lorem ipsum dolor</span> <i class="fa-solid fa-xmark"></i> <span>Lorem ipsum dolor</span> <i class="fa-solid fa-xmark"></i> <span>Lorem ipsum dolor</span> </li> </ul> <button class="pricing-card-btn btn-basic" type="button"> CHOOSE PLAN </button> </div> <div class="back-basic pricing-card-back"> <a href="#">Order Now</a> </div> </div> <div class="pricing-card"> <div class="pricing-card-front"> <h2 class="pricing-card-heading">Standard</h2> <h3 class="pricing-card-price">$699</h3> <ul class="pricing-card-list standard-list"> <li> <i class="fa-solid fa-check"></i> <span>Lorem ipsum dolor</span> <i class="fa-solid fa-check"></i> <span>Lorem ipsum dolor</span> <i class="fa-solid fa-check"></i> <span>Lorem ipsum dolor</span> <i class="fa-solid fa-check"></i> <span>Lorem ipsum dolor</span> <i class="fa-solid fa-xmark"></i> <span>Lorem ipsum dolor</span> </li> </ul> <button class="pricing-card-btn btn-standard" type="button"> CHOOSE PLAN </button> </div> <div class="back-standard pricing-card-back"> <a href="#">Order Now</a> </div> </div> <div class="pricing-card"> <div class="pricing-card-front"> <h2 class="pricing-card-heading">Premium</h2> <h3 class="pricing-card-price">$999</h3> <ul class="pricing-card-list premium-list"> <li> <i class="fa-solid fa-check"></i> <span>Lorem ipsum dolor</span> <i class="fa-solid fa-check"></i> <span>Lorem ipsum dolor</span> <i class="fa-solid fa-check"></i> <span>Lorem ipsum dolor</span> <i class="fa-solid fa-check"></i> <span>Lorem ipsum dolor</span> <i class="fa-solid fa-check"></i> <span>Lorem ipsum dolor</span> </li> </ul> <button class="pricing-card-btn btn-premium" type="button"> CHOOSE PLAN </button> </div> <div class="back-premium pricing-card-back"> <a href="#">Order Now</a> </div> </div> </div> </section> <!-- end of section 3 -->

يوجد حل في وضع قيمة سالبة ل margin-top و لكن هذا لديه تأثير سالب عند جعل الموقع responsive

السلام عليكم ما سبب وجود الفراغ بالأبيض بين 'two sections' علما و أني وضعت margin-top = 0 للعنصر الأسفل شكرا.

تظهر رسالة الخطأ التالية عند تطوير الموضع.

أنا أيضا قمت بإخراج .video-wrapper من الملف الحالي و العمل عليها داخل ملف آخر لوحدها و لم أجد أي مشكل. لم أدر ما السبب. شكرا للمساعدة.

ممكن أرسل الملف كاملا لأنه مشروع متكامل Web Agency.zip

الكود تارة يعمل و تارة لا

لم يقم بالطباعة و console لم يظهر أي خطأ

لا للأسف ممكن يكون مشكل بسبب css

السلام عليكم. مشكلة جافاسكربت - عرض معلومات فيديو عند النقر عليه لماذا الكود التالي لايعمل علما و أنّ console لايظهر أي خطأ عند الضغط على العنصر المحدد const video = document.querySelector('.video-wrapper video') video.addEventListener('click', ()=>{ console.log(video); }) شيفرة html <div class="video-wrapper"> <video src="./images/about-us.mp4" poster="images/about.jpg"></video> شكرا

السلام عليكم. في المثال التالي لدي مشكل في إستعمال خاصية hover ما أريد القيام به هو تفعيل خاصية الhover عند وضع الماوس على الأيقونة التي باللون الأخضر (يعني عند وضع الماوس على اللون الأخضر تظهر أيقونة اللون الأزرق) إستعملت الكود التالي .volume-icon:hover .volume-progress{ transform: scale(1); } هذا الكود لم يفعّل. ملاحظة: وقع تفعيل خاصية hover فقط عند وضع الماوس على العنصر الأب أي الأيقونة التي باللون الأحمر (يعني عند وضع الماوس على اللون الأحمر تظهر أيقونة اللون الأزرق) الكود .volume-voice:hover .volume-progress{ transform: scale(1); } الرجاء المساعدة (ما أريده هو عند وضع الماوس على أيقونة اللون الأخضر تظهر أيقونة اللون الأزرق) شكرا.

السلام عليكم. عندما أقوم بوضع حجم الشاشة 100% لايمكنني رؤية الطول الحقيقي للصفحة و بالتالي فرضية الخطأ خاصة في وضع العناصر واردة بشدّة مثال (height 100%) height 50% كيف يمكن معالجة مثل هذا المشكل. شكرا.

بعد رفع مشروعي على المستودع البعيد github كيف يمكنني القيام ببعض التعديلات إنطلاقا من المستودع المحلي على مشروعي. حبّذا لو هناك مقال من الأكاديمية يشرح فية command lines اللازمة.

قمت 1.git init 2. git add . 3.git commit ملاحظة: قمت باتباع الإرشادات في الرابط التالي و لكن للأسف دون جدوى.

السلام عليكم. كيف يمكن معالجة الخطأ التالي: error: failed to push some refs to 'https://github.com/Saadaoui-Forkan/creativeDesign.git' شكرا لكم.

السلام عليكم. كيف يمكن إصلاح الخطأ التالي في css علما و أنّ هذا الخطأ ليس له أيّ تأثير على النتيجة. شكرا.

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

يعني لابد من تحميل المكتبة

أريد إستعمال sweetAlert في مشروعي عبر ربطها بملف خارجي "script.js" و باستعمال "cdn link" للتوضيح شيفرة 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>Document</title> <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous"> </head> <body> <form class="row g-3"> <div class="col-md-4"> <label for="validationDefault01" class="form-label">First name</label> <input type="text" class="form-control" id="validationDefault01"> </div> <div class="col-md-4"> <label for="validationDefault02" class="form-label">Last name</label> <input type="text" class="form-control" id="validationDefault02"> </div> <div class="col-12"> <button class="btn btn-primary" type="submit">Submit form</button> </div> </form> <script src="script.js"></script> <script src="https://cdn.jsdelivr.net/npm/@popperjs/core@2.9.2/dist/umd/popper.min.js" integrity="sha384-IQsoLXl5PILFhosVNubq5LC7Qb9DXgDA9i+tQ8Zj3iwWAwPtgFTxbJ8NT4GN1R8p" crossorigin="anonymous"></script> <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/js/bootstrap.min.js" integrity="sha384-cVKIPhGWiC2Al4u+LWgxfKTRIcfu0JTxR+EQDz/bgldoEyl4H0zUF0QKbrJ0EcQF" crossorigin="anonymous"></script> <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/js/bootstrap.bundle.min.js" integrity="sha384-MrcW6ZMFYlzcLA8Nl+NtUVF0sA7MsXsP1UyJoMp4YLEuNSfAP+JcXn/tWtIaxVXM" crossorigin="anonymous"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/limonte-sweetalert2/11.4.17/sweetalert2.min.js" integrity="sha512-Kyb4n9EVHqUml4QZsvtNk6NDNGO3+Ta1757DSJqpxe7uJlHX1dgpQ6Sk77OGoYA4zl7QXcOK1AlWf8P61lSLfQ==" crossorigin="anonymous"></script> </body> </html> شيفرة javascript const form = document.querySelector('form') form.addEventListener('submit', (e)=>{ e.preventDefault() Swal.fire( 'Good job!', 'You clicked the button!', 'success' ) }) لم تظهر لي النافذة المنبثقة بل كانت النتيجة