All Tracks Problem

The Productivity To-Do list



You have to build a notes/todo list application. The application can support the following types of notes

  1. Text notes
  2. Image notes
  3. Location notes
  4. Scribbled notes

Each note must have a title and date. Its mandatory to support text and image notes, depending on the availability of time you can then implement scribbled note and location notes.


  1. Each note has to be stored in the local storage (references given below)
  2. Each note can belong to a category, however creating a category should not be mandatory, one should be allowed to create notes that do not belong to any category.
  3. Every note can be deleted, if you have time you can also create functionality of archiving.
  4. You can optionally implement the feature to search notes


  1. You will have to use localstorage / IndexedDB for storing data.

  2. For location, when one enters an address, it should be displayed as an embedded js map using Google Maps js library.

  3. Similarly, you will have to use HTML5 Canvas to build a sketch/scribble mechanism and convert it into an image.

Given below is a sample of how the Todo list can look like, but you are encouraged to be creative with the UI and functionality. You are free to place the different parts of the to do list as you may want in the web application.

Important Links

  1. Saving images using IndexedDB
  2. IndexedDB API
  3. Saving images in local storage
  4. Google Maps API
  5. HTML5 Canvas Tutorial
  6. Creating paint application with HTML5

Some other relevant links

  1. jQuery Library
  2. Bootstrap for CSS
  3. Font awesome for icons

Todo List


    Live changes

    Please make sure html and body tags are present in the code

    Output Console Clear Console

    Our compiler wanted to be here!But the mobile is too cramped for it to load. It says it would be more comfortable on the web.

    Your Rating:


    View All Notifications