karlosmid/index.html

## index.html
<!DOCTYPE html>
<!--
 ! Excerpted from "Programming Elm",
 ! published by The Pragmatic Bookshelf.
 ! Copyrights apply to this code. It may not be used to create training material,
 ! courses, books, articles, and the like. Contact us if you are in doubt.
 ! We make no guarantees that this code is fit for any purpose.
 ! Visit http://www.pragmaticprogrammer.com/titles/jfelm for more book information.
-->
<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.0">
  <title>Picshare</title>
  <link href="https://programming-elm.com/font-awesome-4.7.0/css/font-awesome.min.css" rel="stylesheet">
  <link rel="stylesheet" href="main.css">
</head>
<body>
  <div id="main" class="main"></div>

  <script src="picshare.js"></script>
  <script>
  // 1. create javascript function with variable app
    (function() {
    var app = Elm.Picshare.init({
      node: document.getElementById('main')
    });
  })();
  //2. subscribe to listen port with a function
  app.ports.listen.subscribe(listen);
  // 3. javascript subscribe function
  function listen(url) {
    var socket = new WebSocket(url);
    socket.onmessage = function(event) { app.ports.receive.send(event.data);
    };
  }
  </script>
</body>
</html>
	<!DOCTYPE html>
	<!--
	! Excerpted from "Programming Elm",
	! published by The Pragmatic Bookshelf.
	! Copyrights apply to this code. It may not be used to create training material,
	! courses, books, articles, and the like. Contact us if you are in doubt.
	! We make no guarantees that this code is fit for any purpose.
	! Visit http://www.pragmaticprogrammer.com/titles/jfelm for more book information.
	-->
	<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.0">
	<title>Picshare</title>
	<link href="https://programming-elm.com/font-awesome-4.7.0/css/font-awesome.min.css" rel="stylesheet">
	<link rel="stylesheet" href="main.css">
	</head>
	<body>
	<div id="main" class="main"></div>

	<script src="picshare.js"></script>
	<script>
	// 1. create javascript function with variable app
	(function() {
	var app = Elm.Picshare.init({
	node: document.getElementById('main')
	});
	})();
	//2. subscribe to listen port with a function
	app.ports.listen.subscribe(listen);
	// 3. javascript subscribe function
	function listen(url) {
	var socket = new WebSocket(url);
	socket.onmessage = function(event) { app.ports.receive.send(event.data);
	};
	}
	</script>
	</body>
	</html>