A didactic implementation of a to-do list app

Show and Tell
1

I wrote a version of TodoMVC (sans styling) in an incremental manner that may help others learn how to approach building applications with Elm.

You can find the source code for the app, here.

It was done in roughly 10 steps. Here’s what I wanted to accomplish per step:

  1. To display “Hello, Elm!” in a browser.
  2. To be able to type the description of a task into a text field and have the description appear in the browser’s console when entered.
  3. To show the entered descriptions in a list, ordered from least recent to most recent.
  4. To be able to mark entries as completed.
  5. To be able to remove an entry.
  6. To add a variety of useful features.
  7. To be able to view a subset of the entries (all, active or completed).
  8. To be able to keep the visibility filter in sync with the URL in the address bar.
  9. To be able to edit existing entries.
  10. To be able to sync to local storage.

The completion point of each step was tagged step-<n> in the repo. So for e.g. if you wanted to see what was done to get from step 5 to step 6 then you could use git log step-5...step-6 to see the commits.

Tutorial

In addition to the code I’m writing up a tutorial for it as well. The latest version of it can be found here. I still have step 9 and 10 to complete.

Suggestions

I welcome all feedback.

Also, if you have suggestions for other applications you’d like to see built in a similar way then let me know.

I’m particularly interested in doing a 2048 clone next. What do you think?

15 Likes
2

Step 9 has been written. It shows you how to add editing capabilities. Find it here.

In it you learn how to model editing, use Dom.focus and use Task.attempt.

1 Like
3

The first draft of the tutorial is now complete. I added step 10, an introduction and a conclusion.

Since it’s a first draft it’s rough around the edges. But as people use it and provide feedback and as I use it to teach others I expect the quality to improve.

Check it out here.

P.S. This is the last update about this. I promise :blush:.

1 Like
4

This topic was automatically closed 10 days after the last reply. New replies are no longer allowed.