Merge pull request #10 from TechforgoodCAST/part3

Part2

Author: ivan-unfolds

README.md

@@ -1,2 +1,19 @@
-# elm-week
-Planning for running Elm week at Founders & Coders
+# Elm Week
+
+Elm week at Founders & Coders
+
+
+## Core Resources
+
++ Elm Lang gitbook - https://guide.elm-lang.org/
++ Frontend Masters videos - https://frontendmasters.com/courses/elm/
++ Frontend Masters workshop - https://github.com/rtfeldman/elm-workshop
++ Elm Package - http://package.elm-lang.org/
++ Elm Core docs - http://package.elm-lang.org/packages/elm-lang/core/latest
++ Html docs - http://package.elm-lang.org/packages/elm-lang/html/latest
+
+
+## Useful Resources
+
++ Cheat sheet - https://www.elm-tutorial.org/en/
++ Great tutorial but gets pretty advanced later on - https://www.elm-tutorial.org/en/

part2/README.md

@@ -0,0 +1,32 @@
+# Part 2
+
++ Html Primer
++ The Elm Architecture
++ Exploring types
+
+
+## Short exercise writing Html in Elm
+
++ Work through exercise in [html workshop](https://github.com/TechforgoodCAST/elm-week/tree/master/part3/html-workshop)
+
+
+## The Elm Architecture
+
+How an Elm app fits together
+
++ Frontend masters section on The Elm Architecture (TEA) - https://frontendmasters.com/courses/elm/the-elm-architecture/
++ Read through the page on the elm-lang guide - https://guide.elm-lang.org/architecture/
++ Work through first 3 User input exercises (up to `Form`) - https://guide.elm-lang.org/architecture/user_input/
+
+
+## Exploring Types
+
++ Read types section on elm-lang guide - https://guide.elm-lang.org/types/
++ Error handling (Maybe and Result) - https://guide.elm-lang.org/error_handling/
++ Video on Union Types - https://frontendmasters.com/courses/elm/union-types
++ [Map workshop](https://github.com/TechforgoodCAST/elm-week/tree/master/part3/map-workshop)
+
+
+## A short exercise to tie it all together
+
+[mini-todos-workshop](https://github.com/TechforgoodCAST/elm-week/tree/master/part3/mini-todos-workshop) - Implement a todo app based on the first example in the union types section

part2/html-workshop/Main.elm

@@ -0,0 +1,22 @@
+module Main exposing (..)
+
+import Html exposing (..)
+import Html.Attributes exposing (..)
+
+
+main : Html msg
+main =
+    div []
+        [ stylesheetLink
+          -- add your components here
+        ]
+
+
+stylesheetLink : Html msg
+stylesheetLink =
+    -- this appends the tachyons stylesheet to the DOM
+    node "link"
+        [ rel "stylesheet"
+        , href "https://unpkg.com/tachyons@4.8.0/css/tachyons.min.css"
+        ]
+        []

part2/html-workshop/README.md

@@ -0,0 +1,60 @@
+# Html Exercise
+
+Try recreating some of your components from the tachyons workshop in elm
+
+https://github.com/TechforgoodCAST/prototyping-workshop/tree/master/tachyons-workshop
+
+### Getting Started
+
+1. cd into this directory
+2. run `elm-reactor` in the terminal - this will let you preview an elm app straight away
+3. visit `localhost:8000`
+4. Click on `Main.elm` - this will run the program in `Main.elm` (all output comes from the `main` function in `Main.elm`)
+5. add your components to the `main` function to see them on the page
+
+
+An example to get you started:
+
+This:
+```html
+<button class="bg-blue white br2">Click Me</button>
+```
+
+Can be written in Elm as:
+```elm
+myButton =
+    button [ class "bg-blue white br2" ] [ text "Click Me" ]
+```
+
+Just remember:
++ `button` is a function that takes two `List`s
++ The first is a list of `Attribute`s (like `class` or `style`)
++ The second a list of child nodes (i.e. other html elements)
+
+
+### Resources
+
++ Html and the Virtual DOM - https://frontendmasters.com/courses/elm/html-and-the-virtual-dom
++ Elm Html Docs - http://package.elm-lang.org/packages/elm-lang/html/2.0.0/Html
++ Html Attributes - http://package.elm-lang.org/packages/elm-lang/html/2.0.0/Html-Attributes
+
+
+### Tachyons Stylesheet
+
+The tachyons stylesheet is included in `Main.elm`, at the moment it's not possible to include external scripts and stylsheets in `elm-reactor` so elm appends this to the DOM
+
+This:
+```elm
+stylesheetLink : Html msg
+stylesheetLink =
+    node "link"
+        [ rel "stylesheet"
+        , href "https://unpkg.com/tachyons@4.8.0/css/tachyons.min.css"
+        ]
+        []
+```
+
+Becomes this:
+```html
+<link rel="stylesheet" href="https://unpkg.com/tachyons@4.8.0/css/tachyons.min.css"/>
+```

part2/html-workshop/elm-package.json

@@ -0,0 +1,15 @@
+{
+    "version": "1.0.0",
+    "summary": "helpful summary of your project, less than 80 characters",
+    "repository": "https://github.com/user/project.git",
+    "license": "BSD3",
+    "source-directories": [
+        "."
+    ],
+    "exposed-modules": [],
+    "dependencies": {
+        "elm-lang/core": "5.1.1 <= v < 6.0.0",
+        "elm-lang/html": "2.0.0 <= v < 3.0.0"
+    },
+    "elm-version": "0.18.0 <= v < 0.19.0"
+}