A playful and highly interactive outfit generator built with HTML, CSS, and vanilla JavaScript. This project showcases both front-end development skills and user experience design through a fun, Barbie-themed interface for mixing and matching capsule wardrobe items.
Originally created as a personal project to digitize and randomize capsule wardrobe outfits, this app has grown into a lightweight web-based tool for exploring outfit combinations based on mood or setting (e.g. “casual mode”).
This app was inspired by a mix of:
- Capsule wardrobe planning tools
- Nostalgia for early 2000's dress up games
- The joy of playful, interactive design
- Interactive Grid Interface with drag-free swapping and hover animations
- Capsule Categories: tops, sweaters, bottoms, shoes
- Toggle Casual Mode to filter clothing items based on occasion
- Random Outfit Generator with layered logic
- Click Individual Items to cycle through options manually
- Fully responsive, animated UI with themed gradients and sparkle effects
- No external dependencies – runs entirely in-browser
| Tech | Purpose |
|---|---|
| HTML5 | Structure and semantics |
| CSS3 | Styling, responsive layout, animation |
| JavaScript | Logic for toggles, filters, item selection |
| Flex/Grid | Layout for panels and closet components |
| Local Assets | Modular, image-based wardrobe organization |
This project was designed not only as a functional tool but also to demonstrate:
- UX sensitivity (visual feedback, hint tooltips, accessible toggles)
- Logic branching (filtering items by context using keyword heuristics)
- Front-end cleanliness (modular structure, minimal dependencies)
- Creative flair and personal style within web development
Wardrobe/
├── Tops/
├── Bottoms/
├── Sweaters/
├── Shoes/
└── placeholder.png
Ensure that image paths in the script match your folder structure when customizing.
To run locally:
- Clone the repo or download the HTML file
- Ensure you place your wardrobe images in the correct folders
- Open
Barbie Outfit Generator.htmlin any modern browser - Enjoy the ✨ fashion magic ✨
Feel free to reach out or open an issue with suggestions or feedback!