#31: React Mini Project🔥Toggle Switch Button Component

Поделиться
HTML-код
  • Опубликовано: 21 авг 2024

Комментарии • 24

  • @ThapaTechnical
    @ThapaTechnical  Месяц назад +1

    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
    @ROHIT-jy6uj 14 дней назад +1

    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;
    }

  • @xyonxyt9170
    @xyonxyt9170 Месяц назад +2

    sir plz try to make 2-3 parts a day

  • @HassaanHaider313
    @HassaanHaider313 Месяц назад +1

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

    • @harshitpustake2350
      @harshitpustake2350 Месяц назад +1

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

  • @user-om1iy8nu7z
    @user-om1iy8nu7z 25 дней назад

    Good Series.👍👍👍👍

  • @Error-td8fm
    @Error-td8fm Месяц назад +2

    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

  • @anjubiswas1264
    @anjubiswas1264 Месяц назад

    Awasome Video❤❤

  • @harshitpustake2350
    @harshitpustake2350 Месяц назад

    Nice project ❤

  • @sudippatil7672
    @sudippatil7672 16 дней назад

    need of css code

  • @prem_ium
    @prem_ium Месяц назад

    use tailwind css better for learning

  • @karansakure8144
    @karansakure8144 Месяц назад +1

    goood

  • @CodesolveNetwork
    @CodesolveNetwork 23 дня назад

    CSS samne likha kro yrr verna maja nhi aata padne mai

  • @hamudxd9497
    @hamudxd9497 Месяц назад

    GOOD YAR

  • @allsupporthindi161
    @allsupporthindi161 Месяц назад

    Todo wala app laiye

  • @user-lx4xd7sy5u
    @user-lx4xd7sy5u Месяц назад

    vinode sir VS code Theme name hi bata do please

    • @ThapaTechnical
      @ThapaTechnical  Месяц назад +1

      Material theme

    • @user-lx4xd7sy5u
      @user-lx4xd7sy5u Месяц назад

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

    • @user-lx4xd7sy5u
      @user-lx4xd7sy5u Месяц назад

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

  • @buntysingh244
    @buntysingh244 Месяц назад

    gazab

  • @Pankajpondric
    @Pankajpondric Месяц назад

    ❤❤❤

  • @Tappa_vollyball
    @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
    @rishiraj2548 Месяц назад

    👍🏻