||2 years ago|
|dist||2 years ago|
|scss||2 years ago|
|src||2 years ago|
|README.md||2 years ago|
|elm.json||2 years ago|
|index.html||2 years ago|
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.
src/contains the Elm source code for the application.
Model.elmcontains descriptions of the data structures used in the project.
View.elmcontains the code to actually display the HTML page.
Decode.elmcontains 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.
python's web server command in
dist, other than that, business as usual).
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
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)