DEV Community: Karan Developer

How to create a custom Toggle Switch using CSS

Karan Developer — Sat, 31 Jul 2021 09:43:15 +0000

Let's create a simple customized toggle switch using CSS. Initially when I was trying to create this, I founded it very confusing because many developers have created this button but none of explain it how is this working.

So after struggling a little bit, I've learned how to create this and I want to share with you all.

I've learned this technique by Marcus Burnette. You can check his Codepen, there are more such interesting pens.

Prerequisite Knowledge

Basics of HTML, CSS (specially Pseudo Elements)

How it works

As we all know when we assign a label to a input, we can target the input by clicking on label too.

That's what we are going to take advantage of and by this we can convert our label into custom switch which will act same as checkbox.

Let's Start

These are the steps that we are going to follow in order to create this button.

1. Create HTML structure

In this stages we will create the html elements which are input checkbox and a label that is assigned to it but its inner content should be empty.

Reference code is given below.




<!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>Document</title>
    <link rel="stylesheet" href="style.css">
    <script src="script.js" defer></script>
</head>

<body>

<input type="checkbox" name="switch" id="switch">
<label for="switch"></label>

</body>

</html>

2. Hide the input element

Now we will hide the input element as I said earlier we will make the switch with label element so we don't need the checkbox.




input[type="checkbox"] {
  width: 0;
  height: 0;
  visibility: hidden;
}

3. Style the button body

We will create the body of switch or the outer part in which ball will move.

Reference code is given below.




label {
  display: block;
  width: 500px;
  height: 150px;
  background-color: #477a85;
  border-radius: 100px;
  position: relative;
  cursor: pointer;
  transition: 0.5s;
  box-shadow: 0 0 20px #477a8550;
}

4. Create the toggle ball

Now we'll create the toggle ball using pseudo element ::after.

Reference code is given below.




label::after {
  content: "";
  width: 120px;
  height: 120px;
  background-color: #e8f5f7;
  position: absolute;
  border-radius: 70px;
  top: 15px;
  left: 15px;
  transition: 0.5s;
}

At this stage our 80% of work is done, now we just have to add the animation to make our switch work.

5. Adding animation

As we know when we toggle the label, checkbox also get toggled.

Now we'll add the condition, when checkbox gets checked our ball should be shifted to the right.



   input:checked + label:after {
   left: calc(100% - 10px);
   transform: translateX(-100%);
   }

To Change the background on button toggle




   input:checked + label {
   background-color: #243d42;
   }

Now If want a more smooth magnetic effect. When ball get active it its width should increase for a moment. A element gets active when we click on it. We can do this by using :active selector.



    label:active:after {
    width: 160px;
    }

Output Preview

Try Demo

Find Me On

Create To-do List using Vanilla JavaScript

Karan Developer — Wed, 30 Jun 2021 15:47:15 +0000

It's a simple To-do app. As a beginner, creating these features like DOM manipulations, animations and dark theme feature was challenging for me. So let's see how I created this and what I've learned from it.

Prerequisite Knowledge

Basics of HTML, CSS and JS (specially DOM Manipulations)

What I've Learned

DOM Manipulation
Classlist
ChildNodes
Forms
Changing Themes

Let's Start

We will create this project step by step.

1. Brainstorming

First you have to plan the features of your to-do app. You can use any software to plan your project or just a pen and paper. I generally prefer to plan everything in Notion.

2. Sketching

Make a simple sketch of To-do app which contains all your decided features.

3. Prototype

Make a prototype of your app using previous sketch. You can also follow these steps to design your app.

Make a color palette of 3 colors.
Choose the typeface.
Collect SVG icons
Start designing
Design the Dark theme

4. Setup Project Environment

In this step, setup the directories and create files for your project.

5. Create HTML structure

Open your index.html file and create the html structure. Don't forget to link your CSS and Js file with index.html.

Refrence code is given below.




<!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>TODO :: By karan Kumar</title>

    <link rel="stylesheet" href="style.css" />
    <script src="script.js" defer></script>
</head>

<body>
    <div class="container task_list_empty">
        <header>
            <div class="theme_toogle">
                <button class="theme_toogle_btn"></button>
            </div>
            <span class="heading">My Day</span>
        </header>
        <section class="tasks">
            <ul id="tasksList"></ul>
        </section>
        <footer>
            <form id="new_task_form">
                <input type="text" name="new_task_input" id="new_task_input" placeholder="Create New Task" value="" />
                <button id="new_task_input_btn" type="submit"></button>
            </form>
        </footer>
    </div>
