currency converter

يمثل هذا الكود تطبيق ويب تفاعلي لتحويل العملات يعتمد على واجهة برمجة تطبيقات خارجية (API) للحصول على أسعار الصرف الحية.

ينقسم عمل الكود إلى شقين رئيسيين:

أولاً: هيكل الصفحة وتصميمها (HTML & Tailwind CSS)

تم بناء واجهة المستخدم باستخدام مكتبة Tailwind CSS عبر رابط CDN، مما وفر تصميماً داكناً (Dark Theme) يتوسط الشاشة.

يحتوي التطبيق على حقل إدخال رقمي (input) يقبل الكسور العشرية لكتابة المبلغ المراد تحويله، ويكون الرقم الافتراضي هو 1.00.

يضم قائمتين منسدلتين (select) لاختيار العملة الأساسية (From) والعملة المستهدفة (To).

يوجد زر "Swap" بين القائمتين لتبديل العملات، وزر "Convert" أحمر اللون في الأسفل لبدء عملية الحساب.

يحتوي على قسم سفلي مخفي (hidden) مُجهز لعرض النتيجة النهائية للتحويل.

ثانياً: المنطق البرمجي (JavaScript)

جلب البيانات الأولية (Initialization): بمجرد تحميل الصفحة، تقوم الدالة currency() بالاتصال بـ Frankfurter API لجلب قائمة بجميع العملات المتاحة عالمياً. تقوم الدالة بتفريغ القوائم المنسدلة من نص "Loading..." وتعبئتها برموز وأسماء العملات المسترجعة، وتعيين الدولار الأمريكي (USD) واليورو (EUR) كقيم افتراضية.

تبديل العملات (Swap Function): عند النقر على زر "Swap"، يقوم الكود بتبديل القيم المحددة بين قائمة العملة الأساسية وقائمة العملة المستهدفة باستخدام متغير مؤقت (temp).

تنفيذ التحويل (Conversion Logic): عند النقر على زر "Convert"، يمر الكود بعدة خطوات:

التحقق من صحة الإدخال (Validation): يمنع الكود استكمال العملية ويظهر رسالة تنبيه (Alert) إذا كان الحقل فارغاً، أو يحتوي على نصوص بدلاً من الأرقام، أو كان المبلغ المدخل أقل من أو يساوي صفراً.

تغيير حالة الزر (Loading State): لمنع تكرار الضغط، يتم تعطيل زر التحويل وتغيير نصه إلى "Converting... please wait".

حساب سعر الصرف: يتم الاتصال بـ API مرة أخرى مع تمرير المبلغ، والعملة الأساسية، والعملة المستهدفة في رابط الطلب لحساب القيمة الدقيقة.

عرض النتيجة: يُلغي الكود إخفاء القسم السفلي ويعرض داخله المبلغ المدخل وعملته، يليه علامة يساوي (=)، ثم المبلغ المحول بالعملة المستهدفة مقرباً إلى رقمين عشريين (toFixed(2)).

إنهاء العملية: تعود حالة زر التحويل إلى طبيعتها (مفعل والنص "Convert") بمجرد الانتهاء، سواء نجحت العملية أو فشلت (مع ظهور تنبيه في حالة الفشل).