Dynamic Todo List Maker with Delete Button
Written by 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:
Let's stay in touch
Get the latest and greatest javascript codes directly to your mail
TRENDING POST
VISITORS
Online Users:
12
Recent Members:
admin_js, bloxio, yqaice, flooketsu, phuang_test
Comments
Here you can leave us commments. Let us know what you think about this code tutorial!