Adventures in Elm

2017-03-19 11_30_53-GOTO2016•Advent-Download-From-YTPak.com.mp4 - VLC media player2017-03-19 11_32_58-GOTO2016•Advent-Download-From-YTPak.com.mp4 - VLC media player2017-03-19 11_33_50-GOTO2016•Advent-Download-From-YTPak.com.mp4 - VLC media player2017-03-19 11_34_13-GOTO2016•Advent-Download-From-YTPak.com.mp4 - VLC media player2017-03-19 11_35_14-GOTO2016•Advent-Download-From-YTPak.com.mp4 - VLC media player2017-03-19 11_36_25-GOTO2016•Advent-Download-From-YTPak.com.mp4 - VLC media player2017-03-19 11_37_32-GOTO2016•Advent-Download-From-YTPak.com.mp4 - VLC media player2017-03-19 11_38_15-GOTO2016•Advent-Download-From-YTPak.com.mp4 - VLC media player2017-03-19 11_40_16-GOTO2016•Advent-Download-From-YTPak.com.mp4 - VLC media player2017-03-19 11_43_29-GOTO2016•Advent-Download-From-YTPak.com.mp4 - VLC media player2017-03-19 11_43_59-GOTO2016•Advent-Download-From-YTPak.com.mp4 - VLC media player2017-03-19 11_44_31-GOTO2016•Advent-Download-From-YTPak.com.mp4 - VLC media player

2017-03-19 11_47_45-GOTO2016•Advent-Download-From-YTPak.com.mp4 - VLC media player2017-03-19 11_45_39-GOTO2016•Advent-Download-From-YTPak.com.mp4 - VLC media player2017-03-19 11_48_41-GOTO2016•Advent-Download-From-YTPak.com.mp4 - VLC media player

2017-03-19 11_49_16-GOTO2016•Advent-Download-From-YTPak.com.mp4 - VLC media player

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:

2017-03-19 12_04_08-example_hello-html.png

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

2017-03-19 12_08_33-Photos.png

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))]

 

2017-03-19 12_40_06-GOTO2016•Advent-Download-From-YTPak.com.mp4 - VLC media player2017-03-19 12_40_17-GOTO2016•Advent-Download-From-YTPak.com.mp4 - VLC media player2017-03-19 12_40_47-GOTO2016•Advent-Download-From-YTPak.com.mp4 - VLC media player

Advertisements

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s