Initial import of PhotoGroove

src/PhotoGroove.elm

@@ -0,0 +1,81 @@
+module PhotoGroove exposing (main)
+
+import Array exposing (Array)
+import Browser
+import Html exposing (Html, button, div, h1, img, text)
+import Html.Attributes exposing (..)
+import Html.Events exposing (onClick)
+
+
+type alias Model =
+    { photos : List Photo, selectedUrl : String }
+
+
+type alias Photo =
+    { url : String }
+
+
+initialModel : Model
+initialModel =
+    { photos =
+        [ { url = "1.jpeg" }
+        , { url = "2.jpeg" }
+        , { url = "3.jpeg" }
+        ]
+    , selectedUrl = "1.jpeg"
+    }
+
+
+photoArray : Array Photo
+photoArray =
+    Array.fromList initialModel.photos
+
+
+view : Model -> Html Message
+view model =
+    div [ class "content" ]
+        [ h1 [] [ text "Photo Groove" ]
+        , button [ onClick ClickedSurpriseMe ] [ text "Surprise me!" ]
+        , div [ id "thumbnails" ]
+            (List.map (viewThumbnail model.selectedUrl) model.photos)
+        , img [ class "large", src (urlPrefix ++ "large/" ++ model.selectedUrl) ] []
+        ]
+
+
+viewThumbnail : String -> Photo -> Html Message
+viewThumbnail selectedUrl thumb =
+    img
+        [ src (urlPrefix ++ thumb.url)
+        , classList [ ( "selected", selectedUrl == thumb.url ) ]
+        , onClick (ClickedThumbnail thumb.url)
+        ]
+        []
+
+
+type Message
+    = ClickedThumbnail String
+    | ClickedSurpriseMe
+
+
+update : Message -> Model -> Model
+update msg model =
+    case msg of
+        ClickedThumbnail thumb ->
+            { model | selectedUrl = thumb }
+
+        ClickedSurpriseMe ->
+            { model | selectedUrl = "2.jpeg" }
+
+
+urlPrefix : String
+urlPrefix =
+    "http://elm-in-action.com/"
+
+
+main : Program () Model Message
+main =
+    Browser.sandbox
+        { init = initialModel
+        , view = view
+        , update = update
+        }