RouletteOS (Ruleta de Clase)

Live Website

RouletteOS is a lightweight, interactive random name picker designed specifically for classroom environments and group dynamics. Built entirely as a single-file web application, it combines fluid animations with reliable local data persistence.

Overview

This project serves as an interactive tool to randomly select students or participants. It renders a dynamic, color-coded roulette wheel using HTML5 Canvas and calculates physics-based spinning animations via Vanilla JavaScript.

Key Features

• Dynamic HTML5 Canvas: The wheel is drawn and animated natively using the Canvas API, ensuring smooth, high-performance rendering.
• Local Data Persistence: Student lists, spin history, and application settings (like the auto-remove toggle) are automatically saved to the browser's localStorage.
• Smart Participant Management: Features include importing bulk lists, auto-removing winners from subsequent spins, and a one-click restore for removed participants.
• Mobile-First Responsive UI: Adapts seamlessly to any device, featuring a bottom tab bar navigation for mobile screens and a permanent sidebar for desktop views.
• Visual Feedback: Integrates canvas-confetti for celebratory animations upon selection.

Tech Stack

• Rendering: HTML5 Canvas API
• Logic & State: Vanilla JavaScript (ES6+), LocalStorage API
• Styling: Pure CSS (CSS Variables, Flexbox/Grid, Media Queries)
• External Assets: Canvas-Confetti (via CDN), Inter Font

Local Setup

Because this tool is built as a single, self-contained HTML file, no build steps or servers are required.

1. Clone the repository:

   git clone [https://github.com/eduolihez/rouletteos.git](https://github.com/eduolihez/rouletteos.git)

2. Navigate to the directory:

   cd rouletteos

3. Simply open index.html in any modern web browser.

Contact

Eduardo — eduolihez@gmail.com · LinkedIn