Permalink
Browse files

Update everything for 0.19

  • Loading branch information...
evancz committed Aug 21, 2018
1 parent 5505bf8 commit bbe9e3f76a2415734349583f562465e45c1c6f46
View
@@ -1,6 +1,6 @@
# Elm
Elm is a programming language that compiles to JavaScript. The highlight features are great performance and no runtime exceptions. You can read more about all that on the [home page](http://elm-lang.org/). Elm also has its own virtual DOM implementation that is [very fast](http://elm-lang.org/blog/blazing-fast-html-round-two) compared to React, Angular, and Ember.
[Elm](https://elm-lang.org/) is a programming language that compiles to JavaScript. It is known for its friendly error messages, helping you find issues quickly and refactor large projects with confidence. Elm is also [very fast](https://elm-lang.org/blog/blazing-fast-html-round-two) and [very small](https://elm-lang.org/blog/small-assets-without-the-headache) when compared with React, Angular, Ember, etc.
This repo focuses **The Elm Architecture**, an architecture pattern you see in all Elm programs. It has influenced projects like Redux that borrow core concepts but add many JS-focused ideas.
@@ -9,20 +9,20 @@ This repo focuses **The Elm Architecture**, an architecture pattern you see in a
The Elm Architecture is a simple pattern for architecting webapps. The core idea is that your code is built around a `Model` of your application state, a way to `update` your model, and a way to `view` your model.
To learn more about this, read the [the official Elm guide][guide] and check out [this section][arch] which is all about The Elm Architecture. This repo is a collection of all the examples in that section, so you can follow along and compile things on your computer as you read through.
To learn more about this, read the [the official guide][guide] and check out [this section][arch] which is all about The Elm Architecture. This repo is a collection of all the examples in that section, so you can follow along and compile things on your computer as you read through.
[guide]: http://guide.elm-lang.org/
[arch]: http://guide.elm-lang.org/architecture/
[guide]: https://guide.elm-lang.org/
[arch]: https://guide.elm-lang.org/architecture/
## Run The Examples
After you [install Elm](http://guide.elm-lang.org/get_started.html), run the following commands in your terminal to download this repo and start a server that compiles Elm for you:
After you [install](https://guide.elm-lang.org/install.html), run the following commands in your terminal to download this repo and start a server that compiles Elm for you:
```bash
git clone https://github.com/evancz/elm-architecture-tutorial.git
cd elm-architecture-tutorial
elm-reactor
elm reactor
```
Now go to [http://localhost:8000/](http://localhost:8000/) and start looking at the `examples/` directory. When you edit an Elm file, just refresh the corresponding page in your browser and it will recompile!
View

This file was deleted.

Oops, something went wrong.
View
@@ -0,0 +1,26 @@
{
"type": "application",
"source-directories": [
"examples"
],
"elm-version": "0.19.0",
"dependencies": {
"direct": {
"elm/browser": "1.0.0",
"elm/core": "1.0.0",
"elm/html": "1.0.0",
"elm/http": "1.0.0",
"elm/json": "1.0.0",
"elm/random": "1.0.0",
"elm/time": "1.0.0",
"elm/url": "1.0.0"
},
"indirect": {
"elm/virtual-dom": "1.0.0"
}
},
"test-dependencies": {
"direct": {},
"indirect": {}
}
}
View
@@ -1,36 +1,24 @@
import Browser
import Html exposing (Html, button, div, text)
import Html.Events exposing (onClick)
main =
Html.beginnerProgram
{ model = model
, view = view
, update = update
}
Browser.sandbox { init = init, update = update, view = view }
-- MODEL
type alias Model = Int
model : Model
model =
init : Model
init =
0
-- UPDATE
type Msg
= Increment
| Decrement
type Msg = Increment | Decrement
update : Msg -> Model -> Model
update msg model =
@@ -42,14 +30,12 @@ update msg model =
model - 1
-- VIEW
view : Model -> Html Msg
view model =
div []
[ button [ onClick Decrement ] [ text "-" ]
, div [] [ text (toString model) ]
, div [] [ text (String.fromInt model) ]
, button [ onClick Increment ] [ text "+" ]
]
]
View
@@ -1,16 +1,15 @@
import Html exposing (Html, div, input, text)
import Browser
import Html exposing (Html, Attribute, div, input, text)
import Html.Attributes exposing (..)
import Html.Events exposing (onInput)
import String
-- MAIN
main =
Html.beginnerProgram
{ model = model
, view = view
, update = update
}
Browser.sandbox { init = init, update = update, view = view }
@@ -22,9 +21,9 @@ type alias Model =
}
model : Model
model =
Model ""
init : Model
init =
{ content = "" }
@@ -34,6 +33,7 @@ model =
type Msg
= Change String
update : Msg -> Model -> Model
update msg model =
case msg of
@@ -48,6 +48,6 @@ update msg model =
view : Model -> Html Msg
view model =
div []
[ input [ placeholder "Text to reverse", onInput Change ] []
[ input [ placeholder "Text to reverse", value model.content, onInput Change ] []
, div [] [ text (String.reverse model.content) ]
]
View
@@ -1,14 +1,15 @@
import Browser
import Html exposing (..)
import Html.Attributes exposing (..)
import Html.Events exposing (onInput)
-- MAIN
main =
Html.beginnerProgram
{ model = model
, view = view
, update = update
}
Browser.sandbox { init = init, update = update, view = view }
@@ -22,8 +23,8 @@ type alias Model =
}
model : Model
model =
init : Model
init =
Model "" "" ""
@@ -32,9 +33,9 @@ model =
type Msg
= Name String
| Password String
| PasswordAgain String
= Name String
| Password String
| PasswordAgain String
update : Msg -> Model -> Model
@@ -57,20 +58,21 @@ update msg model =
view : Model -> Html Msg
view model =
div []
[ input [ type_ "text", placeholder "Name", onInput Name ] []
, input [ type_ "password", placeholder "Password", onInput Password ] []
, input [ type_ "password", placeholder "Re-enter Password", onInput PasswordAgain ] []
[ viewInput "text" "Name" model.name Name
, viewInput "password" "Password" model.password Password
, viewInput "password" "Re-enter Password" model.passwordAgain PasswordAgain
, viewValidation model
]
viewInput : String -> String -> String -> (String -> msg) -> Html msg
viewInput t p v toMsg =
input [ type_ t, placeholder p, value v, onInput toMsg ] []
viewValidation : Model -> Html msg
viewValidation model =
let
(color, message) =
if model.password == model.passwordAgain then
("green", "OK")
else
("red", "Passwords do not match!")
in
div [ style [("color", color)] ] [ text message ]
if model.password == model.passwordAgain then
div [ style "color" "green" ] [ text "OK" ]
else
div [ style "color" "red" ] [ text "Passwords do not match!" ]
View
@@ -1,15 +1,19 @@
import Browser
import Html exposing (..)
import Html.Events exposing (..)
import Random
-- MAIN
main =
Html.program
Browser.element
{ init = init
, view = view
, update = update
, subscriptions = subscriptions
, view = view
}
@@ -22,9 +26,11 @@ type alias Model =
}
init : (Model, Cmd Msg)
init =
(Model 1, Cmd.none)
init : () -> (Model, Cmd Msg)
init _ =
( Model 1
, Cmd.none
)
@@ -40,10 +46,14 @@ update : Msg -> Model -> (Model, Cmd Msg)
update msg model =
case msg of
Roll ->
(model, Random.generate NewFace (Random.int 1 6))
( model
, Random.generate NewFace (Random.int 1 6)
)
NewFace newFace ->
(Model newFace, Cmd.none)
( Model newFace
, Cmd.none
)
@@ -62,6 +72,6 @@ subscriptions model =
view : Model -> Html Msg
view model =
div []
[ h1 [] [ text (toString model.dieFace) ]
[ h1 [] [ text (String.fromInt model.dieFace) ]
, button [ onClick Roll ] [ text "Roll" ]
]
]
Oops, something went wrong.

0 comments on commit bbe9e3f

Please sign in to comment.