</body>

</html>

6. Add CSS Styling

Open your style.css file to style the to-do app. Follow these steps to style your to-do.

Set root variables
Define container layouts
Set hover effects
Style input placeholder using pseudo classes.
Add Media queries

Refrence code is given below.



:root {
    --primary-color: white;
    --secondary-color: #1E1E1E;
    --text-color: black;
    --task-color: white;
    --footer-color: #1E1E1E;
    --theme-btn: url('assets/Dark-theme-btn.svg');
    --container-bg: url('./assets/Light-empty.svg');
    --complete-icon: url('assets/complete.svg');
    --filter: none;
    --theme-transition: 0s;

}

* {
    font-family: "Times New Roman";
    outline: none;
}

body {
    display: flex;
    min-height: 100vh;
    justify-content: center;
    align-items: center;
    overflow: hidden;

}

.container {
    position: relative;
    border: 4px var(--footer-color) solid;
    padding: 30px;
    display: flex;
    flex-direction: column;
    width: 300px;
    height: 80vh;
    border-radius: 20px;
    overflow: hidden;
    background: var(--primary-color);
    transition: var(--theme-transition);
}

header {
    display: flex;
    flex-direction: column;
}

.heading {
    font-weight: 900;
    color: var(--text-color);
}

.theme_toogle {
    text-align: right;
    margin-right: -15px;

}

.theme_toogle_btn {
    min-width: 30px;
    min-height: 30px;
    background-color: transparent;
    border: none;
    outline: none;
    background-image: var(--theme-btn);
    background-repeat: no-repeat;
    background-size: 80%;
    background-position: center;
    padding: 20px;
    cursor: pointer;
}

.theme_toogle_btn:hover {
    background-size: 85%;
    transition: 0.5s;
    transform: rotate(90deg);
}

.heading {
    font-size: 30px;
}

.tasks {
    margin: 20px 0px;
    overflow: hidden;
    padding-right: 15p;
}

#tasksList {
    padding: 0px;
}

.task_list_empty {
    transition: 0s;
    background-position: center;
    background-size: 50%;
    background-repeat: no-repeat;
    background-image: var(--container-bg);

}

.task_item {
    list-style-type: none;
    border: 1px var(--secondary-color) solid;
    padding: 10px;
    display: flex;
    flex-direction: row;
    align-items: center;
    border-radius: 7px;
    margin-bottom: 20px;
    background-color: var(--task-color);
    color: var(--text-color);
}

.task_item:hover {
    transition: 0.5s;
    /* border: 1px rgba(148, 148, 148, 0.63) solid; */
    cursor: pointer;
    background-color:rgba(226, 226, 226, 0.192);

}

.task_check_btn {
    width: 10px;
    height: 10px;
    margin-right: 16px;
    padding: 3px;
    border: 2px var(--secondary-color) solid;
    /* color: var(--primary-color); */
    background-position: center;
    background-size: contain;
    border-radius: 50%;
    border: 2px grey solid;
    cursor: pointer;
}

.task_check_btn:hover {
    background-image: url('assets/complete.svg');
    /* opacity: 0.5; */
    filter: var(--filter);

}

.task_bio {
    font-size: 18px;
}



.task-completed {
    transition: 0.5s;
    transform: scale(90%);
    text-decoration: line-through;
    color: rgb(150, 150, 150);
    opacity: 0;

}

footer {
    position: absolute;
    bottom: 0px;
    padding: 15px 10px;
    min-width: 100%;
    background-color: var(--footer-color);
    left: 0px;
    border: 5px var(--footer-color) solid;
}

footer form {
    display: flex;
    flex-direction: row;
    align-content: center;
}

#new_task_input {
    min-width: 250px;
    margin-right: 40px;
    font-size: 20px;
    color: white;
    background-color: transparent;
    border: none;
    border-bottom: 1px rgba(255, 255, 255, 0.267) solid;
}

#new_task_input::placeholder {
    color: rgba(255, 255, 255, 0.589);
    font-size: 20px;
    font-family: "Times New Roman";
}

#new_task_input_btn {
    width: 30px;
    height: 30px;
    background-color: transparent;
    border: none;
    background-image: url('./assets/new.svg');
    background-repeat: no-repeat;
    background-size: 80%;
    cursor: pointer;
}

.taskCompleted {
    visibility: hidden;
}

