مدير العلامات المرجعية أداة لإنشاء وإدارة العلامات المرجعية لمواقع الويب مع التحقق من صحة الروابط ووظيفة البحث.

نوع العمل

هو تطبيق ويب بسيط لإدارة الإشارات المرجعية (Bookmarks) — بمعنى إنه يسمح للمستخدم بحفظ روابط مواقع مفضلة (اسم الموقع + عنوان URL)، عرضها، الدخول إليها أو حذفها.

المميزات (الفوائد التي يقدمها)

إمكانية إضافة موقع جديد بإعطاء الاسم والرابط.

التحقق من صحة الاسم (مثلاً: الاسم لا بد أن يحتوي على 3 أحرف على الأقل).

التحقق من أن الرابط URL صالح.

عرض قائمة بالمواقع المضافة مع:

زر لزيارة الموقع (Visit).

زر لحذف (Delete) الموقع من القائمة.

واجهة بسيطة وواضحة وسهلة الاستخدام.

يعمل بالكامل على المتصفح بدون الحاجة لقاعدة بيانات خارجية (غالبًا يستخدم التخزين المحلي “localStorage” في المتصفح).

طريقة التنفيذ (الهيكلية والتقنيات المحتملة)

HTML:

نموذج (form) يحتوي على حقل اسم الموقع (Site Name) وحقل عنوان الموقع (Site URL) وزر Submit.

مكان لعرض القائمة (جدول أو قائمة) التي تُظهر جميع المواقع المضافة مع أزرار الزيارة والحذف.

CSS:

تنسيق الحقول، الأزرار، العرض العام للقائمة، التباعد، الألوان، الخ.

JavaScript:

التقاط الحدث عند الضغط على زر “Submit”.

التحقق من المدخلات (طول الاسم، صحة الـ URL).

إذا كانت المدخلات صحيحة:

حفظ الموقع في تخزين المتصفح المحلي (localStorage) أو في مصفوفة في الذاكرة (لكن عند إعادة تحميل الصفحة يُفقد إلا إذا استُخدم localStorage).

تحميل المواقع المحفوظة عند بدء الصفحة وعرضها في القائمة.

التعامل مع زر “Visit” لفتح الموقع في نافذة جديدة.

التعامل مع زر “Delete” لحذف الموقع من التخزين وإعادة تحديث العرض.

Local Storage (تخزين محلي في المتصفح):

يُستخدم لتخزين قائمة المواقع بحيث تظل محفوظة حتى بعد إعادة تحميل الصفحة أو إغلاق المتصفح.

تُخزن البيانات عادة في شكل JSON يُمثل قائمة (مصفوفة) من الكائنات التي تحتوي على الاسم وURL.

نشر على GitHub Pages:

الكود (HTML, CSS, JS) يُستضاف على GitHub Pages، بحيث يمكن الوصول إليه عبر الإنترنت دون الحاجة لخادم (server) خاص.