This is a solution to the Conference ticket generator challenge on Frontend Mentor Frontend Mentor challenges help you improve your coding skills by building realistic projects.
The Conference Ticket Generator is a front-end web application that allows users to create personalized tickets for the Coding Conf 2025 event. Users can upload their avatar, enter their personal information, and generate a visually appealing ticket.
- User Information Form: Collect user details including:
- Avatar upload (with validation for file type and size)
- Full name
- Email address
- GitHub username
- Form Validation: Comprehensive validation with error messages for:
- Required fields
- Email format
- Image file type and size restrictions
- Ticket Generation: Creates a personalized conference ticket with:
- User's avatar
- Full name
- GitHub username
- Conference details
- Responsive Design: Optimized for various screen sizes (mobile, tablet, desktop)
- Accessibility: Keyboard navigation and screen reader support
- Fill out the form with your details:
- Upload your avatar (JPG or PNG, max 500KB)
- Enter your full name
- Provide your email address
- Add your GitHub username
- Click "Generate My Ticket"
- View your personalized conference ticket
- The ticket information is displayed and can be saved or shared
- HTML5
- CSS3 (with custom properties and Flexbox)
- Vanilla JavaScript
- Responsive design principles
- Accessibility best practices
- Clone the repository:
git clone https://github.com/yourusername/conference-ticket-generator.git - Navigate to the project directory:
cd conference-ticket-generator
Since this is a front-end only application, you can simply open the index.html file in your browser:
open index.html
Or use a local development server like Live Server for VS Code.
- Frontend Mentor - @Ayokanmi-Adejola