<!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>