Ticket Generator Dynamically (HTML, CSS, JS, TAILWIND CSS)

What are you most proud of, and what would you do differently next time?

If I were to build this again, I would:

Refactor the JavaScript to make it more modular and maintainable, possibly using ES6 classes or hooks if I used React.

Improve the accessibility features, especially around ARIA attributes and screen-reader feedback.

Add unit tests or at least some test-driven checks for validation logic.

Consider localStorage or sessionStorage to preserve form data in case the page reloads or the user navigates away mid-way.

Optimize the ticket output for download/export as image or PDF, which would make it more useful in a real-world scenario.

What challenges did you encounter, and how did you overcome them?

The biggest challenge was making the drag-and-drop avatar upload work smoothly and look good. I solved it by combining basic event listeners with the FileReader API and tested across devices. Form validation without any library was also tricky, but I handled it using custom JavaScript and simple error messages. Making the ticket layout responsive took a few design tweaks with Flexbox and media queries.

What specific areas of your project would you like help with?

I'd love feedback on how to improve the structure of my JavaScript code — especially making it more modular and reusable. I'm also unsure if my form validation and accessibility (like ARIA usage and screen reader support) are fully correct. Lastly, any tips on optimizing the ticket layout for better responsiveness or adding download/export functionality would be helpful!