Added regex

public/script.js

@@ -5,6 +5,7 @@ const messageButton = document.querySelector("#send")
 const menuButton = document.querySelector("#menu")
 const nameButton = document.querySelector("#name")
 const nameInput = document.querySelector("input")
+const roomInput = document.querySelector("#room")
 const roomContainer = document.querySelector("#room-container")
 const messageInput = document.querySelector("textarea")
 const login = document.querySelector("#login")
@@ -28,6 +29,31 @@ const submitMessage = () => {
     messageInput.value = ""
 }
 
+const type = (newText) => {
+    const element = document.activeElement
+    element.setRangeText(
+        newText,
+        element.selectionStart,
+        element.selectionEnd,
+        "end"
+    )
+}
+
+roomInput.addEventListener("keydown", (event) => {
+    if (event.code == "Space") {
+        event.preventDefault()
+        type("-")
+    } else if (!/^[-a-z0-9]+$/i.test(event.key)) event.preventDefault()
+})
+
+const checkAlphanumeric = (event) => {
+    const text = (event.clipboardData || event.dataTransfer).getData("Text")
+    if (!/^[-a-z0-9]+$/i.test(text)) event.preventDefault()
+}
+
+roomInput.addEventListener("paste", checkAlphanumeric)
+roomInput.addEventListener("drop", checkAlphanumeric)
+
 messageInput.addEventListener("keydown", (event) => {
     if (event.key != "Enter" || event.shiftKey) return
     event.preventDefault()
@@ -68,6 +94,14 @@ if (roomName) {
     }
 }
 
+document.querySelector("#room-form").addEventListener("submit", (event) => {
+    if (!roomInput.value.trim()) {
+        event.preventDefault()
+        roomInput.required = true
+        document.querySelector("#room-button").classList.add("required")
+    }
+})
+
 menuButton.addEventListener("click", toggleOpen)
 
 if (!localStorage.getItem("name")) login.classList.remove("done")

public/style.css

@@ -36,6 +36,7 @@ body {
 #rooms {
     background-color: var(--secondary);
     width: 0;
+    padding: 20px 0;
     overflow: hidden;
     align-items: center;
     transition: width 0.6s, padding 0.6s;
@@ -294,12 +295,16 @@ button:is(:disabled, :hover) {
     display: flex;
 }
 
-:is(input[type="text"], textarea):required {
+:required {
     animation: shake 0.2s ease-in-out 0s 2;
     border-color: red !important;
 }
 
-:is(input[type="text"], textarea):required::placeholder {
+.required {
+    border-color: red !important;
+}
+
+:required::placeholder {
     color: #f20000;
 }
 
@@ -313,12 +318,14 @@ button:is(:disabled, :hover) {
 
 .input-field {
     flex: 1;
+    background-color: #3b3b3b;
     width: 100%;
+    color: #f5f5f5;
     font-size: 1em;
 }
 
 .input-field::placeholder {
-    color: var(--secondary) !important;
+    color: #f5f5f5;
 }
 
 .input-field:not(:first-child) {