Skip to content
No description, website, or topics provided.
CSS JavaScript HTML
Branch: master
Clone or download
Pull request Compare This branch is even with sf-sei-5:master.
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Permalink
Type Name Latest commit message Commit time
Failed to load latest commit information.
assets
solution/todo_solution
starter_code/todo_lab
readme.md

readme.md

Intermediate jQuery

LEARNING OBJECTIVES

After this lesson, you will be able to:

  • Explain how method chaining can be used to write more concise code in jQuery.
  • Describe DOM traversal.
  • Practice DOM traversal, using the this keyword, and event delegation, by building a To-Do List application.

STUDENT PRE-WORK

Before this lesson, you should already be able to:

  • Add event listeners for mouse, keyboard, form, and document events.
  • Explain how event delegation can be used to add events to elements that don't yet exist on the page.
  • Use CSS selectors with the jQuery or $ method to select elements in the DOM.
  • Use selectors and jQuery methods to:
    • Add and remove classes on DOM elements.
    • Get and set information inside DOM elements.
    • Change the value of attributes on DOM elements.

Opening

  • Review jQuery selectors and methods.
  • Review current lesson objectives.

Intro to New Material: Method Chaining

Let's switch gears a bit, and talk about yet another way that jQuery helps us write concise code and improve our workflow: method chaining.

Method chaining is when we select an element and then do several things with it at once, by chaining, or tacking on, multiple methods together using dot notation.

Without Method Chaining

$('li').addClass('task-complete');
$('li').removeClass('task-incomplete');
$('li').append('Complete!');

With Method Chaining

$('li').addClass('task-complete').removeClass('task-incomplete').append('Complete!');

See how we were able to chain together multiple methods so that we could add a class, remove a class, and add some content to our list item all at once?

Method Chaining Use

As you can see, method chaining results in code that is more compact.

But is it clean?

You might have noticed that the example with method chaining was a little trickier to read. When chaining multiple methods together, we can make our code easier to read by placing each new method on a new line:

$('li')
  .addClass('task-complete')
  .removeClass('task-incomplete')
  .append('Complete!');

Now we get the benefits of method chaining while still keeping things clean and readable. It's easy to tell at a glance what methods are being executed on the $('li') element.


Intro to New Material: DOM Traversal

In a previous lesson, we took a look at how we can select elements using jQuery.

We can also select elements based on their relationship to each other. This is referred to as traversing the DOM.

Let's take a look at the seven methods we can use to find relatively positioned elements:

  • parent()
  • children()
  • siblings()
  • next()
  • prev()
  • closest()
  • find()

parent()

First, let's look at jQuery's parent() method, which allows us to find the direct parent of another element.

$('li').parent()

We can also optionally pass in a CSS-style selector as an argument for the parent() method.

If provided, both the method and selector must match for the element added to the new selection:

$('li').parent('.info');

children()

Next, let's look at the children() method, which allows us to find all children of a selection.

$('ul').children()

Or:

$('ul').children('#data');

siblings()

The siblings() method allows us to find all siblings of an initial selection.

$('li:first-child').siblings()

Or:

$('li:first-child').siblings('.selected');

next()

The next() method allows us to find the next sibling of a selection.

$('li:first-child').next()

Or:

$('li:first-child').next('.info');

prev()

This allows us to find the previous sibling of an initial selection.

$('li:last-child').prev()

Or:

$('li:last-child').prev('.info');

closest

Now let's look at the closest() method.

This will find the nearest ancestor (not just parent) that matches the selector.

Unlike the previous methods we've covered for traversing the DOM, the CSS-style argument here is required.

$('li').closest('.main')

find()

Finally, let's walk through the find() method, which can be used to find descendents of a selection.

This will find all elements within the current selection that match the selector.

As with the closest() method, the CSS-style argument here is required.

$('.main').find('li')

jQuery Documentation

These are just some of the most common methods for traversing the DOM; there are many more.

Examine jQuery's documentation for a full look at the different methods available for traversing the DOM, as well as more examples of how to use each method.

Independent Practice - To-Do List

For the remainder of the class, we'll work on creating a To-Do List application.

You can find the starter code for this exercise here.

This lab will give you practice with many of the concepts that we've learned so far in this course: DOM traversal, event delegation, and the this keyword.

Step 1 - Pseudocode

Work in groups of three or four. Spend 10 minutes writing out pseudocode for the To-Do List app.

Step 2 - Adding Tasks to Our List

For the first portion of this exercise, we'll work on adding tasks to our To-Do List.

Here's what the HTML for our task form and the unordered task list looks like:

<form id="taskForm">
	<input type="text" id="newItemDescription" placeholder="What do you need to do?">
	<button type="submit" id="addTask" class="btn">Add Task</button>
</form>
<ul id="taskList">

</ul>
  • When the #taskForm is submitted:
    • Select the input field into which the user has typed their To-Do List info. Get the value of that input field. (Hint: You can use the .val() method to get the value.)

    • Create a list item for the new task that includes the value the user typed in. Here's what that new list item should look like:

       <li>
       	<input type="checkbox">
       	<span class="item">{Item Text}</span>
       	<a href="#" class="edit">Edit</a>
       	<a href="#" class="remove">Remove</a>
       </li>
    • Append the list item to our ordered To-Do List.

Step 3 - Marking Tasks as Complete

  • When a checkbox gets toggled (hint: the change event):
    • Find the parent of the checkbox that was toggled.
    • Toggle the .completed class on the parent. Refer to the CSS file to see what styles will be added with the completed class.

Hint: Since the list items don't exist when the page first loads, you'll need to use event delegation here. Hint #2: Use the this keyword and DOM traversal to find the parent of the checkbox that was just toggled.

Step 4 - Removing a Task

  • When the user clicks on the "remove" anchor inside of a task list item, remove that task.

Hint: Since the list items don't exist when the page first loads, you'll need to use event delegation here.

Step 5 - Editing a Task

  • When the user clicks on the "edit" anchor, a form should display in place of the task the user clicked on.

Here's what the form should look like:

<form class="editor">
	<input type="text" value="{itemText}">
	<button type="submit" class="btn">Save</button>
</form>

Hint: Since the list items don't exist when the page first loads, you'll need to use event delegation here.

Step 6 - Saving Edits

  • When the user clicks on the "save" button while in edit mode, the edit form should be replaced by a list item that contains any edits they entered into the edit form's input field.

Here's what that updated list item should look like:

<input type="checkbox">
<span class="item">{textTheUserEdited}</span>
<a href="#" class="edit">Edit</a>
<a href="#" class="remove">Remove</a>

Hint: Since the list items don't exist when the page first loads, you'll need to use event delegation here.

Bonus - Counting Tasks

  • Create a function updateCount.
  • When this function runs, count the number of items in our task list that do not have the class completed.
  • Display this count in .count.
  • Call this function from the various events where the count should be updated (when a task is added, removed, etc.).

Bonus - Deleting All Tasks

When the user clicks the #deleteTasks button, the task list should empty.

Bonus - Clearing Completed Tasks

When the user clicks the #clearCompleted button, any tasks that have been completed (i.e., that have the class .completed) should be removed from the list.


Conclusion

  • Review solution from To-Do lab.

ADDITIONAL RESOURCES

You can’t perform that action at this time.