Course Scheduler

This is an Elm-based implementation of Homework 4c for Human Computer Interaction. Elm is a functional programming language that compiles to JavaScript.

Directory structure

• src/ contains the Elm source code for the application.
  • Model.elm contains descriptions of the data structures used in the project.
  • View.elm contains the code to actually display the HTML page.
  • Decode.elm contains code to translate the JSON file given to us into Elm data structures.
• scss/ contains the (Sassy) CSS that was used to style the project.
• dist/ contains the compiled Elm and SCSS code, so that you don't need to install the Elm compiler or anything of that sort.

Running

Open dist/index.html (run python's web server command in dist, other than that, business as usual).

Info

In Elm, HTML is build using functions in the language I don't write HTML per se, but rather, call functions that build the correspoding HTML elements. For example, the following code:

<tr class="hello">
    <td>Hello</td>
    <td>Hello</td>
</tr>

Looks like the following in Elm:

tr [ class "hello" ]
    [ td [] [ text "Hello" ]
    , td p] [ text "Hello" ]
    ]

However, the Elm-based view of writing HTML allows for the full power of the programming language in this "template" section. For instance, I can write the following:

viewAddedBubble : Bool -> List (Html Msg)
viewAddedBubble b = if b then [ span [ class "bubble", class "color-green" ] [ checkIcon, text "Added!" ] ] else []

This defines a function that returns an HTML element (a green "Added!" button) if a boolean b is true, and otherwise returns an empty list (thus, the "added" button is absent). Thus, the same language is used for actually rendering the page as is used for implementing its logic.

Elm is reactive programming in its purest form: the language is built around the idea of FRP (functional reactive programming). Elm code consists of three main things:

• The model (the current state of the application, including all its data)
• The view (the HTML that is built from the current model / state)
• The update (when events happen, i.e. a user clicks a button, the update changes the state accordingly, and the view is updated)