npm webpack erorrs

و عليكم السلام و رحمة الله . 

1. بالنسبة لسؤالك الأول : 

لا يزال عليك عمل التفاعلية المطلوبة بنفسك , بملف index.js قم بإضافة الأسطر التالية : 

$('.collapse')
  .on('show.bs.collapse', function () {
  $(this).prev().find('svg')
    .removeClass('fa-angle-down')
    .addClass('fa-angle-up')
})

  .on('hide.bs.collapse', function () {
  $(this).prev().find('svg')
    .removeClass('fa-angle-up')
    .addClass('fa-angle-down')
});

. و بالطبع يجب عليك تعريف الحالة الإفتراضية للأسهم , إما فوق أو تحت : 

<i class="fa fa-angle-down" aria-hidden="true"></i> 

    2. السؤال الثاني : 

لم يعمل الفيديو بسبب أنك تقوم بتعريف الدالة بعد نسبها للـ Event Listener على هذا النحو : 

var myvideo=document.getElementById("video1");

myvideo.addEventListener("click", function playPause() {
	
    if(myvideo.paused)
    myvideo.play();
    else
    myvideo.pause();
  
}, false);

و : 

 <section class="video">
            <video id="video1">
                <source src="./videos/video.mp4" type="video/mp4">
            </video>
            <div class="overlay ">
                <button onclick="playPause()">
                    <i class="fa fa-video-camera" aria-hidden="true"></i>
                    مشاهدة الفيديو
                </button>
            </div>
        </section>

في حين أنك تستدعي دالة غير معرفة أصلا وإسم هاته الدالة داخل تعريف الـ Event Listener متجاهل أصلا . 

فحل المشكلة إما بتعريف الدالة خارجا على هذا النحو : 

myvideo.addEventListener("click", function(){ playPause(); } , false);


function playPause() {
	
    if(myvideo.paused)
    myvideo.play();
    else
    myvideo.pause();
  
}

أو بربط الEvent Listener بالزر عوضا عن الفيديو نفسه فيكون : 

var myvideo=document.getElementById("video1");
var playVideoButton=document.getElementById("playVideoButton");

playVideoButton.addEventListener("click", function playPause() {
	
    if(myvideo.paused)
    myvideo.play();
    else
    myvideo.pause();
  
}, false);

و طبعا لا تنسى تعريف الزر بـ ID: 

 <section class="video">
            <video id="video1">
                <source src="./videos/video.mp4" type="video/mp4">
            </video>
            <div class="overlay ">
                <button id="playVideoButton">
                    <i class="fa fa-video-camera" aria-hidden="true"></i>
                    مشاهدة الفيديو
                </button>
            </div>
        </section>

و أفضل إستعمال الطريقة الثانية لأن العنصر بالايدي video غير ظاهر و لاحظ أن الoverlay فوقه فهو غير قابل للوصول أما عن الزر فهو غير ذلك . 

أما عن تنسيق زر تشغيل الفيديو فيمكنك إستبدال الأيقونة بغيرها : 

<div class="overlay ">
                <button id="playVideoButton">
                    <i class="fa fa-play" aria-hidden="true"></i> 
                    مشاهدة الفيديو
                    
                </button>
            </div>

و بالطبع لا تنسى أن تقوم بإعادة compile للملفات عن طريق : 

npm run build

ملاحظات : 

لا أعلم إن كنت قد واجهت نفس الأخطاء بالنسبة للwebpack على هذا النحو :

> product@1.0.0 build
> webpack serve --mode development

sh: 1: webpack: Permission denied

بحيث تم حلها عن طريق تغيير الوضع :

chmod 775 -R /product

و لا ألزمك طبعا و لكن من اﻷفضل , و كشيء من الشائع بين الأوساط , تعريف السكربت watch عوضا عن build بملف package.json , كما يجب أيضا عمل سكربت للproduction : 

"scripts": {
    "watch": "webpack serve --mode development",
    "prod" : "webpack serve --mode production"
  },

فيتم الإستدعاء كالتالي : 

npm run watch

npm run prod

بتاريخ 18 دقائق مضت قال Adnane Kadri:

و عليكم السلام و رحمة الله . 

1. بالنسبة لسؤالك الأول : 

لا يزال عليك عمل التفاعلية المطلوبة بنفسك , بملف index.js قم بإضافة الأسطر التالية : 

