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

قمت بالتغيير ولكن نفس المشكل

تفضل <div class="team-container"> <div class="team-card"> <img src="./img/team-member-1.jpg" alt=""> <h4>John Doe</h4> <span>Web-Developer</span> <div class="card-icon"> <i class="fa-solid fa-circle-plus"></i> <!-- <i class="fa-solid fa-circle-minus"></i> --> </div> <div class="team-info"> <h3>About Me</h3> <p> Lorem ipsum dolor sit amet consectetur adipisicing elit. Reprehenderit obcaecati blanditiis aspernatur ab doloribus optio nesciunt adipisci fugiat quia veritatis doloremque tempore ipsum sunt atque exercitationem perspiciatis, beatae aliquam voluptates perferendis. </p> <h3>Skills</h3> <p> Javascript<br> Java<br> Python<br> MySql </p> </div> <div class="change-background "></div> </div> <div class="team-card"> <img src="./img/team-member-2.jpg" alt=""> <h4>John Doe</h4> <span>Front-End-Developer</span> <div class="card-icon"> <i class="fa-solid fa-circle-plus"></i> <!-- <i class="fa-solid fa-circle-minus"></i> --> </div> <div class="team-info"> <h3>About Me</h3> <p> Lorem ipsum dolor sit amet consectetur adipisicing elit. Reprehenderit obcaecati blanditiis aspernatur ab doloribus optio nesciunt adipisci fugiat quia veritatis doloremque tempore ipsum sunt atque exercitationem perspiciatis, beatae aliquam voluptates perferendis. </p> <h3>Skills</h3> <p> Javascript<br> Java<br> Python<br> MySql </p> </div> </div> <div class="team-card"> <img src="./img/team-member-3.jpg" alt=""> <h4>John Doe</h4> <span>Back-End-Developer</span> <div class="card-icon"> <i class="fa-solid fa-circle-plus"></i> <!-- <i class="fa-solid fa-circle-minus"></i> --> </div> <div class="team-info"> <h3>About Me</h3> <p> Lorem ipsum dolor sit amet consectetur adipisicing elit. Reprehenderit obcaecati blanditiis aspernatur ab doloribus optio nesciunt adipisci fugiat quia veritatis doloremque tempore ipsum sunt atque exercitationem perspiciatis, beatae aliquam voluptates perferendis. </p> <h3>Skills</h3> <p> Javascript<br> Java<br> Python<br> MySql </p> </div> </div> </div> <script src="script.js"></script>

السلام عليكم. أقدم لكم شيفرة الجافاسكريبت التالية: const iconsBtn = document.querySelectorAll('.card-icon .fa-solid') const changeBackground = document.querySelectorAll('.change-background') console.log(icons) for (let i = 0; i < iconsBtn.length; i++) { console.log(icons[i]) iconsBtn[i].addEventListener('click', ()=>{ console.log('hi') }) } النتيجة في console التالية المشكلة عندما أقوم بالضغط على الزر في أعلى يسار الصورة console لايظهر شيء و لكنعندما قمت بنسخ و لصق الشيفرة المبينة في الconsole هرت رسالة الخطأ التالية: Uncaught SyntaxError: Identifier 'iconsBtn' has already been declared سبب الخطأ هو هنا "iconsBtn[i].addEventListener" و لكن لم أعرف ماهو بالضبط شكرا.

السلام عليكم. كيف يمكن تنزيل محرر الأكواد vs code للحواسيب 32bit. شكرا.

ما مدى صحة الشيفرة التالية: <!-- <div class="relative"> <div class="absolute"></div> <div class="absolute"></div> <div class="absolute"></div> </div> --> علما و أن class="relative أو class="absolute" تعني أن position:relative أو position:absolute شكرا

السلام عليكم. أنا بصدد بكتابة كود تقييمي. التقييم يظههر من خلال عدد النجمات. مثلا: التقييم 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 لايظهر أي أخطاء

للأسف صديقي. الملف كاملا: Creative Design.zip

تفضّل <!-- 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>

السلام عليكم. قمت بإنشاء 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 تعمل فقط إذا قمت بوضع الماوس على الحرف الأول من العنصر. الرجاء المساعدة شكرا

شكرا. ملاحظات قيمة.

شكرا على النصائح

السّلام عليكم. الرجاء تقديم آراؤكم و ملاحظاتكم في الموقع الذي قمت بإنشائه. الموقع: https://saadaoui-forkan.github.io/Foods/ شكرا لكم.

لدي مشكلة في ربط حسابات git hub مختلفة في مشاريعي وعند محاولة دفع ملفات من حساب آخر تفشل المحاولة هل يعني ذلك أنه لا يمكنني الإعتماد على حسابين لرفع المشاريع.

شكرا جزيلا شكرا جزيلا. في الواقع أملك حساب قديم git huh و المشكلة كانت في عدم تطابق user-name. هل يعني ذلك أنه لا يمكنني الإعتماد على حسابين لرفع المشاريع.

لدي مشكلة في الاتصال لمستودع غيت هاب المشكل: $ 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

لم أدر بالضبط سبب المشكل

السلام عليكم. لكي أرفع مشروع على 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 شكرا على المساعدة

شكرا. وقع تطبيق التأثير إلا عندما قمت بتحديد قيمة محددة للخاصية height. height: auto; لم تعمل في حين height:100px; وقع تفعيل التأثير شكرا مجددا. شكرا. وقع تطبيق التأثير إلا عندما قمت بتحديد قيمة محددة للخاصية height. height: auto; لم تعمل في حين height:100px; وقع تفعيل التأثير شكرا مجددا.

في الواقع أخي لاتوجد مشكلة و لكن الخاصية 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> الأمر محير صديقي.

السلام عليكم. أود التوضيح حول عدم تفعيل الخاصية 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; } شكرا جزيلا.

شكرا. المشكلة كانت في الكروم على ما أعتقد لأني عندما أعدت تشغيل الحاسوب عمل البرانمج جيدا (إستعملت flex-wrap و margin)

في الواقع قمت بتجربة space around ; space between; و النتيجة: كما أن margin لم تعمل عندما قمت بتجربتها.

السلام عليكم. كيف يمكني أن أجعل تنسيق الصفحة الألى مثل تنسيق الصفحة الثانية باستعمال flexbox علما و أني جربت flex-wrap ولم تنجح الصفحة الأولى الصفحة الثانية شكرا.

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)

شيفرة 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; }