#31: React Mini Project🔥Toggle Switch Button Component

[@ThapaTechnical]

Hope you love the video🔥
📢 Access Source Code, PPT & Notes here for Free : www.thapatechnical.com/2024/06/react-mini-projecttoggle-switch-button.html
📺 Discover React.js History in Just 10 Minutes - ruclips.net/video/MiK2bFqhg1U/видео.html
📺 Watch the complete Playlist here : ruclips.net/p/PLwGdqUZWnOp1Rab71vx2zMF6qpwGDB2Z1

[@ROHIT-jy6uj]

CSS PAGE:- body{
width: 100%;
height: 100vh;
display: flex;
justify-content: center;
}
.toggle-switch{
width:100px;
height:50px;
border-radius: 25px;
background-color: #ccc;
position: relative;
cursor: pointer;
padding: 5px;
margin-top: 5rem;
box-shadow: rgba(17,12,46,0.15) 0px 48px 100px 0px;
}
.switch{
width: 40px;
height:40px;
border-radius: 20px;
display:flex;
align-items:center;
justify-content: center;
color:white;
font-weight: bold;
position: absolute;
top:5px;
left:5px;
transition: tranform 0.3s linear, background-color 0.3s linear;
border: 0.2rem solid #ccc;
box-shadow: rgba(100,100, 111,0.2) 0px 7px 29px 0px;
}
.on{
background-color: #4caf50;
transform: translate(50px);
}
.off{
background-color: #f44336;
transform: translateX(0);
}
.switch-state{
margin: 0 10px;
text-transform: uppercase;
}

[@village-vlogs.404]

End ho gia Love you i follow your react series thanks sir ✨✨

[@xyonxyt9170]

sir plz try to make 2-3 parts a day

[@Error-td8fm]

Sir please complete this course asap Because technology is evolving very fast we don't have timw to invest 60-70 days in react there ia already so many series in react but they are not for beginners i have tried them only you told us every minor thing in detail

[@prem_ium]

use tailwind css better for learning

[@anjubiswas1264]

Awasome Video❤❤

[@HamzaKhanLodhi-t6z]

Good Series.👍👍👍👍

[@Deeptiharshkla]

Nice project ❤

[@MuhammadAli-ez8fg]

also change the text color mean off switch different color and on switch different color

[@village-vlogs.404]

love you

[@HassaanHaider313]

11:47 ak chez apne likha hai
{ isOn ? " on ":" off "}
lekin outputs me
ON OFF uppercase me kese a Raha hai???????????? 11:47

[@Deeptiharshkla]

Span ko switch-state class di hain or usme text- transform property ka use kiya hain

[@hamudxd9497]

GOOD YAR

[@karansakure8144]

goood

[@Pankajpondric]

❤❤❤

[@sudippatil7672]

need of css code

[@allsupporthindi161]

Todo wala app laiye

[@CodesolveNetwork]

CSS samne likha kro yrr verna maja nhi aata padne mai

[@Tappa_vollyball]

Bhai mujhe ek Purana laptop de do please mere pass paise nhi lekin mujhe coding sikhna hai Maine AAP ke html, css, JavaScript phone me nhi ban raha please bhaiya

[@rishiraj2548]

👍🏻

[@InamKhan-b1h]

vinode sir VS code Theme name hi bata do please

[@ThapaTechnical]

Material theme

[@InamKhan-b1h]

@@ThapaTechnical Thanks sir your great and next series is NEXT.JS

[@InamKhan-b1h]

@@ThapaTechnical Thanks sir your great and next series is NEXT.JS

[@buntysingh244]

gazab