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

Posted by Luke Dawes
Luke Dawes
9,739 Points

Rewriting the "To-Do" app in jQuery.

Hi all,

I recently decided to try and re-write the "To-Do" app using jQuery, rather than the pure JavaScript and DOM API we learned about with Andrew Chalkey. I have included two code pens to illustrate how the two methods differ so far.

http://codepen.io/Llanyewe7/pen/bedjXv (the original JS / DOM API version) http://codepen.io/Llanyewe7/pen/MewBNL (my in-progress jQuery attempt)

I have implemented a jQuery version of the addTask() function, which checks for user input, deletes the text of the input box and then returns page focus to that box once the task has been added. I understand this may need refactoring later, but I am happy with how it functions right now.

I am struggling, however, with writing a version of the editTask() function. I can't really wrap my head around how to access the appropriate HTML elements in the DOM via jQuery in the same "sense-making" way as done in the original tutorials. I will continue to work on this, but I was wondering if anybody could take a look at what was done in the original tutorials and what I've done so far, and perhaps make some suggestions?

Thank you!

Luke Dawes
Luke Dawes
9,739 Points

I tried the following to get my editTask() to work, without success. Any guidance would be appreciated! 

var editTask = function() {
    var listItem = $(this).parent();
    var taskEditBox = $(this).prev();
    var taskName = taskEditBox.prev();

    var containsClass = listItem.hasClass("edit");

    if (containsClass) {
        taskEditBox.val() = taskName.val();
        console.log("You are now in Edit Mode.");
    } else {
        taskName.val() = taskEditBox.val();
        console.log("You are not in Edit Mode.");
    }

    listItem.toggleClass("edit");

}

1 Answer

Steven Parker
Steven Parker
243,215 Points
Steven Parker
Steven Parker
243,215 Points

Here's a direct "JQueryization" of the original:

editTask.js 
var editTask = function() {
  console.log("Edit task...");

  var $listItem = $(this).parent();

  var $editInput = $listItem.find("input[type=text]");
  var $label = $listItem.find("label");

  var containsClass = $listItem.hasClass("editMode");

  // if the class of the parent list item is .editMode
  if (containsClass) {
    // we want to switch from .editMode
    // label text become the input's value
    $label.text($editInput.val());
  } else {
    // Switch to .editMode
    // input value become the label's text
    $editInput.val($label.text());
  }
  // toggle Edit Mode on the list item 
  $listItem.toggleClass("editMode");
}

Of course, this won't do anything until you implement a bindTaskEvents.

Luke Dawes
Luke Dawes
9,739 Points

Thank you, Steven, for your response! It never occurred to me to pass one jQuery function as the argument to another, as opposed to using the = operator.

I'll try to implement a bindTaskEvents() function, but I do wonder if you could answer a follow-up question: why does addTask() work without one?

Luke Dawes
Luke Dawes
9,739 Points

Hi Steven,

Thank you again for your help. I've implemented the editTask() and bindTaskEvents() functions in my code, but there's still no functionality beyond the addTask() button. I managed to figure out why the JavaScript console in Chrome was throwing a certain error, but now we're back to no errors but no real difference.

http://codepen.io/Llanyewe7/pen/MewBNL

Any further advice you can offer on this is much appreciated!