index.html

<!doctype html>
<html>
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=0">
    <title>Elm Pomodoro List</title>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css">
  </head>
  <body>
    <div id="main"></div>
    <audio id="alarm" preload="auto" autobuffer>
      <source type="audio/mpeg" src="alarm.mp3">
      <source type="audio/ogg" src="alarm.ogg">
    </audio>
    <script src="elm.js"></script>
    <script>
      function loadTodos() {
        try {
          var todos = JSON.parse(localStorage.todos || "[]");
          return todos.every(todo => typeof todo === "string") ? todos : [];
        } catch (err) {
          return [];
        }
      }

      var app = Elm.Main.embed(
        document.querySelector("#main"),
        { todos: loadTodos() }
      );
      
      app.ports.saveTodos.subscribe(function(todos) {
        localStorage.todos = JSON.stringify(todos);
      });
      
      app.ports.updateTitle.subscribe(function(title) {
        document.querySelector("title").textContent = title;
      });
      
      app.ports.makeSound.subscribe(function() {
        document.querySelector("#alarm").play();
      });
    </script>
  </body>
</html>