Welcome to MicDropMessages! This small webbased application allows you to chat with your friends anonymously! To start, enter your username and enter a chatroom.
-
-
-
diff --git a/html/script.js b/html/script.js index 2a38692..3364f92 100644 --- a/html/script.js +++ b/html/script.js @@ -24,6 +24,8 @@ function onload(){ socket.on("join", function(room){ chatRoom.innerHTML = "Current Chatroom : " + room; + // Show the chat div when successfully joined a room. + document.getElementById("Chat").style.display = "block"; }) socket.on("recieve", function(message){ @@ -45,7 +47,19 @@ function onload(){ } function Connect(){ - socket.emit("join", chatIDInput.value, usernameInput.value); + // Get the username and room from the input fields + var username = usernameInput.value.trim(); + var room = chatIDInput.value.trim(); + + // Check if the username and room are not empty + if(username && room){ + socket.emit("join", room, username); + chatRoom.innerHTML = "Chatroom : " + room; + // Hide the chat div initially when attempting to connect + document.getElementById("Chat").style.display = "none"; + } else { + // Maybe show an error message to the user that they need to fill in both fields + } } function Send(){ diff --git a/html/style.css b/html/style.css index 755af07..77d3fb4 100644 --- a/html/style.css +++ b/html/style.css @@ -30,6 +30,9 @@ input{ #Logo{ height: 80px; } +#Chat{ + display: none; +} #Main{ min-height: 94.5vh; /* Stretch to fill the viewport height */ width: 50%;