Homework-4/README.md

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.

Changes from Homework 4a and 4b

From 4a to 4b, I changed the following:

• Instead of hovering, you click. This way, you can still preview your schedule while your mouse is elsewhere (perhaps on RateMyProfessor!). You must now click add/remove to make a change. Add/remove are color coded green and red, and have visual icons (for the colorblind)
• Clicked (formerly hovered) lines are dashed to help improve accessibility for colorblind people.
• Used check marks instead of crosses (communicates “positive” result)

From 4b to 4c, I changed the following:

• Moved away from table structure to support long views (column headers go out of view).
  • Used icons to indicate various course info, instead.

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)