UX

Intro to the lesson

What is UX?

Examples of bad UX but Good UI

Screenshot 2023-12-06 at 8 37 54 PM

Screenshot 2023-12-06 at 8 41 13 PM

Screenshot 2023-12-06 at 8 38 52 PM

Examples of Good UX and Good UI

image

Screenshot 2023-12-06 at 8 45 05 PM

image

What is the difference between UX and UI?

When is UX Used?

How is UX data gathered?

Why is UX important?

image

What is jQuery?

jQuery is a lightweight, “fast and feature-rich,” JavaScript library. The purpose of jQuery is to make it much easier to use JavaScript on your site and it simplifies many tasks that require many lines of JavaScript code to accomplish, wrapping them into methods that you can call with a single line of code.

jQuery also simplifies a lot of the complicated things from JavaScript, like AJAX calls and DOM manipulation.

The implications of jQuery

The jQuery library has the following features

  1. HTML/DOM manipulation
  2. CSS manipulation
  3. HTML event methods
  4. Effects and animations
  5. AJAX (Asynchronous Javascript and XML)
  6. Utilities

If you ever want to use jQuery, you can download it here or just use a CDN (Content Delivery Network) from Google!

<!-- Downloaded jQuery -->
<head>
<script src="jquery-3.7.1.min.js"></script>
</head>
<!-- Google CDN which is the more common method of getting the library -->
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script>
</head>

jQuery syntax and how to use it

With jQuery, you select (query) HTML elements and perform “actions” on them.

Basic syntax is: $(selector).action()

Examples:

In the following example, write in one of the comments where the selector is (popcorn hack ~ raise hand when found)

$(document).ready(function(){     // 
    $("button").click(function(){ //
      $("p").hide();              //
    });                           //
  });                             //

The element Selector

The Document Ready Event All jQuery methods begin inside a document ready event:

$(document).ready(function(){

    // jQuery methods go here...
  
  });

This is to prevent any jQuery code from running before the document is finished loading (is ready).

It is good practice to wait for the document to be fully loaded and ready before working with it. This also allows you to have your JavaScript code before the body of your document, in the head section.

Reason:

$(function(){
    
    // An even quicker way to do it
    // jQuery methods go here...
  
  });

jQuery methods and event handling

What are Events?

Mouse Events Keyboard Events Form Events Document/Window Events
click keypress submit load
dblclick keydown change resize
mouseenter keyup focus scroll
mouseleave   blur unload

Popcorn Hack: Name 3 other event HTML events

  1. mouseover
  2. mouseout
  3. input
onclick=JavaScript
// The infamous onclick event in html
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script>
<script>
$(document).ready(function(){
  $("p").click(function(){
    $(this).hide();
  });
});
</script>
</head>
<body>

<p>If you click on me, I will disappear.</p>
<p>Click me away!</p>
<p>Click me too!</p>

</body>
</html>

Final example, look at it here

<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script>
<script>
$(document).ready(function(){
  $("#hide").click(function(){
    $("p").hide();
  });
  $("#show").click(function(){
    $("p").show();
  });
});
</script>
</head>
<body>

<p>If you click on the "Hide" button, I will disappear.</p>

<button id="hide">Hide</button>
<button id="show">Show</button>

</body>
</html>

Final example, look at it here

<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script>
<script>
$(document).ready(function(){
    // Challenge! Make it so the text appears with an animation, causing it to slowly fade in and out!
});
</script>
</head>
<body>

<button id="hide">Hide</button>
<button id="show">Show</button>

<p>Points < Indicators :D</p>
<p>This is another small paragraph</p>
<p>(if you put a cool joke here you get .01 extra points)</p>
<p>"ew who wrote that?" ^^^</p>

</body>
</html>

Final example, look at it here

<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script>
<script>
$(document).ready(function(){
  $("button").click(function(){
    $("#div1").fadeIn();
    $("#div2").fadeIn("slow");
    $("#div3").fadeIn(3000);
  });
});
</script>
</head>
<body>

<p>Demonstrate fadeIn() with different parameters.</p>

<button>Click to fade in boxes</button><br><br>

<div id="div1" style="width:80px;height:80px;display:none;background-color:red;"></div><br>
<div id="div2" style="width:80px;height:80px;display:none;background-color:green;"></div><br>
<div id="div3" style="width:80px;height:80px;display:none;background-color:blue;"></div>

</body>
</html>

Final example, look at it here

Making requests with AJAX

AJAX stands for Asynchronous JavaScript and XML. It allows web pages to be updated asynchronously in a easier way and is promise based. A Promise in JavaScript represents the eventual completion (or failure) of an asynchronous request.

Why use jQuery AJAX over a normal async request or AJAX request?

Against a normal async request AJAX has a lot of advantages:

  1. Easier Error Handling: Promises are much easier to deal with than callbacks. If an error occurs in a promise, it will be passed down to the next catch() clause.

  2. Simpler API Chaining: If you want to wait for one operation to finish before starting another one you can simply use .then().

