محمود سعداوي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 شكرا لكم. أعتذر عن سوء توضيحي للسؤال

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

لماذا الخاصية 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)

عذرا لقد تم جاوز الخطأ.

في هذه الحالة لم تظهر .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; }

العنصر غير موجود لأن "transform: scaleY(0);" ولكن عند النقر على "send me a letter" أريد أن يصبح العنصر موجود من خلال إضافة الكلاس "active"

في المثال التالي أقوم بالضغط على "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') }) شكرا لكم.

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

الرجاء المساعدة في عدم ظهور الخاصية 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; }

السلام عليكم عند قيام الحاسوب ببعض التحديثات تغير المتصفح ليصبح microsoft Edge بعد أن كان google chrome. كيف يمكن تغيير المتصفح التلقائي مع open with live server في vs code. شكرا.

السلام عليكم. في المثال التالي، عندما أقوم ب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; } شكرا لكم.

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

شكرا كيف يمكنني معرفة مثل هذه الأخطاء و معالجتها لاحقا.

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

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

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

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

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