<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <title>Buzzers</title>
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <meta name="description" content="A cool thing made with Glitch">
    <link id="favicon" rel="icon" href="https://glitch.com/edit/favicon-app.ico" type="image/x-icon">
    <link rel="stylesheet" href="/style.css">
    <script src="/script.js" defer></script>
  </head>
  <body>
    <header>
      <h1>Join room</h1>
    </header>

    <main>
      <h2>Oh hi!</h2>

      <p>
        Create or join a room
      </p>
      
      <form>
        <label>
          Room ID
          <input id="roomId" name="roomId" type="text" maxlength="100" required>
        </label>
        <button type="submit" id="submit-name">Submit</button>
      </form>
    </main>
    
    <script>
    document.querySelector('form').addEventListener('submit', function(event) {
      event.preventDefault();
      let roomId = document.getElementById('roomId').value;
      window.location = `//${window.location.host}/${roomId}/join`;
      
    });
    </script>
  </body>
</html>