diff --git a/README.md b/README.md new file mode 100644 index 0000000..2287ca1 --- /dev/null +++ b/README.md @@ -0,0 +1,60 @@ +# 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: + +```html + + Hello + Hello + +``` + +Looks like the following in Elm: + +```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: + +```Elm +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)