chrisbuttery/elm-package.json

## elm-package.json
{
    "version": "1.0.0",
    "summary": "helpful summary of your project, less than 80 characters",
    "repository": "https://github.com/user/project.git",
    "license": "BSD3",
    "source-directories": [
        "."
    ],
    "exposed-modules": [],
    "dependencies": {
        "elm-lang/core": "3.0.0 <= v < 4.0.0",
        "evancz/elm-effects": "2.0.1 <= v < 3.0.0",
        "evancz/elm-html": "4.0.2 <= v < 5.0.0",
        "evancz/start-app": "2.0.2 <= v < 3.0.0"
    },
    "elm-version": "0.16.0 <= v < 0.17.0"
}

## encryptMessage.elm
module EncryptMessage where

import Html exposing (Html, Attribute, text, toElement, div, input)
import Html.Attributes exposing (..)
import Html.Events exposing (on, targetValue)
import Signal exposing (Address, Signal, Mailbox, mailbox, send)
import StartApp
import Effects exposing (Effects, Never)
import String
import Task


app =
  StartApp.start { init = (init, Effects.none), view = view, update = update, inputs = [encryptedString] }

main = app.html

port tasks : Signal (Task.Task Never ())
port tasks =
  app.tasks

type Action =
    TextChanged String
  | EncryptedValueReceived String
  | Noop

type alias Model =
  { clearText : String
  , encryptedText : String
  }

init =
  Model "" ""

-- outgoing ports & mailbox

portRequestEncryptionMailbox : Mailbox String
portRequestEncryptionMailbox =
  mailbox ""

port requestEncryption : Signal String
port requestEncryption =
  portRequestEncryptionMailbox.signal


-- incoming ports

port encryptionCompleted : Signal String

encryptedString : Signal Action
encryptedString =
  Signal.map EncryptedValueReceived encryptionCompleted


update : Action -> Model -> (Model, Effects Action)
update action model =
  case action of
    TextChanged text ->
      ( { model | clearText = text }
      , sendStringToBeEncrypted text
      )
    EncryptedValueReceived encrypted ->
      ( { model | encryptedText = encrypted }
      , Effects.none
      )
    Noop ->
      ( model, Effects.none )


sendStringToBeEncrypted : String -> Effects Action
sendStringToBeEncrypted clearText =
  send portRequestEncryptionMailbox.address clearText
  |> Effects.task
  |> Effects.map (\_ -> Noop)

view : Address Action -> Model -> Html
view address model =
  div []
    [ input
        [ placeholder "Text to encrypt"
        , value model.clearText
        , on "input" targetValue (\textfieldContent -> Signal.message address <| TextChanged textfieldContent)
        , myStyle
        ]
        []
    , div [ myStyle ] [ text (model.encryptedText) ]
    ]


myStyle : Attribute
myStyle =
  style
    [ ("width", "100%")
    , ("height", "40px")
    , ("padding", "10px 0")
    , ("font-size", "2em")
    , ("text-align", "center")
    ]

## encryptMessages.html
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <!-- The above 3 meta tags *must* come first in the head; any other head content must come *after* these tags -->
    <title>Encryption sample</title>

    <link href="base.css" rel="stylesheet">

  </head>
  <body>
    <div id="root"></div>
    <script src="encryptMessages.js"></script>
    <script>
      var div = document.getElementById('root');
      var myapp = Elm.embed(Elm.EncryptMessage, div, {encryptionCompleted : ""});
      myapp.ports.requestEncryption.subscribe(encryptString);

      function encryptString(message) {
          encryptedMessage = "Encypted: " + message; // actually encypting the message is ommited
          myapp.ports.encryptionCompleted.send(encryptedMessage);
      }
    </script>
  </body>
</html>
	{
	"version": "1.0.0",
	"summary": "helpful summary of your project, less than 80 characters",
	"repository": "https://github.com/user/project.git",
	"license": "BSD3",
	"source-directories": [
	"."
	],
	"exposed-modules": [],
	"dependencies": {
	"elm-lang/core": "3.0.0 <= v < 4.0.0",
	"evancz/elm-effects": "2.0.1 <= v < 3.0.0",
	"evancz/elm-html": "4.0.2 <= v < 5.0.0",
	"evancz/start-app": "2.0.2 <= v < 3.0.0"
	},
	"elm-version": "0.16.0 <= v < 0.17.0"
	}
	module EncryptMessage where

	import Html exposing (Html, Attribute, text, toElement, div, input)
	import Html.Attributes exposing (..)
	import Html.Events exposing (on, targetValue)
	import Signal exposing (Address, Signal, Mailbox, mailbox, send)
	import StartApp
	import Effects exposing (Effects, Never)
	import String
	import Task


	app =
	StartApp.start { init = (init, Effects.none), view = view, update = update, inputs = [encryptedString] }

	main = app.html

	port tasks : Signal (Task.Task Never ())
	port tasks =
	app.tasks

	type Action =
	TextChanged String
	\| EncryptedValueReceived String
	\| Noop

	type alias Model =
	{ clearText : String
	, encryptedText : String
	}

	init =
	Model "" ""

	-- outgoing ports & mailbox

	portRequestEncryptionMailbox : Mailbox String
	portRequestEncryptionMailbox =
	mailbox ""

	port requestEncryption : Signal String
	port requestEncryption =
	portRequestEncryptionMailbox.signal


	-- incoming ports

	port encryptionCompleted : Signal String

	encryptedString : Signal Action
	encryptedString =
	Signal.map EncryptedValueReceived encryptionCompleted



	update : Action -> Model -> (Model, Effects Action)
	update action model =
	case action of
	TextChanged text ->
	( { model \| clearText = text }
	, sendStringToBeEncrypted text
	)
	EncryptedValueReceived encrypted ->
	( { model \| encryptedText = encrypted }
	, Effects.none
	)
	Noop ->
	( model, Effects.none )


	sendStringToBeEncrypted : String -> Effects Action
	sendStringToBeEncrypted clearText =
	send portRequestEncryptionMailbox.address clearText
	\|> Effects.task
	\|> Effects.map (\_ -> Noop)

	view : Address Action -> Model -> Html
	view address model =
	div []
	[ input
	[ placeholder "Text to encrypt"
	, value model.clearText
	, on "input" targetValue (\textfieldContent -> Signal.message address <\| TextChanged textfieldContent)
	, myStyle
	]
	[]
	, div [ myStyle ] [ text (model.encryptedText) ]
	]


	myStyle : Attribute
	myStyle =
	style
	[ ("width", "100%")
	, ("height", "40px")
	, ("padding", "10px 0")
	, ("font-size", "2em")
	, ("text-align", "center")
	]
	<!DOCTYPE html>
	<html lang="en">
	<head>
	<meta charset="utf-8">
	<meta http-equiv="X-UA-Compatible" content="IE=edge">
	<meta name="viewport" content="width=device-width, initial-scale=1">
	<!-- The above 3 meta tags must come first in the head; any other head content must come after these tags -->
	<title>Encryption sample</title>

	<link href="base.css" rel="stylesheet">

	</head>
	<body>
	<div id="root"></div>
	<script src="encryptMessages.js"></script>
	<script>
	var div = document.getElementById('root');
	var myapp = Elm.embed(Elm.EncryptMessage, div, {encryptionCompleted : ""});
	myapp.ports.requestEncryption.subscribe(encryptString);

	function encryptString(message) {
	encryptedMessage = "Encypted: " + message; // actually encypting the message is ommited
	myapp.ports.encryptionCompleted.send(encryptedMessage);
	}
	</script>
	</body>
	</html>