Creating to do list using jquery and jquery ui [on hold]











up vote
-1
down vote

favorite












Just create todo list using jquery and jquery UI. I want to add an item to my "To BE Done" list either press enter or click a button.



$(document).ready(function(){
$('#add-todo').button({
icons:{
primary: "ui-icon-circle-plus"
}
}).click(function(){
$('#new-todo').dialog('open');
});//end click
$('#new-todo').dialog({
modal : true,
autoOpen : false,
buttons :{
"add task" : function(){
var taskName = $('#task').val();
if (taskName === ''){
return false;
}
var taskHTML = '<li><span class= "done">%</span>';
taskHTML += '<span class="delete">x</span>';
taskHTML += '<span class="task"></span></li>';
var $newTask = $(taskHTML);
$newTask.find('.task').text(taskName);
$newTask.hide();
$('#todo-list').prepend($newTask);
$newTask.show('clip', 250).effect('highlight', 1000);
$(this).dialog('close');
},
"Cancel" : function(){
$(this).dialog('close');
}
},
close: function(){
$('#new-todo input').val('');
}
$('').click(function(){

});//on click
});//end dialog



//mark as complete
$('#todo-list').on('click', '.done', function(){
var $taskItem = $(this).parent('li');
$taskItem.slideUp(250, function(){
var $this = $(this);
$this.detach();
$('#completed-list').prepend($this);
$this.slideDown();
});
});//end on
//make both lists sortable
$('.sortlist').sortable({
connectWith : '.sortlist',
cursor : 'pointer',
placeholder : 'ui-state-highlight',
cancel : '.delete, .done'
});//end sortable

//deleting taskHTML
$('.sortlist').on('click', '.delete', function(){
$(this).parent('li').effect('puff', function(){
$(this).remove();
});//end effect
});//end on

});//end ready{









share|improve this question







New contributor




Rudulph Val Nario is a new contributor to this site. Take care in asking for clarification, commenting, and answering.
Check out our Code of Conduct.











put on hold as off-topic by 200_success, Quill, Jamal 2 hours ago


This question appears to be off-topic. The users who voted to close gave this specific reason:


  • "Code not implemented or not working as intended: Code Review is a community where programmers peer-review your working code to address issues such as security, maintainability, performance, and scalability. We require that the code be working correctly, to the best of the author's knowledge, before proceeding with a review." – 200_success, Quill, Jamal

