Skip to content

Instantly share code, notes, and snippets.

@PhilippMeissner

PhilippMeissner/Elm Stuff

Last active May 17, 2016
Embed
What would you like to do?
module Main exposing (..)
import Html exposing (..)
import Html.App as Html
import Html.Attributes exposing (class, type', href, attribute, placeholder, id, style)
import Html.Events exposing (onInput)
import Element exposing (toHtml, centered, container, middle)
import Text exposing (fromString)
main : Program (Maybe Model)
main =
Html.programWithFlags { init = init, view = view, update = update, subscriptions = \_ -> Sub.none }
init : Maybe Model -> ( Model, Cmd.Cmd Msg )
init passedModel =
Maybe.withDefault initialModel passedModel ! []
type alias Model =
{ location : String
, height : Int
, width : Int
}
initialModel : Model
initialModel =
{ location = "", height = 0, width = 0 }
type Msg
= ChangeLocation String
update : Msg -> Model -> ( Model, Cmd.Cmd Msg )
-- Update
view : Model -> Html.Html Msg
-- View
welcomeBlock : Model -> Html a
welcomeBlock model =
div
[ style [ ( "background-color", "red" ) ]]
[ toHtml (container model.width model.height middle (centered (fromString "Hello World"))) ]
-- Index.html:
<html>
<head>
<title>Elm-Application</title>
<!-- Bootstrap -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" integrity="sha384-1q8mTJOASx8j1Au+a5WDVnPi2lkFfwwEAa8hDDdjZlpLegxhjVME1fgjWPGmkzs7" crossorigin="anonymous">
<!-- jQuery-->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<!-- Bootstrap JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js" integrity="sha384-0mSbJDEHialfmuBBQP6A4Qrprq5OVfW37PRR3j5ELqxss1yVqOtnepnHVP9aJ7xS" crossorigin="anonymous"></script>
<script type="text/javascript" src="elm.js"></script>
</head>
<body style="padding-top: 51px;">
<div class="container-fluid">
<div id="elm-application"></div>
</div>
</body>
<script type="text/javascript">
var stamperDiv = document.getElementById('elm-application');
app = Elm.Main.embed(stamperDiv, {location: "test", width: window.innerWidth, height: window.innerHeight});
</script>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment