Reorganize stages into parts
This commit is contained in:
Richard Feldman
123
part4/Main.elm
Normal file
123
part4/Main.elm
Normal file
@@ -0,0 +1,123 @@
|
||||
module Main (..) where
|
||||
|
||||
import Html exposing (..)
|
||||
import Html.Attributes exposing (..)
|
||||
import Html.Events exposing (..)
|
||||
import StartApp.Simple as StartApp
|
||||
import Json.Encode
|
||||
import Signal exposing (Address)
|
||||
|
||||
|
||||
type alias Model =
|
||||
{ query : String
|
||||
, results : List SearchResult
|
||||
}
|
||||
|
||||
|
||||
type alias SearchResult =
|
||||
{ id : ResultId
|
||||
, name : String
|
||||
, stars : Int
|
||||
}
|
||||
|
||||
|
||||
type alias ResultId =
|
||||
Int
|
||||
|
||||
|
||||
|
||||
{- See https://developer.github.com/v3/search/#example -}
|
||||
|
||||
|
||||
initialModel : Model
|
||||
initialModel =
|
||||
{ query = "tutorial"
|
||||
, results =
|
||||
[ { id = 1
|
||||
, name = "TheSeamau5/elm-checkerboardgrid-tutorial"
|
||||
, stars = 66
|
||||
}
|
||||
, { id = 2
|
||||
, name = "grzegorzbalcerek/elm-by-example"
|
||||
, stars = 41
|
||||
}
|
||||
, { id = 3
|
||||
, name = "sporto/elm-tutorial-app"
|
||||
, stars = 35
|
||||
}
|
||||
, { id = 4
|
||||
, name = "jvoigtlaender/Elm-Tutorium"
|
||||
, stars = 10
|
||||
}
|
||||
, { id = 5
|
||||
, name = "sporto/elm-tutorial-assets"
|
||||
, stars = 7
|
||||
}
|
||||
]
|
||||
}
|
||||
|
||||
|
||||
view : Address Action -> Model -> Html
|
||||
view address model =
|
||||
div
|
||||
[ class "content" ]
|
||||
[ header
|
||||
[]
|
||||
[ h1 [] [ text "ElmHub" ]
|
||||
, span [ class "tagline" ] [ text "“Like GitHub, but for Elm things.”" ]
|
||||
]
|
||||
, input
|
||||
[ class "search-query"
|
||||
-- TODO when we receive onInput, set the query in the model
|
||||
, defaultValue model.query
|
||||
]
|
||||
[]
|
||||
, button [ class "search-button" ] [ text "Search" ]
|
||||
, ul
|
||||
[ class "results" ]
|
||||
(List.map (viewSearchResult address) model.results)
|
||||
]
|
||||
|
||||
|
||||
onInput : Address Action -> (String -> Action) -> Attribute
|
||||
onInput address wrap =
|
||||
on "input" targetValue (\val -> Signal.message address (wrap val))
|
||||
|
||||
|
||||
defaultValue str =
|
||||
property "defaultValue" (Json.Encode.string str)
|
||||
|
||||
|
||||
viewSearchResult : Address Action -> SearchResult -> Html
|
||||
viewSearchResult address result =
|
||||
li
|
||||
[]
|
||||
[ span [ class "star-count" ] [ text (toString result.stars) ]
|
||||
, a
|
||||
[ href ("https://github.com/" ++ result.name), target "_blank" ]
|
||||
[ text result.name ]
|
||||
, button
|
||||
-- TODO add an onClick handler that sends a DeleteById action
|
||||
[ class "hide-result" ]
|
||||
[ text "X" ]
|
||||
]
|
||||
|
||||
|
||||
type Action
|
||||
= SetQuery String
|
||||
| DeleteById ResultId
|
||||
|
||||
|
||||
update : Action -> Model -> Model
|
||||
update action model =
|
||||
-- TODO if we get a SetQuery action, use it to set the model's query field,
|
||||
-- and if we get a DeleteById action, delete the appropriate result
|
||||
model
|
||||
|
||||
|
||||
main =
|
||||
StartApp.start
|
||||
{ view = view
|
||||
, update = update
|
||||
, model = initialModel
|
||||
}
|
||||
17
part4/README.md
Normal file
17
part4/README.md
Normal file
@@ -0,0 +1,17 @@
|
||||
Stage 4
|
||||
=======
|
||||
|
||||
## Installation
|
||||
|
||||
```bash
|
||||
elm package install
|
||||
```
|
||||
|
||||
(Answer `y` at the prompt. In rare cases a known issue can cause the download
|
||||
to fail; in that case, just run `elm package install` again.)
|
||||
|
||||
## Building
|
||||
|
||||
```bash
|
||||
elm live Main.elm --open -- --output=elm.js
|
||||
```
|
||||
BIN
part4/elm-hub.png
Normal file
BIN
part4/elm-hub.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 2.1 KiB |
16
part4/elm-package.json
Normal file
16
part4/elm-package.json
Normal file
@@ -0,0 +1,16 @@
|
||||
{
|
||||
"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": {
|
||||
"elm-lang/core": "3.0.0 <= v < 4.0.0",
|
||||
"evancz/elm-html": "4.0.0 <= v < 5.0.0",
|
||||
"evancz/start-app": "2.0.0 <= v < 3.0.0"
|
||||
},
|
||||
"elm-version": "0.16.0 <= v < 0.17.0"
|
||||
}
|
||||
26
part4/index.html
Normal file
26
part4/index.html
Normal file
@@ -0,0 +1,26 @@
|
||||
<!DOCTYPE HTML>
|
||||
<html>
|
||||
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<title>ElmHub</title>
|
||||
<script type="text/javascript" src="elm.js"></script>
|
||||
|
||||
<!-- Uncomment the below line to enable elm-reactor support. -->
|
||||
<!-- <script type="text/javascript" src="/_reactor/debug.js"></script> -->
|
||||
|
||||
<link rel="stylesheet" href="style.css">
|
||||
<link rel="icon" type="image/png" href="elm-hub.png">
|
||||
</head>
|
||||
|
||||
<body>
|
||||
</body>
|
||||
|
||||
<script type="text/javascript">
|
||||
var app = Elm.fullscreen(Elm.Main, {});
|
||||
|
||||
// Uncomment this line and comment out the above to enable elm-reactor support.
|
||||
// var app = Elm.fullscreenDebug("ElmHub", "ElmHub.elm");
|
||||
</script>
|
||||
|
||||
</html>
|
||||
92
part4/style.css
Normal file
92
part4/style.css
Normal file
@@ -0,0 +1,92 @@
|
||||
|
||||
.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;
|
||||
}
|
||||
Reference in New Issue
Block a user