Welcome to the Treehouse Community
Want to collaborate on code errors? Have bugs you need feedback on? Looking for an extra set of eyes on your latest project? Get support with fellow developers, designers, and programmers of all backgrounds and skill levels here with the Treehouse Community! While you're at it, check out some resources Treehouse students have shared here.
Looking to learn something new?
Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and join thousands of Treehouse students and alumni in the community today.
Start your free trialkabir k
Courses Plus Student 18,036 PointsWhich is a better way to code the To-do list application?
I would like to know which is a better way to code the To-do list application, using:
pure JavaScript, or
jQuery
and why?
2 Answers
Daniel Newman
Courses Plus Student 10,715 PointsThere is two different meaning of "better".
jQuery is a good library to write short code, VanillaJS (pure JS) is more powerful and professional way of JS and front-end developer way of life.
If you know js and have a lot of time - js is your choice. Otherwise - jQuery is the quickest way to do your task.
Iulia Maria Lungu
16,935 Pointsthis is my jQuery code for this JS challenge. It works just fine. Can you please give some advice on how to improve it? thanks
// problem: user ineraction does not provide desired result
// solution: add interactivity so the user can manage daily tasks.
//--------------------------------
var $newTask;
var newTaskString;
var createNewTaskByComponents = function(){
$newTask = $('<li></li>');
var $checkbox = $('<input>').attr('type', 'checkbox');
newTaskString = $('#new-task').val();
var $label = $('<label></label>').text(newTaskString);
var $inputText = $('<input>').attr('type', 'text') ;
var $editButton = $('<button></button>').addClass('edit').text('Edit');
var $deleteButton = $('<button></button>').addClass('delete').text('Delete');
$newTask.append($checkbox);
$newTask.append($label);
$newTask.append($inputText);
$newTask.append($editButton);
$newTask.append($deleteButton);
}
// when Add Button is clicked
$('#new-task').next().on('click', function(newTask){
console.log('add new task');
// create new list item
createNewTaskByComponents();
// if the new task string is empty don`t append it to the incomplete task list
if (newTaskString !== '') {
//append to incomplete tasks ul
$newTask.appendTo("#incomplete-tasks");
$('#new-task').val('');
}
});
// when Edit button is clicked
$('ul').on('click', '.edit', function(){
console.log('edit task');
// switch list item to edit mode (input format) and back - toggle edit mode
if($(this).parent().hasClass('editMode')){
// text input value becomes label`s text
$(this).prev().prev().text($(this).prev().val());
$(this).parent().removeClass('editMode');
$(this).text('Edit');
}else {
$(this).parent().addClass('editMode');
$(this).text('Save'); // when a task is edited switch 'Edit' button to 'Save'
}
});
// when Delete button is clicked
$('ul').on('click', '.delete', function(){
console.log('delete task');
//remove list item
$(this).parent().remove();
});
// when checbox is checked ( task is complete )
$('#incomplete-tasks').on('change', 'input[type = checkbox]' , function(){
console.log('trying checkbox');
if( $(this).prop('checked', true ) ) {
$(this).parent().appendTo('#completed-tasks');
} else if ( $(this).prop('checked', false) ){
$(this).parent().appendTo('#incomplete-tasks'); // append list item to incomplete-tasks ul
}
});
$('#completed-tasks').on('change', 'input[type = checkbox]' , function(){
console.log('trying checkbox');
if ( $(this).prop('checked', false) ){
$(this).parent().appendTo('#incomplete-tasks'); // append list item to incomplete-tasks ul
}
});
kabir k
Courses Plus Student 18,036 Pointskabir k
Courses Plus Student 18,036 PointsThanks Daniel, that's quite helpful. So, why is pure JS more a powerful and professional way of JS?
Daniel Newman
Courses Plus Student 10,715 PointsDaniel Newman
Courses Plus Student 10,715 PointsJs will not forgive your mistakes as jQuery did sometime. jQuery is wide enough way to write a code that can be supported via billions of user community who did not know what expression "!+'A7'" mean. And it's ok.
Most of the jQuery users use production ready plugins and libraries but the will never make (most of them) own Angular/Backbone or NodeJS application. It's a next-level.
Look at me. I speak English. and it is a low quality version of language knowledge that gave me ability to work, travel and spend a time with English speaking guys. I can keep this level of english-language-knowledge and be happy enough till the end of my life. But I want to grow up with js-skills then my income will grow 1.5 times and more because js is not only jQuery.
jQuery is happy-js-way for easy and middle level tasks that's all.
As you can see, because of jQuery we received document.querySelector() in js (ES5).
;)
kabir k
Courses Plus Student 18,036 Pointskabir k
Courses Plus Student 18,036 PointsOk, thanks.