Watch-with-friends/public/index.html
2021-01-27 22:14:16 +01:00

41 lines
1.2 KiB
HTML

<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Watch With Friends!</title>
<link rel="icon" href="/img/favicon.png">
<link rel="stylesheet" href="/css/styles.min.css">
<meta name="description" content="Watch with Friends!">
<meta name="author" content="Kacper Maj">
</head>
<body>
<div class="centered-form">
<div class="centered-form__box">
<h1>Join</h1>
<form action="/chat">
<label>Display name</label>
<input type="text" name="username" placeholder="Display name" required autocomplete="off">
<label>Room</label>
<input type="text" id="roomID" name="room" placeholder="Room" required autocomplete="off">
<button type="submit">Join or create</button>
</form>
<p class="myPar">or</p>
<button type="submit" id="generateIdButton">Generate unique id</button>
</div>
</div>
<script>
const generateIdButton = document.querySelector('#generateIdButton');
const room = document.querySelector('#roomID');
generateIdButton.addEventListener('click', e => {
const id = Math.random().toString(36).substring(2, 15) + Math.random().toString(36).substring(2, 15);
room.value = id;
});
</script>
</body>
</html>