Normal async request

getUserLocation(function(error, location) {
    if (error) {
        console.error('Error:', error);
    } else {
        getForecast(location, function(error, forecast) {
            if (error) {
                console.error('Error:', error);
            } else {
                console.log('Forecast:', forecast);
            }
        });
    }
});

Ajax requests without any library

fetch('api/location')
.then(response => response.json())
.then(location => fetch('api/forecast/' + location))
.then(response => response.json())
.then(forecast => {
    console.log('Forecast:', forecast);
})
.catch(error => {
    console.error('Error:', error);
});

Ajax Requests with JQuery

$.ajax({ url: 'api/location', method: 'GET', dataType: 'json' })
.then(function(location) {
    return $.ajax({ url: 'api/forecast/' + location, method: 'GET', dataType: 'json' });
})
.then(function(forecast) {
    console.log('Forecast:', forecast);
})
.catch(function(error) {
    console.error('Error:', error);
});

You can see using ajax is much easier to read than callback system. However when it comes to using jquery ajax vs javascript’s version there are less differences. It is up to you which syntax you like more.

As mentioned earlier, jQuery ajax also builds on top of the old javascript version so it can support older browser versions.

Jquery’s use with PBL

Jquery’s most important use is making you site dynamic and update from user input. The most important part of this for our projects is taking the data from the backend and building html from it.

%%html
<head>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
    <style>
        .post {
            border: 1px solid #ddd;
            margin-bottom: 20px;
            padding: 20px;
            border-radius: 5px;
        }
        .like-count {
            color: #007BFF;
        }
    </style>
</head>
<body>

<div id="posts"></div>

<script>
// Fake API function
function getAPI() {
    return [
        {id: 1, content: 'Dogs are man\'s best friend.', likes: 10},
        {id: 2, content: 'Dogs have an exceptional sense of smell.', likes: 20},
        {id: 3, content: 'There are hundreds of different dog breeds.', likes: 30}
    ];
}

$(document).ready(function(){
    var posts = getAPI();
    $.each(posts, function(i, post) {
        var postHtml = '<div class="post"><h2>Post ' + post.id + '</h2><p>' + post.content + '</p><p class="like-count">' + post.likes + ' likes</p></div>';
        $('#posts').append(postHtml);
    });
});
</script>

</body>

Popcorn Hack: Complete the Jquery and JavaScript code

This represents a website for buying dogs. The API contains an id, name, price, and breed for each dog. Display them all as html using jQuery.

%%html
<head>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
    <style>
        .dog {
            border: 1px solid #ddd;
            margin-bottom: 20px;
            padding: 20px;
            border-radius: 5px;
        }
        .price {
            color: #007BFF;
        }
    </style>
</head>
<body>

<div id="dogs"></div>

<script>
// Fake API function
function getAPI() {
    return [
        {id: 1, name: 'Max', price: '$1000', breed: 'Golden Retriever'},
        {id: 2, name: 'Bella', price: '$800', breed: 'Labrador Retriever'},
        {id: 3, name: 'Charlie', price: '$1200', breed: 'German Shepherd'}
    ];
}

$(document).ready(function(){
    var dogs = getAPI();
    $(document).ready(function(){
        var dogs = getAPI();
    
        // Write Code Here 
        dogs.forEach(function(dog) {
            var dogHTML = `
                <div class="dog">
                    <h2>${dog.name}</h2>
                    <p><strong>Breed:</strong> ${dog.breed}</p>
                    <p><strong>Price:</strong> <span class="price">${dog.price}</span></p>
                </div>
            `;
            $('#dogs').append(dogHTML);
        });
    });
});
</script>

</body>

Animations with JQuery

You can also create animations in JQuery.

Animations glitch out jupyter notebooks so this example can’t be in runnable code.

<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script>
$(document).ready(function(){
  // Reset CSS properties to their original values
  $("div").css({
    left: '0px',
    opacity: '1',
    height: '100px',
    width: '100%'
  });

  $("button").click(function(){
    $("div").animate({
      left: '250px',
      opacity: '0.5',
      height: '150px',
      width: '100%'
    });
  });
});
</script>
</head>
<body>

<button>Start</button>

<div style="background:#98bf21;height:100px;width:100px;position:absolute;"></div>

</body>
</html>

Look at the animation here

CRUD Principles:

What Does CRUD Stand For?

What Does CRUD Do?

How Can CRUD Be Applied to jQuery and Beyond?

Create (C):

// Create a new element and append it to a table
$('#myTable').append('<tr><td>New Data</td></tr>');

Read (R):

// Read data from a table
$('#myTable tr').each(function() {
  console.log($(this).text());
});

Update (U):

// Update data in a table
$('#myTable td:contains("Old Data")').text('Updated Data');

Delete (D):

// Delete a row from a table
$('#myTable td:contains("Data to Delete")').closest('tr').remove();

