/gemini-swagometer

Primary LanguageJavaScript

Dev South Coast Demo Swagometer (Gemini Pro 2.5)

This simple demo showcases the power of Gemini Pro 2.5 (Preview 03-25) to build a fully functional web app in a single prompt. The prompt itself can be see in prompt.md (and was created in aistudio.google.com). It was created for the Developer South Coast talk by Mark Heath on Apr 17 2025. It's token count was 9,738 out of an available 1 million tokens.

It was competing against an implementation using GitHub Copilot with o4-mini, and managed to create the app more quickly and with a more visually appealing style. (Although Gemini 2.5 was instructed to use vanilla JavaScript while o4-mini made an entire react app).

Gemini Pro even supported optional wheel.png and pointer.png images which you can put into the assets folder if you want to override the CSS based images.

Below are the instructions Gemini provided which are mostly correct except that you want to use a simple web server so it can load the JSON files.

How to Use

  1. Save the files with the correct names in the swagometer folder.
  2. (Optional) Place wheel.png and pointer.png in an assets subfolder if you want to use images instead of the CSS wheel/pointer. You would need to adjust the CSS selectors (.wheel, .pointer) to use background-image instead of gradients/text.
  3. Modify attendees.json and prizes.json with the actual data before the event using a text editor. Ensure the JSON format is valid.
  4. Open the index.html file directly in your web browser (e.g., Chrome, Firefox). No web server is needed.
  5. Connect the laptop to the projector and set it to full-screen (usually F11 key).
  6. Click "Spin the Wheel!" and follow the prompts.

Key Features Implemented:

  • Vanilla JS: No external libraries or frameworks.
  • JSON Data: Easy to update attendee and prize lists.
  • Visual Appeal: Fun fonts, colors, and CSS-based wheel graphic.
  • Spinning Animation: CSS transform and transition for a smooth spin.
  • Outcome Logic: Handles "Collected", "Not Present", and "Not Collected" scenarios.
  • "Not Collected" Protection: Remembers the last rejected pair to prevent immediate re-selection (unless it's the only option left).
  • End State: Displays "All swagged out!" when prizes run out.
  • State Updates: Shows remaining attendee/prize counts.
  • Single Screen: Designed to fit reasonably well on a projected screen.
  • Error Handling: Basic loading error check.