Elm Todos Tutorial

A step-by-step tutorial that teaches you how to build a to-do list application in Elm.

Prerequisites

Disclaimer: This tutorial is NOT intended for beginners to programming or web development.

You should have a beginner to intermediate level of understanding of Elm and some experience with web development.

If not, then I'd recommend starting with one or more of the following resources.

For Elm:

• An Introduction to Elm
• Beginning Elm
• Building Web Apps with Elm
• Elm Frontend Masters Course
• Elm in Action

For Programming:

• How to Design Programs

For Web Development:

• Learn to Code HTML & CSS
• Eloquent JavaScript
• Google Developers Training - Web

Introduction

The purpose of the tutorial is to help you reinforce your Elm knowledge by showing you how to methodically build a complete application with Elm.

I've broken up the to-do list application into a manageable feature set that takes roughly 10 steps to build the entire thing.

For each step I explicitly state a goal that we need to accomplish to consider that step (and corresponding feature) complete. To achieve the goal I explicitly state the plan of attack we're going to take. In this way I indent for you to get a high-level understanding of how we're approaching the problems that the feature manifests.

Along the way I try my best to explain what the code does. And when appropriate, I also explain why a certain decision was made.

Here are the 10 steps:

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

Here's some of what you can expect to learn by going through the all of the steps:

• A simply way to set up and get started with an Elm application.
• How to break a problem into manageable pieces and solve it incrementally.
• How to work with input fields (for e.g. text and check box).
• How to use lists.
• How to model your data.
• Using union types effectively.
• Knowing when to use Html.Keyed.
• How to use elm-lang/navigation.
• How to focus a DOM element with Dom.focus from elm-lang/dom.
• How to write and use a custom event handler (see onEsc in step 9).
• How to communicate via JavaScript with both ports and flags.
• How to encode an Elm value into a JavaScript value using Json.Encode.
• How to decode a JavaScript value into an Elm value using Json.Decode.

Questions

If you have any questions or suggestions then please feel free to file an issue and I will get to it as soon as possible.