diff --git a/intro/part2/README.md b/intro/part2/README.md new file mode 100644 index 0000000..f870dbd --- /dev/null +++ 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. diff --git a/intro/part2/elm.json b/intro/part2/elm.json new file mode 100644 index 0000000..ec1a969 --- /dev/null +++ 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": {} + } +} diff --git a/intro/part2/index.html b/intro/part2/index.html new file mode 100644 index 0000000..3860a04 --- /dev/null +++ b/intro/part2/index.html @@ -0,0 +1,15 @@ + + + + + Elm Workshop + + + + +
+ + + diff --git a/intro/part2/src/Main.elm b/intro/part2/src/Main.elm new file mode 100644 index 0000000..ae945aa --- /dev/null +++ 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 [] [] + + +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.)" ]