Productivity Boost - My Amazing Todo-List! 📋

This project was written using only vanilla JS, html and CSS.

It is hosted on GitHub pages here - https://kosta1221.github.io/productivity-boost-todolist/src/index

Productivity Boost is a todo list that can organize your various daily tasks and mark them as completed when you're done!

Features include:

• Saving your todo tasks with a description, priority and date when the task was created. ✔
• Sorting your tasks according to priority or date, in ascending or descending order. ✔
• Sorting your tasks as you please by dragging them to the desired location in the list. ✔
• Adding your todo tasks to the 'completed todos' section where you can view the tasks which you've completed and be proud of yourself. ✔
• Sorting completed todos the same way you'd sort regular todos. ✔
• Dragging your todos to the 'completed todos' section, which will also add them there.
• Deleting any of your todos or completed todos. ✔
• Also your todolist will be persistent! It, along with all of your actions like adding, deleting or completing todos are saved online. ✔
• Works on mobile devices and medium screens! ✔

Functionality:

This is how you add your first todo:

This is how you add your todo to completed todos (There are 2 ways):

This is how you delete your todos:

When you have a lot of todos, you can organize them however you see fit like so:

You can also sort them by either their date or priority in an ascending or descending order like so:

Congrats!! you can now use your todo list as you wish! This is how it looks like on smaller screens:

My thoughts:

This was a very fun project for me, definitely got to refine most of what I've learned so far! I did my best to commit & push as early and as many times as I could, you can clearly see my whole working process through my 40+ commits. I've also tried to describe every small thing I've added and issue I had, and to spread my work evenly throughout the given timeframe.

Resources:

The persistance of the todo-list is achieved with jsonbin.io

This resource was very handy for working with the API:

https://javascript.info/fetch

Implementing drag & drop was challenging. I've used these amazing guides for it:

https://htmldom.dev/drag-and-drop-element-in-a-list/

https://htmldom.dev/make-a-draggable-element/

https://javascript.info/mouse-drag-and-drop

For styling I have used this awesome gradient generator:

https://www.w3schools.com/colors/colors_gradient.asp

I've used icons from font-awesome for my footer:

https://fontawesome.com/

And countless of other tabs of MDN, w3schools and stackoverflow which have all helped me understand better the intricacies of JS, HTML and CSS.