If this question can be reworded to fit the rules in the help center, please edit the question.

















    up vote
    -1
    down vote

    favorite












    Just create todo list using jquery and jquery UI. I want to add an item to my "To BE Done" list either press enter or click a button.



    $(document).ready(function(){
    $('#add-todo').button({
    icons:{
    primary: "ui-icon-circle-plus"
    }
    }).click(function(){
    $('#new-todo').dialog('open');
    });//end click
    $('#new-todo').dialog({
    modal : true,
    autoOpen : false,
    buttons :{
    "add task" : function(){
    var taskName = $('#task').val();
    if (taskName === ''){
    return false;
    }
    var taskHTML = '<li><span class= "done">%</span>';
    taskHTML += '<span class="delete">x</span>';
    taskHTML += '<span class="task"></span></li>';
    var $newTask = $(taskHTML);
    $newTask.find('.task').text(taskName);
    $newTask.hide();
    $('#todo-list').prepend($newTask);
    $newTask.show('clip', 250).effect('highlight', 1000);
    $(this).dialog('close');
    },
    "Cancel" : function(){
    $(this).dialog('close');
    }
    },
    close: function(){
    $('#new-todo input').val('');
    }
    $('').click(function(){

    });//on click
    });//end dialog



    //mark as complete
    $('#todo-list').on('click', '.done', function(){
    var $taskItem = $(this).parent('li');
    $taskItem.slideUp(250, function(){
    var $this = $(this);
    $this.detach();
    $('#completed-list').prepend($this);
    $this.slideDown();
    });
    });//end on
    //make both lists sortable
    $('.sortlist').sortable({
    connectWith : '.sortlist',
    cursor : 'pointer',
    placeholder : 'ui-state-highlight',
    cancel : '.delete, .done'
    });//end sortable

    //deleting taskHTML
    $('.sortlist').on('click', '.delete', function(){
    $(this).parent('li').effect('puff', function(){
    $(this).remove();
    });//end effect
    });//end on

    });//end ready{









    share|improve this question







    New contributor




    Rudulph Val Nario is a new contributor to this site. Take care in asking for clarification, commenting, and answering.
    Check out our Code of Conduct.











    put on hold as off-topic by 200_success, Quill, Jamal 2 hours ago


    This question appears to be off-topic. The users who voted to close gave this specific reason:


    • "Code not implemented or not working as intended: Code Review is a community where programmers peer-review your working code to address issues such as security, maintainability, performance, and scalability. We require that the code be working correctly, to the best of the author's knowledge, before proceeding with a review." – 200_success, Quill, Jamal

    If this question can be reworded to fit the rules in the help center, please edit the question.















      up vote
      -1
      down vote

      favorite









      up vote
      -1
      down vote

      favorite











      Just create todo list using jquery and jquery UI. I want to add an item to my "To BE Done" list either press enter or click a button.



      $(document).ready(function(){
      $('#add-todo').button({
      icons:{
      primary: "ui-icon-circle-plus"
      }
      }).click(function(){
      $('#new-todo').dialog('open');
      });//end click
      $('#new-todo').dialog({
      modal : true,
      autoOpen : false,
      buttons :{
      "add task" : function(){
      var taskName = $('#task').val();
      if (taskName === ''){
      return false;
      }
      var taskHTML = '<li><span class= "done">%</span>';
      taskHTML += '<span class="delete">x</span>';
      taskHTML += '<span class="task"></span></li>';
      var $newTask = $(taskHTML);
      $newTask.find('.task').text(taskName);
      $newTask.hide();
      $('#todo-list').prepend($newTask);
      $newTask.show('clip', 250).effect('highlight', 1000);
      $(this).dialog('close');
      },
      "Cancel" : function(){
      $(this).dialog('close');
      }
      },
      close: function(){
      $('#new-todo input').val('');
      }
      $('').click(function(){

      });//on click
      });//end dialog



      //mark as complete
      $('#todo-list').on('click', '.done', function(){
      var $taskItem = $(this).parent('li');
      $taskItem.slideUp(250, function(){
      var $this = $(this);
      $this.detach();
      $('#completed-list').prepend($this);
      $this.slideDown();
      });
      });//end on
      //make both lists sortable
      $('.sortlist').sortable({
      connectWith : '.sortlist',
      cursor : 'pointer',
      placeholder : 'ui-state-highlight',
      cancel : '.delete, .done'
      });//end sortable

      //deleting taskHTML
      $('.sortlist').on('click', '.delete', function(){
      $(this).parent('li').effect('puff', function(){
      $(this).remove();
      });//end effect
      });//end on

      });//end ready{









      share|improve this question







      New contributor




      Rudulph Val Nario is a new contributor to this site. Take care in asking for clarification, commenting, and answering.
      Check out our Code of Conduct.











      Just create todo list using jquery and jquery UI. I want to add an item to my "To BE Done" list either press enter or click a button.



      $(document).ready(function(){
      $('#add-todo').button({
      icons:{
      primary: "ui-icon-circle-plus"
      }
      }).click(function(){
      $('#new-todo').dialog('open');
      });//end click
      $('#new-todo').dialog({
      modal : true,
      autoOpen : false,
      buttons :{
      "add task" : function(){
      var taskName = $('#task').val();
      if (taskName === ''){
      return false;
      }
      var taskHTML = '<li><span class= "done">%</span>';
      taskHTML += '<span class="delete">x</span>';
      taskHTML += '<span class="task"></span></li>';
      var $newTask = $(taskHTML);
      $newTask.find('.task').text(taskName);
      $newTask.hide();
      $('#todo-list').prepend($newTask);
      $newTask.show('clip', 250).effect('highlight', 1000);
      $(this).dialog('close');
      },
      "Cancel" : function(){
      $(this).dialog('close');
      }
      },
      close: function(){
      $('#new-todo input').val('');
      }
      $('').click(function(){

      });//on click
      });//end dialog



      //mark as complete
      $('#todo-list').on('click', '.done', function(){
      var $taskItem = $(this).parent('li');
      $taskItem.slideUp(250, function(){
      var $this = $(this);
      $this.detach();
      $('#completed-list').prepend($this);
      $this.slideDown();
      });
      });//end on
      //make both lists sortable
      $('.sortlist').sortable({
      connectWith : '.sortlist',
      cursor : 'pointer',
      placeholder : 'ui-state-highlight',
      cancel : '.delete, .done'
      });//end sortable

      //deleting taskHTML
      $('.sortlist').on('click', '.delete', function(){
      $(this).parent('li').effect('puff', function(){
      $(this).remove();
      });//end effect
      });//end on

      });//end ready{






      jquery jquery-ui






      share|improve this question







      New contributor




      Rudulph Val Nario is a new contributor to this site. Take care in asking for clarification, commenting, and answering.
      Check out our Code of Conduct.











      share|improve this question







      New contributor




      Rudulph Val Nario is a new contributor to this site. Take care in asking for clarification, commenting, and answering.
      Check out our Code of Conduct.









      share|improve this question




      share|improve this question






      New contributor




      Rudulph Val Nario is a new contributor to this site. Take care in asking for clarification, commenting, and answering.
      Check out our Code of Conduct.









      asked 9 hours ago









      Rudulph Val Nario

      1




      1




      New contributor




      Rudulph Val Nario is a new contributor to this site. Take care in asking for clarification, commenting, and answering.
      Check out our Code of Conduct.





      New contributor





      Rudulph Val Nario is a new contributor to this site. Take care in asking for clarification, commenting, and answering.
      Check out our Code of Conduct.






      Rudulph Val Nario is a new contributor to this site. Take care in asking for clarification, commenting, and answering.
      Check out our Code of Conduct.




      put on hold as off-topic by 200_success, Quill, Jamal 2 hours ago


      This question appears to be off-topic. The users who voted to close gave this specific reason:


      • "Code not implemented or not working as intended: Code Review is a community where programmers peer-review your working code to address issues such as security, maintainability, performance, and scalability. We require that the code be working correctly, to the best of the author's knowledge, before proceeding with a review." – 200_success, Quill, Jamal

      If this question can be reworded to fit the rules in the help center, please edit the question.




      put on hold as off-topic by 200_success, Quill, Jamal 2 hours ago


      This question appears to be off-topic. The users who voted to close gave this specific reason:


      • "Code not implemented or not working as intended: Code Review is a community where programmers peer-review your working code to address issues such as security, maintainability, performance, and scalability. We require that the code be working correctly, to the best of the author's knowledge, before proceeding with a review." – 200_success, Quill, Jamal

      If this question can be reworded to fit the rules in the help center, please edit the question.



























          active

          oldest

          votes






















          active

          oldest

          votes













          active

          oldest

          votes









          active

          oldest

          votes






          active

          oldest

          votes

          Popular posts from this blog

          Create new schema in PostgreSQL using DBeaver

          Deepest pit of an array with Javascript: test on Codility

          Costa Masnaga