JavaScript Demos

Welcome to the JavaScript Demos page! Here, you'll find a collection of interactive demonstrations showcasing the capabilities of JavaScript and various libraries. Explore the demos below to see how JavaScript can be utilized to create engaging and dynamic web experiences.

jQuery DOM Manipulation & Events

Guessing Game
A simple guessing game that demonstrates the power of binary search.
Playful Button Infection
Explore a playful demo page that mimics a Wikipedia article describing self-replicating buttons, while being infected with these self-replicating buttons.
Squirrely Button
A fun and interactive demo that showcases the power of JavaScript events and DOM manipulation. Click the button to see the magic happen!
Choose Your Own Adventure
Dive into a captivating choose-your-own-adventure experience. Learn about the design approach that emphasizes data-driven structure, keeping the code concise. Explore the code and witness how a single data object contains all the information and movement for the game.

Hiding/Showing Elements

Single Page jQuery Demo
A demonstration of how to construct a single page application using jQuery and discover that the popup window was coming from inside the house!
Accordion Tabs
A demonstration of how to use jQuery UI to create accordion tabs. Click on the tabs to expand and collapse the content.
Haunted Hospital - Hide/Show Demo
A creepy demonstration of how to use jQuery and buttons to hide and show elements on a page. Will you find your lost memories and survive?

Libraries

JS Library Demo: Boids 1
A demonstration of the power of JavaScript libraries. (show HTML)
JS Library Demo: Boids 2
Another demonstration of the power of JavaScript libraries. (show HTML)
Creating Text with Tracery Library
Discover the amusing Tracery library and its application in generating text. Follow the journey of understanding, modification, and playful exploration with the Tracery demo.
UCSC Map using Leaflet Library
Explore the UCSC campus with an interactive map. Learn about the Leaflet library and its application in creating interactive maps.

APIs and AJAX

Random Recipe
A demo that fetches random recipes using the Spoonacular API.
Random Useless Facts
A demo that fetches random useless facts using the Useless Facts API.
Firebase Integration
Demonstrating the Firebase database API with live text update functionality.