@media screen and (max-width : 600px) {

    body {
        margin: 0px;
        padding: 0px;
        align-items: flex-start;
        height: 100vh;
        background-color: var(--bg-color);

    }

    .theme_toogle {
        margin-top: 30px;

    }

    .container {
        border: none;
        border-radius: 0px;
        width: 100%;
        height: 93vh;
        padding: 0px 20px;
    }

    #new_task_input {
        margin-right: 20px;
    }
}

7. Add JavaScript Functionality

Before starting any JS code, first you have to plan the working of your To-do App

Plan the working of to-do app

When user enter a new task in input and submit the form the task input value will go to a function , which creates a task element with checkbox using task input value. then add another function, which remove the task item when checkbox get checked.

Open your script.js file and style the to-do app. Follow these steps to add JS Functionality.

Refrence code is given below.



// Variables
var root = document.querySelector(':root')
var container = document.querySelector('.container');
var newTaskInput = document.getElementById('new_task_input')
var taskform = document.getElementById('new_task_form');
var tasksList = document.getElementById('tasksList');
var taskBtns = document.querySelectorAll('.task_check_btn');
var themeBtn = document.querySelector('.theme_toogle_btn');
// Do this when we submit the form
taskform.addEventListener('submit', function (e) {

    e.preventDefault();
    var newtaskInputValue = taskform.elements.new_task_input;


    addTask(newtaskInputValue.value)

    // Reset input value to empty
    newtaskInputValue.value = '';
    container.classList.remove('task_list_empty')


})

// To  add task in List
function addTask(newTask) {

    // Create li element and set its class
    const newTaskItem = document.createElement('li');
    newTaskItem.setAttribute('class', 'task_item');

    // Create checkbox  element and set its type and  class 

    const newCheckBtn = document.createElement('div');
    newCheckBtn.setAttribute('class', 'task_check_btn')

    // Create span  element and set its class and add new task input
    const newTaskBio = document.createElement('span');
    newTaskBio.setAttribute('class', 'task_bio')
    // Put value of input in it
    newTaskBio.innerText = newTask; // putting value of input in the li

    // append (insert) li tag in Ul
    tasksList.appendChild(newTaskItem)
    // append (insert) checkbox in li
    newTaskItem.appendChild(newCheckBtn)

    // append (insert) newtask in li
    newTaskItem.appendChild(newTaskBio)

    // Run this function when task is completed or checkbox is checked
    onTaskComplete(newCheckBtn)

}

// To remove the completed task
function onTaskComplete(btns) {

    btns.addEventListener('click', function (e) {
        var parent = e.toElement.parentElement;
        parent.classList.add('task-completed'); // To slide out the task to the right
        // Now we delete that tast which we have slided out
        setTimeout(() => {
            // Removing Parent Element of checkobx which is Li in 0.5 s
            parent.remove();
        }, 400);


        if (tasksList.childNodes.length == 1) {
            setTimeout(() => {
                container.classList.add('task_list_empty')

            }, 800);
        }

    })


}


// Dark mode

themeBtn.addEventListener('click', function () {


    var darkTheme = themeBtn.classList.toggle('dark')

    if (darkTheme) {

        root.style.setProperty('--theme-transition', '1s')
        root.style.setProperty('--primary-color', '#1E1E1E')
        root.style.setProperty('--secondary-color', '#3B3B3B')
        root.style.setProperty('--text-color', '#EAEAEA')
        root.style.setProperty('--task-color', '#3B3B3B')
        root.style.setProperty('--footer-color', '#1E1E1E')
        root.style.setProperty('--theme-btn', `url('assets/Light-theme-btn.svg')`)
        root.style.setProperty('--container-bg', `url('./assets/Dark-empty.svg')`)
        root.style.setProperty('--filter', 'invert()')

    } else {
        root.style.setProperty('transition', '1s')
        root.style.setProperty('--primary-color', 'white')
        root.style.setProperty('--secondary-color', '#1E1E1E')
        root.style.setProperty('--text-color', 'black')
        root.style.setProperty('--task-color', 'white')
        root.style.setProperty('--footer-color', '#1E1E1E')
        root.style.setProperty('--theme-btn', `url('assets/Dark-theme-btn.svg')`)
        root.style.setProperty('--container-bg', `url('./assets/Light-empty.svg')`)
    }
})

View Demo

Source Code

thekarandeveloper / To-Do-List

