Your Web News in One Place

Help Webnuz

Referal links:

Sign up for GreenGeeks web hosting
March 21, 2022 06:08 pm GMT

Simple Toggle Button(On/Off)

Hi guys, I was doing a project that required an ON/OFF switch. I kinda had a tough time creating a switch button. After finding my way around, I thought this migth be helpful for other people.

    <div class="container">        <div class="toggle">            <div class="toggle-btn" onclick="Animatedtoggle()"></div>        </div>        <div class="text">OFF</div>    </div>

Create elements "toggle", "toggle-btn", and a "text" with OFF property. Create a button property inside the the toggle-btn div.

let toggle = document.querySelector(".toggle");        let text = document.querySelector(".text")        function Animatedtoggle(){            toggle.classList.toggle('active');            if(toggle.classList.contains('active')){                text.innerHTML = "ON";            }            else {                 text.innerHTML = "OFF";            }        }

queryselect element ".toggel" to variable toggle.
do the same thing with "text".
classList toggle ('active') and then write a if loop for true "ON" and else "OFF".

Below is the full code template including stylesheet.

<!DOCTYPE html><html lang="en"><head>    <meta charset="UTF-8">    <meta http-equiv="X-UA-Compatible" content="IE=edge">    <meta name="viewport" content="width=device-width, initial-scale=1.0">    <title>button</title>    <link rel="stylesheet" href="stylesheet.css"></head><body>    <div class="container">        <div class="toggle">            <div class="toggle-btn" onclick="Animatedtoggle()"></div>        </div>        <div class="text">OFF</div>    </div>    <script>        let toggle = document.querySelector(".toggle");        let text = document.querySelector(".text")        function Animatedtoggle(){            toggle.classList.toggle('active');            if(toggle.classList.contains('active')){                text.innerHTML = "ON";            }            else {                 text.innerHTML = "OFF";            }        }    </script></body></html>
* {    margin: 0;    padding: 0;    box-sizing: border-box;}body {    height: 100vh;    position: relative;    background: aquamarine;}.container {    position: absolute;    top: 50%;    left: 50%;    transform: translate(-50%, -50%);    height: 50px;    display: flex;    align-items: center;    justify-content: center;}.container .toggle {    position: absolute;    top: 0;    left: 0;    width: 90px;    height: 40px;    background: rgb(8, 0, 15);    border-radius: 55px;    cursor: pointer;    transition: 0.3;}.container .toggle .toggle-btn {    position: absolute;    top: 5px;    left: 5px;    width: 40px;    height: 30px;    background: rgb(132, 115, 148);    border-radius: 25px;    transition: 0.3;}.container .toggle.active {    background:whitesmoke;}.container .toggle.active .toggle-btn {    left: 40px;}.text {    position: absolute;    left: 2.5cm;    font-size: 1.5rem;    font-family: 'Lucida Sans', 'Lucida Sans Regular', 'Lucida Grande', 'Lucida Sans Unicode', Geneva, Verdana, sans-serif;    margin-left: 8px;}

PLS FOLLOW MY TWITTER HANDLE


Original Link: https://dev.to/asapsonter/simple-toggle-buttononoff-3k2i

Share this article:    Share on Facebook
View Full Article

Dev To

An online community for sharing and discovering great ideas, having debates, and making friends

More About this Source Visit Dev To