Subscribe now

Elm Weekly Drip #2 and Exercise: TodoMVC - Adding Todo Details [05.13.2016]

This week we'll extend our TodoMVC implementation in the Exercise. First, though, various links from around the Elm ecosystem.

In this week's link dump, we'll have a look at a list of must-see links per the elm-lang slack channel and found via the Mailing List.


Elm's documentation

Here's a link to Elm's documentation site, if you haven't seen it yet. The next few links are from there, as well.


From JavaScript?

If you're coming from JavaScript, this is a nice quick page showing some equivalencies in Elm.


Elm Tutorial

Sporto's gitbook on Elm is a nice alternative walkthrough from first principles, if you're interested. Really good content.


Elm TodoMVC

The official implementation of TodoMVC in Elm, from Evan (NOTE: We did not review this when implementing our own, as I thought it would be more interesting to just do it from scratch based on the specification - I ended up looking at it to learn how best to handle the onEnter attribute in 0.18 though, in the rewrite I'm going through presently).


Elm FAQ, from elm-community

This is a community-driven FAQ for Elm. I learned a few things from it even after I'd used Elm for quite a while, and it's just going to continue to get better I'd assume.


Discovering the Elm Language

A great blog post from Nik Silver on his initial experiences with Elm. This code is not 0.18, but the experiences are all still very real.


Elm Explained

More by Nik Silver, explaining fundamental features of Elm via code examples. Once again, not updated for 0.18 but I haven't yet found an example that would be different either. Just something to be aware of.

Exercise

This week we implemented the basics of TodoMVC using Elm. At present, there is a mock Todo that is added to the model each time you press the enter key inside of the input field.

For this week's exercise, try to extend our TodoMVC implementation to do the following:

  • On every keypress, set the model's text to the value of the input field.
  • When the Enter key is pressed, do the following:
    • Add the model's todo to the list of todos, rather than the mockTodo
    • Clear the model's todo's title.

HINT: You will want to look at the onInput event.