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{
jquery jquery-ui
New contributor
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.
add a comment |
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{
jquery jquery-ui
New contributor
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.
add a comment |
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{
jquery jquery-ui
New contributor
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
jquery jquery-ui
New contributor
New contributor
New contributor
asked 9 hours ago
Rudulph Val Nario
1
1
New contributor
New contributor
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.
add a comment |
add a comment |
active
oldest
votes
active
oldest
votes
active
oldest
votes
active
oldest
votes
active
oldest
votes