A web app to list all your TODOs!
This web-app was created using only HTML, SCSS and Vanilla JS.
It's mainly made for computer use, still basically responsive for phone use (not optimized).
It's written in Modular Javascript using Webpack as a bundler and modular CSS with SASS. The goal of the project was to get familiar with OOP, Webpack and SASS. It makes use of localStorage feature.
🔗 Live preview: here
🔗 GitHub repo: here
The app is very intuitive, you can set a lot of info for your todos: just click the task tab and push the edit button, then add your info and click done.
You can delete todo just by checking them out (one at a time), you have 3 seconds to change your mind by unchecking them to stop the countdown.
You can filter your todo by projects: if you've added a project in your todo, it will show up in the projects' list, ready to filter todos. You can delete projects by clicking 3 times on the project: a countdown of 3 seconds will start, and if you won't re-click 3 times before the end, it will be deleted from the list.
Finally, you can sort projects by date, priority and alphabetical order: it will sort your todos accordingly to the chosen project filter.
- HTML
- SCSS
- Vanilla JS
- Webpack
- VS Code + ESLint + Node
- Git & GitHub
- Sass's modular writing improved
- Webpack configuration optimized
- ES6 Modules as the main way to develop the app
- Improved objects manipulation: objects, arrays, functions
- Deepened DOM traversing
- Introduced CRUD method to think about objects
- Prepared to introduce React: element injecting through JS
- Responsiveness for complex functions and designs
- SCSS syntax
🗿 buondevid --> GitHub