{"id":16049296,"url":"https://github.com/jskulski/elm-intro-workshop","last_synced_at":"2026-06-22T18:31:20.096Z","repository":{"id":142843372,"uuid":"109365255","full_name":"jskulski/elm-intro-workshop","owner":"jskulski","description":"A kata designed to introduce developers to the Elm programming language language","archived":false,"fork":false,"pushed_at":"2017-12-08T18:36:51.000Z","size":215,"stargazers_count":1,"open_issues_count":0,"forks_count":0,"subscribers_count":0,"default_branch":"master","last_synced_at":"2025-04-05T07:23:08.704Z","etag":null,"topics":["elm","elm-demos","elm-lang","introduction","kata","tutorial"],"latest_commit_sha":null,"homepage":"https://elm-lang.org","language":"Elm","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/jskulski.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2017-11-03T07:23:50.000Z","updated_at":"2018-04-25T04:51:21.000Z","dependencies_parsed_at":"2023-06-28T05:19:27.727Z","dependency_job_id":null,"html_url":"https://github.com/jskulski/elm-intro-workshop","commit_stats":null,"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"purl":"pkg:github/jskulski/elm-intro-workshop","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/jskulski%2Felm-intro-workshop","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/jskulski%2Felm-intro-workshop/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/jskulski%2Felm-intro-workshop/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/jskulski%2Felm-intro-workshop/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/jskulski","download_url":"https://codeload.github.com/jskulski/elm-intro-workshop/tar.gz/refs/heads/master","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/jskulski%2Felm-intro-workshop/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":286080680,"owners_count":34661702,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2026-05-26T15:22:16.424Z","status":"online","status_checked_at":"2026-06-22T02:00:06.391Z","response_time":106,"last_error":null,"robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":true,"can_crawl_api":true,"host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["elm","elm-demos","elm-lang","introduction","kata","tutorial"],"created_at":"2024-10-09T00:15:54.536Z","updated_at":"2026-06-22T18:31:20.077Z","avatar_url":"https://github.com/jskulski.png","language":"Elm","funding_links":[],"categories":[],"sub_categories":[],"readme":"# Elm Workshop\n\nHello! Today let's play with Elm.\nhttp://elm-lang.org/\n\n# Overview\n\n- View introduction video: https://www.youtube.com/watch?v=vgsckgtVdoQ\n- Install elm: `npm install -g elm`\n- Start dev server: `elm-reactor`\n- Copy code in #Code section of this file into project: pbpaste \u003e Main.elm\n- Start improving!\n\nTip: think data first, change the Model first.\n\n# Syllabus\n## Starting\n\nStart with our humble create account form. It asks for your username, a password and asks you to confirm your password.\n\n![Screengif of the starting form](doc/start.gif)\n\n## Milestone #1\n\n(Suggestion to accomplish as a group, lead by teacher)\n\nBusiness indicates that moving to email (which we'll need to confirm) is the way to go. If you can also add a header, that'd be great. Also, take some time to leave it better than you found it!\n\n- [ ] Change name to email\n- [ ] Add confirmation email box\n- [ ] Add a header to explain the form\n- [ ] The let statement in the `viewValidation` is hiding important business logic! Let's extract it!\n\n![Screengif of the starting form](doc/milestone1.gif)\n\n## Milestone #2\n\nSuggested with one ore more pairing partner(s)\n\n- [ ] Wait for input into confirmation boxes before saying they don't match\n- [ ] Only accept virta health email addresses (something@virtahealth.com)\n- [ ] Make sure status is reflective of specific error\n- [ ] Adding spacing and visual structure to form\n- [ ] Wait till a user enters the confirmation box to test validity\n- [ ] Work those HTML/CSS muscles, make the form beautiful 💃\n\n\n## Milestone 3\n\nHave it your way, baby!\n\n- [ ] Turn this into a react component! (https://github.com/evancz/react-elm-components)\n- [ ] Install a live reloader or other debugging tools (elm-live, http://debug.elm-lang.org/)\n- [ ] `/=` trips me up, add `!=` as an operator to the program (http://elm-lang.org/docs/syntax)\n- [ ] Test the extracted business logic core! (elm-test)\n- [ ] ✨ Anything your heart can dream of ✨ (http://stoney.sb.org/eno/oblique.html)\n\n# Starting Code\n\n(From: https://guide.elm-lang.org/architecture/user_input/forms.html)\n\nCopy this code into a text file named `Main.elm` and run `elm-reactor`\n\n```\nimport Html exposing (..)\nimport Html.Attributes exposing (..)\nimport Html.Events exposing (onInput)\n\n\nmain =\n  Html.beginnerProgram { model = initialModel, view = view, update = update }\n\n\n-- MODEL\n\ntype alias Model =\n  { name : String\n  , password : String\n  , passwordAgain : String\n  }\n\n\ninitialModel : Model\ninitialModel =\n  Model \"\" \"\" \"\"\n\n\n-- UPDATE\n\ntype Msg\n    = Name String\n    | Password String\n    | PasswordAgain String\n\n\nupdate : Msg -\u003e Model -\u003e Model\nupdate msg model =\n  case msg of\n    Name name -\u003e\n      { model | name = name }\n\n    Password password -\u003e\n      { model | password = password }\n\n    PasswordAgain password -\u003e\n      { model | passwordAgain = password }\n\n\n-- VIEW\n\nview : Model -\u003e Html Msg\nview model =\n  div []\n    [ input [ type_ \"text\", placeholder \"Name\", onInput Name ] []\n    , input [ type_ \"password\", placeholder \"Password\", onInput Password ] []\n    , input [ type_ \"password\", placeholder \"Re-enter Password\", onInput PasswordAgain ] []\n    , viewValidation model\n    ]\n\nviewValidation : Model -\u003e Html msg\nviewValidation model =\n  let\n    (color, message) =\n      if model.password == model.passwordAgain then\n        (\"green\", \"OK\")\n      else\n        (\"red\", \"Passwords do not match!\")\n  in\n    div [ style [(\"color\", color)] ] [ text message ]\n```\n\n# Resources\n\n- elm slack: https://elmlang.herokuapp.com/ (very active + helpful!)\n- elm subreddit: http://reddit.com/r/elm (same!)\n- elm koans: https://github.com/robertjlooby/elm-koans\n- install editor plugin (Configure Your Editor - https://guide.elm-lang.org/install.html)\n\n# Troubleshooting\n\nIf all else fails, use ellie (https://ellie-app.com/new). but the dev ergonomics are not nearly as good.\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fjskulski%2Felm-intro-workshop","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fjskulski%2Felm-intro-workshop","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fjskulski%2Felm-intro-workshop/lists"}