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

بعد أن قمت بالعديد من الإصلاحات أرجو رأيكم في الموقع التالي: https://my-free-ecommerce.netlify.app/ شكرا.

شكرا على تفاعلكم. وقع حل المشكل.

السلام عليكم. في الكود التالي في صورة عدم تطابق البيانات لاتظهر رسالة الخطأ إلا في الخانة الأولى و لا يقع ظهور رسالة الخطأ إلا عند إصلاح التي قبلها. في الصورة الإيميل غير مطابق و لاتظهر رسالة الخطأ إلا بعد أصلاح username و كذلك كلمة المرور غير مطابقة و لا تظهر رسالة الخطأ إلا بعد إصلاح الإيميل. و هكذا دواليك. الكود: // 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") // 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) return true } else { showError(input, 'Email is not valid') return false } } // check passwords much function checkPassword(input1, input2) { if (input1.value != input2.value) { showError(input2, 'Passwords do not much') return false } else { return true } } // check required fields function checkRequired(inputArr) { let result = true; inputArr.forEach(function (input) { if (input.value.trim() === '') { showError(input, `${getFieldName(input)} is required`) result = false } else { showSuccess(input) } }) return result; } // check input length function checkLength(input, min, max) { if (input.value.length < min) { showError(input, `${getFieldName(input)} must be at least ${min}`) return false } else if (input.value.length > max) { showError(input, `${getFieldName(input)} must be less than ${max}`) return false } else { showSuccess(input) return true } } // 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() if (checkRequired([username, email, password, confirmPassword]) && checkLength(username, 4, 15) && checkLength(password, 6, 20) && checkEmail(email)) { localStorage.setItem("register-username", username.value) localStorage.setItem("register-email", email.value) localStorage.setItem("register-password", password.value) setTimeout(() => { window.location = "./login.html" }, 1000) } }) الرجاء التوضيح و شكرا.

في هذه الحالة يعالج البيانات أولا بأول يعني يظهر رسالة الخطأ في أول خانة خاطئة و البقية جميعهم يقبلهم على أساس أنهم بيانات صحيحة حتى في حالة عدم التطابق. الصورة توضح أكثر مثلما تبين الصورة الإيميل غير مطابق و لكن لاتظهر رسالة الخطأ إلا إذا قمنا بإصلاح التي قبلها.

السلام عليكم. في الكود التالي: // 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") // 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() if (checkRequired([username,email,password,confirmPassword]) || checkLength(username, 4, 15) || checkLength(password, 6, 20) || checkEmail(email)){ localStorage.setItem("register-username", username.value) localStorage.setItem("register-email", email.value) localStorage.setItem("register-password", password.value) } setTimeout(()=>{ window.location = "./login.html" }, 1000) }) يقع الذهاب إلى صفحة ./login.html حتى في صورة إدخال بيانات غير مطابقة. ما أريده هو في صورة وجود بيانات غير مطابقة تظهر لي رسائل الخطأ أما في صورة تطابق البانات يقع المرور للصفحة الموالية. شكرا.

شكرا. نسيت بأن أقول أن الموقع متجاوب مع جميع الشاشات

السلام عليكم. أرجو تقديم رأيكم حول الموقع الذي قمت بإنشائه. هذا الموقع إعتمدت فيه الكثير من logic لكن أرجو أن الdesign ليس كارثي. هو موقع بسيط لكن أخذ مني الكثير من الوقت و أتوجه بالشكر لكل المدربين الذي قاموا بمساعدتي، رأيكم يهمني حتى أتمكن من تحسينه. شكرا. https://initial-e-commerce.netlify.app/

للأسف صديقي

قمت بعمل 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' ]