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

Поділитися
Вставка
  • Опубліковано 17 гру 2024

КОМЕНТАРІ • 589

  • @CodeWithHarry
    @CodeWithHarry  3 роки тому +109

    Here is the react Playlist: ua-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 роки тому +145

    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?

  • @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 .

  • @Surajsharma06
    @Surajsharma06 3 роки тому +30

    0:52 was Insane 😂🤣

  • @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.

  • @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. 💀

  • @shankargairy6979
    @shankargairy6979 Рік тому +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...

  • @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.

  • @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

  • @sakshamjoshi1118
    @sakshamjoshi1118 3 роки тому +15

    Thank you so much Harry for this React Course ❤️

  • @JAVAxNANI
    @JAVAxNANI 3 роки тому +10

    Get this man a medal 🏅🏅🏅!

  • @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

  • @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

  • @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

  • @shivanshgoel3766
    @shivanshgoel3766 3 роки тому +2

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

  • @gauravarora4591
    @gauravarora4591 Рік тому

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

  • @dreamerboy10
    @dreamerboy10 3 роки тому +1

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

  • @amarshukla07
    @amarshukla07 3 роки тому +2

    This top down approach is awesome.

  • @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 ..

  • @hamaishgill5753
    @hamaishgill5753 2 роки тому

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

  • @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

  • @nimishajain3722
    @nimishajain3722 3 роки тому +2

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

  • @muhammadjawad7655
    @muhammadjawad7655 Рік тому

    One of my Best Teacher is Code with harry

  • @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);
    }

  • @AshishThakur-mq3fn
    @AshishThakur-mq3fn 3 роки тому

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

  • @aishwaryakulkarni7117
    @aishwaryakulkarni7117 9 місяців тому

    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.

  • @molu_k
    @molu_k 3 роки тому +2

    Thanks for such quality content for free🔥🔥

  • @sonusah6620
    @sonusah6620 2 роки тому

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

  • @ganeshkadam5351
    @ganeshkadam5351 2 роки тому

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

  • @littlewonder8641
    @littlewonder8641 Рік тому

    Your teaching style is great. I liked it.

  • @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"}



    )
    }

  • @Desh_Duniyan
    @Desh_Duniyan Рік тому

    Day 5 and I m really enjoying with this course 🎉

  • @fatinishraqprapya3139
    @fatinishraqprapya3139 3 роки тому

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

  • @jaskiratsingh4992
    @jaskiratsingh4992 Рік тому

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

  • @gautamnaugai.iab94
    @gautamnaugai.iab94 5 місяців тому

    Best React Playlist just looking like a wow

  • @amentertainment7799
    @amentertainment7799 Місяць тому

    superb video , love you HARRY.

  • @MayurGFamily
    @MayurGFamily Місяць тому

    Thanks For in-detailed explanation!!

  • @azwaraslam8563
    @azwaraslam8563 2 роки тому

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

  • @hadeedtmgggg5837
    @hadeedtmgggg5837 Рік тому

    Thankyou harry Bhai sare topics crystal clear horahy ha💕

  • @sujalbindra1480
    @sujalbindra1480 5 місяців тому

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

  • @DesignThunder.
    @DesignThunder. 2 роки тому +1

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

    {btntext}

  • @thinkingstatus2771
    @thinkingstatus2771 3 роки тому +1

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

  • @ADITYAMISHRA-kx4dy
    @ADITYAMISHRA-kx4dy Рік тому

    Maja aa gya Harry bhai the best react course

  • @kartikverma6988
    @kartikverma6988 2 роки тому

    No.1 coding channel

  • @alphademonyt1133
    @alphademonyt1133 3 роки тому

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

  • @aakash9025
    @aakash9025 3 роки тому

    Dark Mode 🔥❤️ Mst hai bhaiya

  • @Radhakrishn808
    @Radhakrishn808 3 роки тому +1

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

  • @thargaming2728
    @thargaming2728 Рік тому

    best react course harry sir❤️❤️❤️

  • @ameermuavia8795
    @ameermuavia8795 2 роки тому

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

  • @HariomSingh-ei4fb
    @HariomSingh-ei4fb 2 роки тому +1

    Really helpful video course😎

  • @wajidshabbir5690
    @wajidshabbir5690 3 роки тому

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

  • @pulkitpareek
    @pulkitpareek 3 роки тому +1

    This course is really very helpful

  • @harishankar-gf4ls
    @harishankar-gf4ls 3 роки тому +2

    Best course sir ...

  • @maryambatooliam
    @maryambatooliam 2 роки тому

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

  • @rudrahingu5762
    @rudrahingu5762 Рік тому

    This React course is awesome 👌

  • @LEGENDX22
    @LEGENDX22 3 роки тому

    Harry bhai You Are Awesome 🔥

  • @ajayrabari433
    @ajayrabari433 3 роки тому +1

    Thank you for this react series Harry sir.

  • @samvibes8544
    @samvibes8544 3 роки тому +3

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

  • @NeelJivani-u4i
    @NeelJivani-u4i Рік тому

    very awesome and understanding playlist about React JS

  • @rohitsingh8975
    @rohitsingh8975 3 роки тому

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

  • @mazharansari7813
    @mazharansari7813 2 роки тому

    Congratulations for 3 Million Subscribers harry bhai 🎉

  • @aymandin4912
    @aymandin4912 3 роки тому

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

  • @ayushyt918
    @ayushyt918 2 роки тому

    Thank you Harry Bhaiya Bhut acha Course hai

  • @surajkumarjha6155
    @surajkumarjha6155 3 роки тому +2

    Really helpful ❤️❤️😭

  • @coolg9585
    @coolg9585 3 роки тому

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

  • @technikalproblem6780
    @technikalproblem6780 5 місяців тому

    Thanks sir for such an amazing video!

  • @shwetabharti8756
    @shwetabharti8756 2 роки тому

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

  • @samratbelbase
    @samratbelbase 6 місяців тому

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

  • @wahabnoor5834
    @wahabnoor5834 2 роки тому

    Lovely Harry Bahi Love from Pakistan

  • @santoshpanda926
    @santoshpanda926 3 роки тому +1

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

  • @ravjotsinghrayat9974
    @ravjotsinghrayat9974 2 роки тому

    Very well explained sir🤙🏻🔥🔥💝

  • @brijeshmorya9737
    @brijeshmorya9737 3 роки тому

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

  • @shivanisingh-mc1xr
    @shivanisingh-mc1xr 3 роки тому

    just the best tutorial for react... :)

  • @vivekkr3976
    @vivekkr3976 2 роки тому

    Pyari smjh hi jati hai 😂
    Harry bhaiya😊 ..

  • @santoshsonar9983
    @santoshsonar9983 3 роки тому

    This React course is very Helpful...

  • @satyabratasana7732
    @satyabratasana7732 Рік тому

    Sense of humour is awesome

  • @tejaskumar4470
    @tejaskumar4470 3 роки тому +1

    HARRY BHAI 🔥😊

  • @user-me9vo2pf9r
    @user-me9vo2pf9r 3 роки тому +1

    This react course is very helpful

  • @DineshKriplani
    @DineshKriplani Рік тому

    VSCode me koi esa extension nhi hai jo input, img, jese tags me automatically / lgga de like ?

  • @samvrittiwari351
    @samvrittiwari351 3 роки тому +1

    Sir aap gajab ho...

  • @abhilashsethi7688
    @abhilashsethi7688 3 роки тому

    Thank you Harry Bhai for this useful react course

  • @SandeepChauhan-wz8me
    @SandeepChauhan-wz8me Рік тому

    Hello Harry sir thank you for videos ke liye and Sir ye function hai ek textutils ke liye - Copy Function
    const handleCopyClick = () => {
    navigator.clipboard.writeText(text);
    window.alert('Copied');
    }

  • @nandinisinghjadon4156
    @nandinisinghjadon4156 2 роки тому

    you provide the best content on youtube #HarryBhai

  • @sadakagaja
    @sadakagaja 2 роки тому

    Great Harry bro ❤️

  • @biplabkumar8327
    @biplabkumar8327 3 роки тому

    Best course on React

  • @sowmik.reborn
    @sowmik.reborn 3 роки тому

    Take love from Bangladesh

  • @soumyojitdey8896
    @soumyojitdey8896 2 роки тому

    you are doing wonderful job Harry!!

    • @akshanshsharma6025
      @akshanshsharma6025 2 роки тому

      can you please help me why its giving this error
      Line 5:33: React Hook "useState" is called in function "about" that is neither a React function component nor a custom React Hook function. React component names must start with an uppercase letter. React Hook names must start with the word "use" react-hooks/rules-of-hooks
      Search for the keywords to learn more about each error.

  • @i_am_fahad2866
    @i_am_fahad2866 3 роки тому +1

    I am facing "Unknown property ‘-moz-osx-font-smoothing’. Declaration dropped." this problem in my App.css file and when when i click on accordion example of Collapsible Group Item it doesn't respond. There is an error in css file.

  • @jassbawa955
    @jassbawa955 3 роки тому

    A week ago i want to start learning React and then your course came
    I am be like: Abb koi tension nahi abb sab hojaygea 😂

  • @NoorFatima-qx7rv
    @NoorFatima-qx7rv 2 роки тому

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

  • @aryansinha1818
    @aryansinha1818 2 роки тому +1

    3.22 Hours Done Ending @10
    15 Hours left - starting @11

  • @hemantkailashyadav
    @hemantkailashyadav 2 роки тому

    It's a great tutorial for react, thanks harry

  • @abhijeetsharma3364
    @abhijeetsharma3364 3 роки тому

    Once again thank you harry bhai ❤❤

  • @yashsheorey9842
    @yashsheorey9842 3 роки тому +1

    0:52 OP😂😂

  • @easylearning6647
    @easylearning6647 Рік тому

    maza aa gya harry bhai

  • @sudhanshudwivedi9610
    @sudhanshudwivedi9610 3 роки тому

    Thanks a lot for these React tutorials.

  • @rahulkadam6655
    @rahulkadam6655 3 роки тому

    This react course is helpful! 🔥