pwizla / tinysteps-todolist Goto Github PK

Part of the UI customization roadmap
(roadmap is not written in the wiki yet)

Only the Add button is semantically a button (i.e. with the < button > tag in index.html file).
Inheriting from the first design approach, other buttons ("All Done!", "Undo All", "Delete All") are just divs.

Maybe with tool tips or specially formatted divs.

Should show the user the following steps:

1. enter text for some new task and click "Add" button or press enter
2. click on an item from the "To Do" list to mark it as done
3. done items are moved to the "Done" list
4. try adding some more tasks
5. you can re-order task by drag'n'drop
6. click the "All Done!" button to mark all tasks as done
7. click on a "Done" task to uncheck it and move it back to the "To Do" list
8. click on "Undo All" to uncheck all done tasks
9. click on "Delete All" to delete all done tasks

Goal: find a way to make jQuery work offline or when there is no internet access to download the jQuery.

Possible solutions:

• download and cache jQuery?
• ship web app with a minified version of jQuery?

Look for the best strategy by searching over the web.

By design, I chose to create a todolist that could fit in the left or right third of my MBA screen space.
I should implement Responsive Web Design to make the content fit to the window. Maybe taking a Mobile First / Progressive Enhancement approach would be a better fit if I want to use it on my Moto X too.

This tutorial helped me nail it.

Depends on issue #25

and add contact details

Depends on issue #26

I should include a badge or some other info to communicate the "alpha" or "beta" state of the app.

More precisely, when resolving issue #1, I introduced a new bug:

While pressing the Enter key does not reload the page anymore, here's what happens:

Steps to reproduce the problem:

• Click on the input box ("enter new task here")
• Add some text for a new task
• Press Enter

What happens:

The task is added to the "To Do" list and the page is not reloaded (yay!)…
…but input box remains focused and displays "enter new task here" in black.
So the user has to delete "enter new task here" before adding a new task!

Expected behavior:

I would rather:

• either have the input box getting unfocused
• or, better, have the input box still focused but with text cleared

Additional useful note:

When clicking on the "Add" button, task is added, input boxed is unfocused, and "enter new task here" appears in the input box (though in grey, because control has no focus)

It might become difficult to find a specific item in big lists of tasks.
Tasks should be searchable (of course the user can still use the built-in "search on page" functionality of its browser, but items are not actionable)

One possible implementation could be to provide a search box.

Ideally ( = the best possible implementation) would be fuzzy search from the input box, displaying only matches when there are matches, and creating a new task if no match. Something that would match Notational Velocity's create new file / find file behavior.

Try adding a task that consists of only one very long word:
The string does not wrap.
I should either wrap it or limit the number of characters.

suggested by Jen Prichard on the FreeCodeCamp chat

The goal is to get this kind of list:

• Bake a cake for my friend's birthday
  • Look up some recipes over the Internet
  • Check what ingredients I already have at home
  • Go to the store and buy the missing ingredients
  • Actually bake the cake!
• Renew my gym membership

No more than two levels 2:

• Level 1 task
  • Level 2 task
  • Another Level 2 task
• Another Level 1 task

Requires some parent-child model.
Should support drag'n'drop: dropping over an existing task makes it a sub-task.
(and maybe keyboard shortcuts later: Tab = indent, Shit Tab = unindent).

Define user interaction: maybe a double click?

Especially annoying when working at night and being blinded by the default white theme!

See if I can make it work with the jEditable plugin.

https://developer.mozilla.org/en-US/docs/Web/API/Web_Storage_API

Depends on issue #34

See maybe this, this or this for help & inspiration.