Make a app where people can chat each other.'s game

Click here for free DL of the app version that can save data.

No:42182

←

Prev Next

→

Make a app where people can chat each other.
Developer User18825｜Date and time 24/2/10 23:51:54
Build time 9.191 sec｜Game capacity 2.683KB｜

Script

Sure, I can help you create a basic chat application using JavaScript and HTML within a single HTML file. Please note that this example is just a starting point, and you may need to enhance it further to handle server-side communication and user authentication. Here's the code:

To try out the chat application, you can copy the code into a new HTML file and open it in a web browser on your smartphone. The chat interface includes a message display area where sent messages will be shown and an input field at the bottom for typing and sending messages. You can tap the "Send" button or press the enter key to send a message.

←

Prev　Next

→ 　

Back　

[PR]現在の欲しいものランキング

Click here for free DL of the app version that can save data.

```html
<!DOCTYPE html>
<html>
<head>
  <title>Chat Application</title>
  <style>
    body {
      margin: 0;
      padding: 0;
    }

.chat-container {
      display: flex;
      flex-direction: column;
      height: 100vh;
      background-color: #f2f2f2;
    }

.chat-messages {
      flex: 1;
      overflow-y: scroll;
      padding: 20px;
    }

.chat-input-container {
      display: flex;
      align-items: center;
      padding: 10px;
      background-color: #e6e6e6;
    }

.chat-input {
      flex: 1;
      padding: 5px;
      border: none;
      border-radius: 4px;
    }

.chat-submit {
      padding: 5px 10px;
      margin-left: 10px;
      border: none;
      border-radius: 4px;
      background-color: #4CAF50;
      color: white;
      cursor: pointer;
    }
  </style>
</head>
<body>
  <div class="chat-container">
    <div class="chat-messages" id="chatMessages"></div>
    <div class="chat-input-container">
      <input type="text" class="chat-input" id="chatInput" placeholder="Type your message...">
      <button class="chat-submit" id="chatSubmit">Send</button>
    </div>
  </div>

if (message !== '') {
        const chatMessages = document.getElementById('chatMessages');
        const messageElement = document.createElement('div');
        messageElement.textContent = message;
        chatMessages.appendChild(messageElement);

// Clear input field
        messageInput.value = '';
        messageInput.focus();
      }
    }

// Add event listener to send button
    document.getElementById('chatSubmit').addEventListener('click', sendMessage);

// Add event listener to enter key press
    document.getElementById('chatInput').addEventListener('keydown', function(event) {
      if (event.keyCode === 13) {
        sendMessage();
      }
    });
  </script>
</body>
</html>
```