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

قمت بعمل form validation مثلما يبين الكود التالي: // register-username-register-email-register-password-register-btn let form = document.querySelector('form') let username = document.querySelector(".register-username") let email = document.querySelector(".register-email") let password = document.querySelector(".register-password") let confirmPassword = document.querySelector('.register-confirm-password') let registerBtn = document.querySelector(".register-btn") // localStorage.setItem("register-username", username.value) // localStorage.setItem("register-email", email.value) // localStorage.setItem("register-password", password.value) // show input error message function showError(input,message) { const formControl = input.parentElement formControl.classList = "form-control error" const small = formControl.querySelector('small') small.innerText = message } // show success outline function showSuccess(input) { const formControl = input.parentElement formControl.classList = "form-control success" } // check email is valid function checkEmail(input) { const re = /^(([^<>()\[\]\\.,;:\s@"]+(\.[^<>()\[\]\\.,;:\s@"]+)*)|(".+"))@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\])|(([a-zA-Z\-0-9]+\.)+[a-zA-Z]{2,}))$/; if (re.test(input.value.trim())) { showSuccess(input) } else { showError(input, 'Email is not valid') } } // check passwords much function checkPassword(input1, input2) { if (input1.value != input2.value) { showError(input2, 'Passwords do not much') } } // check required fields function checkRequired(inputArr) { inputArr.forEach(function (input) { if (input.value.trim() === '') { showError(input, `${getFieldName(input)} is required`) } else { showSuccess(input) } }); } // check input length function checkLength(input, min, max) { if (input.value.length < min) { showError(input, `${getFieldName(input)} must be at least ${min}`) } else if(input.value.length > max){ showError(input, `${getFieldName(input)} must be less than ${max}`) } else { showSuccess(input) } } // get field name function getFieldName(input) { return input.id.charAt(0).toUpperCase() + input.id.slice(1) } // event listeners form.addEventListener('submit', function(e){ e.preventDefault() checkRequired([username,email,password,confirmPassword]) checkLength(username, 4, 15) checkLength(password, 6, 20) checkEmail(email) checkPassword(password, confirmPassword) localStorage.setItem("register-username", username.value) }) السؤال: كيف يمكنني تخزين البيانات المطابقة فقط في localStorage. شكرا.

في الconsole form تظهر لي فارغة و أعتقد أن ذلك هو أصل الخطأ كود javascript let form = document.getElementByClassName(".form") console.log(form) // event listeners form.addEventListener('submit', function(e){ e.preventDefault() // if(username.value === ""){ // showError(username, 'username is required') // } else { // showSuccess(username) // } console.log(form); }) html code <!-- section-form --> <div class="logInForm"> <h2>Sign Up</h2> <form class="form"> <input type="text" placeholder="Username" class="register-username"> <input type="text" placeholder="Email" class="register-email"> <input type="text" placeholder="Password" class="register-password"> <input type="text" placeholder="Confirm Password" class="register-confirm-password"> <input type="button" value="Sign In" class="register-btn"> </form> </div> عفوا قمت بالإصلاح التالي let form = document.getElementByClassName("form") ولكن تظهر لي نفس رسالة الخطأ

شكرا. من المفارقات أني وضعت form.form (class="form") نفس الشيء لاتعمل كود الجافاسكريبت // register-username-register-email-register-password-register-btn let form = document.querySelector('form') let username = document.querySelector(".register-username"); let email = document.querySelector(".register-email"); let password = document.querySelector(".register-password"); let confirmPassword = document.querySelector('.register-confirm-password') let registerBtn = document.querySelector(".register-btn"); // registerBtn.addEventListener('click', register) // function register(e){ // e.preventDefault() // if(registerUsername.value !== "" || registerEmail.value !=="" || registerPassword.value !== ""){ // localStorage.setItem("register-username", username.value) // localStorage.setItem("register-email", email.value) // localStorage.setItem("register-password", password.value) // } // setTimeout(()=>{ // window.location = "./login.html" // }, 1000) // } // show input error message // function showError(input,message) { // // const formControl = input // console.log(input,message); // // console.log(formControl); // } // event listeners form.addEventListener('submit', function(e){ e.preventDefault() // if(username.value === ""){ // showError(username, 'username is required') // } else { // showSuccess(username) // } console.log(form); }) كود html <div class="logInForm"> <h2>Sign Up</h2> <form action=""> <input type="text" placeholder="Username" class="register-username"> <input type="text" placeholder="Email" class="register-email"> <input type="text" placeholder="Password" class="register-password"> <input type="text" placeholder="Confirm Password" class="register-confirm-password"> <input type="button" value="Sign In" class="register-btn"> </form> </div> <script src="../js/register.js"></script> </body> form تظه لي فارغة