A Todo List built using HTML , CSS and Vanilla JS

Find Me on Instagram

Create a Simple calculator using vanilla JavaScript (Step-by-Step)

Karan Developer — Tue, 22 Jun 2021 09:31:08 +0000

This is a simple calculator created only with HTML, CSS and JS. It will enhance your basics of JavaScript which is more important than learning new technologies.

Prerequisite Knowledge

Basics of HTML, CSS, JavaScript and desire to create something new.

What you’ll learn

CSS Flexbox
Grid Layout
JS Array Methods
Logical Thinking
DOM Manipulations

Let's Start

As in our to do list we will create the sketch of calculator and then convert it into prototype.

1. Brainstorming

This is the most important stage of any project, when we have to print our ideas on a paper. Before we start to code, our mind should be clear about project looks and its features.

2. Create Prototype

You can use your favorite UX/UI designing software. Mine is Adobe Xd.

3. Create Project Directory

First create a folder called Simple Calculator.
Create another folder called Designs, where you can save all your project * assets.
Now create HTML file called index.html
Create a CSS file called style.css
Create a JavaScript file called script.js

4. Make HTML Structure

Open index.html into your favorite text editor and start creating the structure of calculator.



<!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>Calcualtor :: By Karan Kumar</title>
    </head>

    <body>
        <div class="container">
            <section id="Display-area">
                <div class="currentInput"></div>
                <div class="answerScreen">0</div>
            </section>
            <section class="keypad-btns">
                <button type="button" class="fun_btn" id="clear" value="">
                    C
                </button>
                <button type="button" class="fun_btn" id="erase" value="">
                    &#11013;
                </button>
                <button type="button" class="fun_btn" value="/">/</button>
                <button type="button" class="fun_btn" value="%">%</button>
                <button type="button" class="num_btn" value="7">7</button>
                <button type="button" class="num_btn" value="8">8</button>
                <button type="button" class="num_btn" value="9">9</button>
                <button type="button" class="fun_btn" value="*">x</button>
                <button type="button" class="num_btn" value="4">4</button>
                <button type="button" class="num_btn" value="5">5</button>
                <button type="button" class="num_btn" value="6">6</button>
                <button type="button" class="fun_btn" value="-">-</button>
                <button type="button" class="num_btn" value="1">1</button>
                <button type="button" class="num_btn" value="2">2</button>
                <button type="button" class="num_btn" value="3">3</button>
                <button type="button" class="fun_btn" value="+">+</button>
                <button type="button" class="num_btn" value="00">00</button>
                <button type="button" class="num_btn" value="0">0</button>
                <button type="button" class="num_btn" value=".">.</button>
                <button type="button" class="fun_btn" id="evaluate" value="">=</button>
            </section>
        </div>
    </body>
</html>

Output -

5. Add CSS Styling

In order to add CSS styling first we have to link our style.css with index.html file.




<head>
<link rel="stylesheet" href="style.css" />
</head>

And we can easily do that using link tag inside <head> tag of index.html file
Now open the style.css file and write this code to add styling.



* {
    font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
}

body {
    background-color: #f5f5f5;
    min-height: 90vh;
    display: flex;
    justify-content: center;
    align-items: center;
}

.container {
    background-color: #131313;
    max-width: 300px;
    height: auto;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    padding: 25px 35px;
    border-radius: 10px;
    user-select: none;
}

#Display-area {
    width: 100%;
    margin: 3vh 0;
    display: grid;
    grid-template-columns: 100%;
    grid-template-rows: repeat(2, minmax(40px, auto));
    word-wrap: break-word;
    padding-bottom: 20px;
    border-bottom: 1px rgba(128, 128, 128, 0.116) solid;
}

#Display-area .currentInput {
    /* display: flex; */
    text-align: right;
    height: 8vh;
    color: white;
    font-size: xx-large;
    line-height: 2;
    word-wrap: break-word;
}

#Display-area .answerScreen {
    text-align: right;
    color: rgba(150, 150, 150, 0.87);
    height: 7px;
    line-height: 3;
    font-size: larger;
}

.keypad-btns {
    display: grid;
    grid: repeat(5, 70px) / repeat(4, 70px);
    grid-row-gap: 20px;
    grid-column-gap: 20px;
}

.keypad-btns button {
    outline: none;
    border: none;
    border-radius: 10px;
    background-color: #131313;
    color: white;
    font-size: x-large;
}

.keypad-btns .fun_btn {
    color: #ff8800;
}

