Submitted over 2 years ago

SCSS, Vanilla JS and HTML Drag and Drop API

#accessibility#sass/scss

Dave• 5,245

@dwhenson

Preview site View code

This is a solution for...

Todo app

HTML
CSS
JS

3intermediate

View challenge

Design comparison

SolutionDesign

Solution retrospective

I've focused on JavaScript and the HTML Drag and Drop API for this one, so some aspects of the CSS are not finalised get (e.g. dark mode). But I would appreciate any advice on the following:

What overall approach would you take to writing the JavaScript for this kind of challenge? I ended up kind of using localStorage as a place to manage the state of each todo, but honest the code is a bit of a mess and there are a lot of re-rendering calls.

I was wondering if an approach using a Class or Constructor might be better? Any advice on this would be welcome. I'm not at the stage with JS yet when I can see the best way to approach something (I think I am mostly there with CSS...) so I can end up with quite complex code.

KNOWN ISSUES:

The checkbox ticks disappear in Chrome on large viewports - no idea why yet! I'm only using media queries in one place and they don't affect this. [UPDATE: FIXED]
The Drag and Drop API isn't working well on Firefox - I will look into fixing this but if it's too much, honestly, I'm just going to leave it!
The filters are a mess on iOS. They work, but the style class doesn't seem to be applied, but is on desktop. [UPDATE: FIXED]
I am using beforebegin to insert the element being dragged, this means you can't move an item directly to the bottom of the list.

If you spot any other issues please let me know, but I'm thinking that I've gone on a wrong track here with the way I've approached things JavaScript-wise as there seem to be so many possible edge-cases!

Thanks in advance for any advice.

UPDATE: FIXED

Layout on small viewports improved
Ticks disappearing on large viewports
Application of active filter class on small viewports

Calling time on this one!

Community feedback

Emmilie Estabillo• 5,540

@emestabillo

Posted over 2 years ago

Hey Dave, really great job with this project! I got curious about the checkbox issue so I dug a little bit and found that if you apply background-color to the pseudoelement, it would not disappear. Hope this helps a little :-)

Marked as helpful

Dave• 5,245

@dwhenson

Posted over 2 years ago

@emestabillo thanks so much. I’ll check that out when back at my machine. I could not work out what was happening or why. Much appreciated.

Dave• 5,245

@dwhenson

Posted over 2 years ago

@emestabillo thanks so much for this I've fixed this and a few other issues, just a couple of question on this issue if you have a moment:

Do you know why this was happening? It was a complete mystery to me.
How did you track down the issue? I struggled to know where to look.

Thanks again for your help!

Emmilie Estabillo• 5,540

@emestabillo

Posted over 2 years ago

@dwhenson I'm just as baffled lol. It may be the clip-path but I'm not exactly sure. My process here was to place a border around the pseudoelement to find out where it's disappearing to. And then I just checked off the properties one by one to see if any one of them is the culprit. It didn't look like it was disappearing so I thought to add a background color to further check if it was collapsing. It's not the best answer to your question, but that's exactly what happened 😄

Marked as helpful

Dave• 5,245

@dwhenson

Posted over 2 years ago

@emestabillo that's great thanks. Sometimes it just has to be that way!! 🙂

Please log in to post a comment

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