Add instructions and scaffolding for running locally

Author: ceddlyburge

exercises/concept/arlos-alphabetiser/elm-watch.json

@@ -0,0 +1,11 @@
+{
+    "serve": ".",
+    "targets": {
+        "Arlos Alphabitiser": {
+            "inputs": [
+                "src/Main.elm"
+            ],
+            "output": "build/main.js"
+        }
+    }
+}

exercises/concept/arlos-alphabetiser/index.html

@@ -0,0 +1,5 @@
+<script src="/build/main.js"></script>
+<div id="root"></div>
+<script>
+    var app = Elm.Main.init({ node: document.getElementById("root") });
+</script>

exercises/concept/arlos-alphabetiser/src/Main.elm

@@ -0,0 +1,66 @@
+module Main exposing (Msg(..), init, main, update, view)
+
+import Browser
+import Html exposing (Html, div, input, text)
+import Html.Attributes exposing (placeholder, value)
+import Html.Events exposing (onInput)
+
+
+
+-- MAIN
+-- When you have finished this exercise, this file will be an Elm program.
+--
+-- You can copy this file to Ellie (an online Elm sandbox - https://ellie-app.com/)
+-- to see it running and interact with it.
+--
+-- If you are solving the exercise locally (and not through the exercism online editor),
+-- you can additionally run it locally:
+-- - `rm src/Browser.elm` (delete a fake file that we need for the online editor),
+-- - `elm install elm/browser` (install the real version of the fake)
+-- - `elm make src/Main.elm` (compile the code and make an index.html file)
+-- - Then view index.html in a browser
+
+
+main =
+    Browser.sandbox { init = init, update = update, view = view }
+
+
+
+-- MODEL
+
+
+type alias Model =
+    { content : String
+    }
+
+
+init : Model
+init =
+    { content = "" }
+
+
+
+-- UPDATE
+
+
+type Msg
+    = Change String
+
+
+update : Msg -> Model -> Model
+update msg model =
+    case msg of
+        Change newContent ->
+            { model | content = newContent }
+
+
+
+-- VIEW
+
+
+view : Model -> Html Msg
+view model =
+    div []
+        [ input [ placeholder "Text to alphabetise", value model.content, onInput Change ] []
+        , div [] [ text (model.content |> String.toLower |> String.toList |> List.sort |> String.fromList) ]
+        ]