cerchez07/elm-0.19-workshop
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Add part2

Browse Source
This commit is contained in:
Richard Feldman
2018-08-09 02:30:38 -04:00
parent 6a0a7ea941
commit 82dfd6436e
4 changed files with 108 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files

15
intro/part2/README.md Normal file
View File

@@ -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.

21
intro/part2/elm.json Normal file
View File

@@ -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": {}
}
}

15
intro/part2/index.html Normal file
View File

@@ -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>

57
intro/part2/src/Main.elm Normal file
View File

@@ -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.)" ]