Take the "To Do" list challenge with your language of choice

I throw my gauntlet down, and challenge you to build the simplest graphical interactive project I can think of. Let's start with the concept:

Step 1 / Raw concept in ONE paragraph:

Let the user enter a list of tasks which are remembered. The tasks have a checkbox to indicate completion.  The user can add/delete/edit tasks.  The user can view the three possible sets: all tasks, not-yet-completed tasks, and completed tasks.  The tasks are sorted in order of their time of addition, but the user can choose to display them in reverse order.

Step 2 / Raw Sketch done on paper:

here we see the list of tasks, the mode selector at the bottom, the add and edit buttons at top. And the sort order triangle also in the header area. Entering text is done on top of the header. There is the concept of a highlighted row, and when selected, the delete row icon shows up.

here we see the list of tasks, the mode selector at the bottom, the add and edit buttons at top. And the sort order triangle also in the header area. Entering text is done on top of the header. There is the concept of a highlighted row, and when selected, the delete row icon shows up.

Step 3 / Design primary persistent data structures:

the data structures couldn't be simpler. One binary flag for sort order (forward/reverse), and an array of records holding 2 fields; the task name, and a flag if the task is finished.

the data structures couldn't be simpler. One binary flag for sort order (forward/reverse), and an array of records holding 2 fields; the task name, and a flag if the task is finished.

Step 4 / Draw mockups in a painting program like Photoshop

In this screen we show the basic layout. Mode selectors at bottom. fonts are identified

In this screen we show the basic layout. Mode selectors at bottom. fonts are identified

completed tasks are denoted with gray text and a red strikeout line. the active row is highlited and shows the delete button

completed tasks are denoted with gray text and a red strikeout line. the active row is highlited and shows the delete button

as a convenience to the user, the CLEAR button zaps all the completed tasks. It replaces the add icon when in completed mode.

as a convenience to the user, the CLEAR button zaps all the completed tasks. It replaces the add icon when in completed mode.

Step 5 / Determine keyboard shortcuts and user interface logic

A click on the Add task icon switches to text entry mode, where header is the text input area
keyboard shortcut:  INSERT key  (command INSERT on Mac)
ENTER key terminates entry
entry is limited to 100 characters

sort order triangle icon pointing up (default value) is oldest task at top (FIFO).
clicking triangle toggles to opposite mode, with triangle pointing down.

add button is not visible when showing completed tasks, is replaced by clear button

EDIT button is only visible if a row is selected

when text entry field has no text in it yet, show a gray entry hint "Enter task"

auto save changes every 5 minutes, and save automatically when quitting task

scroll bar thumb disappears when no scrolling possible (all items visible)

text will shrink automatically, down to 6 points. After reaching the shrink limit,
then truncate text until it fits, and append three periods ... to indicate truncation

only one item can be selected at one time. when hilited, the delete icon (red circle with X) appears

Art Assets
-------------
Noteworthy font
Roboto font
Application icons for each platform

Step 6 / Calculate key measurements for different device sizes

By examining mockups, and making estimates, you specify the key measurements that will be used. For Cellphones (with diagonal screen sizes 3 - 7 inches), you will have smaller dimensions. In this particular design, we are going for 3 different sizes, which covers cellphones to desktop computers.  The color specifications are extracted from the mockups, and are shown as hex color values, which are typically used inside the code.

By examining mockups, and making estimates, you specify the key measurements that will be used. For Cellphones (with diagonal screen sizes 3 - 7 inches), you will have smaller dimensions. In this particular design, we are going for 3 different sizes, which covers cellphones to desktop computers.  The color specifications are extracted from the mockups, and are shown as hex color values, which are typically used inside the code.

Step 7 / Coding the project

Write the program in the language of your choice. A good order of implementation would be to 1) create a dummy document, 2) get the viewing to work, 3) implement actions like text entry, text edit, task delete, and sort order toggling.  Start by building for the smallest display range first (cellphone, typically iPhone 4 which is 4 inches diagonal, about the smallest device that is popular). The larger the screen, the easier it is to fit things.

Step 8 / Testing

How many of the 5 main platforms can you deliver on?

1) Mac OSX,
2) Windows,
3) iOS,
4) Android,
5) Web browser.