pwizla / tinysteps-todolist

A minimalist, flat-like, work-in-progress todo list web app created by a newbie.

tinysteps-todolist

A minimalist, flat-like, work-in-progress todolist web app created by a newbie.
Available live here: http://todolist.pwizla.com

License

See the LICENSE file for license rights and limitations (GNU Affero General Public License v3.0).

About tinysteps

I started to learn to code in July 2015, and these are my baby steps.

Thanks FreeCodeCamp and Codecademy for offering such great content for free! Completing the various exercises and challenges offered by these e-learning tools is not enough for me, though. I want to learn by creating things on my own, from scratch.

So each of the tinysteps projects will be little web apps that I (will) create for my personal use, just for the fun of practicing. These "tiny" apps are probably buggy, not perfect, incomplete, but it's a constant work in progress. The philosophy of the tinysteps project is, as the name implies, to start really small and grow overtime.

"A journey of a thousand miles begins with a single step".

— Lao Tzu

Feel free to use my code and build upon it to create great things, and let's make a way together on the long path to becoming a so-called developer! :-)

What it looks like

What you can do

• Add new tasks by pressing the enter key (the input text box is focused by default as soon as page is loaded)
• Add new tasks by clicking on the "Add" button
• Re-order tasks by drag'n'drop
• Mark a task as completed by clicking on it
• "Uncheck" a completed task (thus moving it back to the "To Do" list) by clicking on it
• Mark all tasks as completed by clicking on the "All Done!" button
• Uncheck all completed tasks (moving them back to the "To Do" list all at once) by clicking on the "Undo All" button
• Shift-click to permanently delete individual completed tasks
• Delete all completed tasks permanently by clicking on the "Delete All" button

Task lists are saved locally on your machine. See LocalStorage support details.

What's planned for future versions

You might want to check the wiki for a product roadmap.

tinysteps-todolist's Issues

Provide settings option to disable delete on Shift-Click

!! Important: List items are not stored in any way. Page refresh loses everything!

The "Done List" should be hidable

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

Fallback on jQuery CDN

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.

Create a Wiki

Create a Roadmap in the wiki

Create dark theme

Items should be editable, at least in the "To do" section

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

Settings are reset to default when reloading page; auto-save settings or offer to save (maybe on tab close?)

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

Completed items should be deletable one by one

Define user interaction: maybe a double click?

Give option to auto-set dark theme at night

Depends on issue #34

Pressing Enter after adding a task reloads the page instead of activating the "add" button

Colors for the theme should be loaded in a separate 'colors' (or 'theme') stylesheet

All buttons should be real <button>s

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.

"Since iOS 5.1, Safari Mobile stores localStorage data in the cache folder, which is subject to occasional clean up, at the behest of the OS, typically if space is short."

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

Create and save multiple lists

Fallback on jQuery UI CDN

Create groups of tasks (a.k.a. sub-items)

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).

Turn on/off option for manually resizing list divs

Depends on issue #26

Page should show app version

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

Settings panel should show app version and link to author

Width of "To do" and "Done" lists are too narrow: Implement a Mobile First / RWD approach

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.

Update source code to reflect License (GNU Affero 3.0) attribution

and add contact details

Finding tasks in long lists is difficult

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.

Create in-app tutorial

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

Pressing Enter after adding a task does not clear input text

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)

Buttons ("All Done!", "Undo All", "Delete All") should be disabled when the list they act on list is empty

Provide option in settings to show/hide tooltips

Depends on issue #25

Update tooltip to display the "Shift-Click to DELETE" part only when Shift-Click is enabled in the Settings

Really long items (without any space character) don't wrap

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

Display tooltips when hovering UI elements (buttons, list items…)

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

Make div (for lists) user-resizable

Give option to manually switch to dark theme

This tutorial helped me nail it.