part 1 audio

हाइ गाईज तो आज है डे वान अफ मेकिंग पाथ फाइडर विजॉलाइजर तो सबसे पहले चलते हैं अपने ब्राॉजर में और देखते हैं कि पाथ फाइडर विजॉलाइजर है क्या तो सर्च किया pathexplorer.netlify तो मैंने इस प्रोजेक्ट को Netlify पर डिप्लॉइ कर रखा है इसलिए यहाँ पर सर्च करने पर आ गया तो अपने प्रोजेक्ट में मैं आपको यह भी बता रहा होंगा कि कैसे प्रोजेक्ट को डिप्लॉइ करना है ताकि आप कहीं से भी सर्च करके या फिर लिंक आप किसी को सियर कर सकते हो इस प्रोजेक्ट का तो इस प्रोजेक्ट का एक क्विक डेमो मैं आपको दिखा दो यहाँ पर कुछ वॉल्स ड्रोग किया और जब आप प्रोजेक्ट को डिप्लॉइ करना है ताकि आपको दिखा दो यहाँ पर कुछ वॉल्स डेमो मैं आपको दिखा दो यहाँ पर कुछ वॉल्स डेमो मैं आपको दिखा दो यहाँ पर कुछ वॉल्स डेमो मैं आपको दिखा दो यहाँ पर कुछ वॉल्स डेमो म वो एलगोरिदम किस तरह से यहाँ पर फाइंड किया पाथ को और यहाँ पर देखो मेच जेनेरेशन एलगोरिदम है यह सारे जो एलगोरिदम्स है इसमें बहुत एलगोरिदम्स लगे हुए हैं आने वाले विडियो में हम देख रहे हैं तो यह है पार्ट 1 और इसमें हम लोग एक सिंपल सा एंटरफिस आज त्यार करेंगे इस उड़े वेब एप का एक एंटरफिस आज त्यार करेंगे इसकी लिए चलते हैं अपने डेक्स्टॉप स्क्रीन पे और यहाँ पे एक फोल्डर बना लेते हैं पाथ फाइंडर और इसको उपन कर लेते हैं वीएस कोड में इसके साथ यहाँ पे एक एंडेक्स.html एक फाइल बनाया और एक आप.js फाइल बनाया एक CSS के लिए फोल्डर बनाया जिसके अंदर दो फाइल पोंगे मेंली एक main.css और एक utility.css इतना होने के बाद चलते हैं एंडेक्स.html में और एक देते हैं boilerplate यहाँ से दिया boilerplate यहाँ पे टाइटल दे दिया पाथ फाइंडर और बोडी में चलते हैं यहाँ से लाइफ और reference के लिए साइड में खोल लेते हैं इसको अपने प्रोजेक्ट को जिसे हम reference ले रहे होंगे तो देखो सबसे पहले इसमें देखो इसमें क्या है एक उपर हेडर है और एक नीचे बोर्ड है इन देवो को लिखना होगा हेडर और बोर्ड को और ये मैंने बनाया है ग्रिड की मदब से तो क्या करूँगा एक same slate करके ग्रिड बनाओंगा जिसके अंदर दो element होंगे एक हेडर and another क्या है दूसरा बोर्ड हेडर के अंदर भी देखो दो elements है एक उपर नेब बार है और एक नीचे गाइड बार है तो नेब बार के लिए नेब बना और गाइड बार नीचे बना लिए अभी हम लोग नेब बार बनाते हैं तो नेब बार के अंदर एक logo है एक btn है और एक नीचे क्या है नेब menu है तो लोगो एक btn और एक नेब menu देखो इसको ul इसलिए किया है क्योंकि इसके अंदर ls है न इसको anchor tab दे देते हैं तो इसका क्या होगा index.html लोगो के अंदर क्या लिखा हुआ path finding visualizer btn के अंदर क्या है visualize और इसको id भी दे देते हैं visualize करके id दिया visualize और अब बारी है कि इसका nav menu के अंदर so nav menu के अंदर क्या है ls के अंदर anchor tab बनाया और इसके अंदर क्या लिखा है clear path इसको multiple time नीचे copy करते हैं यहाँ पर लिखा हुआ clear board then next generate image और इसके अंदर क्या है pixel speed and algorithm इतना हो गया देखो अभी गौर से देखो इन सारे पे जो है जिस पे एक carrot का symbol लगा हुआ इंसे अगर क्लिक करो न एक नीचे drop menu open होता है तो इसके अंदर एक anchor tab तो है ही जिस पे pixel लिखा हुआ उसके साथ एक drop menu भी है तो इनके नीचे drop menu बनाया जाए ul.dropmenu इसको ul इसलिए बनाया है क्योंकि इसके अंदर भी तो ls है न ls के अंदर जो direct a है इसके क्या पिक्सल का 14 पिक्सल इसको नीचे multiple time कॉपी कर लेते है क्योंकि इसलिए बनाया जाए इसलिए बनाया जाए इसलिए बनाया जाए इसलिए बनाया जाए इसलिए बनाया जाए इसलिए बनाया जाए इसलिए बनाया जाए इसलिए बनाया जाए इसलिए बनाया जाए इसलिए बनाया जाए इसलिए बनाया जाए इसलिए बना आलगुड़ितम्स वही है इसलिए बनाया जाए इसलिए बनाया जाए इसलिए बनाया जाए इसलिए बनाया जाए इसलिए बनाया जाए इसलिए बनाया जाए इसलिए बनाया जाए इसलिए बनाया जाए इसलिए बनाया जाए इसलिए बनाया जाए इसलिए बनाया जाए इसलिए बनाया जाए इसलि इसलिए बनाया जाए इसलिए बनाया जाए इसलिए बनाया जाए इसलिए बनाया जाए इसलिए बनाया जाए इसलिए बनाया जाए इसलिए बनाया जाए इसलिए बनाया जाए इसलिए बनाया जाए इसलिए बनाया जाए इसलिए बनाया जाए इसलिए बनाया जाए इसलि इसलिए बनाया जाए इसलिए बनाया जाए इसलिए बनाया जाए इसलिए बनाया जाए इसलिए बनाया जाए इसलिए बनाया जाए इसलिए बनाया जाए इसलिए बनाया जाए इसलिए बनाया जाए इसलिए बनाया जाए इसलिए बनाया जाए इसलिए बनाया जाए इसलि इसलिए बनाया जाए इसलिए बनाया जाए इसलिए बनाया जाए इसलिए बनाया जाए इसलिए बनाया जाए इसलिए बनाया जाए इसलिए बनाया जाए इसलिए बनाया जाए इसलिए बनाया जाए इसलिए बनाया जाए इसलिए बनाया जाए इसलिए बनाया जाए इसलि इसलिए बनाया जाए इसलिए बनाया जाए इसलिए बनाया जाए इसलिए बनाया जाए इसलिए बनाया जाए इसलिए बनाया जाए इसलिए बनाया जाए इसलिए बनाया जाए इसलिए बनाया जाए इसलिए बनाया जाए इसलिए बनाया जाए इसलिए बनाया जाए इसलि दिया और नेक्ष्ट हम लोग क्या कर सकते हैं नैप पे अभी हम लोग बेसीकली काम करेंगे इसका डिस्प्लेट्रेक्स क्या एलाइन आइटम सेंटर एलाइन आइटम सेंटर जस्टिफाई कौन्टेंट भी सेंटर सेंटर एस्टेस बिट्विन और इतना होने बात इसमें जितना कलर्स यूज हो रहा है न उन सारे कलर्स को यहां से सिलेक्ट कर लेता हूं वो सारे कलर्स मैं यहां से सिलेक्ट कर लेता हूं जल्दी से चलके यहें रहा इसमें यूज होने वाले सारे कलर्स इसको यहां से कॉपी किया और सबसे उपर जाकर यहां पेस्ट कर देता हूं रूट और ये सारे कलर्स के वेरियबल्स यहां से सिलेक्ट कर लिए हम ने और इनको यूज करेंगे हम लोग स्टाइलिंग में तो नैप का न बैग्राउंड कलर भी है वैर नेवी कलर और बैग्राउंड कलर क्या बैग्राउंड कलर वैर प्राइमरी तो कलर वैट पैड़िंग 8 पिक्सल 8 पिक्सल और 16 पिक्सल बोर्डर रेडियस 5 पिक्सल का और कर्सर पॉइंटर तो ओपी यहाँ पे मस्ट लग रहा है बटन अब बच्चा क्या नैप मेन्यू न नैप मेन्यू का भी डिस्टलेट्लेक्स किया एलाइन आइटम सेंटर और नैप मेन्यू पे ऐसा करने पे कुछ हुआ नहीं क्योंकि हमने यहाँ पे नैप मेन्यू नहीं सिर्फ मेन्यू लिखा था नैप मेन्यू पे करते हो गया अभी प्राब्लम क्या दे रहा है ये जो देखो ये प्राब्लम दे रहा है न ड्रॉप बॉक्स जो ड्रॉप मेन्यू है तो ड्रॉप बॉक्स को न आप पॉइशन अ� एलाई है इनको एक क्लास दे देता ड्रॉप बॉक्स ताकि ऐसे ड्रॉप बॉक्स देने से पता चले कि हाँ इनके अंदर ड्रॉप मेन्यू है प्राब्लम दे रहा है न ड्रॉप बॉक्स जो ड्रॉप मेन्यू है तो ड्रॉप बॉक्स दे देने से पता चले कि हाँ इनके अंदर ड्रॉप बॉक्स दे देने से पता चले कि हाँ इनके अंदर ड्रॉप बॉक्स दे देने से पता चले कि हाँ इनके अंदर ड्रॉप बॉ तो यहाँ पर भी एक क्लास दे देता हूँ क्लास ड्रॉप बॉक्स और देखो ड्रॉप बॉक्स के अंदर क्या है एक एंकर टैब है और एक ड्रॉप मेन्यू है तो इनका पैरेंट कौन सा है ड्रॉप बॉक्स है न तो ड्रॉप बॉक्स इनका क्या कर सकते है इनका पॉजिशन रिलेटिव करना होगा और ड्रॉप बॉक्स के अंदर जो ड्रॉप मेन्यू है ड्रॉप बॉक्स के अंदर जो ड्रॉप मेन्यू है इनका पॉजिशन आपसलूट करना होगा इसलिए पॉजिशन रिलेटिव करना होगा और ड्रॉप बॉक्स के अंदर जो ड्रॉप मेन्यू होगा और ड्रॉप बॉक्स के अंदर जो ड्रॉप मेन्यू होगा और ड्रॉप बॉक्स के अंदर जो ड्रॉप मेन्यू होगा और ड्रॉप बॉक्स के अंदर जो ड्रॉप म कैसे कर सकते हैं राइट से जीरो किया स्क्रॉल गैब और क्या कर सकते हैं टॉप से 100% हो और प्लस 20 पिक्सल और नीचे आजाएं तो यहाँ पर कैल्क मेथड यूज़ करना होगा और देखो एक मिस्टेक जो बिगनल्स यहाँ पर करते हैं कि कैल्क मेथड के अंदर यह जो अर्थमाटिक आपरेटर है और यहाँ पर जो इनके आर्ग्यूमेंट से इनके बीच में न यह नहीं करते हैं इस पेस एक गैप नहीं देते हैं और गैप नहीं देने पर क्या होगा काम नहीं करेगा देखो अभी गैप नहीं है काम नहीं कर रहा है कैल्क मेथड and the moment मैंने गैप अठाया यहाँ पर कैल्क मेथड काम करने लगा तो अब क्या बचा है यहाँ पर जो पैडिंग एट पिक्सल और 16 पिक्सल और देखो पैडिंग यहाँ पर सही से नहीं लगा इसका रीजन है कि डिस्प्ले ब्लॉक करना होगा क्योंकि बाई डिफल्ट एंकर टैप का डिस्प्ले क्या होता है इलाइन होता है न तो एंकर टैप का हो गया और एंकर टैप पर जब कोई हुवर करें तो इसका कलर वैर सेकेंडरी हुवर करने पर पता चल रहा है एक सेकेंडरी कलर लग रहा है और इसके साथ जो एंकर अगर एलाई एक्टिव है एलाई एक्टिव है तब क्या कर दो एका जो बैग्करॉंड कल इनके उपर एक्टिव और एक्टिव देने से यहां एक्टिव नहीं देना यहां एक्टिव देना कति से पाद में पाद में पाद में पाद में पाद में पाद में पाद में पाद में पाद में पाद में पाद में पाद में पाद में पाद में पाद में पाद में पाद में पाद में पाद में पाद में पाद में पाद में पाद में पाद में पाद में पाद में पाद में पाद में पाद में पाद में पाद में पाद में पाद में पाद में पाद में पाद में पाद में पाद में पाद में पाद में पाद में पाद में पाद में पाद में पाद में पाद में पाद में