Improving Dark Mode & Refactoring App Component _ Complete React Course in Hindi #12

0:02
So guys यहाँ पर मैंने इस application को start कर दिया है। NPM start run
0:05
करने के बाद आप देख सकते हो application कुछ ऐसी दिखती है और इस video में हम
0:09
लोग क्या करेंगे? इस application की सुंदरता को सुंदरता को से क्या
0:13
मतलब है? मैंने यहाँ पर enable dark mode का आह discussion किया था। मैंने
0:16
बात की थी आप लोगों से कि हम dark mode को enable कर सकते हैं। लेकिन बात पता है क्या हुई
0:20
थी वहां पर हमने about component में किया किया था और उसके बाद मजा भी नहीं
0:24
आया था सा part जो है वो dark हुआ तो आप लोग सोच रहे होंगे कि
0:27
यार मजा तो आ नहीं रहा है। तो यार इस video में वो मजा आने वाला है। चलो
0:31
देखते हैं वो मजा कैसे आएगा। मैं यहाँ पर क्या करूँगा मेरी बात को ध्यान से समझना
0:35
और सुनना देखो app dot JS जो है मैं चाहता हूँ कि मेरी
0:38
app dot JS से पूरी application की state को मैं manage करूँ। मैं इस बात को repeat
0:42
करता हूँ। मैं पूरी application की जो state है यानी कि मेरी ये react website की
0:46
जो state है मैं चाहता हूं कि app dot JS से मैं manage करूँ। इसका मतलब
0:49
ये होगा कि अगर मैं dark mode enable disable करना चाहता हूं तो मैं app dot JS के अंदर
0:53
वो सारे के सारे variables बनाऊंगा। अगर मैं कोई दूसरा भी काम करना चाहता हूं
0:56
तो मैं ज्यादा से ज्यादा control app dot JS में रखना चाहूंगा। तो इसके लिए मैं
1:00
क्या करूँगा कि जो मेरा अब dot JS था उसको अभी के
1:04
लिए तो मैं ऐसे ही रहने दूंगा और मैं यहाँ पर just ये check कर
1:08
रहा हूँ अपने reference के लिए की मैंने। यहां पर, status हाँ
1:15
ठीक है working tree clean। Actually मुझे आप लोगों को ये सारा का सारा code देना है
1:18
description में तो मुझे आह उस उस हिसाब से भी देखना है
1:22
चीजों को। तो यहां पर देखो मैंने style, my style यहां पर कुछ इस
1:25
तरह से दिया हुआ है तो मैं basically क्या करूंगा कि यहां
1:29
पर आऊंगा। मैं app dot G के अंदर आऊंगा और यहां पर एक नया state बनाऊंगा
1:33
तो मैं यहां पर use state लिखूंगा और मैं यहां पर क्या करूंगा
1:37
कि mode। dark mode लिखता हूं। dark mode से dark mode is
1:42
equal to false। मैं dark mode को by default false रखना चाहता
1:46
हूं और ये मेरा state variable है जो कि आह ये बताता
1:51
है कि dark mode enabled है कि नहीं है। whether dark mode is enabled
1:55
or not। ठीक है? ये मेरे application की state है जो कि
1:59
ये बताती है। तो dark mode enable है या नहीं ये मैं यहां से control कर सकता
2:03
हूँ। उसी के साथ-साथ मैं क्या कर सकता हूँ जो मेरा nav bar है उसको मैं mode pass
2:07
कर सकता हूँ। mode is equal to it can either be dark, it can either
2:10
be light। ठीक है? तो मैं dark mode जो है true या
2:14
false यहां पर मैं इसको भेज सकता हूँ। अब देखना मैं क्या करूँगा जो मेरा
2:18
nav bar component है। Navbar component इस prop को लेगा। किस prop
2:22
को mode is equal to dark mode को तो mode यहाँ पर यहाँ तो true होगा या false होगा। मैं
2:26
चाहता हूँ कि अगर dark mood मेरा true हो तभी मैं यहां पर
2:30
dark दिखाऊं वरना मैं यहां पर dark ना दिखाऊं। अब ये काम मैं कैसे करूँगा? ये
2:34
काम करने के लिए मैं ये पूरा का पूरा जो string है इसको java script से लिखूँगा। तो
2:38
मैं सबसे पहले यहाँ पर curly brackets लगा लूँगा जो कि specify करेगी कि मैं java script
2:41
का इस्तेमाल कर रहा हूँ। इसके बाद मैं क्या करूँगा यहाँ पर back tick लगाऊंगा
2:45
अब देखो back tick लगा रहा हूँ मैं। back ticks क्यों लगा रहा हूँ आप देखना back ticks मैं क्यों लगा
2:48
रहा हूँ ताकि ये पूरी की पूरी string के अंदर अंदर मैं template
2:53
literal का इस्तेमाल कर सकूँ। तो मैं यहां पर template literal का इस्तेमाल करना चाहता हूं
2:56
इसलिए मैंने कुछ इस तरह से लिखा है और मैं यहां पर dark
3:00
की जगह पर क्या लिखूंगा? मैं चाहता हूं मैं यहां पर लगाऊंगा एक dollar तो
3:04
मैं अगर कुछ इस तरह से लिखता हूँ dollar और ऐसे तो मैं यहां पर एक variable का इस्तेमाल कर
3:07
सकता हूं। तो आप देखो मैं यहां पर java script लिख सकता हूँ basically। तो मैं एक काम
3:11
करूँगा कि जो मेरा mode है या तो वो dark होगा या
3:15
फिर वो light होगा। तो मैं एक काम करता हूं इसको dark या light कर देता हूं
3:19
अभी के लिए मैं इसको light कर देता हूं। ठीक है? तो मैंने यहां पर nav
3:23
bar dark किया हुआ था but मैं यहां पर इसको nav bar light कर दूंगा। तो मैं इसको
3:26
यहां पर लिखूंगा props dot dark mode या फिर props dot mode
3:31
कर देता हूं but मैं फिर इसको dark mode भी नहीं करूंगा। मैं इसको mode ही
3:34
पुकारूंगा। तो मैंने यहां पर सा change कर दिया है। मैं set mode
3:38
कर रहा हूं। तो mode can either be dark mode or light mode ठीक है? तो
3:41
मैं यहां पर mode is equal to mode कर दूंगा। ठीक है? तो यहां पर मैंने
3:45
mode is equal to mode करा, mode मेरा यहां पर आया और मैं यही यहां
3:49
पर इस तरह से करूंगा। तो अगर मैं अब यहां पर mode
3:52
is equal to आह यहां पर light करता हूं। अगर मैं यहां पर light set
3:56
करता हूं। तो क्या होगा कि light mode दिखेगा। ये कह रहा
4:00
है use state is not defined मुझे import करना react से। तो
4:04
मैं यहां पर लिखूंगा IMRS और enter मार दूंगा तो import हो
4:07
जाएगा react और use state from react। ठीक है? तो मैं कुछ इस तरह से करूँगा और मेरी
4:11
application अब compile हो जानी चाहिए। तो ये देखो यहाँ पर अभी light mode आ रहा है। light mode क्यों
4:14
आ रहा है? क्योंकि मैंने mode is equal to light किया है। अगर मैं mode is equal to dark कर दूंगा
4:18
यहां पर तो ये देखो ये dark mode आ गया तो ये dark यहां पर देखने को मुझे मिल गया। अब
4:22
मैं कह जाता हूं कि यह light है या dark है। यह मैं control
4:25
कर सकूं यहां पर एक switch से। तो मैं जाऊंगा get bootstep dot com पर और वहां
4:29
से लेकर आऊंगा एक switch को। तो मैं docs में जाऊँगा, components
4:33
में जाऊँगा infact form में जाऊँगा। पुरानी bootstrap की website में components
4:37
के अंदर form होता था लेकिन अभी यहाँ पर आप लोग देखो आह मैं control
4:41
F switch करूँगा। मुझे switch चाहिए switch switch चाहिए switch नहीं मिल
4:44
रहा है मुझे। Sct और मैं नीचे scroll करता हूँ। शायद मुझे
4:48
यहाँ कहीं मिले switch checks and radio में मिले शायद switch control
4:52
F। हाँ मिल गया switch मुझे। ये है switches तो मुझे एक switch चाहिए
4:55
ठीक है? अब देखो switch किस तरह से काम करता है। मैं
4:59
यहाँ पर default switch check box input देखो check switch ah check
5:03
box input। तो basically मैं इन दोनों में से कोई सा भी ले लूंगा। मैं ये पहला वाला ले लेता हूं। ठीक है? तो
5:07
मैं क्या करूंगा कि इसको लेकर आऊंगा यहां पर और इसको nav
5:11
bar के अंदर दे दूंगा। कहां पर दूंगा मैं nav bar के अंदर जहाँ पर मैं मेरा
5:14
form था पहले। तो मैं यहां पर इसको डाल दूंगा और आप लोग देखो
5:18
यहां पर जो input है वो मुझे दिक्कत दे रहा है दिक्कत क्यों दे रहा है
5:22
ये basically मुझसे ये कह रहा है कि भाई साहब input को आपने
5:25
close तो किया नहीं तो इस तरह से कृपया करके close कर दें तो ये कह रहा है मेरे
5:29
से। मैं यहां पर लिख दूंगा dark mode, dark mode। enable dark
5:34
mode। और देखता हूं यहां पर कि ये किस तरह surrender हुआ
5:40
हुआ भी ठीक surrender कि नहीं हुआ। हाँ यार सही surrender हुआ लेकिन ये जो enable
5:43
dark mode है यहां पर दिख नहीं रहा है मेरे को। तो ये एक दिक्कत आ गई है यहां पर। ठीक है? तो मुझे
5:47
क्या करना ये जो enable dark mode है। किसी तरह से इसके colour को change
5:50
करना और मैं इसको यहां पर text light नाम की class दूंगा जो कि bootstrap
5:54
में किसी भी text को white करने के लिए use की जाती
5:58
है। तो ये enable dark mode कुछ इस तरह से मैं कर सकता हूँ। तो मैंने
6:02
enable dark mode किया तो dark mode enable हो जाना चाहिए। तो मैं एक काम करूंगा यहां पर एक function
6:05
बनाऊंगा और मैं इस function का नाम लिखूँगा enable dark mode एक
6:10
Prop भेजूंगा और enable dark mode नाम का एक आह या toggle
6:15
mode नाम का एक function भेजूंगा। toggle mode is equal to toggle mode
6:18
और toggle mode क्या होगा? Toggle mode एक function होगा जो कि na bar में जा
6:22
रहा है लेकिन ये function actual में कहां पर होगा? ये function actual
6:26
में यहां पर होगा। तो मैं यहां पर लिखूंगा toggle mode is equal
6:29
to एक arrow function तो मैं यहां पर एक Cat arrow function syntax
6:33
का इस्तेमाल करूंगा, लिखूंगा cons toggle mode और toggle mode जब मैं
6:37
करूंगा तब मैं basically क्या करूंगा set mode को change कर दूंगा। Set
6:41
mode is equal to dark कर दूंगा अगर mode मेरा light है
6:44
तो मैं लिखूंगा if mode is model नहीं mode is triple equal
6:49
to light change it to dark, else do what else change it
6:53
to Light ठीक है तो मैं यहां पर else लिखूँगा और change कर दूंगा
6:57
इसको to light। तो मैं यहां पर else लिखूँगा और इसको change
7:01
कर दूंगा to light। तो basically मैं toggle कर रहा हूँ mode को कि
7:04
यार अगर dark है तो light हो जाए light है तो dark हो जाए। ठीक है? तो toggle mode damp
7:08
का function है। अब यह toggle mode function जो है यह कब run
7:12
होगा? ये तब run होगा जब कोई भी इंसान इस वाले switch
7:16
पर click करेगा। तो मैं एक काम करूँगा यहाँ पर on click लगा दूंगा। एक मैं कहूँगा
7:20
on click। is equal to और मैं लिख दूंगा props dot toggle
7:24
mode। ठीक है? तो कोई भी इंसान इस पर click करेगा इस वाले switch पर और
7:28
मैं एक यहां पर और करना चाहूंगा यार कि जो class is equal to है
7:32
उसको class name is equal to से replace करूंगा। तो मैं यहाँ
7:37
पर replace solve कर देता हूँ। तीन ही हमारे पास theme classes। तो मैं इसको
7:40
save करूँगा और hope करूँगा कोई error नहीं है। मैं इसको inspect
7:44
करता हूँ और यहाँ पर मैंने कहीं ना कहीं use कर दिया
7:48
है। शायद अबG के अंदर। Reload करता हूँ इसको reload करता हूँ
7:52
ah for okay तो for की जगह HTML four आएगा। ah HTML
7:57
four आएगा। और कहीं पर for है क्या नहीं और कहीं पर
8:02
for नहीं है so this should fix the issue। अब यहाँ पर
8:05
ये कह रहा है set mode is assigned a value but never use set mode is constant
8:09
set mode is constant। तो यार मैंने यहाँ पर basically गलती करी है। मैंने set
8:13
mode को ठीक करना है। मैं set mode एक function है उसको इस तरह से call करूँगा mode
8:17
set करने के लिए नाकि मैं कुछ ऐसे set mode is equal to करूँगा और
8:21
I hope I hope कि ये बात सबको clear हो गई कि mode is equal to करके मैं directly mode को set
8:24
नहीं कर सकता क्योंकि ये एक state है। तो state variable को
8:28
आप directly ऐसे mode is equal to this करके नहीं कर सकते। आपको set
8:32
mode function का इस्तेमाल करना I hope अब सारे के सारे errors जा चुके होंगे
8:35
मैं reload करता हूं। हाँ यार अब सारे errors जा चुके हैं। तो अब
8:39
अगर यहां पर मैं इसपे click करूंगा। तो basically यहां पर देखो
8:43
यह देखो enable dark mode उल्टा हो रहा है but will fix it will fix
8:47
it। ठीक है? तो मैं क्या करता हूं by default आह यहां पर इसको light
8:50
कर देता हूं। ठीक है? मैं इसको by default light कर देता हूं और इस पर कोई भी click
8:54
करेगा अगर इस पर कोई भी click करेगा तो dark mode enable हो जाएगा इस पर ऐसे करेगा
8:57
तो light mode enable हो जाएगा। but हां एक और मुझे यहां पर आह आह
9:01
एक और मुझे यहाँ पर करनी है कि यार अगर mode light है तो
9:05
मुझे यहाँ पर इसको आह जो मैंने text light class रखी है
9:09
अपने के अंदर कहाँ रखी थी यहाँ पर रखी थी text light class मैंने। मैं
9:13
text light नहीं रखूँगा class मैं ये ये जो class रहेगी वह depend
9:17
करेगी mode पर। तो मैं एक काम करूँगा कि यहाँ पर इसको
9:21
एक java script बनाता हूँ सबसे पहले एक template litle बनाता हूँ तो मैं अब java script लिख
9:24
रहा हूँ basically। अब मैं यहां पर back tick लगाता हूँ ताकि ये template
9:28
string बन जाए एक template litle बन जाए तो curly brace के अंदर जो भी है java
9:32
script है ये पूरी मैं java script लिख रहा हूँ। अब light की जगह पर मैं क्या करूँगा
9:35
dollar लगाऊंगा और लिख दूंगा props dot mode। ठीक है? Props dot
9:39
mode। And that should fix यार क्योंकि जब mode dark होगा तो
9:44
text dark हो जाएगा यह जब mode light होगा तो text light हो जाएगा यह ठीक है? तो
9:48
मैं भी देखता हूं कि यार fix हुआ कि नहीं हुआ। आह नहीं हुआ
9:51
fix तो मुझे basically क्या करना था उल्टा करना था। आह मुझे
9:55
यहाँ पर basically कुछ ऐसा करना था कि props dot mode अगर
9:59
light है। तो dark वरना light। तो मैं क्या करूंगा यहां पर
10:03
एक conditional expression का इस्तेमाल करूंगा। तो मैं यहां पर लिखूंगा if prop dot
10:07
mode is equal to light then this value will be equal to
10:12
dark। ठीक है? तो मैं यहां पर turnery operator का use कर रहा हूं। वरना
10:16
क्या होगा वरना light। ठीक है? तो मैंने कुछ इस तरह से
10:21
turner या operator का प्रयोग कर लिया और अब देखो अब सही हो गया ये। अब
10:25
अगर आप में से कई लोग ये सोच रहे हो कि यार ये क्या कर दिया इतनी खतरनाक java
10:28
script कैसे लिख सकते हो आप। देखो यार मैं बताता हूँ क्या किया मैंने
10:33
सबसे पहले देखो इसको divide and conquer करो मतलब में और समझो। सबसे
10:36
पहले तो curly brace लगा लिया अभी लिखनी थी मुझे java script। अब मैंने
10:40
लगा लिया यहाँ पर एक template literal तो ये ये पूरी की पूरी एक string बन गई जो भी
10:43
ये bactics के अंदर है। ठीक है? ये पूरी एक string बन गई। अब जब मैं backtick
10:47
use करता हूँ java script में तो मैं dollar लगा के कोई भी variable use कर सकता हूँ। dollar और curly
10:51
brace लगाकर। तो ये पूरा का पूरा एक variable है और इस variable के अंदर एक
10:55
turnery operator है जो ये कह रहा है कि अगर prop का mode light है तो dark हो जाए
10:58
dark है तो light हो जाए। That's about it। बस इतना है इतना ही
11:02
simple है। अगर आपको दिक्कत हो रही है इसका मतलब आपकी java script सी
11:05
weak है। but worry not। I hope कि मैंने आपको explain कर दी
11:09
ये ठीक है? तो हम अभी enable dark mode करके कम से
11:13
कम आह जो nav bar है उसके dark mode को enable कर पा रहे हैं। लेकिन
11:16
खुशी की बात यह भी है कि जो हमारा ये state variable है
11:20
dark mode वाला वो actual में कहाँ पर है? वो actual में
11:23
यहां पर है देखो app dot JS के अंदर और ये toggle mode भी app dot JS
11:27
के अंदर है। तो मैं आराम से यहां पर document dot body
11:31
dot style dot background colour is equal to black कर सकता हूँ
11:37
कुछ इस तरह से कर सकता हूँ और and vice versa मैं
11:40
यहां पर इसको white कर दूंगा। और ये करने के बाद अब
11:46
अगर मैं enable करूँगा dark mode को मैं जरा reload कर लेता हूँ और ये कह रहा है cannot
11:50
set background colour of undefined। ये कैसा मजाक है? Okay तो मुझे
11:56
यहां पर small S use करना है। Capital S use नहीं करना है और
12:00
body dot style dot background colour हाँ ठीक है। अभी मैं इसको reload करूँगा
12:04
enable dark mode करूँगा। हाँ मुझे पता है बहुत बुरा लग रहा है but again ठीक
12:08
करेंगे इसको ठीक करेंगे ठीक करेंगे। ठीक है? सबसे पहले तो मैं ये वाला colour उठा लूँगा
12:11
क्योंकि ये black नहीं है। ठीक है? मैं चाहता हूँ सी uniformity बनी रहे। तो
12:15
जो dark वाला colour है कहाँ गया मेरा dark वाला colour nav
12:19
bar का background। Nav bar का background चाहिए मेरे को dark यह
12:24
है। ये वाला colour है। ठीक है? BS cre dark if I
12:28
am not wrong। तो इस colour को मैं copy करूंगा और copy करने
12:32
के बाद क्या करूंगा? ये black की जगह यहां पर लगा दूंगा। अब सी uniformity
12:36
दिख रही है देखो। नहीं यार अभी भी नहीं दिखी uniformity मुझे अगर मैं dark
12:39
mode को enable करूँ तो नहीं अब दिख गई ठीक है अभी दिख गई। अभी सब कुछ ठीक है। ठीक है? तो
12:43
मैं dark mode को enable कर रहा हूं तो देखो इस तरह से हो जा रहा है। Dark mode enable but एक और
12:47
है जब मैं dark mode को enable कर रहा हूं ना तो मुझे सा difference चाहिए
12:51
मेरा जो ये body का background है उसमें। मैं इसको same नहीं रख सकता हूं। मैं बताता
12:54
हूं क्यों मैंने ऐसा बोला। तो मैं इसको grey रखूंगा। ठीक है मैं इसको
12:58
जैसे grey करूंगा reload करूंगा, enable करूंगा। हाँ ये है ये अच्छा
13:01
dark mode है क्योंकि मैं चाहता हूं ये एक distinction रहे मेरे nap बारे में और मेरी body में। ठीक
13:05
है? और उसी के साथ साथ मैं इसको white रखना चाहता हूँ, इसका colour white रखना
13:09
चाहता हूँ। इसका white रखना चाहता हूँ जब जब dark mode enable रहे और इसके
13:13
अंदर का colour भी white रखना चाहता हूँ तो देखना वो मैं कैसे करूँगा। ठीक है? तो
13:16
मुझे क्या करना चाहिए मुझे ये terminary operator को वापस से use करना चाहिए
13:20
तो basically ये जो terminy operator है ये क्या कर रहा है? यह java script जो लिखी
13:23
हुई है ये basically evaluate हो रही है। अगर mode जो है हमारा
13:27
वो light है तो dark में evaluate हो रही है dark है तो light में evaluate हो रही है। ठीक है? तो
13:31
मुझे क्या करना है वही चाहिए मुझे colour को वही set करना है। तो कुल मिलाकर
13:35
मैं क्या करूँगा text form के अंदर भी मैं mode दूंगा। मैं
13:39
text form को भी दूंगा कि भाई mode ये है। text form को भी बताऊंगा कि भाई मेरा mode
13:43
क्या है? ठीक है? अब text form के पास यहाँ पर अपने
13:48
पास अपने ऊपर style set करने का पूरा मौका है। ठीक है? तो मुझे क्या करना है basically
13:51
मुझे एक तो सबसे पहले ये जो H one है मेरे। इनके इनके अंदर क्या
13:55
करना है मुझे इनका colour को white करना है। ठीक है? Colour को white करना है। और
13:59
उसी के साथ-साथ मुझे क्या करना है इसके colour को dark करना है। तो मैं क्या करूंगा
14:03
यहां पर इसका जो background है उसको आह dark कर दूंगा। ठीक
14:07
है? तो मैं grey कर दूंगा इसके background को। ठीक है? कुछ इस तरह
14:11
से तो वो भी मैं आपको दिखा देता हूं और colour white करूंगा। ठीक है? Colour
14:16
white ठीक है? अब देखना ये काम मैं कैसे करूंगा? मैं यहां पर
14:19
इसका जो style है मैं लिखूंगा style is equal to style is
14:23
equal to सबसे पहले एक curly brace मैंने java script का लगाया यानि की अब इसके अंदर
14:27
मैं java script लिख सकता हूं। मैं इसके अंदर अब एक object डाल रहा हूँ तो इसलिए double curly
14:30
brace लगेगा। समझ रहे हो ये समझे सब लोग देखो एक curly brace तो मैंने लगाया है
14:34
java script लिखने का क्योंकि मैं java script लिखना चाहता हूँ। और दूसरा curly brace एक
14:38
object लिख रहा हूँ अब मैं java script में भी object लिख रहा हूँ एक ठीक है? तो एक दूसरा curly brace
14:41
लगाया। अब मैं यहाँ पर क्या करूँगा? मैं लिखूंगा यहाँ पर background
14:46
colour जो है वो क्या हो जाए? Background colour कुछ ये हो
14:50
जाए क्या हो जाए ये हो जाए। आह नहीं ये नहीं हो actually
14:53
मैं इसको copy करके लाना चाहता था। हाँ ये हो जाए। अब देखो ये क्या
14:57
हो रहा है? अगर props dot mode जो है मैं यहां पर जरा props को ले
15:00
लेता हूँ। Props मैंने लिए नहीं है लगता है आप नहीं लिए हैं। ठीक है? तो props
15:04
dot mode जो है वो अगर मेरा light है तब dark हो
15:08
जाए तब infact grey हो जाए वरना क्या हो जाए वरना white
15:13
हो जाए। Simple है। ठीक है? अब यहाँ पर क्या दिक्कत आ रही है ये कह रहा है
15:17
ah property props। तो मुझे ये curly brace यहाँ से हटाना यह curly
15:20
brace नहीं चाहिए। ठीक है? ये वाला curly brace नहीं चाहिए बस यहाँ पर double curly brace के अंदर लिखना है
15:24
सब कुछ। I hope that we are good। जरा देखते हैं काम
15:28
भी कर रहा है कि नहीं कर रहा है। enable dark mode किया तो यह white हो गया उल्टा
15:31
कर दिया। मैंने भाई उल्टा कर दिया। तो मुझे क्या करना है कि इसको
15:35
white करना है। अगर light mode है। Infact मैं एक काम करता
15:39
हूँ। dark mode है अगर तब grey कर दो इसका colour वरना ऐसे ही रहने दो। तो
15:42
dark mode होगा तो इसका colour grey हो जाएगा पूरे का और
15:46
उसी के साथ साथ क्या होगा कि जो हमारा आह यह text
15:51
है इसको मैं white करना चाहता हूं। तो मैं इन सब में style डालूँगा और style में डाल
15:55
दूंगा colour white। ठीक है? तो मैं दिखाता हूं आप लोगों को तो मैं यही style copy
15:58
करूँगा और ये मैं लगाऊंगा ये वाली heading में सबसे पहले। ठीक है? Infact
16:02
मैं parent container में लगाऊंगा। parent container में ही लगा देता हूँ। और मैं
16:05
यहां पर लिखूंगा colour। अगर prstot mode dark है तो white कर
16:11
दो वरना क्या कर दो वरना black कर दो। जो था वह कर दो। ठीक
16:15
है? तो यहां पर आप लोग देखो कि इस container के अंदर
16:20
तो सारे changes आ गए but इस वाले container के अंदर नहीं आए। ठीक है? तो हाँ
16:23
हम एक काम कर सकते हैं। हम यहां पर या तो इस
16:28
style को copy करके नीचे paste कर सकते हैं या parent container के अंदर ही सब कुछ डाल
16:31
सकते हैं। तो कुछ भी कर सकते हो आप। मैं भी यहां पर क्या करता हूं कि इसी style
16:35
को copy कर देता हूं नीचे भी तो सब कुछ नीचे भी white हो गया ठीक है? और यहां पर देखो मैं
16:38
लिख पा रहा हूँ। हाँ इसका colour भी white करना है text area का तो text area के अंदर भी मैं colour
16:42
white करना चाहता हूं। तो background colour को मैंने ये कर दिया और comma लगाकर
16:46
मैं क्या करूंगा? Colour को क्या करूँगा? Colour को मैं ये करूँगा
16:50
Ps dot mode अगर dark है तो white वरना black। तो दिखाता हूँ आप
16:54
लोगों को। हाँ मुझे पता है सी complex java script मैंने लिखी
16:57
है यहाँ पर और मैंने कुछ turnery operators ऐसे डाले हैं जो कि यार
17:01
शायद लोगों को समझने में time लगे तो यार आप अपना time लेना रोक रोक के देखना
17:05
इसको क्या किया है, कौन-सी किसमें evaluate हो रही है। एक curly brace
17:08
मैंने जो लगाया है वह java script का लगाया है और दूसरा curly brace java
17:12
script में भी मैंने object लिखा है तो object में जो curly brace लगता है java script में
17:16
एक curly brace उसका लगा हुआ है। तो अभी जो मैं select कर रहा हूँ वो पूरा
17:19
एक object है। ठीक है? आप सोचो इस बात को। ये पूरा एक object है
17:23
और बाहर जो curly brace लगाया है वह तो मुझे लगाना ही है जब भी मैं कोई java script लिखता हूँ for
17:27
example मैंने props dot about text लिखा। तो एक curly brace लगाना है ये बताने
17:30
के लिए react हो कि मैं java script लिख रहा हूं। ठीक है? तो अभी देखते हैं कि app
17:34
भी काम कर रही है कि नहीं कर रही है। तो मैं reload करूँगा इसको तो light mode में तो बहुत से ही काम कर
17:37
रही है। ठीक है? dark mode में देखते हैं dark mode अगर मैंने enable किया तो
17:41
यहां पर देखो। ये भी काम कर रहा है इसका colour भी white हो गया। ठीक है? अब
17:45
ये देखते हैं कि यार functions भी काम कर रहे हैं या नहीं कर रहे हैं या फिर ऐसे ही
17:49
convert to upper case, yes works, convert to lower case, yes works। Copy
17:52
text क्या copy भी हुआ text हाँ copy हुआ text। Remove extra
17:56
spaces देखते हैं ये काम कर रहा है कि नहीं कर रहा है बहुत सारी space दे देता हूं यहां पर
18:00
और बहुत सारी space दे देता हूं यहां पर ठीक है। यहां पर
18:03
भी दे दी मैंने बहुत सारी space और मैं यहां पर क्या करूँगा remove
18:07
extra space कर दूंगा। हाँ ये भी काम कर रहा है। ये भी काम कर रहा
18:10
है। ठीक है? तो I hope कि समझ गए आप लोग किस तरह से ये चीजें काम करती
18:14
हैं। ठीक है? तो यार app shap हो गई। ये हमारी बस एक करना
18:18
चाहता हूं यहां पर ये ना अच्छा नहीं लग रहा है। आह यहाँ पर मैं चाहता हूँ
18:22
enter your text to preview it here ऐसे कुछ लिखना चाहता हूँ। ठीक है? तो मैं
18:25
क्या करूँगा की जो मेरा text form component है मैं यहां पर लिखूंगा
18:29
की अगर text मेरा empty है अगर मेरा text empty है। सबसे
18:33
पहले तो अगर मेरा text है तो ये आ जाए लेकिन अगर मेरा text कुछ है ही नहीं यानी कि
18:36
empty है। तब मैं क्या करूँगा? मैं यहां पर लिखूँगा if text is equal
18:40
to empty तो मैं यहां पर लिखूंगा text अगर empty है triple
18:45
equal या फिर text dot length जो है। आह वह greater than
18:49
zero है तब मैं क्या करूंगा तब मैं text को लिख दूंगा यहां पर वरना मैं
18:52
क्या लिखूंगा colon लगाकर मैं लिखूंगा आह your enter। Something to preview
19:01
it here। कुछ इस तरह से। तो यहां पर देखो enter something ah
19:06
in the text box above enter something in the text box above
19:11
to preview it here। ठीक है? तो मैंने कुछ इस तरह से लिखा कि भाई कुछ
19:14
लिखो ऊपर तो जैसे ही बंदा लिखना शुरू करेगा यहां पर preview होना शुरू हो जाएगा। ठीक है
19:19
यार और enable dark mode भी बना दिया और अब मत कहना कि
19:22
ये अच्छा नहीं लग रहा है क्योंकि ये बहुत धमाकेदार लग रहा है अब और इतना धमाकेदार लग
19:26
रहा है कि इससे प्यार हो जाएगा आप लोगों को और अगर इस इसको
19:30
dark करना चाहते हो आप लोग अगर इस को dark करना चाहते हो जो मेरा
19:33
body है आह इस grey को सा dark करना चाहते हो उससे
19:37
आप इसको bluish की तरफ लेकर जाना चाहते हो क्योंकि मुझे मालूम है कि
19:41
हमारी application already bluish ah te- texture में है तो अगर आप
19:45
इसको कुछ ऐसा करना चाहते हो तो ऐसा कर सकते हो। ठीक है? तो इस colour को copy
19:48
करके आप black जहाँ लिखा है ये colour डाल दो। तो वही करना
19:52
है आपको। तो ये black जहाँ जहाँ है। Black कहाँ कहां है
19:58
यहां पर है एक तो black और एक यहां पर है black आप ये कर सकते हो। और
20:01
उसी के साथ- साथ app dot JS में भी यही कर दो। App dot JS में तो law
20:05
है ही नहीं black na bar में जरूर होगा कहीं ना कहीं नहीं nap bar में भी नहीं है। ठीक है? तो
20:09
मेरे हिसाब से काम हो गया आपका reload करो। dark mode जैसे ही
20:12
enable करोगे। आह क्या मैंने save नहीं किया? क्या मैंने save नहीं
20:16
किया? मैंने save तो किया यार। ah black को मैंने किससे replace
20:20
कर दिया? Black को मैंने text form में black। ah If mode
20:27
is dark तो white वरना text colour ये black। तो यार ये
20:32
काम इसलिए नहीं कर रहा है क्योंकि यहाँ पर मैंने colour जो है आह
20:36
वो जो grey है वो मैंने रखा हुआ है यहाँ पर। ये
20:39
मैंने गलती करी थी अभी। तो अब सही हो जाएगा मैं reload करता हूँ देखो मैं
20:43
enable करूँगा जैसे ही dark mode को वाह भाई वाह यार ये लग रहा है
20:46
dark mode यार this is the dark mode of future। ये लग
20:50
रहा है dark mood of future। अब मजा आ रहा है application में अब कोई भी dark
20:54
mood enable करेगा तब वो बोलेगा की किसी heavy coder ने application बनाई है
20:59
वाह बेटे वाह हुआ तताप अरे तमत heavy driver है भाई। So
21:04
yeah that's all अगर आपको na bar के colour को भी change करना है तो वो भी कर
21:07
सकते हो और यार ये application तो बहुत ही मजेदार हो गई है इसको deploy भी किया
21:11
जा सकता है अब और light mode को enable भी कर लो dark mode
21:14
को enable भी कर लो जैसे मन चाहे कर लो यार। और और क्या चाहिए
21:18
जिंदगी से किसी और को कुछ और चाहिए तो comment में लिखे वो भी भिजवा दूंगा। ठीक है
21:22
और clear text भी काम कर रहा है। मतलब सब कुछ काम कर रहा है
21:25
यार अब क्या चाहिए जिंदगी से कुछ भी नहीं चाहिए जिंदगी से जिंदगी जो है सफल
21:29
हो चुकी है। ठीक है? बस अब playlist को और access कर लो जल्दी से और सफल
21:33
हो जाएगी जिंदगी save play list पर click करें यहाँ click करके bookmark करें। अभी
21:37
के लिए इस video में इतना ही guys। Thank you so much guys for watching this video and
21:41
I will see you next time।

Improving Dark Mode & Refactoring App Component _ Complete React Course in Hindi #12

codehunter.online

How to become a Blockchain Developer in 2022_ _ 🔥 Complete Roadmap + Salary + Tech Stack

How to make the Best Time Table_ _ Time Management for Students

Government or Private _ What job to do_

Dynamic Sandbox MMO Fractured Online Fully Releasing Today #Gaming #MMORPG #FracturedMMO

How to Record Screen on REALME 12+?

How to Enable & Toggle Full Screen Mode While Coding in Visual Studio Code Full Tutorial

Revolve Feature in FreeCAD | FreeCAD Beginner Tutorial | Mechnexus |

The Language of Meetings: Promotional Video

Tackle 10 Types of Hard PMP Exam Questions with Confidence [UPDATED]

FreeCAD Part Modeling Tutorial 83 | FreeCAD Tutorial | Mechnexus |

FreeCAD Part Modeling Tutorial 80 | FreeCAD Tutorial | Mechnexus |

ProsourceFit Multi-Grip Chin-Up and Pull-Up Review

Up next in 10

Improving Dark Mode & Refactoring App Component _ Complete React Course in Hindi #12

codehunter.online