Skip to content
Submitted 3 months ago

Responsive Ticket Generator | HTML, SCSS, JS

#sass/scss
Dylan Heslop•2,340
@dylan-dot-c
Preview site (opens in new tab)View code (opens in new tab)
This is a solution for...Conference ticket generator
  • HTML
  • CSS
  • JS
2junior

Design comparison

SolutionDesign

Solution retrospective

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

Im most proud of getting the challenge completed and having a free design credit from the leaderboard was necessary for this to look good.

I could make the scss and js code better and improve accessibility as well.

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

Many challenges.

  1. Multiple background images was hard mainly in terms of knowing how to use them and keeping track of which location they are in when using different properties like background-position. I just had to keep in mind the positions of them and use commas to separate each bg.
  2. Drag and drop UI. It was hard because I never did any like that,from the OS to the webpage and I also needed some refreshes on the D&D API. Got some help from chatgpt which added the event listeners as an array and prevents the default action from happening
  3. Finally, I had some issues with submitting the form, checking the correct file type and size. ALso I made use of localStorage and the FileReader class to help manipulate the image easier.
What specific areas of your project would you like help with?

I would like to know ways I can improve my accessibily, scss code and my JS code.

Community feedback

  • Rebecca Padgett•2,040
    @bccpadgePosted 3 months ago

    Hi @dylan-dot-c. Congratulations on completing this challenge!!!🎉

    To make your HTML more semantic when using <form> you can update your code with the example below

    <form>
 <fieldset>
    <legend>Sign up to get Conference ticket</legend>
</fieldset>
 <fieldset></fieldset>
 <fieldset></fieldset>
</form>

    You can put your <label> and <input> in each <fieldset>

    More info📚:

    I hope you find this useful and don't hesitate to reach out if you have any questions

    Marked as helpful
    1
    Dylan Heslop•2,340
    @dylan-dot-cPosted 3 months ago

    @bccpadge Thanks, so your saying that instead of using divs to group my form fields I should use fieldset element and for the legend can I make it a sr-only class so only screen readers can see it?

    0
    Rebecca Padgett•2,040
    @bccpadgePosted 3 months ago

    @dylan-dot-c Yes!!!

    1

Please log in to post a comment

Log in with GitHub

Join our Discord community

Join thousands of Frontend Mentor community members taking the challenges, sharing resources, helping each other, and chatting about all things front-end!

Join our Discord