jQuery

In this activity, we’ll experiment with writing JavaScript using the jQuery API.

We’ll start with a sample HTML page, styled with Bootstrap. Copy/paste the HTML below into a new file. Note that we’ve already included both Bootstrap and jQuery using their respective CDNs.

<!DOCTYPE html>
<html lang="en" data-bs-theme="light">
  <head>
    <meta charset="UTF-8">  
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <meta name="author" content="CS4640">
    <meta name="description" content="jQuery example">  
    <title>jQuery Example</title>
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/css/bootstrap.min.css" rel="stylesheet"  integrity="sha384-T3c6CoIi6uLrA9TneNEoa7RxnatzjcDSCmG1MXxSR1GAsXEV/Dwwykc2MPK8M2HN"  crossorigin="anonymous"> 
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.7.1/jquery.js" integrity="sha512-+k1pnlgt4F1H8L7t3z95o3/KO+o78INEcXTbnoJQ/F2VqDVhWoaiVml/OEHv9HsVgxUaVW+IbiZPUJQfF/YxZw==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>

    <script>
    // To do
    </script>
  </head>

  <body>

    <div class="container p-5">
      <div class="row">
        <div class="col-12 px-4">
          <h1>Priorities</h1>
        </div>
      </div>
      <div class="row">
        <div class="col-md-6 px-4">
          <div class="card" id="things">
            <h4 class="card-header">Things To Do</h4>
            <ul class="list-group list-group-flush">
              <li class="list-group-item">List out 6+ things!</li>
            </ul>
          </div>
        </div>
        <div class="col-md-6 px-4">
          <div class="card" id="order">
            <h4 class="card-header">Priority List</h4>
            <ol class="list-group list-group-flush list-group-numbered">
            </ol>
          </div>
        </div>
      </div>
    </div>

    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/js/bootstrap.bundle.min.js" integrity="sha384-C6RzsynM9kWDrMNeT87bh95OGNyZPhcTNXj1NW7RuBCsyN/o0jlpcV8Qyq46cDfL" crossorigin="anonymous"></script>
  </body>
</html>

Before we begin writing jQuery code, we need some good examples. In the <ul>, create at least 6 list items (with Bootstrap’s class) of things you’d like (or need) to do before the end of the semester. These could be things like “Homework 8” or “Play frisbee on the lawn.”

Writing jQuery

In this example, we’ll write all of our JavaScript (using jQuery) in the head of the document. Didn’t we say we shouldn’t do that? jQuery allows us to attach an event listener for when the document is ready.

Waiting for ready

Add the following jQuery to the <script> element in the <head>. In this code, we use the jQuery selector to select the document itself, then pass an anonymous function that will be called when the page has finished loading in the browser.

$(document).ready(function() {
    // code here
});

We’ll write all of our jQuery in the body of this anonymous function, so it will all be run after the page has finished loading.

Adding/Removing Classes

Next, let’s make our page a little more interative by adding some color when the user moves the mouse over the items in the “Things to do” list.

  • Devise a CSS selector that will only select the list item (<li>) elements in the unordered list under “Things to do”. There are multiple possibilities here, but just selecting on li will not be specific enough!

  • Add an event listener to the elements selected by your CSS selector above when the mouse moves over that element. The event handler should add the list-group-item-success class to the <li> under the mouse. Specifically, we can use our CSS selector in the following code:

      $("YOUR-CSS-SELECTOR").on("mouseover", function() {
    $(this).addClass("list-group-item-success");
  });

    Note that the event handler is added to all elements matching the selector! We did not need a for loop to attach this handler to each element. Additionally, inside the anonymous function, this refers to the current element, which is the list item directly under the mouse.

    Question

    What is the effect of this event handler? Do the items return to their normal color?

  • Add a second event handler to the same elements that will remove the list-group-item-success class when the mouse leaves that <li>.

Looping over selected elements

Next, use the .each() function to loop over the list of elements returned by our CSS selector. This function takes a function as parameter, which will be called for each element in the list. jQuery will pass into this function optional parameters, such as index (index into the array) and element (the current element from the list).

$("YOUR-CSS-SELECTOR").each(function(index, element) {
    // ...
});

Modifying the DOM

Inside the loop, add an event listener for when the user clicks the current element. In this function, we will remove this list item from the unordered list of “Things to do” and move it to the ordered “Priority List”. We can select the current element in jQuery using $(this).

In your event handler, add the following:

  1. Remove the current element from the DOM using jQuery’s .remove() function: $(this).remove();.
  2. Add the current element to the end of the <ol> using jQuery’s .append() function. Note that you will need to select on the ol and pass in the current element. Didn’t we delete it? In our .each() function, we kept a reference to the element in the element parameter.
  3. Lastly, once the “Things To Do” list is empty, let’s remove that entire card from the DOM. When using jQuery to select on multiple elements, jQuery returns an array. Therefore, we can use the .length property to determine if the list is empty. If the list is empty, remove the entire card. What selector would be best to remove this card?

Note that we need to pay careful attention to how this changes in functions that are used as event handlers, as well as how variables in one function (.each()’s parameter’s element) are available and in scope to an event handler defined inside.

Question

Does anything interesting happen when items are moved to the new list? Do they default to the normal color?

If needed, modify your “click” event handler code to ensure that the elements are the correct color when added to the “Priority List”

Submission

Answer the questions and submit a copy of your final code to Gradescope. If you worked in a group, please submit once for the entire group, but be sure to include everyone in the Gradescope submission.