Java script -Signup form

السلام عليكم 

كود الجافا سكربت الخاص بك يقوم بتبديل بين عرض فورم login و فورم sign-up 

عند الضغط على زر sign up يقوم بعرض فورم ال sign up و يخفي فورم login 

و العكس عند الضغط على زر login يقوم بعرض فورم login و يخفي فورم sign up 

كما يقوم بإضافة بعض الكلاسات للانبوت و textarea في حالة keyup و blur و focus و حذف بعض الكلاسات 

بإمكانك تصفح نتيجة الكود الخاص بك من هنا

كما أظن أن الخطأ متعلق بهذه الأسطر

<script src="js/jquery-3.5.1.js"></script>

<script src="js/popper.min.js"></script>

<script src="js/bootstrap.js"></script>

<script src="./js/script.js"></script>

انت تقوم بتضمين ملفات غير موجودة لأن مجلد js مكتوب بحروف كبيرة ( JS ) و انت تستخدم حروف صغيرة 

أنصحك دائما بفتح نافذة ال console لمتصفحك لمعرفة إن كانت توجد أخطاء للكود الخاص بك أو لا و أيضا برؤية صفحة source code على المتصفح و تجربة الروابط إن كانت تعمل أو لا 

بالتوفيق

هنا قمنا بإضافة مستمع لحدث keyup و blur و focus لأي عنصر input أو عنصر textarea ينحدر في شجرة الHTML من أي عنصر يمتلك كلاس CSS بإسم form

$('.form').find('input, textarea').on('keyup blur focus', function (e) {

هنا قمنا بتعريف متغيرين , المتغير الأول إسمه this$ و أعطيناه قيمة, هذه القيمة هي العنصر الخام الذي تسبب في إطلاق الحدث (input أو textarea) , أما المتغير التاني فهو label و أعطيناه قيمة هي العنصر label الذي يسبق العنصر الذي تسبب في إطلاق الحدث (input أو textarea) في شجرة الhtml الخاصة بالصفحة.

    var $this = $(this),
        label = $this.prev('label');

هنا لدينا إختبار شرطي if , في حالة كان الحدث الذي تم إطلاقه هو keyup سيواجهنا إختبار شرطي if أخر هذا الإختبار ينص على أنه في حال ما إذا كان عنصر الinput أو textarea فارغا سنقوم بإزالة كلاس CSS المسمى active و كذلك الكلاس highlight من عنصر label الذي يسبق عنصر الinput أو textarea الذي تسبب في الحدث , أما إذ لم يكن العنصر input أو textarea فارغا نقوم بإضافة كل من كلاس السي إس إس active و highlight للعنصر label.

        if (e.type === 'keyup') {
              if ($this.val() === '') {
            label.removeClass('active highlight');
          } else {
            label.addClass('active highlight');
          }
      }

أما في حالة لم يكن الحدث الذي تم إطلاقه هو keyup بل كان blur  سيواجهنا إختبار شرطي if أخر هذا الإختبار ينص على أنه في حال ما إذا كان عنصر الinput أو textarea فارغا سنقوم بإزالة كلاسCSS المسمى active و كذلك الكلاس highlight من عنصر label الذي يسبق عنصر الinput أو textarea الذي تسبب في الحدث , أما إذ لم يكن العنصر input أو textarea فارغا نقوم بإضافة كلاس CSS المسمى highlight للعنصر label.

 else if (e.type === 'blur') {
          if( $this.val() === '' ) {
              label.removeClass('active highlight'); 
              } else {
              label.removeClass('highlight');   
              }   
      }

أما في حالة لم يكن الحدث الذي تم إطلاقه هو keyup ولا blur أيضا بل كان focus  سيواجهنا إختبار شرطي if أخر هذا الإختبار ينص على أنه في حال ما إذا كان عنصر الinput أو textarea فارغا سنقوم بإزالة كلاس السي إس إس المسمى highlight من عنصر label الذي يسبق عنصر الinput أو textarea الذي تسبب في الحدث , أما إذ لم يكن العنصر input أو textarea فارغا نقوم بإضافة كلاس CSS المسمى highlight للعنصر label.

else if (e.type === 'focus') {
        
        if( $this.val() === '' ) {
              label.removeClass('highlight'); 
              } 
        else if( $this.val() !== '' ) {
              label.addClass('highlight');
              }
      }

هنا قمنا بإضافة مستمع لحدث click لأي عنصر a ينحدر من أي عنصر يمتلك كلاس CSS بإسم tab

  
  $('.tab a').on('click', function (e) {

تم تفعيل الدالة preventDefault لكائن الحدث وظيفتها أن تمنع الحدث المبدئي لعنصر a

    e.preventDefault();

هنا قمنا بإزالة كلاس active عن جميع أشقاء العنصر الأب للعنصر a الذي تم نقره.

    $(this).parent().siblings().removeClass('active');

هنا قمنا بإضافة كلاس السي إس إس active للعنصر الأب لعنصر a الذي تم نقره

    $(this).parent().addClass('active');

هنا قمنا بتعريف متغير إسمه target و أعطيناه قيمة و هي قيمة الخاصية href الخاصة بالعنصر a الذي تم نقره

target = $(this).attr('href');

هنا قمنا بإخفاء أي عنصر div ينحدر مباشرة من أي عنصر يمتلك كلاس سي إس إس بإسم tab-content و في نفس الوقت لا تكون قيمة خاصية الid تساوي القيمة المخزنة في المتغير target

$('.tab-content > div').not(target).hide();

و أخيرا نقوم بإخفاء العنصر الذي يمتلك خاصية id بنفس القيمة المخزنة في المتغير target تدريجيا في مدة زمنية 600 جزء من الثانية.

$(target).fadeIn(600);

        <script src="js/script.js"></script>
هذا هو الخطا الذي كان يتسبب في عدم تشغيل ملف js قم بحزف .

/.