JSFiddle - React, Tailwind, and code Playground

by zahra shokri

HTML

<!DOCTYPE html>
<html>
<head>
    <title>todo-List</title>
    <link rel="preconnect" href="https://fonts.gstatic.com">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.1/css/all.min.css" integrity="sha512-+4zCK9k+qNFUR5X+cKL9EIR+ZOhtIloNl9GIKS57V1MyNsYpYcUrUeQc9vNfzsWfV28IaLL3i96P9sdNyeRssA==" crossorigin="anonymous" />
    <link href="https://fonts.googleapis.com/css2?family=Poppins:wght@100&display=swap" rel="stylesheet">
    <link rel="stylesheet" href="Untitled-1.css">
</head>
<body>
    <header>
        <h1>TO DO List </h1>
    </header> 
    <form>   
        <input type="text" class="todo-input">
        <button type="submit" class="todo-button">
            <i class="fas fa-plus-square"></i>
            </button>
            <div class="select"><select name="todos" class="filter-todo">
             <option value="all">ALL</option>
             <option value="completed">Completed</option>
             <option value="uncompleted">Uncompleted</option>

            </select>
        </div>
    </form> 
    <div class="todo-container">
        <ul class="todo-list"></ul>
    </div>
    
    <script src="Un.js"></script>
</body>
</html>

CSS

* {
    margin: 0;
    padding:0;
    box-sizing: border-box;
}
body{
    background-color: rgb(204, 242, 117);
    color: purple;
    font-family: "Poppins",sans-serif;
    min-height: 100vh;
}

header{
    padding-top: 15vh;
    font-size: 2rem;
    font-weight: 700;
    padding-right: 30vh;
}
header,
form{
    min-height: 20vh;
    display: flex;
    justify-content: center;
    align-items: center;
}

form input,
form button{
    padding: 0.5rem;
    font-size: 2rem;
    background: white;
    border: none;
}

form button{
    color: orange;
    background: white;
    cursor: pointer;
    transition: all 0.3s ease;
}


form button:hover{
    background: orange;
    color: white;
}
.todo-container{
    display: flex;
    justify-content: center;
    align-items: center;
}
.todo-list{
    min-width: 60%;
    list-style: none;
}
.todo{
    margin: 00.5rem;
    background: white;
    color: black;
    font-weight: 800;
    font-size: 2rem;
    display: flex;
    justify-content: space-between;
    align-items: center;
}
.todo li{
    flex: 1;
}
.trash-btn,
.complete-btn,
.edit-btn{
background-color: orange;
color: white;
border: none;
padding: 1rem;
cursor: pointer;
font-size: 1rem;
}
.complete-btn{
    background: green;
}
.edit-btn{
    background: green;
}
.todo-item{
    padding:0rem 0.5rem;
}
.fa-trash,
.fa-check{
pointer-events: none;
}
.completed{
    text-decoration: line-through;
    opacity: 0.5;
}
.select{
    margin:1rem;
    position: relative;
    overflow: hidden;
}
select{
    color: purple;
    width: 10rem;
    cursor: pointer;
    padding: 1rem;
    font-weight: 500;
}
.select::after{
    position: absolute;
    padding: 1rem;
    pointer-events: none ;
}

JavaScript

var todoInput=document.querySelector(".todo-input");
var todoButton=document.querySelector(".todo-button");
var todoList=document.querySelector(".todo-list");
var filterOption=document.querySelector(".filter-todo");
//Event listeners
todoButton.addEventListener("click", addTodo);
todoList.addEventListener("click",deleteCheck);
filterOption.addEventListener("click", filterTodo);

function addTodo(event){
    event.preventDefault();
    var todoDiv=document.createElement("div");
    todoDiv.classList.add("todo");
    var newTodo=document.createElement("li");
    newTodo.innerText= todoInput.value;
    newTodo.classList.add("todo-item");
    todoDiv.appendChild(newTodo);
    var completedButton=document.createElement("button");
    completedButton.innerHTML='<i class="fas fa-check"></i>';
    completedButton.classList.add("complete-btn");
    todoDiv.appendChild(completedButton);
    var trashButton=document.createElement("button");
    trashButton.innerHTML='<i class= "fas fa-trash"></i>';
    trashButton.classList.add("trash-btn");
    todoDiv.appendChild(trashButton);
    var editButton=document.createElement("button");
    editButton.innerHTML='<i class= "fas fa-edit"></i>';
    editButton.classList.add("edit-btn");
    todoDiv.appendChild(editButton);
    todoList.appendChild(todoDiv);
    todoInput.value="";
}

function deleteCheck(e){
    var item= e.target;
    if (item.classList[0]==="trash-btn"){
var todo=item.parentElement;
todo.remove();
    }
if  (item.classList[0]==="complete-btn"){
    var todo=item.parentElement;
    todo.classList.toggle("completed");
}

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

//}

}


function filterTodo(e){
var 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";
        }
...