August 10, 2017 2 mins
I made a high-fidelity prototype in Sketch and that was my guideline to build the app.
I changed the background to white and the font from Montserrat to Proxima Nova. I liked the red, so the colors are the same. I also added a progress bar which will be complete after all the tasks are done. I also added some animations to the click using animate.css, such as bouncy tasks and rotating logos.
I didn’t want to use a database or add log in and things like that because this was supposed to be for me to practice frontend. But then again, I needed it to be functional. I used the browser’s local storage to save the data of completed tasks and the time and the name of the tasks. On load I’ll check if local storage is defined and recreate the interface with the completed tasks. Otherwise the setup questionnaire is presented. Here’s a video of how that works.
Try it out
Written by Yash Agrawal in San Francisco.