kevgathuku/Main.elm

## README.md

      
    Raw
  

              README.md
            
          
    This is a minimal boilerplate for an Elm app with Parcel.
Run npm install and npm start to start a development server.

  
## elm.json
{
    "type": "application",
    "source-directories": [
        "."
    ],
    "elm-version": "0.19.0",
    "dependencies": {
        "direct": {
            "elm/browser": "1.0.0",
            "elm/core": "1.0.0",
            "elm/html": "1.0.0"
        },
        "indirect": {
            "elm/json": "1.0.0",
            "elm/time": "1.0.0",
            "elm/url": "1.0.0",
            "elm/virtual-dom": "1.0.0"
        }
    },
    "test-dependencies": {
        "direct": {},
        "indirect": {}
    }
}

## index.html
<html>
<body>
  <div id="app"></div>
  <script src="./index.js"></script>
</body>
</html>

## index.js
var { Elm } = require("./Main.elm");

Elm.Main.init({
  node: document.getElementById("app")
});

## Main.elm
module Main exposing (main)

import Browser
import Html exposing (Html, button, div, text)
import Html.Events exposing (onClick)


type alias Model =
    { count : Int }


initialModel : Model
initialModel =
    { count = 0 }


type Msg
    = Increment
    | Decrement


update : Msg -> Model -> Model
update msg model =
    case msg of
        Increment ->
            { model | count = model.count + 1 }

        Decrement ->
            { model | count = model.count - 1 }


view : Model -> Html Msg
view model =
    div []
        [ button [ onClick Increment ] [ text "+1" ]
        , div [] [ text <| String.fromInt model.count ]
        , button [ onClick Decrement ] [ text "-1" ]
        ]


main : Program () Model Msg
main =
    Browser.sandbox
        { init = initialModel
        , view = view
        , update = update
        }

## package.json
{
  "private": true,
  "scripts": {
    "start": "parcel index.html"
  },
  "devDependencies": {
    "node-elm-compiler": "^5.0.1",
    "parcel-bundler": "^1.10.1"
  }
}
	{
	"type": "application",
	"source-directories": [
	"."
	],
	"elm-version": "0.19.0",
	"dependencies": {
	"direct": {
	"elm/browser": "1.0.0",
	"elm/core": "1.0.0",
	"elm/html": "1.0.0"
	},
	"indirect": {
	"elm/json": "1.0.0",
	"elm/time": "1.0.0",
	"elm/url": "1.0.0",
	"elm/virtual-dom": "1.0.0"
	}
	},
	"test-dependencies": {
	"direct": {},
	"indirect": {}
	}
	}
	<html>
	<body>
	<div id="app"></div>
	<script src="./index.js"></script>
	</body>
	</html>
	var { Elm } = require("./Main.elm");

	Elm.Main.init({
	node: document.getElementById("app")
	});
	module Main exposing (main)

	import Browser
	import Html exposing (Html, button, div, text)
	import Html.Events exposing (onClick)


	type alias Model =
	{ count : Int }


	initialModel : Model
	initialModel =
	{ count = 0 }


	type Msg
	= Increment
	\| Decrement


	update : Msg -> Model -> Model
	update msg model =
	case msg of
	Increment ->
	{ model \| count = model.count + 1 }

	Decrement ->
	{ model \| count = model.count - 1 }


	view : Model -> Html Msg
	view model =
	div []
	[ button [ onClick Increment ] [ text "+1" ]
	, div [] [ text <\| String.fromInt model.count ]
	, button [ onClick Decrement ] [ text "-1" ]
	]


	main : Program () Model Msg
	main =
	Browser.sandbox
	{ init = initialModel
	, view = view
	, update = update
	}
	{
	"private": true,
	"scripts": {
	"start": "parcel index.html"
	},
	"devDependencies": {
	"node-elm-compiler": "^5.0.1",
	"parcel-bundler": "^1.10.1"
	}
	}