Add intro/part1

2018-08-09 01:32:05 -04:00
parent d879bd17cd
commit c2ce139c69
47 changed files with 11331 additions and 0 deletions
--- a/intro/part1/Main.elm
+++ b/intro/part1/Main.elm
@@ -0,0 +1,40 @@
+module Main exposing (main)
+
+import Html exposing (..)
+import Html.Attributes exposing (..)
+
+
+banner =
+    {- TODO Add a logo and tagline to this banner, so its structure becomes:
+
+          <div class="banner">
+              <div class="container">
+                  <h1 class="logo-font">conduit</h1>
+                  <p>A place to share your knowledge.</p>
+               </div>
+          </div>
+
+       HINT 1: the <div class="row"> above is an element with 2 child nodes.
+
+       HINT 2: the <div class="feed-toggle"> below is an element with text.
+    -}
+    div [ class "banner" ]
+        [ div [ class "container" ]
+            [ text "TODO: Put a <h1> here instead of this text, then add a <p> right after the <h1>" ]
+        ]
+
+
+feed =
+    div [ class "feed-toggle" ] [ text "(In the future we’ll display a feed of articles here!)" ]
+
+
+main =
+    div [ class "home-page" ]
+        [ p [] [ text "TODO: Replace this <p> with the banner" ]
+        , div [ class "container page" ]
+            [ div [ class "row" ]
+                [ div [ class "col-md-9" ] [ feed ]
+                , div [ class "col-md-3" ] []
+                ]
+            ]
+        ]
--- a/intro/part1/README.md
+++ b/intro/part1/README.md
@@ -0,0 +1,19 @@
+# Part 1
+
+To build everything, `cd` into the `part1/` directory and run:
+
+```shell
+elm make Main.elm --output elm.js
+```
+
+This will compile your Main.elm file into `elm.js`, which gets loaded by
+`index.html`.
+
+Then open `index.html` in your browser.
+
+## Exercise
+
+Open `Main.elm` in your editor and resolve the TODOs there.
+
+After you complete each one, re-run `elm make Main.elm --output elm.js` to
+recompile the `elm.js` file, then refresh the browser to see the results!
--- a/intro/part1/elm.json
+++ b/intro/part1/elm.json
@@ -0,0 +1,21 @@
+{
+    "type": "application",
+    "source-directories": [
+        "."
+    ],
+    "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/part1/index.html
+++ b/intro/part1/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>