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 trial

JavaScript Interactive Web Pages with JavaScript Traversing and Manipulating the DOM with JavaScript Perfect

kabir k
PLUS
kabir k
Courses Plus Student 18,036 Points
Posted by kabir k
kabir k
Courses Plus Student 18,036 Points

Which 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:

  1. pure JavaScript, or

  2. jQuery

and why?

2 Answers

Daniel Newman
PLUS
Daniel Newman
Courses Plus Student 10,715 Points
Daniel Newman
Daniel Newman
Courses Plus Student 10,715 Points

There 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.

kabir k
kabir k
Courses Plus Student 18,036 Points
kabir k
kabir k
Courses Plus Student 18,036 Points

Thanks Daniel, that's quite helpful. So, why is pure JS more a powerful and professional way of JS?

Daniel Newman
Daniel Newman
Courses Plus Student 10,715 Points

Js 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).

;)

Iulia Maria Lungu
Iulia Maria Lungu
17,546 Points
Iulia Maria Lungu
Iulia Maria Lungu
17,546 Points

this 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
     } 
 });