In-Class exercise: Elm 1

Our goal in this exercise is to be learn to begin to use Elm to create web applications.

To avoid having to install Elm on your machine, we'll be using Ellie, a simple Elm IDE in the cloud.

  1. Open the Hello world application in https://ellie-app.com/gYYkQgQ6k9Ma1. Verify that it displays "Hello world".
    1. Modify the application to compute and display the 6th fibonacci number (use the standard slow recursive implementation).
    2. Modify the application to compute and display 6 factorial.

      Note that there are no explicit loops in Elm; since the language is purely functional, there is no way to have a looping variable that changes.

      Your application should look something like:

  2. Now that you've got your feet wet, open a version of the People application at https://ellie-app.com/gYZ2rtGwb3qa1.
    1. Modify the header from People to People (x/y selected).
    2. Add a checkbox in the table header that does select all or unselect all.
    3. Add a button (after the table) that creates a new row.

      Hint: keep a nextId state variable in the model.

    4. Add a button (next to the Add button) that deletes all the selected rows.

Hints:

  • String.fromInt (and String.toInt) convert integers to (and from, respectively) strings.
  • There is a debugging logger. It returns a value so you'll normally need to use it in a let clause: 
    let
  _ = Debug.log "label" value
in
  expression
  • You might find useful: List.length, List.map, String.concat