These 25 Elm examples will take you from building a static view all the way to building an interactive web app with routing.
- 01-hello-world.elm
- 02-hello-world.elm
- 03-hello-world.elm
- 04-hello-world.elm
- 05-counter.elm
- 06-counter.elm
- 07-counter.elm
- 08-counter.elm
- 09-counters.elm
- 10-counters.elm
- 11-counters.elm
- 12-counters.elm
- 13-input-box.elm
- 14-todos.elm
- 15-todos.elm
- 16-todos.elm
- 17-todos.elm
- 18-editable-todos.elm
- 19-editable-todos.elm
- 20-editable-todos.elm
- 21-localstorage-editable-todos.elm
- 22-localstorage-editable-todos.elm
- 23-filter-todos.elm
- 24-filter-todos.elm
- 25-navigation-todos.elm
You can use the Ellie links for examples 21-25, but if you want to run it locally, you can copy/paste the following commands which will clone the Github repo, then compile example 21 to a JavaScript file called elm.js, then you will open the HTML for example 21 in your default browser.
git clone https://github.com/bryanjenningz/25-elm-examples.git
cd 25-elm-examples
elm-make 21-localstorage-editable-todos.elm --output elm.js --yes
open 21-localstorage-editable-todos.html
The above code will compile and open example 21 in your default browser. To compile and view examples 22 through 25 locally, you do the same process of compiling the Elm file you want to the elm.js JavaScript file, then opening the HTML file you want to view in your browser.
These 25 Elm examples were inspired by the examples on the Elm website and the official Elm guide. Each example tries to build off of the previous example by adding a small amount of code so that it's easy to understand and see how you can build stuff in Elm. If you have any suggestions for more examples that should be added or if anything is unclear, add an issue or make a pull request.