Simple To Do List using Jquery

In this tutorial, I'll show you how to make Simple To Do List using Jquery.

Click Here for DEMO

First thing, we need HTML to create the input box to write the list and add button to add the list. Here is the code:

HTML
<h2>Simple To Do List</h2>
<div class="to-do-list">
   <ul>
      <li>Write the list in box and click on add to add them.</li>
      <li>Double click on list to remove them.</li>
   </ul>
   <form action="#" class="form">
      <fieldset>
         <div class="row">
            <input type="text" id="input">
            <input type="submit" value="Add" id="submit">
         </div>
      </fieldset>
   </form>
   <ol id="result"></ol>
</div>

Then, we need CSS to style up the things. Here I use SCSS so I'll share you SCSS code.
SCSS
.to-do-list{
   ul{
      margin: 0 0 20px;
      padding: 0;
      list-style: none;

      li{
         &:before{
            content: '-';
            margin: 0 5px 0 0;
         }
      }
   }

   input[type=submit] {
      background: $light-blue;
      color: $white;
      border: 0;
      padding: 5px 15px;
      height: 35px;

      &:hover{
         opacity: 0.8;
      }
   }

   #result{
      li{
         -moz-user-select: none;
         -webkit-user-select: none;
         -ms-user-select: none;
         user-select: none;
      }
   }
}

Finally, we need Jquery Code to make to do list work as we need. So, here's the Jquery below.
Jquery
$(function(){
 $('#submit').click(function(event){
  event.preventDefault();

  // get the value from input and append to <li>
  var textValue = $('#input').val();
  if(textValue.length < 1) {
   alert('Please write your list inside the box.');
  } else {
   $('#result').append('<li>' + textValue + '</li>');
   $('#input').val('');
  }
 });

 $('#result').on('dblclick', 'li', function(){
  $(this).fadeOut('slow').css('text-decoration', 'line-through');
 });

 $('#input').focus(function(){
  $(this).val('');
 });
});
I hope this is working well. If you have any thought or any new sharing, feel free to comment below. Cheers!!

Share this

Related Posts

2 comments

comments
14 March 2018 at 12:53 delete

Hi, Great.. Tutorial is just awesome..It is really helpful for a newbie like me.. I am a regular follower of your blog.
Really very informative post you shared here. Kindly keep blogging. If anyone wants to become a Front end developer learn from javascript and jquery training in chennai .
or learn thru Javascript Training in Chennai.
Nowadays JavaScript has tons of job opportunities on various vertical industry. javascript and jquery training in chennai

Reply
avatar