TODO

 

ToDo Task's

HTML

<div class="container">

<input type="text" class="add" placeholder="Add Your Task's">

<div class="not-com">

<h1>Not Completed</h1>

<!-- <div class="task">

&nbsp&nbsp&nbsp&nbsp Test

<i class="fas fa-trash"></i>

<i class="fas fa-check"></i>

</div> -->

</div>

<div class="com">

<h1>Completed</h1>

<!-- <div class="task-com">

&nbsp&nbsp&nbsp&nbsp Test

<i class="fas fa-trash"></i>

</div> -->

</div>

</div>

CSS

@import url('https://fonts.googleapis.com/css2?family=Poppins:ital,

wght@0,100;0,200;0,300;1,100;1,200;1,300&display=swap');

*{

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

box-sizing: border-box;

}

body{

background: #D3CCE3;

background: -webkit-linear-gradient(to right, #E9E4F0, #D3CCE3);

background: linear-gradient(to right, #E9E4F0, #D3CCE3);

min-height: 100vh;

}

.add{

outline: none;

border: none;

border-bottom: 2px solid #000;

width: 99%;

font-size: 18px;

padding-top: 20px;

background: none;

}

input:focus::placeholder{

color: #000;

}

input[type="text"]{

padding-left: 20px;

}

.task{

min-width: 90%;

height: 40px;

border: 1px solid black;

margin: 10px;

border-radius: 4px;

font-size: 18px;

padding: 2px;

overflow: hidden;

box-shadow: rgba(50, 50, 93, 0.25) 0px 30px 60px -12px inset,

rgba(0, 0, 0, 0.3) 0px 18px 36px -18px inset;

}

i{

float: right;

margin: 4px;

padding-right: 15px;

cursor: pointer;

}

i:hover{

color: #3535357e;

}

.task-com{

min-width: 90%;

height: 35px;

border: 1px solid black;

margin: 10px;

border-radius: 4px;

font-size: 18px;

padding: 2px;

box-shadow: rgba(50, 50, 93, 0.25) 0px 30px 60px -12px inset,

rgba(0, 0, 0, 0.3) 0px 18px 36px -18px inset;

}

h1{

border-bottom: 1px solid #000;

}

JS

     <script>

$(".add").on("keyup",function(e){

if(e.keyCode == 13 && $(".add").val() !=""){

var task = $(" <div class='task'></div>").text($(".add")

.val());

var del = $(" <i class='fas fa-trash'></i>").click

(function(){

var p = $(this).parent();

p.fadeOut(function(){

p.remove();

})

});

var check = $(" <i class='fas fa-check'></i>").click

(function(){

var p = $(this).parent();

p.fadeOut(function(){

$(".com").append(p);

p.fadeIn();

check.hide();

});

});

task.append(del,check);

$(".not-com").append(task);

$(".add").val("");

}

});

</script>

Font-Awesome

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/

font-awesome/6.0.0-beta2/css/all.min.css" integrity="sha512-YWzhKL2whUzgi

heMoBFwW8CKV4qpHQAEuvilg9FAn5VJUDwKZZxkJNuGM4XkWuk94WCrrwslk8yWNGmY1EduTA

==" crossorigin="anonymous" referrerpolicy="no-referrer" />

jQuery Ajax

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.4.1/

jquery.min.js"></script>