Update styles and some part7 stuff

part1/style.css

@@ -90,3 +90,12 @@ a:hover {
 button:focus, input:focus {
   outline: none;
 }
+
+.error {
+  background-color: #FF9632;
+  padding: 20px;
+  box-sizing: border-box;
+  overflow-x: auto;
+  font-family: monospace;
+  font-size: 18px;
+}

part10/style.css

@@ -90,3 +90,12 @@ a:hover {
 button:focus, input:focus {
   outline: none;
 }
+
+.error {
+  background-color: #FF9632;
+  padding: 20px;
+  box-sizing: border-box;
+  overflow-x: auto;
+  font-family: monospace;
+  font-size: 18px;
+}

part11/style.css

@@ -90,3 +90,12 @@ a:hover {
 button:focus, input:focus {
   outline: none;
 }
+
+.error {
+  background-color: #FF9632;
+  padding: 20px;
+  box-sizing: border-box;
+  overflow-x: auto;
+  font-family: monospace;
+  font-size: 18px;
+}

part12/style.css

@@ -1,6 +1,101 @@
+
 .content {
-    width: 960px;
+  width: 960px;
-    margin: 0 auto;
+  margin: 0 auto;
-    padding: 30px;
+  padding: 30px;
-    font-family: Helvetica, Arial, serif;
+  font-family: Helvetica, Arial, serif;
+}
+
+header {
+  position: relative;
+  padding: 6px 12px;
+  height: 36px;
+  background-color: rgb(96, 181, 204);
+}
+
+h1 {
+  color: white;
+  font-weight: normal;
+  margin: 0;
+}
+
+.tagline {
+  color: #eee;
+  position: absolute;
+  right: 16px;
+  top: 12px;
+  font-size: 24px;
+  font-style: italic;
+}
+
+.results {
+  list-style-image: url('http://img-cache.cdn.gaiaonline.com/76bd5c99d8f2236e9d3672510e933fdf/http://i278.photobucket.com/albums/kk81/d3m3nt3dpr3p/Tiny-Star-Icon.png');
+  list-style-position: inside;
+  padding: 0;
+}
+
+.results li {
+  font-size: 18px;
+  margin-bottom: 16px;
+}
+
+.star-count {
+  font-weight: bold;
+  margin-right: 16px;
+}
+
+a {
+  color: rgb(96, 181, 204);
+  text-decoration: none;
+}
+
+a:hover {
+  text-decoration: underline;
+}
+
+.search-query {
+  padding: 8px;
+  font-size: 24px;
+  margin-bottom: 18px;
+  margin-top: 36px;
+}
+
+.search-button {
+  padding: 8px 16px;
+  font-size: 24px;
+  color: white;
+  border: 1px solid #ccc;
+  background-color: rgb(96, 181, 204);
+  margin-left: 12px
+}
+
+.search-button:hover {
+  color: rgb(96, 181, 204);
+  background-color: white;
+}
+
+.hide-result {
+  background-color: transparent;
+  border: 0;
+  font-weight: bold;
+  font-size: 18px;
+  margin-left: 18px;
+  cursor: pointer;
+}
+
+.hide-result:hover {
+  color: rgb(96, 181, 204);
+}
+
+button:focus, input:focus {
+  outline: none;
+}
+
+.error {
+  background-color: #FF9632;
+  padding: 20px;
+  box-sizing: border-box;
+  overflow-x: auto;
+  font-family: monospace;
+  font-size: 18px;
 }

part13/style.css

@@ -0,0 +1,101 @@
+
+.content {
+  width: 960px;
+  margin: 0 auto;
+  padding: 30px;
+  font-family: Helvetica, Arial, serif;
+}
+
+header {
+  position: relative;
+  padding: 6px 12px;
+  height: 36px;
+  background-color: rgb(96, 181, 204);
+}
+
+h1 {
+  color: white;
+  font-weight: normal;
+  margin: 0;
+}
+
+.tagline {
+  color: #eee;
+  position: absolute;
+  right: 16px;
+  top: 12px;
+  font-size: 24px;
+  font-style: italic;
+}
+
+.results {
+  list-style-image: url('http://img-cache.cdn.gaiaonline.com/76bd5c99d8f2236e9d3672510e933fdf/http://i278.photobucket.com/albums/kk81/d3m3nt3dpr3p/Tiny-Star-Icon.png');
+  list-style-position: inside;
+  padding: 0;
+}
+
+.results li {
+  font-size: 18px;
+  margin-bottom: 16px;
+}
+
+.star-count {
+  font-weight: bold;
+  margin-right: 16px;
+}
+
+a {
+  color: rgb(96, 181, 204);
+  text-decoration: none;
+}
+
+a:hover {
+  text-decoration: underline;
+}
+
+.search-query {
+  padding: 8px;
+  font-size: 24px;
+  margin-bottom: 18px;
+  margin-top: 36px;
+}
+
+.search-button {
+  padding: 8px 16px;
+  font-size: 24px;
+  color: white;
+  border: 1px solid #ccc;
+  background-color: rgb(96, 181, 204);
+  margin-left: 12px
+}
+
+.search-button:hover {
+  color: rgb(96, 181, 204);
+  background-color: white;
+}
+
+.hide-result {
+  background-color: transparent;
+  border: 0;
+  font-weight: bold;
+  font-size: 18px;
+  margin-left: 18px;
+  cursor: pointer;
+}
+
+.hide-result:hover {
+  color: rgb(96, 181, 204);
+}
+
+button:focus, input:focus {
+  outline: none;
+}
+
+.error {
+  background-color: #FF9632;
+  padding: 20px;
+  box-sizing: border-box;
+  overflow-x: auto;
+  font-family: monospace;
+  font-size: 18px;
+}

part2/style.css

@@ -90,3 +90,12 @@ a:hover {
 button:focus, input:focus {
   outline: none;
 }
+
+.error {
+  background-color: #FF9632;
+  padding: 20px;
+  box-sizing: border-box;
+  overflow-x: auto;
+  font-family: monospace;
+  font-size: 18px;
+}

part3/style.css

@@ -90,3 +90,12 @@ a:hover {
 button:focus, input:focus {
   outline: none;
 }
+
+.error {
+  background-color: #FF9632;
+  padding: 20px;
+  box-sizing: border-box;
+  overflow-x: auto;
+  font-family: monospace;
+  font-size: 18px;
+}

part4/style.css

@@ -90,3 +90,12 @@ a:hover {
 button:focus, input:focus {
   outline: none;
 }
+
+.error {
+  background-color: #FF9632;
+  padding: 20px;
+  box-sizing: border-box;
+  overflow-x: auto;
+  font-family: monospace;
+  font-size: 18px;
+}

part5/style.css

@@ -90,3 +90,12 @@ a:hover {
 button:focus, input:focus {
   outline: none;
 }
+
+.error {
+  background-color: #FF9632;
+  padding: 20px;
+  box-sizing: border-box;
+  overflow-x: auto;
+  font-family: monospace;
+  font-size: 18px;
+}

part6/README.md

@@ -18,7 +18,8 @@ elm live Main.elm --open -- --output=elm.js
 
 ## References
 
+* [**let-expressions**](http://elm-lang.org/docs/syntax#let-expressions)
+* [**case-expressions** and **if-expressions**](http://elm-lang.org/docs/syntax#conditionals)
 * [HTTP Tasks tutorial](http://elm-lang.org/guide/reactivity#http-tasks)
 * [HTTP Error documentation](http://package.elm-lang.org/packages/evancz/elm-http/3.0.0/Http#Error)
 * [Modules syntax reference](http://elm-lang.org/docs/syntax#modules)
-* [Syntax reference for **case-expressions** and **if-expressions**](http://elm-lang.org/docs/syntax#conditionals)

part6/style.css

@@ -90,3 +90,12 @@ a:hover {
 button:focus, input:focus {
   outline: none;
 }
+
+.error {
+  background-color: #FF9632;
+  padding: 20px;
+  box-sizing: border-box;
+  overflow-x: auto;
+  font-family: monospace;
+  font-size: 18px;
+}

part6/test/TestRunner.elm

@@ -1,15 +0,0 @@
-module Main where
-
-import Signal exposing (Signal)
-
-import ElmTest exposing (consoleRunner)
-import Console exposing (IO, run)
-import Task
-
-import Tests
-
-console : IO ()
-console = consoleRunner Tests.all
-
-port runner : Signal (Task.Task x ())
-port runner = run console

part6/test/Tests.elm

@@ -1,34 +0,0 @@
-module Tests (..) where
-
-import ElmTest exposing (..)
-import ElmHub exposing (responseDecoder)
-import Json.Decode exposing (decodeString)
-
-
-all : Test
-all =
-  suite
-    "Decoding responses from GitHub"
-    [ test "they can decode empty responses"
-        <| let
-            emptyResponse =
-              """{ "items": [] }"""
-           in
-            assertEqual
-              (decodeString responseDecoder emptyResponse)
-              ({- TODO: what goes here? -})
-    , test "they can decode responses with results in them"
-        <| let
-            response =
-              """{ "items": [
-                      /* TODO: dummy JSON goes here */
-              ] }"""
-           in
-            assertEqual
-              (decodeString responseDecoder response)
-              (Ok
-                [ { id = 5, name = "foo", stars = 42 }
-                , { id = 3, name = "bar", stars = 77 }
-                ]
-              )
-    ]

part6/test/elm-package.json

@@ -1,21 +0,0 @@
-{
-    "version": "1.0.0",
-    "summary": "Like GitHub, but for Elm stuff.",
-    "repository": "https://github.com/rtfeldman/elm-workshop.git",
-    "license": "BSD-3-Clause",
-    "source-directories": [
-        ".",
-        ".."
-    ],
-    "exposed-modules": [],
-    "dependencies": {
-        "deadfoxygrandpa/elm-test": "3.1.1 <= v < 4.0.0",
-        "elm-lang/core": "3.0.0 <= v < 4.0.0",
-        "evancz/elm-effects": "2.0.0 <= v < 3.0.0",
-        "evancz/elm-html": "4.0.0 <= v < 5.0.0",
-        "evancz/elm-http": "3.0.0 <= v < 4.0.0",
-        "evancz/start-app": "2.0.0 <= v < 3.0.0",
-        "laszlopandy/elm-console": "1.0.3 <= v < 2.0.0"
-    },
-    "elm-version": "0.16.0 <= v < 0.17.0"
-}

part7/ElmHub.elm

@@ -37,7 +37,7 @@ responseDecoder =
 searchResultDecoder : Decoder SearchResult
 searchResultDecoder =
   decode SearchResult
-    |> required "id" Json.Decode.int
+    |> required "idaa" Json.Decode.int
     |> required "full_name" Json.Decode.string
     |> required "stargazers_count" Json.Decode.int
 
@@ -56,7 +56,7 @@ performAction successToAction errorToAction task =
 type alias Model =
   { query : String
   , results : List SearchResult
-  , errorMessage : String
+  , errorMessage : Maybe String
   }
 
 
@@ -75,7 +75,7 @@ initialModel : Model
 initialModel =
   { query = "tutorial"
   , results = []
-  , errorMessage = ""
+  , errorMessage = Nothing
   }
 
 
@@ -90,12 +90,23 @@ view address model =
         ]
     , input [ class "search-query", onInput address SetQuery, defaultValue model.query ] []
     , button [ class "search-button", onClick address Search ] [ text "Search" ]
+    , viewErrorMessage model.errorMessage
     , ul
         [ class "results" ]
         (List.map (viewSearchResult address) model.results)
     ]
 
 
+viewErrorMessage : Maybe String -> Html
+viewErrorMessage errorMessage =
+  case errorMessage of
+    Just message ->
+      div [ class "error" ] [ text message ]
+
+    Nothing ->
+      text ""
+
+
 onInput address wrap =
   on "input" targetValue (\val -> Signal.message address (wrap val))
 
@@ -132,16 +143,20 @@ update action model =
     Search ->
       ( model, Effects.task (searchFeed model.query) )
 
-    HandleSearchResponse response ->
+    HandleSearchResponse results ->
-      -- TODO update the model to incorporate these search results.
+      ( { model | results = results }, Effects.none )
-      -- Hint: where would you look to find out the type of `response` here?
-      ( model, Effects.none )
 
     HandleSearchError error ->
-      -- TODO if decoding failed, store the message in model.errorMessage
+      let
-      -- Hint: look for "decode" in the documentation for this union type:
+        errorMessage =
-      -- http://package.elm-lang.org/packages/evancz/elm-http/3.0.0/Http#Error
+          case error of
-      ( model, Effects.none )
+            Http.UnexpectedPayload message ->
+              Just message
+
+            _ ->
+              Nothing
+      in
+        ( { model | errorMessage = errorMessage }, Effects.none )
 
     SetQuery query ->
       ( { model | query = query }, Effects.none )

part7/README.md

@@ -16,9 +16,15 @@ to fail; in that case, just run `elm package install` again.)
 elm live Main.elm --open -- --output=elm.js
 ```
 
+## Running Tests
+
+```bash
+cd test
+elm package install
+elm test TestRunner.elm
+```
+
 ## References
 
-* [HTTP Tasks tutorial](http://elm-lang.org/guide/reactivity#http-tasks)
+* [elm-test documentation](http://package.elm-lang.org/packages/deadfoxygrandpa/elm-test/3.1.1/)
-* [HTTP Error documentation](http://package.elm-lang.org/packages/evancz/elm-http/3.0.0/Http#Error)
+* [`(<|)` documentation](http://package.elm-lang.org/packages/elm-lang/core/3.0.0/Basics#<|)
-* [Modules syntax reference](http://elm-lang.org/docs/syntax#modules)
-* [Syntax reference for **case-expressions** and **if-expressions**](http://elm-lang.org/docs/syntax#conditionals)

part7/style.css

@@ -90,3 +90,12 @@ a:hover {
 button:focus, input:focus {
   outline: none;
 }
+
+.error {
+  background-color: #FF9632;
+  padding: 20px;
+  box-sizing: border-box;
+  overflow-x: auto;
+  font-family: monospace;
+  font-size: 18px;
+}

part8/README.md

@@ -16,10 +16,3 @@ to fail; in that case, just run `elm package install` again.)
 elm live Main.elm --open -- --output=elm.js
 ```
 
-## Running Tests
-
-```bash
-cd test
-elm package install
-elm test TestRunner.elm
-```

part8/style.css

@@ -90,3 +90,12 @@ a:hover {
 button:focus, input:focus {
   outline: none;
 }
+
+.error {
+  background-color: #FF9632;
+  padding: 20px;
+  box-sizing: border-box;
+  overflow-x: auto;
+  font-family: monospace;
+  font-size: 18px;
+}

part9/style.css

@@ -90,3 +90,12 @@ a:hover {
 button:focus, input:focus {
   outline: none;
 }
+
+.error {
+  background-color: #FF9632;
+  padding: 20px;
+  box-sizing: border-box;
+  overflow-x: auto;
+  font-family: monospace;
+  font-size: 18px;
+}

style.css

@@ -90,3 +90,9 @@ a:hover {
 button:focus, input:focus {
   outline: none;
 }
+
+.error {
+  background-color: #FF9632;
+  padding: 20px;
+  box-sizing: border-box;
+}