Dynamic Todo List Maker with Delete Button

Written by @kerixa 10 April 2021

Forms are used in many advanced websites, and one of the important things in these forms is to create dynamic lists by users, in which the number of list items can be increased or decreased. In the following code, this possibility is provided and we have a dynamic todo list which creates new items by hitting a button. For each created item, we have also a delete and select buttons.

Code Snippet:

                                                
                                                <!-- this script is provided by https://www.javascriptfreecode.com coded by: Kerixa Inc. -->


<style>

* {

margin: 0;

padding: 0;

box-sizing: border-box;

}



body {

background-color: #2e2e2e;

color: grey;

font-family: "Poppins", sans-serif;

min-height: 100vh;

}





header {

font-size: 1.5rem;

}



input,

button {

outline: none;

}







header,

form {

min-height: 20vh;

display: flex;

justify-content: center;

align-items: center;

}



form input {

padding: 0.5rem;

font-size: 2rem;

border: none;

background: white;

width:300px;

}

form button {

padding: 0.5rem;

font-size: 2.4rem;

border: none;

background: white;

}



form button {

color: grey;

background: white;

cursor: pointer;

transition: all 0.3s ease;

}



form button:hover {

    background: grey;

    color: white;

}



.todo-container {

display: flex;

justify-content: center;

align-items: center;

}



.todo-list {

min-width: 80%;

list-style: none;

}



.todo {

margin: 0.5rem;

background: white;

color: black;

font-size: 1.5rem;

display: flex;

justify-content: space-between;

align-items: center;

transition: all 0.5s ease;

    

}



.todo li {

flex: 1;

}



.trash-btn,

.complete-btn {

background: #c4455c;

color: white;

border: none;

padding: 1rem;

cursor: pointer;

font-size: 1rem;

}



.complete-btn {

background: #69bf72;

}



.todo-item {

padding: 0 0.5rem;

}



.fa-trash,

.fa-check {

pointer-events: none;

}



.completed {

text-decoration: line-through;

opacity: 0.5;

}



.fall {

transform: translateY(8rem) rotateZ(20deg);

opacity: 0;

}



select {

-webkit-appearcance: none;

-moz-appearcance: none;

appearance: none;

outline: none;

border: none;

}



.select {

margin: 1rem;

position: relative;

overflow: hidden;

}



select {

color: grey;

width: 10rem;

cursor: pointer;

padding: 1rem;

letter-spacing: 0.08rem;

}



.select::after {

content: "\25BC";

position: absolute;

background: grey;

color: white;

top: 0;

right: 0;

padding: 1rem;

pointer-events: none;

transition: all 0.3s ease;

}



.select:hover::after {

background: white;

color: grey;

}

</style>

<link href="https://fonts.googleapis.com/css2?family=Poppins:wght@300&display=swap" rel="stylesheet">

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.2/css/all.min.css" />



<header>

    <h1> List Maker</h1>

</header>



<form>

    <input type="text" class="todo-input">

    <button class="todo-button" type="submit">

        <i class="fas fa-plus-square"></i>

    </button>

</form>



<div class="todo-container">

    <ul class="todo-list"></ul>

</div>



<script>

// Selectors

const todoInput = document.querySelector('.todo-input');

const todoButton = document.querySelector('.todo-button');

const todoList = document.querySelector('.todo-list');

const filterOption = document.querySelector('.filter-todo');







// Event Listeners

todoButton.addEventListener('click', addTodo);

todoList.addEventListener('click', deleteCheck);

filterOption.addEventListener('input', filterTodo);





// Functions



function addTodo(event) {

    event.preventDefault();

    // Todo div

    const todoDiv = document.createElement('div');

    todoDiv.classList.add("todo");

    // Create Li

    const newTodo = document.createElement('li');

    newTodo.innerText = todoInput.value;

    newTodo.classList.add('todo-item');

    todoDiv.appendChild(newTodo);

    // Check mark button

    const completedButton = document.createElement('button');

    completedButton.innerHTML = '<i class="fas fa-check"></i>';

    completedButton.classList.add("complete-btn");

    todoDiv.appendChild(completedButton);

    // Check trash  button

    const trashButton = document.createElement('button');

    trashButton.innerHTML = '<i class="fas fa-trash"></i>';

    trashButton.classList.add("trash-btn");

    todoDiv.appendChild(trashButton);

    // Append to list

    todoList.appendChild(todoDiv);

    // Clear Todo Input value

    todoInput.value = "";

}



function deleteCheck(e) {

    const item = e.target;

    // delete todo

    if (item.classList[0] === "trash-btn") {

        const todo = item.parentElement;

        // animation

        todo.classList.add("fall");

        todo.addEventListener('transitionend', function() {

            todo.remove();

        });

    }



    // Check mark

    if (item.classList[0] === "complete-btn") {

        const todo = item.parentElement;

        todo.classList.toggle("completed");

    }

}





function filterTodo(e) {

    const todos = todoList.childNodes;

    todos.forEach(function(todo) {

        switch (e.target.value) {

            case "all":

                todo.style.display = "flex";

                break;

            case "completed":

                if (todo.classList.contains("completed")) {

                    todo.style.display = "flex";

                } else {

                    todo.style.display = "none";

                }

                break;

            case "incompleted":

                if (!todo.classList.contains("completed")) {

                    todo.style.display = "flex";

                } else {

                    todo.style.display = "none";

                }

                break;

        }

    });

}

</script><a target='_blank' href='https://www.javascriptfreecode.com' style='font-size: 8pt; text-decoration: none'>JavaScript Best Codes</a>                                                
                                            

Example:


About @kerixa

I am Krishna Eydat. I studied Software Engineering at University of Waterloo in Canada. I lead a few tech companies. I am passionate about the way we are connected. I would like to be part of something big or be the big deal!

K
Tags:
list

Comments


Here you can leave us commments. Let us know what you think about this code tutorial!

0 / 300

TRENDING POST
1
2
3
4
5
VISITORS
Online Users: 12
Recent Members: CryptoTech, AstroAudrey, admin_js, bloxio, yqaice
advertisement 2