i was writing a website called NeoChatroom when suddently the button i made to creat a new room started glitching like crazy, changing positions, the buttons started vanishing at some point, it was chaos.
i tried changing positions on px but it just made the problem worser, then i tried asking to github copilot what the hell what was happening but he just kept giving me the same code. i tried switching variables to see if the room name would finnally show up like t should since the start, but it kept showing “Name:…” then the actual name.
please analyze my code and tell me whats wrong.
(HTML) index.html:
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Neo Chatroom</title> <style> @import url('https://fonts.googleapis.com/css?family=Varela+Round');
body {
margin: 1px;
font-family: 'Varela Round', sans-serif;
transition: background-color 0.3s, color 0.3s;
}
p, h1, h2, h3, li, button {
font-family: 'Varela Round', sans-serif;
}
button {
font-weight: 800;
font-size: larger;
padding: 12px 24px;
border-radius: 8px;
cursor: pointer;
background-color: #333;
color: white;
}
section {
background-color: rgb(85, 96, 97);
}
input, select {
max-width: 100%;
box-sizing: border-box;
}
.room-info {
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
flex-grow: 1;
}
.room-container {
display: flex;
justify-content: space-between;
align-items: center;
padding: 10px;
margin: 10px 0;
background-color: #f0f0f0;
border-radius: 8px;
position: relative;
}
.delete-button, .join-button {
position: absolute;
top: 50%;
transform: translateY(-50%);
}
.delete-button {
right: 80px;
}
.join-button {
right: 45px;
}
/* epik themes */
body.DarkPlus {
background-color: #1a1a1a;
color: white;
}
body.modernDark {
background-color: #2c2c2c;
color: white;
}
body.redVibes {
background-color: #880000;
color: white;
}
body.ZeroFarenheit {
background-color: #00f;
color: white;
}
body.contrastLight {
background-color: #f0f0f0;
color: black;
}
body.abyssDark {
background-color: #121212;
color: white;
}
body.matrix {
background-color: #0f0;
color: black;
}
body.solarizedDark {
background-color: #002b36;
color: #839496;
}
body.tomorrowNightBlue {
background-color: #1a1a2e;
color: #a0a0a0;
}
body.aesthetic {
background-color: #f7d2f7;
color: #5a2d5a;
}
</style>
</head> <body> <label for="ThemeDropDown">select ur epik theme: </label> <select id="ThemeDropDown" name="themes"> <option value="DarkPlus">DarkPlus</option> <option value="modernDark">Modern Dark</option> <option value="redVibes">Red Vibes</option> <option value="ZeroFarenheit">ZeroFarenheit</option> <option value="contrastLight">Contrast Light</option> <option value="abyssDark">Abyss Dark</option> <option value="matrix">Matrix</option> <option value="solarizedDark">Solarized Dark</option> <option value="tomorrowNightBlue">Tomorrow Night Blue</option> <option value="aesthetic">Aesthetic</option> </select> <h1>Neo Chatroom</h1> <h2>Welcome to the Neo Chatroom, here you can:<ul> <li>chat and socialize</li> <li>host chatrooms</li> <li>meet new people</li> <li>join chatrooms</li> </ul> </h2> <h3><small>NeoChatroom, since 2025 : )</small></h3> <label for="roomName">Room Name: </label> <input type="text" id="roomName" name="roomName"> <label for="privacy">Privacy: </label> <select id="privacy" name="privacy"> <option value="public">Public</option> <option value="semi-private">Semi-Private</option> <option value="private">Private</option> </select> <label for="userCap">User Cap: </label> <input type="number" id="userCap" name="userCap" min="1" max="100"> <button id="newroom" onclick="newroom()">New Room</button> <section id="roomssection"> <p><strong>Available Rooms: </strong></p> </section> <script src="webscript.js"></script> <script> const ThemeDropDown = document.getElementById('ThemeDropDown');
function changeTheme() {
const selectedTheme = ThemeDropDown.value;
document.body.className = selectedTheme;
}
ThemeDropDown.addEventListener('change', changeTheme);
document.addEventListener('DOMContentLoaded', () => {
const defaultTheme = 'DarkPlus';
document.body.classList.add(defaultTheme);
ThemeDropDown.value = defaultTheme;
});
</script>
</body> </html>
(JavaScript) webscript.js:
let hasCreatedRoom = false;
const ws = new WebSocket('ws://localhost:8080');
ws.onmessage = function(event) { const data = JSON.parse(event.data); createRoomElement(data, false); };
function newroom() { if (hasCreatedRoom) { alert("You can only create one room."); return; }
const roomName = document.getElementById("roomName").value;
if (!roomName) {
alert("Room name cannot be empty.");
return;
}
const privacy = document.getElementById("privacy").value;
const userCap = document.getElementById("userCap").value;
let roomCode = "";
if (privacy === "semi-private") {
roomCode = generateRoomCode();
}
const roomData = {
width: "100px",
height: "100px",
backgroundColor: "rgb(247, 223, 223)",
margin: "10px",
borderRadius: "10px",
name: roomName,
privacy: privacy,
code: roomCode,
userCap: userCap,
owner: true
};
ws.send(JSON.stringify(roomData));
createRoomElement(roomData, true);
hasCreatedRoom = true;
}
function createRoomElement(data, isOwner) { var newDiv = document.createElement("div"); newDiv.className = "room-container"; newDiv.style.width = data.width; newDiv.style.height = data.height; newDiv.style.backgroundColor = data.backgroundColor; newDiv.style.margin = data.margin; newDiv.style.borderRadius = data.borderRadius;
var roomInfo = document.createElement("p");
roomInfo.className = "room-info";
roomInfo.textContent = `Name: ${data.name}, Privacy: ${data.privacy}, User Cap: ${data.userCap}`;
if (data.privacy === "semi-private" && isOwner) {
roomInfo.textContent += `, Code: ${data.code}`;
}
newDiv.appendChild(roomInfo);
if (isOwner) {
var deleteButton = document.createElement("button");
deleteButton.className = "delete-button";
deleteButton.textContent = "Delete Room";
deleteButton.onclick = function() {
newDiv.remove();
hasCreatedRoom = false;
};
newDiv.appendChild(deleteButton);
}
var joinButton = document.createElement("button");
joinButton.className = "join-button";
joinButton.textContent = "Join Chatroom";
joinButton.onclick = function() {
alert(`Joining room: ${data.name}`);
};
newDiv.appendChild(joinButton);
var roomsSection = document.getElementById("roomssection");
roomsSection.appendChild(newDiv);
}
function generateRoomCode() { const characters = 'ABCDEFGHIJKLMNOPQRSTUVWXYZ'; let result = ''; for (let i = 0; i < 5; i++) { result += characters.charAt(Math.floor(Math.random() * characters.length)); } return result; }
here is s a image of the bug: the transparent thing is the join chatroom button.
please tell me what must be wrong.
