Join the social network of Tech Nerds, increase skill rank, get work, manage projects...
 
  • How to create to-do list using jQuery?

    • 0
    • 0
    • 0
    • 0
    • 0
    • 0
    • 0
    • 0
    • 211
    Comment on it

    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/

 0 Comment(s)

Sign In
                           OR                           
                           OR                           
Register

Sign up using

                           OR                           
Forgot Password
Fill out the form below and instructions to reset your password will be emailed to you:
Reset Password
Fill out the form below and reset your password: