Done with chapter 2. Added interactivity.

src/PhotoGroove.elm

@@ -1,19 +1,58 @@
 module PhotoGroove exposing (main)
 
+import Browser
 import Html exposing (div, h1, img, text)
 import Html.Attributes exposing (..)
+import Html.Events exposing (onClick)
+
+
+urlPrefix =
+    "http://elm-in-action.com/"
 
 
 view model =
     div [ class "content" ]
         [ h1 [] [ text "Photo Groove" ]
         , div [ id "thumbnails" ]
-            [ img [ src "http://elm-in-action.com/1.jpeg" ] []
+            (List.map (viewThumbnail model.selectedUrl) model.photos)
-            , img [ src "http://elm-in-action.com/2.jpeg" ] []
+        , img
-            , img [ src "http://elm-in-action.com/3.jpeg" ] []
+            [ class "large"
+            , src (urlPrefix ++ "large/" ++ model.selectedUrl)
             ]
+            []
         ]
 
 
+viewThumbnail selectedUrl thumb =
+    img
+        [ src (urlPrefix ++ thumb.url)
+        , classList [ ( "selected", selectedUrl == thumb.url ) ]
+        , onClick { description = "ClickedPhoto", data = thumb.url }
+        ]
+        []
+
+
+initialModel =
+    { photos =
+        [ { url = "1.jpeg" }
+        , { url = "2.jpeg" }
+        , { url = "3.jpeg" }
+        ]
+    , selectedUrl = "1.jpeg"
+    }
+
+
+update msg model =
+    if msg.description == "ClickedPhoto" then
+        { model | selectedUrl = msg.data }
+
+    else
+        model
+
+
 main =
-    view "no model yet"
+    Browser.sandbox
+        { init = initialModel
+        , update = update
+        , view = view
+        }