Creating "Enable Dark Mode" Button Using useState Hook | Complete React Course in Hindi #10

แชร์
ฝัง
  • เผยแพร่เมื่อ 27 ธ.ค. 2024

ความคิดเห็น • 590

  • @CodeWithHarry
    @CodeWithHarry  3 ปีที่แล้ว +109

    Here is the react Playlist: th-cam.com/play/PLu0W_9lII9agx66oZnT6IyhcMIbUMNMdt.html
    Access kar lena :)

    • @mayanktripathi3273
      @mayanktripathi3273 3 ปีที่แล้ว +1

      harry bhai mere code me koi error nahi aa rhi fir bhi colour change nh ho rha please ye wala code de do

    • @prashantchouhan6394
      @prashantchouhan6394 3 ปีที่แล้ว

      pls sir remove beeb sound from next video

    • @utkarshsharma1185
      @utkarshsharma1185 3 ปีที่แล้ว +1

      Already done and one question about how many hours you do coding on daily basis

    • @abhinavgoyal7410
      @abhinavgoyal7410 3 ปีที่แล้ว +1

      @@mayanktripathi3273 same problem with me also. koi error nhi hai phir bhi color change nhi ho raha

    • @mulanikeyur6029
      @mulanikeyur6029 3 ปีที่แล้ว

      error a raha he

  • @suryaprakashchaudhary2685
    @suryaprakashchaudhary2685 3 ปีที่แล้ว +146

    Best react course I have ever seen because I tried an udemy course of react js too but can't get content like that. Truly premium content in free of cost by Harry Bhai

  • @Shourya_2007
    @Shourya_2007 3 ปีที่แล้ว +83

    First video of ReactJS :- 70K Views
    This Video :- 2K views
    Only Some People Stay Consistent Throughout The Series and..
    CONGRATULATIONS YOU ARE ONE OF THEM.....!!!

    • @2024comingforyou
      @2024comingforyou 3 ปีที่แล้ว +6

      First video was aired 4 days back , this video was aired 1 hr ago.

    • @Shourya_2007
      @Shourya_2007 3 ปีที่แล้ว +2

      @@2024comingforyou But sir you can look into his old videos of this playlist.
      The first one has huge audience response and with time the uploads have started getting less views

    • @himanshushukla6451
      @himanshushukla6451 3 ปีที่แล้ว

      that's true bro

    • @XengShi
      @XengShi 2 ปีที่แล้ว

      @@Shourya_2007 Right

    • @Shourya_2007
      @Shourya_2007 2 ปีที่แล้ว

      @@XengShi Can u tell me how u get no name?

  • @Surajsharma06
    @Surajsharma06 3 ปีที่แล้ว +30

    0:52 was Insane 😂🤣

  • @JinalKShah
    @JinalKShah ปีที่แล้ว +11

    Beginner in React. Enjoying the course, it is so addictive. Thank you very much. I learned HTML and CSS with your videos .

  • @intekhabalam2124
    @intekhabalam2124 2 ปีที่แล้ว +44

    Alternative of dark and light mode is :
    let dark={
    color:"white",
    backgroundColor:"black",
    border:"1px solid white"
    }
    let light={
    color:"black",
    backgroundColor:"white",


    }
    const [myStyle, setStyle] = useState(
    {
    color:"black",
    backgroundColor:"white",

    }
    );
    let toggleHandledark =()=>{
    setStyle(dark);
    }
    let toggleHandlelight=()=>{
    setStyle(light);
    }
    harry bhai Op!

    • @prashantpal3589
      @prashantpal3589 2 ปีที่แล้ว +10

      but for this, you have to make 2 buttons

    • @rabean50
      @rabean50 ปีที่แล้ว +2

      @@prashantpal3589 yeah!
      Time and space complexity!!

    • @aneelaarshad247
      @aneelaarshad247 ปีที่แล้ว

      Well 👍

    • @Tussu17
      @Tussu17 ปีที่แล้ว

      Bruh, the number of lines of code (LOC) is not directly proportional to time and space complexity. 💀

  • @bushrasayed2595
    @bushrasayed2595 2 ปีที่แล้ว +1

    Harry bhai I am a big fan of yours I did masters in arts history and now learning to code with yours videos I have watched all ur html CSS and java script playlist and now learning react from this I have started learning in first week may from different channel there i have completed full html and css and I remembered when I was scrolling in youtube that time I saw ur playlist and started from starting.
    Harry bhai you have helped me alot.
    thankyou Brother :)

  • @shi-nee7966
    @shi-nee7966 3 ปีที่แล้ว +6

    For the algorithem. Altho i bought a course on udemy before this course started but i know harry bhai's the best. So im liking and commenting on every video for the algo.

  • @shankargairy6979
    @shankargairy6979 2 ปีที่แล้ว +1

    bhai kaha the yr tum ab tak... I mean itna motivation kabhi aya he nh React learn krne k ly jitna tumhari video ko dekh kr aa rh h.. Thanks Harry bhai...

  • @showrin20
    @showrin20 ปีที่แล้ว +8

    Best thing about harry vai is he makes the video on spot so he makes the silly mistakes that we also do.. Which makes us feel that It's normal to have mistakes ❤

    • @cs_111_amansingh6
      @cs_111_amansingh6 ปีที่แล้ว

      Mere me accordance nhi kaam kr rha h if any one know reply back

    • @RahulSharma-we1bo
      @RahulSharma-we1bo 9 หลายเดือนก่อน

      @@cs_111_amansingh6 same here bro

    • @HamzaSajid123
      @HamzaSajid123 4 หลายเดือนก่อน

      @@cs_111_amansingh6 bootstrap sy hi kaam nahi kar raha sahi

  • @JAVAxNANI
    @JAVAxNANI 3 ปีที่แล้ว +10

    Get this man a medal 🏅🏅🏅!

  • @sakshamjoshi1118
    @sakshamjoshi1118 3 ปีที่แล้ว +15

    Thank you so much Harry for this React Course ❤️

  • @InfoWebme
    @InfoWebme 3 ปีที่แล้ว +9

    Thanks a lot for these React tutorials. The toggle button gave me the idea to make a single button for uppercase and lowercase text and changes the button className as well using useState.

  • @rahulchilap6420
    @rahulchilap6420 2 ปีที่แล้ว +5

    @CodeWithHarry...I have switched my career into web development last year.I have been following you since 9 months and 3 days prior I started this course. After 10th lecture I feel confident in react and I know that am gonna crack interview of react after watching this video. I am soo happy because i need to watch your video only once and sab dimag mai fit ho raha hai. The way you teach is just outstanding. I am definitely gonna donate you 1000 bucks once i get a job into react for sure as a goodwill gesture to you:)Love u harry bhai

    • @RAM_LALA
      @RAM_LALA ปีที่แล้ว +1

      job lag gyi bro
      pl bata doo

    • @RAM_LALA
      @RAM_LALA ปีที่แล้ว +1

      clarity mil jaigi

    • @RAM_LALA
      @RAM_LALA ปีที่แล้ว +2

      ki course ka koi fayada hai ki nhi

    • @CleanDevelop
      @CleanDevelop ปีที่แล้ว

      @@RAM_LALA boht chutiya h bhai tu, chup chap pdhai krle job apne aap lag jaegi

  • @abhiteshbhardwaj7240
    @abhiteshbhardwaj7240 ปีที่แล้ว +1

    My Minds Feedback - Thank You Bhaiya Your Teaching Style Is really Nice All Concepts Explained in a Well Manner even for me as a beginner in this topic you made the things very Easy.Thank you Again ..

    • @sukhera89
      @sukhera89 ปีที่แล้ว

      successfully ignored

  • @prekshasoni-n7z
    @prekshasoni-n7z ปีที่แล้ว

    I must say teacher like u harry bhaiya make complex things fun and easier best videos ek bache ko bhi smjh aajey aisa content banana hats off harry bhaiya

  • @aishwaryakulkarni7117
    @aishwaryakulkarni7117 10 หลายเดือนก่อน

    Instead of if else statement in toggleStyle function, you can use ternary operator and OR operator for changing button text. I tried it. It worked. Also reduces the lines of code.

  • @dreamerboy10
    @dreamerboy10 3 ปีที่แล้ว +1

    Hi harry from Pakistan...Love your way of teaching...

  • @codesengine9862
    @codesengine9862 ปีที่แล้ว

    I have checked a lot tutorials but switched to this tutorial and this tutorial is love ......

  • @anuragsuryawanshi4177
    @anuragsuryawanshi4177 ปีที่แล้ว +1

    This video cleared my many doubts like where where we can use useState variable
    ~Thank You Harry

  • @muhammadjawad7655
    @muhammadjawad7655 ปีที่แล้ว

    One of my Best Teacher is Code with harry

  • @nimishajain3722
    @nimishajain3722 3 ปีที่แล้ว +2

    Finally one more video...❤ thanks harry🙏 God bless you🙌

  • @gauravarora4591
    @gauravarora4591 ปีที่แล้ว

    Looking at your speed of development. I really need too much practice to resonate it. You are inspiration to everyone. Thanks Harry

  • @AshishThakur-mq3fn
    @AshishThakur-mq3fn 3 ปีที่แล้ว

    Jo koi nahi skr skta Bo apne apni mehnat se akele krke dikhaya so I proud of you ❤❤❤

  • @hamaishgill5753
    @hamaishgill5753 2 ปีที่แล้ว

    Harry Sir you are a Good Teacher Web Development may God bless you and may u live Long

  • @amarshukla07
    @amarshukla07 3 ปีที่แล้ว +2

    This top down approach is awesome.

  • @samratbelbase
    @samratbelbase 6 หลายเดือนก่อน

    FIRST two words of intro was hilarious literally....

  • @shivanshgoel3766
    @shivanshgoel3766 3 ปีที่แล้ว +2

    Just exactly when I needed this course. Thanks a million...

  • @sonusah6620
    @sonusah6620 2 ปีที่แล้ว

    i liked that line pyari samaj gayi.....learning in a interesting way

  • @littlewonder8641
    @littlewonder8641 ปีที่แล้ว

    Your teaching style is great. I liked it.

  • @ganeshkadam5351
    @ganeshkadam5351 2 ปีที่แล้ว

    Thanks harry Bhai bohat improvement hori hai aur inspiration bhi mil ri hai❣️

  • @kartikverma6988
    @kartikverma6988 2 ปีที่แล้ว

    No.1 coding channel

  • @jaskiratsingh4992
    @jaskiratsingh4992 ปีที่แล้ว

    Great vedio seeing after 1 year and still it is the best

  • @Kidzworlddotcom
    @Kidzworlddotcom 2 ปีที่แล้ว +8

    Hi, we can modify handleOnChange event as below to correct count of word in case simply there is no any text entered in textbox.
    const handleOnChange = (event) => {
    setText(event.target.value);
    let inputText = document.getElementById('myBox').value;
    let inputTextLength = '';
    if(inputText !== '')
    {
    inputTextLength = inputText.split(" ").length;
    }
    else
    {
    inputTextLength = 0;
    }
    setTextLength(inputTextLength);
    }

  • @gautamnaugai.iab94
    @gautamnaugai.iab94 5 หลายเดือนก่อน

    Best React Playlist just looking like a wow

  • @pranav_arya
    @pranav_arya ปีที่แล้ว +8

    you can also do something like this for enabling dark mode
    import React, { useState } from 'react'
    export default function About() {
    const handleDarkMode = () => {
    setBgColor(!bgColor);
    }
    const handleBtnToggle = () => {
    setBtnName(!btnName);
    }
    const [bgColor, setBgColor] = useState(false);
    const [btnName, setBtnName] = useState(false);
    // let myStyle = {
    // backgroundColor: bgColor ? "black" : "white",
    // color: bgColor ? "white" : "black"}
    // }
    return (

    About Us




    Accordion Item #1




    This is the first item's accordion body. It is shown by default, until the collapse plugin adds the appropriate classes that we use to style each element. These classes control the overall appearance, as well as the showing and hiding via CSS transitions. You can modify any of this with custom CSS or overriding our default variables. It's also worth noting that just about any HTML can go within the .accordion-body, though the transition does limit overflow.






    Accordion Item #2




    This is the second item's accordion body. It is hidden by default, until the collapse plugin adds the appropriate classes that we use to style each element. These classes control the overall appearance, as well as the showing and hiding via CSS transitions. You can modify any of this with custom CSS or overriding our default variables. It's also worth noting that just about any HTML can go within the .accordion-body, though the transition does limit overflow.






    Accordion Item #3




    This is the third item's accordion body. It is hidden by default, until the collapse plugin adds the appropriate classes that we use to style each element. These classes control the overall appearance, as well as the showing and hiding via CSS transitions. You can modify any of this with custom CSS or overriding our default variables. It's also worth noting that just about any HTML can go within the .accordion-body, though the transition does limit overflow.





    {handleDarkMode(); handleBtnToggle();}}>{btnName ? "Disable Dark Mode" : "Enable Dark Mode"}



    )
    }

  • @MayurGFamily
    @MayurGFamily หลายเดือนก่อน

    Thanks For in-detailed explanation!!

  • @amentertainment7799
    @amentertainment7799 หลายเดือนก่อน

    superb video , love you HARRY.

  • @azwaraslam8563
    @azwaraslam8563 2 ปีที่แล้ว

    YAAR HARRY BHAI
    PADHAATE TO SAB ACHA HAI LAKIN SAMJH ME SIRF AAPKA HI AATA HAI ...

  • @Desh_Duniyan
    @Desh_Duniyan ปีที่แล้ว

    Day 5 and I m really enjoying with this course 🎉

  • @vikasgond8279
    @vikasgond8279 2 ปีที่แล้ว +8

    I added the dark mode with the use of button (useState)
    Here is the code
    const [button, setbutton] = useState('Enable Dark Mode');
    const [style, setstyle] = useState({
    color:'black',
    backgroundColor:'white'
    })
    const handlemode = (event) => {
    if (button === 'Enable Dark Mode') {
    setbutton('Enable light Mode');
    setstyle({
    color:'white',
    backgroundColor:'black'
    })
    }
    else {
    setbutton('Enable Dark Mode');
    setstyle({
    color:'black',
    backgroundColor:'white'
    })
    }
    }
    Hope everyone like it

  • @hadeedtmgggg5837
    @hadeedtmgggg5837 2 ปีที่แล้ว

    Thankyou harry Bhai sare topics crystal clear horahy ha💕

  • @molu_k
    @molu_k 3 ปีที่แล้ว +2

    Thanks for such quality content for free🔥🔥

  • @aakash9025
    @aakash9025 3 ปีที่แล้ว

    Dark Mode 🔥❤️ Mst hai bhaiya

  • @fatinishraqprapya3139
    @fatinishraqprapya3139 3 ปีที่แล้ว

    Very Helpful Video for me. Every beginners should watch this playlist.

  • @ameermuavia8795
    @ameermuavia8795 2 ปีที่แล้ว

    Best Wishes for You!!!
    From Pakistan.............

  • @ADITYAMISHRA-kx4dy
    @ADITYAMISHRA-kx4dy ปีที่แล้ว

    Maja aa gya Harry bhai the best react course

  • @DesignThunder.
    @DesignThunder. 2 ปีที่แล้ว +1

    Dark mode with check box code [ copy and happy 😊 ] -

    {btntext}

  • @maryambatooliam
    @maryambatooliam 2 ปีที่แล้ว

    Bro Thank u so much haris Ali ( AKA Harry bahi) You are Great !

  • @HariomSingh-ei4fb
    @HariomSingh-ei4fb 3 ปีที่แล้ว +1

    Really helpful video course😎

  • @thargaming2728
    @thargaming2728 ปีที่แล้ว

    best react course harry sir❤️❤️❤️

  • @harishankar-gf4ls
    @harishankar-gf4ls 3 ปีที่แล้ว +2

    Best course sir ...

  • @satyabratasana7732
    @satyabratasana7732 ปีที่แล้ว

    Sense of humour is awesome

  • @thinkingstatus2771
    @thinkingstatus2771 3 ปีที่แล้ว +1

    thank u so much Harry bhai really this course is very helpful 👍👍😘

  • @rudrahingu5762
    @rudrahingu5762 ปีที่แล้ว

    This React course is awesome 👌

  • @sujalbindra1480
    @sujalbindra1480 5 หลายเดือนก่อน

    i am doing course right now and doing all your task and perform the email extractor too

  • @wahabnoor5834
    @wahabnoor5834 2 ปีที่แล้ว

    Lovely Harry Bahi Love from Pakistan

  • @vivekkr3976
    @vivekkr3976 2 ปีที่แล้ว

    Pyari smjh hi jati hai 😂
    Harry bhaiya😊 ..

  • @wajidshabbir5690
    @wajidshabbir5690 3 ปีที่แล้ว

    sir, your videos too much motivating to learn React, whenever i check other mentor's videos, that didn't make sense.

  • @LEGENDX22
    @LEGENDX22 3 ปีที่แล้ว

    Harry bhai You Are Awesome 🔥

  • @surajkumarjha6155
    @surajkumarjha6155 3 ปีที่แล้ว +2

    Really helpful ❤️❤️😭

  • @tejaskumar4470
    @tejaskumar4470 3 ปีที่แล้ว +1

    HARRY BHAI 🔥😊

  • @mazharansari7813
    @mazharansari7813 2 ปีที่แล้ว

    Congratulations for 3 Million Subscribers harry bhai 🎉

  • @coolg9585
    @coolg9585 3 ปีที่แล้ว

    Bro you are real hero, Thank you....!!!!!

  • @technikalproblem6780
    @technikalproblem6780 6 หลายเดือนก่อน

    Thanks sir for such an amazing video!

  • @sowmik.reborn
    @sowmik.reborn 3 ปีที่แล้ว

    Take love from Bangladesh

  • @rohitsingh8975
    @rohitsingh8975 3 ปีที่แล้ว

    and i will seen you next time.......tagda hai bhai

  • @samvrittiwari351
    @samvrittiwari351 3 ปีที่แล้ว +1

    Sir aap gajab ho...

  • @NeelJivani-u4i
    @NeelJivani-u4i ปีที่แล้ว

    very awesome and understanding playlist about React JS

  • @samvibes8544
    @samvibes8544 3 ปีที่แล้ว +3

    I added copy to clipboard button with simple function with simple line "navigator.clipboard.writeText('Textbox Text')"

  • @ravjotsinghrayat9974
    @ravjotsinghrayat9974 2 ปีที่แล้ว

    Very well explained sir🤙🏻🔥🔥💝

  • @shwetabharti8756
    @shwetabharti8756 2 ปีที่แล้ว

    Thank you for react course....god bless you ♥️♥️♥️

  • @pulkitpareek
    @pulkitpareek 3 ปีที่แล้ว +1

    This course is really very helpful

  • @ayushyt918
    @ayushyt918 2 ปีที่แล้ว

    Thank you Harry Bhaiya Bhut acha Course hai

  • @vinaykhairnar4317
    @vinaykhairnar4317 2 ปีที่แล้ว

    Thanks Harry Bhai😍😇

  • @alphademonyt1133
    @alphademonyt1133 3 ปีที่แล้ว

    Hello harry bhai... Sir apki videos bohot zyada helpful hai..

  • @gopal12455
    @gopal12455 2 ปีที่แล้ว +1

    this tutorial is useful

  • @biplabkumar8327
    @biplabkumar8327 3 ปีที่แล้ว

    Best course on React

  • @brijeshmorya9737
    @brijeshmorya9737 3 ปีที่แล้ว

    Thank you Harry Bhai ❤️🧡💛♥️ this course is going awesome

  • @santoshpanda926
    @santoshpanda926 3 ปีที่แล้ว +1

    Very beautiful examples to describe of props and state on REACT JS 👌👌👌

  • @dibyamishra8286
    @dibyamishra8286 3 ปีที่แล้ว

    Harry you are the best

  • @JAVAxNANI
    @JAVAxNANI 3 ปีที่แล้ว +1

    Life saver man

  • @sadakagaja
    @sadakagaja 2 ปีที่แล้ว

    Great Harry bro ❤️

  • @kaushalkishor143
    @kaushalkishor143 11 หลายเดือนก่อน

    This video is useful for me.

  • @samirrobin3524
    @samirrobin3524 2 ปีที่แล้ว

    Thank you so much Harry Bhai❤️

  • @eklavyachandra
    @eklavyachandra 3 ปีที่แล้ว +1

    2M soon :)

  • @shivanisingh-mc1xr
    @shivanisingh-mc1xr 3 ปีที่แล้ว

    just the best tutorial for react... :)

  • @ajayrabari433
    @ajayrabari433 3 ปีที่แล้ว +1

    Thank you for this react series Harry sir.

  • @grishm85
    @grishm85 3 ปีที่แล้ว +2

    Getting a heart from code with Harry is impossible

  • @easylearning6647
    @easylearning6647 2 ปีที่แล้ว

    maza aa gya harry bhai

  • @jayantpapola
    @jayantpapola 2 ปีที่แล้ว

    This Help Me a Lot 😊

  • @Radhakrishn808
    @Radhakrishn808 3 ปีที่แล้ว +1

    0:45 pyari smaj gyi😁😆😆😆sir op

  • @WebJainul
    @WebJainul 2 หลายเดือนก่อน +1

    Nice 👍👍

  • @aymandin4912
    @aymandin4912 3 ปีที่แล้ว

    I thought react is awful but not anymore....... This react course is helpful.... Thanks!

  • @entrepreneursthinks
    @entrepreneursthinks ปีที่แล้ว

    I don't have enough words to thank you @codewithharry ❤

  • @prabhazad1076
    @prabhazad1076 2 ปีที่แล้ว

    Harry bhai... Pyaari Samajh Gayi... 😅.. Aunty clip was amazing.

  • @NoorFatima-qx7rv
    @NoorFatima-qx7rv 2 ปีที่แล้ว

    Thankssssssss a lot Awesome Videos thanks you soooo much ....

  • @nandinisinghjadon4156
    @nandinisinghjadon4156 2 ปีที่แล้ว

    you provide the best content on youtube #HarryBhai

  • @AshishThakur-mq3fn
    @AshishThakur-mq3fn 3 ปีที่แล้ว

    Sir you are great 🥰🥰❤❤❤❤

  • @saudjabbar8201
    @saudjabbar8201 ปีที่แล้ว

    Premium content for free. Very impressive.