Inspiration
I wanted to create something that was cute, and that was practical and actually worked to make my day easier
What it does
Users can add, edit, complete, and delete tasks while viewing real-time progress through a visual completion bar.
How we built it
I built FocusFlow from scratch using HTML, CSS, and JavaScript without any external frameworks. I started by creating the basic layout, then incrementally added features such as task completion toggling, editable tasks, delete functionality, and a dynamic progress bar.
Throughout development, I debugged issues related to event handling and localStorage persistence, refining the structure so that tasks could be edited, deleted, and marked complete seamlessly. The design was customised with a soft aesthetic theme to make productivity feel more inviting and less overwhelming.
Challenges we ran into
How to add the cross button, remove the background and still get it to work. Also trying to figure out how to make the task cancel it out when pressing anywhere on the task bar instead of when pressing the word.
Accomplishments that we're proud of
Adding the gif was a bit complicated, as well as figuring out the size of the
What we learned
I learnt how to integrate different coding languages and how to add images and different components with CSS.
Log in or sign up for Devpost to join the conversation.