Todo app

Todo app is an application for tracking your day-to-day tasks where you can filter them by all, active and completed. App has light/dark theme switcher and local storage is used for saving data.

Design, style-guide and icons are provided by Frontend Mentor.

Table of contents

• The challenge
  • Screenshot
  • Links
  • Built with
  • What I learned
• Author

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
• Drag and drop to reorder items on the list

Screenshot

Links

• Solution URL: SOLUTION URL
• Live Site URL: LIVE SITE

Built with

• Semantic HTML5 markup
• CSS custom properties
• Flexbox
• SASS(SCSS)
• SASS variables, mixins, modules, nesting
• Vanilla JS
• Desktop-first
• SortableJS library

What I learned

Through coding and creating this amazing app I learned a lot of Vanilla JS.

• How to import modules and libraries
• How to refactor code and make it readeble with functions
• Traversing the DOM
• How to use and manipulate with Local Storage
• SortableJS library

Author

• Codepen - @dusanlukic
• Frontend Mentor - @dusanlukic404
• LinkedIn - @dusan-lukic