Created
October 24, 2015 10:37
-
-
Save pankajpatel/5cd20e31cd730edb9612 to your computer and use it in GitHub Desktop.
Core ToDo App with Parse and jQuery
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
//Parse.initialize("APPLICATION_ID", "JAVASCRIPT_KEY"); | |
//Use your "APPLICATION_ID" and "JAVASCRIPT_KEY" here for Parse.initialize | |
Parse.initialize('kjhsdhfkjhsd', 'kjhxdkfhkjdhsgjkhdg') | |
var ToDoObject = Parse.Object.extend("ToDo"); | |
var query = new Parse.Query(ToDoObject); | |
//Fetch all saved tasks in beginning | |
query.find({ | |
success: function(results) { | |
console.log("Successfully retrieved " + results.length + " tasks.", results); | |
// Do something with the returned Parse.Object values | |
for (var i = 0; i < results.length; i++) { | |
addTaskToList( results[i] ) | |
} | |
}, | |
error: function(error) { | |
console.error("Error: " + error.code + " " + error.message); | |
} | |
}); | |
//save task on the button click | |
$(document).on('click', '.change-task-status', function (e) { | |
var $checkBox = $(this); | |
var taskId = $(this).parent().attr('id'); | |
var q = new Parse.Query( ToDoObject ); | |
q.get( taskId, { | |
success: function (object) { | |
object.set('completed', isChecked ) | |
object.save(); | |
$checkBox.parent().remove(); | |
addTaskToList( object ) | |
}, | |
error: function (error) { | |
console.error("Error: " + error.code + " " + error.message); | |
} | |
} ) | |
}); | |
//save task on the button click | |
$('#saveTask').on('click', function (e) { | |
var task = {text: $('#task').val(), timeStamp: new Date(), completed: false }; | |
console.log( task ); | |
var todo = new ToDoObject(); | |
todo.save(task, { | |
success: function(object) { | |
$(".success").show(function(){ | |
$('#task').val(''); | |
//auto hide the success message after 2sec | |
setTimeout(function () { | |
$('.success').hide(); | |
}, 2000); | |
}); | |
addTaskToList( object ); | |
console.log( object ); | |
}, | |
error: function(model, error) { | |
$(".error").show(function(){ | |
//auto hide the error message after 2sec | |
setTimeout(function () { | |
$('.success').hide(); | |
}, 2000); | |
}); | |
} | |
}); | |
}) | |
//function to append the html of task to the task list element | |
function addTaskToList( taskObjFromParse ) { | |
if( taskObjFromParse.get('completed') ){ | |
//Add to completed tasks list | |
$('#completedTaskList').append( prepareTask( taskObjFromParse ) ); | |
} else { | |
//Add to the active tasks list | |
$('#taskList').append( prepareTask( taskObjFromParse ) ); | |
} | |
} | |
//Prepare the HTML for individual task from the task object received from parse | |
function prepareTask( taskObjFromParse ) { | |
var strikeClass = taskObjFromParse.get('completed') == true ? 'strikethrough' : ''; | |
var completed = taskObjFromParse.get('completed') == true ? 'checked' : ''; | |
return '<li class="task '+ strikeClass +'" id="'+taskObjFromParse.id+'" \ | |
title="Added on '+taskObjFromParse.get('timeStamp')+'">\ | |
<input type="checkbox" class="change-task-status" '+ completed +' />\ | |
'+taskObjFromParse.get('text')+'</li>'; | |
} |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment