MavScript Con 2025 - Session Builder

A two-page interactive web application for building personalized Comic-Con schedules

Built with vanilla JavaScript, modular CSS, and localStorage persistence.

---

Features

• Save & Stay workflow - Add multiple sessions without page reloads
• Dynamic form validation with visual feedback
• Real-time session filtering by fandom category
• Persistent data storage across page navigation
• Interactive schedule management (add, delete, clear)
• Conflict detection with visual warnings for overlapping sessions
• Fully responsive design - Three breakpoints (desktop, tablet, mobile)
• Random placeholder system for enhanced UX
• Full accessibility support - ARIA labels, keyboard navigation, screen reader optimized

---

Tech Stack

• Vanilla JavaScript - ES6 modules, OOP architecture
• Modular CSS - Organized into 5 focused modules
• localStorage API - Client-side data persistence
• No frameworks - Pure web fundamentals

---

Architecture

File Structure

Project_3_Blue/
├── index.html                      # Registration form page
├── pages/
│   └── schedule.html               # Schedule table page
├── css/
│   ├── styles.css                  # Main import file
│   └── modules/
│       ├── base.css                # Variables, reset, body
│       ├── layout.css              # Cards, header, navigation
│       ├── forms.css               # Inputs, buttons, validation
│       ├── tables.css              # Schedule table, badges
│       └── responsive.css          # Mobile, print, conflicts
├── js/
│   ├── app.js                      # Application entry point
│   ├── controllers/
│   │   ├── FormController.js       # Registration page logic
│   │   └── ScheduleController.js   # Schedule management
│   ├── services/
│   │   ├── Validator.js            # Validation service
│   │   └── StorageService.js       # localStorage service
│   └── data/
│       └── sessionData.js          # Session data model
└── jsconfig.json                   # VS Code configuration

Design Patterns

• MVC-Inspired: Controllers handle page logic, Services handle business logic
• Single Responsibility: Each module has one clear purpose
• ES6 Modules: Import/export for clean dependency management
• Service Layer: Abstracted validation and storage operations

---

Theme & Styling

Comic-Con Aesthetic:

• Electric Blue (#0060df) - Primary brand color
• Accent Red (#ff0055) - Highlights and warnings
• Card-based layout with hard shadows
• Comic-style fonts (Bangers, Comic Neue)
• Gradient badges for fandom categories

---

How to Use

For Users:

1. Open index.html in your browser
2. Fill out the registration form:
   • Enter your name and email
   • Select a fandom category
   • Choose a session title
   • Pick a time slot
   • (Optional) Add cosplay notes
3. Click "Add to Schedule" - form stays open for adding more sessions
4. Navigate to "View My Schedule" when done
5. Delete individual sessions or clear all

For Developers:

1. Clone the repository
2. Open index.html in a browser (no build process needed!)
3. All modules use native ES6 imports
4. Configure VS Code with included jsconfig.json

---

Session Data

The app includes 20 pre-loaded sessions across 5 fandom categories:

• Sci-Fi: Multiverse Storytelling, Space vs. Magic
• Anime: Opening Themes Live, Villains We Love
• Gaming: Indie Game Building, Cosplay Armor 101
• Superheroes: Heroes Under the Mask, Dynamic Poses
• Fantasy: Epic Worldbuilding, GM Roundtable

Each session is offered at multiple time slots (9 AM, 11 AM, 1 PM, 3 PM, 5 PM).

---

Key Features

Save & Stay Workflow

Continuous flow for adding multiple sessions:

• No page reload after submission
• Form clears but keeps name/email filled during the current session
• Green "✅ Saved!" confirmation feedback
• Add 5+ sessions in under a minute
• Form fully resets when navigating away or refreshing the page

Visual Validation System

No annoying popup alerts - uses visual feedback:

• Invalid fields turn red with pink glow
• Friendly error messages explain what's needed
• Shake animation draws attention
• Real-time clearing as user fixes errors
• Event-driven animation cleanup (no brittle setTimeout)

Random Placeholder Generator

The notes field displays a different humorous placeholder on each page load:

• "Need extra chair for my Buster Sword..."
• "Allergic to Kryptonite, please advise..."
• "Requesting a table near the TARDIS landing zone..."
• Vanilla Math.random() implementation

Dynamic Filtering

• Session dropdown automatically updates based on fandom selection
• Time slot dropdown populates based on session availability
• Blue "tech pulse" animation on auto-fill

Conflict Detection

• Schedule page highlights time conflicts with pulsing red animation
• Visual warning icon (⚠️) for overlapping sessions
• Helps users manage their convention schedule

Accessibility Features

Fully accessible to screen readers and keyboard users:

• Semantic HTML5 with proper roles (banner, main, navigation, toolbar)
• Comprehensive ARIA labels on all interactive elements
• aria-required attributes on required form fields
• aria-live regions for dynamic content updates
• Visible focus states with blue border and shadow
• Full keyboard navigation support (Tab, Enter, Space)
• scope attributes on table headers for screen readers

Responsive Breakpoints

Three breakpoints following Grid → Flux → Stack pattern:

Breakpoint 1: Desktop (1024px+) - Grid Layout

• Full table format with all columns visible
• Horizontal button controls
• Optimized for large screens

Breakpoint 2: Tablet (768px - 1023px) - Flux Layout

• Table remains in table format
• Adjusted font sizes and padding
• Horizontal controls with smaller buttons
• Smooth transition between desktop and mobile

Breakpoint 3: Mobile (480px - 767px) - Stack Layout

• Table transforms into card-based layout
• Each row becomes a separate card with labels
• Vertical stacked controls
• Touch-optimized button sizing

Breakpoint 4: Small Mobile (< 480px) - Compact Stack

• Highly compressed layout for small screens
• Smaller fonts and compact spacing
• Full card transformation with minimal padding
• Optimized for phones in portrait mode

---

Browser Compatibility

• ✅ Chrome/Edge (Chromium)
• ✅ Firefox
• ✅ Safari (ES6 module support required)

---

Technical Highlights

This project demonstrates:

1. Vanilla JavaScript - Pure ES6, no frameworks or dependencies
2. Modular CSS - Organized into 5 focused modules
3. OOP Architecture - Controllers and Services pattern
4. Form Validation - Custom validation with visual feedback
5. Data Persistence - localStorage CRUD operations
6. Event-Driven Design - animationend events, e.currentTarget for robust handlers
7. Responsive Design - Mobile-first approach with card transformation
8. Accessibility - ARIA labels, semantic HTML, keyboard navigation, screen reader support
9. DOM Performance - Single innerHTML write instead of loop concatenation (prevents N reflows)
10. Clean Code - No unused functions, no redundant code, JSDoc throughout
11. UX Polish - Save & Stay workflow, random placeholders, visual confirmations

---

Author

Darien/Blue (MavScript) Web Developer & Game Dev

Built as a demonstration of vanilla web fundamentals and professional code architecture.

---

Status: ✅ Complete Last Updated: December 2025