لقد عدت بعد تحدي صعب آخر من JavaScript30 الخاص بـ Wes Bos! كان التحدي الذي واجهنا اليوم هو العمل أكثر بكثير مما افترضته في البداية. يعد الضغط على زر Shift لتحديد مربعات متعددة ممارسة شائعة، وقد فوجئت برؤية أنها غير مدمجة في مواقع الويب تلقائيًا وأنه يتعين عليك ترميزها يدويًا بنفسك. من الواضح أنه إذا كان الأمر كذلك، فلن يكون هذا الدرس موجودًا ولكنك تعرف ما أعنيه.

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

هذا الدرس واضح للغاية. يتم إعطاؤك قائمة مرجعية أساسية ثم يُطلب منك تمكين تحديد مربعات متعددة عن طريق الضغط باستمرار على مفتاح Shift أثناء تحديد المربع. رائع. تبين أن هذا أكثر تعقيدًا مما كنت أعتقد. قبل أن نتعمق في الدرس الفعلي وما كان ضروريًا من جانبنا، هناك شيء واحد أريد أن أشير إليه.

    input:checked   p {
      background: #F9F9F9;
      text-decoration: line-through;
    }

كان هذا الخط البسيط جدًا من CSS رائعًا بالنسبة لي. كنت أعلم أنه من الممكن إنشاء مربع اختيار باستخدام HTML باستخدام ولكني لم أكن أعلم أنه يمكنك تغيير خصائص مربع الاختيار/قسم div الموجود في مربع الاختيار باستخدام CSS فقط عن طريق تحديد المربع. أريد أيضًا أن أشير هنا إلى أن ويس ذكر أيضًا عدد المرات التي قال فيها كلمة "تحقق" لأنها كانت كثيرة في الفيديو... تحذير عادل أنها ستكون بنفس القدر في هذا المنشور.

  let log = document.querySelector('#log');
  document.addEventListener("click", logKey)
  function logKey(e) {
    console.log(`The shift key is pressed: ${e.shiftKey}`);}

function validate() {
  if (document.getElementsByClassName('item').checked) {
    alert('checked');
  } else { alert('you didnt check it!')} }
validate()  
  let checkBoxes = document.querySelectorAll('checkbox');
  let selected = [];
  for (let i=0; i 



كل شيء في كتلة التعليمات البرمجية فوق هذا السطر كان فاشلاً.  كانت هذه مجرد عدد قليل من محاولاتي لمحاولة اكتشاف الحل بنفسي.  لقد شعرت كما لو كنت على الطريق الصحيح عدة مرات.  على سبيل المثال، الجزء الأول مع وظيفة logKey(e) كنت فخورًا جدًا بالعثور على كيفية الاتصال عند الضغط على مفتاح Shift أثناء النقر وعندما لا يكون كذلك.  بعد ذلك... لم أستطع حتى تخمين كيفية المضي قدمًا.  مرة أخرى كنت عالقا.


const checkboxes = document.querySelectorAll('.inbox input[type="checkbox"]')
let lastChecked

function handleCheck(e) {
  let inBetween = false
if (e.shiftKey && this.checked){
  checkboxes.forEach (checkbox => {
    console.log(checkbox)
    if (checkbox === this || checkbox === lastChecked) {
      inBetween =!inBetween;
    }
    if(inBetween) {
      checkbox.checked = true
    }
  })
}
  lastChecked = this;
}
checkboxes.forEach(checkbox => checkbox.addEventListener('click', handleCheck));




 كان ويس هنا لإنقاذ الموقف بهذا.  لقد ذكر أنه سيكون من الممكن تحديد مربعات متعددة عن طريق استدعاء الأصل/الطفل في HTML، ولكن يمكن كسر هذا بسهولة عن طريق التغييرات التي تم إجراؤها على HTML.  بدلاً من ذلك، جعلنا نستخدم حلقة for، أو على الأقل forEach.  هذا كان له معنى كبير بالنسبة لي.  إنها طريقة بسيطة إلى حد ما لتصفح كل جزء من HTML أثناء التحقق مما إذا كان المربع قد تم تحديده على طول الطريق.  كان هذا مجرد نصف المعركة بالرغم من ذلك.

  بعد استخدام forEach كان علينا إنشاء متغير جديد لتحديد العنصر الذي يقع بين العنصر الأول الذي تم فحصه والعنصر الأخير الذي تم فحصه.  ستكون هذه هي الطريقة التي سنحدد بها المربعات المتبقية ونغير خصائصها لتعكس خصائص العناصر التي تم فحصها في البداية.  كان هناك الكثير من الأسطر هنا التي جعلتني أضيع قليلاً... مرة أخرى باستخدام || واستخدام! قبل المتغير هي مفاهيم غريبة بالنسبة لي.  لا بد لي من النظر فيها أكثر قبل مشروعي القادم.

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

  حسنًا ، هذا يختتم هذا المنشور!  لم يكن درس اليوم هو الأفضل بالنسبة لي، لكنه كان بمثابة تذكير جيد بأنه لا يزال أمامي طريق طويل لنقطعه.  أتمنى أن تعود للاطلاع على مشاركتي التالية مع الجزء التالي من JavaScript 30 الخاص بـ Wes Bos مع - 11 مشغل فيديو HTML5 مخصص!