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

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

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

  • المساهمات

    616

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

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

 نوع المحتوى 

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

البرمجة

التصميم

DevOps

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

العمل الحر

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

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

قصص نجاح

أسئلة وأجوبة

كتب

دورات

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

  1. محمود سعداوي2
    لا للأسف ممكن يكون مشكل بسبب css
  2. محمود سعداوي2
    السلام عليكم. مشكلة جافاسكربت - عرض معلومات فيديو عند النقر عليه لماذا الكود التالي لايعمل علما و أنّ 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> شكرا
  3. محمود سعداوي2
    السلام عليكم. في المثال التالي لدي مشكل في إستعمال خاصية hover ما أريد القيام به هو تفعيل خاصية الhover عند وضع الماوس على الأيقونة التي باللون الأخضر (يعني عند وضع الماوس على اللون الأخضر تظهر أيقونة اللون الأزرق) إستعملت الكود التالي .volume-icon:hover .volume-progress{ transform: scale(1); } هذا الكود لم يفعّل. ملاحظة: وقع تفعيل خاصية hover فقط عند وضع الماوس على العنصر الأب أي الأيقونة التي باللون الأحمر (يعني عند وضع الماوس على اللون الأحمر تظهر أيقونة اللون الأزرق) الكود .volume-voice:hover .volume-progress{ transform: scale(1); } الرجاء المساعدة (ما أريده هو عند وضع الماوس على أيقونة اللون الأخضر تظهر أيقونة اللون الأزرق) شكرا.
  4. محمود سعداوي2
    السلام عليكم. عندما أقوم بوضع حجم الشاشة 100% لايمكنني رؤية الطول الحقيقي للصفحة و بالتالي فرضية الخطأ خاصة في وضع العناصر واردة بشدّة مثال (height 100%) height 50% كيف يمكن معالجة مثل هذا المشكل. شكرا.
  5. محمود سعداوي2
    بعد رفع مشروعي على المستودع البعيد github كيف يمكنني القيام ببعض التعديلات إنطلاقا من المستودع المحلي على مشروعي. حبّذا لو هناك مقال من الأكاديمية يشرح فية command lines اللازمة.
  6. محمود سعداوي2
    قمت 1.git init 2. git add . 3.git commit ملاحظة: قمت باتباع الإرشادات في الرابط التالي و لكن للأسف دون جدوى.
  7. محمود سعداوي2
    السلام عليكم. كيف يمكن معالجة الخطأ التالي: error: failed to push some refs to 'https://github.com/Saadaoui-Forkan/creativeDesign.git' شكرا لكم.
  8. محمود سعداوي2
    السلام عليكم. كيف يمكن إصلاح الخطأ التالي في css علما و أنّ هذا الخطأ ليس له أيّ تأثير على النتيجة. شكرا.
  9. محمود سعداوي2
    إذا قمت بتحميل المكتبة هل يمكن إستعمال ملف واحد لكافة المشاريع أم أنه في كل مرة أقوم بإعادة التحميل. من ناحية السرعة. أيهما أفضل تحميل الملف أم الرابط. شكرا.
  10. محمود سعداوي2
    يعني لابد من تحميل المكتبة
  11. محمود سعداوي2
    أريد إستعمال 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' ) }) لم تظهر لي النافذة المنبثقة بل كانت النتيجة
  12. محمود سعداوي2
    يبدو أن سؤالي غير واضح. في المثال التالي ما أريده هو عند وضع الماوس على "send me a letter" يظهر خط بالعرض متحرك. للمزيد من التوضيح شيفرة html <div class="section-4"> <h1 class="section-heading">Contact</h1> <div class="form-section"> <img src="./img/form-img.png" alt=""> <form > <input type="text" placeholder="Your Name"> <input type="email" placeholder="Your Email"> <textarea placeholder="Your Message"></textarea> <input type="submit" value="Send"> </form> <div class="submit-wrapper"> <input type="submit" value="Send me a letter" class="showForm" /> </div> </div> </div> css .form-section{ width: 70%; background-color: #ddd; margin: 5px auto; display: flex; flex-direction: column; justify-content: center; align-items: center; position: relative; } .form-section img{ width: 700px; height: 500px; } .form-section form{ display: flex; flex-direction: column; position: absolute; width: 500px; margin: 10px 3px; background-color: #fff; border-radius: 10px; transform: scaleY(0); transition: transform 2s; } /* .form-section form:hover{ transform-origin: bottom; } */ .form-section form input{ margin: 10px 2px; border: none; padding: 4px 10px; font-size: 15px; border-radius: 3px; border-bottom: 2px solid rgb(145, 181, 189); color: rgb(145, 181, 189); font-weight: bold; } .form-section form input::placeholder, .form-section form textarea::placeholder{ color: rgb(145, 181, 189); font-family: 'Bellota Text', cursive; font-family: bold; } .form-section form textarea{ margin: 10px 2px; border: none; padding: 4px 10px; font-size: 14px; border-bottom: 2px solid rgb(145, 181, 189); color: rgb(145, 181, 189); max-height: 120px; min-height: 100px; max-width: 100%; min-width: 70%; font-weight: bold; } .form-section form input[type="submit"]{ background-color: rgb(145, 181, 189); color: #fff; width: 50%; margin-left: auto; margin-right: auto; } .submit-wrapper { position: absolute; width: 17%; } .submit-wrapper input.showForm{ border: none; padding: 10px 2px; background-color: #fff; color: rgb(145, 181, 189); font-size: 20px; font-weight: bold; cursor: pointer; text-align: center; z-index: 20; } .form-section .submit-wrapper::after{ content: ""; position: absolute; width: 100%; height: 4px; background-color: rgb(145, 181, 189); top: 100%; left: 0; transform: scaleX(0); transition: transform 2s; } .form-section .submit-wrapper:hover submit-wrapper::after{ transform: scaleX(1); transform-origin: left; } .active{ transform: scaleY(1) !important; transform-origin: bottom; z-index: 10; } زد على ذلك عند إستعمالي لconsole قصد التثبت أكثر لم أستطع النقر على :hover شكرا لكم. أعتذر عن سوء توضيحي للسؤال
  13. محمود سعداوي2
    <div class="section-4"> <h1 class="section-heading">Contact</h1> <div class="form-section"> <img src="./img/form-img.png" alt=""> <form > <input type="text" placeholder="Your Name"> <input type="email" placeholder="Your Email"> <textarea placeholder="Your Message"></textarea> <input type="submit" value="Send"> </form> <div class="submit-wrapper"> <input type="submit" value="Send me a letter" class="showForm" /> </div> </div> </div> تفضل
  14. محمود سعداوي2
    لماذا الخاصية hover غير فعالة في الحالة التالية شيفرة css .submit-wrapper input.showForm{ border: none; padding: 10px 2px; background-color: #fff; color: rgb(145, 181, 189); font-size: 20px; font-weight: bold; cursor: pointer; text-align: center; z-index: 20; } .form-section .submit-wrapper::after{ content: ""; position: absolute; width: 100%; height: 4px; background-color: rgb(145, 181, 189); top: 100%; left: 0; transform: scaleX(0); transition: transform 2s; } .form-section .submit-wrapper:hover submit-wrapper::after{ transform: scaleX(1); transform-origin: left; } كما أنها أيضا عند إستعمال console غير متاحة (disabled)
  15. محمود سعداوي2
    عذرا لقد تم جاوز الخطأ.
  16. محمود سعداوي2
    في هذه الحالة لم تظهر .submit-wrapper input.showForm بالشكل الكامل .submit-wrapper { position: absolute; } .submit-wrapper input.showForm{ border: none; width: 20%; padding: 10px 2px; background-color: #fff; color: rgb(145, 181, 189); font-size: 20px; font-weight: bold; cursor: pointer; text-align: center; z-index: 20; }
  17. محمود سعداوي2
    العنصر غير موجود لأن "transform: scaleY(0);" ولكن عند النقر على "send me a letter" أريد أن يصبح العنصر موجود من خلال إضافة الكلاس "active"
  18. محمود سعداوي2
    في المثال التالي أقوم بالضغط على "send me a letter" الكود يعمل بشكل (console.log فعّالة) و لكن الكلاس الجديد "active" لم تعمل. شيفرة html <div class="section-4"> <h1 class="section-heading">Contact</h1> <div class="form-section"> <img src="./img/form-img.png" alt=""> <form > <input type="text" placeholder="Your Name"> <input type="email" placeholder="Your Email"> <textarea placeholder="Your Message"></textarea> <input type="submit" value="Send"> </form> <input type="submit" value="Send me a letter" class="inputBtn"> </div> </div> شيفرة css /* section-4 */ .section-4{ font-family: 'Bellota Text', cursive; height: 100vh; } .form-section{ width: 70%; background-color: #ddd; margin: 5px auto; display: flex; flex-direction: column; justify-content: center; align-items: center; position: relative; } .form-section img{ width: 700px; height: 500px; } .form-section form{ display: flex; flex-direction: column; position: absolute; width: 500px; margin: 10px 3px; background-color: #fff; border-radius: 10px; transform: scaleY(0); transition: transform 2s; } /* .form-section form:hover{ transform-origin: bottom; } */ .form-section form input{ margin: 10px 2px; border: none; padding: 4px 10px; font-size: 15px; border-radius: 3px; border-bottom: 2px solid rgb(145, 181, 189); color: rgb(145, 181, 189); font-weight: bold; } .form-section form input::placeholder, .form-section form textarea::placeholder{ color: rgb(145, 181, 189); font-family: 'Bellota Text', cursive; font-family: bold; } .form-section form textarea{ margin: 10px 2px; border: none; padding: 4px 10px; font-size: 14px; border-bottom: 2px solid rgb(145, 181, 189); color: rgb(145, 181, 189); max-height: 120px; min-height: 100px; max-width: 100%; min-width: 70%; } .form-section form input[type="submit"]{ background-color: rgb(145, 181, 189); color: #fff; width: 50%; margin-left: auto; margin-right: auto; } .inputBtn{ border: none; width: 20%; padding: 10px 2px; position: absolute; background-color: #fff; color: rgb(145, 181, 189); font-size: 20px; font-weight: bold; cursor: pointer; text-align: center; } .inputBtn::after{ content: ""; position: absolute; width: 100%; height: 2px; background-color: black; } .active{ transform: scaleY(1); transform-origin: bottom; } شيفرة javascript // show the form const inputBtn = document.querySelector('.inputBtn') const showForm = document.querySelector('.form-section form') inputBtn.addEventListener('click', ()=>{ console.log(showForm); showForm.classList.add('active') }) شكرا لكم.
  19. محمود سعداوي2
    تفضّل. <div class="section-4"> <h1 class="section-heading">Contact</h1> <div class="form-section"> <img src="./img/form-img.png" alt=""> <form action=""> <input type="text" placeholder="Your Name"> <input type="email" placeholder="Your Email"> <textarea placeholder="Your Message"></textarea> <input type="submit" value="Send"> </form> <input type="submit" value="Send me a letter" class="showForm"> </div> </div>
  20. محمود سعداوي2
    الرجاء المساعدة في عدم ظهور الخاصية after على المتصفح. شيفرة css .form-section input[type="submit"]{ border: none; width: 20%; padding: 10px 2px; position: absolute; background-color: #fff; color: rgb(145, 181, 189); font-size: 20px; font-weight: bold; cursor: pointer; text-align: center; } .form-section input[type="submit"]::after{ content: ""; position: absolute; width: 100%; height: 2px; background-color: black; }
  21. محمود سعداوي2
    السلام عليكم عند قيام الحاسوب ببعض التحديثات تغير المتصفح ليصبح microsoft Edge بعد أن كان google chrome. كيف يمكن تغيير المتصفح التلقائي مع open with live server في vs code. شكرا.
  22. محمود سعداوي2
    السلام عليكم. في المثال التالي، عندما أقوم بhover للعنصر أريد أن يكون إتجاه التحريك من الأسفل إلى الأعلى. ملاحظة: التحريك في هذه الحالة من الأعلى للأسفل شيفرة css: div{ margin: 30px auto; background-color: #5FD068; width: 40%; height: 30px; border-radius: 10px; font-size: 40px; /* height: 0; */ transition: height 2s; } div:hover{ height: 300px; } شكرا لكم.
  23. محمود سعداوي2
    السلام عليكم. الرجاء التوضيح في تعطل الشيفرة أثناء تنفيذ if statement. شيفرة الجافاسكريبت: const iconsBtn = document.querySelectorAll('.card-icon ') const teamInfo = document.querySelectorAll('.team-info') const changeBackground = document.querySelectorAll('.change-background ') // console.log(iconsBtn) for (let i = 0; i < iconsBtn.length; i++) { iconsBtn[i].innerHTML = `<i class="fa-solid fa-circle-plus"></i>` // console.log(iconsBtn[i]) iconsBtn[i].addEventListener('click', ()=>{ if (iconsBtn[i].innerHTML = `<i class="fa-solid fa-circle-plus"></i>`){ iconsBtn[i].innerHTML =`<i class="fa-solid fa-circle-minus"></i>` teamInfo[i].classList.add('team-info-change') changeBackground[i].classList.add('change-background-active') } else{ iconsBtn[i].innerHTML =`<i class="fa-solid fa-circle-plus"></i>` teamInfo[i].classList.remove('team-info-change') changeBackground[i].classList.remove('change-background-active') // console.log("HELLO"); } }) } ملاحظة: يتعطل تشغيل الشيفرة بداية من else console لايظهر أي خطأ لمزيد التوضيح إليكم شيفرة html <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 class="change-background "></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 class="change-background "></div> </div> </div>
  24. محمود سعداوي2
    شكرا كيف يمكنني معرفة مثل هذه الأخطاء و معالجتها لاحقا.
  25. محمود سعداوي2
    قمت بالتعديلات اللازمة و النتيجة .team-container{ height: 90vh; display: flex; flex-direction: row; justify-content: center; align-items: center; } .team-card{ display: flex; flex-direction: column; justify-content: center; align-items: center; margin: 5px 20px; width: 25%; background-color: #eee; position: relative; } .team-card:first-child{ align-self: flex-end; } .team-card:last-child{ align-self: flex-start; } .team-card img{ width: 100%; filter: brightness(150%); } .team-card img:hover{ filter: opacity(100%); transform: rotate(2deg); } .team-card h4{ font-family: 'Bellota Text', cursive; font-size: 25px; font-weight: bold; color: rgba(250, 46, 46, 0.9); } .team-card span{ color: rgba(250, 46, 46, 0.9); font-size: 20px; font-family: 'Bellota Text', cursive; margin-top: -30px; margin-bottom: 20px; } .card-icon i{ position: absolute; top: 2px; left: 2px; color: rgb(250, 46, 46); font-size: 30px; cursor: pointer; } .team-info{ position: absolute; top: 0; right: 0; width: 100%; height: 100%; display: flex; flex-direction: column; justify-content: center; align-items: center; font-family: 'Bellota Text', cursive; color: #eee; transform: translateY(-30px); opacity: 0; transition: all 0.25s; /* background-color: blueviolet; */ } .team-info p{ text-align: justify; margin: 2px 10px; } .team-info-change{ opacity: 1; transform: translateY(0); transition-delay: 0.3s; } .change-background{ position: absolute; top: 0; height: 0; background-color: rgba(250, 46, 46, 0.9); width: 0; height: 100%; transition: width 0.5s; } .change-background-active{ width: 100%; } الملف كاملا card animation.zip ماأريده هو تغيير في الكلاسات عند الضط على الزر لكن حادث الضغط لم يمر أصلا.
×
×
  • أضف...