yummy website

Yummy - موقع وصفات الطعام

وصف المشروع:

Yummy هو موقع ويب تفاعلي متخصص في عرض الوصفات المتنوعة، تم تطويره باستخدام JavaScript وjQuery، مع استخدام HTML وCSS وBootstrap3 لتنسيق وتصميم واجهة المستخدم. الموقع يتيح للمستخدمين البحث عن الوصفات بسهولة من خلال الاسم أو الحرف الأول، كما يحتوي على خاصية التحقق من صحة المدخلات باستخدام تعبيرات منتظمة (Regex) للتأكد من إدخال بيانات صحيحة.

المميزات الأساسية:

عرض الوصفات: يتم عرض مجموعة واسعة من الوصفات بمعلومات تفصيلية حول كل وصفة، مثل المكونات وطريقة التحضير.

بحث متقدم: يمكن للمستخدمين البحث عن الوصفات باستخدام الاسم أو الحرف الأول، مما يسهل الوصول إلى وصفات محددة بسرعة.

تصنيف الوصفات: يتم تصنيف الوصفات إلى مجموعات بناءً على النوع (مثل أطباق رئيسية، مقبلات، حلويات، إلخ)، مع عرض كل تصنيف بشكل أنيق.

التحقق من صحة المدخلات: باستخدام Regex، يتم التحقق من بيانات المدخلات في النماذج (مثل نماذج البحث أو التسجيل)، للتأكد من أن البيانات المدخلة صحيحة وموثوقة.

واجهة مستخدم متجاوبة: تم تصميم الموقع باستخدام Bootstrap3 لضمان تجربة مستخدم سلسة عبر مختلف الأجهزة (أجهزة الكمبيوتر، الهواتف المحمولة، الأجهزة اللوحية).

التقنيات المستخدمة:

HTML5: لبناء هيكل صفحات الويب.

CSS3: لتنسيق الصفحات وإنشاء تصاميم جميلة وجذابة.

Bootstrap3: لتصميم واجهة متجاوبة تضمن توافق الموقع مع جميع أحجام الشاشات.

JavaScript (Vanilla JS): لإضافة التفاعل والديناميكية للموقع، مثل البحث وعرض الوصفات.

jQuery: لتسهيل التعامل مع DOM، وإضافة التأثيرات والتحكم في عرض البيانات بشكل مريح.

Regex (تعبيرات منتظمة): للتحقق من صحة المدخلات في النماذج، مثل التأكد من صحة البريد الإلكتروني أو الهاتف.

مراحل التطوير:

إنشاء الهيكل الأساسي: تم تطوير صفحات الموقع باستخدام HTML5 لتوفير هيكل واضح وسهل القراءة.

التصميم باستخدام Bootstrap3: تم استخدام Bootstrap لتصميم واجهة مستخدم متجاوبة وجذابة، مما يضمن توافق الموقع مع مختلف الأجهزة.

إضافة التفاعل باستخدام JavaScript وjQuery: تم برمجة الوظائف التفاعلية مثل البحث، عرض الوصفات، وتنقل المستخدم بين التصنيفات باستخدام JavaScript وjQuery.

التحقق من صحة المدخلات: تم استخدام تعبيرات منتظمة (Regex) للتحقق من صحة بيانات المستخدم المدخلة في النماذج (مثل التأكد من أن الحقول المطلوبة غير فارغة وأن بيانات البريد الإلكتروني صحيحة).

إدارة البيانات والوصفات: تم جلب الوصفات من API خارجي وعرضها للمستخدم بطريقة مرتبة وسهلة الوصول.