Switch to examples that match the guide

Author: evancz

src/examples/checkboxes.elm

@@ -1,50 +1,51 @@
-import Html exposing (..)
-import Html.App exposing (beginnerProgram)
-import Html.Attributes exposing (..)
-import Html.Events exposing (onCheck)
+import Html exposing (Html, fieldset, input, label, text)
+import Html.App as App
+import Html.Attributes exposing (style, type')
+import Html.Events exposing (onClick)
+
 
 
 main =
-  beginnerProgram { model = model, view = view, update = update }
+  App.beginnerProgram { model = optOut, update = update, view = view }
 
 
 
 -- MODEL
 
 
 type alias Model =
-  { red : Bool
-  , underline : Bool
-  , bold : Bool
+  { notifications : Bool
+  , autoplay : Bool
+  , location : Bool
   }
 
 
-model : Model
-model =
-  Model False False True
+optOut : Model
+optOut =
+  Model True True True
 
 
 
 -- UPDATE
 
 
 type Msg
-  = Red Bool
-  | Underline Bool
-  | Bold Bool
+  = ToggleNotifications
+  | ToggleAutoplay
+  | ToggleLocation
 
 
 update : Msg -> Model -> Model
 update msg model =
   case msg of
-    Red bool ->
-        { model | red = bool }
+    ToggleNotifications ->
+      { model | notifications = not model.notifications }
 
-    Underline bool ->
-        { model | underline = bool }
+    ToggleAutoplay ->
+      { model | autoplay = not model.autoplay }
 
-    Bold bool ->
-        { model | bold = bool }
+    ToggleLocation ->
+      { model | location = not model.location }
 
 
 
@@ -53,34 +54,18 @@ update msg model =
 
 view : Model -> Html Msg
 view model =
-  div []
-    [ span [toStyle model] [text "Hello, how are you?!"]
-    , label []
-        [ br [] []
-        , input [ type' "checkbox", checked model.red, onCheck Red ] []
-        , text "red"
-        ]
-    , label []
-        [ br [] []
-        , input [ type' "checkbox", checked model.underline, onCheck Underline ] []
-        , text "underline"
-        ]
-    , label []
-        [ br [] []
-        , input [ type' "checkbox", checked model.bold, onCheck Bold ] []
-        , text "bold"
-        ]
+  fieldset []
+    [ checkbox ToggleNotifications "Email Notifications"
+    , checkbox ToggleAutoplay "Video Autoplay"
+    , checkbox ToggleLocation "Use Location"
     ]
 
 
-toStyle : Model -> Attribute msg
-toStyle model =
-  style
-    [ ("color", if model.red then "red" else "black")
-    , ("text-decoration", if model.underline then "underline" else "none")
-    , ("font-weight", if model.bold then "bold" else "normal")
+checkbox : msg -> String -> Html msg
+checkbox msg name =
+  label
+    [ style [("padding", "20px")]
+    ]
+    [ input [ type' "checkbox", onClick msg ] []
+    , text name
     ]
-
-
--- Exercise: move the repetative code in `view` into a separate function
--- and use it three times.

src/examples/radio-buttons.elm

@@ -1,43 +1,66 @@
-import Html exposing (Html, Attribute, br, div, input, label, span, text)
-import Html.App exposing (beginnerProgram)
-import Html.Attributes exposing (..)
-import Html.Events exposing (onCheck)
+import Html exposing (Html, Attribute, div, fieldset, input, label, text)
+import Html.App as App
+import Html.Attributes exposing (name, style, type')
+import Html.Events exposing (onClick)
+import Markdown
+
 
 
 main =
-  beginnerProgram { model = model, view = view, update = update }
+  App.beginnerProgram { model = chapter1, update = update, view = view }
 
 
 
 -- MODEL
 
 
 type alias Model =
-  { style : Style
+  { fontSize : FontSize
+  , content : String
   }
 
 
-type Style
-  = Red
-  | Underline
-  | Bold
+type FontSize
+  = Small
+  | Medium
+  | Large
+
+
+chapter1 : Model
+chapter1 =
+  Model Medium intro
+
+
+intro : String
+intro = """
+
+# Anna Karenina
 
+## Chapter 1
 
-model =
-  { style = Bold }
+Happy families are all alike; every unhappy family is unhappy in its own way.
+
+Everything was in confusion in the Oblonskys’ house. The wife had discovered
+that the husband was carrying on an intrigue with a French girl, who had been
+a governess in their family, and she had announced to her husband that she
+could not go on living in the same house with him...
+
+"""
 
 
 
 -- UPDATE
 
 
-type Msg =
-  Switch Style
+type Msg
+  = SwitchTo FontSize
 
 
 update : Msg -> Model -> Model
-update (Switch newStyle) model =
-  { model | style = newStyle }
+update msg model =
+  case msg of
+    SwitchTo newFontSize ->
+      { model | fontSize = newFontSize }
 
 
 
@@ -47,35 +70,37 @@ update (Switch newStyle) model =
 view : Model -> Html Msg
 view model =
   div []
-    [ span [toStyle model] [text "Hello, how are you?!"]
-    , radio Red "red" model
-    , radio Underline "underline" model
-    , radio Bold "bold" model
+    [ fieldset []
+        [ radio "Small" (SwitchTo Small)
+        , radio "Medium" (SwitchTo Medium)
+        , radio "Large" (SwitchTo Large)
+        ]
+    , Markdown.toHtml [ sizeToStyle model.fontSize ] model.content
     ]
 
 
-toStyle : Model -> Attribute msg
-toStyle model =
-  style <|
-    case model.style of
-      Red ->
-        [ ("color", "red") ]
+radio : String -> msg -> Html msg
+radio value msg =
+  label
+    [ style [("padding", "20px")]
+    ]
+    [ input [ type' "radio", name "font-size", onClick msg ] []
+    , text value
+    ]
 
-      Underline ->
-        [ ("text-decoration", "underline") ]
 
-      Bold ->
-        [ ("font-weight", "bold") ]
+sizeToStyle : FontSize -> Attribute msg
+sizeToStyle fontSize =
+  let
+    size =
+      case fontSize of
+        Small ->
+          "0.8em"
 
+        Medium ->
+          "1em"
 
-radio : Style -> String -> Model -> Html Msg
-radio style name model =
-  let
-    isSelected =
-      model.style == style
+        Large ->
+          "1.2em"
   in
-    label []
-      [ br [] []
-      , input [ type' "radio", checked isSelected, onCheck (\_ -> Switch style) ] []
-      , text name
-      ]
+    style [("font-size", size)]