Update README.
This commit is contained in:
		
							parent
							
								
									125d6391ba
								
							
						
					
					
						commit
						c19f1b5268
					
				
							
								
								
									
										60
									
								
								README.md
									
									
									
									
									
										Normal file
									
								
							
							
						
						
									
										60
									
								
								README.md
									
									
									
									
									
										Normal file
									
								
							| @ -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 | ||||
| <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) | ||||
		Loading…
	
		Reference in New Issue
	
	Block a user