change play button to input, added an event listener for the enter key

This commit is contained in:
2023-03-15 12:43:00 -07:00
parent 8136b7625c
commit 4d74ac0f5b
2 changed files with 9 additions and 5 deletions

View File

@ -35,7 +35,7 @@ h1.name {
color: #00ffc6; color: #00ffc6;
} }
button.play { input.play {
font-family: Baloo2, sans-serif; font-family: Baloo2, sans-serif;
font-size: 500%; font-size: 500%;
padding: 4px 60px; padding: 4px 60px;
@ -46,7 +46,7 @@ button.play {
transition-duration: 0.4s; transition-duration: 0.4s;
} }
button.play:hover { input.play:hover {
background-color: #20b13f; background-color: #20b13f;
cursor: pointer; cursor: pointer;
} }

View File

@ -11,9 +11,7 @@
RUNIC RUNIC
</h1> </h1>
<input id="runic_username" class="username" placeholder="Username" maxlength="16"><br> <input id="runic_username" class="username" placeholder="Username" maxlength="16"><br>
<button class="play" onclick="play()"> <input type="button" class="play" onclick="play()" value="PLAY">
PLAY
</button>
</div> </div>
<script> <script>
var usernameinput = document.getElementById("runic_username"); var usernameinput = document.getElementById("runic_username");
@ -26,6 +24,12 @@
window.location = "game.html"; window.location = "game.html";
} }
} }
usernameinput.addEventListener("keypress", function(event) {
if (event.key === "Enter") {
event.preventDefault();
play();
}
});
</script> </script>
</body> </body>
</html> </html>