Dynamic Todo List Maker with Delete Button

[Michael Mc]

                                                
                                                <!-- 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>                                                
                                            

[Author]

Posts