Frontend Mentor - Todo app solution

This is my solution to the Todo app challenge on Frontend Mentor.

Table of contents

• Overview
  • The challenge
  • Screenshot
  • Links
• My process
  • Built with
  • What I learned
  • Continued development

Overview

The challenge

Users should be able to:

• View the optimal layout for the app depending on their device's screen size
• See hover states for all interactive elements on the page
• Add new todos to the list
• Mark todos as complete
• Delete todos from the list
• Filter by all/active/complete todos
• Clear all completed todos
• Toggle light and dark mode
• Bonus: Drag and drop to reorder items on the list

Screenshot

Links

• Solution URL: https://github.com/andy-devs/todo-app
• Live Site URL: https://andy-devs.github.io/todo-app/

My process

Built with

• HTML
• CSS
• JavaScript
• Dragula - simple and useful library to make drag and drop

What I learned

I first tried to create elements with javascript and add them to the document. It wasn't very hard, but a little bit painful. Also I made drag and drop but I don't really know how to make it work on mobile. One of the hardest parts was theme change because you should get every element that you need to change the color in and manually change it. Well, it's not so hard, but time consuming and looks clunky. Overall, It was fun and challenging project and I enjoyed it!

Continued development

I think I'll continue learning vanilla JS and building projects. Also I need to finally make my own website.