Week 8 - Bringing it all together - Complete functional application

Date: 2025-03-12

Syntax for jQuery events

$('p').click(function(){
  //action here occurs when you click on a paragraph
});
$("#button1").mouseenter(function(){
  alert("You entered id button1!");
});
$("input").focus(function(){
  $(this).css("background-color", "#cccccc");
});

focus() is used when the user clicks on a form field.

jQuery Resources

jQuery UI

An open source library for creating interactive web applications. While not on the cutting edge it is extremely stable and well-documented.

jQuery UI is a curated set of user interface interactions, effects, widgets, and themes built on top of the jQuery JavaScript Library.

Link

Just like jQuery library you will need to make sure you link to jQuery UI library before your own jQuery script.

Four functions:

  1. interactions
  2. effects
  3. widgets
  4. utilities

Demo examples for all of the widgets, including

Interactions

Widgets

Effects

Animations and transitions for DOM elements, including:

Features, demos, tutorials for jQueryUI from w3schools

Read

HW

Make a mobile-responsive version of your application!