"تصميم وتطوير واجهة متجر إلكتروني (E-commerce Website Frontend)" "تصميم وتطوير واجهة متجر إلكتروني (E-commerce Website Frontend)" "تصميم وتطوير واجهة متجر إلكتروني (E-commerce Website Frontend)" "تصميم وتطوير واجهة متجر إلكتروني (E-commerce Website Frontend)" "تصميم وتطوير واجهة متجر إلكتروني (E-commerce Website Frontend)" "تصميم وتطوير واجهة متجر إلكتروني (E-commerce Website Frontend)" "تصميم وتطوير واجهة متجر إلكتروني (E-commerce Website Frontend)" "تصميم وتطوير واجهة متجر إلكتروني (E-commerce Website Frontend)" "تصميم وتطوير واجهة متجر إلكتروني (E-commerce Website Frontend)" "تصميم وتطوير واجهة متجر إلكتروني (E-commerce Website Frontend)" "تصميم وتطوير واجهة متجر إلكتروني (E-commerce Website Frontend)" "تصميم وتطوير واجهة متجر إلكتروني (E-commerce Website Frontend)"
تفاصيل العمل

هيكل الصفحات (HTML Structure) Navbar يحتوي على: شعار الموقع. روابط للتنقل (Home – Products – Categories). أيقونة سلة (Cart). أيقونة مستخدم (مع روابط Sign Up / Sign In). Dropdown لاختيار الفئات (All Categories + باقي التصنيفات). قسم عرض المنتجات (Products Section): مكان فارغ يتم ملؤه ديناميكياً بالـ JavaScript. Footer يحتوي على: شعار الموقع مرة أخرى. روابط تنقل. روابط للسوشيال ميديا (LinkedIn – Twitter). تنسيقات الواجهة (CSS Styling) تنسيق الـ Navbar والـ Footer بشكل متناسق وبسيط. تصميم بطاقات المنتجات (Product Cards): كل كارت يحتوي صورة + اسم + سعر + أزرار للتحكم. تأثيرات Hover (تكبير الصورة – تلوين الاسم – دوران زر الإضافة – ظهور shadow). Dropdown و Search Input منسقين بخلفية فاتحة وحواف ناعمة. الألوان الأساسية: أخضر داكن للأسعار والأزرار المهمة، أزرق للأزرار الثانوية، رمادي فاتح للخلفيات. وظائف ديناميكية (JavaScript Functionality) تحميل البيانات: جلب المنتجات من ملف JSON. تخزين المنتجات في LocalStorage لسرعة التصفح. فلترة المنتجات: عند اختيار فئة من القائمة تظهر المنتجات الخاصة بها فقط. عند اختيار "All" تظهر كل المنتجات. عرض المنتجات ديناميكياً: إنشاء HTML Cards من البيانات وعرضها داخل الصفحة. الأزرار داخل الكارت: عرض تفاصيل المنتج (handleProductDetails). إضافة المنتج إلى السلة (addToCard).

شارك
بطاقة العمل
تاريخ النشر
منذ شهر
المشاهدات
28
المستقل
Salma Khaled
Salma Khaled
Front End Developer
طلب عمل مماثل
شارك
مركز المساعدة