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!

1 Answer

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

Here's a direct "JQueryization":

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.