Hi Danny,
To be honest, I think you've got quite ahead of yourself on this one. I'd recommend you try some of the simpler challenges first and nail those basics of html structure, css structure and specificity, and then move on to ES6/modern javascript practices.
Your solution doesn't match the design and looks a bit broken on mobile for me, but a lot of that is caused by minor css mistakes that will be simple for you to fix once you've brushed up on those topics.
For example
- most elements don't need widths/heights
- single class css selectors are best practice for good reason
- keep style and script in separate files
- html5 elements give structure and interactivity
- titles and placeholders are not used by assistive tech, you need content or labels
- look up es6 like const and let variables, for loops, querySelector etc and lean on non-window methods
This is a really hard challenge in some respects. I wouldn't even know how to do some of the bits like drag n drop without research (not something I've had to do in professional work yet). So, we'll done for having a go!
I just think you'll benefit from stepping back for a bit and revisiting this challenge after more practice ☺
Good luck
