jQuery Animation
A slide-down login panel, Star Wars rollover images that swap on hover, and a gallery that cross-fades the full-size picture when you click a thumbnail.
CSIS 2470 – JavaScript & jQuery Salt Lake Community College · coursework 2022–23
Exercises from my JavaScript and jQuery class: animation and effects, jQuery UI widgets, working with JSON and AJAX, and a final band website with a working shopping cart.
JavaScript jQuery & jQuery UI JSON & AJAX 11 exercises
jQuery & jQuery UI
Effects, animation and interactive widgets.
jQuery Effects
A Close Encounters page with a sliding colour dashboard (jQuery UI easing), automatic pull quotes cloned from the text, and FAQ answers that slide open.
jQuery UI Widgets
Tabbed panels, a confirm dialog that explodes the zombie, a date-of-birth date picker and a dropdown menu.
Accordion Form
A four-part survey (Personal, School, Hobbies, Music) in a jQuery UI accordion. The hobby list is loaded from a JSON file with $.getJSON.
Picture Puzzle
Drag the 16 scrambled tiles of the Taj Mahal back into order with jQuery UI sortable. It tells you when you've won.
JSON & AJAX
Loading and displaying data with JavaScript objects, JSON files and XMLHttpRequest.
Games Carousel
My six favourite games in a jQuery Cycle carousel built from a JSON file. Clicking a cover loads its description with an XMLHttpRequest.
Book Lookup
Fills a dropdown from a JSON file with XMLHttpRequest. Pick a book to see its title, author and awards, or type part of an author's name to filter.
Book List
Loops over an array of book objects and builds a nested list of titles and authors, with prices for books on sale and any awards.
Utah & Uist Quiz
Nine multiple-choice questions about Utah and Uist stored as a JSON object. Each answer adds points and moves you on to the next question.
Java Quiz
Ten Java questions rendered with jQuery. It keeps score, then offers Try Again or a Study view listing the correct answers.
Final project
A multi-page site bringing PHP, Bootstrap and jQuery together.
Bridge 2 Awakening – band shop
A band website with a merch shop: shirts and stickers go into a PHP session cart, a jQuery notice slides down when an item is added, and the cart page updates quantities or removes items. Product photos flip to the back on hover.
The class's personal-info pages have been retired, and a few unfinished or broken practice pages (an external Flickr feed demo and a layout copy) are left out.