Get started with jQuery – Part 2

November 2016 · 3 minute read

Get started with jQuery! This tutorial was written using Mac OS and Sublime Text 3 as the text editor. It assumes you have configured your local server to read project directories in either /Sites or another location on your machine and that you have a sound understanding on html and css concepts. It continues on from part 1 http://www.selenasmall.com/get-started-with-jquery-part-1

A repo for the full code of this example is available at https://github.com/SelenaSmall/query-todo

11. Next, the ‘Complete’ button needs to move the entire #todo item to the Complete section and the ‘Complete’ button needs ot disappear as this action will no longer work. First we can start with baby steps and when the tasks is complete, both the task and it’s ‘complete’ button will change colour with the following jQuery & css

// Complete task 
$('button.task-complete').click(function() { 
	$(this).parent().addClass('complete');  
	$(this).addClass('complete');
});

.complete {	  
	background-color: red; 
}

12. Now that we have clearly identified which elements will be moved and that it works, we can simply create a variable and add the following lines to the complete function to ensure the div moves the ‘Complete’ section:

var complete = $(this).parent();
  
$(this).parent().parent().next().append(complete);

13. And lastly, once the tasks is appropriately moved the ‘Completed’ section, we can modify the complete button with the following code:

$(this).html('uncomplete');

14. We now need to create a new function that will handle the click from the new ‘uncomplete’ button.

// Uncomplete task
$('button.task-uncomplete').click(function() {
	var active = $(this).parent();

	$(this).parent().parent().prev().append(active);
	$(this).parent().removeClass('complete');
	$(this).removeClass('task-uncomplete');
	$(this).addClass('task-complete');
	$(this).html('complete');
});

15. Now we can work the ‘Create’ new tasks function. First to ensure task will be created in the corretc place, we need to work out the order of elements as jQuery will ready. Add the following code to your script.js inside the document.ready block. This will append the new task to your ‘Active’ section:

// Create new task
$('button.task-create').click(function() {
	$('div.task-list#active').append('<div class="todo-task"></div>');     
	return false;
});

16. We need to declare variables for the items we want to display in the new #todo and ensure they are created in the appropriate place when the ‘Create task’ button is clicked. Below, we will create varaible for the title and description before appending a new note to the ‘Active’ section containing the header and description that was input by our user.

var taskTitle = $('input[placeholder=Title]').val();
var taskDesc = $('textarea[placeholder=Description]').val();
      
	$('div.task-list#active').append('<div class="todo-task"></div>');
	$('div.todo-task').append(taskTitle).addClass('task-header');    
	$('div.todo-task').append(taskDesc).addClass('task-description');

17. To ensure the values only append to the newest #todo section, we need to ensure that the targeted div is the last-child node. That can be done like so:

$('div.todo-task:last-child').append(taskTitle).addClass('task-header');
$('div.todo-task:last-child').append(taskDesc).addClass('task-description');

18. Using the jQuery UI’s date-picker we can simplifiy the date selection by ensure an appropriate ID is allocated in our HTML for the date input field:

<input type="text" id="datepicker" placeholder="Due (dd/mm/yyyy)" />

And then by calling the date-pick function when the date input field is selected:

// jQuery date-picker
$('input#datepicker').focus(function() {
	$(this).datepicker({   
	changeMonth: true, //this option for allowing user to select month 
	changeYear: true  //this option for allowing user to select from year range
	});
});

19. Now that the date selector is working, we need to ensure that value is added to our new #todo task in the same way the taskTitle and taskDescription were added in step 16. This time around we will reference the ‘id’ rather than the ‘placeholder’ as the placeholder value contains non-alphanumeric characters which wont work.

var taskDate = $('input[id=datepicker]').val();
  
$('div.todo-task:last-child').append(taskDate).addClass('task-due');

20. Finally, to finish off the new task we will need to create new ‘complete’ and ‘delete’ buttons and append them to the new #todo section:

// Create 'complete' and 'delete' buttons for the new section
$('div.todo-task:last-child').append('<button class="task-complete">Complete</button>');
  
$('div.todo-task:last-child').append('<button class="task-delete">Delete</button>');

Continue on with part 3 next week!