Skip to content
  • Unlock Pro
  • Log in with GitHub
Solution
Submitted over 3 years ago

SCSS, Vanilla JS and HTML Drag and Drop API

accessibility, sass/scss
P
Dave•5,295
@dwhenson
A solution to the Todo app challenge
View live sitePreview (opens in new tab)View codeCode (opens in new tab)

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:

  1. 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]
  2. 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!
  3. 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]
  4. 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!

Code
Loading...

Please log in to post a comment

Log in with GitHub

Community feedback

No feedback yet. Be the first to give feedback on Dave's solution.

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
Frontend Mentor logo

Stay up to datewith new challenges, featured solutions, selected articles, and our latest news

Frontend Mentor

  • Unlock Pro
  • Contact us
  • FAQs
  • Become a partner

Explore

  • Learning paths
  • Challenges
  • Solutions
  • Articles

Community

  • Discord
  • Guidelines

For companies

  • Hire developers
  • Train developers
© Frontend Mentor 2019 - 2025
  • Terms
  • Cookie Policy
  • Privacy Policy
  • License