2021-05-30 20:42:00 -07:00
|
|
|
# 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__.
|
|
|
|
|
2021-05-30 20:54:31 -07:00
|
|
|
## 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.
|
|
|
|
|
2021-05-30 20:42:00 -07:00
|
|
|
## 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
|
|
|
|
<tr class="hello">
|
|
|
|
<td>Hello</td>
|
|
|
|
<td>Hello</td>
|
|
|
|
</tr>
|
|
|
|
```
|
|
|
|
|
|
|
|
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)
|