السلام عليكم لماذا الكود التالي لايعمل let form = document.querySelector('.form') form.addEventListener('submit', function(e){ e.preventDefault() // if(username.value === ""){ // showError(username, 'username is required') // } else { // showSuccess(username) // } console.log(form); }) شكرا

قمت بإنشاء popup تحتوي على المنتوجات المفضلة. يتم جلب هذه المصفوفات من مصفوفة من localStorage. المشكلة التي واجهتي هو عند الضغط على dislike يقع حذف العنصر لكن عند الضغط ثانية لا يقع الحذف إلا بعد تحديث الصفحة. الكود: // show my favorite products const favorites = document.querySelector(".favorite-products") favorites.addEventListener('click', ()=>{ // get liked products from localStorage favoriteItems = JSON.parse(localStorage.getItem('favoriteProducts')) if(favoriteItems.length != 0){ // create a popup let overlay = document.createElement('div') overlay.setAttribute("class", "popup-overlay") document.body.appendChild(overlay) // styling and draw the popup-overlay let favoriteWrapper = document.createElement('div') favoriteWrapper.setAttribute("class", "favorite-wrapper") overlay.appendChild(favoriteWrapper) function drawFavoriteProducts(favorites) { let drawFavoriteProducts = favorites.map(favItem => { return ` <i class="fa-sharp fa-solid fa-circle-xmark closeBtn"></i> <div class="favorite-card"> <p class="dislike" data-click="${favItem.id}"> Dislike <i class="fa-regular fa-thumbs-down"></i> </p> <img src="${favItem.img_url}.png" alt="" srcset=""> <h2 class="favorite-title">${favItem.title}</h2> </div> ` }) favoriteWrapper.innerHTML = drawFavoriteProducts.join("") } drawFavoriteProducts(favoriteItems) // remove disliked products let disliked = document.querySelectorAll('.dislike') disliked.forEach(item =>{ let dislikeId = item.getAttribute("data-click") item.addEventListener('click', ()=>{ favoriteItems = favoriteItems.filter((data) => data.id != dislikeId) localStorage.setItem("favoriteProducts", JSON.stringify(favoriteItems)) drawFavoriteProducts(favoriteItems) }) }) } }) // close popup document.addEventListener('click', function(e){ // console.log(e.target.className == "fa-sharp fa-solid fa-circle-xmark closeBtn"); if (e.target.className == "fa-sharp fa-solid fa-circle-xmark closeBtn") { e.target.parentNode.remove() document.querySelector('.popup-overlay').remove() } }) يمكنكم الإطلاع على الكود كاملا من خلال الرابط التالي: https://github.com/Saadaoui-Forkan/Ecommerce-website شكرا على المساعدة.

السلام عليكم. أقدم لكم الكود التالي // show my favorite products const favorites = document.querySelector(".favorite-products") favorites.addEventListener('click', ()=>{ // create a popup overly = document.createElement('div') overly.setAttribute("class", "popup-overly") let body = document.getElementsByTagName('body') document.body.appendChild('overly') }) عند النقر العنصر المحدد تظهر لي رسالة الخطأ التالية: script.js:276 Uncaught TypeError: Failed to execute 'appendChild' on 'Node': parameter 1 is not of type 'Node'. at HTMLDivElement.<anonymous> (script.js:276:19) شكرا عى المساعدة.

السلام عليكم. لدي مجموعة من products مخزنة في localStorage. قمت بجلبها و إظهار في صفحة الويب بواسطة -function drawProductsInCart- ثم قمت بعمل -function removeItemFromCart- بغاية حذف product عند النقر الكود: let productsInCartUI = document.querySelector('.cart-products') function drawProductsInCart(allProducts = []) { let products = JSON.parse(localStorage.getItem('productsInCart')) || allProducts let cartProductsUI = products.map((product)=>{ return ` <div class="product-container"> <div class="product-img"> <img src='${product.img_url}.png' alt="" srcset=""> </div> <div class="product-info"> <h2 class="product-title">${product.title}</h2> <h3 class="product-description">${product.des}</h3> <h2 class="product-price">${product.price} DT</h2> </div> <div class="product-btns"> <button class="remove-to-cart" data-click="${product.id}">Remove Product</button> </div> </div> ` }) productsInCartUI.innerHTML = cartProductsUI } drawProductsInCart() let removeProduct = document.querySelectorAll('.remove-to-cart') function removeItemFromCart(){ removeProduct.forEach((item) =>{ let id = item.getAttribute('data-click') let productsInCart = localStorage.getItem('productsInCart') if (productsInCart) { item.addEventListener('click', ()=>{ let items = JSON.parse(productsInCart) let filtered = items.filter(data => data.id != id) localStorage.setItem('productsInCart', JSON.stringify(filtered)) console.log(filtered); drawProductsInCart(filtered) }) } }) } removeItemFromCart() الكود يعمل ولكن إلا بعد حديث الصفحة. ما أريده هو حذف العنصر مباشرة عند النقر على دون تحديث الصفحة. شكرا.

شكرا. لا يمكنني إضافة لأنها بطبعها موجودة. قمت بإضافة data-click لكل زر ثم قمت بعمل filter يعني هي نفس فكرتكم. شكرا.

لنفترض لدي المصفوفة التالية: كيف يمكنني سحب عنصر من هذه المصفوفة عند الضغط على زر محدد. (يعني كل زر يمثل عنصر من المصفوفة) في الواقع قمت بتجربة array.splice لكن أحيانا الزر يقوم بفسخ العنصر الموالي داخل المصفوفة. قمت أيضا بتجربة array.slice(i, i+1) لكن دون جدوى أيضا. let removeProduct = document.querySelectorAll('.remove-to-cart') removeProduct.forEach((item,i) =>{ item.addEventListener('click', ()=>{ // productsInCart.splice(i,1) // productsInCart.slice(i,i+1) console.log(productsInCart); }) }) شكرا على المساعدة

السلام عليكم. الرجاء التوضيح حول عدم تفعيل overflow مثلما يبين المثال التالي شكرا.

قمت بتحديث الكروم. كل شيء تمام الآن.

شكرا. كل شيء تمام مع firefox - edge المشكل في chrome. هل يوجد حل.

تفضل Ecommerce.zip

السلام عليكم. أواجه في عدم تطابق الكود الذي وضعته مع شاشة حاسوبي الشخصي. عرض شاشة الحاسوب أكثر من 992px (breackpoint) يعني من المفروض تظهر لي: لكن هذا ما تظهره شاشة الحاسوب شكرا على المساعدة.

السلام عليكم. في الكود التالي أريد الحصول على array جديد لا يحتوي الحروف المكررة let myString = "EElllzzzzzzzeroo"; myString.split(""); myString.filter((el,i) => { return myString.indexOf(el) === i }) console.log(myString) الرجاء توضيح رسالة الخطأ التي تظهر لي شكرا لكم.

شكرا لكن نسيت بأن أقول أن الهدف هو إيجاد حل دون filter

في الكود التالي أريد محو جميع الأرقام لكن يظهر الرقم 2 في النتيجة let mix = [1, 2, 3, "M", 4, "o", "h", "a", "m", 5, "d",6,"d"]; mix.map((el)=>{ // console.log(mix.indexOf(el)) isNaN(el) ? el : mix.splice(mix.indexOf(el), 1) }) console.log(mix) //output: [ 2, 'M', 'o', 'h', 'a', 'm', 'd', 'd' ] بالرغم أنه في الشيفرة التالية يقع محو 2 من array let el = 2 mix.splice(mix.indexOf(el), 1) //the output: [ 1, 3, 'M', 4, 'o', 'h', 'a', 'm', 5, 'd', 6, 'd' ]

نعم قمت بها و لكن دون جدوى

قمت أيضا بإضافة الأمر git pull --rebase origin master النتيجة:

لاشيء تغير

السلام عليكم. الصورة التالية تبين أن الملف قد تم رفعه على github. لكن على github لا يوجد شيء داخل الملف. https://github.com/Saadaoui-Forkan/webAgency.git الرجاء المساعدة. شكرا.

شكرا. this في arrow function تأتي من المحتوى التي هي ضمنه. لذلك لم يقع التعرف على this. وبالتالي يصبح الحل: const btn1 = document.querySelector(".btn1") btn1.addEventListener('click', test) function test(){ this.style.display = 'none' }

الرجاء توضيح الخطأ عند إستعمال الكود التالي const btn1 = document.querySelector(".btn1") btn1.addEventListener('click', ()=>{ test() }) const test = () => { return this.style.display='none' }

السلام عليكم. لما أفتح ملف الذي أعمل عليه بواسطة vs code تظهر لي العلامة التالية U. لماذا تظهر هذه العلامة و كيف يمكن معالجتها. شكرا.