part 2 audio

तो आज है पार्ट टूग वोप मेकिंग पाथ फाइडर विजुलाइजर तो बिछले पार्ट में हमने देख रखा था कि कैसे हमने एक पूरा template हमने create किया है एक पूरा interface त्यार किया इस web app का आज हम लोग देखेंगे कि कैसे इन सारे menu पे इन सारे items पे add event list करना है तो चलते हैं app.js में और इस चीज को भी implement करते हैं तो ऐसा करने के लिए सबसे पहले हमको क्या करना होगा इन सारे allies को select करना होगा so document.select alley में nav options will be document.selectqueryqueryselector all जो nav menu के अंदर क्या एलाई के अंदर direct a है उनको select करना है और जैसे ही इन पे click हो nav options for each nav option इन पे क्या करना है nav option पे event listener add करना है तो जैसे ही इस पे click हो तब यह न एक method यहाँ पे run हो जाएगा so हम लोग यहाँ पे pet arrow method define करते हैं और इसके अंदर बताएंगे कि click होने के बाद क्या करना है तो जैसे ही इस पे click हो तो क्या करना है anchor tab पे जैसे ही click हो यहाँ पे इस anchor tab पे जैसे ही click हो जैसे pixel हो गया या फिर यह anchor tab हो गया जैसे ही यहाँ पे हम हमें न li को active class दे देना है so li इसका parent है so li will be const li will be nav option dot parent element so li को क्या कर देंगे class list dot add active class दे देंगे और देखो ऐसा ही करते क्या होगा जैसे ही इन सारे पे click हो रहा है इस पे active class आ जा रहा है देखो और हम क्या चाहते है कि active class आने से पहले न एक ऐसा method बना लेंगे जो की क्या करेगा इन सभी पर से सबसे पहले active class remove कर देगा so remove active और यह क्या होगा इसमें हमें pass करना होगा इसमें pass करना होगा पूरा elements और उन elements का यह क्या करेगा उन elements के अंदर जितने भी यह है इन सारे elements के अंदर जितने भी elements हैं इनके यह सभी पर से क्या जो active class है उसको remove करने का काम करेगा तो for each एक method लिख लेता हूँ for each loop जो की elements के अंदर जो element है उनका क्या करेगा remove active इस पर से active class हटा देगा लेकिन ध्यान से देखो यह जो nav option हम लोग class कर रहे हैं इसके parent element पर से न हटाना है तो इसको बताना होगा कि हमें parent element पर से हटाना है by default तो यह ऐसी हटाएगा लेकिन parent यहाँ पर false रहेगा लेकिन जैसे यहाँ पर parent होगा if parent अगर parent है then element will be क्या होगा element will be element.parent element element जो है parent element से replace हो जाएगा बतलब जो भी anchor tab यहाँ पर आ रहा होगा element ले वो li से replace हो जाएगा और li के उपर से क्या होगा class list जो है जिसका active class list है वो हटा दिया जाएगा इतना होने के बार देखो यहाँ पर हमें prove भी बेज़ना होगा कि हां इनके parents को हटाना है न अब देखो इन सभी पर click हो रहा है तो देखो इतना awesome एक effect लग रहा है इस पर click हो रहा है अब क्या कर सकते हमें similarly इस पर भी click लगाना है click event जो drop menu है उनके ऊपर click event लगाना है उसके लिए क्या हो जैसे ही अगर पता चले कि इस li में li.classlist.contains dropbox जैसे ही dropbox पे click हुआ है अगर ये जो li है इसका classlist अगर dropbox है then क्या करना है जितने भी drop option है उनको select कर लेना है drop options अभी के लिए ये null होगा लेकिन the moment dropbox पे click होगा वैसे ही li के अंदर जो सारे ये होंगे li के अंदर li.selectqueryselector dropbox के अंदर जो li होंगे उनको select कर लेगा ये drop options console.log पे चलते हैं प्रिंट करके देखते हैं कैसा आ रहा है so the moment pixel पे click होगा क्या कर रहा है const को आप ये नहीं करते हैं value assign नहीं कर सकते हैं वैर कर दिया अब खुस अब देखते हैं pixel ते click किया null आ रहा है कि हमने यहाँ ते कुछ गलत दे रखा होगा dropbox के अंदर जो direct li है actually drop menu drop menu के अंदर जो direct li है तो moment यहाँ पे click किया query selector all moment हमने यहाँ click किया हमें ये पूरा एक note list मिल गया जिसके अंदर हर एक li आ गया अब क्या होगा हमें न drop options पे क्या करना है click event लगाना है so यही से एक method call हो जाएगा toggle drop options यह method यहाँ से call हुआ और इस method को नीचे define कर देते हैं function और क्या कर सकते है इसमें drop options for each drop option for each drop option drop option.add event listener इन पे भी event listener लगाएंगे जैसे ही click हो तो सबसे पहले तो remove हो जाए इन पे drop options पे and then drop option.class list .add active देखो same जो काम हमने उपर कर रखा है वही काम हमने नीचे भी किया और यहाँ पे click करने पे क्या हो रहा है active class क्यों नहीं लग रहा है drop option.class list.active देखते हैं क्या हमने कोई active class यहाँ पे define नहीं किया है क्या तो main.css में चलते हैं हमने इसके लिए active नहीं बना रखा है क्या control f.active dropbox.active अगर हो then drop menu dropbox के अंदर जो li है अगर वो active हो तब क्या करना है anchor type का background color primary कर देना है dropbox के अंदर जो direct li है यहाँ पे dropbox नहीं drop menu लिखना था अब देखो अब काम किया न यहां से हटा लेते हैं और जो हमने javascript से दे रखा है देखो जिस पे click हो रहा है उस पे add हो जा रहा है हमने इतना कर लिया awesome अब क्या करेंगे कि जैसे outside click होगा outside करने का मतलब होगा drop menu के बाहर कहीं पे click हो रहा है जैसे यहां पे click कर रहा हूँ तो क्या हो कि इस पर से active class हट जाया तो इसको हम लोग कैसे implement करेंगे document.addEventListener click पूरे document पे कहीं भी click हो उसको यह detect करेगा और यहां पे एक object मिल रहा होगा console.log e.target और देखो यह इससे क्या पता चलेगा कि कहां click हो रहा है इससे detect कर पाएंगे न देखो इससे हम लोग detect कर पाएंगे कि कहां click हो रहा है और इससे अगर detect कर लिए कि अगर जहां click हो रहा है अगर वो outside this outside this क्या nav menu है जिन क्या करेंगे इस पर से हटा जेंगे class active so const nav menu will be document.query query selector nav menu and if nav menu.contains what not contain जो click जहांपे हुआ है अगर वो nav menu के अंदर नहीं click हुआ है जिन क्या करना होगा outside हुआ है जिन remove कर देना होगा e.target जिन इसके बाद क्या करेंगे nav remove कर देंगे न जैसे हमने यहां से nav के उपर से remove किया था जिन यही line यहां भी paste करेंगे और देखो अब क्या होगा यहां पे click किया drop box open हुआ और जैसे outside कहीं पे click करूँगा यह तबी पर से हटा देगा active class जैसे यहां पे भी click किया active class आ गया और the moment मैं कहीं और click करूँगा यहां से active class हट जाएगा एक और काम हम लोग क्या कर सकते है कि जैसे अगर इसको पर active class लग गया है अब इस पे hover हो तब इसका color change ना हो white का white ही रहे इसका color change हो इसका white का white ही रहे इसको करने के लिए क्या करेंगे हमने क्या हाँ पे दे रखा है secondary यहां है न यहां है यहां है यहां है यहां है यहां है यहां है यहां है यहां है यहां है यहां है यहां है यहां है यहां है यहां है यहां है यहां है यहां है यहां है यहां है यहां है यहां है यहां है यहां है यहां है यहां है यहां है यहां है यहां है यहां है यहां है यहां है यहां है यहां है यहां है यहां है यहां है यहां है यहां है यहां है यहां है यहां है यहां है यहां है यहां है यहां है यहां है यहां है यहां है यहां है यहां है यहां है यहां है यहां है यहां है यहां है यहां है यहां है यहां है यहां है यहां है यहां है यहां है यहां है यहां है यहां है यहां है यहां है यहां है यहां है यहां है यहां है यहां है यहां है यहां है यहां है यहां है यहां है यहां है यहां है यहां है यहां है यहां है यहां है यहां है यहां है यहां है यहां है यहां है यहां है यहां है यहां है यहां है यहां है यहां है यहां है यहां है यहां है यहां है यहां है यहां है यहां है यहां है यहां है यहां है यहां है यहां है यहां है यहां है यहां है यहां है यहां है यहां है यहां है यहां है यहां है यहां है यहां है यहां है यहां है यहां है यहां है यहां है यहां है यहां है यहां है यहां है यहां है यहां है यहां है यहां है यहां है यहां है यहां है यहां है यहां है यहां है यहां है यहां है यहां है यहां है यहां है यहां है यहां है यहां है यहां है यहां है यहां है यहां है यहां है यहां है यहां है यहां है यहां है यहां है यहां है यहां है यहां है यहां है यहां है यहां है यहां है यहां है यहां है यहां है यहां है यहां है यहां है यहां है यहां है यहां है यहां है यहां है यहां है