> “There is no such thing as a bad idea. Only poorly executed awesome ones,”
Damon once said and I couldn't stop thinking about that while building this Halloween project.
When I stumbled upon the Frontend Challenge - Halloween Edition, Perfect Landing_, I thought why not revisit some old JavaScript fundamentals and create a landing page that truly captures the Halloween spirit?
The Founder's Day and the Lockwood Masquerade Ball have always been my favorite events from The Vampire Diaries so while planning this project I thought, "Let's merge them together!"
That's how The Founder's Ball was born: an interactive storytelling game that lets users step into a dark ballroom, pick a partner, and uncover their supernatural identity.
The Experience
The entire app is built with HTML, CSS, and Vanilla JavaScript (ES6).
Key Technical Features:
- Modular JavaScript with ES6 imports/exports for cleaner code organization
- CSS Keyframes for smooth fade-in transitions between sections
- Responsive Design optimized for mobile, tablet, and desktop (5 breakpoints)
- Dark Gothic UI with gradients, animations, and elegant typography
The user journey flows through 6 distinct sections:
- Landing → Enter the mysterious ballroom
- Attire Selection → Choose your formal wear
- Outfit Choice → Pick from 4 elegant designs
- Partner Selection → Meet your mysterious companion
- Identity Reveal → Discover your supernatural nature
- Your Story → Read your personalized tale
My goal was to create a user journey that felt like navigating through a storybook, where each choice transitions seamlessly into the next moment.
My Learnings
This challenge gave me the perfect push to revisit my Vanilla JavaScript foundations and dust off some forgotten concepts.
Here's what I brushed up on:
- Array Methods: join(), find(), map()
- State Management
- DOM Manipulation
- ES6+ Features: arrow functions, modules, destructuring
Play The Founder's Ball
View Source Code
Halloween doesn't always have to be scary. Sometimes it's about mystery, elegance, and the thrill of becoming something supernatural for a night.
So… if you've ever wondered what your story will be in Mystic Falls, come find out. The Founder's Ball awaits you at the Lockwood Mansion from sunset to midnight. 🦇
All images used in this project are credited to their original owners.
Top comments (1)
This is such a creative and immersive way to use frontend fundamentals @amelia2802 ! The seamless transitions are key to the storybook feel. How did you approach structuring the JavaScript to keep the narrative flow so smooth between sections?