Demonstration of Applying CRUD to Tables:

Assuming a simple HTML table with the ID “myTable”:

<table id="myTable">
  <tr>
    <th>Data</th>
  </tr>
  <tr>
    <td>Row 1</td>
  </tr>
  <tr>
    <td>Row 2</td>
  </tr>
</table>

Create (C):

// Create a new row and append it to the table
$('#myTable').append('<tr><td>New Row</td></tr>');

Read (R):

// Read and log data from the table
$('#myTable tr').each(function() {
    console.log($(this).text());
});

Update (U):

// Update data in the first row of the table
$('#myTable tr:first-child td').text('Updated Row');

Delete (D):

// Delete the second row from the table
$('#myTable tr:nth-child(2)').remove();

These examples demonstrate how CRUD operations can be applied using jQuery to manipulate a simple HTML table on the client side. In more complex applications, these operations are often handled on the server side with the help of backend frameworks and databases.

jQuery CRUD Demo

jQuery CRUD Demo

Name Review Action
John Mortensen Great lesson! Explained UX and CRUD principles as well as usage of jQuery very nicely. +3 indicators!
Sean Yeung Very interactive teaching! Covered all the topic but should have made more Taylor Swift references.
%%html

<!-- Head contains information to Support the Document -->
<head>
    <!-- load jQuery and DataTables output style and scripts -->
    <link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/1.13.4/css/jquery.dataTables.min.css">
    <script type="text/javascript" language="javascript" src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
    <script>var define = null;</script>
    <script type="text/javascript" language="javascript" src="https://cdn.datatables.net/1.13.4/js/jquery.dataTables.min.js"></script>
</head>

<!-- Body contains the contents of the Document -->
<body>
    <table id="xdemo" class="table">
        <thead>
            <tr>
                <th>Make</th>
                <th>Model</th>
                <th>Year</th>
                <th>Color</th>
                <th>Price</th>
            </tr>
        </thead>
        <tbody>
            <tr>
                <td>Ford</td>
                <td>Mustang</td>
                <td>2022</td>
                <td>Red</td>
                <td>$35,000</td>
            </tr>
            <tr>
                <td>Toyota</td>
                <td>Camry</td>
                <td>2022</td>
                <td>Silver</td>
                <td>$25,000</td>
            </tr>
            <tr>
                <td>Tesla</td>
                <td>Model S</td>
                <td>2022</td>
                <td>White</td>
                <td>$80,000</td>
            </tr>
            <tr>
                <td>Cadillac</td>
                <td>Broughan</td>
                <td>1969</td>
                <td>Black</td>
                <td>$10,000</td>
            </tr>
            <tr>
                <td>Ford</td>
                <td>F-350</td>
                <td>1997</td>
                <td>Green</td>
                <td>$15,000</td>
            </tr>
            <tr>
                <td>Ford</td>
                <td>Excursion</td>
                <td>2003</td>
                <td>Green</td>
                <td>$25,000</td>
            </tr>
            <tr>
                <td>Ford</td>
                <td>Ranger</td>
                <td>2012</td>
                <td>Red</td>
                <td>$8,000</td>
            </tr>
            <tr>
                <td>Kuboto</td>
                <td>L3301 Tractor</td>
                <td>2015</td>
                <td>Orange</td>
                <td>$12,000</td>
            </tr>
            <tr>
                <td>Ford</td>
                <td>Fusion Energi</td>
                <td>2015</td>
                <td>Guard</td>
                <td>$25,000</td>
            </tr>
            <tr>
                <td>Acura</td>
                <td>XL</td>
                <td>2006</td>
                <td>Grey</td>
                <td>$10,000</td>
            </tr>
            <tr>
                <td>Ford</td>
                <td>F150 Lightning</td>
                <td>2024</td>
                <td>Guard</td>
                <td>$70,000</td>
            </tr>
        </tbody>
    </table>
</body>

<!-- Script is used to embed executable code -->
<script>
    $("#xdemo").DataTable();
</script>
Make Model Year Color Price
Ford Mustang 2022 Red $35,000
Toyota Camry 2022 Silver $25,000
Tesla Model S 2022 White $80,000
Cadillac Broughan 1969 Black $10,000
Ford F-350 1997 Green $15,000
Ford Excursion 2003 Green $25,000
Ford Ranger 2012 Red $8,000
Kuboto L3301 Tractor 2015 Orange $12,000
Ford Fusion Energi 2015 Guard $25,000
Acura XL 2006 Grey $10,000
Ford F150 Lightning 2024 Guard $70,000

Hacks

Combine all aspects taught throughout this lesson.

In addition:

Hacks

Reflection on Hacks Below

<!DOCTYPE html>

NFL Task Tracker

NFL Task Tracker

<!DOCTYPE html>

NFL Task Tracker

NFL Task Tracker

Extra Credit

<!DOCTYPE html>

NFL Play Tracker

NFL Play Tracker