elm-javascript-minimal-interop-tutorial/index.html at master · wboumans/elm-javascript-minimal-interop-tutorial · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
<html>
<head>
  <title>First Interop</title>
  <link rel="stylesheet" href="css.css" />
</head>

<body>
  <main>
    <div class="land">
        <h1>Elm Land</h1>
        <hr />
        <div id="elm-container">To do: Embed Elm Here</div>
    </div>

    <div class="land" id="jsland">
        <h1>js Land</h1>
        <hr />
        <h2>Look at what Elm sent!</h1>
        <p id="from-elm">I've not yet received anything from Elm.</p>
        <hr />
        <h2>Send a valentine</h1>
        <button id="send-button">send</send>
    </div>
  </main>

  <script src="compiled-elm.js"></script>

  <script>
        //There are 2 simple steps for all Elm interop:
        //Step 1: Embed Elm in webpage.
        //Step 2: Hook up ports.

        //var elmApp = Elm.FirstInterop.embed(document.getElementById("elm-container"));

        //to do: subscribe to displayGreeting

        document.getElementById("send-button").onclick = function() {
            var
                valentine = {
                    from: "vanillajs",
                    content: "Dear Elm, you are my best friend!"
                };

            //to do: send valentines to Elm
        };
  </script>
</body>
</html>