In this blog, I am going to explain how to make a simple to-do list with the help of jQuery. The to-do list which we are going to create will contain an input box and an add button, so when we put our task to the input box and click the add button then that task will get added to our to-do list. we can add many tasks to our to-do list in a similar manner.

when our task gets completed after then we can remove that task from our list by simply clicking two times on it.

we can also arrange our task on a priority basis by simply drag and drop it .

Below is theHTMLl code for to-do list :-

<div class="wrapper">
		<h2>Simple To Do List</h2>  
		<form name="List">
			<input type="text" name="AddItem"/>
		</form>
    
		<div id="btn">Add</div>
		<br/>
		<ol></ol>
      
      
    
</div>

Below is the jQuery code :-

	$(document).ready(
		    function(){
		        $('#btn').click(
		            function(){
		                var add = $('input[name=AddItem]').val(); // on add button click the task which we put in the input box naming AddItem get appeneded to ol list 
		                 $('ol').append('<li>' + add + '</li>');
		            });
		       
		       $("input[name=AddItem]").keyup(function(event){
		          if(event.keyCode == 13){
		            $("#btn").click(); // when we click on enter button whose keyCode is 13 then our add button get automatically click and its function get call
		          }         
		      });
		      
		      $(document).on('dblclick','li', function(){
		        $(this).toggleClass('cross_line').fadeOut('slow');  // when we double click the list item .cross_line class get call and then  li get faded out.
		      });
		      
		      $('input').focus(function() {
		        $(this).val('');
		      });
		      
		      $('ol').sortable();  
		      
		    }
	);

Below is the css for above html code :-

.wrapper{
padding: 25px;
width: 350px;
margin: 0 auto;
margin-top: 40px;
background: white;
border-radius: 5px;
}


input{
padding: 5px 30px ;
}

#btn{
display: inline-block;
background-color:#28ADE5;
color:#000;
border-radius: 6px;
text-align:center;
margin-top:3px;
padding: 5px 20px;
}

#btn:hover{
cursor: pointer;
}

ol {padding-left: 20px;}

ol li {padding: 5px;color:#000;}

.cross_line{text-decoration: line-through;}

li:hover{
  cursor: pointer;
 }

Working demo:- https://jsfiddle.net/0a5z4rcj/2/