Commits: 1
Outline changing the background color when a dot is clicked
index 2daa781..b4c52b5 100644
--- a/index.md
+++ b/index.md
@@ -551,7 +551,128 @@ Introduce SVG groups
=
= This may look like a lot, but our `gradient` and `line` functions are very similar to our `dot` function from earlier. In fact we see an essential principle of good programming design here. We spent a lot of time banging our heads over gradients. Now that we've done that work, we can hide the implementation in our gradient and line functions. Now, if we want to draw a new dot, line, and gradient going from the center to the dot, we only need to add a new item to our palette. Our functions do the rest for us. Our functions conceal our complexity. We can forget about the implementation, so long as we know how to operate them. They're like black boxes, we know what goes in and what comes out, but we don't have to know how they work on the inside.
=
-
+
+Day 5
+
+ Our project is looking pretty good at this point. We've created some interesting graphical elements, and learned some interesting ways to place them programatically. However, it doesn't take user input like many of the programs we use. We'll be doing some pretty interesting things with user input later in this workshop, but for now we'll start with a deceptively simple step: setting the background color.
+
+I say this step is deceptively simple, because we'll need to make some big changes to our program and introduce a number of new concepts.
+
+Show complete code.
+
+There's a lot going on here, and it's not obvious how it all works.
+
+Our `main` function has changed.
+
+```
+main : Program () Color Msg
+main =
+ Browser.sandbox
+ { init = init
+ , view = view
+ , update = update
+ }
+```
+
+Previously, our `main` function contained an SVG element. Now it contains a call to `Browser.sandbox`. A sandbox is a basic interactive program. For a program to be interactive, it need more than just a SVG element. It also needs a `state`. The state of an application is basically the information used to determine how the application should be rendered. Think about the Atom program we are all running at the moment. We know we are all running the same program, however we are not all looking at exactly the same thing. The text in our neighbours editor might be slightly different than the text in our own. If they opened another file, a letter to a friend for example, the text would be very different. The text input is part of the state of the Atom application. Maybe your neighbour has scrolled to another point in the screen. The scroll point is also part of the state of the Atom application. The cursor might be on another line in their viewport. The cursor position is also part of the state of the Atom application. Atom uses all of this state information to render exactly what you are seeing on your computer screen. Anything that can change will be represented in a state variable. If you input or delete text, move the cursor, scroll up or down, or change any of the application settings, you are updating the state of the Atom application.
+
+```
+type alias State =
+ Color
+
+
+type alias Color =
+ String
+```
+
+Here we create something called a type alias. We've already discussed types. A type alias is basically a way to give an alternative name for a type. We give the alias `Color` to string and the alias `State` to `Color`. All of these types are strings, and Elm will treat them all as strings. But it will make our code more readable to use these aliases. We are writing an application that allows the user to change the background color. That should explain why our `State` is a `Color`.
+
+Our `Browser.sandbox` takes something with the name `init`. This is our initial state. Let's take a look at the value of `init`.
+
+```
+init : State
+init =
+ "white"
+```
+
+We see that the initial state is `"white"`. We'll see how our application uses this value in a moment.
+
+Looking back at our `sandbox`, we see it also takes a `view`. Let's take a look at our view function:
+
+```
+view : State -> Html Msg
+view color =
+ svg
+ [ width "600"
+ , height "600"
+ , viewBox "-300 -300 600 600"
+ , Svg.Attributes.style ("background: " ++ color)
+ ]
+ [ Svg.g [] (List.indexedMap dot pallete)
+ , Svg.defs [] (List.indexedMap gradient pallete)
+ , Svg.g [] (List.indexedMap line pallete)
+ ]
+```
+
+You'll notice that this `view` function looks very similar to the `main` variable from earlier. Before, our application was only a view. Now the view is only one piece of our interactive application.
+
+One important way our `view` function differs from the `main` variable from ealier is that `view` is a function. We see it takes a variable of type `State` (a string), which we have named `color`. In an Elm sandbox project the `view` always takes a variable with the same type as the `init` variable. This is the current state of the application. `view` can use the state to render the application properly, just as Atom uses its state to render text for its user.
+
+We see that we've added a line to the svg attributes, `Svg.Attributes.style ("background: " ++ color)`. Here we use the state of the application to set the background color of the svg element.
+
+
+All we need now is some way to update the state (the background color) of the application.
+
+Taking a look at our `main` function, we see that it take a third and final function, `update`. Let's look at our update function:
+
+```
+type Msg
+ = SetBackground Color
+
+
+update : Msg -> State -> State
+update msg state =
+ case msg of
+ SetBackground color ->
+ color
+
+```
+
+We see our `update` function takes two variables, of type `Msg` and `State`. If we think of update as a machine which takes an old state and spits out a new state, this state variable corresponds to the old state.
+
+The `msg` variable is something new. Looking above, we see that we have defined a `Msg` variable type. This is similar to our `State` and `Color` union types, in that we have defined a new type that Elm understands. However, unlike the `type alias` constructor, the `type` constructor does not simly give a new name for an existing type. Instead, here we define a completely unique type. We see values with type Msg must have the form `SetBackground Color`. `SetBackground "white"`, `SetBackground "blue"`, `SetBackground "saddlebrown"` are all valid values of the type `Msg`. This is a bit complex, but will become familiar once we've seen some examples in use.
+
+What is important to understand is that our `msg` variable is used by `update` to determine how it should update the state. We see that update first checks that `msg` has the form `SetBackground color`, and then returns the value of `color`. This will become our new state. Every time update is called, the sandbox will rerender our view with the new state.
+
+So now we see how our application changes the background color of the svg element. However, we haven't seen when it will update the background color. Well, we want to change the background color by clicking a dot. So let's take a look at our `dot` function to see if we can find a hint there.
+
+```
+dot : Int -> String -> Svg Msg
+dot index color =
+ let
+ angle =
+ (360 / toFloat (List.length pallete)) * toFloat index
+ in
+ circle
+ [ cx (x angle)
+ , cy (y angle)
+ , r "40"
+ , fill color
+ , Svg.Events.onClick (SetBackground color)
+ ]
+ []
+```
+
+We see there is a new line here:
+
+```
+Svg.Events.onClick (SetBackground color)
+```
+
+`onClick` is an event. It basically tells our svg element to listen for someone to click on it. It will then handle the event by emitting the Msg `SetBackground color`. We know `color` is the color of the dot. We see then that when someone clicks on the dot, the Msg will be emitted, `update` will be called with this Msg and will update our state. Our sandbox will rerender the view with this new state. The user will see the svg element with a new background color.
+
+Notice that our `view` function, as well as all the functions that call functions responsible for rendering svg elements, including `gradient`, `line`, and `dot` have return values with type `Svg Msg` or `Html Msg`. This is because svg element can emit Msgs which will be handled by `update`.
+
=
=<!-- slide -->
=