.num_btn:hover,.fun_btn:hover {
    background-color: rgba(29, 29, 29, 0.979);
}

Output -

6. Make it responsive

To make our calculator responsive, we have to use media queries.




@media only screen and (max-width: 600px) {
    body {
        background-color: #131313;
        align-items: flex-start;
    }
}

This code is saying that, When maximum width of body is 600px, then change the background color and align the items.

7. JavaScript Functionality

Before we start any JS code, first we have to plan the working of the calculator, like what should happen whenever user press a button.

When a button is pressed, Our function is going to check that what kind of button is clicked, If it’s a number or operator button then we have to insert value into the array. But if it is a function (erase, clear or evaluate) button then we have to perform the action according to the type of button.

First we have to link our script.js file with index.html file



<head>
        <script src="script.js" defer></script>
</head>

Here defer means, we are telling the browser to first parse all the files and then start executing scripts.

Now open the script .js file and add write this code in your script file.



// Variables
let currentInput = document.querySelector('.currentInput');
let answerScreen = document.querySelector('.answerScreen');
let buttons = document.querySelectorAll('button');
let erasebtn = document.querySelector('#erase');
let clearbtn = document.querySelector('#clear');
let evaluate = document.querySelector('#evaluate');



// Calculator Display
let realTimeScreenValue = []

// To Clear

clearbtn.addEventListener("click", () => {

    realTimeScreenValue = [''];
    answerScreen.innerHTML = 0;
    currentInput.className = 'currentInput'
    answerScreen.className = 'answerScreen';
    answerScreen.style.color = " rgba(150, 150, 150, 0.87)";
})

// Get value of any button clicked and display to the screen

buttons.forEach((btn) => {


    btn.addEventListener("click", () => {
        // when clicked button is not erased button 
        if (!btn.id.match('erase')) {
            // To display value on btn press
            realTimeScreenValue.push(btn.value)
            currentInput.innerHTML = realTimeScreenValue.join('');

            // To evaluate answer in real time
            if (btn.classList.contains('num_btn')) {

                answerScreen.innerHTML = eval(realTimeScreenValue.join(''));

            }

        }

        // When erase button is clicked
        if (btn.id.match('erase')) {
            realTimeScreenValue.pop();
            currentInput.innerHTML = realTimeScreenValue.join('');
            answerScreen.innerHTML = eval(realTimeScreenValue.join(''));
        }

        // When clicked button is evaluate button
        if (btn.id.match('evaluate')) {
            currentInput.className = 'answerScreen';
            answerScreen.className = 'currentInput';
            answerScreen.style.color = "white";
        }

        // To prevent undefined error in screen
        if (typeof eval(realTimeScreenValue.join('')) == 'undefined') {
            answerScreen.innerHTML = 0
        }

    })
})

Our work is now finished, This is how our calculator looks like when we add JavaScript functionality to it.

DEV Community: Karan Developer

How to create a custom Toggle Switch using CSS

Prerequisite Knowledge

How it works

Let's Start

1. Create HTML structure

Reference code is given below.

2. Hide the input element

3. Style the button body

Reference code is given below.

4. Create the toggle ball

Reference code is given below.

5. Adding animation

Output Preview

Try Demo

Find Me On

Create To-do List using Vanilla JavaScript

Prerequisite Knowledge

What I've Learned

Let's Start

1. Brainstorming

2. Sketching

3. Prototype

4. Setup Project Environment

5. Create HTML structure

Refrence code is given below.

6. Add CSS Styling

Refrence code is given below.

7. Add JavaScript Functionality

Plan the working of to-do app

Refrence code is given below.

View Demo

Source Code

thekarandeveloper / To-Do-List

A Todo List built using HTML , CSS and Vanilla JS

Find Me on Instagram

Create a Simple calculator using vanilla JavaScript (Step-by-Step)

Prerequisite Knowledge

What you’ll learn

Let's Start

1. Brainstorming

2. Create Prototype

3. Create Project Directory

4. Make HTML Structure

Output -

5. Add CSS Styling

Output -

6. Make it responsive

7. JavaScript Functionality

First we have to link our script.js file with index.html file

View Demo

Source Code : thekarandeveloper / Simple-Calculator Calculator using HTML, CSS and JS

thekarandeveloper / Simple-Calculator

Calculator using HTML, CSS and JS

Source Code :

thekarandeveloper / Simple-Calculator

Calculator using HTML, CSS and JS