An interactive, responsive web app that generates a personalised conference ticket with live validation, image upload, and dynamic UI updates.
- Drag & drop avatar upload with live preview
- Strong client-side form validation (name, email, GitHub username)
- Dynamic ticket generation with a unique ticket number
- Avatar persistence using
localStorage - Fully responsive, mobile-first design
- Advanced CSS styling with custom properties & layered visuals
- Implementing drag-and-drop file uploads
- Using the FileReader API for live image previews
- Writing robust regex-based form validation
- Managing UI state without frameworks
- Structuring scalable, maintainable CSS
- Creating smooth UX transitions using class toggling
- Persisting user data with localStorage
📌 This project was built as part of a Frontend Mentor challenge, helping me strengthen real-world frontend problem-solving skills and attention to UI/UX details.
- HTML5 – Semantic structure & accessibility
- CSS3 – Modular CSS, custom properties, responsive layouts
- Normalize.css – Cross-browser consistency
- JavaScript (Vanilla) – DOM manipulation, validation, state handling
- FileReader API – Image upload & preview
- LocalStorage API – Persisting user avatar
- Drag & drop or click-to-upload avatar image
- Image size validation (max 500KB)
- Email validation with inline error feedback
- GitHub username validation using regex
- Change/remove uploaded avatar
- Auto-generated unique ticket number
- Seamless UI transition from form → ticket
- Gradient text & layered background effects
- Clone the repository
git clone https://github.com/FrontEndHighRoller/conference-ticket-generator.git
- Open index.html in your browser
- Resize the screen to see responsive layouts and image switching in action 🎯
🙋♂️ Author Dennis Rumanek
GitHub: https://github.com/FrontEndHighRoller
LinkedIn: https://www.linkedin.com/in/dennis-rumanek/
⭐ If you like this solution, feel free to star the repository!