Frontend Mentor - Conference ticket generator

I wanted to challenge myself to build this project using vanilla JavaScript, HTML5, and CSS3. It was a fun challenge and I learned a lot more about making forms accessible.

• Overview
  • The challenge
  • Screenshot
  • Links
• My process
  • Built with
  • Continued development
  • Useful tools
• Author

Overview

The challenge

Users should be able to:

• Complete the form with their details
• Receive form validation messages if:
  • Any field is missed
  • The email address is not formatted correctly
  • The avatar upload is too big or the wrong image format
• Complete the form only using their keyboard
• See the generated conference ticket when they successfully submit the form
• View the optimal layout for the interface depending on their device's screen size

Screenshot

Links

• Solution
• Live Site

My process

Built with

• Vanilla JavaScript
• HTML5
• CSS3

Continued development

• Integrate it into an actual web application

Useful tools

• Prettier: never go without a code formatter
• VSCode: my go-to IDE
• ONLY when you get really stuck after exhausting all other options should you use AI code assistants for this challenge, or when it's mundane tasks like writing this README.md file.

Author

• Website - Mark Wong
• Frontend Mentor - @markwong167