متجر العصري

فكرة المشروع

منصة تجارة إلكترونية تتيح للمستخدم:

تصفح المنتجات حسب الأقسام

مشاهدة أحدث العروض

إضافة المنتجات إلى السلة

إتمام عملية الشراء

? مكونات المشروع من الواجهة الظاهرة

1️⃣ شريط التنقل (Navbar)

يحتوي على:

? الرئيسية

? المنتجات

? إلكترونيات

? موضة

? منزل

? أيقونة السلة مع عداد (0) لعدد المنتجات

شعار الموقع: متجر العصري

? هذا يدل على وجود:

نظام أقسام (Categories)

نظام سلة ديناميكي يتحدث تلقائياً

2️⃣ القسم الرئيسي (Hero Section)

عنوان ترحيبي: مرحباً بكم في متجر العصري

وصف: اكتشف أحدث المنتجات بأفضل الأسعار

زر CTA واضح: تسوق الآن

? هذا الزر غالباً ينقلك لقسم المنتجات.

3️⃣ قسم أحدث المنتجات

عنوان: أحدث المنتجات

بطاقات منتجات (Product Cards)

كل بطاقة تحتوي على:

صورة المنتج

نسبة خصم (مثلاً 25%)

سعر

اسم المنتج

? وجود الخصومات يدل على:

دعم نظام أسعار قبل وبعد الخصم

إمكانية حساب التخفيض ديناميكياً

⚙️ الوظائف البرمجية المتوقعة

? 1. نظام السلة

إضافة منتج

حذف منتج

تحديث العدد في الأيقونة

حساب الإجمالي

? 2. تصفية حسب القسم

عند الضغط على:

إلكترونيات

موضة

منزل

يتم عرض منتجات هذا القسم فقط.

? 3. نظام الخصومات

عرض نسبة الخصم

حساب السعر النهائي

إظهار شارة حمراء للخصم

? 4. عرض المنتجات ديناميكياً

غالباً يتم:

تخزين المنتجات في Array داخل JavaScript

ثم عمل loop لعرضها في الصفحة

? التقنيات المستخدمة غالباً

HTML5

CSS3 (مع تدرجات لونية جذابة)

JavaScript (للتحكم في السلة والتفاعل)

ربما:

LocalStorage لتخزين السلة

Bootstrap أو تصميم مخصص

? مستوى المشروع

هذا مشروع:

متوسط في Frontend

مناسب لعرض مهارات:

DOM Manipulation

التعامل مع الأحداث

تنظيم الكود

تصميم واجهات حديثة