An interactive, playful web application built to ask someone special to be your Valentine. This project combines a bit of "software engineering mischief" with a romantic gesture.
This is a Single Page Application (SPA) built with React and hosted on Val Town. It guides the user through a fun, multi-step journey to plan the perfect date.
The app features a "stubborn" UI design:
- The Elusive 'No' Button: Using
onMouseEnterandonClickhandlers, the 'No' button moves randomly across the screen, making it a challenge to click. - The Growing 'Yes': Every time the user attempts to click 'No', the 'Yes' button increases in size, eventually dominating the screen.
- Interactive Flow: 5-step state machine (Intro -> Celebration -> Date Selection -> Food Selection -> Activity Selection -> Final Ticket).
- Visual Selection: Grid-based cards for food and activities with real-time feedback.
- Confetti Cannon: Integrated
canvas-confettifor the big "Yes" moment. - Final Summary: Generates a "Valentine's Ticket" with a summary of the date, designed for a quick screenshot confirmation.
- Zero External Dependencies: Uses native System Font Stacks for a modern, fast-loading UI without external font libraries.
| Feature | Technology |
|---|---|
| Language | TypeScript / JSX |
| Library | React 18.2 |
| Runtime | Val Town (Deno) |
| Effects | Canvas-Confetti |
| Styling | CSS-in-JS & CSS Animations |
App(): Main functional component managing the state of the user's journey.moveNoButton(): Logic for calculating random X/Y coordinates within the viewport.handleSelection(): Updates the choice state and scrolls the user to the top for a smooth transition.server(): The entry point that serves the HTML/CSS shell and hydrates the React client.
"Better Say Yes" License - Feel free to fork, but you must use it for romantic purposes only! ❤️