Submitted 4 months ago

JavaScript, DOM API, Drag and Drop API, Mutation Observer API, Flexbox

anime-js

Dmytro•160

@DmytroVoitovych

A solution to the Conference ticket generator challenge

Preview Code

Solution retrospective

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

Using the Anime.js library is something I am proud of since it's a simple and handy library. I were to do it again, I might consider using vue-petite.js, which is a lightweight library that offers strong reactivity.

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

Imitating a flexible border on the ticket section that wouldn't overlap the background images was probably the most difficult challenge.

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

I would recommend learning more about the clip-path CSS property. It helps you create unique masks.

Code

Please log in to post a comment

Community feedback

P
boverU•60
@boverU
Posted 4 months ago
If one of the purpose was to become more familiar with DnD DOM API, it is fine. But, you could just leverage label and input tags. Input already natively provides dnd, if you drag and drop files it will work just fine. You can style div or label and bind them listeners you want to use.
```
<div>
 <label for='my-file'>
  <input id='my-file'/>
 </label>
</div>
```
Animations look really great! I noticed, that you store and export js files, that contains utility functions using assets folder, which is strange. Assets folder is not the place for files like that. I would recommend to use utils folder as a convention between developers.
Marked as helpful

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