$('.collapse')
  .on('show.bs.collapse', function () {
  $(this).prev().find('svg')
    .removeClass('fa-angle-down')
    .addClass('fa-angle-up')
})

  .on('hide.bs.collapse', function () {
  $(this).prev().find('svg')
    .removeClass('fa-angle-up')
    .addClass('fa-angle-down')
});

. و بالطبع يجب عليك تعريف الحالة الإفتراضية للأسهم , إما فوق أو تحت : 

<i class="fa fa-angle-down" aria-hidden="true"></i> 

    2. السؤال الثاني : 

لم يعمل الفيديو بسبب أنك تقوم بتعريف الدالة بعد نسبها للـ Event Listener على هذا النحو : 

var myvideo=document.getElementById("video1");

myvideo.addEventListener("click", function playPause() {
	
    if(myvideo.paused)
    myvideo.play();
    else
    myvideo.pause();
  
}, false);

و : 

 <section class="video">
            <video id="video1">
                <source src="./videos/video.mp4" type="video/mp4">
            </video>
            <div class="overlay ">
                <button onclick="playPause()">
                    <i class="fa fa-video-camera" aria-hidden="true"></i>
                    مشاهدة الفيديو
                </button>
            </div>
        </section>

في حين أنك تستدعي دالة غير معرفة أصلا وإسم هاته الدالة داخل تعريف الـ Event Listener متجاهل أصلا . 

فحل المشكلة إما بتعريف الدالة خارجا على هذا النحو : 

myvideo.addEventListener("click", function(){ playPause(); } , false);


function playPause() {
	
    if(myvideo.paused)
    myvideo.play();
    else
    myvideo.pause();
  
}

أو بربط الEvent Listener بالزر عوضا عن الفيديو نفسه فيكون : 

var myvideo=document.getElementById("video1");
var playVideoButton=document.getElementById("playVideoButton");

playVideoButton.addEventListener("click", function playPause() {
	
    if(myvideo.paused)
    myvideo.play();
    else
    myvideo.pause();
  
}, false);

و طبعا لا تنسى تعريف الزر بـ ID: 

 <section class="video">
            <video id="video1">
                <source src="./videos/video.mp4" type="video/mp4">
            </video>
            <div class="overlay ">
                <button id="playVideoButton">
                    <i class="fa fa-video-camera" aria-hidden="true"></i>
                    مشاهدة الفيديو
                </button>
            </div>
        </section>

و أفضل إستعمال الطريقة الثانية لأن العنصر بالايدي video غير ظاهر و لاحظ أن الoverlay فوقه فهو غير قابل للوصول أما عن الزر فهو غير ذلك . 

أما عن تنسيق زر تشغيل الفيديو فيمكنك إستبدال الأيقونة بغيرها : 

<div class="overlay ">
                <button id="playVideoButton">
                    <i class="fa fa-play" aria-hidden="true"></i> 
                    مشاهدة الفيديو
                    
                </button>
            </div>

و بالطبع لا تنسى أن تقوم بإعادة compile للملفات عن طريق : 

npm run build

 

شكرا كثيرا لك لكنني اواجه مشكلة كيف اعلم بهاذه الامور بحثت كثيرا عن النت لكنني لم اجد اي طريقة كيف تصبح لدي هذه المعرفة وكيف ادرب نفسي ع البحث  لكي استطيع حل مشاكلي بنفسي ؟

بتاريخ 28 دقائق مضت قال علي يعقوب:

شكرا كثيرا لك لكنني اواجه مشكلة كيف اعلم بهاذه الامور بحثت كثيرا عن النت لكنني لم اجد اي طريقة كيف تصبح لدي هذه المعرفة وكيف ادرب نفسي ع البحث  لكي استطيع حل مشاكلي بنفسي ؟

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

1. مشكلة ! فبالطبع يجب أن تكون لديك مشكلة و من الواجب قراءتها و التأني في ذلك .

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

3. قم بوصف المشكلة : كأن تحاول الحصول على أكبر عدد من المعلومات عن هاته المشكلة . (مثال عن ذلك : الزر يشتغل و يستدعي دالة بالفعل لكن الـ console يقول أن هاته الدالة غير معرفة , و أرى أني قد عرفتها بالفعل في ملف index.js)

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

و ستصبح العملية سهلة و أبسط مع مرور الوقت و التعود على الأخطاء و على حلها . و قد يقودك إنتقال المشاكل من بسيطة , إلى معقدة إلى معقدة جدا , إلى تعلم الخوارزميات و الproblem solving التي ستنقل الأمر إلى مستوى اخر من التنظيم و المنهجية.