Up next in 10
JavaScript Exercise 12 - Solution & Shoutouts _ Sigma Web Development Course - Tutorial #72
15 views
Mar 11, 2024
In Tutorial #72 of the Sigma Web Development Course, participants can celebrate their successful completion of Exercise 12 – Color the Boxes challenge, as the instructor provides a comprehensive solution. This video not only offers a step-by-step walkthrough of the solution but also includes shoutouts to participants who demonstrated exceptional creativity and problem-solving skills. Viewers will gain valuable insights into effective coding techniques and witness diverse approaches to tackling the dynamic box coloring challenge using JavaScript. Whether you're a coding enthusiast or an experienced developer, this tutorial serves as a rewarding conclusion to Exercise 12, recognizing the efforts of the course participants and providing inspiration for future coding endeavors. Join the session to wrap up the exercise and celebrate the diverse solutions showcased in the Sigma Web Development Course.
View Video Transcript
0:00
मैंने आप लोगों को डॉम से रिलेटेटेक एक्सरसाइज दी थ�
0:02
आप में से कई लोगों ने उसको सॉल्व किया आज के इस वीडियो में सबसे पहले सॉल्विशन दूँगा मैं उसका आपक�
0:06
और फिर उसकी बाद हम लोग शाउट आउट देंगे उन लोगों को जिनों ने इसको solve किय�
0:10
इस वीडियो को like करके नीचे comment section में javascript ओपी जरूर लिख देन�
0:14
चलता है computer screen में let's roll the intro अल्लाइट गाइस तो question जो मैंने आप लोगों को दिया थ�
0:28
उसका solution देने का टाइम आ गया है बहुती straight forward थ�
0:31
येट कुछ लोगों ने लिखा कि यार ये question difficult था लेकिन मैं वही कहता हूँ कि यार जो level होता है सबका अपना अपना होता ह�
0:38
और आप लोगों को अपना level build करने में थोड़ा time लगेगा not a problem at all
0:42
तो जो exercise 12 थी उसमें मैंने क्या बोला था कि आप लोगों को करना ह�
0:47
color boxes को ठीक है तो यहाँ पर आप देखो कि हमने random colors generate करना ह�
0:52
तो यह question था given five boxes assign a random color and a random background
0:57
to each box using DOM concepts ठीक है अब इसके कई तरीके हैं ठीक ह�
1:02
मैं आप लोगों यहाँ पर दिखाता हूँ कि किस तरह से आप लोग random number को generate कर सकते ह�
1:07
अब देखो random color को generate कैसे किया जा सकता है कई तरीके है random color को generate करने क�
1:12
लेकिन एक बहुती layman तरीका क्या होगा क्या होगा एक layman तरीक�
1:17
मैं यहाँ पर देखता हूँ कितने boxes है in fact it would be better अगर मै�
1:22
यहाँ पर video number था 70 video number 70 की file ही ले आओं तो अगर मैं ये index.html को copy कर लू�
1:28
by the way आप ऐसे drag and drop करके भी खोल सकते हो वी एस कोड में अगर आपको नहीं पता हो तो तो मैं अगर ये file ही ले आओ ना वो जादा better रहेग�
1:33
मिले control a, control v ठीक है तो ये मैंने किया अब मैं यहाँ पर क्या कर रहा हू�
1:38
मैं यह कह रहा हूं कि यह बॉक्सेस को मुझे रैनमली कलर असाइन करना है ठीक है तो एक फंक्शन लिख लूंग�
1:45
सबसे पहले सबसे पहले तो एक स्क्रिप्ट लगा लेता हूं यहां पर ठीक है देखो चीजों को और ग्राइस करना बहु�
1:49
वाले बड़े प्रोजेक्ट बनाएंगे तो बड़े प्रोजेक्ट जब हम बनाएंगे तब हमें स्क्रिप्ट और इस तरह की बहु�
2:00
सारी फाइलें बनाकर चीजों को एसेंबल करके रखना पड़ेगा और ना क्या होगा चीजें गुम जाएंगी प्रॉब्लम होग�
2:05
हम नहीं चाहते वो हो तो चीज़ों को और गनाईज रखना बहुत जरूरी है और मैं हमेशा अपनी स्क्रिप्ट क�
2:11
यहां पर इस तरह से लिख लेता हूं जब आप बेगेनर है तब तो लिखी लो कम से कम ठीक है उससे क्या होगा कि आपक�
2:20
चलेगा कि आपकी script जो है वो काम कर रही है मैं सबसे बड़े क्या करूँगा यह सारे boxes
2:24
को लूँगा इसके कई तरीके है या तो मैं container के सारे जो elements है�
2:28
वो ले लूँ या फिर मैं इस class से target कर लूँ बहुत तरीके ह�
2:32
मैं इस class से target कर लेता हूँ या मैं आपको जो counter intuitive method है वो बताता हू�
2:36
देखो document.getElements by class name मैं कहूँगा let boxes is equal to
2:41
document.getElement by cn और enter ऐसे करना है देखो ठीक है और box
2:48
और control enter मार के मैं आपर लिखूँगा console.log boxes ठीक है कुछ इस तरह स�
2:54
और अगर आप लोगों को दिखाओ इसको run करके index.html को तो आप लोगों को दिखेगा कि जो inspect element आप करोगे ज�
3:01
तो यहाँ पर आप देखो पांचों के पांचों boxes आपको मिल ग�
3:05
0, 1, 2, 3, 4 और आप इनको iterate कर सकते हो आप कह सकते हो कि by array.from boxes
3:13
array.from boxes मतलब boxes से एक array बना लो क्योंकि by default यह क्या है यह HTML collection ह�
3:18
और एसटीमल कलेक्शन में पॉरीज मेथड नहीं होता है तो यह चीज आपको समझनी पड़ेगी ठीक है और एक एर�
3:24
फंक्शन में इस तरह से लिखूंगा और मैं लिखूंगा कॉनसोल डॉट लॉग ए अभी मैं सिर्फ इमेजो है एक यहां पर प्रें�
3:31
रहा हूं इको ठीक है और यह करने का एक दूसरा तरीका जो है तो मेरा काम है बताना आपको ठीक है तो मैं आपक�
3:36
सारे तरीके बताऊंगा तो मैं कहूंगा डॉक्यूमेंट डॉट गिट एलेमेंट बाय या फिर क्वेटी सेलेक्टर मैं कहूंग�
3:44
लेकिन यह पर लिखूंगा और मैं क्या लिखूंगा मैं लिखूंगा चिल्डर लिखूंगा तो क्या होगा चिल्डर लिखूंगा तब भ�
3:57
यहीं आएंगे क्योंकि कंटेनर के सारे चिल्डर यानि कि चाइड एलिमेंट्स या फिर सारे बॉक्स वाले बॉक्�
4:08
elements class as equal to box method word wrap console function
4:29
मैं ऐसे मना सकता हूं या फिर मैं फंक्शन बना सकता हूं रेंडम कलर एंड इट वूट बी बेटर अगर मैं कहू�
4:35
get random color, तो get random color एक function है, जो कि एक random color मुझे generate करके देता है
4:41
ठीक है, अगर मैं यहाँ पर एक CSS डाल दूं box में, color red
4:46
माल लो, एक बात कह रहा हूँ, माल लो मैंने color डाल दिया red, तो मैं क्या कर सकता हूँ
4:52
अगर मुझे इसको number में convert करना है, तो मैं इस तरह से RGB की values ऐसे ले सकता हू�
4:55
ठीक है तो ये एक color है और ये जो value है ये कहां से कहां तक जाती ह�
4:59
ये जाती है 0 से लेके 255 तक ठीक है 0 से लेक�
5:05
255 तक तीनो values जाती है तो चलो यार यही करते है�
5:09
तो यहाँ पर मैं क्या करूँगा कि val1 is equal to मैं कहूँगा let val1 is equal to
5:15
जो पहली value है वो क्या हो मान लो वो हो जाती है 244 या 233
5:21
उसी इसाब से val2 मेरी क्या हो जाती है मान लो val2 हो जाती ह�
5:25
4 sorry 124 और मान लो जो मेरी val3 है वो क्या हो जाती ह�
5:32
मान लो वो हो जाती है 111 तो मैं कह सकता हू�
5:35
return कर दो यह return कर दो लेकिन यह return exactly मत कर�
5:40
यहाँ पर डाल दो क्या यहाँ पर डाल दो val1 यहाँ पर डाल दो val2
5:45
मैंने template literal बताये थे देखो आप यह मत कहने हैं यह क्या कर रहे हो ठीक है अन्ने दुबारा दिखवा दूँग�
5:50
वीडियो आपको playlist में ले जाके ठीक है आपके घर आजाओंगा और आपको जो ह�
5:55
laptop लेके बैठूंगा आपको सारे वीडियो जिखाओंगा ये sigma के ठीक है ये playlist क�
6:00
और यहाँ पर आप देखो ये random color जो है वो return हो जाएग�
6:04
बस अब मैं simple सा एक काम करूँगा मैं कहूँगा e.style. और मैं कहूँग�
6:10
background color is equal to एक random color, तो कैसे मिलेगा मुझे random color, get random
6:18
color function को मैं call कर दूँगा, और मैं देखता हूँ यह काम कर रहा है कि नहीं कर रहा है
6:22
yes यह काम कर रहा है, और मैंने जो color red लगाया ने इसको हटाता हूँ मैं सबसे बहले तो, यह तो मैंन�
6:26
जैसी लगाए था तो मैंने एक random color जो है वो generate किया और वो random
6:32
color मेरा क्या है ये value उसके साथ color आ रहा है अभी मैंने random color
6:36
generate करा नहीं है पर ये मेरा function काम कर रहा है ये मुझे पता चल गया and same ची�
6:40
मैं करूँगा color के लिए ठीक है और ये function जब जब run होग�
6:44
तब तब ये एक random color लेकर आए इसलिए मैं यहाँ पर क्या करूँग�
6:47
मैं यहाँ पर कर दूँगा math.random और मैं आप लोगों को दिखाना चाहता हूँ कि math.random क्या करता ह�
6:54
ठीक है अब देखो मैं जाता mathematical नहीं होना चाहता यहाँ प�
6:58
और मैं आपको बोर नहीं करना चाहता मथमाटिकल होके लेकिन मैं आप लोगों को एक बहुत ही सिंपल सा concept बताता हू�
7:03
अगर आपको a और b के बीच में random number generate करना है तो आप क्या करो आप लिखो a plus और 0 स�
7:10
मैं कहूँगा r और into b minus a कर दो ठीक ह�
7:14
यह आप लिखोगे यहाँ पर r क्या यहाँ पर r है एक random number between 0 and 1
7:18
r की value अगर 0 होगी तो आपको a मिलेगा r की value अगर 1 होगी तो आपको b मिलेग�
7:24
और r की value 0 और 1 के बीच में होगी तो आपको एक random number मिलेग�
7:28
जो कि a और b के बीच में lie करेगा including a and b अगर जो random number ह�
7:32
including 0 and 1 है तो ठीक है with that said हम क्या करेंग�
7:37
इस formula को इस्तेमाल करेंगे और इस formula में यह कुछ इस तरह से है ठीक ह�
7:43
और यहाँ पर a हमारा क्या है 0 और b हमारा क्या है 255 255 minus 0 कितना हो जाएग�
7:49
255 तो यह हमको हमेशा 0 से लेके 255 तक random number generate करके देग�
7:55
बट मैं चाहता हूँ कि मुझे ये दे एक integer तो मैं कहूँगा math.seal
8:02
और ये मुझे एक integer देगा अब देखो जो math.seal होता ह�
8:06
उसका क्या मतलब होता है अगर मैं मालो 4.22 कर दू तो वो मुझे क्या करेग�
8:10
एक बड़ा integer देगा ठीक है इसके अगला वाला जो इंटीजर है, तो मैं वही कर रहा हूँ यहाँ पर
8:15
तो मैं mat.seal का परियोग कर रहा हूँ, तो यह मेरा random color हो गया
8:19
बराबर है की नहीं है, बता दो भाई comment में, सब लोग लिखो comment में बराबर है
8:22
और यह किसी को ज्यादा मैथ्स लग गई ना कर तो भाई देखो थोड़ी सी मेहनत कर लो सीखMarket लो इसको इतनी मैथ्स लगती ह�
8:28
प्रोग्रामिंग में लगती है और मैंने शायद बहुत जल्दी बता दिया देखता हूं गूगल पर किसी ने बताया क्या रैंड�
8:50
तो यह फॉर्मुले जो होते हैं, यह बिल्कुल जिस तरह से मैंने आपको बताया
8:54
एक बार और देख लो वीडियो, देखो यहाँ पर इन्होंने क्या किया, मिन किया, प्लस मैक्स माइनस मिन, इंटू मैट डॉट रेंडम
9:00
बिल्कुल यही किया है नो जो मैंने बताया आपको ठीक है तो यह यह सब चीज़े आनी चाहिए आपको और अगर नही�
9:04
आती है और मैं कहूंगा हाँ यह सिंपल नहीं है देखो रैनम कलर्स में आ गया है और सेम चीज मुझे करनी थ�
9:10
थी E dot style dot color के साथ भी तो वो भी हो गया ठीक है तो देखो य�
9:13
अलग-अलग colors के यहाँ पर आपको मिल रहे हैं मैं reload करूँगा तो colors change हो जाएंगे देख�
9:19
तो हर बार ये reload होगा तो ये color change होता जाएगा ठीक है त�
9:23
यहाँ पर यह बिल्कुल डिस्को लाइट की तरह इसके कलर्स चेंज हो रहे हैं तो यही था बस तो आप लोगों को ज�
9:29
है यह मेथड मेरा जो है वह पसंद आया होगा एक और मेथड है आप लोग एक्सर डेसिमल नंबर भी जनरेट कर सकते ह�
9:35
लुट कलर जनरेटर की साइज से लेकिन मैं अब देखना चाहूंगा कि आप लोगों ने क्या क्या किया है और आप लोगो�
9:40
का सॉल्यूशन जो है वह किस तरह से किस चीज पर आधारित है मैं यह देखना चाहता हूं तो यहां पर सबसे पहल�
9:46
शामिश इकबाल को चॉट आउट फिर इसके बाद एस प्रेंस को चॉट आउट और फिर मिस्टर कैलोरो ऑफिशल को चॉ�
9:52
आउट कोडिंग निंजा को चॉट आउट एमजेटी गेमिन को चॉट आउट कोड़विद आयूश को चॉट आउट फिर एमजेटी गेमिन क�
9:58
शाट और डी आर पी को शाट और प्रिया को शाट और पतिल मनन को शाट और अभी अमने को शाट और आर केस भट को शा�
10:07
और वाइरस बाबा टेक्निका को शाट और करें जल्दी जल्दी कमेंट करो चैनल एक्सटर लाइक मिलेगा हां भा�
10:13
लगा लाइक वाहित दोस्तों को शाट टॉट रिएक्ट भी इंट्रोडेट होगा हां भाई बिल्कुल होगा लक्षिराज दाश क�
10:18
और यहां पर पहला सॉलेशन आ चुका है रोहन दास का क्या बात है इन आम सुना सुना लग रहा है लेकिन इस सॉलेशन को भी मैं देखना चाहूंगा और देखता हूं कि यह सॉलेशन कुछ धमाल मचा पाता है कि नहीं ठीक है तो मैं क्या करता हूं एक बार के लिए अपने स�
10:48
भी कर रहे हैं फिर ऐसी तो यार ये काम तो नहीं कर रहा बाई solution इनका देखता हूँ क्या दिक्कत आ रही ह�
10:55
तो यहाँ पर boxes is equal to ओके तो मैंने यहाँ पर box से लिखा हुआ इन्होंने boxes किया हुआ हाँ बाई इनका काम कर रहा है और color भी आ रहे है�
11:03
एक्स कलर भाई साब इन्होंने अलगी लेवल पर दमाल मचा रखा है तो मैं आप लोगों को बैकग्राउंड थोड़ा बताते हू�
11:08
इस सॉलूशन का कि ये जो वैल्यू होती है जीरो से लेके यहां तक आप लोग अगर एक वैल्यू जनरेट करते हो और इसके बाद आ�
11:15
टू स्ट्रिंग मेथड का प्रियोग करके इसको hexadecimal में convert करते हो अगर आप लोग यहाँ पर अपना mouse लेकर जाओगे तो यहाँ पर आपको पता चलेगा कि जो two string method है उसमें आप एक argument दे सकते हो reddx जो कि अगर आप 16 देते हो तो hexadecimal में convert हो जाती है values और random color आप लोग generate कर स�
11:45
और ये अलग-अलग values से मिलकर बने हुए color से और इन color का code भी नो ने यहाँ पर show किया हुआ ह�
11:50
great ठीक है awesome अच्छा लगा solution ठीक है मज़ा आया अब अगले solution की तरफ देखूँग�
11:57
मैं Sean Raynick को shout out, William को shout out, Dev Ajwati को shout out, LearnCB को shout out
12:01
Coding वाला जादू को shout out और यह आ गया नवीन गुपता को भाई सिर्फ जावास्क्रिप्ट भी दे सकते थे बट कोई बात यार यह मैं खुश नहीं हूँ इस बात स�
12:08
जब मुझे बहुत ज़ादा कोड दिखता है ना I by default get angry तो नहीं unhappy ठीक ह�
12:16
क्योंकि यार देखो बहुत ज़्यादा code लिखने का कोई point है नहीं है या इतना ज़्याद�
12:20
लिखने की क्या जरूरती क्या कर रहे हो आप ये A1 कर रहे हो आप जीरो से लेक�
12:24
twenty तक number generate कर रहे हो और five state divide करके उसका remainder
12:28
ले रहे हो ठीक है अ नहीं या this is not a good solution मैंने देख लिय�
12:46
आए इनका सॉल्यूशन काम करना चाहिए और कर भी रहा है बस कुछ लिमिटेड कलर से जनरेट कर रहा है आई रिल�
12:51
अप्रेशिट यह सॉल्यूशन फर्स्ट ऑफ आल तो यह कि यार कुछ ना करने से तो बेहतर है लेकिन स्टिल आप देखो मेर�
13:12
आसिम अली ऑफिशियल इट्स मिहीर के सॉल्यूशन को भी देखेंगे हम ठीक है तो यहां पर इट्स मिहीर के सॉल्यूशन मे�
13:18
क्या हो रखा है वही हो रखा है जो रोहन ने किया है और यह मुझे लाइन बाय लाइन एक जैसा क्यों दिख रहा ह�
13:23
लुट बट हो सकता है दोनों के जो थोड़ से मैच कर रहे हूं कि एग्जाक्टली वैसे ही किया सॉल्व ग्रेट ठीक ह�
13:31
आउसम आई लव यो सॉल्यूशन सेम सॉल्यूशन है मैं इसको भी रन करके देख लेता हूं सॉल्यूशन को ठीक है औ�
13:39
मुझे काफी similar लग रहा है, Rohan के solution के, but, nice
13:43
ठीक है, बढ़िया यार, बढ़िया, आपने कर लिया है, तो यह इस तरह के unique questions पर लाता रहूँगा
13:48
और आपलों को मज़े देता रहूँगा, और यहाँ पर एक और यह है
13:52
अब, अब्दूष शमद खान अबू शाद खान ठीक है तो यहां पर इन्होंने क्या किया हुआ वन डू थी फॉर यह बिस्ट�
14:01
डी करके इन्होंने यह एक इन्होंने क्या किया है वह डिस्टेंड इस यार क्या किया है शायद मुझे समझ नही�
14:08
कर रहा है बट मैं इसको समझने की कोशिश करूंगा और आप लोगों को बताऊंगा क्या किया फर्स्ट लेट्स इए काम भी कर रह�
14:13
है कि नहीं कर रहा है जो कि यह काम ही नहीं कर रहा है तो क्या फायदा तो यह कुछ कुछ कलर से रेट कर रहा ह�
14:17
नहीं कर रहा है और यह से तीन बॉक्सेस में कर रहा है ऐसा क्यों ऐसा क्यों तो नेम नाम से इन्होंन�
14:23
फंक्शन बनाया है और यह वन से लेकर एफ तक इन्होंने जो लेटर्स है वह दिए हुए हैं और इन्होंने इन लेट�
14:29
एक रैंडम सा कलर बनाने की कोशिश किए और पता प्रॉब्लम क्या है प्रॉब्लम क्या है प्रॉब्लम यह है कि आपन�
14:38
यहां पर कुछ-कुछ बॉक्सेस को ही स्टाइल दिया हुआ ऐसा क्यों सब बॉक्सेस को क्यों नहीं मिला स्टाइल सब बॉक्सेस क�
14:44
इस टाइल क्यों नहीं मिला आपने आईएग्गल टो जीवर किया लेजन सिक्स किया और कलर इज इकल डिवर्न कलर एवं एजीर�
14:53
लिए नहीं लिया डॉट स्टाइल डॉट बैकग्राउंड कलर का सी स्मॉल कर दिया वाइज अब अपने कैपिटल करना था औ�
15:00
वन एट टू ए थ्री पर मेरे साथ से जो स्कूलर साफ रेंडम जनरेट कर रहे हो ना यह सब वैलेट कलर्स है ही नही�
15:07
जिसकी वजह से क्या हो रहा है कि आपके कलर्स वैलेट नहीं होने की वजह से यह सेट नहीं हो रहे देखो यह वाइ�
15:13
गया ठीक है तो यह नोट गुड़ सॉल्यूशन बट नाइस ट्राइड ठीक है पैसे ट्राइड कभी-ख़बी बन जा रहा है कलर ब�
15:20
हमेशा नहीं बन रहा है वह जिस फाइन आपको थोड़ा और समझने की जरूरत है आप थोड़ा और समझो आप यू विविडिय�
15:26
बिक शाट टू अबूश याद खान ठीक है फिर इसके बाद अनुजा को शाट को खुनाल को शाट टू मिश्चिवी को शा�
15:33
टू पोड़ विद रूप शाट हर चर्मा को शाट टू अभी राम सीएस को शाट टू कीरतन राथरोड को शाट टू प्रोफेस�
15:40
पर काथ को शॉट और अर्थिक को शॉट और डेवलपर को शॉट और यदि इसको जैको लक्षे को Android Kingdom को शॉ�
15:47
और वेब देव को शॉट और YouTube आई को शॉट और डेविल राज को शॉट और यहां पर यह कह रही है कि मिलियनेय�
15:53
पर एक मिलियन डॉलर देंगे भाई पहुंचा देना क्या यह क्या क्या आपने गलती तो नहीं करूंगा लेकिन पहुंचान�
15:59
पड़ेंगे बाइब ठीक है फिर इसी के साथ साथ यहां पर जुबार खान को शॉट और कोडी एंडर्सन को शॉट और रज�
16:05
रंजेज आफताप चैनल एक्सेप्टेड है भाई सॉल्व भी करना होता है भाई सॉल्व करना होता है कोडी एडएंसर क�
16:11
सॉल्लूशन देखते हैं एक एक अनलेज गाय है 50 लाख प्लस सबस्क्राइब यहां यह कैलकुलेशन मुझे काफी लो�
16:17
जो corporates हैं वो उन्हें लगता है कि मैं इस नहीं कर सकता हूं तो उन्हें मुझे से कहते हैं कि भाई अगर � connecting
16:22
का बेचा होता तो आपको इतने पैसे मिल जाते हैं और यह वह इनिशियल इनिशियल मैंने इसको पेट रखने का प्लान किया थ�
16:26
लोगों ने कहा कि अरब मैं वेब डेवलपमेंट आपसे नहीं सीख पाऊंगा यह वह तो कुछ लोगों को पढ़ाने से ज्याद�
16:33
से ज्यादा लोगों को पढ़ाओ तो यह मोटिव के साथ पर इसको फ्री रखा है हो कि मजा आ रहा है सबको और यह कोर्�
16:38
जो है सब लोगों ने एक्सेस किया अराउंड दो मिलियन के गरीब लोग जो है इसको आक्सेस करने वाले तो 20 ला�
16:44
लोगों ने ऑलरेडी जो है प्लेलिस्ट को एक्सेस कर लिया है तो सतर लाख ने कर लिया है वेडिसून आई होग�
16:50
लोग और access करेंगे जब ये complete हो जाएगा तब आपको इसकी और powers का बता चलेग�
16:54
कि यार course में है क्या क्या चीज़ें so I hope कि आप लोगों को मज़ा आ रहा है इस course मे�
16:57
अभी के लिए इस video में इतना है guys thank you so much guys for watching this video and I will see you next time
17:20
करते है