Add part2

2018-08-09 02:30:38 -04:00
parent 6a0a7ea941
commit 82dfd6436e
4 changed files with 108 additions and 0 deletions
--- a/intro/part2/README.md
+++ b/intro/part2/README.md
@@ -0,0 +1,15 @@
+# Part 2
+
+This is just like last time, except `Main.elm` is now in the `src/` directory.
+
+To build everything, `cd` into the `part2/` directory and run:
+
+```shell
+elm make src/Main.elm --output elm.js
+```
+
+Then open `index.html` in your browser.
+
+## Exercise
+
+Open `src/Main.elm` in your editor and resolve the TODOs there.
--- a/intro/part2/elm.json
+++ b/intro/part2/elm.json
@@ -0,0 +1,21 @@
+{
+    "type": "application",
+    "source-directories": [
+        "src"
+    ],
+    "elm-version": "0.19.0",
+    "dependencies": {
+        "direct": {
+            "elm/core": "1.0.0",
+            "elm/html": "1.0.0"
+        },
+        "indirect": {
+            "elm/json": "1.0.0",
+            "elm/virtual-dom": "1.0.0"
+        }
+    },
+    "test-dependencies": {
+        "direct": {},
+        "indirect": {}
+    }
+}
--- a/intro/part2/index.html
+++ b/intro/part2/index.html
@@ -0,0 +1,15 @@
+<!DOCTYPE html>
+<html>
+  <head>
+    <meta charset="utf-8">
+    <title>Elm Workshop</title>
+    <link rel="stylesheet" href="../server/public/main.css">
+    <script src="elm.js"></script>
+  </head>
+  <body>
+    <div id="app"></div>
+    <script>
+      Elm.Main.init({node: document.getElementById("app")});
+    </script>
+  </body>
+</html>
--- a/intro/part2/src/Main.elm
+++ b/intro/part2/src/Main.elm
@@ -0,0 +1,57 @@
+module Main exposing (main)
+
+import Html exposing (..)
+import Html.Attributes exposing (..)
+
+
+viewTags tags =
+    let
+        renderedTags =
+            -- 👉 TODO use `List.map` and `viewTag` to render the tags
+            []
+    in
+    div [ class "tag-list" ] renderedTags
+
+
+viewTag tagName =
+    {- 👉 TODO render something like this:
+
+       <button class="tag-pill tag-default">tag name goes here</button>
+    -}
+    button [] []
+
+
+main =
+    let
+        tags =
+            [ "elm", "fun", "programming", "compilers" ]
+    in
+    div [ class "home-page" ]
+        [ viewBanner
+        , div [ class "container page" ]
+            [ div [ class "row" ]
+                [ div [ class "col-md-9" ] [ viewFeed ]
+                , div [ class "col-md-3" ]
+                    [ div [ class "sidebar" ]
+                        [ p [] [ text "Popular Tags" ]
+
+                        -- 👉 TODO instead of passing [] to viewTags, pass the actual tags
+                        , viewTags []
+                        ]
+                    ]
+                ]
+            ]
+        ]
+
+
+viewBanner =
+    div [ class "banner" ]
+        [ div [ class "container" ]
+            [ h1 [ class "logo-font" ] [ text "conduit" ]
+            , p [] [ text "A place to share your knowledge." ]
+            ]
+        ]
+
+
+viewFeed =
+    div [ class "feed-toggle" ] [ text "(We’ll display some articles here later.)" ]