It's kind-of strange you say SCSS when you don't use it and what's there would work as normal CSS.

I find it troubling though the number of ID for nothing, the use of onevent attributes in the markup for what should be added via addEventListener from the scripts, Paragraphs around incomplete thoughts, pixel metric design, lack of the non-optional alt attribute etc, etc.

It's resulting in 1.38k of markup doing around 900 byte's job. When half the resultant rewrites code would be URI's, that's not a good sign.

I mean take the top area and strip out all the junk and give it proper semantics.

<ul id="dropZone">
<li>Fish</li>
<li>Mouse</li>
<li>Cat</li>
<li>Dog</li>
</ul>

Then hook your scripting.

for (let li of document.querySelectorAll('#dropzone li')) {
li.addEventListener('drop', drop, false);
li.addEventListener('dragover', allowDrop, false);
}

Don’t piss all over the markup with the outdated outmoded onevent trash. DRY, let the computer do the repeating.

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store