















You can write your first elm code online here: http://elm-lang.org/examples/hello-html
Your first hello word code will look like this:
import Html
main =
Html.text "Hello, World!!"
Your index.html will look like this:
Hello, World!!
You can also div as follows:
import Html
main =
Html.div [] [
Html.text "Hello, World!!"]
Output will remain the same, but if you inspect the webpage, you can see the following in the source code:

You can convert your html code to elm here: https://mbylstra.github.io/html-to-elm/

You can also add a view function
import Html
main = view
view : Html.Html Never
view =
Html.div [] [
Html.text "Hello, World!!"]
Your output will remain the same.
If you want to output your mouse position your code will look like:
import Html
import Mouse
import Programmator
main : Program {}
main = {
init = { x=0, y=0 },
input = Mouse.moves,
view = view
} |> Programmator.viewFromOneInput
view : Mouse.Position -> Html.Html Mouse.Position
view { x , y }=
Html.div [] [
Html.text ("x= "++ (toString x) ++ ", y= " ++ (toString y))]



Comments
Post a Comment