Directions

  • You really should try to answer the 5 questions below this without any help. These are core concepts that you should at least attempt to learn.
  • The update JQUERY function may require a little help but try without first
  • Hacks should only take 20 minutes at most

Notes from Lesson

Question: What are some real life applications of jQuery? Name at least two you can think of.

  • Simplifies common JS methods
  • Makes HTML element and event handling easier

Lesson provides these examples:

  • Web pages, used to make dropdown menus appear smoothly
  • Simplifies implementation of AJAX, allows developers to make asynchronous requests to a server and update parts of a web page without requiring a full page reload

Common Use Examples

Element Selector

(this).hide() - hides the current element.

(“p”).hide() - hides all <p> elements.

(“.test”).hide() - hides all elements with class=”test”.

(“#test”).hide() - hides the element with id=”test”.

JQuery Get Methods

.text() method returns the plain text contents of an element.

var descriptionText = $(".description").text();
console.log(descriptionText);

// with the text() method, this would output the plain text value of description 
// output: 'Developer at TechCorp'

.html() method is used to get the direct HTML contents of an element.

var descriptionHTML = $(".description").html();
console.log(descriptionHTML);

// with the html() method, this would output the HTML content of the element with all the HTML tags
// output:'<span>Web Developer</span> at <a href="#">TechCorp</a>'

Event Handling

Click example:

<button id="clickButton">Click Me!</button>

$("#clickButton").click(function() {
    alert("Button was clicked!");
  });

Form submission example:

<form id="myForm">
  <input type="text" placeholder="Enter text">
  <input type="submit" value="Submit">
</form>

<div id="formOutput"></div>
$("#myForm").submit(function(event) {
    event.preventDefault(); 
    var enteredText = $(this).find("input[type='text']").val();
    $("#formOutput").text("You entered: " + enteredText);
  });s

Hover example:

<div id="hoverDiv">Hover over me!</div>

$("#hoverDiv").mouseenter(function() {
    $(this).css("background-color", "green");
  }).mouseleave(function() {
    $(this).css("background-color", "red");
  });

CRUD

See here for the table example.

CRUD Popcorn Hack

Talk about usage of one of four elements of CRUD from your project in tri 1. Focus on how CRUD was implemented.

Free Response and MCQ

I filled it in below.

  1. What does CRUD stand for?
    • Create
    • Read
    • Update
    • Delete
  2. What are the HTTP verbs that are associated with each CRUD action?
    • C - POST
    • R - GET
    • U - PUT
    • D - DELETE
  3. What is JQuery?

JQuery is a JavaScript library that provides a bunch of built-in methods and features that simplify common JavaScript tasks. I’ve most often used it for element selection and event handling, but it can also help with things like CRUD and visuals like animations on the frontend.

  1. Match A, B, and C into the JQuery event handler for a data table
    • A: ‘click’ (event, first argument: .on(A, ‘.delete-btn’))
    • B: ‘.delete-btn’ (class, second argument because it’s being clicked: .on(‘click’, B, function()))
    • C: ‘#data-table’ (element, goes in $(C)) 
      $('#data-table').on('click', '.delete-btn', function() {
 // code
  });
  2. Why do we use JQUERY with CRUD?

People often use JQuery with CRUD because JQuery makes it easier to use AJAX, which is often used for CRUD functions since it is able to make asynchronous server requests without reloading the page. From the content below, it seems like it’s also used because JQuery makes it generally simpler to manipulate data (such as data that would be used for CRUD stuff).

Finish the update JQUERY function

  • its all the way at the end, you should see the green comment
  • you can choose to use the two lines I’ve already given or not

I fixed it. Try it out for yourself. I explained what I did below the functional product.

ID Name Email Actions 

var currentData = [
  { id: 1, name: 'Barbie', email: 'barbie@example.com' },
  { id: 2, name: 'Ken', email: 'ken@example.com' }
];

function renderData(data) {
  const tableBody = $('#data-table tbody');
  tableBody.empty();

  data.forEach(item => {
    const row = `
      <tr>
        <td>${item.id}</td>
        <td>${item.name}</td>
        <td>${item.email}</td>
        <td>
          <button class="update-btn" data-id="${item.id}">Update</button>
          <button class="delete-btn" data-id="${item.id}">Delete</button>
        </td>
      </tr>
    `;
    tableBody.append(row);
  });
}

function createBarbieCharacter() {
  const newName = prompt('Enter the name of the Barbie character:');
  const newEmail = prompt('Enter the email of the Barbie character:');
  const newId = currentData.length + 1;
  
  currentData.push({id: newId, name: newName, email: newEmail});
  renderData(currentData);
}

$('#create-btn').on('click', createBarbieCharacter);

$('#data-table').on('click', '.delete-btn', function() {
  const idToDelete = $(this).data('id');
  currentData = currentData.filter(item => item.id !== idToDelete);
  renderData(currentData);
});

$('#data-table').on('click', '.update-btn', function() {const idToEdit = $(this).data('id');
  const updateIndex = currentData.findIndex(item => item.id === idToEdit);
  // prompting the user for the new name and email
  const updateName = prompt('Enter the new name of the Barbie character:');
  const updateEmail = prompt('Enter the new email of the Barbie character:');
  // updating the item
  currentData[updateIndex] = {id: idToEdit, name: updateName, email: updateEmail};
  // rendering only the up to date data
  renderData(currentData);
});


// rendering the initial data
renderData(currentData);