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

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

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

  • المساهمات

    578

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

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

 نوع المحتوى 

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

البرمجة

التصميم

DevOps

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

العمل الحر

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

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

قصص نجاح

أسئلة وأجوبة

كتب

دورات

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

  1. محمود_سعداوي
    السلام عليكم. عندما أقوم بوضع حجم الشاشة 100% لايمكنني رؤية الطول الحقيقي للصفحة و بالتالي فرضية الخطأ خاصة في وضع العناصر واردة بشدّة مثال (height 100%) height 50% كيف يمكن معالجة مثل هذا المشكل. شكرا.
  2. محمود_سعداوي
    بعد رفع مشروعي على المستودع البعيد github كيف يمكنني القيام ببعض التعديلات إنطلاقا من المستودع المحلي على مشروعي. حبّذا لو هناك مقال من الأكاديمية يشرح فية command lines اللازمة.
  3. محمود_سعداوي
    قمت 1.git init 2. git add . 3.git commit ملاحظة: قمت باتباع الإرشادات في الرابط التالي و لكن للأسف دون جدوى.
  4. محمود_سعداوي
    السلام عليكم. كيف يمكن معالجة الخطأ التالي: error: failed to push some refs to 'https://github.com/Saadaoui-Forkan/creativeDesign.git' شكرا لكم.
  5. محمود_سعداوي
    السلام عليكم. كيف يمكن إصلاح الخطأ التالي في css علما و أنّ هذا الخطأ ليس له أيّ تأثير على النتيجة. شكرا.
  6. محمود_سعداوي
    إذا قمت بتحميل المكتبة هل يمكن إستعمال ملف واحد لكافة المشاريع أم أنه في كل مرة أقوم بإعادة التحميل. من ناحية السرعة. أيهما أفضل تحميل الملف أم الرابط. شكرا.
  7. محمود_سعداوي
    يعني لابد من تحميل المكتبة
  8. محمود_سعداوي
    أريد إستعمال 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' ) }) لم تظهر لي النافذة المنبثقة بل كانت النتيجة
  9. محمود_سعداوي
    يبدو أن سؤالي غير واضح. في المثال التالي ما أريده هو عند وضع الماوس على "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 شكرا لكم. أعتذر عن سوء توضيحي للسؤال
  10. محمود_سعداوي
    <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> تفضل
  11. محمود_سعداوي
    لماذا الخاصية 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)
  12. محمود_سعداوي
    عذرا لقد تم جاوز الخطأ.
  13. محمود_سعداوي
    في هذه الحالة لم تظهر .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; }
  14. محمود_سعداوي
    العنصر غير موجود لأن "transform: scaleY(0);" ولكن عند النقر على "send me a letter" أريد أن يصبح العنصر موجود من خلال إضافة الكلاس "active"
  15. محمود_سعداوي
    في المثال التالي أقوم بالضغط على "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') }) شكرا لكم.
  16. محمود_سعداوي
    تفضّل. <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>
  17. محمود_سعداوي
    الرجاء المساعدة في عدم ظهور الخاصية 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; }
  18. محمود_سعداوي
    السلام عليكم عند قيام الحاسوب ببعض التحديثات تغير المتصفح ليصبح microsoft Edge بعد أن كان google chrome. كيف يمكن تغيير المتصفح التلقائي مع open with live server في vs code. شكرا.
  19. محمود_سعداوي
    السلام عليكم. في المثال التالي، عندما أقوم ب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; } شكرا لكم.
  20. محمود_سعداوي
    السلام عليكم. الرجاء التوضيح في تعطل الشيفرة أثناء تنفيذ 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>
  21. محمود_سعداوي
    شكرا كيف يمكنني معرفة مثل هذه الأخطاء و معالجتها لاحقا.
  22. محمود_سعداوي
    قمت بالتعديلات اللازمة و النتيجة .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 ماأريده هو تغيير في الكلاسات عند الضط على الزر لكن حادث الضغط لم يمر أصلا.
  23. محمود_سعداوي
    قمت بالتغيير ولكن نفس المشكل
  24. محمود_سعداوي
    تفضل <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>
  25. محمود_سعداوي
    السلام عليكم. أقدم لكم شيفرة الجافاسكريبت التالية: 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" و لكن لم أعرف ماهو بالضبط شكرا.
×
×
  • أضف...