كيفية تصميم نظام مراجعة بالنجوم في HTML CSS و JavaScript

ستتعلم اليوم في هذه المدونة كيفية إنشاء نظام تصنيف بالنجوم (أداة) باستخدام HTML CSS وجافا سكريبت. في وقت سابق

مرحبًا أيها القراء ، ستتعلم اليوم في هذه المدونة كيفية إنشاء نظام تصنيف بالنجوم (أداة) باستخدام HTML CSS وجافا سكريبت. في وقت سابق.

التقييم بالنجوم هو سؤال تقييم يمنح الأشخاص منتجًا أو خدمة بسعر عدة نجوم. يمكن أن يتراوح عدد النجوم من 5 إلى 10 نجوم. سؤال التصنيف بالنجوم هو نوع من أسئلة التصنيف الذي يسمح للمستخدمين بترتيب السمات على مقياس يتم تمثيله بالنجوم ، بدلاً من أزرار الاختيار أو مربعات الاختيار.

في هذا البرنامج (Star Rating System) في البداية ، هناك خمس نجوم فقط بدون أي مربع وصف. وعند النقر فوق النجمة المعينة ، سيظهر نص المراجعة (نص به رمز تعبيري) ومربع وصف. يظهر نص المراجعة في الصورة على أنه "إنه رائع مع الرموز التعبيرية" هو نص ديناميكي يعني أن هذا النص سيتغير وفقًا لتصنيفك أو مراجعتك.

وعندما تعطي تقييمًا وتكتب بعض الوصف وتنقر على زر "نشر" ... سيتم إخفاء حاوية نظام التصنيف وسيظهر نص ثابت كـ "شكرًا على تقييمنا!" باستخدام زر التحرير في الزاوية العلوية اليمنى. وعندما تنقر على زر التعديل هذا ، سيعيد توجيهك إلى الخطوات السابقة حيث يمكنك تعديل تقييمك ورسالتك.

كما شاهدت نظام التقييم بالنجوم في الفيديو. أتمنى أن تكون قد فهمت الرموز الأساسية وراء إنشاء هذا البرنامج. يوجد خلط لراديو نوع <input> HTML وعلامات <label> لبناء نظام التصنيف هذا. لقد رأيت أيضًا نص المراجعة الديناميكي مع الرموز التعبيرية وآمل أن تنال إعجابك.

يمكنك استخدام هذا النظام على موقع الويب الخاص بك ومشاريعك. إذا كنت مبتدئًا وتعرف HTML و CSS ، فيمكنك أيضًا إنشاء هذا النوع من نظام التصنيف. إذا كنت تحب هذا البرنامج (Star Rating System) وترغب في الحصول على أكواد المصدر. يمكنك بسهولة الحصول على الأكواد المصدرية لهذا البرنامج. للحصول على أكواد المصدر ، تحتاج فقط إلى التمرير لأسفل.

نظام تصنيف النجوم أو القطعة
لإنشاء هذا البرنامج (التحقق من صحة البريد الإلكتروني). أولاً ، تحتاج إلى تحميل ملف الاكواد من زر التحميل

الملفات

ما هو رد فعلك؟

like

dislike

love

funny

angry

sad

wow